@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.2

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

@@ -2,6 +2,7 @@
 @use 'sass:color';
 @use '../01-base/' as base;
 
+
 // PALETTES LIST
 
 $color-state-palettes: ( 'primary', 'secondary', 'info', 'success', 'warning', 'danger');
@@ -40,7 +41,6 @@ $color-extra-palettes: (
     'ecl-red-tomato'
 );
 
-
 // BORDER RADIUS
 
 $border-radius-map: (
@@ -50,6 +50,7 @@ $border-radius-map: (
     s: 4px,
     m: 8px,
     l: 12px,
+    xl: 16px,
     max: 999px
 );
 
@@ -95,28 +96,15 @@ $eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')
 $eui-bkp-tablet: $m !default;
 $eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
 $eui-bkp-desktop-down: base.new-breakpoint(max-width map.get($breakpoint-map, 'lg') - 1) !default;
-$eui-bkp-desktop: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl')) !default;
-$eui-bkp-desktop-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
+$eui-bkp-desktop-s: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xxl') - 1) !default;
+$eui-bkp-desktop: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
+$eui-bkp-desktop-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'xl')) !default;
+$eui-bkp-desktop-wide-down: base.new-breakpoint(max-width map.get($breakpoint-map, 'xxl') - 1) !default;
 $eui-bkp-desktop-wide: $xxl !default;
+$eui-bkp-desktop-wide-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl')) !default;
 $eui-bkp-desktop-fhd: $fhd !default;
 
 
