ignitegym/config/theme/Accordion.ts

112 lines
2.3 KiB
TypeScript

import { createStyle } from '@gluestack-style/react';
export const Accordion = createStyle({
width: '$full',
_icon: {
color: '$textLight900',
_dark: {
color: '$textDark50',
},
},
_titleText: {
color: '$textLight900',
_dark: {
color: '$textDark50',
},
},
_contentText: {
color: '$textLight700',
_dark: {
color: '$textDark200',
},
},
variants: {
size: {
sm: {
_titleText: {
fontSize: '$sm',
fontFamily: '$body',
fontWeight: '$bold',
lineHeight: '$sm',
},
_contentText: {
fontSize: '$sm',
fontFamily: '$body',
fontWeight: '$normal',
lineHeight: '$sm',
},
},
md: {
_titleText: {
fontSize: '$md',
fontFamily: '$body',
fontWeight: '$bold',
lineHeight: '$md',
},
_contentText: {
fontSize: '$md',
fontFamily: '$body',
fontWeight: '$normal',
lineHeight: '$md',
},
},
lg: {
_titleText: {
fontSize: '$lg',
fontFamily: '$body',
fontWeight: '$bold',
lineHeight: '$lg',
},
_contentText: {
fontSize: '$lg',
fontFamily: '$body',
fontWeight: '$normal',
lineHeight: '$lg',
},
},
},
variant: {
filled: {
backgroundColor: '$white',
_item: {
backgroundColor: '$backgroundLight0',
},
shadowColor: '$backgroundLight900',
shadowOffset: {
width: 0,
height: 3,
},
shadowRadius: 8,
shadowOpacity: 0.2,
elevation: 10,
_dark: {
backgroundColor: 'transparent',
_item: {
backgroundColor: '$backgroundDark950',
},
},
},
unfilled: {
shadowColor: 'transparent',
shadowOffset: {
width: 0,
height: 0,
},
_item: {
backgroundColor: 'transparent',
},
_dark: {
_item: {
backgroundColor: 'transparent',
},
},
},
},
},
defaultProps: {
theme: 'light',
size: 'md',
variant: 'filled',
},
});