165 lines
3.2 KiB
TypeScript
165 lines
3.2 KiB
TypeScript
import { createStyle } from '@gluestack-style/react';
|
|
|
|
export const Badge = createStyle({
|
|
'flexDirection': 'row',
|
|
'alignItems': 'center',
|
|
'borderRadius': '$xs',
|
|
'variants': {
|
|
action: {
|
|
error: {
|
|
bg: '$backgroundLightError',
|
|
borderColor: '$error300',
|
|
_icon: {
|
|
color: '$error600',
|
|
},
|
|
_text: {
|
|
color: '$error600',
|
|
},
|
|
_dark: {
|
|
bg: '$backgroundDarkError',
|
|
borderColor: '$error700',
|
|
_text: {
|
|
color: '$error400',
|
|
},
|
|
_icon: {
|
|
color: '$error400',
|
|
},
|
|
},
|
|
},
|
|
warning: {
|
|
bg: '$backgroundLightWarning',
|
|
borderColor: '$warning300',
|
|
_icon: {
|
|
color: '$warning600',
|
|
},
|
|
_text: {
|
|
color: '$warning600',
|
|
},
|
|
_dark: {
|
|
bg: '$backgroundDarkWarning',
|
|
borderColor: '$warning700',
|
|
_text: {
|
|
color: '$warning400',
|
|
},
|
|
_icon: {
|
|
color: '$warning400',
|
|
},
|
|
},
|
|
},
|
|
success: {
|
|
bg: '$backgroundLightSuccess',
|
|
borderColor: '$success300',
|
|
_icon: {
|
|
color: '$success600',
|
|
},
|
|
_text: {
|
|
color: '$success600',
|
|
},
|
|
_dark: {
|
|
bg: '$backgroundDarkSuccess',
|
|
borderColor: '$success700',
|
|
_text: {
|
|
color: '$success400',
|
|
},
|
|
_icon: {
|
|
color: '$success400',
|
|
},
|
|
},
|
|
},
|
|
info: {
|
|
bg: '$backgroundLightInfo',
|
|
borderColor: '$info300',
|
|
_icon: {
|
|
color: '$info600',
|
|
},
|
|
_text: {
|
|
color: '$info600',
|
|
},
|
|
_dark: {
|
|
bg: '$backgroundDarkInfo',
|
|
borderColor: '$info700',
|
|
_text: {
|
|
color: '$info400',
|
|
},
|
|
_icon: {
|
|
color: '$info400',
|
|
},
|
|
},
|
|
},
|
|
muted: {
|
|
bg: '$backgroundLightMuted',
|
|
borderColor: '$secondary300',
|
|
_icon: {
|
|
color: '$secondary600',
|
|
},
|
|
_text: {
|
|
color: '$secondary600',
|
|
},
|
|
_dark: {
|
|
bg: '$backgroundDarkMuted',
|
|
borderColor: '$secondary700',
|
|
_text: {
|
|
color: '$secondary400',
|
|
},
|
|
_icon: {
|
|
color: '$secondary400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
variant: {
|
|
solid: {},
|
|
outline: {
|
|
borderWidth: '$1',
|
|
},
|
|
},
|
|
|
|
size: {
|
|
sm: {
|
|
px: '$2',
|
|
_icon: {
|
|
props: {
|
|
size: '2xs',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: '2xs',
|
|
},
|
|
},
|
|
},
|
|
md: {
|
|
px: '$2',
|
|
_icon: {
|
|
props: {
|
|
size: 'xs',
|
|
},
|
|
},
|
|
_text: {
|
|
props: {
|
|
size: 'xs',
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
px: '$2',
|
|
_icon: {
|
|
props: { size: 'sm' },
|
|
},
|
|
_text: {
|
|
props: { size: 'sm' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
':disabled': {
|
|
opacity: 0.5,
|
|
},
|
|
'defaultProps': {
|
|
action: 'info',
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
});
|