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

package/dist/base/02-tokens/maps.scss

@@ -1,87 +1,45 @@
 @use 'sass:map';
 @use '../01-base' as base;
-@use './colors-primitive' as colors-primitive;
+@use './ecl/primitives/breakpoint' as ecl-breakpoint;
+@use './ecl/semantic/border' as ecl-border;
+@use './ecl/semantic/opacity' as ecl-opacity;
+@use './ecl/semantic/shadow' as ecl-shadow;
 
-// BORDER RADIUS
-
-$border-radius-map: (
-    none: 0,
-    xs: 2px,
-    s: 4px,
-    m: 8px,
-    l: 12px,
-    full: 999px
-);
+// BORDER RADIUS / BORDER WIDTH
+//
+// Sourced from the ecl-eds foundations semantic layer (single source of truth).
+// The `$border-radius-map` / `$border-width-map` names are retained as the
+// consumer-facing aliases; their values come verbatim from
+// `ecl/semantic/_border.scss` ($border-radius / $border-width).
+// To change a value, edit the upstream source and re-run tools/ecl-import.mjs.
 
+$border-radius-map: ecl-border.$border-radius;
 
-// BORDER WIDTH
-
-$border-width-map: (
-    none: 0,
-    xs: 1px,
-    s: 2px,
-    m: 4px
-);
+$border-width-map: ecl-border.$border-width;
 
 // OPACITY
 
-$opacity-map: (
-    none: 0,
-    10: 0.1,
-    20: 0.2,
-    30: 0.3,
-    40: 0.4,
-    50: 0.5,
-    60: 0.6,
-    70: 0.7,
-    80: 0.8, 
-    90: 0.9,
-    100: 1
-);
+// Sourced from the ecl-eds foundations semantic layer (single source of truth).
+// The `$opacity-map` name is retained as the consumer-facing alias; its values
+// come verbatim from `ecl/semantic/_opacity.scss` ($opacity).
+// To change a value, edit the upstream source and re-run tools/ecl-import.mjs.
+$opacity-map: ecl-opacity.$opacity;
 
 // SHADOWS
-
-$shadow-map: (
-    1: (
-        offset-x: 0px,
-        offset-y: 6px,
-        blur: 12px,
-        spread: 0px,
-        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-8'),
-    ),
-    2: (
-        offset-x: 0px,
-        offset-y: 10px,
-        blur: 22px,
-        spread: 0px,
-        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-10'),
-    ),
-    3: (
-        offset-x: 0px,
-        offset-y: 12px,
-        blur: 32px,
-        spread: 0px,
-        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-12'),
-    ),
-    4: (
-        offset-x: 0px,
-        offset-y: 14px,
-        blur: 42px,
-        spread: 0px,
-        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-14'),
-    )
-);
+//
+// Sourced from the ecl-eds foundations semantic layer (single source of truth).
+// The `$shadow-map` name is retained as the consumer-facing alias; its values
+// (offset/blur/spread + alpha color) come verbatim from `ecl/semantic/_shadow.scss`
+// ($shadow). To change a value, edit the upstream source and re-run tools/ecl-import.mjs.
+$shadow-map: ecl-shadow.$shadow;
 
 // BREAKPOINTS
 
