@eui/styles 21.0.0-alpha.6 → 21.0.0-alpha.8

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

@@ -68,10 +68,10 @@ $outline-size: 2px;
 }
 
 @mixin eui-accessible-focus-border() {
-    border-left: var(--eui-s-2xs) solid transparent;
+    border-left: var(--eui-s-3xs) solid transparent;
 
     &:focus:not([readonly]) {
-        border: var(--eui-s-2xs) solid var(--eui-c-focus-visible) !important;
+        border: var(--eui-s-3xs) solid var(--eui-c-focus-visible) !important;
         transition: none;
     }
 }

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

@@ -60,7 +60,7 @@
     }
 
     &--loading {
-        padding-right: var(--eui-s-4xl);
+        padding-right: var(--eui-s-6xl);
 
         &-icon {
             @include loadingIndicator.loading-indicator();
@@ -68,6 +68,6 @@
     }
 
     &--clearable {
-        padding-right: var(--eui-s-4xl);
+        padding-right: var(--eui-s-6xl);
     }
 }

package/dist/base/01-base/mixins/_loading-indicator.scss

@@ -12,7 +12,7 @@
     }
 
     &::before {
-        border: var(--eui-s-2xs) solid rgba(0, 0, 0, 0.35);
+        border: var(--eui-s-3xs) solid rgba(0, 0, 0, 0.35);
         border-radius: 100%;
     }
 
@@ -22,7 +22,7 @@
         border-color: var(--eui-c-white) transparent transparent;
         border-radius: 100%;
         border-style: solid;
-        border-width: var(--eui-s-2xs);
+        border-width: var(--eui-s-3xs);
         box-shadow: 0 0 0 1px transparent;
     }
 

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

