@eui/styles 23.0.0-alpha.2 → 23.0.0-alpha.4

package/dist/base/02-tokens/eds-colors-semantic.scss

@@ -0,0 +1,156 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './eds-colors-primitive' as primitive;
+
+$color-semantic-map: (
+    surface-accent: map.get(primitive.$color-map, 'european-blue-50'),
+    surface-selected: map.get(primitive.$color-map, 'european-blue-100'),
+    surface-skeleton: map.get(primitive.$color-map, 'silver-fog-100'),
+    surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
+    // surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'), // TODO add alpha palettes
+
+    surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-50'),
+    surface-elevation-inset: map.get(primitive.$color-map, 'silver-fog-25'),
+    surface-elevation: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-elevation-raised: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-elevation-elevated: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-elevation-overlay: map.get(primitive.$color-map, 'silver-fog-0'),
+
+    surface-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
+    on-surface-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
+    surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-50'),
+    on-surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-400'),
+
+    surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
+    on-surface-primary: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
+    on-surface-primary--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
+    on-surface-primary--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-200'),
+    on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
+
+    surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
+    on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
+    surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
+    on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
+    surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
+    on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
+    surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
+    on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'), 
+
+    surface-inverted:  map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted:  map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-inverted-subtle:  map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted-subtle:  map.get(primitive.$color-map, 'silver-fog-300'),
+    surface-inverted-disabled:  map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted-disabled:  map.get(primitive.$color-map, 'silver-fog-600'),
+
+    surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
+    on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-700'),
+    on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
+    on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),    
+
+    surface-critical: map.get(primitive.$color-map, 'red-600'),
+    on-surface-critical: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
+    on-surface-critical--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
+    on-surface-critical--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
+    on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'), 
+    surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
+    on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'), 
+
+    surface-info: map.get(primitive.$color-map, 'blue-600'),
+    on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),    
+    surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
+    on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),    
+    surface-info-subtler: map.get(primitive.$color-map, 'blue-50'),
+    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),    
+
+    surface-success: map.get(primitive.$color-map, 'green-800'),
+    on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),    
+    surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
+    on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),    
+    surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
+    on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),  
+
+    surface-warning: map.get(primitive.$color-map, 'orange-500'),
+    on-surface-warning: map.get(primitive.$color-map, 'orange-950'),    
+    surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
+    on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),    
+    surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
+    on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
+    
+    foreground: map.get(primitive.$color-map, 'silver-fog-950'),
+    foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
+    foreground-subtler: map.get(primitive.$color-map, 'silver-fog-700'),
+    foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-500'),
+    foreground-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
+    foreground-primary: map.get(primitive.$color-map, 'european-blue-600'),
+    foreground-success: map.get(primitive.$color-map, 'green-800'),
+    foreground-info: map.get(primitive.$color-map, 'blue-900'),
+    foreground-warning: map.get(primitive.$color-map, 'orange-800'),
+    foreground-critical: map.get(primitive.$color-map, 'red-600'),
+    foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-900'),
+    foreground-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
+
+    border-brand: map.get(primitive.$color-map, 'silver-fog-950'),
+    border-divider: map.get(primitive.$color-map, 'silver-fog-200'),
+    border-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
+    
+    border-primary: map.get(primitive.$color-map, 'european-blue-600'),
+    border-primary--hover: map.get(primitive.$color-map, 'european-blue-500'),
+    border-primary--pressed: map.get(primitive.$color-map, 'european-blue-400'),
+    border-primary-subtle: map.get(primitive.$color-map, 'european-blue-400'),
+    border-primary-subtler: map.get(primitive.$color-map, 'european-blue-100'),
+    
+    border-info: map.get(primitive.$color-map, 'blue-700'),
+    border-info-subtle: map.get(primitive.$color-map, 'blue-300'),
+
+    border-success: map.get(primitive.$color-map, 'green-700'),
+    border-success-subtle: map.get(primitive.$color-map, 'green-300'),
+
+    border-warning: map.get(primitive.$color-map, 'orange-600'),
+    border-warning-subtle: map.get(primitive.$color-map, 'orange-300'),
+
+    border-critical: map.get(primitive.$color-map, 'red-600'),
+    border-critical-subtle: map.get(primitive.$color-map, 'red-300'),
+
+    border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
+    border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-300'),
+
+    border-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
+    border-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
+
+    border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
+    border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
+
+    link: map.get(primitive.$color-map, 'european-blue-600'),
+    link--focused: map.get(primitive.$color-map, 'european-blue-600'),
+    link--hover: map.get(primitive.$color-map, 'european-blue-700'),
+    link--pressed: map.get(primitive.$color-map, 'european-blue-800'),
+    link--visited: map.get(primitive.$color-map, 'european-blue-700'),
+    
+    link-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
+    link-inverted--focused: map.get(primitive.$color-map, 'silver-fog-0'),
+    link-inverted--hover: map.get(primitive.$color-map, 'silver-fog-50'),
+    link-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-100'),
+    link-inverted--visited: map.get(primitive.$color-map, 'silver-fog-25'),    
+
+    link-contrast: map.get(primitive.$color-map, 'silver-fog-950'),
+    link-contrast--focused: map.get(primitive.$color-map, 'silver-fog-950'),
+    link-contrast--hover: map.get(primitive.$color-map, 'silver-fog-950'),
+    link-contrast--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
+    link-contrast--visited: map.get(primitive.$color-map, 'silver-fog-900'),    
+
+    focus: map.get(primitive.$color-map, 'european-blue-600'),
+    focus-inverted: map.get(primitive.$color-map, 'european-blue-300'),
+    focus-critical: map.get(primitive.$color-map, 'red-400'),
+);

