@design-factory/design-factory 15.2.3 → 16.0.0

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

@@ -1,5 +1,8 @@
 @use 'sass:color'; 
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
 // 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) {
@@ -14,38 +17,6 @@
   @return url('data:image/svg+xml;charset=utf8,' + $ret);
 }
 
-@function df-getBGHoverColor($key: 'primary') {
-  @return map.get($df-colors-transformed, $df-hover-transform + '-' + $df-hover-transform-param + '-' + $key);
-}
-
-@function df-getBGActiveColor($key: 'primary') {
-  @return map.get($df-colors-transformed, $df-active-transform + '-' + $df-active-transform-param + '-' + $key);
-}
-
-// BGsecondary active
-@function df-getBGSecondaryActiveColor($key: 'primary') {
-  @return map.get(
-    $df-colors-transformed,
-    $df-bg-active-transform + '-' + $df-bg-active-transform-param1 + '-' + $df-bg-active-transform-param2 + '-' + $key
-  ); // mix white 15
-}
-
-// BGsecondary hover
-@function df-getBGSecondaryHoverColor($key: 'primary') {
-  @return map.get(
-    $df-colors-transformed,
-    $df-bg-hover-transform + '-' + $df-bg-hover-transform-param1 + '-' + $df-bg-hover-transform-param2 + '-' + $key
-  ); // mix white 10
-}
-
-// Alert BG...
-@function df-getBGColor($key: 'primary') {
-  @return map.get(
-    $df-colors-transformed,
-    $df-bg-transform + '-' + $df-bg-transform-param1 + '-' + $df-bg-transform-param2 + '-' + $key
-  ); // mix white 5
-}
-
 //Default values
 $df-size-ratios: (
   'sm': 0.875,
@@ -68,3 +39,112 @@ $df-box-shadow: 0px 4px 8px 0px
     $color: $df-box-shadow-color,
     $alpha: - $df-box-shadow-transparent-amount
   ) !default;
+
+// To be used to remove the unit of a number (12px -> 12)
+@function strip-units($number) {
+  @return math.div($number, ($number * 0 + 1));
+}
+
+@function from-rgb($colors) {
+  @if 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 {
+    // $colors-bis: list.join($colors, ' ');
+    $red: list.nth($colors, 1);
+    $green: list.nth($colors, 2);
+    $blue: list.nth($colors, 3);
+    $color-values: $red + ' ' + $green + ' ' + $blue;
+    @return rgb($red, $green, $blue);
+  } @else {
+    @if type-of($colors) == 'string' and $colors == 'var(--df-white-rgb)' {
+      @return $white;
+    }
+    @error "Invalid value for $colors in function from-rgb().";
+  }
+  @return $colors;
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+// 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});
+  $target-opacity: $target + '-opacity';
+  @if not $shade {
+    @return rgba(var(--#{$prefix}#{$color}-500-rgb), var(--#{$prefix}#{$target-opacity}));
+  }
+  $var: map.get($shade, $target);
+  @if not var {
+    @return rgba(var(--#{$prefix}#{$color}-500-rgb), 1);
+  }
+  @if $isText == true {
+    $var: str-replace($var, ')', '-color)');
+  }
+  $var: str-replace($var, ')', '-rgb)');
+  @return rgba($var, var(--#{$prefix}#{$target-opacity}));
+}
+
+@function shades-css-var($color, $target: '', $isText: false) {
+  $shade: map.get($shade-maps,#{$color});
+  @if not $shade {
+    @return var(--#{$prefix}#{$color}-500);
+  }
+  $var : map.get($shade, $target);
+  @if not $var {
+    @return var(--#{$prefix}#{$color}-500);
+  }
+  @if $isText == true {
+    $var: str-replace($var, ')', '-color)');
+  }
+  @return $var;
+}
+
+@function shades-rgb-css-var($color, $target: '', $isText: false) {
+  $var: shades-css-var($color, $target, $isText);
+  $var: str-replace($var, ')', '-rgb)');
+  @return $var;
+}
+
+// Override functions from BS
+@function to-rgb($value) {
+  @if type-of($value) != color {
+    @return str-replace($value, ')', '-rgb)');
+  }
+  @return red($value), green($value), blue($value);
+}
+
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @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 {
+    @return str-replace($background, ')', '-color)');
+  }
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}