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

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

@@ -1,31 +1,61 @@
+@use 'sass:map';
 @use '../01-base' as base;
-@use '../02-tokens/maps-dark-theme' as maps;
+@use '../02-tokens/colors-dark-theme' as colors;
 
 html.eui-t-dark {
     --eui-c-black: #fff;
     --eui-c-white: #000;
 
-    --eui-c-secondary-min: var(--eui-bc-gr-950);
-    --eui-c-secondary-max: var(--eui-bc-gr-25);
 
-    --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-secondary-min: #{map.get(map.get(colors.$color-map, gr), 950)};
+    --eui-c-secondary-max: #{map.get(map.get(colors.$color-map, gr), 25)};
 
-    --eui-c-divider: var(--eui-bc-grn-300);
-    --eui-c-divider-light: var(--eui-bc-grn-200);    
+    --eui-c-surface-page: #{map.get(map.get(colors.$color-map, grn), 25)};
+    --eui-c-surface-shell: #{map.get(map.get(colors.$color-map, grn), 50)};
+    --eui-c-surface-container: #{map.get(map.get(colors.$color-map, grn), 50)};
+    --eui-c-surface-container-1: #{map.get(map.get(colors.$color-map, grn), 50)};
+    --eui-c-surface-container-2: #{map.get(map.get(colors.$color-map, grn), 75)};
+    --eui-c-surface-container-3: #{map.get(map.get(colors.$color-map, grn), 75)};
 
-    --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 {
+    --eui-c-text: #{map.get(map.get(colors.$color-map, gr), 950)};
+    --eui-c-text-light: #{map.get(map.get(colors.$color-map, gr), 800)};
+    --eui-c-text-lighter: #{map.get(map.get(colors.$color-map, gr), 700)};
+    --eui-c-text-lightest: #{map.get(map.get(colors.$color-map, gr), 600)};
+
+    --eui-c-focus-visible: #{map.get(map.get(colors.$color-map, pr), 600)};
+    --eui-c-focus: #{map.get(map.get(colors.$color-map, pr), 400)};
+    
+    --eui-c-hover: #{map.get(map.get(colors.$color-map, pr), 75)};
+    --eui-c-hover-disabled: #{map.get(map.get(colors.$color-map, gr), 100)};
+
+    --eui-c-active: #{map.get(map.get(colors.$color-map, pr), 600)};
+    --eui-c-active-bg: #{map.get(map.get(colors.$color-map, pr), 200)};
+    --eui-c-active-bg-alt: #{map.get(map.get(colors.$color-map, pr), 100)};
+    --eui-c-active-bg-light: #{map.get(map.get(colors.$color-map, pr), 100)};
+    --eui-c-active-bg-lighter: #{map.get(map.get(colors.$color-map, pr), 75)};
+
+    --eui-c-disabled: #{map.get(map.get(colors.$color-map, gr), 500)};
+    --eui-c-disabled-bg: #{map.get(map.get(colors.$color-map, gr), 50)};
+    --eui-c-readonly: #{map.get(map.get(colors.$color-map, gr), 600)};
+
+    --eui-c-link: #{map.get(map.get(colors.$color-map, pr), 600)};
+
+    --eui-c-divider: #{map.get(map.get(colors.$color-map, gr), 300)};
+    --eui-c-divider-dark: #{map.get(map.get(colors.$color-map, gr), 100)};
+    --eui-c-divider-light: #{map.get(map.get(colors.$color-map, gr), 200)};
+
+
+    // CONTEXT COLORS FROM PALETTES
+    // ----------------------------
+
+    @each $color, $shades in colors.$color-state-map {
         @each $shade, $value in $shades {
-            --eui-bc-#{$color + '-' + $shade}: #{$value};
-            --eui-bc-#{$color + '-' + $shade}-contrast: #{base.getContrast($value)};
+            @if $shade == default {
+                --eui-c-#{$color}: #{$value};
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: #{$value};
+            }
         }
     }
 }

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

@@ -1,90 +1,84 @@
+@use 'sass:map';
 @use '../01-base' as base;
 @use '../02-tokens/maps' as maps;
+@use '../02-tokens/colors-default' as colors;
 
 @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-display: block;
 }
 
 @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-display: block;
   font-style: italic;
 }
 
 :root {
-    // COLOR BASE - eui-bc
-    // -------------------
-
-    --eui-bc-transparent: transparent;
-
-    @each $color, $shades in maps.$color-map {
-        @each $shade, $value in $shades {
-            --eui-bc-#{$color + '-' + $shade}: #{$value};
-            --eui-bc-#{$color + '-' + $shade}-contrast: #{base.getContrast($value)};
-        }
-    }
-
     // GENERIC CONTEXT COLORS
     // ----------------------
-
-    // generic context colors reused accross components
+    
+    --eui-c-transparent: transparent;
     --eui-c-white: #fff;
     --eui-c-black: #000;
 
-    --eui-c-secondary-min: var(--eui-bc-gr-25);
-    --eui-c-secondary-max: var(--eui-bc-gr-950);
+    --eui-c-secondary-min: #{map.get(map.get(colors.$color-map, grn), 25)};
+    --eui-c-secondary-max: #{map.get(map.get(colors.$color-map, grn), 950)};
 
-    --eui-c-surface-page: var(--eui-bc-gr-25);
+    --eui-c-surface-page: #{map.get(map.get(colors.$color-map, grn), 25)};
     --eui-c-surface-container: var(--eui-c-white);
-
-    --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-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-pr-600);
-    --eui-c-focus: var(--eui-bc-pr-200);
     
