@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.3

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

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/maps' as maps;
+@use '../02-tokens/dimensions-semantic' as dimensions-semantic;
+@use '../02-tokens/eds-typography-primitive' as typography-primitive;
+@use '../02-tokens/eds-typography-semantic' as typography-semantic;
+
+:root {
+    // TYPOGRAPHY
+    --eds-f-family: 'Inter', arial, sans-serif;
+
+    // font families
+    --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;    
+
+    @each $size, $def in typography-primitive.$font-size-map {
+        --eds-f-s-#{$size}: #{$def};
+    }
+    @each $size, $def in typography-primitive.$font-line-height-map {
+        --eds-f-lh-#{$size}: #{$def};
+    }
+    @each $size, $def in typography-primitive.$font-weight-map {
+        --eds-f-w-#{$size}: #{$def};
+    }
+
+    // EDS raw vars
+    @each $size, $def in typography-primitive.$font-line-height-map {
+        --eds-f-lh-#{$size}: #{$def};
+    }    
+    @each $size, $def in typography-primitive.$font-size-letter-spacing-map {
+        --eds-f-ls-#{$size}: #{$def};
+    }    
+
+    // EDS typography
+    @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
+        @each $size, $sizeDef in $typeDef {
+            --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-tablet) {
+        @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {
+            @each $size, $sizeDef in $typeDef {
+                --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+            }
+        }        
+    }
+
+    @include base.media(maps.$eui-bkp-mobile) {
+        @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {
+            @each $size, $sizeDef in $typeDef {
+                --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+            }
+        }        
+    }    
+}

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

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/eds-maps' as maps;
+@use '../02-tokens/dimensions-semantic' as dimensions-semantic;
+
+:root {
+    // SPACING - eui-s
+    // ---------------
+
+    @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {
+        --eds-sp-#{$spacing}: #{$value};
+    }
+    @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {
+        --eds-si-#{$sizing}: #{$value};
+    }
+
+    
+    // BORDER RADIUS - eui-br
+    // ----------------------
+
+    @each $br, $value in maps.$border-radius-map {
+        --eds-br-#{$br}: #{$value};
+    }
+
+
+    // LAYOUT-BREAKPOINTS - eui-bp
+    // ---------------------------
+
+    // @each $bp, $value in maps.$breakpoint-map {
+    //     --eui-bp-#{$bp}: #{$value};
+    // }
+
+
+    // BORDER WIDTH - eui-bw
+    // ---------------------
+
+    @each $br, $value in maps.$border-width-map {
+        --eds-bw-#{$br}: #{$value};
+    }
+
+
+    // BOX-SHADOWS - eui-sh
+    // --------------------
+
+    // @each $sh, $value in maps.$box-shadow-map {
+    //     --eui-sh-#{$sh}: #{$value};
+    // }
+
+
+    // ICON-SIZES - eui-is
+    // -------------------
+
+    @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {
+        --eds-is-#{$icon-size}: #{$value};
+    }
+
+
+    // OPACITY - eui-o
+    // ---------------
+
+    @each $idx, $value in maps.$opacity-map {
+        --eds-op-#{$idx}: #{$value};
+    }
+
+
+    // Z-INDEXES - eui-zi
+    // -------------------
+
+    // @each $idx, $value in maps.$z-index-map {
+    //     --eui-zi-#{$idx}: #{$value};
+    // }
+}

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

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/maps' as maps;
+@use '../02-tokens/colors-semantic' as semantic;
+@use '../02-tokens/colors-semantic-dark-theme' as semantic-dark;
+
+html.eui-t-dark {
+    // GENERIC CONTEXT COLORS
+    // ----------------------
+    --eui-c-black: #fff;
+    --eui-c-white: #000;
+
+    --eui-c-secondary-min: #{map.get(map.get(semantic-dark.$color-map, secondary), 950)};
+    --eui-c-secondary-max: #{map.get(map.get(semantic-dark.$color-map, secondary), 25)};
+
+    --eui-c-surface-page: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 50)};
+    --eui-c-surface-shell: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 75)};
+    --eui-c-surface-container: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 75)};
+    --eui-c-surface-container-1: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 75)};
+    --eui-c-surface-container-2: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 100)};
+    --eui-c-surface-container-3: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 100)};
+
+    --eui-c-text: #{map.get(map.get(semantic-dark.$color-map, secondary), 950)};
+    --eui-c-text-light: #{map.get(map.get(semantic-dark.$color-map, secondary), 800)};
+    --eui-c-text-lighter: #{map.get(map.get(semantic-dark.$color-map, secondary), 700)};
+    --eui-c-text-lightest: #{map.get(map.get(semantic-dark.$color-map, secondary), 600)};
+
+    --eui-c-focus-visible: #{map.get(map.get(semantic-dark.$color-map, primary), 600)};
+    --eui-c-focus: #{map.get(map.get(semantic-dark.$color-map, primary), 200)};
+    
+    --eui-c-hover: #{map.get(map.get(semantic-dark.$color-map, primary), 75)};
+    --eui-c-hover-disabled: #{map.get(map.get(semantic-dark.$color-map, secondary), 100)};
+
+    --eui-c-active: #{map.get(map.get(semantic-dark.$color-map, primary), 600)};
+    --eui-c-active-bg: #{map.get(map.get(semantic-dark.$color-map, primary), 200)};
+    --eui-c-active-bg-alt: #{map.get(map.get(semantic-dark.$color-map, primary), 100)};
+    --eui-c-active-bg-light: #{map.get(map.get(semantic-dark.$color-map, primary), 100)};
+    --eui-c-active-bg-lighter: #{map.get(map.get(semantic-dark.$color-map, primary), 75)};
+
+    --eui-c-disabled: #{map.get(map.get(semantic-dark.$color-map, secondary), 500)};
+    --eui-c-disabled-bg: #{map.get(map.get(semantic-dark.$color-map, secondary), 50)};
+    --eui-c-readonly: #{map.get(map.get(semantic-dark.$color-map, secondary), 600)};
+
+    --eui-c-link: #{map.get(map.get(semantic-dark.$color-map, primary), 600)};
+
+    --eui-c-divider: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 200)};
+    --eui-c-divider-dark: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 100)};
+    --eui-c-divider-light: #{map.get(map.get(semantic-dark.$color-map, neutral-dark), 300)};
+
+
+
+    // CONTEXT COLORS FROM PALETTES
+    // ----------------------------
+
+    @each $color, $shades in semantic.$color-semantic-map {
+        @each $shade, $value in $shades {
+            @if $shade == default {
+                --eui-c-#{$color}: #{map.get(map.get(semantic-dark.$color-map-all, $color), $value)};
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: #{map.get(map.get(semantic-dark.$color-map-all, $color), $value)};
+            }
+        }
+    }
+
+    --eui-test: #000;
+}

