Text
heading
ultratitle
title
subtitle
headline
subheadline
eyebrow
lead
caption
This is a whole paragraph of text, include code like this, as well as linked code & regular links. The paragraph ended up being 1 sentence, but now I guess it’s two.
Here’s a code block! No highlighting to be found.// TODO: Button
Cards
primary
sunken
interactive
translucent
translucentDark
// TODO: Forms
// TODO: Badges
// TODO: Colors
// TODO: TypeScale
Theme Spec
{
"breakpoints": [
"0em",
"30em",
"48em",
"62em",
"80em"
],
"zIndices": {
"hide": -1,
"auto": "auto",
"base": 0,
"docked": 10,
"dropdown": 1000,
"sticky": 1100,
"banner": 1200,
"overlay": 1300,
"modal": 1400,
"popover": 1500,
"skipLink": 1600,
"toast": 1700,
"tooltip": 1800
},
"radii": {
"none": "0",
"sm": "0.125rem",
"base": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"full": "9999px",
"default": "0.25rem",
"circle": "9999px"
},
"colors": {
"transparent": "transparent",
"current": "currentColor",
"black": "#1f2d3d",
"white": "#ffffff",
"whiteAlpha": {
"50": "rgba(255, 255, 255, 0.04)",
"100": "rgba(255, 255, 255, 0.06)",
"200": "rgba(255, 255, 255, 0.08)",
"300": "rgba(255, 255, 255, 0.16)",
"400": "rgba(255, 255, 255, 0.24)",
"500": "rgba(255, 255, 255, 0.36)",
"600": "rgba(255, 255, 255, 0.48)",
"700": "rgba(255, 255, 255, 0.64)",
"800": "rgba(255, 255, 255, 0.80)",
"900": "rgba(255, 255, 255, 0.92)"
},
"blackAlpha": {
"50": "rgba(0, 0, 0, 0.04)",
"100": "rgba(0, 0, 0, 0.06)",
"200": "rgba(0, 0, 0, 0.08)",
"300": "rgba(0, 0, 0, 0.16)",
"400": "rgba(0, 0, 0, 0.24)",
"500": "rgba(0, 0, 0, 0.36)",
"600": "rgba(0, 0, 0, 0.48)",
"700": "rgba(0, 0, 0, 0.64)",
"800": "rgba(0, 0, 0, 0.80)",
"900": "rgba(0, 0, 0, 0.92)"
},
"gray": {
"50": "#F7FAFC",
"100": "#EDF2F7",
"200": "#E2E8F0",
"300": "#CBD5E0",
"400": "#A0AEC0",
"500": "#718096",
"600": "#4A5568",
"700": "#2D3748",
"800": "#1A202C",
"900": "#171923"
},
"red": "#ec3750",
"orange": "#ff8c37",
"yellow": "#f1c40f",
"green": "#33d6a6",
"teal": {
"50": "#E6FFFA",
"100": "#B2F5EA",
"200": "#81E6D9",
"300": "#4FD1C5",
"400": "#38B2AC",
"500": "#319795",
"600": "#2C7A7B",
"700": "#285E61",
"800": "#234E52",
"900": "#1D4044"
},
"blue": "#338eda",
"cyan": "#5bc0de",
"purple": "#a633d6",
"pink": {
"50": "#FFF5F7",
"100": "#FED7E2",
"200": "#FBB6CE",
"300": "#F687B3",
"400": "#ED64A6",
"500": "#D53F8C",
"600": "#B83280",
"700": "#97266D",
"800": "#702459",
"900": "#521B41"
},
"linkedin": {
"50": "#E8F4F9",
"100": "#CFEDFB",
"200": "#9BDAF3",
"300": "#68C7EC",
"400": "#34B3E4",
"500": "#00A0DC",
"600": "#008CC9",
"700": "#0077B5",
"800": "#005E93",
"900": "#004471"
},
"facebook": "#3b5998",
"messenger": {
"50": "#D0E6FF",
"100": "#B9DAFF",
"200": "#A2CDFF",
"300": "#7AB8FF",
"400": "#2E90FF",
"500": "#0078FF",
"600": "#0063D1",
"700": "#0052AC",
"800": "#003C7E",
"900": "#002C5C"
},
"whatsapp": {
"50": "#E2F7F4",
"100": "#C3F0E9",
"200": "#A0E7DC",
"300": "#76DCCD",
"400": "#43CFBA",
"500": "#00BFA5",
"600": "#00AC92",
"700": "#009780",
"800": "#007D6A",
"900": "#005A4C"
},
"twitter": "#1da1f2",
"telegram": {
"50": "#E3F2F9",
"100": "#C5E4F3",
"200": "#A2D4EC",
"300": "#7AC1E4",
"400": "#47A9DA",
"500": "#0088CC",
"600": "#007AB8",
"700": "#006BA1",
"800": "#005885",
"900": "#003F5E"
},
"darker": "#121217",
"dark": "#17171d",
"darkless": "#252429",
"steel": "#273444",
"slate": "#3c4858",
"primary": "#ec3750",
"smoke": "#e0e6ed",
"snow": "#f9fafc",
"instagram": "#e1306c",
"text": "#1f2d3d",
"background": "#ffffff",
"elevated": "#ffffff",
"sheet": "#f9fafc",
"sunken": "#e0e6ed",
"border": "#e0e6ed",
"placeholder": "#8492a6",
"secondary": "#3c4858",
"accent": "#338eda",
"muted": "#8492a6"
},
"letterSpacings": {
"tighter": "-0.05em",
"tight": "-0.025em",
"normal": "0",
"wide": "0.025em",
"wider": "0.05em",
"widest": "0.1em",
"title": "-0.009em",
"headline": "0.009em"
},
"lineHeights": {
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"normal": "normal",
"none": "1",
"shorter": 1.25,
"short": 1.375,
"base": 1.5,
"tall": 1.625,
"taller": "2",
"limit": "0.875",
"title": "1",
"heading": "1.125",
"subheading": "1.25",
"caption": "1.375",
"body": "1.5"
},
"fontWeights": {
"hairline": 100,
"thin": 200,
"light": 300,
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"extrabold": 800,
"black": 900,
"heading": 700
},
"fonts": {
"heading": "Inter,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
"body": "Inter,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
"mono": "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
},
"fontSizes": {
"xs": "0.75rem",
"sm": "0.75rem",
"md": "1rem",
"lg": "1.25rem",
"xl": "1.5rem",
"2xl": "2rem",
"3xl": "3rem",
"4xl": "4rem",
"5xl": "6rem",
"6xl": "8rem",
"7xl": "10rem",
"8xl": "12rem",
"9xl": "8rem",
"base": "1rem"
},
"sizes": {
"0": "0rem",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
"128": "32rem",
"px": "1px",
"full": "100%",
"3xs": "14rem",
"2xs": "16rem",
"xs": "20rem",
"sm": "24rem",
"md": "28rem",
"lg": "32rem",
"xl": "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
"container": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px"
},
"widePlus": "128rem",
"wide": "96rem",
"layoutPlus": "75rem",
"layout": "64rem",
"copyUltra": "61.25rem",
"copyPlus": "48rem",
"copy": "42.5rem",
"narrowPlus": "37.5rem",
"narrow": "32rem"
},
"shadows": {
"xs": "0 0 0 1px rgba(0, 0, 0, 0.05)",
"sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
"md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
"lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
"xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"outline": "0 0 0 3px rgba(66, 153, 225, 0.6)",
"inner": "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
"none": "none",
"dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px",
"text": "0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125)",
"small": "0 1px 2px rgba(0, 0, 0, 0.0625), 0 2px 4px rgba(0, 0, 0, 0.0625)",
"card": "0 4px 8px rgba(0, 0, 0, 0.125)",
"elevated": "0 1px 2px rgba(0, 0, 0, 0.0625), 0 8px 12px rgba(0, 0, 0, 0.125)"
},
"space": {
"0": "0rem",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
"128": "32rem",
"px": "1px"
},
"borders": {
"none": 0,
"1px": "1px solid",
"2px": "2px solid",
"4px": "4px solid",
"8px": "8px solid"
},
"transition": {
"property": {
"common": "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
"colors": "background-color, border-color, color, fill, stroke",
"dimensions": "width, height",
"position": "left, right, top, bottom",
"background": "background-color, background-image, background-position"
},
"easing": {
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
},
"duration": {
"ultra-fast": "50ms",
"faster": "100ms",
"fast": "150ms",
"normal": "200ms",
"slow": "300ms",
"slower": "400ms",
"ultra-slow": "500ms"
}
},
"components": {
"Accordion": {
"parts": [
"container",
"button",
"panel"
],
"baseStyle": {
"container": {
"borderTopWidth": "1px",
"borderColor": "inherit",
"_last": {
"borderBottomWidth": "1px"
}
},
"button": {
"fontSize": "1rem",
"_focus": {
"boxShadow": "outline"
},
"_hover": {
"bg": "blackAlpha.50"
},
"_disabled": {
"opacity": 0.4,
"cursor": "not-allowed"
},
"px": 4,
"py": 2
},
"panel": {
"pt": 2,
"px": 4,
"pb": 5
}
}
},
"Alert": {
"parts": [
"container",
"title",
"icon"
],
"baseStyle": {
"container": {
"px": 4,
"py": 3
},
"title": {
"fontWeight": "bold",
"lineHeight": 6,
"mr": 2
},
"description": {
"lineHeight": 6
},
"icon": {
"mr": 3,
"w": 5,
"h": 6
}
},
"variants": {},
"defaultProps": {
"variant": "subtle"
}
},
"Avatar": {
"parts": [
"container",
"excessLabel",
"badge",
"label"
],
"sizes": {
"2xs": {
"container": {
"width": "4",
"height": "4",
"fontSize": "calc(1rem / 2.5)"
},
"excessLabel": {
"width": "4",
"height": "4"
},
"label": {
"fontSize": "calc(1rem / 2.5)",
"lineHeight": "1rem"
}
},
"xs": {
"container": {
"width": "6",
"height": "6",
"fontSize": "calc(1.5rem / 2.5)"
},
"excessLabel": {
"width": "6",
"height": "6"
},
"label": {
"fontSize": "calc(1.5rem / 2.5)",
"lineHeight": "1.5rem"
}
},
"sm": {
"container": {
"width": "8",
"height": "8",
"fontSize": "calc(2rem / 2.5)"
},
"excessLabel": {
"width": "8",
"height": "8"
},
"label": {
"fontSize": "calc(2rem / 2.5)",
"lineHeight": "2rem"
}
},
"md": {
"container": {
"width": "12",
"height": "12",
"fontSize": "calc(3rem / 2.5)"
},
"excessLabel": {
"width": "12",
"height": "12"
},
"label": {
"fontSize": "calc(3rem / 2.5)",
"lineHeight": "3rem"
}
},
"lg": {
"container": {
"width": "16",
"height": "16",
"fontSize": "calc(4rem / 2.5)"
},
"excessLabel": {
"width": "16",
"height": "16"
},
"label": {
"fontSize": "calc(4rem / 2.5)",
"lineHeight": "4rem"
}
},
"xl": {
"container": {
"width": "24",
"height": "24",
"fontSize": "calc(6rem / 2.5)"
},
"excessLabel": {
"width": "24",
"height": "24"
},
"label": {
"fontSize": "calc(6rem / 2.5)",
"lineHeight": "6rem"
}
},
"2xl": {
"container": {
"width": "32",
"height": "32",
"fontSize": "calc(8rem / 2.5)"
},
"excessLabel": {
"width": "32",
"height": "32"
},
"label": {
"fontSize": "calc(8rem / 2.5)",
"lineHeight": "8rem"
}
},
"full": {
"container": {
"width": "100%",
"height": "100%",
"fontSize": "calc(100% / 2.5)"
},
"excessLabel": {
"width": "100%",
"height": "100%"
},
"label": {
"fontSize": "calc(100% / 2.5)"
}
}
},
"defaultProps": {
"size": "md"
}
},
"Badge": {
"baseStyle": {
"px": 1,
"textTransform": "uppercase",
"fontSize": "xs",
"borderRadius": "sm",
"fontWeight": "bold"
},
"variants": {},
"defaultProps": {
"variant": "subtle",
"colorScheme": "gray"
}
},
"Breadcrumb": {
"parts": [
"link",
"separator"
],
"baseStyle": {
"link": {
"transition": "all 0.15s ease-out",
"cursor": "pointer",
"textDecoration": "none",
"outline": "none",
"color": "inherit",
"_hover": {
"textDecoration": "underline"
},
"_focus": {
"boxShadow": "outline"
}
}
}
},
"Button": {
"baseStyle": {
"lineHeight": "1.2",
"borderRadius": "md",
"fontWeight": "semibold",
"_focus": {
"boxShadow": "outline"
},
"_disabled": {
"opacity": 0.4,
"cursor": "not-allowed",
"boxShadow": "none"
},
"_hover": {
"_disabled": {
"bg": "initial"
}
}
},
"variants": {
"unstyled": {
"bg": "none",
"color": "inherit",
"display": "inline",
"lineHeight": "inherit",
"m": 0,
"p": 0
}
},
"sizes": {
"lg": {
"h": 12,
"minW": 12,
"fontSize": "lg",
"px": 6
},
"md": {
"h": 10,
"minW": 10,
"fontSize": "md",
"px": 4
},
"sm": {
"h": 8,
"minW": 8,
"fontSize": "sm",
"px": 3
},
"xs": {
"h": 6,
"minW": 6,
"fontSize": "xs",
"px": 2
}
},
"defaultProps": {
"variant": "solid",
"size": "md",
"colorScheme": "gray"
}
},
"Checkbox": {
"parts": [
"control",
"label",
"description",
"icon"
],
"sizes": {
"sm": {
"control": {
"h": 3,
"w": 3
},
"label": {
"fontSize": "sm"
},
"icon": {
"fontSize": "0.45rem"
}
},
"md": {
"control": {
"w": 4,
"h": 4
},
"label": {
"fontSize": "md"
},
"icon": {
"fontSize": "0.625rem"
}
},
"lg": {
"control": {
"w": 5,
"h": 5
},
"label": {
"fontSize": "lg"
},
"icon": {
"fontSize": "0.625rem"
}
}
},
"defaultProps": {
"size": "md",
"colorScheme": "blue"
}
},
"CloseButton": {
"sizes": {
"lg": {
"w": "40px",
"h": "40px",
"fontSize": "16px"
},
"md": {
"w": "32px",
"h": "32px",
"fontSize": "12px"
},
"sm": {
"w": "24px",
"h": "24px",
"fontSize": "10px"
}
},
"defaultProps": {
"size": "md"
}
},
"Code": {
"baseStyle": {
"fontFamily": "mono",
"fontSize": "sm",
"px": "0.2em",
"borderRadius": "sm"
},
"variants": {},
"defaultProps": {
"variant": "subtle",
"colorScheme": "gray"
}
},
"Drawer": {
"parts": [
"overlay",
"dialogContainer",
"dialog",
"header",
"body",
"footer"
],
"sizes": {
"xs": {
"dialog": {
"maxW": "xs"
}
},
"sm": {
"dialog": {
"maxW": "md"
}
},
"md": {
"dialog": {
"maxW": "lg"
}
},
"lg": {
"dialog": {
"maxW": "2xl"
}
},
"xl": {
"dialog": {
"maxW": "4xl"
}
},
"full": {
"dialog": {
"maxW": "100vw",
"h": "100vh"
}
}
},
"defaultProps": {
"size": "xs"
}
},
"Editable": {
"parts": [
"preview",
"input"
],
"baseStyle": {
"preview": {
"borderRadius": "md",
"py": "3px",
"transition": "all 0.2s"
},
"input": {
"borderRadius": "md",
"py": "3px",
"transition": "all 0.2s",
"width": "full",
"_focus": {
"boxShadow": "outline"
},
"_placeholder": {
"opacity": 0.6
}
}
}
},
"Form": {
"parts": [
"requiredIndicator",
"helperText"
]
},
"FormLabel": {
"baseStyle": {
"fontSize": "md",
"mr": 3,
"mb": 2,
"fontWeight": "medium",
"transition": "all 0.2s",
"opacity": 1,
"_disabled": {
"opacity": 0.4
}
}
},
"Heading": {
"baseStyle": {
"fontFamily": "heading",
"fontWeight": "bold"
},
"sizes": {
"4xl": {
"fontSize": [
"6xl",
null,
"7xl"
],
"lineHeight": 1
},
"3xl": {
"fontSize": [
"5xl",
null,
"6xl"
],
"lineHeight": 1
},
"2xl": {
"fontSize": [
"4xl",
null,
"5xl"
],
"lineHeight": [
"2.5rem",
null,
"1"
]
},
"xl": {
"fontSize": [
"3xl",
null,
"4xl"
],
"lineHeight": [
"2.25rem",
null,
"2.5rem"
]
},
"lg": {
"fontSize": [
"2xl",
null,
"3xl"
],
"lineHeight": [
"2rem",
null,
"2.25rem"
]
},
"md": {
"fontSize": "xl",
"lineHeight": "1.75rem"
},
"sm": {
"fontSize": "md",
"lineHeight": "1.5rem"
},
"xs": {
"fontSize": "sm",
"lineHeight": "1.25rem"
}
},
"defaultProps": {
"size": "xl"
}
},
"Input": {
"parts": [
"field",
"addon"
],
"baseStyle": {
"field": {
"width": "100%",
"outline": 0,
"position": "relative",
"appearance": "none",
"transition": "all 0.2s"
}
},
"sizes": {
"lg": {
"field": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
},
"addon": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
}
},
"md": {
"field": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
},
"addon": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
}
},
"sm": {
"field": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
},
"addon": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
}
}
},
"variants": {
"unstyled": {
"field": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
},
"addon": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
}
}
},
"defaultProps": {
"size": "md",
"variant": "outline"
}
},
"Kbd": {},
"Link": {
"baseStyle": {
"transition": "all 0.15s ease-out",
"cursor": "pointer",
"textDecoration": "none",
"outline": "none",
"color": "inherit",
"_hover": {
"textDecoration": "underline"
},
"_focus": {
"boxShadow": "outline"
}
}
},
"Menu": {
"parts": [
"item",
"command",
"list",
"button",
"groupTitle",
"divider"
]
},
"Modal": {
"parts": [
"overlay",
"dialogContainer",
"dialog",
"header",
"body",
"footer"
],
"sizes": {
"xs": {
"dialog": {
"maxW": "xs"
}
},
"sm": {
"dialog": {
"maxW": "sm"
}
},
"md": {
"dialog": {
"maxW": "md"
}
},
"lg": {
"dialog": {
"maxW": "lg"
}
},
"xl": {
"dialog": {
"maxW": "xl"
}
},
"2xl": {
"dialog": {
"maxW": "2xl"
}
},
"3xl": {
"dialog": {
"maxW": "3xl"
}
},
"4xl": {
"dialog": {
"maxW": "4xl"
}
},
"5xl": {
"dialog": {
"maxW": "5xl"
}
},
"6xl": {
"dialog": {
"maxW": "6xl"
}
},
"full": {
"dialog": {
"maxW": "100vw",
"h": "100vh"
}
}
},
"defaultProps": {
"size": "md"
}
},
"NumberInput": {
"parts": [
"field",
"stepper",
"stepperGroup"
],
"sizes": {
"sm": {
"field": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
},
"stepper": {
"fontSize": "10px",
"_first": {
"borderTopRightRadius": "sm"
},
"_last": {
"borderBottomRightRadius": "sm",
"mt": "-1px",
"borderTopWidth": 1
}
}
},
"md": {
"field": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
},
"stepper": {
"fontSize": "10px",
"_first": {
"borderTopRightRadius": "md"
},
"_last": {
"borderBottomRightRadius": "md",
"mt": "-1px",
"borderTopWidth": 1
}
}
},
"lg": {
"field": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
},
"stepper": {
"fontSize": "14px",
"_first": {
"borderTopRightRadius": "md"
},
"_last": {
"borderBottomRightRadius": "md",
"mt": "-1px",
"borderTopWidth": 1
}
}
}
},
"variants": {
"unstyled": {
"field": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
},
"addon": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
}
}
},
"defaultProps": {
"size": "md",
"variant": "outline"
}
},
"PinInput": {
"baseStyle": {
"width": "100%",
"outline": 0,
"position": "relative",
"appearance": "none",
"transition": "all 0.2s",
"textAlign": "center"
},
"sizes": {
"lg": {
"fontSize": "lg",
"w": 12,
"h": 12,
"borderRadius": "md"
},
"md": {
"fontSize": "md",
"w": 10,
"h": 10,
"borderRadius": "md"
},
"sm": {
"fontSize": "sm",
"w": 8,
"h": 8,
"borderRadius": "sm"
}
},
"variants": {
"unstyled": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
}
},
"defaultProps": {
"size": "md",
"variant": "outline"
}
},
"Popover": {
"parts": [
"popper",
"content",
"header",
"body",
"footer",
"arrow"
]
},
"Progress": {
"parts": [
"track",
"filledTrack",
"panel"
],
"sizes": {
"xs": {
"track": {
"h": "0.25rem"
}
},
"sm": {
"track": {
"h": "0.5rem"
}
},
"md": {
"track": {
"h": "0.75rem"
}
},
"lg": {
"track": {
"h": "1rem"
}
}
},
"defaultProps": {
"size": "md",
"colorScheme": "blue"
}
},
"Radio": {
"parts": [
"control",
"label"
],
"sizes": {
"md": {
"control": {
"w": 4,
"h": 4
},
"label": {
"fontSize": "md"
}
},
"lg": {
"control": {
"w": 5,
"h": 5
},
"label": {
"fontSize": "lg"
}
},
"sm": {
"control": {
"width": 3,
"height": 3
},
"label": {
"fontSize": "sm"
}
}
},
"defaultProps": {
"size": "md",
"colorScheme": "blue"
}
},
"Select": {
"parts": [
"field",
"icon"
],
"sizes": {
"lg": {
"field": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
},
"addon": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
}
},
"md": {
"field": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
},
"addon": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
}
},
"sm": {
"field": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
},
"addon": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
}
}
},
"variants": {
"unstyled": {
"field": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
},
"addon": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
}
}
},
"defaultProps": {
"size": "md",
"variant": "outline"
}
},
"Skeleton": {},
"SkipLink": {},
"Slider": {
"parts": [
"container",
"thumb",
"track",
"filledTrack"
],
"sizes": {},
"defaultProps": {
"size": "md",
"colorScheme": "blue"
}
},
"Spinner": {
"sizes": {
"xs": {
"w": "0.75rem",
"h": "0.75rem"
},
"sm": {
"w": "1rem",
"h": "1rem"
},
"md": {
"w": "1.5rem",
"h": "1.5rem"
},
"lg": {
"w": "2rem",
"h": "2rem"
},
"xl": {
"w": "3rem",
"h": "3rem"
}
},
"defaultProps": {
"size": "md"
}
},
"Stat": {
"parts": [
"label",
"number",
"icon",
"helpText"
],
"baseStyle": {
"label": {
"fontWeight": "medium"
},
"helpText": {
"opacity": 0.8,
"marginBottom": 2
},
"number": {
"verticalAlign": "baseline",
"fontWeight": "semibold"
},
"icon": {
"mr": 1,
"w": "14px",
"h": "14px",
"verticalAlign": "middle"
}
},
"sizes": {
"md": {
"label": {
"fontSize": "sm"
},
"helpText": {
"fontSize": "sm"
},
"number": {
"fontSize": "2xl"
}
}
},
"defaultProps": {
"size": "md"
}
},
"Switch": {
"parts": [
"track",
"thumb"
],
"sizes": {
"sm": {
"track": {
"w": "1.375rem",
"h": "0.75rem"
},
"thumb": {
"w": "0.75rem",
"h": "0.75rem",
"_checked": {
"transform": "translateX(0.625rem)"
}
}
},
"md": {
"track": {
"w": "1.875rem",
"h": "1rem"
},
"thumb": {
"w": "1rem",
"h": "1rem",
"_checked": {
"transform": "translateX(0.875rem)"
}
}
},
"lg": {
"track": {
"w": "2.875rem",
"h": "1.5rem"
},
"thumb": {
"w": "1.5rem",
"h": "1.5rem",
"_checked": {
"transform": "translateX(1.375rem)"
}
}
}
},
"defaultProps": {
"size": "md",
"colorScheme": "blue"
}
},
"Tabs": {
"parts": [
"tablist",
"tab",
"tabpanel",
"indicator"
],
"sizes": {
"sm": {
"tab": {
"py": "0.25rem",
"px": "1rem",
"fontSize": "0.85rem"
}
},
"md": {
"tab": {
"fontSize": "1rem",
"py": "0.5rem",
"px": "1rem"
}
},
"lg": {
"tab": {
"fontSize": "1.15rem",
"py": "0.75rem",
"px": "1rem"
}
}
},
"variants": {
"unstyled": {}
},
"defaultProps": {
"size": "md",
"variant": "line",
"colorScheme": "blue"
}
},
"Tag": {
"parts": [
"container",
"label",
"closeButton"
],
"variants": {},
"baseStyle": {
"container": {
"fontWeight": "medium",
"lineHeight": 1.2,
"outline": 0,
"_focus": {
"boxShadow": "outline"
}
},
"label": {
"lineHeight": 1.2
},
"closeButton": {
"fontSize": "18px",
"w": "1.25rem",
"h": "1.25rem",
"borderRadius": "full",
"ml": "0.375rem",
"mr": "-1",
"opacity": 0.5,
"_disabled": {
"opacity": 0.4
},
"_focus": {
"boxShadow": "outline",
"bg": "rgba(0, 0, 0, 0.14)"
},
"_hover": {
"opacity": 0.8
},
"_active": {
"opacity": 1
}
}
},
"sizes": {
"sm": {
"container": {
"minH": "1.25rem",
"minW": "1.25rem",
"fontSize": "xs",
"px": 2,
"borderRadius": "md"
},
"closeButton": {
"mr": "-2px",
"ml": "0.35rem"
}
},
"md": {
"container": {
"minH": "1.5rem",
"minW": "1.5rem",
"fontSize": "sm",
"borderRadius": "md",
"px": 2
}
},
"lg": {
"container": {
"minH": 8,
"minW": 8,
"fontSize": "md",
"borderRadius": "md",
"px": 3
}
}
},
"defaultProps": {
"size": "md",
"variant": "subtle",
"colorScheme": "gray"
}
},
"Textarea": {
"baseStyle": {
"width": "100%",
"outline": 0,
"position": "relative",
"appearance": "none",
"transition": "all 0.2s",
"paddingY": "8px",
"minHeight": "80px",
"lineHeight": "short"
},
"sizes": {
"sm": {
"fontSize": "sm",
"pl": 3,
"pr": 3,
"h": 8,
"borderRadius": "sm"
},
"md": {
"fontSize": "md",
"pl": 4,
"pr": 4,
"h": 10,
"borderRadius": "md"
},
"lg": {
"fontSize": "lg",
"pl": 4,
"pr": 4,
"h": 12,
"borderRadius": "md"
}
},
"variants": {
"unstyled": {
"bg": "transparent",
"pl": 0,
"pr": 0,
"height": "auto"
}
},
"defaultProps": {
"size": "md",
"variant": "outline"
}
},
"Tooltip": {},
"FormError": {
"parts": [
"text",
"icon"
]
}
},
"styles": {},
"config": {
"useSystemColorMode": false,
"initialColorMode": "light"
},
"layerStyles": {
"card": {
"primary": {
"bg": "elevated",
"color": "text",
"p": 8,
"borderRadius": "xl",
"boxShadow": "card",
"overflow": "hidden"
},
"sunken": {
"bg": "sunken",
"p": [
4,
8
],
"borderRadius": "xl"
},
"interactive": {
"bg": "elevated",
"color": "text",
"p": [
4,
8
],
"borderRadius": "xl",
"boxShadow": "card",
"overflow": "hidden",
"textDecoration": "none",
"WebkitTapHighlightColor": "transparent",
"transition": "transform .125s ease-in-out, box-shadow .125s ease-in-out",
":hover,:focus": {
"transform": "scale(1.0625)",
"boxShadow": "elevated"
}
},
"translucent": {
"backgroundColor": "rgba(255, 255, 255, 0.98)",
"color": "text",
"boxShadow": "none",
"@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none)": {
"backgroundColor": "rgba(255, 255, 255, 0.75)",
"backdropFilter": "saturate(180%) blur(20px)",
"WebkitBackdropFilter": "saturate(180%) blur(20px)"
},
"@media (prefers-reduced-transparency: reduce)": {
"backdropFilter": "none",
"WebkitBackdropFilter": "none"
}
},
"translucentDark": {
"backgroundColor": "rgba(0, 0, 0, 0.875)",
"color": "white",
"boxShadow": "none",
"@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none)": {
"backgroundColor": "rgba(0, 0, 0, 0.625)",
"backdropFilter": "saturate(180%) blur(16px)",
"WebkitBackdropFilter": "saturate(180%) blur(16px)"
},
"@media (prefers-reduced-transparency: reduce)": {
"backdropFilter": "none",
"WebkitBackdropFilter": "none"
}
}
}
},
"textStyles": {
"heading": {
"fontWeight": "bold",
"lineHeight": "heading",
"mt": 0,
"mb": 0
},
"ultratitle": {
"fontSize": [
"3xl",
"4xl",
"5xl"
],
"lineHeight": "limit",
"fontWeight": "bold",
"letterSpacing": "title"
},
"title": {
"fontSize": [
"2xl",
"3xl",
"4xl"
],
"fontWeight": "bold",
"letterSpacing": "title",
"lineHeight": "title"
},
"subtitle": {
"mt": 4,
"fontSize": [
"lg",
"xl"
],
"fontWeight": "body",
"letterSpacing": "headline",
"lineHeight": "subheading"
},
"headline": {
"fontWeight": "bold",
"letterSpacing": "headline",
"lineHeight": "heading",
"fontSize": "2xl",
"mt": 4,
"mb": 4
},
"subheadline": {
"fontWeight": "bold",
"lineHeight": "heading",
"letterSpacing": "headline",
"fontSize": "lg",
"mt": 0,
"mb": 4
},
"eyebrow": {
"color": "muted",
"fontSize": [
"xl",
"2xl"
],
"fontWeight": "heading",
"letterSpacing": "headline",
"lineHeight": "subheading",
"textTransform": "uppercase",
"mt": 0,
"mb": 2
},
"lead": {
"fontSize": [
"lg",
"xl"
],
"my": [
2,
4
]
},
"caption": {
"color": "muted",
"fontWeight": "medium",
"letterSpacing": "headline",
"lineHeight": "caption"
}
},
"mdx": {
"h1": {
"mt": "2rem",
"mb": ".25rem",
"lineHeight": 1.2,
"fontWeight": "bold",
"fontSize": "1.875rem",
"letterSpacing": "-.025em"
},
"h2": {
"mt": "4rem",
"mb": "0.5rem",
"lineHeight": 1,
"fontWeight": "semibold",
"fontSize": "1.5rem",
"letterSpacing": "-.025em",
"& + h3": {
"mt": "1.5rem"
}
},
"h3": {
"mt": "3rem",
"lineHeight": 1.25,
"fontWeight": "semibold",
"fontSize": "1.25rem",
"letterSpacing": "-.025em"
},
"h4": {
"mt": "3rem",
"lineHeight": 1.375,
"fontWeight": "semibold",
"fontSize": "1.125rem"
},
"a": {
"color": "teal.500",
"fontWeight": "semibold",
"transition": "color 0.15s",
"transitionTimingFunction": "ease-out",
"_hover": {
"color": "teal.600"
}
},
"p": {
"mt": "1.25rem",
"lineHeight": 1.7,
"blockquote &": {
"mt": 0
}
},
"hr": {
"my": "4rem"
},
"ul": {
"mt": "1.5rem",
"ml": "1.25rem",
"blockquote &": {
"mt": 0
},
"& > * + *": {
"mt": "0.25rem"
}
},
"code": {
"rounded": "sm",
"px": "1",
"fontSize": "0.875em",
"py": "2px",
"whiteSpace": "nowrap",
"lineHeight": "normal"
}
},
"layout": {
"container": {
"maxWidth": [
"layout",
null,
"layoutPlus"
],
"width": "100%",
"mx": "auto",
"px": 4
},
"wide": {
"width": "100%",
"mx": "auto",
"px": 4,
"maxWidth": [
"layout",
null,
"wide"
]
},
"copy": {
"width": "100%",
"mx": "auto",
"px": 4,
"maxWidth": [
"copy",
null,
"copyPlus"
]
},
"narrow": {
"width": "100%",
"mx": "auto",
"px": 4,
"maxWidth": [
"narrow",
null,
"narrowPlus"
]
}
}
}