@eui/styles 19.3.3-snapshot-1756410268787 → 21.0.0-alpha.10

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '../01-base/' as base;
 
 // BORDER RADIUS
@@ -23,24 +24,6 @@ $border-width-map: (
 );
 
 
-// BOX SHADOW
-
-$box-shadow-map: (
-    none: none,
-    1: (0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)),
-    2: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
-    3: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12)),
-    4: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)),
-    6: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)),
-    8: (0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)),
-    9: (0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)),
-    12: (0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)),
-    16: (0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)),
-    24: (0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)),
-    card: 0px 8px 13px -3px rgba(0, 0, 0, 0.07)    
-);
-
-
 // BREAKPOINT
 
 $breakpoint-map: (
@@ -106,23 +89,44 @@ $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,
-    4xs: 0.0625rem,
-    3xs: 0.125rem,
-    2xs: 0.25rem,
-    xs: 0.5rem,
-    s: 0.75rem,
-    m: 1rem,
-    l: 1.25rem,
-    xl: 1.5rem,
-    2xl: 2rem,
-    3xl: 2.5rem,
-    4xl: 3rem,
-    5xl: 3.5rem,
-    6xl: 4rem,
-    7xl: 5rem,
-    8xl: 6rem
+    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
 );
 
 
@@ -158,313 +162,446 @@ $z-index-map: (
 );
 
 
+
 // COLORS
 
-$color-map: (
-    branding: (
-        120: #003676,
-        110: #013C80,
-        100: #004494,
-        80: #0057BD,
-        60: #0069E6,
-        40: #0F7DFF,
-        20: #3894FF,
-        10: #61AAFF,
-        5: #8AC0FF,
-        2: #DBECFF,
-        0: #fff
-    ),
-    primary: (
-        160: #0a1f6c,
-        140: #0f2fa2,
-        120: #143fd9,
-        110: #2651eb,
-        100: #3860ed,
-        80: #5577f0,
-        60: #89a1f4,
-        40: #b1c0f8,
-        20: #d8e0fb,
-        10: #ebf3fd,
-        5: #f3f6fa,
-        0: #fff
-    ),
-    neutral: (
-        160: #131313,
-        140: #1d1d1d,
-        120: #262626,
-        110: #2b2b2b,
-        100: #303030,
-        80: #595959,
-        60: #838383,
-        40: #acacac,
-        20: #d6d6d6,
-        10: #eaeaea,
-        5: #f5f5f5,
-        3: #f9f9f9,
-        2: #fcfcfc,
-        0: #fff
-    ),
-    cta: (
-        0: #fff,
-        5: #fff9ef,
-        10: #fcefdc,
-        20: #ffebcc,
-        40: #ffe1b4,
-        60: #ffd392,
-        80: #ffcb7d,
-        100: #ffbe5c,
-        110: #fea439,
-        120: #fc8713,
-        140: #c55109,
-        160: #a84304
-    ),    
-    accent: (
-        160: #432105,
-        140: #734110,
-        120: #a46704,
-        110: #ce9100,
-        100: #efbc03,
-        80: #ffd617,
-        60: #ffe843,
-        40: #fff587,
-        20: #fffbc2,
-        10: #fefde8,
-        5: #fffcf7,
-        0: #fff
-    ),
-    info: (
-        0: #fff,
-        5: #f0f7fd,
-        10: #e3f1fc,
-        20: #c8e3f9,
-        40: #8cc5f2,
-        60: #51a6ec,
-        80: #2791e7,
-        100: #0578d6,
-        110: #046abd,
-        120: #0462ae,
-        140: #044e8b,
-        160: #033863
-    ),
-    success: (
-        160: #0e401d,
-        140: #16612b,
-        120: #1d813a,
-        110: #209141,
-        100: #24a148,
-        80: #50b46d,
-        60: #7cc791,
-        40: #a7d9b6,
-        20: #d3ecda,
-        10: #e9f6ed,
-        5: #f4faf6,
-        0: #fff
-    ),
-    warning: (
-        160: #613d07,
-        140: #925b0a,
-        120: #c27a0e,
-        110: #db890f,
-        100: #f39811,
-        80: #f5ad41,
-        60: #f8c170,
-        40: #fad6a0,
-        20: #fdeacf,
-        10: #fef5e7,
-        5: #fefaf3,
-        0: #fff
-    ),
-    danger: (
-        160: #570c10,
-        140: #831218,
-        120: #ae1820,
-        110: #c41b24,
-        100: #da1e28,
-        80: #e14b53,
-        60: #e9787e,
-        40: #f0a5a9,
-        20: #f8d2d4,
-        10: #fbe9ea,
-        5: #fdf4f4,
-        0: #fff
-    )
+$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': #f5f7fb,
+  'info-50': #ebeff7,
+  'info-75': #dee4f2,
+  'info-100': #bfcce6,
+  'info-200': #a3b6da,
+  'info-300': #859dce,
+  'info-400': #6685c2,
+  'info-500': #4a6eb7,
+  'info-600': #3b62b0,
+  'info-700': #2e58ab,
+  'info-800': #1c49a4,
+  'info-900': #0d3d9e,
+  'info-950': #039,
+
+  '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 CONTEXT
-
-$color-context-map: (
-    branding: (
-        base: '100', dark: '120', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5', bg-lighter: '2'
+$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')
     ),
-    neutral: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5', bg-lighter: '3'
+    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')
     ),
-    cta: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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')        
     ),
