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

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

@@ -4,28 +4,45 @@
 @use './colors-primitive' as primitive;
 
 $color-semantic-map: (
+
+    // =============================================
+    // SURFACES — Elevation
+    // =============================================
+
     surface-accent: map.get(primitive.$color-map, 'european-blue-50'),
     surface-selected: map.get(primitive.$color-map, 'european-blue-100'),
     surface-skeleton: map.get(primitive.$color-map, 'silver-fog-100'),
     surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'),
-    
-    surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
-    on-surface-brand: map.get(primitive.$color-map, 'silver-fog-0'),
-    surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-800'),
-    on-surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-0'),
 
-    surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-50'),
+    surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-75'),
     surface-elevation-inset: map.get(primitive.$color-map, 'silver-fog-25'),
     surface-elevation: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-elevation-raised: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-elevation-elevated: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-elevation-overlay: map.get(primitive.$color-map, 'silver-fog-0'),
 
+    // =============================================
+    // SURFACES — Brand
+    // =============================================
+
+    surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-brand: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-800'),
+    on-surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+
+    // =============================================
+    // SURFACES — Disabled
+    // =============================================
+
     surface-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
     on-surface-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
     surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-50'),
     on-surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-400'),
 
+    // =============================================
+    // SURFACES — Primary
+    // =============================================
+
     surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
     on-surface-primary: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
@@ -34,6 +51,12 @@ $color-semantic-map: (
     on-surface-primary--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-200'),
     on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
+    surface-primary-subtler: map.get(primitive.$color-map, 'european-blue-50'),
+    on-surface-primary-subtler: map.get(primitive.$color-map, 'european-blue-800'),
+
+    // =============================================
+    // SURFACES — Highlight
+    // =============================================
 
     surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
     on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
@@ -42,14 +65,22 @@ $color-semantic-map: (
     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'), 
+    on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'),
+
+    // =============================================
+    // SURFACES — Inverted
+    // =============================================
 
-    surface-inverted:  map.get(primitive.$color-map, 'silver-fog-950'),
-    on-surface-inverted:  map.get(primitive.$color-map, 'silver-fog-0'),
-    surface-inverted-subtle:  map.get(primitive.$color-map, 'silver-fog-950'),
-    on-surface-inverted-subtle:  map.get(primitive.$color-map, 'silver-fog-300'),
-    surface-inverted-disabled:  map.get(primitive.$color-map, 'silver-fog-950'),
-    on-surface-inverted-disabled:  map.get(primitive.$color-map, 'silver-fog-600'),
+    surface-inverted: map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
+    surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-950'),
+    on-surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-600'),
+
+    // =============================================
+    // SURFACES — Neutral
+    // =============================================
 
     surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
     on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
@@ -58,11 +89,17 @@ $color-semantic-map: (
     surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
     on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),
-    on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),    
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),
     surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-200'),
-    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-900'),    
-    surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-75'),
-    on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),       
+    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-900'),
+    surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-100'),
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),
+    surface-neutral-subtler--hover: map.get(primitive.$color-map, 'silver-fog-75'),
+    on-surface-neutral-subtler--hover: map.get(primitive.$color-map, 'silver-fog-900'),
+
+    // =============================================
+    // SURFACES — Critical
+    // =============================================
 
     surface-critical: map.get(primitive.$color-map, 'red-600'),
     on-surface-critical: map.get(primitive.$color-map, 'silver-fog-0'),
@@ -71,104 +108,136 @@ $color-semantic-map: (
     surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
     on-surface-critical--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
-    on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'), 
+    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'), 
+    on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'),
     surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-100'),
-    on-surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-900'),    
-    
+    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, 'silver-fog-0'),    
+    on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-info--hover: map.get(primitive.$color-map, 'blue-700'),
+    on-surface-info--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-info--pressed: map.get(primitive.$color-map, 'blue-800'),
+    on-surface-info--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
-    on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),    
+    on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),
     surface-info-subtler: map.get(primitive.$color-map, 'blue-75'),
-    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'), 
+    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
     surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
-    on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),       
+    on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),
+
+    // =============================================
+    // SURFACES — Success
+    // =============================================
 
     surface-success: map.get(primitive.$color-map, 'green-800'),