package/dist/base/03-vars/vars-colors-high-contrast-theme.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/maps' as maps;
+@use '../02-tokens/colors-semantic' as semantic;
+@use '../02-tokens/colors-semantic-high-contrast' as semantic-high-contrast;
+
+html.eui-t-high-contrast {
+    // GENERIC CONTEXT COLORS
+    // ----------------------
+    
+    --eui-c-transparent: transparent;
+    --eui-c-white: #fff;
+    --eui-c-black: #000;
+
+    --eui-c-secondary-min: var(--eui-c-white);
+    --eui-c-secondary-max: var(--eui-c-black);
+
+    --eui-c-surface-page: var(--eui-c-white);
+    --eui-c-surface-container: var(--eui-c-white);
+    
+    --eui-c-surface-shell: #{map.get(map.get(semantic.$color-map, neutral), 25)};
+    --eui-c-surface-container-1: #{map.get(map.get(semantic.$color-map, neutral), 50)};
+    --eui-c-surface-container-2: #{map.get(map.get(semantic.$color-map, neutral), 75)};
+    --eui-c-surface-container-3: #{map.get(map.get(semantic.$color-map, neutral), 100)};
+
+    --eui-c-text: var(--eui-c-black);
+    --eui-c-text-light: #{map.get(map.get(semantic.$color-map, secondary), 950)};
+    --eui-c-text-lighter: #{map.get(map.get(semantic.$color-map, secondary), 800)};
+    --eui-c-text-lightest: #{map.get(map.get(semantic.$color-map, secondary), 700)};
+
+    --eui-c-focus-visible: #{map.get(map.get(semantic.$color-map, primary), 700)};
+    --eui-c-focus: #{map.get(map.get(semantic.$color-map, primary), 300)};
+    
+    --eui-c-hover: #{map.get(map.get(semantic.$color-map, primary), 50)};
+    --eui-c-hover-disabled: #{map.get(map.get(semantic.$color-map, secondary), 75)};
+
+    --eui-c-active: #{map.get(map.get(semantic.$color-map, primary), 700)};
+    --eui-c-active-bg: #{map.get(map.get(semantic.$color-map, primary), 300)};
+    --eui-c-active-bg-alt: #{map.get(map.get(semantic.$color-map, primary), 400)};
+    --eui-c-active-bg-light: #{map.get(map.get(semantic.$color-map, primary), 200)};
+    --eui-c-active-bg-lighter: #{map.get(map.get(semantic.$color-map, primary), 100)};
+
+    --eui-c-disabled: #{map.get(map.get(semantic.$color-map, secondary), 600)};
+    --eui-c-disabled-bg: #{map.get(map.get(semantic.$color-map, secondary), 75)};
+    --eui-c-readonly: #{map.get(map.get(semantic.$color-map, secondary), 700)};
+
+    --eui-c-link: #{map.get(map.get(semantic.$color-map, primary), 700)};
+
+    --eui-c-divider: #{map.get(map.get(semantic.$color-map, secondary), 300)};
+    --eui-c-divider-dark: #{map.get(map.get(semantic.$color-map, secondary), 400)};
+    --eui-c-divider-light: #{map.get(map.get(semantic.$color-map, secondary), 200)};
+
+
+    // CONTEXT COLORS FROM PALETTES
+    // ----------------------------
+
+    @each $color, $shades in semantic.$color-semantic-map {
+        @each $shade, $value in $shades {
+            @if $shade == default {
+                --eui-c-#{$color}: #{map.get(map.get(semantic-high-contrast.$color-map-all, $color), $value)};
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: #{map.get(map.get(semantic-high-contrast.$color-map-all, $color), $value)};
+            }
+        }
+    }
+}

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