-$breakpoint-size-map: (
-    xs: 480px,
-    s: 768px,
-    m: 996px,
-    l: 1140px,
-    xl: 1440px,
-    2xl: 1600px,
-);
+// Sourced from the ecl-eds foundations primitives (single source of truth).
+// The `$breakpoint-size-map` name is retained as the consumer-facing alias; its
+// values come verbatim from `ecl/primitives/_breakpoint.scss` ($breakpoint).
+// To change a value, edit the upstream primitive and re-run tools/ecl-import.mjs.
+$breakpoint-size-map: ecl-breakpoint.$breakpoint;
 
 $breakpoint-map: (
     mobile-s: base.new-breakpoint(max-width map.get($breakpoint-size-map, 'xs') - 1),

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

@@ -1,69 +1,39 @@
 @use 'sass:map';
-@use '../02-tokens/dimensions-primitive' as dimensions-primitive;
+@use './ecl/primitives/typography' as ecl-typography;
 
-$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
-
-$font-size-map: (
-  '9xl': 6rem,      // 96px
-  '8xl': 4rem,      // 64px
-  '7xl': 3.25rem,   // 52px
-  '6xl': 2.75rem,   // 44px
-  '5xl': 2.25rem,   // 36px
-  '4xl': 1.75rem,   // 28px
-  '3xl': 1.5rem,    // 24px
-  '2xl': 1.375rem,  // 22px
-  'xl': 1.25rem,    // 20px
-  'l': 1.125rem,    // 18px
-  'm': 1rem,        // 16px
-  's': 0.875rem,    // 14px 
-  'xs': 0.75rem,    // 12px
-  '2xs': 0.625rem   // 10px
-);
-
-// font weight map
+// PRIMITIVE TYPOGRAPHY MAPS
+//
+// Sourced from the ecl-eds foundations primitives (single source of truth):
+//   ecl/primitives/_typography.scss ($font-size, $font-line-height, $font-weight).
+// Consumer-facing names are retained as aliases. To change a value, edit the
+// upstream primitive and re-run tools/ecl-import.mjs.
 
-$font-weight-map: (
-    'light': 300,
-    'regular': 400,
-    'medium': 500,
-    'semi-bold': 600,
-    'bold': 700
-);
+// Not present upstream — kept local (used by the showcase typography exports).
+$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
 
-$font-line-height-map: (
-  '10xl': map.get(dimensions-primitive.$dimension-map, 96),
-  '9xl': map.get(dimensions-primitive.$dimension-map, 64),
-  '8xl': map.get(dimensions-primitive.$dimension-map, 60),
-  '7xl': map.get(dimensions-primitive.$dimension-map, 56),
-  '6xl': map.get(dimensions-primitive.$dimension-map, 52),
-  '5xl': map.get(dimensions-primitive.$dimension-map, 48),
-  '4xl': map.get(dimensions-primitive.$dimension-map, 44),
-  '3xl': map.get(dimensions-primitive.$dimension-map, 40),
-  '2xl': map.get(dimensions-primitive.$dimension-map, 36),
-  'xl': map.get(dimensions-primitive.$dimension-map, 32),
-  'l': map.get(dimensions-primitive.$dimension-map, 28),
-  'm': map.get(dimensions-primitive.$dimension-map, 24),
-  's': map.get(dimensions-primitive.$dimension-map, 20),
-  'xs': map.get(dimensions-primitive.$dimension-map, 16),
-  '2xs': map.get(dimensions-primitive.$dimension-map, 12)
-);
+// Direct aliases — values and keys are identical to the upstream maps.
+// EDS uses the CSS-spec weight keyword `semibold` (matching the upstream), so the
+// weight map passes through with no re-keying.
+$font-size-map: ecl-typography.$font-size;
+$font-line-height-map: ecl-typography.$font-line-height;
+$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,122 +1,3 @@
-$typography-semantic-map: (
-    desktop: (
-        display: (
-            xl: ( size: 9xl, line-height: 10xl, weight: regular ),
-            l: (  size: 8xl, line-height: 9xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 6xl, line-height: 6xl, weight: semi-bold ),
-            xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
-            l: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            m: ( size: 3xl, line-height: xl, weight: semi-bold ),
-            s: ( size: xl, line-height: l, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ), 
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),
-    tablet: (
-        display: (
-            xl: ( size: 8xl, line-height: 9xl, weight: regular ),
-            l: (  size: 7xl, line-height: 6xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
-            xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            l: ( size: 2xl, line-height: l, weight: semi-bold ),
-            m: ( size: xl, line-height: l, weight: semi-bold ),
-            s: ( size: l, line-height: m, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),    
-    mobile: (
-        display: (
-            xl: ( size: 6xl, line-height: 4xl, weight: regular ),
-            l: (  size: 5xl, line-height: 2xl, weight: semi-bold ),
-        ),
-        heading: (
-            2xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
-            xl: ( size: 2xl, line-height: l, weight: semi-bold ),
-            l: ( size: xl, line-height: m, weight: semi-bold ),
-            m: ( size: l, line-height: m, weight: semi-bold ),
-            s: ( size: m, line-height: m, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
-            l-bold: ( size: l, line-height: l, weight: bold ),    
-            m: ( size: m, line-height: m, weight: regular ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            m-bold: ( size: m, line-height: m, weight: bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-            s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
-            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
-            m: ( size: m, line-height: m, weight: regular ),
-            m-medium: ( size: m, line-height: m, weight: medium ),
-            m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
-            s: ( size: s, line-height: s, weight: regular ),
-        ),
-        microcopy: (
-            xs: ( size: xs, line-height: xs, weight: medium ),
-            2xs: ( size: 2xs, line-height: 2xs, weight: regular ),        
-        ),    
-    ),     
-);
+@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-semi-bold);
+                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;
         }