@eui/eds-styles 22.0.0-alpha.4 → 22.0.0-alpha.40

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

@@ -4,15 +4,15 @@
 @use './colors-primitive' as primitive;
 
 $color-semantic-map: (
+
+    // =============================================
+    // SURFACES — Elevation
+    // =============================================
+
     surface-accent: map.get(primitive.$color-map, 'graphite-900'),
     surface-selected: map.get(primitive.$color-map, 'graphite-800'),
     surface-skeleton: map.get(primitive.$color-map, 'graphite-800'),
     surface-invisible: map.get(primitive.$color-map, 'alpha-graphite-0-0'),
-    
-    surface-brand: map.get(primitive.$color-map, 'graphite-900'),
-    on-surface-brand: map.get(primitive.$color-map, 'graphite-0'),
-    surface-brand--hover: map.get(primitive.$color-map, 'graphite-950'),
-    on-surface-brand--hover: map.get(primitive.$color-map, 'graphite-0'),
 
     surface-elevation-sunken: map.get(primitive.$color-map, 'graphite-1000'),
     surface-elevation-inset: map.get(primitive.$color-map, 'graphite-950'),
@@ -21,19 +21,42 @@ $color-semantic-map: (
     surface-elevation-elevated: map.get(primitive.$color-map, 'graphite-700'),
     surface-elevation-overlay: map.get(primitive.$color-map, 'graphite-600'),
 
+    // =============================================
+    // SURFACES — Brand
+    // =============================================
+
+    surface-brand: map.get(primitive.$color-map, 'graphite-900'),
+    on-surface-brand: map.get(primitive.$color-map, 'graphite-0'),
+    surface-brand--hover: map.get(primitive.$color-map, 'graphite-950'),
+    on-surface-brand--hover: map.get(primitive.$color-map, 'graphite-0'),
+
+    // =============================================
+    // SURFACES — Disabled
+    // =============================================
+
     surface-disabled: map.get(primitive.$color-map, 'graphite-700'),
     on-surface-disabled: map.get(primitive.$color-map, 'graphite-400'),
     surface-disabled-subtle: map.get(primitive.$color-map, 'graphite-800'),
     on-surface-disabled-subtle: map.get(primitive.$color-map, 'graphite-400'),
 
+    // =============================================
+    // SURFACES — Primary
+    // =============================================
+
     surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
     on-surface-primary: map.get(primitive.$color-map, 'graphite-0'),
     surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
     on-surface-primary--hover: map.get(primitive.$color-map, 'graphite-0'),
-    surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
+    surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-700'),
     on-surface-primary--pressed: map.get(primitive.$color-map, 'graphite-0'),
-    surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-50'),
-    on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
+    surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
+    on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-50'),
+    surface-primary-subtler: map.get(primitive.$color-map, 'european-blue-950'),
+    on-surface-primary-subtler: map.get(primitive.$color-map, 'european-blue-50'),
+
+    // =============================================
+    // SURFACES — Highlight
+    // =============================================
 
     surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
     on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
@@ -41,15 +64,23 @@ $color-semantic-map: (
     on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
     surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
     on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
-    surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
-    on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'), 
+    surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-950'),
+    on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-500'),
 
-    surface-inverted:  map.get(primitive.$color-map, 'graphite-50'),
-    on-surface-inverted:  map.get(primitive.$color-map, 'graphite-950'),
-    surface-inverted-subtle:  map.get(primitive.$color-map, 'graphite-50'),
-    on-surface-inverted-subtle:  map.get(primitive.$color-map, 'graphite-800'),
-    surface-inverted-disabled:  map.get(primitive.$color-map, 'graphite-50'),
-    on-surface-inverted-disabled:  map.get(primitive.$color-map, 'graphite-100'),
+    // =============================================
+    // SURFACES — Inverted
+    // =============================================
+
+    surface-inverted: map.get(primitive.$color-map, 'graphite-50'),
+    on-surface-inverted: map.get(primitive.$color-map, 'graphite-950'),
+    surface-inverted-subtle: map.get(primitive.$color-map, 'graphite-50'),
+    on-surface-inverted-subtle: map.get(primitive.$color-map, 'graphite-950'),
+    surface-inverted-disabled: map.get(primitive.$color-map, 'graphite-50'),
+    on-surface-inverted-disabled: map.get(primitive.$color-map, 'graphite-200'),
+
+    // =============================================
+    // SURFACES — Neutral
+    // =============================================
 
     surface-neutral: map.get(primitive.$color-map, 'graphite-300'),
     on-surface-neutral: map.get(primitive.$color-map, 'graphite-0'),
@@ -58,11 +89,17 @@ $color-semantic-map: (
     surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-500'),
     on-surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-0'),
     surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-800'),
-    on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'), 
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'),
     surface-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-900'),
-    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-0'),       
-    surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-700'),
-    on-surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-0'),          
+    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-0'),
+    surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-800'),
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-0'),
+    surface-neutral-subtler--hover: map.get(primitive.$color-map, 'graphite-600'),
+    on-surface-neutral-subtler--hover: map.get(primitive.$color-map, 'graphite-0'),
+
+    // =============================================
+    // SURFACES — Critical
+    // =============================================
 
     surface-critical: map.get(primitive.$color-map, 'red-600'),
     on-surface-critical: map.get(primitive.$color-map, 'graphite-0'),
@@ -70,113 +107,67 @@ $color-semantic-map: (
     on-surface-critical--hover: map.get(primitive.$color-map, 'graphite-0'),
     surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
     on-surface-critical--pressed: map.get(primitive.$color-map, 'graphite-0'),
-    surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
-    on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'), 
-    surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
-    on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'), 
+    surface-critical-subtle: map.get(primitive.$color-map, 'red-800'),
+    on-surface-critical-subtle: map.get(primitive.$color-map, 'red-50'),
+    surface-critical-subtler: map.get(primitive.$color-map, 'red-950'),
+    on-surface-critical-subtler: map.get(primitive.$color-map, 'red-75'),
     surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-100'),
     on-surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-900'),
 
+    // =============================================
+    // SURFACES — Info
+    // =============================================
+
     surface-info: map.get(primitive.$color-map, 'blue-600'),
-    on-surface-info: map.get(primitive.$color-map, 'graphite-0'),    
-    surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
-    on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),    
-    surface-info-subtler: map.get(primitive.$color-map, 'blue-50'),
-    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
+    on-surface-info: map.get(primitive.$color-map, 'graphite-0'),
+    surface-info--hover: map.get(primitive.$color-map, 'blue-700'),
+    on-surface-info--hover: map.get(primitive.$color-map, 'graphite-0'),
+    surface-info--pressed: map.get(primitive.$color-map, 'blue-800'),
+    on-surface-info--pressed: map.get(primitive.$color-map, 'graphite-0'),
+    surface-info-subtle: map.get(primitive.$color-map, 'blue-800'),
+    on-surface-info-subtle: map.get(primitive.$color-map, 'blue-100'),
+    surface-info-subtler: map.get(primitive.$color-map, 'blue-950'),
+    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-100'),
     surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
     on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),
 
-    surface-success: map.get(primitive.$color-map, 'green-800'),
-    on-surface-success: map.get(primitive.$color-map, 'graphite-0'),    
-    surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
-    on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),    
-    surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
-    on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
+    // =============================================
+    // SURFACES — Success
+    // =============================================
+
+    surface-success: map.get(primitive.$color-map, 'green-500'),
+    on-surface-success: map.get(primitive.$color-map, 'graphite-0'),
+    surface-success--hover: map.get(primitive.$color-map, 'green-900'),
+    on-surface-success--hover: map.get(primitive.$color-map, 'graphite-0'),
+    surface-success--pressed: map.get(primitive.$color-map, 'green-950'),
+    on-surface-success--pressed: map.get(primitive.$color-map, 'graphite-0'),
+    surface-success-subtle: map.get(primitive.$color-map, 'green-800'),
+    on-surface-success-subtle: map.get(primitive.$color-map, 'green-50'),
+    surface-success-subtler: map.get(primitive.$color-map, 'green-950'),
+    on-surface-success-subtler: map.get(primitive.$color-map, 'green-100'),
     surface-success-subtler--hover: map.get(primitive.$color-map, 'green-200'),
     on-surface-success-subtler--hover: map.get(primitive.$color-map, 'green-900'),
 
+    // =============================================
+    // SURFACES — Warning
+    // =============================================
+
     surface-warning: map.get(primitive.$color-map, 'orange-500'),
-    on-surface-warning: map.get(primitive.$color-map, 'orange-950'),    
-    surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
-    on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),    
-    surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
-    on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
+    on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
+    surface-warning--hover: map.get(primitive.$color-map, 'orange-600'),
+    on-surface-warning--hover: map.get(primitive.$color-map, 'orange-950'),
+    surface-warning--pressed: map.get(primitive.$color-map, 'orange-700'),
+    on-surface-warning--pressed: map.get(primitive.$color-map, 'orange-950'),
+    surface-warning-subtle: map.get(primitive.$color-map, 'orange-700'),
+    on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-50'),
+    surface-warning-subtler: map.get(primitive.$color-map, 'orange-950'),
+    on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
     surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
     on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),
