86 lines
2.1 KiB
SCSS
86 lines
2.1 KiB
SCSS
/* Path: Frontend/src/styles/theme.scss */
|
|
|
|
:root {
|
|
--transition-speed: 0.5s;
|
|
--transition-ease: ease-in-out;
|
|
|
|
--gray-50: hsl(40 25% 90%);
|
|
--gray-100: hsl(40 23% 87%);
|
|
--gray-200: hsl(40 20% 83%);
|
|
--gray-300: hsl(40 20% 77%);
|
|
--gray-400: hsl(40 10% 75%);
|
|
--gray-500: hsl(40 5% 60%);
|
|
--gray-600: hsl(40 5% 30%);
|
|
--gray-700: hsl(40 5% 25%);
|
|
--gray-800: hsl(40 5% 20%);
|
|
--gray-900: hsl(40 5% 15%);
|
|
|
|
--brown-300: hsl(27 39.2% 86.5%);
|
|
--brown-400: hsl(27 39.2% 76.5%);
|
|
--brown-500: hsl(27 39.2% 66.5%);
|
|
--brown-600: hsl(27 39.2% 56.5%);
|
|
--brown-700: hsl(27 39.2% 46.5%);
|
|
--brown-800: hsl(27 39.2% 36.5%);
|
|
|
|
--green-300: hsl(115 43.1% 70%);
|
|
--green-400: hsl(115 43.1% 70%);
|
|
--green-500: hsl(115 43.1% 60%);
|
|
--green-600: hsl(115 43.1% 50%);
|
|
--green-700: hsl(115 43.1% 40%);
|
|
|
|
--red-500: hsl(359 46.6% 50.8%);
|
|
--red-600: hsl(359 46.6% 40.8%);
|
|
}
|
|
|
|
:root {
|
|
// Background and Text Colors
|
|
--bg: var(--gray-50);
|
|
--text: var(--gray-800);
|
|
--text-muted: var(--gray-700);
|
|
|
|
// Accent
|
|
--primary: var(--brown-700);
|
|
--primary-hover: var(--brown-800);
|
|
--primary-text: var(--gray-50);
|
|
|
|
--secondary: var(--green-500);
|
|
--secondary-hover: var(--green-600);
|
|
--warning: var(--red-500);
|
|
--warning-hover: var(--red-600);
|
|
|
|
// Typical Card Button Colors
|
|
--bg-1: var(--gray-100);
|
|
--bg-1-hover: var(--gray-200);
|
|
|
|
--bg-2: var(--gray-200);
|
|
--bg-2-hover: var(--gray-300);
|
|
|
|
--bg-3: var(--gray-300);
|
|
--bg-3-hover: var(--gray-400);
|
|
|
|
--box-shadow: 0 8px 16px hsl(0 0% 0% / 0.1);
|
|
}
|
|
|
|
[data-color-scheme="dark"] {
|
|
// Background and Text Colors
|
|
--bg: var(--gray-900);
|
|
--text: var(--gray-300);
|
|
--text-muted: var(--gray-500);
|
|
|
|
// Accent
|
|
--primary: var(--brown-700);
|
|
--primary-hover: var(--brown-600);
|
|
--secondary: var(--green-700);
|
|
--secondary-hover: var(--green-600);
|
|
|
|
// Typical Card Button Colors
|
|
--bg-1: var(--gray-800);
|
|
--bg-1-hover: var(--gray-700);
|
|
|
|
--bg-2: var(--gray-700);
|
|
--bg-2-hover: var(--gray-600);
|
|
|
|
--bg-3: var(--gray-600);
|
|
--bg-3-hover: var(--gray-500);
|
|
}
|