@eui/styles 21.0.0-alpha.9 → 21.0.0-next.10

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

@@ -2,7 +2,11 @@
 @use '../02-tokens/maps-dark-theme' as maps;
 
 html.eui-t-dark {
-    --eui-c-bg: var(--eui-bc-gr-50);
+    --eui-c-black: #fff;
+    --eui-c-white: #000;
+
+    --eui-c-secondary-min: var(--eui-bc-gr-950);
+    --eui-c-secondary-max: var(--eui-bc-gr-25);
 
     --eui-c-surface-page: var(--eui-bc-grn-25);
     --eui-c-surface-shell: var(--eui-bc-grn-50);
@@ -17,8 +21,6 @@ html.eui-t-dark {
     --eui-c-focus: var(--eui-bc-pr-400);
     --eui-c-active-bg-alt: var(--eui-bc-pr-100);
 
-    --_eui-scrollbars-foreground-color: var(--eui-bc-grn-300);
-
     // COLOR SHADES
     @each $color, $shades in maps.$color-map {
         @each $shade, $value in $shades {

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

@@ -30,8 +30,8 @@
         }
     }
 
-    // COLOR CONTEXT - eui-c
-    // ---------------------
+    // GENERIC CONTEXT COLORS
+    // ----------------------
 
     // generic context colors reused accross components
     --eui-c-white: #fff;
@@ -40,15 +40,13 @@
     --eui-c-secondary-min: var(--eui-bc-gr-25);
     --eui-c-secondary-max: var(--eui-bc-gr-950);
 
-    --eui-c-bg: var(--eui-bc-gr-25); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
-    --eui-c-bg-light: var(--eui-c-white); // to be kept for backward compat / eUI 17 / eUI 19 (over MWP)
-    --eui-c-surface-page: var(--eui-c-bg);
-    --eui-c-surface-container: var(--eui-c-bg-light);
+    --eui-c-surface-page: var(--eui-bc-grn-25);
+    --eui-c-surface-container: var(--eui-c-white);
 
-    --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-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-text: var(--eui-bc-gr-950);
     --eui-c-text-light: var(--eui-bc-gr-800);
@@ -56,18 +54,19 @@
     --eui-c-text-lightest: var(--eui-bc-gr-600);
 
     --eui-c-focus-visible: var(--eui-bc-pr-600);
-    --eui-c-focus: var(--eui-bc-pr-400);
+    --eui-c-focus: var(--eui-bc-pr-200);
     
     --eui-c-hover: var(--eui-bc-pr-75);
     --eui-c-hover-disabled: var(--eui-bc-gr-100);
 
     --eui-c-active: var(--eui-bc-pr-600);
-    --eui-c-active-bg: var(--eui-bc-pr-100);
+    --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-400);
-    --eui-c-disabled-bg: var(--eui-bc-gr-200);
-    --eui-c-readonly: var(--eui-bc-gr-500);
+    --eui-c-disabled: var(--eui-bc-gr-500);
+    --eui-c-disabled-bg: var(--eui-bc-gr-50);
+    --eui-c-readonly: var(--eui-bc-gr-600);
 
     --eui-c-link: var(--eui-bc-pr-600);
 
@@ -75,17 +74,17 @@
     --eui-c-divider-light: var(--eui-bc-gr-100);
 
 
-    // COLOR STATE - eui-c-s
-    // ---------------------
+    // CONTEXT COLORS FROM PALETTES
+    // ----------------------------
 
     @each $color, $shades in maps.$color-state-map {
         @each $shade, $value in $shades {
             @if $shade == default {
                 --eui-c-#{$color}: var(--eui-bc-#{$value});
-                --eui-c-#{$color}-contrast: var(--eui-bc-#{$value}-contrast);
+            } @else if $shade == on-default {
+                --eui-c-on-#{$color}: var(--eui-bc-#{$value});
             } @else {
                 --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$value});
-                --eui-c-#{$color + '-' + $shade}-contrast: var(--eui-bc-#{$value}-contrast);
             }
         }
     }
@@ -108,85 +107,82 @@
     --eui-f-bold: var(--eui-f-m-bold);
 
 
