@eui/styles 21.0.0-alpha.8 → 21.0.0-alpha.9

package/dist/base/03-vars/vars-extras.scss

@@ -2,33 +2,33 @@
 @use '../02-tokens/maps' as maps;
 
 :root {
-    // COLOR RGB
+    // // COLOR RGB
 
-    @each $color, $shades in maps.$color-map {
-        @each $shade, $value in $shades {
-            --eui-bc-#{$color + '-' + $shade}-rgb: #{base.toRGB($value)};
-            --eui-bc-#{$color + '-' + $shade}-rgb-contrast: #{base.toRGB(base.getContrast($value))};
-        }
-    }
+    // @each $color, $shades in maps.$color-map {
+    //     @each $shade, $value in $shades {
+    //         --eui-bc-#{$color + '-' + $shade}-rgb: #{base.toRGB($value)};
+    //         --eui-bc-#{$color + '-' + $shade}-rgb-contrast: #{base.toRGB(base.getContrast($value))};
+    //     }
+    // }
 
-    // COLOR CONTEXT RGB
+    // // COLOR CONTEXT RGB
 
-    --eui-c-white-rgb: var(--eui-bc-neutral-0-rgb);
-    --eui-c-neutral-min-rgb: var(--eui-bc-neutral-0-rgb);
-    --eui-c-black-rgb: var(--eui-bc-neutral-160-rgb);
-    --eui-c-neutral-max-rgb: var(--eui-bc-neutral-160-rgb);
+    // --eui-c-white-rgb: var(--eui-bc-neutral-0-rgb);
+    // --eui-c-neutral-min-rgb: var(--eui-bc-neutral-0-rgb);
+    // --eui-c-black-rgb: var(--eui-bc-neutral-160-rgb);
+    // --eui-c-neutral-max-rgb: var(--eui-bc-neutral-160-rgb);
 
-    @each $color, $shades in maps.$color-context-map {
-        @each $shade, $value in $shades {
-            $color-value: #{$color + '-' + $value};
+    // @each $color, $shades in maps.$color-context-map {
+    //     @each $shade, $value in $shades {
+    //         $color-value: #{$color + '-' + $value};
 
-            @if $shade == base {
-                --eui-c-#{$color}-rgb: var(--eui-bc-#{$color-value}-rgb);
-                --eui-c-#{$color}-rgb-contrast: var(--eui-bc-#{$color-value}-rgb-contrast);
-            } @else {
-                --eui-c-#{$color + '-' + $shade}-rgb: var(--eui-bc-#{$color-value}-rgb);
-                --eui-c-#{$color + '-' + $shade}-rgb-contrast: var(--eui-bc-#{$color-value}-rgb-contrast);
-            }
-        }
-    }    
+    //         @if $shade == base {
+    //             --eui-c-#{$color}-rgb: var(--eui-bc-#{$color-value}-rgb);
+    //             --eui-c-#{$color}-rgb-contrast: var(--eui-bc-#{$color-value}-rgb-contrast);
+    //         } @else {
+    //             --eui-c-#{$color + '-' + $shade}-rgb: var(--eui-bc-#{$color-value}-rgb);
+    //             --eui-c-#{$color + '-' + $shade}-rgb-contrast: var(--eui-bc-#{$color-value}-rgb-contrast);
+    //         }
+    //     }
+    // }    
 }

package/dist/base/03-vars/vars.scss

@@ -33,59 +33,47 @@
     // COLOR CONTEXT - eui-c
     // ---------------------
 
-    --eui-c-white: var(--eui-bc-neutral-0);
-    --eui-c-black: var(--eui-bc-neutral-160);
+    // generic context colors reused accross components
+    --eui-c-white: #fff;
+    --eui-c-black: #000;
 
-    --eui-c-neutral-min: var(--eui-bc-neutral-0);
-    --eui-c-neutral-max: var(--eui-bc-neutral-160);
+    --eui-c-secondary-min: var(--eui-bc-gr-25);
+    --eui-c-secondary-max: var(--eui-bc-gr-950);
 
-    --eui-c-bg: var(--eui-bc-neutral-2); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
-    --eui-c-bg-light: var(--eui-bc-neutral-0); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
+    --eui-c-bg: var(--eui-bc-gr-25); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
+    --eui-c-bg-light: var(--eui-c-white); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
     --eui-c-surface-page: var(--eui-c-bg);
     --eui-c-surface-container: var(--eui-c-bg-light);
 