@@ -0,0 +1,69 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/maps' as maps;
+@use '../02-tokens/colors-semantic' as semantic;
+
+:root {
+    // GENERIC CONTEXT COLORS
+    // ----------------------
+    
+    --eui-c-transparent: transparent;
+    --eui-c-white: #fff;
+    --eui-c-black: #000;
+
+    --eui-c-secondary-min: #{map.get(map.get(semantic.$color-map, secondary), 25)};
+    --eui-c-secondary-max: #{map.get(map.get(semantic.$color-map, secondary), 950)};
+
+    --eui-c-surface-shell: #{map.get(map.get(semantic.$color-map, secondary), 50)};
+    --eui-c-surface-page: #{map.get(map.get(semantic.$color-map, secondary), 25)};
+    
+    --eui-c-surface-container: var(--eui-c-white);
+    --eui-c-surface-container-1: #{map.get(map.get(semantic.$color-map, secondary), 50)};
+    --eui-c-surface-container-2: #{map.get(map.get(semantic.$color-map, secondary), 75)};
+    --eui-c-surface-container-3: #{map.get(map.get(semantic.$color-map, secondary), 200)};
+
+    --eui-c-text: #{map.get(map.get(semantic.$color-map, secondary), 950)};
+    --eui-c-text-light: #{map.get(map.get(semantic.$color-map, secondary), 800)};
+    --eui-c-text-lighter: #{map.get(map.get(semantic.$color-map, secondary), 700)};
+    --eui-c-text-lightest: #{map.get(map.get(semantic.$color-map, secondary), 600)};
+
+    --eui-c-focus-visible: #{map.get(map.get(semantic.$color-map, primary), 600)};
+    --eui-c-focus: #{map.get(map.get(semantic.$color-map, primary), 200)};
+    
+    --eui-c-hover: #{map.get(map.get(semantic.$color-map, primary), 75)};
+    --eui-c-hover-disabled: #{map.get(map.get(semantic.$color-map, secondary), 100)};
+
+    --eui-c-active: #{map.get(map.get(semantic.$color-map, primary), 600)};
+    --eui-c-active-bg: #{map.get(map.get(semantic.$color-map, primary), 200)};
+    --eui-c-active-bg-alt: #{map.get(map.get(semantic.$color-map, primary), 300)};
+    --eui-c-active-bg-light: #{map.get(map.get(semantic.$color-map, primary), 100)};
+    --eui-c-active-bg-lighter: #{map.get(map.get(semantic.$color-map, primary), 75)};
+
+    --eui-c-disabled: #{map.get(map.get(semantic.$color-map, secondary), 500)};
+    --eui-c-disabled-bg: #{map.get(map.get(semantic.$color-map, secondary), 50)};
+    --eui-c-readonly: #{map.get(map.get(semantic.$color-map, secondary), 600)};
+
+    --eui-c-link: #{map.get(map.get(semantic.$color-map, primary), 600)};
+
+    --eui-c-divider: #{map.get(map.get(semantic.$color-map, neutral-dark), 50)};
+    --eui-c-divider-dark: #{map.get(map.get(semantic.$color-map, neutral-dark), 75)};
+    --eui-c-divider-light: #{map.get(map.get(semantic.$color-map, neutral-dark), 25)};
+
+    --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 semantic.$color-semantic-map {
+        @each $shade, $value in $shades {
+            @if $shade == default {
+                --eui-c-#{$color}: #{map.get(map.get(semantic.$color-map-all, $color), $value)};
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: #{map.get(map.get(semantic.$color-map-all, $color), $value)};
+            }
+        }
+    }
+}

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

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use '../01-base' as base;
+@use '../02-tokens/maps' as maps;
+@use '../02-tokens/colors-semantic' as semantic;
+@use '../02-tokens/typography-primitive' as typography-primitive;
+@use '../02-tokens/typography-semantic' as typography-semantic;
+@use '../02-tokens/dimensions-semantic' as dimensions-semantic;
+
+@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: 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: block;
+  font-style: italic;
+}
+
+:root {
+    // TYPOGRAPHY
+    --eui-f-family: 'Inter', arial, sans-serif;
+
+    // font families
+    --eui-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+
+    // 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);
+    --eui-f-breakpoint-ratio: 1;
+    --eui-s-breakpoint-ratio: 1;
+
+    @each $size, $def in typography-primitive.$font-size-map {
+        --eui-f-s-#{$size}: #{$def};
+    }
+    @each $size, $def in typography-primitive.$font-line-height-map {
+        --eui-f-lh-#{$size}: #{$def};
+    }
+    @each $size, $def in typography-primitive.$font-weight-map {
+        --eui-f-w-#{$size}: #{$def};
+    }
+
+    @each $size, $sizeDef in typography-semantic.$typography-semantic-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-desktop-s) {
+        @each $size, $sizeDef in typography-semantic.$typography-semantic-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);
+            --eui-f-breakpoint-ratio: 0.875;
+            --eui-s-breakpoint-ratio: 0.95;
+        }
+    }
+    
+    @include base.media(maps.$eui-bkp-tablet) {
+        @each $size, $sizeDef in typography-semantic.$typography-semantic-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);
+            --eui-f-breakpoint-ratio: 0.875;
+            --eui-s-breakpoint-ratio: 0.95;
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-mobile-s) {
+        @each $size, $sizeDef in typography-semantic.$typography-semantic-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);
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-mobile-xs) {
+        @each $size, $sizeDef in typography-semantic.$typography-semantic-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);
+        }
+    }
+}

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

