gawells/Stalwart-webui
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Distinguish form field backgrounds from card surfaces

Browse Source 
Introduce a --field design token (page background tone) used by inputs, textareas and select triggers, and raise the dark-mode card lightness so cards read as elevated surfaces with inset fields, following the shadcn convention.
This commit is contained in:
Steven RYDELL
2026-07-29 06:15:49 +02:00
parent a657ad1b93
commit eb57250409
5 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+8 -1
View File
@@ -37,6 +37,10 @@
--input: oklch(0.922 0.007 285.823);
--ring: oklch(0.708 0.015 285.823);
/* Form fields use the page background tone so cards read as elevated
surfaces (shadcn convention: inset fields on a raised card). */
--field: var(--background);
--radius: 0.5rem;
--chart-1: 220 70% 50%;
@@ -50,7 +54,7 @@
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0.002 285.823);
--card: oklch(0.205 0.007 285.823);
--card: oklch(0.235 0.008 285.823);
--card-foreground: oklch(0.985 0.002 285.823);
--popover: oklch(0.205 0.007 285.823);
@@ -77,6 +81,8 @@
--input: oklch(0.274 0.009 285.823);
--ring: oklch(0.553 0.013 285.823);
--field: var(--background);
--chart-1: 220 70% 60%;
--chart-2: 160 60% 55%;
--chart-3: 30 80% 60%;
@@ -113,6 +119,7 @@
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-field: var(--field);
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));