@eui/styles 21.0.0-next.1 → 21.0.0-next.11

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

@@ -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,
@@ -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',
@@ -677,7 +681,7 @@ $font-weight-map: (
 
 // ecl font sizes for example, but driven by m = 18px base
 
-// $ecl-font-size: (
+// $ecl-font-size-map: (
 //   '10xl': 6rem,
 //   '9xl': 4.5rem,
 //   '8xl': 3.75rem,
@@ -692,11 +696,10 @@ $font-weight-map: (
 //   'm': 1.125rem,
 //   's': 1rem,
 //   'xs': 0.875rem,
-//   '2xs': 0.75rem
-// );
-
-// $ecl-line-height: (
-//   '10xl': 6.25rem,
+//   '2xs': 0.75rem,
+// ) !default;
+// $ecl-line-height-map: (
+//   '10xl': 6rem,
 //   '9xl': 4.875rem,
 //   '8xl': 4.25rem,
 //   '7xl': 3.75rem,
@@ -712,8 +715,9 @@ $font-weight-map: (
 //   'xs': 1.25rem,
 //   '2xs': 1rem,
 //   '3xs': 0.875rem,
-// );
-// $ecl-font: (
+// ) !default;
+// $ecl-font-map: (
+//   // deprecated
 //   '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')}
@@ -744,7 +748,16 @@ $font-weight-map: (
 //     #{map.get($font-family, 'default')},
 //   '2xs': #{map.get($font-size, '2xs') + '/' + map.get($line-height, '3xs')}
 //     #{map.get($font-family, 'default')}
-// );
+// ) !default;
+// $ecl-letter-spacing-map: (
+//   '5xl': 3px,
+//   '4xl': 2.5px,
+//   '3xl': 2px,
+//   '2xl': 1.5px,
+//   'xl': 1px,
+//   'l': 0.5px,
+//   'm': 0px,
+// ) !default;
 
 
 // based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps

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

@@ -40,13 +40,13 @@
     --eui-c-secondary-min: var(--eui-bc-gr-25);
     --eui-c-secondary-max: var(--eui-bc-gr-950);
 
-    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-page: var(--eui-bc-gr-25);
     --eui-c-surface-container: var(--eui-c-white);
 
-    --eui-c-surface-shell: var(--eui-bc-grn-50);
-    --eui-c-surface-container-1: var(--eui-bc-grn-75);
-    --eui-c-surface-container-2: var(--eui-bc-grn-100);
-    --eui-c-surface-container-3: var(--eui-bc-grn-200);
+    --eui-c-surface-shell: var(--eui-bc-gr-50);
+    --eui-c-surface-container-1: var(--eui-bc-gr-75);
+    --eui-c-surface-container-2: var(--eui-bc-gr-100);
+    --eui-c-surface-container-3: var(--eui-bc-gr-200);
 
     --eui-c-text: var(--eui-bc-gr-950);
     --eui-c-text-light: var(--eui-bc-gr-800);
@@ -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);