feat: enhance accent color support across the application

- Introduced new accent colors (green, orange, teal, purple, rose) in the accent store.
- Updated CSS variables for accent colors in app.css.
- Refactored components to utilize accent colors for buttons, inputs, dropdowns, and tags.
- Improved accessibility and visual consistency by replacing hardcoded colors with accent variables.
- Adjusted styles in various components including modals, tables, and forms to reflect the new accent color scheme.
This commit is contained in:
Sam Chau
2025-12-29 01:12:59 +10:30
parent 0af19ed7ea
commit def987d8e9
24 changed files with 157 additions and 43 deletions

View File

@@ -7,6 +7,19 @@
@theme {
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
/* Accent colors using CSS variables set by accent store */
--color-accent-50: var(--accent-50);
--color-accent-100: var(--accent-100);
--color-accent-200: var(--accent-200);
--color-accent-300: var(--accent-300);
--color-accent-400: var(--accent-400);
--color-accent-500: var(--accent-500);
--color-accent-600: var(--accent-600);
--color-accent-700: var(--accent-700);
--color-accent-800: var(--accent-800);
--color-accent-900: var(--accent-900);
--color-accent-950: var(--accent-950);
}
@layer base {
@@ -14,6 +27,21 @@
font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
/* Default accent colors (blue) - overridden by JS */
:root {
--accent-50: #eff6ff;
--accent-100: #dbeafe;
--accent-200: #bfdbfe;
--accent-300: #93c5fd;
--accent-400: #60a5fa;
--accent-500: #3b82f6;
--accent-600: #2563eb;
--accent-700: #1d4ed8;
--accent-800: #1e40af;
--accent-900: #1e3a8a;
--accent-950: #172554;
}
html {
@apply bg-neutral-50 dark:bg-neutral-900;
}