@eui/styles 19.3.3-snapshot-1754667754469 → 21.0.0-alpha.2

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

@@ -23,24 +23,6 @@ $border-width-map: (
 );
 
 
-// BOX SHADOW
-
-$box-shadow-map: (
-    none: none,
-    1: (0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)),
-    2: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
-    3: (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12)),
-    4: (0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)),
-    6: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)),
-    8: (0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)),
-    9: (0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)),
-    12: (0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)),
-    16: (0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)),
-    24: (0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)),
-    card: 0px 8px 13px -3px rgba(0, 0, 0, 0.07)    
-);
-
-
 // BREAKPOINT
 
 $breakpoint-map: (
@@ -158,139 +140,285 @@ $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,
+  'primary-75': #eef2ff,
+  'primary-100': #e6edff,
+  'primary-200': #d9e3ff,
+  'primary-300': #b0c6ff,
+  'primary-400': #8cacff,
+  'primary-500': #5987ff,
+  'primary-600': #0046ff,
+  'primary-700': #0035bf,
+  'primary-800': #002a99,
+  'primary-900': #001f73,
+  'primary-950': #001959,
+
+  'secondary-25': #fffcf7,
+  'secondary-50': #fff5e5,
+  'secondary-75': #ffebcc,
+  'secondary-100': #ffe1b4,
+  'secondary-200': #ffd392,
+  'secondary-300': #ffcb7d,
+  'secondary-400': #ffbe5c,
+  'secondary-500': #fea439,
+  'secondary-600': #fc8713,
+  'secondary-700': #ed6c09,
+  'secondary-800': #c55109,
+  'secondary-900': #9e4107,
+  'secondary-950': #763105,
+
+  'neutral-25': #f9fafd,
+  'neutral-50': #eceff9,
+  'neutral-75': #d1d9f1,
+  'neutral-100': #c1ccec,
+  'neutral-200': #b0bde6,
+  'neutral-300': #9eaee1,
+  'neutral-400': #8ea1dc,
+  'neutral-500': #7c92d6,
+  'neutral-600': #6c85d1,
+  'neutral-700': #51649d,
+  'neutral-800': #41507d,
+  'neutral-900': #313c5e,
+  'neutral-950': #26324b,
+
+  'grey-25': #fafafb,
+  'grey-50': #f6f6f8,
+  'grey-75': #ededf0,
+  'grey-100': #e1e1e7,
+  'grey-200': #d4d4dc,
+  'grey-300': #b9b9c5,
+  'grey-400': #a0a0b1,
+  'grey-500': #84849b,
+  'grey-600': #696984,
+  'grey-700': #505070,
+  'grey-800': #353559,
+  'grey-900': #1c1c45,
+  '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-600': #3b62b0,
+  'info-700': #2e58ab,
+  'info-800': #1c49a4,
+  'info-900': #0d3d9e,
+  'info-950': #039,
+
+  'success-25': #f9fefc,
+  'success-50': #edfbf6,
+  'success-75': #e3f9f0,
+  'success-100': #daf6eb,
+  'success-200': #b2edd6,
+  'success-300': #8fe5c4,
+  'success-400': #5ddaa9,
+  'success-500': #05c67b,
+  'success-600': #05b26f,
+  'success-700': #049e62,
+  'success-800': #037e4e,
+  'success-900': #025f3b,
+  'success-950': #02472c,
+
+  'error-25': #fefafa,
+  'error-50': #fdefef,
+  'error-75': #fce9ea,
+  'error-100': #f5bbbe,
+  'error-200': #f09a9e,
+  'error-300': #ea6c72,
+  'error-400': #e54f57,
+  'error-500': #df232d,
+  'error-600': #cb2029,
+  'error-700': #9e1920,
+  'error-800': #7b1319,
+  'error-900': #5a0e12,
+  'error-950': #1f0506,
+
+  'warning-25': #fffaf5,
+  'warning-50': #fff3e8,
+  'warning-75': #ffeddc,
+  'warning-100': #ffdbba,
+  'warning-200': #ffc998,
+  'warning-300': #ffb16a,
+  'warning-400': #ffa14d,
+  'warning-500': #ff8a20,
+  'warning-600': #e87e1d,
+  'warning-700': #ba6517,
+  'warning-800': #8b4c11,
+  'warning-900': #68390d,
+  'warning-950': #512c0a    
+);
+
+
 $color-map: (
     branding: (
-        120: #003676,
-        110: #013C80,
-        100: #004494,
-        80: #0057BD,
-        60: #0069E6,
-        40: #0F7DFF,
-        20: #3894FF,
-        10: #61AAFF,
-        5: #8AC0FF,
-        2: #DBECFF,
-        0: #fff
+        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'),
     ),
     primary: (
-        160: #0a1f6c,
-        140: #0f2fa2,
-        120: #143fd9,
-        110: #2651eb,
-        100: #3860ed,
-        80: #5577f0,
-        60: #89a1f4,
-        40: #b1c0f8,
-        20: #d8e0fb,
-        10: #ebf3fd,
-        5: #f3f6fa,
-        0: #fff
+        160: map-get($ecl-colors, 'primary-950'),
+        140: map-get($ecl-colors, 'primary-900'),
+        120: map-get($ecl-colors, 'primary-800'),
+        110: map-get($ecl-colors, 'primary-700'),
+        100: map-get($ecl-colors, 'primary-600'),
+        80: map-get($ecl-colors, 'primary-500'),
+        60: map-get($ecl-colors, 'primary-400'),
+        40: map-get($ecl-colors, 'primary-300'),
+        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'),
     ),
     neutral: (
-        160: #131313,
-        140: #1d1d1d,
-        120: #262626,
-        110: #2b2b2b,
-        100: #303030,
-        80: #595959,
-        60: #838383,
-        40: #acacac,
-        20: #d6d6d6,
-        10: #eaeaea,
-        5: #f5f5f5,
-        3: #f9f9f9,
-        2: #fcfcfc,
-        0: #fff
+        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
     ),
-    cta: (
-        0: #fff,
-        5: #fff9ef,
-        10: #fcefdc,
-        20: #ffebcc,
-        40: #ffe1b4,
-        60: #ffd392,
-        80: #ffcb7d,
-        100: #ffbe5c,
-        110: #fea439,
-        120: #fc8713,
-        140: #c55109,
-        160: #a84304
-    ),    
     accent: (
-        160: #432105,
-        140: #734110,
-        120: #a46704,
-        110: #ce9100,
-        100: #efbc03,
-        80: #ffd617,
-        60: #ffe843,
-        40: #fff587,
-        20: #fffbc2,
-        10: #fefde8,
-        5: #fffcf7,
-        0: #fff
+        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
     ),
     info: (
-        0: #fff,
-        5: #f0f7fd,
-        10: #e3f1fc,
-        20: #c8e3f9,
-        40: #8cc5f2,
-        60: #51a6ec,
-        80: #2791e7,
-        100: #0578d6,
-        110: #046abd,
-        120: #0462ae,
-        140: #044e8b,
-        160: #033863
+        160: map-get($ecl-colors, 'info-900'),
+        140: map-get($ecl-colors, 'info-800'),
+        120: map-get($ecl-colors, 'info-700'),
+        110: map-get($ecl-colors, 'info-600'),
+        100: map-get($ecl-colors, 'info-500'),
+        80: map-get($ecl-colors, 'info-400'),
+        60: map-get($ecl-colors, 'info-300'),
+        40: map-get($ecl-colors, 'info-200'),
+        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'),
     ),
     success: (
-        160: #0e401d,
-        140: #16612b,
-        120: #1d813a,
-        110: #209141,
-        100: #24a148,
-        80: #50b46d,
-        60: #7cc791,
-        40: #a7d9b6,
-        20: #d3ecda,
-        10: #e9f6ed,
-        5: #f4faf6,
-        0: #fff
+        160: map-get($ecl-colors, 'success-950'),
+        140: map-get($ecl-colors, 'success-950'),
+        120: map-get($ecl-colors, 'success-900'),
+        110: map-get($ecl-colors, 'success-800'),
+        100: map-get($ecl-colors, 'success-700'),
+        80: map-get($ecl-colors, 'success-600'),
+        60: map-get($ecl-colors, 'success-500'),
+        40: map-get($ecl-colors, 'success-400'),
+        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'),
     ),
     warning: (
-        160: #613d07,
-        140: #925b0a,
-        120: #c27a0e,
-        110: #db890f,
-        100: #f39811,
-        80: #f5ad41,
-        60: #f8c170,
-        40: #fad6a0,
-        20: #fdeacf,
-        10: #fef5e7,
-        5: #fefaf3,
-        0: #fff
+        160: map-get($ecl-colors, 'warning-900'),
+        140: map-get($ecl-colors, 'warning-800'),
+        120: map-get($ecl-colors, 'warning-700'),
+        110: map-get($ecl-colors, 'warning-600'),
+        100: map-get($ecl-colors, 'warning-500'),
+        80: map-get($ecl-colors, 'warning-400'),
+        60: map-get($ecl-colors, 'warning-300'),
+        40: map-get($ecl-colors, 'warning-200'),
+        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'),
     ),
     danger: (
-        160: #570c10,
-        140: #831218,
-        120: #ae1820,
-        110: #c41b24,
-        100: #da1e28,
-        80: #e14b53,
-        60: #e9787e,
-        40: #f0a5a9,
-        20: #f8d2d4,
-        10: #fbe9ea,
-        5: #fdf4f4,
-        0: #fff
+        160: map-get($ecl-colors, 'error-950'),
+        140: map-get($ecl-colors, 'error-900'),
+        120: map-get($ecl-colors, 'error-800'),
+        110: map-get($ecl-colors, 'error-700'),
+        100: map-get($ecl-colors, 'error-600'),
+        80: map-get($ecl-colors, 'error-500'),
+        60: map-get($ecl-colors, 'error-400'),
+        40: map-get($ecl-colors, 'error-300'),
+        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'),
+    ),
+    cta: (
+        160: map-get($ecl-colors, 'secondary-800'),
+        140: map-get($ecl-colors, 'secondary-700'),
+        120: map-get($ecl-colors, 'secondary-600'),
+        110: map-get($ecl-colors, 'secondary-500'),
+        100: map-get($ecl-colors, 'secondary-400'),
+        80: map-get($ecl-colors, 'secondary-300'),
+        60: map-get($ecl-colors, 'secondary-200'),
+        40: map-get($ecl-colors, 'secondary-100'),
+        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'),
     )
 );
 
