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

style(globals): add color-mix transparency rules
All checks were successful
Staging Build / build (push) Successful in 3m13s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-14 16:04:43 +02:00
parent 9ecdc645e8
commit 682863ab26
1 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
shop/app/globals.css
View File

@@ -52,24 +52,34 @@ html {
--radius: 0.75rem; --radius: 0.75rem;
} }
/* Dynamische Brand-Farbanpassungen */ /* 100% Dynamische Farbbindung für das gesamte Webshop Design-System */
.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600 { .bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600, .bg-sky-500, .bg-cyan-600, .bg-indigo-600 {
background-color: var(--primary-custom) !important; background-color: var(--primary-custom) !important;
} }
.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover { .hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover, .hover\:bg-blue-600:hover {
background-color: var(--primary-custom) !important; background-color: var(--primary-custom) !important;
filter: brightness(1.1); filter: brightness(1.1);
} }
.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400 { .text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400, .text-sky-300, .text-indigo-400 {
color: var(--primary-custom) !important; color: var(--primary-custom) !important;
} }
.border-blue-500, .border-blue-600, .border-violet-500 { .border-blue-500, .border-blue-600, .border-violet-500, .border-sky-500 {
border-color: var(--primary-custom) !important; border-color: var(--primary-custom) !important;
} }
/* Dynamische Transparenz-Schichten & Badges mit color-mix */
[class*="bg-blue-500/"], [class*="bg-violet-500/"], [class*="bg-purple-500/"], [class*="bg-sky-500/"] {
background-color: color-mix(in srgb, var(--primary-custom) 15%, transparent) !important;
}
[class*="border-blue-500/"], [class*="border-violet-500/"], [class*="border-purple-500/"], [class*="border-sky-500/"] {
border-color: color-mix(in srgb, var(--primary-custom) 35%, transparent) !important;
}
/* Dynamische Gradients */
.from-blue-600, .from-blue-500, .from-violet-600 { .from-blue-600, .from-blue-500, .from-violet-600 {
--tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important; --tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
--tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-to: rgb(255 255 255 / 0) !important;
@@ -93,6 +103,14 @@ html {
border-color: var(--success-custom) !important; border-color: var(--success-custom) !important;
} }
[class*="bg-emerald-500/"], [class*="bg-green-500/"] {
background-color: color-mix(in srgb, var(--success-custom) 15%, transparent) !important;
}
[class*="border-emerald-500/"], [class*="border-green-500/"] {
border-color: color-mix(in srgb, var(--success-custom) 35%, transparent) !important;
}
.bg-amber-500, .bg-amber-600 { .bg-amber-500, .bg-amber-600 {
background-color: var(--warning-custom) !important; background-color: var(--warning-custom) !important;
} }
@@ -105,6 +123,14 @@ html {
border-color: var(--warning-custom) !important; border-color: var(--warning-custom) !important;
} }
[class*="bg-amber-500/"] {
background-color: color-mix(in srgb, var(--warning-custom) 15%, transparent) !important;
}
[class*="border-amber-500/"] {
border-color: color-mix(in srgb, var(--warning-custom) 35%, transparent) !important;
}
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 { .bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
background-color: var(--destructive-custom) !important; background-color: var(--destructive-custom) !important;
} }
@@ -117,6 +143,15 @@ html {
border-color: var(--destructive-custom) !important; border-color: var(--destructive-custom) !important;
} }
[class*="bg-red-500/"], [class*="bg-rose-500/"] {
background-color: color-mix(in srgb, var(--destructive-custom) 15%, transparent) !important;
}
[class*="border-red-500/"], [class*="border-rose-500/"] {
border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
}
/* Background Glowing Orbs */
.blur-\[120px\] { .blur-\[120px\] {
background-color: var(--bg-glow-1) !important; background-color: var(--bg-glow-1) !important;
} }