Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(branding): add global dynamic theme system and fix 2fa mail

Browse Source
This commit is contained in:
DanielS
2026-08-14 15:57:29 +02:00
parent 009b167cbd
commit 9ecdc645e8
22 changed files with 1764 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
shop/app/globals.css
View File

@@ -2,7 +2,6 @@
@tailwind components;
@tailwind utilities;
html {
color-scheme: dark;
}
@@ -19,6 +18,17 @@ html {
--oklch-text-muted: 0.70 0.01 148;
--oklch-border: 0.31 0.012 148;
/* Dynamische Branding Variablen */
--primary-custom: #2563eb;
--accent-custom: #38bdf8;
--success-custom: #10b981;
--warning-custom: #f59e0b;
--destructive-custom: #ef4444;
--bg-glow-1: #3b82f6;
--bg-glow-2: #1d4ed8;
--gradient-from: #2563eb;
--gradient-to: #1e40af;
/* Classic HSL Mappings */
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
@@ -42,6 +52,75 @@ html {
--radius: 0.75rem;
}
/* Dynamische Brand-Farbanpassungen */
.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600 {
background-color: var(--primary-custom) !important;
}
.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover {
background-color: var(--primary-custom) !important;
filter: brightness(1.1);
}
.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400 {
color: var(--primary-custom) !important;
}
.border-blue-500, .border-blue-600, .border-violet-500 {
border-color: var(--primary-custom) !important;
}
.from-blue-600, .from-blue-500, .from-violet-600 {
--tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
--tw-gradient-to: rgb(255 255 255 / 0) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-indigo-600, .to-indigo-500, .to-sky-500, .to-sky-400, .to-violet-500 {
--tw-gradient-to: var(--gradient-to, var(--accent-custom)) !important;
}
/* Dynamische Signalfarben (Success, Warning, Destructive) */
.bg-emerald-500, .bg-green-500, .bg-emerald-600, .bg-green-600 {
background-color: var(--success-custom) !important;
}
.text-emerald-400, .text-green-400, .text-emerald-500, .text-green-500, .text-green-600 {
color: var(--success-custom) !important;
}
.border-emerald-500, .border-green-500 {
border-color: var(--success-custom) !important;
}
.bg-amber-500, .bg-amber-600 {
background-color: var(--warning-custom) !important;
}
.text-amber-400, .text-amber-500, .text-amber-600 {
color: var(--warning-custom) !important;
}
.border-amber-500, .border-amber-600 {
border-color: var(--warning-custom) !important;
}
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
background-color: var(--destructive-custom) !important;
}
.text-red-500, .text-red-400, .text-rose-400, .text-rose-500 {
color: var(--destructive-custom) !important;
}
.border-red-500, .border-rose-500 {
border-color: var(--destructive-custom) !important;
}
.blur-\[120px\] {
background-color: var(--bg-glow-1) !important;
}
input, select, textarea, option {
background-color: oklch(var(--oklch-surface)) !important;
color: oklch(var(--oklch-text-main)) !important;
@@ -49,9 +128,9 @@ input, select, textarea, option {
}
input:focus, select:focus, textarea:focus {
border-color: oklch(var(--oklch-primary)) !important;
border-color: var(--primary-custom) !important;
outline: none !important;
box-shadow: 0 0 0 2px oklch(var(--oklch-primary) / 0.2) !important;
box-shadow: 0 0 0 2px var(--primary-custom) !important;
}
option {