-    --eui-c-hover: var(--eui-bc-pr-75);
-    --eui-c-hover-disabled: var(--eui-bc-gr-100);
+    --eui-c-surface-shell: #{map.get(map.get(colors.$color-map, grn), 50)};
+    --eui-c-surface-container-1: #{map.get(map.get(colors.$color-map, grn), 75)};
+    --eui-c-surface-container-2: #{map.get(map.get(colors.$color-map, grn), 100)};
+    --eui-c-surface-container-3: #{map.get(map.get(colors.$color-map, grn), 200)};
+
+    --eui-c-text: #{map.get(map.get(colors.$color-map, gr), 950)};
+    --eui-c-text-light: #{map.get(map.get(colors.$color-map, gr), 800)};
+    --eui-c-text-lighter: #{map.get(map.get(colors.$color-map, gr), 700)};
+    --eui-c-text-lightest: #{map.get(map.get(colors.$color-map, gr), 600)};
+
+    --eui-c-focus-visible: #{map.get(map.get(colors.$color-map, pr), 600)};
+    --eui-c-focus: #{map.get(map.get(colors.$color-map, pr), 200)};
+    
+    --eui-c-hover: #{map.get(map.get(colors.$color-map, pr), 75)};
+    --eui-c-hover-disabled: #{map.get(map.get(colors.$color-map, gr), 100)};
+
+    --eui-c-active: #{map.get(map.get(colors.$color-map, pr), 600)};
+    --eui-c-active-bg: #{map.get(map.get(colors.$color-map, pr), 200)};
+    --eui-c-active-bg-alt: #{map.get(map.get(colors.$color-map, pr), 300)};
+    --eui-c-active-bg-light: #{map.get(map.get(colors.$color-map, pr), 100)};
+    --eui-c-active-bg-lighter: #{map.get(map.get(colors.$color-map, pr), 75)};
 
-    --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-active-bg-light: var(--eui-bc-pr-100);
+    --eui-c-disabled: #{map.get(map.get(colors.$color-map, gr), 500)};
+    --eui-c-disabled-bg: #{map.get(map.get(colors.$color-map, gr), 50)};
+    --eui-c-readonly: #{map.get(map.get(colors.$color-map, gr), 600)};
 
-    --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: #{map.get(map.get(colors.$color-map, pr), 600)};
 
-    --eui-c-link: var(--eui-bc-pr-600);
+    --eui-c-divider: #{map.get(map.get(colors.$color-map, gr), 100)};
+    --eui-c-divider-dark: #{map.get(map.get(colors.$color-map, gr), 200)};
+    --eui-c-divider-light: #{map.get(map.get(colors.$color-map, gr), 75)};
 
-    --eui-c-divider: var(--eui-bc-gr-200);
-    --eui-c-divider-light: var(--eui-bc-gr-100);
+    --eui-c-black-alpha-025: rgba(0,0,0, 0.025);
+    --eui-c-black-alpha-10: rgba(0,0,0, 0.1);
+    --eui-c-black-alpha-075: rgba(0,0,0, 0.075);
 
 
     // CONTEXT COLORS FROM PALETTES
     // ----------------------------
 
