asset_browser/public/styles/variables.css
setonc a558804026 Initial commit — asset browser web app
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-27 09:06:25 -04:00

56 lines
1.8 KiB
CSS
Executable file

/* ===== Design Tokens — single source of truth =====
Import this file first in every page before any other stylesheet.
Corner radii follow the WinUI 3 spec:
--radius-sm → ControlCornerRadius (4px) buttons, inputs, small controls
--radius → ControlCornerRadius (4px) standard controls
--radius-lg → OverlayCornerRadius (8px) cards, panels, flyouts, dialogs
===================================================== */
:root {
/* Brand */
--primary: #2B5499;
--primary-dark: #1a3565;
--primary-mid: #234480;
--primary-light: #3a6dbf;
--primary-50: #e8eef8;
--accent: #C4622A;
--accent-dark: #a3501f;
--accent-light: #e07a3a;
--accent-50: #fde8d8;
/* Semantic colours */
--green: #15803d;
--green-bg: #dcfce7;
--yellow: #a16207;
--yellow-bg: #fef9c3;
--red: #b91c1c;
--red-bg: #fee2e2;
--purple: #7c3aed;
--purple-bg: #ede9fe;
/* Greys */
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
--white: #ffffff;
/* Corner radii — WinUI 3 */
--radius-sm: 4px; /* ControlCornerRadius — buttons, inputs, chips */
--radius: 4px; /* ControlCornerRadius — standard controls */
--radius-lg: 8px; /* OverlayCornerRadius — cards, panels, flyouts */
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
--shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
--shadow-lg: 0 10px 25px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08);
/* Typography */
--font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}