@eui/styles 21.0.0-alpha.8 → 21.0.0-alpha.9

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '../01-base/' as base;
 
 // BORDER RADIUS
@@ -193,20 +194,6 @@ $ecl-colors: (
   'secondary-900': #9e4107,
   'secondary-950': #763105,
 
-  'neutral-25': #f9fafd,
-  'neutral-50': #eceff9,
-  'neutral-75': #d1d9f1,
-  'neutral-100': #c1ccec,
-  'neutral-200': #b0bde6,
-  'neutral-300': #9eaee1,
-  'neutral-400': #8ea1dc,
-  'neutral-500': #7c92d6,
-  'neutral-600': #6c85d1,
-  'neutral-700': #51649d,
-  'neutral-800': #41507d,
-  'neutral-900': #313c5e,
-  'neutral-950': #26324b,
-
   'grey-25': #fafafb,
   'grey-50': #f6f6f8,
   'grey-75': #ededf0,
@@ -279,271 +266,321 @@ $ecl-colors: (
   'warning-950': #512c0a    
 );
 
-
 $color-map: (
-    branding: (
-        120: map-get($ecl-colors, 'grey-950'),
-        100: map-get($ecl-colors, 'grey-900'),
-        80: map-get($ecl-colors, 'grey-800')
+    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')
     ),
-    primary: (
-        160: map-get($ecl-colors, 'primary-950'),
-        140: map-get($ecl-colors, 'primary-900'),
-        120: map-get($ecl-colors, 'primary-800'),
-        110: map-get($ecl-colors, 'primary-700'),
-        100: map-get($ecl-colors, 'primary-600'),
-        80: map-get($ecl-colors, 'primary-500'),
-        60: map-get($ecl-colors, 'primary-400'),
-        40: map-get($ecl-colors, 'primary-300'),
-        20: map-get($ecl-colors, 'primary-200'),
-        10: map-get($ecl-colors, 'primary-100'),
-        5: map-get($ecl-colors, 'primary-75'),
-        0: map-get($ecl-colors, 'primary-50')
+    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')
     ),
-    neutral: (
-        160: map-get($ecl-colors, 'grey-950'),
-        140: map-get($ecl-colors, 'grey-900'),
-        120: map-get($ecl-colors, 'grey-800'),
-        110: map-get($ecl-colors, 'grey-700'),
-        100: map-get($ecl-colors, 'grey-600'),
-        80: map-get($ecl-colors, 'grey-500'),
-        60: map-get($ecl-colors, 'grey-400'),
-        40: map-get($ecl-colors, 'grey-300'),
-        20: map-get($ecl-colors, 'grey-200'),
-        10: map-get($ecl-colors, 'grey-100'),
-        5: map-get($ecl-colors, 'grey-75'),
-        2: map-get($ecl-colors, 'grey-50'),
-        0: map-get($ecl-colors, 'grey-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')        
     ),
-    info: (
-        160: map-get($ecl-colors, 'info-900'),
-        140: map-get($ecl-colors, 'info-800'),
-        120: map-get($ecl-colors, 'info-700'),
-        110: map-get($ecl-colors, 'info-600'),
-        100: map-get($ecl-colors, 'info-500'),
-        80: map-get($ecl-colors, 'info-400'),
-        60: map-get($ecl-colors, 'info-300'),
-        40: map-get($ecl-colors, 'info-200'),
-        20: map-get($ecl-colors, 'info-100'),
-        10: map-get($ecl-colors, 'info-75'),
-        5: map-get($ecl-colors, 'info-50'),
-        0: map-get($ecl-colors, 'info-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,
+        25: #fbfbfb 
     ),
-    success: (
-        160: map-get($ecl-colors, 'success-950'),
-        140: map-get($ecl-colors, 'success-950'),
-        120: map-get($ecl-colors, 'success-900'),
-        110: map-get($ecl-colors, 'success-800'),
-        100: map-get($ecl-colors, 'success-700'),
-        80: map-get($ecl-colors, 'success-600'),
-        60: map-get($ecl-colors, 'success-500'),
-        40: map-get($ecl-colors, 'success-400'),
-        20: map-get($ecl-colors, 'success-300'),
-        10: map-get($ecl-colors, 'success-200'),
-        5: map-get($ecl-colors, 'success-100'),
-        0: map-get($ecl-colors, 'success-75')
+    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')         
     ),
-    warning: (
-        160: map-get($ecl-colors, 'warning-900'),
-        140: map-get($ecl-colors, 'warning-800'),
-        120: map-get($ecl-colors, 'warning-700'),
-        110: map-get($ecl-colors, 'warning-600'),
-        100: map-get($ecl-colors, 'warning-500'),
-        80: map-get($ecl-colors, 'warning-400'),
-        60: map-get($ecl-colors, 'warning-300'),
-        40: map-get($ecl-colors, 'warning-200'),
-        20: map-get($ecl-colors, 'warning-100'),
-        10: map-get($ecl-colors, 'warning-75'),
-        5: map-get($ecl-colors, 'warning-50'),
-        0: map-get($ecl-colors, 'warning-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')         
     ),
-    danger: (
-        160: map-get($ecl-colors, 'error-950'),
-        140: map-get($ecl-colors, 'error-900'),
-        120: map-get($ecl-colors, 'error-800'),
-        110: map-get($ecl-colors, 'error-700'),
-        100: map-get($ecl-colors, 'error-600'),
-        80: map-get($ecl-colors, 'error-500'),
-        60: map-get($ecl-colors, 'error-400'),
-        40: map-get($ecl-colors, 'error-300'),
-        20: map-get($ecl-colors, 'error-200'),
-        10: map-get($ecl-colors, 'error-100'),
-        5: map-get($ecl-colors, 'error-75'),
-        0: map-get($ecl-colors, 'error-50')
+    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')          
     ),
-    cta: (
-        160: map-get($ecl-colors, 'secondary-800'),
-        140: map-get($ecl-colors, 'secondary-700'),
-        120: map-get($ecl-colors, 'secondary-600'),
-        110: map-get($ecl-colors, 'secondary-500'),
-        100: map-get($ecl-colors, 'secondary-400'),
-        80: map-get($ecl-colors, 'secondary-300'),
-        60: map-get($ecl-colors, 'secondary-200'),
-        40: map-get($ecl-colors, 'secondary-100'),
-        20: map-get($ecl-colors, 'secondary-75'),
-        10: map-get($ecl-colors, 'secondary-50'),
-        5: map-get($ecl-colors, 'secondary-25'),
-        0: map-get($ecl-colors, 'secondary-25')
-    )
-);
-
-// COLOR CONTEXT
-
-$color-context-map: (
-    branding: (
-        base: '100', dark: '120', light: '80'
-    ),
-    neutral: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5', bg-lighter: '3'
+    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: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
-    primary: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
-    info: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
-    success: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
-    warning: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
-    danger: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
+        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: 'branding',
-        default: 'branding',
-        dark: 'branding-dark',
-        light: 'branding-light'
-    ), 
+        base: 'br-900',
+        default: 'br-900',
+        lighter: 'br-700',
+        light: 'br-800',
+        dark: 'br-950',
+        darker: 'br-950',
+    ),
     primary: (
-        base: 'primary', 
-        default: 'primary', 
-        on-surface-light: 'primary-darker',
-        surface-light: 'primary-bg-light',
-        surface-light-contrast: 'primary-bg-light-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'
     ),
     secondary: (
-        base: 'neutral',
-        default: 'neutral-darker',
-        on-surface-light: 'neutral-darkest',
-        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-light',
-        border-lighter: 'neutral-lightr',
-        surface: 'neutral-light',
-        surface-contrast: 'neutral-light-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-darker',
-        on-surface-light: 'cta-darker',
-        surface-light: 'cta-bg-light',
-        surface-light-contrast: 'cta-bg-light-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-light',
-        surface-light-contrast: 'info-bg-light-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-light',
-        surface-light-contrast: 'success-bg-light-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-light',
-        surface-light-contrast: 'warning-bg-light-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-dark-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',
-        on-surface-light: 'danger-dark',
-        surface-light: 'danger-bg-light',
-        surface-light-contrast: 'danger-bg-light-contrast',
-        surface-light-hover: 'danger-lightest',
-        surface-medium: 'danger-lightest',
-        on-surface-medium: 'danger-darker',
-        border: 'danger-light',
-        border-light: 'danger-lighter',
-        border-lighter: 'danger-lightest',
-        surface: 'danger',
-        surface-contrast: 'danger-contrast',
-        surface-hover: 'danger',
-        surface-hover-contrast: 'danger-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'
     ),
 );
 

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

