style(css): add centralized oklch color system
This commit is contained in:
DanielS
@@ -2,110 +2,58 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer base {
|
html {
|
||||||
:root {
|
color-scheme: dark;
|
||||||
/* 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%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */
|
:root {
|
||||||
@media (prefers-contrast: more) {
|
/* OKLCH Zentral-Farbsystem */
|
||||||
:root {
|
--oklch-background: 0.145 0.01 148;
|
||||||
--foreground: 0 0% 0%;
|
--oklch-surface: 0.20 0.01 148;
|
||||||
--muted-foreground: 0 0% 0%;
|
--oklch-surface-hover: 0.25 0.012 148;
|
||||||
--border: 0 0% 0%;
|
--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 {
|
/* Classic HSL Mappings */
|
||||||
--background: 0 0% 0%;
|
--background: 240 10% 3.9%;
|
||||||
--foreground: 0 0% 100%;
|
--foreground: 0 0% 98%;
|
||||||
--muted-foreground: 0 0% 100%;
|
--card: 240 10% 3.9%;
|
||||||
--border: 0 0% 100%;
|
--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 {
|
input, select, textarea, option {
|
||||||
* {
|
background-color: oklch(var(--oklch-surface)) !important;
|
||||||
@apply border-border;
|
color: oklch(var(--oklch-text-main)) !important;
|
||||||
}
|
border: 1px solid oklch(var(--oklch-border) / 0.4) !important;
|
||||||
|
|
||||||
body {
|
|
||||||
@apply bg-background text-foreground antialiased;
|
|
||||||
font-feature-settings: "rlig" 1, "calt" 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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) */
|
option {
|
||||||
.glass {
|
color: oklch(var(--oklch-text-main)) !important;
|
||||||
@apply bg-white/20 backdrop-blur-md border border-white/40;
|
background-color: oklch(var(--oklch-surface)) !important;
|
||||||
}
|
|
||||||
|
|
||||||
.glass-dark {
|
|
||||||
@apply bg-black/40 backdrop-blur-md border border-white/20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gradient {
|
|
||||||
@apply text-blue-500 dark:text-blue-400;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -11,7 +11,23 @@ export default {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
background: "hsl(var(--background))",
|
background: "oklch(var(--oklch-background) / <alpha-value>)",
|
||||||
|
surface: {
|
||||||
|
DEFAULT: "oklch(var(--oklch-surface) / <alpha-value>)",
|
||||||
|
hover: "oklch(var(--oklch-surface-hover) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "oklch(var(--oklch-primary) / <alpha-value>)",
|
||||||
|
hover: "oklch(var(--oklch-primary-hover) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "oklch(var(--oklch-secondary) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
|
},
|
||||||
|
"text-main": "oklch(var(--oklch-text-main) / <alpha-value>)",
|
||||||
|
"text-muted": "oklch(var(--oklch-text-muted) / <alpha-value>)",
|
||||||
|
border: "oklch(var(--oklch-border) / <alpha-value>)",
|
||||||
foreground: "hsl(var(--foreground))",
|
foreground: "hsl(var(--foreground))",
|
||||||
card: {
|
card: {
|
||||||
DEFAULT: "hsl(var(--card))",
|
DEFAULT: "hsl(var(--card))",
|
||||||
@@ -21,14 +37,6 @@ export default {
|
|||||||
DEFAULT: "hsl(var(--popover))",
|
DEFAULT: "hsl(var(--popover))",
|
||||||
foreground: "hsl(var(--popover-foreground))",
|
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: {
|
muted: {
|
||||||
DEFAULT: "hsl(var(--muted))",
|
DEFAULT: "hsl(var(--muted))",
|
||||||
foreground: "hsl(var(--muted-foreground))",
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
@@ -41,7 +49,6 @@ export default {
|
|||||||
DEFAULT: "hsl(var(--destructive))",
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
foreground: "hsl(var(--destructive-foreground))",
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
},
|
},
|
||||||
border: "hsl(var(--border))",
|
|
||||||
input: "hsl(var(--input))",
|
input: "hsl(var(--input))",
|
||||||
ring: "hsl(var(--ring))",
|
ring: "hsl(var(--ring))",
|
||||||
chart: {
|
chart: {
|
||||||
|
|||||||
Reference in New Issue
Block a user