-    @each $color, $shades in maps.$color-state-map {
+    @each $color, $shades in colors.$color-state-map {
         @each $shade, $value in $shades {
             @if $shade == default {
-                --eui-c-#{$color}: var(--eui-bc-#{$value});
-            } @else if $shade == on-default {
-                --eui-c-on-#{$color}: var(--eui-bc-#{$value});
+                --eui-c-#{$color}: #{$value};
             } @else {
-                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$value});
+                --eui-c-#{$color + '-' + $shade}: #{$value};
             }
         }
     }
@@ -102,98 +96,69 @@
     // font sizes
     --eui-f-size-base: 16px;
 
+    // base line-height / scale-factor (for compact mode)
+    --eui-base-line-height: 1.5;
+    --eui-base-scale-factor: 1;
+
     // font aliases
     --eui-f: var(--eui-f-m);
+    --eui-f-light: var(--eui-f-m-light);
+    --eui-f-medium: var(--eui-f-m-medium);
+    --eui-f-semi-bold: var(--eui-f-m-semi-bold);
     --eui-f-bold: var(--eui-f-m-bold);
 
+    @each $size, $sizeDef in maps.$font-map {
+        $desktop: map.get($sizeDef, 'desktop');
+        --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+    }
+
+    @include base.media(maps.$eui-bkp-tablet) {
+        @each $size, $sizeDef in maps.$font-map {
+            $tablet: map.get($sizeDef, 'tablet');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-mobile-s) {
+        @each $size, $sizeDef in maps.$font-map {        
+            $mobile: map.get($sizeDef, 'mobile');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+        }
+    }
 
-    // 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 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-xs) {
+        @each $size, $sizeDef in maps.$font-map {        
+            $mobilexs: map.get($sizeDef, 'mobile-xs');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+        }
     }
 
     @each $size, $def in maps.$font-size-map {
-        --eui-f-size-#{$size}: #{$def};
-        --eui-f-size-#{$size}-compact: #{$def};
+        --eui-f-s-#{$size}: #{$def};
     }
 
     @each $size, $def in maps.$font-line-height-map {
-        --eui-f-line-height-#{$size}: #{$def};
+        --eui-f-lh-#{$size}: #{$def};
     }
 
     @each $size, $def in maps.$font-weight-map {
-        --eui-f-weight-#{$size}: #{$def};
+        --eui-f-w-#{$size}: #{$def};
     }
 
 
@@ -269,8 +234,7 @@
     --eui-internal-icon-external-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/external.svg');
     --eui-internal-icon-chevron-down-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/chevron-down.svg');    
 
-    --eui-base-line-height: 1.5;
-    --eui-base-scale-factor: 1;
+
 
     // Animations related
     --eui-base-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 1);

package/dist/base/99-utilities/{default/index.scss → index.scss}

@@ -2,6 +2,7 @@
 @forward 'tokens/typography';
 @forward 'tokens/shadows';
 @forward 'tokens/spacings';
+@forward 'tokens/border-radius';
 @forward 'tokens/paddings';
 @forward 'tokens/margins';
 @forward 'tokens/opacity';

