vojo/src/colors.css.ts

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