-    // font aliases
-    --eui-f: var(--eui-f-m);
-    --eui-f-bold: var(--eui-f-m-bold);
-
-    @each $size in maps.$font-size-list {
-        --eui-f-#{$size}: normal normal 400 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
-        --eui-f-#{$size}-bold: normal normal 700 var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
-    }
-
+    // based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps
     // responsive fonts
-
-    @each $font, $fontDef in maps.$font-map-responsive {
-        @each $size, $sizeDef in $fontDef {
-            $desktop: map-get($sizeDef, 'desktop');
-            $tablet: map-get($sizeDef, 'tablet');
-            $mobile: map-get($sizeDef, 'mobile');
-
-            @each $type, $def in $desktop {
-                --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
-            }
-            @each $type, $def in $tablet {
-                --eui-f-#{$font}-#{$size}-tablet-#{$type}: #{$def};
-            }
-            @each $type, $def in $mobile {
-                --eui-f-#{$font}-#{$size}-mobile-#{$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);
-
-            --eui-f-#{$font}-#{$size}-tablet-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-tablet-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-tablet-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-tablet-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
-
-            --eui-f-#{$font}-#{$size}-mobile-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-mobile-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-mobile-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
-            --eui-f-#{$font}-#{$size}-mobile-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
-        }
-    }
-
-    @include base.media(maps.$eui-bkp-tablet) {
-        @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);
-                --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-tablet-semi-bold);
-                --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-tablet-bold);
-            }
-        }        
-    }
-    @include base.media(maps.$eui-bkp-mobile) {
-        @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);
-                --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-mobile-semi-bold);
-                --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-mobile-bold);
-            }
-        }   
-    }
-
-    // normal fonts (non-responsive)
-    
-    @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 $font, $fontDef in maps.$font-map-responsive {
+    //     @each $size, $sizeDef in $fontDef {
+    //         $desktop: map-get($sizeDef, 'desktop');
+    //         $tablet: map-get($sizeDef, 'tablet');
+    //         $mobile: map-get($sizeDef, 'mobile');
+
+    //         @each $type, $def in $desktop {
+    //             --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
+    //         }
+    //         @each $type, $def in $tablet {
+    //             --eui-f-#{$font}-#{$size}-tablet-#{$type}: #{$def};
+    //         }
+    //         @each $type, $def in $mobile {
+    //             --eui-f-#{$font}-#{$size}-mobile-#{$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);
+
+    //         --eui-f-#{$font}-#{$size}-tablet-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-tablet-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
+
+    //         --eui-f-#{$font}-#{$size}-mobile-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //         --eui-f-#{$font}-#{$size}-mobile-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
+    //     }
+    // }
+
+    // @include base.media(maps.$eui-bkp-tablet) {
+    //     @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);
+    //             --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-tablet-semi-bold);
+    //             --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-tablet-bold);
+    //         }
+    //     }        
+    // }
+    // @include base.media(maps.$eui-bkp-mobile) {
+    //     @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);
+    //             --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-mobile-semi-bold);
+    //             --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-mobile-bold);
+    //         }
+    //     }   
+    // }
+
+    // // normal fonts (non-responsive)
+    // @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-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
+    //     }
+    // }
+
+    // eUI font maps
+    @each $size in maps.$font-size-list {
+        --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);
+        --eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) 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,9 +20,9 @@ $ratio-4x3: 1.33333333;
     &--rounded {
         background-size: cover !important;
         border-radius: 50%;
-        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;
+        height: var(--eui-s-xl);    // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        min-width: var(--eui-s-xl); // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)});
+        width: var(--eui-s-xl) !important;  // calc(#{var(--eui-s-m)} + #{var(--eui-s-3xs)}) !important;
     }
 
     &-squared {
@@ -40,8 +40,8 @@ $ratio-4x3: 1.33333333;
         }
 
         &.eui-flag-icon-2x {
-            height: calc(1 * #{var(--eui-s-l)});
-            width: calc(1 * #{var(--eui-s-l)}) !important;
+            height: calc(1.375 * #{var(--eui-s-l)});
+            width: calc(1.375 * #{var(--eui-s-l)}) !important;
         }
 
         &.eui-flag-icon-3x {