3dp-manager/client/src/theme.ts

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,
        },
      }
    }
  },
});