coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add environment-based CSS theming with configurable colors and branding

Browse Source
This commit is contained in:
Cory Hawklvelt
2026-04-26 16:47:48 +09:30
parent 37e5de7f92
commit d8828d64f2
16 changed files with 262 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+15 -13
View File
@@ -1,5 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import './styles/theme-vars.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -7,7 +9,7 @@
/* Secuird Design System - Enterprise Identity & Access Platform
Authoritative, infrastructure-grade aesthetic with slate/charcoal/muted blue palette
Colors are HSL for theming flexibility
*/
*/
@layer base {
:root {
@@ -21,9 +23,9 @@
--popover: 0 0% 100%;
--popover-foreground: 222 47% 9%;
/* Primary — teal, fully saturated, dark enough to read on white */
--primary: 173 65% 36%;
--primary-foreground: 0 0% 100%;
/* Primary — theme-configurable (teal default, red for dev, purple for staging) */
--primary: var(--theme-primary);
--primary-foreground: var(--theme-primary-foreground);
/* Secondary — cool blue-gray, clearly darker than bg */
--secondary: 216 20% 91%;
@@ -33,9 +35,9 @@
--muted: 216 18% 88%;
--muted-foreground: 222 18% 42%;
/* Accent — same teal as primary */
--accent: 173 65% 36%;
--accent-foreground: 0 0% 100%;
/* Accent — same as primary */
--accent: var(--theme-primary);
--accent-foreground: var(--theme-primary-foreground);
/* Semantic */
--destructive: 0 72% 48%;
@@ -53,24 +55,24 @@
/* UI chrome */
--border: 216 18% 84%; /* clearly visible on white card */
--input: 216 18% 92%;
--ring: 173 65% 36%;
--ring: var(--theme-ring);
--radius: 0.5rem;
/* Sidebar */
--sidebar-background: 222 30% 95%;
--sidebar-foreground: 222 47% 18%;
--sidebar-primary: 173 65% 36%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-primary: var(--theme-sidebar-primary);
--sidebar-primary-foreground: var(--theme-sidebar-primary-foreground);
--sidebar-accent: 216 20% 88%;
--sidebar-accent-foreground: 222 47% 9%;
--sidebar-border: 216 18% 84%;
--sidebar-ring: 173 65% 36%;
--sidebar-ring: var(--theme-ring);
--sidebar-muted: 222 20% 48%;
/* Gradients */
--gradient-brand: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-accent: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-brand: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
--gradient-accent: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
--gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
/* Shadows — stronger alpha so cards lift off the bg */