@eui/styles 18.0.0-next.74 → 18.0.0-next.75

package/dist/base/02-tokens/_ecl/eu/typography.scss

@@ -0,0 +1,282 @@
+@use 'sass:map';
+
+// Screen
+$font-family: (
+  'default': (
+    arial,
+    sans-serif,
+  ),
+) !default;
+$font-size: (
+  '2xs': 0.625rem,
+  'xs': 0.75rem,
+  's': 0.875rem,
+  'm': 1rem,
+  'l': 1.125rem,
+  'xl': 1.25rem,
+  '2xl': 1.5rem,
+  '3xl': 1.75rem,
+  '4xl': 2rem,
+  '5xl': 2.25rem,
+  '6xl': 2.625rem,
+) !default;
+$line-height: (
+  '2xs': 1rem,
+  'xs': 1rem,
+  's': 1rem,
+  'm': 1.25rem,
+  'l': 1.5rem,
+  'xl': 1.5rem,
+  '2xl': 1.75rem,
+  '3xl': 2rem,
+  '4xl': 2.5rem,
+  '5xl': 2.75rem,
+  '6xl': 3.25rem,
+) !default;
+$line-height-prolonged: (
+  'xs': 1.25rem,
+  's': 1.25rem,
+  'm': 1.5rem,
+  'l': 1.75rem,
+  'xl': 1.75rem,
+) !default;
+$font-weight: (
+  'regular': 400,
+  'bold': 700,
+) !default;
+$font: (
+  '2xs': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '2xs'
+    ) + '/' + map.get($line-height, '2xs')} #{map.get($font-family, 'default')},
+  'xs': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xs'
+    ) + '/' + map.get($line-height, 'xs')} #{map.get($font-family, 'default')},
+  's': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 's') +
+    '/' + map.get($line-height, 's')} #{map.get($font-family, 'default')},
+  'm': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'm') +
+    '/' + map.get($line-height, 'm')} #{map.get($font-family, 'default')},
+  'l': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'l') +
+    '/' + map.get($line-height, 'l')} #{map.get($font-family, 'default')},
+  'xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xl'
+    ) + '/' + map.get($line-height, 'xl')} #{map.get($font-family, 'default')},
+  '2xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '2xl'
+    ) + '/' + map.get($line-height, '2xl')} #{map.get($font-family, 'default')},
+  '3xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '3xl'
+    ) + '/' + map.get($line-height, '3xl')} #{map.get($font-family, 'default')},
+  '4xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '4xl'
+    ) + '/' + map.get($line-height, '4xl')} #{map.get($font-family, 'default')},
+  '5xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '5xl'
+    ) + '/' + map.get($line-height, '5xl')} #{map.get($font-family, 'default')},
+  '6xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      '6xl'
+    ) + '/' + map.get($line-height, '6xl')} #{map.get($font-family, 'default')},
+) !default;
+$font-prolonged: (
+  'xs': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xs'
+    ) + '/' + map.get($line-height-prolonged, 'xs')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  's': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 's') +
+    '/' + map.get($line-height-prolonged, 's')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'm': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'm') +
+    '/' + map.get($line-height-prolonged, 'm')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'l': normal normal map.get($font-weight, 'regular') #{map.get($font-size, 'l') +
+    '/' + map.get($line-height-prolonged, 'l')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'xl': normal normal map.get($font-weight, 'regular') #{map.get(
+      $font-size,
+      'xl'
+    ) + '/' + map.get($line-height-prolonged, 'xl')} #{map.get(
+      $font-family,
+      'default'
+    )},
+) !default;
+
+// Print
+$font-family-print: (
+  'default': (
+    verdana,
+    sans-serif,
+  ),
+  'alt': (
+    arial,
+    sans-serif,
+  ),
+) !default;
+$font-size-print: (
+  '2xs': 6pt,
+  'xs': 7.5pt,
+  's': 9pt,
+  'm': 10.5pt,
+  'l': 12pt,
+  'xl': 13.5pt,
+  '2xl': 15pt,
+  '3xl': 18pt,
+  '4xl': 21pt,
+  '5xl': 24pt,
+  '6xl': 27pt,
+) !default;
+$line-height-print: (
+  '2xs': 10pt,
+  'xs': 12pt,
+  's': 12pt,
+  'm': 12pt,
+  'l': 15pt,
+  'xl': 18pt,
+  '2xl': 18pt,
+  '3xl': 21pt,
+  '4xl': 24pt,
+  '5xl': 30pt,
+  '6xl': 33pt,
+) !default;
+$line-height-prolonged-print: (
+  'xs': 15pt,
+  's': 15pt,
+  'm': 15pt,
+  'l': 18pt,
+  'xl': 21pt,
+) !default;
+$font-weight-print: (
+  'regular': 400,
+  'bold': 600,
+) !default;
+$font-print: (
+  '2xs': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '2xs'
+    ) + '/' + map.get($line-height-print, '2xs')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'xs': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xs'
+    ) + '/' + map.get($line-height-print, 'xs')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  's': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      's'
+    ) + '/' + map.get($line-height-print, 's')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'm': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'm'
+    ) + '/' + map.get($line-height-print, 'm')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'l': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'l'
+    ) + '/' + map.get($line-height-print, 'l')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  'xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xl'
+    ) + '/' + map.get($line-height-print, 'xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '2xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '2xl'
+    ) + '/' + map.get($line-height-print, '2xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '3xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '3xl'
+    ) + '/' + map.get($line-height-print, '3xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '4xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '4xl'
+    ) + '/' + map.get($line-height-print, '4xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '5xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '5xl'
+    ) + '/' + map.get($line-height-print, '5xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+  '6xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      '6xl'
+    ) + '/' + map.get($line-height-print, '6xl')} #{map.get(
+      $font-family-print,
+      'default'
+    )},
+) !default;
+$font-prolonged-print: (
+  'xs': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xs'
+    ) + '/' + map.get($line-height-prolonged-print, 'xs')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  's': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      's'
+    ) + '/' + map.get($line-height-prolonged-print, 's')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'm': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'm'
+    ) + '/' + map.get($line-height-prolonged-print, 'm')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'l': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'l'
+    ) + '/' + map.get($line-height-prolonged-print, 'l')} #{map.get(
+      $font-family,
+      'default'
+    )},
+  'xl': normal normal map.get($font-weight-print, 'regular') #{map.get(
+      $font-size-print,
+      'xl'
+    ) + '/' + map.get($line-height-prolonged-print, 'xl')} #{map.get(
+      $font-family,
+      'default'
+    )},
+) !default;