package/dist/base/02-tokens/eds-maps.scss

@@ -0,0 +1,37 @@
+// BORDER RADIUS
+
+$border-radius-map: (
+    none: 0,
+    xs: 2px,
+    s: 4px,
+    m: 8px,
+    l: 12px,
+    full: 999px
+);
+
+
+// BORDER WIDTH
+
+$border-width-map: (
+    none: 0,
+    xs: 1px,
+    s: 2px,
+    m: 4px
+);
+
+// OPACITY
+
+$opacity-map: (
+    none: 0,
+    10: 0.1,
+    20: 0.2,
+    30: 0.3,
+    40: 0.4,
+    50: 0.5,
+    60: 0.6,
+    70: 0.7,
+    80: 0.8, 
+    90: 0.9,
+    100: 1
+);
+

package/dist/base/02-tokens/eds-typography-primitive.scss

@@ -0,0 +1,69 @@
+@use 'sass:map';
+@use './dimensions-primitive' as dimensions-primitive;
+
+$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
+
+$font-size-map: (
+  '9xl': 6rem,      // 96px
+  '8xl': 4rem,      // 64px
+  '7xl': 3.25rem,   // 52px
+  '6xl': 2.75rem,   // 44px
+  '5xl': 2.25rem,   // 36px
+  '4xl': 1.75rem,   // 28px
+  '3xl': 1.5rem,    // 24px
+  '2xl': 1.375rem,  // 22px
+  'xl': 1.25rem,    // 20px
+  'l': 1.125rem,    // 18px
+  'm': 1rem,        // 16px
+  's': 0.875rem,    // 14px 
+  'xs': 0.75rem,    // 12px
+  '2xs': 0.625rem   // 10px
+);
+
+// font weight map
+
+$font-weight-map: (
+    'light': 300,
+    'regular': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700
+);
+
+$font-line-height-map: (
+  '10xl': map.get(dimensions-primitive.$dimension-map, 96),
+  '9xl': map.get(dimensions-primitive.$dimension-map, 64),
+  '8xl': map.get(dimensions-primitive.$dimension-map, 60),
+  '7xl': map.get(dimensions-primitive.$dimension-map, 56),
+  '6xl': map.get(dimensions-primitive.$dimension-map, 52),
+  '5xl': map.get(dimensions-primitive.$dimension-map, 48),
+  '4xl': map.get(dimensions-primitive.$dimension-map, 44),
+  '3xl': map.get(dimensions-primitive.$dimension-map, 40),
+  '2xl': map.get(dimensions-primitive.$dimension-map, 36),
+  'xl': map.get(dimensions-primitive.$dimension-map, 32),
+  'l': map.get(dimensions-primitive.$dimension-map, 28),
+  'm': map.get(dimensions-primitive.$dimension-map, 24),
+  's': map.get(dimensions-primitive.$dimension-map, 20),
+  'xs': map.get(dimensions-primitive.$dimension-map, 16),
+  '2xs': map.get(dimensions-primitive.$dimension-map, 12)
+);
+
+// semantic font-size link to letter-spacing map
+$font-size-letter-spacing-map: (
+  '9xl': -2%,
+  '8xl': -2%,
+  '7xl': -2%,
+  '6xl': -1%,
+  '5xl': -1%,
+  '4xl': -1%,
+  '3xl': -1%,
+  '2xl': normal,
+  'xl': normal,
+  'l': normal,
+  'm': normal,
+  's': normal,
+  'xs': normal,
+  '2xs': normal
+);
+
+

