@eui/styles 21.0.0-next.8 → 21.0.0-rc.1

package/dist/base/01-base/mixins/_accessibility.mixins.scss

@@ -82,7 +82,7 @@ $outline-size: 2px;
     &:focus:not([readonly]) {
         outline: var(--eui-bw-s) solid var(--eui-c-primary-border-light) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eui-br-s) !important;
+        border-radius: var(--eui-br-xs) !important;
     }
 }
 @mixin eui-accessible-focus-ring-rounded($offset: 1px) {
@@ -96,7 +96,7 @@ $outline-size: 2px;
     &:focus-visible:not([readonly]) {
         outline: var(--eui-bw-s) solid var(--eui-c-primary-border) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eui-br-s) !important;
+        border-radius: var(--eui-br-xs) !important;
     }
 }
 @mixin eui-accessible-focus-visible-ring-rounded($offset: 1px) {

package/dist/base/01-base/mixins/_eui-input.scss

@@ -8,8 +8,8 @@
     font: var(--eui-f);
     appearance: none;
     background-color: var(--eui-c-surface-container);
-    border: 1px solid var(--eui-c-secondary-border-light);
-    border-radius: var(--eui-br-m);
+    border: 1px solid var(--eui-c-secondary-border);
+    border-radius: var(--eui-br-s);
     box-shadow: none;
     color: var(--eui-c-text);
     min-height: var(--eui-s-5xl);

package/dist/base/01-base/mixins/_eui-resizable.scss

@@ -8,7 +8,7 @@
         }
 
         .eui-resizable-icon__container {
-            transform: translate(calc(-1 * var(--eui-s-m)), var(--eui-s-s));
+            transform: translate(calc(-1.2 * var(--eui-s-m)), var(--eui-s-s));
         }
     }
 }

package/dist/base/01-base/mixins/_icon-svg.mixins.scss

@@ -41,7 +41,7 @@
 @mixin pseudoSvgIconExternalPrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-external-path);