-    
-    foreground: map.get(primitive.$color-map, 'graphite-25'),
-    foreground-subtle: map.get(primitive.$color-map, 'graphite-75'),
-    foreground-subtler: map.get(primitive.$color-map, 'graphite-100'),
-    foreground-placeholder: map.get(primitive.$color-map, 'graphite-200'),
-    foreground-disabled: map.get(primitive.$color-map, 'graphite-400'),
-    foreground-primary: map.get(primitive.$color-map, 'european-blue-500'),
-    foreground-success: map.get(primitive.$color-map, 'green-500'),
-    foreground-info: map.get(primitive.$color-map, 'blue-500'),
-    foreground-warning: map.get(primitive.$color-map, 'orange-500'),
-    foreground-critical: map.get(primitive.$color-map, 'red-400'),
-    foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-600'),
-    foreground-inverted: map.get(primitive.$color-map, 'graphite-950'),
-
-    border-brand: map.get(primitive.$color-map, 'silver-fog-50'),
-    border-divider: map.get(primitive.$color-map, 'graphite-500'),
-    border-disabled: map.get(primitive.$color-map, 'graphite-700'),
-    
-    border-primary: map.get(primitive.$color-map, 'european-blue-600'),
-    border-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
-    border-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
-    border-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
-    border-primary-subtler: map.get(primitive.$color-map, 'european-blue-900'),
-    
-    border-info: map.get(primitive.$color-map, 'blue-700'),
-    border-info-subtle: map.get(primitive.$color-map, 'blue-900'),
-
-    border-success: map.get(primitive.$color-map, 'green-700'),
-    border-success-subtle: map.get(primitive.$color-map, 'green-900'),
-
-    border-warning: map.get(primitive.$color-map, 'orange-600'),
-    border-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
-
-    border-critical: map.get(primitive.$color-map, 'red-600'),
-    border-critical-subtle: map.get(primitive.$color-map, 'red-900'),
-
-    border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
-    border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-700'),
-
-    border-inverted: map.get(primitive.$color-map, 'graphite-900'),
-    border-inverted-disabled: map.get(primitive.$color-map, 'graphite-800'),
-
-    border-neutral: map.get(primitive.$color-map, 'graphite-500'),
-    border-neutral--hover: map.get(primitive.$color-map, 'graphite-600'),
-    border-neutral-subtle: map.get(primitive.$color-map, 'graphite-700'),
-    border-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-600'),
-
-    link: map.get(primitive.$color-map, 'european-blue-400'),
-    link--focused: map.get(primitive.$color-map, 'european-blue-400'),
-    link--hover: map.get(primitive.$color-map, 'european-blue-500'),
-    link--pressed: map.get(primitive.$color-map, 'european-blue-200'),
-    link--visited: map.get(primitive.$color-map, 'european-blue-300'),
-    
-    link-inverted: map.get(primitive.$color-map, 'european-blue-600'),
-    link-inverted--focused: map.get(primitive.$color-map, 'european-blue-600'),
-    link-inverted--hover: map.get(primitive.$color-map, 'european-blue-700'),
-    link-inverted--pressed: map.get(primitive.$color-map, 'european-blue-800'),
-    link-inverted--visited: map.get(primitive.$color-map, 'european-blue-700'),    
-
-    link-contrast: map.get(primitive.$color-map, 'graphite-0'),
-    link-contrast--focused: map.get(primitive.$color-map, 'graphite-0'),
-    link-contrast--hover: map.get(primitive.$color-map, 'graphite-50'),
-    link-contrast--pressed: map.get(primitive.$color-map, 'graphite-100'),
-    link-contrast--visited: map.get(primitive.$color-map, 'graphite-25'),    
-
-    focus: map.get(primitive.$color-map, 'european-blue-600'),
-    focus-inverted: map.get(primitive.$color-map, 'european-blue-800'),
-    focus-critical: map.get(primitive.$color-map, 'red-600'),
 
