initial

assets/scss/colors.scss

@@ -0,0 +1,88 @@
+// 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;
+}