-
 // COLOR CONTEXT
 
 $color-context-map: (
@@ -467,6 +595,225 @@ $color-state-map: (
     )
 );
 
+// SHADOWS
+
+$ecl-shadow-color: #18274b !default;
+$ecl-shadow: (
+  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.08)),
+  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 22px 0 rgba($ecl-shadow-color, 0.1)),
+  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 12px 32px 0 rgba($ecl-shadow-color, 0.12)),
+  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 42px 0 rgba($ecl-shadow-color, 0.12)),
+  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 52px 0 rgba($ecl-shadow-color, 0.14))
+);
+
+$box-shadow-map: (
+    0: none,
+    1: map-get($ecl-shadow, 1),
+    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),
+);
+
+
+// TYPOGRAPHY
+
+$font-weight-map: (
+    'regular': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700
+);
+
+$font-map: (
+    'display': (
+        'm': (
+            'desktop': (
+                'size': 3rem,
+                'line-height': 3.5rem
+            ),
+            'tablet': (
+                'size': 2.75rem,
+                'line-height': 3.25rem
+            ),
+            'mobile': (
+                'size': 2rem,
+                'line-height': 2.25rem
+            )
+        )
+    ),    
+    'title': (
+        'xl': (
+            'desktop': (
+                'size': 2.5rem,
+                'line-height': 3rem
+            ),
+            'tablet': (
+                'size': 2rem,
+                'line-height': 2.75rem
+            ),
+            'mobile': (
+                'size': 1.75rem,
+                'line-height': 2.5rem
+            )
+        ),
+        'xs': (
+            'desktop': (
+                'size': 1.25rem,
+                'line-height': 1.75rem
+            ),
+            'tablet': (
+                'size': 1.25rem,
+                'line-height': 1.75rem
+            ),
+            'mobile': (
+                'size': 1.2rem,
+                'line-height': 1.5rem
+            )
+        ),
+        '2xs': (
+            'desktop': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),
+            'tablet': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),
+            'mobile': (
+                '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
+            )            
+        )
+    ),    
+    '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
+            )            
+        ),
+        'l': (
+            'desktop': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),            
+            'tablet': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),            
+            'mobile': (
+                '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
+            )            
+        ),
+        'm': (
+            'desktop': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),            
+            'tablet': (
+                'size': 1rem,
+                'line-height': 1.5rem
+            ),            
+            'mobile': (
+                '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
+            )            
+        ),        
+        'xl': (
+            'desktop': (
+                'size': 1.5rem,
+                'line-height': 2rem
+            ),            
+            'tablet': (
+                'size': 1.5rem,
+                'line-height': 2rem
+            ),            
+            'mobile': (
+                '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
+            )            
+        )
+    )
+);
 
 // TYPOGRAPHY