@eui/eds-styles 22.0.0-alpha.16 → 22.0.0-alpha.18

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,52 +1,21 @@
-@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: (

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

@@ -2,36 +2,36 @@ $typography-semantic-map: (
     desktop: (
         display: (
             xl: ( size: 9xl, line-height: 10xl, weight: regular ),
-            l: (  size: 8xl, line-height: 9xl, weight: semi-bold ),
+            l: (  size: 8xl, line-height: 9xl, weight: semibold ),
         ),
         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 ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            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-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ), 
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-semibold: ( size: m, line-height: m, weight: semibold ),
             s: ( size: s, line-height: s, weight: regular ),
         ),
         microcopy: (
@@ -42,36 +42,36 @@ $typography-semantic-map: (
     tablet: (
         display: (
             xl: ( size: 8xl, line-height: 9xl, weight: regular ),
-            l: (  size: 7xl, line-height: 6xl, weight: semi-bold ),
+            l: (  size: 7xl, line-height: 6xl, weight: semibold ),
         ),
         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 ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            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-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-semibold: ( size: m, line-height: m, weight: semibold ),
             s: ( size: s, line-height: s, weight: regular ),
         ),
         microcopy: (
@@ -82,36 +82,36 @@ $typography-semantic-map: (
     mobile: (
         display: (
             xl: ( size: 6xl, line-height: 4xl, weight: regular ),
-            l: (  size: 5xl, line-height: 2xl, weight: semi-bold ),
+            l: (  size: 5xl, line-height: 2xl, weight: semibold ),
         ),
         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 ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),    
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            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-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
+            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-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
+            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-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
+            m-semibold: ( size: m, line-height: m, weight: semibold ),
             s: ( size: s, line-height: s, weight: regular ),
         ),
         microcopy: (

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

@@ -37,7 +37,7 @@
                 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-semibold);
             }
 
             tr {