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

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

@@ -0,0 +1,116 @@
+$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 ), 
+            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 ), 
+            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 ), 
+            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 ),        
+        ),    
+    ),     
+);

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,50 @@
+@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
+);
+
+
+

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

@@ -0,0 +1,200 @@
+$typography-semantic-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: 2xl,
+            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: l,
+            line-height: m
+        ),
+        mobile: (
+            font-size: l,
+            line-height: m
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: m
+        ) 
+    ),
+    l: (
+        desktop: (
+            font-size: l,
+            line-height: l
+        ),
+        tablet: (
+            font-size: m,
+            line-height: s
+        ),
+        mobile: (
+            font-size: m,
+            line-height: s
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: s
+        ) 
+    ),
+    m: (
+        desktop: (
+            font-size: m,
+            line-height: m
+        ),
+        tablet: (
+            font-size: m,
+            line-height: s
+        ),
+        mobile: (
+            font-size: m,
+            line-height: s
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: s
+        ) 
+    ),
+    s: (
+        desktop: (
+            font-size: s,
+            line-height: s
+        ),
+        tablet: (
+            font-size: s,
+            line-height: xs
+        ),
+        mobile: (
+            font-size: s,
+            line-height: xs
+        ),
+        mobile-xs: (
+            font-size: s,
+            line-height: xs
+        ) 
+    ),
+    xs: (
+        desktop: (
+            font-size: xs,
+            line-height: xs
+        ),
+        tablet: (
+            font-size: xs,
+            line-height: 2xs
+        ),
+        mobile: (
+            font-size: xs,
+            line-height: 2xs
+        ),
+        mobile-xs: (
+            font-size: xs,
+            line-height: 2xs
+        ) 
+    ),
+    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
+        ) 
+    )
+);

package/dist/base/03-vars/eds-vars-colors-dark-theme.scss

@@ -0,0 +1,7 @@
+@use '../02-tokens/eds-colors-semantic-dark-theme' as semantic;
+
+html.eui-t-dark {
+    @each $color, $value in semantic.$color-semantic-map {
+        --eds-c-#{$color}: #{$value};
+    }
+}

package/dist/base/03-vars/eds-vars-colors.scss

@@ -0,0 +1,7 @@
+@use '../02-tokens/eds-colors-semantic' as semantic;
+
+:root {
+    @each $color, $value in semantic.$color-semantic-map {
+        --eds-c-#{$color}: #{$value};
+    }
+}