package/dist/base/02-tokens/_ecl/eu/z-index.scss

@@ -0,0 +1,8 @@
+$z-index: (
+  'highlight': 1,
+  'navigation': 10,
+  'dropdown': 15,
+  'modal': 50,
+  'overlay': 100,
+  'max': 9999,
+) !default;

package/dist/base/02-tokens/_module.scss

@@ -0,0 +1,11 @@
+@import 'colors/index';
+@import 'spacings/index';
+@import 'typography/index';
+@import 'icons/index';
+@import 'border-radius/index';
+@import 'border-width/index';
+@import 'shadows/index';
+@import 'layout/index';
+
+@import 'z-indexes';
+@import 'opacity';

package/dist/base/02-tokens/_opacity.scss

@@ -0,0 +1,7 @@
+$eui-base-tokens-opacity: (
+    none: 0,
+    25: 0.25,
+    50: 0.5,
+    75: 0.75,
+    100: 1
+);

package/dist/base/02-tokens/_z-indexes.scss

@@ -0,0 +1,28 @@
+$eui-base-tokens-z-indexes: (
+    auto: auto,
+    zero: 0,
+    root: 1,
+    input-maxlength: 2,
+    clearable-icon: 3,
+    breadcrumb: 9,
+    header: 10,
+    top-message: 12,
+    nav: 15,
+    loading-indicator: 20,
+    cdk-overlay-pane: 999,
+    logo: 1000,
+    sticky: 1040,
+    sidebar: 1044,
+    overlay: 1045,
+    btn-floating: 1046,
+    highlighted: 1047,
+    footer-action-bar: 1048,
+    modal-backdrop: 1049,
+    modal: 1050,
+    menu: 1060,
+    tooltip: 1070,
+    max: 9999,
+    cdk-overlay-container: 10000,
+    block-document: 10010,
+    growl-message: 99999
+);

package/dist/base/02-tokens/border-radius/_index.scss

@@ -0,0 +1 @@
+@import 'theme-default';

package/dist/base/02-tokens/border-radius/theme-default.scss

@@ -0,0 +1,19 @@
+@use '../_ecl/ec/shape' as EclEcShape;
+
+$eui-base-tokens-border-radius: (
+    'none': 0,
+    's': map-get(EclEcShape.$border-radius, 's'),
+    'm': map-get(EclEcShape.$border-radius, 'm'),
+    'l': map-get(EclEcShape.$border-radius, 'l'),
+    'xl': map-get(EclEcShape.$border-radius, 'xl'),
+    'max': 999px,
+);
+
+$eui-base-context-border-radius: (
+    'none': 'none',
+    's': 's',
+    'm': 'm',
+    'l': 'l',
+    'xl': 'xl',
+    'max': 'max'
+);

package/dist/base/02-tokens/border-width/_index.scss

@@ -0,0 +1 @@
+@import 'theme-default';

package/dist/base/02-tokens/border-width/theme-default.scss

@@ -0,0 +1,13 @@
+$eui-base-tokens-border-width: (
+    'none': 0,
+    'xs': 1px,
+    's': 2px,
+    'm': 4px
+);
+
+$eui-base-context-border-width: (
+    'none': 'none',
+    'xs': 'xs',
+    's': 's',
+    'm': 'm'
+);

package/dist/base/02-tokens/colors/_index.scss

