@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.3

package/dist/base/02-tokens/colors-primitive.scss

@@ -0,0 +1,582 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+
+// PRIMITIVE COLOR MAPS
+
+$color-map: (
+  '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,
+
+  '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': #171740,
+  'grey-950': #00002e,
+
+  'monochrome-25': #fbfbfb,
+  'monochrome-50': #f7f7f7,
+  'monochrome-75': #efefef,
+  'monochrome-100': #e4e4e4,
+  'monochrome-200': #d8d8d8,
+  'monochrome-300': #bfbfbf,
+  'monochrome-400': #a9a9a9,
+  'monochrome-500': #909090,
+  'monochrome-600': #777,
+  'monochrome-700': #606060,
+  'monochrome-800': #474747,
+  'monochrome-900': #313131,
+  'monochrome-950': #171717,
+  
+  'graphite-25': #F4F4F5,
+  'graphite-50': #E8E8EA,
+  'graphite-75': #D1D1D4,
+  'graphite-100': #B4B4B9,
+  'graphite-200': #8E8E94,
+  'graphite-300': #6A6A71,
+  'graphite-400': #6A6A71,
+  'graphite-500': #2C2C36,
+  'graphite-600': #24242C,
+  'graphite-700': #1E1E25,
+  'graphite-800': #18181C,
+  'graphite-900': #131318,
+  'graphite-950': #0D0D12,
+
+  // Status
+  'info-25': #f9fbfd,
+  'info-50': #f5f7fb,
+  'info-75': #ebeff7,
+  'info-100': #dee4f2,
+  'info-200': #bfcce6,
+  'info-300': #a3b6da,
+  'info-400': #859dce,
+  'info-500': #6685c2,
+  'info-600': #3b62b0,
+  'info-700': #1c49a4,
+  'info-800': #039,
+  'info-900': #00297a,
+  'info-950': #001f5c,
+
+  '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,
+);
+
+// EXTRA COLOR MAPS
+
+$color-map-extra: (
+    'red': (
+        50: #fef2f2,
+        100: #fee2e2,
+        200: #fecaca,
+        300: #fca5a5,
+        400: #f87171,
+        500: #ef4444,
+        600: #dc2626,
+        700: #b91c1c,
+        800: #991b1b,
+        900: #7f1d1d,
+        950: #450a0a,
+    ),
+    'orange': (
+        50: #fff7ed,
+        100: #ffedd5,
+        200: #fed7aa,
+        300: #fdba74,
+        400: #fb923c,
+        500: #f97316,
+        600: #ea580c,
+        700: #c2410c,
+        800: #9a3412,
+        900: #7c2d12,
+        950: #431407,
+    ),
+    
+    'amber': (
+        50: #fffbeb,
+        100: #fef3c7,
+        200: #fde68a,
+        300: #fcd34d,
+        400: #fbbf24,
+        500: #f59e0b,
+        600: #d97706,
+        700: #b45309,
+        800: #92400e,
+        900: #78350f,
+        950: #451a03,
+    ),
+    
+    'yellow': (
+        50: #fefce8,
+        100: #fef9c3,
+        200: #fef08a,
+        300: #fde047,
+        400: #facc15,
+        500: #eab308,
+        600: #ca8a04,
+        700: #a16207,
+        800: #854d0e,
+        900: #713f12,
+        950: #422006,
+    ),
+    
+    'lime': (
+        50: #f7fee7,
+        100: #ecfccb,
+        200: #d9f99d,
+        300: #bef264,
+        400: #a3e635,
+        500: #84cc16,
+        600: #65a30d,
+        700: #4d7c0f,
+        800: #3f6212,
+        900: #365314,
+        950: #1a2e05,
+    ),
+    
+    'green': (
+        50: #f0fdf4,
+        100: #dcfce7,
+        200: #bbf7d0,
+        300: #86efac,
+        400: #4ade80,
+        500: #22c55e,
+        600: #16a34a,
+        700: #15803d,
+        800: #166534,
+        900: #14532d,
+        950: #052e16,
+    ),
+
+    'emerald': (
+        50: #ecfdf5,
+        100: #d1fae5,
+        200: #a7f3d0,
+        300: #6ee7b7,
+        400: #34d399,
+        500: #10b981,
+        600: #059669,
+        700: #047857,
+        800: #065f46,
+        900: #064e3b,
+        950: #022c22,
+    ),    
+
+    'teal': (
+        50: #f0fdfa,
+        100: #ccfbf1,
+        200: #99f6e4,
+        300: #5eead4,
+        400: #2dd4bf,
+        500: #14b8a6,
+        600: #0d9488,
+        700: #0f766e,
+        800: #115e59,
+        900: #134e4a,
+        950: #042f2e,
+    ),    
+
+    'cyan': (
+        50: #ecfeff,
+        100: #cffafe,
+        200: #a5f3fc,
+        300: #67e8f9,
+        400: #22d3ee,
+        500: #06b6d4,
+        600: #0891b2,
+        700: #0e7490,
+        800: #155e75,
+        900: #164e63,
+        950: #083344,
+    ),    
+    
+    'sky': (
+        50: #f0f9ff,
+        100: #e0f2fe,
+        200: #bae6fd,
+        300: #7dd3fc,
+        400: #38bdf8,
+        500: #0ea5e9,
+        600: #0284c7,
+        700: #0369a1,
+        800: #075985,
+        900: #0c4a6e,
+        950: #082f49,
+    ),
+    'blue': (
+        50: #eff6ff,
+        100: #dbeafe,
+        200: #bfdbfe,
+        300: #93c5fd,
+        400: #60a5fa,
+        500: #3b82f6,
+        600: #2563eb,
+        700: #1d4ed8,
+        800: #1e40af,
+        900: #1e3a8a,
+        950: #172554,
+    ),    
+    'indigo': (
+        50: #eef2ff,
+        100: #e0e7ff,
+        200: #c7d2fe,
+        300: #a5b4fc,
+        400: #818cf8,
+        500: #6366f1,
+        600: #4f46e5,
+        700: #4338ca,
+        800: #3730a3,
+        900: #312e81,
+        950: #1e1b4b,
+    ),
+    'violet': (
+        50: #f5f3ff,
+        100: #ede9fe,
+        200: #ddd6fe,
+        300: #c4b5fd,
+        400: #a78bfa,
+        500: #8b5cf6,
+        600: #7c3aed,
+        700: #6d28d9,
+        800: #5b21b6,
+        900: #4c1d95,
+        950: #2e1065,
+    ),    
+    
+    'purple': (
+        50: #faf5ff,
+        100: #f3e8ff,
+        200: #e9d5ff,
+        300: #d8b4fe,
+        400: #c084fc,
+        500: #a855f7,
+        600: #9333ea,
+        700: #7e22ce,
+        800: #6b21a8,
+        900: #581c87,
+        950: #3b0764,
+    ),    
+    
+    'fuchsia': (
+        50: #fdf4ff,
+        100: #fae8ff,
+        200: #f5d0fe,
+        300: #f0abfc,
+        400: #e879f9,
+        500: #d946ef,
+        600: #c026d3,
+        700: #a21caf,
+        800: #86198f,
+        900: #701a75,
+        950: #4a044e,
+    ),
+    
+    'pink': (
+        50: #fdf2f8,
+        100: #fce7f3,
+        200: #fbcfe8,
+        300: #f9a8d4,
+        400: #f472b6,
+        500: #ec4899,
+        600: #db2777,
+        700: #be185d,
+        800: #9d174d,
+        900: #831843,
+        950: #500724,
+    ),
+    
+    'rose': (
+        50: #fff1f2,
+        100: #ffe4e6,
+        200: #fecdd3,
+        300: #fda4af,
+        400: #fb7185,
+        500: #f43f5e,
+        600: #e11d48,
+        700: #be123c,
+        800: #9f1239,
+        900: #881337,
+        950: #4c0519,
+    ),
+
+    'ecl-blue-navy': (
+        50: #f5f5fa,
+        100: #f0f0f8,
+        200: #d9d9ec,
+        300: #bfbfe0,
+        400: #a0a0d1,
+        500: #8c8cc7,
+        600: #4545a4,
+        700: #000083,
+        800: #000069,
+        900: #00002e,
+        950: base.shade_color(#00002e, 2%),
+    ),
+
+    'ecl-blue-electric': (
+        50: #e6f8fd,
+        100: #d9f5fb,
+        200: #b1eaf7,
+        300: #5bd3ef,
+        400: #03bbe6,
+        500: #03a8cf,
+        600: #028cad,
+        700: #02708a,
+        800: #015467,
+        900: #014959,
+        950: base.shade_color(#014959, 5%),
+    ),
+
+    'ecl-green': (
+        50: #e6f9f2,
+        100: #daf6eb,
+        200: #b2edd6,
+        300: #8fe5c4,
+        400: #5ddaa9,
+        500: #05c67b,
+        600: #05b26f,
+        700: #049e62,
+        800: #04955c,
+        900: #03774a,
+        950: base.shade_color(#03774a, 5%),
+    ),
+
+    'ecl-green-dark': (
+        50: #e6f0f0,
+        100: #d9e8e8,
+        200: #b0d0d0,
+        300: #8cbaba,
+        400: #599c9c,
+        500: #066,
+        600: #005c5c,
+        700: #005252,
+        800: #004d4d,
+        900: #003d3d,
+        950: base.shade_color(#003d3d, 5%),
+    ),
+
+    'ecl-orange': (
+        50: #fff3e9,
+        100: #ffe9d6,
+        200: #ffdbba,
+        300: #ffc998,
+        400: #ffb16a,
+        500: #ff8a20,
+        600: #e87e1d,
+        700: #b56217,
+        800: #8c4c12,
+        900: #6b3a0d,
+        950: base.shade_color(#6b3a0d, 5%),
+    ),
+
+    'ecl-purple': (
+        50: #f4effb,
+        100: #ebe1f8,
+        200: #ddcdf3,
+        300: #ccb5ee,
+        400: #b594e6,
+        500: #905fd9,
+        600: #8356c5,
+        700: #66439a,
+        800: #4f3477,
+        900: #3c285b,
+        950: base.shade_color(#3c285b, 5%),
+    ),
+
+    'ecl-blue-ocean': (
+        50: #e8f8f6,
+        100: #dcf5f2,
+        200: #b7eae4,
+        300: #97e0d8,
+        400: #69d2c6,
+        500: #18baa8,
+        600: #16a797,
+        700: #139586,
+        800: #128c7e,
+        900: #0e7065,
+        950: base.shade_color(#0e7065, 5%),
+    ),
+
+    'ecl-green-lemon': (
+        50: #fafcee,
+        100: #f7fbe5,
+        200: #eff6c9,
+        300: #e8f2b0,
+        400: #ddec8d,
+        500: #cbe250,
+        600: #b7cb48,
+        700: #a2b540,
+        800: #98aa3c,
+        900: #7a8830,
+        950: base.shade_color(#7a8830, 15%),
+    ),
+
+    'ecl-green-pine': (
+        50: #eff3f3,
+        100: #dae2e4,
+        200: #ced8db,
+        300: #b6c6ca,
+        400: #94abb1,
+        500: #809ba2,
+        600: #445c63,
+        700: #0a3f4d,
+        800: #08323e,
+        900: #082f3a,
+        950: base.shade_color(#082f3a, 5%),
+    ),
+
+    'ecl-red-crayola': (
+        50: #fcebee,
+        100: #f6c1ca,
+        200: #f2a3b1,
+        300: #ec798d,
+        400: #e95f77,
+        500: #e33755,
+        600: #cf324d,
+        700: #a1273c,
+        800: #7d1e2f,
+        900: #5f1724,
+        950: base.shade_color(#5f1724, 5%),
+    ),
+
+    'ecl-warm-grey': (
+        50: #f6f4f3,
+        100: #e2dcda,
+        200: #d3cbc8,
+        300: #bfb4af,
+        400: #b3a59f,
+        500: #a08f87,
+        600: #92827b,
+        700: #726660,
+        800: #584f4a,
+        900: #433c39,
+        950: base.shade_color(#433c39, 5%),
+    ),
+
+    'ecl-yellow-gold': (
+        50: #fffae6,
+        100: #fff3c2,
+        200: #ffea91,
+        300: #ffe05e,
+        400: #ffd72e,
+        500: #ffce00,
+        600: #d9af00,
+        700: #b59200,
+        800: #917500,
+        900: #735d00,
+        950: base.shade_color(#735d00, 5%),
+    ),
+
+    'ecl-orange-abricot': (
+        50: #fff9ed,
+        100: #fff1d4,
+        200: #ffdfa9,
+        300: #ffbe5c,
+        400: #fea439,
+        500: #fc8713,
+        600: #ed6c09,
+        700: #c55109,
+        800: #9c4010,
+        900: #7e3610,
+        950: base.shade_color(#7e3610, 5%),
+    ),
+
+    'ecl-purple-violet': (
+        50: #f3f1ff,
+        100: #dbd4ff,
+        200: #cabfff,
+        300: #b1a1ff,
+        400: #a28fff,
+        500: #8b73ff,
+        600: #7e69e8,
+        700: #6352b5,
+        800: #4c3f8c,
+        900: #3a306b,
+        950: base.shade_color(#3a306b, 5%),
+    ),
+
+    'ecl-red-tomato': (
+        50: #fff0ed,
+        100: #ffd0c7,
+        200: #ffbaac,
+        300: #ff9a86,
+        400: #ff866e,
+        500: #ff684a,
+        600: #e85f43,
+        700: #b54a35,
+        800: #8c3929,
+        900: #6b2c1f,
+        950: base.shade_color(#6b2c1f, 5%),
+    ),
+);

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

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './colors-semantic' as semantic;
+
+$color-map: (
+    branding: base.map-reverse(map.get(semantic.$color-map, 'branding')),
+    primary: base.map-reverse(map.get(semantic.$color-map, 'primary')),
+    secondary: base.map-reverse(map.get(semantic.$color-map, 'neutral-dark')),
+    neutral: base.map-reverse(map.get(semantic.$color-map, 'neutral-dark')),      
+    neutral-dark: base.map-reverse(map.get(semantic.$color-map, 'neutral-dark')),      
+    cta: base.map-reverse(map.get(semantic.$color-map, 'cta')),
+    highlight: base.map-reverse(map.get(semantic.$color-map, 'highlight')),
+    info: base.map-reverse(map.get(semantic.$color-map, 'info')),
+    success: base.map-reverse(map.get(semantic.$color-map, 'success')),
+    warning: base.map-reverse(map.get(semantic.$color-map, 'warning')),
+    danger: base.map-reverse(map.get(semantic.$color-map, 'danger')),
+    critical: base.map-reverse(map.get(semantic.$color-map, 'critical')),
+);
+
+$color-map-contrast: (
+    branding: semantic.get-contrast-map($color-map, 'branding'),
+    primary: semantic.get-contrast-map($color-map, 'primary'),
+    secondary: semantic.get-contrast-map($color-map, 'secondary'),
+    neutral: semantic.get-contrast-map($color-map, 'neutral'),
+    neutral-dark: semantic.get-contrast-map($color-map, 'neutral-dark'),
+    info: semantic.get-contrast-map($color-map, 'info'),
+    success: semantic.get-contrast-map($color-map, 'success'),
+    warning: semantic.get-contrast-map($color-map, 'warning'),
+    danger: semantic.get-contrast-map($color-map, 'danger'),
+    critical: semantic.get-contrast-map($color-map, 'critical'),
+    cta: semantic.get-contrast-map($color-map, 'cta'),
+    highlight: semantic.get-contrast-map($color-map, 'highlight'),
+);
+
+$color-map-all: map.deep-merge($color-map, $color-map-contrast);

package/dist/base/02-tokens/colors-semantic-high-contrast.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+@use './colors-semantic' as semantic;
+
+$color-map: (
+    branding: base.map-shift-colors(map.get(semantic.$color-map, 'branding')),
+    primary: base.map-shift-colors(map.get(semantic.$color-map, 'primary')),
+    secondary: base.map-shift-colors(map.get(semantic.$color-map, 'secondary')),
+    neutral: base.map-shift-colors(map.get(semantic.$color-map, 'neutral')),      
+    neutral-dark: base.map-shift-colors(map.get(semantic.$color-map, 'neutral-dark')),      
+    cta: base.map-shift-colors(map.get(semantic.$color-map, 'cta')),
+    highlight: base.map-shift-colors(map.get(semantic.$color-map, 'highlight')),
+    info: base.map-shift-colors(map.get(semantic.$color-map, 'info')),
+    success: base.map-shift-colors(map.get(semantic.$color-map, 'success')),
+    warning: base.map-shift-colors(map.get(semantic.$color-map, 'warning')),
+    danger: base.map-shift-colors(map.get(semantic.$color-map, 'danger')),
+    critical: base.map-shift-colors(map.get(semantic.$color-map, 'critical')),
+);
+
+$color-map-contrast: (
+    branding: semantic.get-contrast-map($color-map, 'branding'),
+    primary: semantic.get-contrast-map($color-map, 'primary'),
+    secondary: semantic.get-contrast-map($color-map, 'secondary'),
+    neutral: semantic.get-contrast-map($color-map, 'neutral'),
+    neutral-dark: semantic.get-contrast-map($color-map, 'neutral-dark'),
+    info: semantic.get-contrast-map($color-map, 'info'),
+    success: semantic.get-contrast-map($color-map, 'success'),
+    warning: semantic.get-contrast-map($color-map, 'warning'),
+    danger: semantic.get-contrast-map($color-map, 'danger'),
+    critical: semantic.get-contrast-map($color-map, 'critical'),
+    cta: semantic.get-contrast-map($color-map, 'cta'),
+    highlight: semantic.get-contrast-map($color-map, 'highlight'),
+);
+
+$color-map-all: map.deep-merge($color-map, $color-map-contrast);