-// ICON SIZE
-
-$icon-size-map: (
-    2xs: 0.75rem,
-    xs: 1rem,
-    s: 1.25rem,
-    m: 1.5rem,
-    l: 2rem,
-    xl: 2.5rem,
-    2xl: 3rem,
-    3xl: 3.5rem,
-    4xl: 4rem,
-    fluid: 1em
-);
-
-
 // OPACITY
 
 $opacity-map: (
@@ -128,33 +116,6 @@ $opacity-map: (
 );
 
 
-// SPACING
-
-$spacing-map: (
-    none: 0, 
-    5xs: 0.0625rem,  // 1px
-    4xs: 0.125rem,   // 2px
-    3xs: 0.25rem,    // 4px
-    2xs: 0.375rem,   // 6px   
-    xs: 0.5rem,      // 8px
-    s: 0.75rem,      // 12px
-    m: 1rem,         // 16px
-    l: 1.25rem,      // 20px
-    xl: 1.5rem,      // 24px
-    2xl: 1.75rem,    // 28px
-    3xl: 2rem,       // 32px
-    4xl: 2.25rem,    // 36px
-    5xl: 2.5rem,     // 40px
-    6xl: 2.75rem,    // 44px
-    7xl: 3rem,       // 48px
-    8xl: 3.25rem,    // 52px
-    9xl: 3.5rem,     // 56px
-    10xl: 3.75rem,   // 60px
-    11xl: 4rem,      // 64px
-    12xl: 4.25rem,   // 68px
-    13xl: 4.5rem     // 72px
-);
-
 // Z-INDEX
 
 $z-index-map: (
@@ -205,241 +166,3 @@ $box-shadow-map: (
     4: map.get($ecl-shadow, 4),
     5: map.get($ecl-shadow, 5)
 );
-
-// TYPOGRAPHY
-$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');
-
-$font-size-map: (
-  '6xl': 2.5rem,
-  '5xl': 2.25rem,
-  '4xl': 2rem,
-  '3xl': 1.75rem,
-  '2xl': 1.5rem,
-  'xl': 1.25rem,
-  'l': 1.125rem,
-  'm': 1rem,
-  's': 0.875rem,
-  'xs': 0.75rem,
-  '2xs': 0.625rem
-);
-
-$font-line-height-map: (
-  '4xl': 3rem,
-  '3xl': 2.75rem,
-  '2xl': 2.5rem,
-  'xl': 2rem,
-  'l': 1.75rem,
-  'm': 1.5rem,
-  's': 1.25rem,
-  'xs': 1.125rem,
-  '2xs': 1rem
-);
-
-$font-map: (
-    6xl: (
-        desktop: (
-            font-size: 6xl,
-            line-height: 4xl
-        ),
-        tablet: (
-            font-size: 5xl,
-            line-height: 3xl
-        ),
-        mobile: (
-            font-size: 4xl,
-            line-height: xl
-        ),
-        mobile-xs: (
-            font-size: 3xl,
-            line-height: xl
-        ) 
-    ),
-    5xl: (
-        desktop: (
-            font-size: 5xl,
-            line-height: 3xl
-        ),
-        tablet: (
-            font-size: 4xl,
-            line-height: xl
-        ),
-        mobile: (
-            font-size: 3xl,
-            line-height: xl
-        ),
-        mobile-xs: (
-            font-size: 2xl,
-            line-height: l
-        ) 
-    ),
-    4xl: (
-        desktop: (
-            font-size: 4xl,
-            line-height: xl
-        ),
-        tablet: (
-            font-size: 3xl,
-            line-height: xl
-        ),
-        mobile: (
-            font-size: 2xl,
-            line-height: l
-        ),
-        mobile-xs: (
-            font-size: xl,
-            line-height: l
-        ) 
-    ),
-    3xl: (
-        desktop: (
-            font-size: 3xl,
-            line-height: xl
-        ),
-        tablet: (
-            font-size: 2xl,
-            line-height: xl
-        ),
-        mobile: (
-            font-size: xl,
-            line-height: l
-        ),
-        mobile-xs: (
-            font-size: l,
-            line-height: l
-        ) 
-    ),
-    2xl: (
-        desktop: (
-            font-size: 2xl,
-            line-height: xl
-        ),
-        tablet: (
-            font-size: xl,
-            line-height: l
-        ),
-        mobile: (
-            font-size: l,
-            line-height: l
-        ),
-        mobile-xs: (
-            font-size: l,
-            line-height: l
-        ) 
-    ),
-    xl: (
-        desktop: (
-            font-size: xl,
-            line-height: xl
-        ),
-        tablet: (
-            font-size: xl,
-            line-height: xl
-        ),
-        mobile: (
-            font-size: l,
-            line-height: l
-        ),
-        mobile-xs: (
-            font-size: m,
-            line-height: m
-        ) 
-    ),
-    l: (
-        desktop: (
-            font-size: l,
-            line-height: l
-        ),
-        tablet: (
-            font-size: l,
-            line-height: l
-        ),
-        mobile: (
-            font-size: m,
-            line-height: m
-        ),
-        mobile-xs: (
-            font-size: m,
-            line-height: m
-        ) 
-    ),
-    m: (
-        desktop: (
-            font-size: m,
-            line-height: m
-        ),
-        tablet: (
-            font-size: m,
-            line-height: m
-        ),
-        mobile: (
-            font-size: m,
-            line-height: m
-        ),
-        mobile-xs: (
-            font-size: m,
-            line-height: m
-        ) 
-    ),
-    s: (
-        desktop: (
-            font-size: s,
-            line-height: s
-        ),
-        tablet: (
-            font-size: s,
-            line-height: s
-        ),
-        mobile: (
-            font-size: s,
-            line-height: s
-        ),
-        mobile-xs: (
-            font-size: s,
-            line-height: s
-        ) 
-    ),
-    xs: (
-        desktop: (
-            font-size: xs,
-            line-height: xs
-        ),
-        tablet: (
-            font-size: xs,
-            line-height: xs
-        ),
-        mobile: (
-            font-size: xs,
-            line-height: xs
-        ),
-        mobile-xs: (
-            font-size: xs,
-            line-height: xs
-        ) 
-    ),
-    2xs: (
-        desktop: (
-            font-size: 2xs,
-            line-height: 2xs
-        ),
-        tablet: (
-            font-size: 2xs,
-            line-height: 2xs
-        ),
-        mobile: (
-            font-size: 2xs,
-            line-height: 2xs
-        ),
-        mobile-xs: (
-            font-size: 2xs,
-            line-height: 2xs
-        ) 
-    )
-);
-
-$font-weight-map: (
-    'light': 300,
-    'regular': 400,
-    'medium': 500,
-    'semi-bold': 600,
-    'bold': 700
-);

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

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use './dimensions-primitive' as dimensions-primitive;
+
+$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');
+
+$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
+);
+
+// flat list LH map
+
+$font-line-height-map: (
+  '6xl': 6rem,
+  '5xl': 4rem,
+  '4xl': 3rem,
+  '3xl': 2.75rem,
+  '2xl': 2.5rem,
+  'xl': 2rem,
+  'l': 1.75rem,
+  'm': 1.5rem,
+  's': 1.25rem,
+  'xs': 1.125rem,
+  '2xs': 1rem
+);
+
+// font weight map
+
+$font-weight-map: (
+    'light': 300,
+    'regular': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700
+);
+
+$eds-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)
+);
+
+// semantic font-size link to letter-spacing map
+$eds-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
+);
+
+