@eui/styles 21.0.0-alpha.4 → 21.0.0-alpha.40

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

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @function v($var, $fallback: null) {
     @if ($fallback) {
@@ -10,11 +11,24 @@
 @function map-deep-get($map, $keys...) {
     @each $key in $keys {
         @debug #{$map};
-        $map: map-get($map, $key);
+        $map: map.get($map, $key);
     }
     @return $map;
 }
+@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 strip-units($value) {
     @return math.div($value, $value * 0 + 1);
 }

package/dist/base/01-base/mixins/_accessibility.mixins.scss

@@ -68,10 +68,10 @@ $outline-size: 2px;
 }
 
 @mixin eui-accessible-focus-border() {
-    border-left: var(--eui-s-2xs) solid transparent;
+    border-left: var(--eui-s-3xs) solid transparent;
 
     &:focus:not([readonly]) {
-        border: var(--eui-s-2xs) solid var(--eui-c-focus-visible) !important;
+        border: var(--eui-s-3xs) solid var(--eui-c-focus-visible) !important;
         transition: none;
     }
 }
@@ -80,30 +80,36 @@ $outline-size: 2px;
 
 @mixin eui-accessible-focus-ring($offset: 1px) {
     &:focus:not([readonly]) {
-        outline: var(--eui-bw-s) solid var(--eui-c-s-primary-border-light) !important;
+        outline: var(--eui-bw-s) solid var(--eui-c-primary-border-light) !important;
         outline-offset: $offset !important;
         border-radius: var(--eui-br-s) !important;
     }
 }
 @mixin eui-accessible-focus-ring-rounded($offset: 1px) {
     &:focus:not([readonly]) {
-        outline: var(--eui-bw-s) solid var(--eui-c-s-primary-border-light) !important;
+        outline: var(--eui-bw-s) solid var(--eui-c-primary-border-light) !important;
         outline-offset: $offset !important;
         border-radius: var(--eui-br-max) !important;
     }
 }
 @mixin eui-accessible-focus-visible-ring($offset: 1px) {
     &:focus-visible:not([readonly]) {
-        outline: var(--eui-bw-s) solid var(--eui-c-s-primary-border-light) !important;
+        outline: var(--eui-bw-s) solid var(--eui-c-primary-border) !important;
         outline-offset: $offset !important;
         border-radius: var(--eui-br-s) !important;
     }
 }
 @mixin eui-accessible-focus-visible-ring-rounded($offset: 1px) {
     &:focus-visible:not([readonly]) {
-        outline: var(--eui-bw-s) solid var(--eui-c-s-primary-border-light) !important;
+        outline: var(--eui-bw-s) solid var(--eui-c-primary-border) !important;
         outline-offset: $offset !important;
         border-radius: var(--eui-br-max) !important;
     }
 }
 
+// Mixin for applying focus outline to pseudo-elements (like scrollbar thumbs)
+// This doesn't use :not([readonly]) since pseudo-elements don't support attribute selectors, that's why a new mixin is needed
+@mixin eui-accessible-focus-pseudo($offset: $outline-offset, $size: $outline-size) {
+    outline: $size solid var(--eui-c-focus-visible) !important;
+    outline-offset: $offset !important;
+}

package/dist/base/01-base/mixins/_eui-input.scss

@@ -5,13 +5,14 @@
 // eUI Inputs Layout & states commons
 // Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
 @mixin eui-input($element: input) {
-    font: var(--eui-f-m);
+    font: var(--eui-f);
     appearance: none;
     background-color: var(--eui-c-surface-container);
-    border: 1px solid var(--eui-c-s-secondary-border-light);
+    border: 1px solid var(--eui-c-secondary-border-light);
     border-radius: var(--eui-br-m);
     box-shadow: none;
     color: var(--eui-c-text);
+    min-height: var(--eui-s-5xl);
     padding: calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 1px); // ECL aligned
     width: 100%;
     @include a11y.eui-accessible-focus();
@@ -44,8 +45,8 @@
 
     &[disabled]:not([readonly]),
     &--disabled:not([readonly]) {
-        background-color: var(--eui-c-s-secondary-surface-light) !important;
-        border: 1px solid var(--eui-c-s-secondary-border-lighter);
+        background-color: var(--eui-c-disabled-bg) !important;
+        border: 1px solid var(--eui-c-secondary-border-lighter);
         color: var(--eui-c-text-light);
         @if $element == textarea {
             pointer-events: auto;
@@ -56,11 +57,11 @@
 
     &--invalid,
     &--danger {
-        border: 1px solid var(--eui-c-s-danger-border);
+        border: 1px solid var(--eui-c-danger-border);
     }
 
     &--loading {
-        padding-right: var(--eui-s-4xl);
+        padding-right: var(--eui-s-6xl);
 
         &-icon {
             @include loadingIndicator.loading-indicator();
@@ -68,6 +69,6 @@
     }
 
     &--clearable {
-        padding-right: var(--eui-s-4xl);
+        padding-right: var(--eui-s-6xl);
     }
 }

package/dist/base/01-base/mixins/_eui-loading.scss

@@ -3,7 +3,7 @@
         animation: 0.8s linear infinite spin;
         border: 8px solid transparent;
         border-radius: 50%;
-        border-top-color: var(--eui-c-s-primary-base);
+        border-top-color: var(--eui-c-primary-base);
         content: "";
         display: block;
         height: 80px;

package/dist/base/01-base/mixins/_eui-scrollbars.scss

@@ -1,4 +1,6 @@
-@mixin eui-scrollbars( $size: 8px, $foreground-color: var(--_eui-scrollbars-foreground-color), $background-color: var(--eui-c-s-secondary-surface-light), $border-radius: 5rem, $state: active ) {
+@use 'accessibility.mixins' as a11y;
+
+@mixin eui-scrollbars( $size: 8px, $foreground-color: var(--eui-c-divider), $background-color: var(--eui-c-secondary-surface-light), $border-radius: 5rem, $state: active ) {
     
     &::-webkit-scrollbar {
         display: inherit;
@@ -19,7 +21,7 @@
             border-radius: $border-radius;
 
             &:hover {
-                background-color: var(--eui-c-s-secondary-surface);
+                background-color: var(--eui-c-secondary-surface);
             }
         }
         @else {
@@ -27,6 +29,19 @@
         }
     }
 
+    // Apply focus and keyboard focus to scrollbar thumb when the scrollable container is focused
+    &:focus::-webkit-scrollbar-thumb {
+        @if ($state == active) {
+            @include a11y.eui-accessible-focus-pseudo;
+        }
+    }
+
+    &:focus-visible::-webkit-scrollbar-thumb {
+        @if ($state == active) {
+            @include a11y.eui-accessible-focus-pseudo;
+        }
+    }
+
     // This is the scroll container
     &::-webkit-scrollbar-track {
         @if ($state == active) {
@@ -40,10 +55,18 @@
 
     // Firefox only CSS-specific extension - Attention those properties overrides :webkit pseudos!
     @-moz-document url-prefix() {
-        scrollbar-color: var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);
+        scrollbar-color: var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);
         // scrollbar-gutter: stable;
         scrollbar-width: auto;
     }
+
+    // Firefox focus state for scrollbar
+    &:focus,
+    &:focus-visible {
+        @-moz-document url-prefix() {
+            scrollbar-color: var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light);
+        }
+    }
 }
 @mixin eui-scrollbars-inactive($size: 8px) {
     &::-webkit-scrollbar {

package/dist/base/01-base/mixins/_icon-svg.mixins.scss

@@ -41,7 +41,7 @@
 @mixin pseudoSvgIconExternalPrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-external-path);
-    background-color: var(--eui-c-s-primary);
+    background-color: var(--eui-c-primary);
 }
 @mixin pseudoSvgIconExternalBlack() {
     @include pseudoSvgIconCommonSize();
@@ -56,12 +56,12 @@
 @mixin pseudoSvgIconEllipsePrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: var(--eui-c-s-primary);
+    background-color: var(--eui-c-primary);
 }
 @mixin pseudoSvgIconEllipseDanger() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: var(--eui-c-s-danger);
+    background-color: var(--eui-c-danger);
 }
 @mixin pseudoSvgIconEllipseBlack() {
     @include pseudoSvgIconCommonSize();

package/dist/base/01-base/mixins/_loading-indicator.scss

@@ -12,7 +12,7 @@
     }
 
     &::before {
-        border: var(--eui-s-2xs) solid rgba(0, 0, 0, 0.35);
+        border: var(--eui-s-3xs) solid rgba(0, 0, 0, 0.35);
         border-radius: 100%;
     }
 
@@ -22,7 +22,7 @@
         border-color: var(--eui-c-white) transparent transparent;
         border-radius: 100%;
         border-style: solid;
-        border-width: var(--eui-s-2xs);
+        border-width: var(--eui-s-3xs);
         box-shadow: 0 0 0 1px transparent;
     }
 

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

