55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
/* Path: Frontend/src/styles/themes/_tokens.scss */
|
|
|
|
:root {
|
|
--gray-0: hsl(210 20% 99%);
|
|
--gray-50: hsl(220 20% 97%);
|
|
--gray-100: hsl(220 16% 93%);
|
|
--gray-200: hsl(220 13% 87%);
|
|
--gray-300: hsl(220 11% 75%);
|
|
--gray-400: hsl(220 9% 58%);
|
|
--gray-500: hsl(220 10% 45%);
|
|
--gray-600: hsl(220 14% 34%);
|
|
--gray-700: hsl(220 18% 24%);
|
|
--gray-800: hsl(220 22% 16%);
|
|
--gray-900: hsl(220 28% 10%);
|
|
|
|
--blue-400: hsl(218 88% 61%);
|
|
--blue-500: hsl(221 83% 53%);
|
|
--blue-600: hsl(224 76% 48%);
|
|
|
|
--green-500: hsl(154 60% 40%);
|
|
--red-500: hsl(0 72% 54%);
|
|
--amber-500: hsl(36 100% 50%);
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.625rem;
|
|
--radius-lg: 0.875rem;
|
|
--radius-xl: 1.25rem;
|
|
--radius-pill: 999px;
|
|
|
|
--shadow-soft: 0 12px 32px hsl(220 30% 10% / 0.08);
|
|
--shadow-strong: 0 20px 48px hsl(220 30% 10% / 0.16);
|
|
|
|
--z-base: 1;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 400;
|
|
--z-modal: 500;
|
|
--z-toast: 600;
|
|
|
|
--motion-duration-fast: 140ms;
|
|
--motion-duration-base: 220ms;
|
|
--motion-duration-slow: 320ms;
|
|
--motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|