@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.3

package/dist/base/02-tokens/colors-default.scss

@@ -1,465 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@use '../01-base/' as base;
-
-$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,
-
-  'monochrome-25': #fbfbfb,
-  'monochrome-50': #f7f7f7,
-  'monochrome-75': #efefef,
-  'monochrome-100': #e4e4e4,
-  'monochrome-200': #d8d8d8,
-  'monochrome-300': #bfbfbf,
-  'monochrome-400': #a9a9a9,
-  'monochrome-500': #909090,
-  'monochrome-600': #777,
-  'monochrome-700': #606060,
-  'monochrome-800': #474747,
-  'monochrome-900': #313131,
-  'monochrome-950': #171717,  
-
-  // 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'),
-        25: map.get($ecl-colors, 'grey-25')        
-    ),
-    grn: (
-        950: map.get($ecl-colors, 'monochrome-950'),
-        900: map.get($ecl-colors, 'monochrome-900'),
-        800: map.get($ecl-colors, 'monochrome-800'),
-        700: map.get($ecl-colors, 'monochrome-700'),
-        600: map.get($ecl-colors, 'monochrome-600'),
-        500: map.get($ecl-colors, 'monochrome-500'),
-        400: map.get($ecl-colors, 'monochrome-400'),
-        300: map.get($ecl-colors, 'monochrome-300'),
-        200: map.get($ecl-colors, 'monochrome-200'),
-        100: map.get($ecl-colors, 'monochrome-100'),
-        75: map.get($ecl-colors, 'monochrome-75'),
-        50: map.get($ecl-colors, 'monochrome-50'),
-        25: map.get($ecl-colors, 'monochrome-25') 
-    ),
-    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-state-map: (
-    branding: (
-        base: map.get(map.get($color-map, br), 900), 
-        default: map.get(map.get($color-map, br), 900), 
-        lighter: map.get(map.get($color-map, br), 700), 
-        light: map.get(map.get($color-map, br), 800), 
-        dark: map.get(map.get($color-map, br), 950), 
-        surface: map.get(map.get($color-map, br), 900), 
-        on-surface: base.getContrast(map.get(map.get($color-map, br), 900)), 
-        surface-light: map.get(map.get($color-map, br), 800), 
-        on-surface-light: base.getContrast(map.get(map.get($color-map, br), 800)), 
-        surface-dark: map.get(map.get($color-map, br), 950), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, br), 950)), 
-    ),
-    primary: (
-        base: map.get(map.get($color-map, pr), 600), 
-        default: map.get(map.get($color-map, pr), 700), 
-        lighter: map.get(map.get($color-map, pr), 500), 
-        light: map.get(map.get($color-map, pr), 600), 
-        dark: map.get(map.get($color-map, pr), 900), 
-        darker: map.get(map.get($color-map, pr), 950), 
-        surface-light: map.get(map.get($color-map, pr), 75), 
-        on-surface-light: map.get(map.get($color-map, pr), 900), 
-        surface-light-hover: map.get(map.get($color-map, pr), 100), 
-        on-surface-light-hover: map.get(map.get($color-map, pr), 950), 
-        surface-medium: map.get(map.get($color-map, pr), 200), 
-        on-surface-medium: base.getContrast(map.get(map.get($color-map, pr), 200)), 
-        surface-medium-hover: map.get(map.get($color-map, pr), 300), 
-        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, pr), 300)),  
-        surface: map.get(map.get($color-map, pr), 600), 
-        on-surface: base.getContrast(map.get(map.get($color-map, pr), 600)), 
-        surface-hover: map.get(map.get($color-map, pr), 700), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, pr), 700)), 
-        surface-dark: map.get(map.get($color-map, pr), 900), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, pr), 900)),   
-        border: map.get(map.get($color-map, pr), 500), 
-        border-light: map.get(map.get($color-map, pr), 300), 
-        border-lighter: map.get(map.get($color-map, pr), 200), 
-    ),
-    secondary: (
-        base: map.get(map.get($color-map, gr), 500), 
-        default: map.get(map.get($color-map, gr), 800), 
-        lighter: map.get(map.get($color-map, gr), 600), 
-        light: map.get(map.get($color-map, gr), 700), 
-        dark: map.get(map.get($color-map, gr), 900), 
-        darker: map.get(map.get($color-map, gr), 950), 
-        surface-light: map.get(map.get($color-map, gr), 50), 
-        on-surface-light: map.get(map.get($color-map, gr), 900), 
-        surface-light-hover: map.get(map.get($color-map, gr), 75), 
-        on-surface-light-hover: map.get(map.get($color-map, gr), 950), 
-        surface-medium: map.get(map.get($color-map, gr), 75), 
-        on-surface-medium: map.get(map.get($color-map, gr), 900), 
-        surface-medium-hover: map.get(map.get($color-map, gr), 100), 
-        on-surface-medium-hover: map.get(map.get($color-map, gr), 950), 
-        surface: map.get(map.get($color-map, gr), 600), 
-        on-surface: base.getContrast(map.get(map.get($color-map, gr), 600)), 
-        surface-hover: map.get(map.get($color-map, gr), 700), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, gr), 700)), 
-        surface-dark: map.get(map.get($color-map, gr), 900), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, gr), 900)), 
-        border: map.get(map.get($color-map, gr), 500), 
-        border-light: map.get(map.get($color-map, gr), 300), 
-        border-lighter: map.get(map.get($color-map, gr), 200), 
-    ),
-    neutral: (
-        base: map.get(map.get($color-map, grn), 500), 
-        default: map.get(map.get($color-map, grn), 800), 
-        lighter: map.get(map.get($color-map, grn), 600), 
-        light: map.get(map.get($color-map, grn), 700), 
-        dark: map.get(map.get($color-map, grn), 900),    
-        darker: map.get(map.get($color-map, grn), 950), 
-        surface-light: map.get(map.get($color-map, grn), 50), 
-        on-surface-light: map.get(map.get($color-map, grn), 900), 
-        surface-light-hover: map.get(map.get($color-map, grn), 75), 
-        on-surface-light-hover: map.get(map.get($color-map, grn), 950), 
-        surface-medium: map.get(map.get($color-map, grn), 75), 
-        on-surface-medium: map.get(map.get($color-map, grn), 900), 
-        surface-medium-hover: map.get(map.get($color-map, grn), 100), 
-        on-surface-medium-hover: map.get(map.get($color-map, grn), 950),      
-        surface: map.get(map.get($color-map, grn), 400), 
-        on-surface: base.getContrast(map.get(map.get($color-map, grn), 400)), 
-        surface-hover: map.get(map.get($color-map, grn), 300), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, grn), 300)), 
-        surface-dark: map.get(map.get($color-map, grn), 900), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, grn), 900)),     
-        border: map.get(map.get($color-map, grn), 500), 
-        border-light: map.get(map.get($color-map, grn), 400), 
-        border-lighter: map.get(map.get($color-map, grn), 300), 
-    ),
-    cta: (
-        base: map.get(map.get($color-map, cta), 400), 
-        default: map.get(map.get($color-map, cta), 900), 
-        lighter: map.get(map.get($color-map, cta), 400), 
-        light: map.get(map.get($color-map, cta), 500), 
-        dark: map.get(map.get($color-map, cta), 800), 
-        darker: map.get(map.get($color-map, cta), 900), 
-        surface-light: map.get(map.get($color-map, cta), 25), 
-        on-surface-light: map.get(map.get($color-map, cta), 800), 
-        surface-light-hover: map.get(map.get($color-map, cta), 50), 
-        on-surface-light-hover: map.get(map.get($color-map, cta), 950), 
-        surface-medium: map.get(map.get($color-map, cta), 75), 
-        on-surface-medium: map.get(map.get($color-map, cta), 900), 
-        surface-medium-hover: map.get(map.get($color-map, cta), 100), 
-        on-surface-medium-hover: map.get(map.get($color-map, cta), 950),  
-        surface: map.get(map.get($color-map, cta), 400), 
-        on-surface: base.getContrast(map.get(map.get($color-map, cta), 400)), 
-        surface-hover: map.get(map.get($color-map, cta), 500), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, cta), 500)), 
-        surface-dark: map.get(map.get($color-map, cta), 600), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, cta), 600)),  
-        border: map.get(map.get($color-map, cta), 300), 
-        border-light: map.get(map.get($color-map, cta), 100), 
-        border-lighter: map.get(map.get($color-map, cta), 75), 
-    ),
-    info: (
-        base: map.get(map.get($color-map, in), 500), 
-        default: map.get(map.get($color-map, in), 600), 
-        lighter: map.get(map.get($color-map, in), 400), 
-        light: map.get(map.get($color-map, in), 500), 
-        dark: map.get(map.get($color-map, in), 800), 
-        darker: map.get(map.get($color-map, in), 900), 
-        surface-light: map.get(map.get($color-map, in), 75), 
-        on-surface-light: map.get(map.get($color-map, in), 600), 
-        surface-light-hover: map.get(map.get($color-map, in), 100), 
-        on-surface-light-hover: map.get(map.get($color-map, in), 800), 
-        surface-medium: map.get(map.get($color-map, in), 200), 
-        on-surface-medium: map.get(map.get($color-map, in), 950), 
-        surface-medium-hover: map.get(map.get($color-map, in), 300), 
-        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, in), 300)),       
-        surface: map.get(map.get($color-map, in), 600), 
-        on-surface: base.getContrast(map.get(map.get($color-map, in), 600)),       
-        surface-hover: map.get(map.get($color-map, in), 800), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, in), 800)),       
-        surface-dark: map.get(map.get($color-map, in), 800), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, in), 800)),             
-        border: map.get(map.get($color-map, in), 400), 
-        border-light: map.get(map.get($color-map, in), 300), 
-        border-lighter: map.get(map.get($color-map, in), 200), 
-    ),
-    success: (
-        base: map.get(map.get($color-map, su), 700), 
-        default: map.get(map.get($color-map, su), 900), 
-        lighter: map.get(map.get($color-map, su), 700), 
-        light: map.get(map.get($color-map, su), 800), 
-        dark: map.get(map.get($color-map, su), 900), 
-        darker: map.get(map.get($color-map, su), 950), 
-        surface-light: map.get(map.get($color-map, su), 100), 
-        on-surface-light: map.get(map.get($color-map, su), 950), 
-        surface-light-hover: map.get(map.get($color-map, su), 200), 
-        on-surface-light-hover: map.get(map.get($color-map, su), 950), 
-        surface-medium: map.get(map.get($color-map, su), 300), 
-        on-surface-medium: base.getContrast(map.get(map.get($color-map, su), 300)),       
-        surface-medium-hover: map.get(map.get($color-map, su), 400), 
-        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, su), 400)),   
-        surface: map.get(map.get($color-map, su), 900), 
-        on-surface: base.getContrast(map.get(map.get($color-map, su), 900)),   
-        surface-hover: map.get(map.get($color-map, su), 950), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, su), 950)),   
-        surface-dark: map.get(map.get($color-map, su), 950), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, su), 950)),    
-        border: map.get(map.get($color-map, su), 600), 
-        border-light: map.get(map.get($color-map, su), 400), 
-        border-lighter: map.get(map.get($color-map, su), 300), 
-    ),
-    warning: (
-        base: map.get(map.get($color-map, wa), 500), 
-        default: map.get(map.get($color-map, wa), 900), 
-        lighter: map.get(map.get($color-map, wa), 700), 
-        light: map.get(map.get($color-map, wa), 800), 
-        dark: map.get(map.get($color-map, wa), 950), 
-        darker: map.get(map.get($color-map, wa), 950), 
-        surface-light: map.get(map.get($color-map, wa), 50), 
-        on-surface-light: map.get(map.get($color-map, wa), 900), 
-        surface-light-hover: map.get(map.get($color-map, wa), 75), 
-        on-surface-light-hover: map.get(map.get($color-map, wa), 950), 
-        surface-medium: map.get(map.get($color-map, wa), 100), 
-        on-surface-medium: map.get(map.get($color-map, wa), 900), 
-        surface-medium-hover: map.get(map.get($color-map, wa), 200), 
-        on-surface-medium-hover: map.get(map.get($color-map, wa), 950), 
-        surface: map.get(map.get($color-map, wa), 500), 
-        on-surface: base.getContrast(map.get(map.get($color-map, wa), 500)),   
-        surface-hover: map.get(map.get($color-map, wa), 600), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, wa), 600)),   
-        surface-dark: map.get(map.get($color-map, wa), 900), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, wa), 900)),       
-        border: map.get(map.get($color-map, wa), 400), 
-        border-light: map.get(map.get($color-map, wa), 200), 
-        border-lighter: map.get(map.get($color-map, wa), 100), 
-    ),
-    danger: (
-        base: map.get(map.get($color-map, da), 500), 
-        default: map.get(map.get($color-map, da), 600), 
-        lighter: map.get(map.get($color-map, da), 400), 
-        light: map.get(map.get($color-map, da), 500), 
-        dark: map.get(map.get($color-map, da), 700), 
-        darker: map.get(map.get($color-map, da), 800), 
-        surface-light: map.get(map.get($color-map, da), 75), 
-        on-surface-light: map.get(map.get($color-map, da), 700), 
-        surface-light-hover: map.get(map.get($color-map, da), 100), 
-        on-surface-light-hover: map.get(map.get($color-map, da), 900), 
-        surface-medium: map.get(map.get($color-map, da), 200), 
-        on-surface-medium: map.get(map.get($color-map, da), 900), 
-        surface-medium-hover: map.get(map.get($color-map, da), 300), 
-        on-surface-medium-hover: map.get(map.get($color-map, da), 950),     
-        surface: map.get(map.get($color-map, da), 600), 
-        on-surface: base.getContrast(map.get(map.get($color-map, da), 600)),   
-        surface-hover: map.get(map.get($color-map, da), 600), 
-        on-surface-hover: base.getContrast(map.get(map.get($color-map, da), 700)), 
-        surface-dark: map.get(map.get($color-map, da), 800), 
-        on-surface-dark: base.getContrast(map.get(map.get($color-map, da), 800)), 
-        border: map.get(map.get($color-map, da), 500), 
-        border-light: map.get(map.get($color-map, da), 300), 
-        border-lighter: map.get(map.get($color-map, da), 200), 
-    ),
-);
-