105 lines
2.0 KiB
TypeScript
105 lines
2.0 KiB
TypeScript
import { extendTheme, defineStyleConfig } from '@chakra-ui/react';
|
|
// @ts-ignore
|
|
import { modalAnatomy as parts } from '@chakra-ui/anatomy';
|
|
// @ts-ignore
|
|
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
|
|
|
|
const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
|
|
|
|
// modal 弹窗
|
|
const ModalTheme = defineMultiStyleConfig({
|
|
baseStyle: definePartsStyle({
|
|
dialog: {
|
|
width: '90%'
|
|
}
|
|
})
|
|
});
|
|
|
|
// 按键
|
|
const Button = defineStyleConfig({
|
|
baseStyle: {},
|
|
sizes: {
|
|
sm: {
|
|
fontSize: 'xs',
|
|
px: 3,
|
|
py: 0,
|
|
fontWeight: 'normal',
|
|
height: '26px',
|
|
lineHeight: '26px'
|
|
},
|
|
md: {
|
|
fontSize: 'sm',
|
|
px: 6,
|
|
py: 0,
|
|
height: '34px',
|
|
lineHeight: '34px',
|
|
fontWeight: 'normal'
|
|
},
|
|
lg: {
|
|
fontSize: 'md',
|
|
px: 8,
|
|
py: 0,
|
|
height: '42px',
|
|
lineHeight: '42px',
|
|
fontWeight: 'normal'
|
|
}
|
|
},
|
|
variants: {
|
|
white: {
|
|
color: '#fff',
|
|
backgroundColor: 'transparent',
|
|
border: '1px solid #ffffff',
|
|
_hover: {
|
|
backgroundColor: 'rgba(255,255,255,0.1)'
|
|
}
|
|
}
|
|
},
|
|
defaultProps: {
|
|
size: 'md',
|
|
colorScheme: 'blue'
|
|
}
|
|
});
|
|
|
|
// 全局主题
|
|
export const theme = extendTheme({
|
|
styles: {
|
|
global: {
|
|
'html, body': {
|
|
color: 'blackAlpha.800',
|
|
height: '100%',
|
|
maxHeight: '100vh',
|
|
overflowY: 'hidden'
|
|
}
|
|
}
|
|
},
|
|
fontSizes: {
|
|
xs: '0.8rem',
|
|
sm: '0.9rem',
|
|
md: '1rem',
|
|
lg: '1.125rem',
|
|
xl: '1.25rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '1.875rem',
|
|
'4xl': '2.25rem',
|
|
'5xl': '3rem',
|
|
'6xl': '3.75rem',
|
|
'7xl': '4.5rem',
|
|
'8xl': '6rem',
|
|
'9xl': '8rem'
|
|
},
|
|
fonts: {
|
|
body: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
|
|
},
|
|
breakpoints: {
|
|
sm: '900px',
|
|
md: '1200px',
|
|
lg: '1500px',
|
|
xl: '1800',
|
|
'2xl': '2100'
|
|
},
|
|
components: {
|
|
Modal: ModalTheme,
|
|
Button
|
|
}
|
|
});
|