@@ -2,22 +2,22 @@
 @use '../02-tokens/maps-dark-theme' as maps;
 
 html.eui-t-dark {
-    --eui-c-bg: var(--eui-bc-neutral-10);
+    --eui-c-bg: var(--eui-bc-gr-50);
 
-    --eui-c-surface-page: var(--eui-bc-neutral-10);
-    --eui-c-surface-shell: var(--eui-bc-neutral-10);
-    --eui-c-surface-container: var(--eui-bc-neutral-5);
-    --eui-c-surface-container-1: var(--eui-bc-neutral-10);
-    --eui-c-surface-container-2: var(--eui-bc-neutral-20);
-    --eui-c-surface-container-3: var(--eui-bc-neutral-40);    
+    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-shell: var(--eui-bc-grn-50);
+    --eui-c-surface-container: var(--eui-bc-grn-50);
+    --eui-c-surface-container-1: var(--eui-bc-grn-50);
+    --eui-c-surface-container-2: var(--eui-bc-grn-75);
+    --eui-c-surface-container-3: var(--eui-bc-grn-75);    
 
-    --eui-c-divider: var(--eui-bc-neutral-40);
-    --eui-c-divider-light: var(--eui-bc-neutral-20);    
+    --eui-c-divider: var(--eui-bc-grn-300);
+    --eui-c-divider-light: var(--eui-bc-grn-200);    
 
-    --eui-c-focus: var(--eui-bc-primary-60);
-    --eui-c-active-bg-alt: var(--eui-bc-primary-10);
+    --eui-c-focus: var(--eui-bc-pr-400);
+    --eui-c-active-bg-alt: var(--eui-bc-pr-100);
 
-    --_eui-scrollbars-foreground-color: var(--eui-bc-neutral-40);
+    --_eui-scrollbars-foreground-color: var(--eui-bc-grn-300);
 
     // COLOR SHADES
     @each $color, $shades in maps.$color-map {