diff --git a/back/pom.xml b/back/pom.xml
index 7b2623d..93b07e6 100644
--- a/back/pom.xml
+++ b/back/pom.xml
@@ -20,7 +20,7 @@
kangaroo-and-rabbit
archidata
- 0.21.0
+ 0.23.6
diff --git a/back/src/org/kar/karusic/model/Album.java b/back/src/org/kar/karusic/model/Album.java
index 954f616..eedc432 100644
--- a/back/src/org/kar/karusic/model/Album.java
+++ b/back/src/org/kar/karusic/model/Album.java
@@ -6,7 +6,7 @@ import java.util.List;
import org.bson.types.ObjectId;
import org.kar.archidata.annotation.DataIfNotExists;
import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.GenericDataSoftDelete;
diff --git a/back/src/org/kar/karusic/model/Artist.java b/back/src/org/kar/karusic/model/Artist.java
index bea6ef8..cf1bcab 100644
--- a/back/src/org/kar/karusic/model/Artist.java
+++ b/back/src/org/kar/karusic/model/Artist.java
@@ -6,7 +6,7 @@ import java.util.List;
import org.bson.types.ObjectId;
import org.kar.archidata.annotation.DataIfNotExists;
import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.GenericDataSoftDelete;
diff --git a/back/src/org/kar/karusic/model/Gender.java b/back/src/org/kar/karusic/model/Gender.java
index 3c92730..8427371 100644
--- a/back/src/org/kar/karusic/model/Gender.java
+++ b/back/src/org/kar/karusic/model/Gender.java
@@ -17,7 +17,7 @@ import java.util.List;
import org.bson.types.ObjectId;
import org.kar.archidata.annotation.DataIfNotExists;
import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.GenericDataSoftDelete;
diff --git a/back/src/org/kar/karusic/model/Playlist.java b/back/src/org/kar/karusic/model/Playlist.java
index e7a6395..eb02be8 100644
--- a/back/src/org/kar/karusic/model/Playlist.java
+++ b/back/src/org/kar/karusic/model/Playlist.java
@@ -17,7 +17,7 @@ import java.util.List;
import org.bson.types.ObjectId;
import org.kar.archidata.annotation.DataIfNotExists;
import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.GenericDataSoftDelete;
diff --git a/back/src/org/kar/karusic/model/Track.java b/back/src/org/kar/karusic/model/Track.java
index c765e5b..7466dc1 100644
--- a/back/src/org/kar/karusic/model/Track.java
+++ b/back/src/org/kar/karusic/model/Track.java
@@ -17,7 +17,7 @@ import java.util.List;
import org.bson.types.ObjectId;
import org.kar.archidata.annotation.DataIfNotExists;
import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.GenericDataSoftDelete;
diff --git a/front/src/assets/images/404.svg b/front/src/assets/images/404.svg
deleted file mode 100644
index c0cff3f..0000000
--- a/front/src/assets/images/404.svg
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
diff --git a/front/src/environment.ts b/front/src/environment.ts
index 42e6d8f..17f9810 100644
--- a/front/src/environment.ts
+++ b/front/src/environment.ts
@@ -13,7 +13,7 @@ export interface Environment {
replaceDataToRealServer?: boolean;
}
-const serverSSOAddress = 'http://atria-soft.org';
+const serverSSOAddress = 'https://atria-soft.org';
const environment_back_prod: Environment = {
production: false,
diff --git a/front/src/theme/config sample.ts b/front/src/theme/config sample.ts
deleted file mode 100644
index 4bc6982..0000000
--- a/front/src/theme/config sample.ts
+++ /dev/null
@@ -1,10888 +0,0 @@
-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"
- }
- }
- }
- }
-};
\ No newline at end of file
diff --git a/front/tsconfig.json b/front/tsconfig.json
index 1b08d34..279c4d9 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -40,7 +40,8 @@
"src/**/*.ts",
"src/**/*.tsx",
"src/theme/recipes/numberInput.ts_",
- "src/theme/recipes/modal.ts__"
+ "src/theme/recipes/modal.ts__",
+ "config sample.ts"
],
"exclude": [
"node_modules"