10638 lines
265 KiB
YAML
10638 lines
265 KiB
YAML
{
|
|
conditions: {
|
|
hover: [
|
|
'@media (hover: hover)',
|
|
'&:is(:hover, [data-hover]):not(:disabled, [data-disabled])',
|
|
],
|
|
active:
|
|
'&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])',
|
|
focus: '&:is(:focus, [data-focus])',
|
|
focusWithin: '&:is(:focus-within, [data-focus-within])',
|
|
focusVisible: '&:is(:focus-visible, [data-focus-visible])',
|
|
disabled:
|
|
'&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])',
|
|
visited: '&:visited',
|
|
target: '&:target',
|
|
readOnly: '&:is([data-readonly], [aria-readonly=true], [readonly])',
|
|
readWrite: '&:read-write',
|
|
empty: '&:is(:empty, [data-empty])',
|
|
checked:
|
|
'&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
|
|
enabled: '&:enabled',
|
|
expanded:
|
|
'&:is([aria-expanded=true], [data-expanded], [data-state=expanded])',
|
|
highlighted: '&[data-highlighted]',
|
|
complete: '&[data-complete]',
|
|
incomplete: '&[data-incomplete]',
|
|
dragging: '&[data-dragging]',
|
|
before: '&::before',
|
|
after: '&::after',
|
|
firstLetter: '&::first-letter',
|
|
firstLine: '&::first-line',
|
|
marker: '&::marker',
|
|
selection: '&::selection',
|
|
file: '&::file-selector-button',
|
|
backdrop: '&::backdrop',
|
|
first: '&:first-of-type',
|
|
last: '&:last-of-type',
|
|
notFirst: '&:not(:first-of-type)',
|
|
notLast: '&:not(:last-of-type)',
|
|
only: '&:only-child',
|
|
even: '&:nth-of-type(even)',
|
|
odd: '&:nth-of-type(odd)',
|
|
peerFocus: '.peer:is(:focus, [data-focus]) ~ &',
|
|
peerHover:
|
|
'.peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &',
|
|
peerActive:
|
|
'.peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &',
|
|
peerFocusWithin: '.peer:focus-within ~ &',
|
|
peerFocusVisible: '.peer:is(:focus-visible, [data-focus-visible]) ~ &',
|
|
peerDisabled: '.peer:is(:disabled, [disabled], [data-disabled]) ~ &',
|
|
peerChecked:
|
|
'.peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &',
|
|
peerInvalid: '.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &',
|
|
peerExpanded:
|
|
'.peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &',
|
|
peerPlaceholderShown: '.peer:placeholder-shown ~ &',
|
|
groupFocus: '.group:is(:focus, [data-focus]) &',
|
|
groupHover:
|
|
'.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &',
|
|
groupActive:
|
|
'.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &',
|
|
groupFocusWithin: '.group:focus-within &',
|
|
groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &',
|
|
groupDisabled: '.group:is(:disabled, [disabled], [data-disabled]) &',
|
|
groupChecked:
|
|
'.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &',
|
|
groupExpanded:
|
|
'.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
|
|
groupInvalid: '.group:invalid &',
|
|
indeterminate:
|
|
'&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
|
|
required: '&:is([data-required], [aria-required=true])',
|
|
valid: '&:is([data-valid], [data-state=valid])',
|
|
invalid: '&:is([data-invalid], [aria-invalid=true], [data-state=invalid])',
|
|
autofill: '&:autofill',
|
|
inRange: '&:is(:in-range, [data-in-range])',
|
|
outOfRange: '&:is(:out-of-range, [data-outside-range])',
|
|
placeholder: '&::placeholder, &[data-placeholder]',
|
|
placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown])',
|
|
pressed: '&:is([aria-pressed=true], [data-pressed])',
|
|
selected: '&:is([aria-selected=true], [data-selected])',
|
|
grabbed: '&:is([aria-grabbed=true], [data-grabbed])',
|
|
underValue: '&[data-state=under-value]',
|
|
overValue: '&[data-state=over-value]',
|
|
atValue: '&[data-state=at-value]',
|
|
default: '&:default',
|
|
optional: '&:optional',
|
|
open: '&:is([open], [data-open], [data-state=open])',
|
|
closed: '&:is([closed], [data-closed], [data-state=closed])',
|
|
fullscreen: '&is(:fullscreen, [data-fullscreen])',
|
|
loading: '&:is([data-loading], [aria-busy=true])',
|
|
hidden: '&:is([hidden], [data-hidden])',
|
|
current: '&[data-current]',
|
|
currentPage: '&[aria-current=page]',
|
|
currentStep: '&[aria-current=step]',
|
|
today: '&[data-today]',
|
|
unavailable: '&[data-unavailable]',
|
|
rangeStart: '&[data-range-start]',
|
|
rangeEnd: '&[data-range-end]',
|
|
now: '&[data-now]',
|
|
topmost: '&[data-topmost]',
|
|
motionReduce: '@media (prefers-reduced-motion: reduce)',
|
|
motionSafe: '@media (prefers-reduced-motion: no-preference)',
|
|
print: '@media print',
|
|
landscape: '@media (orientation: landscape)',
|
|
portrait: '@media (orientation: portrait)',
|
|
dark: '.dark &, .dark .chakra-theme:not(.light) &',
|
|
light: ':root &, .light &',
|
|
osDark: '@media (prefers-color-scheme: dark)',
|
|
osLight: '@media (prefers-color-scheme: light)',
|
|
highContrast: '@media (forced-colors: active)',
|
|
lessContrast: '@media (prefers-contrast: less)',
|
|
moreContrast: '@media (prefers-contrast: more)',
|
|
ltr: '[dir=ltr] &',
|
|
rtl: '[dir=rtl] &',
|
|
scrollbar: '&::-webkit-scrollbar',
|
|
scrollbarThumb: '&::-webkit-scrollbar-thumb',
|
|
scrollbarTrack: '&::-webkit-scrollbar-track',
|
|
horizontal: '&[data-orientation=horizontal]',
|
|
vertical: '&[data-orientation=vertical]',
|
|
icon: '& :where(svg)',
|
|
starting: '@starting-style',
|
|
},
|
|
utilities: {
|
|
background: {
|
|
shorthand: ['bg'],
|
|
},
|
|
backgroundColor: {
|
|
shorthand: ['bgColor'],
|
|
},
|
|
backgroundSize: {
|
|
shorthand: ['bgSize'],
|
|
},
|
|
backgroundPosition: {
|
|
shorthand: ['bgPos'],
|
|
},
|
|
backgroundRepeat: {
|
|
shorthand: ['bgRepeat'],
|
|
},
|
|
backgroundAttachment: {
|
|
shorthand: ['bgAttachment'],
|
|
},
|
|
backgroundClip: {
|
|
shorthand: ['bgClip'],
|
|
values: ['text'],
|
|
},
|
|
backgroundGradient: {
|
|
shorthand: ['bgGradient'],
|
|
},
|
|
gradientFrom: {},
|
|
gradientTo: {},
|
|
gradientVia: {},
|
|
backgroundImage: {
|
|
values: 'gradients',
|
|
shorthand: ['bgImg', 'bgImage'],
|
|
},
|
|
border: {
|
|
values: 'borders',
|
|
},
|
|
borderTop: {
|
|
values: 'borders',
|
|
},
|
|
borderLeft: {
|
|
values: 'borders',
|
|
},
|
|
borderBlockStart: {
|
|
values: 'borders',
|
|
},
|
|
borderRight: {
|
|
values: 'borders',
|
|
},
|
|
borderInlineEnd: {
|
|
values: 'borders',
|
|
},
|
|
borderBottom: {
|
|
values: 'borders',
|
|
},
|
|
borderBlockEnd: {
|
|
values: 'borders',
|
|
},
|
|
borderInlineStart: {
|
|
values: 'borders',
|
|
shorthand: ['borderStart'],
|
|
},
|
|
borderInline: {
|
|
values: 'borders',
|
|
shorthand: ['borderX'],
|
|
},
|
|
borderBlock: {
|
|
values: 'borders',
|
|
shorthand: ['borderY'],
|
|
},
|
|
borderColor: {},
|
|
borderTopColor: {},
|
|
borderBlockStartColor: {},
|
|
borderBottomColor: {},
|
|
borderBlockEndColor: {},
|
|
borderLeftColor: {},
|
|
borderInlineStartColor: {
|
|
shorthand: ['borderStartColor'],
|
|
},
|
|
borderRightColor: {},
|
|
borderInlineEndColor: {
|
|
shorthand: ['borderEndColor'],
|
|
},
|
|
borderStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderTopStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderBlockStartStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderBottomStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderBlockEndStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderInlineStartStyle: {
|
|
values: 'borderStyles',
|
|
shorthand: ['borderStartStyle'],
|
|
},
|
|
borderInlineEndStyle: {
|
|
values: 'borderStyles',
|
|
shorthand: ['borderEndStyle'],
|
|
},
|
|
borderLeftStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderRightStyle: {
|
|
values: 'borderStyles',
|
|
},
|
|
borderRadius: {
|
|
values: 'radii',
|
|
shorthand: ['rounded'],
|
|
},
|
|
borderTopLeftRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedTopLeft'],
|
|
},
|
|
borderStartStartRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedStartStart', 'borderTopStartRadius'],
|
|
},
|
|
borderEndStartRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedEndStart', 'borderBottomStartRadius'],
|
|
},
|
|
borderTopRightRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedTopRight'],
|
|
},
|
|
borderStartEndRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedStartEnd', 'borderTopEndRadius'],
|
|
},
|
|
borderEndEndRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedEndEnd', 'borderBottomEndRadius'],
|
|
},
|
|
borderBottomLeftRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedBottomLeft'],
|
|
},
|
|
borderBottomRightRadius: {
|
|
values: 'radii',
|
|
shorthand: ['roundedBottomRight'],
|
|
},
|
|
borderInlineStartRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedStart', 'borderStartRadius'],
|
|
},
|
|
borderInlineEndRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedEnd', 'borderEndRadius'],
|
|
},
|
|
borderTopRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedTop'],
|
|
},
|
|
borderBottomRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedBottom'],
|
|
},
|
|
borderLeftRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedLeft'],
|
|
},
|
|
borderRightRadius: {
|
|
values: 'radii',
|
|
property: 'borderRadius',
|
|
shorthand: ['roundedRight'],
|
|
},
|
|
borderWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderBlockStartWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderTopWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderBottomWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderBlockEndWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderRightWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderInlineWidth: {
|
|
values: 'borderWidths',
|
|
shorthand: ['borderXWidth'],
|
|
},
|
|
borderInlineStartWidth: {
|
|
values: 'borderWidths',
|
|
shorthand: ['borderStartWidth'],
|
|
},
|
|
borderInlineEndWidth: {
|
|
values: 'borderWidths',
|
|
shorthand: ['borderEndWidth'],
|
|
},
|
|
borderLeftWidth: {
|
|
values: 'borderWidths',
|
|
},
|
|
borderBlockWidth: {
|
|
values: 'borderWidths',
|
|
shorthand: ['borderYWidth'],
|
|
},
|
|
color: {},
|
|
fill: {},
|
|
stroke: {},
|
|
accentColor: {},
|
|
divideX: {
|
|
values: {
|
|
type: 'string',
|
|
},
|
|
},
|
|
divideY: {
|
|
values: {
|
|
type: 'string',
|
|
},
|
|
},
|
|
divideColor: {},
|
|
divideStyle: {
|
|
property: 'borderStyle',
|
|
},
|
|
boxShadow: {
|
|
values: 'shadows',
|
|
shorthand: ['shadow'],
|
|
},
|
|
boxShadowColor: {
|
|
shorthand: ['shadowColor'],
|
|
},
|
|
mixBlendMode: {
|
|
shorthand: ['blendMode'],
|
|
},
|
|
backgroundBlendMode: {
|
|
shorthand: ['bgBlendMode'],
|
|
},
|
|
opacity: {
|
|
values: 'opacity',
|
|
},
|
|
filter: {},
|
|
blur: {
|
|
values: 'blurs',
|
|
},
|
|
brightness: {},
|
|
contrast: {},
|
|
grayscale: {},
|
|
hueRotate: {},
|
|
invert: {},
|
|
saturate: {},
|
|
sepia: {},
|
|
dropShadow: {},
|
|
backdropFilter: {},
|
|
backdropBlur: {
|
|
values: 'blurs',
|
|
},
|
|
backdropBrightness: {},
|
|
backdropContrast: {},
|
|
backdropGrayscale: {},
|
|
backdropHueRotate: {},
|
|
backdropInvert: {},
|
|
backdropOpacity: {},
|
|
backdropSaturate: {},
|
|
backdropSepia: {},
|
|
flexBasis: {
|
|
values: 'sizes',
|
|
},
|
|
gap: {
|
|
values: 'spacing',
|
|
},
|
|
rowGap: {
|
|
values: 'spacing',
|
|
shorthand: ['gapY'],
|
|
},
|
|
columnGap: {
|
|
values: 'spacing',
|
|
shorthand: ['gapX'],
|
|
},
|
|
flexDirection: {
|
|
shorthand: ['flexDir'],
|
|
},
|
|
gridGap: {
|
|
values: 'spacing',
|
|
},
|
|
gridColumnGap: {
|
|
values: 'spacing',
|
|
},
|
|
gridRowGap: {
|
|
values: 'spacing',
|
|
},
|
|
outlineColor: {},
|
|
focusRing: {
|
|
values: ['outside', 'inside', 'mixed', 'none'],
|
|
},
|
|
focusVisibleRing: {
|
|
values: ['outside', 'inside', 'mixed', 'none'],
|
|
},
|
|
focusRingColor: {},
|
|
focusRingOffset: {
|
|
values: 'spacing',
|
|
},
|
|
focusRingWidth: {
|
|
values: 'borderWidths',
|
|
property: 'outlineWidth',
|
|
},
|
|
focusRingStyle: {
|
|
values: 'borderStyles',
|
|
property: 'outlineStyle',
|
|
},
|
|
aspectRatio: {
|
|
values: 'aspectRatios',
|
|
},
|
|
width: {
|
|
values: 'sizes',
|
|
shorthand: ['w'],
|
|
},
|
|
inlineSize: {
|
|
values: 'sizes',
|
|
},
|
|
height: {
|
|
values: 'sizes',
|
|
shorthand: ['h'],
|
|
},
|
|
blockSize: {
|
|
values: 'sizes',
|
|
},
|
|
boxSize: {
|
|
values: 'sizes',
|
|
property: 'width',
|
|
},
|
|
minWidth: {
|
|
values: 'sizes',
|
|
shorthand: ['minW'],
|
|
},
|
|
minInlineSize: {
|
|
values: 'sizes',
|
|
},
|
|
minHeight: {
|
|
values: 'sizes',
|
|
shorthand: ['minH'],
|
|
},
|
|
minBlockSize: {
|
|
values: 'sizes',
|
|
},
|
|
maxWidth: {
|
|
values: 'sizes',
|
|
shorthand: ['maxW'],
|
|
},
|
|
maxInlineSize: {
|
|
values: 'sizes',
|
|
},
|
|
maxHeight: {
|
|
values: 'sizes',
|
|
shorthand: ['maxH'],
|
|
},
|
|
maxBlockSize: {
|
|
values: 'sizes',
|
|
},
|
|
hideFrom: {
|
|
values: 'breakpoints',
|
|
},
|
|
hideBelow: {
|
|
values: 'breakpoints',
|
|
},
|
|
overscrollBehavior: {
|
|
shorthand: ['overscroll'],
|
|
},
|
|
overscrollBehaviorX: {
|
|
shorthand: ['overscrollX'],
|
|
},
|
|
overscrollBehaviorY: {
|
|
shorthand: ['overscrollY'],
|
|
},
|
|
scrollbar: {
|
|
values: ['visible', 'hidden'],
|
|
},
|
|
scrollbarColor: {},
|
|
scrollbarGutter: {
|
|
values: 'spacing',
|
|
},
|
|
scrollbarWidth: {
|
|
values: 'sizes',
|
|
},
|
|
scrollMargin: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginTop: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginBottom: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginLeft: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginRight: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginX: {
|
|
values: 'spacing',
|
|
},
|
|
scrollMarginY: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPadding: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPaddingTop: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPaddingBottom: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPaddingLeft: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPaddingRight: {
|
|
values: 'spacing',
|
|
},
|
|
scrollPaddingInline: {
|
|
values: 'spacing',
|
|
shorthand: ['scrollPaddingX'],
|
|
},
|
|
scrollPaddingBlock: {
|
|
values: 'spacing',
|
|
shorthand: ['scrollPaddingY'],
|
|
},
|
|
scrollSnapType: {
|
|
values: {
|
|
none: 'none',
|
|
x: 'x var(--scroll-snap-strictness)',
|
|
y: 'y var(--scroll-snap-strictness)',
|
|
both: 'both var(--scroll-snap-strictness)',
|
|
},
|
|
},
|
|
scrollSnapStrictness: {
|
|
values: ['mandatory', 'proximity'],
|
|
},
|
|
scrollSnapMargin: {
|
|
values: 'spacing',
|
|
},
|
|
scrollSnapMarginTop: {
|
|
values: 'spacing',
|
|
},
|
|
scrollSnapMarginBottom: {
|
|
values: 'spacing',
|
|
},
|
|
scrollSnapMarginLeft: {
|
|
values: 'spacing',
|
|
},
|
|
scrollSnapMarginRight: {
|
|
values: 'spacing',
|
|
},
|
|
listStylePosition: {
|
|
shorthand: ['listStylePos'],
|
|
},
|
|
listStyleImage: {
|
|
shorthand: ['listStyleImg'],
|
|
},
|
|
position: {
|
|
shorthand: ['pos'],
|
|
},
|
|
zIndex: {
|
|
values: 'zIndex',
|
|
},
|
|
inset: {
|
|
values: 'spacing',
|
|
},
|
|
insetInline: {
|
|
values: 'spacing',
|
|
shorthand: ['insetX'],
|
|
},
|
|
insetBlock: {
|
|
values: 'spacing',
|
|
shorthand: ['insetY'],
|
|
},
|
|
top: {
|
|
values: 'spacing',
|
|
},
|
|
insetBlockStart: {
|
|
values: 'spacing',
|
|
},
|
|
bottom: {
|
|
values: 'spacing',
|
|
},
|
|
insetBlockEnd: {
|
|
values: 'spacing',
|
|
},
|
|
left: {
|
|
values: 'spacing',
|
|
},
|
|
right: {
|
|
values: 'spacing',
|
|
},
|
|
insetInlineStart: {
|
|
values: 'spacing',
|
|
shorthand: ['insetStart'],
|
|
},
|
|
insetInlineEnd: {
|
|
values: 'spacing',
|
|
shorthand: ['insetEnd'],
|
|
},
|
|
ring: {},
|
|
ringColor: {},
|
|
ringOffset: {},
|
|
ringOffsetColor: {},
|
|
ringInset: {},
|
|
margin: {
|
|
values: 'spacing',
|
|
shorthand: ['m'],
|
|
},
|
|
marginTop: {
|
|
values: 'spacing',
|
|
shorthand: ['mt'],
|
|
},
|
|
marginBlockStart: {
|
|
values: 'spacing',
|
|
shorthand: ['mt'],
|
|
},
|
|
marginRight: {
|
|
values: 'spacing',
|
|
shorthand: ['mr'],
|
|
},
|
|
marginBottom: {
|
|
values: 'spacing',
|
|
shorthand: ['mb'],
|
|
},
|
|
marginBlockEnd: {
|
|
values: 'spacing',
|
|
},
|
|
marginLeft: {
|
|
values: 'spacing',
|
|
shorthand: ['ml'],
|
|
},
|
|
marginInlineStart: {
|
|
values: 'spacing',
|
|
shorthand: ['ms', 'marginStart'],
|
|
},
|
|
marginInlineEnd: {
|
|
values: 'spacing',
|
|
shorthand: ['me', 'marginEnd'],
|
|
},
|
|
marginInline: {
|
|
values: 'spacing',
|
|
shorthand: ['mx', 'marginX'],
|
|
},
|
|
marginBlock: {
|
|
values: 'spacing',
|
|
shorthand: ['my', 'marginY'],
|
|
},
|
|
padding: {
|
|
values: 'spacing',
|
|
shorthand: ['p'],
|
|
},
|
|
paddingTop: {
|
|
values: 'spacing',
|
|
shorthand: ['pt'],
|
|
},
|
|
paddingRight: {
|
|
values: 'spacing',
|
|
shorthand: ['pr'],
|
|
},
|
|
paddingBottom: {
|
|
values: 'spacing',
|
|
shorthand: ['pb'],
|
|
},
|
|
paddingBlockStart: {
|
|
values: 'spacing',
|
|
},
|
|
paddingBlockEnd: {
|
|
values: 'spacing',
|
|
},
|
|
paddingLeft: {
|
|
values: 'spacing',
|
|
shorthand: ['pl'],
|
|
},
|
|
paddingInlineStart: {
|
|
values: 'spacing',
|
|
shorthand: ['ps', 'paddingStart'],
|
|
},
|
|
paddingInlineEnd: {
|
|
values: 'spacing',
|
|
shorthand: ['pe', 'paddingEnd'],
|
|
},
|
|
paddingInline: {
|
|
values: 'spacing',
|
|
shorthand: ['px', 'paddingX'],
|
|
},
|
|
paddingBlock: {
|
|
values: 'spacing',
|
|
shorthand: ['py', 'paddingY'],
|
|
},
|
|
textDecoration: {
|
|
shorthand: ['textDecor'],
|
|
},
|
|
textDecorationColor: {},
|
|
textShadow: {
|
|
values: 'shadows',
|
|
},
|
|
transform: {},
|
|
skewX: {},
|
|
skewY: {},
|
|
scaleX: {},
|
|
scaleY: {},
|
|
scale: {},
|
|
spaceXReverse: {
|
|
values: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
spaceX: {
|
|
property: 'marginInlineStart',
|
|
values: 'spacing',
|
|
},
|
|
spaceYReverse: {
|
|
values: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
spaceY: {
|
|
property: 'marginTop',
|
|
values: 'spacing',
|
|
},
|
|
rotate: {},
|
|
rotateX: {},
|
|
rotateY: {},
|
|
translate: {},
|
|
translateX: {
|
|
values: 'spacing',
|
|
},
|
|
translateY: {
|
|
values: 'spacing',
|
|
},
|
|
transition: {
|
|
values: [
|
|
'all',
|
|
'common',
|
|
'colors',
|
|
'opacity',
|
|
'position',
|
|
'backgrounds',
|
|
'size',
|
|
'shadow',
|
|
'transform',
|
|
],
|
|
},
|
|
transitionDuration: {
|
|
values: 'durations',
|
|
},
|
|
transitionProperty: {
|
|
values: {
|
|
common:
|
|
'background-color, border-color, color, fill, stroke, opacity, box-shadow, translate, transform',
|
|
colors: 'background-color, border-color, color, fill, stroke',
|
|
size: 'width, height',
|
|
position: 'left, right, top, bottom, inset-inline, inset-block',
|
|
background:
|
|
'background, background-color, background-image, background-position',
|
|
},
|
|
},
|
|
transitionTimingFunction: {
|
|
values: 'easings',
|
|
},
|
|
animation: {
|
|
values: 'animations',
|
|
},
|
|
animationDuration: {
|
|
values: 'durations',
|
|
},
|
|
animationDelay: {
|
|
values: 'durations',
|
|
},
|
|
animationTimingFunction: {
|
|
values: 'easings',
|
|
},
|
|
fontFamily: {
|
|
values: 'fonts',
|
|
},
|
|
fontSize: {
|
|
values: 'fontSizes',
|
|
},
|
|
fontWeight: {
|
|
values: 'fontWeights',
|
|
},
|
|
lineHeight: {
|
|
values: 'lineHeights',
|
|
},
|
|
letterSpacing: {
|
|
values: 'letterSpacings',
|
|
},
|
|
textIndent: {
|
|
values: 'spacing',
|
|
},
|
|
truncate: {
|
|
values: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
lineClamp: {},
|
|
srOnly: {
|
|
values: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
debug: {
|
|
values: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
caretColor: {},
|
|
cursor: {
|
|
values: 'cursor',
|
|
},
|
|
},
|
|
preflight: true,
|
|
cssVarsPrefix: 'chakra',
|
|
cssVarsRoot: ':where(html, .chakra-theme)',
|
|
globalCss: {
|
|
'*': {
|
|
fontFeatureSettings: '"cv11"',
|
|
'--ring-inset': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--ring-offset-width': '0px',
|
|
'--ring-offset-color': '#fff',
|
|
'--ring-color': 'rgba(66, 153, 225, 0.6)',
|
|
'--ring-offset-shadow': '0 0 #0000',
|
|
'--ring-shadow': '0 0 #0000',
|
|
'--brightness': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--contrast': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--grayscale': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--hue-rotate': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--invert': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--saturate': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--sepia': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--drop-shadow': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-blur': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-brightness': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-contrast': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-grayscale': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-hue-rotate': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-invert': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-opacity': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-saturate': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--backdrop-sepia': 'var(--chakra-empty,/*!*/ /*!*/)',
|
|
'--global-font-mono': 'fonts.mono',
|
|
'--global-font-body': 'fonts.body',
|
|
'--global-color-border': 'colors.border',
|
|
},
|
|
html: {
|
|
color: 'fg',
|
|
bg: 'bg',
|
|
lineHeight: '1.5',
|
|
colorPalette: 'gray',
|
|
},
|
|
'*::placeholder': {
|
|
color: 'fg.muted/80',
|
|
},
|
|
'*::selection': {
|
|
bg: 'colorPalette.muted/80',
|
|
},
|
|
},
|
|
theme: {
|
|
breakpoints: {
|
|
sm: '480px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
keyframes: {
|
|
spin: {
|
|
'0%': {
|
|
transform: 'rotate(0deg)',
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(360deg)',
|
|
},
|
|
},
|
|
pulse: {
|
|
'50%': {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
ping: {
|
|
'75%, 100%': {
|
|
transform: 'scale(2)',
|
|
opacity: '0',
|
|
},
|
|
},
|
|
bounce: {
|
|
'0%, 100%': {
|
|
transform: 'translateY(-25%)',
|
|
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
|
|
},
|
|
'50%': {
|
|
transform: 'none',
|
|
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
|
|
},
|
|
},
|
|
'bg-position': {
|
|
from: {
|
|
backgroundPosition: 'var(--animate-from, 1rem) 0',
|
|
},
|
|
to: {
|
|
backgroundPosition: 'var(--animate-to, 0) 0',
|
|
},
|
|
},
|
|
position: {
|
|
from: {
|
|
insetInlineStart: 'var(--animate-from-x)',
|
|
insetBlockStart: 'var(--animate-from-y)',
|
|
},
|
|
to: {
|
|
insetInlineStart: 'var(--animate-to-x)',
|
|
insetBlockStart: 'var(--animate-to-y)',
|
|
},
|
|
},
|
|
'circular-progress': {
|
|
'0%': {
|
|
strokeDasharray: '1, 400',
|
|
strokeDashoffset: '0',
|
|
},
|
|
'50%': {
|
|
strokeDasharray: '400, 400',
|
|
strokeDashoffset: '-100%',
|
|
},
|
|
'100%': {
|
|
strokeDasharray: '400, 400',
|
|
strokeDashoffset: '-260%',
|
|
},
|
|
},
|
|
'expand-height': {
|
|
from: {
|
|
height: '0',
|
|
},
|
|
to: {
|
|
height: 'var(--height)',
|
|
},
|
|
},
|
|
'collapse-height': {
|
|
from: {
|
|
height: 'var(--height)',
|
|
},
|
|
to: {
|
|
height: '0',
|
|
},
|
|
},
|
|
'expand-width': {
|
|
from: {
|
|
width: '0',
|
|
},
|
|
to: {
|
|
width: 'var(--width)',
|
|
},
|
|
},
|
|
'collapse-width': {
|
|
from: {
|
|
height: 'var(--width)',
|
|
},
|
|
to: {
|
|
height: '0',
|
|
},
|
|
},
|
|
'fade-in': {
|
|
from: {
|
|
opacity: 0,
|
|
},
|
|
to: {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
'fade-out': {
|
|
from: {
|
|
opacity: 1,
|
|
},
|
|
to: {
|
|
opacity: 0,
|
|
},
|
|
},
|
|
'slide-from-left-full': {
|
|
from: {
|
|
translate: '-100% 0',
|
|
},
|
|
to: {
|
|
translate: '0 0',
|
|
},
|
|
},
|
|
'slide-from-right-full': {
|
|
from: {
|
|
translate: '100% 0',
|
|
},
|
|
to: {
|
|
translate: '0 0',
|
|
},
|
|
},
|
|
'slide-from-top-full': {
|
|
from: {
|
|
translate: '0 -100%',
|
|
},
|
|
to: {
|
|
translate: '0 0',
|
|
},
|
|
},
|
|
'slide-from-bottom-full': {
|
|
from: {
|
|
translate: '0 100%',
|
|
},
|
|
to: {
|
|
translate: '0 0',
|
|
},
|
|
},
|
|
'slide-to-left-full': {
|
|
from: {
|
|
translate: '0 0',
|
|
},
|
|
to: {
|
|
translate: '-100% 0',
|
|
},
|
|
},
|
|
'slide-to-right-full': {
|
|
from: {
|
|
translate: '0 0',
|
|
},
|
|
to: {
|
|
translate: '100% 0',
|
|
},
|
|
},
|
|
'slide-to-top-full': {
|
|
from: {
|
|
translate: '0 0',
|
|
},
|
|
to: {
|
|
translate: '0 -100%',
|
|
},
|
|
},
|
|
'slide-to-bottom-full': {
|
|
from: {
|
|
translate: '0 0',
|
|
},
|
|
to: {
|
|
translate: '0 100%',
|
|
},
|
|
},
|
|
'slide-from-top': {
|
|
'0%': {
|
|
translate: '0 -0.5rem',
|
|
},
|
|
to: {
|
|
translate: '0',
|
|
},
|
|
},
|
|
'slide-from-bottom': {
|
|
'0%': {
|
|
translate: '0 0.5rem',
|
|
},
|
|
to: {
|
|
translate: '0',
|
|
},
|
|
},
|
|
'slide-from-left': {
|
|
'0%': {
|
|
translate: '-0.5rem 0',
|
|
},
|
|
to: {
|
|
translate: '0',
|
|
},
|
|
},
|
|
'slide-from-right': {
|
|
'0%': {
|
|
translate: '0.5rem 0',
|
|
},
|
|
to: {
|
|
translate: '0',
|
|
},
|
|
},
|
|
'slide-to-top': {
|
|
'0%': {
|
|
translate: '0',
|
|
},
|
|
to: {
|
|
translate: '0 -0.5rem',
|
|
},
|
|
},
|
|
'slide-to-bottom': {
|
|
'0%': {
|
|
translate: '0',
|
|
},
|
|
to: {
|
|
translate: '0 0.5rem',
|
|
},
|
|
},
|
|
'slide-to-left': {
|
|
'0%': {
|
|
translate: '0',
|
|
},
|
|
to: {
|
|
translate: '-0.5rem 0',
|
|
},
|
|
},
|
|
'slide-to-right': {
|
|
'0%': {
|
|
translate: '0',
|
|
},
|
|
to: {
|
|
translate: '0.5rem 0',
|
|
},
|
|
},
|
|
'scale-in': {
|
|
from: {
|
|
scale: '0.95',
|
|
},
|
|
to: {
|
|
scale: '1',
|
|
},
|
|
},
|
|
'scale-out': {
|
|
from: {
|
|
scale: '1',
|
|
},
|
|
to: {
|
|
scale: '0.95',
|
|
},
|
|
},
|
|
},
|
|
tokens: {
|
|
aspectRatios: {
|
|
square: {
|
|
value: '1 / 1',
|
|
},
|
|
landscape: {
|
|
value: '4 / 3',
|
|
},
|
|
portrait: {
|
|
value: '3 / 4',
|
|
},
|
|
wide: {
|
|
value: '16 / 9',
|
|
},
|
|
ultrawide: {
|
|
value: '18 / 5',
|
|
},
|
|
golden: {
|
|
value: '1.618 / 1',
|
|
},
|
|
},
|
|
animations: {
|
|
spin: {
|
|
value: 'spin 1s linear infinite',
|
|
},
|
|
ping: {
|
|
value: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
},
|
|
pulse: {
|
|
value: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
bounce: {
|
|
value: 'bounce 1s infinite',
|
|
},
|
|
},
|
|
blurs: {
|
|
none: {
|
|
value: ' ',
|
|
},
|
|
sm: {
|
|
value: '4px',
|
|
},
|
|
md: {
|
|
value: '8px',
|
|
},
|
|
lg: {
|
|
value: '12px',
|
|
},
|
|
xl: {
|
|
value: '16px',
|
|
},
|
|
'2xl': {
|
|
value: '24px',
|
|
},
|
|
'3xl': {
|
|
value: '40px',
|
|
},
|
|
'4xl': {
|
|
value: '64px',
|
|
},
|
|
},
|
|
borders: {
|
|
xs: {
|
|
value: '0.5px solid',
|
|
},
|
|
sm: {
|
|
value: '1px solid',
|
|
},
|
|
md: {
|
|
value: '2px solid',
|
|
},
|
|
lg: {
|
|
value: '4px solid',
|
|
},
|
|
xl: {
|
|
value: '8px solid',
|
|
},
|
|
},
|
|
colors: {
|
|
transparent: {
|
|
value: 'transparent',
|
|
},
|
|
current: {
|
|
value: 'currentColor',
|
|
},
|
|
black: {
|
|
value: '#09090B',
|
|
},
|
|
white: {
|
|
value: '#FFFFFF',
|
|
},
|
|
whiteAlpha: {
|
|
'50': {
|
|
value: 'rgba(255, 255, 255, 0.04)',
|
|
},
|
|
'100': {
|
|
value: 'rgba(255, 255, 255, 0.06)',
|
|
},
|
|
'200': {
|
|
value: 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
'300': {
|
|
value: 'rgba(255, 255, 255, 0.16)',
|
|
},
|
|
'400': {
|
|
value: 'rgba(255, 255, 255, 0.24)',
|
|
},
|
|
'500': {
|
|
value: 'rgba(255, 255, 255, 0.36)',
|
|
},
|
|
'600': {
|
|
value: 'rgba(255, 255, 255, 0.48)',
|
|
},
|
|
'700': {
|
|
value: 'rgba(255, 255, 255, 0.64)',
|
|
},
|
|
'800': {
|
|
value: 'rgba(255, 255, 255, 0.80)',
|
|
},
|
|
'900': {
|
|
value: 'rgba(255, 255, 255, 0.92)',
|
|
},
|
|
'950': {
|
|
value: 'rgba(255, 255, 255, 0.95)',
|
|
},
|
|
},
|
|
blackAlpha: {
|
|
'50': {
|
|
value: 'rgba(0, 0, 0, 0.04)',
|
|
},
|
|
'100': {
|
|
value: 'rgba(0, 0, 0, 0.06)',
|
|
},
|
|
'200': {
|
|
value: 'rgba(0, 0, 0, 0.08)',
|
|
},
|
|
'300': {
|
|
value: 'rgba(0, 0, 0, 0.16)',
|
|
},
|
|
'400': {
|
|
value: 'rgba(0, 0, 0, 0.24)',
|
|
},
|
|
'500': {
|
|
value: 'rgba(0, 0, 0, 0.36)',
|
|
},
|
|
'600': {
|
|
value: 'rgba(0, 0, 0, 0.48)',
|
|
},
|
|
'700': {
|
|
value: 'rgba(0, 0, 0, 0.64)',
|
|
},
|
|
'800': {
|
|
value: 'rgba(0, 0, 0, 0.80)',
|
|
},
|
|
'900': {
|
|
value: 'rgba(0, 0, 0, 0.92)',
|
|
},
|
|
'950': {
|
|
value: 'rgba(0, 0, 0, 0.95)',
|
|
},
|
|
},
|
|
gray: {
|
|
'50': {
|
|
value: '#fafafa',
|
|
},
|
|
'100': {
|
|
value: '#f4f4f5',
|
|
},
|
|
'200': {
|
|
value: '#e4e4e7',
|
|
},
|
|
'300': {
|
|
value: '#d4d4d8',
|
|
},
|
|
'400': {
|
|
value: '#a1a1aa',
|
|
},
|
|
'500': {
|
|
value: '#71717a',
|
|
},
|
|
'600': {
|
|
value: '#52525b',
|
|
},
|
|
'700': {
|
|
value: '#3f3f46',
|
|
},
|
|
'800': {
|
|
value: '#27272a',
|
|
},
|
|
'900': {
|
|
value: '#18181b',
|
|
},
|
|
'950': {
|
|
value: '#111111',
|
|
},
|
|
},
|
|
red: {
|
|
'50': {
|
|
value: '#fef2f2',
|
|
},
|
|
'100': {
|
|
value: '#fee2e2',
|
|
},
|
|
'200': {
|
|
value: '#fecaca',
|
|
},
|
|
'300': {
|
|
value: '#fca5a5',
|
|
},
|
|
'400': {
|
|
value: '#f87171',
|
|
},
|
|
'500': {
|
|
value: '#ef4444',
|
|
},
|
|
'600': {
|
|
value: '#dc2626',
|
|
},
|
|
'700': {
|
|
value: '#991919',
|
|
},
|
|
'800': {
|
|
value: '#511111',
|
|
},
|
|
'900': {
|
|
value: '#300c0c',
|
|
},
|
|
'950': {
|
|
value: '#1f0808',
|
|
},
|
|
},
|
|
orange: {
|
|
'50': {
|
|
value: '#fff7ed',
|
|
},
|
|
'100': {
|
|
value: '#ffedd5',
|
|
},
|
|
'200': {
|
|
value: '#fed7aa',
|
|
},
|
|
'300': {
|
|
value: '#fdba74',
|
|
},
|
|
'400': {
|
|
value: '#fb923c',
|
|
},
|
|
'500': {
|
|
value: '#f97316',
|
|
},
|
|
'600': {
|
|
value: '#ea580c',
|
|
},
|
|
'700': {
|
|
value: '#92310a',
|
|
},
|
|
'800': {
|
|
value: '#6c2710',
|
|
},
|
|
'900': {
|
|
value: '#3b1106',
|
|
},
|
|
'950': {
|
|
value: '#220a04',
|
|
},
|
|
},
|
|
yellow: {
|
|
'50': {
|
|
value: '#fefce8',
|
|
},
|
|
'100': {
|
|
value: '#fef9c3',
|
|
},
|
|
'200': {
|
|
value: '#fef08a',
|
|
},
|
|
'300': {
|
|
value: '#fde047',
|
|
},
|
|
'400': {
|
|
value: '#facc15',
|
|
},
|
|
'500': {
|
|
value: '#eab308',
|
|
},
|
|
'600': {
|
|
value: '#ca8a04',
|
|
},
|
|
'700': {
|
|
value: '#845209',
|
|
},
|
|
'800': {
|
|
value: '#713f12',
|
|
},
|
|
'900': {
|
|
value: '#422006',
|
|
},
|
|
'950': {
|
|
value: '#281304',
|
|
},
|
|
},
|
|
green: {
|
|
'50': {
|
|
value: '#f0fdf4',
|
|
},
|
|
'100': {
|
|
value: '#dcfce7',
|
|
},
|
|
'200': {
|
|
value: '#bbf7d0',
|
|
},
|
|
'300': {
|
|
value: '#86efac',
|
|
},
|
|
'400': {
|
|
value: '#4ade80',
|
|
},
|
|
'500': {
|
|
value: '#22c55e',
|
|
},
|
|
'600': {
|
|
value: '#16a34a',
|
|
},
|
|
'700': {
|
|
value: '#116932',
|
|
},
|
|
'800': {
|
|
value: '#124a28',
|
|
},
|
|
'900': {
|
|
value: '#042713',
|
|
},
|
|
'950': {
|
|
value: '#03190c',
|
|
},
|
|
},
|
|
teal: {
|
|
'50': {
|
|
value: '#f0fdfa',
|
|
},
|
|
'100': {
|
|
value: '#ccfbf1',
|
|
},
|
|
'200': {
|
|
value: '#99f6e4',
|
|
},
|
|
'300': {
|
|
value: '#5eead4',
|
|
},
|
|
'400': {
|
|
value: '#2dd4bf',
|
|
},
|
|
'500': {
|
|
value: '#14b8a6',
|
|
},
|
|
'600': {
|
|
value: '#0d9488',
|
|
},
|
|
'700': {
|
|
value: '#0c5d56',
|
|
},
|
|
'800': {
|
|
value: '#114240',
|
|
},
|
|
'900': {
|
|
value: '#032726',
|
|
},
|
|
'950': {
|
|
value: '#021716',
|
|
},
|
|
},
|
|
blue: {
|
|
'50': {
|
|
value: '#eff6ff',
|
|
},
|
|
'100': {
|
|
value: '#dbeafe',
|
|
},
|
|
'200': {
|
|
value: '#bfdbfe',
|
|
},
|
|
'300': {
|
|
value: '#a3cfff',
|
|
},
|
|
'400': {
|
|
value: '#60a5fa',
|
|
},
|
|
'500': {
|
|
value: '#3b82f6',
|
|
},
|
|
'600': {
|
|
value: '#2563eb',
|
|
},
|
|
'700': {
|
|
value: '#173da6',
|
|
},
|
|
'800': {
|
|
value: '#1a3478',
|
|
},
|
|
'900': {
|
|
value: '#14204a',
|
|
},
|
|
'950': {
|
|
value: '#0c142e',
|
|
},
|
|
},
|
|
cyan: {
|
|
'50': {
|
|
value: '#ecfeff',
|
|
},
|
|
'100': {
|
|
value: '#cffafe',
|
|
},
|
|
'200': {
|
|
value: '#a5f3fc',
|
|
},
|
|
'300': {
|
|
value: '#67e8f9',
|
|
},
|
|
'400': {
|
|
value: '#22d3ee',
|
|
},
|
|
'500': {
|
|
value: '#06b6d4',
|
|
},
|
|
'600': {
|
|
value: '#0891b2',
|
|
},
|
|
'700': {
|
|
value: '#0c5c72',
|
|
},
|
|
'800': {
|
|
value: '#134152',
|
|
},
|
|
'900': {
|
|
value: '#072a38',
|
|
},
|
|
'950': {
|
|
value: '#051b24',
|
|
},
|
|
},
|
|
purple: {
|
|
'50': {
|
|
value: '#faf5ff',
|
|
},
|
|
'100': {
|
|
value: '#f3e8ff',
|
|
},
|
|
'200': {
|
|
value: '#e9d5ff',
|
|
},
|
|
'300': {
|
|
value: '#d8b4fe',
|
|
},
|
|
'400': {
|
|
value: '#c084fc',
|
|
},
|
|
'500': {
|
|
value: '#a855f7',
|
|
},
|
|
'600': {
|
|
value: '#9333ea',
|
|
},
|
|
'700': {
|
|
value: '#641ba3',
|
|
},
|
|
'800': {
|
|
value: '#4a1772',
|
|
},
|
|
'900': {
|
|
value: '#2f0553',
|
|
},
|
|
'950': {
|
|
value: '#1a032e',
|
|
},
|
|
},
|
|
pink: {
|
|
'50': {
|
|
value: '#fdf2f8',
|
|
},
|
|
'100': {
|
|
value: '#fce7f3',
|
|
},
|
|
'200': {
|
|
value: '#fbcfe8',
|
|
},
|
|
'300': {
|
|
value: '#f9a8d4',
|
|
},
|
|
'400': {
|
|
value: '#f472b6',
|
|
},
|
|
'500': {
|
|
value: '#ec4899',
|
|
},
|
|
'600': {
|
|
value: '#db2777',
|
|
},
|
|
'700': {
|
|
value: '#a41752',
|
|
},
|
|
'800': {
|
|
value: '#6d0e34',
|
|
},
|
|
'900': {
|
|
value: '#45061f',
|
|
},
|
|
'950': {
|
|
value: '#2c0514',
|
|
},
|
|
},
|
|
},
|
|
durations: {
|
|
fastest: {
|
|
value: '50ms',
|
|
},
|
|
faster: {
|
|
value: '100ms',
|
|
},
|
|
fast: {
|
|
value: '150ms',
|
|
},
|
|
moderate: {
|
|
value: '200ms',
|
|
},
|
|
slow: {
|
|
value: '300ms',
|
|
},
|
|
slower: {
|
|
value: '400ms',
|
|
},
|
|
slowest: {
|
|
value: '500ms',
|
|
},
|
|
},
|
|
easings: {
|
|
'ease-in': {
|
|
value: 'cubic-bezier(0.42, 0, 1, 1)',
|
|
},
|
|
'ease-out': {
|
|
value: 'cubic-bezier(0, 0, 0.58, 1)',
|
|
},
|
|
'ease-in-out': {
|
|
value: 'cubic-bezier(0.42, 0, 0.58, 1)',
|
|
},
|
|
'ease-in-smooth': {
|
|
value: 'cubic-bezier(0.32, 0.72, 0, 1)',
|
|
},
|
|
},
|
|
fonts: {
|
|
heading: {
|
|
value:
|
|
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
},
|
|
body: {
|
|
value:
|
|
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
},
|
|
mono: {
|
|
value:
|
|
'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
|
|
},
|
|
},
|
|
fontSizes: {
|
|
'2xs': {
|
|
value: '0.625rem',
|
|
},
|
|
xs: {
|
|
value: '0.75rem',
|
|
},
|
|
sm: {
|
|
value: '0.875rem',
|
|
},
|
|
md: {
|
|
value: '1rem',
|
|
},
|
|
lg: {
|
|
value: '1.125rem',
|
|
},
|
|
xl: {
|
|
value: '1.25rem',
|
|
},
|
|
'2xl': {
|
|
value: '1.5rem',
|
|
},
|
|
'3xl': {
|
|
value: '1.875rem',
|
|
},
|
|
'4xl': {
|
|
value: '2.25rem',
|
|
},
|
|
'5xl': {
|
|
value: '3rem',
|
|
},
|
|
'6xl': {
|
|
value: '3.75rem',
|
|
},
|
|
'7xl': {
|
|
value: '4.5rem',
|
|
},
|
|
'8xl': {
|
|
value: '6rem',
|
|
},
|
|
'9xl': {
|
|
value: '8rem',
|
|
},
|
|
},
|
|
fontWeights: {
|
|
thin: {
|
|
value: '100',
|
|
},
|
|
extralight: {
|
|
value: '200',
|
|
},
|
|
light: {
|
|
value: '300',
|
|
},
|
|
normal: {
|
|
value: '400',
|
|
},
|
|
medium: {
|
|
value: '500',
|
|
},
|
|
semibold: {
|
|
value: '600',
|
|
},
|
|
bold: {
|
|
value: '700',
|
|
},
|
|
extrabold: {
|
|
value: '800',
|
|
},
|
|
black: {
|
|
value: '900',
|
|
},
|
|
},
|
|
letterSpacings: {
|
|
tighter: {
|
|
value: '-0.05em',
|
|
},
|
|
tight: {
|
|
value: '-0.025em',
|
|
},
|
|
wide: {
|
|
value: '0.025em',
|
|
},
|
|
wider: {
|
|
value: '0.05em',
|
|
},
|
|
widest: {
|
|
value: '0.1em',
|
|
},
|
|
},
|
|
lineHeights: {
|
|
shorter: {
|
|
value: 1.25,
|
|
},
|
|
short: {
|
|
value: 1.375,
|
|
},
|
|
moderate: {
|
|
value: 1.5,
|
|
},
|
|
tall: {
|
|
value: 1.625,
|
|
},
|
|
taller: {
|
|
value: 2,
|
|
},
|
|
},
|
|
radii: {
|
|
none: {
|
|
value: '0',
|
|
},
|
|
'2xs': {
|
|
value: '0.0625rem',
|
|
},
|
|
xs: {
|
|
value: '0.125rem',
|
|
},
|
|
sm: {
|
|
value: '0.25rem',
|
|
},
|
|
md: {
|
|
value: '0.375rem',
|
|
},
|
|
lg: {
|
|
value: '0.5rem',
|
|
},
|
|
xl: {
|
|
value: '0.75rem',
|
|
},
|
|
'2xl': {
|
|
value: '1rem',
|
|
},
|
|
'3xl': {
|
|
value: '1.5rem',
|
|
},
|
|
'4xl': {
|
|
value: '2rem',
|
|
},
|
|
full: {
|
|
value: '9999px',
|
|
},
|
|
},
|
|
spacing: {
|
|
'1': {
|
|
value: '0.25rem',
|
|
},
|
|
'2': {
|
|
value: '0.5rem',
|
|
},
|
|
'3': {
|
|
value: '0.75rem',
|
|
},
|
|
'4': {
|
|
value: '1rem',
|
|
},
|
|
'5': {
|
|
value: '1.25rem',
|
|
},
|
|
'6': {
|
|
value: '1.5rem',
|
|
},
|
|
'7': {
|
|
value: '1.75rem',
|
|
},
|
|
'8': {
|
|
value: '2rem',
|
|
},
|
|
'9': {
|
|
value: '2.25rem',
|
|
},
|
|
'10': {
|
|
value: '2.5rem',
|
|
},
|
|
'11': {
|
|
value: '2.75rem',
|
|
},
|
|
'12': {
|
|
value: '3rem',
|
|
},
|
|
'14': {
|
|
value: '3.5rem',
|
|
},
|
|
'16': {
|
|
value: '4rem',
|
|
},
|
|
'20': {
|
|
value: '5rem',
|
|
},
|
|
'24': {
|
|
value: '6rem',
|
|
},
|
|
'28': {
|
|
value: '7rem',
|
|
},
|
|
'32': {
|
|
value: '8rem',
|
|
},
|
|
'36': {
|
|
value: '9rem',
|
|
},
|
|
'40': {
|
|
value: '10rem',
|
|
},
|
|
'44': {
|
|
value: '11rem',
|
|
},
|
|
'48': {
|
|
value: '12rem',
|
|
},
|
|
'52': {
|
|
value: '13rem',
|
|
},
|
|
'56': {
|
|
value: '14rem',
|
|
},
|
|
'60': {
|
|
value: '15rem',
|
|
},
|
|
'64': {
|
|
value: '16rem',
|
|
},
|
|
'72': {
|
|
value: '18rem',
|
|
},
|
|
'80': {
|
|
value: '20rem',
|
|
},
|
|
'96': {
|
|
value: '24rem',
|
|
},
|
|
'0.5': {
|
|
value: '0.125rem',
|
|
},
|
|
'1.5': {
|
|
value: '0.375rem',
|
|
},
|
|
'2.5': {
|
|
value: '0.625rem',
|
|
},
|
|
'3.5': {
|
|
value: '0.875rem',
|
|
},
|
|
'4.5': {
|
|
value: '1.125rem',
|
|
},
|
|
},
|
|
sizes: {
|
|
'1': {
|
|
value: '0.25rem',
|
|
},
|
|
'2': {
|
|
value: '0.5rem',
|
|
},
|
|
'3': {
|
|
value: '0.75rem',
|
|
},
|
|
'4': {
|
|
value: '1rem',
|
|
},
|
|
'5': {
|
|
value: '1.25rem',
|
|
},
|
|
'6': {
|
|
value: '1.5rem',
|
|
},
|
|
'7': {
|
|
value: '1.75rem',
|
|
},
|
|
'8': {
|
|
value: '2rem',
|
|
},
|
|
'9': {
|
|
value: '2.25rem',
|
|
},
|
|
'10': {
|
|
value: '2.5rem',
|
|
},
|
|
'11': {
|
|
value: '2.75rem',
|
|
},
|
|
'12': {
|
|
value: '3rem',
|
|
},
|
|
'14': {
|
|
value: '3.5rem',
|
|
},
|
|
'16': {
|
|
value: '4rem',
|
|
},
|
|
'20': {
|
|
value: '5rem',
|
|
},
|
|
'24': {
|
|
value: '6rem',
|
|
},
|
|
'28': {
|
|
value: '7rem',
|
|
},
|
|
'32': {
|
|
value: '8rem',
|
|
},
|
|
'36': {
|
|
value: '9rem',
|
|
},
|
|
'40': {
|
|
value: '10rem',
|
|
},
|
|
'44': {
|
|
value: '11rem',
|
|
},
|
|
'48': {
|
|
value: '12rem',
|
|
},
|
|
'52': {
|
|
value: '13rem',
|
|
},
|
|
'56': {
|
|
value: '14rem',
|
|
},
|
|
'60': {
|
|
value: '15rem',
|
|
},
|
|
'64': {
|
|
value: '16rem',
|
|
},
|
|
'72': {
|
|
value: '18rem',
|
|
},
|
|
'80': {
|
|
value: '20rem',
|
|
},
|
|
'96': {
|
|
value: '24rem',
|
|
},
|
|
'3xs': {
|
|
value: '14rem',
|
|
},
|
|
'2xs': {
|
|
value: '16rem',
|
|
},
|
|
xs: {
|
|
value: '20rem',
|
|
},
|
|
sm: {
|
|
value: '24rem',
|
|
},
|
|
md: {
|
|
value: '28rem',
|
|
},
|
|
lg: {
|
|
value: '32rem',
|
|
},
|
|
xl: {
|
|
value: '36rem',
|
|
},
|
|
'2xl': {
|
|
value: '42rem',
|
|
},
|
|
'3xl': {
|
|
value: '48rem',
|
|
},
|
|
'4xl': {
|
|
value: '56rem',
|
|
},
|
|
'5xl': {
|
|
value: '64rem',
|
|
},
|
|
'6xl': {
|
|
value: '72rem',
|
|
},
|
|
'7xl': {
|
|
value: '80rem',
|
|
},
|
|
'8xl': {
|
|
value: '90rem',
|
|
},
|
|
'0.5': {
|
|
value: '0.125rem',
|
|
},
|
|
'1.5': {
|
|
value: '0.375rem',
|
|
},
|
|
'2.5': {
|
|
value: '0.625rem',
|
|
},
|
|
'3.5': {
|
|
value: '0.875rem',
|
|
},
|
|
'4.5': {
|
|
value: '1.125rem',
|
|
},
|
|
'1/2': {
|
|
value: '50%',
|
|
},
|
|
'1/3': {
|
|
value: '33.333333%',
|
|
},
|
|
'2/3': {
|
|
value: '66.666667%',
|
|
},
|
|
'1/4': {
|
|
value: '25%',
|
|
},
|
|
'3/4': {
|
|
value: '75%',
|
|
},
|
|
'1/5': {
|
|
value: '20%',
|
|
},
|
|
'2/5': {
|
|
value: '40%',
|
|
},
|
|
'3/5': {
|
|
value: '60%',
|
|
},
|
|
'4/5': {
|
|
value: '80%',
|
|
},
|
|
'1/6': {
|
|
value: '16.666667%',
|
|
},
|
|
'2/6': {
|
|
value: '33.333333%',
|
|
},
|
|
'3/6': {
|
|
value: '50%',
|
|
},
|
|
'4/6': {
|
|
value: '66.666667%',
|
|
},
|
|
'5/6': {
|
|
value: '83.333333%',
|
|
},
|
|
'1/12': {
|
|
value: '8.333333%',
|
|
},
|
|
'2/12': {
|
|
value: '16.666667%',
|
|
},
|
|
'3/12': {
|
|
value: '25%',
|
|
},
|
|
'4/12': {
|
|
value: '33.333333%',
|
|
},
|
|
'5/12': {
|
|
value: '41.666667%',
|
|
},
|
|
'6/12': {
|
|
value: '50%',
|
|
},
|
|
'7/12': {
|
|
value: '58.333333%',
|
|
},
|
|
'8/12': {
|
|
value: '66.666667%',
|
|
},
|
|
'9/12': {
|
|
value: '75%',
|
|
},
|
|
'10/12': {
|
|
value: '83.333333%',
|
|
},
|
|
'11/12': {
|
|
value: '91.666667%',
|
|
},
|
|
max: {
|
|
value: 'max-content',
|
|
},
|
|
min: {
|
|
value: 'min-content',
|
|
},
|
|
fit: {
|
|
value: 'fit-content',
|
|
},
|
|
prose: {
|
|
value: '60ch',
|
|
},
|
|
full: {
|
|
value: '100%',
|
|
},
|
|
dvh: {
|
|
value: '100dvh',
|
|
},
|
|
svh: {
|
|
value: '100svh',
|
|
},
|
|
lvh: {
|
|
value: '100lvh',
|
|
},
|
|
dvw: {
|
|
value: '100dvw',
|
|
},
|
|
svw: {
|
|
value: '100svw',
|
|
},
|
|
lvw: {
|
|
value: '100lvw',
|
|
},
|
|
vw: {
|
|
value: '100vw',
|
|
},
|
|
vh: {
|
|
value: '100vh',
|
|
},
|
|
},
|
|
zIndex: {
|
|
hide: {
|
|
value: -1,
|
|
},
|
|
base: {
|
|
value: 0,
|
|
},
|
|
docked: {
|
|
value: 10,
|
|
},
|
|
dropdown: {
|
|
value: 1000,
|
|
},
|
|
sticky: {
|
|
value: 1100,
|
|
},
|
|
banner: {
|
|
value: 1200,
|
|
},
|
|
overlay: {
|
|
value: 1300,
|
|
},
|
|
modal: {
|
|
value: 1400,
|
|
},
|
|
popover: {
|
|
value: 1500,
|
|
},
|
|
skipNav: {
|
|
value: 1600,
|
|
},
|
|
toast: {
|
|
value: 1700,
|
|
},
|
|
tooltip: {
|
|
value: 1800,
|
|
},
|
|
max: {
|
|
value: 2147483647,
|
|
},
|
|
},
|
|
cursor: {
|
|
button: {
|
|
value: 'pointer',
|
|
},
|
|
checkbox: {
|
|
value: 'default',
|
|
},
|
|
disabled: {
|
|
value: 'not-allowed',
|
|
},
|
|
menuitem: {
|
|
value: 'default',
|
|
},
|
|
option: {
|
|
value: 'default',
|
|
},
|
|
radio: {
|
|
value: 'default',
|
|
},
|
|
slider: {
|
|
value: 'default',
|
|
},
|
|
switch: {
|
|
value: 'pointer',
|
|
},
|
|
},
|
|
},
|
|
semanticTokens: {
|
|
colors: {
|
|
bg: {
|
|
DEFAULT: {
|
|
value: {
|
|
_light: '{colors.white}',
|
|
_dark: '{colors.black}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.gray.50}',
|
|
_dark: '{colors.gray.950}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.gray.100}',
|
|
_dark: '{colors.gray.900}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.gray.200}',
|
|
_dark: '{colors.gray.800}',
|
|
},
|
|
},
|
|
inverted: {
|
|
value: {
|
|
_light: '{colors.black}',
|
|
_dark: '{colors.white}',
|
|
},
|
|
},
|
|
panel: {
|
|
value: {
|
|
_light: '{colors.white}',
|
|
_dark: '{colors.gray.950}',
|
|
},
|
|
},
|
|
error: {
|
|
value: {
|
|
_light: '{colors.red.50}',
|
|
_dark: '{colors.red.950}',
|
|
},
|
|
},
|
|
warning: {
|
|
value: {
|
|
_light: '{colors.orange.50}',
|
|
_dark: '{colors.orange.950}',
|
|
},
|
|
},
|
|
success: {
|
|
value: {
|
|
_light: '{colors.green.50}',
|
|
_dark: '{colors.green.950}',
|
|
},
|
|
},
|
|
info: {
|
|
value: {
|
|
_light: '{colors.blue.50}',
|
|
_dark: '{colors.blue.950}',
|
|
},
|
|
},
|
|
},
|
|
fg: {
|
|
DEFAULT: {
|
|
value: {
|
|
_light: '{colors.black}',
|
|
_dark: '{colors.gray.50}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.gray.600}',
|
|
_dark: '{colors.gray.400}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.gray.400}',
|
|
_dark: '{colors.gray.500}',
|
|
},
|
|
},
|
|
inverted: {
|
|
value: {
|
|
_light: '{colors.gray.50}',
|
|
_dark: '{colors.black}',
|
|
},
|
|
},
|
|
error: {
|
|
value: {
|
|
_light: '{colors.red.500}',
|
|
_dark: '{colors.red.400}',
|
|
},
|
|
},
|
|
warning: {
|
|
value: {
|
|
_light: '{colors.orange.600}',
|
|
_dark: '{colors.orange.300}',
|
|
},
|
|
},
|
|
success: {
|
|
value: {
|
|
_light: '{colors.green.600}',
|
|
_dark: '{colors.green.300}',
|
|
},
|
|
},
|
|
info: {
|
|
value: {
|
|
_light: '{colors.blue.600}',
|
|
_dark: '{colors.blue.300}',
|
|
},
|
|
},
|
|
},
|
|
border: {
|
|
DEFAULT: {
|
|
value: {
|
|
_light: '{colors.gray.200}',
|
|
_dark: '{colors.gray.800}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.gray.100}',
|
|
_dark: '{colors.gray.900}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.gray.50}',
|
|
_dark: '{colors.gray.950}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.gray.300}',
|
|
_dark: '{colors.gray.700}',
|
|
},
|
|
},
|
|
inverted: {
|
|
value: {
|
|
_light: '{colors.gray.800}',
|
|
_dark: '{colors.gray.200}',
|
|
},
|
|
},
|
|
error: {
|
|
value: {
|
|
_light: '{colors.red.500}',
|
|
_dark: '{colors.red.400}',
|
|
},
|
|
},
|
|
warning: {
|
|
value: {
|
|
_light: '{colors.orange.500}',
|
|
_dark: '{colors.orange.400}',
|
|
},
|
|
},
|
|
success: {
|
|
value: {
|
|
_light: '{colors.green.500}',
|
|
_dark: '{colors.green.400}',
|
|
},
|
|
},
|
|
info: {
|
|
value: {
|
|
_light: '{colors.blue.500}',
|
|
_dark: '{colors.blue.400}',
|
|
},
|
|
},
|
|
},
|
|
gray: {
|
|
contrast: {
|
|
value: {
|
|
_light: '{colors.white}',
|
|
_dark: '{colors.black}',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.gray.800}',
|
|
_dark: '{colors.gray.200}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.gray.100}',
|
|
_dark: '{colors.gray.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.gray.200}',
|
|
_dark: '{colors.gray.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.gray.300}',
|
|
_dark: '{colors.gray.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.gray.900}',
|
|
_dark: '{colors.white}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.gray.800}',
|
|
_dark: '{colors.gray.200}',
|
|
},
|
|
},
|
|
},
|
|
red: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.red.700}',
|
|
_dark: '{colors.red.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.red.100}',
|
|
_dark: '{colors.red.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.red.200}',
|
|
_dark: '{colors.red.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.red.300}',
|
|
_dark: '{colors.red.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.red.600}',
|
|
_dark: '{colors.red.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.red.600}',
|
|
_dark: '{colors.red.600}',
|
|
},
|
|
},
|
|
},
|
|
orange: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'black',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.orange.700}',
|
|
_dark: '{colors.orange.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.orange.100}',
|
|
_dark: '{colors.orange.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.orange.200}',
|
|
_dark: '{colors.orange.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.orange.300}',
|
|
_dark: '{colors.orange.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.orange.600}',
|
|
_dark: '{colors.orange.500}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.orange.600}',
|
|
_dark: '{colors.orange.500}',
|
|
},
|
|
},
|
|
},
|
|
green: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.green.700}',
|
|
_dark: '{colors.green.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.green.100}',
|
|
_dark: '{colors.green.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.green.200}',
|
|
_dark: '{colors.green.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.green.300}',
|
|
_dark: '{colors.green.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.green.600}',
|
|
_dark: '{colors.green.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.green.600}',
|
|
_dark: '{colors.green.600}',
|
|
},
|
|
},
|
|
},
|
|
blue: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.blue.700}',
|
|
_dark: '{colors.blue.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.blue.100}',
|
|
_dark: '{colors.blue.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.blue.200}',
|
|
_dark: '{colors.blue.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.blue.300}',
|
|
_dark: '{colors.blue.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.blue.600}',
|
|
_dark: '{colors.blue.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.blue.600}',
|
|
_dark: '{colors.blue.600}',
|
|
},
|
|
},
|
|
},
|
|
yellow: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'black',
|
|
_dark: 'black',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.yellow.800}',
|
|
_dark: '{colors.yellow.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.yellow.100}',
|
|
_dark: '{colors.yellow.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.yellow.200}',
|
|
_dark: '{colors.yellow.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.yellow.300}',
|
|
_dark: '{colors.yellow.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.yellow.300}',
|
|
_dark: '{colors.yellow.300}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.yellow.300}',
|
|
_dark: '{colors.yellow.300}',
|
|
},
|
|
},
|
|
},
|
|
teal: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.teal.700}',
|
|
_dark: '{colors.teal.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.teal.100}',
|
|
_dark: '{colors.teal.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.teal.200}',
|
|
_dark: '{colors.teal.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.teal.300}',
|
|
_dark: '{colors.teal.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.teal.600}',
|
|
_dark: '{colors.teal.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.teal.600}',
|
|
_dark: '{colors.teal.600}',
|
|
},
|
|
},
|
|
},
|
|
purple: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.purple.700}',
|
|
_dark: '{colors.purple.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.purple.100}',
|
|
_dark: '{colors.purple.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.purple.200}',
|
|
_dark: '{colors.purple.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.purple.300}',
|
|
_dark: '{colors.purple.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.purple.600}',
|
|
_dark: '{colors.purple.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.purple.600}',
|
|
_dark: '{colors.purple.600}',
|
|
},
|
|
},
|
|
},
|
|
pink: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.pink.700}',
|
|
_dark: '{colors.pink.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.pink.100}',
|
|
_dark: '{colors.pink.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.pink.200}',
|
|
_dark: '{colors.pink.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.pink.300}',
|
|
_dark: '{colors.pink.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.pink.600}',
|
|
_dark: '{colors.pink.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.pink.600}',
|
|
_dark: '{colors.pink.600}',
|
|
},
|
|
},
|
|
},
|
|
cyan: {
|
|
contrast: {
|
|
value: {
|
|
_light: 'white',
|
|
_dark: 'white',
|
|
},
|
|
},
|
|
fg: {
|
|
value: {
|
|
_light: '{colors.cyan.700}',
|
|
_dark: '{colors.cyan.300}',
|
|
},
|
|
},
|
|
subtle: {
|
|
value: {
|
|
_light: '{colors.cyan.100}',
|
|
_dark: '{colors.cyan.900}',
|
|
},
|
|
},
|
|
muted: {
|
|
value: {
|
|
_light: '{colors.cyan.200}',
|
|
_dark: '{colors.cyan.800}',
|
|
},
|
|
},
|
|
emphasized: {
|
|
value: {
|
|
_light: '{colors.cyan.300}',
|
|
_dark: '{colors.cyan.700}',
|
|
},
|
|
},
|
|
solid: {
|
|
value: {
|
|
_light: '{colors.cyan.600}',
|
|
_dark: '{colors.cyan.600}',
|
|
},
|
|
},
|
|
focusRing: {
|
|
value: {
|
|
_light: '{colors.cyan.600}',
|
|
_dark: '{colors.cyan.600}',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
shadows: {
|
|
xs: {
|
|
value: {
|
|
_light:
|
|
'0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}',
|
|
_dark:
|
|
'0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}',
|
|
},
|
|
},
|
|
sm: {
|
|
value: {
|
|
_light:
|
|
'0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}',
|
|
_dark:
|
|
'0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
|
|
},
|
|
},
|
|
md: {
|
|
value: {
|
|
_light:
|
|
'0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}',
|
|
_dark:
|
|
'0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
|
|
},
|
|
},
|
|
lg: {
|
|
value: {
|
|
_light:
|
|
'0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}',
|
|
_dark:
|
|
'0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
|
|
},
|
|
},
|
|
xl: {
|
|
value: {
|
|
_light:
|
|
'0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}',
|
|
_dark:
|
|
'0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
|
|
},
|
|
},
|
|
'2xl': {
|
|
value: {
|
|
_light:
|
|
'0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}',
|
|
_dark:
|
|
'0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
|
|
},
|
|
},
|
|
inner: {
|
|
value: {
|
|
_light: 'inset 0 2px 4px 0 {black/5}',
|
|
_dark: 'inset 0 2px 4px 0 black',
|
|
},
|
|
},
|
|
inset: {
|
|
value: {
|
|
_light: 'inset 0 0 0 1px {black/5}',
|
|
_dark: 'inset 0 0 0 1px {colors.gray.300/5}',
|
|
},
|
|
},
|
|
},
|
|
radii: {
|
|
l1: {
|
|
value: '{radii.xs}',
|
|
},
|
|
l2: {
|
|
value: '{radii.sm}',
|
|
},
|
|
l3: {
|
|
value: '{radii.md}',
|
|
},
|
|
},
|
|
},
|
|
recipes: {
|
|
badge: {
|
|
className: 'chakra-badge',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
borderRadius: 'l2',
|
|
gap: '1',
|
|
fontWeight: 'medium',
|
|
fontVariantNumeric: 'tabular-nums',
|
|
whiteSpace: 'nowrap',
|
|
userSelect: 'none',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
subtle: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
outline: {
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
surface: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
plain: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
textStyle: '2xs',
|
|
px: '1',
|
|
minH: '4',
|
|
},
|
|
sm: {
|
|
textStyle: 'xs',
|
|
px: '1.5',
|
|
minH: '5',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '2',
|
|
minH: '6',
|
|
},
|
|
lg: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
minH: '7',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'subtle',
|
|
size: 'sm',
|
|
},
|
|
},
|
|
button: {
|
|
className: 'chakra-button',
|
|
base: {
|
|
display: 'inline-flex',
|
|
appearance: 'none',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
position: 'relative',
|
|
borderRadius: 'l2',
|
|
whiteSpace: 'nowrap',
|
|
verticalAlign: 'middle',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
cursor: 'button',
|
|
flexShrink: '0',
|
|
outline: '0',
|
|
lineHeight: '1.2',
|
|
isolation: 'isolate',
|
|
fontWeight: 'medium',
|
|
transitionProperty: 'common',
|
|
transitionDuration: 'moderate',
|
|
focusVisibleRing: 'outside',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
_icon: {
|
|
flexShrink: '0',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
h: '6',
|
|
minW: '6',
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
gap: '1',
|
|
_icon: {
|
|
width: '3.5',
|
|
height: '3.5',
|
|
},
|
|
},
|
|
xs: {
|
|
h: '8',
|
|
minW: '8',
|
|
textStyle: 'xs',
|
|
px: '2.5',
|
|
gap: '1',
|
|
_icon: {
|
|
width: '4',
|
|
height: '4',
|
|
},
|
|
},
|
|
sm: {
|
|
h: '9',
|
|
minW: '9',
|
|
px: '3.5',
|
|
textStyle: 'sm',
|
|
gap: '2',
|
|
_icon: {
|
|
width: '4',
|
|
height: '4',
|
|
},
|
|
},
|
|
md: {
|
|
h: '10',
|
|
minW: '10',
|
|
textStyle: 'sm',
|
|
px: '4',
|
|
gap: '2',
|
|
_icon: {
|
|
width: '5',
|
|
height: '5',
|
|
},
|
|
},
|
|
lg: {
|
|
h: '11',
|
|
minW: '11',
|
|
textStyle: 'md',
|
|
px: '5',
|
|
gap: '3',
|
|
_icon: {
|
|
width: '5',
|
|
height: '5',
|
|
},
|
|
},
|
|
xl: {
|
|
h: '12',
|
|
minW: '12',
|
|
textStyle: 'md',
|
|
px: '5',
|
|
gap: '2.5',
|
|
_icon: {
|
|
width: '5',
|
|
height: '5',
|
|
},
|
|
},
|
|
'2xl': {
|
|
h: '16',
|
|
minW: '16',
|
|
textStyle: 'lg',
|
|
px: '7',
|
|
gap: '3',
|
|
_icon: {
|
|
width: '6',
|
|
height: '6',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
solid: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
_hover: {
|
|
bg: 'colorPalette.solid/90',
|
|
},
|
|
_expanded: {
|
|
bg: 'colorPalette.solid/90',
|
|
},
|
|
},
|
|
subtle: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
_hover: {
|
|
bg: 'colorPalette.muted',
|
|
},
|
|
_expanded: {
|
|
bg: 'colorPalette.muted',
|
|
},
|
|
},
|
|
surface: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
shadow: '0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
_hover: {
|
|
bg: 'colorPalette.muted',
|
|
},
|
|
_expanded: {
|
|
bg: 'colorPalette.muted',
|
|
},
|
|
},
|
|
outline: {
|
|
borderWidth: '1px',
|
|
borderColor: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
_hover: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
_expanded: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
ghost: {
|
|
color: 'colorPalette.fg',
|
|
_hover: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
_expanded: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
plain: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'solid',
|
|
},
|
|
},
|
|
code: {
|
|
className: 'chakra-code',
|
|
base: {
|
|
fontFamily: 'mono',
|
|
alignItems: 'center',
|
|
display: 'inline-flex',
|
|
borderRadius: 'l2',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
subtle: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
outline: {
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
surface: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
plain: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
textStyle: '2xs',
|
|
px: '1',
|
|
minH: '4',
|
|
},
|
|
sm: {
|
|
textStyle: 'xs',
|
|
px: '1.5',
|
|
minH: '5',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '2',
|
|
minH: '6',
|
|
},
|
|
lg: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
minH: '7',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'subtle',
|
|
size: 'sm',
|
|
},
|
|
},
|
|
container: {
|
|
className: 'chakra-container',
|
|
base: {
|
|
position: 'relative',
|
|
maxWidth: '8xl',
|
|
w: '100%',
|
|
mx: 'auto',
|
|
px: {
|
|
base: '4',
|
|
md: '6',
|
|
lg: '8',
|
|
},
|
|
},
|
|
variants: {
|
|
centerContent: {
|
|
true: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
fluid: {
|
|
true: {
|
|
maxWidth: 'full',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
heading: {
|
|
className: 'chakra-heading',
|
|
base: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'semibold',
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
textStyle: 'xs',
|
|
},
|
|
sm: {
|
|
textStyle: 'sm',
|
|
},
|
|
md: {
|
|
textStyle: 'md',
|
|
},
|
|
lg: {
|
|
textStyle: 'lg',
|
|
},
|
|
xl: {
|
|
textStyle: 'xl',
|
|
},
|
|
'2xl': {
|
|
textStyle: '2xl',
|
|
},
|
|
'3xl': {
|
|
textStyle: '3xl',
|
|
},
|
|
'4xl': {
|
|
textStyle: '4xl',
|
|
},
|
|
'5xl': {
|
|
textStyle: '5xl',
|
|
},
|
|
'6xl': {
|
|
textStyle: '6xl',
|
|
},
|
|
'7xl': {
|
|
textStyle: '7xl',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'xl',
|
|
},
|
|
},
|
|
input: {
|
|
className: 'chakra-input',
|
|
base: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'none',
|
|
textAlign: 'start',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
height: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'--error-color': 'colors.border.error',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.7',
|
|
},
|
|
xs: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
sm: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
lg: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
xl: {
|
|
textStyle: 'md',
|
|
px: '4.5',
|
|
'--input-height': 'sizes.12',
|
|
},
|
|
'2xl': {
|
|
textStyle: 'lg',
|
|
px: '5',
|
|
'--input-height': 'sizes.16',
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
subtle: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
flushed: {
|
|
bg: 'transparent',
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'border',
|
|
borderRadius: '0',
|
|
px: '0',
|
|
_focusVisible: {
|
|
borderColor: 'var(--focus-color)',
|
|
boxShadow: '0px 1px 0px 0px var(--focus-color)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
inputAddon: {
|
|
className: 'chakra-input-addon',
|
|
base: {
|
|
flex: '0 0 auto',
|
|
width: 'auto',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
whiteSpace: 'nowrap',
|
|
alignSelf: 'stretch',
|
|
borderRadius: 'l2',
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.7',
|
|
},
|
|
xs: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
sm: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
lg: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
xl: {
|
|
textStyle: 'md',
|
|
px: '4.5',
|
|
'--input-height': 'sizes.12',
|
|
},
|
|
'2xl': {
|
|
textStyle: 'lg',
|
|
px: '5',
|
|
'--input-height': 'sizes.16',
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
bg: 'bg.muted',
|
|
},
|
|
subtle: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.emphasized',
|
|
},
|
|
flushed: {
|
|
borderBottom: '1px solid',
|
|
borderColor: 'inherit',
|
|
borderRadius: '0',
|
|
px: '0',
|
|
bg: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
kbd: {
|
|
className: 'chakra-kbd',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
fontWeight: 'medium',
|
|
fontFamily: 'mono',
|
|
flexShrink: '0',
|
|
whiteSpace: 'nowrap',
|
|
wordSpacing: '-0.5em',
|
|
userSelect: 'none',
|
|
px: '1',
|
|
borderRadius: 'l2',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
raised: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
borderWidth: '1px',
|
|
borderBottomWidth: '2px',
|
|
borderColor: 'colorPalette.muted',
|
|
},
|
|
outline: {
|
|
borderWidth: '1px',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
subtle: {
|
|
bg: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
plain: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
textStyle: 'xs',
|
|
height: '4.5',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
height: '5',
|
|
},
|
|
lg: {
|
|
textStyle: 'md',
|
|
height: '6',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'raised',
|
|
},
|
|
},
|
|
link: {
|
|
className: 'chakra-link',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
outline: 'none',
|
|
gap: '1.5',
|
|
cursor: 'pointer',
|
|
borderRadius: 'l1',
|
|
focusRing: 'outside',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
underline: {
|
|
color: 'colorPalette.fg',
|
|
textDecoration: 'underline',
|
|
textUnderlineOffset: '3px',
|
|
textDecorationColor: 'currentColor/20',
|
|
},
|
|
plain: {
|
|
color: 'colorPalette.fg',
|
|
_hover: {
|
|
textDecoration: 'underline',
|
|
textUnderlineOffset: '3px',
|
|
textDecorationColor: 'currentColor/20',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'plain',
|
|
},
|
|
},
|
|
mark: {
|
|
className: 'chakra-mark',
|
|
base: {
|
|
bg: 'transparent',
|
|
color: 'inherit',
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
subtle: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'inherit',
|
|
},
|
|
solid: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
text: {
|
|
fontWeight: 'medium',
|
|
},
|
|
plain: {},
|
|
},
|
|
},
|
|
},
|
|
separator: {
|
|
className: 'chakra-separator',
|
|
base: {
|
|
display: 'block',
|
|
borderColor: 'border',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
borderStyle: 'solid',
|
|
},
|
|
dashed: {
|
|
borderStyle: 'dashed',
|
|
},
|
|
dotted: {
|
|
borderStyle: 'dotted',
|
|
},
|
|
},
|
|
orientation: {
|
|
vertical: {
|
|
height: '100%',
|
|
borderInlineStartWidth: 'var(--separator-thickness)',
|
|
},
|
|
horizontal: {
|
|
width: '100%',
|
|
borderTopWidth: 'var(--separator-thickness)',
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
'--separator-thickness': '0.5px',
|
|
},
|
|
sm: {
|
|
'--separator-thickness': '1px',
|
|
},
|
|
md: {
|
|
'--separator-thickness': '2px',
|
|
},
|
|
lg: {
|
|
'--separator-thickness': '3px',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'sm',
|
|
variant: 'solid',
|
|
orientation: 'horizontal',
|
|
},
|
|
},
|
|
skeleton: {
|
|
className: 'chakra-skeleton',
|
|
base: {},
|
|
variants: {
|
|
loading: {
|
|
true: {
|
|
borderRadius: 'l2',
|
|
boxShadow: 'none',
|
|
backgroundClip: 'padding-box',
|
|
cursor: 'default',
|
|
color: 'transparent',
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
flexShrink: '0',
|
|
'&::before, &::after, *': {
|
|
visibility: 'hidden',
|
|
},
|
|
},
|
|
false: {
|
|
background: 'unset',
|
|
animation:
|
|
'fade-in var(--fade-duration, 0.1s) ease-out !important',
|
|
},
|
|
},
|
|
variant: {
|
|
pulse: {
|
|
background: 'bg.emphasized',
|
|
animation: 'pulse',
|
|
animationDuration: 'var(--duration, 1.2s)',
|
|
},
|
|
shine: {
|
|
'--animate-from': '200%',
|
|
'--animate-to': '-200%',
|
|
'--start-color': 'colors.bg.muted',
|
|
'--end-color': 'colors.bg.emphasized',
|
|
backgroundImage:
|
|
'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
|
|
backgroundSize: '400% 100%',
|
|
animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
|
|
},
|
|
none: {
|
|
animation: 'none',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'pulse',
|
|
loading: true,
|
|
},
|
|
},
|
|
skipNavLink: {
|
|
className: 'chakra-skip-nav',
|
|
base: {
|
|
display: 'inline-flex',
|
|
bg: 'bg.panel',
|
|
padding: '2.5',
|
|
borderRadius: 'l2',
|
|
fontWeight: 'semibold',
|
|
focusVisibleRing: 'outside',
|
|
textStyle: 'sm',
|
|
userSelect: 'none',
|
|
border: '0',
|
|
height: '1px',
|
|
width: '1px',
|
|
margin: '-1px',
|
|
outline: '0',
|
|
overflow: 'hidden',
|
|
position: 'absolute',
|
|
clip: 'rect(0 0 0 0)',
|
|
_focusVisible: {
|
|
clip: 'auto',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
position: 'fixed',
|
|
top: '6',
|
|
insetStart: '6',
|
|
},
|
|
},
|
|
},
|
|
spinner: {
|
|
className: 'chakra-spinner',
|
|
base: {
|
|
display: 'inline-block',
|
|
borderColor: 'currentColor',
|
|
borderStyle: 'solid',
|
|
borderWidth: '2px',
|
|
borderRadius: 'full',
|
|
width: 'var(--spinner-size)',
|
|
height: 'var(--spinner-size)',
|
|
animation: 'spin',
|
|
animationDuration: 'slowest',
|
|
'--spinner-track-color': 'transparent',
|
|
borderBottomColor: 'var(--spinner-track-color)',
|
|
borderInlineStartColor: 'var(--spinner-track-color)',
|
|
},
|
|
variants: {
|
|
size: {
|
|
inherit: {
|
|
'--spinner-size': '1em',
|
|
},
|
|
xs: {
|
|
'--spinner-size': 'sizes.3',
|
|
},
|
|
sm: {
|
|
'--spinner-size': 'sizes.4',
|
|
},
|
|
md: {
|
|
'--spinner-size': 'sizes.5',
|
|
},
|
|
lg: {
|
|
'--spinner-size': 'sizes.8',
|
|
},
|
|
xl: {
|
|
'--spinner-size': 'sizes.10',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
textarea: {
|
|
className: 'chakra-textarea',
|
|
base: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'none',
|
|
textAlign: 'start',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'--error-color': 'colors.border.error',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
py: '1.5',
|
|
scrollPaddingBottom: '1.5',
|
|
},
|
|
sm: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
py: '2',
|
|
scrollPaddingBottom: '2',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
py: '2',
|
|
scrollPaddingBottom: '2',
|
|
},
|
|
lg: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
py: '3',
|
|
scrollPaddingBottom: '3',
|
|
},
|
|
xl: {
|
|
textStyle: 'md',
|
|
px: '4.5',
|
|
py: '3.5',
|
|
scrollPaddingBottom: '3.5',
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
subtle: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
flushed: {
|
|
bg: 'transparent',
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'border',
|
|
borderRadius: '0',
|
|
px: '0',
|
|
_focusVisible: {
|
|
borderColor: 'var(--focus-color)',
|
|
boxShadow: '0px 1px 0px 0px var(--focus-color)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
icon: {
|
|
className: 'chakra-icon',
|
|
base: {
|
|
display: 'inline-block',
|
|
lineHeight: '1em',
|
|
flexShrink: '0',
|
|
color: 'currentcolor',
|
|
verticalAlign: 'middle',
|
|
width: 'var(--icon-size)',
|
|
height: 'var(--icon-size)',
|
|
},
|
|
variants: {
|
|
size: {
|
|
inherit: {
|
|
'--icon-size': '1em',
|
|
},
|
|
xs: {
|
|
'--icon-size': 'sizes.3',
|
|
},
|
|
sm: {
|
|
'--icon-size': 'sizes.4',
|
|
},
|
|
md: {
|
|
'--icon-size': 'sizes.5',
|
|
},
|
|
lg: {
|
|
'--icon-size': 'sizes.6',
|
|
},
|
|
xl: {
|
|
'--icon-size': 'sizes.7',
|
|
},
|
|
'2xl': {
|
|
'--icon-size': 'sizes.8',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'inherit',
|
|
},
|
|
},
|
|
checkmark: {
|
|
className: 'chakra-checkmark',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'l1',
|
|
focusVisibleRing: 'outside',
|
|
_icon: {
|
|
boxSize: 'full',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'border.error',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
boxSize: '3',
|
|
},
|
|
sm: {
|
|
boxSize: '4',
|
|
},
|
|
md: {
|
|
boxSize: '5',
|
|
p: '0.5',
|
|
},
|
|
lg: {
|
|
boxSize: '6',
|
|
p: '0.5',
|
|
},
|
|
},
|
|
variant: {
|
|
solid: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
outline: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
subtle: {
|
|
bg: 'colorPalette.muted',
|
|
borderColor: 'colorPalette.muted',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
plain: {
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
inverted: {
|
|
borderColor: 'border',
|
|
color: 'colorPalette.fg',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
},
|
|
radiomark: {
|
|
className: 'chakra-radiomark',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
verticalAlign: 'top',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'full',
|
|
cursor: 'radio',
|
|
_focusVisible: {
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
outlineOffset: '2px',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'red.500',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
cursor: 'disabled',
|
|
},
|
|
'& .dot': {
|
|
height: '100%',
|
|
width: '100%',
|
|
borderRadius: 'full',
|
|
bg: 'currentColor',
|
|
scale: '0.4',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
subtle: {
|
|
borderWidth: '1px',
|
|
bg: 'colorPalette.muted',
|
|
borderColor: 'colorPalette.muted',
|
|
color: 'transparent',
|
|
_checked: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
outline: {
|
|
borderWidth: '1px',
|
|
borderColor: 'inherit',
|
|
_checked: {
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
'& .dot': {
|
|
scale: '0.6',
|
|
},
|
|
},
|
|
inverted: {
|
|
bg: 'bg',
|
|
borderWidth: '1px',
|
|
borderColor: 'inherit',
|
|
_checked: {
|
|
color: 'colorPalette.solid',
|
|
borderColor: 'currentcolor',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
boxSize: '3',
|
|
},
|
|
sm: {
|
|
boxSize: '4',
|
|
},
|
|
md: {
|
|
boxSize: '5',
|
|
},
|
|
lg: {
|
|
boxSize: '6',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
},
|
|
colorSwatch: {
|
|
className: 'color-swatch',
|
|
base: {
|
|
boxSize: 'var(--swatch-size)',
|
|
shadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)',
|
|
'--checker-size': '8px',
|
|
'--checker-bg': 'colors.bg',
|
|
'--checker-fg': 'colors.bg.emphasized',
|
|
background:
|
|
'linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
'--swatch-size': 'sizes.3.5',
|
|
},
|
|
xs: {
|
|
'--swatch-size': 'sizes.4',
|
|
},
|
|
sm: {
|
|
'--swatch-size': 'sizes.4.5',
|
|
},
|
|
md: {
|
|
'--swatch-size': 'sizes.5',
|
|
},
|
|
lg: {
|
|
'--swatch-size': 'sizes.6',
|
|
},
|
|
xl: {
|
|
'--swatch-size': 'sizes.7',
|
|
},
|
|
'2xl': {
|
|
'--swatch-size': 'sizes.8',
|
|
},
|
|
inherit: {
|
|
'--swatch-size': 'inherit',
|
|
},
|
|
full: {
|
|
'--swatch-size': '100%',
|
|
},
|
|
},
|
|
shape: {
|
|
square: {
|
|
borderRadius: 'none',
|
|
},
|
|
circle: {
|
|
borderRadius: 'full',
|
|
},
|
|
rounded: {
|
|
borderRadius: 'l1',
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
shape: 'rounded',
|
|
},
|
|
},
|
|
},
|
|
slotRecipes: {
|
|
accordion: {
|
|
className: 'chakra-accordion',
|
|
slots: [
|
|
'root',
|
|
'item',
|
|
'itemTrigger',
|
|
'itemContent',
|
|
'itemIndicator',
|
|
'itemBody',
|
|
],
|
|
base: {
|
|
root: {
|
|
width: 'full',
|
|
'--accordion-radius': 'radii.l2',
|
|
},
|
|
item: {
|
|
overflowAnchor: 'none',
|
|
},
|
|
itemTrigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: 'full',
|
|
outline: '0',
|
|
gap: '3',
|
|
fontWeight: 'medium',
|
|
borderRadius: 'var(--accordion-radius)',
|
|
_focusVisible: {
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
},
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
},
|
|
itemBody: {
|
|
pt: 'var(--accordion-padding-y)',
|
|
pb: 'calc(var(--accordion-padding-y) * 2)',
|
|
},
|
|
itemContent: {
|
|
overflow: 'hidden',
|
|
borderRadius: 'var(--accordion-radius)',
|
|
_open: {
|
|
animationName: 'expand-height, fade-in',
|
|
animationDuration: 'moderate',
|
|
},
|
|
_closed: {
|
|
animationName: 'collapse-height, fade-out',
|
|
animationDuration: 'moderate',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
transition: 'rotate 0.2s',
|
|
transformOrigin: 'center',
|
|
color: 'fg.subtle',
|
|
_open: {
|
|
rotate: '180deg',
|
|
},
|
|
_icon: {
|
|
width: '1.2em',
|
|
height: '1.2em',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
item: {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
},
|
|
subtle: {
|
|
itemTrigger: {
|
|
px: 'var(--accordion-padding-x)',
|
|
},
|
|
itemContent: {
|
|
px: 'var(--accordion-padding-x)',
|
|
},
|
|
item: {
|
|
borderRadius: 'var(--accordion-radius)',
|
|
_open: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
},
|
|
enclosed: {
|
|
root: {
|
|
borderWidth: '1px',
|
|
borderRadius: 'var(--accordion-radius)',
|
|
divideY: '1px',
|
|
overflow: 'hidden',
|
|
},
|
|
itemTrigger: {
|
|
px: 'var(--accordion-padding-x)',
|
|
},
|
|
itemContent: {
|
|
px: 'var(--accordion-padding-x)',
|
|
},
|
|
item: {
|
|
_open: {
|
|
bg: 'bg.subtle',
|
|
},
|
|
},
|
|
},
|
|
plain: {},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
'--accordion-padding-x': 'spacing.3',
|
|
'--accordion-padding-y': 'spacing.2',
|
|
},
|
|
itemTrigger: {
|
|
textStyle: 'sm',
|
|
py: 'var(--accordion-padding-y)',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--accordion-padding-x': 'spacing.4',
|
|
'--accordion-padding-y': 'spacing.2',
|
|
},
|
|
itemTrigger: {
|
|
textStyle: 'md',
|
|
py: 'var(--accordion-padding-y)',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--accordion-padding-x': 'spacing.4.5',
|
|
'--accordion-padding-y': 'spacing.2.5',
|
|
},
|
|
itemTrigger: {
|
|
textStyle: 'lg',
|
|
py: 'var(--accordion-padding-y)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
actionBar: {
|
|
className: 'chakra-action-bar',
|
|
slots: [
|
|
'positioner',
|
|
'content',
|
|
'separator',
|
|
'selectionTrigger',
|
|
'closeTrigger',
|
|
],
|
|
base: {
|
|
positioner: {
|
|
position: 'fixed',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
pointerEvents: 'none',
|
|
insetInline: '0',
|
|
top: 'unset',
|
|
bottom: 'calc(env(safe-area-inset-bottom) + 20px)',
|
|
},
|
|
content: {
|
|
bg: 'bg.panel',
|
|
shadow: 'md',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3',
|
|
borderRadius: 'l3',
|
|
py: '2.5',
|
|
px: '3',
|
|
pointerEvents: 'auto',
|
|
translate: 'calc(-1 * var(--scrollbar-width) / 2) 0px',
|
|
_open: {
|
|
animationName: 'slide-from-bottom, fade-in',
|
|
animationDuration: 'moderate',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-bottom, fade-out',
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
separator: {
|
|
width: '1px',
|
|
height: '5',
|
|
bg: 'border',
|
|
},
|
|
selectionTrigger: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
alignSelf: 'stretch',
|
|
textStyle: 'sm',
|
|
px: '4',
|
|
py: '1',
|
|
borderRadius: 'l2',
|
|
borderWidth: '1px',
|
|
borderStyle: 'dashed',
|
|
},
|
|
},
|
|
},
|
|
alert: {
|
|
slots: ['title', 'description', 'root', 'indicator', 'content'],
|
|
className: 'chakra-alert',
|
|
base: {
|
|
root: {
|
|
width: 'full',
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
position: 'relative',
|
|
borderRadius: 'l3',
|
|
},
|
|
title: {
|
|
fontWeight: 'medium',
|
|
},
|
|
description: {
|
|
display: 'inline',
|
|
},
|
|
indicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
width: '1em',
|
|
height: '1em',
|
|
_icon: {
|
|
boxSize: 'full',
|
|
},
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flex: '1',
|
|
gap: '1',
|
|
},
|
|
},
|
|
variants: {
|
|
status: {
|
|
info: {
|
|
root: {
|
|
colorPalette: 'blue',
|
|
},
|
|
},
|
|
warning: {
|
|
root: {
|
|
colorPalette: 'orange',
|
|
},
|
|
},
|
|
success: {
|
|
root: {
|
|
colorPalette: 'green',
|
|
},
|
|
},
|
|
error: {
|
|
root: {
|
|
colorPalette: 'red',
|
|
},
|
|
},
|
|
neutral: {
|
|
root: {
|
|
colorPalette: 'gray',
|
|
},
|
|
},
|
|
},
|
|
inline: {
|
|
true: {
|
|
content: {
|
|
display: 'inline-flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
false: {
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
subtle: {
|
|
root: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
surface: {
|
|
root: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
indicator: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
indicator: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
solid: {
|
|
root: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
indicator: {
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
gap: '2',
|
|
px: '3',
|
|
py: '3',
|
|
textStyle: 'xs',
|
|
},
|
|
indicator: {
|
|
textStyle: 'lg',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
gap: '3',
|
|
px: '4',
|
|
py: '4',
|
|
textStyle: 'sm',
|
|
},
|
|
indicator: {
|
|
textStyle: 'xl',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
gap: '3',
|
|
px: '4',
|
|
py: '4',
|
|
textStyle: 'md',
|
|
},
|
|
indicator: {
|
|
textStyle: '2xl',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
status: 'info',
|
|
variant: 'subtle',
|
|
size: 'md',
|
|
inline: false,
|
|
},
|
|
},
|
|
avatar: {
|
|
slots: ['root', 'image', 'fallback'],
|
|
className: 'chakra-avatar',
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontWeight: 'medium',
|
|
position: 'relative',
|
|
verticalAlign: 'top',
|
|
flexShrink: '0',
|
|
userSelect: 'none',
|
|
width: 'var(--avatar-size)',
|
|
height: 'var(--avatar-size)',
|
|
fontSize: 'var(--avatar-font-size)',
|
|
borderRadius: 'var(--avatar-radius)',
|
|
'&[data-group-item]': {
|
|
borderWidth: '2px',
|
|
borderColor: 'bg',
|
|
},
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
borderRadius: 'var(--avatar-radius)',
|
|
},
|
|
fallback: {
|
|
lineHeight: '1',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 'medium',
|
|
fontSize: 'var(--avatar-font-size)',
|
|
borderRadius: 'var(--avatar-radius)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
full: {
|
|
root: {
|
|
'--avatar-size': '100%',
|
|
'--avatar-font-size': '100%',
|
|
},
|
|
},
|
|
'2xs': {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.2xs',
|
|
'--avatar-size': 'sizes.6',
|
|
},
|
|
},
|
|
xs: {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.xs',
|
|
'--avatar-size': 'sizes.8',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.sm',
|
|
'--avatar-size': 'sizes.9',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.md',
|
|
'--avatar-size': 'sizes.10',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.md',
|
|
'--avatar-size': 'sizes.11',
|
|
},
|
|
},
|
|
xl: {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.lg',
|
|
'--avatar-size': 'sizes.12',
|
|
},
|
|
},
|
|
'2xl': {
|
|
root: {
|
|
'--avatar-font-size': 'fontSizes.xl',
|
|
'--avatar-size': 'sizes.16',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
solid: {
|
|
root: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
subtle: {
|
|
root: {
|
|
bg: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
color: 'colorPalette.fg',
|
|
borderWidth: '1px',
|
|
borderColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
},
|
|
shape: {
|
|
square: {},
|
|
rounded: {
|
|
root: {
|
|
'--avatar-radius': 'radii.l3',
|
|
},
|
|
},
|
|
full: {
|
|
root: {
|
|
'--avatar-radius': 'radii.full',
|
|
},
|
|
},
|
|
},
|
|
borderless: {
|
|
true: {
|
|
root: {
|
|
'&[data-group-item]': {
|
|
borderWidth: '0px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
shape: 'full',
|
|
variant: 'subtle',
|
|
},
|
|
},
|
|
blockquote: {
|
|
className: 'chakra-blockquote',
|
|
slots: ['root', 'icon', 'content', 'caption'],
|
|
base: {
|
|
root: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '2',
|
|
},
|
|
caption: {
|
|
textStyle: 'sm',
|
|
color: 'fg.muted',
|
|
},
|
|
icon: {
|
|
boxSize: '5',
|
|
},
|
|
},
|
|
variants: {
|
|
justify: {
|
|
start: {
|
|
root: {
|
|
alignItems: 'flex-start',
|
|
textAlign: 'start',
|
|
},
|
|
},
|
|
center: {
|
|
root: {
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
end: {
|
|
root: {
|
|
alignItems: 'flex-end',
|
|
textAlign: 'end',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
subtle: {
|
|
root: {
|
|
paddingX: '5',
|
|
borderStartWidth: '4px',
|
|
borderStartColor: 'colorPalette.muted',
|
|
},
|
|
icon: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
solid: {
|
|
root: {
|
|
paddingX: '5',
|
|
borderStartWidth: '4px',
|
|
borderStartColor: 'colorPalette.solid',
|
|
},
|
|
icon: {
|
|
color: 'colorPalette.solid',
|
|
},
|
|
},
|
|
plain: {
|
|
root: {
|
|
paddingX: '5',
|
|
},
|
|
icon: {
|
|
color: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'subtle',
|
|
justify: 'start',
|
|
},
|
|
},
|
|
breadcrumb: {
|
|
className: 'chakra-breadcrumb',
|
|
slots: [
|
|
'link',
|
|
'currentLink',
|
|
'item',
|
|
'list',
|
|
'root',
|
|
'ellipsis',
|
|
'separator',
|
|
],
|
|
base: {
|
|
list: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
wordBreak: 'break-word',
|
|
color: 'fg.muted',
|
|
},
|
|
link: {
|
|
outline: '0',
|
|
textDecoration: 'none',
|
|
borderRadius: 'l1',
|
|
focusRing: 'outside',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
},
|
|
item: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
},
|
|
separator: {
|
|
color: 'fg.muted',
|
|
opacity: '0.8',
|
|
_icon: {
|
|
boxSize: '1em',
|
|
},
|
|
},
|
|
ellipsis: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
_icon: {
|
|
boxSize: '1em',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
underline: {
|
|
link: {
|
|
color: 'colorPalette.fg',
|
|
textDecoration: 'underline',
|
|
textUnderlineOffset: '0.2em',
|
|
textDecorationColor: 'colorPalette.muted',
|
|
},
|
|
currentLink: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
plain: {
|
|
link: {
|
|
color: 'fg.muted',
|
|
_hover: {
|
|
color: 'fg',
|
|
},
|
|
},
|
|
currentLink: {
|
|
color: 'fg',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
list: {
|
|
gap: '1',
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
md: {
|
|
list: {
|
|
gap: '1.5',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
list: {
|
|
gap: '2',
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'plain',
|
|
size: 'md',
|
|
},
|
|
},
|
|
card: {
|
|
className: 'chakra-card',
|
|
slots: ['root', 'header', 'body', 'footer', 'title', 'description'],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
minWidth: '0',
|
|
wordWrap: 'break-word',
|
|
borderRadius: 'l3',
|
|
color: 'fg',
|
|
textAlign: 'start',
|
|
},
|
|
title: {
|
|
fontWeight: 'semibold',
|
|
},
|
|
description: {
|
|
color: 'fg.muted',
|
|
fontSize: 'sm',
|
|
},
|
|
header: {
|
|
paddingInline: 'var(--card-padding)',
|
|
paddingTop: 'var(--card-padding)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1.5',
|
|
},
|
|
body: {
|
|
padding: 'var(--card-padding)',
|
|
flex: '1',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
footer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
paddingInline: 'var(--card-padding)',
|
|
paddingBottom: 'var(--card-padding)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
'--card-padding': 'spacing.4',
|
|
},
|
|
title: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--card-padding': 'spacing.6',
|
|
},
|
|
title: {
|
|
textStyle: 'lg',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--card-padding': 'spacing.7',
|
|
},
|
|
title: {
|
|
textStyle: 'xl',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
elevated: {
|
|
root: {
|
|
bg: 'bg.panel',
|
|
boxShadow: 'md',
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
bg: 'bg.panel',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
},
|
|
},
|
|
subtle: {
|
|
root: {
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'outline',
|
|
size: 'md',
|
|
},
|
|
},
|
|
checkbox: {
|
|
slots: ['root', 'label', 'control', 'indicator', 'group'],
|
|
className: 'chakra-checkbox',
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
gap: '2',
|
|
alignItems: 'center',
|
|
verticalAlign: 'top',
|
|
position: 'relative',
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'l1',
|
|
focusVisibleRing: 'outside',
|
|
_icon: {
|
|
boxSize: 'full',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'border.error',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
label: {
|
|
fontWeight: 'medium',
|
|
userSelect: 'none',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
root: {
|
|
gap: '1.5',
|
|
},
|
|
label: {
|
|
textStyle: 'xs',
|
|
},
|
|
control: {
|
|
boxSize: '3',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
gap: '2',
|
|
},
|
|
label: {
|
|
textStyle: 'sm',
|
|
},
|
|
control: {
|
|
boxSize: '4',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
gap: '2.5',
|
|
},
|
|
label: {
|
|
textStyle: 'sm',
|
|
},
|
|
control: {
|
|
boxSize: '5',
|
|
p: '0.5',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
gap: '3',
|
|
},
|
|
label: {
|
|
textStyle: 'md',
|
|
},
|
|
control: {
|
|
boxSize: '6',
|
|
p: '0.5',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
control: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
control: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
control: {
|
|
bg: 'colorPalette.muted',
|
|
borderColor: 'colorPalette.muted',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
},
|
|
checkboxCard: {
|
|
slots: [
|
|
'root',
|
|
'control',
|
|
'label',
|
|
'description',
|
|
'addon',
|
|
'indicator',
|
|
'content',
|
|
],
|
|
className: 'chakra-checkbox-card',
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
userSelect: 'none',
|
|
position: 'relative',
|
|
borderRadius: 'l2',
|
|
flex: '1',
|
|
focusVisibleRing: 'outside',
|
|
_disabled: {
|
|
opacity: '0.8',
|
|
borderColor: 'border.subtle',
|
|
},
|
|
_invalid: {
|
|
outline: '2px solid',
|
|
outlineColor: 'border.error',
|
|
},
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
flex: '1',
|
|
position: 'relative',
|
|
borderRadius: 'inherit',
|
|
justifyContent: 'var(--checkbox-card-justify)',
|
|
alignItems: 'var(--checkbox-card-align)',
|
|
},
|
|
label: {
|
|
fontWeight: 'medium',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
description: {
|
|
opacity: '0.64',
|
|
textStyle: 'sm',
|
|
},
|
|
addon: {
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
indicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'l1',
|
|
focusVisibleRing: 'outside',
|
|
_icon: {
|
|
boxSize: 'full',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'border.error',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: '1',
|
|
gap: '1',
|
|
justifyContent: 'var(--checkbox-card-justify)',
|
|
alignItems: 'var(--checkbox-card-align)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
control: {
|
|
padding: '3',
|
|
gap: '1.5',
|
|
},
|
|
addon: {
|
|
px: '3',
|
|
py: '1.5',
|
|
borderTopWidth: '1px',
|
|
},
|
|
indicator: {
|
|
boxSize: '4',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
control: {
|
|
padding: '4',
|
|
gap: '2.5',
|
|
},
|
|
addon: {
|
|
px: '4',
|
|
py: '2',
|
|
borderTopWidth: '1px',
|
|
},
|
|
indicator: {
|
|
boxSize: '5',
|
|
p: '0.5',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
textStyle: 'md',
|
|
},
|
|
control: {
|
|
padding: '4',
|
|
gap: '3.5',
|
|
},
|
|
addon: {
|
|
px: '4',
|
|
py: '2',
|
|
borderTopWidth: '1px',
|
|
},
|
|
indicator: {
|
|
boxSize: '6',
|
|
p: '0.5',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
surface: {
|
|
root: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.muted',
|
|
},
|
|
_disabled: {
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
indicator: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
root: {
|
|
bg: 'bg.muted',
|
|
},
|
|
control: {
|
|
_checked: {
|
|
bg: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
indicator: {
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
boxShadow: '0 0 0 1px var(--shadow-color)',
|
|
boxShadowColor: 'colorPalette.solid',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
indicator: {
|
|
borderColor: 'border',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
root: {
|
|
borderWidth: '1px',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
indicator: {
|
|
borderColor: 'border',
|
|
color: 'colorPalette.fg',
|
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
justify: {
|
|
start: {
|
|
root: {
|
|
'--checkbox-card-justify': 'flex-start',
|
|
},
|
|
},
|
|
end: {
|
|
root: {
|
|
'--checkbox-card-justify': 'flex-end',
|
|
},
|
|
},
|
|
center: {
|
|
root: {
|
|
'--checkbox-card-justify': 'center',
|
|
},
|
|
},
|
|
},
|
|
align: {
|
|
start: {
|
|
root: {
|
|
'--checkbox-card-align': 'flex-start',
|
|
},
|
|
content: {
|
|
textAlign: 'start',
|
|
},
|
|
},
|
|
end: {
|
|
root: {
|
|
'--checkbox-card-align': 'flex-end',
|
|
},
|
|
content: {
|
|
textAlign: 'end',
|
|
},
|
|
},
|
|
center: {
|
|
root: {
|
|
'--checkbox-card-align': 'center',
|
|
},
|
|
content: {
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
},
|
|
orientation: {
|
|
vertical: {
|
|
control: {
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
horizontal: {
|
|
control: {
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
align: 'start',
|
|
orientation: 'horizontal',
|
|
},
|
|
},
|
|
collapsible: {
|
|
slots: ['root', 'trigger', 'content'],
|
|
className: 'chakra-collapsible',
|
|
base: {
|
|
content: {
|
|
overflow: 'hidden',
|
|
_open: {
|
|
animationName: 'expand-height, fade-in',
|
|
animationDuration: 'moderate',
|
|
},
|
|
_closed: {
|
|
animationName: 'collapse-height, fade-out',
|
|
animationDuration: 'moderate',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
dataList: {
|
|
slots: ['root', 'item', 'itemLabel', 'itemValue'],
|
|
className: 'chakra-data-list',
|
|
base: {
|
|
itemLabel: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '1',
|
|
},
|
|
itemValue: {
|
|
display: 'flex',
|
|
minWidth: '0',
|
|
flex: '1',
|
|
},
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
item: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '4',
|
|
},
|
|
itemLabel: {
|
|
minWidth: '120px',
|
|
},
|
|
},
|
|
vertical: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
item: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
gap: '3',
|
|
},
|
|
item: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
gap: '4',
|
|
},
|
|
item: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
gap: '5',
|
|
},
|
|
item: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
subtle: {
|
|
itemLabel: {
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
bold: {
|
|
itemLabel: {
|
|
fontWeight: 'medium',
|
|
},
|
|
itemValue: {
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
orientation: 'vertical',
|
|
variant: 'subtle',
|
|
},
|
|
},
|
|
dialog: {
|
|
slots: [
|
|
'trigger',
|
|
'backdrop',
|
|
'positioner',
|
|
'content',
|
|
'title',
|
|
'description',
|
|
'closeTrigger',
|
|
'header',
|
|
'body',
|
|
'footer',
|
|
'backdrop',
|
|
],
|
|
className: 'chakra-dialog',
|
|
base: {
|
|
backdrop: {
|
|
bg: 'blackAlpha.500',
|
|
pos: 'fixed',
|
|
left: 0,
|
|
top: 0,
|
|
w: '100vw',
|
|
h: '100dvh',
|
|
zIndex: 'modal',
|
|
_open: {
|
|
animationName: 'fade-in',
|
|
animationDuration: 'slow',
|
|
},
|
|
_closed: {
|
|
animationName: 'fade-out',
|
|
animationDuration: 'moderate',
|
|
},
|
|
},
|
|
positioner: {
|
|
display: 'flex',
|
|
width: '100vw',
|
|
height: '100dvh',
|
|
position: 'fixed',
|
|
left: 0,
|
|
top: 0,
|
|
'--dialog-z-index': 'zIndex.modal',
|
|
zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
|
|
justifyContent: 'center',
|
|
overscrollBehaviorY: 'none',
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
width: '100%',
|
|
outline: 0,
|
|
borderRadius: 'l3',
|
|
textStyle: 'sm',
|
|
my: 'var(--dialog-margin, var(--dialog-base-margin))',
|
|
'--dialog-z-index': 'zIndex.modal',
|
|
zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
|
|
bg: 'bg.panel',
|
|
boxShadow: 'lg',
|
|
_open: {
|
|
animationDuration: 'moderate',
|
|
},
|
|
_closed: {
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
header: {
|
|
flex: 0,
|
|
px: '6',
|
|
pt: '6',
|
|
pb: '4',
|
|
},
|
|
body: {
|
|
flex: '1',
|
|
px: '6',
|
|
pt: '2',
|
|
pb: '6',
|
|
},
|
|
footer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
gap: '3',
|
|
px: '6',
|
|
pt: '2',
|
|
pb: '4',
|
|
},
|
|
title: {
|
|
textStyle: 'lg',
|
|
fontWeight: 'semibold',
|
|
},
|
|
description: {
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
variants: {
|
|
placement: {
|
|
center: {
|
|
positioner: {
|
|
alignItems: 'center',
|
|
},
|
|
content: {
|
|
'--dialog-base-margin': 'auto',
|
|
mx: 'auto',
|
|
},
|
|
},
|
|
top: {
|
|
positioner: {
|
|
alignItems: 'flex-start',
|
|
},
|
|
content: {
|
|
'--dialog-base-margin': 'spacing.16',
|
|
mx: 'auto',
|
|
},
|
|
},
|
|
bottom: {
|
|
positioner: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
content: {
|
|
'--dialog-base-margin': 'spacing.16',
|
|
mx: 'auto',
|
|
},
|
|
},
|
|
},
|
|
scrollBehavior: {
|
|
inside: {
|
|
positioner: {
|
|
overflow: 'hidden',
|
|
},
|
|
content: {
|
|
maxH: 'calc(100% - 7.5rem)',
|
|
},
|
|
body: {
|
|
overflow: 'auto',
|
|
},
|
|
},
|
|
outside: {
|
|
positioner: {
|
|
overflow: 'auto',
|
|
pointerEvents: 'auto',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
content: {
|
|
maxW: 'sm',
|
|
},
|
|
},
|
|
sm: {
|
|
content: {
|
|
maxW: 'md',
|
|
},
|
|
},
|
|
md: {
|
|
content: {
|
|
maxW: 'lg',
|
|
},
|
|
},
|
|
lg: {
|
|
content: {
|
|
maxW: '2xl',
|
|
},
|
|
},
|
|
xl: {
|
|
content: {
|
|
maxW: '4xl',
|
|
},
|
|
},
|
|
cover: {
|
|
positioner: {
|
|
padding: '10',
|
|
},
|
|
content: {
|
|
width: '100%',
|
|
height: '100%',
|
|
'--dialog-margin': '0',
|
|
},
|
|
},
|
|
full: {
|
|
content: {
|
|
maxW: '100vw',
|
|
minH: '100vh',
|
|
'--dialog-margin': '0',
|
|
borderRadius: '0',
|
|
},
|
|
},
|
|
},
|
|
motionPreset: {
|
|
scale: {
|
|
content: {
|
|
_open: {
|
|
animationName: 'scale-in, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'scale-out, fade-out',
|
|
},
|
|
},
|
|
},
|
|
'slide-in-bottom': {
|
|
content: {
|
|
_open: {
|
|
animationName: 'slide-from-bottom, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-bottom, fade-out',
|
|
},
|
|
},
|
|
},
|
|
'slide-in-top': {
|
|
content: {
|
|
_open: {
|
|
animationName: 'slide-from-top, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-top, fade-out',
|
|
},
|
|
},
|
|
},
|
|
'slide-in-left': {
|
|
content: {
|
|
_open: {
|
|
animationName: 'slide-from-left, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-left, fade-out',
|
|
},
|
|
},
|
|
},
|
|
'slide-in-right': {
|
|
content: {
|
|
_open: {
|
|
animationName: 'slide-from-right, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-right, fade-out',
|
|
},
|
|
},
|
|
},
|
|
none: {},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
scrollBehavior: 'outside',
|
|
placement: 'top',
|
|
motionPreset: 'scale',
|
|
},
|
|
},
|
|
drawer: {
|
|
slots: [
|
|
'trigger',
|
|
'backdrop',
|
|
'positioner',
|
|
'content',
|
|
'title',
|
|
'description',
|
|
'closeTrigger',
|
|
'header',
|
|
'body',
|
|
'footer',
|
|
'backdrop',
|
|
],
|
|
className: 'chakra-drawer',
|
|
base: {
|
|
backdrop: {
|
|
bg: 'blackAlpha.500',
|
|
pos: 'fixed',
|
|
insetInlineStart: 0,
|
|
top: 0,
|
|
w: '100vw',
|
|
h: '100dvh',
|
|
zIndex: 'modal',
|
|
_open: {
|
|
animationName: 'fade-in',
|
|
animationDuration: 'slow',
|
|
},
|
|
_closed: {
|
|
animationName: 'fade-out',
|
|
animationDuration: 'moderate',
|
|
},
|
|
},
|
|
positioner: {
|
|
display: 'flex',
|
|
width: '100vw',
|
|
height: '100dvh',
|
|
position: 'fixed',
|
|
insetInlineStart: 0,
|
|
top: 0,
|
|
zIndex: 'modal',
|
|
overscrollBehaviorY: 'none',
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
width: '100%',
|
|
outline: 0,
|
|
zIndex: 'modal',
|
|
textStyle: 'sm',
|
|
maxH: '100dvh',
|
|
color: 'inherit',
|
|
bg: 'bg.panel',
|
|
boxShadow: 'lg',
|
|
_open: {
|
|
animationDuration: 'slowest',
|
|
animationTimingFunction: 'ease-in-smooth',
|
|
},
|
|
_closed: {
|
|
animationDuration: 'slower',
|
|
animationTimingFunction: 'ease-in-smooth',
|
|
},
|
|
},
|
|
header: {
|
|
flex: 0,
|
|
px: '6',
|
|
pt: '6',
|
|
pb: '4',
|
|
},
|
|
body: {
|
|
px: '6',
|
|
py: '2',
|
|
flex: '1',
|
|
overflow: 'auto',
|
|
},
|
|
footer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
gap: '3',
|
|
px: '6',
|
|
pt: '2',
|
|
pb: '4',
|
|
},
|
|
title: {
|
|
textStyle: 'lg',
|
|
fontWeight: 'semibold',
|
|
},
|
|
description: {
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
content: {
|
|
maxW: 'xs',
|
|
},
|
|
},
|
|
sm: {
|
|
content: {
|
|
maxW: 'md',
|
|
},
|
|
},
|
|
md: {
|
|
content: {
|
|
maxW: 'lg',
|
|
},
|
|
},
|
|
lg: {
|
|
content: {
|
|
maxW: '2xl',
|
|
},
|
|
},
|
|
xl: {
|
|
content: {
|
|
maxW: '4xl',
|
|
},
|
|
},
|
|
full: {
|
|
content: {
|
|
maxW: '100vw',
|
|
h: '100dvh',
|
|
},
|
|
},
|
|
},
|
|
placement: {
|
|
start: {
|
|
positioner: {
|
|
justifyContent: 'flex-start',
|
|
},
|
|
content: {
|
|
_open: {
|
|
animationName: {
|
|
base: 'slide-from-left-full, fade-in',
|
|
_rtl: 'slide-from-right-full, fade-in',
|
|
},
|
|
},
|
|
_closed: {
|
|
animationName: {
|
|
base: 'slide-to-left-full, fade-out',
|
|
_rtl: 'slide-to-right-full, fade-out',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
end: {
|
|
positioner: {
|
|
justifyContent: 'flex-end',
|
|
},
|
|
content: {
|
|
_open: {
|
|
animationName: {
|
|
base: 'slide-from-right-full, fade-in',
|
|
_rtl: 'slide-from-left-full, fade-in',
|
|
},
|
|
},
|
|
_closed: {
|
|
animationName: {
|
|
base: 'slide-to-right-full, fade-out',
|
|
_rtl: 'slide-to-right-full, fade-out',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
top: {
|
|
positioner: {
|
|
alignItems: 'flex-start',
|
|
},
|
|
content: {
|
|
maxW: '100%',
|
|
_open: {
|
|
animationName: 'slide-from-top-full, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-top-full, fade-out',
|
|
},
|
|
},
|
|
},
|
|
bottom: {
|
|
positioner: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
content: {
|
|
maxW: '100%',
|
|
_open: {
|
|
animationName: 'slide-from-bottom-full, fade-in',
|
|
},
|
|
_closed: {
|
|
animationName: 'slide-to-bottom-full, fade-out',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
contained: {
|
|
true: {
|
|
positioner: {
|
|
padding: '4',
|
|
},
|
|
content: {
|
|
borderRadius: 'l3',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'xs',
|
|
placement: 'end',
|
|
},
|
|
},
|
|
editable: {
|
|
slots: [
|
|
'root',
|
|
'area',
|
|
'label',
|
|
'preview',
|
|
'input',
|
|
'editTrigger',
|
|
'submitTrigger',
|
|
'cancelTrigger',
|
|
'control',
|
|
'textarea',
|
|
],
|
|
className: 'chakra-editable',
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
gap: '1.5',
|
|
width: 'full',
|
|
},
|
|
preview: {
|
|
fontSize: 'inherit',
|
|
fontWeight: 'inherit',
|
|
textAlign: 'inherit',
|
|
bg: 'transparent',
|
|
borderRadius: 'l2',
|
|
py: '1',
|
|
px: '1',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
transitionProperty: 'common',
|
|
transitionDuration: 'normal',
|
|
cursor: 'text',
|
|
_hover: {
|
|
bg: 'bg.muted',
|
|
},
|
|
_disabled: {
|
|
userSelect: 'none',
|
|
},
|
|
},
|
|
input: {
|
|
fontSize: 'inherit',
|
|
fontWeight: 'inherit',
|
|
textAlign: 'inherit',
|
|
bg: 'transparent',
|
|
borderRadius: 'l2',
|
|
outline: '0',
|
|
py: '1',
|
|
px: '1',
|
|
transitionProperty: 'common',
|
|
transitionDuration: 'normal',
|
|
width: 'full',
|
|
focusVisibleRing: 'inside',
|
|
focusRingWidth: '2px',
|
|
_placeholder: {
|
|
opacity: 0.6,
|
|
},
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '1.5',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
preview: {
|
|
minH: '8',
|
|
},
|
|
input: {
|
|
minH: '8',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
preview: {
|
|
minH: '9',
|
|
},
|
|
input: {
|
|
minH: '9',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
textStyle: 'md',
|
|
},
|
|
preview: {
|
|
minH: '10',
|
|
},
|
|
input: {
|
|
minH: '10',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
emptyState: {
|
|
slots: ['root', 'content', 'indicator', 'title', 'description'],
|
|
className: 'chakra-empty-state',
|
|
base: {
|
|
root: {
|
|
width: 'full',
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
indicator: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'fg.subtle',
|
|
_icon: {
|
|
boxSize: '1em',
|
|
},
|
|
},
|
|
title: {
|
|
fontWeight: 'semibold',
|
|
},
|
|
description: {
|
|
textStyle: 'sm',
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
px: '4',
|
|
py: '6',
|
|
},
|
|
title: {
|
|
textStyle: 'md',
|
|
},
|
|
content: {
|
|
gap: '4',
|
|
},
|
|
indicator: {
|
|
textStyle: '2xl',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
px: '8',
|
|
py: '12',
|
|
},
|
|
title: {
|
|
textStyle: 'lg',
|
|
},
|
|
content: {
|
|
gap: '6',
|
|
},
|
|
indicator: {
|
|
textStyle: '4xl',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
px: '12',
|
|
py: '16',
|
|
},
|
|
title: {
|
|
textStyle: 'xl',
|
|
},
|
|
content: {
|
|
gap: '8',
|
|
},
|
|
indicator: {
|
|
textStyle: '6xl',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
field: {
|
|
className: 'chakra-field',
|
|
slots: [
|
|
'root',
|
|
'errorText',
|
|
'helperText',
|
|
'input',
|
|
'label',
|
|
'select',
|
|
'textarea',
|
|
'requiredIndicator',
|
|
'requiredIndicator',
|
|
],
|
|
base: {
|
|
requiredIndicator: {
|
|
color: 'fg.error',
|
|
lineHeight: '1',
|
|
},
|
|
root: {
|
|
display: 'flex',
|
|
width: '100%',
|
|
position: 'relative',
|
|
gap: '1.5',
|
|
},
|
|
label: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
textAlign: 'start',
|
|
textStyle: 'sm',
|
|
fontWeight: 'medium',
|
|
gap: '1',
|
|
userSelect: 'none',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
errorText: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
fontWeight: 'medium',
|
|
gap: '1',
|
|
color: 'fg.error',
|
|
textStyle: 'xs',
|
|
},
|
|
helperText: {
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
vertical: {
|
|
root: {
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
},
|
|
},
|
|
horizontal: {
|
|
root: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
label: {
|
|
flex: '0 0 var(--field-label-width, 80px)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
orientation: 'vertical',
|
|
},
|
|
},
|
|
fieldset: {
|
|
className: 'fieldset',
|
|
slots: ['root', 'errorText', 'helperText', 'legend', 'content'],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: 'full',
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: 'full',
|
|
},
|
|
legend: {
|
|
color: 'fg',
|
|
fontWeight: 'medium',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
helperText: {
|
|
color: 'fg.muted',
|
|
textStyle: 'sm',
|
|
},
|
|
errorText: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
color: 'fg.error',
|
|
gap: '2',
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
spaceY: '2',
|
|
},
|
|
content: {
|
|
gap: '1.5',
|
|
},
|
|
legend: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
spaceY: '4',
|
|
},
|
|
content: {
|
|
gap: '4',
|
|
},
|
|
legend: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
spaceY: '6',
|
|
},
|
|
content: {
|
|
gap: '4',
|
|
},
|
|
legend: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
fileUpload: {
|
|
className: 'chakra-file-upload',
|
|
slots: [
|
|
'root',
|
|
'dropzone',
|
|
'item',
|
|
'itemDeleteTrigger',
|
|
'itemGroup',
|
|
'itemName',
|
|
'itemPreview',
|
|
'itemPreviewImage',
|
|
'itemSizeText',
|
|
'label',
|
|
'trigger',
|
|
'clearTrigger',
|
|
'itemContent',
|
|
'dropzoneContent',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '4',
|
|
width: '100%',
|
|
alignItems: 'flex-start',
|
|
},
|
|
label: {
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
},
|
|
dropzone: {
|
|
background: 'bg',
|
|
borderRadius: 'l3',
|
|
borderWidth: '2px',
|
|
borderStyle: 'dashed',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
gap: '4',
|
|
justifyContent: 'center',
|
|
minHeight: '2xs',
|
|
px: '3',
|
|
py: '2',
|
|
transition: 'backgrounds',
|
|
focusVisibleRing: 'outside',
|
|
_hover: {
|
|
bg: 'bg.subtle',
|
|
},
|
|
_dragging: {
|
|
bg: 'colorPalette.subtle',
|
|
borderStyle: 'solid',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
dropzoneContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
gap: '1',
|
|
textStyle: 'sm',
|
|
},
|
|
item: {
|
|
textStyle: 'sm',
|
|
animationName: 'fade-in',
|
|
animationDuration: 'moderate',
|
|
background: 'bg',
|
|
borderRadius: 'l2',
|
|
borderWidth: '1px',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3',
|
|
p: '4',
|
|
},
|
|
itemGroup: {
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '3',
|
|
},
|
|
itemName: {
|
|
color: 'fg',
|
|
fontWeight: 'medium',
|
|
lineClamp: '1',
|
|
},
|
|
itemContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.5',
|
|
flex: '1',
|
|
},
|
|
itemSizeText: {
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
},
|
|
itemDeleteTrigger: {
|
|
alignSelf: 'flex-start',
|
|
},
|
|
itemPreviewImage: {
|
|
width: '10',
|
|
height: '10',
|
|
objectFit: 'scale-down',
|
|
},
|
|
},
|
|
defaultVariants: {},
|
|
},
|
|
hoverCard: {
|
|
className: 'chakra-hover-card',
|
|
slots: ['arrow', 'arrowTip', 'trigger', 'positioner', 'content'],
|
|
base: {
|
|
content: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
textStyle: 'sm',
|
|
'--hovercard-bg': 'colors.bg.panel',
|
|
bg: 'var(--hovercard-bg)',
|
|
boxShadow: 'lg',
|
|
maxWidth: '80',
|
|
borderRadius: 'l3',
|
|
zIndex: 'popover',
|
|
transformOrigin: 'var(--transform-origin)',
|
|
outline: '0',
|
|
_open: {
|
|
animationStyle: 'slide-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'slide-fade-out',
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
arrow: {
|
|
'--arrow-size': 'sizes.3',
|
|
'--arrow-background': 'var(--hovercard-bg)',
|
|
},
|
|
arrowTip: {
|
|
borderTopWidth: '0.5px',
|
|
borderInlineStartWidth: '0.5px',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
content: {
|
|
padding: '3',
|
|
},
|
|
},
|
|
sm: {
|
|
content: {
|
|
padding: '4',
|
|
},
|
|
},
|
|
md: {
|
|
content: {
|
|
padding: '5',
|
|
},
|
|
},
|
|
lg: {
|
|
content: {
|
|
padding: '6',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
list: {
|
|
className: 'chakra-list',
|
|
slots: ['root', 'item', 'indicator'],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--list-gap)',
|
|
'& :where(ul, ol)': {
|
|
marginTop: 'var(--list-gap)',
|
|
},
|
|
},
|
|
item: {
|
|
whiteSpace: 'normal',
|
|
display: 'list-item',
|
|
},
|
|
indicator: {
|
|
marginEnd: '2',
|
|
minHeight: '1lh',
|
|
flexShrink: 0,
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
marker: {
|
|
root: {
|
|
listStyle: 'revert',
|
|
listStylePosition: 'inside',
|
|
},
|
|
item: {
|
|
_marker: {
|
|
color: 'fg.subtle',
|
|
},
|
|
},
|
|
},
|
|
plain: {
|
|
item: {
|
|
alignItems: 'flex-start',
|
|
display: 'inline-flex',
|
|
},
|
|
},
|
|
},
|
|
align: {
|
|
center: {
|
|
item: {
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
start: {
|
|
item: {
|
|
alignItems: 'flex-start',
|
|
},
|
|
},
|
|
end: {
|
|
item: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'marker',
|
|
},
|
|
},
|
|
menu: {
|
|
className: 'chakra-menu',
|
|
slots: [
|
|
'arrow',
|
|
'arrowTip',
|
|
'content',
|
|
'contextTrigger',
|
|
'indicator',
|
|
'item',
|
|
'itemGroup',
|
|
'itemGroupLabel',
|
|
'itemIndicator',
|
|
'itemText',
|
|
'positioner',
|
|
'separator',
|
|
'trigger',
|
|
'triggerItem',
|
|
'itemCommand',
|
|
],
|
|
base: {
|
|
content: {
|
|
outline: 0,
|
|
bg: 'bg.panel',
|
|
boxShadow: 'lg',
|
|
color: 'fg',
|
|
maxHeight: 'var(--available-height)',
|
|
'--menu-z-index': 'zIndex.dropdown',
|
|
zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
|
|
borderRadius: 'l2',
|
|
overflow: 'hidden',
|
|
overflowY: 'auto',
|
|
_open: {
|
|
animationStyle: 'slide-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'slide-fade-out',
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
item: {
|
|
textDecoration: 'none',
|
|
color: 'fg',
|
|
userSelect: 'none',
|
|
borderRadius: 'l1',
|
|
width: '100%',
|
|
display: 'flex',
|
|
cursor: 'menuitem',
|
|
alignItems: 'center',
|
|
textAlign: 'start',
|
|
position: 'relative',
|
|
flex: '0 0 auto',
|
|
outline: 0,
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
},
|
|
itemText: {
|
|
flex: '1',
|
|
},
|
|
itemGroupLabel: {
|
|
px: '2',
|
|
py: '1.5',
|
|
fontWeight: 'semibold',
|
|
textStyle: 'sm',
|
|
},
|
|
indicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
},
|
|
itemCommand: {
|
|
opacity: '0.6',
|
|
textStyle: 'xs',
|
|
ms: 'auto',
|
|
ps: '4',
|
|
letterSpacing: 'widest',
|
|
},
|
|
separator: {
|
|
height: '1px',
|
|
bg: 'bg.muted',
|
|
my: '1',
|
|
mx: '-1',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
subtle: {
|
|
item: {
|
|
_highlighted: {
|
|
bg: {
|
|
_light: 'bg.muted',
|
|
_dark: 'bg.emphasized',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
item: {
|
|
_highlighted: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
content: {
|
|
minW: '8rem',
|
|
padding: '1',
|
|
},
|
|
item: {
|
|
gap: '1',
|
|
textStyle: 'xs',
|
|
py: '1',
|
|
px: '1.5',
|
|
},
|
|
},
|
|
md: {
|
|
content: {
|
|
minW: '8rem',
|
|
padding: '1.5',
|
|
},
|
|
item: {
|
|
gap: '2',
|
|
textStyle: 'sm',
|
|
py: '1.5',
|
|
px: '2',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'subtle',
|
|
},
|
|
},
|
|
nativeSelect: {
|
|
className: 'chakra-native-select',
|
|
slots: ['root', 'field', 'indicator'],
|
|
base: {
|
|
root: {
|
|
height: 'fit-content',
|
|
display: 'flex',
|
|
width: '100%',
|
|
position: 'relative',
|
|
},
|
|
field: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
appearance: 'none',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
_invalid: {
|
|
borderColor: 'border.error',
|
|
},
|
|
focusVisibleRing: 'inside',
|
|
lineHeight: 'normal',
|
|
'& > option, & > optgroup': {
|
|
bg: 'inherit',
|
|
},
|
|
},
|
|
indicator: {
|
|
position: 'absolute',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
pointerEvents: 'none',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
height: '100%',
|
|
color: 'fg.muted',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
_invalid: {
|
|
color: 'fg.error',
|
|
},
|
|
_icon: {
|
|
width: '1em',
|
|
height: '1em',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
field: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_expanded: {
|
|
borderColor: 'border.emphasized',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
field: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
plain: {
|
|
field: {
|
|
bg: 'transparent',
|
|
color: 'fg',
|
|
focusRingWidth: '2px',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
field: {
|
|
textStyle: 'xs',
|
|
ps: '2',
|
|
pe: '6',
|
|
height: '6',
|
|
},
|
|
indicator: {
|
|
textStyle: 'sm',
|
|
insetEnd: '1.5',
|
|
},
|
|
},
|
|
sm: {
|
|
field: {
|
|
textStyle: 'sm',
|
|
ps: '2.5',
|
|
pe: '8',
|
|
height: '8',
|
|
},
|
|
indicator: {
|
|
textStyle: 'md',
|
|
insetEnd: '2',
|
|
},
|
|
},
|
|
md: {
|
|
field: {
|
|
textStyle: 'sm',
|
|
ps: '3',
|
|
pe: '8',
|
|
height: '10',
|
|
},
|
|
indicator: {
|
|
textStyle: 'lg',
|
|
insetEnd: '2',
|
|
},
|
|
},
|
|
lg: {
|
|
field: {
|
|
textStyle: 'md',
|
|
ps: '4',
|
|
pe: '8',
|
|
height: '11',
|
|
},
|
|
indicator: {
|
|
textStyle: 'xl',
|
|
insetEnd: '3',
|
|
},
|
|
},
|
|
xl: {
|
|
field: {
|
|
textStyle: 'md',
|
|
ps: '4.5',
|
|
pe: '10',
|
|
height: '12',
|
|
},
|
|
indicator: {
|
|
textStyle: 'xl',
|
|
insetEnd: '3',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
numberInput: {
|
|
className: 'chakra-number-input',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'input',
|
|
'control',
|
|
'valueText',
|
|
'incrementTrigger',
|
|
'decrementTrigger',
|
|
'scrubber',
|
|
],
|
|
base: {
|
|
root: {
|
|
position: 'relative',
|
|
zIndex: '0',
|
|
isolation: 'isolate',
|
|
},
|
|
input: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'none',
|
|
textAlign: 'start',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
height: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'--error-color': 'colors.border.error',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
verticalAlign: 'top',
|
|
pe: 'calc(var(--stepper-width) + 0.5rem)',
|
|
},
|
|
control: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'absolute',
|
|
top: '0',
|
|
insetEnd: '0px',
|
|
margin: '1px',
|
|
width: 'var(--stepper-width)',
|
|
height: 'calc(100% - 2px)',
|
|
zIndex: '1',
|
|
borderStartWidth: '1px',
|
|
divideY: '1px',
|
|
},
|
|
incrementTrigger: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flex: '1',
|
|
userSelect: 'none',
|
|
cursor: 'button',
|
|
lineHeight: '1',
|
|
color: 'fg.muted',
|
|
'--stepper-base-radius': 'radii.l1',
|
|
'--stepper-radius': 'calc(var(--stepper-base-radius) + 1px)',
|
|
_icon: {
|
|
boxSize: '1em',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
_hover: {
|
|
bg: 'bg.muted',
|
|
},
|
|
_active: {
|
|
bg: 'bg.emphasized',
|
|
},
|
|
borderTopEndRadius: 'var(--stepper-radius)',
|
|
},
|
|
decrementTrigger: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flex: '1',
|
|
userSelect: 'none',
|
|
cursor: 'button',
|
|
lineHeight: '1',
|
|
color: 'fg.muted',
|
|
'--stepper-base-radius': 'radii.l1',
|
|
'--stepper-radius': 'calc(var(--stepper-base-radius) + 1px)',
|
|
_icon: {
|
|
boxSize: '1em',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
_hover: {
|
|
bg: 'bg.muted',
|
|
},
|
|
_active: {
|
|
bg: 'bg.emphasized',
|
|
},
|
|
borderBottomEndRadius: 'var(--stepper-radius)',
|
|
},
|
|
valueText: {
|
|
fontWeight: 'medium',
|
|
fontFeatureSettings: 'pnum',
|
|
fontVariantNumeric: 'proportional-nums',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
input: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
control: {
|
|
fontSize: '2xs',
|
|
'--stepper-width': 'sizes.4',
|
|
},
|
|
},
|
|
sm: {
|
|
input: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
control: {
|
|
fontSize: 'xs',
|
|
'--stepper-width': 'sizes.5',
|
|
},
|
|
},
|
|
md: {
|
|
input: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
control: {
|
|
fontSize: 'sm',
|
|
'--stepper-width': 'sizes.6',
|
|
},
|
|
},
|
|
lg: {
|
|
input: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
control: {
|
|
fontSize: 'sm',
|
|
'--stepper-width': 'sizes.6',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
input: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
},
|
|
subtle: {
|
|
input: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
},
|
|
flushed: {
|
|
input: {
|
|
bg: 'transparent',
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'border',
|
|
borderRadius: '0',
|
|
px: '0',
|
|
_focusVisible: {
|
|
borderColor: 'var(--focus-color)',
|
|
boxShadow: '0px 1px 0px 0px var(--focus-color)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
pinInput: {
|
|
className: 'chakra-pin-input',
|
|
slots: ['root', 'label', 'input', 'control'],
|
|
base: {
|
|
input: {
|
|
width: 'var(--input-height)',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'none',
|
|
textAlign: 'center',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
height: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'--error-color': 'colors.border.error',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
input: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.7',
|
|
},
|
|
},
|
|
xs: {
|
|
input: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
},
|
|
sm: {
|
|
input: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
},
|
|
md: {
|
|
input: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
},
|
|
lg: {
|
|
input: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
},
|
|
xl: {
|
|
input: {
|
|
textStyle: 'md',
|
|
px: '4.5',
|
|
'--input-height': 'sizes.12',
|
|
},
|
|
},
|
|
'2xl': {
|
|
input: {
|
|
textStyle: 'lg',
|
|
px: '5',
|
|
'--input-height': 'sizes.16',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
input: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
},
|
|
subtle: {
|
|
input: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
},
|
|
flushed: {
|
|
input: {
|
|
bg: 'transparent',
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'border',
|
|
borderRadius: '0',
|
|
px: '0',
|
|
_focusVisible: {
|
|
borderColor: 'var(--focus-color)',
|
|
boxShadow: '0px 1px 0px 0px var(--focus-color)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
popover: {
|
|
className: 'chakra-popover',
|
|
slots: [
|
|
'arrow',
|
|
'arrowTip',
|
|
'anchor',
|
|
'trigger',
|
|
'indicator',
|
|
'positioner',
|
|
'content',
|
|
'title',
|
|
'description',
|
|
'closeTrigger',
|
|
'header',
|
|
'body',
|
|
'footer',
|
|
],
|
|
base: {
|
|
content: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
textStyle: 'sm',
|
|
'--popover-bg': 'colors.bg.panel',
|
|
bg: 'var(--popover-bg)',
|
|
boxShadow: 'lg',
|
|
'--popover-size': 'sizes.xs',
|
|
'--popover-mobile-size': 'calc(100dvw - 1rem)',
|
|
width: {
|
|
base: 'min(var(--popover-mobile-size), var(--popover-size))',
|
|
sm: 'var(--popover-size)',
|
|
},
|
|
borderRadius: 'l3',
|
|
'--popover-z-index': 'zIndex.popover',
|
|
zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
|
|
outline: '0',
|
|
transformOrigin: 'var(--transform-origin)',
|
|
_open: {
|
|
animationStyle: 'scale-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'scale-fade-out',
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
header: {
|
|
paddingInline: 'var(--popover-padding)',
|
|
paddingTop: 'var(--popover-padding)',
|
|
},
|
|
body: {
|
|
padding: 'var(--popover-padding)',
|
|
flex: '1',
|
|
},
|
|
footer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
paddingInline: 'var(--popover-padding)',
|
|
paddingBottom: 'var(--popover-padding)',
|
|
},
|
|
arrow: {
|
|
'--arrow-size': 'sizes.3',
|
|
'--arrow-background': 'var(--popover-bg)',
|
|
},
|
|
arrowTip: {
|
|
borderTopWidth: '1px',
|
|
borderInlineStartWidth: '1px',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
content: {
|
|
'--popover-padding': 'spacing.3',
|
|
},
|
|
},
|
|
sm: {
|
|
content: {
|
|
'--popover-padding': 'spacing.4',
|
|
},
|
|
},
|
|
md: {
|
|
content: {
|
|
'--popover-padding': 'spacing.5',
|
|
},
|
|
},
|
|
lg: {
|
|
content: {
|
|
'--popover-padding': 'spacing.6',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
progress: {
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'track',
|
|
'range',
|
|
'valueText',
|
|
'view',
|
|
'circle',
|
|
'circleTrack',
|
|
'circleRange',
|
|
],
|
|
className: 'chakra-progress',
|
|
base: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
position: 'relative',
|
|
},
|
|
track: {
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
},
|
|
range: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transitionProperty: 'width, height',
|
|
transitionDuration: 'slow',
|
|
height: '100%',
|
|
bgColor: 'var(--track-color)',
|
|
_indeterminate: {
|
|
'--animate-from-x': '-40%',
|
|
'--animate-to-x': '100%',
|
|
position: 'absolute',
|
|
willChange: 'left',
|
|
minWidth: '50%',
|
|
animation: 'position 1s ease infinite normal none running',
|
|
backgroundImage:
|
|
'linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)',
|
|
},
|
|
},
|
|
label: {
|
|
display: 'inline-flex',
|
|
fontWeight: 'medium',
|
|
alignItems: 'center',
|
|
gap: '1',
|
|
},
|
|
valueText: {
|
|
textStyle: 'xs',
|
|
lineHeight: '1',
|
|
fontWeight: 'medium',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
track: {
|
|
shadow: 'inset',
|
|
bgColor: 'bg.muted',
|
|
},
|
|
range: {
|
|
bgColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
subtle: {
|
|
track: {
|
|
bgColor: 'colorPalette.muted',
|
|
},
|
|
range: {
|
|
bgColor: 'colorPalette.solid/72',
|
|
},
|
|
},
|
|
},
|
|
shape: {
|
|
square: {},
|
|
rounded: {
|
|
track: {
|
|
borderRadius: 'l1',
|
|
},
|
|
},
|
|
full: {
|
|
track: {
|
|
borderRadius: 'full',
|
|
},
|
|
},
|
|
},
|
|
striped: {
|
|
true: {
|
|
range: {
|
|
backgroundImage:
|
|
'linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)',
|
|
backgroundSize: 'var(--stripe-size) var(--stripe-size)',
|
|
'--stripe-size': '1rem',
|
|
'--stripe-color': {
|
|
_light: 'rgba(255, 255, 255, 0.3)',
|
|
_dark: 'rgba(0, 0, 0, 0.3)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
animated: {
|
|
true: {
|
|
range: {
|
|
'--animate-from': 'var(--stripe-size)',
|
|
animation: 'bg-position 1s linear infinite',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
track: {
|
|
h: '1.5',
|
|
},
|
|
},
|
|
sm: {
|
|
track: {
|
|
h: '2',
|
|
},
|
|
},
|
|
md: {
|
|
track: {
|
|
h: '2.5',
|
|
},
|
|
},
|
|
lg: {
|
|
track: {
|
|
h: '3',
|
|
},
|
|
},
|
|
xl: {
|
|
track: {
|
|
h: '4',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'outline',
|
|
size: 'md',
|
|
shape: 'rounded',
|
|
},
|
|
},
|
|
progressCircle: {
|
|
className: 'chakra-progress-circle',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'track',
|
|
'range',
|
|
'valueText',
|
|
'view',
|
|
'circle',
|
|
'circleTrack',
|
|
'circleRange',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
textStyle: 'sm',
|
|
position: 'relative',
|
|
},
|
|
circle: {
|
|
_indeterminate: {
|
|
animation: 'spin 2s linear infinite',
|
|
},
|
|
},
|
|
circleTrack: {
|
|
'--track-color': 'colors.colorPalette.muted',
|
|
stroke: 'var(--track-color)',
|
|
},
|
|
circleRange: {
|
|
stroke: 'colorPalette.solid',
|
|
transitionProperty: 'stroke-dasharray',
|
|
transitionDuration: '0.6s',
|
|
_indeterminate: {
|
|
animation: 'circular-progress 1.5s linear infinite',
|
|
},
|
|
},
|
|
label: {
|
|
display: 'inline-flex',
|
|
},
|
|
valueText: {
|
|
lineHeight: '1',
|
|
fontWeight: 'medium',
|
|
letterSpacing: 'tight',
|
|
fontVariantNumeric: 'tabular-nums',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
circle: {
|
|
'--size': '24px',
|
|
'--thickness': '4px',
|
|
},
|
|
valueText: {
|
|
textStyle: '2xs',
|
|
},
|
|
},
|
|
sm: {
|
|
circle: {
|
|
'--size': '32px',
|
|
'--thickness': '5px',
|
|
},
|
|
valueText: {
|
|
textStyle: '2xs',
|
|
},
|
|
},
|
|
md: {
|
|
circle: {
|
|
'--size': '40px',
|
|
'--thickness': '6px',
|
|
},
|
|
valueText: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
lg: {
|
|
circle: {
|
|
'--size': '48px',
|
|
'--thickness': '7px',
|
|
},
|
|
valueText: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
xl: {
|
|
circle: {
|
|
'--size': '64px',
|
|
'--thickness': '8px',
|
|
},
|
|
valueText: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
radioCard: {
|
|
className: 'chakra-radio-card',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'item',
|
|
'itemText',
|
|
'itemControl',
|
|
'indicator',
|
|
'itemAddon',
|
|
'itemIndicator',
|
|
'itemContent',
|
|
'itemDescription',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1.5',
|
|
isolation: 'isolate',
|
|
},
|
|
item: {
|
|
flex: '1',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
userSelect: 'none',
|
|
position: 'relative',
|
|
borderRadius: 'l2',
|
|
_focus: {
|
|
bg: 'colorPalette.muted/20',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.8',
|
|
borderColor: 'border.disabled',
|
|
},
|
|
_checked: {
|
|
zIndex: '1',
|
|
},
|
|
},
|
|
label: {
|
|
display: 'inline-flex',
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
itemText: {
|
|
fontWeight: 'medium',
|
|
},
|
|
itemDescription: {
|
|
opacity: '0.64',
|
|
textStyle: 'sm',
|
|
},
|
|
itemControl: {
|
|
display: 'inline-flex',
|
|
flex: '1',
|
|
pos: 'relative',
|
|
rounded: 'inherit',
|
|
justifyContent: 'var(--radio-card-justify)',
|
|
alignItems: 'var(--radio-card-align)',
|
|
_disabled: {
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
verticalAlign: 'top',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'full',
|
|
cursor: 'radio',
|
|
_focusVisible: {
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
outlineOffset: '2px',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'red.500',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
cursor: 'disabled',
|
|
},
|
|
'& .dot': {
|
|
height: '100%',
|
|
width: '100%',
|
|
borderRadius: 'full',
|
|
bg: 'currentColor',
|
|
scale: '0.4',
|
|
},
|
|
},
|
|
itemAddon: {
|
|
roundedBottom: 'inherit',
|
|
_disabled: {
|
|
color: 'fg.muted',
|
|
},
|
|
},
|
|
itemContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: '1',
|
|
gap: '1',
|
|
justifyContent: 'var(--radio-card-justify)',
|
|
alignItems: 'var(--radio-card-align)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
item: {
|
|
textStyle: 'sm',
|
|
},
|
|
itemControl: {
|
|
padding: '3',
|
|
gap: '1.5',
|
|
},
|
|
itemAddon: {
|
|
px: '3',
|
|
py: '1.5',
|
|
borderTopWidth: '1px',
|
|
},
|
|
itemIndicator: {
|
|
boxSize: '4',
|
|
},
|
|
},
|
|
md: {
|
|
item: {
|
|
textStyle: 'sm',
|
|
},
|
|
itemControl: {
|
|
padding: '4',
|
|
gap: '2.5',
|
|
},
|
|
itemAddon: {
|
|
px: '4',
|
|
py: '2',
|
|
borderTopWidth: '1px',
|
|
},
|
|
itemIndicator: {
|
|
boxSize: '5',
|
|
},
|
|
},
|
|
lg: {
|
|
item: {
|
|
textStyle: 'md',
|
|
},
|
|
itemControl: {
|
|
padding: '4',
|
|
gap: '3.5',
|
|
},
|
|
itemAddon: {
|
|
px: '4',
|
|
py: '2',
|
|
borderTopWidth: '1px',
|
|
},
|
|
itemIndicator: {
|
|
boxSize: '6',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
surface: {
|
|
item: {
|
|
borderWidth: '1px',
|
|
_checked: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
item: {
|
|
bg: 'bg.muted',
|
|
},
|
|
itemControl: {
|
|
_checked: {
|
|
bg: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
borderWidth: '1px',
|
|
borderColor: 'inherit',
|
|
_checked: {
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
'& .dot': {
|
|
scale: '0.6',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
item: {
|
|
borderWidth: '1px',
|
|
_checked: {
|
|
boxShadow: '0 0 0 1px var(--shadow-color)',
|
|
boxShadowColor: 'colorPalette.solid',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
item: {
|
|
borderWidth: '1px',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
itemIndicator: {
|
|
bg: 'bg',
|
|
borderWidth: '1px',
|
|
borderColor: 'inherit',
|
|
_checked: {
|
|
color: 'colorPalette.solid',
|
|
borderColor: 'currentcolor',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
justify: {
|
|
start: {
|
|
item: {
|
|
'--radio-card-justify': 'flex-start',
|
|
},
|
|
},
|
|
end: {
|
|
item: {
|
|
'--radio-card-justify': 'flex-end',
|
|
},
|
|
},
|
|
center: {
|
|
item: {
|
|
'--radio-card-justify': 'center',
|
|
},
|
|
},
|
|
},
|
|
align: {
|
|
start: {
|
|
item: {
|
|
'--radio-card-align': 'flex-start',
|
|
},
|
|
itemControl: {
|
|
textAlign: 'start',
|
|
},
|
|
},
|
|
end: {
|
|
item: {
|
|
'--radio-card-align': 'flex-end',
|
|
},
|
|
itemControl: {
|
|
textAlign: 'end',
|
|
},
|
|
},
|
|
center: {
|
|
item: {
|
|
'--radio-card-align': 'center',
|
|
},
|
|
itemControl: {
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
},
|
|
orientation: {
|
|
vertical: {
|
|
itemControl: {
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
horizontal: {
|
|
itemControl: {
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
align: 'start',
|
|
orientation: 'horizontal',
|
|
},
|
|
},
|
|
radioGroup: {
|
|
className: 'chakra-radio-group',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'item',
|
|
'itemText',
|
|
'itemControl',
|
|
'indicator',
|
|
'itemAddon',
|
|
'itemIndicator',
|
|
],
|
|
base: {
|
|
item: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
fontWeight: 'medium',
|
|
_disabled: {
|
|
cursor: 'disabled',
|
|
},
|
|
},
|
|
itemControl: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
verticalAlign: 'top',
|
|
color: 'white',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'full',
|
|
cursor: 'radio',
|
|
_focusVisible: {
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
outlineOffset: '2px',
|
|
},
|
|
_invalid: {
|
|
colorPalette: 'red',
|
|
borderColor: 'red.500',
|
|
},
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
cursor: 'disabled',
|
|
},
|
|
'& .dot': {
|
|
height: '100%',
|
|
width: '100%',
|
|
borderRadius: 'full',
|
|
bg: 'currentColor',
|
|
scale: '0.4',
|
|
},
|
|
},
|
|
label: {
|
|
userSelect: 'none',
|
|
textStyle: 'sm',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
itemControl: {
|
|
borderWidth: '1px',
|
|
borderColor: 'inherit',
|
|
_checked: {
|
|
color: 'colorPalette.fg',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
'& .dot': {
|
|
scale: '0.6',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
itemControl: {
|
|
borderWidth: '1px',
|
|
bg: 'colorPalette.muted',
|
|
borderColor: 'colorPalette.muted',
|
|
color: 'transparent',
|
|
_checked: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
itemControl: {
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
borderColor: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
item: {
|
|
textStyle: 'xs',
|
|
gap: '1.5',
|
|
},
|
|
itemControl: {
|
|
boxSize: '3',
|
|
},
|
|
},
|
|
sm: {
|
|
item: {
|
|
textStyle: 'sm',
|
|
gap: '2',
|
|
},
|
|
itemControl: {
|
|
boxSize: '4',
|
|
},
|
|
},
|
|
md: {
|
|
item: {
|
|
textStyle: 'sm',
|
|
gap: '2.5',
|
|
},
|
|
itemControl: {
|
|
boxSize: '5',
|
|
},
|
|
},
|
|
lg: {
|
|
item: {
|
|
textStyle: 'md',
|
|
gap: '3',
|
|
},
|
|
itemControl: {
|
|
boxSize: '6',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'solid',
|
|
},
|
|
},
|
|
ratingGroup: {
|
|
className: 'chakra-rating-group',
|
|
slots: ['root', 'label', 'item', 'control', 'itemIndicator'],
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
},
|
|
item: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
},
|
|
itemIndicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '1em',
|
|
height: '1em',
|
|
position: 'relative',
|
|
_icon: {
|
|
stroke: 'currentColor',
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'inline-block',
|
|
flexShrink: 0,
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
},
|
|
'& [data-bg]': {
|
|
color: 'bg.emphasized',
|
|
},
|
|
'& [data-fg]': {
|
|
color: 'transparent',
|
|
},
|
|
'&[data-highlighted]:not([data-half])': {
|
|
'& [data-fg]': {
|
|
color: 'colorPalette.solid',
|
|
},
|
|
},
|
|
'&[data-half]': {
|
|
'& [data-fg]': {
|
|
color: 'colorPalette.solid',
|
|
clipPath: 'inset(0 50% 0 0)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
item: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
sm: {
|
|
item: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
md: {
|
|
item: {
|
|
textStyle: 'xl',
|
|
},
|
|
},
|
|
lg: {
|
|
item: {
|
|
textStyle: '2xl',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
segmentGroup: {
|
|
className: 'chakra-segment-group',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'item',
|
|
'itemText',
|
|
'itemControl',
|
|
'indicator',
|
|
],
|
|
base: {
|
|
root: {
|
|
'--segment-radius': 'radii.l2',
|
|
borderRadius: 'l2',
|
|
display: 'inline-flex',
|
|
boxShadow: 'inset',
|
|
minW: 'max-content',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
isolation: 'isolate',
|
|
bg: 'bg.muted',
|
|
},
|
|
item: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
userSelect: 'none',
|
|
fontSize: 'sm',
|
|
position: 'relative',
|
|
color: 'fg',
|
|
borderRadius: 'var(--segment-radius)',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
'&:has(input:focus-visible)': {
|
|
focusRing: 'outside',
|
|
},
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
insetInlineStart: 0,
|
|
insetBlock: '1.5',
|
|
bg: 'border',
|
|
width: '1px',
|
|
transition: 'opacity 0.2s',
|
|
},
|
|
'& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type':
|
|
{
|
|
_before: {
|
|
opacity: '0',
|
|
},
|
|
},
|
|
'&[data-state=checked][data-ssr]': {
|
|
shadow: 'sm',
|
|
bg: 'bg',
|
|
borderRadius: 'var(--segment-radius)',
|
|
},
|
|
},
|
|
indicator: {
|
|
shadow: 'sm',
|
|
pos: 'absolute',
|
|
bg: {
|
|
_light: 'bg',
|
|
_dark: 'bg.emphasized',
|
|
},
|
|
width: 'var(--width)',
|
|
height: 'var(--height)',
|
|
top: 'var(--top)',
|
|
left: 'var(--left)',
|
|
zIndex: -1,
|
|
borderRadius: 'var(--segment-radius)',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
xs: {
|
|
root: {
|
|
height: '6',
|
|
},
|
|
item: {
|
|
textStyle: 'xs',
|
|
px: '3',
|
|
gap: '1',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
height: '8',
|
|
},
|
|
item: {
|
|
textStyle: 'sm',
|
|
px: '4',
|
|
gap: '2',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
height: '10',
|
|
},
|
|
item: {
|
|
textStyle: 'sm',
|
|
px: '4',
|
|
gap: '2',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
height: '10',
|
|
},
|
|
item: {
|
|
textStyle: 'md',
|
|
px: '5',
|
|
gap: '3',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
select: {
|
|
className: 'chakra-select',
|
|
slots: [
|
|
'label',
|
|
'positioner',
|
|
'trigger',
|
|
'indicator',
|
|
'clearTrigger',
|
|
'item',
|
|
'itemText',
|
|
'itemIndicator',
|
|
'itemGroup',
|
|
'itemGroupLabel',
|
|
'list',
|
|
'content',
|
|
'root',
|
|
'control',
|
|
'valueText',
|
|
'indicatorGroup',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1.5',
|
|
width: 'full',
|
|
},
|
|
trigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
width: 'full',
|
|
minH: 'var(--select-trigger-height)',
|
|
px: 'var(--select-trigger-padding-x)',
|
|
borderRadius: 'l2',
|
|
userSelect: 'none',
|
|
textAlign: 'start',
|
|
focusVisibleRing: 'inside',
|
|
_placeholderShown: {
|
|
color: 'fg.muted',
|
|
},
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
_invalid: {
|
|
borderColor: 'border.error',
|
|
},
|
|
},
|
|
indicatorGroup: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '1',
|
|
pos: 'absolute',
|
|
right: '0',
|
|
top: '0',
|
|
bottom: '0',
|
|
px: 'var(--select-trigger-padding-x)',
|
|
pointerEvents: 'none',
|
|
},
|
|
indicator: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: {
|
|
base: 'fg.muted',
|
|
_disabled: 'fg.subtle',
|
|
_invalid: 'fg.error',
|
|
},
|
|
},
|
|
content: {
|
|
background: 'bg.panel',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
zIndex: 'dropdown',
|
|
borderRadius: 'l2',
|
|
outline: 0,
|
|
maxH: '96',
|
|
overflowY: 'auto',
|
|
boxShadow: 'md',
|
|
_open: {
|
|
animationStyle: 'slide-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'slide-fade-out',
|
|
animationDuration: 'fastest',
|
|
},
|
|
},
|
|
item: {
|
|
position: 'relative',
|
|
userSelect: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
cursor: 'option',
|
|
justifyContent: 'space-between',
|
|
flex: '1',
|
|
textAlign: 'start',
|
|
borderRadius: 'l1',
|
|
_highlighted: {
|
|
bg: {
|
|
_light: 'bg.muted',
|
|
_dark: 'bg.emphasized',
|
|
},
|
|
},
|
|
_disabled: {
|
|
pointerEvents: 'none',
|
|
opacity: '0.5',
|
|
},
|
|
_icon: {
|
|
width: '4',
|
|
height: '4',
|
|
},
|
|
},
|
|
control: {
|
|
pos: 'relative',
|
|
},
|
|
itemText: {
|
|
flex: '1',
|
|
},
|
|
itemGroup: {
|
|
_first: {
|
|
mt: '0',
|
|
},
|
|
},
|
|
itemGroupLabel: {
|
|
py: '1',
|
|
fontWeight: 'medium',
|
|
},
|
|
label: {
|
|
fontWeight: 'medium',
|
|
userSelect: 'none',
|
|
textStyle: 'sm',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
},
|
|
valueText: {
|
|
lineClamp: '1',
|
|
maxW: '80%',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
trigger: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
_expanded: {
|
|
borderColor: 'border.emphasized',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
trigger: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
root: {
|
|
'--select-trigger-height': 'sizes.8',
|
|
'--select-trigger-padding-x': 'spacing.2',
|
|
},
|
|
content: {
|
|
p: '1',
|
|
gap: '1',
|
|
textStyle: 'xs',
|
|
},
|
|
trigger: {
|
|
textStyle: 'xs',
|
|
gap: '1',
|
|
},
|
|
item: {
|
|
py: '1',
|
|
px: '2',
|
|
},
|
|
itemGroupLabel: {
|
|
py: '1',
|
|
px: '2',
|
|
},
|
|
indicator: {
|
|
_icon: {
|
|
width: '3.5',
|
|
height: '3.5',
|
|
},
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
'--select-trigger-height': 'sizes.9',
|
|
'--select-trigger-padding-x': 'spacing.2.5',
|
|
},
|
|
content: {
|
|
p: '1',
|
|
textStyle: 'sm',
|
|
},
|
|
trigger: {
|
|
textStyle: 'sm',
|
|
gap: '1',
|
|
},
|
|
indicator: {
|
|
_icon: {
|
|
width: '4',
|
|
height: '4',
|
|
},
|
|
},
|
|
item: {
|
|
py: '1',
|
|
px: '1.5',
|
|
},
|
|
itemGroup: {
|
|
mt: '1',
|
|
},
|
|
itemGroupLabel: {
|
|
py: '1',
|
|
px: '1.5',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--select-trigger-height': 'sizes.10',
|
|
'--select-trigger-padding-x': 'spacing.3',
|
|
},
|
|
content: {
|
|
p: '1',
|
|
textStyle: 'sm',
|
|
},
|
|
itemGroup: {
|
|
mt: '1.5',
|
|
},
|
|
item: {
|
|
py: '1.5',
|
|
px: '2',
|
|
},
|
|
itemIndicator: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
itemGroupLabel: {
|
|
py: '1.5',
|
|
px: '2',
|
|
},
|
|
trigger: {
|
|
textStyle: 'sm',
|
|
gap: '2',
|
|
},
|
|
indicator: {
|
|
_icon: {
|
|
width: '4',
|
|
height: '4',
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--select-trigger-height': 'sizes.12',
|
|
'--select-trigger-padding-x': 'spacing.4',
|
|
},
|
|
content: {
|
|
p: '1.5',
|
|
textStyle: 'md',
|
|
},
|
|
itemGroup: {
|
|
mt: '2',
|
|
},
|
|
item: {
|
|
py: '2',
|
|
px: '3',
|
|
},
|
|
itemGroupLabel: {
|
|
py: '2',
|
|
px: '3',
|
|
},
|
|
trigger: {
|
|
textStyle: 'md',
|
|
py: '3',
|
|
gap: '2',
|
|
},
|
|
indicator: {
|
|
_icon: {
|
|
width: '5',
|
|
height: '5',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
slider: {
|
|
className: 'chakra-slider',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'thumb',
|
|
'valueText',
|
|
'track',
|
|
'range',
|
|
'control',
|
|
'markerGroup',
|
|
'marker',
|
|
'draggingIndicator',
|
|
'markerIndicator',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1',
|
|
textStyle: 'sm',
|
|
position: 'relative',
|
|
isolation: 'isolate',
|
|
touchAction: 'none',
|
|
},
|
|
label: {
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
},
|
|
track: {
|
|
overflow: 'hidden',
|
|
borderRadius: 'full',
|
|
flex: '1',
|
|
},
|
|
range: {
|
|
width: 'inherit',
|
|
height: 'inherit',
|
|
_disabled: {
|
|
bg: 'border.emphasized!',
|
|
},
|
|
},
|
|
markerGroup: {
|
|
position: 'absolute!',
|
|
zIndex: '1',
|
|
},
|
|
marker: {
|
|
'--marker-bg': {
|
|
base: 'white',
|
|
_underValue: 'colors.bg',
|
|
},
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'calc(var(--slider-thumb-size) / 2)',
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
},
|
|
markerIndicator: {
|
|
width: 'var(--slider-marker-size)',
|
|
height: 'var(--slider-marker-size)',
|
|
borderRadius: 'full',
|
|
bg: 'var(--marker-bg)',
|
|
},
|
|
thumb: {
|
|
width: 'var(--slider-thumb-size)',
|
|
height: 'var(--slider-thumb-size)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
outline: 0,
|
|
zIndex: '2',
|
|
borderRadius: 'full',
|
|
_focusVisible: {
|
|
ring: '2px',
|
|
ringColor: 'colorPalette.focusRing',
|
|
ringOffset: '2px',
|
|
ringOffsetColor: 'bg',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
'--slider-thumb-size': 'sizes.4',
|
|
'--slider-track-size': 'sizes.1.5',
|
|
'--slider-marker-center': '6px',
|
|
'--slider-marker-size': 'sizes.1',
|
|
'--slider-marker-inset': '3px',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--slider-thumb-size': 'sizes.5',
|
|
'--slider-track-size': 'sizes.2',
|
|
'--slider-marker-center': '8px',
|
|
'--slider-marker-size': 'sizes.1',
|
|
'--slider-marker-inset': '4px',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--slider-thumb-size': 'sizes.6',
|
|
'--slider-track-size': 'sizes.2.5',
|
|
'--slider-marker-center': '9px',
|
|
'--slider-marker-size': 'sizes.1.5',
|
|
'--slider-marker-inset': '5px',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
track: {
|
|
shadow: 'inset',
|
|
bg: 'bg.emphasized/72',
|
|
},
|
|
range: {
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
thumb: {
|
|
borderWidth: '2px',
|
|
borderColor: 'colorPalette.solid',
|
|
bg: 'bg',
|
|
_disabled: {
|
|
bg: 'border.emphasized',
|
|
borderColor: 'border.emphasized',
|
|
},
|
|
},
|
|
},
|
|
solid: {
|
|
track: {
|
|
bg: 'colorPalette.subtle',
|
|
_disabled: {
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
range: {
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
thumb: {
|
|
bg: 'colorPalette.solid',
|
|
_disabled: {
|
|
bg: 'border.emphasized',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
orientation: {
|
|
vertical: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
},
|
|
control: {
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
minWidth: 'var(--slider-thumb-size)',
|
|
'&[data-has-mark-label]': {
|
|
marginEnd: '4',
|
|
},
|
|
},
|
|
track: {
|
|
width: 'var(--slider-track-size)',
|
|
},
|
|
thumb: {
|
|
left: '50%',
|
|
translate: '-50% 0',
|
|
},
|
|
markerGroup: {
|
|
insetStart: 'var(--slider-marker-center)',
|
|
insetBlock: 'var(--slider-marker-inset)',
|
|
},
|
|
marker: {
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
horizontal: {
|
|
control: {
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
minHeight: 'var(--slider-thumb-size)',
|
|
'&[data-has-mark-label]': {
|
|
marginBottom: '4',
|
|
},
|
|
},
|
|
track: {
|
|
height: 'var(--slider-track-size)',
|
|
},
|
|
thumb: {
|
|
top: '50%',
|
|
translate: '0 -50%',
|
|
},
|
|
markerGroup: {
|
|
top: 'var(--slider-marker-center)',
|
|
insetInline: 'var(--slider-marker-inset)',
|
|
},
|
|
marker: {
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
orientation: 'horizontal',
|
|
},
|
|
},
|
|
stat: {
|
|
className: 'chakra-stat',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'helpText',
|
|
'valueText',
|
|
'valueUnit',
|
|
'indicator',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1',
|
|
position: 'relative',
|
|
flex: '1',
|
|
},
|
|
label: {
|
|
display: 'inline-flex',
|
|
gap: '1.5',
|
|
alignItems: 'center',
|
|
color: 'fg.muted',
|
|
textStyle: 'sm',
|
|
},
|
|
helpText: {
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
},
|
|
valueUnit: {
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
fontWeight: 'initial',
|
|
letterSpacing: 'initial',
|
|
},
|
|
valueText: {
|
|
verticalAlign: 'baseline',
|
|
fontWeight: 'semibold',
|
|
letterSpacing: 'tight',
|
|
fontFeatureSettings: 'pnum',
|
|
fontVariantNumeric: 'proportional-nums',
|
|
display: 'inline-flex',
|
|
gap: '1',
|
|
},
|
|
indicator: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginEnd: 1,
|
|
'& :where(svg)': {
|
|
w: '1em',
|
|
h: '1em',
|
|
},
|
|
'&[data-type=up]': {
|
|
color: 'fg.success',
|
|
},
|
|
'&[data-type=down]': {
|
|
color: 'fg.error',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
valueText: {
|
|
textStyle: 'xl',
|
|
},
|
|
},
|
|
md: {
|
|
valueText: {
|
|
textStyle: '2xl',
|
|
},
|
|
},
|
|
lg: {
|
|
valueText: {
|
|
textStyle: '3xl',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
steps: {
|
|
className: 'chakra-steps',
|
|
slots: [
|
|
'root',
|
|
'list',
|
|
'item',
|
|
'trigger',
|
|
'indicator',
|
|
'separator',
|
|
'content',
|
|
'title',
|
|
'description',
|
|
'nextTrigger',
|
|
'prevTrigger',
|
|
'progress',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
width: 'full',
|
|
},
|
|
list: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
'--steps-gutter': 'spacing.3',
|
|
'--steps-thickness': '2px',
|
|
},
|
|
title: {
|
|
fontWeight: 'medium',
|
|
color: 'fg',
|
|
},
|
|
description: {
|
|
color: 'fg.muted',
|
|
},
|
|
separator: {
|
|
bg: 'border',
|
|
flex: '1',
|
|
},
|
|
indicator: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flexShrink: '0',
|
|
borderRadius: 'full',
|
|
fontWeight: 'medium',
|
|
width: 'var(--steps-size)',
|
|
height: 'var(--steps-size)',
|
|
_icon: {
|
|
flexShrink: '0',
|
|
width: 'var(--steps-icon-size)',
|
|
height: 'var(--steps-icon-size)',
|
|
},
|
|
},
|
|
item: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flex: '1 0 0',
|
|
'&:last-of-type': {
|
|
flex: 'initial',
|
|
'& [data-part=separator]': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
trigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3',
|
|
textAlign: 'start',
|
|
focusVisibleRing: 'outside',
|
|
borderRadius: 'l2',
|
|
},
|
|
content: {
|
|
focusVisibleRing: 'outside',
|
|
},
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
vertical: {
|
|
root: {
|
|
flexDirection: 'row',
|
|
height: '100%',
|
|
},
|
|
list: {
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
},
|
|
separator: {
|
|
position: 'absolute',
|
|
width: 'var(--steps-thickness)',
|
|
height: '100%',
|
|
maxHeight:
|
|
'calc(100% - var(--steps-size) - var(--steps-gutter) * 2)',
|
|
top: 'calc(var(--steps-size) + var(--steps-gutter))',
|
|
insetStart: 'calc(var(--steps-size) / 2 - 1px)',
|
|
},
|
|
item: {
|
|
alignItems: 'flex-start',
|
|
},
|
|
},
|
|
horizontal: {
|
|
root: {
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
},
|
|
list: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
separator: {
|
|
width: '100%',
|
|
height: 'var(--steps-thickness)',
|
|
marginX: 'var(--steps-gutter)',
|
|
},
|
|
item: {
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
solid: {
|
|
indicator: {
|
|
_incomplete: {
|
|
borderWidth: 'var(--steps-thickness)',
|
|
},
|
|
_current: {
|
|
bg: 'colorPalette.muted',
|
|
borderWidth: 'var(--steps-thickness)',
|
|
borderColor: 'colorPalette.solid',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
_complete: {
|
|
bg: 'colorPalette.solid',
|
|
borderColor: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
separator: {
|
|
_complete: {
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
indicator: {
|
|
_incomplete: {
|
|
bg: 'bg.muted',
|
|
},
|
|
_current: {
|
|
bg: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
_complete: {
|
|
bg: 'colorPalette.emphasized',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
separator: {
|
|
_complete: {
|
|
bg: 'colorPalette.emphasized',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
root: {
|
|
gap: '2.5',
|
|
},
|
|
list: {
|
|
'--steps-size': 'sizes.6',
|
|
'--steps-icon-size': 'sizes.3.5',
|
|
textStyle: 'xs',
|
|
},
|
|
title: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
gap: '3',
|
|
},
|
|
list: {
|
|
'--steps-size': 'sizes.8',
|
|
'--steps-icon-size': 'sizes.4',
|
|
textStyle: 'xs',
|
|
},
|
|
title: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
gap: '4',
|
|
},
|
|
list: {
|
|
'--steps-size': 'sizes.10',
|
|
'--steps-icon-size': 'sizes.4',
|
|
textStyle: 'sm',
|
|
},
|
|
title: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
gap: '6',
|
|
},
|
|
list: {
|
|
'--steps-size': 'sizes.11',
|
|
'--steps-icon-size': 'sizes.5',
|
|
textStyle: 'md',
|
|
},
|
|
title: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'solid',
|
|
orientation: 'horizontal',
|
|
},
|
|
},
|
|
switch: {
|
|
slots: ['root', 'label', 'control', 'thumb', 'indicator'],
|
|
className: 'chakra-switch',
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
gap: '2.5',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
verticalAlign: 'middle',
|
|
'--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
|
|
'--switch-x': {
|
|
base: 'var(--switch-diff)',
|
|
_rtl: 'calc(var(--switch-diff) * -1)',
|
|
},
|
|
},
|
|
label: {
|
|
lineHeight: '1',
|
|
userSelect: 'none',
|
|
fontSize: 'sm',
|
|
fontWeight: 'medium',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
},
|
|
indicator: {
|
|
position: 'absolute',
|
|
height: 'var(--switch-height)',
|
|
width: 'var(--switch-height)',
|
|
fontSize: 'var(--switch-indicator-font-size)',
|
|
fontWeight: 'medium',
|
|
flexShrink: 0,
|
|
userSelect: 'none',
|
|
display: 'grid',
|
|
placeContent: 'center',
|
|
transition: 'inset-inline-start 0.12s ease',
|
|
insetInlineStart: 'calc(var(--switch-x) - 2px)',
|
|
_checked: {
|
|
insetInlineStart: '2px',
|
|
},
|
|
},
|
|
control: {
|
|
display: 'inline-flex',
|
|
gap: '0.5rem',
|
|
flexShrink: 0,
|
|
justifyContent: 'flex-start',
|
|
cursor: 'switch',
|
|
borderRadius: 'full',
|
|
position: 'relative',
|
|
width: 'var(--switch-width)',
|
|
height: 'var(--switch-height)',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
cursor: 'not-allowed',
|
|
},
|
|
_invalid: {
|
|
outline: '2px solid',
|
|
outlineColor: 'border.error',
|
|
outlineOffset: '2px',
|
|
},
|
|
},
|
|
thumb: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
transitionProperty: 'translate',
|
|
transitionDuration: 'fast',
|
|
borderRadius: 'inherit',
|
|
_checked: {
|
|
translate: 'var(--switch-x) 0',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
control: {
|
|
borderRadius: 'full',
|
|
bg: 'bg.emphasized',
|
|
focusVisibleRing: 'outside',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
},
|
|
thumb: {
|
|
bg: 'white',
|
|
width: 'var(--switch-height)',
|
|
height: 'var(--switch-height)',
|
|
scale: '0.8',
|
|
boxShadow: 'sm',
|
|
_checked: {
|
|
bg: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
},
|
|
raised: {
|
|
control: {
|
|
borderRadius: 'full',
|
|
height: 'calc(var(--switch-height) / 2)',
|
|
bg: 'bg.muted',
|
|
boxShadow: 'inset',
|
|
_checked: {
|
|
bg: 'colorPalette.solid/60',
|
|
},
|
|
},
|
|
thumb: {
|
|
width: 'var(--switch-height)',
|
|
height: 'var(--switch-height)',
|
|
position: 'relative',
|
|
top: 'calc(var(--switch-height) * -0.25)',
|
|
bg: 'white',
|
|
boxShadow: 'xs',
|
|
focusVisibleRing: 'outside',
|
|
_checked: {
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
xs: {
|
|
root: {
|
|
'--switch-width': 'sizes.6',
|
|
'--switch-height': 'sizes.3',
|
|
'--switch-indicator-font-size': 'fontSizes.xs',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
'--switch-width': 'sizes.8',
|
|
'--switch-height': 'sizes.4',
|
|
'--switch-indicator-font-size': 'fontSizes.xs',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--switch-width': 'sizes.10',
|
|
'--switch-height': 'sizes.5',
|
|
'--switch-indicator-font-size': 'fontSizes.sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--switch-width': 'sizes.12',
|
|
'--switch-height': 'sizes.6',
|
|
'--switch-indicator-font-size': 'fontSizes.md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
},
|
|
table: {
|
|
className: 'chakra-table',
|
|
slots: [
|
|
'root',
|
|
'header',
|
|
'body',
|
|
'row',
|
|
'columnHeader',
|
|
'cell',
|
|
'footer',
|
|
'caption',
|
|
],
|
|
base: {
|
|
root: {
|
|
fontVariantNumeric: 'lining-nums tabular-nums',
|
|
borderCollapse: 'collapse',
|
|
width: 'full',
|
|
textAlign: 'start',
|
|
verticalAlign: 'top',
|
|
},
|
|
row: {
|
|
_selected: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
cell: {
|
|
textAlign: 'start',
|
|
alignItems: 'center',
|
|
},
|
|
columnHeader: {
|
|
fontWeight: 'medium',
|
|
textAlign: 'start',
|
|
color: 'fg',
|
|
},
|
|
caption: {
|
|
fontWeight: 'medium',
|
|
textStyle: 'xs',
|
|
},
|
|
footer: {
|
|
fontWeight: 'medium',
|
|
},
|
|
},
|
|
variants: {
|
|
interactive: {
|
|
true: {
|
|
body: {
|
|
'& tr': {
|
|
_hover: {
|
|
bg: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
stickyHeader: {
|
|
true: {
|
|
header: {
|
|
'& :where(tr)': {
|
|
top: 'var(--table-sticky-offset, 0)',
|
|
position: 'sticky',
|
|
zIndex: 1,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
striped: {
|
|
true: {
|
|
row: {
|
|
'&:nth-of-type(odd) td': {
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
showColumnBorder: {
|
|
true: {
|
|
columnHeader: {
|
|
'&:not(:last-of-type)': {
|
|
borderInlineEndWidth: '1px',
|
|
},
|
|
},
|
|
cell: {
|
|
'&:not(:last-of-type)': {
|
|
borderInlineEndWidth: '1px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
line: {
|
|
columnHeader: {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
cell: {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
row: {
|
|
bg: 'bg',
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
boxShadow: '0 0 0 1px {colors.border}',
|
|
overflow: 'hidden',
|
|
},
|
|
columnHeader: {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
header: {
|
|
bg: 'bg.muted',
|
|
},
|
|
row: {
|
|
'&:not(:last-of-type)': {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
},
|
|
footer: {
|
|
borderTopWidth: '1px',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
columnHeader: {
|
|
px: '2',
|
|
py: '2',
|
|
},
|
|
cell: {
|
|
px: '2',
|
|
py: '2',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
columnHeader: {
|
|
px: '3',
|
|
py: '3',
|
|
},
|
|
cell: {
|
|
px: '3',
|
|
py: '3',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
textStyle: 'md',
|
|
},
|
|
columnHeader: {
|
|
px: '4',
|
|
py: '3',
|
|
},
|
|
cell: {
|
|
px: '4',
|
|
py: '3',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'line',
|
|
size: 'md',
|
|
},
|
|
},
|
|
tabs: {
|
|
slots: [
|
|
'root',
|
|
'trigger',
|
|
'list',
|
|
'content',
|
|
'contentGroup',
|
|
'indicator',
|
|
],
|
|
className: 'chakra-tabs',
|
|
base: {
|
|
root: {
|
|
'--tabs-trigger-radius': 'radii.l2',
|
|
position: 'relative',
|
|
_horizontal: {
|
|
display: 'block',
|
|
},
|
|
_vertical: {
|
|
display: 'flex',
|
|
},
|
|
},
|
|
list: {
|
|
display: 'inline-flex',
|
|
position: 'relative',
|
|
isolation: 'isolate',
|
|
'--tabs-indicator-shadow': 'shadows.xs',
|
|
'--tabs-indicator-bg': 'colors.bg',
|
|
minH: 'var(--tabs-height)',
|
|
_horizontal: {
|
|
flexDirection: 'row',
|
|
},
|
|
_vertical: {
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
trigger: {
|
|
outline: '0',
|
|
minW: 'var(--tabs-height)',
|
|
height: 'var(--tabs-height)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontWeight: 'medium',
|
|
position: 'relative',
|
|
cursor: 'button',
|
|
gap: '2',
|
|
_focusVisible: {
|
|
zIndex: 1,
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
},
|
|
_disabled: {
|
|
cursor: 'not-allowed',
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
content: {
|
|
focusVisibleRing: 'inside',
|
|
_horizontal: {
|
|
width: '100%',
|
|
pt: 'var(--tabs-content-padding)',
|
|
},
|
|
_vertical: {
|
|
height: '100%',
|
|
ps: 'var(--tabs-content-padding)',
|
|
},
|
|
},
|
|
indicator: {
|
|
width: 'var(--width)',
|
|
height: 'var(--height)',
|
|
borderRadius: 'var(--tabs-indicator-radius)',
|
|
bg: 'var(--tabs-indicator-bg)',
|
|
shadow: 'var(--tabs-indicator-shadow)',
|
|
zIndex: -1,
|
|
},
|
|
},
|
|
variants: {
|
|
fitted: {
|
|
true: {
|
|
list: {
|
|
display: 'flex',
|
|
},
|
|
trigger: {
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
},
|
|
},
|
|
justify: {
|
|
start: {
|
|
list: {
|
|
justifyContent: 'flex-start',
|
|
},
|
|
},
|
|
center: {
|
|
list: {
|
|
justifyContent: 'center',
|
|
},
|
|
},
|
|
end: {
|
|
list: {
|
|
justifyContent: 'flex-end',
|
|
},
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
'--tabs-height': 'sizes.9',
|
|
'--tabs-content-padding': 'spacing.3',
|
|
},
|
|
trigger: {
|
|
py: '1',
|
|
px: '3',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--tabs-height': 'sizes.10',
|
|
'--tabs-content-padding': 'spacing.4',
|
|
},
|
|
trigger: {
|
|
py: '2',
|
|
px: '4',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--tabs-height': 'sizes.11',
|
|
'--tabs-content-padding': 'spacing.4.5',
|
|
},
|
|
trigger: {
|
|
py: '2',
|
|
px: '4.5',
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
line: {
|
|
list: {
|
|
display: 'flex',
|
|
borderColor: 'border',
|
|
_horizontal: {
|
|
borderBottomWidth: '1px',
|
|
},
|
|
_vertical: {
|
|
borderEndWidth: '1px',
|
|
},
|
|
},
|
|
trigger: {
|
|
color: 'fg.muted',
|
|
_disabled: {
|
|
_active: {
|
|
bg: 'initial',
|
|
},
|
|
},
|
|
_selected: {
|
|
color: 'fg',
|
|
_horizontal: {
|
|
layerStyle: 'indicator.bottom',
|
|
'--indicator-offset-y': '-1px',
|
|
'--indicator-color': 'colors.colorPalette.solid',
|
|
},
|
|
_vertical: {
|
|
layerStyle: 'indicator.end',
|
|
'--indicator-offset-x': '-1px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtle: {
|
|
trigger: {
|
|
borderRadius: 'var(--tabs-trigger-radius)',
|
|
color: 'fg.muted',
|
|
_selected: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
},
|
|
enclosed: {
|
|
list: {
|
|
bg: 'bg.muted',
|
|
padding: '1',
|
|
borderRadius: 'l3',
|
|
minH: 'calc(var(--tabs-height) - 4px)',
|
|
},
|
|
trigger: {
|
|
justifyContent: 'center',
|
|
color: 'fg.muted',
|
|
borderRadius: 'var(--tabs-trigger-radius)',
|
|
_selected: {
|
|
bg: 'bg',
|
|
color: 'colorPalette.fg',
|
|
shadow: 'xs',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
list: {
|
|
'--line-thickness': '1px',
|
|
'--line-offset': 'calc(var(--line-thickness) * -1)',
|
|
borderColor: 'border',
|
|
display: 'flex',
|
|
_horizontal: {
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: '0px',
|
|
width: '100%',
|
|
borderBottomWidth: 'var(--line-thickness)',
|
|
borderBottomColor: 'border',
|
|
},
|
|
},
|
|
_vertical: {
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
insetInline: 'var(--line-offset)',
|
|
height: 'calc(100% - calc(var(--line-thickness) * 2))',
|
|
borderEndWidth: 'var(--line-thickness)',
|
|
borderEndColor: 'border',
|
|
},
|
|
},
|
|
},
|
|
trigger: {
|
|
color: 'fg.muted',
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
_selected: {
|
|
bg: 'currentBg',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
_horizontal: {
|
|
borderTopRadius: 'var(--tabs-trigger-radius)',
|
|
marginBottom: 'var(--line-offset)',
|
|
marginEnd: {
|
|
_notLast: 'var(--line-offset)',
|
|
},
|
|
_selected: {
|
|
borderColor: 'border',
|
|
borderBottomColor: 'transparent',
|
|
},
|
|
},
|
|
_vertical: {
|
|
borderStartRadius: 'var(--tabs-trigger-radius)',
|
|
marginEnd: 'var(--line-offset)',
|
|
marginBottom: {
|
|
_notLast: 'var(--line-offset)',
|
|
},
|
|
_selected: {
|
|
borderColor: 'border',
|
|
borderEndColor: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plain: {
|
|
trigger: {
|
|
color: 'fg.muted',
|
|
_selected: {
|
|
color: 'colorPalette.fg',
|
|
},
|
|
borderRadius: 'var(--tabs-trigger-radius)',
|
|
'&[data-selected][data-ssr]': {
|
|
bg: 'var(--tabs-indicator-bg)',
|
|
shadow: 'var(--tabs-indicator-shadow)',
|
|
borderRadius: 'var(--tabs-indicator-radius)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'line',
|
|
},
|
|
},
|
|
tag: {
|
|
slots: ['root', 'label', 'closeTrigger', 'startElement', 'endElement'],
|
|
className: 'chakra-tag',
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
verticalAlign: 'top',
|
|
maxWidth: '100%',
|
|
userSelect: 'none',
|
|
borderRadius: 'l2',
|
|
focusVisibleRing: 'outside',
|
|
},
|
|
label: {
|
|
lineClamp: '1',
|
|
},
|
|
closeTrigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
outline: '0',
|
|
borderRadius: 'l1',
|
|
color: 'currentColor',
|
|
focusVisibleRing: 'inside',
|
|
focusRingWidth: '2px',
|
|
},
|
|
startElement: {
|
|
flexShrink: 0,
|
|
boxSize: 'var(--tag-element-size)',
|
|
ms: 'var(--tag-element-offset)',
|
|
'&:has([data-scope=avatar])': {
|
|
boxSize: 'var(--tag-avatar-size)',
|
|
ms: 'calc(var(--tag-element-offset) * 1.5)',
|
|
},
|
|
_icon: {
|
|
boxSize: '100%',
|
|
},
|
|
},
|
|
endElement: {
|
|
flexShrink: 0,
|
|
boxSize: 'var(--tag-element-size)',
|
|
me: 'var(--tag-element-offset)',
|
|
_icon: {
|
|
boxSize: '100%',
|
|
},
|
|
'&:has(button)': {
|
|
ms: 'calc(var(--tag-element-offset) * -1)',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
px: '1.5',
|
|
minH: '4.5',
|
|
gap: '1',
|
|
'--tag-avatar-size': 'spacing.3',
|
|
'--tag-element-size': 'spacing.3',
|
|
'--tag-element-offset': '-2px',
|
|
},
|
|
label: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
px: '1.5',
|
|
minH: '5',
|
|
gap: '1',
|
|
'--tag-avatar-size': 'spacing.3.5',
|
|
'--tag-element-size': 'spacing.3.5',
|
|
'--tag-element-offset': '-2px',
|
|
},
|
|
label: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
px: '2',
|
|
minH: '6',
|
|
gap: '1.5',
|
|
'--tag-avatar-size': 'spacing.4.5',
|
|
'--tag-element-size': 'spacing.4',
|
|
'--tag-element-offset': '-3px',
|
|
},
|
|
label: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
xl: {
|
|
root: {
|
|
px: '2.5',
|
|
minH: '8',
|
|
gap: '1.5',
|
|
'--tag-avatar-size': 'spacing.6',
|
|
'--tag-element-size': 'spacing.4.5',
|
|
'--tag-element-offset': '-4px',
|
|
},
|
|
label: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
subtle: {
|
|
root: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
solid: {
|
|
root: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
outline: {
|
|
root: {
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
surface: {
|
|
root: {
|
|
bg: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
shadowColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'surface',
|
|
},
|
|
},
|
|
toast: {
|
|
slots: [
|
|
'root',
|
|
'title',
|
|
'description',
|
|
'indicator',
|
|
'closeTrigger',
|
|
'actionTrigger',
|
|
],
|
|
className: 'chakra-toast',
|
|
base: {
|
|
root: {
|
|
width: 'full',
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
position: 'relative',
|
|
gap: '3',
|
|
py: '4',
|
|
ps: '4',
|
|
pe: '6',
|
|
borderRadius: 'l2',
|
|
translate: 'var(--x) var(--y)',
|
|
scale: 'var(--scale)',
|
|
zIndex: 'var(--z-index)',
|
|
height: 'var(--height)',
|
|
opacity: 'var(--opacity)',
|
|
willChange: 'translate, opacity, scale',
|
|
transition:
|
|
'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',
|
|
transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
|
|
_closed: {
|
|
transition: 'translate 400ms, scale 400ms, opacity 200ms',
|
|
transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',
|
|
},
|
|
bg: 'bg.panel',
|
|
color: 'fg',
|
|
boxShadow: 'xl',
|
|
'--toast-trigger-bg': 'colors.bg.muted',
|
|
'&[data-type=warning]': {
|
|
bg: 'orange.solid',
|
|
color: 'orange.contrast',
|
|
'--toast-trigger-bg': '{white/10}',
|
|
'--toast-border-color': '{white/40}',
|
|
},
|
|
'&[data-type=success]': {
|
|
bg: 'green.solid',
|
|
color: 'green.contrast',
|
|
'--toast-trigger-bg': '{white/10}',
|
|
'--toast-border-color': '{white/40}',
|
|
},
|
|
'&[data-type=error]': {
|
|
bg: 'red.solid',
|
|
color: 'red.contrast',
|
|
'--toast-trigger-bg': '{white/10}',
|
|
'--toast-border-color': '{white/40}',
|
|
},
|
|
},
|
|
title: {
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
marginEnd: '2',
|
|
},
|
|
description: {
|
|
display: 'inline',
|
|
textStyle: 'sm',
|
|
opacity: '0.8',
|
|
},
|
|
indicator: {
|
|
flexShrink: '0',
|
|
boxSize: '5',
|
|
},
|
|
actionTrigger: {
|
|
textStyle: 'sm',
|
|
fontWeight: 'medium',
|
|
height: '8',
|
|
px: '3',
|
|
borderRadius: 'l2',
|
|
alignSelf: 'center',
|
|
borderWidth: '1px',
|
|
borderColor: 'var(--toast-border-color, inherit)',
|
|
transition: 'background 200ms',
|
|
_hover: {
|
|
bg: 'var(--toast-trigger-bg)',
|
|
},
|
|
},
|
|
closeTrigger: {
|
|
position: 'absolute',
|
|
top: '1',
|
|
insetEnd: '1',
|
|
padding: '1',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '{currentColor/60}',
|
|
borderRadius: 'l2',
|
|
textStyle: 'md',
|
|
transition: 'background 200ms',
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
slots: ['trigger', 'arrow', 'arrowTip', 'positioner', 'content'],
|
|
className: 'chakra-tooltip',
|
|
base: {
|
|
content: {
|
|
'--tooltip-bg': 'colors.bg.inverted',
|
|
bg: 'var(--tooltip-bg)',
|
|
color: 'fg.inverted',
|
|
px: '2.5',
|
|
py: '1',
|
|
borderRadius: 'l2',
|
|
fontWeight: 'medium',
|
|
textStyle: 'xs',
|
|
boxShadow: 'md',
|
|
maxW: 'xs',
|
|
zIndex: 'tooltip',
|
|
transformOrigin: 'var(--transform-origin)',
|
|
_open: {
|
|
animationStyle: 'scale-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'scale-fade-out',
|
|
animationDuration: 'fast',
|
|
},
|
|
},
|
|
arrow: {
|
|
'--arrow-size': 'sizes.2',
|
|
'--arrow-background': 'var(--tooltip-bg)',
|
|
},
|
|
arrowTip: {
|
|
borderTopWidth: '1px',
|
|
borderInlineStartWidth: '1px',
|
|
borderColor: 'var(--tooltip-bg)',
|
|
},
|
|
},
|
|
},
|
|
status: {
|
|
className: 'chakra-status',
|
|
slots: ['root', 'indicator'],
|
|
base: {
|
|
root: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '2',
|
|
},
|
|
indicator: {
|
|
width: '0.64em',
|
|
height: '0.64em',
|
|
flexShrink: 0,
|
|
borderRadius: 'full',
|
|
forcedColorAdjust: 'none',
|
|
bg: 'colorPalette.solid',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
textStyle: 'md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
timeline: {
|
|
slots: [
|
|
'root',
|
|
'item',
|
|
'content',
|
|
'separator',
|
|
'indicator',
|
|
'connector',
|
|
'title',
|
|
'description',
|
|
],
|
|
className: 'chakra-timeline',
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: 'full',
|
|
'--timeline-thickness': '1px',
|
|
'--timeline-gutter': '4px',
|
|
},
|
|
item: {
|
|
display: 'flex',
|
|
position: 'relative',
|
|
alignItems: 'flex-start',
|
|
flexShrink: 0,
|
|
gap: '4',
|
|
_last: {
|
|
'& :where(.chakra-timeline__separator)': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
separator: {
|
|
position: 'absolute',
|
|
borderStartWidth: 'var(--timeline-thickness)',
|
|
ms: 'calc(-1 * var(--timeline-thickness) / 2)',
|
|
insetInlineStart: 'calc(var(--timeline-indicator-size) / 2)',
|
|
insetBlock: '0',
|
|
borderColor: 'border',
|
|
},
|
|
indicator: {
|
|
outline: '2px solid {colors.bg}',
|
|
position: 'relative',
|
|
flexShrink: '0',
|
|
boxSize: 'var(--timeline-indicator-size)',
|
|
fontSize: 'var(--timeline-font-size)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 'full',
|
|
fontWeight: 'medium',
|
|
},
|
|
connector: {
|
|
alignSelf: 'stretch',
|
|
position: 'relative',
|
|
},
|
|
content: {
|
|
pb: '6',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: 'full',
|
|
gap: '2',
|
|
},
|
|
title: {
|
|
display: 'flex',
|
|
fontWeight: 'medium',
|
|
flexWrap: 'wrap',
|
|
gap: '1.5',
|
|
alignItems: 'center',
|
|
mt: 'var(--timeline-margin)',
|
|
},
|
|
description: {
|
|
color: 'fg.muted',
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
subtle: {
|
|
indicator: {
|
|
bg: 'colorPalette.muted',
|
|
},
|
|
},
|
|
solid: {
|
|
indicator: {
|
|
bg: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
outline: {
|
|
indicator: {
|
|
bg: 'currentBg',
|
|
borderWidth: '1px',
|
|
borderColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
plain: {},
|
|
},
|
|
size: {
|
|
sm: {
|
|
root: {
|
|
'--timeline-indicator-size': 'sizes.4',
|
|
'--timeline-font-size': 'fontSizes.2xs',
|
|
},
|
|
title: {
|
|
textStyle: 'xs',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--timeline-indicator-size': 'sizes.5',
|
|
'--timeline-font-size': 'fontSizes.xs',
|
|
},
|
|
title: {
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--timeline-indicator-size': 'sizes.6',
|
|
'--timeline-font-size': 'fontSizes.xs',
|
|
},
|
|
title: {
|
|
mt: '0.5',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
xl: {
|
|
root: {
|
|
'--timeline-indicator-size': 'sizes.8',
|
|
'--timeline-font-size': 'fontSizes.sm',
|
|
},
|
|
title: {
|
|
mt: '1.5',
|
|
textStyle: 'sm',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'solid',
|
|
},
|
|
},
|
|
colorPicker: {
|
|
className: 'colorPicker',
|
|
slots: [
|
|
'root',
|
|
'label',
|
|
'control',
|
|
'trigger',
|
|
'positioner',
|
|
'content',
|
|
'area',
|
|
'areaThumb',
|
|
'valueText',
|
|
'areaBackground',
|
|
'channelSlider',
|
|
'channelSliderLabel',
|
|
'channelSliderTrack',
|
|
'channelSliderThumb',
|
|
'channelSliderValueText',
|
|
'channelInput',
|
|
'transparencyGrid',
|
|
'swatchGroup',
|
|
'swatchTrigger',
|
|
'swatchIndicator',
|
|
'swatch',
|
|
'eyeDropperTrigger',
|
|
'formatTrigger',
|
|
'formatSelect',
|
|
'view',
|
|
],
|
|
base: {
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1.5',
|
|
},
|
|
label: {
|
|
color: 'fg',
|
|
fontWeight: 'medium',
|
|
textStyle: 'sm',
|
|
},
|
|
valueText: {
|
|
textAlign: 'start',
|
|
},
|
|
control: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
gap: '2',
|
|
position: 'relative',
|
|
},
|
|
swatchTrigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
trigger: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
flexShrink: '0',
|
|
gap: '2',
|
|
textStyle: 'sm',
|
|
minH: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
px: '1',
|
|
rounded: 'l2',
|
|
_disabled: {
|
|
opacity: '0.5',
|
|
},
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'&:focus-visible': {
|
|
borderColor: 'var(--focus-color)',
|
|
outline: '1px solid var(--focus-color)',
|
|
},
|
|
'&[data-fit-content]': {
|
|
'--input-height': 'unset',
|
|
px: '0',
|
|
border: '0',
|
|
},
|
|
},
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
bg: 'bg.panel',
|
|
borderRadius: 'l3',
|
|
boxShadow: 'lg',
|
|
width: '64',
|
|
p: '4',
|
|
gap: '3',
|
|
zIndex: 'dropdown',
|
|
_open: {
|
|
animationStyle: 'slide-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'slide-fade-out',
|
|
animationDuration: 'faster',
|
|
},
|
|
},
|
|
area: {
|
|
height: '180px',
|
|
borderRadius: 'l2',
|
|
overflow: 'hidden',
|
|
},
|
|
areaThumb: {
|
|
borderRadius: 'full',
|
|
height: 'var(--thumb-size)',
|
|
width: 'var(--thumb-size)',
|
|
borderWidth: '2px',
|
|
borderColor: 'white',
|
|
shadow: 'sm',
|
|
focusVisibleRing: 'mixed',
|
|
focusRingColor: 'white',
|
|
},
|
|
areaBackground: {
|
|
height: 'full',
|
|
},
|
|
channelSlider: {
|
|
borderRadius: 'l2',
|
|
flex: '1',
|
|
},
|
|
channelSliderTrack: {
|
|
height: 'var(--slider-height)',
|
|
borderRadius: 'inherit',
|
|
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)',
|
|
},
|
|
swatchGroup: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: '2',
|
|
},
|
|
swatch: {
|
|
boxSize: 'var(--swatch-size)',
|
|
shadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)',
|
|
'--checker-size': '8px',
|
|
'--checker-bg': 'colors.bg',
|
|
'--checker-fg': 'colors.bg.emphasized',
|
|
background:
|
|
'linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: '0',
|
|
borderRadius: 'l1',
|
|
},
|
|
swatchIndicator: {
|
|
color: 'white',
|
|
rounded: 'full',
|
|
},
|
|
channelSliderThumb: {
|
|
borderRadius: 'full',
|
|
height: 'var(--thumb-size)',
|
|
width: 'var(--thumb-size)',
|
|
borderWidth: '2px',
|
|
borderColor: 'white',
|
|
shadow: 'sm',
|
|
transform: 'translate(-50%, -50%)',
|
|
focusVisibleRing: 'outside',
|
|
focusRingOffset: '1px',
|
|
},
|
|
channelInput: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'none',
|
|
textAlign: 'start',
|
|
borderRadius: 'l2',
|
|
_disabled: {
|
|
layerStyle: 'disabled',
|
|
},
|
|
height: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
'--focus-color': 'colors.colorPalette.focusRing',
|
|
'--error-color': 'colors.border.error',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
'&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
|
|
WebkitAppearance: 'none',
|
|
margin: 0,
|
|
},
|
|
},
|
|
formatSelect: {
|
|
textStyle: 'xs',
|
|
textTransform: 'uppercase',
|
|
borderWidth: '1px',
|
|
minH: '6',
|
|
focusRing: 'inside',
|
|
rounded: 'l2',
|
|
},
|
|
transparencyGrid: {
|
|
borderRadius: 'l2',
|
|
},
|
|
view: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '2',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
channelInput: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.7',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.4.5',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.7',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3',
|
|
'--thumb-size': 'sizes.3',
|
|
},
|
|
},
|
|
xs: {
|
|
channelInput: {
|
|
textStyle: 'xs',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.5',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
sm: {
|
|
channelInput: {
|
|
textStyle: 'sm',
|
|
px: '2.5',
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.6',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.9',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
md: {
|
|
channelInput: {
|
|
textStyle: 'sm',
|
|
px: '3',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.7',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
lg: {
|
|
channelInput: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.7',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.11',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
xl: {
|
|
channelInput: {
|
|
textStyle: 'md',
|
|
px: '4.5',
|
|
'--input-height': 'sizes.12',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.8',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.12',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
'2xl': {
|
|
channelInput: {
|
|
textStyle: 'lg',
|
|
px: '5',
|
|
'--input-height': 'sizes.16',
|
|
},
|
|
swatch: {
|
|
'--swatch-size': 'sizes.10',
|
|
},
|
|
trigger: {
|
|
'--input-height': 'sizes.16',
|
|
},
|
|
area: {
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
channelSlider: {
|
|
'--slider-height': 'sizes.3.5',
|
|
'--thumb-size': 'sizes.3.5',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
outline: {
|
|
channelInput: {
|
|
bg: 'transparent',
|
|
borderWidth: '1px',
|
|
borderColor: 'border',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
trigger: {
|
|
borderWidth: '1px',
|
|
},
|
|
},
|
|
subtle: {
|
|
channelInput: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
focusVisibleRing: 'inside',
|
|
},
|
|
trigger: {
|
|
borderWidth: '1px',
|
|
borderColor: 'transparent',
|
|
bg: 'bg.muted',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
},
|
|
},
|
|
qrCode: {
|
|
slots: ['root', 'frame', 'pattern', 'overlay', 'downloadTrigger'],
|
|
className: 'chakra-qr-code',
|
|
base: {
|
|
root: {
|
|
position: 'relative',
|
|
width: 'fit-content',
|
|
'--qr-code-overlay-size': 'calc(var(--qr-code-size) / 3)',
|
|
},
|
|
frame: {
|
|
width: 'var(--qr-code-size)',
|
|
height: 'var(--qr-code-size)',
|
|
fill: 'currentColor',
|
|
},
|
|
overlay: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 'var(--qr-code-overlay-size)',
|
|
height: 'var(--qr-code-overlay-size)',
|
|
padding: '1',
|
|
bg: 'bg',
|
|
rounded: 'l1',
|
|
},
|
|
},
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
root: {
|
|
'--qr-code-size': '40px',
|
|
},
|
|
},
|
|
xs: {
|
|
root: {
|
|
'--qr-code-size': '64px',
|
|
},
|
|
},
|
|
sm: {
|
|
root: {
|
|
'--qr-code-size': '80px',
|
|
},
|
|
},
|
|
md: {
|
|
root: {
|
|
'--qr-code-size': '120px',
|
|
},
|
|
},
|
|
lg: {
|
|
root: {
|
|
'--qr-code-size': '160px',
|
|
},
|
|
},
|
|
xl: {
|
|
root: {
|
|
'--qr-code-size': '200px',
|
|
},
|
|
},
|
|
'2xl': {
|
|
root: {
|
|
'--qr-code-size': '240px',
|
|
},
|
|
},
|
|
full: {
|
|
root: {
|
|
'--qr-code-size': '100%',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
},
|
|
textStyles: {
|
|
'2xs': {
|
|
value: {
|
|
fontSize: '2xs',
|
|
lineHeight: '0.75rem',
|
|
},
|
|
},
|
|
xs: {
|
|
value: {
|
|
fontSize: 'xs',
|
|
lineHeight: '1rem',
|
|
},
|
|
},
|
|
sm: {
|
|
value: {
|
|
fontSize: 'sm',
|
|
lineHeight: '1.25rem',
|
|
},
|
|
},
|
|
md: {
|
|
value: {
|
|
fontSize: 'md',
|
|
lineHeight: '1.5rem',
|
|
},
|
|
},
|
|
lg: {
|
|
value: {
|
|
fontSize: 'lg',
|
|
lineHeight: '1.75rem',
|
|
},
|
|
},
|
|
xl: {
|
|
value: {
|
|
fontSize: 'xl',
|
|
lineHeight: '1.875rem',
|
|
},
|
|
},
|
|
'2xl': {
|
|
value: {
|
|
fontSize: '2xl',
|
|
lineHeight: '2rem',
|
|
},
|
|
},
|
|
'3xl': {
|
|
value: {
|
|
fontSize: '3xl',
|
|
lineHeight: '2.375rem',
|
|
},
|
|
},
|
|
'4xl': {
|
|
value: {
|
|
fontSize: '4xl',
|
|
lineHeight: '2.75rem',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
},
|
|
'5xl': {
|
|
value: {
|
|
fontSize: '5xl',
|
|
lineHeight: '3.75rem',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
},
|
|
'6xl': {
|
|
value: {
|
|
fontSize: '6xl',
|
|
lineHeight: '4.5rem',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
},
|
|
'7xl': {
|
|
value: {
|
|
fontSize: '7xl',
|
|
lineHeight: '5.75rem',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
},
|
|
none: {
|
|
value: {},
|
|
},
|
|
},
|
|
layerStyles: {
|
|
'fill.muted': {
|
|
value: {
|
|
background: 'colorPalette.muted',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
'fill.subtle': {
|
|
value: {
|
|
background: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
'fill.surface': {
|
|
value: {
|
|
background: 'colorPalette.subtle',
|
|
color: 'colorPalette.fg',
|
|
boxShadow: '0 0 0px 1px var(--shadow-color)',
|
|
boxShadowColor: 'colorPalette.muted',
|
|
},
|
|
},
|
|
'fill.solid': {
|
|
value: {
|
|
background: 'colorPalette.solid',
|
|
color: 'colorPalette.contrast',
|
|
},
|
|
},
|
|
'outline.subtle': {
|
|
value: {
|
|
color: 'colorPalette.fg',
|
|
boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
|
|
boxShadowColor: 'colorPalette.subtle',
|
|
},
|
|
},
|
|
'outline.solid': {
|
|
value: {
|
|
borderWidth: '1px',
|
|
borderColor: 'colorPalette.solid',
|
|
color: 'colorPalette.fg',
|
|
},
|
|
},
|
|
'indicator.bottom': {
|
|
value: {
|
|
position: 'relative',
|
|
'--indicator-color-fallback': 'colors.colorPalette.solid',
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: 'var(--indicator-offset-y, 0)',
|
|
insetInline: 'var(--indicator-offset-x, 0)',
|
|
height: 'var(--indicator-thickness, 2px)',
|
|
background:
|
|
'var(--indicator-color, var(--indicator-color-fallback))',
|
|
},
|
|
},
|
|
},
|
|
'indicator.top': {
|
|
value: {
|
|
position: 'relative',
|
|
'--indicator-color-fallback': 'colors.colorPalette.solid',
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 'var(--indicator-offset-y, 0)',
|
|
insetInline: 'var(--indicator-offset-x, 0)',
|
|
height: 'var(--indicator-thickness, 2px)',
|
|
background:
|
|
'var(--indicator-color, var(--indicator-color-fallback))',
|
|
},
|
|
},
|
|
},
|
|
'indicator.start': {
|
|
value: {
|
|
position: 'relative',
|
|
'--indicator-color-fallback': 'colors.colorPalette.solid',
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
insetInlineStart: 'var(--indicator-offset-x, 0)',
|
|
insetBlock: 'var(--indicator-offset-y, 0)',
|
|
width: 'var(--indicator-thickness, 2px)',
|
|
background:
|
|
'var(--indicator-color, var(--indicator-color-fallback))',
|
|
},
|
|
},
|
|
},
|
|
'indicator.end': {
|
|
value: {
|
|
position: 'relative',
|
|
'--indicator-color-fallback': 'colors.colorPalette.solid',
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
insetInlineEnd: 'var(--indicator-offset-x, 0)',
|
|
insetBlock: 'var(--indicator-offset-y, 0)',
|
|
width: 'var(--indicator-thickness, 2px)',
|
|
background:
|
|
'var(--indicator-color, var(--indicator-color-fallback))',
|
|
},
|
|
},
|
|
},
|
|
disabled: {
|
|
value: {
|
|
opacity: '0.5',
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
none: {
|
|
value: {},
|
|
},
|
|
},
|
|
animationStyles: {
|
|
'slide-fade-in': {
|
|
value: {
|
|
transformOrigin: 'var(--transform-origin)',
|
|
'&[data-placement^=top]': {
|
|
animationName: 'slide-from-bottom, fade-in',
|
|
},
|
|
'&[data-placement^=bottom]': {
|
|
animationName: 'slide-from-top, fade-in',
|
|
},
|
|
'&[data-placement^=left]': {
|
|
animationName: 'slide-from-right, fade-in',
|
|
},
|
|
'&[data-placement^=right]': {
|
|
animationName: 'slide-from-left, fade-in',
|
|
},
|
|
},
|
|
},
|
|
'slide-fade-out': {
|
|
value: {
|
|
transformOrigin: 'var(--transform-origin)',
|
|
'&[data-placement^=top]': {
|
|
animationName: 'slide-to-bottom, fade-out',
|
|
},
|
|
'&[data-placement^=bottom]': {
|
|
animationName: 'slide-to-top, fade-out',
|
|
},
|
|
'&[data-placement^=left]': {
|
|
animationName: 'slide-to-right, fade-out',
|
|
},
|
|
'&[data-placement^=right]': {
|
|
animationName: 'slide-to-left, fade-out',
|
|
},
|
|
},
|
|
},
|
|
'scale-fade-in': {
|
|
value: {
|
|
transformOrigin: 'var(--transform-origin)',
|
|
animationName: 'scale-in, fade-in',
|
|
},
|
|
},
|
|
'scale-fade-out': {
|
|
value: {
|
|
transformOrigin: 'var(--transform-origin)',
|
|
animationName: 'scale-out, fade-out',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|