-    --eui-c-surface-shell: var(--eui-bc-neutral-3);
-    --eui-c-surface-container-1: var(--eui-bc-neutral-5);
-    --eui-c-surface-container-2: var(--eui-bc-neutral-10);
-    --eui-c-surface-container-3: var(--eui-bc-neutral-20);
+    --eui-c-surface-shell: var(--eui-bc-gr-50);
+    --eui-c-surface-container-1: var(--eui-bc-gr-75);
+    --eui-c-surface-container-2: var(--eui-bc-gr-100);
+    --eui-c-surface-container-3: var(--eui-bc-gr-200);
 
-    // if eUI neutral palette used : 100-80-60
-    --eui-c-text: var(--eui-bc-neutral-160);
-    --eui-c-text-light: var(--eui-bc-neutral-140);
-    --eui-c-text-lighter: var(--eui-bc-neutral-120);
+    --eui-c-text: var(--eui-bc-gr-950);
+    --eui-c-text-light: var(--eui-bc-gr-800);
+    --eui-c-text-lighter: var(--eui-bc-gr-700);
+    --eui-c-text-lightest: var(--eui-bc-gr-600);
 
-    --eui-c-focus-visible: var(--eui-bc-primary-100);
-    --eui-c-focus: var(--eui-bc-primary-20);
+    --eui-c-focus-visible: var(--eui-bc-pr-600);
+    --eui-c-focus: var(--eui-bc-pr-400);
     
-    --eui-c-hover: var(--eui-bc-primary-5);
-    --eui-c-hover-disabled: var(--eui-bc-neutral-10);
+    --eui-c-hover: var(--eui-bc-pr-75);
+    --eui-c-hover-disabled: var(--eui-bc-gr-100);
 
-    --eui-c-active: var(--eui-bc-primary-100);
-    --eui-c-active-bg: var(--eui-bc-primary-10);
-    --eui-c-active-bg-alt: var(--eui-bc-primary-40);
+    --eui-c-active: var(--eui-bc-pr-600);
+    --eui-c-active-bg: var(--eui-bc-pr-100);
+    --eui-c-active-bg-alt: var(--eui-bc-pr-300);
 
-    --eui-c-disabled: var(--eui-bc-neutral-60);
-    --eui-c-disabled-bg: var(--eui-bc-neutral-20);
-    --eui-c-readonly: var(--eui-bc-neutral-80);
+    --eui-c-disabled: var(--eui-bc-gr-400);
+    --eui-c-disabled-bg: var(--eui-bc-gr-200);
+    --eui-c-readonly: var(--eui-bc-gr-500);
 
-    --eui-c-link: var(--eui-bc-primary-100);
+    --eui-c-link: var(--eui-bc-pr-600);
 
-    --eui-c-divider: var(--eui-bc-neutral-20);
-    --eui-c-divider-light: var(--eui-bc-neutral-10);
+    --eui-c-divider: var(--eui-bc-gr-200);
+    --eui-c-divider-light: var(--eui-bc-gr-100);
 
-    @each $color, $shades in maps.$color-context-map {
-        @each $shade, $value in $shades {
-            $color-value: #{$color + '-' + $value};
-
-            @if $shade == base {
-                --eui-c-#{$color}: var(--eui-bc-#{$color-value});
-                --eui-c-#{$color}-contrast: var(--eui-bc-#{$color-value}-contrast);
-            } @else {
-                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$color-value});
-                --eui-c-#{$color + '-' + $shade}-contrast: var(--eui-bc-#{$color-value}-contrast);
-            }
-        }
-    }
 
     // COLOR STATE - eui-c-s
     // ---------------------
@@ -93,9 +81,11 @@
     @each $color, $shades in maps.$color-state-map {
         @each $shade, $value in $shades {
             @if $shade == default {
-                --eui-c-s-#{$color}: var(--eui-c-#{$value});
+                --eui-c-#{$color}: var(--eui-bc-#{$value});
+                --eui-c-#{$color}-contrast: var(--eui-bc-#{$value}-contrast);
             } @else {
-                --eui-c-s-#{$color + '-' + $shade}: var(--eui-c-#{$value});
+                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$value});
+                --eui-c-#{$color + '-' + $shade}-contrast: var(--eui-bc-#{$value}-contrast);
             }
         }
     }
@@ -127,6 +117,8 @@
         --eui-f-#{$size}-bold: normal normal 700 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
     }
 
