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

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

@@ -2,21 +2,53 @@
 @use 'sass:color';
 @use '../01-base/' as base;
 
-// BORDER RADIUS
-
-$ecl-border-radius: ( // v5.alpha.16
-    'xs': 2px,
-    's': 4px,
-    'm': 8px,
-    'l': 12px,
+// PALETTES LIST
+
+$color-state-palettes: ( 'primary', 'secondary', 'info', 'success', 'warning', 'danger');
+$color-state-palettes-main: ( 'info', 'success', 'warning', 'danger');
+$color-extra-palettes: (
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+    'ecl-blue-navy',
+    'ecl-blue-electric',
+    'ecl-blue-ocean',
+    'ecl-green',
+    'ecl-green-dark',
+    'ecl-orange',
+    'ecl-purple',
+    'ecl-green-lemon',
+    'ecl-green-pine',
+    'ecl-red-crayola',
+    'ecl-yellow-gold',
+    'ecl-orange-abricot',
+    'ecl-purple-violet',
+    'ecl-red-tomato'
 );
 
+
+// BORDER RADIUS
+
 $border-radius-map: (
     none: 0,
-    s: 2px,
-    m: 4px,
-    l: 6px,
-    xl: 8px,
+    xs: 2px,
+    s: 4px,
+    m: 8px,
+    l: 12px,
     max: 999px
 );
 
@@ -46,7 +78,7 @@ $breakpoint-map: (
 );
 
 // naming
-$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 's') - 1) !default;
+$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
 $s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
 $m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
 $l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
@@ -55,7 +87,8 @@ $xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width ma
 $fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;
 
 // human naming
-$eui-bkp-mobile-down: $xs !default;
+$eui-bkp-mobile-xs: $xs !default;
+$eui-bkp-mobile-s: $s !default;
 $eui-bkp-mobile: base.new-breakpoint(max-width map.get($breakpoint-map, 'md') - 1) !default;
 $eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
 $eui-bkp-tablet: $m !default;