package/dist/base/99-utilities/{default/others → others}/_eui-u-anim.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/01-base' as base;
+@use '../../../base/01-base' as base;
 
 .eui-u-anim {
     animation-fill-mode: var(--eui-base-animation-fill-mode);

package/dist/base/99-utilities/{default/others → others}/_eui-u-display.scss

@@ -1,5 +1,5 @@
-@use '../../../../base/01-base' as base;
-@use '../../../../base/02-tokens/maps' as maps;
+@use '../../../base/01-base' as base;
+@use '../../../base/02-tokens/maps' as maps;
 
 .eui-u-display-hidden {
     display: none !important;

package/dist/base/99-utilities/{default/others → others}/_eui-u-flex.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as maps;
+@use '../../../base/02-tokens/maps' as maps;
 
 // CONTAINERS
 .eui-u-flex {

package/dist/base/99-utilities/{default/others → others}/_misc-utilities.scss

@@ -28,3 +28,6 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+ul.eui-u-list-none {
+    list-style: none;    
+}

package/dist/base/99-utilities/tokens/_border-radius.scss

@@ -0,0 +1,7 @@
+@use '../../../base/02-tokens/maps' as tokens;
+
+@each $idx, $value in tokens.$border-radius-map {
+    .eui-u-br-#{$idx} {
+        border-radius: var(--eui-br-#{$idx}) !important;
+    }
+}

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

@@ -1,4 +1,6 @@
-@use '../../../../base/02-tokens/maps' as maps;
+@use '../../../base/02-tokens/maps' as maps;
+@use '../../../base/02-tokens/colors-default' as colors;
+
 
 .eui-u-c-black {
     color: var(--eui-c-black) !important;
@@ -19,7 +21,7 @@
 }
 
 
-@each $color, $shades in maps.$color-state-map {
+@each $color, $shades in colors.$color-state-map {
     @each $shade, $value in $shades {
         @if $shade == default {
             .eui-u-c-#{$color} {

package/dist/base/99-utilities/{default/tokens → tokens}/_margins.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $spacing, $value in tokens.$spacing-map {
     .eui-u-mt-#{$spacing} {

package/dist/base/99-utilities/{default/tokens → tokens}/_opacity.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $idx, $value in tokens.$opacity-map {
     .eui-u-o-#{$idx} {

package/dist/base/99-utilities/{default/tokens → tokens}/_paddings.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $spacing, $value in tokens.$spacing-map {
     .eui-u-pt-#{$spacing} {

package/dist/base/99-utilities/{default/tokens → tokens}/_shadows.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $shadow, $value in tokens.$box-shadow-map {
    .eui-u-sh-#{$shadow} {

package/dist/base/99-utilities/{default/tokens → tokens}/_spacings.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $spacing, $value in tokens.$spacing-map {
     .eui-u-spacing-#{$spacing} {

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

@@ -1,11 +1,14 @@
-@use '../../../../base/01-base' as base;
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/01-base' as base;
+@use '../../../base/02-tokens/maps' as tokens;
 
 // FONTS
 @each $size in tokens.$font-size-list {
     .eui-u-f-#{$size} {
         font: var(--eui-f-#{$size}) !important;
     }
+    .eui-u-f-#{$size}-light {
+        font: var(--eui-f-#{$size}-light) !important;
+    }
     .eui-u-f-#{$size}-medium {
         font: var(--eui-f-#{$size}-medium) !important;
     }
@@ -18,12 +21,12 @@
 }
 @each $font, $def in tokens.$font-weight-map {
     .eui-u-f-weight-#{$font} {
-        font-weight: var(--eui-f-weight-#{$font}) !important;
+        font-weight: var(--eui-f-w-#{$font}) !important;
     }
 }
 @each $font, $def in tokens.$font-size-map {
     .eui-u-f-size-#{$font} {
-        font-size: var(--eui-f-size-#{$font}) !important;
+        font-size: var(--eui-f-s-#{$font}) !important;
     }
 }
 
@@ -43,6 +46,10 @@
     font-style: normal !important;
     font-weight: 500 !important;
 }
+.eui-u-f-light {
+    font-style: normal !important;
+    font-weight: 300 !important;
+}
 
 .eui-u-f-regular {
     font-style: normal !important;
@@ -60,6 +67,10 @@
     font-style: italic !important;
     font-weight: 500 !important;
 }
+.eui-u-f-light-italic {
+    font-style: italic !important;
+    font-weight: 300 !important;
+}
 .eui-u-f-italic {
     font-style: italic !important;
     font-weight: normal !important;
@@ -232,7 +243,7 @@
 
 .eui-u-text-kbd {
     background-color: var(--eui-c-secondary) !important; // WCAG2 AA compliant
-    border-radius: var(--eui-br-m) !important;
+    border-radius: var(--eui-br-s) !important;
     color: var(--eui-c-white) !important;
     font-size: var(--eui-f-s) !important;
     padding: 1px var(--eui-s-3xs) !important;
@@ -245,7 +256,7 @@
 }
 
 .eui-u-text-blockquote {
-    border-left: var(--eui-s-3xs) solid var(--eui-c-secondary-border-light) !important;
+    border-left: var(--eui-s-3xs) solid var(--eui-c-secondary-border) !important;
     padding: var(--eui-s-xs) var(--eui-s-m) !important;
 }
 

package/dist/base/99-utilities/{default/tokens → tokens}/_z-indexes.scss

@@ -1,4 +1,4 @@
-@use '../../../../base/02-tokens/maps' as tokens;
+@use '../../../base/02-tokens/maps' as tokens;
 
 @each $idx, $value in tokens.$z-index-map {
     .eui-u-zi-#{$idx} {

package/dist/base/index.scss

@@ -1,2 +1,3 @@
 @forward '01-base';
 @forward '02-tokens/maps';
+@forward '02-tokens/colors-extra-palettes';