Add missing Tailwind palette colors to themes CSS

Author: webstackdev

_TODO.md

@@ -213,3 +213,30 @@ Error Context: .cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-ha
 --color-orange-100
 --color-purple-100
 --color-purple-600
+
+Good Next Cascade Candidates (similar spirit to the text-* cleanup)
+
+Global/link-default underline styling (biggest repetition)
+
+Evidence: the exact pattern underline decoration-dotted decoration-content underline-offset-4 ... shows up 15 times across just 3 components (Footer/Calendar/BugReporter).
+What to cascade: give “normal text links” a default underline style (dotted + decoration-content + offset) via base CSS (or a shared wrapper scope), and then only override the exceptions.
+Tradeoff: global a { … } is powerful but can surprise you (nav links, button-like links). A scoped approach (e.g., only inside markdown/content areas or only inside certain layout wrappers) is safer.
+Forms: default label + help text styling
+
+Evidence: text-content-active in forms is still repeated ~25 times across 3 form components (Contact/Download/Privacy), often paired with text-sm font-medium.
+What to cascade: set label default to color: var(--color-content-active) and font-weight/size inside a form wrapper (e.g. .form root), so individual labels don’t need to specify it.
+Tradeoff: safest when scoped to the Forms components (not global label { … } site-wide).
+Inline style in JS validation errors (small but “smelly”)
+
+Evidence: validation.ts sets errorDiv.style.cssText = 'color: var(--color-danger); font-size: 0.85rem; ...'.
+What to cascade: assign a class and style it in CSS (then it inherits font family/line-height etc), instead of embedding presentation in JS.
+Tradeoff: not a huge volume win, but it’s a maintainability win and keeps styling consistent.
+Not worth it (yet)
+
+Placeholder color: only 4 placeholder:text-content-active occurrences right now, so the cascade win is small unless you want a stronger “form system” anyway.
+Font families: very few font-sans/serif/mono usages in components; most appear intentional.
+If you want me to implement, pick one:
+
+Scoped link cascade (safest)
+Forms label/microcopy cascade
+Both, but in small, surgical patches

src/styles/theme-inline.css

@@ -150,17 +150,23 @@
   --color-white: var(--theme-color-white); /* Light theme: #fff */
 
   /** Blues */
+  --color-blue-50: var(--theme-color-blue-50); /* Light theme: #eff6ff */
   --color-blue-100: var(--theme-color-blue-100); /* Light theme: #dbeafe */
+  --color-blue-200: var(--theme-color-blue-200); /* Light theme: #bfdbfe */
   --color-blue-300: var(--theme-color-blue-300); /* Light theme: #93c5fd */
+  --color-blue-400: var(--theme-color-blue-400); /* Light theme: #60a5fa */
+  --color-blue-500: var(--theme-color-blue-500); /* Light theme: #3b82f6 */
   --color-blue-600: var(--theme-color-blue-600); /* Light theme: #2563eb */
   --color-blue-800: var(--theme-color-blue-800); /* Light theme: #1e40af */
   --color-blue-900: var(--theme-color-blue-900); /* Light theme: #1e3a8a */
 
   /** Grays */
   --color-gray-50: var(--theme-color-gray-50); /* Light theme: #f9fafb */
+  --color-gray-100: var(--theme-color-gray-100); /* Light theme: #f3f4f6 */
   --color-gray-200: var(--theme-color-gray-200); /* Light theme: #e5e7eb */
   --color-gray-300: var(--theme-color-gray-300); /* Light theme: #d1d5db */
   --color-gray-400: var(--theme-color-gray-400); /* Light theme: #9ca3af */
+  --color-gray-500: var(--theme-color-gray-500); /* Light theme: #6b7280 */
   --color-gray-600: var(--theme-color-gray-600); /* Light theme: #4b5563 */
   --color-gray-700: var(--theme-color-gray-700); /* Light theme: #374151 */
   --color-gray-800: var(--theme-color-gray-800); /* Light theme: #1f2937 */
@@ -175,6 +181,13 @@
   --color-green-700: var(--theme-color-green-700); /* Light theme: #15803d */
   --color-green-900: var(--theme-color-green-900); /* Light theme: #14532d */
 