@@ -88,23 +88,44 @@ $opacity-map: (
 
 // SPACING
 
+// $old-spacing-map: (
+//     none: 0,
+//     4xs: 0.0625rem, // => 5xs
+//     3xs: 0.125rem,  // => 4xs
+//     2xs: 0.25rem,   // => 3xs 
+//     xs: 0.5rem,     // ======
+//     s: 0.75rem,     // ======
+//     m: 1rem,        // ======
+//     l: 1.25rem,     // ======
+//     xl: 1.5rem,     // ======
+//     2xl: 2rem,      // => 3xl
+//     3xl: 2.5rem,    // => 5xl
+//     4xl: 3rem,      // => 6xl
+//     5xl: 3.5rem,    // => 7xl
+//     6xl: 4rem,      // => 8xl
+//     7xl: 5rem       // => 10xl
+// );
+
 $spacing-map: (
-    none: 0,
-    4xs: 0.0625rem,
-    3xs: 0.125rem,
-    2xs: 0.25rem,
-    xs: 0.5rem,
-    s: 0.75rem,
-    m: 1rem,
-    l: 1.25rem,
-    xl: 1.5rem,
-    2xl: 2rem,
-    3xl: 2.5rem,
-    4xl: 3rem,
-    5xl: 3.5rem,
-    6xl: 4rem,
-    7xl: 5rem,
-    8xl: 6rem
+    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
 );
 
 
@@ -141,39 +162,8 @@ $z-index-map: (
 
 
 
-
 // COLORS
 
-// eUI DEFAULT NEUTRAL
-$eui-neutral-160: #131313;
-$eui-neutral-140: #1d1d1d;
-$eui-neutral-120: #262626;
-$eui-neutral-110: #2b2b2b;
-$eui-neutral-100: #303030;
-$eui-neutral-80: #595959;
-$eui-neutral-60: #838383;
-$eui-neutral-40: #acacac;
-$eui-neutral-20: #d6d6d6;
-$eui-neutral-10: #eaeaea;
-$eui-neutral-5: #f5f5f5;
-$eui-neutral-2: #fcfcfc;
-$eui-neutral-0: #fff;
-
-// eui DEFAULT ACCENT (ec-yellow)
-$eui-accent-160: #432105;
-$eui-accent-140: #734110;
-$eui-accent-120: #a46704;
-$eui-accent-110: #ce9100;
-$eui-accent-100: #efbc03;
-$eui-accent-80: #ffd617;
-$eui-accent-60: #ffe843;
-$eui-accent-40: #fff587;
-$eui-accent-20: #fffbc2;
-$eui-accent-10: #fefde8;
-$eui-accent-5: #fffcf7;
-$eui-accent-0: #fff;
-
-
 $ecl-colors: (
   'primary-25': #f7f9ff,
   'primary-50': #f2f6ff,
@@ -293,16 +283,8 @@ $ecl-colors: (
 $color-map: (
     branding: (
         120: map-get($ecl-colors, 'grey-950'),
-        110: map-get($ecl-colors, 'grey-950'),
-        100: map-get($ecl-colors, 'grey-950'),
-        80: map-get($ecl-colors, 'grey-900'),
-        60: map-get($ecl-colors, 'grey-800'),
-        40: map-get($ecl-colors, 'grey-700'),
-        20: map-get($ecl-colors, 'grey-600'),
-        10: map-get($ecl-colors, 'grey-500'),
-        5: map-get($ecl-colors, 'grey-400'),
-        2: map-get($ecl-colors, 'grey-300'),
-        0: map-get($ecl-colors, 'grey-200'),
+        100: map-get($ecl-colors, 'grey-900'),
+        80: map-get($ecl-colors, 'grey-800')
     ),
     primary: (
         160: map-get($ecl-colors, 'primary-950'),
@@ -316,24 +298,8 @@ $color-map: (
         20: map-get($ecl-colors, 'primary-200'),
         10: map-get($ecl-colors, 'primary-100'),
         5: map-get($ecl-colors, 'primary-75'),
-        0: map-get($ecl-colors, 'primary-50'),
+        0: map-get($ecl-colors, 'primary-50')
     ),
-    // eUI neutral palette
-    // neutral: (
-    //     160: $eui-neutral-160,
-    //     140: $eui-neutral-140,
-    //     120: $eui-neutral-120,
-    //     110: $eui-neutral-110,
-    //     100: $eui-neutral-100,
-    //     80: $eui-neutral-80,
-    //     60: $eui-neutral-60,
-    //     40: $eui-neutral-40,
-    //     20: $eui-neutral-20,
-    //     10: $eui-neutral-10,
-    //     5: $eui-neutral-5,
-    //     2: $eui-neutral-2,
-    //     0: $eui-neutral-0
-    // ),
     neutral: (
         160: map-get($ecl-colors, 'grey-950'),
         140: map-get($ecl-colors, 'grey-900'),
@@ -347,21 +313,7 @@ $color-map: (
         10: map-get($ecl-colors, 'grey-100'),
         5: map-get($ecl-colors, 'grey-75'),
         2: map-get($ecl-colors, 'grey-50'),
-        0: map-get($ecl-colors, 'grey-25'),
-    ),
-    accent: (
-        160: $eui-accent-160,
-        140: $eui-accent-140,
-        120: $eui-accent-120,
-        110: $eui-accent-110,
-        100: $eui-accent-100,
-        80: $eui-accent-80,
-        60: $eui-accent-60,
-        40: $eui-accent-40,
-        20: $eui-accent-20,
-        10: $eui-accent-10,
-        5: $eui-accent-5,
-        0: $eui-accent-0
+        0: map-get($ecl-colors, 'grey-25')
     ),
     info: (
         160: map-get($ecl-colors, 'info-900'),
@@ -375,7 +327,7 @@ $color-map: (
         20: map-get($ecl-colors, 'info-100'),
         10: map-get($ecl-colors, 'info-75'),
         5: map-get($ecl-colors, 'info-50'),
-        0: map-get($ecl-colors, 'info-25'),
+        0: map-get($ecl-colors, 'info-25')
     ),
     success: (
         160: map-get($ecl-colors, 'success-950'),
@@ -389,7 +341,7 @@ $color-map: (
         20: map-get($ecl-colors, 'success-300'),
         10: map-get($ecl-colors, 'success-200'),
         5: map-get($ecl-colors, 'success-100'),
-        0: map-get($ecl-colors, 'success-75'),
+        0: map-get($ecl-colors, 'success-75')
     ),
     warning: (
         160: map-get($ecl-colors, 'warning-900'),
@@ -403,7 +355,7 @@ $color-map: (
         20: map-get($ecl-colors, 'warning-100'),
         10: map-get($ecl-colors, 'warning-75'),
         5: map-get($ecl-colors, 'warning-50'),
-        0: map-get($ecl-colors, 'warning-25'),
+        0: map-get($ecl-colors, 'warning-25')
     ),
     danger: (
         160: map-get($ecl-colors, 'error-950'),
@@ -417,7 +369,7 @@ $color-map: (
         20: map-get($ecl-colors, 'error-200'),
         10: map-get($ecl-colors, 'error-100'),
         5: map-get($ecl-colors, 'error-75'),
-        0: map-get($ecl-colors, 'error-50'),
+        0: map-get($ecl-colors, 'error-50')
     ),
     cta: (
         160: map-get($ecl-colors, 'secondary-800'),
@@ -431,7 +383,7 @@ $color-map: (
         20: map-get($ecl-colors, 'secondary-75'),
         10: map-get($ecl-colors, 'secondary-50'),
         5: map-get($ecl-colors, 'secondary-25'),
-        0: map-get($ecl-colors, 'secondary-25'),
+        0: map-get($ecl-colors, 'secondary-25')
     )
 );
 
@@ -439,7 +391,7 @@ $color-map: (
 
 $color-context-map: (
     branding: (
-        base: '100', dark: '120', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5', bg-lighter: '2'
+        base: '100', dark: '120', light: '80'
     ),
     neutral: (
         base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5', bg-lighter: '3'
@@ -453,9 +405,6 @@ $color-context-map: (
     info: (
         base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
     ),
-    accent: (
-        base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
-    ),
     success: (
         base: '100', darkest: '160', darker: '140', dark: '110', light: '80', lighter: '40', lightest: '20', bg: '10', bg-light: '5'
     ),
@@ -471,10 +420,15 @@ $color-context-map: (
 // COLOR STATES
 
 $color-state-map: (
-    // base, darkest, darker, dark, light, lighter, lightest, bg
+    branding: (
+        base: 'branding',
+        default: 'branding',
+        dark: 'branding-dark',
+        light: 'branding-light'
+    ), 
     primary: (
         base: 'primary', 
-        default: 'primary-dark', 
+        default: 'primary', 
         on-surface-light: 'primary-darker',
         surface-light: 'primary-bg-light',
         surface-light-contrast: 'primary-bg-light-contrast',
@@ -489,27 +443,26 @@ $color-state-map: (
         surface-hover: 'primary-dark',
         surface-hover-contrast: 'primary-dark-contrast'
     ),
-    // base, darkest, darker, dark, light, lighter, lightest, bg, bg-light
     secondary: (
         base: 'neutral',
-        default: 'neutral-dark',
-        on-surface-light: 'neutral-darker',
+        default: 'neutral-darker',
+        on-surface-light: 'neutral-darkest',
         surface-light: 'neutral-bg-light',
         surface-light-contrast: 'neutral-bg-light-contrast',
         surface-light-hover: 'neutral-bg',
         surface-medium: 'neutral-lightest',
         on-surface-medium: 'neutral-darkest',
         border: 'neutral-light',
-        border-light: 'neutral-lighter',
-        border-lighter: 'neutral-lightest',
-        surface: 'neutral-lighter',
-        surface-contrast: 'neutral-lighter-contrast',
+        border-light: 'neutral-light',
+        border-lighter: 'neutral-lightr',
+        surface: 'neutral-light',
+        surface-contrast: 'neutral-light-contrast',
         surface-hover: 'neutral-lightest',
         surface-hover-contrast: 'neutral-lightest-contrast'
     ),
     cta: (
         base: 'cta',
-        default: 'cta-darkest',
+        default: 'cta-darker',
         on-surface-light: 'cta-darker',
         surface-light: 'cta-bg-light',
         surface-light-contrast: 'cta-bg-light-contrast',
@@ -573,42 +526,25 @@ $color-state-map: (
         surface: 'warning',
         surface-contrast: 'warning-contrast',
         surface-hover: 'warning-dark',
-        surface-hover-contrast: 'warning-contrast'
+        surface-hover-contrast: 'warning-dark-contrast'
     ),
     danger: (
         base: 'danger',
-        default: 'danger-dark',
-        on-surface-light: 'danger-darker',
+        default: 'danger',
+        on-surface-light: 'danger-dark',
         surface-light: 'danger-bg-light',
         surface-light-contrast: 'danger-bg-light-contrast',
         surface-light-hover: 'danger-lightest',
         surface-medium: 'danger-lightest',
-        on-surface-medium: 'danger-darkest',
+        on-surface-medium: 'danger-darker',
         border: 'danger-light',
         border-light: 'danger-lighter',
         border-lighter: 'danger-lightest',
         surface: 'danger',
         surface-contrast: 'danger-contrast',
-        surface-hover: 'danger-dark',
-        surface-hover-contrast: 'danger-dark-contrast'
+        surface-hover: 'danger',
+        surface-hover-contrast: 'danger-contrast'
     ),
-    accent: (
-        base: 'accent',
-        default: 'accent-darkest',
-        on-surface-light: 'accent-darkest',
-        surface-light: 'accent-bg-light',
-        surface-light-contrast: 'accent-bg-light-contrast',
-        surface-light-hover: 'accent-lightest',
-        surface-medium: 'accent-lightest',
-        on-surface-medium: 'accent-darkest',
-        border: 'accent-light',
-        border-light: 'accent-lighter',
-        border-lighter: 'accent-lightest',
-        surface: 'accent-light',
-        surface-contrast: 'accent-light-contrast',
-        surface-hover: 'accent',
-        surface-hover-contrast: 'accent-contrast'
-    )
 );
 
 // SHADOWS
@@ -628,14 +564,7 @@ $box-shadow-map: (
     2: map-get($ecl-shadow, 2),
     3: map-get($ecl-shadow, 5),
     4: map-get($ecl-shadow, 4),
-    5: map-get($ecl-shadow, 5),
-    6: map-get($ecl-shadow, 5),
-    8: map-get($ecl-shadow, 5),
-    9: map-get($ecl-shadow, 5),
-    12: map-get($ecl-shadow, 5),
-    16: map-get($ecl-shadow, 5),
-    24: map-get($ecl-shadow, 5),
-    card: map-get($ecl-shadow, 1),
+    5: map-get($ecl-shadow, 5)
 );
 
 
@@ -648,7 +577,7 @@ $font-weight-map: (
     'bold': 700
 );
 
-$font-map: (
+$font-map-responsive: (
     'display': (
         'm': (
             'desktop': (
@@ -693,140 +622,55 @@ $font-map: (
                 'size': 1.2rem,
                 'line-height': 1.5rem
             )
-        ),
+        )
+    )
+);
+
+$font-map: (
+    'title': (
         '2xs': (
-            'desktop': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),
-            'tablet': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),
-            'mobile': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            )
+            'size': 1rem,
+            'line-height': 1.5rem
         )
     ),
     'card-title': (
         'm': (
-            'desktop': (
-                'size': 1.125rem,
-                'line-height': 1.5rem
-            ),            
-            'tablet': (
-                'size': 1.125rem,
-                'line-height': 1.5rem
-            ),            
-            'mobile': (
-                'size': 1.125rem,
-                'line-height': 1.5rem
-            )            
+            'size': 1.125rem,
+            'line-height': 1.5rem
         )
     ),    
     'label': (
         'm': (
-            'desktop': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            ),            
-            'tablet': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            ),            
-            'mobile': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            )            
+            'size': 0.875rem,
+            'line-height': 1.25rem
         ),
         'l': (
-            'desktop': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),            
-            'tablet': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),            
-            'mobile': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            )            
+            'size': 1rem,
+            'line-height': 1.5rem
         )
     ),
     'body': (
         's': (
-            'desktop': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            ),            
-            'tablet': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            ),            
-            'mobile': (
-                'size': 0.875rem,
-                'line-height': 1.25rem
-            )            
+            'size': 0.875rem,
+            'line-height': 1.25rem
         ),
         'm': (
-            'desktop': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),            
-            'tablet': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            ),            
-            'mobile': (
-                'size': 1rem,
-                'line-height': 1.5rem
-            )            
+            'size': 1rem,
+            'line-height': 1.5rem
         ),
         'l': (
-            'desktop': (
-                'size': 1.25rem,
-                'line-height': 1.75rem
-            ),            
-            'tablet': (
-                'size': 1.25rem,
-                'line-height': 1.75rem
-            ),            
-            'mobile': (
-                'size': 1.25rem,
-                'line-height': 1.75rem
-            )            
+            'size': 1.25rem,
+            'line-height': 1.75rem
         ),        
         'xl': (
-            'desktop': (
-                'size': 1.5rem,
-                'line-height': 2rem
-            ),            
-            'tablet': (
-                'size': 1.5rem,
-                'line-height': 2rem
-            ),            
-            'mobile': (
-                'size': 1.5rem,
-                'line-height': 2rem
-            )            
+            'size': 1.5rem,
+            'line-height': 2rem
         )        
     ),
     'microcopy': (
         'm': (
-            'desktop': (
-                'size': 0.75rem,
-                'line-height': 1rem
-            ),            
-            'tablet': (
-                'size': 0.75rem,
-                'line-height': 1rem
-            ),            
-            'mobile': (
-                'size': 0.75rem,
-                'line-height': 1rem
-            )            
+            'size': 0.75rem,
+            'line-height': 1rem
         )
     )
 );

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

@@ -127,7 +127,7 @@
         --eui-f-#{$size}-bold: normal normal 700 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
     }
 
-    @each $font, $fontDef in maps.$font-map {
+    @each $font, $fontDef in maps.$font-map-responsive {
         @each $size, $sizeDef in $fontDef {
             $desktop: map-get($sizeDef, 'desktop');
             $tablet: map-get($sizeDef, 'tablet');
@@ -160,7 +160,7 @@
     }
 
     @include base.media(maps.$eui-bkp-tablet) {
-        @each $font, $fontDef in maps.$font-map {
+        @each $font, $fontDef in maps.$font-map-responsive {
             @each $size, $sizeDef in $fontDef {
                 --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-tablet-regular);
                 --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-tablet-medium);
@@ -170,7 +170,7 @@
         }        
     }
     @include base.media(maps.$eui-bkp-mobile) {
-        @each $font, $fontDef in maps.$font-map {
+        @each $font, $fontDef in maps.$font-map-responsive {
             @each $size, $sizeDef in $fontDef {
                 --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-mobile-regular);
                 --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-mobile-medium);
@@ -180,6 +180,19 @@
         }   
     }
 
+    @each $font, $fontDef in maps.$font-map {
+        @each $size, $sizeDef in $fontDef {
+            @each $type, $def in $sizeDef {
+                --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
+            }
+            --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+            --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+            --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+            --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+        }
+    }
+
+
     @each $size, $def in maps.$font-size-map {
         --eui-f-size-#{$size}: #{$def};
         --eui-f-size-#{$size}-compact: #{$def};

package/dist/base/05-assets/flags/_icons-generics.scss

@@ -20,15 +20,15 @@ $ratio-4x3: 1.33333333;
     &--rounded {
         background-size: cover !important;
         border-radius: 50%;
-        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)}) !important;
+        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-squared {
-        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)});
-        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-2xs)}) !important;
+        height: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-rounded,