gui version

2026-01-28 12:05:10 +03:00
parent f574931c25
commit ba6db6edd5
102 changed files with 19151 additions and 2673 deletions
@@ -0,0 +1,154 @@
+import type { PaletteMode } from '@mui/material';
+import { amber, deepOrange, grey } from '@mui/material/colors';
+
+// 1. Определение цветов для Светлой темы
+const lightPalette = {
+  primary: {
+    main: '#2563eb', // Насыщенный синий (Tailwind Blue 600)
+    light: '#60a5fa',
+    dark: '#1e40af',
+  },
+  secondary: {
+    main: '#7c3aed', // Фиолетовый
+  },
+  background: {
+    default: '#f3f4f6', // Светло-серый фон (не чисто белый)
+    paper: '#ffffff',   // Карточки белые
+  },
+  text: {
+    primary: '#111827', // Почти черный
+    secondary: '#6b7280', // Серый текст
+  },
+};
+
+// 2. Определение цветов для Темной темы
+const darkPalette = {
+  primary: {
+    main: '#3b82f6', // Чуть светлее синий для контраста на темном
+    light: '#60a5fa',
+    dark: '#1d4ed8',
+  },
+  secondary: {
+    main: '#8b5cf6',
+  },
+  background: {
+    default: '#0B0F19', // Глубокий темный (Deep Space), лучше чем #121212
+    paper: '#111827',   // Чуть светлее фона (Gray 900)
+  },
+  text: {
+    primary: '#f9fafb', // Почти белый
+    secondary: '#9ca3af', // Светло-серый
+  },
+};
+
+// 3. Функция генерации настроек
+export const getDesignTokens = (mode: PaletteMode) => ({
+  palette: {
+    mode,
+    ...(mode === 'light' ? lightPalette : darkPalette),
+  },
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+    h1: { fontWeight: 700 },
+    h2: { fontWeight: 700 },
+    h3: { fontWeight: 600 },
+    h4: { fontWeight: 600 },
+    h5: { fontWeight: 600 },
+    h6: { fontWeight: 600 },
+    button: {
+      textTransform: 'none' as const, // Убираем CAPS LOCK на кнопках
+      fontWeight: 600,
+    },
+  },
+  shape: {
+    borderRadius: 12, // Скругляем углы у всего (кнопки, карты)
+  },
+  components: {
+    // Кастомизация глобальных стилей (скроллбар)
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          scrollbarColor: mode === 'dark' ? '#374151 #111827' : '#d1d5db #f3f4f6',
+          '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+            backgroundColor: 'transparent',
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+            borderRadius: 8,
+            backgroundColor: mode === 'dark' ? '#374151' : '#d1d5db',
+            minHeight: 24,
+            border: '2px solid transparent',
+            backgroundClip: 'content-box',
+          },
+          '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+            backgroundColor: mode === 'dark' ? '#4b5563' : '#9ca3af',
+          },
+        },
+      },
+    },
+    // Кастомизация Кнопок
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: 'none',
+          },
+        },
+        containedPrimary: {
+          '&:hover': {
+            backgroundColor: mode === 'dark' ? '#2563eb' : '#1d4ed8',
+          },
+        },
+      },
+    },
+    // Кастомизация Карточек (Paper)
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none', // Убираем осветление в темной теме (стандарт Material)
+        },
+        elevation1: {
+          boxShadow: mode === 'light'
+            ? '0px 2px 4px -1px rgba(0,0,0,0.05), 0px 4px 6px -1px rgba(0,0,0,0.05)'
+            : '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 6px -1px rgba(0,0,0,0.2)',
+          border: mode === 'light' ? '1px solid #e5e7eb' : '1px solid #374151',
+        },
+      },
+    },
+    // Кастомизация Инпутов
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: mode === 'light' ? '#e5e7eb' : '#374151',
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: mode === 'light' ? '#9ca3af' : '#6b7280',
+          },
+        },
+      },
+    },
+    // Кастомизация AppBar (Хедера)
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: mode === 'light' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(17, 24, 39, 0.8)',
+          backdropFilter: 'blur(8px)', // Эффект стекла
+          borderBottom: `1px solid ${mode === 'light' ? '#e5e7eb' : '#374151'}`,
+          boxShadow: 'none',
+          color: mode === 'light' ? '#111827' : '#f9fafb',
+        },
+      },
+    },
+    MuiTableRow: {
+      root: {
+        "&:last-child td": {
+          borderBottom: 0,
+        },
+      }
+    }
+  },
+});