10888 lines
396 KiB
TypeScript
10888 lines
396 KiB
TypeScript
cont plop = {
|
|
"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"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}; |