100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import {
|
|
SystemConfig,
|
|
createSystem,
|
|
defaultConfig,
|
|
mergeConfigs,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { colors } from './colors';
|
|
|
|
const baseTheme: SystemConfig = {
|
|
globalCss: {
|
|
body: {
|
|
overflowY: 'none',
|
|
bg: { _light: 'back.50', _dark: 'back.700' },
|
|
color: { _light: 'text.900', _dark: 'text.50' },
|
|
fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
|
|
userSelect: 'none' /* Prevents text selection */,
|
|
},
|
|
svg: {
|
|
width: '32px',
|
|
height: '32px',
|
|
aspectRatio: 'square',
|
|
},
|
|
},
|
|
theme: {
|
|
slotRecipes: {
|
|
dialog: {
|
|
slots: ['header'],
|
|
base: {
|
|
header: {
|
|
fontWeight: 'bold',
|
|
fontSize: '2xl',
|
|
color: { _dark: 'brand.400', _light: 'brand.500' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
recipes: {
|
|
button: {
|
|
base: {
|
|
borderRadius: 0,
|
|
_hover: {
|
|
boxShadow: {
|
|
_light: '0 8px 20px #000000e6',
|
|
_dark: '0 8px 20px #000000e6',
|
|
},
|
|
},
|
|
transitionDuration: 'slower',
|
|
},
|
|
},
|
|
input: {
|
|
base: {
|
|
borderRadius: 0,
|
|
_hover: {
|
|
boxShadow: {
|
|
_light: '0 2px 5px #000000e6',
|
|
_dark: '0 2px 5px #000000e6',
|
|
},
|
|
},
|
|
//borderColor: { _light: "gray.800", _dark: "gray.50" },
|
|
backgroundColor: { _light: 'gray.200', _dark: 'gray.700' },
|
|
transitionDuration: 'slower',
|
|
},
|
|
},
|
|
},
|
|
tokens: {
|
|
fonts: {
|
|
heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
|
|
body: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
|
|
},
|
|
colors,
|
|
},
|
|
semanticTokens: {
|
|
colors: {
|
|
'@danger': {
|
|
solid: { value: '{colors.danger.500}' },
|
|
contrast: { value: '{colors.danger.100}' },
|
|
fg: { value: '{colors.danger.900}' },
|
|
muted: { value: '{colors.danger.100}' },
|
|
subtle: { value: '{colors.danger.200}' },
|
|
emphasized: { value: '{colors.danger.300}' },
|
|
focusRing: { value: '{colors.danger.500}' },
|
|
},
|
|
brand: {
|
|
solid: { value: '{colors.brand.500}' },
|
|
contrast: { value: '{colors.brand.100}' },
|
|
fg: { value: '{colors.brand.900}' },
|
|
muted: { value: '{colors.brand.100}' },
|
|
subtle: { value: '{colors.brand.200}' },
|
|
emphasized: { value: '{colors.brand.300}' },
|
|
focusRing: { value: '{colors.brand.500}' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
const config = mergeConfigs(defaultConfig, baseTheme);
|
|
//console.log("defaultConfig: " + JSON.stringify(defaultConfig, null, 2));
|
|
export const systemTheme = createSystem(config);
|