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

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

@@ -0,0 +1,603 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './colors-primitive' as primitive;
+
+$color-map: (
+    branding: (
+        950: map.get(primitive.$color-map, 'grey-950'),
+        900: map.get(primitive.$color-map, 'grey-900'),
+        800: map.get(primitive.$color-map, 'grey-800'),
+        700: map.get(primitive.$color-map, 'grey-700'),
+    ),
+    primary: (
+        950: map.get(primitive.$color-map, 'primary-950'),
+        900: map.get(primitive.$color-map, 'primary-900'),
+        800: map.get(primitive.$color-map, 'primary-800'),
+        700: map.get(primitive.$color-map, 'primary-700'),
+        600: map.get(primitive.$color-map, 'primary-600'),
+        500: map.get(primitive.$color-map, 'primary-500'),
+        400: map.get(primitive.$color-map, 'primary-400'),
+        300: map.get(primitive.$color-map, 'primary-300'),
+        200: map.get(primitive.$color-map, 'primary-200'),
+        100: map.get(primitive.$color-map, 'primary-100'),
+        75: map.get(primitive.$color-map, 'primary-75'),
+        50: map.get(primitive.$color-map, 'primary-50'),
+        25: map.get(primitive.$color-map, 'primary-25'),
+    ),
+    secondary: (
+        950: map.get(primitive.$color-map, 'grey-950'),
+        900: map.get(primitive.$color-map, 'grey-900'),
+        800: map.get(primitive.$color-map, 'grey-800'),
+        700: map.get(primitive.$color-map, 'grey-700'),
+        600: map.get(primitive.$color-map, 'grey-600'),
+        500: map.get(primitive.$color-map, 'grey-500'),
+        400: map.get(primitive.$color-map, 'grey-400'),
+        300: map.get(primitive.$color-map, 'grey-300'),
+        200: map.get(primitive.$color-map, 'grey-200'),
+        100: map.get(primitive.$color-map, 'grey-100'),
+        75: map.get(primitive.$color-map, 'grey-75'),
+        50: map.get(primitive.$color-map, 'grey-50'),
+        25: map.get(primitive.$color-map, 'grey-25'),
+    ),
+    neutral: (
+        950: map.get(primitive.$color-map, 'monochrome-950'),
+        900: map.get(primitive.$color-map, 'monochrome-900'),
+        800: map.get(primitive.$color-map, 'monochrome-800'),
+        700: map.get(primitive.$color-map, 'monochrome-700'),
+        600: map.get(primitive.$color-map, 'monochrome-600'),
+        500: map.get(primitive.$color-map, 'monochrome-500'),
+        400: map.get(primitive.$color-map, 'monochrome-400'),
+        300: map.get(primitive.$color-map, 'monochrome-300'),
+        200: map.get(primitive.$color-map, 'monochrome-200'),
+        100: map.get(primitive.$color-map, 'monochrome-100'),
+        75: map.get(primitive.$color-map, 'monochrome-75'),
+        50: map.get(primitive.$color-map, 'monochrome-50'),
+        25: map.get(primitive.$color-map, 'monochrome-25'),
+    ),
+    neutral-dark: (
+        950: map.get(primitive.$color-map, 'graphite-950'),
+        900: map.get(primitive.$color-map, 'graphite-900'),
+        800: map.get(primitive.$color-map, 'graphite-800'),
+        700: map.get(primitive.$color-map, 'graphite-700'),
+        600: map.get(primitive.$color-map, 'graphite-600'),
+        500: map.get(primitive.$color-map, 'graphite-500'),
+        400: map.get(primitive.$color-map, 'graphite-400'),
+        300: map.get(primitive.$color-map, 'graphite-300'),
+        200: map.get(primitive.$color-map, 'graphite-200'),
+        100: map.get(primitive.$color-map, 'graphite-100'),
+        75: map.get(primitive.$color-map, 'graphite-75'),
+        50: map.get(primitive.$color-map, 'graphite-50'),
+        25: map.get(primitive.$color-map, 'graphite-25'),
+    ),
+    info: (
+        950: map.get(primitive.$color-map, 'info-950'),
+        900: map.get(primitive.$color-map, 'info-900'),
+        800: map.get(primitive.$color-map, 'info-800'),
+        700: map.get(primitive.$color-map, 'info-700'),
+        600: map.get(primitive.$color-map, 'info-600'),
+        500: map.get(primitive.$color-map, 'info-500'),
+        400: map.get(primitive.$color-map, 'info-400'),
+        300: map.get(primitive.$color-map, 'info-300'),
+        200: map.get(primitive.$color-map, 'info-200'),
+        100: map.get(primitive.$color-map, 'info-100'),
+        75: map.get(primitive.$color-map, 'info-75'),
+        50: map.get(primitive.$color-map, 'info-50'),
+        25: map.get(primitive.$color-map, 'info-25'),
+    ),
+    success: (
+        950: map.get(primitive.$color-map, 'success-950'),
+        900: map.get(primitive.$color-map, 'success-900'),
+        800: map.get(primitive.$color-map, 'success-800'),
+        700: map.get(primitive.$color-map, 'success-700'),
+        600: map.get(primitive.$color-map, 'success-600'),
+        500: map.get(primitive.$color-map, 'success-500'),
+        400: map.get(primitive.$color-map, 'success-400'),
+        300: map.get(primitive.$color-map, 'success-300'),
+        200: map.get(primitive.$color-map, 'success-200'),
+        100: map.get(primitive.$color-map, 'success-100'),
+        75: map.get(primitive.$color-map, 'success-75'),
+        50: map.get(primitive.$color-map, 'success-50'),
+        25: map.get(primitive.$color-map, 'success-25'),
+    ),
+    warning: (
+        950: map.get(primitive.$color-map, 'warning-950'),
+        900: map.get(primitive.$color-map, 'warning-900'),
+        800: map.get(primitive.$color-map, 'warning-800'),
+        700: map.get(primitive.$color-map, 'warning-700'),
+        600: map.get(primitive.$color-map, 'warning-600'),
+        500: map.get(primitive.$color-map, 'warning-500'),
+        400: map.get(primitive.$color-map, 'warning-400'),
+        300: map.get(primitive.$color-map, 'warning-300'),
+        200: map.get(primitive.$color-map, 'warning-200'),
+        100: map.get(primitive.$color-map, 'warning-100'),
+        75: map.get(primitive.$color-map, 'warning-75'),
+        50: map.get(primitive.$color-map, 'warning-50'),
+        25: map.get(primitive.$color-map, 'warning-25'),
+    ),
+    danger: (
+        950: map.get(primitive.$color-map, 'error-950'),
+        900: map.get(primitive.$color-map, 'error-900'),
+        800: map.get(primitive.$color-map, 'error-800'),
+        700: map.get(primitive.$color-map, 'error-700'),
+        600: map.get(primitive.$color-map, 'error-600'),
+        500: map.get(primitive.$color-map, 'error-500'),
+        400: map.get(primitive.$color-map, 'error-400'),
+        300: map.get(primitive.$color-map, 'error-300'),
+        200: map.get(primitive.$color-map, 'error-200'),
+        100: map.get(primitive.$color-map, 'error-100'),
+        75: map.get(primitive.$color-map, 'error-75'),
+        50: map.get(primitive.$color-map, 'error-50'),
+        25: map.get(primitive.$color-map, 'error-25'),
+    ),
+    critical: (
+        950: map.get(primitive.$color-map, 'error-950'),
+        900: map.get(primitive.$color-map, 'error-900'),
+        800: map.get(primitive.$color-map, 'error-800'),
+        700: map.get(primitive.$color-map, 'error-700'),
+        600: map.get(primitive.$color-map, 'error-600'),
+        500: map.get(primitive.$color-map, 'error-500'),
+        400: map.get(primitive.$color-map, 'error-400'),
+        300: map.get(primitive.$color-map, 'error-300'),
+        200: map.get(primitive.$color-map, 'error-200'),
+        100: map.get(primitive.$color-map, 'error-100'),
+        75: map.get(primitive.$color-map, 'error-75'),
+        50: map.get(primitive.$color-map, 'error-50'),
+        25: map.get(primitive.$color-map, 'error-25'),
+    ),    
+    cta: (
+        950: map.get(primitive.$color-map, 'secondary-950'),
+        900: map.get(primitive.$color-map, 'secondary-900'),
+        800: map.get(primitive.$color-map, 'secondary-800'),
+        700: map.get(primitive.$color-map, 'secondary-700'),
+        600: map.get(primitive.$color-map, 'secondary-600'),
+        500: map.get(primitive.$color-map, 'secondary-500'),
+        400: map.get(primitive.$color-map, 'secondary-400'),
+        300: map.get(primitive.$color-map, 'secondary-300'),
+        200: map.get(primitive.$color-map, 'secondary-200'),
+        100: map.get(primitive.$color-map, 'secondary-100'),
+        75: map.get(primitive.$color-map, 'secondary-75'),
+        50: map.get(primitive.$color-map, 'secondary-50'),
+        25: map.get(primitive.$color-map, 'secondary-25'),
+    ),
+    highlight: (
+        950: map.get(primitive.$color-map, 'secondary-950'),
+        900: map.get(primitive.$color-map, 'secondary-900'),
+        800: map.get(primitive.$color-map, 'secondary-800'),
+        700: map.get(primitive.$color-map, 'secondary-700'),
+        600: map.get(primitive.$color-map, 'secondary-600'),
+        500: map.get(primitive.$color-map, 'secondary-500'),
+        400: map.get(primitive.$color-map, 'secondary-400'),
+        300: map.get(primitive.$color-map, 'secondary-300'),
+        200: map.get(primitive.$color-map, 'secondary-200'),
+        100: map.get(primitive.$color-map, 'secondary-100'),
+        75: map.get(primitive.$color-map, 'secondary-75'),
+        50: map.get(primitive.$color-map, 'secondary-50'),
+        25: map.get(primitive.$color-map, 'secondary-25'),
+    )
+);
+
+@function get-contrast-map($map, $palette) {
+    @return (
+        950c: base.getContrast(map.get(map.get($map, $palette), 950)),
+        900c: base.getContrast(map.get(map.get($map, $palette), 900)),
+        800c: base.getContrast(map.get(map.get($map, $palette), 800)),
+        700c: base.getContrast(map.get(map.get($map, $palette), 700)),
+        600c: base.getContrast(map.get(map.get($map, $palette), 600)),
+        500c: base.getContrast(map.get(map.get($map, $palette), 500)),
+        400c: base.getContrast(map.get(map.get($map, $palette), 400)),
+        300c: base.getContrast(map.get(map.get($map, $palette), 300)),
+        200c: base.getContrast(map.get(map.get($map, $palette), 200)),
+        100c: base.getContrast(map.get(map.get($map, $palette), 100)),
+        75c: base.getContrast(map.get(map.get($map, $palette), 75)),
+        50c: base.getContrast(map.get(map.get($map, $palette), 50)),
+        25c: base.getContrast(map.get(map.get($map, $palette), 25)),   
+    );
+}
+
+$color-map-contrast: (
+    branding: get-contrast-map($color-map, 'branding'),
+    primary: get-contrast-map($color-map, 'primary'),
+    secondary: get-contrast-map($color-map, 'secondary'),
+    neutral: get-contrast-map($color-map, 'neutral'),
+    neutral-dark: get-contrast-map($color-map, 'neutral-dark'),
+    info: get-contrast-map($color-map, 'info'),
+    success: get-contrast-map($color-map, 'success'),
+    warning: get-contrast-map($color-map, 'warning'),
+    danger: get-contrast-map($color-map, 'danger'),
+    critical: get-contrast-map($color-map, 'critical'),
+    cta: get-contrast-map($color-map, 'cta'),
+    highlight: get-contrast-map($color-map, 'highlight'),
+);
+
+$color-map-all: map.deep-merge($color-map, $color-map-contrast);
+
+$color-semantic-map: (
+    branding: (
+        base: 900, 
+        default: 900, 
+        lighter: 700, 
+        light: 800, 
+        dark: 950, 
+        surface: 900,
+        on-surface: 900c, 
+        surface-light: 800, 
+        on-surface-light: 800c,
+        surface-dark: 950,
+        on-surface-dark: 950c
+    ),
+    primary: (
+        base: 600, 
+        default: 700, 
+        lighter: 500, 
+        light: 600, 
+        dark: 900, 
+        darker: 950, 
+        surface-light: 75, 
+        on-surface-light: 900, 
+        surface-light-hover: 100, 
+        on-surface-light-hover: 950, 
+        surface-medium: 200, 
+        on-surface-medium: 200c,
+        surface-medium-hover: 300, 
+        on-surface-medium-hover: 200c,
+        surface: 600, 
+        on-surface: 600c, 
+        surface-hover: 700, 
+        on-surface-hover: 700c,
+        surface-active: 800,
+        on-surface-active: 800c,
+        surface-dark: 900, 
+        on-surface-dark: 900c,   
+        border: 500, 
+        border-dark: 700,
+        border-light: 300, 
+        border-lighter: 200, 
+    ),
+    secondary: (
+        base: 500, 
+        default: 800, 
+        lighter: 600, 
+        light: 700, 
+        dark: 900, 
+        darker: 950, 
+        surface-light: 50, 
+        on-surface-light: 900, 
+        surface-light-hover: 75, 
+        on-surface-light-hover: 950, 
+        surface-medium: 75, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 100, 
+        on-surface-medium-hover: 950, 
+        surface: 600, 
+        on-surface: 600c, 
+        surface-hover: 700, 
+        on-surface-hover: 700c, 
+        surface-active: 800,
+        on-surface-active: 800c,        
+        surface-dark: 900, 
+        on-surface-dark: 900c, 
+        border: 500, 
+        border-dark: 700,
+        border-light: 300, 
+        border-lighter: 200, 
+    ),
+    neutral: (
+        base: 500, 
+        default: 800, 
+        lighter: 600, 
+        light: 700, 
+        dark: 900, 
+        darker: 950, 
+        surface-light: 50, 
+        on-surface-light: 900, 
+        surface-light-hover: 75, 
+        on-surface-light-hover: 950, 
+        surface-medium: 75, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 100, 
+        on-surface-medium-hover: 950, 
+        surface: 400, 
+        on-surface: 400c, 
+        surface-hover: 300, 
+        on-surface-hover: 300c, 
+        surface-active: 500,
+        on-surface-active: 500c,        
+        surface-dark: 900, 
+        on-surface-dark: 900c, 
+        border: 500, 
+        border-dark: 700,
+        border-light: 400, 
+        border-lighter: 300, 
+    ),    
+    neutral-dark: (
+        base: 500, 
+        default: 800, 
+        lighter: 600, 
+        light: 700, 
+        dark: 900,    
+        darker: 950, 
+        surface-light: 25, 
+        on-surface-light: 900, 
+        surface-light-hover: 75, 
+        on-surface-light-hover: 950, 
+        surface-medium: 75, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 100, 
+        on-surface-medium-hover: 950,      
+        surface: 400, 
+        on-surface: 400c, 
+        surface-hover: 300, 
+        on-surface-hover: 300c,
+        surface-active: 500,
+        on-surface-active: 500c,         
+        surface-dark: 900, 
+        on-surface-dark: 900c,     
+        border: 300, 
+        border-dark: 500,
+        border-light: 200, 
+        border-lighter: 100, 
+    ),
+    cta: (
+        base: 400, 
+        default: 900, 
+        lighter: 400, 
+        light: 500, 
+        dark: 800, 
+        darker: 900, 
+        surface-light: 25, 
+        on-surface-light: 800, 
+        surface-light-hover: 50, 
+        on-surface-light-hover: 950, 
+        surface-medium: 75, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 100, 
+        on-surface-medium-hover: 950,  
+        surface: 400, 
+        on-surface: 400c, 
+        surface-hover: 500, 
+        on-surface-hover: 500c, 
+        surface-active: 600,
+        on-surface-active: 600c,        
+        surface-dark: 600, 
+        on-surface-dark: 600c,  
+        border: 300, 
+        border-dark: 500,
+        border-light: 100, 
+        border-lighter: 75, 
+    ),
+    highlight: (
+        base: 400, 
+        default: 900, 
+        lighter: 400, 
+        light: 500, 
+        dark: 800, 
+        darker: 900, 
+        surface-light: 25, 
+        on-surface-light: 800, 
+        surface-light-hover: 50, 
+        on-surface-light-hover: 950, 
+        surface-medium: 75, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 100, 
+        on-surface-medium-hover: 950,  
+        surface: 400, 
+        on-surface: 400c, 
+        surface-hover: 500, 
+        on-surface-hover: 500c,
+        surface-active: 600,
+        on-surface-active: 600c,             
+        surface-dark: 600, 
+        on-surface-dark: 600c,  
+        border: 300, 
+        border-dark: 500,
+        border-light: 100, 
+        border-lighter: 75, 
+    ),    
+    info: (
+        base: 500, 
+        default: 600, 
+        lighter: 400, 
+        light: 500, 
+        dark: 800, 
+        darker: 900, 
+        surface-light: 75, 
+        on-surface-light: 600, 
+        surface-light-hover: 100, 
+        on-surface-light-hover: 800, 
+        surface-medium: 200, 
+        on-surface-medium: 950, 
+        surface-medium-hover: 300, 
+        on-surface-medium-hover: 300c,       
+        surface: 600, 
+        on-surface: 600c,       
+        surface-hover: 800, 
+        on-surface-hover: 800c,
+        surface-active: 900,
+        on-surface-active: 900c,                   
+        surface-dark: 900, 
+        on-surface-dark: 900c,             
+        border: 400, 
+        border-dark: 600,
+        border-light: 300, 
+        border-lighter: 200, 
+    ),
+    success: (
+        base: 700, 
+        default: 900, 
+        lighter: 700, 
+        light: 800, 
+        dark: 900, 
+        darker: 950, 
+        surface-light: 100, 
+        on-surface-light: 950, 
+        surface-light-hover: 200, 
+        on-surface-light-hover: 950, 
+        surface-medium: 300, 
+        on-surface-medium: 300c,       
+        surface-medium-hover: 400, 
+        on-surface-medium-hover: 400c,   
+        surface: 900, 
+        on-surface: 900c,   
+        surface-hover: 950, 
+        on-surface-hover: 950c,
+        surface-active: 950,
+        on-surface-active: 950c,               
+        surface-dark: 950, 
+        on-surface-dark: 950c,    
+        border: 600, 
+        border-dark: 800,
+        border-light: 400, 
+        border-lighter: 300, 
+    ),
+    warning: (
+        base: 500, 
+        default: 900, 
+        lighter: 700, 
+        light: 800, 
+        dark: 950, 
+        darker: 950, 
+        surface-light: 50, 
+        on-surface-light: 900, 
+        surface-light-hover: 75, 
+        on-surface-light-hover: 950, 
+        surface-medium: 100, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 200, 
+        on-surface-medium-hover: 200c, 
+        surface: 500, 
+        on-surface: 500c,   
+        surface-hover: 600, 
+        on-surface-hover: 600c,
+        surface-active: 700,
+        on-surface-active: 700c,               
+        surface-dark: 900, 
+        on-surface-dark: 900c,       
+        border: 400, 
+        border-dark: 600,
+        border-light: 200, 
+        border-lighter: 100, 
+    ),
+    danger: (
+        base: 500, 
+        default: 600, 
+        lighter: 400, 
+        light: 500, 
+        dark: 700, 
+        darker: 800, 
+        surface-light: 75, 
+        on-surface-light: 700, 
+        surface-light-hover: 100, 
+        on-surface-light-hover: 900, 
+        surface-medium: 200, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 300, 
+        on-surface-medium-hover: 950,     
+        surface: 600, 
+        on-surface: 600c,   
+        surface-hover: 700, 
+        on-surface-hover: 700c, 
+        surface-active: 800,
+        on-surface-active: 800c,            
+        surface-dark: 800, 
+        on-surface-dark: 800c, 
+        border: 500, 
+        border-dark: 700,
+        border-light: 300, 
+        border-lighter: 200, 
+    ),
+    critical: (
+        base: 500, 
+        default: 600, 
+        lighter: 400, 
+        light: 500, 
+        dark: 700, 
+        darker: 800, 
+        surface-light: 75, 
+        on-surface-light: 700, 
+        surface-light-hover: 100, 
+        on-surface-light-hover: 900, 
+        surface-medium: 200, 
+        on-surface-medium: 900, 
+        surface-medium-hover: 300, 
+        on-surface-medium-hover: 950,     
+        surface: 600, 
+        on-surface: 600c,   
+        surface-hover: 700, 
+        on-surface-hover: 700c, 
+        surface-active: 800, 
+        on-surface-active: 800c,         
+        surface-dark: 800, 
+        on-surface-dark: 800c,
+        border: 500, 
+        border-dark: 700, 
+        border-light: 300, 
+        border-lighter: 200, 
+    )      
+);
+
+
+// EXTRA SEMANTIC MAPS
+
+@function getColorContextMap($palette) {
+    @return (
+        base: map.get($palette, 500), 
+        default: map.get($palette, 600), 
+        lighter: map.get($palette, 400), 
+        light: map.get($palette, 500), 
+        dark: map.get($palette, 700), 
+        darker: map.get($palette, 800), 
+        surface-light: map.get($palette, 100), 
+        on-surface-light: map.get($palette, 950), 
+        surface-light-hover: map.get($palette, 200), 
+        on-surface-light-hover: map.get($palette, 900), 
+        surface-medium: map.get($palette, 300), 
+        on-surface-medium: map.get($palette, 900), 
+        surface-medium-hover: map.get($palette, 400), 
+        on-surface-medium-hover: map.get($palette, 950),     
+        surface: map.get($palette, 400), 
+        on-surface: base.getContrast(map.get($palette, 400)),   
+        surface-hover: map.get($palette, 600), 
+        on-surface-hover: base.getContrast(map.get($palette, 600)), 
+        surface-dark: map.get($palette, 700), 
+        on-surface-dark: base.getContrast(map.get($palette, 700)), 
+        border: map.get($palette, 500), 
+        border-light: map.get($palette, 300), 
+        border-lighter: map.get($palette, 200),     
+    );
+}
+
+$color-semantic-map-extra: (
+    'red': getColorContextMap(map.get(primitive.$color-map-extra, 'red')), 
+    'orange': getColorContextMap(map.get(primitive.$color-map-extra, 'orange')), 
+    'amber': getColorContextMap(map.get(primitive.$color-map-extra, 'amber')), 
+    'yellow': getColorContextMap(map.get(primitive.$color-map-extra, 'yellow')), 
+    'lime': getColorContextMap(map.get(primitive.$color-map-extra, 'lime')), 
+    'green': getColorContextMap(map.get(primitive.$color-map-extra, 'green')), 
+    'emerald': getColorContextMap(map.get(primitive.$color-map-extra, 'emerald')), 
+    'teal': getColorContextMap(map.get(primitive.$color-map-extra, 'teal')), 
+    'cyan': getColorContextMap(map.get(primitive.$color-map-extra, 'cyan')), 
+    'sky': getColorContextMap(map.get(primitive.$color-map-extra, 'sky')), 
+    'blue': getColorContextMap(map.get(primitive.$color-map-extra, 'blue')), 
+    'indigo': getColorContextMap(map.get(primitive.$color-map-extra, 'indigo')), 
+    'violet': getColorContextMap(map.get(primitive.$color-map-extra, 'violet')), 
+    'purple': getColorContextMap(map.get(primitive.$color-map-extra, 'purple')), 
+    'fuchsia': getColorContextMap(map.get(primitive.$color-map-extra, 'fuchsia')), 
+    'pink': getColorContextMap(map.get(primitive.$color-map-extra, 'pink')), 
+    'rose': getColorContextMap(map.get(primitive.$color-map-extra, 'rose')), 
+    
+    'ecl-blue-navy': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-blue-navy')), 
+    'ecl-blue-electric': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-blue-electric')), 
+    'ecl-blue-ocean': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-blue-ocean')), 
+    'ecl-green': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-green')), 
+    'ecl-green-dark': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-green-dark')), 
+    'ecl-orange': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-orange')), 
+    'ecl-purple': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-purple')), 
+    'ecl-green-lemon': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-green-lemon')), 
+    'ecl-green-pine': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-green-pine')), 
+    'ecl-red-crayola': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-red-crayola')), 
+    'ecl-yellow-gold': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-yellow-gold')), 
+    'ecl-orange-abricot': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-orange-abricot')), 
+    'ecl-purple-violet': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-purple-violet')), 
+    'ecl-red-tomato': getColorContextMap(map.get(primitive.$color-map-extra, 'ecl-red-tomato')), 
+);

