From 9ed46bea58dbb81ceada2a957fd1db653fb21e52 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 24 Dec 2025 17:53:32 +0100
Subject: Implement new UI styles

---
 src/frontend/app/tailwind.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'src/frontend/app/tailwind.css')

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] *));
-- 
cgit v1.3