@@ -98,24 +131,24 @@ $opacity-map: (
 
 $spacing-map: (
     none: 0, 
-    5xs: 0.0625rem,  // 4xs
-    4xs: 0.125rem,   // 3xs
-    3xs: 0.25rem,    // 2xs
-    2xs: 0.375rem,   
-    xs: 0.5rem,      // ==
-    s: 0.75rem,      // ==
-    m: 1rem,         // ==
-    l: 1.25rem,      // ==
-    xl: 1.5rem,      // ==
-    2xl: 1.75rem,    //
-    3xl: 2rem,       // 2xl
-    4xl: 2.25rem,    // 
-    5xl: 2.5rem,     // 3xl
-    6xl: 3rem,       // 4xl
-    7xl: 3.5rem,     // 5xl
-    8xl: 4rem,       // 6xl
-    9xl: 4.5rem,     
-    10xl: 5rem,      // 7xl
+    5xs: 0.0625rem,  // 4xs - 1px
+    4xs: 0.125rem,   // 3xs - 2px
+    3xs: 0.25rem,    // 2xs - 4px
+    2xs: 0.375rem,   //     - 6px   
+    xs: 0.5rem,      // ==  - 8px
+    s: 0.75rem,      // ==  - 12px
+    m: 1rem,         // ==  - 16px
+    l: 1.25rem,      // ==  - 20px
+    xl: 1.5rem,      // ==  - 24px
+    2xl: 1.75rem,    //     - 28px
+    3xl: 2rem,       // 2xl - 32px
+    4xl: 2.25rem,    //     - 36px
+    5xl: 2.5rem,     // 3xl - 40px
+    6xl: 3rem,       // 4xl - 48px
+    7xl: 3.5rem,     // 5xl - 56px
+    8xl: 4rem,       // 6xl - 64px
+    9xl: 4.5rem,     //     - 72px
+    10xl: 5rem,      // 7xl - 80px
 );
 
 
@@ -150,470 +183,15 @@ $z-index-map: (
     growl-message: 99999
 );
 
-
-
-// COLORS
-
-$ecl-colors: (
-  'primary-25': #f7f9ff,
-  'primary-50': #f2f6ff,
-  'primary-75': #eef2ff,
-  'primary-100': #e6edff,
-  'primary-200': #d9e3ff,
-  'primary-300': #b0c6ff,
-  'primary-400': #8cacff,
-  'primary-500': #5987ff,
-  'primary-600': #0046ff,
-  'primary-700': #0035bf,
-  'primary-800': #002a99,
-  'primary-900': #001f73,
-  'primary-950': #001959,
-
-  'secondary-25': #fffcf7,
-  'secondary-50': #fff5e5,
-  'secondary-75': #ffebcc,
-  'secondary-100': #ffe1b4,
-  'secondary-200': #ffd392,
-  'secondary-300': #ffcb7d,
-  'secondary-400': #ffbe5c,
-  'secondary-500': #fea439,
-  'secondary-600': #fc8713,
-  'secondary-700': #ed6c09,
-  'secondary-800': #c55109,
-  'secondary-900': #9e4107,
-  'secondary-950': #763105,
-
-  'grey-25': #fafafb,
-  'grey-50': #f6f6f8,
-  'grey-75': #ededf0,
-  'grey-100': #e1e1e7,
-  'grey-200': #d4d4dc,
-  'grey-300': #b9b9c5,
-  'grey-400': #a0a0b1,
-  'grey-500': #84849b,
-  'grey-600': #696984,
-  'grey-700': #505070,
-  'grey-800': #353559,
-  'grey-900': #1c1c45,
-  'grey-950': #00002e,
-
-  // Status
-  'info-25': #f9fbfd,
-  'info-50': #f5f7fb,
-  'info-75': #ebeff7,
-  'info-100': #dee4f2,
-  'info-200': #bfcce6,
-  'info-300': #a3b6da,
-  'info-400': #859dce,
-  'info-500': #6685c2,
-  'info-600': #3b62b0,
-  'info-700': #1c49a4,
-  'info-800': #039,
-  'info-900': #00297a,
-  'info-950': #001f5c,
-
-  'success-25': #f9fefc,
-  'success-50': #edfbf6,
-  'success-75': #e3f9f0,
-  'success-100': #daf6eb,
-  'success-200': #b2edd6,
-  'success-300': #8fe5c4,
-  'success-400': #5ddaa9,
-  'success-500': #05c67b,
-  'success-600': #05b26f,
-  'success-700': #049e62,
-  'success-800': #037e4e,
-  'success-900': #025f3b,
-  'success-950': #02472c,
-
-  'error-25': #fefafa,
-  'error-50': #fdefef,
-  'error-75': #fce9ea,
-  'error-100': #f5bbbe,
-  'error-200': #f09a9e,
-  'error-300': #ea6c72,
-  'error-400': #e54f57,
-  'error-500': #df232d,
-  'error-600': #cb2029,
-  'error-700': #9e1920,
-  'error-800': #7b1319,
-  'error-900': #5a0e12,
-  'error-950': #1f0506,
-
-  'warning-25': #fffaf5,
-  'warning-50': #fff3e8,
-  'warning-75': #ffeddc,
-  'warning-100': #ffdbba,
-  'warning-200': #ffc998,
-  'warning-300': #ffb16a,
-  'warning-400': #ffa14d,
-  'warning-500': #ff8a20,
-  'warning-600': #e87e1d,
-  'warning-700': #ba6517,
-  'warning-800': #8b4c11,
-  'warning-900': #68390d,
-  'warning-950': #512c0a    
-);
-
-$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')
-    ),
-    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')
-    ),
-    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'),
-        // 50: #f3f3f6,
-        25: map.get($ecl-colors, 'grey-25')        
-    ),
-    grn: (
-        950: #171717,
-        900: #313131,
-        800: #474747,
-        700: #606060,
-        600: #777777,
-        500: #909090,
-        400: #a9a9a9,
-        300: #bfbfbf,
-        200: #d8d8d8,
-        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')         
-    ),
-    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')         
-    ),
-    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')          
-    ),
-    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')         
-    ),
-    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')          
-    )
-);
-
-// COLOR STATES
-
-$color-state-map: (
-    branding: (
-        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',
-        on-dark: 'br-950-contrast',
-        surface: 'br-900',
-        on-surface: 'br-900-contrast',
-        surface-light: 'br-800',
-        on-surface-light: 'br-800-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-darker: 'pr-950-contrast',
-        surface-light: 'pr-75',
-        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', 
-        surface: 'pr-600',
-        on-surface: 'pr-600-contrast',
-        surface-hover: 'pr-700',
-        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-darker: 'gr-950-contrast',         
-        surface-light: 'gr-75',
-        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-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-darker: 'grn-950-contrast',         
-        surface-light: 'grn-50',
-        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',
-        surface: 'grn-400',
-        on-surface: 'grn-400-contrast',
-        surface-hover: 'grn-300',
-        on-surface-hover: 'grn-300-contrast',
-        border: 'grn-500',
-        border-light: 'grn-400',
-        border-lighter: 'grn-300'
-    ),
-    cta: (
-        base: 'cta-400',
-        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-darker: 'cta-900-contrast',
-        surface-light: 'cta-25',
-        on-surface-light: 'cta-800',
-        surface-light-hover: 'cta-50',
-        on-surface-light-hover: 'cta-950',
-        surface-medium: 'cta-75',
-        on-surface-medium: 'cta-900',
-        surface: 'cta-400',
-        on-surface: 'cta-400-contrast',
-        surface-hover: 'cta-500',
-        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-darker: 'in-900-contrast',
-        surface-light: 'in-75',
-        on-surface-light: 'in-600',
-        surface-light-hover: 'in-100',
-        on-surface-light-hover: 'in-800',
-        surface-medium: 'in-200',
-        on-surface-medium: 'in-950',
-        surface: 'in-600',
-        on-surface: 'in-600-contrast',
-        surface-hover: 'in-800',
-        on-surface-hover: 'in-800-contrast',
-        border: 'in-400',
-        border-light: 'in-300',
-        border-lighter: 'in-200'
-    ),
-    success: (
-        base: 'su-700',
-        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-darker: 'su-950-contrast',
-        surface-light: 'su-100',
-        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'
-    ),
-    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-darker: 'wa-950-contrast',
-        surface-light: 'wa-50',
-        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',
-        surface: 'wa-500',
-        on-surface: 'wa-500-contrast',
-        surface-hover: 'wa-600',
-        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-darker: 'da-800-contrast',
-        surface-light: 'da-75',
-        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',
-        surface: 'da-600',
-        on-surface: 'da-600-contrast',
-        surface-hover: 'da-700',
-        on-surface-hover: 'da-700-contrast',
-        border: 'da-500',
-        border-light: 'da-300',
-        border-lighter: 'da-200'
-    ),
-);
-
 // SHADOWS
 
