@eui/styles 21.0.0-next.48 → 21.0.0-next.49

package/dist/base/01-base/functions/_color.functions.scss

@@ -1,28 +1,29 @@
 @use "sass:math";
+@use "sass:color";
 
 @function toRGB($color) {
-    @return red($color) + ", " + green($color) + ", " + blue($color);
+    @return red($color)+", "+green($color)+", "+blue($color);
 }
+
 @function getContrastOld($color) {
-    $color-brightness: round(
-        (red($color) * 299) + (green($color) * 587) +
-            math.div((blue($color) * 114), 1000)
-    );
-    $light-color: round(
-        (red(#fff) * 299) + (green(#fff) * 587) +
-            math.div((blue(#fff) * 114), 1000)
-    );
+    $color-brightness: round((red($color) * 299) + (green($color) * 587) + math.div((blue($color) * 114), 1000));
+    $light-color: round((red(#fff) * 299) + (green(#fff) * 587) + math.div((blue(#fff) * 114), 1000));
+
     @if abs($color-brightness) < math.div($light-color, 1.7) {
         @return #ffffff;
-    } @else {
+    }
+
+    @else {
         @return #000000;
     }
 }
 
 @function col_r($color) {
-    @if $color <= 0.03928 {
+    @if $color <=0.03928 {
         @return math.div($color, 12.92);
-    } @else {
+    }
+
+    @else {
         @return math.pow(math.div(($color + 0.055), 1.055), (2.4));
     }
 }
@@ -39,12 +40,17 @@
     $ui_g_c: col_r($ui_g);
     $ui_b_c: col_r($ui_b);
 
-    $L: (0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c);
-    @if ($L > 0.179) {
-        @return $darkColor;
-    } @else {
-        @return $lightColor;
-    }
+    $L: (
+        0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c
+    );
+
+@if ($L > 0.179) {
+    @return $darkColor;
+}
+
+@else {
+    @return $lightColor;
+}
 }
 
 
@@ -55,131 +61,47 @@
     // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
     // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
     $rgba: red($color), green($color), blue($color);
-    $rgba2: ();
+    $rgba2: (
+    );
 
-    @for $i from 1 through 3 {
-      $rgb: nth($rgba, $i);
-      $rgb: calc($rgb / 255);
+@for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: calc($rgb / 255);
 
-      $rgb: if($rgb < .03928, calc($rgb / 12.92), math.pow(math.div($rgb + .055, 1.055), 2.4));
+    $rgb: if($rgb < .03928, calc($rgb / 12.92), math.pow(math.div($rgb + .055, 1.055), 2.4));
 
-      $rgba2: append($rgba2, $rgb);
-    }
+    $rgba2: append($rgba2, $rgb);
+}
 
-    @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
-  }
+@return .2126 * nth($rgba2, 1)+.7152 * nth($rgba2, 2)+0.0722 * nth($rgba2, 3);
+}
 
-  @function calculate-contrast($color1, $color2) {
+@function calculate-contrast($color1, $color2) {
     // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
     // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
     $luminance1: color_luminance($color1) + .05;
     $luminance2: color_luminance($color2) + .05;
     $ratio: math.div($luminance1, $luminance2);
 
-    @if $luminance2 > $luminance1 {
-      $ratio: calc(1 / $ratio);
+    @if $luminance2 >$luminance1 {
+        $ratio: calc(1 / $ratio);
     }
 
     $ratio: calc(round($ratio * 10) / 10);
 
     @return $ratio;
-  }
-
-
-// https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass
-
-// NOT used as not accurate compared to chrome extension tool
-
-// @function sRGBToLinear($colorValue) {
-//     $colorValue: calc($colorValue / 255);
-//     @if $colorValue <= 0.04045 {
-//         @return calc($colorValue / 12.92);
-//     } @else {
-//         @return calc(math.pow($colorValue + 0.055, 2.4));
-//     }
-// }
-
-// @function calculate-contrast($value1, $value2) {
-//     $luminance1: (0.2126 * sRGBToLinear(red($value1))) +
-//         (0.7152 * sRGBToLinear(green($value1))) +
-//         (0.0722 * sRGBToLinear(blue($value1)));
-//     $luminance2: (0.2126 * sRGBToLinear(red($value2))) +
-//         (0.7152 * sRGBToLinear(green($value2))) +
-//         (0.0722 * sRGBToLinear(blue($value2)));
-
-//     @return calc(
-//         (max($luminance1, $luminance2) + 0.05) /
-//             (min($luminance1, $luminance2) + 0.05)
-//     );
-// }
-
-
-
-// TO BE TESTED to auto-calculated based on a certain ratio, creating high-contrast maps, etc...
-
-@function find-safe-color($color, $ratio: 4.5) {
-    $lightness: lightness($color);
-    $value: $color;
-    $contrast: 0;
-    $i: 0;
-
-    @if $lightness < 50 {
-        $value: lighten($value, 5%);
-        $contrast: calculate-contrast($color, $value);
-        $i: $i + 1;
-
-        @while $contrast < $ratio and $i < 20 {
-            $value: lighten($value, 5%);
-            $contrast: calculate-contrast($color, $value);
-            $i: $i + 1;
-        }
-    } @else {
-        $value: darken($value, 5%);
-        $contrast: calculate-contrast($color, $value);
-        $i: $i + 1;
-
-        @while $contrast < $ratio and $i < 20 {
-            $value: darken($value, 5%);
-            $contrast: calculate-contrast($color, $value);
-            $i: $i + 1;
-        }
-    }
-
-    @if $i >= 20 {
-        @debug "Color not safe";
-    }
+}
 
-    @return ($value, $contrast);
+@function tint-color($color, $weight) {
+    @return color.mix(white, $color, $weight);
 }
 
-// interesting to generate maps of same colors and corresponding to some defaults for some
-// categories of html elements where the colors are used : to be checked later
-
-@function wcag-safe-colors($base-color) {
-    $colors: ();
-
-    $wcag30: find-safe-color($base-color, 3);
-    $wcag45: find-safe-color($base-color);
-    $wcag70: find-safe-color($base-color, 7);
-
-    // Generate shades
-    $colors: map-merge(
-        $colors,
-        (
-            "base-color": $base-color,
-            "wcag20-aa-normal-color": nth($wcag45, 1),
-            "wcag20-aa-normal-ratio": nth($wcag45, 2),
-            "wcag20-aa-large-color": nth($wcag30, 1),
-            "wcag20-aa-large-ratio": nth($wcag30, 2),
-            "wcag21-aa-input-color": nth($wcag30, 1),
-            "wcag21-aa-input-ratio": nth($wcag30, 1),
-            "wcag21-aaa-normal-color": nth($wcag70, 1),
-            "wcag21-aaa-normal-ratio": nth($wcag70, 2),
-            "wcag21-aaa-large-color": nth($wcag45, 1),
-            "wcag21-aaa-large-ratio": nth($wcag45, 2),
-        )
-    );
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+    @return color.mix(black, $color, $weight);
+}
 
-    @return $colors;
+@function shift-color($color, $weight) {
+  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 

package/dist/base/02-tokens/colors-dark-theme.scss

@@ -0,0 +1,232 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './colors-default' as defaultColors;
+
+$color-map: (
+    br: base.mapReverseValues(map.get(defaultColors.$color-map, 'br')),
+    pr: base.mapReverseValues(map.get(defaultColors.$color-map, 'pr')),
+    gr: base.mapReverseValues(map.get(defaultColors.$color-map, 'gr')),
+    grn: base.mapReverseValues(map.get(defaultColors.$color-map, 'grn')),      
+    cta: base.mapReverseValues(map.get(defaultColors.$color-map, 'cta')),
+    in: base.mapReverseValues(map.get(defaultColors.$color-map, 'in')),
+    su: base.mapReverseValues(map.get(defaultColors.$color-map, 'su')),
+    wa: base.mapReverseValues(map.get(defaultColors.$color-map, 'wa')),
+    da: base.mapReverseValues(map.get(defaultColors.$color-map, 'da'))
+);
+
+$color-state-map: (
+    branding: (
+        base: map.get(map.get($color-map, br), 900), 
+        default: map.get(map.get($color-map, br), 900), 
+        lighter: map.get(map.get($color-map, br), 700), 
+        light: map.get(map.get($color-map, br), 800), 
+        dark: map.get(map.get($color-map, br), 950), 
+        surface: map.get(map.get($color-map, br), 900), 
+        on-surface: base.getContrast(map.get(map.get($color-map, br), 900)), 
+        surface-light: map.get(map.get($color-map, br), 800), 
+        on-surface-light: base.getContrast(map.get(map.get($color-map, br), 800)), 
+        surface-dark: map.get(map.get($color-map, br), 950), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, br), 950)), 
+    ),
+    primary: (
+        base: map.get(map.get($color-map, pr), 600), 
+        default: map.get(map.get($color-map, pr), 700), 
+        lighter: map.get(map.get($color-map, pr), 500), 
+        light: map.get(map.get($color-map, pr), 600), 
+        dark: map.get(map.get($color-map, pr), 900), 
+        darker: map.get(map.get($color-map, pr), 950), 
+        surface-light: map.get(map.get($color-map, pr), 75), 
+        on-surface-light: map.get(map.get($color-map, pr), 900), 
+        surface-light-hover: map.get(map.get($color-map, pr), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, pr), 950), 
+        surface-medium: map.get(map.get($color-map, pr), 200), 
+        on-surface-medium: base.getContrast(map.get(map.get($color-map, pr), 200)), 
+        surface-medium-hover: map.get(map.get($color-map, pr), 300), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, pr), 300)),  
+        surface: map.get(map.get($color-map, pr), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, pr), 600)), 
+        surface-hover: map.get(map.get($color-map, pr), 700), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, pr), 700)), 
+        surface-dark: map.get(map.get($color-map, pr), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, pr), 900)),   
+        border: map.get(map.get($color-map, pr), 500), 
+        border-light: map.get(map.get($color-map, pr), 300), 
+        border-lighter: map.get(map.get($color-map, pr), 200), 
+    ),
+    secondary: (
+        base: map.get(map.get($color-map, gr), 500), 
+        default: map.get(map.get($color-map, gr), 800), 
+        lighter: map.get(map.get($color-map, gr), 600), 
+        light: map.get(map.get($color-map, gr), 700), 
+        dark: map.get(map.get($color-map, gr), 900), 
+        darker: map.get(map.get($color-map, gr), 950), 
+        surface-light: map.get(map.get($color-map, gr), 50), 
+        on-surface-light: map.get(map.get($color-map, gr), 900), 
+        surface-light-hover: map.get(map.get($color-map, gr), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, gr), 950), 
+        surface-medium: map.get(map.get($color-map, gr), 75), 
+        on-surface-medium: map.get(map.get($color-map, gr), 900), 
+        surface-medium-hover: map.get(map.get($color-map, gr), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, gr), 950), 
+        surface: map.get(map.get($color-map, gr), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, gr), 600)), 
+        surface-hover: map.get(map.get($color-map, gr), 700), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, gr), 700)), 
+        surface-dark: map.get(map.get($color-map, gr), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, gr), 900)), 
+        border: map.get(map.get($color-map, gr), 500), 
+        border-light: map.get(map.get($color-map, gr), 300), 
+        border-lighter: map.get(map.get($color-map, gr), 200), 
+    ),
+    neutral: (
+        base: map.get(map.get($color-map, grn), 500), 
+        default: map.get(map.get($color-map, grn), 500), 
+        lighter: map.get(map.get($color-map, grn), 600), 
+        light: map.get(map.get($color-map, grn), 700), 
+        dark: map.get(map.get($color-map, grn), 900),    
+        darker: map.get(map.get($color-map, grn), 950), 
+        surface-light: map.get(map.get($color-map, grn), 50), 
+        on-surface-light: map.get(map.get($color-map, grn), 900), 
+        surface-light-hover: map.get(map.get($color-map, grn), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, grn), 950), 
+        surface-medium: map.get(map.get($color-map, grn), 75), 
+        on-surface-medium: map.get(map.get($color-map, grn), 900), 
+        surface-medium-hover: map.get(map.get($color-map, grn), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, grn), 950),      
+        surface: map.get(map.get($color-map, grn), 400), 
+        on-surface: base.getContrast(map.get(map.get($color-map, grn), 400)), 
+        surface-hover: map.get(map.get($color-map, grn), 300), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, grn), 300)), 
+        surface-dark: map.get(map.get($color-map, grn), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, grn), 900)),     
+        border: map.get(map.get($color-map, grn), 500), 
+        border-light: map.get(map.get($color-map, grn), 400), 
+        border-lighter: map.get(map.get($color-map, grn), 300), 
+    ),
+    cta: (
+        base: map.get(map.get($color-map, cta), 400), 
+        default: map.get(map.get($color-map, cta), 900), 
+        lighter: map.get(map.get($color-map, cta), 400), 
+        light: map.get(map.get($color-map, cta), 500), 
+        dark: map.get(map.get($color-map, cta), 800), 
+        darker: map.get(map.get($color-map, cta), 900), 
+        surface-light: map.get(map.get($color-map, cta), 25), 
+        on-surface-light: map.get(map.get($color-map, cta), 800), 
+        surface-light-hover: map.get(map.get($color-map, cta), 50), 
+        on-surface-light-hover: map.get(map.get($color-map, cta), 950), 
+        surface-medium: map.get(map.get($color-map, cta), 75), 
+        on-surface-medium: map.get(map.get($color-map, cta), 900), 
+        surface-medium-hover: map.get(map.get($color-map, cta), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, cta), 950),  
+        surface: map.get(map.get($color-map, cta), 400), 
+        on-surface: base.getContrast(map.get(map.get($color-map, cta), 400)), 
+        surface-hover: map.get(map.get($color-map, cta), 500), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, cta), 500)), 
+        surface-dark: map.get(map.get($color-map, cta), 600), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, cta), 600)),  
+        border: map.get(map.get($color-map, cta), 300), 
+        border-light: map.get(map.get($color-map, cta), 100), 
+        border-lighter: map.get(map.get($color-map, cta), 75), 
+    ),
+    info: (
+        base: map.get(map.get($color-map, in), 500), 
+        default: map.get(map.get($color-map, in), 600), 
+        lighter: map.get(map.get($color-map, in), 400), 
+        light: map.get(map.get($color-map, in), 500), 
+        dark: map.get(map.get($color-map, in), 800), 
+        darker: map.get(map.get($color-map, in), 900), 
+        surface-light: map.get(map.get($color-map, in), 75), 
+        on-surface-light: map.get(map.get($color-map, in), 600), 
+        surface-light-hover: map.get(map.get($color-map, in), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, in), 800), 
+        surface-medium: map.get(map.get($color-map, in), 200), 
+        on-surface-medium: map.get(map.get($color-map, in), 950), 
+        surface-medium-hover: map.get(map.get($color-map, in), 300), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, in), 300)),       
+        surface: map.get(map.get($color-map, in), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, in), 600)),       
+        surface-hover: map.get(map.get($color-map, in), 800), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, in), 800)),       
+        surface-dark: map.get(map.get($color-map, in), 800), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, in), 800)),             
+        border: map.get(map.get($color-map, in), 400), 
+        border-light: map.get(map.get($color-map, in), 300), 
+        border-lighter: map.get(map.get($color-map, in), 200), 
+    ),
+    success: (
+        base: map.get(map.get($color-map, su), 700), 
+        default: map.get(map.get($color-map, su), 900), 
+        lighter: map.get(map.get($color-map, su), 700), 
+        light: map.get(map.get($color-map, su), 800), 
+        dark: map.get(map.get($color-map, su), 900), 
+        darker: map.get(map.get($color-map, su), 950), 
+        surface-light: map.get(map.get($color-map, su), 100), 
+        on-surface-light: map.get(map.get($color-map, su), 950), 
+        surface-light-hover: map.get(map.get($color-map, su), 200), 
+        on-surface-light-hover: map.get(map.get($color-map, su), 950), 
+        surface-medium: map.get(map.get($color-map, su), 300), 
+        on-surface-medium: base.getContrast(map.get(map.get($color-map, su), 300)),       
+        surface-medium-hover: map.get(map.get($color-map, su), 400), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, su), 400)),   
+        surface: map.get(map.get($color-map, su), 900), 
+        on-surface: base.getContrast(map.get(map.get($color-map, su), 900)),   
+        surface-hover: map.get(map.get($color-map, su), 950), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, su), 950)),   
+        surface-dark: map.get(map.get($color-map, su), 950), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, su), 950)),    
+        border: map.get(map.get($color-map, su), 600), 
+        border-light: map.get(map.get($color-map, su), 400), 
+        border-lighter: map.get(map.get($color-map, su), 300), 
+    ),
+    warning: (
+        base: map.get(map.get($color-map, wa), 500), 
+        default: map.get(map.get($color-map, wa), 900), 
+        lighter: map.get(map.get($color-map, wa), 700), 
+        light: map.get(map.get($color-map, wa), 800), 
+        dark: map.get(map.get($color-map, wa), 950), 
+        darker: map.get(map.get($color-map, wa), 950), 
+        surface-light: map.get(map.get($color-map, wa), 50), 
+        on-surface-light: map.get(map.get($color-map, wa), 900), 
+        surface-light-hover: map.get(map.get($color-map, wa), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, wa), 950), 
+        surface-medium: map.get(map.get($color-map, wa), 100), 
+        on-surface-medium: map.get(map.get($color-map, wa), 900), 
+        surface-medium-hover: map.get(map.get($color-map, wa), 200), 
+        on-surface-medium-hover: map.get(map.get($color-map, wa), 950), 
+        surface: map.get(map.get($color-map, wa), 500), 
+        on-surface: base.getContrast(map.get(map.get($color-map, wa), 500)),   
+        surface-hover: map.get(map.get($color-map, wa), 600), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, wa), 600)),   
+        surface-dark: map.get(map.get($color-map, wa), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, wa), 900)),       
+        border: map.get(map.get($color-map, wa), 400), 
+        border-light: map.get(map.get($color-map, wa), 200), 
+        border-lighter: map.get(map.get($color-map, wa), 100), 
+    ),
+    danger: (
+        base: map.get(map.get($color-map, da), 500), 
+        default: map.get(map.get($color-map, da), 600), 
+        lighter: map.get(map.get($color-map, da), 400), 
+        light: map.get(map.get($color-map, da), 500), 
+        dark: map.get(map.get($color-map, da), 700), 
+        darker: map.get(map.get($color-map, da), 800), 
+        surface-light: map.get(map.get($color-map, da), 75), 
+        on-surface-light: map.get(map.get($color-map, da), 700), 
+        surface-light-hover: map.get(map.get($color-map, da), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, da), 900), 
+        surface-medium: map.get(map.get($color-map, da), 200), 
+        on-surface-medium: map.get(map.get($color-map, da), 900), 
+        surface-medium-hover: map.get(map.get($color-map, da), 300), 
+        on-surface-medium-hover: map.get(map.get($color-map, da), 950),     
+        surface: map.get(map.get($color-map, da), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, da), 600)),   
+        surface-hover: map.get(map.get($color-map, da), 600), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, da), 700)), 
+        surface-dark: map.get(map.get($color-map, da), 800), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, da), 800)), 
+        border: map.get(map.get($color-map, da), 500), 
+        border-light: map.get(map.get($color-map, da), 300), 
+        border-lighter: map.get(map.get($color-map, da), 200), 
+    ),
+);