-    alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
-    alpha-backdrop: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
-    alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-graphite-0-10'),
-    alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-graphite-950-30'),
-    alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-graphite-950-10'),
+    // =============================================
+    // SURFACES — Color Modes (cm-*)
+    // =============================================
 
     surface-cm-purple-violet-subtler: map.get(primitive.$color-map, 'cm-purple-violet-950'),
     on-surface-cm-purple-violet-subtler: map.get(primitive.$color-map, 'cm-purple-violet-200'),
@@ -237,4 +228,99 @@ $color-semantic-map: (
     surface-cm-warm-grey-subtler: map.get(primitive.$color-map, 'cm-warm-grey-950'),
     on-surface-cm-warm-grey-subtler: map.get(primitive.$color-map, 'cm-warm-grey-200'),
     border-cm-warm-grey-subtle: map.get(primitive.$color-map, 'cm-warm-grey-700'),
+
+    // =============================================
+    // FOREGROUND / Text
+    // =============================================
+
+    foreground: map.get(primitive.$color-map, 'graphite-25'),
+    foreground-subtle: map.get(primitive.$color-map, 'graphite-75'),
+    foreground-subtler: map.get(primitive.$color-map, 'graphite-100'),
+    foreground-placeholder: map.get(primitive.$color-map, 'graphite-200'),
+    foreground-disabled: map.get(primitive.$color-map, 'graphite-400'),
+    foreground-primary: map.get(primitive.$color-map, 'european-blue-400'),
+    foreground-success: map.get(primitive.$color-map, 'green-500'),
+    foreground-info: map.get(primitive.$color-map, 'blue-400'),
+    foreground-warning: map.get(primitive.$color-map, 'orange-500'),
+    foreground-critical: map.get(primitive.$color-map, 'red-400'),
+    foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-600'),
+    foreground-inverted: map.get(primitive.$color-map, 'graphite-950'),
+
+    // =============================================
+    // BORDERS
+    // =============================================
+
+    border-brand: map.get(primitive.$color-map, 'silver-fog-50'),
+    border-divider: map.get(primitive.$color-map, 'graphite-500'),
+    border-disabled: map.get(primitive.$color-map, 'graphite-700'),
+
+    border-primary: map.get(primitive.$color-map, 'european-blue-600'),
+    border-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
+    border-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
+    border-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
+    border-primary-subtler: map.get(primitive.$color-map, 'european-blue-900'),
+
+    border-info: map.get(primitive.$color-map, 'blue-700'),
+    border-info-subtle: map.get(primitive.$color-map, 'blue-900'),
+
+    border-success: map.get(primitive.$color-map, 'green-700'),
+    border-success-subtle: map.get(primitive.$color-map, 'green-900'),
+
+    border-warning: map.get(primitive.$color-map, 'orange-600'),
+    border-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
+
+    border-critical: map.get(primitive.$color-map, 'red-600'),
+    border-critical-subtle: map.get(primitive.$color-map, 'red-900'),
+
+    border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
+    border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-500'),
+
+    border-inverted: map.get(primitive.$color-map, 'graphite-900'),
+    border-inverted-disabled: map.get(primitive.$color-map, 'graphite-800'),
+
+    border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
+    border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
+    border-neutral-subtle: map.get(primitive.$color-map, 'graphite-400'),
+    border-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-500'),
+
+    // =============================================
+    // LINKS
+    // =============================================
+
+    link: map.get(primitive.$color-map, 'european-blue-400'),
+    link--focused: map.get(primitive.$color-map, 'european-blue-400'),
+    link--hover: map.get(primitive.$color-map, 'european-blue-500'),
+    link--pressed: map.get(primitive.$color-map, 'european-blue-600'),
+    link--visited: map.get(primitive.$color-map, 'european-blue-500'),
+
+    link-inverted: map.get(primitive.$color-map, 'european-blue-600'),
+    link-inverted--focused: map.get(primitive.$color-map, 'european-blue-600'),
+    link-inverted--hover: map.get(primitive.$color-map, 'european-blue-700'),
+    link-inverted--pressed: map.get(primitive.$color-map, 'european-blue-800'),
+    link-inverted--visited: map.get(primitive.$color-map, 'european-blue-700'),
+
+    link-contrast: map.get(primitive.$color-map, 'graphite-0'),
+    link-contrast--focused: map.get(primitive.$color-map, 'graphite-0'),
+    link-contrast--hover: map.get(primitive.$color-map, 'graphite-50'),
+    link-contrast--pressed: map.get(primitive.$color-map, 'graphite-100'),
+    link-contrast--visited: map.get(primitive.$color-map, 'graphite-25'),
+
+    // =============================================
+    // FOCUS
+    // =============================================
+
+    focus: map.get(primitive.$color-map, 'european-blue-600'),
+    focus-inverted: map.get(primitive.$color-map, 'european-blue-800'),
+    focus-critical: map.get(primitive.$color-map, 'red-600'),
+    border-focus: map.get(primitive.$color-map, 'european-blue-600'),
+
+    // =============================================
+    // ALPHA / Backdrop
+    // =============================================
+
+    alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
+    alpha-backdrop: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
+    alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-graphite-0-10'),
+    alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-graphite-950-30'),
+    alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-graphite-950-10'),
 );