diff --git a/scss/_functions.scss b/scss/_functions.scss index 30539b39302425c03b31d5898a95b5b4a5b40abe..68a23f46e0ff39946872302ab73a4987866c09ce 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -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: (); diff --git a/scss/_maps.scss b/scss/_maps.scss index 2770a67615c7445dbdb1008deeffb2ae64d25096..0b5982c610a898d921c3b6ad7d443034cc55b530 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -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) ) @@ -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; diff --git a/scss/_root.scss b/scss/_root.scss index ab0584e68a35949f81f8e2024448ca4cf1122048..e7230d8da7f3c2db26ec284f7340b1b81636adf9 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -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 + * */ }