-    on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),  
+    on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-success--hover: map.get(primitive.$color-map, 'green-900'),
+    on-surface-success--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-success--pressed: map.get(primitive.$color-map, 'green-950'),
+    on-surface-success--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
-    on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),    
+    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'),  
+    on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
     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'),    
+    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-200'),
-    on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),    
+    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'),
     surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
-    on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),    
+    on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),
+
+    // =============================================
+    // SURFACES — Color Modes (cm-*)
+    // =============================================
 
     surface-cm-purple-violet-subtler: map.get(primitive.$color-map, 'cm-purple-violet-50'),
     on-surface-cm-purple-violet-subtler: map.get(primitive.$color-map, 'cm-purple-violet-800'),
-    border-cm-purple-violet-subtle: map.get(primitive.$color-map, 'cm-purple-violet-300'), 
+    border-cm-purple-violet-subtle: map.get(primitive.$color-map, 'cm-purple-violet-300'),
 
     surface-cm-purple-subtler: map.get(primitive.$color-map, 'cm-purple-50'),
     on-surface-cm-purple-subtler: map.get(primitive.$color-map, 'cm-purple-800'),
-    border-cm-purple-subtle: map.get(primitive.$color-map, 'cm-purple-300'), 
+    border-cm-purple-subtle: map.get(primitive.$color-map, 'cm-purple-300'),
 
     surface-cm-blue-navy-subtler: map.get(primitive.$color-map, 'cm-blue-navy-100'),
     on-surface-cm-blue-navy-subtler: map.get(primitive.$color-map, 'cm-blue-navy-800'),
-    border-cm-blue-navy-subtle: map.get(primitive.$color-map, 'cm-blue-navy-300'), 
+    border-cm-blue-navy-subtle: map.get(primitive.$color-map, 'cm-blue-navy-300'),
 
     surface-cm-blue-electric-subtler: map.get(primitive.$color-map, 'cm-blue-electric-100'),
     on-surface-cm-blue-electric-subtler: map.get(primitive.$color-map, 'cm-blue-electric-800'),
-    border-cm-blue-electric-subtle: map.get(primitive.$color-map, 'cm-blue-electric-300'), 
+    border-cm-blue-electric-subtle: map.get(primitive.$color-map, 'cm-blue-electric-300'),
 
     surface-cm-green-dark-subtler: map.get(primitive.$color-map, 'cm-green-dark-50'),
     on-surface-cm-green-dark-subtler: map.get(primitive.$color-map, 'cm-green-dark-800'),
-    border-cm-green-dark-subtle: map.get(primitive.$color-map, 'cm-green-dark-300'), 
+    border-cm-green-dark-subtle: map.get(primitive.$color-map, 'cm-green-dark-300'),
 
     surface-cm-green-pine-subtler: map.get(primitive.$color-map, 'cm-green-pine-50'),
     on-surface-cm-green-pine-subtler: map.get(primitive.$color-map, 'cm-green-pine-800'),
-    border-cm-green-pine-subtle: map.get(primitive.$color-map, 'cm-green-pine-300'), 
+    border-cm-green-pine-subtle: map.get(primitive.$color-map, 'cm-green-pine-300'),
 
     surface-cm-green-subtler: map.get(primitive.$color-map, 'cm-green-50'),
     on-surface-cm-green-subtler: map.get(primitive.$color-map, 'cm-green-950'),
-    border-cm-green-subtle: map.get(primitive.$color-map, 'cm-green-300'), 
+    border-cm-green-subtle: map.get(primitive.$color-map, 'cm-green-300'),
 
     surface-cm-blue-ocean-subtler: map.get(primitive.$color-map, 'cm-blue-ocean-50'),
     on-surface-cm-blue-ocean-subtler: map.get(primitive.$color-map, 'cm-blue-ocean-950'),
-    border-cm-blue-ocean-subtle: map.get(primitive.$color-map, 'cm-blue-ocean-300'), 
+    border-cm-blue-ocean-subtle: map.get(primitive.$color-map, 'cm-blue-ocean-300'),
 
     surface-cm-green-lemon-subtler: map.get(primitive.$color-map, 'cm-green-lemon-50'),
     on-surface-cm-green-lemon-subtler: map.get(primitive.$color-map, 'cm-green-lemon-950'),
