@eui/styles 21.0.0-alpha.8 → 21.0.0-next.1

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

@@ -2,22 +2,24 @@
 @use '../02-tokens/maps-dark-theme' as maps;
 
 html.eui-t-dark {
-    --eui-c-bg: var(--eui-bc-neutral-10);
+    --eui-c-black: #fff;
+    --eui-c-white: #000;
 
-    --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-secondary-min: var(--eui-bc-gr-950);
+    --eui-c-secondary-max: var(--eui-bc-gr-25);
 
-    --eui-c-divider: var(--eui-bc-neutral-40);
-    --eui-c-divider-light: var(--eui-bc-neutral-20);    
+    --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-focus: var(--eui-bc-primary-60);
-    --eui-c-active-bg-alt: var(--eui-bc-primary-10);
+    --eui-c-divider: var(--eui-bc-grn-300);
+    --eui-c-divider-light: var(--eui-bc-grn-200);    
 
-    --_eui-scrollbars-foreground-color: var(--eui-bc-neutral-40);
+    --eui-c-focus: var(--eui-bc-pr-400);
+    --eui-c-active-bg-alt: var(--eui-bc-pr-100);
 
     // 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

@@ -30,72 +30,60 @@
         }
     }
 
-    // COLOR CONTEXT - eui-c
-    // ---------------------
+    // GENERIC CONTEXT COLORS
+    // ----------------------
 
-    --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-surface-page: var(--eui-c-bg);
-    --eui-c-surface-container: var(--eui-c-bg-light);
+    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-container: var(--eui-c-white);
 
-    --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-grn-50);
+    --eui-c-surface-container-1: var(--eui-bc-grn-75);
+    --eui-c-surface-container-2: var(--eui-bc-grn-100);
+    --eui-c-surface-container-3: var(--eui-bc-grn-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-200);
     
-    --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-200);
+    --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-500);
+    --eui-c-disabled-bg: var(--eui-bc-gr-50);
+    --eui-c-readonly: var(--eui-bc-gr-600);
 
-    --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
-    // ---------------------
+    // CONTEXT COLORS FROM PALETTES
+    // ----------------------------
 
     @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});
+            } @else if $shade == on-default {
+                --eui-c-on-#{$color}: var(--eui-bc-#{$value});
             } @else {
-                --eui-c-s-#{$color + '-' + $shade}: var(--eui-c-#{$value});
+                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$value});
             }
         }
     }
@@ -118,80 +106,81 @@
     --eui-f-bold: var(--eui-f-m-bold);
 
 
-    // font aliases
-    --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);
-    }
-
-    @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);
-            }
-        }        
+        --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);
     }
-    @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);
-            }
-        }   
-    }
-
-    @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-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
-        }
-    }
-
 
     @each $size, $def in maps.$font-size-map {
         --eui-f-size-#{$size}: #{$def};
@@ -303,5 +292,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,9 +20,9 @@ $ratio-4x3: 1.33333333;
     &--rounded {
         background-size: cover !important;
         border-radius: 50%;
-        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;
+        height: var(--eui-s-xl);    // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: var(--eui-s-xl); // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: var(--eui-s-xl) !important;  // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-squared {
@@ -40,8 +40,8 @@ $ratio-4x3: 1.33333333;
         }
 
         &.eui-flag-icon-2x {
-            height: calc(1 * #{var(--eui-s-l)});
-            width: calc(1 * #{var(--eui-s-l)}) !important;
+            height: calc(1.375 * #{var(--eui-s-l)});
+            width: calc(1.375 * #{var(--eui-s-l)}) !important;
         }
 
         &.eui-flag-icon-3x {

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

@@ -3,31 +3,27 @@
 }
 
 .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;
-}
-
-.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-danger-base) !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;
     }
@@ -204,12 +210,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,27 +223,27 @@
 }
 
 .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-primary-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-primary-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;