@eui/styles 21.0.0-alpha.9 → 21.0.0-next.2

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,20 +11,20 @@
 @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);
+    $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: map.merge(
             $map-reversed,
-            (nth($keys, $currentPos): map-get($map, nth($keys, $i)))
+            (nth($keys, $currentPos): map.get($map, nth($keys, $i)))
         );
     }
     @return $map-reversed;

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

@@ -94,16 +94,22 @@ $outline-size: 2px;
 }
 @mixin eui-accessible-focus-visible-ring($offset: 1px) {
     &:focus-visible:not([readonly]) {
-        outline: var(--eui-bw-s) solid var(--eui-c-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-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-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,7 +45,7 @@
 
     &[disabled]:not([readonly]),
     &--disabled:not([readonly]) {
-        background-color: var(--eui-c-secondary-surface-light) !important;
+        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 {

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-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;
@@ -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) {
@@ -44,6 +59,14 @@
         // 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/02-tokens/maps-dark-theme.scss

@@ -1,129 +1,17 @@
+@use "sass:map";
 @use '../01-base' as base;
 @use './maps' as maps;
 
 // COLORS
 
 $color-map: (
-    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'))
-    // br: (
-    //     120: #003676,
-    //     110: #014592,
-    //     100: #004494,
-    //     80: #0057BD,
-    //     60: #0069E6,
-    //     40: #0F7DFF,
-    //     20: #3894FF,
-    //     10: #61AAFF,
-    //     5: #8AC0FF,
-    //     2: #DBECFF,
-    //     0: #fff
-    // ),
-    // pr: (
-    //     160: #fff,
-    //     140: #f3f6fa,
-    //     120: #d8e0fb,
-    //     110: #b1c0f8,
-    //     100: #89a1f4,
-    //     80: #5577f0,
-    //     60: #3860ed,
-    //     40: #2651eb,
-    //     20: #143fd9,
-    //     10: #1338bd,
-    //     5: #0f2fa2,
-    //     0: #0a1f6c
-    // ),
-    // gr: (
-    //     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
-    // ),    
-    // in: (
-    //     0: #033863,
-    //     5: #044e8b,
-    //     10: #04579b,
-    //     20: #0462ae,
-    //     40: #046abd,
-    //     60: #0578d6,
-    //     80: #2791e7,
-    //     100: #51a6ec,
-    //     110: #8cc5f2,
-    //     120: #c8e3f9,
-    //     140: #f0f7fd,
-    //     160: #fff
-    // ),
-    // su: (
-    //     160: #fff,
-    //     140: #f4faf6,
-    //     120: #d3ecda,
-    //     110: #a7d9b6,
-    //     100: #7cc791,
-    //     80: #50b46d,
-    //     60: #24a148,
-    //     40: #209141,
-    //     20: #1d813a,
-    //     10: #197132,
-    //     5: #16612b,
-    //     0: #0e401d
-    // ),
-    // wa: (
-    //     160: #fff,
-    //     140: #fefaf3,
-    //     120: #fdeacf,
-    //     110: #fad6a0,
-    //     100: #f8c170,
-    //     80: #f5ad41,
-    //     60: #f39811,
-    //     40: #db890f,
-    //     20: #c27a0e,
-    //     10: #aa6a0c,
-    //     5: #925b0a,
-    //     0: #613d07
-    // ),
-    // da: (
-    //     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'))
 );