@eui/styles 21.0.0-next.9 → 21.0.0-rc.2

package/dist/base/02-tokens/colors-extra-palettes.scss

@@ -0,0 +1,512 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+
+$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: #ffdbba,
+        200: #ffc998,
+        300: #ffb16a,
+        400: #ffa14d,
+        500: #ff8a20,
+        600: #e87e1d,
+        700: #b56217,
+        800: #8c4c12,
+        900: #6b3a0d,
+        950: base.shade_color(#6b3a0d, 5%),
+    ),
+
+    'ecl-purple': (
+        50: #f4effb,
+        100: #ddcdf3,
+        200: #ccb5ee,
+        300: #b594e6,
+        400: #a67fe1,
+        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%),
+    ),
+);
+
+@function getColorContextMap($palette) {
+    @return (
+        base: map.get($palette, 500), 
+        default: map.get($palette, 600), 
+        lighter: map.get($palette, 400), 
+        light: map.get($palette, 500), 
+        dark: map.get($palette, 700), 
+        darker: map.get($palette, 800), 
+        surface-light: map.get($palette, 100), 
+        on-surface-light: map.get($palette, 950), 
+        surface-light-hover: map.get($palette, 200), 
+        on-surface-light-hover: map.get($palette, 900), 
+        surface-medium: map.get($palette, 300), 
+        on-surface-medium: map.get($palette, 900), 
+        surface-medium-hover: map.get($palette, 400), 
+        on-surface-medium-hover: map.get($palette, 950),     
+        surface: map.get($palette, 400), 
+        on-surface: base.getContrast(map.get($palette, 400)),   
+        surface-hover: map.get($palette, 600), 
+        on-surface-hover: base.getContrast(map.get($palette, 600)), 
+        surface-dark: map.get($palette, 700), 
+        on-surface-dark: base.getContrast(map.get($palette, 700)), 
+        border: map.get($palette, 500), 
+        border-light: map.get($palette, 300), 
+        border-lighter: map.get($palette, 200),     
+    );
+}
+
+$color-context-map-extra: (
+    'red': getColorContextMap(map.get($color-map-extra, 'red')), 
+    'orange': getColorContextMap(map.get($color-map-extra, 'orange')), 
+    'amber': getColorContextMap(map.get($color-map-extra, 'amber')), 
+    'yellow': getColorContextMap(map.get($color-map-extra, 'yellow')), 
+    'lime': getColorContextMap(map.get($color-map-extra, 'lime')), 
+    'green': getColorContextMap(map.get($color-map-extra, 'green')), 
+    'emerald': getColorContextMap(map.get($color-map-extra, 'emerald')), 
+    'teal': getColorContextMap(map.get($color-map-extra, 'teal')), 
+    'cyan': getColorContextMap(map.get($color-map-extra, 'cyan')), 
+    'sky': getColorContextMap(map.get($color-map-extra, 'sky')), 
+    'blue': getColorContextMap(map.get($color-map-extra, 'blue')), 
+    'indigo': getColorContextMap(map.get($color-map-extra, 'indigo')), 
+    'violet': getColorContextMap(map.get($color-map-extra, 'violet')), 
+    'purple': getColorContextMap(map.get($color-map-extra, 'purple')), 
+    'fuchsia': getColorContextMap(map.get($color-map-extra, 'fuchsia')), 
+    'pink': getColorContextMap(map.get($color-map-extra, 'pink')), 
+    'rose': getColorContextMap(map.get($color-map-extra, 'rose')), 
+    
+    'ecl-blue-navy': getColorContextMap(map.get($color-map-extra, 'ecl-blue-navy')), 
+    'ecl-blue-electric': getColorContextMap(map.get($color-map-extra, 'ecl-blue-electric')), 
+    'ecl-blue-ocean': getColorContextMap(map.get($color-map-extra, 'ecl-blue-ocean')), 
+    'ecl-green': getColorContextMap(map.get($color-map-extra, 'ecl-green')), 
+    'ecl-green-dark': getColorContextMap(map.get($color-map-extra, 'ecl-green-dark')), 
+    'ecl-orange': getColorContextMap(map.get($color-map-extra, 'ecl-orange')), 
+    'ecl-purple': getColorContextMap(map.get($color-map-extra, 'ecl-purple')), 
+    'ecl-green-lemon': getColorContextMap(map.get($color-map-extra, 'ecl-green-lemon')), 
+    'ecl-green-pine': getColorContextMap(map.get($color-map-extra, 'ecl-green-pine')), 
+    'ecl-red-crayola': getColorContextMap(map.get($color-map-extra, 'ecl-red-crayola')), 
+    'ecl-yellow-gold': getColorContextMap(map.get($color-map-extra, 'ecl-yellow-gold')), 
+    'ecl-orange-abricot': getColorContextMap(map.get($color-map-extra, 'ecl-orange-abricot')), 
+    'ecl-purple-violet': getColorContextMap(map.get($color-map-extra, 'ecl-purple-violet')), 
+    'ecl-red-tomato': getColorContextMap(map.get($color-map-extra, 'ecl-red-tomato')), 
+);