Skip to content

F
frontend
Commit 60219d5f authored by tom's avatar tom
Browse files
Options

rewrite theming files

parent 3f4ff292
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 295 deletions
pages/[network_type]/[network_sub_type]/index.tsx
View file @ 60219d5f
/* eslint-disable max-len */ import { Center, VStack, Box } from '@chakra-ui/react';
import { Center, VStack, Box, chakra } from '@chakra-ui/react';
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
...@@ -15,13 +14,6 @@ const Home: NextPage = () => { ...@@ -15,13 +14,6 @@ const Home: NextPage = () => {
<VStack gap={ 4 }> <VStack gap={ 4 }>
<Box> <Box>
<p>home page for { router.query.network_type } { router.query.network_sub_type } network</p> <p>home page for { router.query.network_type } { router.query.network_sub_type } network</p>
{ /* for scroll demo purpose only */ }
<chakra.p mt={ 2 }>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at cursus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam sed nisi sit amet sem iaculis tempor. Vestibulum at risus lectus. Aliquam vitae tortor bibendum, molestie erat nec, dapibus lorem. Curabitur ac tristique dolor. Maecenas condimentum ac odio vitae hendrerit. Maecenas iaculis vitae mauris id tincidunt. Fusce ac nulla mi. Aenean quis purus vehicula, ultricies quam vel, suscipit turpis. Aliquam dignissim pharetra consequat. In at urna id orci ullamcorper iaculis. Vestibulum sed dolor eu augue elementum sodales. Duis lacus arcu, vulputate id tempus et, ultricies ut augue. Nunc sit amet mi eu massa maximus viverra at in leo.</chakra.p>
<chakra.p mt={ 2 }>Aliquam hendrerit nunc non metus sollicitudin, sit amet vehicula tellus interdum. Etiam molestie, odio at dapibus bibendum, velit ante gravida dui, et viverra nibh lorem vitae tellus. Pellentesque tristique orci vitae ipsum feugiat, sed elementum odio dictum. Curabitur maximus quis enim vel bibendum. Proin elementum arcu ligula, vitae elementum diam laoreet in. Etiam mollis scelerisque risus id facilisis. Nullam dapibus dignissim consequat. Praesent faucibus tincidunt metus, quis posuere tortor ullamcorper a. Fusce porttitor mollis dui a aliquam. Nunc congue tellus euismod elit aliquet, eget posuere purus gravida. Morbi ultrices pretium interdum. Phasellus ultricies felis euismod malesuada luctus.</chakra.p>
<chakra.p mt={ 2 }>Nulla eget accumsan mauris. Aliquam ultrices porta diam, a viverra dui aliquam quis. Praesent porttitor ultricies volutpat. Ut sem metus, venenatis in lacus placerat, rhoncus ornare dolor. In hac habitasse platea dictumst. Nullam ac ornare quam. Aenean sed congue nisl. Mauris malesuada egestas erat, a finibus purus consequat nec. Mauris congue scelerisque urna non faucibus. Sed vehicula vitae sem eu varius. In sit amet nunc non metus fermentum finibus.</chakra.p>
<chakra.p mt={ 2 }>Nulla sollicitudin fringilla mauris in ornare. Donec consectetur ultricies lorem ac rhoncus. Mauris dictum vestibulum sollicitudin. Cras in orci eget urna sollicitudin auctor. Suspendisse pellentesque eget purus nec facilisis. Nunc in vulputate odio. Aenean viverra malesuada consequat. Quisque eleifend faucibus aliquam. Aenean dui erat, ultricies quis iaculis sed, malesuada eleifend justo. Proin sollicitudin venenatis cursus. Mauris quis enim mollis, lacinia metus in, luctus ligula.</chakra.p>
<chakra.p mt={ 2 }>Vestibulum eget mollis arcu, sed malesuada massa. Nunc at est vel felis scelerisque sollicitudin. Vestibulum vulputate ipsum sapien, eu vestibulum nibh maximus tincidunt. Sed posuere fermentum leo nec bibendum. Cras tincidunt dui ullamcorper lectus luctus, vitae consequat velit scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eleifend imperdiet ultrices. Etiam ullamcorper mi semper interdum iaculis. Suspendisse urna lacus, egestas ut vehicula non, varius non diam. Nunc consequat eros in accumsan interdum. Morbi blandit risus sollicitudin, suscipit nisl at, malesuada est. Vestibulum eget molestie diam. Suspendisse potenti.</chakra.p>
<chakra.p mt={ 2 }>Pellentesque enim risus, elementum ut ornare id, faucibus in urna. Sed laoreet iaculis augue in fermentum. Morbi nec lacus pharetra, condimentum justo eget, commodo est. Donec nec auctor sapien, eget fringilla nisl. Aliquam ac ex rhoncus, tempor augue quis, aliquet sapien. Curabitur ullamcorper lacus orci, eget placerat velit sollicitudin non. Praesent imperdiet convallis tincidunt. Aliquam venenatis ultricies orci. Mauris accumsan volutpat magna vel condimentum. Donec et volutpat enim. Cras ac purus eget ex bibendum sollicitudin sed eget ligula. Nunc magna velit, feugiat in accumsan quis, aliquet posuere lorem. Proin dapibus leo sem, vitae dignissim odio malesuada eget. Donec venenatis pretium porta. In tempus eros at magna consectetur, id pellentesque magna iaculis.</chakra.p>
</Box> </Box>
</VStack> </VStack>
</Center> </Center>
......
theme/components/Alert.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { alertAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
const Alert: ComponentStyleConfig = {
baseStyle: { const { definePartsStyle, defineMultiStyleConfig } =
container: { createMultiStyleConfigHelpers(parts.keys);
borderRadius: '12px',
px: 6, const baseStyle = definePartsStyle({
py: 4, container: {
}, borderRadius: 'md',
px: 6,
py: 4,
}, },
}; });
const Alert = defineMultiStyleConfig({
baseStyle,
});
export default Alert; export default Alert;
theme/components/Button.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
const variantPrimary = { const variantPrimary = defineStyle({
bg: 'blue.600', bg: 'blue.600',
color: 'white', color: 'white',
fontWeight: 600, fontWeight: 600,
...@@ -15,9 +14,9 @@ const variantPrimary = { ...@@ -15,9 +14,9 @@ const variantPrimary = {
_disabled: { _disabled: {
opacity: 0.2, opacity: 0.2,
}, },
}; });
const variantSecondary: SystemStyleFunction = (props) => { const variantSecondary = defineStyle((props) => {
return { return {
color: mode('blue.600', 'blue.300')(props), color: mode('blue.600', 'blue.300')(props),
fontWeight: 600, fontWeight: 600,
...@@ -31,18 +30,18 @@ const variantSecondary: SystemStyleFunction = (props) => { ...@@ -31,18 +30,18 @@ const variantSecondary: SystemStyleFunction = (props) => {
opacity: 0.2, opacity: 0.2,
}, },
}; };
}; });
const variantIcon: SystemStyleFunction = (props) => { const variantIcon = defineStyle((props) => {
return { return {
color: mode('blue.600', 'blue.300')(props), color: mode('blue.600', 'blue.300')(props),
_hover: { _hover: {
color: mode('blue.400', 'blue.200')(props), color: mode('blue.400', 'blue.200')(props),
}, },
}; };
}; });
const variantIconBorder = { const variantIconBorder = defineStyle({
color: 'blue.600', color: 'blue.600',
borderColor: 'blue.600', borderColor: 'blue.600',
border: '2px solid', border: '2px solid',
...@@ -53,7 +52,7 @@ const variantIconBorder = { ...@@ -53,7 +52,7 @@ const variantIconBorder = {
_disabled: { _disabled: {
opacity: 0.2, opacity: 0.2,
}, },
}; });
const variants = { const variants = {
primary: variantPrimary, primary: variantPrimary,
...@@ -62,38 +61,42 @@ const variants = { ...@@ -62,38 +61,42 @@ const variants = {
iconBorder: variantIconBorder, iconBorder: variantIconBorder,
}; };
const Button: ComponentStyleConfig = { const baseStyle = defineStyle({
baseStyle: { fontWeight: 'normal',
fontWeight: 'normal', borderRadius: 'base',
borderRadius: 'base', });
},
variants, const sizes = {
sizes: { lg: defineStyle({
lg: { h: 12,
h: 12, minW: 'unset',
minW: 'unset', fontSize: 'lg',
fontSize: 'lg', px: 6,
px: 6, }),
}, md: defineStyle({
md: { h: 10,
h: 10, minW: 'unset',
minW: 'unset', fontSize: 'md',
fontSize: 'md', px: 4,
px: 4, }),
}, sm: defineStyle({
sm: { h: 8,
h: 8, minW: 'unset',
minW: 'unset', fontSize: 'sm',
fontSize: 'sm', px: 3,
px: 3, }),
}, xs: defineStyle({
xs: { h: 6,
h: 6, minW: 'unset',
minW: 'unset', fontSize: 'xs',
fontSize: 'xs', px: 2,
px: 2, }),
},
},
}; };
const Button = defineStyleConfig({
baseStyle,
variants,
sizes,
});
export default Button; export default Button;
theme/components/Checkbox.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { checkboxAnatomy as parts } from '@chakra-ui/anatomy';
import type { SystemStyleObject } from '@chakra-ui/theme-tools'; import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
const baseStyleLabel: SystemStyleObject = { const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
const baseStyleLabel = defineStyle({
_disabled: { opacity: 0.2 }, _disabled: { opacity: 0.2 },
}; });
const baseStyle = definePartsStyle({
label: baseStyleLabel,
});
const Checkbox: ComponentStyleConfig = { const Checkbox = defineMultiStyleConfig({
baseStyle: { baseStyle,
label: baseStyleLabel, });
},
};
export default Checkbox; export default Checkbox;
theme/components/Drawer.ts
View file @ 60219d5f
import type { drawerAnatomy as parts } from '@chakra-ui/anatomy'; import { drawerAnatomy as parts } from '@chakra-ui/anatomy';
import type { SystemStyleFunction, PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools'; import {
import { mode } from '@chakra-ui/theme-tools'; createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode, runIfFn } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
import getDefaultTransitionProps from '../utils/getDefaultTransitionProps'; import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
const transitionProps = getDefaultTransitionProps(); const transitionProps = getDefaultTransitionProps();
const baseStyleOverlay: SystemStyleObject = { const baseStyleOverlay = defineStyle({
...transitionProps, ...transitionProps,
bg: 'blackAlpha.800', bg: 'blackAlpha.800',
zIndex: 'overlay', zIndex: 'overlay',
}; });
const baseStyleDialog: SystemStyleFunction = (props) => { const baseStyleDialog = defineStyle((props) => {
const { isFullHeight } = props; const { isFullHeight } = props;
return { return {
...@@ -23,15 +30,15 @@ const baseStyleDialog: SystemStyleFunction = (props) => { ...@@ -23,15 +30,15 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
color: 'inherit', color: 'inherit',
boxShadow: mode('lg', 'dark-lg')(props), boxShadow: mode('lg', 'dark-lg')(props),
}; };
}; });
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({ const baseStyle = definePartsStyle((props) => ({
overlay: baseStyleOverlay, overlay: baseStyleOverlay,
dialog: baseStyleDialog(props), dialog: runIfFn(baseStyleDialog, props),
}); }));
const Drawer = { const Drawer = defineMultiStyleConfig({
baseStyle, baseStyle,
}; });
export default Drawer; export default Drawer;
theme/components/Form.ts
View file @ 60219d5f
import type { formAnatomy as parts } from '@chakra-ui/anatomy'; import { formAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import {
createMultiStyleConfigHelpers,
} from '@chakra-ui/styled-system';
import { getColor, mode } from '@chakra-ui/theme-tools'; import { getColor, mode } from '@chakra-ui/theme-tools';
import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
import type { Dict } from '@chakra-ui/utils'; import type { Dict } from '@chakra-ui/utils';
import getDefaultFormColors from '../utils/getDefaultFormColors'; import getDefaultFormColors from '../utils/getDefaultFormColors';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
const getActiveLabelStyles = (theme: Dict, fc: string, bc: string, size: 'md' | 'lg') => { const getActiveLabelStyles = (theme: Dict, fc: string, bc: string, size: 'md' | 'lg') => {
const baseStyles = { const baseStyles = {
backgroundColor: bc, backgroundColor: bc,
...@@ -84,7 +88,7 @@ const getActiveInputStyles = (size: 'md' | 'lg') => { ...@@ -84,7 +88,7 @@ const getActiveInputStyles = (size: 'md' | 'lg') => {
} }
}; };
const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => { const variantFloating = definePartsStyle((props) => {
const { theme, backgroundColor, size = 'md' } = props; const { theme, backgroundColor, size = 'md' } = props;
const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props); const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
const bc = backgroundColor || mode('white', 'black')(props); const bc = backgroundColor || mode('white', 'black')(props);
...@@ -151,12 +155,14 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP ...@@ -151,12 +155,14 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
color: mode('gray.500', 'whiteAlpha.400')(props), color: mode('gray.500', 'whiteAlpha.400')(props),
}, },
}; };
}; });
const Form: ComponentStyleConfig = { const variants = {
variants: { floating: variantFloating,
floating: variantFloating,
},
}; };
const Form = defineMultiStyleConfig({
variants,
});
export default Form; export default Form;
theme/components/Heading.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import type { SystemStyleInterpolation } from '@chakra-ui/theme-tools'; import type { SystemStyleInterpolation } from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
...@@ -10,24 +10,24 @@ const baseStyle: SystemStyleInterpolation = (props) => { ...@@ -10,24 +10,24 @@ const baseStyle: SystemStyleInterpolation = (props) => {
}; };
const sizes = { const sizes = {
lg: { lg: defineStyle({
fontSize: '32px', fontSize: '32px',
lineHeight: '40px', lineHeight: '40px',
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
}, }),
md: { md: defineStyle({
fontSize: '24px', fontSize: '24px',
lineHeight: '32px', lineHeight: '32px',
}, }),
sm: { sm: defineStyle({
fontSize: '18px', fontSize: '18px',
lineHeight: '24px', lineHeight: '24px',
}, }),
}; };
const Heading: ComponentStyleConfig = { const Heading = defineStyleConfig({
sizes, sizes,
baseStyle, baseStyle,
}; });
export default Heading; export default Heading;
theme/components/Input.ts
View file @ 60219d5f
import type { inputAnatomy as parts } from '@chakra-ui/anatomy'; import { inputAnatomy as parts } from '@chakra-ui/anatomy';
import { Input as InputComponent } from '@chakra-ui/react'; import { Input as InputComponent } from '@chakra-ui/react';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import {
import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools'; createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
import getDefaultTransitionProps from '../utils/getDefaultTransitionProps'; import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles'; import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
const sizes: Record<string, SystemStyleObject> = { const size = {
sm: { sm: defineStyle({
fontSize: 'md', fontSize: 'md',
lineHeight: '24px', lineHeight: '24px',
px: '8px', px: '8px',
py: '12px', py: '12px',
h: '40px', h: '40px',
borderRadius: 'base', borderRadius: 'base',
}, }),
md: { md: defineStyle({
fontSize: 'md', fontSize: 'md',
lineHeight: '20px', lineHeight: '20px',
px: '20px', px: '20px',
py: '20px', py: '20px',
h: '60px', h: '60px',
borderRadius: 'base', borderRadius: 'base',
}, }),
lg: { lg: defineStyle({
fontSize: 'md', fontSize: 'md',
lineHeight: '20px', lineHeight: '20px',
px: '24px', px: '24px',
py: '28px', py: '28px',
h: '80px', h: '80px',
borderRadius: 'base', borderRadius: 'base',
}, }),
}; };
const variantOutline: PartsStyleFunction<typeof parts> = (props) => { const variantOutline = definePartsStyle((props) => {
const transitionProps = getDefaultTransitionProps(); const transitionProps = getDefaultTransitionProps();
return { return {
...@@ -47,30 +52,34 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => { ...@@ -47,30 +52,34 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
...transitionProps, ...transitionProps,
}, },
}; };
});
const sizes = {
sm: definePartsStyle({
field: size.sm,
addon: size.sm,
}),
md: definePartsStyle({
field: size.md,
addon: size.md,
}),
lg: definePartsStyle({
field: size.lg,
addon: size.lg,
}),
}; };
const Input: ComponentStyleConfig = { const variants = {
sizes: { outline: variantOutline,
sm: { };
field: sizes.sm,
addon: sizes.sm, const Input = defineMultiStyleConfig({
}, sizes,
md: { variants,
field: sizes.md,
addon: sizes.md,
},
lg: {
field: sizes.lg,
addon: sizes.lg,
},
},
defaultProps: { defaultProps: {
size: 'md', size: 'md',
}, },
variants: { });
outline: variantOutline,
},
};
InputComponent.defaultProps = { InputComponent.defaultProps = {
...InputComponent.defaultProps, ...InputComponent.defaultProps,
......
theme/components/Link.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import type { SystemStyleInterpolation } from '@chakra-ui/styled-system';
import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
import type { SystemStyleFunction, SystemStyleInterpolation } from '@chakra-ui/theme-tools';
import getDefaultTransitionProps from '../utils/getDefaultTransitionProps'; import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
const baseStyle: SystemStyleInterpolation = { const baseStyle = defineStyle(getDefaultTransitionProps());
...getDefaultTransitionProps(),
};
const variantPrimary: SystemStyleFunction = (props) => { const variantPrimary = defineStyle((props) => {
return { return {
color: mode('blue.600', 'blue.300')(props), color: mode('blue.600', 'blue.300')(props),
_hover: { _hover: {
color: mode('blue.400', 'blue.200')(props), color: mode('blue.400', 'blue.200')(props),
}, },
}; };
}; });
const variantSecondary: SystemStyleFunction = (props) => { const variantSecondary = defineStyle((props) => {
return { return {
color: mode('gray.500', 'gray.500')(props), color: mode('gray.500', 'gray.500')(props),
_hover: { _hover: {
color: mode('gray.600', 'gray.400')(props), color: mode('gray.600', 'gray.400')(props),
}, },
}; };
}; });
const variants = { const variants: Record<string, SystemStyleInterpolation> = {
primary: variantPrimary, primary: variantPrimary,
secondary: variantSecondary, secondary: variantSecondary,
}; };
...@@ -35,10 +33,10 @@ const defaultProps = { ...@@ -35,10 +33,10 @@ const defaultProps = {
variant: 'primary', variant: 'primary',
}; };
const Link: ComponentStyleConfig = { const Link = defineStyleConfig({
variants, variants,
defaultProps, defaultProps,
baseStyle, baseStyle,
}; });
export default Link; export default Link;
theme/components/Modal.ts
View file @ 60219d5f
import { modalAnatomy as parts } from '@chakra-ui/anatomy'; import { modalAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentMultiStyleConfig } from '@chakra-ui/theme'; import { Modal as ModalComponent } from '@chakra-ui/react';
import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools'; import {
import { mode } from '@chakra-ui/theme-tools'; createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode, runIfFn } from '@chakra-ui/theme-tools';
const baseStyleDialog: SystemStyleFunction = (props) => { const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const baseStyleDialog = defineStyle((props) => {
return { return {
padding: 8, padding: 8,
borderRadius: 'lg', borderRadius: 'lg',
bg: mode('white', 'gray.900')(props), bg: mode('white', 'gray.900')(props),
margin: 'auto', margin: 'auto',
}; };
}; });
const baseStyleDialogContainer = { const baseStyleDialogContainer = defineStyle({
'::-webkit-scrollbar': { display: 'none' }, '::-webkit-scrollbar': { display: 'none' },
'scrollbar-width': 'none', 'scrollbar-width': 'none',
'@supports (height: -webkit-fill-available)': { height: '100vh' }, '@supports (height: -webkit-fill-available)': { height: '100vh' },
}; });
const baseStyleHeader: SystemStyleFunction = (props) => ({ const baseStyleHeader = defineStyle((props) => ({
padding: 0, padding: 0,
marginBottom: 8, marginBottom: 8,
fontSize: '2xl', fontSize: '2xl',
lineHeight: 10, lineHeight: 10,
color: mode('blackAlpha.800', 'whiteAlpha.800')(props), color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
}); }));
const baseStyleBody = { const baseStyleBody = defineStyle({
padding: 0, padding: 0,
marginBottom: 8, marginBottom: 8,
}; });
const baseStyleFooter = { const baseStyleFooter = defineStyle({
padding: 0, padding: 0,
justifyContent: 'flex-start', justifyContent: 'flex-start',
}; });
const baseStyleCloseButton: SystemStyleFunction = (props) => { const baseStyleCloseButton = defineStyle((props) => {
return { return {
top: 8, top: 8,
right: 8, right: 8,
...@@ -46,35 +52,46 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => { ...@@ -46,35 +52,46 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => {
_hover: { color: 'blue.400' }, _hover: { color: 'blue.400' },
_active: { bg: 'none' }, _active: { bg: 'none' },
}; };
}; });
const baseStyleOverlay = {
const baseStyleOverlay = defineStyle({
bg: 'blackAlpha.800', bg: 'blackAlpha.800',
}; });
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({ const baseStyle = definePartsStyle((props) => ({
dialog: baseStyleDialog(props), dialog: runIfFn(baseStyleDialog, props),
dialogContainer: baseStyleDialogContainer, dialogContainer: baseStyleDialogContainer,
header: baseStyleHeader(props), header: runIfFn(baseStyleHeader, props),
body: baseStyleBody, body: baseStyleBody,
footer: baseStyleFooter, footer: baseStyleFooter,
closeButton: baseStyleCloseButton(props), closeButton: runIfFn(baseStyleCloseButton, props),
overlay: baseStyleOverlay, overlay: baseStyleOverlay,
}); }));
const sizes = { const sizes = {
md: { md: definePartsStyle({
dialog: { dialog: {
maxW: '760px', maxW: '760px',
}, },
}, }),
full: definePartsStyle({
dialog: {
maxW: '100vw',
minH: '100vh',
my: '0',
borderRadius: '0',
},
}),
}; };
const Modal: ComponentMultiStyleConfig = { const Modal = defineMultiStyleConfig({
parts: parts.keys,
sizes, sizes,
baseStyle, baseStyle,
}; });
Modal.defaultProps = { isCentered: true };
export default Modal; export default Modal;
ModalComponent.defaultProps = {
...ModalComponent.defaultProps,
isCentered: true,
};
theme/components/Popover.ts
View file @ 60219d5f
import { popoverAnatomy as parts } from '@chakra-ui/anatomy'; import { popoverAnatomy as parts } from '@chakra-ui/anatomy';
import type { PartsStyleFunction, SystemStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools'; import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { cssVar, mode } from '@chakra-ui/theme-tools'; import { cssVar, mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const $popperBg = cssVar('popper-bg'); const $popperBg = cssVar('popper-bg');
const $arrowBg = cssVar('popper-arrow-bg'); const $arrowBg = cssVar('popper-arrow-bg');
const $arrowShadowColor = cssVar('popper-arrow-shadow-color'); const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
const baseStylePopper: SystemStyleObject = { const baseStylePopper = defineStyle({
zIndex: 10, zIndex: 10,
}; });
const baseStyleContent: SystemStyleFunction = (props) => { const baseStyleContent = defineStyle((props) => {
const bg = mode('white', 'gray.900')(props); const bg = mode('white', 'gray.900')(props);
const shadowColor = mode('gray.200', 'whiteAlpha.300')(props); const shadowColor = mode('gray.200', 'whiteAlpha.300')(props);
...@@ -31,34 +37,34 @@ const baseStyleContent: SystemStyleFunction = (props) => { ...@@ -31,34 +37,34 @@ const baseStyleContent: SystemStyleFunction = (props) => {
boxShadow: '2xl', boxShadow: '2xl',
}, },
}; };
}; });
const baseStyleHeader: SystemStyleObject = { const baseStyleHeader = defineStyle({
px: 3, px: 3,
py: 2, py: 2,
borderBottomWidth: '1px', borderBottomWidth: '1px',
}; });
const baseStyleBody: SystemStyleObject = { const baseStyleBody = defineStyle({
px: 4, px: 4,
py: 4, py: 4,
}; });
const baseStyleFooter: SystemStyleObject = { const baseStyleFooter = defineStyle({
px: 3, px: 3,
py: 2, py: 2,
borderTopWidth: '1px', borderTopWidth: '1px',
}; });
const baseStyleCloseButton: SystemStyleObject = { const baseStyleCloseButton = defineStyle({
position: 'absolute', position: 'absolute',
borderRadius: 'md', borderRadius: 'md',
top: 1, top: 1,
insetEnd: 2, insetEnd: 2,
padding: 2, padding: 2,
}; });
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({ const baseStyle = definePartsStyle((props) => ({
popper: baseStylePopper, popper: baseStylePopper,
content: baseStyleContent(props), content: baseStyleContent(props),
header: baseStyleHeader, header: baseStyleHeader,
...@@ -66,11 +72,10 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({ ...@@ -66,11 +72,10 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
footer: baseStyleFooter, footer: baseStyleFooter,
arrow: {}, arrow: {},
closeButton: baseStyleCloseButton, closeButton: baseStyleCloseButton,
}); }));
const Popover = { const Popover = defineMultiStyleConfig({
parts: parts.keys,
baseStyle, baseStyle,
}; });
export default Popover; export default Popover;
theme/components/Radio.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { radioAnatomy as parts } from '@chakra-ui/anatomy';
import type { SystemStyleObject } from '@chakra-ui/theme-tools'; import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
const baseStyleLabel: SystemStyleObject = { const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const baseStyleLabel = defineStyle({
_disabled: { opacity: 0.2 }, _disabled: { opacity: 0.2 },
}; });
const baseStyle = definePartsStyle({
label: baseStyleLabel,
});
const Radio: ComponentStyleConfig = { const Radio = defineMultiStyleConfig({
baseStyle: { baseStyle,
label: baseStyleLabel, });
},
};
export default Radio; export default Radio;
theme/components/Table.ts
View file @ 60219d5f
import type { tableAnatomy as parts } from '@chakra-ui/anatomy'; import { tableAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentMultiStyleConfig } from '@chakra-ui/theme'; import {
createMultiStyleConfigHelpers,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
import getDefaultTransitionProps from '../utils/getDefaultTransitionProps'; import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
const variantSimple: PartsStyleFunction<typeof parts> = (props) => { const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const variantSimple = definePartsStyle((props) => {
const transitionProps = getDefaultTransitionProps(); const transitionProps = getDefaultTransitionProps();
return { return {
...@@ -23,49 +27,54 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => { ...@@ -23,49 +27,54 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
...transitionProps, ...transitionProps,
}, },
}; };
}; });
const Table: ComponentMultiStyleConfig = { const sizes = {
parts: [ 'th', 'td', 'table', 'thead' ], md: definePartsStyle({
baseStyle: {
thead: {
backgroundColor: 'gray.50',
},
th: { th: {
textTransform: 'none', px: 4,
fontFamily: 'body', fontSize: 'sm',
fontWeight: '500',
overflow: 'hidden',
color: 'gray.500',
letterSpacing: 'none',
}, },
td: { td: {
fontSize: 'md', px: 4,
verticalAlign: 'top', py: 6,
},
table: {
tableLayout: 'fixed',
borderTopLeftRadius: 'base',
borderTopRightRadius: 'base',
overflow: 'hidden',
fontVariant: 'normal',
}, },
}),
};
const variants = {
simple: variantSimple,
};
const baseStyle = definePartsStyle({
thead: {
backgroundColor: 'gray.50',
}, },
sizes: { th: {
md: { textTransform: 'none',
th: { fontFamily: 'body',
px: 4, fontWeight: '500',
fontSize: 'sm', overflow: 'hidden',
}, color: 'gray.500',
td: { letterSpacing: 'none',
px: 4,
py: 6,
},
},
}, },
variants: { td: {
simple: variantSimple, fontSize: 'md',
verticalAlign: 'top',
}, },
}; table: {
tableLayout: 'fixed',
borderTopLeftRadius: 'base',
borderTopRightRadius: 'base',
overflow: 'hidden',
fontVariant: 'normal',
},
});
const Table = defineMultiStyleConfig({
baseStyle,
sizes,
variants,
});
export default Table; export default Table;
theme/components/Tabs.ts
View file @ 60219d5f
import type { tabsAnatomy as parts } from '@chakra-ui/anatomy'; import { tabsAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import {
import type { createMultiStyleConfigHelpers,
PartsStyleFunction, } from '@chakra-ui/styled-system';
} from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => { const variantSoftRounded = definePartsStyle((props) => {
return { return {
tab: { tab: {
borderRadius: 'base', borderRadius: 'base',
...@@ -23,12 +24,14 @@ const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => { ...@@ -23,12 +24,14 @@ const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
}, },
}, },
}; };
}; });
const Tabs: ComponentStyleConfig = { const variants = {
variants: { 'soft-rounded': variantSoftRounded,
'soft-rounded': variantSoftRounded,
},
}; };
const Tabs = defineMultiStyleConfig({
variants,
});
export default Tabs; export default Tabs;
theme/components/Tag.ts
View file @ 60219d5f
import type { tagAnatomy as parts } from '@chakra-ui/anatomy'; import { tagAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
import getDefaultTransitionProps from '../utils/getDefaultTransitionProps'; import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
const variantGray: PartsStyleFunction<typeof parts> = (props) => { const variantGray = definePartsStyle((props) => {
const transitionProps = getDefaultTransitionProps(); const transitionProps = getDefaultTransitionProps();
return { return {
...@@ -15,22 +20,26 @@ const variantGray: PartsStyleFunction<typeof parts> = (props) => { ...@@ -15,22 +20,26 @@ const variantGray: PartsStyleFunction<typeof parts> = (props) => {
...transitionProps, ...transitionProps,
}, },
}; };
}; });
const variants = { const variants = {
gray: variantGray, gray: variantGray,
}; };
const Tag: ComponentStyleConfig = { const baseStyleContainer = defineStyle({
baseStyle: { display: 'inline-block',
container: { overflow: 'hidden',
display: 'inline-block', textOverflow: 'ellipsis',
overflow: 'hidden', borderRadius: 'sm',
textOverflow: 'ellipsis', });
borderRadius: 'sm',
}, const baseStyle = definePartsStyle({
}, container: baseStyleContainer,
});
const Tag = defineMultiStyleConfig({
baseStyle,
variants, variants,
}; });
export default Tag; export default Tag;
theme/components/Text.ts
View file @ 60219d5f
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import type { SystemStyleInterpolation } from '@chakra-ui/styled-system';
import type { SystemStyleFunction } from '@chakra-ui/theme-tools'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
const variantPrimary: SystemStyleFunction = (props) => ({ const variantPrimary = defineStyle((props) => ({
color: mode('blackAlpha.800', 'whiteAlpha.800')(props), color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
}); }));
const variantSecondary: SystemStyleFunction = (props) => ({ const variantSecondary = defineStyle((props) => ({
color: mode('gray.500', 'gray.400')(props), color: mode('gray.500', 'gray.400')(props),
}); }));
const variantAlternate: SystemStyleFunction = (props) => ({ const variantAlternate = defineStyle((props) => ({
color: mode('blue.600', 'blue.300')(props), color: mode('blue.600', 'blue.300')(props),
}); }));
const variantInherit = { const variantInherit = {
color: 'inherit', color: 'inherit',
}; };
const variants = { const variants: Record<string, SystemStyleInterpolation> = {
primary: variantPrimary, primary: variantPrimary,
secondary: variantSecondary, secondary: variantSecondary,
alternate: variantAlternate, alternate: variantAlternate,
...@@ -29,9 +29,9 @@ const defaultProps = { ...@@ -29,9 +29,9 @@ const defaultProps = {
variant: 'primary', variant: 'primary',
}; };
const Text: ComponentStyleConfig = { const Text = defineStyleConfig({
defaultProps, defaultProps,
variants, variants,
}; });
export default Text; export default Text;
theme/components/Textarea.ts
View file @ 60219d5f
import { Textarea as TextareaComponent } from '@chakra-ui/react'; import { Textarea as TextareaComponent } from '@chakra-ui/react';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import type {
SystemStyleObject,
} from '@chakra-ui/theme-tools';
import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles'; import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
const sizes: Record<string, SystemStyleObject> = { const sizes = {
lg: { lg: defineStyle({
fontSize: 'md', fontSize: 'md',
lineHeight: '20px', lineHeight: '20px',
px: '24px', px: '24px',
py: '28px', py: '28px',
h: '160px', h: '160px',
borderRadius: 'base', borderRadius: 'base',
}, }),
}; };
const Textarea: ComponentStyleConfig = { const Textarea = defineStyleConfig({
sizes, sizes,
variants: { variants: {
outline: (props) => getOutlinedFieldStyles(props), outline: defineStyle(getOutlinedFieldStyles),
}, },
defaultProps: { defaultProps: {
size: 'md',
variant: 'outline', variant: 'outline',
}, },
}; });
TextareaComponent.defaultProps = { TextareaComponent.defaultProps = {
...TextareaComponent.defaultProps, ...TextareaComponent.defaultProps,
......
theme/components/Tooltip.ts
View file @ 60219d5f
import { Tooltip as TooltipComponent } from '@chakra-ui/react'; import { Tooltip as TooltipComponent } from '@chakra-ui/react';
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
const variantNav: SystemStyleFunction = (props) => { const variantNav = defineStyle((props) => {
return { return {
bg: mode('blue.50', 'gray.800')(props), bg: mode('blue.50', 'gray.800')(props),
color: 'blue.400', color: 'blue.400',
...@@ -16,18 +15,20 @@ const variantNav: SystemStyleFunction = (props) => { ...@@ -16,18 +15,20 @@ const variantNav: SystemStyleFunction = (props) => {
boxShadow: 'none', boxShadow: 'none',
fontWeight: '500', fontWeight: '500',
}; };
}; });
const variants = { const variants = {
nav: variantNav, nav: variantNav,
}; };
const Tooltip: ComponentStyleConfig = { const baseStyle = defineStyle({
maxWidth: 'unset',
});
const Tooltip = defineStyleConfig({
variants, variants,
baseStyle: { baseStyle,
maxWidth: 'unset', });
},
};
TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true }; TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment