105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import { createTheme } from '@vanilla-extract/css';
|
|
import { color } from 'folds';
|
|
|
|
// Базовая тёмная палитра приложения
|
|
const navDark = '#121314'; // левая панель (навигация)
|
|
const contentDark = '#0d0d0e'; // правая часть (контент/чат)
|
|
|
|
const darkThemeData = {
|
|
Background: {
|
|
Container: navDark,
|
|
ContainerHover: '#262626',
|
|
ContainerActive: '#333333',
|
|
ContainerLine: '#404040',
|
|
OnContainer: '#F2F2F2',
|
|
},
|
|
|
|
Surface: {
|
|
Container: contentDark,
|
|
ContainerHover: '#333333',
|
|
ContainerActive: '#404040',
|
|
ContainerLine: '#4D4D4D',
|
|
OnContainer: '#F2F2F2',
|
|
},
|
|
|
|
SurfaceVariant: {
|
|
Container: '#333333',
|
|
ContainerHover: '#404040',
|
|
ContainerActive: '#4D4D4D',
|
|
ContainerLine: '#595959',
|
|
OnContainer: '#F2F2F2',
|
|
},
|
|
|
|
Primary: {
|
|
Main: '#BDB6EC',
|
|
MainHover: '#B2AAE9',
|
|
MainActive: '#ADA3E8',
|
|
MainLine: '#A79DE6',
|
|
OnMain: '#2C2843',
|
|
Container: '#413C65',
|
|
ContainerHover: '#494370',
|
|
ContainerActive: '#50497B',
|
|
ContainerLine: '#575086',
|
|
OnContainer: '#E3E1F7',
|
|
},
|
|
|
|
Secondary: {
|
|
Main: '#FFFFFF',
|
|
MainHover: '#E5E5E5',
|
|
MainActive: '#D9D9D9',
|
|
MainLine: '#CCCCCC',
|
|
OnMain: '#1A1A1A',
|
|
Container: '#404040',
|
|
ContainerHover: '#4D4D4D',
|
|
ContainerActive: '#595959',
|
|
ContainerLine: '#666666',
|
|
OnContainer: '#F2F2F2',
|
|
},
|
|
|
|
Success: {
|
|
Main: '#85E0BA',
|
|
MainHover: '#70DBAF',
|
|
MainActive: '#66D9A9',
|
|
MainLine: '#5CD6A3',
|
|
OnMain: '#0F3D2A',
|
|
Container: '#175C3F',
|
|
ContainerHover: '#1A6646',
|
|
ContainerActive: '#1C704D',
|
|
ContainerLine: '#1F7A54',
|
|
OnContainer: '#CCF2E2',
|
|
},
|
|
|
|
Warning: {
|
|
Main: '#E3BA91',
|
|
MainHover: '#DFAF7E',
|
|
MainActive: '#DDA975',
|
|
MainLine: '#DAA36C',
|
|
OnMain: '#3F2A15',
|
|
Container: '#5E3F20',
|
|
ContainerHover: '#694624',
|
|
ContainerActive: '#734D27',
|
|
ContainerLine: '#7D542B',
|
|
OnContainer: '#F3E2D1',
|
|
},
|
|
|
|
Critical: {
|
|
Main: '#E69D9D',
|
|
MainHover: '#E28D8D',
|
|
MainActive: '#E08585',
|
|
MainLine: '#DE7D7D',
|
|
OnMain: '#401C1C',
|
|
Container: '#602929',
|
|
ContainerHover: '#6B2E2E',
|
|
ContainerActive: '#763333',
|
|
ContainerLine: '#803737',
|
|
OnContainer: '#F5D6D6',
|
|
},
|
|
|
|
Other: {
|
|
FocusRing: 'rgba(255, 255, 255, 0.5)',
|
|
Shadow: 'rgba(0, 0, 0, 1)',
|
|
Overlay: 'rgba(0, 0, 0, 0.8)',
|
|
},
|
|
};
|
|
|
|
export const darkTheme = createTheme(color, darkThemeData);
|