package/dist/base/02-tokens/eds-typography-semantic.scss

@@ -0,0 +1,116 @@
+$typography-semantic-map: (
+    desktop: (
+        display: (
+            xl: ( size: 9xl, line-height: 10xl, weight: regular ),
+            l: (  size: 8xl, line-height: 9xl, weight: semi-bold ),
+        ),
+        heading: (
+            2xl: ( size: 6xl, line-height: 6xl, weight: semi-bold ),
+            xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
+            l: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
+            m: ( size: 3xl, line-height: xl, weight: semi-bold ),
+            s: ( size: xl, line-height: l, weight: semi-bold ),
+            s-medium: ( size: xl, line-height: l, weight: medium ),
+            xs: ( size: l, line-height: l, weight: bold ),
+        ),
+        paragraph: (
+            xl: ( size: 3xl, line-height: 2xl, weight: regular ),    
+            l: ( size: l, line-height: l, weight: regular ),    
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            l-bold: ( size: l, line-height: l, weight: bold ),    
+            m: ( size: m, line-height: m, weight: regular ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-bold: ( size: m, line-height: m, weight: bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            s-bold: ( size: s, line-height: s, weight: bold ),
+        ),
+        label: (
+            l: ( size: l, line-height: l, weight: regular ), 
+            m: ( size: m, line-height: m, weight: regular ),
+            m-medium: ( size: m, line-height: m, weight: medium ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+        ),
+        microcopy: (
+            xs: ( size: xs, line-height: xs, weight: medium ),
+            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
+        ),    
+    ),
+    tablet: (
+        display: (
+            xl: ( size: 8xl, line-height: 9xl, weight: regular ),
+            l: (  size: 7xl, line-height: 6xl, weight: semi-bold ),
+        ),
+        heading: (
+            2xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
+            xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
+            l: ( size: 2xl, line-height: l, weight: semi-bold ),
+            m: ( size: xl, line-height: l, weight: semi-bold ),
+            s: ( size: l, line-height: m, weight: semi-bold ),
+            s-medium: ( size: l, line-height: m, weight: medium ),
+            xs: ( size: m, line-height: m, weight: bold ),
+        ),
+        paragraph: (
+            xl: ( size: 2xl, line-height: xl, weight: regular ),    
+            l: ( size: l, line-height: l, weight: regular ),    
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            l-bold: ( size: l, line-height: l, weight: bold ),    
+            m: ( size: m, line-height: m, weight: regular ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-bold: ( size: m, line-height: m, weight: bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            s-bold: ( size: s, line-height: s, weight: bold ),
+        ),
+        label: (
+            l: ( size: l, line-height: l, weight: regular ), 
+            m: ( size: m, line-height: m, weight: regular ),
+            m-medium: ( size: m, line-height: m, weight: medium ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+        ),
+        microcopy: (
+            xs: ( size: xs, line-height: xs, weight: medium ),
+            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
+        ),    
+    ),    
+    mobile: (
+        display: (
+            xl: ( size: 6xl, line-height: 4xl, weight: regular ),
+            l: (  size: 5xl, line-height: 2xl, weight: semi-bold ),
+        ),
+        heading: (
+            2xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
+            xl: ( size: 2xl, line-height: l, weight: semi-bold ),
+            l: ( size: xl, line-height: m, weight: semi-bold ),
+            m: ( size: l, line-height: m, weight: semi-bold ),
+            s: ( size: m, line-height: m, weight: semi-bold ),
+            s-medium: ( size: m, line-height: m, weight: medium ),
+            xs: ( size: m, line-height: m, weight: bold ),
+        ),
+        paragraph: (
+            xl: ( size: xl, line-height: l, weight: regular ),    
+            l: ( size: l, line-height: l, weight: regular ),    
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            l-bold: ( size: l, line-height: l, weight: bold ),    
+            m: ( size: m, line-height: m, weight: regular ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-bold: ( size: m, line-height: m, weight: bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            s-bold: ( size: s, line-height: s, weight: bold ),
+        ),
+        label: (
+            l: ( size: l, line-height: l, weight: regular ), 
+            m: ( size: m, line-height: m, weight: regular ),
+            m-medium: ( size: m, line-height: m, weight: medium ),
+            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            s: ( size: s, line-height: s, weight: regular ),
+        ),
+        microcopy: (
+            xs: ( size: xs, line-height: xs, weight: medium ),
+            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
+        ),    
+    ),     
+);

package/dist/base/02-tokens/typography-primitive.scss

@@ -46,40 +46,5 @@ $font-weight-map: (
     'bold': 700
 );
 
-$eds-font-line-height-map: (
-  '10xl': map.get(dimensions-primitive.$dimension-map, 96),
-  '9xl': map.get(dimensions-primitive.$dimension-map, 64),
-  '8xl': map.get(dimensions-primitive.$dimension-map, 60),
-  '7xl': map.get(dimensions-primitive.$dimension-map, 56),
-  '6xl': map.get(dimensions-primitive.$dimension-map, 52),
-  '5xl': map.get(dimensions-primitive.$dimension-map, 48),
-  '4xl': map.get(dimensions-primitive.$dimension-map, 44),
-  '3xl': map.get(dimensions-primitive.$dimension-map, 40),
-  '2xl': map.get(dimensions-primitive.$dimension-map, 36),
-  'xl': map.get(dimensions-primitive.$dimension-map, 32),
-  'l': map.get(dimensions-primitive.$dimension-map, 28),
-  'm': map.get(dimensions-primitive.$dimension-map, 24),
-  's': map.get(dimensions-primitive.$dimension-map, 20),
-  'xs': map.get(dimensions-primitive.$dimension-map, 16),
-  '2xs': map.get(dimensions-primitive.$dimension-map, 12)
-);
-
-// semantic font-size link to letter-spacing map
-$eds-font-size-letter-spacing-map: (
-  '9xl': -2%,
-  '8xl': -2%,
-  '7xl': -2%,
-  '6xl': -1%,
-  '5xl': -1%,
-  '4xl': -1%,
-  '3xl': -1%,
-  '2xl': normal,
-  'xl': normal,
-  'l': normal,
-  'm': normal,
-  's': normal,
-  'xs': normal,
-  '2xs': normal
-);
 
 

package/dist/base/02-tokens/typography-semantic.scss

@@ -1,122 +1,4 @@
 $typography-semantic-map: (
-    desktop: (
-        display: (
-            xl: ( size: 9xl, line-height: 10xl, weight: regular ),
-            l: (  size: 8xl, line-height: 9xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 6xl, line-height: 6xl, weight: semi-bold ),
-            xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
-            l: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            m: ( size: 3xl, line-height: xl, weight: semi-bold ),
-            s: ( size: xl, line-height: l, weight: semi-bold ),
-            s-medium: ( size: xl, line-height: l, weight: medium ),
-            xs: ( size: l, line-height: l, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: 3xl, line-height: 2xl, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),
-    tablet: (
-        display: (
-            xl: ( size: 8xl, line-height: 9xl, weight: regular ),
-            l: (  size: 7xl, line-height: 6xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
-            xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            l: ( size: 2xl, line-height: l, weight: semi-bold ),
-            m: ( size: xl, line-height: l, weight: semi-bold ),
-            s: ( size: l, line-height: m, weight: semi-bold ),
-            s-medium: ( size: l, line-height: m, weight: medium ),
-            xs: ( size: m, line-height: m, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: 2xl, line-height: xl, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),    
-    mobile: (
-        display: (
-            xl: ( size: 6xl, line-height: 4xl, weight: regular ),
-            l: (  size: 5xl, line-height: 2xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            xl: ( size: 2xl, line-height: l, weight: semi-bold ),
-            l: ( size: xl, line-height: m, weight: semi-bold ),
-            m: ( size: l, line-height: m, weight: semi-bold ),
-            s: ( size: m, line-height: m, weight: semi-bold ),
-            s-medium: ( size: m, line-height: m, weight: medium ),
-            xs: ( size: m, line-height: m, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: xl, line-height: l, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),     
-);
-
-
-$typography-semantic-flatlist-map: (
     6xl: (
         desktop: (
             font-size: 6xl,

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

@@ -0,0 +1,7 @@
+@use '../02-tokens/eds-colors-semantic-dark-theme' as semantic;
+
+html.eui-t-dark {
+    @each $color, $value in semantic.$color-semantic-map {
+        --eds-c-#{$color}: #{$value};
+    }
+}

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

@@ -0,0 +1,7 @@
+@use '../02-tokens/eds-colors-semantic' as semantic;
+
+:root {
+    @each $color, $value in semantic.$color-semantic-map {
+        --eds-c-#{$color}: #{$value};
+    }
+}

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);
+            }
+        }        
+    }    
+}