@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.3

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

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:color";
+@use "sass:map";
 
 @function toRGB($color) {
     @return red($color)+", "+green($color)+", "+blue($color);
@@ -29,9 +30,12 @@
 }
 
 @function getContrast($bgColor, $lightColor: #fff, $darkColor: #000) {
-    $r: red($bgColor);
-    $g: green($bgColor);
-    $b: blue($bgColor);
+    @if ($bgColor == null) {
+        @return null;
+    }
+    $r: color.channel($bgColor, "red", $space: rgb);
+    $g: color.channel($bgColor, "green", $space: rgb);
+    $b: color.channel($bgColor, "blue", $space: rgb);
     $ui_r: calc($r / 255);
     $ui_g: calc($g / 255);
     $ui_b: calc($b / 255);
@@ -44,13 +48,13 @@
         0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c
     );
 
-@if ($L > 0.179) {
-    @return $darkColor;
-}
+    @if ($L > 0.179) {
+        @return $darkColor;
+    }
 
-@else {
-    @return $lightColor;
-}
+    @else {
+        @return $lightColor;
+    }
 }
 
 
@@ -118,3 +122,30 @@
     }
 }
 
+@function map-shift-colors($map) {
+    $map-shift: ();
+
+    @each $map-key, $map-value in $map {
+        // @warn $map-key;
+        // @warn $map-value;
+
+        $value: false;
+
+        @if $map-key < 500 {
+            $value: shift-color($map-value, -20%);
+        } @else {
+            $value: shift-color($map-value, 20%);
+        }
+        $map-shift: map.merge(
+            $map-shift,
+            ($map-key: $value)
+        );
+    }
+
+    // @each $map-key, $map-value in $map {
+    //     @warn $map-key;
+    //     @warn $map-value;
+    // }
+
+    @return $map-shift;
+}

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

@@ -15,7 +15,7 @@
     }
     @return $map;
 }
-@function mapReverseValues($map) {
+@function map-reverse($map) {
     $keys: map.keys($map);
     $map-reversed: ();
 
@@ -45,4 +45,143 @@
 @function rem-to-px($value) {
     $stripValue: math.div($value, $value * 0 + 1);
     @return $stripValue * 16;
+}
+
+@function map-get-next($map, $key, $fallback: false, $return: value) {
+    // Check if map is valid
+    @if type-of($map) == map {
+
+        // Check if key exists in map
+        @if map-has-key($map, $key) {
+
+            // Init index counter variable
+            $i: 0;
+
+            // Init key index
+            $key-index: false;
+
+            // Traverse map for key
+            @each $map-key, $map-value in $map {
+                // Update index
+                $i: $i + 1;
+
+                // If map key found, set key index
+                @if $map-key == $key {
+                    $key-index: $i;
+                }
+
+                // If next index return next value or key based on $return
+                @if $i == $key-index + 1 {
+                    @if $return == key {
+                        @return $map-key;
+                    } @else {
+                        @return $map-value;
+                    }
+                }
+
+                // If last entry return false
+                @if $i == length($map) {
+                    @return $fallback;
+                }
+            }
+
+            @warn 'No next map item for key #{$key}';
+            @return $fallback;
+        }
+
+        @warn 'No valid key #{$key} in map';
+        @return $fallback;
+    }
+
+    @warn 'No valid map';
+    @return $fallback;
+}
+
+@function map-get-prev($map, $key, $fallback: false, $return: value, $debug: false) {
+
+    // Check if map is valid
+    @if type-of($map) == map {
+        @if $debug {
+            @debug 'Map exists #{$map}';
+        }
+
+        // Check if key exists in map
+        @if map-has-key($map, $key) {
+            @if $debug {
+                @debug 'Map has key #{$key}';
+            }
+
+            // Init index counter variable
+            $i: 1;
+
+            // Init key index
+            $key-index: false;
+            $previous-index: false;
+
+            // Traverse map for key
+            @each $map-key, $map-value in $map {
+                @if $debug {
+                    @debug 'map-key: #{$map-key}, map-value: #{$map-value}, i: #{$i}';
+                }
+
+                // If map key found, set key index
+                @if $map-key == $key {
+                    $key-index: $i;
+                    @if $debug {
+                        @debug 'found key-index: #{$key-index}';
+                    }
+                }
+
+                // Update index
+                $i: $i + 1;
+            }
+
+            // If the key-index exists, iterate through the map again
+            @if $key-index != false {
+                $previous-index: $key-index - 1;
+                $i: 1;
+
+                // If the previous key is less than one, use the fallback
+                @if $previous-index < 1 {
+                    @warn 'no previous item in map, returning map key';
+                    @return map.get($map, $key);
+                }
+                @else {
+
+                    // Traverse map for key
+                    @each $map-key, $map-value in $map {
+                         @if $i == $previous-index {
+                            @if $return == 'key' {
+                                @if $debug {
+                                    @debug 'found! returning map-key: #{$map-key}';
+                                }
+                                @return $map-key;
+                            }
+                            @else {
+                                @if $debug {
+                                    @debug 'found! returning map-value: #{$map-value}';
+                                }
+                                @return $map-value;
+                            }
+                        }
+                        
+                        // Update index
+                        $i: $i + 1;
+                    }
+                }
+            }
+            @else {
+                @warn 'No previous map item for key #{$key}';
+                @return map.get($map, $key);
+            }
+        }
+        @else {
+            @warn 'No valid key #{$key} in map';
+            @return $fallback;
+        }
+    }
+    @else {
+        @warn 'No valid map';
+        @return $fallback;
+    }
 }

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

@@ -80,14 +80,14 @@ $outline-size: 2px;
 
 @mixin eui-accessible-focus-ring($offset: 1px) {
     &:focus: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-xs) !important;
     }
 }
 @mixin eui-accessible-focus-ring-rounded($offset: 1px) {
     &:focus: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;
     }

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

@@ -1,6 +1,6 @@
 @use 'accessibility.mixins' as a11y;
 
-@mixin eui-scrollbars( $size: 10px, $foreground-color: var(--eui-c-divider), $background-color: var(--eui-c-secondary-surface-light), $border-radius: 5rem, $state: active ) {
+@mixin eui-scrollbars( $size: 9px, $foreground-color: var(--eui-c-neutral-dark-surface), $background-color: var(--eui-c-neutral-dark-surface-light), $border-radius: 5rem, $state: active ) {
     
     &::-webkit-scrollbar {
         display: inherit;
@@ -21,10 +21,10 @@
             border-radius: $border-radius;
             // Uses the border instead of width to make it grow when on hover
             background-clip: padding-box;   // make the border work
-            border: 2px solid transparent;
+            border: 1px solid transparent;
 
             &:hover {
-                background-color: var(--eui-c-secondary-surface);
+                background-color: var(--eui-c-secondary-surface-dark);
                 border: 0;
                 cursor: grab;
             }