@eui/styles 21.0.0-next.34 → 21.0.0-next.36

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

@@ -46,7 +46,7 @@ $breakpoint-map: (
 );
 
 // naming
-$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 's') - 1) !default;
+$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
 $s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
 $m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
 $l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
@@ -55,8 +55,8 @@ $xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width ma
 $fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;
 
 // human naming
-$eui-bkp-mobile-down: $xs !default;
-$eui-bkp-mobile: base.new-breakpoint(max-width map.get($breakpoint-map, 'md') - 1) !default;
+$eui-bkp-mobile-xs: $xs !default;
+$eui-bkp-mobile: $s !default;
 $eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
 $eui-bkp-tablet: $m !default;
 $eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
@@ -577,39 +577,34 @@ $color-state-map: (
         base: 'br-900',
         default: 'br-900',
         lighter: 'br-700',
-        on-lighter: 'br-700-contrast',
         light: 'br-800',
-        on-light: 'br-800-contrast',
         dark: 'br-950',
-        on-dark: 'br-950-contrast',
         surface: 'br-900',
         on-surface: 'br-900-contrast',
         surface-light: 'br-800',
-        on-surface-light: 'br-800-contrast'        
+        on-surface-light: 'br-800-contrast',
+        surface-dark: 'br-950',
+        on-surface-dark: 'br-950-contrast'        
     ),
     primary: (
         base: 'pr-600', 
         default: 'pr-700',
         lighter: 'pr-500',
-        on-lighter: 'pr-500-contrast',
         light: 'pr-600',
-        on-light: 'pr-600-contrast',
         dark: 'pr-900',
-        on-dark: 'pr-900-contrast',
         darker: 'pr-950',
-        on-darker: 'pr-950-contrast',
         surface-light: 'pr-75',
         on-surface-light: 'pr-900',
         surface-light-hover: 'pr-100',
         on-surface-light-hover: 'pr-950',
         surface-medium: 'pr-200',
-        on-surface-medium: 'pr-950', 
+        on-surface-medium: 'pr-200-contrast', 
         surface: 'pr-600',
         on-surface: 'pr-600-contrast',
         surface-hover: 'pr-700',
         on-surface-hover: 'pr-700-contrast',
-        surface-dark: 'pr-800',
-        on-surface-dark: 'pr-800-contrast',        
+        surface-dark: 'pr-900',
+        on-surface-dark: 'pr-900-contrast',        
         border: 'pr-500',
         border-light: 'pr-300',
         border-lighter: 'pr-200'
@@ -618,13 +613,9 @@ $color-state-map: (
         base: 'gr-500',
         default: 'gr-800',
         lighter: 'gr-600',
-        on-lighter: 'gr-600-contrast',
         light: 'gr-700',
-        on-light: 'gr-700-contrast',
-        dark: 'gr-900',         
-        on-dark: 'gr-900-contrast',         
-        darker: 'gr-950',         
-        on-darker: 'gr-950-contrast',         
+        dark: 'gr-900',      
+        darker: 'gr-950',   
         surface-light: 'gr-50',
         on-surface-light: 'gr-900',
         surface-light-hover: 'gr-75',
@@ -635,8 +626,8 @@ $color-state-map: (
         on-surface: 'gr-600-contrast',
         surface-hover: 'gr-700',
         on-surface-hover: 'gr-700-contrast',
-        surface-dark: 'gr-800',
-        on-surface-dark: 'gr-800-contrast',        
+        surface-dark: 'gr-900',
+        on-surface-dark: 'gr-900-contrast',        
         border: 'gr-500',
         border-light: 'gr-300',
         border-lighter: 'gr-200'
@@ -645,13 +636,9 @@ $color-state-map: (
         base: 'grn-500',
         default: 'grn-800',
         lighter: 'grn-600',
-        on-lighter: 'grn-600-contrast',
         light: 'grn-700',
-        on-light: 'grn-700-contrast',
-        dark: 'grn-900',         
-        on-dark: 'grn-900-contrast',         
-        darker: 'grn-950',         
-        on-darker: 'grn-950-contrast',         
+        dark: 'grn-900',      
+        darker: 'grn-950',   
         surface-light: 'grn-50',
         on-surface-light: 'grn-900',
         surface-light-hover: 'grn-75',
@@ -662,8 +649,8 @@ $color-state-map: (
         on-surface: 'grn-400-contrast',
         surface-hover: 'grn-300',
         on-surface-hover: 'grn-300-contrast',
-        surface-dark: 'grn-600',
-        on-surface-dark: 'grn-600-contrast',        
+        surface-dark: 'grn-900',
+        on-surface-dark: 'grn-900-contrast',        
         border: 'grn-500',
         border-light: 'grn-400',
         border-lighter: 'grn-300'
@@ -672,13 +659,9 @@ $color-state-map: (
         base: 'cta-400',
         default: 'cta-900',
         lighter: 'cta-400',
-        on-lighter: 'cta-400-contrast',
         light: 'cta-500',
-        on-light: 'cta-500-contrast',
         dark: 'cta-800',
-        on-dark: 'cta-800-contrast',
         darker: 'cta-900',
-        on-darker: 'cta-900-contrast',
         surface-light: 'cta-25',
         on-surface-light: 'cta-800',
         surface-light-hover: 'cta-50',
@@ -699,13 +682,9 @@ $color-state-map: (
         base: 'in-500',
         default: 'in-600',
         lighter: 'in-400',
-        on-lighter: 'in-400-contrast',
         light: 'in-500',
-        on-light: 'in-500-contrast',
         dark: 'in-800',
-        on-dark: 'in-800-contrast',
         darker: 'in-900',
-        on-darker: 'in-900-contrast',
         surface-light: 'in-75',
         on-surface-light: 'in-600',
         surface-light-hover: 'in-100',
@@ -716,8 +695,8 @@ $color-state-map: (
         on-surface: 'in-600-contrast',
         surface-hover: 'in-800',
         on-surface-hover: 'in-800-contrast',
-        surface-dark: 'in-900',
-        on-surface-dark: 'in-900-contrast',        
+        surface-dark: 'in-800',
+        on-surface-dark: 'in-800-contrast',        
         border: 'in-400',
         border-light: 'in-300',
         border-lighter: 'in-200'
@@ -726,13 +705,9 @@ $color-state-map: (
         base: 'su-700',
         default: 'su-900',
         lighter: 'su-700',
-        on-lighter: 'su-700-contrast',
         light: 'su-800',
-        on-light: 'su-800-contrast',
         dark: 'su-900',
-        on-dark: 'su-900-contrast',
         darker: 'su-950',
-        on-darker: 'su-950-contrast',
         surface-light: 'su-100',
         on-surface-light: 'su-950',
         surface-light-hover: 'su-200',
@@ -743,8 +718,8 @@ $color-state-map: (
         on-surface: 'su-950-contrast',
         surface-hover: 'su-950',
         on-surface-hover: 'su-950-contrast',
-        surface-dark: 'su-950',
-        on-surface-dark: 'su-950-contrast',        
+        surface-dark: 'su-900',
+        on-surface-dark: 'su-900-contrast',        
         border: 'su-600',
         border-light: 'su-400',
         border-lighter: 'su-300'
@@ -752,14 +727,10 @@ $color-state-map: (
     warning: (
         base: 'wa-500',
         default: 'wa-800',
-        lighter: 'wa-500',
-        on-lighter: 'wa-500-contrast',
-        light: 'wa-600',
-        on-light: 'wa-600-contrast',
-        dark: 'wa-900',
-        on-dark: 'wa-900-contrast',
+        lighter: 'wa-700',
+        light: 'wa-800',
+        dark: 'wa-950',
         darker: 'wa-950',
-        on-darker: 'wa-950-contrast',
         surface-light: 'wa-50',
         on-surface-light: 'wa-900',
         surface-light-hover: 'wa-75',
@@ -770,8 +741,8 @@ $color-state-map: (
         on-surface: 'wa-500-contrast',
         surface-hover: 'wa-600',
         on-surface-hover: 'wa-600-contrast',
-        surface-dark: 'wa-700',
-        on-surface-dark: 'wa-700-contrast',        
+        surface-dark: 'wa-900',
+        on-surface-dark: 'wa-900-contrast',        
         border: 'wa-400',
         border-light: 'wa-200',
         border-lighter: 'wa-100'
@@ -780,13 +751,9 @@ $color-state-map: (
         base: 'da-600',
         default: 'da-600',
         lighter: 'da-400',
-        on-lighter: 'da-400-contrast',
         light: 'da-500',
-        on-light: 'da-500-contrast',
         dark: 'da-700',
-        on-dark: 'da-700-contrast',
         darker: 'da-800',
-        on-darker: 'da-800-contrast',
         surface-light: 'da-75',
         on-surface-light: 'da-700',
         surface-light-hover: 'da-100',
@@ -827,63 +794,277 @@ $box-shadow-map: (
 
 
 // TYPOGRAPHY
-
-// new remapping against ECL v5
-
-// eUI 2xs => ECL none => 0.675rem/0.875rem  // 10px
-// eUI xs => ECL 2xs => 0.75rem/0.875rem     // 12px
-// eUI s => ECL xs => 0.875rem/1.25rem       // 14px
-// eUI m => ECL s => 1rem/1.5rem             // 16px 
-// eUI l => ECL m => 1.125rem/1.75rem        // 18px
-// eUI xl => ECL l => 1.25rem/1.75rem        // 20px
-// eUI 2xl => ECL xl => 1.375rem/2rem        // 22px
-// eUI 3xl => ECL 2xl => 1.5rem/2.25rem      // 24px
-// eUI 4xl => ECL 3xl => 1.75rem/2.25rem     // 28px
-// eUI 5xl => ECL 4xl => 2rem/2.75rem        // 32px
-// eUI 6XL => ECL 5xl => 2.25rem/3rem        // 36px
-// eUI 7XL => ECL 6xl => 2.5rem/3rem         // 40px  
-// eUI 8XL => ECL 7xl => 3.25rem/3.75rem     // 52px
-// eUI 9XL => ECL 8xl => 3.75rem/4.25rem     // 60px
-// eUI 10XL => ECL 9xl => 4.5rem/4.875rem    // 72px
-
-$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl', '10xl');
+$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl');
 
 $font-size-map: (
-    2xs: 0.675rem,  // 10px
-    xs: 0.75rem,    // 12px
-    s: 0.875rem,    // 14px
-    m: 1rem,        // 16px
-    l: 1.125rem,    // 18px
-    xl: 1.25rem,    // 20px
-    2xl: 1.375rem,  // 22px
-    3xl: 1.5rem,    // 24px
-    4xl: 1.75rem,   // 28px
-    5xl: 2rem,      // 32px
-    6xl: 2.25rem,   // 36px
-    7xl: 2.5rem,    // 40px
-    8xl: 3.25rem,   // 52px
-    9xl: 3.75rem,   // 60px
-    10xl: 4.5rem    // 72px
+  '8xl': 3.75rem,
+  '7xl': 3.25rem,
+  '6xl': 2.5rem,
+  '5xl': 2.25rem,
+  '4xl': 2rem,
+  '3xl': 1.75rem,
+  '2xl': 1.5rem,
+  'xl': 1.375rem,
+  'l': 1.25rem,
+  'm': 1.125rem,
+  's': 1rem,
+  'xs': 0.875rem,
+  '2xs': 0.75rem,
+  '3xs': 0.675rem
 );
 
 $font-line-height-map: (
-    2xs: 0.875rem,
-    xs: 0.875rem,
-    s: 1.2rem,
-    m: 1.5rem,
-    l: 1.75rem,
-    xl: 1.75rem,
-    2xl: 2rem,
-    3xl: 2.25rem,
-    4xl: 2.25rem,
-    5xl: 2.75rem,
-    6xl: 3rem,
-    7xl: 3rem,
-    8xl: 3.75rem,
-    9xl: 4.25rem,
-    10xl: 4.875rem
+  '7xl': 3.75rem,
+  '6xl': 3.5rem,
+  '5xl': 3.25rem,
+  '4xl': 3rem,
+  '3xl': 2.75rem,
+  '2xl': 2.5rem,
+  'xl': 2.25rem,
+  'l': 2rem,
+  'm': 1.75rem,
+  's': 1.5rem,
+  'xs': 1.25rem,
+  '2xs': 1rem,
+  '3xs': 0.875rem
 );
 
+$font-map: (
+    8xl: (
+        desktop: (
+            font-size: 8xl,
+            line-height: 7xl
+        ),
+        tablet: (
+            font-size: 7xl,
+            line-height: 6xl
+        ),
+        mobile: (
+            font-size: 6xl,
+            line-height: 3xl
+        ),
+        mobile-xs: (
+            font-size: 4xl,
+            line-height: xl
+        )        
+    ),
+    7xl: (
+        desktop: (
+            font-size: 7xl,
+            line-height: 6xl
+        ),
+        tablet: (
+            font-size: 6xl,
+            line-height: 3xl
+        ),
+        mobile: (
+            font-size: 5xl,
+            line-height: 3xl
+        ),
+        mobile-xs: (
+            font-size: 4xl,
+            line-height: xl
+        )        
+    ),
+    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: m
+        ) 
+    ),
+    2xl: (
+        desktop: (
+            font-size: 2xl,
+            line-height: xl
+        ),
+        tablet: (
+            font-size: xl,
+            line-height: l
+        ),
+        mobile: (
+            font-size: l,
+            line-height: m
+        ),
+        mobile-xs: (
+            font-size: l,
+            line-height: m
+        ) 
+    ),
+    xl: (
+        desktop: (
+            font-size: xl,
+            line-height: m
+        ),
+        tablet: (
+            font-size: xl,
+            line-height: m
+        ),
+        mobile: (
+            font-size: l,
+            line-height: m
+        ),
+        mobile-xs: (
+            font-size: m,
+            line-height: s
+        ) 
+    ),
+    l: (
+        desktop: (
+            font-size: m,
+            line-height: s
+        ),
+        tablet: (
+            font-size: m,
+            line-height: s
+        ),
+        mobile: (
+            font-size: s,
+            line-height: s
+        ),
+        mobile-xs: (
+            font-size: s,
+            line-height: s
+        ) 
+    ),
+    m: (
+        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
+        ) 
+    ),
+    s: (
+        desktop: (
+            font-size: xs,
+            line-height: s
+        ),
+        tablet: (
+            font-size: xs,
+            line-height: s
+        ),
+        mobile: (
+            font-size: xs,
+            line-height: s
+        ),
+        mobile-xs: (
+            font-size: xs,
+            line-height: s
+        ) 
+    ),
+    xs: (
+        desktop: (
+            font-size: 2xs,
+            line-height: xs
+        ),
+        tablet: (
+            font-size: 2xs,
+            line-height: xs
+        ),
+        mobile: (
+            font-size: 2xs,
+            line-height: xs
+        ),
+        mobile-xs: (
+            font-size: 2xs,
+            line-height: xs
+        ) 
+    ),
+    2xs: (
+        desktop: (
+            font-size: 3xs,
+            line-height: 2xs
+        ),
+        tablet: (
+            font-size: 3xs,
+            line-height: 2xs
+        ),
+        mobile: (
+            font-size: 3xs,
+            line-height: 2xs
+        ),
+        mobile-xs: (
+            font-size: 3xs,
+            line-height: 2xs
+        ) 
+    )
+);
 
 $font-weight-map: (
     'light': 300,
@@ -892,104 +1073,3 @@ $font-weight-map: (
     'semi-bold': 600,
     'bold': 700
 );
-
-// based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps
-
-// $font-map-responsive: (
-//     'display': (
-//         'm': (
-//             'desktop': (
-//                 'size': 3rem,
-//                 'line-height': 3.5rem
-//             ),
-//             'tablet': (
-//                 'size': 2.75rem,
-//                 'line-height': 3.25rem
-//             ),
-//             'mobile': (
-//                 'size': 2rem,
-//                 'line-height': 2.25rem
-//             )
-//         )
-//     ),    
-//     'title': (
-//         'xl': (
-//             'desktop': (
-//                 'size': 2.5rem,
-//                 'line-height': 3rem
-//             ),
-//             'tablet': (
-//                 'size': 2rem,
-//                 'line-height': 2.75rem
-//             ),
-//             'mobile': (
-//                 'size': 1.75rem,
-//                 'line-height': 2.5rem
-//             )
-//         ),
-//         'xs': (
-//             'desktop': (
-//                 'size': 1.25rem,
-//                 'line-height': 1.75rem
-//             ),
-//             'tablet': (
-//                 'size': 1.25rem,
-//                 'line-height': 1.75rem
-//             ),
-//             'mobile': (
-//                 'size': 1.2rem,
-//                 'line-height': 1.5rem
-//             )
-//         )
-//     )
-// );
-
-// $font-map: (
-//     'title': (
-//         '2xs': (
-//             'size': 1rem,
-//             'line-height': 1.5rem
-//         )
-//     ),
-//     'card-title': (
-//         'm': (
-//             'size': 1.125rem,
-//             'line-height': 1.5rem
-//         )
-//     ),    
-//     'label': (
-//         'm': (
-//             'size': 0.875rem,
-//             'line-height': 1.25rem
-//         ),
-//         'l': (
-//             'size': 1rem,
-//             'line-height': 1.5rem
-//         )
-//     ),
-//     'body': (
-//         's': (
-//             'size': 0.875rem,
-//             'line-height': 1.25rem
-//         ),
-//         'm': (
-//             'size': 1rem,
-//             'line-height': 1.5rem
-//         ),
-//         'l': (
-//             'size': 1.25rem,
-//             'line-height': 1.75rem
-//         ),        
-//         'xl': (
-//             'size': 1.5rem,
-//             'line-height': 2rem
-//         )        
-//     ),
-//     'microcopy': (
-//         'm': (
-//             'size': 0.75rem,
-//             'line-height': 1rem
-//         )
-//     )
-// );
-