@eui/eds-styles 21.4.1-snapshot-1785492239236

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

@@ -0,0 +1,770 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../01-base/' as base;
+
+// 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': #6A6A71,
+    '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',
+);