package/dist/base/02-tokens/dimensions-primitive.scss

@@ -0,0 +1,23 @@
+$dimension-map: (
+    none: 0rem,
+    1: 0.0625rem,
+    2: 0.125rem,
+    4: 0.25rem,
+    6: 0.375rem,
+    8: 0.5rem,
+    12: 0.75rem,
+    16: 1rem,
+    20: 1.25rem,
+    24: 1.5rem,
+    28: 1.75rem,
+    32: 2rem,
+    36: 2.25rem,
+    40: 2.5rem,
+    44: 2.75rem,
+    48: 3rem,
+    52: 3.25rem,
+    56: 3.5rem,
+    60: 3.75rem,
+    64: 4rem,
+    96: 6rem,
+);

package/dist/base/02-tokens/dimensions-semantic.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use './dimensions-primitive' as primitive;
+
+$spacing-semantic-map:(
+    none: map.get(primitive.$dimension-map, none),
+    5xs: map.get(primitive.$dimension-map, 1),
+    4xs: map.get(primitive.$dimension-map, 2),
+    3xs: map.get(primitive.$dimension-map, 4),
+    2xs: map.get(primitive.$dimension-map, 6),
+    xs: map.get(primitive.$dimension-map, 8),
+    s: map.get(primitive.$dimension-map, 12),
+    m: map.get(primitive.$dimension-map, 16),
+    l: map.get(primitive.$dimension-map, 20),
+    xl: map.get(primitive.$dimension-map, 24),
+    2xl: map.get(primitive.$dimension-map, 28),
+    3xl: map.get(primitive.$dimension-map, 32),
+    4xl: map.get(primitive.$dimension-map, 36),
+    5xl: map.get(primitive.$dimension-map, 40),
+    6xl: map.get(primitive.$dimension-map, 44),
+    7xl: map.get(primitive.$dimension-map, 48),
+    8xl: map.get(primitive.$dimension-map, 52),
+    9xl: map.get(primitive.$dimension-map, 56),
+    10xl: map.get(primitive.$dimension-map, 60),
+    11xl: map.get(primitive.$dimension-map, 64)
+);
+
+$sizing-semantic-map:(
+    none: map.get(primitive.$dimension-map, none),
+    3xs: map.get(primitive.$dimension-map, 2),
+    2xs: map.get(primitive.$dimension-map, 4),
+    xs: map.get(primitive.$dimension-map, 8),
+    s: map.get(primitive.$dimension-map, 12),
+    m: map.get(primitive.$dimension-map, 16),
+    l: map.get(primitive.$dimension-map, 20),
+    xl: map.get(primitive.$dimension-map, 24),
+    2xl: map.get(primitive.$dimension-map, 28),
+    3xl: map.get(primitive.$dimension-map, 32),
+    4xl: map.get(primitive.$dimension-map, 40),
+    5xl: map.get(primitive.$dimension-map, 44),
+    6xl: map.get(primitive.$dimension-map, 48),
+    7xl: map.get(primitive.$dimension-map, 56),
+    8xl: map.get(primitive.$dimension-map, 60),
+    9xl: map.get(primitive.$dimension-map, 64)
+);
+
+$icon-sizing-semantic-map:(
+    2xs: map.get(primitive.$dimension-map, 12),
+    xs: map.get(primitive.$dimension-map, 16),
+    s: map.get(primitive.$dimension-map, 20),
+    m: map.get(primitive.$dimension-map, 24),
+    l: map.get(primitive.$dimension-map, 32),
+    xl: map.get(primitive.$dimension-map, 40),
+    2xl: map.get(primitive.$dimension-map, 48),
+    3xl: map.get(primitive.$dimension-map, 56),
+    4xl: map.get(primitive.$dimension-map, 64),
+);