@@ -0,0 +1,6 @@
+@import 'functions';
+@import 'theme-default';
+@import 'theme-eui-legacy';
+@import 'theme-eui-legacy-hc';
+@import 'theme-ecl-eu';
+@import 'theme-dark';

package/dist/base/02-tokens/colors/functions.scss

@@ -0,0 +1,273 @@
+@use "sass:math";
+
+@function getColorVariant($color, $variant: 100) {
+    @if ($variant < 100) {
+        @return mix(#ffffff, $color, (100 - $variant) * 1%);
+    } @else {
+        @return mix(#000000, $color, ($variant - 100) * 1%);
+    }
+}
+
+@function getPaletteContext($baseColor, $overrideMap: false, $neutral: false) {
+    $shadeDefs: (
+        160, 140, 130, 120, 110, 100, 80, 60, 40, 20, 10, 5, 0
+    );
+    @if $neutral {
+        $shadeDefs: (
+            160, 140, 130, 120, 110, 100, 80, 60, 40, 20, 10, 5, 2, 0
+        );
+    }
+    $paletteMap: ();
+
+    @each $shade in $shadeDefs {
+        $value: getColorVariant($baseColor, $shade);
+
+        @if $overrideMap {
+            $overrideShade: map-get($overrideMap, $shade);
+            @if $overrideShade {
+                $value: $overrideShade;
+            }
+        }
+
+        $paletteMap: map-merge(
+            $paletteMap,
+            (
+                #{$shade}: $value
+            )
+        )
+    }
+    @return $paletteMap;
+}
+
+
+@function getPaletteLegacy($baseColor, $overrideMap: false, $neutral: false) {
+    $shadeDefs: (
+        140, 130, 120, 110, 100, 75,  50,  25,  10,   5,   0
+    );
+    @if $neutral {
+        $shadeDefs: (
+            110, 100, 90, 80, 75, 50, 25, 20, 15, 10, 5, 2, 0
+        );
+    }
+    $paletteMap: ();
+
+    @each $shade in $shadeDefs {
+        $value: getColorVariant($baseColor, $shade);
+
+        @if $overrideMap {
+            $overrideShade: map-get($overrideMap, $shade);
+            @if $overrideShade {
+                $value: $overrideShade;
+            }
+        }
+
+        $paletteMap: map-merge(
+            $paletteMap,
+            (
+                #{$shade}: $value
+            )
+        )
+    }
+    @return $paletteMap;
+}
+
+
+@function mapReverseValues($map) {
+    $keys: map-keys($map);
+    $map-reversed: ();
+
+    @for $i from length($keys) through 1 {
+        $currentPos: calc(length($keys) - $i + 1);
+
+        $map-reversed: map-merge(
+            $map-reversed,
+            (nth($keys, $currentPos): map-get($map, nth($keys, $i)))
+        );
+    }
+    @return $map-reversed;
+}
+
+@function toRGB($color) {
+    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
+        ")";
+}
+@function getContrast($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)
+    );
+    @if abs($color-brightness) < math.div($light-color, 1.7) {
+        @return #ffffff;
+    } @else {
+        @return #000000;
+    }
+}
+
+@function col_r($color) {
+    @if $color <= 0.03928 {
+        @return $color / 12.92;
+    } @else {
+        @return pow((($color + 0.055) / 1.055), (2.4));
+    }
+}
+
+@function getContrastNew($bgColor, $lightColor: #fff, $darkColor: #404040) {
+    $r: red($bgColor);
+    $g: green($bgColor);
+    $b: blue($bgColor);
+    $ui_r: $r / 255;
+    $ui_g: $g / 255;
+    $ui_b: $b / 255;
+
+    $ui_r_c: col_r($ui_r);
+    $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;
+    }
+}
+
+
+// method 1 check here : very accurate contrast compared to chrome extension contrast checker tool
+// https://gist.github.com/isGabe/8959422
+
+@function color_luminance($color) {
+    // 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: ();
+
+    @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));
+
+      $rgba2: append($rgba2, $rgb);
+    }
+
+    @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+  }
+
+  @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);
+    }
+
+    $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);
+}
+
+// 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),
+        )
+    );
+
+    @return $colors;
+}
+

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

@@ -0,0 +1,10 @@
+$eui-base-tokens-colors-dark: (
+    branding: mapReverseValues(map-get($eui-base-tokens-colors, branding)),
+    primary: mapReverseValues(map-get($eui-base-tokens-colors, primary)),
+    neutral: mapReverseValues(map-get($eui-base-tokens-colors, neutral)),
+    info: mapReverseValues(map-get($eui-base-tokens-colors, info)),
+    success: mapReverseValues(map-get($eui-base-tokens-colors, success)),
+    warning: mapReverseValues(map-get($eui-base-tokens-colors, warning)),
+    danger: mapReverseValues(map-get($eui-base-tokens-colors, danger)),
+    accent: mapReverseValues(map-get($eui-base-tokens-colors, accent)),
+);