@@ -1,7 +1,10 @@
 @use 'sass:map';
 @use '../01-base' as base;
 @use '../02-tokens/maps' as maps;
-@use '../02-tokens/colors-default' as colors;
+@use '../02-tokens/colors-semantic' as semantic;
+@use '../02-tokens/typography-primitive' as typography-primitive;
+@use '../02-tokens/typography-semantic' as typography-semantic;
+@use '../02-tokens/dimensions-semantic' as dimensions-semantic;
 
 @font-face {
   font-family: 'Inter';
@@ -20,153 +23,11 @@
 }
 
 :root {
-    // GENERIC CONTEXT COLORS
-    // ----------------------
-    
-    --eui-c-transparent: transparent;
-    --eui-c-white: #fff;
-    --eui-c-black: #000;
-
-    --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: #{map.get(map.get(colors.$color-map, grn), 25)};
-    --eui-c-surface-container: var(--eui-c-white);
-    
-    --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-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), 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-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 colors.$color-state-map {
-        @each $shade, $value in $shades {
-            @if $shade == default {
-                --eui-c-#{$color}: #{$value};
-            } @else {
-                --eui-c-#{$color + '-' + $shade}: #{$value};
-            }
-        }
-    }
-
-
-    // TYPOGRAPHY - eui-f
-    // ------------------
-
-    // TYPOGRAPHY
-    --eui-f-family: 'Inter', arial, sans-serif;
-
-    // font families
-    --eui-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-
-    // 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);
-        }
-    }
-
-    @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-s-#{$size}: #{$def};
-    }
-
-    @each $size, $def in maps.$font-line-height-map {
-        --eui-f-lh-#{$size}: #{$def};
-    }
-
-    @each $size, $def in maps.$font-weight-map {
-        --eui-f-w-#{$size}: #{$def};
-    }
-
-
     // SPACING - eui-s
     // ---------------
 
