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

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

@@ -214,7 +214,7 @@ $default-feature: "min-width";
 
 @mixin eds-input-hover() {
     &:hover:not([aria-disabled="true"]):not(:disabled) {
-        box-shadow: var(--eds-sh-1);
+        // box-shadow: var(--eds-sh-1);
 
         &:not([aria-disabled="true"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate="true"]):not([invalid="true"]) {
             border-color: var(--eds-c-border);  //EDS aligned

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

@@ -30,27 +30,27 @@ $_cm-aliases: ();
 }
 
 // Base ramps + alpha + domain-* (from ecl $color) plus the cm-* aliases.
-$color-map: map.merge(ecl-color.$color, $_cm-aliases);
+$color-map: map.merge(ecl-color.$color, ecl-color-domain.$color-domain);
 
-// The ordered list of brand ("color mode") ramp names, derived from the domain
-// ramps so it stays in sync with the upstream source automatically.
-$_cm-names: ();
-@each $key, $value in $_cm-aliases {
-    // key is `cm-<ramp>-<shade>`; strip the trailing `-<shade>` to get the ramp name.
-    $last-dash: 0;
-    $i: 1;
-    @while $i <= string.length($key) {
-        @if string.slice($key, $i, $i) == '-' {
-            $last-dash: $i;
-        }
-        $i: $i + 1;
-    }
-    $ramp: string.slice($key, 1, $last-dash - 1);
-    @if not list.index($_cm-names, $ramp) {
-        $_cm-names: list.append($_cm-names, $ramp);
-    }
-}
-$color-cm-map: $_cm-names;
+// // The ordered list of brand ("color mode") ramp names, derived from the domain
+// // ramps so it stays in sync with the upstream source automatically.
+// $_cm-names: ();
+// @each $key, $value in $_cm-aliases {
+//     // key is `cm-<ramp>-<shade>`; strip the trailing `-<shade>` to get the ramp name.
+//     $last-dash: 0;
+//     $i: 1;
+//     @while $i <= string.length($key) {
+//         @if string.slice($key, $i, $i) == '-' {
+//             $last-dash: $i;
+//         }
+//         $i: $i + 1;
+//     }
+//     $ramp: string.slice($key, 1, $last-dash - 1);
+//     @if not list.index($_cm-names, $ramp) {
+//         $_cm-names: list.append($_cm-names, $ramp);
+//     }
+// }
+// $color-cm-map: $_cm-names;
 
 // Grouped-by-ramp view of every entry in $color-map (base, alpha and brand ramps),
 // consumed by the showcase color exports.

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
 @use './ecl/semantic/color-dark' as ecl;
+@use './ecl/semantic/color-domain-dark' as ecl-domain;
 @use './colors-primitive' as primitive;
 
 // ============================================================================
@@ -23,19 +24,7 @@
 // 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);
-    }
-}
+$_ecl-base: map.merge(ecl.$color-dark, ecl-domain.$color-domain-dark);
 
 // 2. Local overlay — EDS-only tokens + intentional divergences from ECL.
 $_overlay: (
@@ -58,8 +47,13 @@ $_overlay: (
 
     // used by: chip, menu
     surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-600'),      // #24242c
+    surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-400'),      // #24242c
     // used by: chip
     on-surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-0'),     // #fff
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'),     // #fff
+
+    surface-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-800'),
+    on-surface-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-400'),
 
     // --- Foreground (EDS-only inverted) ---
     // used by: banner, shell, tabs
@@ -70,7 +64,42 @@ $_overlay: (
     border-neutral-subtle: map.get(primitive.$color-map, 'graphite-400'),                // #48484f
 
     // wrongly named ECL side : border-brand
-    border: map.get(primitive.$color-map, 'silver-fog-50'),   
+    border: map.get(primitive.$color-map, 'silver-fog-50'),
+
+    // --- Domain (brand) `-subtle` surfaces (EDS-only) ---
+    // ECL ships only `surface-domain-*-subtler` (dark ramp -950) for domain colors.
+    // A stronger `-subtle` fill (e.g. the tag's `filled` variant) mirrors the
+    // dark standard-color convention (surface -800 / on-surface -50) for every domain.
+    surface-domain-blue-navy-subtle: map.get(primitive.$color-map, 'domain-blue-navy-800'),
+    on-surface-domain-blue-navy-subtle: map.get(primitive.$color-map, 'domain-blue-navy-50'),
+    surface-domain-blue-electric-subtle: map.get(primitive.$color-map, 'domain-blue-electric-800'),
+    on-surface-domain-blue-electric-subtle: map.get(primitive.$color-map, 'domain-blue-electric-50'),
+    surface-domain-blue-ocean-subtle: map.get(primitive.$color-map, 'domain-blue-ocean-800'),
+    on-surface-domain-blue-ocean-subtle: map.get(primitive.$color-map, 'domain-blue-ocean-50'),
+    surface-domain-green-subtle: map.get(primitive.$color-map, 'domain-green-800'),
+    on-surface-domain-green-subtle: map.get(primitive.$color-map, 'domain-green-50'),
+    surface-domain-green-dark-subtle: map.get(primitive.$color-map, 'domain-green-dark-800'),
+    on-surface-domain-green-dark-subtle: map.get(primitive.$color-map, 'domain-green-dark-50'),
+    surface-domain-green-lemon-subtle: map.get(primitive.$color-map, 'domain-green-lemon-800'),
+    on-surface-domain-green-lemon-subtle: map.get(primitive.$color-map, 'domain-green-lemon-50'),
+    surface-domain-green-pine-subtle: map.get(primitive.$color-map, 'domain-green-pine-800'),
+    on-surface-domain-green-pine-subtle: map.get(primitive.$color-map, 'domain-green-pine-50'),
+    surface-domain-orange-subtle: map.get(primitive.$color-map, 'domain-orange-800'),
+    on-surface-domain-orange-subtle: map.get(primitive.$color-map, 'domain-orange-50'),
+    surface-domain-orange-abricot-subtle: map.get(primitive.$color-map, 'domain-orange-abricot-800'),
+    on-surface-domain-orange-abricot-subtle: map.get(primitive.$color-map, 'domain-orange-abricot-50'),
+    surface-domain-purple-subtle: map.get(primitive.$color-map, 'domain-purple-800'),
+    on-surface-domain-purple-subtle: map.get(primitive.$color-map, 'domain-purple-50'),
+    surface-domain-purple-violet-subtle: map.get(primitive.$color-map, 'domain-purple-violet-800'),
+    on-surface-domain-purple-violet-subtle: map.get(primitive.$color-map, 'domain-purple-violet-50'),
+    surface-domain-red-crayola-subtle: map.get(primitive.$color-map, 'domain-red-crayola-800'),
+    on-surface-domain-red-crayola-subtle: map.get(primitive.$color-map, 'domain-red-crayola-50'),
+    surface-domain-red-tomato-subtle: map.get(primitive.$color-map, 'domain-red-tomato-800'),
+    on-surface-domain-red-tomato-subtle: map.get(primitive.$color-map, 'domain-red-tomato-50'),
+    surface-domain-warm-grey-subtle: map.get(primitive.$color-map, 'domain-warm-grey-800'),
+    on-surface-domain-warm-grey-subtle: map.get(primitive.$color-map, 'domain-warm-grey-50'),
+    surface-domain-yellow-gold-subtle: map.get(primitive.$color-map, 'domain-yellow-gold-800'),
+    on-surface-domain-yellow-gold-subtle: map.get(primitive.$color-map, 'domain-yellow-gold-50'),
 );
 
 $color-semantic-map: map.merge($_ecl-base, $_overlay);

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
 @use './ecl/semantic/color' as ecl;
+@use './ecl/semantic/color-domain' as ecl-domain;
 @use './colors-primitive' as primitive;
 
 // ============================================================================
@@ -24,21 +25,9 @@
 // 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 {
-    $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);
-    }
-}
+$_ecl-base: map.merge(ecl.$color, ecl-domain.$color-domain);
 
-// 2. Local overlay — EDS-only tokens + intentional divergences from ECL.
+// 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
@@ -67,15 +56,56 @@ $_overlay: (
     // --- 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);