@eui/eds-styles 22.0.0-alpha.41 → 22.0.0-alpha.43

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

@@ -129,9 +129,12 @@ $default-feature: "min-width";
     --_eds-input-pad-v: var(--eds-sp-xs);
     --_eds-input-pad-h: var(--eds-sp-s);
     --_eds-input-font: var(--eds-f-paragraph-m);
+    --_eds-input-font-weight: var(--eds-f-w-regular);
     --_eds-input-placeholder-font: var(--eds-f-placeholder-m);
+    --_eds-input-placeholder-font-weight: var(--eds-f-w-light);
 
     font: var(--_eds-input-font);
+    font-weight: var(--_eds-input-font-weight);
     appearance: none;
     background-color: var(--eds-c-surface-elevation);
     border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
@@ -150,6 +153,7 @@ $default-feature: "min-width";
     &::placeholder {
         color: var(--eds-c-foreground-placeholder);
         font: var(--_eds-input-placeholder-font);
+        font-weight: var(--_eds-input-placeholder-font-weight);
         opacity: 1;
     }
 

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

@@ -73,6 +73,10 @@ $color-semantic-map: (
 
     surface-inverted: map.get(primitive.$color-map, 'silver-fog-950'),
     on-surface-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-800'),
+    on-surface-inverted--hover: map.get(primitive.$color-map, 'silver-fog-0'),
+    surface-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-700'),
+    on-surface-inverted--pressed: 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'),
@@ -143,9 +147,9 @@ $color-semantic-map: (
     surface-warning: map.get(primitive.$color-map, 'orange-500'),
     on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
     surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
-    on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-950'),
-    surface-warning-subtler: map.get(primitive.$color-map, 'orange-100'),
-    on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-950'),
+    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'),
 
     // =============================================
     // SURFACES — Color Modes (cm-*)

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use './ecl/primitives/typography' as ecl-typography;
 
 // PRIMITIVE TYPOGRAPHY MAPS
@@ -19,20 +20,20 @@ $font-weight-map: ecl-typography.$font-weight;
 
 // semantic font-size link to letter-spacing map
 $font-size-letter-spacing-map: (
-  '9xl': -2%,
-  '8xl': -2%,
-  '7xl': -2%,
-  '6xl': -1%,
-  '5xl': -1%,
-  '4xl': -1%,
-  '3xl': -1%,
-  '2xl': normal,
-  'xl': normal,
-  'l': normal,
-  'm': normal,
-  's': normal,
-  'xs': normal,
-  '2xs': normal
+  '9xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
+  '8xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
+  '7xl': map.get(ecl-typography.$letter-spacing, 'neg-s'),
+  '6xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
+  '5xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
+  '4xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
+  '3xl': map.get(ecl-typography.$letter-spacing, 'neg-xs'),
+  '2xl': map.get(ecl-typography.$letter-spacing, 'default'),
+  'xl': map.get(ecl-typography.$letter-spacing, 'default'),
+  'l': map.get(ecl-typography.$letter-spacing, 'default'),
+  'm': map.get(ecl-typography.$letter-spacing, 'default'),
+  's': map.get(ecl-typography.$letter-spacing, 'default'),
+  'xs': map.get(ecl-typography.$letter-spacing, 'default'),
+  '2xs': map.get(ecl-typography.$letter-spacing, 'default')
 );
 
 

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

@@ -1,149 +1,3 @@
-$typography-semantic-map: (
-    desktop: (
-        display: (
-            xl: ( size: 9xl, line-height: 10xl, weight: regular ),
-            l: (  size: 8xl, line-height: 9xl, weight: semibold ),
-        ),
-        heading: (
-            2xl: ( size: 6xl, line-height: 6xl, weight: semibold ),
-            xl: ( size: 5xl, line-height: 4xl, weight: semibold ),
-            l: ( size: 4xl, line-height: 2xl, weight: semibold ),
-            m: ( size: 3xl, line-height: xl, weight: semibold ),
-            s: ( size: xl, line-height: l, weight: semibold ),
-            s-medium: ( size: xl, line-height: l, weight: medium ),
-            xs: ( size: l, line-height: l, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: 3xl, line-height: 2xl, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semibold: ( size: l, line-height: l, weight: semibold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semibold: ( size: s, line-height: s, weight: semibold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            l-medium: ( size: l, line-height: l, weight: medium ), 
-            l-semibold: ( size: l, line-height: l, weight: semibold ), 
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-medium: ( size: s, line-height: s, weight: medium ),
-        ),
-        microcopy: (
-            m: ( size: xs, line-height: xs, weight: regular ),
-            m-semibold: ( size: xs, line-height: xs, weight: semibold ),
-        ),
-        placeholder: (
-            m: ( size: m, line-height: m, weight: light ),
-            s: ( size: s, line-height: s, weight: light ),
-        ),
-        supportive: (
-            m: ( size: 2xs, line-height: 2xs, weight: regular ),
-            m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
-        ),            
-    ),
-    tablet: (
-        display: (
-            xl: ( size: 8xl, line-height: 9xl, weight: regular ),
-            l: (  size: 7xl, line-height: 6xl, weight: semibold ),
-        ),
-        heading: (
-            2xl: ( size: 5xl, line-height: 4xl, weight: semibold ),
-            xl: ( size: 4xl, line-height: 2xl, weight: semibold ),
-            l: ( size: 2xl, line-height: l, weight: semibold ),
-            m: ( size: xl, line-height: l, weight: semibold ),
-            s: ( size: l, line-height: m, weight: semibold ),
-            s-medium: ( size: l, line-height: m, weight: medium ),
-            xs: ( size: m, line-height: m, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: 2xl, line-height: xl, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semibold: ( size: l, line-height: l, weight: semibold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semibold: ( size: s, line-height: s, weight: semibold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            l-medium: ( size: l, line-height: l, weight: medium ), 
-            l-semibold: ( size: l, line-height: l, weight: semibold ),             
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-medium: ( size: s, line-height: s, weight: medium ),
-        ),
-        microcopy: (
-            m: ( size: xs, line-height: xs, weight: regular ),
-            m-semibold: ( size: xs, line-height: xs, weight: semibold ),
-        ),
-        placeholder: (
-            m: ( size: m, line-height: m, weight: light ),
-            s: ( size: s, line-height: s, weight: light ),
-        ),
-        supportive: (
-            m: ( size: 2xs, line-height: 2xs, weight: regular ),
-            m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
-        ),   
-    ),    
-    mobile: (
-        display: (
-            xl: ( size: 6xl, line-height: 4xl, weight: regular ),
-            l: (  size: 5xl, line-height: 2xl, weight: semibold ),
-        ),
-        heading: (
-            2xl: ( size: 4xl, line-height: 2xl, weight: semibold ),
-            xl: ( size: 2xl, line-height: l, weight: semibold ),
-            l: ( size: xl, line-height: m, weight: semibold ),
-            m: ( size: l, line-height: m, weight: semibold ),
-            s: ( size: m, line-height: m, weight: semibold ),
-            s-medium: ( size: m, line-height: m, weight: medium ),
-            xs: ( size: m, line-height: m, weight: bold ),
-        ),
-        paragraph: (
-            xl: ( size: xl, line-height: l, weight: regular ),    
-            l: ( size: l, line-height: l, weight: regular ),    
-            l-semibold: ( size: l, line-height: l, weight: semibold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semibold: ( size: s, line-height: s, weight: semibold ),
-            s-bold: ( size: s, line-height: s, weight: bold ),
-        ),
-        label: (
-            l: ( size: l, line-height: l, weight: regular ), 
-            l-medium: ( size: l, line-height: l, weight: medium ), 
-            l-semibold: ( size: l, line-height: l, weight: semibold ),             
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semibold: ( size: m, line-height: m, weight: semibold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-medium: ( size: s, line-height: s, weight: medium ),
-        ),
-        microcopy: (
-            m: ( size: xs, line-height: xs, weight: regular ),
-            m-semibold: ( size: xs, line-height: xs, weight: semibold ),
-        ),
-        placeholder: (
-            m: ( size: m, line-height: m, weight: light ),
-            s: ( size: s, line-height: s, weight: light ),
-        ),
-        supportive: (
-            m: ( size: 2xs, line-height: 2xs, weight: regular ),
-            m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
-        ),   
-    ),     
-);
+@use './ecl/semantic/typography' as ecl-typography;
+
+$typography-semantic-map: ecl-typography.$typography;

package/dist/base/03-vars/typography.scss

@@ -45,9 +45,11 @@
     }    
 
     // EDS typography
+    // Weightless `font` shorthand: `font-size / line-height font-family`.
+    // Apply weight separately at the call site via `--eds-f-w-<weight>`.
     @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
         @each $size, $sizeDef in $typeDef {
-            --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+            --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
         }
     }
 
@@ -58,7 +60,7 @@
                 $desktopSizeDef: map.get($desktopTypeDef, $size);
                 // Only emit override if size or line-height differs from desktop
                 @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {
-                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                    --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
                 }
             }
         }        
@@ -71,7 +73,7 @@
                 $tabletSizeDef: map.get($tabletTypeDef, $size);
                 // Only emit override if size or line-height differs from tablet
                 @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {
-                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                    --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
                 }
             }
         }        

package/dist/base/04-elements/table.scss

@@ -37,7 +37,8 @@
                 color: var(--eds-c-foreground-default);
                 padding: var(--eds-sp-m) var(--eds-sp-s);
                 vertical-align: middle;
-                font: var(--eds-f-label-m-semibold);
+                font: var(--eds-f-label-m);
+                font-weight: var(--eds-f-w-semibold);
             }
 
             tr {

package/dist/base/99-utilities/typography.scss

@@ -16,6 +16,9 @@
 @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
     @each $size, $sizeDef in $typeDef {
         .eds-u-f-#{$type}-#{$size} {
+            // Size / line-height / letter-spacing only — NOT weight.
+            // `--eds-f-*` is a weightless shorthand; weight is applied separately
+            // (e.g. via `.eds-u-f-weight-*`).
             font: var(--eds-f-#{$type}-#{$size}) !important;
             letter-spacing: var(--eds-f-ls-#{map.get($sizeDef, 'size')}) !important;
         }