@eui/eds-styles 22.0.0-alpha.44 → 22.0.0-alpha.45

package/dist/base/01-base/mixins.scss

@@ -125,7 +125,7 @@ $default-feature: "min-width";
 // privates per `:host([size="s"])` / `:host([size="l"])` (see eds-input-size()).
 @mixin eds-input() {
     // Size-driven privates (defaults = `m`)
-    --_eds-input-min-height: var(--eds-si-4xl);
+    --_eds-input-height: var(--eds-si-4xl);
     --_eds-input-pad-v: var(--eds-sp-xs);
     --_eds-input-pad-h: var(--eds-sp-s);
     --_eds-input-font: var(--eds-f-paragraph-m);
@@ -141,10 +141,10 @@ $default-feature: "min-width";
     border-radius: var(--eds-br-s);
     box-shadow: none;
     color: var(--eds-c-foreground-default);
-    min-height: var(--_eds-input-min-height);
+    height: var(--_eds-input-height);
     padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);
     width: 100%;
-    @include eds-focus-visible();
+    @include eds-focus-visible-ring();
 
     &:not([hidden]) {
         display: block;
@@ -177,8 +177,9 @@ $default-feature: "min-width";
     }
 
     // Invalid
-    &--invalid {
+    &[invalid] {
         border-color: var(--eds-c-border-critical);
+        @include eds-focus-visible-ring-critical();
     }
 
     &--loading {
@@ -199,13 +200,13 @@ $default-feature: "min-width";
 // is needed.
 @mixin eds-input-size() {
     &[input-size="s"] {
-        --_eds-input-min-height: var(--eds-si-3xl); // 32px
+        --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px
         --_eds-input-pad-v: var(--eds-sp-2xs);
         --_eds-input-pad-h: var(--eds-sp-s);
     }
 
     &[input-size="l"] {
-        --_eds-input-min-height: var(--eds-si-6xl); // 48px
+        --_eds-input-height: var(--eds-si-6xl); // 48px
         --_eds-input-pad-v: var(--eds-sp-s);
         --_eds-input-pad-h: var(--eds-sp-m);
     }
@@ -220,7 +221,7 @@ $default-feature: "min-width";
         }
 
         // checkbox
-        &.eds-input-checkbox {
+        &.eds-checkbox {
             &:checked:not([readonly]):not([invalid="true"]),
             &[checked="true"]:not([readonly]):not([invalid="true"]),
             &[indeterminate="true"]:not([readonly]) {
@@ -229,7 +230,7 @@ $default-feature: "min-width";
         }
 
         //radio
-        &.eds-input-radio {
+        &.eds-radio {
             &:checked:not([readonly]):not([invalid="true"]) {
                 background-color: var(--eds-c-surface-elevation);
                 border-color: var(--eds-c-border-primary--hover);

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

@@ -1,308 +1,73 @@
 @use 'sass:map';
-@use 'sass:color';
-@use '../01-base/' as base;
+@use 'sass:string';
+@use './ecl/semantic/color-dark' as ecl;
 @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-elevation-sunken: map.get(primitive.$color-map, 'graphite-1000'),
-    surface-elevation-inset: map.get(primitive.$color-map, 'graphite-950'),
-    surface-elevation: map.get(primitive.$color-map, 'graphite-900'),
-    surface-elevation-raised: map.get(primitive.$color-map, 'graphite-800'),
-    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-700'),
-    on-surface-primary--pressed: map.get(primitive.$color-map, 'graphite-0'),
-    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'),
-    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-950'),
-    on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-500'),
-
-    // =============================================
-    // 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'),
-    surface-neutral--hover: map.get(primitive.$color-map, 'graphite-400'),
-    on-surface-neutral--hover: map.get(primitive.$color-map, 'graphite-0'),
-    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'),
-    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-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'),
-    surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
-    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-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-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'),
-
-    // =============================================
-    // SURFACES — Success
-    // =============================================
-
-    surface-success: map.get(primitive.$color-map, 'green-500'),
-    on-surface-success: map.get(primitive.$color-map, 'green-950'), //EDS aligned
-    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'),
-
-    // =============================================
-    // 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-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'),
-
-    // =============================================
-    // 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'),
-    border-cm-purple-violet-subtle: map.get(primitive.$color-map, 'cm-purple-violet-700'),
-
-    surface-cm-purple-subtler: map.get(primitive.$color-map, 'cm-purple-950'),
-    on-surface-cm-purple-subtler: map.get(primitive.$color-map, 'cm-purple-200'),
-    border-cm-purple-subtle: map.get(primitive.$color-map, 'cm-purple-700'),
-
-    surface-cm-blue-navy-subtler: map.get(primitive.$color-map, 'cm-blue-navy-900'),
-    on-surface-cm-blue-navy-subtler: map.get(primitive.$color-map, 'cm-blue-navy-200'),
-    border-cm-blue-navy-subtle: map.get(primitive.$color-map, 'cm-blue-navy-700'),
-
-    surface-cm-blue-electric-subtler: map.get(primitive.$color-map, 'cm-blue-electric-900'),
-    on-surface-cm-blue-electric-subtler: map.get(primitive.$color-map, 'cm-blue-electric-200'),
-    border-cm-blue-electric-subtle: map.get(primitive.$color-map, 'cm-blue-electric-700'),
-
-    surface-cm-green-dark-subtler: map.get(primitive.$color-map, 'cm-green-dark-950'),
-    on-surface-cm-green-dark-subtler: map.get(primitive.$color-map, 'cm-green-dark-200'),
-    border-cm-green-dark-subtle: map.get(primitive.$color-map, 'cm-green-dark-700'),
-
-    surface-cm-green-pine-subtler: map.get(primitive.$color-map, 'cm-green-pine-950'),
-    on-surface-cm-green-pine-subtler: map.get(primitive.$color-map, 'cm-green-pine-200'),
-    border-cm-green-pine-subtle: map.get(primitive.$color-map, 'cm-green-pine-700'),
-
-    surface-cm-green-subtler: map.get(primitive.$color-map, 'cm-green-950'),
-    on-surface-cm-green-subtler: map.get(primitive.$color-map, 'cm-green-200'),
-    border-cm-green-subtle: map.get(primitive.$color-map, 'cm-green-700'),
-
-    surface-cm-blue-ocean-subtler: map.get(primitive.$color-map, 'cm-blue-ocean-950'),
-    on-surface-cm-blue-ocean-subtler: map.get(primitive.$color-map, 'cm-blue-ocean-200'),
-    border-cm-blue-ocean-subtle: map.get(primitive.$color-map, 'cm-blue-ocean-700'),
-
-    surface-cm-green-lemon-subtler: map.get(primitive.$color-map, 'cm-green-lemon-950'),
-    on-surface-cm-green-lemon-subtler: map.get(primitive.$color-map, 'cm-green-lemon-200'),
-    border-cm-green-lemon-subtle: map.get(primitive.$color-map, 'cm-green-lemon-700'),
-
-    surface-cm-yellow-gold-subtler: map.get(primitive.$color-map, 'cm-yellow-gold-950'),
-    on-surface-cm-yellow-gold-subtler: map.get(primitive.$color-map, 'cm-yellow-gold-200'),
-    border-cm-yellow-gold-subtle: map.get(primitive.$color-map, 'cm-yellow-gold-700'),
-
-    surface-cm-orange-abricot-subtler: map.get(primitive.$color-map, 'cm-orange-abricot-950'),
-    on-surface-cm-orange-abricot-subtler: map.get(primitive.$color-map, 'cm-orange-abricot-200'),
-    border-cm-orange-abricot-subtle: map.get(primitive.$color-map, 'cm-orange-abricot-700'),
-
-    surface-cm-orange-subtler: map.get(primitive.$color-map, 'cm-orange-950'),
-    on-surface-cm-orange-subtler: map.get(primitive.$color-map, 'cm-orange-200'),
-    border-cm-orange-subtle: map.get(primitive.$color-map, 'cm-orange-700'),
-
-    surface-cm-red-tomato-subtler: map.get(primitive.$color-map, 'cm-red-tomato-950'),
-    on-surface-cm-red-tomato-subtler: map.get(primitive.$color-map, 'cm-red-tomato-200'),
-    border-cm-red-tomato-subtle: map.get(primitive.$color-map, 'cm-red-tomato-700'),
-
-    surface-cm-red-crayola-subtler: map.get(primitive.$color-map, 'cm-red-crayola-950'),
-    on-surface-cm-red-crayola-subtler: map.get(primitive.$color-map, 'cm-red-crayola-200'),
-    border-cm-red-crayola-subtle: map.get(primitive.$color-map, 'cm-red-crayola-700'),
-
-    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: 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'),
+// ============================================================================
+// SEMANTIC COLORS (DARK) — ECL foundations as source of truth + local overlay.
+//
+// Base values come from the generated ECL semantic map `ecl.$color-dark`
+// (ecl/semantic/_color-dark.scss, built from the ECL primitives + color-domain-dark).
+// 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-*`; 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.
+// ============================================================================
+
+// 1. Re-key ECL `*-domain-*` semantic keys to the legacy `*-cm-*` names.
+$_ecl-base: ();
+@each $key, $value in ecl.$color-dark {
+    $i: string.index($key, '-domain-');
+    @if $i {
+        $renamed: string.slice($key, 1, $i) +
+            'cm-' +
+            string.slice($key, $i + string.length('-domain-'));
+        $_ecl-base: map.set($_ecl-base, $renamed, $value);
+    } @else {
+        $_ecl-base: map.set($_ecl-base, $key, $value);
+    }
+}
+
+// 2. 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, 'graphite-0'),         // #fff
+    on-surface-primary--pressed: map.get(primitive.$color-map, 'graphite-0'),       // #fff
+    on-surface-highlight--hover: map.get(primitive.$color-map, 'graphite-950'),     // #0d0d12
+    on-surface-highlight--pressed: map.get(primitive.$color-map, 'graphite-950'),   // #0d0d12
+    on-surface-neutral--hover: map.get(primitive.$color-map, 'graphite-0'),         // #fff
+    on-surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-0'),       // #fff
+    on-surface-critical--hover: map.get(primitive.$color-map, 'graphite-0'),        // #fff
+    on-surface-critical--pressed: map.get(primitive.$color-map, 'graphite-0'),      // #fff
+    on-surface-brand--hover: map.get(primitive.$color-map, 'graphite-0'),           // #fff
+
+    // used by: fab-button, icon-button, input-chat, language-selector, user-profile
+    surface-brand--hover: map.get(primitive.$color-map, 'graphite-950'),      // #0d0d12
+
+    // used by: chip, menu
+    surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-600'),      // #24242c
+    // used by: chip
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-0'),     // #fff
+
+    // --- Foreground (EDS-only inverted) ---
+    // used by: banner, shell, tabs
+    foreground-inverted: map.get(primitive.$color-map, 'graphite-950'),         // #0d0d12
+
+    // --- Borders (EDS-only + divergences) ---
+    // used by: badge, chat-bubble, chip, language-selector, tag, tag-group
+    border-neutral-subtle: map.get(primitive.$color-map, 'graphite-400'),                // #48484f
 );
+
+$color-semantic-map: map.merge($_ecl-base, $_overlay);