-$ecl-shadow-color: #18274b !default;
+$ecl-shadow-color: #1c1c45 !default;
 $ecl-shadow: (
-  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.08)),
-  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 22px 0 rgba($ecl-shadow-color, 0.1)),
-  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 12px 32px 0 rgba($ecl-shadow-color, 0.12)),
-  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 42px 0 rgba($ecl-shadow-color, 0.12)),
-  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 52px 0 rgba($ecl-shadow-color, 0.14))
+  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.06)), 
+  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 18px 0 rgba($ecl-shadow-color, 0.1)), 
+  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 24px 0 rgba($ecl-shadow-color, 0.12)), 
+  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 32px 0 rgba($ecl-shadow-color, 0.12)), 
+  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 20px 40px 0 rgba($ecl-shadow-color, 0.14))
 );
 
 $box-shadow-map: (
@@ -625,229 +203,240 @@ $box-shadow-map: (
     5: map.get($ecl-shadow, 5)
 );
 
-
 // TYPOGRAPHY
+$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');
 
-$font-size-list: (
-    '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl',
-    '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: (
+  '6xl': 2.5rem,
+  '5xl': 2.25rem,
+  '4xl': 2rem,
+  '3xl': 1.75rem,
+  '2xl': 1.5rem,
+  'xl': 1.25rem,
+  'l': 1.125rem,
+  'm': 1rem,
+  's': 0.875rem,
+  'xs': 0.75rem,
+  '2xs': 0.625rem
 );
 
 $font-line-height-map: (
-    2xs: 1rem,
-    xs: 1.25rem,
-    s: 1.25rem,
-    m: 1.5rem,
-    l: 1.75rem,
-    xl: 2.25rem,
-    2xl: 2.5rem,
-    3xl: 2.75rem,
-    4xl: 3rem,
-    5xl: 3.25rem,
-    6xl: 3.50rem,
-    2xs-compact: 0.75rem,
-    xs-compact: 1rem,
-    s-compact: 1rem,
-    m-compact: 1.25rem,
-    l-compact: 1.5rem,
-    xl-compact: 1.75rem,
-    2xl-compact: 2rem,
-    3xl-compact: 2.5rem,
-    4xl-compact: 2.75rem,
-    5xl-compact: 3rem,
-    6xl-compact: 3.25rem
+  '4xl': 3rem,
+  '3xl': 2.75rem,
+  '2xl': 2.5rem,
+  'xl': 2rem,
+  'l': 1.75rem,
+  'm': 1.5rem,
+  's': 1.25rem,
+  'xs': 1.125rem,
+  '2xs': 1rem
 );
 
-$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-map: (
+    6xl: (
+        desktop: (
+            font-size: 6xl,
+            line-height: 4xl
+        ),
+        tablet: (
+            font-size: 5xl,
+            line-height: 3xl
+        ),
+        mobile: (
+            font-size: 4xl,
+            line-height: xl
+        ),
+        mobile-xs: (
+            font-size: 3xl,
+            line-height: xl
+        ) 
+    ),
+    5xl: (
+        desktop: (
+            font-size: 5xl,
+            line-height: 3xl
+        ),
+        tablet: (
+            font-size: 4xl,
+            line-height: xl
+        ),
+        mobile: (
+            font-size: 3xl,
+            line-height: xl
+        ),
+        mobile-xs: (
+            font-size: 2xl,
+            line-height: l
+        ) 
+    ),
+    4xl: (
+        desktop: (
+            font-size: 4xl,
+            line-height: xl
+        ),
+        tablet: (
+            font-size: 3xl,
+            line-height: xl
+        ),
+        mobile: (
+            font-size: 2xl,
+            line-height: l
+        ),
+        mobile-xs: (
+            font-size: xl,
+            line-height: l
+        ) 
+    ),
+    3xl: (
+        desktop: (
+            font-size: 3xl,
+            line-height: xl
+        ),
+        tablet: (
+            font-size: 2xl,
+            line-height: xl
+        ),
+        mobile: (
+            font-size: xl,
+            line-height: l
+        ),
+        mobile-xs: (
+            font-size: l,
+            line-height: l
+        ) 
+    ),
+    2xl: (
+        desktop: (
+            font-size: 2xl,
+            line-height: xl
+        ),
+        tablet: (
+            font-size: xl,
+            line-height: l
+        ),
+        mobile: (
+            font-size: l,
+            line-height: l
+        ),
+        mobile-xs: (
+            font-size: l,
+            line-height: l
+        ) 
+    ),
+    xl: (
+        desktop: (
+            font-size: xl,
+            line-height: xl
+        ),
+        tablet: (
+            font-size: xl,
+            line-height: xl
+        ),
+        mobile: (
+            font-size: l,
+            line-height: l
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: m
+        ) 
+    ),
+    l: (
+        desktop: (
+            font-size: l,
+            line-height: l
+        ),
+        tablet: (
+            font-size: l,
+            line-height: l
+        ),
+        mobile: (
+            font-size: m,
+            line-height: m
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: m
+        ) 
+    ),
+    m: (
+        desktop: (
+            font-size: m,
+            line-height: m
+        ),
+        tablet: (
+            font-size: m,
+            line-height: m
+        ),
+        mobile: (
+            font-size: m,
+            line-height: m
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: m
+        ) 
+    ),
+    s: (
+        desktop: (
+            font-size: s,
+            line-height: s
+        ),
+        tablet: (
+            font-size: s,
+            line-height: s
+        ),
+        mobile: (
+            font-size: s,
+            line-height: s
+        ),
+        mobile-xs: (
+            font-size: s,
+            line-height: s
+        ) 
+    ),
+    xs: (
+        desktop: (
+            font-size: xs,
+            line-height: xs
+        ),
+        tablet: (
+            font-size: xs,
+            line-height: xs
+        ),
+        mobile: (
+            font-size: xs,
+            line-height: xs
+        ),
+        mobile-xs: (
+            font-size: xs,
+            line-height: xs
+        ) 
+    ),
+    2xs: (
+        desktop: (
+            font-size: 2xs,
+            line-height: 2xs
+        ),
+        tablet: (
+            font-size: 2xs,
+            line-height: 2xs
+        ),
+        mobile: (
+            font-size: 2xs,
+            line-height: 2xs
+        ),
+        mobile-xs: (
+            font-size: 2xs,
+            line-height: 2xs
+        ) 
+    )
 );
 
 $font-weight-map: (
+    'light': 300,
     '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
-//         )
-//     )
-// );
-