mirror of
https://github.com/ClaperCo/Claper.git
synced 2026-02-24 04:01:04 +01:00
ce6db03065
- Add gray color palette to theme.css - Add disabled attribute support to Tabs component - Refactor event list filter tabs to use the Tabs component Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
101 lines
3.4 KiB
CSS
101 lines
3.4 KiB
CSS
|
|
@theme {
|
|
/* Gray Colors (Tailwind default) */
|
|
--color-gray-50: #f9fafb;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-300: #d1d5db;
|
|
--color-gray-400: #9ca3af;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-900: #111827;
|
|
--color-gray-950: #030712;
|
|
|
|
/* Primary Colors - Claper Purple */
|
|
--color-primary-50: #f3defa;
|
|
--color-primary-100: #e8bef5;
|
|
--color-primary-200: #d08def;
|
|
--color-primary-300: #b85ce9;
|
|
--color-primary-400: #9f2be3;
|
|
--color-primary-500: #8611ed;
|
|
--color-primary-600: #6b0dbe;
|
|
--color-primary-700: #500a8e;
|
|
--color-primary-800: #35065f;
|
|
--color-primary-900: #1a032f;
|
|
|
|
/* Secondary Colors - Navy Purple */
|
|
--color-secondary-50: #e8e6f0;
|
|
--color-secondary-100: #c5c0db;
|
|
--color-secondary-200: #9f97c2;
|
|
--color-secondary-300: #7a6ea9;
|
|
--color-secondary-400: #5d4f95;
|
|
--color-secondary-500: #140553;
|
|
--color-secondary-600: #100442;
|
|
--color-secondary-700: #0c0332;
|
|
--color-secondary-800: #080221;
|
|
--color-secondary-900: #040111;
|
|
|
|
/* Neutral Colors (wedgewood) */
|
|
--color-neutral-50: #F0F4F8;
|
|
--color-neutral-100: #D9E3ED;
|
|
--color-neutral-200: #B9CCDF;
|
|
--color-neutral-300: #97B3CE;
|
|
--color-neutral-400: #7499BE;
|
|
--color-neutral-500: #507DAA;
|
|
--color-neutral-600: #3F6388;
|
|
--color-neutral-700: #314D68;
|
|
--color-neutral-800: #253B50;
|
|
--color-neutral-900: #1A2938;
|
|
|
|
/* Supporting Red Colors (rose-madder) */
|
|
--color-supporting-red-50: #FCEDEE;
|
|
--color-supporting-red-100: #F9D5D7;
|
|
--color-supporting-red-200: #F3ABB0;
|
|
--color-supporting-red-300: #ED8188;
|
|
--color-supporting-red-400: #E75761;
|
|
--color-supporting-red-500: #E12D39;
|
|
--color-supporting-red-600: #B4242E;
|
|
--color-supporting-red-700: #871B22;
|
|
--color-supporting-red-800: #5A1217;
|
|
--color-supporting-red-900: #2D090B;
|
|
|
|
/* Supporting Yellow Colors (school-bus-yellow) */
|
|
--color-supporting-yellow-50: #FFFBEB;
|
|
--color-supporting-yellow-100: #FEF3C7;
|
|
--color-supporting-yellow-200: #FDE68A;
|
|
--color-supporting-yellow-300: #FCD34D;
|
|
--color-supporting-yellow-400: #FBBF24;
|
|
--color-supporting-yellow-500: #F59E0B;
|
|
--color-supporting-yellow-600: #D97706;
|
|
--color-supporting-yellow-700: #B45309;
|
|
--color-supporting-yellow-800: #92400E;
|
|
--color-supporting-yellow-900: #78350F;
|
|
|
|
/* Supporting Green Colors (green-teal) */
|
|
--color-supporting-green-50: #ECFDF5;
|
|
--color-supporting-green-100: #D1FAE5;
|
|
--color-supporting-green-200: #A7F3D0;
|
|
--color-supporting-green-300: #6EE7B7;
|
|
--color-supporting-green-400: #34D399;
|
|
--color-supporting-green-500: #10B981;
|
|
--color-supporting-green-600: #059669;
|
|
--color-supporting-green-700: #047857;
|
|
--color-supporting-green-800: #065F46;
|
|
--color-supporting-green-900: #064E3B;
|
|
|
|
/* Font Family */
|
|
--font-family-sans: 'Roboto', sans-serif;
|
|
--font-family-serif: 'Merriweather', serif;
|
|
--font-display: 'Montserrat', sans-serif;
|
|
|
|
/* Box Shadows */
|
|
--shadow-base: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06);
|
|
--shadow-md: 0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.06);
|
|
--shadow-lg: 0px 4px 6px 0px rgba(0,0,0,0.05), 0px 10px 15px 0px rgba(0,0,0,0.1);
|
|
--shadow-xl: 0px 10px 10px 0px rgba(0,0,0,0.04), 0px 20px 25px 0px rgba(0,0,0,0.1);
|
|
--shadow-2xl: 0px 25px 50px 0px rgba(0,0,0,0.25);
|
|
--shadow-inner: inset 0px 2px 4px 0px rgba(0,0,0,0.06);
|
|
}
|