@eui/eds-styles 22.0.0-alpha.5 → 22.0.0-alpha.50

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

@@ -1,326 +1,111 @@
 @use 'sass:map';
-@use 'sass:color';
-@use '../01-base/' as base;
+@use 'sass:string';
+@use './ecl/semantic/color' as ecl;
+@use './ecl/semantic/color-domain' as ecl-domain;
 @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-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'),
-    on-surface-primary--hover: map.get(primitive.$color-map, 'silver-fog-0'),
-    surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
-    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'),
-    surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
-    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'),
-
-    // =============================================
-    // 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'),
-
-    // =============================================
-    // SURFACES — Neutral
-    // =============================================
-
-    surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
-    on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
-    surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-700'),
-    on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),
-    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'),
-    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-50'),
-    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'),
-    surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
-    on-surface-critical--hover: map.get(primitive.$color-map, 'silver-fog-0'),
-    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'),
-    surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
-    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'),
-
-    // =============================================
-    // SURFACES — Info
-    // =============================================
-
-    surface-info: map.get(primitive.$color-map, 'blue-600'),
-    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'),
-    surface-info-subtler: map.get(primitive.$color-map, 'blue-75'),
-    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'),
-
-    // =============================================
-    // SURFACES — Success
-    // =============================================
-
-    surface-success: map.get(primitive.$color-map, 'green-800'),
-    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'),
-    surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
-    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'),
-    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'),
-    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'),
-
-    // =============================================
-    // 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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    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'),
-
-    // =============================================
-    // 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-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'),
-    foreground-warning: map.get(primitive.$color-map, 'orange-800'),
-    foreground-critical: map.get(primitive.$color-map, 'red-600'),
-    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'),
-
-    border-success: map.get(primitive.$color-map, 'green-700'),
-    border-success-subtle: map.get(primitive.$color-map, 'green-300'),
-
-    border-warning: map.get(primitive.$color-map, 'orange-600'),
-    border-warning-subtle: map.get(primitive.$color-map, 'orange-300'),
-
-    border-critical: map.get(primitive.$color-map, 'red-600'),
-    border-critical-subtle: map.get(primitive.$color-map, 'red-300'),
-
-    border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
-    border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-300'),
-
-    border-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
-    border-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
-
-    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, '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-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'),
-
-    // =============================================
-    // 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'),
-    alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-950-10'),
-    alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-silver-fog-0-14'),
-    alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-0-10'),
+// ============================================================================
+// SEMANTIC COLORS (LIGHT) — ECL foundations as source of truth + local overlay.
+//
+// Base values come from the generated ECL semantic map `ecl.$color`
+// (ecl/semantic/_color.scss, itself built from the ECL primitives + color-domain).
+// To change a base value, edit the upstream ECL source and re-run
+// tools/ecl-import.mjs — NOT this file.
+//
+// Two local adaptations are applied on top of the ECL base:
+//   1. Key rename: ECL emits brand ("color mode") keys as `*-domain-*`
+//      (e.g. surface-domain-purple-subtler). The EDS semantic contract uses the
+//      legacy `*-cm-*` names, so every `-domain-` segment is renamed to `-cm-`.
+//      The underlying values are identical.
+//   2. `$_overlay`: EDS-specific tokens that ECL does not define, plus the few
+//      values intentionally diverging from ECL (each annotated). Overlay wins and
+//      its values are pulled from `primitive.$color-map` to preserve exact EDS
+//      ramp references.
+//
+// The public contract (`$color-semantic-map` + every key below) is unchanged.
+// ============================================================================
+
+$_ecl-base: map.merge(ecl.$color, ecl-domain.$color-domain);
+
+// Local overlay — EDS-only tokens + intentional divergences from ECL.
+$_overlay: (
+    // --- On-surface for state surfaces that ship no `on-*--hover/--pressed` in ECL ---
+    // Each state surface reuses its base family's on-* text color (text color does
+    // not change between rest/hover/pressed), so eds-u-c-* and components resolve a
+    // readable foreground for every interactive state.
+    on-surface-primary--hover: map.get(primitive.$color-map, 'silver-fog-0'),       // #fff
+    on-surface-primary--pressed: map.get(primitive.$color-map, 'silver-fog-0'),     // #fff
+    on-surface-highlight--hover: map.get(primitive.$color-map, 'silver-fog-950'),   // #00002e
+    on-surface-highlight--pressed: map.get(primitive.$color-map, 'silver-fog-950'), // #00002e
+    on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),       // #fff
+    on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),     // #fff
+    on-surface-critical--hover: map.get(primitive.$color-map, 'silver-fog-0'),      // #fff
+    on-surface-critical--pressed: map.get(primitive.$color-map, 'silver-fog-0'),    // #fff
+    on-surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-0'),         // #fff
+
+    // --- Brand (EDS-only hover state) ---
+    // used by: fab-button, icon-button, input-chat, language-selector, user-profile
+    surface-brand--hover: map.get(primitive.$color-map, 'silver-fog-800'),      // #353559
+
+    // --- Inverted (EDS-only states + subtle/disabled variants) ---
+    // used by: chip
+    surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-800'),       // #353559
+    // used by: chip
+    on-surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-0'),      // #fff
+
+    // --- Neutral subtler (EDS divergence: ECL uses silver-fog-100) ---
+    // used by: avatar, badge, button, data-grid, date-block, datepicker, gauge-chart, growl, progress-circle, segmented-control, skeleton, tag, timepicker
+    surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-75'),    // #ededf0
+    surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),    // #ededf0
+    // used by: avatar, badge, button, tag
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),        // #171740
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),        // #171740
+    
+    // used by tag :
+    surface-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-200'),
+    on-surface-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-950'),
+
+    // --- Foreground (EDS-only inverted) ---
+    // used by: banner, shell, tabs
+    foreground-inverted: map.get(primitive.$color-map, 'silver-fog-25'),        // #fafafb
+
+    // wrongly named ECL side : border-brand
+    border: map.get(primitive.$color-map, 'silver-fog-950'),
+
+    // --- Domain (brand) `-subtle` surfaces (EDS-only) ---
+    // ECL ships only `surface-domain-*-subtler` (ramp -50/-100) for domain colors.
+    // A stronger `-subtle` fill (e.g. the tag's `filled` variant) mirrors the
+    // standard-color convention (surface -200 / on-surface -900) for every domain.
+    surface-domain-blue-navy-subtle: map.get(primitive.$color-map, 'domain-blue-navy-200'),
+    on-surface-domain-blue-navy-subtle: map.get(primitive.$color-map, 'domain-blue-navy-900'),
+    surface-domain-blue-electric-subtle: map.get(primitive.$color-map, 'domain-blue-electric-200'),
+    on-surface-domain-blue-electric-subtle: map.get(primitive.$color-map, 'domain-blue-electric-900'),
+    surface-domain-blue-ocean-subtle: map.get(primitive.$color-map, 'domain-blue-ocean-200'),
+    on-surface-domain-blue-ocean-subtle: map.get(primitive.$color-map, 'domain-blue-ocean-900'),
+    surface-domain-green-subtle: map.get(primitive.$color-map, 'domain-green-200'),
+    on-surface-domain-green-subtle: map.get(primitive.$color-map, 'domain-green-900'),
+    surface-domain-green-dark-subtle: map.get(primitive.$color-map, 'domain-green-dark-200'),
+    on-surface-domain-green-dark-subtle: map.get(primitive.$color-map, 'domain-green-dark-900'),
+    surface-domain-green-lemon-subtle: map.get(primitive.$color-map, 'domain-green-lemon-200'),
+    on-surface-domain-green-lemon-subtle: map.get(primitive.$color-map, 'domain-green-lemon-900'),
+    surface-domain-green-pine-subtle: map.get(primitive.$color-map, 'domain-green-pine-200'),
+    on-surface-domain-green-pine-subtle: map.get(primitive.$color-map, 'domain-green-pine-900'),
+    surface-domain-orange-subtle: map.get(primitive.$color-map, 'domain-orange-200'),
+    on-surface-domain-orange-subtle: map.get(primitive.$color-map, 'domain-orange-900'),
+    surface-domain-orange-abricot-subtle: map.get(primitive.$color-map, 'domain-orange-abricot-200'),
+    on-surface-domain-orange-abricot-subtle: map.get(primitive.$color-map, 'domain-orange-abricot-900'),
+    surface-domain-purple-subtle: map.get(primitive.$color-map, 'domain-purple-200'),
+    on-surface-domain-purple-subtle: map.get(primitive.$color-map, 'domain-purple-900'),
+    surface-domain-purple-violet-subtle: map.get(primitive.$color-map, 'domain-purple-violet-200'),
+    on-surface-domain-purple-violet-subtle: map.get(primitive.$color-map, 'domain-purple-violet-900'),
+    surface-domain-red-crayola-subtle: map.get(primitive.$color-map, 'domain-red-crayola-200'),
+    on-surface-domain-red-crayola-subtle: map.get(primitive.$color-map, 'domain-red-crayola-900'),
+    surface-domain-red-tomato-subtle: map.get(primitive.$color-map, 'domain-red-tomato-200'),
+    on-surface-domain-red-tomato-subtle: map.get(primitive.$color-map, 'domain-red-tomato-900'),
+    surface-domain-warm-grey-subtle: map.get(primitive.$color-map, 'domain-warm-grey-200'),
+    on-surface-domain-warm-grey-subtle: map.get(primitive.$color-map, 'domain-warm-grey-900'),
+    surface-domain-yellow-gold-subtle: map.get(primitive.$color-map, 'domain-yellow-gold-200'),
+    on-surface-domain-yellow-gold-subtle: map.get(primitive.$color-map, 'domain-yellow-gold-900'),
 );
+
+$color-semantic-map: map.merge($_ecl-base, $_overlay);

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,
+);