-    background-color: var(--eui-c-primary);
+    background-color: var(--eui-c-primary-surface);
 }
 @mixin pseudoSvgIconExternalBlack() {
     @include pseudoSvgIconCommonSize();
@@ -56,12 +56,12 @@
 @mixin pseudoSvgIconEllipsePrimary() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: var(--eui-c-primary);
+    background-color: var(--eui-c-primary-surface);
 }
 @mixin pseudoSvgIconEllipseDanger() {
     @include pseudoSvgIconCommon();
     mask-image: var(--eui-internal-icon-ellipse-path);
-    background-color: var(--eui-c-danger);
+    background-color: var(--eui-c-danger-surface);
 }
 @mixin pseudoSvgIconEllipseBlack() {
     @include pseudoSvgIconCommonSize();

package/dist/base/02-tokens/colors-dark-theme.scss

@@ -0,0 +1,232 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './colors-default' as defaultColors;
+
+$color-map: (
+    br: base.mapReverseValues(map.get(defaultColors.$color-map, 'br')),
+    pr: base.mapReverseValues(map.get(defaultColors.$color-map, 'pr')),
+    gr: base.mapReverseValues(map.get(defaultColors.$color-map, 'gr')),
+    grn: base.mapReverseValues(map.get(defaultColors.$color-map, 'grn')),      
+    cta: base.mapReverseValues(map.get(defaultColors.$color-map, 'cta')),
+    in: base.mapReverseValues(map.get(defaultColors.$color-map, 'in')),
+    su: base.mapReverseValues(map.get(defaultColors.$color-map, 'su')),
+    wa: base.mapReverseValues(map.get(defaultColors.$color-map, 'wa')),
+    da: base.mapReverseValues(map.get(defaultColors.$color-map, 'da'))
+);
+
+$color-state-map: (
+    branding: (
+        base: map.get(map.get($color-map, br), 900), 
+        default: map.get(map.get($color-map, br), 900), 
+        lighter: map.get(map.get($color-map, br), 700), 
+        light: map.get(map.get($color-map, br), 800), 
+        dark: map.get(map.get($color-map, br), 950), 
+        surface: map.get(map.get($color-map, br), 900), 
+        on-surface: base.getContrast(map.get(map.get($color-map, br), 900)), 
+        surface-light: map.get(map.get($color-map, br), 800), 
+        on-surface-light: base.getContrast(map.get(map.get($color-map, br), 800)), 
+        surface-dark: map.get(map.get($color-map, br), 950), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, br), 950)), 
+    ),
+    primary: (
+        base: map.get(map.get($color-map, pr), 600), 
+        default: map.get(map.get($color-map, pr), 700), 
+        lighter: map.get(map.get($color-map, pr), 500), 
+        light: map.get(map.get($color-map, pr), 600), 
+        dark: map.get(map.get($color-map, pr), 900), 
+        darker: map.get(map.get($color-map, pr), 950), 
+        surface-light: map.get(map.get($color-map, pr), 75), 
+        on-surface-light: map.get(map.get($color-map, pr), 900), 
+        surface-light-hover: map.get(map.get($color-map, pr), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, pr), 950), 
+        surface-medium: map.get(map.get($color-map, pr), 200), 
+        on-surface-medium: base.getContrast(map.get(map.get($color-map, pr), 200)), 
+        surface-medium-hover: map.get(map.get($color-map, pr), 300), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, pr), 300)),  
+        surface: map.get(map.get($color-map, pr), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, pr), 600)), 
+        surface-hover: map.get(map.get($color-map, pr), 700), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, pr), 700)), 
+        surface-dark: map.get(map.get($color-map, pr), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, pr), 900)),   
+        border: map.get(map.get($color-map, pr), 500), 
+        border-light: map.get(map.get($color-map, pr), 300), 
+        border-lighter: map.get(map.get($color-map, pr), 200), 
+    ),
+    secondary: (
+        base: map.get(map.get($color-map, gr), 500), 
+        default: map.get(map.get($color-map, gr), 800), 
+        lighter: map.get(map.get($color-map, gr), 600), 
+        light: map.get(map.get($color-map, gr), 700), 
+        dark: map.get(map.get($color-map, gr), 900), 
+        darker: map.get(map.get($color-map, gr), 950), 
+        surface-light: map.get(map.get($color-map, gr), 50), 
+        on-surface-light: map.get(map.get($color-map, gr), 900), 
+        surface-light-hover: map.get(map.get($color-map, gr), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, gr), 950), 
+        surface-medium: map.get(map.get($color-map, gr), 75), 
+        on-surface-medium: map.get(map.get($color-map, gr), 900), 
+        surface-medium-hover: map.get(map.get($color-map, gr), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, gr), 950), 
+        surface: map.get(map.get($color-map, gr), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, gr), 600)), 
+        surface-hover: map.get(map.get($color-map, gr), 700), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, gr), 700)), 
+        surface-dark: map.get(map.get($color-map, gr), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, gr), 900)), 
+        border: map.get(map.get($color-map, gr), 500), 
+        border-light: map.get(map.get($color-map, gr), 300), 
+        border-lighter: map.get(map.get($color-map, gr), 200), 
+    ),
+    neutral: (
+        base: map.get(map.get($color-map, grn), 500), 
+        default: map.get(map.get($color-map, grn), 500), 
+        lighter: map.get(map.get($color-map, grn), 600), 
+        light: map.get(map.get($color-map, grn), 700), 
+        dark: map.get(map.get($color-map, grn), 900),    
+        darker: map.get(map.get($color-map, grn), 950), 
+        surface-light: map.get(map.get($color-map, grn), 50), 
+        on-surface-light: map.get(map.get($color-map, grn), 900), 
+        surface-light-hover: map.get(map.get($color-map, grn), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, grn), 950), 
+        surface-medium: map.get(map.get($color-map, grn), 75), 
+        on-surface-medium: map.get(map.get($color-map, grn), 900), 
+        surface-medium-hover: map.get(map.get($color-map, grn), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, grn), 950),      
+        surface: map.get(map.get($color-map, grn), 400), 
+        on-surface: base.getContrast(map.get(map.get($color-map, grn), 400)), 
+        surface-hover: map.get(map.get($color-map, grn), 300), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, grn), 300)), 
+        surface-dark: map.get(map.get($color-map, grn), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, grn), 900)),     
+        border: map.get(map.get($color-map, grn), 500), 
+        border-light: map.get(map.get($color-map, grn), 400), 
+        border-lighter: map.get(map.get($color-map, grn), 300), 
+    ),
+    cta: (
+        base: map.get(map.get($color-map, cta), 400), 
+        default: map.get(map.get($color-map, cta), 900), 
+        lighter: map.get(map.get($color-map, cta), 400), 
+        light: map.get(map.get($color-map, cta), 500), 
+        dark: map.get(map.get($color-map, cta), 800), 
+        darker: map.get(map.get($color-map, cta), 900), 
+        surface-light: map.get(map.get($color-map, cta), 25), 
+        on-surface-light: map.get(map.get($color-map, cta), 800), 
+        surface-light-hover: map.get(map.get($color-map, cta), 50), 
+        on-surface-light-hover: map.get(map.get($color-map, cta), 950), 
+        surface-medium: map.get(map.get($color-map, cta), 75), 
+        on-surface-medium: map.get(map.get($color-map, cta), 900), 
+        surface-medium-hover: map.get(map.get($color-map, cta), 100), 
+        on-surface-medium-hover: map.get(map.get($color-map, cta), 950),  
+        surface: map.get(map.get($color-map, cta), 400), 
+        on-surface: base.getContrast(map.get(map.get($color-map, cta), 400)), 
+        surface-hover: map.get(map.get($color-map, cta), 500), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, cta), 500)), 
+        surface-dark: map.get(map.get($color-map, cta), 600), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, cta), 600)),  
+        border: map.get(map.get($color-map, cta), 300), 
+        border-light: map.get(map.get($color-map, cta), 100), 
+        border-lighter: map.get(map.get($color-map, cta), 75), 
+    ),
+    info: (
+        base: map.get(map.get($color-map, in), 500), 
+        default: map.get(map.get($color-map, in), 600), 
+        lighter: map.get(map.get($color-map, in), 400), 
+        light: map.get(map.get($color-map, in), 500), 
+        dark: map.get(map.get($color-map, in), 800), 
+        darker: map.get(map.get($color-map, in), 900), 
+        surface-light: map.get(map.get($color-map, in), 75), 
+        on-surface-light: map.get(map.get($color-map, in), 600), 
+        surface-light-hover: map.get(map.get($color-map, in), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, in), 800), 
+        surface-medium: map.get(map.get($color-map, in), 200), 
+        on-surface-medium: map.get(map.get($color-map, in), 950), 
+        surface-medium-hover: map.get(map.get($color-map, in), 300), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, in), 300)),       
+        surface: map.get(map.get($color-map, in), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, in), 600)),       
+        surface-hover: map.get(map.get($color-map, in), 800), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, in), 800)),       
+        surface-dark: map.get(map.get($color-map, in), 800), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, in), 800)),             
+        border: map.get(map.get($color-map, in), 400), 
+        border-light: map.get(map.get($color-map, in), 300), 
+        border-lighter: map.get(map.get($color-map, in), 200), 
+    ),
+    success: (
+        base: map.get(map.get($color-map, su), 700), 
+        default: map.get(map.get($color-map, su), 900), 
+        lighter: map.get(map.get($color-map, su), 700), 
+        light: map.get(map.get($color-map, su), 800), 
+        dark: map.get(map.get($color-map, su), 900), 
+        darker: map.get(map.get($color-map, su), 950), 
+        surface-light: map.get(map.get($color-map, su), 100), 
+        on-surface-light: map.get(map.get($color-map, su), 950), 
+        surface-light-hover: map.get(map.get($color-map, su), 200), 
+        on-surface-light-hover: map.get(map.get($color-map, su), 950), 
+        surface-medium: map.get(map.get($color-map, su), 300), 
+        on-surface-medium: base.getContrast(map.get(map.get($color-map, su), 300)),       
+        surface-medium-hover: map.get(map.get($color-map, su), 400), 
+        on-surface-medium-hover: base.getContrast(map.get(map.get($color-map, su), 400)),   
+        surface: map.get(map.get($color-map, su), 900), 
+        on-surface: base.getContrast(map.get(map.get($color-map, su), 900)),   
+        surface-hover: map.get(map.get($color-map, su), 950), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, su), 950)),   
+        surface-dark: map.get(map.get($color-map, su), 950), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, su), 950)),    
+        border: map.get(map.get($color-map, su), 600), 
+        border-light: map.get(map.get($color-map, su), 400), 
+        border-lighter: map.get(map.get($color-map, su), 300), 
+    ),
+    warning: (
+        base: map.get(map.get($color-map, wa), 500), 
+        default: map.get(map.get($color-map, wa), 900), 
+        lighter: map.get(map.get($color-map, wa), 700), 
+        light: map.get(map.get($color-map, wa), 800), 
+        dark: map.get(map.get($color-map, wa), 950), 
+        darker: map.get(map.get($color-map, wa), 950), 
+        surface-light: map.get(map.get($color-map, wa), 50), 
+        on-surface-light: map.get(map.get($color-map, wa), 900), 
+        surface-light-hover: map.get(map.get($color-map, wa), 75), 
+        on-surface-light-hover: map.get(map.get($color-map, wa), 950), 
+        surface-medium: map.get(map.get($color-map, wa), 100), 
+        on-surface-medium: map.get(map.get($color-map, wa), 900), 
+        surface-medium-hover: map.get(map.get($color-map, wa), 200), 
+        on-surface-medium-hover: map.get(map.get($color-map, wa), 950), 
+        surface: map.get(map.get($color-map, wa), 500), 
+        on-surface: base.getContrast(map.get(map.get($color-map, wa), 500)),   
+        surface-hover: map.get(map.get($color-map, wa), 600), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, wa), 600)),   
+        surface-dark: map.get(map.get($color-map, wa), 900), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, wa), 900)),       
+        border: map.get(map.get($color-map, wa), 400), 
+        border-light: map.get(map.get($color-map, wa), 200), 
+        border-lighter: map.get(map.get($color-map, wa), 100), 
+    ),
+    danger: (
+        base: map.get(map.get($color-map, da), 500), 
+        default: map.get(map.get($color-map, da), 600), 
+        lighter: map.get(map.get($color-map, da), 400), 
+        light: map.get(map.get($color-map, da), 500), 
+        dark: map.get(map.get($color-map, da), 700), 
+        darker: map.get(map.get($color-map, da), 800), 
+        surface-light: map.get(map.get($color-map, da), 75), 
+        on-surface-light: map.get(map.get($color-map, da), 700), 
+        surface-light-hover: map.get(map.get($color-map, da), 100), 
+        on-surface-light-hover: map.get(map.get($color-map, da), 900), 
+        surface-medium: map.get(map.get($color-map, da), 200), 
+        on-surface-medium: map.get(map.get($color-map, da), 900), 
+        surface-medium-hover: map.get(map.get($color-map, da), 300), 
+        on-surface-medium-hover: map.get(map.get($color-map, da), 950),     
+        surface: map.get(map.get($color-map, da), 600), 
+        on-surface: base.getContrast(map.get(map.get($color-map, da), 600)),   
+        surface-hover: map.get(map.get($color-map, da), 600), 
+        on-surface-hover: base.getContrast(map.get(map.get($color-map, da), 700)), 
+        surface-dark: map.get(map.get($color-map, da), 800), 
+        on-surface-dark: base.getContrast(map.get(map.get($color-map, da), 800)), 
+        border: map.get(map.get($color-map, da), 500), 
+        border-light: map.get(map.get($color-map, da), 300), 
+        border-lighter: map.get(map.get($color-map, da), 200), 
+    ),
+);