@eui/styles 21.0.0-next.2 → 21.0.0-next.20

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

@@ -98,24 +98,24 @@ $opacity-map: (
 
 $spacing-map: (
     none: 0, 
-    5xs: 0.0625rem,  // 4xs
-    4xs: 0.125rem,   // 3xs
-    3xs: 0.25rem,    // 2xs
-    2xs: 0.375rem,   
-    xs: 0.5rem,      // ==
-    s: 0.75rem,      // ==
-    m: 1rem,         // ==
-    l: 1.25rem,      // ==
-    xl: 1.5rem,      // ==
-    2xl: 1.75rem,    //
-    3xl: 2rem,       // 2xl
-    4xl: 2.25rem,    // 
-    5xl: 2.5rem,     // 3xl
-    6xl: 3rem,       // 4xl
-    7xl: 3.5rem,     // 5xl
-    8xl: 4rem,       // 6xl
-    9xl: 4.5rem,     
-    10xl: 5rem,      // 7xl
+    5xs: 0.0625rem,  // 4xs - 1px
+    4xs: 0.125rem,   // 3xs - 2px
+    3xs: 0.25rem,    // 2xs - 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,       // 2xl - 32px
+    4xl: 2.25rem,    //     - 36px
+    5xl: 2.5rem,     // 3xl - 40px
+    6xl: 3rem,       // 4xl - 48px
+    7xl: 3.5rem,     // 5xl - 56px
+    8xl: 4rem,       // 6xl - 64px
+    9xl: 4.5rem,     //     - 72px
+    10xl: 5rem,      // 7xl - 80px
 );
 
 
@@ -198,19 +198,19 @@ $ecl-colors: (
   'grey-950': #00002e,
 
   // Status
-  'info-25': #f5f7fb,
-  'info-50': #ebeff7,
-  'info-75': #dee4f2,
-  'info-100': #bfcce6,
-  'info-200': #a3b6da,
-  'info-300': #859dce,
-  'info-400': #6685c2,
-  'info-500': #4a6eb7,
+  'info-25': #f9fbfd,
+  'info-50': #f5f7fb,
+  'info-75': #ebeff7,
+  'info-100': #dee4f2,
+  'info-200': #bfcce6,
+  'info-300': #a3b6da,
+  'info-400': #859dce,
+  'info-500': #6685c2,
   'info-600': #3b62b0,
-  'info-700': #2e58ab,
-  'info-800': #1c49a4,
-  'info-900': #0d3d9e,
-  'info-950': #039,
+  'info-700': #1c49a4,
+  'info-800': #039,
+  'info-900': #00297a,
+  'info-950': #001f5c,
 
   'success-25': #f9fefc,
   'success-50': #edfbf6,
@@ -306,8 +306,8 @@ $color-map: (
         100: #e4e4e4,
         75: #efefef,
         50: #f7f7f7,
-        // 50: #f5f5f5,
-        25: #fbfbfb 
+        25: #fbfbfb,
+        10: #fcfcfc 
     ),
     in: (
         950: map.get($ecl-colors, 'info-950'),
@@ -398,6 +398,10 @@ $color-state-map: (
         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'        
     ),
     primary: (
         base: 'pr-600', 
@@ -435,19 +439,19 @@ $color-state-map: (
         on-dark: 'gr-900-contrast',         
         darker: 'gr-950',         
         on-darker: 'gr-950-contrast',         
-        surface-light: 'gr-75',
+        surface-light: 'gr-50',
         on-surface-light: 'gr-900',
-        surface-light-hover: 'gr-100',
+        surface-light-hover: 'gr-75',
         on-surface-light-hover: 'gr-950',
-        surface-medium: 'gr-200',
+        surface-medium: 'gr-100',
         on-surface-medium: 'gr-900',
         surface: 'gr-600',
         on-surface: 'gr-600-contrast',
         surface-hover: 'gr-700',
         on-surface-hover: 'gr-700-contrast',
         border: 'gr-500',
-        border-light: 'gr-400',
-        border-lighter: 'gr-300'
+        border-light: 'gr-300',
+        border-lighter: 'gr-200'
     ),
     neutral: (
         base: 'grn-500',
@@ -510,19 +514,19 @@ $color-state-map: (
         on-dark: 'in-800-contrast',
         darker: 'in-900',
         on-darker: 'in-900-contrast',
-        surface-light: 'in-50',
+        surface-light: 'in-75',
         on-surface-light: 'in-600',
-        surface-light-hover: 'in-75',
+        surface-light-hover: 'in-100',
         on-surface-light-hover: 'in-800',
-        surface-medium: 'in-100',
+        surface-medium: 'in-200',
         on-surface-medium: 'in-950',
         surface: 'in-600',
         on-surface: 'in-600-contrast',
         surface-hover: 'in-800',
         on-surface-hover: 'in-800-contrast',
         border: 'in-400',
-        border-light: 'in-200',
-        border-lighter: 'in-100'
+        border-light: 'in-300',
+        border-lighter: 'in-200'
     ),
     success: (
         base: 'su-700',
@@ -624,129 +628,71 @@ $box-shadow-map: (
 
 // TYPOGRAPHY
 
-$font-size-list: (
-    '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl',
-    '2xs-compact', 'xs-compact', 's-compact', 'm-compact', 'l-compact', 'xl-compact', '2xl-compact', '3xl-compact', '4xl-compact', '5xl-compact', '6xl-compact'
+// 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-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
 );
 
 $font-line-height-map: (
-    2xs: 1rem,
-    xs: 1.25rem,
-    s: 1.25rem,
+    2xs: 0.875rem,
+    xs: 0.875rem,
+    s: 1.2rem,
     m: 1.5rem,
     l: 1.75rem,
-    xl: 2.25rem,
-    2xl: 2.5rem,
-    3xl: 2.75rem,
-    4xl: 3rem,
-    5xl: 3.25rem,
-    6xl: 3.50rem,
-    2xs-compact: 0.75rem,
-    xs-compact: 1rem,
-    s-compact: 1rem,
-    m-compact: 1.25rem,
-    l-compact: 1.5rem,
-    xl-compact: 1.75rem,
-    2xl-compact: 2rem,
-    3xl-compact: 2.5rem,
-    4xl-compact: 2.75rem,
-    5xl-compact: 3rem,
-    6xl-compact: 3.25rem
+    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
 );
 
-$font-size-map: (
-    2xs: 0.675rem, // 10px
-    xs: 0.75rem,   // 12px
-    s: 0.875rem,   // 14px
-    m: 1rem,       // 16px
-    l: 1.25rem,    // 20px
-    xl: 1.5rem,    // 24px
-    2xl: 1.75rem,  // 28px
-    3xl: 2rem,     // 32px
-    4xl: 2.5rem,   // 40px
-    5xl: 2.75rem,  // 44px
-    6xl: 3rem      // 48px
-);
 
 $font-weight-map: (
+    'light': 300,
     'regular': 400,
     'medium': 500,
     'semi-bold': 600,
     'bold': 700
 );
 
-// ecl font sizes for example, but driven by m = 18px base
-
-// $ecl-font-size: (
-//   '10xl': 6rem,
-//   '9xl': 4.5rem,
-//   '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
-// );
-
-// $ecl-line-height: (
-//   '10xl': 6.25rem,
-//   '9xl': 4.875rem,
-//   '8xl': 4.25rem,
-//   '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,
-// );
-// $ecl-font: (
-//   '10xl': #{map.get($font-size, '10xl') + '/' + map.get($line-height, '10xl')}
-//     #{map.get($font-family, 'default')},
-//   '9xl': #{map.get($font-size, '9xl') + '/' + map.get($line-height, '9xl')}
-//     #{map.get($font-family, 'default')},
-//   '8xl': #{map.get($font-size, '8xl') + '/' + map.get($line-height, '8xl')}
-//     #{map.get($font-family, 'default')},
-//   '7xl': #{map.get($font-size, '7xl') + '/' + map.get($line-height, '7xl')}
-//     #{map.get($font-family, 'default')},
-//   '6xl': #{map.get($font-size, '6xl') + '/' + map.get($line-height, '4xl')}
-//     #{map.get($font-family, 'default')},
-//   '5xl': #{map.get($font-size, '5xl') + '/' + map.get($line-height, '4xl')}
-//     #{map.get($font-family, 'default')},
-//   '4xl': #{map.get($font-size, '4xl') + '/' + map.get($line-height, '3xl')}
-//     #{map.get($font-family, 'default')},
-//   '3xl': #{map.get($font-size, '3xl') + '/' + map.get($line-height, 'xl')}
-//     #{map.get($font-family, 'default')},
-//   '2xl': #{map.get($font-size, '2xl') + '/' + map.get($line-height, 'xl')}
-//     #{map.get($font-family, 'default')},
-//   'xl': #{map.get($font-size, 'xl') + '/' + map.get($line-height, 'l')}
-//     #{map.get($font-family, 'default')},
-//   'l': #{map.get($font-size, 'l') + '/' + map.get($line-height, 'm')}
-//     #{map.get($font-family, 'default')},
-//   'm': #{map.get($font-size, 'm') + '/' + map.get($line-height, 'm')}
-//     #{map.get($font-family, 'default')},
-//   's': #{map.get($font-size, 's') + '/' + map.get($line-height, 's')}
-//     #{map.get($font-family, 'default')},
-//   'xs': #{map.get($font-size, 'xs') + '/' + map.get($line-height, 'xs')}
-//     #{map.get($font-family, 'default')},
-//   '2xs': #{map.get($font-size, '2xs') + '/' + map.get($line-height, '3xs')}
-//     #{map.get($font-family, 'default')}
-// );
-
-
 // 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: (

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

@@ -37,10 +37,10 @@
     --eui-c-white: #fff;
     --eui-c-black: #000;
 
-    --eui-c-secondary-min: var(--eui-bc-gr-25);
-    --eui-c-secondary-max: var(--eui-bc-gr-950);
+    --eui-c-secondary-min: var(--eui-bc-grn-10);
+    --eui-c-secondary-max: var(--eui-bc-grn-950);
 
-    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-page: var(--eui-bc-grn-10);
     --eui-c-surface-container: var(--eui-c-white);
 
     --eui-c-surface-shell: var(--eui-bc-grn-50);
@@ -62,6 +62,7 @@
     --eui-c-active: var(--eui-bc-pr-600);
     --eui-c-active-bg: var(--eui-bc-pr-200);
     --eui-c-active-bg-alt: var(--eui-bc-pr-300);
+    --eui-c-active-bg-light: var(--eui-bc-pr-100);
 
     --eui-c-disabled: var(--eui-bc-gr-500);
     --eui-c-disabled-bg: var(--eui-bc-gr-50);
@@ -103,6 +104,8 @@
 
     // font aliases
     --eui-f: var(--eui-f-m);
+    --eui-f-medium: var(--eui-f-m-medium);
+    --eui-f-semi-bold: var(--eui-f-m-semi-bold);
     --eui-f-bold: var(--eui-f-m-bold);
 
 
@@ -176,6 +179,7 @@
 
     // eUI font maps
     @each $size in maps.$font-size-list {
+        --eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
         --eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
         --eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
         --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
@@ -184,7 +188,6 @@
 
     @each $size, $def in maps.$font-size-map {
         --eui-f-size-#{$size}: #{$def};
-        --eui-f-size-#{$size}-compact: #{$def};
     }
 
     @each $size, $def in maps.$font-line-height-map {