@design-factory/design-factory 17.0.2 → 18.0.0

package/styles/scss/utilities/_common.utilities.scss

@@ -1,8 +1,10 @@
-@use 'sass:color'; 
+@use 'sass:color';
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:list';
+@use 'sass:meta';
+
 // This function currently change all the colors #ffffff #bbbbbb and #cccccc (that you should put in the svg) by the one given in input
 // I put f for fill value.
 @function df-getSVGasURL($svg, $fig-color, $border-color, $background-color) {
@@ -46,12 +48,12 @@ $df-box-shadow: 0px 4px 8px 0px
 }
 
 @function from-rgb($colors) {
-  @if type-of($colors) == 'color' {
+  @if meta.type-of($colors) == 'color' {
     $red: color.red($colors);
     $green: color.green($colors);
     $blue: color.blue($colors);
     @return rgb($red, $green, $blue);
-  } @else if type-of($colors) == 'list' and length($colors) == 3 {
+  } @else if meta.type-of($colors) == 'list' and list.length($colors) == 3 {
     // $colors-bis: list.join($colors, ' ');
     $red: list.nth($colors, 1);
     $green: list.nth($colors, 2);
@@ -59,7 +61,7 @@ $df-box-shadow: 0px 4px 8px 0px
     $color-values: $red + ' ' + $green + ' ' + $blue;
     @return rgb($red, $green, $blue);
   } @else {
-    @if type-of($colors) == 'string' and $colors == 'var(--df-white-rgb)' {
+    @if meta.type-of($colors) == 'string' and $colors == 'var(--df-white-rgb)' {
       @return $white;
     }
     @error "Invalid value for $colors in function from-rgb().";
@@ -68,7 +70,7 @@ $df-box-shadow: 0px 4px 8px 0px
 }
 
 // stylelint-disable scss/dollar-variable-pattern
-// TODO change so that we do not put the rgb in the target as the function 
+// TODO change so that we do not put the rgb in the target as the function
 // is explicit...
 @function shades-rgba-css-var-with-opacity($color, $target: '', $isText: false) {
   $shade: map.get($shade-maps, #{$color});
@@ -87,12 +89,15 @@ $df-box-shadow: 0px 4px 8px 0px
   @return rgba($var, var(--#{$prefix}#{$target-opacity}));
 }
 
-@function shades-css-var($color, $target: '', $isText: false) {
-  $shade: map.get($shade-maps,#{$color});
+@function shades-css-var($color, $target: '', $isText: false, $isAlternative: false) {
+  @if $isAlternative == true {
+    $color: $color + '-mirror';
+  }
+  $shade: map.get($shade-maps, #{$color});
   @if not $shade {
     @return var(--#{$prefix}#{$color}-500);
   }
-  $var : map.get($shade, $target);
+  $var: map.get($shade, $target);
   @if not $var {
     @return var(--#{$prefix}#{$color}-500);
   }
@@ -110,24 +115,33 @@ $df-box-shadow: 0px 4px 8px 0px
 
 // Override functions from BS
 @function to-rgb($value) {
-  @if type-of($value) != color {
+  @if meta.type-of($value) != color {
     @return str-replace($value, ')', '-rgb)');
   }
-  @return red($value), green($value), blue($value);
+  @return color.red($value), color.green($value), color.blue($value);
 }
 
 @function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
+  @if $identifier == 'alt-body' and $target == 'bg' {
+    @return rgba(var(--#{$prefix}alt-body), var(--#{$prefix}#{$target}-opacity));
+  }
+  @if $identifier == 'body' and $target == 'bg' {
     @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
+  }
+  @if $identifier == 'body' and $target == 'text' {
     @return rgba(#{shades-rgb-css-var($identifier, 'bg-color', true)}, var(--#{$prefix}#{$target}-opacity));
   } @else {
     @return rgba(#{shades-rgb-css-var($identifier, 'bg-color')}, var(--#{$prefix}#{$target}-opacity));
   }
 }
 
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  @if type-of($background) != color {
+@function color-contrast(
+  $background,
+  $color-contrast-dark: $color-contrast-dark,
+  $color-contrast-light: $color-contrast-light,
+  $min-contrast-ratio: $min-contrast-ratio
+) {
+  @if meta.type-of($background) != color {
     @return str-replace($background, ')', '-color)');
   }
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;