-    primary: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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,
+        25: #fbfbfb 
     ),
-    info: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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')         
     ),
-    accent: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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')         
     ),
-    success: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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')          
     ),
-    warning: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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')         
     ),
-    danger: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+    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: (
-    // base, darkest, darker, dark, light, lighter, lightest, bg
+    branding: (
+        base: 'br-900',
+        default: 'br-900',
+        lighter: 'br-700',
+        light: 'br-800',
+        dark: 'br-950',
+        darker: 'br-950',
+    ),
     primary: (
-        base: 'primary', 
-        default: 'primary-dark', 
-        on-surface-light: 'primary-darker',
-        surface-light: 'primary-bg',
-        surface-light-contrast: 'primary-bg-contrast',
-        surface-light-hover: 'primary-lightest',
-        surface-medium: 'primary-lightest',
-        on-surface-medium: 'primary-darkest', 
-        border: 'primary-light',
-        border-light: 'primary-lighter',
-        border-lighter: 'primary-lightest',
-        surface: 'primary',
-        surface-contrast: 'primary-contrast',
-        surface-hover: 'primary-dark',
-        surface-hover-contrast: 'primary-dark-contrast'
+        base: 'pr-600', 
+        default: 'pr-700',
+        lighter: 'pr-500',
+        light: 'pr-600',
+        dark: 'pr-900',
+        darker: 'pr-950',
+        on-surface-light: 'pr-900',
+        surface-lighter: 'pr-50',
+        surface-light: 'pr-75',
+        surface-light-contrast: 'pr-75-contrast',
+        surface-light-hover: 'pr-200',
+        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',
+        surface-hover: 'pr-700',
+        surface-hover-contrast: 'pr-700-contrast'
     ),
-    // base, darkest, darker, dark, light, lighter, lightest, bg, bg-light
     secondary: (
-        base: 'neutral',
-        default: 'neutral-dark',
-        on-surface-light: 'neutral-darker',
-        surface-light: 'neutral-bg-light',
-        surface-light-contrast: 'neutral-bg-light-contrast',
-        surface-light-hover: 'neutral-bg',
-        surface-medium: 'neutral-lightest',
-        on-surface-medium: 'neutral-darkest',
-        border: 'neutral-light',
-        border-light: 'neutral-lighter',
-        border-lighter: 'neutral-lightest',
-        surface: 'neutral-lighter',
-        surface-contrast: 'neutral-lighter-contrast',
-        surface-hover: 'neutral-lightest',
-        surface-hover-contrast: 'neutral-lightest-contrast'
+        base: 'gr-500',
+        default: 'gr-800',
+        lighter: 'gr-600',
+        light: 'gr-700',
+        dark: 'gr-900',         
+        darker: 'gr-950',         
+        on-surface-light: 'gr-900',
+        surface-lighter: 'gr-50',
+        surface-light: 'gr-75',
+        surface-light-contrast: 'gr-75-contrast',
+        surface-light-hover: 'gr-75',
+        surface-medium: 'gr-100',
+        on-surface-medium: 'gr-900',
+        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'
+    ),
+    neutral: (
+        base: 'grn-500',
+        default: 'grn-800',
+        lighter: 'grn-600',
+        light: 'grn-700',
+        dark: 'grn-900',         
+        darker: 'grn-950',         
+        on-surface-light: 'grn-900',
+        surface-lighter: 'grn-25',
+        surface-light: 'grn-50',
+        surface-light-contrast: 'grn-50-contrast',
+        surface-light-hover: 'grn-75',
+        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',
+        surface-hover: 'grn-300',
+        surface-hover-contrast: 'grn-300-contrast'
     ),
     cta: (
-        base: 'cta',
-        default: 'cta-darkest',
-        on-surface-light: 'cta-darker',
-        surface-light: 'cta-bg',
-        surface-light-contrast: 'cta-bg-contrast',
-        surface-light-hover: 'cta-lightest',
-        surface-medium: 'cta-lightest',
-        on-surface-medium: 'cta-darkest',
-        border: 'cta-light',
-        border-light: 'cta-lighter',
-        border-lighter: 'cta-lightest',
-        surface: 'cta',
-        surface-contrast: 'cta-contrast',
-        surface-hover: 'cta-dark',
-        surface-hover-contrast: 'cta-dark-contrast'
+        base: 'cta-400',
+        default: 'cta-700',
+        lighter: 'cta-400',
+        light: 'cta-500',
+        dark: 'cta-800',
+        darker: 'cta-900',
+        on-surface-light: 'cta-700',
+        surface-lighter: 'cta-25',        
+        surface-light: 'cta-25',
+        surface-light-contrast: 'cta-25-contrast',
+        surface-light-hover: 'cta-75',
+        surface-medium: 'cta-75',
+        on-surface-medium: 'cta-800',
+        border: 'cta-300',
+        border-light: 'cta-100',
+        border-lighter: 'cta-75',
+        surface: 'cta-400',
+        surface-contrast: 'cta-400-contrast',
+        surface-hover: 'cta-500',
+        surface-hover-contrast: 'cta-500-contrast'
     ),
     info: (
-        base: 'info',
-        default: 'info-dark',
-        on-surface-light: 'info-dark',
-        surface-light: 'info-bg',
-        surface-light-contrast: 'info-bg-contrast',
-        surface-light-hover: 'info-lightest',
-        surface-medium: 'info-lightest',
-        on-surface-medium: 'info-darkest',
-        border: 'info-light',
-        border-light: 'info-lighter',
-        border-lighter: 'info-lightest',
-        surface: 'info-dark',
-        surface-contrast: 'info-dark-contrast',
-        surface-hover: 'info-darker',
-        surface-hover-contrast: 'info-darker-contrast'
+        base: 'in-500',
+        default: 'in-600',
+        lighter: 'in-400',
+        light: 'in-500',
+        dark: 'in-800',
+        darker: 'in-900',
+        on-surface-light: 'in-600',
+        surface-lighter: 'in-25',
+        surface-light: 'in-50',
+        surface-light-contrast: 'in-50-contrast',
+        surface-light-hover: 'in-100',
+        surface-medium: 'in-100',
+        on-surface-medium: 'in-160',
+        border: 'in-400',
+        border-light: 'in-200',
+        border-lighter: 'in-100',
+        surface: 'in-600',
+        surface-contrast: 'in-600-contrast',
+        surface-hover: 'in-800',
+        surface-hover-contrast: 'in-800-contrast'
     ),
     success: (
-        base: 'success',
-        default: 'success-darker',
-        on-surface-light: 'success-darker',
-        surface-light: 'success-bg',
-        surface-light-contrast: 'success-bg-contrast',
-        surface-light-hover: 'success-lightest',
-        surface-medium: 'success-lightest',
-        on-surface-medium: 'success-darkest',
-        border: 'success-light',
-        border-light: 'success-lighter',
-        border-lighter: 'success-lightest',
-        surface: 'success-darker',
-        surface-contrast: 'success-darker-contrast',
-        surface-hover: 'success-darkest',
-        surface-hover-contrast: 'success-darkest-contrast'
+        base: 'su-700',
+        default: 'su-950',
+        lighter: 'su-700',
+        light: 'su-800',
+        dark: 'su-900',
+        darker: 'su-950',
+        on-surface-light: 'su-950',
+        surface-lighter: 'su-50',
+        surface-light: 'su-100',
+        surface-light-contrast: 'su-100-contrast',
+        surface-light-hover: 'su-300',
+        surface-medium: 'su-300',
+        on-surface-medium: 'su-950',
+        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'
     ),
     warning: (
-        base: 'warning',
-        default: 'warning-darker',
-        on-surface-light: 'warning-darker',
-        surface-light: 'warning-bg',
-        surface-light-contrast: 'warning-bg-contrast',
-        surface-light-hover: 'warning-lightest',
-        surface-medium: 'warning-lightest',
-        on-surface-medium: 'warning-darkest',
-        border: 'warning-light',
-        border-light: 'warning-lighter',
-        border-lighter: 'warning-lightest',
-        surface: 'warning',
-        surface-contrast: 'warning-contrast',
-        surface-hover: 'warning-dark',
-        surface-hover-contrast: 'warning-contrast'
+        base: 'wa-500',
+        default: 'wa-800',
+        lighter: 'wa-500',
+        light: 'wa-600',
+        dark: 'wa-900',
+        darker: 'wa-950',
+        on-surface-light: 'wa-140',
+        surface-lighter: 'wa-25',
+        surface-light: 'wa-50',
+        surface-light-contrast: 'wa-50-contrast',
+        surface-light-hover: 'wa-100',
+        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',
+        surface-hover: 'wa-600',
+        surface-hover-contrast: 'wa-600-contrast'
     ),
     danger: (
-        base: 'danger',
-        default: 'danger-dark',
-        on-surface-light: 'danger-darker',
-        surface-light: 'danger-bg',
-        surface-light-contrast: 'danger-bg-contrast',
-        surface-light-hover: 'danger-lightest',
-        surface-medium: 'danger-lightest',
-        on-surface-medium: 'danger-darkest',
-        border: 'danger-light',
-        border-light: 'danger-lighter',
-        border-lighter: 'danger-lightest',
-        surface: 'danger',
-        surface-contrast: 'danger-contrast',
-        surface-hover: 'danger-dark',
-        surface-hover-contrast: 'danger-dark-contrast'
+        base: 'da-600',
+        default: 'da-600',
+        lighter: 'da-400',
+        light: 'da-500',
+        dark: 'da-700',
+        darker: 'da-800',
+        on-surface-light: 'da-700',
+        surface-lighter: 'da-50',
+        surface-light: 'da-75',
+        surface-light-contrast: 'da-75-contrast',
+        surface-light-hover: 'da-200',
+        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',
+        surface-hover: 'da-700',
+        surface-hover-contrast: 'da-700-contrast'
     ),
-    accent: (
-        base: 'accent',
-        default: 'accent-darkest',
-        on-surface-light: 'accent-darkest',
-        surface-light: 'accent-bg',
-        surface-light-contrast: 'accent-bg-contrast',
-        surface-light-hover: 'accent-lightest',
-        surface-medium: 'accent-lightest',
-        on-surface-medium: 'accent-darkest',
-        border: 'accent-light',
-        border-light: 'accent-lighter',
-        border-lighter: 'accent-lightest',
-        surface: 'accent-light',
-        surface-contrast: 'accent-light-contrast',
-        surface-hover: 'accent',
-        surface-hover-contrast: 'accent-contrast'
-    )
+);
+
+// SHADOWS
+
+$ecl-shadow-color: #18274b !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))
+);
+
+$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)
 );
 
 
@@ -475,19 +612,7 @@ $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,
@@ -519,4 +644,198 @@ $font-line-height-map: (
     4xl-compact: 2.75rem,
     5xl-compact: 3rem,
     6xl-compact: 3.25rem
-);
+);
+
+$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': 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
+//         )
+//     )
+// );
+