-    border-cm-green-lemon-subtle: map.get(primitive.$color-map, 'cm-green-lemon-500'), 
+    border-cm-green-lemon-subtle: map.get(primitive.$color-map, 'cm-green-lemon-500'),
 
     surface-cm-yellow-gold-subtler: map.get(primitive.$color-map, 'cm-yellow-gold-50'),
     on-surface-cm-yellow-gold-subtler: map.get(primitive.$color-map, 'cm-yellow-gold-950'),
-    border-cm-yellow-gold-subtle: map.get(primitive.$color-map, 'cm-yellow-gold-300'), 
+    border-cm-yellow-gold-subtle: map.get(primitive.$color-map, 'cm-yellow-gold-300'),
 
     surface-cm-orange-abricot-subtler: map.get(primitive.$color-map, 'cm-orange-abricot-50'),
     on-surface-cm-orange-abricot-subtler: map.get(primitive.$color-map, 'cm-orange-abricot-950'),
-    border-cm-orange-abricot-subtle: map.get(primitive.$color-map, 'cm-orange-abricot-300'), 
+    border-cm-orange-abricot-subtle: map.get(primitive.$color-map, 'cm-orange-abricot-300'),
 
     surface-cm-orange-subtler: map.get(primitive.$color-map, 'cm-orange-50'),
     on-surface-cm-orange-subtler: map.get(primitive.$color-map, 'cm-orange-900'),
-    border-cm-orange-subtle: map.get(primitive.$color-map, 'cm-orange-300'), 
+    border-cm-orange-subtle: map.get(primitive.$color-map, 'cm-orange-300'),
 
     surface-cm-red-tomato-subtler: map.get(primitive.$color-map, 'cm-red-tomato-50'),
     on-surface-cm-red-tomato-subtler: map.get(primitive.$color-map, 'cm-red-tomato-950'),
-    border-cm-red-tomato-subtle: map.get(primitive.$color-map, 'cm-red-tomato-300'), 
+    border-cm-red-tomato-subtle: map.get(primitive.$color-map, 'cm-red-tomato-300'),
 
     surface-cm-red-crayola-subtler: map.get(primitive.$color-map, 'cm-red-crayola-50'),
     on-surface-cm-red-crayola-subtler: map.get(primitive.$color-map, 'cm-red-crayola-950'),
-    border-cm-red-crayola-subtle: map.get(primitive.$color-map, 'cm-red-crayola-300'), 
+    border-cm-red-crayola-subtle: map.get(primitive.$color-map, 'cm-red-crayola-300'),
 
     surface-cm-warm-grey-subtler: map.get(primitive.$color-map, 'cm-warm-grey-50'),
     on-surface-cm-warm-grey-subtler: map.get(primitive.$color-map, 'cm-warm-grey-950'),
-    border-cm-warm-grey-subtle: map.get(primitive.$color-map, 'cm-warm-grey-300'), 
+    border-cm-warm-grey-subtle: map.get(primitive.$color-map, 'cm-warm-grey-300'),
+
+    // =============================================
+    // FOREGROUND / Text
+    // =============================================
 
     foreground: map.get(primitive.$color-map, 'silver-fog-950'),
     foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
     foreground-subtler: map.get(primitive.$color-map, 'silver-fog-700'),
     foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-500'),
-    foreground-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
+    foreground-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
     foreground-primary: map.get(primitive.$color-map, 'european-blue-600'),
     foreground-success: map.get(primitive.$color-map, 'green-800'),
     foreground-info: map.get(primitive.$color-map, 'blue-900'),
