diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-24 17:53:32 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-24 17:53:32 +0100 |
| commit | 9ed46bea58dbb81ceada2a957fd1db653fb21e52 (patch) | |
| tree | f1cb09ad15571abbfae1c59105952330ec3a0502 /src/frontend/app/tailwind.css | |
| parent | 4a866f5352a51916ddb9849b2d68213856196c9c (diff) | |
Implement new UI styles
Diffstat (limited to 'src/frontend/app/tailwind.css')
| -rw-r--r-- | src/frontend/app/tailwind.css | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/src/frontend/app/tailwind.css b/src/frontend/app/tailwind.css index de604f7..7438ac7 100644 --- a/src/frontend/app/tailwind.css +++ b/src/frontend/app/tailwind.css @@ -3,4 +3,32 @@ @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); +@theme { + --color-primary: var(--button-background-color); + --color-background: var(--background-color); + --color-text: var(--text-color); + --color-subtitle: var(--subtitle-color); + --color-border: var(--border-color); + --color-surface: var(--message-background-color); + + --font-display: var(--font-display); + --font-sans: var(--font-ui); + + /* Semantic colors for easier migration from slate/gray */ + --color-muted: var(--subtitle-color); + --color-accent: var(--button-background-color); + + /* Generated-like palette using color-mix for flexibility */ + --color-primary-50: color-mix(in oklab, var(--button-background-color) 5%, white); + --color-primary-100: color-mix(in oklab, var(--button-background-color) 10%, white); + --color-primary-200: color-mix(in oklab, var(--button-background-color) 20%, white); + --color-primary-300: color-mix(in oklab, var(--button-background-color) 40%, white); + --color-primary-400: color-mix(in oklab, var(--button-background-color) 60%, white); + --color-primary-500: var(--button-background-color); + --color-primary-600: color-mix(in oklab, var(--button-background-color) 80%, black); + --color-primary-700: color-mix(in oklab, var(--button-background-color) 60%, black); + --color-primary-800: color-mix(in oklab, var(--button-background-color) 40%, black); + --color-primary-900: color-mix(in oklab, var(--button-background-color) 20%, black); +} + @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); |