@eui/styles 21.0.0-next.5 → 21.0.0-next.50

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-grn-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-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);
-
-    --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,73 @@
     // 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, $def in maps.$font-size-map {
+        --eui-f-s-r-#{$size}: #{$def};
+    }
 
-    // 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);
+    @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-r-#{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-r-#{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-r-#{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-r-#{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-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($desktop, 'font-size')});
     }
 
-    @each $size, $def in maps.$font-size-map {
-        --eui-f-size-#{$size}: #{$def};
-        --eui-f-size-#{$size}-compact: #{$def};
+    @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-r-#{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-r-#{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-r-#{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-r-#{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-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($tablet, 'font-size')});
+        }
+    }
+
+    @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-r-#{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-r-#{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-r-#{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-r-#{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-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobile, 'font-size')});
+        }
+    }
+
+    @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-r-#{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-r-#{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-r-#{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-r-#{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-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')});
+        }
     }
 
     @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 +238,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);