@eui/styles 21.0.0-alpha.9 → 21.0.0-next.2

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

@@ -4,6 +4,13 @@
 
 // BORDER RADIUS
 
+$ecl-border-radius: ( // v5.alpha.16
+    'xs': 2px,
+    's': 4px,
+    'm': 8px,
+    'l': 12px,
+);
+
 $border-radius-map: (
     none: 0,
     s: 2px,
@@ -89,24 +96,6 @@ $opacity-map: (
 
 // SPACING
 
-// $old-spacing-map: (
-//     none: 0,
-//     4xs: 0.0625rem, // => 5xs
-//     3xs: 0.125rem,  // => 4xs
-//     2xs: 0.25rem,   // => 3xs 
-//     xs: 0.5rem,     // ======
-//     s: 0.75rem,     // ======
-//     m: 1rem,        // ======
-//     l: 1.25rem,     // ======
-//     xl: 1.5rem,     // ======
-//     2xl: 2rem,      // => 3xl
-//     3xl: 2.5rem,    // => 5xl
-//     4xl: 3rem,      // => 6xl
-//     5xl: 3.5rem,    // => 7xl
-//     6xl: 4rem,      // => 8xl
-//     7xl: 5rem       // => 10xl
-// );
-
 $spacing-map: (
     none: 0, 
     5xs: 0.0625rem,  // 4xs
@@ -268,40 +257,41 @@ $ecl-colors: (
 
 $color-map: (
     br: (
-        950: map-get($ecl-colors, 'grey-950'),
-        900: map-get($ecl-colors, 'grey-900'),
-        800: map-get($ecl-colors, 'grey-800'),
-        700: map-get($ecl-colors, 'grey-700')
+        950: map.get($ecl-colors, 'grey-950'),
+        900: map.get($ecl-colors, 'grey-900'),
+        800: map.get($ecl-colors, 'grey-800'),
+        700: map.get($ecl-colors, 'grey-700')
     ),
     pr: (
-        950: map-get($ecl-colors, 'primary-950'),
-        900: map-get($ecl-colors, 'primary-900'),
-        800: map-get($ecl-colors, 'primary-800'),
-        700: map-get($ecl-colors, 'primary-700'),
-        600: map-get($ecl-colors, 'primary-600'),
-        500: map-get($ecl-colors, 'primary-500'),
-        400: map-get($ecl-colors, 'primary-400'),
-        300: map-get($ecl-colors, 'primary-300'),
-        200: map-get($ecl-colors, 'primary-200'),
-        100: map-get($ecl-colors, 'primary-100'),
-        75: map-get($ecl-colors, 'primary-75'),
-        50: map-get($ecl-colors, 'primary-50'),
-        25: map-get($ecl-colors, 'primary-25')
+        950: map.get($ecl-colors, 'primary-950'),
+        900: map.get($ecl-colors, 'primary-900'),
+        800: map.get($ecl-colors, 'primary-800'),
+        700: map.get($ecl-colors, 'primary-700'),
+        600: map.get($ecl-colors, 'primary-600'),
+        500: map.get($ecl-colors, 'primary-500'),
+        400: map.get($ecl-colors, 'primary-400'),
+        300: map.get($ecl-colors, 'primary-300'),
+        200: map.get($ecl-colors, 'primary-200'),
+        100: map.get($ecl-colors, 'primary-100'),
+        75: map.get($ecl-colors, 'primary-75'),
+        50: map.get($ecl-colors, 'primary-50'),
+        25: map.get($ecl-colors, 'primary-25')
     ),
     gr: (
-        950: map-get($ecl-colors, 'grey-950'),
-        900: map-get($ecl-colors, 'grey-900'),
-        800: map-get($ecl-colors, 'grey-800'),
-        700: map-get($ecl-colors, 'grey-700'),
-        600: map-get($ecl-colors, 'grey-600'),
-        500: map-get($ecl-colors, 'grey-500'),
-        400: map-get($ecl-colors, 'grey-400'),
-        300: map-get($ecl-colors, 'grey-300'),
-        200: map-get($ecl-colors, 'grey-200'),
-        100: map-get($ecl-colors, 'grey-100'),
-        75: map-get($ecl-colors, 'grey-75'),
-        50: map-get($ecl-colors, 'grey-50'),
-        25: map-get($ecl-colors, 'grey-25')        
+        950: map.get($ecl-colors, 'grey-950'),
+        900: map.get($ecl-colors, 'grey-900'),
+        800: map.get($ecl-colors, 'grey-800'),
+        700: map.get($ecl-colors, 'grey-700'),
+        600: map.get($ecl-colors, 'grey-600'),
+        500: map.get($ecl-colors, 'grey-500'),
+        400: map.get($ecl-colors, 'grey-400'),
+        300: map.get($ecl-colors, 'grey-300'),
+        200: map.get($ecl-colors, 'grey-200'),
+        100: map.get($ecl-colors, 'grey-100'),
+        75: map.get($ecl-colors, 'grey-75'),
+        50: map.get($ecl-colors, 'grey-50'),
+        // 50: #f3f3f6,
+        25: map.get($ecl-colors, 'grey-25')        
     ),
     grn: (
         950: #171717,
@@ -316,82 +306,83 @@ $color-map: (
         100: #e4e4e4,
         75: #efefef,
         50: #f7f7f7,
+        // 50: #f5f5f5,
         25: #fbfbfb 
     ),
     in: (
-        950: map-get($ecl-colors, 'info-950'),
-        900: map-get($ecl-colors, 'info-900'),
-        800: map-get($ecl-colors, 'info-800'),
-        700: map-get($ecl-colors, 'info-700'),
-        600: map-get($ecl-colors, 'info-600'),
-        500: map-get($ecl-colors, 'info-500'),
-        400: map-get($ecl-colors, 'info-400'),
-        300: map-get($ecl-colors, 'info-300'),
-        200: map-get($ecl-colors, 'info-200'),
-        100: map-get($ecl-colors, 'info-100'),
-        75: map-get($ecl-colors, 'info-75'),
-        50: map-get($ecl-colors, 'info-50'),
-        25: map-get($ecl-colors, 'info-25')         
+        950: map.get($ecl-colors, 'info-950'),
+        900: map.get($ecl-colors, 'info-900'),
+        800: map.get($ecl-colors, 'info-800'),
+        700: map.get($ecl-colors, 'info-700'),
+        600: map.get($ecl-colors, 'info-600'),
+        500: map.get($ecl-colors, 'info-500'),
+        400: map.get($ecl-colors, 'info-400'),
+        300: map.get($ecl-colors, 'info-300'),
+        200: map.get($ecl-colors, 'info-200'),
+        100: map.get($ecl-colors, 'info-100'),
+        75: map.get($ecl-colors, 'info-75'),
+        50: map.get($ecl-colors, 'info-50'),
+        25: map.get($ecl-colors, 'info-25')         
     ),
     su: (
-        950: map-get($ecl-colors, 'success-950'),
-        900: map-get($ecl-colors, 'success-900'),
-        800: map-get($ecl-colors, 'success-800'),
-        700: map-get($ecl-colors, 'success-700'),
-        600: map-get($ecl-colors, 'success-600'),
-        500: map-get($ecl-colors, 'success-500'),
-        400: map-get($ecl-colors, 'success-400'),
-        300: map-get($ecl-colors, 'success-300'),
-        200: map-get($ecl-colors, 'success-200'),
-        100: map-get($ecl-colors, 'success-100'),
-        75: map-get($ecl-colors, 'success-75'),
-        50: map-get($ecl-colors, 'success-50'),
-        25: map-get($ecl-colors, 'success-25')         
+        950: map.get($ecl-colors, 'success-950'),
+        900: map.get($ecl-colors, 'success-900'),
+        800: map.get($ecl-colors, 'success-800'),
+        700: map.get($ecl-colors, 'success-700'),
+        600: map.get($ecl-colors, 'success-600'),
+        500: map.get($ecl-colors, 'success-500'),
+        400: map.get($ecl-colors, 'success-400'),
+        300: map.get($ecl-colors, 'success-300'),
+        200: map.get($ecl-colors, 'success-200'),
+        100: map.get($ecl-colors, 'success-100'),
+        75: map.get($ecl-colors, 'success-75'),
+        50: map.get($ecl-colors, 'success-50'),
+        25: map.get($ecl-colors, 'success-25')         
     ),
     wa: (
-        950: map-get($ecl-colors, 'warning-950'),
-        900: map-get($ecl-colors, 'warning-900'),
-        800: map-get($ecl-colors, 'warning-800'),
-        700: map-get($ecl-colors, 'warning-700'),
-        600: map-get($ecl-colors, 'warning-600'),
-        500: map-get($ecl-colors, 'warning-500'),
-        400: map-get($ecl-colors, 'warning-400'),
-        300: map-get($ecl-colors, 'warning-300'),
-        200: map-get($ecl-colors, 'warning-200'),
-        100: map-get($ecl-colors, 'warning-100'),
-        75: map-get($ecl-colors, 'warning-75'),
-        50: map-get($ecl-colors, 'warning-50'),
-        25: map-get($ecl-colors, 'warning-25')          
+        950: map.get($ecl-colors, 'warning-950'),
+        900: map.get($ecl-colors, 'warning-900'),
+        800: map.get($ecl-colors, 'warning-800'),
+        700: map.get($ecl-colors, 'warning-700'),
+        600: map.get($ecl-colors, 'warning-600'),
+        500: map.get($ecl-colors, 'warning-500'),
+        400: map.get($ecl-colors, 'warning-400'),
+        300: map.get($ecl-colors, 'warning-300'),
+        200: map.get($ecl-colors, 'warning-200'),
+        100: map.get($ecl-colors, 'warning-100'),
+        75: map.get($ecl-colors, 'warning-75'),
+        50: map.get($ecl-colors, 'warning-50'),
+        25: map.get($ecl-colors, 'warning-25')          
     ),
     da: (
-        950: map-get($ecl-colors, 'error-950'),
-        900: map-get($ecl-colors, 'error-900'),
-        800: map-get($ecl-colors, 'error-800'),
-        700: map-get($ecl-colors, 'error-700'),
-        600: map-get($ecl-colors, 'error-600'),
-        500: map-get($ecl-colors, 'error-500'),
-        400: map-get($ecl-colors, 'error-400'),
-        300: map-get($ecl-colors, 'error-300'),
-        200: map-get($ecl-colors, 'error-200'),
-        100: map-get($ecl-colors, 'error-100'),
-        75: map-get($ecl-colors, 'error-75'),
-        50: map-get($ecl-colors, 'error-50'),
-        25: map-get($ecl-colors, 'error-25')         
+        950: map.get($ecl-colors, 'error-950'),
+        900: map.get($ecl-colors, 'error-900'),
+        800: map.get($ecl-colors, 'error-800'),
+        700: map.get($ecl-colors, 'error-700'),
+        600: map.get($ecl-colors, 'error-600'),
+        500: map.get($ecl-colors, 'error-500'),
+        400: map.get($ecl-colors, 'error-400'),
+        300: map.get($ecl-colors, 'error-300'),
+        200: map.get($ecl-colors, 'error-200'),
+        100: map.get($ecl-colors, 'error-100'),
+        75: map.get($ecl-colors, 'error-75'),
+        50: map.get($ecl-colors, 'error-50'),
+        25: map.get($ecl-colors, 'error-25')         
     ),
     cta: (
-        950: map-get($ecl-colors, 'secondary-950'),
-        900: map-get($ecl-colors, 'secondary-900'),
-        800: map-get($ecl-colors, 'secondary-800'),
-        700: map-get($ecl-colors, 'secondary-700'),
-        600: map-get($ecl-colors, 'secondary-600'),
-        500: map-get($ecl-colors, 'secondary-500'),
-        400: map-get($ecl-colors, 'secondary-400'),
-        300: map-get($ecl-colors, 'secondary-300'),
-        200: map-get($ecl-colors, 'secondary-200'),
-        100: map-get($ecl-colors, 'secondary-100'),
-        75: map-get($ecl-colors, 'secondary-75'),
-        50: map-get($ecl-colors, 'secondary-50'),
-        25: map-get($ecl-colors, 'secondary-25')          
+        950: map.get($ecl-colors, 'secondary-950'),
+        900: map.get($ecl-colors, 'secondary-900'),
+        800: map.get($ecl-colors, 'secondary-800'),
+        700: map.get($ecl-colors, 'secondary-700'),
+        600: map.get($ecl-colors, 'secondary-600'),
+        500: map.get($ecl-colors, 'secondary-500'),
+        400: map.get($ecl-colors, 'secondary-400'),
+        300: map.get($ecl-colors, 'secondary-300'),
+        200: map.get($ecl-colors, 'secondary-200'),
+        100: map.get($ecl-colors, 'secondary-100'),
+        75: map.get($ecl-colors, 'secondary-75'),
+        50: map.get($ecl-colors, 'secondary-50'),
+        25: map.get($ecl-colors, 'secondary-25')          
     )
 );
 
@@ -402,185 +393,211 @@ $color-state-map: (
         base: 'br-900',
         default: 'br-900',
         lighter: 'br-700',
+        on-lighter: 'br-700-contrast',
         light: 'br-800',
+        on-light: 'br-800-contrast',
         dark: 'br-950',
-        darker: 'br-950',
+        on-dark: 'br-950-contrast',
     ),
     primary: (
         base: 'pr-600', 
         default: 'pr-700',
         lighter: 'pr-500',
+        on-lighter: 'pr-500-contrast',
         light: 'pr-600',
+        on-light: 'pr-600-contrast',
         dark: 'pr-900',
+        on-dark: 'pr-900-contrast',
         darker: 'pr-950',
-        on-surface-light: 'pr-900',
-        surface-lighter: 'pr-50',
+        on-darker: 'pr-950-contrast',
         surface-light: 'pr-75',
-        surface-light-contrast: 'pr-75-contrast',
-        surface-light-hover: 'pr-200',
+        on-surface-light: 'pr-900',
+        surface-light-hover: 'pr-100',
+        on-surface-light-hover: 'pr-950',
         surface-medium: 'pr-200',
         on-surface-medium: 'pr-950', 
-        border: 'pr-500',
-        border-light: 'pr-300',
-        border-lighter: 'pr-200',
         surface: 'pr-600',
-        surface-contrast: 'pr-600-contrast',
+        on-surface: 'pr-600-contrast',
         surface-hover: 'pr-700',
-        surface-hover-contrast: 'pr-700-contrast'
+        on-surface-hover: 'pr-700-contrast',
+        border: 'pr-500',
+        border-light: 'pr-300',
+        border-lighter: 'pr-200'
     ),
     secondary: (
         base: 'gr-500',
         default: 'gr-800',
         lighter: 'gr-600',
+        on-lighter: 'gr-600-contrast',
         light: 'gr-700',
+        on-light: 'gr-700-contrast',
         dark: 'gr-900',         
+        on-dark: 'gr-900-contrast',         
         darker: 'gr-950',         
-        on-surface-light: 'gr-900',
-        surface-lighter: 'gr-50',
+        on-darker: 'gr-950-contrast',         
         surface-light: 'gr-75',
-        surface-light-contrast: 'gr-75-contrast',
-        surface-light-hover: 'gr-75',
-        surface-medium: 'gr-100',
+        on-surface-light: 'gr-900',
+        surface-light-hover: 'gr-100',
+        on-surface-light-hover: 'gr-950',
+        surface-medium: 'gr-200',
         on-surface-medium: 'gr-900',
+        surface: 'gr-600',
+        on-surface: 'gr-600-contrast',
+        surface-hover: 'gr-700',
+        on-surface-hover: 'gr-700-contrast',
         border: 'gr-500',
-        border-light: 'gr-500',
-        border-lighter: 'gr-400',
-        surface: 'gr-400',
-        surface-contrast: 'gr-400-contrast',
-        surface-hover: 'gr-300',
-        surface-hover-contrast: 'gr-300-contrast'
+        border-light: 'gr-400',
+        border-lighter: 'gr-300'
     ),
     neutral: (
         base: 'grn-500',
         default: 'grn-800',
         lighter: 'grn-600',
+        on-lighter: 'grn-600-contrast',
         light: 'grn-700',
+        on-light: 'grn-700-contrast',
         dark: 'grn-900',         
+        on-dark: 'grn-900-contrast',         
         darker: 'grn-950',         
-        on-surface-light: 'grn-900',
-        surface-lighter: 'grn-25',
+        on-darker: 'grn-950-contrast',         
         surface-light: 'grn-50',
-        surface-light-contrast: 'grn-50-contrast',
+        on-surface-light: 'grn-900',
         surface-light-hover: 'grn-75',
+        on-surface-light-hover: 'grn-950',
         surface-medium: 'grn-100',
         on-surface-medium: 'grn-900',
-        border: 'grn-500',
-        border-light: 'grn-500',
-        border-lighter: 'grn-400',
         surface: 'grn-400',
-        surface-contrast: 'grn-400-contrast',
+        on-surface: 'grn-400-contrast',
         surface-hover: 'grn-300',
-        surface-hover-contrast: 'grn-300-contrast'
+        on-surface-hover: 'grn-300-contrast',
+        border: 'grn-500',
+        border-light: 'grn-400',
+        border-lighter: 'grn-300'
     ),
     cta: (
         base: 'cta-400',
-        default: 'cta-700',
+        default: 'cta-900',
         lighter: 'cta-400',
+        on-lighter: 'cta-400-contrast',
         light: 'cta-500',
+        on-light: 'cta-500-contrast',
         dark: 'cta-800',
+        on-dark: 'cta-800-contrast',
         darker: 'cta-900',
-        on-surface-light: 'cta-700',
-        surface-lighter: 'cta-25',        
+        on-darker: 'cta-900-contrast',
         surface-light: 'cta-25',
-        surface-light-contrast: 'cta-25-contrast',
-        surface-light-hover: 'cta-75',
+        on-surface-light: 'cta-800',
+        surface-light-hover: 'cta-50',
+        on-surface-light-hover: 'cta-950',
         surface-medium: 'cta-75',
-        on-surface-medium: 'cta-800',
-        border: 'cta-300',
-        border-light: 'cta-100',
-        border-lighter: 'cta-75',
+        on-surface-medium: 'cta-900',
         surface: 'cta-400',
-        surface-contrast: 'cta-400-contrast',
+        on-surface: 'cta-400-contrast',
         surface-hover: 'cta-500',
-        surface-hover-contrast: 'cta-500-contrast'
+        on-surface-hover: 'cta-500-contrast',
+        border: 'cta-300',
+        border-light: 'cta-100',
+        border-lighter: 'cta-75'
     ),
     info: (
         base: 'in-500',
         default: 'in-600',
         lighter: 'in-400',
+        on-lighter: 'in-400-contrast',
         light: 'in-500',
+        on-light: 'in-500-contrast',
         dark: 'in-800',
+        on-dark: 'in-800-contrast',
         darker: 'in-900',
-        on-surface-light: 'in-600',
-        surface-lighter: 'in-25',
+        on-darker: 'in-900-contrast',
         surface-light: 'in-50',
-        surface-light-contrast: 'in-50-contrast',
-        surface-light-hover: 'in-100',
+        on-surface-light: 'in-600',
+        surface-light-hover: 'in-75',
+        on-surface-light-hover: 'in-800',
         surface-medium: 'in-100',
-        on-surface-medium: 'in-160',
-        border: 'in-400',
-        border-light: 'in-200',
-        border-lighter: 'in-100',
+        on-surface-medium: 'in-950',
         surface: 'in-600',
-        surface-contrast: 'in-600-contrast',
+        on-surface: 'in-600-contrast',
         surface-hover: 'in-800',
-        surface-hover-contrast: 'in-800-contrast'
+        on-surface-hover: 'in-800-contrast',
+        border: 'in-400',
+        border-light: 'in-200',
+        border-lighter: 'in-100'
     ),
     success: (
         base: 'su-700',
-        default: 'su-950',
+        default: 'su-900',
         lighter: 'su-700',
+        on-lighter: 'su-700-contrast',
         light: 'su-800',
+        on-light: 'su-800-contrast',
         dark: 'su-900',
+        on-dark: 'su-900-contrast',
         darker: 'su-950',
-        on-surface-light: 'su-950',
-        surface-lighter: 'su-50',
+        on-darker: 'su-950-contrast',
         surface-light: 'su-100',
-        surface-light-contrast: 'su-100-contrast',
-        surface-light-hover: 'su-300',
+        on-surface-light: 'su-950',
+        surface-light-hover: 'su-200',
+        on-surface-light-hover: 'su-950',
         surface-medium: 'su-300',
         on-surface-medium: 'su-950',
+        surface: 'su-900',
+        on-surface: 'su-950-contrast',
+        surface-hover: 'su-950',
+        on-surface-hover: 'su-950-contrast',
         border: 'su-600',
         border-light: 'su-400',
-        border-lighter: 'su-300',
-        surface: 'su-950',
-        surface-contrast: 'su-950-contrast',
-        surface-hover: 'su-950',
-        surface-hover-contrast: 'su-950-contrast'
+        border-lighter: 'su-300'
     ),
     warning: (
         base: 'wa-500',
         default: 'wa-800',
         lighter: 'wa-500',
+        on-lighter: 'wa-500-contrast',
         light: 'wa-600',
+        on-light: 'wa-600-contrast',
         dark: 'wa-900',
+        on-dark: 'wa-900-contrast',
         darker: 'wa-950',
-        on-surface-light: 'wa-140',
-        surface-lighter: 'wa-25',
+        on-darker: 'wa-950-contrast',
         surface-light: 'wa-50',
-        surface-light-contrast: 'wa-50-contrast',
-        surface-light-hover: 'wa-100',
+        on-surface-light: 'wa-900',
+        surface-light-hover: 'wa-75',
+        on-surface-light-hover: 'wa-950',
         surface-medium: 'wa-100',
         on-surface-medium: 'wa-900',
-        border: 'wa-400',
-        border-light: 'wa-200',
-        border-lighter: 'wa-100',
         surface: 'wa-500',
-        surface-contrast: 'wa-500-contrast',
+        on-surface: 'wa-500-contrast',
         surface-hover: 'wa-600',
-        surface-hover-contrast: 'wa-600-contrast'
+        on-surface-hover: 'wa-600-contrast',
+        border: 'wa-400',
+        border-light: 'wa-200',
+        border-lighter: 'wa-100'
     ),
     danger: (
         base: 'da-600',
         default: 'da-600',
         lighter: 'da-400',
+        on-lighter: 'da-400-contrast',
         light: 'da-500',
+        on-light: 'da-500-contrast',
         dark: 'da-700',
+        on-dark: 'da-700-contrast',
         darker: 'da-800',
-        on-surface-light: 'da-700',
-        surface-lighter: 'da-50',
+        on-darker: 'da-800-contrast',
         surface-light: 'da-75',
-        surface-light-contrast: 'da-75-contrast',
-        surface-light-hover: 'da-200',
+        on-surface-light: 'da-700',
+        surface-light-hover: 'da-100',
+        on-surface-light-hover: 'da-900',
         surface-medium: 'da-200',
         on-surface-medium: 'da-900',
-        border: 'da-500',
-        border-light: 'da-300',
-        border-lighter: 'da-200',
         surface: 'da-600',
-        surface-contrast: 'da-600-contrast',
+        on-surface: 'da-600-contrast',
         surface-hover: 'da-700',
-        surface-hover-contrast: 'da-700-contrast'
+        on-surface-hover: 'da-700-contrast',
+        border: 'da-500',
+        border-light: 'da-300',
+        border-lighter: 'da-200'
     ),
 );
 
@@ -597,120 +614,13 @@ $ecl-shadow: (
 
 $box-shadow-map: (
     0: none,
-    1: map-get($ecl-shadow, 1),
-    2: map-get($ecl-shadow, 2),
-    3: map-get($ecl-shadow, 5),
-    4: map-get($ecl-shadow, 4),
-    5: map-get($ecl-shadow, 5)
-);
-
-
-// TYPOGRAPHY
-
-$font-weight-map: (
-    'regular': 400,
-    'medium': 500,
-    'semi-bold': 600,
-    'bold': 700
+    1: map.get($ecl-shadow, 1),
+    2: map.get($ecl-shadow, 2),
+    3: map.get($ecl-shadow, 5),
+    4: map.get($ecl-shadow, 4),
+    5: map.get($ecl-shadow, 5)
 );
 
-$font-map-responsive: (
-    'display': (
-        'm': (
-            'desktop': (
-                'size': 3rem,
-                'line-height': 3.5rem
-            ),
-            'tablet': (
-                'size': 2.75rem,
-                'line-height': 3.25rem
-            ),
-            'mobile': (
-                'size': 2rem,
-                'line-height': 2.25rem
-            )
-        )
-    ),    
-    'title': (
-        'xl': (
-            'desktop': (
-                'size': 2.5rem,
-                'line-height': 3rem
-            ),
-            'tablet': (
-                'size': 2rem,
-                'line-height': 2.75rem
-            ),
-            'mobile': (
-                'size': 1.75rem,
-                'line-height': 2.5rem
-            )
-        ),
-        'xs': (
-            'desktop': (
-                'size': 1.25rem,
-                'line-height': 1.75rem
-            ),
-            'tablet': (
-                'size': 1.25rem,
-                'line-height': 1.75rem
-            ),
-            'mobile': (
-                'size': 1.2rem,
-                'line-height': 1.5rem
-            )
-        )
-    )
-);
-
-$font-map: (
-    'title': (
-        '2xs': (
-            'size': 1rem,
-            'line-height': 1.5rem
-        )
-    ),
-    'card-title': (
-        'm': (
-            'size': 1.125rem,
-            'line-height': 1.5rem
-        )
-    ),    
-    'label': (
-        'm': (
-            'size': 0.875rem,
-            'line-height': 1.25rem
-        ),
-        'l': (
-            'size': 1rem,
-            'line-height': 1.5rem
-        )
-    ),
-    'body': (
-        's': (
-            'size': 0.875rem,
-            'line-height': 1.25rem
-        ),
-        'm': (
-            'size': 1rem,
-            'line-height': 1.5rem
-        ),
-        'l': (
-            'size': 1.25rem,
-            'line-height': 1.75rem
-        ),        
-        'xl': (
-            'size': 1.5rem,
-            'line-height': 2rem
-        )        
-    ),
-    'microcopy': (
-        'm': (
-            'size': 0.75rem,
-            'line-height': 1rem
-        )
-    )
-);
 
 // TYPOGRAPHY
 
@@ -719,27 +629,6 @@ $font-size-list: (
     '2xs-compact', 'xs-compact', 's-compact', 'm-compact', 'l-compact', 'xl-compact', '2xl-compact', '3xl-compact', '4xl-compact', '5xl-compact', '6xl-compact'
 );
 
-$font-size-map: (
-    2xs: 0.675rem,
-    xs: 0.75rem,
-    s: 0.875rem,
-    m: 1rem,
-    l: 1.25rem,
-    xl: 1.5rem,
-    2xl: 1.75rem,
-    3xl: 2rem,
-    4xl: 2.5rem,
-    5xl: 2.75rem,
-    6xl: 3rem
-);
-
-$font-weight-map: (
-    regular: 400,
-    medium: 400,
-    semi-bold: 700,
-    bold: 700
-);
-
 $font-line-height-map: (
     2xs: 1rem,
     xs: 1.25rem,
@@ -763,4 +652,198 @@ $font-line-height-map: (
     4xl-compact: 2.75rem,
     5xl-compact: 3rem,
     6xl-compact: 3.25rem
-);
+);
+
+$font-size-map: (
+    2xs: 0.675rem, // 10px
+    xs: 0.75rem,   // 12px
+    s: 0.875rem,   // 14px
+    m: 1rem,       // 16px
+    l: 1.25rem,    // 20px
+    xl: 1.5rem,    // 24px
+    2xl: 1.75rem,  // 28px
+    3xl: 2rem,     // 32px
+    4xl: 2.5rem,   // 40px
+    5xl: 2.75rem,  // 44px
+    6xl: 3rem      // 48px
+);
+
+$font-weight-map: (
+    'regular': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700
+);
+
+// ecl font sizes for example, but driven by m = 18px base
+
+// $ecl-font-size: (
+//   '10xl': 6rem,
+//   '9xl': 4.5rem,
+//   '8xl': 3.75rem,
+//   '7xl': 3.25rem,
+//   '6xl': 2.5rem,
+//   '5xl': 2.25rem,
+//   '4xl': 2rem,
+//   '3xl': 1.75rem,
+//   '2xl': 1.5rem,
+//   'xl': 1.375rem,
+//   'l': 1.25rem,
+//   'm': 1.125rem,
+//   's': 1rem,
+//   'xs': 0.875rem,
+//   '2xs': 0.75rem
+// );
+
+// $ecl-line-height: (
+//   '10xl': 6.25rem,
+//   '9xl': 4.875rem,
+//   '8xl': 4.25rem,
+//   '7xl': 3.75rem,
+//   '6xl': 3.5rem,
+//   '5xl': 3.25rem,
+//   '4xl': 3rem,
+//   '3xl': 2.75rem,
+//   '2xl': 2.5rem,
+//   'xl': 2.25rem,
+//   'l': 2rem,
+//   'm': 1.75rem,
+//   's': 1.5rem,
+//   'xs': 1.25rem,
+//   '2xs': 1rem,
+//   '3xs': 0.875rem,
+// );
+// $ecl-font: (
+//   '10xl': #{map.get($font-size, '10xl') + '/' + map.get($line-height, '10xl')}
+//     #{map.get($font-family, 'default')},
+//   '9xl': #{map.get($font-size, '9xl') + '/' + map.get($line-height, '9xl')}
+//     #{map.get($font-family, 'default')},
+//   '8xl': #{map.get($font-size, '8xl') + '/' + map.get($line-height, '8xl')}
+//     #{map.get($font-family, 'default')},
+//   '7xl': #{map.get($font-size, '7xl') + '/' + map.get($line-height, '7xl')}
+//     #{map.get($font-family, 'default')},
+//   '6xl': #{map.get($font-size, '6xl') + '/' + map.get($line-height, '4xl')}
+//     #{map.get($font-family, 'default')},
+//   '5xl': #{map.get($font-size, '5xl') + '/' + map.get($line-height, '4xl')}
+//     #{map.get($font-family, 'default')},
+//   '4xl': #{map.get($font-size, '4xl') + '/' + map.get($line-height, '3xl')}
+//     #{map.get($font-family, 'default')},
+//   '3xl': #{map.get($font-size, '3xl') + '/' + map.get($line-height, 'xl')}
+//     #{map.get($font-family, 'default')},
+//   '2xl': #{map.get($font-size, '2xl') + '/' + map.get($line-height, 'xl')}
+//     #{map.get($font-family, 'default')},
+//   'xl': #{map.get($font-size, 'xl') + '/' + map.get($line-height, 'l')}
+//     #{map.get($font-family, 'default')},
+//   'l': #{map.get($font-size, 'l') + '/' + map.get($line-height, 'm')}
+//     #{map.get($font-family, 'default')},
+//   'm': #{map.get($font-size, 'm') + '/' + map.get($line-height, 'm')}
+//     #{map.get($font-family, 'default')},
+//   's': #{map.get($font-size, 's') + '/' + map.get($line-height, 's')}
+//     #{map.get($font-family, 'default')},
+//   'xs': #{map.get($font-size, 'xs') + '/' + map.get($line-height, 'xs')}
+//     #{map.get($font-family, 'default')},
+//   '2xs': #{map.get($font-size, '2xs') + '/' + map.get($line-height, '3xs')}
+//     #{map.get($font-family, 'default')}
+// );
+
+
+// based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps
+
+// $font-map-responsive: (
+//     'display': (
+//         'm': (
+//             'desktop': (
+//                 'size': 3rem,
+//                 'line-height': 3.5rem
+//             ),
+//             'tablet': (
+//                 'size': 2.75rem,
+//                 'line-height': 3.25rem
+//             ),
+//             'mobile': (
+//                 'size': 2rem,
+//                 'line-height': 2.25rem
+//             )
+//         )
+//     ),    
+//     'title': (
+//         'xl': (
+//             'desktop': (
+//                 'size': 2.5rem,
+//                 'line-height': 3rem
+//             ),
+//             'tablet': (
+//                 'size': 2rem,
+//                 'line-height': 2.75rem
+//             ),
+//             'mobile': (
+//                 'size': 1.75rem,
+//                 'line-height': 2.5rem
+//             )
+//         ),
+//         'xs': (
+//             'desktop': (
+//                 'size': 1.25rem,
+//                 'line-height': 1.75rem
+//             ),
+//             'tablet': (
+//                 'size': 1.25rem,
+//                 'line-height': 1.75rem
+//             ),
+//             'mobile': (
+//                 'size': 1.2rem,
+//                 'line-height': 1.5rem
+//             )
+//         )
+//     )
+// );
+
+// $font-map: (
+//     'title': (
+//         '2xs': (
+//             'size': 1rem,
+//             'line-height': 1.5rem
+//         )
+//     ),
+//     'card-title': (
+//         'm': (
+//             'size': 1.125rem,
+//             'line-height': 1.5rem
+//         )
+//     ),    
+//     'label': (
+//         'm': (
+//             'size': 0.875rem,
+//             'line-height': 1.25rem
+//         ),
+//         'l': (
+//             'size': 1rem,
+//             'line-height': 1.5rem
+//         )
+//     ),
+//     'body': (
+//         's': (
+//             'size': 0.875rem,
+//             'line-height': 1.25rem
+//         ),
+//         'm': (
+//             'size': 1rem,
+//             'line-height': 1.5rem
+//         ),
+//         'l': (
+//             'size': 1.25rem,
+//             'line-height': 1.75rem
+//         ),        
+//         'xl': (
+//             'size': 1.5rem,
+//             'line-height': 2rem
+//         )        
+//     ),
+//     'microcopy': (
+//         'm': (
+//             'size': 0.75rem,
+//             'line-height': 1rem
+//         )
+//     )
+// );
+