stp-ui-kit 0.0.104 → 0.0.107

package/src/styles/_variables.scss

@@ -75,136 +75,761 @@ $font-line-height-800: 32px;
 $font-line-height-700: 28px;
 $font-line-height-1000: 40px;
 
-//Colors
-$color-neutral-alpha: rgba(#020817, 0.2);
-$color-neutral-00: #ffffff;
-$color-neutral-50: #f8f9fa;
-$color-neutral-100: #f1f3f6;
-$color-neutral-150: #ebeef2;
-$color-neutral-200: #e4e8ed;
-$color-neutral-250: #dee1e7;
-$color-neutral-300: #d2d5dc;
-$color-neutral-350: #c5c8d0;
-$color-neutral-400: #b9bcc5;
-$color-neutral-450: #acafb8;
-$color-neutral-500: #9fa2ab;
-$color-neutral-550: #92959e;
-$color-neutral-600: #868892;
-$color-neutral-650: #797b85;
-$color-neutral-700: #6c6e78;
-$color-neutral-750: #5f616b;
-$color-neutral-800: #52545d;
-$color-neutral-850: #444750;
-$color-neutral-900: #373a42;
-$color-neutral-950: #020817;
-
-$color-red-50: #fef2f2;
-$color-red-100: #fee2e2;
-$color-red-200: #fecaca;
-$color-red-300: #fca5a5;
-$color-red-400: #f87171;
-$color-red-500: #ef4444;
-$color-red-600: #dc2626;
-$color-red-700: #b91c1c;
-$color-red-800: #991b1b;
-$color-red-900: #7f1d1d;
-$color-red-950: #450a0a;
-
-$color-amber-50: #fffbeb;
-$color-amber-100: #fef3c7;
-$color-amber-200: #fde68a;
-$color-amber-300: #fcd34d;
-$color-amber-400: #fbbf24;
-$color-amber-500: #f59e0b;
-$color-amber-600: #d97706;
-$color-amber-700: #b45309;
-$color-amber-800: #92400e;
-$color-amber-900: #78350f;
-$color-amber-950: #451a03;
-
-$color-green-50: #f0fdf4;
-$color-green-100: #dcfce7;
-$color-green-200: #bbf7d0;
-$color-green-300: #86efac;
-$color-green-400: #4ade80;
-$color-green-500: #22c55e;
-$color-green-600: #16a34a;
-$color-green-700: #15803d;
-$color-green-800: #166534;
-$color-green-900: #14532d;
-$color-green-950: #052e16;
-
-$color-blue-50: #eff6ff;
-$color-blue-100: #dbeafe;
-$color-blue-200: #bfdbfe;
-$color-blue-300: #93c5fd;
-$color-blue-400: #60a5fa;
-$color-blue-500: #3b82f6;
-$color-blue-600: #2563eb;
-$color-blue-700: #1d4ed8;
-$color-blue-800: #1e40af;
-$color-blue-900: #1e3a8a;
-$color-blue-950: #172554;
-
-$color-lime-50: #f7fee7;
-$color-lime-100: #ecfccb;
-$color-lime-200: #d9f99d;
-$color-lime-300: #bef264;
-$color-lime-400: #a3e635;
-$color-lime-500: #84cc16;
-$color-lime-600: #65a30d;
-$color-lime-700: #4d7c0f;
-$color-lime-800: #3f6212;
-$color-lime-900: #365314;
-$color-lime-950: #1a2e05;
-
-$color-indigo-50: #eef2ff;
-$color-indigo-100: #e0e7ff;
-$color-indigo-200: #c7d2fe;
-$color-indigo-300: #a5b4fc;
-$color-indigo-400: #818cf8;
-$color-indigo-500: #6366f1;
-$color-indigo-600: #4f46e5;
-$color-indigo-700: #4338ca;
-$color-indigo-800: #3730a3;
-$color-indigo-900: #312e81;
-$color-indigo-950: #1e1b4b;
-
-$color-violet-50: #f5f3ff;
-$color-violet-100: #ede9fe;
-$color-violet-200: #ddd6fe;
-$color-violet-300: #c4b5fd;
-$color-violet-400: #a78bfa;
-$color-violet-500: #8b5cf6;
-$color-violet-600: #7c3aed;
-$color-violet-700: #6d28d9;
-$color-violet-800: #5b21b6;
-$color-violet-900: #4c1d95;
-$color-violet-950: #2e1065;
-
-$color-teal-50: #f0fdfa;
-$color-teal-100: #ccfbf1;
-$color-teal-200: #99f6e4;
-$color-teal-300: #5eead4;
-$color-teal-400: #2dd4bf;
-$color-teal-500: #14b8a6;
-$color-teal-600: #0d9488;
-$color-teal-700: #0f766e;
-$color-teal-800: #115e59;
-$color-teal-900: #115e59;
-$color-teal-950: #042f2e;
-
-$color-fuchsia-50: #fdf4ff;
-$color-fuchsia-100: #fae8ff;
-$color-fuchsia-200: #f5d0fe;
-$color-fuchsia-300: #f0abfc;
-$color-fuchsia-400: #e879f9;
-$color-fuchsia-500: #d946ef;
-$color-fuchsia-600: #c026d3;
-$color-fuchsia-700: #c026d3;
-$color-fuchsia-800: #86198f;
-$color-fuchsia-900: #701a75;
-$color-fuchsia-950: #4a044e;
+//Colors - Primitive tokens with CSS custom properties for theming
+
+// Define CSS custom properties for light theme (default)
+:root {
+  // Neutral
+  --color-neutral-alpha: rgba(2, 8, 23, 0.2);
+  --color-neutral-00: #ffffff;
+  --color-neutral-50: #f8f9fa;
+  --color-neutral-100: #f1f3f6;
+  --color-neutral-150: #ebeef2;
+  --color-neutral-200: #e4e8ed;
+  --color-neutral-250: #dee1e7;
+  --color-neutral-300: #d2d5dc;
+  --color-neutral-350: #c5c8d0;
+  --color-neutral-400: #b9bcc5;
+  --color-neutral-450: #acafb8;
+  --color-neutral-500: #9fa2ab;
+  --color-neutral-550: #92959e;
+  --color-neutral-600: #868892;
+  --color-neutral-650: #797b85;
+  --color-neutral-700: #6c6e78;
+  --color-neutral-750: #5f616b;
+  --color-neutral-800: #52545d;
+  --color-neutral-850: #444750;
+  --color-neutral-900: #373a42;
+  --color-neutral-950: #020817;
+
+  // Red
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  // Amber
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+
+  // Green
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  // Blue
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  // Lime
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+
+  // Indigo
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  // Violet
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+
+  // Teal
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #115e59;
+  --color-teal-950: #042f2e;
+
+  // Fuchsia
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #c026d3;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+}
+
+// Dark theme overrides
+[data-theme='dark'] {
+  // Neutral - inverted
+  --color-neutral-alpha: rgba(255, 255, 255, 0.2);
+  --color-neutral-00: #020817;
+  --color-neutral-50: #373a42;
+  --color-neutral-100: #444750;
+  --color-neutral-150: #52545d;
+  --color-neutral-200: #5f616b;
+  --color-neutral-250: #6c6e78;
+  --color-neutral-300: #797b85;
+  --color-neutral-350: #868892;
+  --color-neutral-400: #92959e;
+  --color-neutral-450: #9fa2ab;
+  --color-neutral-500: #acafb8;
+  --color-neutral-550: #b9bcc5;
+  --color-neutral-600: #c5c8d0;
+  --color-neutral-650: #d2d5dc;
+  --color-neutral-700: #dee1e7;
+  --color-neutral-750: #e4e8ed;
+  --color-neutral-800: #ebeef2;
+  --color-neutral-850: #f1f3f8;
+  --color-neutral-900: #f8f9fa;
+  --color-neutral-950: #ffffff;
+
+  // Red - inverted
+  --color-red-50: #450a0a;
+  --color-red-100: #7f1d1d;
+  --color-red-200: #991b1b;
+  --color-red-300: #b91c1c;
+  --color-red-400: #dc2626;
+  --color-red-500: #ef4444;
+  --color-red-600: #f87171;
+  --color-red-700: #fca5a5;
+  --color-red-800: #fecaca;
+  --color-red-900: #fee2e2;
+  --color-red-950: #fef2f2;
+
+  // Amber - inverted
+  --color-amber-50: #451a03;
+  --color-amber-100: #78350f;
+  --color-amber-200: #92400e;
+  --color-amber-300: #b45309;
+  --color-amber-400: #d97706;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #fbbf24;
+  --color-amber-700: #fcd34d;
+  --color-amber-800: #fde68a;
+  --color-amber-900: #fef3c7;
+  --color-amber-950: #fffbeb;
+
+  // Green - inverted
+  --color-green-50: #052e16;
+  --color-green-100: #14532d;
+  --color-green-200: #166534;
+  --color-green-300: #15803d;
+  --color-green-400: #16a34a;
+  --color-green-500: #22c55e;
+  --color-green-600: #4ade80;
+  --color-green-700: #86efac;
+  --color-green-800: #bbf7d0;
+  --color-green-900: #dcfce7;
+  --color-green-950: #f0fdf4;
+
+  // Blue - inverted
+  --color-blue-50: #172554;
+  --color-blue-100: #1e3a8a;
+  --color-blue-200: #1e40af;
+  --color-blue-300: #1d4ed8;
+  --color-blue-400: #2563eb;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #60a5fa;
+  --color-blue-700: #93c5fd;
+  --color-blue-800: #bfdbfe;
+  --color-blue-900: #dbeafe;
+  --color-blue-950: #eff6ff;
+
+  // Lime - inverted
+  --color-lime-50: #1a2e05;
+  --color-lime-100: #365314;
+  --color-lime-200: #3f6212;
+  --color-lime-300: #4d7c0f;
+  --color-lime-400: #65a30d;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #a3e635;
+  --color-lime-700: #bef264;
+  --color-lime-800: #d9f99d;
+  --color-lime-900: #ecfccb;
+  --color-lime-950: #f7fee7;
+
+  // Indigo - inverted
+  --color-indigo-50: #1e1b4b;
+  --color-indigo-100: #312e81;
+  --color-indigo-200: #3730a3;
+  --color-indigo-300: #4338ca;
+  --color-indigo-400: #4f46e5;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #818cf8;
+  --color-indigo-700: #a5b4fc;
+  --color-indigo-800: #c7d2fe;
+  --color-indigo-900: #e0e7ff;
+  --color-indigo-950: #eef2ff;
+
+  // Violet - inverted
+  --color-violet-50: #2e1065;
+  --color-violet-100: #4c1d95;
+  --color-violet-200: #5b21b6;
+  --color-violet-300: #6d28d9;
+  --color-violet-400: #7c3aed;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #a78bfa;
+  --color-violet-700: #c4b5fd;
+  --color-violet-800: #ddd6fe;
+  --color-violet-900: #ede9fe;
+  --color-violet-950: #f5f3ff;
+
+  // Teal - inverted
+  --color-teal-50: #042f2e;
+  --color-teal-100: #134e4a;
+  --color-teal-200: #115e59;
+  --color-teal-300: #0f766e;
+  --color-teal-400: #0d9488;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #2dd4bf;
+  --color-teal-700: #5eead4;
+  --color-teal-800: #99f6e4;
+  --color-teal-900: #ccfbf1;
+  --color-teal-950: #f0fdfa;
+
+  // Fuchsia - inverted
+  --color-fuchsia-50: #4a044e;
+  --color-fuchsia-100: #701a75;
+  --color-fuchsia-200: #86198f;
+  --color-fuchsia-300: #a21caf;
+  --color-fuchsia-400: #c026d3;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #e879f9;
+  --color-fuchsia-700: #f0abfc;
+  --color-fuchsia-800: #f5d0fe;
+  --color-fuchsia-900: #fae8ff;
+  --color-fuchsia-950: #fdf4ff;
+}
+
+// SCSS variables redirecting to CSS custom properties
+$color-neutral-alpha: var(--color-neutral-alpha);
+$color-neutral-00: var(--color-neutral-00);
+$color-neutral-50: var(--color-neutral-50);
+$color-neutral-100: var(--color-neutral-100);
+$color-neutral-150: var(--color-neutral-150);
+$color-neutral-200: var(--color-neutral-200);
+$color-neutral-250: var(--color-neutral-250);
+$color-neutral-300: var(--color-neutral-300);
+$color-neutral-350: var(--color-neutral-350);
+$color-neutral-400: var(--color-neutral-400);
+$color-neutral-450: var(--color-neutral-450);
+$color-neutral-500: var(--color-neutral-500);
+$color-neutral-550: var(--color-neutral-550);
+$color-neutral-600: var(--color-neutral-600);
+$color-neutral-650: var(--color-neutral-650);
+$color-neutral-700: var(--color-neutral-700);
+$color-neutral-750: var(--color-neutral-750);
+$color-neutral-800: var(--color-neutral-800);
+$color-neutral-850: var(--color-neutral-850);
+$color-neutral-900: var(--color-neutral-900);
+$color-neutral-950: var(--color-neutral-950);
+
+$color-red-50: var(--color-red-50);
+$color-red-100: var(--color-red-100);
+$color-red-200: var(--color-red-200);
+$color-red-300: var(--color-red-300);
+$color-red-400: var(--color-red-400);
+$color-red-500: var(--color-red-500);
+$color-red-600: var(--color-red-600);
+$color-red-700: var(--color-red-700);
+$color-red-800: var(--color-red-800);
+$color-red-900: var(--color-red-900);
+$color-red-950: var(--color-red-950);
+
+$color-amber-50: var(--color-amber-50);
+$color-amber-100: var(--color-amber-100);
+$color-amber-200: var(--color-amber-200);
+$color-amber-300: var(--color-amber-300);
+$color-amber-400: var(--color-amber-400);
+$color-amber-500: var(--color-amber-500);
+$color-amber-600: var(--color-amber-600);
+$color-amber-700: var(--color-amber-700);
+$color-amber-800: var(--color-amber-800);
+$color-amber-900: var(--color-amber-900);
+$color-amber-950: var(--color-amber-950);
+
+$color-green-50: var(--color-green-50);
+$color-green-100: var(--color-green-100);
+$color-green-200: var(--color-green-200);
+$color-green-300: var(--color-green-300);
+$color-green-400: var(--color-green-400);
+$color-green-500: var(--color-green-500);
+$color-green-600: var(--color-green-600);
+$color-green-700: var(--color-green-700);
+$color-green-800: var(--color-green-800);
+$color-green-900: var(--color-green-900);
+$color-green-950: var(--color-green-950);
+
+$color-blue-50: var(--color-blue-50);
+$color-blue-100: var(--color-blue-100);
+$color-blue-200: var(--color-blue-200);
+$color-blue-300: var(--color-blue-300);
+$color-blue-400: var(--color-blue-400);
+$color-blue-500: var(--color-blue-500);
+$color-blue-600: var(--color-blue-600);
+$color-blue-700: var(--color-blue-700);
+$color-blue-800: var(--color-blue-800);
+$color-blue-900: var(--color-blue-900);
+$color-blue-950: var(--color-blue-950);
+
+$color-lime-50: var(--color-lime-50);
+$color-lime-100: var(--color-lime-100);
+$color-lime-200: var(--color-lime-200);
+$color-lime-300: var(--color-lime-300);
+$color-lime-400: var(--color-lime-400);
+$color-lime-500: var(--color-lime-500);
+$color-lime-600: var(--color-lime-600);
+$color-lime-700: var(--color-lime-700);
+$color-lime-800: var(--color-lime-800);
+$color-lime-900: var(--color-lime-900);
+$color-lime-950: var(--color-lime-950);
+
+$color-indigo-50: var(--color-indigo-50);
+$color-indigo-100: var(--color-indigo-100);
+$color-indigo-200: var(--color-indigo-200);
+$color-indigo-300: var(--color-indigo-300);
+$color-indigo-400: var(--color-indigo-400);
+$color-indigo-500: var(--color-indigo-500);
+$color-indigo-600: var(--color-indigo-600);
+$color-indigo-700: var(--color-indigo-700);
+$color-indigo-800: var(--color-indigo-800);
+$color-indigo-900: var(--color-indigo-900);
+$color-indigo-950: var(--color-indigo-950);
+
+$color-violet-50: var(--color-violet-50);
+$color-violet-100: var(--color-violet-100);
+$color-violet-200: var(--color-violet-200);
+$color-violet-300: var(--color-violet-300);
+$color-violet-400: var(--color-violet-400);
+$color-violet-500: var(--color-violet-500);
+$color-violet-600: var(--color-violet-600);
+$color-violet-700: var(--color-violet-700);
+$color-violet-800: var(--color-violet-800);
+$color-violet-900: var(--color-violet-900);
+$color-violet-950: var(--color-violet-950);
+
+$color-teal-50: var(--color-teal-50);
+$color-teal-100: var(--color-teal-100);
+$color-teal-200: var(--color-teal-200);
+$color-teal-300: var(--color-teal-300);
+$color-teal-400: var(--color-teal-400);
+$color-teal-500: var(--color-teal-500);
+$color-teal-600: var(--color-teal-600);
+$color-teal-700: var(--color-teal-700);
+$color-teal-800: var(--color-teal-800);
+$color-teal-900: var(--color-teal-900);
+$color-teal-950: var(--color-teal-950);
+
+$color-fuchsia-50: var(--color-fuchsia-50);
+$color-fuchsia-100: var(--color-fuchsia-100);
+$color-fuchsia-200: var(--color-fuchsia-200);
+$color-fuchsia-300: var(--color-fuchsia-300);
+$color-fuchsia-400: var(--color-fuchsia-400);
+$color-fuchsia-500: var(--color-fuchsia-500);
+$color-fuchsia-600: var(--color-fuchsia-600);
+$color-fuchsia-700: var(--color-fuchsia-700);
+$color-fuchsia-800: var(--color-fuchsia-800);
+$color-fuchsia-900: var(--color-fuchsia-900);
+$color-fuchsia-950: var(--color-fuchsia-950);
+
+// Semantic Tokens - CSS Custom Properties
+:root {
+  // Text tokens
+  --text: #373a42;
+  --text-secondary: #6c6e78;
+  --text-disabled: #868892;
+  --text-inverse: #ffffff;
+  --text-on-fill-brand: #ffffff;
+  --text-on-fill: #ffffff;
+  --text-critical: #991b1b;
+  --text-emphasis: #1e40af;
+  --text-emphasis-hover: #1e3a8a;
+  --text-emphasis-on-press: #172554;
+  --text-emphasis-selected: #172554;
+  --text-warning: #92400e;
+  --text-warning-on-bg-fill: #451a03;
+  --text-success: #166534;
+
+  // Link tokens
+  --link: #1e40af;
+  --link-hover: #1e3a8a;
+  --link-on-press: #172554;
+
+  // Background tokens
+  --bg: #f8f9fa;
+  --bg-inverse: #020817;
+  --bg-mobile: #ffffff;
+
+  // Surface tokens
+  --surface: #ffffff;
+  --surface-inverse: #444750;
+  --surface-hover: #f1f3f6;
+  --surface-on-press: #e4e8ed;
+  --surface-selected: #e4e8ed;
+  --surface-secondary: #f1f3f6;
+  --surface-secondary-hover: #e4e8ed;
+  --surface-secondary-on-press: #e4e8ed;
+  --surface-secondary-selected: #d2d5dc;
+  --surface-brand: #eff6ff;
+  --surface-critical: #fee2e2;
+  --surface-warning: #fef3c7;
+  --surface-success: #dcfce7;
+
+  // Fill tokens
+  --fill: #ffffff;
+  --fill-hover: #e4e8ed;
+  --fill-on-press: #d2d5dc;
+  --fill-selected: #d2d5dc;
+  --fill-disabled: #dee1e7;
+  --fill-brand: #2563eb;
+  --fill-brand-hover: #1d4ed8;
+  --fill-brand-on-press: #1e40af;
+  --fill-brand-selected: #1e3a8a;
+  --fill-brand-disabled: #b9bcc5;
+  --fill-critical-secondary: #fef2f2;
+  --fill-critical: #dc2626;
+  --fill-critical-hover: #b91c1c;
+  --fill-critical-on-press: #991b1b;
+  --fill-critical-selected: #7f1d1d;
+  --fill-warning: #fcd34d;
+  --fill-warning-hover: #fbbf24;
+  --fill-warning-on-press: #f59e0b;
+  --fill-warning-selected: #d97706;
+  --fill-success-secondary: #dcfce7;
+
+  // Border tokens
+  --border: #dee1e7;
+  --border-disabled: #dee1e7;
+  --border-critical: #b91c1c;
+  --border-success: #15803d;
+  --border-brand: #1d4ed8;
+  --border-warning: #b45309;
+  --border-active: #6c6e78;
+  --border-input: #b9bcc5;
+  --border-input-active: #6c6e78;
+  --border-input-disabled: #dee1e7;
+
+  // Input tokens
+  --input-border: #9fa2ab;
+  --input-border-active: #6c6e78;
+  --input-border-disabled: #dee1e7;
+  --input-bg-surface: #ffffff;
+  --input-bg-surface-hover: #f1f3f6;
+  --input-bg-surface-active: #ffffff;
+  --input-bg-surface-disabled: #dee1e7;
+
+  // Icon tokens
+  --icon: #52545d;
+  --icon-secondary: #868892;
+  --icon-disabled: #acafb8;
+  --icon-on-bg-fill-brand: #dbeafe;
+  --icon-on-bg-fill-warning: #451a03;
+  --icon-on-bg-fill-critical: #ffffff;
+  --icon-critical: #991b1b;
+  --icon-emphasis: #1e40af;
+  --icon-emphasis-hover: #1e3a8a;
+  --icon-emphasis-on-press: #172554;
+  --icon-emphasis-selected: #172554;
+  --icon-warning: #b45309;
+  --icon-success: #15803d;
+
+  // Navigation tokens
+  --nav-bg: #ebeef2;
+  --nav-bg-surface: #ebeef2;
+  --nav-bg-surface-hover: #f8f9fa;
+  --nav-bg-surface-on-press: #ffffff;
+  --nav-bg-surface-selected: #ffffff;
+  --nav-bg-surface-selected-no-hover: #e4e8ed;
+
+  // Backdrop
+  --backdrop: rgba(0, 0, 0, 0.19);
+
+  // Decorative fill tokens
+  --fill-lime: #bef264;
+  --text-lime: #1a2e05;
+  --fill-blue: #93c5fd;
+  --text-blue: #172554;
+  --fill-fuchsia: #f0abfc;
+  --text-fuchsia: #4a044e;
+  --fill-teal: #5eead4;
+  --text-teal: #042f2e;
+  --fill-indigo: #a5b4fc;
+  --text-indigo: #1e1b4b;
+
+  // Decorative text tokens
+  --text-decorative-blue: #172554;
+  --text-decorative-violet: #2e1065;
+  --text-decorative-fuchsia: #4a044e;
+  --text-decorative-lime: #1a2e05;
+  --text-decorative-teal: #042f2e;
+  --text-decorative-indigo: #1e1b4b;
+  --text-decorative-red: #450a0a;
+  --text-decorative-amber: #451a03;
+  --text-decorative-green: #052e16;
+
+  // Decorative surface tokens
+  --surface-decorative-blue: #dbeafe;
+  --surface-decorative-violet: #ede9fe;
+  --surface-decorative-fuchsia: #fae8ff;
+  --surface-decorative-red: #fee2e2;
+  --surface-decorative-amber: #fef3c7;
+  --surface-decorative-green: #dcfce7;
+  --surface-decorative-lime: #ecfccb;
+  --surface-decorative-indigo: #e0e7ff;
+  --surface-decorative-teal: #ccfbf1;
+
+  // Decorative fill tokens (extended)
+  --fill-decorative-blue: #93c5fd;
+  --fill-decorative-violet: #c4b5fd;
+  --fill-decorative-fuchsia: #f0abfc;
+  --fill-decorative-lime: #bef264;
+  --fill-decorative-teal: #5eead4;
+  --fill-decorative-indigo: #a5b4fc;
+  --fill-decorative-red: #fca5a5;
+  --fill-decorative-amber: #fcd34d;
+  --fill-decorative-green: #86efac;
+
+  // Decorative icon backgrounds
+  --bg-icon-decorative-blue: #3b82f6;
+  --bg-icon-decorative-violet: #8b5cf6;
+  --bg-icon-decorative-fuchsia: #d946ef;
+  --bg-icon-decorative-red: #ef4444;
+  --bg-icon-decorative-amber: #f59e0b;
+  --bg-icon-decorative-green: #22c55e;
+  --bg-icon-decorative-lime: #84cc16;
+  --bg-icon-decorative-indigo: #6366f1;
+  --bg-icon-decorative-teal: #14b8a6;
+}
+
+[data-theme='dark'] {
+  // Text tokens
+  --text: #f8f9fa;
+  --text-secondary: #dee1e7;
+  --text-disabled: #c5c8d0;
+  --text-inverse: #020817;
+  --text-on-fill-brand: #020817;
+  --text-on-fill: #020817;
+  --text-critical: #fecaca;
+  --text-emphasis: #bfdbfe;
+  --text-emphasis-hover: #dbeafe;
+  --text-emphasis-on-press: #eff6ff;
+  --text-emphasis-selected: #eff6ff;
+  --text-warning: #fde68a;
+  --text-warning-on-bg-fill: #fffbeb;
+  --text-success: #bbf7d0;
+
+  // Link tokens
+  --link: #bfdbfe;
+  --link-hover: #dbeafe;
+  --link-on-press: #eff6ff;
+
+  // Background tokens
+  --bg: #373a42;
+  --bg-inverse: #ffffff;
+  --bg-mobile: #020817;
+
+  // Surface tokens
+  --surface: #020817;
+  --surface-inverse: #ebeef2;
+  --surface-hover: #444750;
+  --surface-on-press: #5f616b;
+  --surface-selected: #5f616b;
+  --surface-secondary: #444750;
+  --surface-secondary-hover: #5f616b;
+  --surface-secondary-on-press: #5f616b;
+  --surface-secondary-selected: #797b85;
+  --surface-brand: #172554;
+  --surface-critical: #7f1d1d;
+  --surface-warning: #78350f;
+  --surface-success: #14532d;
+
+  // Fill tokens
+  --fill: #020817;
+  --fill-hover: #5f616b;
+  --fill-on-press: #797b85;
+  --fill-selected: #797b85;
+  --fill-disabled: #6c6e78;
+  --fill-brand: #60a5fa;
+  --fill-brand-hover: #93c5fd;
+  --fill-brand-on-press: #bfdbfe;
+  --fill-brand-selected: #dbeafe;
+  --fill-brand-disabled: #92959e;
+  --fill-critical-secondary: #450a0a;
+  --fill-critical: #f87171;
+  --fill-critical-hover: #fca5a5;
+  --fill-critical-on-press: #fecaca;
+  --fill-critical-selected: #fee2e2;
+  --fill-warning: #fcd34d;
+  --fill-warning-hover: #fbbf24;
+  --fill-warning-on-press: #f59e0b;
+  --fill-warning-selected: #d97706;
+  --fill-success-secondary: #052e16;
+
+  // Border tokens
+  --border: #6c6e78;
+  --border-disabled: #6c6e78;
+  --border-critical: #fca5a5;
+  --border-success: #86efac;
+  --border-brand: #93c5fd;
+  --border-warning: #fcd34d;
+  --border-active: #dee1e7;
+  --border-input: #acafb8;
+  --border-input-active: #dee1e7;
+  --border-input-disabled: #6c6e78;
+
+  // Input tokens
+  --input-border: #acafb8;
+  --input-border-active: #dee1e7;
+  --input-border-disabled: #6c6e78;
+  --input-bg-surface: #020817;
+  --input-bg-surface-hover: #444750;
+  --input-bg-surface-active: #020817;
+  --input-bg-surface-disabled: #6c6e78;
+
+  // Icon tokens
+  --icon: #ebeef2;
+  --icon-secondary: #c5c8d0;
+  --icon-disabled: #9fa2ab;
+  --icon-on-bg-fill-brand: #1e3a8a;
+  --icon-on-bg-fill-warning: #fffbeb;
+  --icon-on-bg-fill-critical: #020817;
+  --icon-critical: #fecaca;
+  --icon-emphasis: #bfdbfe;
+  --icon-emphasis-hover: #dbeafe;
+  --icon-emphasis-on-press: #eff6ff;
+  --icon-emphasis-selected: #eff6ff;
+  --icon-warning: #fcd34d;
+  --icon-success: #86efac;
+
+  // Navigation tokens
+  --nav-bg: #52545d;
+  --nav-bg-surface: #52545d;
+  --nav-bg-surface-hover: #373a42;
+  --nav-bg-surface-on-press: #020817;
+  --nav-bg-surface-selected: #020817;
+  --nav-bg-surface-selected-no-hover: #5f616b;
+
+  // Backdrop
+  --backdrop: rgba(0, 0, 0, 0.19);
+
+  // Decorative fill tokens
+  --fill-lime: #bef264;
+  --text-lime: #f7fee7;
+  --fill-blue: #93c5fd;
+  --text-blue: #eff6ff;
+  --fill-fuchsia: #f0abfc;
+  --text-fuchsia: #fdf4ff;
+  --fill-teal: #5eead4;
+  --text-teal: #f0fdfa;
+  --fill-indigo: #a5b4fc;
+  --text-indigo: #eef2ff;
+
+  // Decorative text tokens
+  --text-decorative-blue: #eff6ff;
+  --text-decorative-violet: #f5f3ff;
+  --text-decorative-fuchsia: #fdf4ff;
+  --text-decorative-lime: #f7fee7;
+  --text-decorative-teal: #f0fdfa;
+  --text-decorative-indigo: #eef2ff;
+  --text-decorative-red: #fef2f2;
+  --text-decorative-amber: #fffbeb;
+  --text-decorative-green: #f0fdf4;
+
+  // Decorative surface tokens
+  --surface-decorative-blue: #1e3a8a;
+  --surface-decorative-violet: #4c1d95;
+  --surface-decorative-fuchsia: #701a75;
+  --surface-decorative-red: #7f1d1d;
+  --surface-decorative-amber: #78350f;
+  --surface-decorative-green: #14532d;
+  --surface-decorative-lime: #365314;
+  --surface-decorative-indigo: #312e81;
+  --surface-decorative-teal: #134e4a;
+
+  // Decorative fill tokens (extended)
+  --fill-decorative-blue: #93c5fd;
+  --fill-decorative-violet: #c4b5fd;
+  --fill-decorative-fuchsia: #f0abfc;
+  --fill-decorative-lime: #bef264;
+  --fill-decorative-teal: #5eead4;
+  --fill-decorative-indigo: #a5b4fc;
+  --fill-decorative-red: #fca5a5;
+  --fill-decorative-amber: #fcd34d;
+  --fill-decorative-green: #86efac;
+
+  // Decorative icon backgrounds
+  --bg-icon-decorative-blue: #3b82f6;
+  --bg-icon-decorative-violet: #8b5cf6;
+  --bg-icon-decorative-fuchsia: #d946ef;
+  --bg-icon-decorative-red: #ef4444;
+  --bg-icon-decorative-amber: #f59e0b;
+  --bg-icon-decorative-green: #22c55e;
+  --bg-icon-decorative-lime: #84cc16;
+  --bg-icon-decorative-indigo: #6366f1;
+  --bg-icon-decorative-teal: #14b8a6;
+}
 
 // Shadow
 $shadow-color: $color-neutral-alpha;
@@ -238,119 +863,119 @@ $shadow-600: 0 20px 20px -8px $shadow-color;
   box-shadow: $shadow-600;
 }
 
-//Primary tokens
-
-$text: $color-neutral-900;
-$text-secondary: $color-neutral-700;
-$text-disabled: $color-neutral-600;
-$text-inverse: $color-neutral-00;
-$text-on-fill-brand: $color-neutral-00;
-$text-on-fill: $color-neutral-00;
-$text-critical: $color-red-800;
-$text-emphasis: $color-blue-800;
-$text-emphasis-hover: $color-blue-900;
-$text-emphasis-on-press: $color-blue-950;
-$text-emphasis-selected: $color-blue-950;
-$text-warning: $color-amber-800;
-$text-warning-on-bg-fill: $color-amber-950;
-$text-success: $color-green-800;
-
-$link: $color-blue-800;
-$link-hover: $color-blue-900;
-$link-on-press: $color-blue-950;
-
-$bg: $color-neutral-50;
-$bg-inverse: $color-neutral-950;
-$bg-mobile: $color-neutral-00;
-
-$surface: $color-neutral-00;
-$surface-inverse: $color-neutral-850;
-$surface-hover: $color-neutral-100;
-$surface-on-press: $color-neutral-200;
-$surface-selected: $color-neutral-200;
-$surface-secondary: $color-neutral-100;
-$surface-secondary-hover: $color-neutral-200;
-$surface-secondary-on-press: $color-neutral-200;
-$surface-secondary-selected: $color-neutral-300;
-$surface-brand: $color-blue-50;
-$surface-critical: $color-red-100;
-$surface-warning: $color-amber-100;
-$surface-success: $color-green-100;
-
-$fill: $color-neutral-00;
-$fill-hover: $color-neutral-200;
-$fill-on-press: $color-neutral-300;
-$fill-selected: $color-neutral-300;
-$fill-disabled: $color-neutral-250;
-$fill-brand: $color-blue-600;
-$fill-brand-hover: $color-blue-700;
-$fill-brand-on-press: $color-blue-800;
-$fill-brand-selected: $color-blue-900;
-$fill-brand-disabled: $color-neutral-400;
-$fill-critical-secondary: $color-red-50;
-$fill-critical: $color-red-600;
-$fill-critical-hover: $color-red-700;
-$fill-critical-on-press: $color-red-800;
-$fill-critical-selected: $color-red-900;
-$fill-warning: $color-amber-300;
-$fill-warning-hover: $color-amber-400;
-$fill-warning-on-press: $color-amber-500;
-$fill-warning-selected: $color-amber-600;
-$fill-success-secondary: $color-green-100;
-
-$border: $color-neutral-250;
-$border-disabled: $color-neutral-250;
-$border-critical: $color-red-700;
-$border-success: $color-green-700;
-$border-brand: $color-blue-700;
-$border-warning: $color-amber-700;
-
-$input-border: $color-neutral-500;
-$input-border-active: $color-neutral-700;
-$input-border-disabled: $color-neutral-250;
-$input-bg-surface: $color-neutral-00;
-$input-bg-surface-hover: $color-neutral-100;
-$input-bg-surface-active: $color-neutral-00;
-$input-bg-surface-disabled: $color-neutral-250;
-
-$icon: $color-neutral-800;
-$icon-secondary: $color-neutral-600;
-$icon-disabled: $color-neutral-450;
-$icon-on-bg-fill-brand: $color-blue-100;
-$icon-on-bg-fill-warning: $color-amber-950;
-$icon-on-bg-fill-critical: $color-neutral-00;
-$icon-critical: $color-red-800;
-$icon-emphasis: $color-blue-800;
-$icon-emphasis-hover: $color-blue-900;
-$icon-emphasis-on-press: $color-blue-950;
-$icon-emphasis-selected: $color-blue-950;
-$icon-warning: $color-amber-700;
-$icon-success: $color-green-700;
-
-$nav-bg: $color-neutral-150;
-$nav-bg-surface: $color-neutral-150;
-$nav-bg-surface-hover: $color-neutral-50;
-$nav-bg-surface-on-press: $color-neutral-00;
-$nav-bg-surface-selected: $color-neutral-00;
-$nav-bg-surface-selected-no-hover: $color-neutral-200;
-
-$border-active: $color-neutral-700;
-$border-input: $color-neutral-400;
-$border-input-active: $color-neutral-700;
-$border-input-disabled: $color-neutral-250;
-
-$backdrop: #00000030;
-
-$fill-lime: $color-lime-300;
-$text-lime: $color-lime-950;
-$fill-blue: $color-blue-300;
-$text-blue: $color-blue-950;
-$fill-fuchsia: $color-fuchsia-300;
-$text-fuchsia: $color-fuchsia-950;
-$fill-teal: $color-teal-300;
-$text-teal: $color-teal-950;
-$fill-indigo: $color-indigo-300;
-$text-indigo: $color-indigo-950;
+//Primary tokens - SCSS variables redirecting to CSS custom properties
+
+$text: var(--text);
+$text-secondary: var(--text-secondary);
+$text-disabled: var(--text-disabled);
+$text-inverse: var(--text-inverse);
+$text-on-fill-brand: var(--text-on-fill-brand);
+$text-on-fill: var(--text-on-fill);
+$text-critical: var(--text-critical);
+$text-emphasis: var(--text-emphasis);
+$text-emphasis-hover: var(--text-emphasis-hover);
+$text-emphasis-on-press: var(--text-emphasis-on-press);
+$text-emphasis-selected: var(--text-emphasis-selected);
+$text-warning: var(--text-warning);
+$text-warning-on-bg-fill: var(--text-warning-on-bg-fill);
+$text-success: var(--text-success);
+
+$link: var(--link);
+$link-hover: var(--link-hover);
+$link-on-press: var(--link-on-press);
+
+$bg: var(--bg);
+$bg-inverse: var(--bg-inverse);
+$bg-mobile: var(--bg-mobile);
+
+$surface: var(--surface);
+$surface-inverse: var(--surface-inverse);
+$surface-hover: var(--surface-hover);
+$surface-on-press: var(--surface-on-press);
+$surface-selected: var(--surface-selected);
+$surface-secondary: var(--surface-secondary);
+$surface-secondary-hover: var(--surface-secondary-hover);
+$surface-secondary-on-press: var(--surface-secondary-on-press);
+$surface-secondary-selected: var(--surface-secondary-selected);
+$surface-brand: var(--surface-brand);
+$surface-critical: var(--surface-critical);
+$surface-warning: var(--surface-warning);
+$surface-success: var(--surface-success);
+
+$fill: var(--fill);
+$fill-hover: var(--fill-hover);
+$fill-on-press: var(--fill-on-press);
+$fill-selected: var(--fill-selected);
+$fill-disabled: var(--fill-disabled);
+$fill-brand: var(--fill-brand);
+$fill-brand-hover: var(--fill-brand-hover);
+$fill-brand-on-press: var(--fill-brand-on-press);
+$fill-brand-selected: var(--fill-brand-selected);
+$fill-brand-disabled: var(--fill-brand-disabled);
+$fill-critical-secondary: var(--fill-critical-secondary);
+$fill-critical: var(--fill-critical);
+$fill-critical-hover: var(--fill-critical-hover);
+$fill-critical-on-press: var(--fill-critical-on-press);
+$fill-critical-selected: var(--fill-critical-selected);
+$fill-warning: var(--fill-warning);
+$fill-warning-hover: var(--fill-warning-hover);
+$fill-warning-on-press: var(--fill-warning-on-press);
+$fill-warning-selected: var(--fill-warning-selected);
+$fill-success-secondary: var(--fill-success-secondary);
+
+$border: var(--border);
+$border-disabled: var(--border-disabled);
+$border-critical: var(--border-critical);
+$border-success: var(--border-success);
+$border-brand: var(--border-brand);
+$border-warning: var(--border-warning);
+
+$input-border: var(--input-border);
+$input-border-active: var(--input-border-active);
+$input-border-disabled: var(--input-border-disabled);
+$input-bg-surface: var(--input-bg-surface);
+$input-bg-surface-hover: var(--input-bg-surface-hover);
+$input-bg-surface-active: var(--input-bg-surface-active);
+$input-bg-surface-disabled: var(--input-bg-surface-disabled);
+
+$icon: var(--icon);
+$icon-secondary: var(--icon-secondary);
+$icon-disabled: var(--icon-disabled);
+$icon-on-bg-fill-brand: var(--icon-on-bg-fill-brand);
+$icon-on-bg-fill-warning: var(--icon-on-bg-fill-warning);
+$icon-on-bg-fill-critical: var(--icon-on-bg-fill-critical);
+$icon-critical: var(--icon-critical);
+$icon-emphasis: var(--icon-emphasis);
+$icon-emphasis-hover: var(--icon-emphasis-hover);
+$icon-emphasis-on-press: var(--icon-emphasis-on-press);
+$icon-emphasis-selected: var(--icon-emphasis-selected);
+$icon-warning: var(--icon-warning);
+$icon-success: var(--icon-success);
+
+$nav-bg: var(--nav-bg);
+$nav-bg-surface: var(--nav-bg-surface);
+$nav-bg-surface-hover: var(--nav-bg-surface-hover);
+$nav-bg-surface-on-press: var(--nav-bg-surface-on-press);
+$nav-bg-surface-selected: var(--nav-bg-surface-selected);
+$nav-bg-surface-selected-no-hover: var(--nav-bg-surface-selected-no-hover);
+
+$border-active: var(--border-active);
+$border-input: var(--border-input);
+$border-input-active: var(--border-input-active);
+$border-input-disabled: var(--border-input-disabled);
+
+$backdrop: var(--backdrop);
+
+$fill-lime: var(--fill-lime);
+$text-lime: var(--text-lime);
+$fill-blue: var(--fill-blue);
+$text-blue: var(--text-blue);
+$fill-fuchsia: var(--fill-fuchsia);
+$text-fuchsia: var(--text-fuchsia);
+$fill-teal: var(--fill-teal);
+$text-teal: var(--text-teal);
+$fill-indigo: var(--fill-indigo);
+$text-indigo: var(--text-indigo);
 
 $card-padding: $space-400;
 $button-group-gap: $space-200;
@@ -378,45 +1003,45 @@ $section-header-section-content-gap-mobile: $space-200;
 $text-field-group-gap-mobile: $space-400;
 
 //decorative tokens
-$text-decorative-blue: $color-blue-950;
-$text-decorative-violet: $color-violet-950;
-$text-decorative-fuchsia: $color-fuchsia-950;
-$text-decorative-lime: $color-lime-950;
-$text-decorative-teal: $color-teal-950;
-$text-decorative-indigo: $color-indigo-950;
-$text-decorative-red: $color-red-950;
-$text-decorative-amber: $color-amber-950;
-$text-decorative-green: $color-green-950;
-
-$surface-decorative-blue: $color-blue-100;
-$surface-decorative-violet: $color-violet-100;
-$surface-decorative-fuchsia: $color-fuchsia-100;
-$surface-decorative-red: $color-red-100;
-$surface-decorative-amber: $color-amber-100;
-$surface-decorative-green: $color-green-100;
-$surface-decorative-lime: $color-lime-100;
-$surface-decorative-indigo: $color-indigo-100;
-$surface-decorative-teal: $color-teal-100;
-
-$fill-decorative-blue: $color-blue-300;
-$fill-decorative-violet: $color-violet-300;
-$fill-decorative-fuchsia: $color-fuchsia-300;
-$fill-decorative-lime: $color-lime-300;
-$fill-decorative-teal: $color-teal-300;
-$fill-decorative-indigo: $color-indigo-300;
-$fill-decorative-red: $color-red-300;
-$fill-decorative-amber: $color-amber-300;
-$fill-decorative-green: $color-green-300;
-
-$bg-icon-decorative-blue: $color-blue-500;
-$bg-icon-decorative-violet: $color-violet-500;
-$bg-icon-decorative-fuchsia: $color-fuchsia-500;
-$bg-icon-decorative-red: $color-red-500;
-$bg-icon-decorative-amber: $color-amber-500;
-$bg-icon-decorative-green: $color-green-500;
-$bg-icon-decorative-lime: $color-lime-500;
-$bg-icon-decorative-indigo: $color-indigo-500;
-$bg-icon-decorative-teal: $color-teal-500;
+$text-decorative-blue: var(--text-decorative-blue);
+$text-decorative-violet: var(--text-decorative-violet);
+$text-decorative-fuchsia: var(--text-decorative-fuchsia);
+$text-decorative-lime: var(--text-decorative-lime);
+$text-decorative-teal: var(--text-decorative-teal);
+$text-decorative-indigo: var(--text-decorative-indigo);
+$text-decorative-red: var(--text-decorative-red);
+$text-decorative-amber: var(--text-decorative-amber);
+$text-decorative-green: var(--text-decorative-green);
+
+$surface-decorative-blue: var(--surface-decorative-blue);
+$surface-decorative-violet: var(--surface-decorative-violet);
+$surface-decorative-fuchsia: var(--surface-decorative-fuchsia);
+$surface-decorative-red: var(--surface-decorative-red);
+$surface-decorative-amber: var(--surface-decorative-amber);
+$surface-decorative-green: var(--surface-decorative-green);
+$surface-decorative-lime: var(--surface-decorative-lime);
+$surface-decorative-indigo: var(--surface-decorative-indigo);
+$surface-decorative-teal: var(--surface-decorative-teal);
+
+$fill-decorative-blue: var(--fill-decorative-blue);
+$fill-decorative-violet: var(--fill-decorative-violet);
+$fill-decorative-fuchsia: var(--fill-decorative-fuchsia);
+$fill-decorative-lime: var(--fill-decorative-lime);
+$fill-decorative-teal: var(--fill-decorative-teal);
+$fill-decorative-indigo: var(--fill-decorative-indigo);
+$fill-decorative-red: var(--fill-decorative-red);
+$fill-decorative-amber: var(--fill-decorative-amber);
+$fill-decorative-green: var(--fill-decorative-green);
+
+$bg-icon-decorative-blue: var(--bg-icon-decorative-blue);
+$bg-icon-decorative-violet: var(--bg-icon-decorative-violet);
+$bg-icon-decorative-fuchsia: var(--bg-icon-decorative-fuchsia);
+$bg-icon-decorative-red: var(--bg-icon-decorative-red);
+$bg-icon-decorative-amber: var(--bg-icon-decorative-amber);
+$bg-icon-decorative-green: var(--bg-icon-decorative-green);
+$bg-icon-decorative-lime: var(--bg-icon-decorative-lime);
+$bg-icon-decorative-indigo: var(--bg-icon-decorative-indigo);
+$bg-icon-decorative-teal: var(--bg-icon-decorative-teal);
 
 //deprecated and not in use
 $button-group-gap: $space-200;