@eui/styles 21.0.0-next.4 → 21.0.0-next.41

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../01-base' as base;
 @use '../02-tokens/maps' as maps;
 
@@ -37,8 +38,8 @@
     --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-25);
+    --eui-c-secondary-max: var(--eui-bc-grn-950);
 
     --eui-c-surface-page: var(--eui-bc-grn-25);
     --eui-c-surface-container: var(--eui-c-white);
@@ -70,8 +71,8 @@
 
     --eui-c-link: var(--eui-bc-pr-600);
 
-    --eui-c-divider: var(--eui-bc-gr-200);
-    --eui-c-divider-light: var(--eui-bc-gr-100);
+    --eui-c-divider: var(--eui-bc-gr-100);
+    --eui-c-divider-light: var(--eui-bc-gr-75);
 
 
     // CONTEXT COLORS FROM PALETTES
@@ -102,98 +103,73 @@
     // font sizes
     --eui-f-size-base: 16px;
 
+    // base line-height / scale-factor (for compact mode)
+    --eui-base-line-height: 1.5;
+    --eui-base-scale-factor: 1;
+
     // font aliases
     --eui-f: var(--eui-f-m);
+    --eui-f-light: var(--eui-f-m-light);
+    --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);
 
+    @each $size, $def in maps.$font-size-map {
+        --eui-f-s-r-#{$size}: #{$def};
+    }
 
-    // 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-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, $sizeDef in maps.$font-map {
+        $desktop: map.get($sizeDef, 'desktop');
+        --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($desktop, 'font-size')})/var(--eui-f-lh-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
+        --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($desktop, 'font-size')});
     }
 
-    @each $size, $def in maps.$font-size-map {
-        --eui-f-size-#{$size}: #{$def};
-        --eui-f-size-#{$size}-compact: #{$def};
+    @include base.media(maps.$eui-bkp-tablet) {
+        @each $size, $sizeDef in maps.$font-map {
+            $tablet: map.get($sizeDef, 'tablet');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($tablet, 'font-size')})/var(--eui-f-lh-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($tablet, 'font-size')});
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-mobile-s) {
+        @each $size, $sizeDef in maps.$font-map {        
+            $mobile: map.get($sizeDef, 'mobile');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($mobile, 'font-size')})/var(--eui-f-lh-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobile, 'font-size')});
+        }
+    }
+
+    @include base.media(maps.$eui-bkp-mobile-xs) {
+        @each $size, $sizeDef in maps.$font-map {        
+            $mobilexs: map.get($sizeDef, 'mobile-xs');
+            --eui-f-#{$size}-light: normal normal var(--eui-f-w-light) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}: normal normal var(--eui-f-w-regular) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-medium: normal normal var(--eui-f-w-medium) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-semi-bold: normal normal var(--eui-f-w-semi-bold) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-#{$size}-bold: normal normal var(--eui-f-w-bold) var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')})/var(--eui-f-lh-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
+            --eui-f-s-#{$size}: var(--eui-f-s-r-#{map.get($mobilexs, 'font-size')});
+        }
     }
 
     @each $size, $def in maps.$font-line-height-map {
-        --eui-f-line-height-#{$size}: #{$def};
+        --eui-f-lh-#{$size}: #{$def};
     }
 
     @each $size, $def in maps.$font-weight-map {
-        --eui-f-weight-#{$size}: #{$def};
+        --eui-f-w-#{$size}: #{$def};
     }
 
 
@@ -269,8 +245,7 @@
     --eui-internal-icon-external-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/external.svg');
     --eui-internal-icon-chevron-down-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/chevron-down.svg');    
 
-    --eui-base-line-height: 1.5;
-    --eui-base-scale-factor: 1;
+
 
     // Animations related
     --eui-base-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 1);