From 03087f4fbba5985aa1aef2066d1797d976bd931e Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 18 Aug 2026 15:30:24 +0200
Subject: [PATCH] feat(theme): configure colors via global css variables

---
 shop/app/globals.css                       | 24 ++++++++++-
 shop/components/admin/ColorThemePicker.tsx | 46 +++++++++++-----------
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/shop/app/globals.css b/shop/app/globals.css
index 18578fa..a443357 100644
--- a/shop/app/globals.css
+++ b/shop/app/globals.css
@@ -151,11 +151,33 @@ html {
   border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
 }
 
-/* Background Glowing Orbs */
+/* Background Glowing Orbs & Dynamic Surfaces */
 .blur-\[120px\] {
   background-color: var(--bg-glow-1) !important;
 }
 
+.bg-\[\#020617\] {
+  background-color: oklch(var(--oklch-background)) !important;
+}
+
+/* Dynamische Buttons & Badges über globale CSS Variablen */
+.btn-primary-theme, .bg-primary-theme {
+  background-color: var(--button-bg, var(--primary-custom)) !important;
+  color: #ffffff !important;
+}
+
+.text-highlight-theme {
+  color: var(--text-highlight, var(--accent-custom)) !important;
+}
+
+.border-glow-theme {
+  border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
+}
+
+.ring-theme {
+  --tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
+}
+
 input, select, textarea, option {
   background-color: oklch(var(--oklch-surface)) !important;
   color: oklch(var(--oklch-text-main)) !important;
diff --git a/shop/components/admin/ColorThemePicker.tsx b/shop/components/admin/ColorThemePicker.tsx
index 8f3210f..c64294f 100644
--- a/shop/components/admin/ColorThemePicker.tsx
+++ b/shop/components/admin/ColorThemePicker.tsx
@@ -58,16 +58,16 @@ export function ColorThemePicker({
             const isSelected = colorScheme === preset.id
 
             const tokenSwatches = [
-              preset.primary,
-              preset.accent,
-              preset.bgGlow1,
-              preset.bgGlow2,
-              preset.gradientFrom,
-              preset.gradientTo,
-              preset.textHighlight,
-              preset.buttonBg,
-              preset.ringColor,
-              preset.cardBorder,
+              { name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
+              { name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
+              { name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
+              { name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
+              { name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
+              { name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
+              { name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
+              { name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
+              { name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
+              { name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
             ]
 
             return (
@@ -99,12 +99,12 @@ export function ColorThemePicker({
                 {/* 10 Color Token Swatches Bar */}
                 <div className="space-y-1 pt-1 border-t border-slate-800/60">
                   <div className="flex items-center gap-1 justify-between">
-                    {tokenSwatches.map((color, i) => (
+                    {tokenSwatches.map((item, i) => (
                       <span
                         key={i}
-                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0"
-                        style={{ backgroundColor: color }}
-                        title={`Token ${i + 1}: ${color}`}
+                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
+                        style={{ backgroundColor: item.color }}
+                        title={`${item.name}: ${item.desc} (${item.color})`}
                       />
                     ))}
                   </div>
@@ -199,11 +199,11 @@ export function ColorThemePicker({
           {/* Animated Background Orbs Preview */}
           <div
             className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow1 || primaryColor }}
+            style={{ backgroundColor: 'var(--bg-glow-1, ' + (activePreset.bgGlow1 || primaryColor) + ')' }}
           />
           <div
             className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow2 || accentColor }}
+            style={{ backgroundColor: 'var(--bg-glow-2, ' + (activePreset.bgGlow2 || accentColor) + ')' }}
           />
 
           {/* Header Preview */}
@@ -211,7 +211,7 @@ export function ColorThemePicker({
             <div className="flex items-center gap-2">
               <div
                 className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md"
-                style={{ backgroundColor: primaryColor }}
+                style={{ backgroundColor: 'var(--primary-custom, ' + primaryColor + ')' }}
               >
                 <Building2 className="w-3.5 h-3.5" />
               </div>
@@ -221,7 +221,7 @@ export function ColorThemePicker({
             </div>
             <span
               className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold"
-              style={{ backgroundColor: accentColor }}
+              style={{ backgroundColor: 'var(--accent-custom, ' + accentColor + ')' }}
             >
               Aktiv
             </span>
@@ -233,7 +233,7 @@ export function ColorThemePicker({
               type="button"
               className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all"
               style={{
-                background: `linear-gradient(135deg, ${primaryColor} 0%, ${activePreset.gradientTo || primaryColor} 100%)`,
+                background: `linear-gradient(135deg, var(--gradient-from, ${primaryColor}) 0%, var(--gradient-to, ${activePreset.gradientTo || primaryColor}) 100%)`,
               }}
             >
               <ShoppingCart className="w-3.5 h-3.5" />
@@ -243,7 +243,7 @@ export function ColorThemePicker({
             <button
               type="button"
               className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border"
-              style={{ borderColor: accentColor }}
+              style={{ borderColor: 'var(--accent-custom, ' + accentColor + ')' }}
             >
               Details anzeigen
             </button>
@@ -251,9 +251,9 @@ export function ColorThemePicker({
             <span
               className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
               style={{
-                borderColor: `${accentColor}40`,
-                backgroundColor: `${accentColor}15`,
-                color: activePreset.textHighlight || accentColor,
+                borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
+                backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
+                color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
               }}
             >
               <Tag className="w-3 h-3" />