From a94f883ab6c18a67fccbb94d35b222bb0caa7070 Mon Sep 17 00:00:00 2001 From: DanielS Date: Thu, 6 Aug 2026 17:32:21 +0200 Subject: [PATCH] style(css): add centralized oklch color system --- shop/app/globals.css | 144 +++++++++++++--------------------------- shop/tailwind.config.ts | 27 +++++--- 2 files changed, 63 insertions(+), 108 deletions(-) diff --git a/shop/app/globals.css b/shop/app/globals.css index dc8abe9..e4d740f 100644 --- a/shop/app/globals.css +++ b/shop/app/globals.css @@ -2,110 +2,58 @@ @tailwind components; @tailwind utilities; -@layer base { - :root { - /* Light Mode: Maximierter Kontrast (Reines Weißer Hintergrund + Tiefschwarzer Text) */ - --background: 0 0% 100%; - --foreground: 224 71% 4%; - --card: 0 0% 100%; - --card-foreground: 224 71% 4%; - --popover: 0 0% 100%; - --popover-foreground: 224 71% 4%; - - /* Primary: Cyan/Blau lesbarer gemacht */ - --primary: 199 100% 35%; - --primary-foreground: 0 0% 100%; - - /* Muted & Accent: Deutlich dunklerer Text für Barrierefreiheit */ - --secondary: 220 14% 90%; - --secondary-foreground: 224 71% 4%; - --muted: 220 14% 92%; - --muted-foreground: 220 20% 28%; - /* Vorher 40% Helligkeit, jetzt 28% (viel dunkler) */ - --accent: 220 14% 90%; - --accent-foreground: 224 71% 4%; - - --destructive: 0 84% 50%; - --destructive-foreground: 0 0% 100%; - --border: 220 14% 75%; - /* Grenzen sichtbarer gemacht */ - --input: 220 14% 75%; - --ring: 199 100% 35%; - --radius: 0.75rem; - } - - .dark { - /* Dark Mode: Reines Tiefschwarz erhöht den Kontrast zu weißem Text drastisch */ - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - - /* Muted Text: Helligkeit massiv erhöht, damit Beschreibungen lesbar sind */ - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 75%; - /* Vorher 56.9% Helligkeit, jetzt 75% (viel heller) */ - - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - - --destructive: 0 72% 51%; - /* Helleres Rot für dunklen Hintergrund */ - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 25%; - /* Grenzen im Dunkeln besser sichtbar */ - --input: 240 3.7% 25%; - --ring: 240 4.9% 83.9%; - } +html { + color-scheme: dark; } -/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */ -@media (prefers-contrast: more) { - :root { - --foreground: 0 0% 0%; - --muted-foreground: 0 0% 0%; - --border: 0 0% 0%; - } +:root { + /* OKLCH Zentral-Farbsystem */ + --oklch-background: 0.145 0.01 148; + --oklch-surface: 0.20 0.01 148; + --oklch-surface-hover: 0.25 0.012 148; + --oklch-primary: 0.68 0.18 255; + --oklch-primary-hover: 0.75 0.18 255; + --oklch-secondary: 0.76 0.15 155; + --oklch-text-main: 0.98 0 0; + --oklch-text-muted: 0.70 0.01 148; + --oklch-border: 0.31 0.012 148; - .dark { - --background: 0 0% 0%; - --foreground: 0 0% 100%; - --muted-foreground: 0 0% 100%; - --border: 0 0% 100%; - } + /* Classic HSL Mappings */ + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 217 91% 60%; + --primary-foreground: 0 0% 100%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 217 91% 60%; + --radius: 0.75rem; } -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground antialiased; - font-feature-settings: "rlig" 1, "calt" 1; - } +input, select, textarea, option { + background-color: oklch(var(--oklch-surface)) !important; + color: oklch(var(--oklch-text-main)) !important; + border: 1px solid oklch(var(--oklch-border) / 0.4) !important; } -@layer utilities { +input:focus, select:focus, textarea:focus { + border-color: oklch(var(--oklch-primary)) !important; + outline: none !important; + box-shadow: 0 0 0 2px oklch(var(--oklch-primary) / 0.2) !important; +} - /* Glassmorphism Kontraste geschärft (höhere Deckkraft) */ - .glass { - @apply bg-white/20 backdrop-blur-md border border-white/40; - } - - .glass-dark { - @apply bg-black/40 backdrop-blur-md border border-white/20; - } - - .text-gradient { - @apply text-blue-500 dark:text-blue-400; - } +option { + color: oklch(var(--oklch-text-main)) !important; + background-color: oklch(var(--oklch-surface)) !important; } \ No newline at end of file diff --git a/shop/tailwind.config.ts b/shop/tailwind.config.ts index 03323d5..3caaddd 100644 --- a/shop/tailwind.config.ts +++ b/shop/tailwind.config.ts @@ -11,7 +11,23 @@ export default { theme: { extend: { colors: { - background: "hsl(var(--background))", + background: "oklch(var(--oklch-background) / )", + surface: { + DEFAULT: "oklch(var(--oklch-surface) / )", + hover: "oklch(var(--oklch-surface-hover) / )", + }, + primary: { + DEFAULT: "oklch(var(--oklch-primary) / )", + hover: "oklch(var(--oklch-primary-hover) / )", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "oklch(var(--oklch-secondary) / )", + foreground: "hsl(var(--secondary-foreground))", + }, + "text-main": "oklch(var(--oklch-text-main) / )", + "text-muted": "oklch(var(--oklch-text-muted) / )", + border: "oklch(var(--oklch-border) / )", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", @@ -21,14 +37,6 @@ export default { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", @@ -41,7 +49,6 @@ export default { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, - border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: {