-    @each $spacing, $value in maps.$spacing-map {
-        --eui-s-#{$spacing}: #{$value};
+    @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {
+        --eui-s-#{$spacing}: calc( #{var(--eui-s-breakpoint-ratio)} * #{$value} );
     }
 
     
@@ -205,7 +66,7 @@
     // ICON-SIZES - eui-is
     // -------------------
 
-    @each $icon-size, $value in maps.$icon-size-map {
+    @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {
         --eui-is-#{$icon-size}: #{$value};
     }
 

package/dist/base/04-elements/index.scss

@@ -3,8 +3,8 @@
 html {
     display: block;
     height: 100%;
-    font-size: var(--eui-f-size-base);
-    line-height: var(--eui-base-line-height);
+    font-size: calc( #{var(--eui-f-breakpoint-ratio)} * #{var(--eui-f-size-base)} );
+    line-height: calc( #{var(--eui-f-breakpoint-ratio)} * #{var(--eui-base-line-height)} );
     @include base.eui-scrollbars();
 }
 
@@ -13,13 +13,13 @@ body {
     color: var(--eui-c-text);
     font-family: var(--eui-f-family);
     font-feature-settings: 'liga';
-    font-size: var(--eui-f-size-base);
+    font-size: calc( #{var(--eui-f-breakpoint-ratio)} * #{var(--eui-f-size-base)} );
     -moz-font-smoothing: antialiased;
     -webkit-font-smoothing: antialiased;
     font-style: normal;
     font-weight: normal;
     height: 100%;
-    line-height: var(--eui-base-line-height);
+    line-height: calc( #{var(--eui-f-breakpoint-ratio)} * #{var(--eui-base-line-height)} );
     margin: 0;
     text-align: start;
     text-rendering: optimizeLegibility;