+    // responsive fonts
+
     @each $font, $fontDef in maps.$font-map-responsive {
         @each $size, $sizeDef in $fontDef {
             $desktop: map-get($sizeDef, 'desktop');
@@ -180,6 +172,8 @@
         }   
     }
 
+    // normal fonts (non-responsive)
+    
     @each $font, $fontDef in maps.$font-map {
         @each $size, $sizeDef in $fontDef {
             @each $type, $def in $sizeDef {
@@ -303,5 +297,5 @@
     --eui-base-animation-delay: 0s;
     --eui-base-animation-direction: normal;
     --eui-base-animation-fill-mode: forwards;    // this prevents the animation from restarting
-    --eui-base-animation-background-color: var(--eui-c-s-primary-surface-light);
+    --eui-base-animation-background-color: var(--eui-c-primary-surface-light);
 }

package/dist/base/99-utilities/default/others/_eui-u-border-states.scss

@@ -3,31 +3,31 @@
 }
 
 .eui-u-border-state-primary {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-primary-base) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-primary-base) !important;
 }
 
 .eui-u-border-state-secondary {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-secondary-border) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-secondary-border) !important;
 }
 
 .eui-u-border-state-info {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-info-base) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-info-base) !important;
 }
 
 .eui-u-border-state-success {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-success-base) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-success-base) !important;
 }
 
 .eui-u-border-state-warning {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-warning-base) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-warning-base) !important;
 }
 
 .eui-u-border-state-danger {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-danger-base) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-danger-base) !important;
 }
 
 .eui-u-border-state-accent {
-    border-left: var(--eui-bw-m) solid var(--eui-c-s-accent-border) !important;
+    border-left: var(--eui-bw-m) solid var(--eui-c-accent-border) !important;
 }
 
 .eui-u-border-bottom-separator {

package/dist/base/99-utilities/default/tokens/_color-states.scss

@@ -5,31 +5,31 @@
     @each $shade, $value in $shades {
         @if ($shade == 'default') {
             .eui-u-c-s-#{$color} {
-                color: var(--eui-c-s-#{$color}) !important;
+                color: var(--eui-c-#{$color}) !important;
             };
         }@else {
             @if ($shade == 'surface-light') {
                 .eui-u-c-s-#{$color + '-' + $shade} {
-                    background-color: var(--eui-c-s-#{$color + '-' + $shade}) !important;
-                    color: var(--eui-c-s-#{$color + '-on-surface-light'}) !important;
+                    background-color: var(--eui-c-#{$color + '-' + $shade}) !important;
+                    color: var(--eui-c-#{$color + '-on-surface-light'}) !important;
                 }
                 .eui-u-c-s-#{$color + '-' + $shade}:hover {
-                    background-color: var(--eui-c-s-#{$color + '-surface-light-hover'}) !important;
+                    background-color: var(--eui-c-#{$color + '-surface-light-hover'}) !important;
                 }
             }@else {
                 @if ($shade == 'surface') {
                     .eui-u-c-s-#{$color + '-' + $shade} {
-                        background-color: var(--eui-c-s-#{$color + '-' + $shade}) !important;
-                        color: var(--eui-c-s-#{$color + '-surface-contrast'}) !important;
+                        background-color: var(--eui-c-#{$color + '-' + $shade}) !important;
+                        color: var(--eui-c-#{$color + '-surface-contrast'}) !important;
                     }
                     .eui-u-c-s-#{$color + '-' + $shade}:hover {
-                        background-color: var(--eui-c-s-#{$color + '-surface-hover'}) !important;
-                        color: var(--eui-c-s-#{$color + '-surface-hover-contrast'}) !important;
+                        background-color: var(--eui-c-#{$color + '-surface-hover'}) !important;
+                        color: var(--eui-c-#{$color + '-surface-hover-contrast'}) !important;
                     }                    
                 } @else {
                     @if ($shade == 'border' or $shade == 'border-light') {
                         .eui-u-c-s-#{$color + '-' + $shade} {
-                            border: 1px solid var(--eui-c-s-#{$color + '-' + $shade}) !important;
+                            border: 1px solid var(--eui-c-#{$color + '-' + $shade}) !important;
                         }
                     } 
                 }

package/dist/base/99-utilities/default/tokens/_colors.scss

@@ -1,6 +1,5 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../../base/02-tokens/maps' as maps;
 
-// in v18, default utilities are mapping the context colors
 .eui-u-c-black {
     color: var(--eui-c-black) !important;
 }
@@ -20,22 +19,20 @@
 }
 
 
-// context colors
-@each $color, $shades in tokens.$color-context-map {
+@each $color, $shades in maps.$color-state-map {
     @each $shade, $value in $shades {
-        @if $shade != border and $shade != hover {
+        @if $shade == default {
+            .eui-u-c-#{$color} {
+                color: var(--eui-c-#{$color}) !important;
+            };
 
-            @if $shade == base {
-                .eui-u-c-#{$color} {
-                    color: var(--eui-c-#{$color}) !important;
-                };
-
-                .eui-u-c-bg-#{$color} {
-                    background-color: var(--eui-c-#{$color}) !important;
-                    color: var(--eui-c-#{$color}-contrast) !important;
-                }
+            .eui-u-c-bg-#{$color} {
+                background-color: var(--eui-c-#{$color}) !important;
+                color: var(--eui-c-#{$color}-contrast) !important;
+            }
 
-            } @else {
+        } @else {
+            @if $shade == light or $shade == lighter or $shade == dark or $shade == darker or $shade == surface-light or $shade == surface-lighter {
                 .eui-u-c-#{$color + '-' + $shade} {
                     color: var(--eui-c-#{$color + '-' + $shade}) !important;
                 };
@@ -43,8 +40,38 @@
                 .eui-u-c-bg-#{$color + '-' + $shade} {
                     background-color: var(--eui-c-#{$color + '-' + $shade}) !important;
                     color: var(--eui-c-#{$color + '-' + $shade}-contrast) !important;
-                }
+                }                
             }
         }
     }
 }
+
+
+
+// @each $color, $shades in tokens.$color-state-map {
+//     @each $shade, $value in $shades {
+//         @if $shade != border and $shade != hover {
+
+//             @if $shade == base {
+//                 .eui-u-c-#{$color} {
+//                     color: var(--eui-c-#{$color}) !important;
+//                 };
+
+//                 .eui-u-c-bg-#{$color} {
+//                     background-color: var(--eui-c-#{$color}) !important;
+//                     color: var(--eui-c-#{$color}-contrast) !important;
+//                 }
+
+//             } @else {
+//                 .eui-u-c-#{$color + '-' + $shade} {
+//                     color: var(--eui-c-#{$color + '-' + $shade}) !important;
+//                 };
+
+//                 .eui-u-c-bg-#{$color + '-' + $shade} {
+//                     background-color: var(--eui-c-#{$color + '-' + $shade}) !important;
+//                     color: var(--eui-c-#{$color + '-' + $shade}-contrast) !important;
+//                 }
+//             }
+//         }
+//     }
+// }

package/dist/base/99-utilities/default/tokens/_typography.scss

@@ -204,12 +204,12 @@
 }
 
 .eui-u-text-code {
-    color: var(--eui-c-s-danger);
+    color: var(--eui-c-danger);
     word-wrap: break-word !important;
 }
 
 .eui-u-text-kbd {
-    background-color: var(--eui-c-s-secondary) !important; // WCAG2 AA compliant
+    background-color: var(--eui-c-secondary) !important; // WCAG2 AA compliant
     border-radius: var(--eui-br-m) !important;
     color: var(--eui-c-white) !important;
     font-size: var(--eui-f-s) !important;
@@ -217,24 +217,24 @@
 }
 
 .eui-u-text-pre {
-    color: var(--eui-c-s-danger) !important;
+    color: var(--eui-c-danger) !important;
     display: block !important;
     font-size: 90% !important;
 }
 
 .eui-u-text-blockquote {
-    border-left: var(--eui-s-3xs) solid var(--eui-c-s-secondary-border-light) !important;
+    border-left: var(--eui-s-3xs) solid var(--eui-c-secondary-border-light) !important;
     padding: var(--eui-s-xs) var(--eui-s-m) !important;
 }
 
 .eui-u-text-mark {
-    background-color: var(--eui-c-s-accent-surface-medium) !important;
+    background-color: var(--eui-c-accent-surface-medium) !important;
     padding: var(--eui-s-3xs) !important;
 }
 
 .eui-u-text-highlight {
     padding: var(--eui-s-3xs) !important;
-    background-color: var(--eui-c-s-accent-surface-light) !important;
+    background-color: var(--eui-c-accent-surface-light) !important;
 }
 .eui-u-text-paragraph {
     font: var(--eui-f-m) !important;