89 lines
2.6 KiB
SCSS
89 lines
2.6 KiB
SCSS
// Brand Colors
|
|
$brand-primary: #4f46e5; // Основной цвет бренда
|
|
$brand-secondary: #10b981; // Вторичный цвет бренда
|
|
|
|
// Neutral Colors
|
|
$neutral-50: #f9fafb; // Самый светлый оттенок
|
|
$neutral-100: #f3f4f6; // Светлый фон
|
|
$neutral-200: #e5e7eb; // Светлая граница
|
|
$neutral-300: #d1d5db; // Светлый текст
|
|
$neutral-400: #9ca3af; // Неактивный текст
|
|
$neutral-500: #6b7280; // Средний текст
|
|
$neutral-600: #4b5563; // Основной текст
|
|
$neutral-700: #374151; // Темный текст
|
|
$neutral-800: #1f2937; // Очень темный текст
|
|
$neutral-900: #111827; // Самый темный оттенок
|
|
|
|
// Semantic Colors
|
|
$text-primary: $neutral-900; // Основной текст
|
|
$text-secondary: $neutral-600; // Вторичный текст
|
|
$text-muted: $neutral-400; // Неактивный текст
|
|
$background-primary: $neutral-50; // Основной фон
|
|
$background-secondary: $neutral-100; // Вторичный фон
|
|
$border-color: $neutral-200; // Цвет границ
|
|
|
|
// Status Colors
|
|
$success: #10b981; // Успех
|
|
$warning: #f59e0b; // Предупреждение
|
|
$error: #ef4444; // Ошибка
|
|
$info: #3b82f6; // Информация
|
|
|
|
// Basic Colors
|
|
$black: #000000;
|
|
$dark-background: #13141c;
|
|
$dark-grey: #171821;
|
|
$grey-selector: #1b1b24;
|
|
$grey-blocks: #1e1f2b;
|
|
$grey-text-highlight: #23242c;
|
|
$grey-blocks-hover: #262736;
|
|
$grey-menu: #292a32;
|
|
$grey-stroke: #323442;
|
|
$grey-paginator: #323442;
|
|
$grey-icons: #5b5e6d;
|
|
$grey-text: #7f808b;
|
|
$grey-text2: #9A9BAB;
|
|
$white: #ffffff;
|
|
$greeen: #9fff00;
|
|
$greeen-dark: #43611b;
|
|
$red: #ff4141;
|
|
$red-dark: #3e232c;
|
|
$green: #20b26c;
|
|
$green-dark: #133324;
|
|
$gold: #ffc35c;
|
|
|
|
// Form Elements
|
|
$grey-form: #1c1d26;
|
|
$grey-form-stroke: #323442;
|
|
$grey-button: #21222d;
|
|
$grey-button-2: #32323c;
|
|
$grey-button-stroke: #5b5e6d;
|
|
|
|
// Export colors for JavaScript
|
|
:export {
|
|
black: $black;
|
|
darkBackground: $dark-background;
|
|
darkGrey: $dark-grey;
|
|
greySelector: $grey-selector;
|
|
greyBlocks: $grey-blocks;
|
|
greyTextHighlight: $grey-text-highlight;
|
|
greyBlocksHover: $grey-blocks-hover;
|
|
greyMenu: $grey-menu;
|
|
greyStroke: $grey-stroke;
|
|
greyPaginator: $grey-paginator;
|
|
greyIcons: $grey-icons;
|
|
greyText: $grey-text;
|
|
white: $white;
|
|
greeen: $greeen;
|
|
greeenDark: $greeen-dark;
|
|
red: $red;
|
|
redDark: $red-dark;
|
|
green: $green;
|
|
greenDark: $green-dark;
|
|
greyForm: $grey-form;
|
|
greyFormStroke: $grey-form-stroke;
|
|
greyButton: $grey-button;
|
|
greyButton2: $grey-button-2;
|
|
greyButtonStroke: $grey-button-stroke;
|
|
gold: $gold;
|
|
}
|