@@ -1,131 +1,17 @@
+@use "sass:map";
+@use '../01-base' as base;
+@use './maps' as maps;
+
 // COLORS
 
 $color-map: (
-    branding: (
-        120: #003676,
-        110: #014592,
-        100: #004494,
-        80: #0057BD,
-        60: #0069E6,
-        40: #0F7DFF,
-        20: #3894FF,
-        10: #61AAFF,
-        5: #8AC0FF,
-        2: #DBECFF,
-        0: #fff
-    ),
-    primary: (
-        160: #fff,
-        140: #f3f6fa,
-        120: #d8e0fb,
-        110: #b1c0f8,
-        100: #89a1f4,
-        80: #5577f0,
-        60: #3860ed,
-        40: #2651eb,
-        20: #143fd9,
-        10: #1338bd,
-        5: #0f2fa2,
-        0: #0a1f6c
-    ),
-    neutral: (
-        0: #131313,
-        2: #1d1d1d,
-        3: #262626,
-        5: #2b2b2b,
-        10: #303030,
-        20: #595959,
-        40: #838383,
-        60: #acacac,
-        80: #d6d6d6,
-        100: #eaeaea,
-        110: #f5f5f5,
-        120: #f9f9f9,
-        140: #fcfcfc,
-        160: #fff        
-    ),
-    cta: (
-        160: #fff,
-        140: #fff9ef,
-        120: #ffebcc,
-        110: #ffe1b4,
-        100: #ffd392,
-        80: #ffcb7d,
-        60: #ffbe5c,
-        40: #fea439,
-        20: #fc8713,
-        10: #ed6c09,
-        5: #c55109,
-        0: #a84304
-    ),    
-    accent: (
-        160: #fff,
-        140: #fffcf7,
-        120: #fff2de,
-        110: #ffe5be,
-        100: #ffd89d,
-        80: #ffcb7c,
-        60: #ffbe5c,
-        40: #ffb74d,
-        20: #ffad33,
-        10: #ffa724,
-        5: #ff9d0a,
-        0: #e08700
-    ),
-    info: (
-        0: #033863,
-        5: #044e8b,
-        10: #04579b,
-        20: #0462ae,
-        40: #046abd,
-        60: #0578d6,
-        80: #2791e7,
-        100: #51a6ec,
-        110: #8cc5f2,
-        120: #c8e3f9,
-        140: #f0f7fd,
-        160: #fff
-    ),
-    success: (
-        160: #fff,
-        140: #f4faf6,
-        120: #d3ecda,
-        110: #a7d9b6,
-        100: #7cc791,
-        80: #50b46d,
-        60: #24a148,
-        40: #209141,
-        20: #1d813a,
-        10: #197132,
-        5: #16612b,
-        0: #0e401d
-    ),
-    warning: (
-        160: #fff,
-        140: #fefaf3,
-        120: #fdeacf,
-        110: #fad6a0,
-        100: #f8c170,
-        80: #f5ad41,
-        60: #f39811,
-        40: #db890f,
-        20: #c27a0e,
-        10: #aa6a0c,
-        5: #925b0a,
-        0: #613d07
-    ),
-    danger: (
-        160: #fff,
-        140: #fdf4f4,
-        120: #f8d2d4,
-        110: #f0a5a9,
-        100: #e9787e,
-        80: #e14b53,
-        60: #da1e28,
-        40: #c41b24,
-        20: #ae1820,
-        10: #99151c,
-        5: #831218,
-        0: #570c10
-    )
+    br: base.mapReverseValues(map.get(maps.$color-map, 'br')),
+    pr: base.mapReverseValues(map.get(maps.$color-map, 'pr')),
+    gr: base.mapReverseValues(map.get(maps.$color-map, 'gr')),
+    grn: base.mapReverseValues(map.get(maps.$color-map, 'grn')),      
+    cta: base.mapReverseValues(map.get(maps.$color-map, 'cta')),
+    in: base.mapReverseValues(map.get(maps.$color-map, 'in')),
+    su: base.mapReverseValues(map.get(maps.$color-map, 'su')),
+    wa: base.mapReverseValues(map.get(maps.$color-map, 'wa')),
+    da: base.mapReverseValues(map.get(maps.$color-map, 'da'))
 );