@eui/eds-styles 22.0.0-alpha.4 → 22.0.0-alpha.40

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

@@ -1,770 +1,75 @@
 @use 'sass:map';
-@use 'sass:color';
-@use '../01-base/' as base;
+@use 'sass:list';
+@use 'sass:string';
+@use './ecl/primitives/color' as ecl-color;
+@use './ecl/primitives/color-domain' as ecl-color-domain;
 
 // PRIMITIVE COLOR MAPS
-
-$color-map: (
-    'european-blue-25': #f7f9ff,
-    'european-blue-50': #f2f6ff,
-    'european-blue-75': #eef2ff,
-    'european-blue-100': #e6edff,
-    'european-blue-200': #d9e3ff,
-    'european-blue-300': #b0c6ff,
-    'european-blue-400': #8cacff,
-    'european-blue-500': #5987ff,
-    'european-blue-600': #0046ff,
-    'european-blue-700': #0035bf,
-    'european-blue-800': #002a99,
-    'european-blue-900': #001f73,
-    'european-blue-950': #001959,
-
-    'silver-fog-0': #fff,
-    'silver-fog-25': #fafafb,
-    'silver-fog-50': #f6f6f8,
-    'silver-fog-75': #ededf0,
-    'silver-fog-100': #e1e1e7,
-    'silver-fog-200': #d4d4dc,
-    'silver-fog-300': #b9b9c5,
-    'silver-fog-400': #a0a0b1,
-    'silver-fog-500': #84849b,
-    'silver-fog-600': #696984,
-    'silver-fog-700': #505070,
-    'silver-fog-800': #353559,
-    'silver-fog-900': #171740,
-    'silver-fog-950': #00002e,
-    'silver-fog-1000': #000,
-
-    'graphite-0': #fff,
-    'graphite-25': #F4F4F5,
-    'graphite-50': #E8E8EA,
-    'graphite-75': #D1D1D4,
-    'graphite-100': #B4B4B9,
-    'graphite-200': #8E8E94,
-    'graphite-300': #6A6A71,
-    'graphite-400': #4E4E56,
-    'graphite-500': #2C2C36,
-    'graphite-600': #24242C,
-    'graphite-700': #1E1E25,
-    'graphite-800': #18181C,
-    'graphite-900': #131318,
-    'graphite-950': #0D0D12,
-    'graphite-1000': #000,
-
-    'sunrise-orange-25': #fffcf7,
-    'sunrise-orange-50': #fff5e5,
-    'sunrise-orange-75': #ffebcc,
-    'sunrise-orange-100': #ffe1b4,
-    'sunrise-orange-200': #ffd392,
-    'sunrise-orange-300': #ffcb7d,
-    'sunrise-orange-400': #ffbe5c,
-    'sunrise-orange-500': #fea439,
-    'sunrise-orange-600': #fc8713,
-    'sunrise-orange-700': #ed6c09,
-    'sunrise-orange-800': #c55109,
-    'sunrise-orange-900': #9e4107,
-    'sunrise-orange-950': #763105,
-
-    'red-25': #fefafa,
-    'red-50': #fdefef,
-    'red-75': #fce9ea,
-    'red-100': #f5bbbe,
-    'red-200': #f09a9e,
-    'red-300': #ea6c72,
-    'red-400': #e54f57,
-    'red-500': #df232d,
-    'red-600': #cb2029,
-    'red-700': #9e1920,
-    'red-800': #7b1319,
-    'red-900': #5a0e12,
-    'red-950': #1f0506,
-
-    'orange-25': #fffaf5,
-    'orange-50': #fff3e8,
-    'orange-75': #ffeddc,
-    'orange-100': #ffdbba,
-    'orange-200': #ffc998,
-    'orange-300': #ffb16a,
-    'orange-400': #ffa14d,
-    'orange-500': #ff8a20,
-    'orange-600': #e87e1d,
-    'orange-700': #ba6517,
-    'orange-800': #8b4c11,
-    'orange-900': #68390d,
-    'orange-950': #512c0a,
-
-    'blue-25': #f9fbfd,
-    'blue-50': #f5f7fb,
-    'blue-75': #ebeff7,
-    'blue-100': #dee4f2,
-    'blue-200': #bfcce6,
-    'blue-300': #a3b6da,
-    'blue-400': #859dce,
-    'blue-500': #6685c2,
-    'blue-600': #3b62b0,
-    'blue-700': #1c49a4,
-    'blue-800': #039,
-    'blue-900': #00297a,
-    'blue-950': #001f5c,
-
-    'green-25': #f9fefc,
-    'green-50': #edfbf6,
-    'green-75': #e3f9f0,
-    'green-100': #daf6eb,
-    'green-200': #b2edd6,
-    'green-300': #8fe5c4,
-    'green-400': #5ddaa9,
-    'green-500': #05c67b,
-    'green-600': #05b26f,
-    'green-700': #049e62,
-    'green-800': #037e4e,
-    'green-900': #025f3b,
-    'green-950': #02472c,
-
-    'alpha-silver-fog-0-0': rgba(255, 255, 255, 0.0),
-    'alpha-silver-fog-0-8': rgba(255, 255, 255, 0.08),
-    'alpha-silver-fog-0-10': rgba(255, 255, 255, 0.1),
-    'alpha-silver-fog-0-12': rgba(255, 255, 255, 0.12),
-    'alpha-silver-fog-0-14': rgba(255, 255, 255, 0.14),
-    'alpha-silver-fog-0-20': rgba(255, 255, 255, 0.2),
-    'alpha-silver-fog-0-30': rgba(255, 255, 255, 0.3),
-    'alpha-silver-fog-0-40': rgba(255, 255, 255, 0.4),
-    'alpha-silver-fog-0-50': rgba(255, 255, 255, 0.5),
-    'alpha-silver-fog-0-60': rgba(255, 255, 255, 0.6),
-    'alpha-silver-fog-0-70': rgba(255, 255, 255, 0.7),
-    'alpha-silver-fog-0-80': rgba(255, 255, 255, 0.8),
-    'alpha-silver-fog-0-90': rgba(255, 255, 255, 0.9),
-    'alpha-silver-fog-950-0': rgba(0, 0, 46, 0.0),
-    'alpha-silver-fog-950-8': rgba(0, 0, 46, 0.08),
-    'alpha-silver-fog-950-10': rgba(0, 0, 46, 0.1),
-    'alpha-silver-fog-950-12': rgba(0, 0, 46, 0.12),
-    'alpha-silver-fog-950-14': rgba(0, 0, 46, 0.14),
-    'alpha-silver-fog-950-20': rgba(0, 0, 46, 0.2),
-    'alpha-silver-fog-950-30': rgba(0, 0, 46, 0.3),
-    'alpha-silver-fog-950-40': rgba(0, 0, 46, 0.4),
-    'alpha-silver-fog-950-50': rgba(0, 0, 46, 0.5),
-    'alpha-silver-fog-950-60': rgba(0, 0, 46, 0.6),
-    'alpha-silver-fog-950-70': rgba(0, 0, 46, 0.7),
-    'alpha-silver-fog-950-80': rgba(0, 0, 46, 0.8),
-    'alpha-silver-fog-950-90': rgba(0, 0, 46, 0.9),
-
-    'alpha-graphite-0-0': rgba(255, 255, 255, 0.0),
-    'alpha-graphite-0-8': rgba(255, 255, 255, 0.08),
-    'alpha-graphite-0-10': rgba(255, 255, 255, 0.1),
-    'alpha-graphite-0-12': rgba(255, 255, 255, 0.12),
-    'alpha-graphite-0-14': rgba(255, 255, 255, 0.14),
-    'alpha-graphite-0-20': rgba(255, 255, 255, 0.2),
-    'alpha-graphite-0-30': rgba(255, 255, 255, 0.3),
-    'alpha-graphite-0-40': rgba(255, 255, 255, 0.4),
-    'alpha-graphite-0-50': rgba(255, 255, 255, 0.5),
-    'alpha-graphite-0-60': rgba(255, 255, 255, 0.6),
-    'alpha-graphite-0-70': rgba(255, 255, 255, 0.7),
-    'alpha-graphite-0-80': rgba(255, 255, 255, 0.8),
-    'alpha-graphite-0-90': rgba(255, 255, 255, 0.9),
-    'alpha-graphite-950-0': rgba(13, 13, 18, 0.0),
-    'alpha-graphite-950-8': rgba(13, 13, 18, 0.08),
-    'alpha-graphite-950-10': rgba(13, 13, 18, 0.1),
-    'alpha-graphite-950-12': rgba(13, 13, 18, 0.12),
-    'alpha-graphite-950-14': rgba(13, 13, 18, 0.14),
-    'alpha-graphite-950-20': rgba(13, 13, 18, 0.2),
-    'alpha-graphite-950-30': rgba(13, 13, 18, 0.3),
-    'alpha-graphite-950-40': rgba(13, 13, 18, 0.4),
-    'alpha-graphite-950-50': rgba(13, 13, 18, 0.5),
-    'alpha-graphite-950-60': rgba(13, 13, 18, 0.6),
-    'alpha-graphite-950-70': rgba(13, 13, 18, 0.7),
-    'alpha-graphite-950-80': rgba(13, 13, 18, 0.8),
-    'alpha-graphite-950-90': rgba(13, 13, 18, 0.9),
-
-    'cm-blue-navy-50': #f5f5fa,
-    'cm-blue-navy-100': #f0f0f8,
-    'cm-blue-navy-200': #d9d9ec,
-    'cm-blue-navy-300': #bfbfe0,
-    'cm-blue-navy-400': #a0a0d1,
-    'cm-blue-navy-500': #8c8cc7,
-    'cm-blue-navy-600': #4545a4,
-    'cm-blue-navy-700': #000083,
-    'cm-blue-navy-800': #000069,
-    'cm-blue-navy-900': #00002e,
-    'cm-blue-navy-950': base.shade_color(#00002e, 1%),
-
-    'cm-blue-electric-50': #e6f8fd,
-    'cm-blue-electric-100': #d9f5fb,
-    'cm-blue-electric-200': #b1eaf7,
-    'cm-blue-electric-300': #5bd3ef,
-    'cm-blue-electric-400': #03bbe6,
-    'cm-blue-electric-500': #03a8cf,
-    'cm-blue-electric-600': #028cad,
-    'cm-blue-electric-700': #02708a,
-    'cm-blue-electric-800': #015467,
-    'cm-blue-electric-900': #014959,
-    'cm-blue-electric-950': base.shade_color(#014959, 5%),
-
-    'cm-green-50': #e6f9f2,
-    'cm-green-100': #daf6eb,
-    'cm-green-200': #b2edd6,
-    'cm-green-300': #8fe5c4,
-    'cm-green-400': #5ddaa9,
-    'cm-green-500': #05c67b,
-    'cm-green-600': #05b26f,
-    'cm-green-700': #049e62,
-    'cm-green-800': #04955c,
-    'cm-green-900': #03774a,
-    'cm-green-950': base.shade_color(#03774a, 5%),
-
-    'cm-green-dark-50': #e6f0f0,
-    'cm-green-dark-100': #d9e8e8,
-    'cm-green-dark-200': #b0d0d0,
-    'cm-green-dark-300': #8cbaba,
-    'cm-green-dark-400': #599c9c,
-    'cm-green-dark-500': #066,
-    'cm-green-dark-600': #005c5c,
-    'cm-green-dark-700': #005252,
-    'cm-green-dark-800': #004d4d,
-    'cm-green-dark-900': #003d3d,
-    'cm-green-dark-950': base.shade_color(#003d3d, 5%),
-
-    'cm-orange-50': #fff3e9,
-    'cm-orange-100': #ffe9d6,
-    'cm-orange-200': #ffdbba,
-    'cm-orange-300': #ffc998,
-    'cm-orange-400': #ffb16a,
-    'cm-orange-500': #ff8a20,
-    'cm-orange-600': #e87e1d,
-    'cm-orange-700': #b56217,
-    'cm-orange-800': #8c4c12,
-    'cm-orange-900': #6b3a0d,
-    'cm-orange-950': base.shade_color(#6b3a0d, 5%),
-
-    'cm-purple-50': #f4effb,
-    'cm-purple-100': #ebe1f8,
-    'cm-purple-200': #ddcdf3,
-    'cm-purple-300': #ccb5ee,
-    'cm-purple-400': #b594e6,
-    'cm-purple-500': #905fd9,
-    'cm-purple-600': #8356c5,
-    'cm-purple-700': #66439a,
-    'cm-purple-800': #4f3477,
-    'cm-purple-900': #3c285b,
-    'cm-purple-950': base.shade_color(#3c285b, 5%),
-
-    'cm-blue-ocean-50': #e8f8f6,
-    'cm-blue-ocean-100': #dcf5f2,
-    'cm-blue-ocean-200': #b7eae4,
-    'cm-blue-ocean-300': #97e0d8,
-    'cm-blue-ocean-400': #69d2c6,
-    'cm-blue-ocean-500': #18baa8,
-    'cm-blue-ocean-600': #16a797,
-    'cm-blue-ocean-700': #139586,
-    'cm-blue-ocean-800': #128c7e,
-    'cm-blue-ocean-900': #0e7065,
-    'cm-blue-ocean-950': base.shade_color(#0e7065, 5%),
-
-    'cm-green-lemon-50': #fafcee,
-    'cm-green-lemon-100': #f7fbe5,
-    'cm-green-lemon-200': #eff6c9,
-    'cm-green-lemon-300': #e8f2b0,
-    'cm-green-lemon-400': #ddec8d,
-    'cm-green-lemon-500': #cbe250,
-    'cm-green-lemon-600': #b7cb48,
-    'cm-green-lemon-700': #a2b540,
-    'cm-green-lemon-800': #98aa3c,
-    'cm-green-lemon-900': #7a8830,
-    'cm-green-lemon-950': base.shade_color(#7a8830, 15%),
-
-    'cm-green-pine-50': #eff3f3,
-    'cm-green-pine-100': #dae2e4,
-    'cm-green-pine-200': #ced8db,
-    'cm-green-pine-300': #b6c6ca,
-    'cm-green-pine-400': #94abb1,
-    'cm-green-pine-500': #809ba2,
-    'cm-green-pine-600': #445c63,
-    'cm-green-pine-700': #0a3f4d,
-    'cm-green-pine-800': #08323e,
-    'cm-green-pine-900': #082f3a,
-    'cm-green-pine-950': base.shade_color(#082f3a, 5%),
-
-    'cm-red-crayola-50': #fcebee,
-    'cm-red-crayola-100': #f6c1ca,
-    'cm-red-crayola-200': #f2a3b1,
-    'cm-red-crayola-300': #ec798d,
-    'cm-red-crayola-400': #e95f77,
-    'cm-red-crayola-500': #e33755,
-    'cm-red-crayola-600': #cf324d,
-    'cm-red-crayola-700': #a1273c,
-    'cm-red-crayola-800': #7d1e2f,
-    'cm-red-crayola-900': #5f1724,
-    'cm-red-crayola-950': base.shade_color(#5f1724, 5%),
-
-    'cm-warm-grey-50': #f6f4f3,
-    'cm-warm-grey-100': #e2dcda,
-    'cm-warm-grey-200': #d3cbc8,
-    'cm-warm-grey-300': #bfb4af,
-    'cm-warm-grey-400': #b3a59f,
-    'cm-warm-grey-500': #a08f87,
-    'cm-warm-grey-600': #92827b,
-    'cm-warm-grey-700': #726660,
-    'cm-warm-grey-800': #584f4a,
-    'cm-warm-grey-900': #433c39,
-    'cm-warm-grey-950': base.shade_color(#433c39, 5%),
-
-    'cm-yellow-gold-50': #fffae6,
-    'cm-yellow-gold-100': #fff3c2,
-    'cm-yellow-gold-200': #ffea91,
-    'cm-yellow-gold-300': #ffe05e,
-    'cm-yellow-gold-400': #ffd72e,
-    'cm-yellow-gold-500': #ffce00,
-    'cm-yellow-gold-600': #d9af00,
-    'cm-yellow-gold-700': #b59200,
-    'cm-yellow-gold-800': #917500,
-    'cm-yellow-gold-900': #735d00,
-    'cm-yellow-gold-950': base.shade_color(#735d00, 5%),
-
-    'cm-orange-abricot-50': #fff9ed,
-    'cm-orange-abricot-100': #fff1d4,
-    'cm-orange-abricot-200': #ffdfa9,
-    'cm-orange-abricot-300': #ffbe5c,
-    'cm-orange-abricot-400': #fea439,
-    'cm-orange-abricot-500': #fc8713,
-    'cm-orange-abricot-600': #ed6c09,
-    'cm-orange-abricot-700': #c55109,
-    'cm-orange-abricot-800': #9c4010,
-    'cm-orange-abricot-900': #7e3610,
-    'cm-orange-abricot-950': base.shade_color(#7e3610, 5%),
-
-    'cm-purple-violet-50': #f3f1ff,
-    'cm-purple-violet-100': #dbd4ff,
-    'cm-purple-violet-200': #cabfff,
-    'cm-purple-violet-300': #b1a1ff,
-    'cm-purple-violet-400': #a28fff,
-    'cm-purple-violet-500': #8b73ff,
-    'cm-purple-violet-600': #7e69e8,
-    'cm-purple-violet-700': #6352b5,
-    'cm-purple-violet-800': #4c3f8c,
-    'cm-purple-violet-900': #3a306b,
-    'cm-purple-violet-950': base.shade_color(#3a306b, 5%),
-
-    'cm-red-tomato-50': #fff0ed,
-    'cm-red-tomato-100': #ffd0c7,
-    'cm-red-tomato-200': #ffbaac,
-    'cm-red-tomato-300': #ff9a86,
-    'cm-red-tomato-400': #ff866e,
-    'cm-red-tomato-500': #ff684a,
-    'cm-red-tomato-600': #e85f43,
-    'cm-red-tomato-700': #b54a35,
-    'cm-red-tomato-800': #8c3929,
-    'cm-red-tomato-900': #6b2c1f,
-    'cm-red-tomato-950': base.shade_color(#6b2c1f, 5%),
-);
-
-
-$color-map-alt: (
-    european-blue: (
-        950: map.get($color-map, 'european-blue-950'),
-        900: map.get($color-map, 'european-blue-900'),
-        800: map.get($color-map, 'european-blue-800'),
-        700: map.get($color-map, 'european-blue-700'),
-        600: map.get($color-map, 'european-blue-600'),
-        500: map.get($color-map, 'european-blue-500'),
-        400: map.get($color-map, 'european-blue-400'),
-        300: map.get($color-map, 'european-blue-300'),
-        200: map.get($color-map, 'european-blue-200'),
-        100: map.get($color-map, 'european-blue-100'),
-        75: map.get($color-map, 'european-blue-75'),
-        50: map.get($color-map, 'european-blue-50'),
-        25: map.get($color-map, 'european-blue-25'),
-    ),
-    sunrise-orange: (
-        950: map.get($color-map, 'sunrise-orange-950'),
-        900: map.get($color-map, 'sunrise-orange-900'),
-        800: map.get($color-map, 'sunrise-orange-800'),
-        700: map.get($color-map, 'sunrise-orange-700'),
-        600: map.get($color-map, 'sunrise-orange-600'),
-        500: map.get($color-map, 'sunrise-orange-500'),
-        400: map.get($color-map, 'sunrise-orange-400'),
-        300: map.get($color-map, 'sunrise-orange-300'),
-        200: map.get($color-map, 'sunrise-orange-200'),
-        100: map.get($color-map, 'sunrise-orange-100'),
-        75: map.get($color-map, 'sunrise-orange-75'),
-        50: map.get($color-map, 'sunrise-orange-50'),
-        25: map.get($color-map, 'sunrise-orange-25'),
-    ),
-    silver-fog: (
-        1000: map.get($color-map, 'silver-fog-1000'),
-        950: map.get($color-map, 'silver-fog-950'),
-        900: map.get($color-map, 'silver-fog-900'),
-        800: map.get($color-map, 'silver-fog-800'),
-        700: map.get($color-map, 'silver-fog-700'),
-        600: map.get($color-map, 'silver-fog-600'),
-        500: map.get($color-map, 'silver-fog-500'),
-        400: map.get($color-map, 'silver-fog-400'),
-        300: map.get($color-map, 'silver-fog-300'),
-        200: map.get($color-map, 'silver-fog-200'),
-        100: map.get($color-map, 'silver-fog-100'),
-        75: map.get($color-map, 'silver-fog-75'),
-        50: map.get($color-map, 'silver-fog-50'),
-        25: map.get($color-map, 'silver-fog-25'),
-        0: map.get($color-map, 'silver-fog-0'),
-    ),
-    graphite: (
-        950: map.get($color-map, 'graphite-950'),
-        900: map.get($color-map, 'graphite-900'),
-        800: map.get($color-map, 'graphite-800'),
-        700: map.get($color-map, 'graphite-700'),
-        600: map.get($color-map, 'graphite-600'),
-        500: map.get($color-map, 'graphite-500'),
-        400: map.get($color-map, 'graphite-400'),
-        300: map.get($color-map, 'graphite-300'),
-        200: map.get($color-map, 'graphite-200'),
-        100: map.get($color-map, 'graphite-100'),
-        75: map.get($color-map, 'graphite-75'),
-        50: map.get($color-map, 'graphite-50'),
-        25: map.get($color-map, 'graphite-25'),
-    ),
-    blue: (
-        950: map.get($color-map, 'blue-950'),
-        900: map.get($color-map, 'blue-900'),
-        800: map.get($color-map, 'blue-800'),
-        700: map.get($color-map, 'blue-700'),
-        600: map.get($color-map, 'blue-600'),
-        500: map.get($color-map, 'blue-500'),
-        400: map.get($color-map, 'blue-400'),
-        300: map.get($color-map, 'blue-300'),
-        200: map.get($color-map, 'blue-200'),
-        100: map.get($color-map, 'blue-100'),
-        75: map.get($color-map, 'blue-75'),
-        50: map.get($color-map, 'blue-50'),
-        25: map.get($color-map, 'blue-25'),
-    ),
-    green: (
-        950: map.get($color-map, 'green-950'),
-        900: map.get($color-map, 'green-900'),
-        800: map.get($color-map, 'green-800'),
-        700: map.get($color-map, 'green-700'),
-        600: map.get($color-map, 'green-600'),
-        500: map.get($color-map, 'green-500'),
-        400: map.get($color-map, 'green-400'),
-        300: map.get($color-map, 'green-300'),
-        200: map.get($color-map, 'green-200'),
-        100: map.get($color-map, 'green-100'),
-        75: map.get($color-map, 'green-75'),
-        50: map.get($color-map, 'green-50'),
-        25: map.get($color-map, 'green-25'),
-    ),
-    orange: (
-        950: map.get($color-map, 'orange-950'),
-        900: map.get($color-map, 'orange-900'),
-        800: map.get($color-map, 'orange-800'),
-        700: map.get($color-map, 'orange-700'),
-        600: map.get($color-map, 'orange-600'),
-        500: map.get($color-map, 'orange-500'),
-        400: map.get($color-map, 'orange-400'),
-        300: map.get($color-map, 'orange-300'),
-        200: map.get($color-map, 'orange-200'),
-        100: map.get($color-map, 'orange-100'),
-        75: map.get($color-map, 'orange-75'),
-        50: map.get($color-map, 'orange-50'),
-        25: map.get($color-map, 'orange-25'),
-    ),
-    red: (
-        950: map.get($color-map, 'red-950'),
-        900: map.get($color-map, 'red-900'),
-        800: map.get($color-map, 'red-800'),
-        700: map.get($color-map, 'red-700'),
-        600: map.get($color-map, 'red-600'),
-        500: map.get($color-map, 'red-500'),
-        400: map.get($color-map, 'red-400'),
-        300: map.get($color-map, 'red-300'),
-        200: map.get($color-map, 'red-200'),
-        100: map.get($color-map, 'red-100'),
-        75: map.get($color-map, 'red-75'),
-        50: map.get($color-map, 'red-50'),
-        25: map.get($color-map, 'red-25'),
-    ),
-    alpha-silver-fog-0: (
-        0: map.get($color-map, 'alpha-silver-fog-0-0'),
-        8: map.get($color-map, 'alpha-silver-fog-0-8'),
-        10: map.get($color-map, 'alpha-silver-fog-0-10'),
-        12: map.get($color-map, 'alpha-silver-fog-0-12'),
-        14: map.get($color-map, 'alpha-silver-fog-0-14'),
-        20: map.get($color-map, 'alpha-silver-fog-0-20'),
-        30: map.get($color-map, 'alpha-silver-fog-0-30'),
-        40: map.get($color-map, 'alpha-silver-fog-0-40'),
-        50: map.get($color-map, 'alpha-silver-fog-0-50'),
-        60: map.get($color-map, 'alpha-silver-fog-0-60'),
-        70: map.get($color-map, 'alpha-silver-fog-0-70'),
-        80: map.get($color-map, 'alpha-silver-fog-0-80'),
-        90: map.get($color-map, 'alpha-silver-fog-0-90'),
-    ),
-    alpha-silver-fog-950: (
-        0: map.get($color-map, 'alpha-silver-fog-950-0'),
-        8: map.get($color-map, 'alpha-silver-fog-950-8'),
-        10: map.get($color-map, 'alpha-silver-fog-950-10'),
-        12: map.get($color-map, 'alpha-silver-fog-950-12'),
-        14: map.get($color-map, 'alpha-silver-fog-950-14'),
-        20: map.get($color-map, 'alpha-silver-fog-950-20'),
-        30: map.get($color-map, 'alpha-silver-fog-950-30'),
-        40: map.get($color-map, 'alpha-silver-fog-950-40'),
-        50: map.get($color-map, 'alpha-silver-fog-950-50'),
-        60: map.get($color-map, 'alpha-silver-fog-950-60'),
-        70: map.get($color-map, 'alpha-silver-fog-950-70'),
-        80: map.get($color-map, 'alpha-silver-fog-950-80'),
-        90: map.get($color-map, 'alpha-silver-fog-950-90'),
-    ),
-    alpha-graphite-0: (
-        0: map.get($color-map, 'alpha-graphite-0-0'),
-        8: map.get($color-map, 'alpha-graphite-0-8'),
-        10: map.get($color-map, 'alpha-graphite-0-10'),
-        12: map.get($color-map, 'alpha-graphite-0-12'),
-        14: map.get($color-map, 'alpha-graphite-0-14'),
-        20: map.get($color-map, 'alpha-graphite-0-20'),
-        30: map.get($color-map, 'alpha-graphite-0-30'),
-        40: map.get($color-map, 'alpha-graphite-0-40'),
-        50: map.get($color-map, 'alpha-graphite-0-50'),
-        60: map.get($color-map, 'alpha-graphite-0-60'),
-        70: map.get($color-map, 'alpha-graphite-0-70'),
-        80: map.get($color-map, 'alpha-graphite-0-80'),
-        90: map.get($color-map, 'alpha-graphite-0-90'),
-    ),
-    alpha-graphite-950: (
-        0: map.get($color-map, 'alpha-graphite-950-0'),
-        8: map.get($color-map, 'alpha-graphite-950-8'),
-        10: map.get($color-map, 'alpha-graphite-950-10'),
-        12: map.get($color-map, 'alpha-graphite-950-12'),
-        14: map.get($color-map, 'alpha-graphite-950-14'),
-        20: map.get($color-map, 'alpha-graphite-950-20'),
-        30: map.get($color-map, 'alpha-graphite-950-30'),
-        40: map.get($color-map, 'alpha-graphite-950-40'),
-        50: map.get($color-map, 'alpha-graphite-950-50'),
-        60: map.get($color-map, 'alpha-graphite-950-60'),
-        70: map.get($color-map, 'alpha-graphite-950-70'),
-        80: map.get($color-map, 'alpha-graphite-950-80'),
-        90: map.get($color-map, 'alpha-graphite-950-90'),
-    ),
-    'cm-blue-navy': (
-        50: map.get($color-map, 'cm-blue-navy-50'),
-        100: map.get($color-map, 'cm-blue-navy-100'),
-        200: map.get($color-map, 'cm-blue-navy-200'),
-        300: map.get($color-map, 'cm-blue-navy-300'),
-        400: map.get($color-map, 'cm-blue-navy-400'),
-        500: map.get($color-map, 'cm-blue-navy-500'),
-        600: map.get($color-map, 'cm-blue-navy-600'),
-        700: map.get($color-map, 'cm-blue-navy-700'),
-        800: map.get($color-map, 'cm-blue-navy-800'),
-        900: map.get($color-map, 'cm-blue-navy-900'),
-        950: map.get($color-map, 'cm-blue-navy-950'),
-    ),
-
-    'cm-blue-electric': (
-        50: map.get($color-map, 'cm-blue-electric-50'),
-        100: map.get($color-map, 'cm-blue-electric-100'),
-        200: map.get($color-map, 'cm-blue-electric-200'),
-        300: map.get($color-map, 'cm-blue-electric-300'),
-        400: map.get($color-map, 'cm-blue-electric-400'),
-        500: map.get($color-map, 'cm-blue-electric-500'),
-        600: map.get($color-map, 'cm-blue-electric-600'),
-        700: map.get($color-map, 'cm-blue-electric-700'),
-        800: map.get($color-map, 'cm-blue-electric-800'),
-        900: map.get($color-map, 'cm-blue-electric-900'),
-        950: map.get($color-map, 'cm-blue-electric-950'),
-    ),
-
-    'cm-green': (
-        50: map.get($color-map, 'cm-green-50'),
-        100: map.get($color-map, 'cm-green-100'),
-        200: map.get($color-map, 'cm-green-200'),
-        300: map.get($color-map, 'cm-green-300'),
-        400: map.get($color-map, 'cm-green-400'),
-        500: map.get($color-map, 'cm-green-500'),
-        600: map.get($color-map, 'cm-green-600'),
-        700: map.get($color-map, 'cm-green-700'),
-        800: map.get($color-map, 'cm-green-800'),
-        900: map.get($color-map, 'cm-green-900'),
-        950: map.get($color-map, 'cm-green-950'),
-    ),
-
-    'cm-green-dark': (
-        50: map.get($color-map, 'cm-green-dark-50'),
-        100: map.get($color-map, 'cm-green-dark-100'),
-        200: map.get($color-map, 'cm-green-dark-200'),
-        300: map.get($color-map, 'cm-green-dark-300'),
-        400: map.get($color-map, 'cm-green-dark-400'),
-        500: map.get($color-map, 'cm-green-dark-500'),
-        600: map.get($color-map, 'cm-green-dark-600'),
-        700: map.get($color-map, 'cm-green-dark-700'),
-        800: map.get($color-map, 'cm-green-dark-800'),
-        900: map.get($color-map, 'cm-green-dark-900'),
-        950: map.get($color-map, 'cm-green-dark-950'),
-    ),
-
-    'cm-orange': (
-        50: map.get($color-map, 'cm-orange-50'),
-        100: map.get($color-map, 'cm-orange-100'),
-        200: map.get($color-map, 'cm-orange-200'),
-        300: map.get($color-map, 'cm-orange-300'),
-        400: map.get($color-map, 'cm-orange-400'),
-        500: map.get($color-map, 'cm-orange-500'),
-        600: map.get($color-map, 'cm-orange-600'),
-        700: map.get($color-map, 'cm-orange-700'),
-        800: map.get($color-map, 'cm-orange-800'),
-        900: map.get($color-map, 'cm-orange-900'),
-        950: map.get($color-map, 'cm-orange-950'),
-    ),
-
-    'cm-purple': (
-        50: map.get($color-map, 'cm-purple-50'),
-        100: map.get($color-map, 'cm-purple-100'),
-        200: map.get($color-map, 'cm-purple-200'),
-        300: map.get($color-map, 'cm-purple-300'),
-        400: map.get($color-map, 'cm-purple-400'),
-        500: map.get($color-map, 'cm-purple-500'),
-        600: map.get($color-map, 'cm-purple-600'),
-        700: map.get($color-map, 'cm-purple-700'),
-        800: map.get($color-map, 'cm-purple-800'),
-        900: map.get($color-map, 'cm-purple-900'),
-        950: map.get($color-map, 'cm-purple-950'),
-    ),
-
-    'cm-blue-ocean': (
-        50: map.get($color-map, 'cm-blue-ocean-50'),
-        100: map.get($color-map, 'cm-blue-ocean-100'),
-        200: map.get($color-map, 'cm-blue-ocean-200'),
-        300: map.get($color-map, 'cm-blue-ocean-300'),
-        400: map.get($color-map, 'cm-blue-ocean-400'),
-        500: map.get($color-map, 'cm-blue-ocean-500'),
-        600: map.get($color-map, 'cm-blue-ocean-600'),
-        700: map.get($color-map, 'cm-blue-ocean-700'),
-        800: map.get($color-map, 'cm-blue-ocean-800'),
-        900: map.get($color-map, 'cm-blue-ocean-900'),
-        950: map.get($color-map, 'cm-blue-ocean-950'),
-    ),
-
-    'cm-green-lemon': (
-        50: map.get($color-map, 'cm-green-lemon-50'),
-        100: map.get($color-map, 'cm-green-lemon-100'),
-        200: map.get($color-map, 'cm-green-lemon-200'),
-        300: map.get($color-map, 'cm-green-lemon-300'),
-        400: map.get($color-map, 'cm-green-lemon-400'),
-        500: map.get($color-map, 'cm-green-lemon-500'),
-        600: map.get($color-map, 'cm-green-lemon-600'),
-        700: map.get($color-map, 'cm-green-lemon-700'),
-        800: map.get($color-map, 'cm-green-lemon-800'),
-        900: map.get($color-map, 'cm-green-lemon-900'),
-        950: map.get($color-map, 'cm-green-lemon-950'),
-    ),
-
-    'cm-green-pine': (
-        50: map.get($color-map, 'cm-green-pine-50'),
-        100: map.get($color-map, 'cm-green-pine-100'),
-        200: map.get($color-map, 'cm-green-pine-200'),
-        300: map.get($color-map, 'cm-green-pine-300'),
-        400: map.get($color-map, 'cm-green-pine-400'),
-        500: map.get($color-map, 'cm-green-pine-500'),
-        600: map.get($color-map, 'cm-green-pine-600'),
-        700: map.get($color-map, 'cm-green-pine-700'),
-        800: map.get($color-map, 'cm-green-pine-800'),
-        900: map.get($color-map, 'cm-green-pine-900'),
-        950: map.get($color-map, 'cm-green-pine-950'),
-    ),
-
-    'cm-red-crayola': (
-        50: map.get($color-map, 'cm-red-crayola-50'),
-        100: map.get($color-map, 'cm-red-crayola-100'),
-        200: map.get($color-map, 'cm-red-crayola-200'),
-        300: map.get($color-map, 'cm-red-crayola-300'),
-        400: map.get($color-map, 'cm-red-crayola-400'),
-        500: map.get($color-map, 'cm-red-crayola-500'),
-        600: map.get($color-map, 'cm-red-crayola-600'),
-        700: map.get($color-map, 'cm-red-crayola-700'),
-        800: map.get($color-map, 'cm-red-crayola-800'),
-        900: map.get($color-map, 'cm-red-crayola-900'),
-        950: map.get($color-map, 'cm-red-crayola-950'),
-    ),
-
-    'cm-warm-grey': (
-        50: map.get($color-map, 'cm-warm-grey-50'),
-        100: map.get($color-map, 'cm-warm-grey-100'),
-        200: map.get($color-map, 'cm-warm-grey-200'),
-        300: map.get($color-map, 'cm-warm-grey-300'),
-        400: map.get($color-map, 'cm-warm-grey-400'),
-        500: map.get($color-map, 'cm-warm-grey-500'),
-        600: map.get($color-map, 'cm-warm-grey-600'),
-        700: map.get($color-map, 'cm-warm-grey-700'),
-        800: map.get($color-map, 'cm-warm-grey-800'),
-        900: map.get($color-map, 'cm-warm-grey-900'),
-        950: map.get($color-map, 'cm-warm-grey-950'),
-    ),
-
-    'cm-yellow-gold': (
-        50: map.get($color-map, 'cm-yellow-gold-50'),
-        100: map.get($color-map, 'cm-yellow-gold-100'),
-        200: map.get($color-map, 'cm-yellow-gold-200'),
-        300: map.get($color-map, 'cm-yellow-gold-300'),
-        400: map.get($color-map, 'cm-yellow-gold-400'),
-        500: map.get($color-map, 'cm-yellow-gold-500'),
-        600: map.get($color-map, 'cm-yellow-gold-600'),
-        700: map.get($color-map, 'cm-yellow-gold-700'),
-        800: map.get($color-map, 'cm-yellow-gold-800'),
-        900: map.get($color-map, 'cm-yellow-gold-900'),
-        950: map.get($color-map, 'cm-yellow-gold-950'),
-    ),
-
-    'cm-orange-abricot': (
-        50: map.get($color-map, 'cm-orange-abricot-50'),
-        100: map.get($color-map, 'cm-orange-abricot-100'),
-        200: map.get($color-map, 'cm-orange-abricot-200'),
-        300: map.get($color-map, 'cm-orange-abricot-300'),
-        400: map.get($color-map, 'cm-orange-abricot-400'),
-        500: map.get($color-map, 'cm-orange-abricot-500'),
-        600: map.get($color-map, 'cm-orange-abricot-600'),
-        700: map.get($color-map, 'cm-orange-abricot-700'),
-        800: map.get($color-map, 'cm-orange-abricot-800'),
-        900: map.get($color-map, 'cm-orange-abricot-900'),
-        950: map.get($color-map, 'cm-orange-abricot-950'),
-    ),
-
-    'cm-purple-violet': (
-        50: map.get($color-map, 'cm-purple-violet-50'),
-        100: map.get($color-map, 'cm-purple-violet-100'),
-        200: map.get($color-map, 'cm-purple-violet-200'),
-        300: map.get($color-map, 'cm-purple-violet-300'),
-        400: map.get($color-map, 'cm-purple-violet-400'),
-        500: map.get($color-map, 'cm-purple-violet-500'),
-        600: map.get($color-map, 'cm-purple-violet-600'),
-        700: map.get($color-map, 'cm-purple-violet-700'),
-        800: map.get($color-map, 'cm-purple-violet-800'),
-        900: map.get($color-map, 'cm-purple-violet-900'),
-        950: map.get($color-map, 'cm-purple-violet-950'),
-    ),
-
-    'cm-red-tomato': (
-        50: map.get($color-map, 'cm-red-tomato-50'),
-        100: map.get($color-map, 'cm-red-tomato-100'),
-        200: map.get($color-map, 'cm-red-tomato-200'),
-        300: map.get($color-map, 'cm-red-tomato-300'),
-        400: map.get($color-map, 'cm-red-tomato-400'),
-        500: map.get($color-map, 'cm-red-tomato-500'),
-        600: map.get($color-map, 'cm-red-tomato-600'),
-        700: map.get($color-map, 'cm-red-tomato-700'),
-        800: map.get($color-map, 'cm-red-tomato-800'),
-        900: map.get($color-map, 'cm-red-tomato-900'),
-        950: map.get($color-map, 'cm-red-tomato-950'),
-    ),    
-);
-
-$color-cm-map: (
-    'cm-blue-navy',
-    'cm-blue-electric',
-    'cm-blue-ocean',
-    'cm-green',
-    'cm-green-dark',
-    'cm-orange',
-    'cm-purple',
-    'cm-green-lemon',
-    'cm-green-pine',
-    'cm-red-crayola',
-    'cm-yellow-gold',
-    'cm-orange-abricot',
-    'cm-purple-violet',
-    'cm-red-tomato',
-    'cm-warm-grey',
-);
+//
+// Sourced from the ecl-eds foundations primitives (single source of truth):
+//   - ecl/primitives/_color.scss ($color) — base ramps + alpha + domain-* brand ramps
+//   - ecl/primitives/_color-domain.scss ($color-domain) — the brand ("color mode") ramps
+//
+// The consumer-facing names are preserved:
+//   - $color-map     — flat map keyed exactly as before. The brand ramps are exposed
+//                      under the legacy `cm-*` keys (the semantic layer references
+//                      `cm-*`), aliased from the upstream `domain-*` ramps.
+//   - $color-map-alt — the same values grouped by ramp (used by the showcase exports).
+//   - $color-cm-map  — the list of brand ramp names.
+//
+// To change a value, edit the upstream primitive and re-run tools/ecl-import.mjs.
+
+// Re-key every `domain-<ramp>-<shade>` entry to the legacy `cm-<ramp>-<shade>` name
+// so the existing `cm-*` contract in the semantic layer keeps resolving.
+$_cm-aliases: ();
+@each $key, $value in ecl-color-domain.$color-domain {
+    @if string.index($key, 'domain-') == 1 {
+        $cm-key: 'cm-' + string.slice($key, string.length('domain-') + 1);
+        $_cm-aliases: map.set($_cm-aliases, $cm-key, $value);
+    }
+}
+
+// Base ramps + alpha + domain-* (from ecl $color) plus the cm-* aliases.
+$color-map: map.merge(ecl-color.$color, $_cm-aliases);
+
+// The ordered list of brand ("color mode") ramp names, derived from the domain
+// ramps so it stays in sync with the upstream source automatically.
+$_cm-names: ();
+@each $key, $value in $_cm-aliases {
+    // key is `cm-<ramp>-<shade>`; strip the trailing `-<shade>` to get the ramp name.
+    $last-dash: 0;
+    $i: 1;
+    @while $i <= string.length($key) {
+        @if string.slice($key, $i, $i) == '-' {
+            $last-dash: $i;
+        }
+        $i: $i + 1;
+    }
+    $ramp: string.slice($key, 1, $last-dash - 1);
+    @if not list.index($_cm-names, $ramp) {
+        $_cm-names: list.append($_cm-names, $ramp);
+    }
+}
+$color-cm-map: $_cm-names;
+
+// Grouped-by-ramp view of every entry in $color-map (base, alpha and brand ramps),
+// consumed by the showcase color exports.
+$color-map-alt: ();
+@each $key, $value in $color-map {
+    // Split `<ramp>-<shade>` on the last dash: ramp = prefix, shade = suffix.
+    $last-dash: 0;
+    $i: 1;
+    @while $i <= string.length($key) {
+        @if string.slice($key, $i, $i) == '-' {
+            $last-dash: $i;
+        }
+        $i: $i + 1;
+    }
+
+    @if $last-dash > 0 {
+        $ramp: string.slice($key, 1, $last-dash - 1);
+        $shade: string.slice($key, $last-dash + 1);
+        $existing: map.get($color-map-alt, $ramp) or ();
+        $color-map-alt: map.set($color-map-alt, $ramp, map.set($existing, $shade, $value));
+    }
+}