@eui/styles 19.3.3-snapshot-1756410268787 → 21.0.0-alpha.10

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

@@ -2,22 +2,22 @@
 @use '../02-tokens/maps-dark-theme' as maps;
 
 html.eui-t-dark {
-    --eui-c-bg: var(--eui-bc-neutral-10);
+    --eui-c-bg: var(--eui-bc-gr-50);
 
-    --eui-c-surface-page: var(--eui-bc-neutral-10);
-    --eui-c-surface-shell: var(--eui-bc-neutral-10);
-    --eui-c-surface-container: var(--eui-bc-neutral-5);
-    --eui-c-surface-container-1: var(--eui-bc-neutral-10);
-    --eui-c-surface-container-2: var(--eui-bc-neutral-20);
-    --eui-c-surface-container-3: var(--eui-bc-neutral-40);    
+    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-shell: var(--eui-bc-grn-50);
+    --eui-c-surface-container: var(--eui-bc-grn-50);
+    --eui-c-surface-container-1: var(--eui-bc-grn-50);
+    --eui-c-surface-container-2: var(--eui-bc-grn-75);
+    --eui-c-surface-container-3: var(--eui-bc-grn-75);    
 
-    --eui-c-divider: var(--eui-bc-neutral-40);
-    --eui-c-divider-light: var(--eui-bc-neutral-20);    
+    --eui-c-divider: var(--eui-bc-grn-300);
+    --eui-c-divider-light: var(--eui-bc-grn-200);    
 
-    --eui-c-focus: var(--eui-bc-primary-60);
-    --eui-c-active-bg-alt: var(--eui-bc-primary-10);
+    --eui-c-focus: var(--eui-bc-pr-400);
+    --eui-c-active-bg-alt: var(--eui-bc-pr-100);
 
-    --_eui-scrollbars-foreground-color: var(--eui-bc-neutral-40);
+    --_eui-scrollbars-foreground-color: var(--eui-bc-grn-300);
 
     // COLOR SHADES
     @each $color, $shades in maps.$color-map {

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

@@ -1,6 +1,22 @@
 @use '../01-base' as base;
 @use '../02-tokens/maps' as maps;
 
+@font-face {
+  font-family: 'Inter';
+  src: url('#{base.$eui-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('#{base.$eui-assets-base-path}/fonts/inter//InterVariable-Italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+}
+
 :root {
     // COLOR BASE - eui-bc
     // -------------------
@@ -17,58 +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);
 
-    --eui-c-text: var(--eui-bc-neutral-100);
-    --eui-c-text-light: var(--eui-bc-neutral-80);
-    --eui-c-text-lighter: var(--eui-bc-neutral-60);
+    --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
     // ---------------------
@@ -76,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);
             }
         }
     }
@@ -87,8 +94,10 @@
     // TYPOGRAPHY - eui-f
     // ------------------
 
+    // TYPOGRAPHY
+    --eui-f-family: 'Inter', arial, sans-serif;
+
     // font families
-    --eui-f-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     --eui-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
 
     // font sizes
@@ -98,9 +107,81 @@
     --eui-f: var(--eui-f-m);
     --eui-f-bold: var(--eui-f-m-bold);
 
+
+    // based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps
+    // responsive fonts
+    // @each $font, $fontDef in maps.$font-map-responsive {
+    //     @each $size, $sizeDef in $fontDef {
+    //         $desktop: map-get($sizeDef, 'desktop');
+    //         $tablet: map-get($sizeDef, 'tablet');
+    //         $mobile: map-get($sizeDef, 'mobile');
+
+    //         @each $type, $def in $desktop {
+    //             --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
+    //         }
+    //         @each $type, $def in $tablet {
+    //             --eui-f-#{$font}-#{$size}-tablet-#{$type}: #{$def};
+    //         }
+    //         @each $type, $def in $mobile {
+    //             --eui-f-#{$font}-#{$size}-mobile-#{$type}: #{$def};
+    //         }
+    //         --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+
+    //         --eui-f-#{$font}-#{$size}-tablet-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+
+    //         --eui-f-#{$font}-#{$size}-mobile-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //     }
+    // }
+
+    // @include base.media(maps.$eui-bkp-tablet) {
+    //     @each $font, $fontDef in maps.$font-map-responsive {
+    //         @each $size, $sizeDef in $fontDef {
+    //             --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-tablet-regular);
+    //             --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-tablet-medium);
+    //             --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-tablet-semi-bold);
+    //             --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-tablet-bold);
+    //         }
+    //     }        
+    // }
+    // @include base.media(maps.$eui-bkp-mobile) {
+    //     @each $font, $fontDef in maps.$font-map-responsive {
+    //         @each $size, $sizeDef in $fontDef {
+    //             --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-mobile-regular);
+    //             --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-mobile-medium);
+    //             --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-mobile-semi-bold);
+    //             --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-mobile-bold);
+    //         }
+    //     }   
+    // }
+
+    // // normal fonts (non-responsive)
+    // @each $font, $fontDef in maps.$font-map {
+    //     @each $size, $sizeDef in $fontDef {
+    //         @each $type, $def in $sizeDef {
+    //             --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
+    //         }
+    //         --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //     }
+    // }
+
+    // eUI font maps
     @each $size in maps.$font-size-list {
-        --eui-f-#{$size}: normal normal 400 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
-        --eui-f-#{$size}-bold: normal normal 700 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
+        --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
+        --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
+        --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
+        --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
     }
 
     @each $size, $def in maps.$font-size-map {
@@ -213,5 +294,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/05-assets/flags/_icons-generics.scss

@@ -20,15 +20,15 @@ $ratio-4x3: 1.33333333;
     &--rounded {
         background-size: cover !important;
         border-radius: 50%;
-        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)}) !important;
+        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-squared {
-        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)}) !important;
+        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-rounded,

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

