117 lines
3.3 KiB
SCSS
117 lines
3.3 KiB
SCSS
@use "modules/normalize";
|
|
@use "modules/transitions";
|
|
@use "global/mixins";
|
|
@use "global/variables";
|
|
|
|
// UI
|
|
@use "ui/collapse";
|
|
@use "ui/notification";
|
|
@use "ui/rating";
|
|
@use "ui/select";
|
|
|
|
:root {
|
|
--color-accent: #111827;
|
|
--color-accent-dark: #242c38;
|
|
--color-accent-light: #465267;
|
|
--color-accent-smooth: #656bd1;
|
|
--color-accent-neon: #f200ff;
|
|
--color-contrast: #ffc107;
|
|
--color-error: #f13838;
|
|
|
|
|
|
--color-neutral-50: #ffffff;
|
|
--color-neutral-100: #f8f7fc;
|
|
--color-neutral-200: #f0eefa;
|
|
--color-neutral-300: #e2dfed;
|
|
--color-neutral-400: #c5c1d9;
|
|
--color-neutral-500: #8c8a9e;
|
|
--color-neutral-600: #5a5869;
|
|
--color-neutral-700: #3d3b47;
|
|
--color-neutral-800: #23222a;
|
|
--color-neutral-900: #000000;
|
|
|
|
--color-background: var(--color-neutral-50);
|
|
--color-background-secondary: var(--color-neutral-100);
|
|
--color-background-elevated: var(--color-neutral-50);
|
|
|
|
--color-text-primary: var(--color-neutral-900);
|
|
--color-text-secondary: var(--color-neutral-600);
|
|
--color-text-tertiary: var(--color-neutral-500);
|
|
--color-text-accent: var(--color-accent);
|
|
--color-text-inverse: var(--color-neutral-50);
|
|
|
|
--color-border: var(--color-neutral-300);
|
|
--color-border-hover: var(--color-accent-light);
|
|
--color-divider: var(--color-neutral-200);
|
|
|
|
--color-surface: var(--color-neutral-50);
|
|
--color-surface-hover: var(--color-neutral-100);
|
|
--color-surface-active: var(--color-neutral-200);
|
|
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-info: #3b82f6;
|
|
|
|
--color-success-bg: #d1fae5;
|
|
--color-warning-bg: #fef3c7;
|
|
--color-info-bg: #dbeafe;
|
|
--color-error-bg: #fee2e2;
|
|
|
|
--color-accent-hover: var(--color-accent-dark);
|
|
--color-accent-active: var(--color-accent-smooth);
|
|
--color-accent-disabled: #c7bfe9;
|
|
}
|
|
|
|
.dark {
|
|
--color-accent: #8d7bdb;
|
|
--color-accent-dark: #6b58c7;
|
|
--color-accent-light: #b3a9e5;
|
|
--color-accent-smooth: #7a80e1;
|
|
--color-accent-neon: #ff1aff;
|
|
--color-contrast: #ffd54f;
|
|
--color-error: #ff6b6b;
|
|
|
|
--color-neutral-50: #000000;
|
|
--color-neutral-100: #0f0e14;
|
|
--color-neutral-200: #1d1b26;
|
|
--color-neutral-300: #2d2b3a;
|
|
--color-neutral-400: #4a4858;
|
|
--color-neutral-500: #6d6b7a;
|
|
--color-neutral-600: #a19fae;
|
|
--color-neutral-700: #c9c7d6;
|
|
--color-neutral-800: #e2e0ef;
|
|
--color-neutral-900: #ffffff;
|
|
|
|
--color-background: var(--color-neutral-100);
|
|
--color-background-secondary: var(--color-neutral-200);
|
|
--color-background-elevated: var(--color-neutral-300);
|
|
|
|
--color-text-primary: var(--color-neutral-800);
|
|
--color-text-secondary: var(--color-neutral-600);
|
|
--color-text-tertiary: var(--color-neutral-500);
|
|
--color-text-accent: var(--color-accent-light);
|
|
--color-text-inverse: var(--color-neutral-900);
|
|
|
|
--color-border: var(--color-neutral-400);
|
|
--color-border-hover: var(--color-accent);
|
|
--color-divider: var(--color-neutral-300);
|
|
|
|
--color-surface: var(--color-neutral-200);
|
|
--color-surface-hover: var(--color-neutral-300);
|
|
--color-surface-active: var(--color-neutral-400);
|
|
|
|
--color-success: #34d399;
|
|
--color-warning: #fbbf24;
|
|
--color-info: #60a5fa;
|
|
|
|
--color-success-bg: rgba(16, 185, 129, 0.2);
|
|
--color-warning-bg: rgba(245, 158, 11, 0.2);
|
|
--color-info-bg: rgba(59, 130, 246, 0.2);
|
|
--color-error-bg: rgba(239, 68, 68, 0.2);
|
|
|
|
--color-accent-hover: var(--color-accent);
|
|
--color-accent-active: var(--color-accent-dark);
|
|
--color-accent-disabled: #4a4269;
|
|
}
|
|
|
|
|