+  /** Oranges */
+  --color-orange-100: var(--theme-color-orange-100); /* Light theme: #ffedd5 */
+
+  /** Purples */
+  --color-purple-100: var(--theme-color-purple-100); /* Light theme: #f3e8ff */
+  --color-purple-600: var(--theme-color-purple-600); /* Light theme: #9333ea */
+
   /** Reds */
   --color-red-400: var(--theme-color-red-400); /* Light theme: #f87171 */
   --color-red-500: var(--theme-color-red-500); /* Light theme: #ef4444 */

src/styles/themes/a11y.css

@@ -42,15 +42,21 @@
   --a11y-theme-color-icons-active: #374151;
   --a11y-theme-color-black: #000;
   --a11y-theme-color-white: #fff;
+  --a11y-theme-color-blue-50: #eff6ff;
   --a11y-theme-color-blue-100: #dbeafe;
+  --a11y-theme-color-blue-200: #bfdbfe;
   --a11y-theme-color-blue-300: #93c5fd;
+  --a11y-theme-color-blue-400: #60a5fa;
+  --a11y-theme-color-blue-500: #3b82f6;
   --a11y-theme-color-blue-600: #2563eb;
   --a11y-theme-color-blue-800: #1e40af;
   --a11y-theme-color-blue-900: #1e3a8a;
   --a11y-theme-color-gray-50: #f9fafb;
+  --a11y-theme-color-gray-100: #f3f4f6;
   --a11y-theme-color-gray-200: #e5e7eb;
   --a11y-theme-color-gray-300: #d1d5db;
   --a11y-theme-color-gray-400: #9ca3af;
+  --a11y-theme-color-gray-500: #6b7280;
   --a11y-theme-color-gray-600: #4b5563;
   --a11y-theme-color-gray-700: #374151;
   --a11y-theme-color-gray-800: #1f2937;
@@ -62,6 +68,9 @@
   --a11y-theme-color-green-600: #16a34a;
   --a11y-theme-color-green-700: #15803d;
   --a11y-theme-color-green-900: #14532d;
+  --a11y-theme-color-orange-100: #ffedd5;
+  --a11y-theme-color-purple-100: #f3e8ff;
+  --a11y-theme-color-purple-600: #9333ea;
   --a11y-theme-color-red-400: #f87171;
   --a11y-theme-color-red-500: #ef4444;
   --a11y-theme-color-yellow-500: #eab308;
@@ -236,17 +245,23 @@
   --theme-color-white: var(--a11y-theme-color-white);
 
   /** Blues */
+  --theme-color-blue-50: var(--a11y-theme-color-blue-50);
   --theme-color-blue-100: var(--a11y-theme-color-blue-100);
+  --theme-color-blue-200: var(--a11y-theme-color-blue-200);
   --theme-color-blue-300: var(--a11y-theme-color-blue-300);
+  --theme-color-blue-400: var(--a11y-theme-color-blue-400);
+  --theme-color-blue-500: var(--a11y-theme-color-blue-500);
   --theme-color-blue-600: var(--a11y-theme-color-blue-600);
   --theme-color-blue-800: var(--a11y-theme-color-blue-800);
   --theme-color-blue-900: var(--a11y-theme-color-blue-900);
 
   /** Grays */
   --theme-color-gray-50: var(--a11y-theme-color-gray-50);
+  --theme-color-gray-100: var(--a11y-theme-color-gray-100);
   --theme-color-gray-200: var(--a11y-theme-color-gray-200);
   --theme-color-gray-300: var(--a11y-theme-color-gray-300);
   --theme-color-gray-400: var(--a11y-theme-color-gray-400);
+  --theme-color-gray-500: var(--a11y-theme-color-gray-500);
   --theme-color-gray-600: var(--a11y-theme-color-gray-600);
   --theme-color-gray-700: var(--a11y-theme-color-gray-700);
   --theme-color-gray-800: var(--a11y-theme-color-gray-800);
@@ -261,6 +276,13 @@
   --theme-color-green-700: var(--a11y-theme-color-green-700);
   --theme-color-green-900: var(--a11y-theme-color-green-900);
 
+  /** Oranges */
+  --theme-color-orange-100: var(--a11y-theme-color-orange-100);
+
+  /** Purples */
+  --theme-color-purple-100: var(--a11y-theme-color-purple-100);
+  --theme-color-purple-600: var(--a11y-theme-color-purple-600);
+
   /** Reds */
   --theme-color-red-400: var(--a11y-theme-color-red-400);
   --theme-color-red-500: var(--a11y-theme-color-red-500);

src/styles/themes/dark.css

@@ -152,17 +152,23 @@
   --theme-color-white: #fff;
 
   /** Blues */