@@ -6,6 +6,12 @@
     .eui-u-f-#{$size} {
         font: var(--eui-f-#{$size}) !important;
     }
+    .eui-u-f-#{$size}-medium {
+        font: var(--eui-f-#{$size}-medium) !important;
+    }
+    .eui-u-f-#{$size}-semi-bold {
+        font: var(--eui-f-#{$size}-semi-bold) !important;
+    }
     .eui-u-f-#{$size}-bold {
         font: var(--eui-f-#{$size}-bold) !important;
     }
@@ -102,6 +108,12 @@
     text-decoration: underline !important;
     @include base.eui-accessible-focus(2px);
 }
+.eui-u-text-link-neutral-underline {
+    color: var(--eui-c-text) !important;
+    cursor: pointer !important;
+    text-decoration: underline !important;
+    @include base.eui-accessible-focus(2px);
+}
 
 .eui-u-text-link-external,
 .eui-u-text-link-external-standalone {
@@ -122,7 +134,7 @@
         background-size: 75% 75%;
         display: inline-block;
         height: var(--eui-s-m);
-        margin-left: var(--eui-s-2xs);
+        margin-left: var(--eui-s-3xs);
         width: var(--eui-s-m);
         @include base.pseudoSvgIconExternalPrimary();
     }
@@ -141,7 +153,26 @@
         background-size: 75% 75%;
         display: inline-block;
         height: var(--eui-s-m);
-        margin-left: var(--eui-s-2xs);
+        margin-left: var(--eui-s-3xs);
+        width: var(--eui-s-m);
+        @include base.pseudoSvgIconExternalPrimary();
+    }
+}
+.eui-u-text-link-neutral-external-underline {
+    color: var(--eui-c-text) !important;
+    cursor: pointer !important;
+    position: relative !important;
+    text-decoration: underline !important;
+    @include base.eui-accessible-focus(2px);
+
+    &::after {
+        background-color: transparent;
+        background-position: bottom;
+        background-repeat: no-repeat;
+        background-size: 75% 75%;
+        display: inline-block;
+        height: var(--eui-s-m);
+        margin-left: var(--eui-s-3xs);
         width: var(--eui-s-m);
         @include base.pseudoSvgIconExternalPrimary();
     }
@@ -179,40 +210,40 @@
 }
 
 .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;
-    padding: 1px var(--eui-s-2xs) !important;
+    padding: 1px var(--eui-s-3xs) !important;
 }
 
 .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-2xs) 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;
-    padding: var(--eui-s-2xs) !important;
+    background-color: var(--eui-c-accent-surface-medium) !important;
+    padding: var(--eui-s-3xs) !important;
 }
 
 .eui-u-text-highlight {
-    padding: var(--eui-s-2xs) !important;
-    background-color: var(--eui-c-s-accent-surface-light) !important;
+    padding: var(--eui-s-3xs) !important;
+    background-color: var(--eui-c-accent-surface-light) !important;
 }
 .eui-u-text-paragraph {
-    font: var(--eui-f-m) !important;
+    font: var(--eui-f) !important;
 
     margin-block-start: var(--eui-s-xs) !important;
     margin-block-end: var(--eui-s-xs) !important;
@@ -225,11 +256,11 @@
     }
 }
 .eui-u-text-list {
-    padding-inline-start: var(--eui-s-2xl) !important;
+    padding-inline-start: var(--eui-s-3xl) !important;
 }
 .eui-u-text-list-item {
-    margin-block-start: var(--eui-s-2xs) !important;
-    margin-block-end: var(--eui-s-2xs) !important;
+    margin-block-start: var(--eui-s-3xs) !important;
+    margin-block-end: var(--eui-s-3xs) !important;
 }
 
 // HEADINGS