1038 lines
22 KiB
TypeScript
1038 lines
22 KiB
TypeScript
import { createStyle } from '@gluestack-style/react';
|
|
|
|
export const Button = createStyle({
|
|
'borderRadius': '$sm',
|
|
'backgroundColor': '$primary500',
|
|
'flexDirection': 'row',
|
|
'justifyContent': 'center',
|
|
'alignItems': 'center',
|
|
|
|
'_text': {
|
|
color: '$textLight0',
|
|
fontWeight: '$semibold',
|
|
_dark: {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
|
|
'_icon': {
|
|
color: '$textLight0',
|
|
_dark: {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
|
|
'_spinner': {
|
|
props: {
|
|
color: '$backgroundLight0',
|
|
},
|
|
_dark: {
|
|
props: {
|
|
color: '$backgroundDark0',
|
|
},
|
|
},
|
|
},
|
|
|
|
'variants': {
|
|
action: {
|
|
primary: {
|
|
'bg': '$primary500',
|
|
'borderColor': '$primary300',
|
|
|
|
':hover': {
|
|
bg: '$primary600',
|
|
borderColor: '$primary400',
|
|
},
|
|
|
|
':active': {
|
|
bg: '$primary700',
|
|
borderColor: '$primary700',
|
|
},
|
|
|
|
'_text': {
|
|
'color': '$primary600',
|
|
':hover': {
|
|
color: '$primary600',
|
|
},
|
|
':active': {
|
|
color: '$primary700',
|
|
},
|
|
},
|
|
|
|
'_icon': {
|
|
'color': '$primary600',
|
|
':hover': {
|
|
color: '$primary600',
|
|
},
|
|
':active': {
|
|
color: '$primary700',
|
|
},
|
|
},
|
|
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$primary600',
|
|
},
|
|
':hover': {
|
|
props: {
|
|
color: '$primary600',
|
|
},
|
|
},
|
|
':active': {
|
|
props: {
|
|
color: '$primary700',
|
|
},
|
|
},
|
|
},
|
|
|
|
'_dark': {
|
|
'bg': '$primary400',
|
|
'borderColor': '$primary700',
|
|
':hover': {
|
|
bg: '$primary500',
|
|
borderColor: '$primary400',
|
|
},
|
|
':active': {
|
|
bg: '$primary600',
|
|
borderColor: '$primary300',
|
|
},
|
|
'_text': {
|
|
'color': '$primary300',
|
|
':hover': {
|
|
color: '$primary300',
|
|
},
|
|
':active': {
|
|
color: '$primary200',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$primary300',
|
|
':hover': {
|
|
color: '$primary300',
|
|
},
|
|
':active': {
|
|
color: '$primary200',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': { color: '$primary300' },
|
|
':hover': {
|
|
props: { color: '$primary300' },
|
|
},
|
|
':active': {
|
|
props: { color: '$primary200' },
|
|
},
|
|
},
|
|
|
|
':focusVisible': {
|
|
_web: {
|
|
boxShadow: 'offset 0 0 0 2px $info400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
secondary: {
|
|
'bg': '$secondary500',
|
|
'borderColor': '$secondary300',
|
|
|
|
':hover': {
|
|
bg: '$secondary600',
|
|
borderColor: '$secondary400',
|
|
},
|
|
|
|
':active': {
|
|
bg: '$secondary700',
|
|
borderColor: '$secondary700',
|
|
},
|
|
|
|
'_text': {
|
|
'color': '$secondary600',
|
|
':hover': {
|
|
color: '$secondary600',
|
|
},
|
|
':active': {
|
|
color: '$secondary700',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$secondary600',
|
|
':hover': {
|
|
color: '$secondary600',
|
|
},
|
|
':active': {
|
|
color: '$secondary700',
|
|
},
|
|
},
|
|
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$secondary600',
|
|
},
|
|
':hover': {
|
|
props: { color: '$secondary600' },
|
|
},
|
|
':active': {
|
|
props: { color: '$secondary700' },
|
|
},
|
|
},
|
|
|
|
'_dark': {
|
|
'bg': '$secondary400',
|
|
'borderColor': '$secondary700',
|
|
':hover': {
|
|
bg: '$secondary500',
|
|
borderColor: '$secondary400',
|
|
},
|
|
':active': {
|
|
bg: '$secondary600',
|
|
borderColor: '$secondary300',
|
|
},
|
|
'_text': {
|
|
'color': '$secondary300',
|
|
':hover': {
|
|
color: '$secondary300',
|
|
},
|
|
':active': {
|
|
color: '$secondary200',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$secondary300',
|
|
':hover': {
|
|
color: '$secondary300',
|
|
},
|
|
':active': {
|
|
color: '$secondary200',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$secondary300',
|
|
},
|
|
':hover': {
|
|
props: { color: '$secondary300' },
|
|
},
|
|
':active': {
|
|
props: { color: '$secondary200' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
positive: {
|
|
'bg': '$success500',
|
|
'borderColor': '$success300',
|
|
':hover': {
|
|
bg: '$success600',
|
|
borderColor: '$success400',
|
|
},
|
|
|
|
':active': {
|
|
bg: '$success700',
|
|
borderColor: '$success700',
|
|
},
|
|
|
|
'_text': {
|
|
'color': '$success600',
|
|
':hover': {
|
|
color: '$success600',
|
|
},
|
|
':active': {
|
|
color: '$success700',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$success600',
|
|
':hover': {
|
|
color: '$success600',
|
|
},
|
|
':active': {
|
|
color: '$success700',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$success600',
|
|
},
|
|
':hover': {
|
|
props: { color: '$success600' },
|
|
},
|
|
':active': {
|
|
props: { color: '$success700' },
|
|
},
|
|
},
|
|
'_dark': {
|
|
'bg': '$success400',
|
|
'borderColor': '$success700',
|
|
':hover': {
|
|
bg: '$success500',
|
|
borderColor: '$success400',
|
|
},
|
|
':active': {
|
|
bg: '$success600',
|
|
borderColor: '$success300',
|
|
},
|
|
'_text': {
|
|
'color': '$success300',
|
|
':hover': {
|
|
color: '$success300',
|
|
},
|
|
':active': {
|
|
color: '$success200',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$success300',
|
|
':hover': {
|
|
color: '$success300',
|
|
},
|
|
':active': {
|
|
color: '$success200',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$success300',
|
|
},
|
|
':hover': {
|
|
props: { color: '$success300' },
|
|
},
|
|
':active': {
|
|
props: { color: '$success200' },
|
|
},
|
|
},
|
|
':focusVisible': {
|
|
_web: {
|
|
boxShadow: 'offset 0 0 0 2px $info400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
negative: {
|
|
'bg': '$error500',
|
|
'borderColor': '$error300',
|
|
':hover': {
|
|
bg: '$error600',
|
|
borderColor: '$error400',
|
|
},
|
|
|
|
':active': {
|
|
bg: '$error700',
|
|
borderColor: '$error700',
|
|
},
|
|
'_text': {
|
|
'color': '$error600',
|
|
':hover': {
|
|
color: '$error600',
|
|
},
|
|
':active': {
|
|
color: '$error700',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$error600',
|
|
':hover': {
|
|
color: '$error600',
|
|
},
|
|
':active': {
|
|
color: '$error700',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$error600',
|
|
},
|
|
':hover': {
|
|
props: { color: '$error600' },
|
|
},
|
|
':active': {
|
|
props: { color: '$error700' },
|
|
},
|
|
},
|
|
'_dark': {
|
|
'bg': '$error400',
|
|
'borderColor': '$error700',
|
|
':hover': {
|
|
bg: '$error500',
|
|
borderColor: '$error400',
|
|
},
|
|
':active': {
|
|
bg: '$error600',
|
|
borderColor: '$error300',
|
|
},
|
|
'_text': {
|
|
'color': '$error300',
|
|
':hover': {
|
|
color: '$error300',
|
|
},
|
|
':active': {
|
|
color: '$error200',
|
|
},
|
|
},
|
|
'_icon': {
|
|
'color': '$error300',
|
|
':hover': {
|
|
color: '$error300',
|
|
},
|
|
':active': {
|
|
color: '$error200',
|
|
},
|
|
},
|
|
'_spinner': {
|
|
'props': {
|
|
color: '$error300',
|
|
},
|
|
':hover': {
|
|
props: { color: '$error300' },
|
|
},
|
|
':active': {
|
|
props: { color: '$error200' },
|
|
},
|
|
},
|
|
':focusVisible': {
|
|
_web: {
|
|
boxShadow: 'offset 0 0 0 2px $info400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
default: {
|
|
'bg': '$transparent',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
variant: {
|
|
link: {
|
|
'px': '$0',
|
|
':hover': {
|
|
_text: {
|
|
textDecorationLine: 'underline',
|
|
},
|
|
},
|
|
':active': {
|
|
_text: {
|
|
textDecorationLine: 'underline',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
'bg': 'transparent',
|
|
'borderWidth': '$1',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
_text: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
_icon: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
_dark: {
|
|
_text: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
_icon: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
size: {
|
|
xs: {
|
|
px: '$3.5',
|
|
h: '$8',
|
|
_icon: {
|
|
props: {
|
|
size: '2xs',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'xs',
|
|
},
|
|
},
|
|
},
|
|
sm: {
|
|
px: '$4',
|
|
h: '$9',
|
|
_icon: {
|
|
props: {
|
|
size: 'sm',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'sm',
|
|
},
|
|
},
|
|
},
|
|
md: {
|
|
px: '$5',
|
|
h: '$10',
|
|
_icon: {
|
|
props: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
px: '$6',
|
|
h: '$11',
|
|
_icon: {
|
|
props: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'lg',
|
|
},
|
|
},
|
|
},
|
|
xl: {
|
|
px: '$7',
|
|
h: '$12',
|
|
_icon: {
|
|
props: {
|
|
size: 'lg',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'xl',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
'compoundVariants': [
|
|
{
|
|
action: 'primary',
|
|
variant: 'link',
|
|
value: {
|
|
'px': '$0',
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'secondary',
|
|
variant: 'link',
|
|
value: {
|
|
'px': '$0',
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'positive',
|
|
variant: 'link',
|
|
value: {
|
|
'px': '$0',
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'negative',
|
|
variant: 'link',
|
|
value: {
|
|
'px': '$0',
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: 'transparent',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'primary',
|
|
variant: 'outline',
|
|
value: {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'secondary',
|
|
variant: 'outline',
|
|
value: {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'positive',
|
|
variant: 'outline',
|
|
value: {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'negative',
|
|
variant: 'outline',
|
|
value: {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundLight50',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
'_dark': {
|
|
'bg': 'transparent',
|
|
':hover': {
|
|
bg: '$backgroundDark900',
|
|
},
|
|
':active': {
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'primary',
|
|
variant: 'solid',
|
|
value: {
|
|
_text: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
_dark: {
|
|
_text: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'secondary',
|
|
variant: 'solid',
|
|
value: {
|
|
_text: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
_dark: {
|
|
_text: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'positive',
|
|
variant: 'solid',
|
|
value: {
|
|
_text: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
'props': { color: '$textLight0' },
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
|
|
_dark: {
|
|
_text: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
action: 'negative',
|
|
variant: 'solid',
|
|
value: {
|
|
_text: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textLight0',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textLight0' },
|
|
':hover': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textLight0' },
|
|
},
|
|
},
|
|
_dark: {
|
|
_text: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_icon: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
_spinner: {
|
|
'props': { color: '$textDark0' },
|
|
':hover': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
':active': {
|
|
props: { color: '$textDark0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
|
|
'props': {
|
|
size: 'md',
|
|
variant: 'solid',
|
|
action: 'primary',
|
|
},
|
|
|
|
'_web': {
|
|
':focusVisible': {
|
|
outlineWidth: '$0.5',
|
|
outlineColor: '$primary700',
|
|
outlineStyle: 'solid',
|
|
_dark: {
|
|
outlineColor: '$primary300',
|
|
},
|
|
},
|
|
},
|
|
|
|
':disabled': {
|
|
opacity: 0.4,
|
|
},
|
|
});
|