@@ -177,16 +246,20 @@ $color-semantic-map: (
     foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-900'),
     foreground-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
 
+    // =============================================
+    // BORDERS
+    // =============================================
+
     border-brand: map.get(primitive.$color-map, 'silver-fog-950'),
     border-divider: map.get(primitive.$color-map, 'silver-fog-200'),
     border-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
-    
+
     border-primary: map.get(primitive.$color-map, 'european-blue-600'),
     border-primary--hover: map.get(primitive.$color-map, 'european-blue-500'),
     border-primary--pressed: map.get(primitive.$color-map, 'european-blue-400'),
     border-primary-subtle: map.get(primitive.$color-map, 'european-blue-400'),
     border-primary-subtler: map.get(primitive.$color-map, 'european-blue-100'),
-    
+
     border-info: map.get(primitive.$color-map, 'blue-700'),
     border-info-subtle: map.get(primitive.$color-map, 'blue-300'),
 
@@ -210,27 +283,40 @@ $color-semantic-map: (
     border-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
     border-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-400'),
 
+    // =============================================
+    // LINKS
+    // =============================================
+
     link: map.get(primitive.$color-map, 'european-blue-600'),
     link--focused: map.get(primitive.$color-map, 'european-blue-600'),
     link--hover: map.get(primitive.$color-map, 'european-blue-700'),
     link--pressed: map.get(primitive.$color-map, 'european-blue-800'),
     link--visited: map.get(primitive.$color-map, 'european-blue-700'),
-    
+
     link-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
     link-inverted--focused: map.get(primitive.$color-map, 'silver-fog-0'),
     link-inverted--hover: map.get(primitive.$color-map, 'silver-fog-50'),
     link-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-100'),
-    link-inverted--visited: map.get(primitive.$color-map, 'silver-fog-25'),    
+    link-inverted--visited: map.get(primitive.$color-map, 'silver-fog-25'),
 
     link-contrast: map.get(primitive.$color-map, 'silver-fog-950'),
     link-contrast--focused: map.get(primitive.$color-map, 'silver-fog-950'),
     link-contrast--hover: map.get(primitive.$color-map, 'silver-fog-950'),
     link-contrast--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
-    link-contrast--visited: map.get(primitive.$color-map, 'silver-fog-900'),    
+    link-contrast--visited: map.get(primitive.$color-map, 'silver-fog-900'),
+
+    // =============================================
+    // FOCUS
+    // =============================================
 
     focus: map.get(primitive.$color-map, 'european-blue-600'),
     focus-inverted: map.get(primitive.$color-map, 'european-blue-300'),
     focus-critical: map.get(primitive.$color-map, 'red-400'),
+    border-focus: map.get(primitive.$color-map, 'european-blue-600'),
+
+    // =============================================
+    // ALPHA / Backdrop
+    // =============================================
 
     alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-silver-fog-950-60'),
     alpha-backdrop: map.get(primitive.$color-map, 'alpha-silver-fog-950-30'),

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

@@ -1,23 +1,10 @@
-$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,
-);
+@use './ecl/primitives/dimension' as ecl-dimension;
+
+// PRIMITIVE DIMENSION MAP
+//
+// Sourced from the ecl-eds foundations primitives (single source of truth).
+// The `$dimension-map` name is retained as the consumer-facing alias; its
+// values come verbatim from `ecl/primitives/_dimension.scss` ($dimension).
+// To change a value, edit the upstream primitive and re-run tools/ecl-import.mjs.
+
+$dimension-map: ecl-dimension.$dimension;

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

@@ -44,6 +44,7 @@ $sizing-semantic-map:(
 );
 
 $icon-sizing-semantic-map:(
+    3xs: map.get(primitive.$dimension-map, 8),
     2xs: map.get(primitive.$dimension-map, 12),
     xs: map.get(primitive.$dimension-map, 16),
     s: map.get(primitive.$dimension-map, 20),

package/dist/base/02-tokens/ecl/primitives/_breakpoint.scss

@@ -0,0 +1,16 @@
+// ============================================================================
+// GENERATED FILE — DO NOT EDIT.
+//
+// Imported verbatim from ecl-eds-foundations/primitives/_breakpoint.scss
+// by tools/ecl-import.mjs. Edit the upstream source and re-run:
+//   node packages/eui/packages/eds-styles/tools/ecl-import.mjs
+// ============================================================================
+
+$breakpoint: (
+  xs: 480px,
+  s: 768px,
+  m: 996px,
+  l: 1140px,
+  xl: 1440px,
+  2xl: 1600px,
+);

package/dist/base/02-tokens/ecl/primitives/_color-domain.scss

@@ -0,0 +1,189 @@
+// ============================================================================
+// GENERATED FILE — DO NOT EDIT.
+//
+// Imported verbatim from ecl-eds-foundations/primitives/_color-domain.scss
+// by tools/ecl-import.mjs. Edit the upstream source and re-run:
+//   node packages/eui/packages/eds-styles/tools/ecl-import.mjs
+// ============================================================================
+
+$color-domain: (
+  'domain-blue-navy-50': #f5f5fa,
+  'domain-blue-navy-100': #f0f0f8,
+  'domain-blue-navy-200': #d9d9ec,
+  'domain-blue-navy-300': #bfbfe0,
+  'domain-blue-navy-400': #a0a0d1,
+  'domain-blue-navy-500': #8c8cc7,
+  'domain-blue-navy-600': #4545a4,
+  'domain-blue-navy-700': #000083,
+  'domain-blue-navy-800': #000069,
+  'domain-blue-navy-900': #00002e,
+  'domain-blue-navy-950': #00002e,
+
+  'domain-blue-electric-50': #e6f8fd,
+  'domain-blue-electric-100': #d9f5fb,
+  'domain-blue-electric-200': #b1eaf7,
+  'domain-blue-electric-300': #5bd3ef,
+  'domain-blue-electric-400': #03bbe6,
+  'domain-blue-electric-500': #03a8cf,
+  'domain-blue-electric-600': #028cad,
+  'domain-blue-electric-700': #02708a,
+  'domain-blue-electric-800': #015467,
+  'domain-blue-electric-900': #014959,
+  'domain-blue-electric-950': #014555,
+
+  'domain-green-50': #e6f9f2,
+  'domain-green-100': #daf6eb,
+  'domain-green-200': #b2edd6,
+  'domain-green-300': #8fe5c4,
+  'domain-green-400': #5ddaa9,
+  'domain-green-500': #05c67b,
+  'domain-green-600': #05b26f,
+  'domain-green-700': #049e62,
+  'domain-green-800': #04955c,
+  'domain-green-900': #03774a,
+  'domain-green-950': #037146,
+
+  'domain-green-dark-50': #e6f0f0,
+  'domain-green-dark-100': #d9e8e8,
+  'domain-green-dark-200': #b0d0d0,
+  'domain-green-dark-300': #8cbaba,
+  'domain-green-dark-400': #599c9c,
+  'domain-green-dark-500': #066,
+  'domain-green-dark-600': #005c5c,
+  'domain-green-dark-700': #005252,
+  'domain-green-dark-800': #004d4d,
+  'domain-green-dark-900': #003d3d,
+  'domain-green-dark-950': #003a3a,
+
+  'domain-orange-50': #fff3e9,
+  'domain-orange-100': #ffe9d6,
+  'domain-orange-200': #ffdbba,
+  'domain-orange-300': #ffc998,
+  'domain-orange-400': #ffb16a,
+  'domain-orange-500': #ff8a20,
+  'domain-orange-600': #e87e1d,
+  'domain-orange-700': #b56217,
+  'domain-orange-800': #8c4c12,
+  'domain-orange-900': #6b3a0d,
+  'domain-orange-950': #66370c,
+
+  'domain-purple-50': #f4effb,
+  'domain-purple-100': #ebe1f8,
+  'domain-purple-200': #ddcdf3,
+  'domain-purple-300': #ccb5ee,
+  'domain-purple-400': #b594e6,
+  'domain-purple-500': #905fd9,
+  'domain-purple-600': #8356c5,
+  'domain-purple-700': #66439a,
+  'domain-purple-800': #4f3477,
+  'domain-purple-900': #3c285b,
+  'domain-purple-950': #392656,
+
+  'domain-blue-ocean-50': #e8f8f6,
+  'domain-blue-ocean-100': #dcf5f2,
+  'domain-blue-ocean-200': #b7eae4,
+  'domain-blue-ocean-300': #97e0d8,
+  'domain-blue-ocean-400': #69d2c6,
+  'domain-blue-ocean-500': #18baa8,
+  'domain-blue-ocean-600': #16a797,
+  'domain-blue-ocean-700': #139586,
+  'domain-blue-ocean-800': #128c7e,
+  'domain-blue-ocean-900': #0e7065,
+  'domain-blue-ocean-950': #0d6a60,
+
+  'domain-green-lemon-50': #fafcee,
+  'domain-green-lemon-100': #f7fbe5,
+  'domain-green-lemon-200': #eff6c9,
+  'domain-green-lemon-300': #e8f2b0,
+  'domain-green-lemon-400': #ddec8d,
+  'domain-green-lemon-500': #cbe250,
+  'domain-green-lemon-600': #b7cb48,
+  'domain-green-lemon-700': #a2b540,
+  'domain-green-lemon-800': #98aa3c,
+  'domain-green-lemon-900': #7a8830,
+  'domain-green-lemon-950': #687429,
+
+  'domain-green-pine-50': #eff3f3,
+  'domain-green-pine-100': #dae2e4,
+  'domain-green-pine-200': #ced8db,
+  'domain-green-pine-300': #b6c6ca,
+  'domain-green-pine-400': #94abb1,
+  'domain-green-pine-500': #809ba2,
+  'domain-green-pine-600': #445c63,
+  'domain-green-pine-700': #0a3f4d,
+  'domain-green-pine-800': #08323e,
+  'domain-green-pine-900': #082f3a,
+  'domain-green-pine-950': #082d37,
+
+  'domain-red-crayola-50': #fcebee,
+  'domain-red-crayola-100': #f6c1ca,
+  'domain-red-crayola-200': #f2a3b1,
+  'domain-red-crayola-300': #ec798d,
+  'domain-red-crayola-400': #e95f77,
+  'domain-red-crayola-500': #e33755,
+  'domain-red-crayola-600': #cf324d,
+  'domain-red-crayola-700': #a1273c,
+  'domain-red-crayola-800': #7d1e2f,
+  'domain-red-crayola-900': #5f1724,
+  'domain-red-crayola-950': #5a1622,
+
+  'domain-warm-grey-50': #f6f4f3,
+  'domain-warm-grey-100': #e2dcda,
+  'domain-warm-grey-200': #d3cbc8,
+  'domain-warm-grey-300': #bfb4af,
+  'domain-warm-grey-400': #b3a59f,
+  'domain-warm-grey-500': #a08f87,
+  'domain-warm-grey-600': #92827b,
+  'domain-warm-grey-700': #726660,
+  'domain-warm-grey-800': #584f4a,
+  'domain-warm-grey-900': #433c39,
+  'domain-warm-grey-950': #403936,
+
+  'domain-yellow-gold-50': #fffae6,
+  'domain-yellow-gold-100': #fff3c2,
+  'domain-yellow-gold-200': #ffea91,
+  'domain-yellow-gold-300': #ffe05e,
+  'domain-yellow-gold-400': #ffd72e,
+  'domain-yellow-gold-500': #ffce00,
+  'domain-yellow-gold-600': #d9af00,
+  'domain-yellow-gold-700': #b59200,
+  'domain-yellow-gold-800': #917500,
+  'domain-yellow-gold-900': #735d00,
+  'domain-yellow-gold-950': #6d5800,
+
+  'domain-orange-abricot-50': #fff9ed,
+  'domain-orange-abricot-100': #fff1d4,
+  'domain-orange-abricot-200': #ffdfa9,
+  'domain-orange-abricot-300': #ffbe5c,
+  'domain-orange-abricot-400': #fea439,
+  'domain-orange-abricot-500': #fc8713,
+  'domain-orange-abricot-600': #ed6c09,
+  'domain-orange-abricot-700': #c55109,
+  'domain-orange-abricot-800': #9c4010,
+  'domain-orange-abricot-900': #7e3610,
+  'domain-orange-abricot-950': #78330f,
+
+  'domain-purple-violet-50': #f3f1ff,
+  'domain-purple-violet-100': #dbd4ff,
+  'domain-purple-violet-200': #cabfff,
+  'domain-purple-violet-300': #b1a1ff,
+  'domain-purple-violet-400': #a28fff,
+  'domain-purple-violet-500': #8b73ff,
+  'domain-purple-violet-600': #7e69e8,
+  'domain-purple-violet-700': #6352b5,
+  'domain-purple-violet-800': #4c3f8c,
+  'domain-purple-violet-900': #3a306b,
+  'domain-purple-violet-950': #372e66,
+
+  'domain-red-tomato-50': #fff0ed,
+  'domain-red-tomato-100': #ffd0c7,
+  'domain-red-tomato-200': #ffbaac,
+  'domain-red-tomato-300': #ff9a86,
+  'domain-red-tomato-400': #ff866e,
+  'domain-red-tomato-500': #ff684a,
+  'domain-red-tomato-600': #e85f43,
+  'domain-red-tomato-700': #b54a35,
+  'domain-red-tomato-800': #8c3929,
+  'domain-red-tomato-900': #6b2c1f,
+  'domain-red-tomato-950': #662a1d,
+);