+  --theme-color-blue-50: #eff6ff;
   --theme-color-blue-100: #dbeafe;
+  --theme-color-blue-200: #bfdbfe;
   --theme-color-blue-300: #93c5fd;
+  --theme-color-blue-400: #60a5fa;
+  --theme-color-blue-500: #3b82f6;
   --theme-color-blue-600: #2563eb;
   --theme-color-blue-800: #1e40af;
   --theme-color-blue-900: #1e3a8a;
 
   /** Grays */
   --theme-color-gray-50: #f9fafb;
+  --theme-color-gray-100: #f3f4f6;
   --theme-color-gray-200: #e5e7eb;
   --theme-color-gray-300: #d1d5db;
   --theme-color-gray-400: #9ca3af;
+  --theme-color-gray-500: #6b7280;
   --theme-color-gray-600: #4b5563;
   --theme-color-gray-700: #374151;
   --theme-color-gray-800: #1f2937;
@@ -177,6 +183,13 @@
   --theme-color-green-700: #15803d;
   --theme-color-green-900: #14532d;
 
+  /** Oranges */
+  --theme-color-orange-100: #ffedd5;
+
+  /** Purples */
+  --theme-color-purple-100: #f3e8ff;
+  --theme-color-purple-600: #9333ea;
+
   /** Reds */
   --theme-color-red-400: #f87171;
   --theme-color-red-500: #ef4444;

src/styles/themes/holiday.css

@@ -152,17 +152,23 @@
   --theme-color-white: #fff;
 
   /** Blues */
+  --theme-color-blue-50: #eff6ff;
   --theme-color-blue-100: #dbeafe;
+  --theme-color-blue-200: #bfdbfe;
   --theme-color-blue-300: #93c5fd;
+  --theme-color-blue-400: #60a5fa;
+  --theme-color-blue-500: #3b82f6;
   --theme-color-blue-600: #2563eb;
   --theme-color-blue-800: #1e40af;
   --theme-color-blue-900: #1e3a8a;
 
   /** Grays */
   --theme-color-gray-50: #f9fafb;
+  --theme-color-gray-100: #f3f4f6;
   --theme-color-gray-200: #e5e7eb;
   --theme-color-gray-300: #d1d5db;
   --theme-color-gray-400: #9ca3af;
+  --theme-color-gray-500: #6b7280;
   --theme-color-gray-600: #4b5563;
   --theme-color-gray-700: #374151;
   --theme-color-gray-800: #1f2937;
@@ -177,6 +183,13 @@
   --theme-color-green-700: #15803d;
   --theme-color-green-900: #14532d;
 
+  /** Oranges */
+  --theme-color-orange-100: #ffedd5;
+
+  /** Purples */
+  --theme-color-purple-100: #f3e8ff;
+  --theme-color-purple-600: #9333ea;
+
   /** Reds */
   --theme-color-red-400: #f87171;
   --theme-color-red-500: #ef4444;

src/styles/themes/light.css

@@ -152,17 +152,23 @@
   --theme-color-white: #fff;
 
   /** Blues */
+  --theme-color-blue-50: #eff6ff;
   --theme-color-blue-100: #dbeafe;
+  --theme-color-blue-200: #bfdbfe;
   --theme-color-blue-300: #93c5fd;
+  --theme-color-blue-400: #60a5fa;
+  --theme-color-blue-500: #3b82f6;
   --theme-color-blue-600: #2563eb;
   --theme-color-blue-800: #1e40af;
   --theme-color-blue-900: #1e3a8a;
 
   /** Grays */
   --theme-color-gray-50: #f9fafb;
+  --theme-color-gray-100: #f3f4f6;
   --theme-color-gray-200: #e5e7eb;
   --theme-color-gray-300: #d1d5db;
   --theme-color-gray-400: #9ca3af;
+  --theme-color-gray-500: #6b7280;
   --theme-color-gray-600: #4b5563;
   --theme-color-gray-700: #374151;
   --theme-color-gray-800: #1f2937;
@@ -177,6 +183,13 @@
   --theme-color-green-700: #15803d;
   --theme-color-green-900: #14532d;
 
+  /** Oranges */
+  --theme-color-orange-100: #ffedd5;
+
+  /** Purples */
+  --theme-color-purple-100: #f3e8ff;
+  --theme-color-purple-600: #9333ea;
+
   /** Reds */
   --theme-color-red-400: #f87171;
   --theme-color-red-500: #ef4444;