Skip to content

rgba-css-var only using the keys #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julien-deramond wants to merge 3 commits into
base: main
Choose a base branch
from
Open

rgba-css-var only using the keys #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52282a7
Temp
julien-deramond Mar 3, 2022
985aa86
Modifications
julien-deramond Mar 3, 2022
4f9667d
Adding solutions in comments
louismaximepiton Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 53 additions & 1 deletion scss/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,65 @@
@function rgba-css-var($identifier, $target) {
@if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
} @if $identifier == "body" and $target == "text" { // Missing @else here in the original code
@return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
}
}

/* *
* First solution start
*
* Just need to uncomment below code when testing the first solution and comment the basic `rgba-css-var` function above
* */

// @function rgba-css-var($identifier, $target) {
// @if $identifier == "body" and $target == "bg" {
// @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// } @if $identifier == "body" and $target == "text" {
// @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// } @else {
// @return rgba(var(--#{$variable-prefix}#{$target}-#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// }
// }


/* *
* Second solution start
*
* Just need to uncomment below code when testing the second solution and comment the basic `rgba-css-var` function above
* */

// @function rgba-css-var($identifier, $target, $value: null) {
// @if $identifier == "body" and $target == "bg" {
// @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// } @else if $identifier == "body" and $target == "text" {
// @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// } @else if $value != null {
// @return rgba(to-rgb($value), var(--#{$variable-prefix}#{$target}-opacity));
// } @else {
// @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// }
// }

/* *
* Solutions proposal end
* */

@function rgba-css-var-with-value($identifier, $target, $value: null) {
@if ($identifier == "body" or $identifier == "white") and $target == "bg" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else if ($identifier == "body" or $identifier == "white") and $target == "text" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// Example of using $value for border colors redefinitions
} @else if ($identifier == "body" or $identifier == "white") and $target == "border" {
@return rgba(var(--#{$variable-prefix}#{$value}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
}
}

@function map-loop($map, $func, $args...) {
$_map: ();

Expand Down
47 changes: 41 additions & 6 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $utilities-colors: $theme-colors-rgb !default;
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"black": to-rgb($black), // .bg-black doesn't exist so we could remove it
"white": to-rgb($white),
"body": to-rgb($body-color)
)
Expand All @@ -31,22 +31,57 @@ $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text")
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
"black": to-rgb($black), // .bg-black doesn't exist so we could remove it
"white": to-rgb($warning),
"body": null,
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;

/* *
* Second solution start
*
* Just need to uncomment below code when testing the second solution and comment the code above
* */

// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;

// $utilities-colors: $theme-colors !default;

// $utilities-text: map-merge(
// $utilities-colors,
// (
// "black": $black,
// "white": $white,
// "body": $body-color
// )
// ) !default;
// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text", "$value") !default;

// $utilities-bg: map-merge(
// $utilities-colors,
// (
// "black": $success,
// "white": $primary,
// "body": null,
// )
// ) !default;
// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg", "$value") !default;

/* *
* Solutions proposal end
* */
// scss-docs-end utilities-bg-colors

// scss-docs-start utilities-border-colors
$utilities-border: map-merge(
$utilities-colors,
(
"white": to-rgb($white)
"white": "warning",
"body": "danger"
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var-with-value, "$key", "border", "$value") !default;
// scss-docs-end utilities-border-colors

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
Expand Down
22 changes: 22 additions & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,26 @@
--#{$variable-prefix}border-radius: #{$border-radius};
// scss-docs-end root-border-var
// stylelint-enable custom-property-empty-line-before

/* *
* First solution start
*
* Just need to uncomment below code when testing the first solution
* */

// @each $color, $value in $utilities-text {
// --#{$variable-prefix}text-#{$color}-rgb: #{$value};
// }

// @each $color, $value in $utilities-bg {
// --#{$variable-prefix}bg-#{$color}-rgb: #{$value};
// }

// @each $color, $value in $utilities-border {
// --#{$variable-prefix}border-#{$color}-rgb: #{$value};
// }

/* *
* Solutions proposal end
* */
}