Design Tokens
1336 tokens across 4 sets
900 / 1336
| Name | Type | Group | Preview | Light | Dark | |
|---|---|---|---|---|---|---|
| --spacing-s-xs | dimension | semantic/spacing | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --spacing-s-sm | dimension | semantic/spacing | calc(var(--spacing) * 7.5) | calc(var(--spacing) * 7.5) | — | |
| --spacing-s-md | dimension | semantic/spacing | calc(var(--spacing) * 9) | calc(var(--spacing) * 9) | — | |
| --spacing-s-lg | dimension | semantic/spacing | calc(var(--spacing) * 12) | calc(var(--spacing) * 12) | — | |
| --spacing-s-xl | dimension | semantic/spacing | calc(var(--spacing) * 16) | calc(var(--spacing) * 16) | — | |
| --size-xl | dimension | sizes | 48 | 48rem | — | |
| --size-lg | dimension | sizes | 32 | 32rem | — | |
| --size-md | dimension | sizes | 24 | 24rem | — | |
| --radius | dimension | theme/blue | 0.25 | 0.25rem | — | |
| --font-sans | fontFamily | theme/blue | Aa | var(--font-google-sans) | — | |
| --semantic-size-xs | dimension | sizes | calc(var(--spacing) * 6.5) | calc(var(--spacing) * 6.5) | — | |
| --semantic-size-sm | dimension | sizes | calc(var(--spacing) * 7.5) | calc(var(--spacing) * 7.5) | — | |
| --semantic-size-md | dimension | sizes | calc(var(--spacing) * 9) | calc(var(--spacing) * 9) | — | |
| --semantic-size-lg | dimension | sizes | calc(var(--spacing) * 11) | calc(var(--spacing) * 11) | — | |
| --semantic-size-xl | dimension | sizes | calc(var(--spacing) * 14) | calc(var(--spacing) * 14) | — | |
| --semantic-size-xxl | dimension | sizes | calc(var(--spacing) * 18) | calc(var(--spacing) * 18) | — | |
| --semantic-padding-xs | dimension | sizes | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --semantic-padding-sm | dimension | sizes | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --semantic-padding-md | dimension | sizes | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --semantic-padding-lg | dimension | sizes | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --semantic-padding-xl | dimension | sizes | calc(var(--spacing) * 8) | calc(var(--spacing) * 8) | — | |
| --semantic-padding-xxl | dimension | sizes | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --spacing | dimension | breakpoints | 0.25 | 0.25rem | — | |
| --breakpoint-sm | dimension | breakpoints | 40 | 40rem | — | |
| --breakpoint-md | dimension | breakpoints | 48 | 48rem | — | |
| --breakpoint-lg | dimension | breakpoints | 64 | 64rem | — | |
| --breakpoint-xl | dimension | breakpoints | 80 | 80rem | — | |
| --breakpoint-2xl | dimension | breakpoints | 96 | 96rem | — | |
| --container-8xl | dimension | semantic/scale | calc(var(--spacing) * 384) | calc(var(--spacing) * 384) | — | |
| --container-9xl | dimension | semantic/scale | calc(var(--spacing) * 512) | calc(var(--spacing) * 512) | — | |
| --font-serif | fontFamily | typography | Aa | ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif | — | |
| --font-mono | fontFamily | typography | Aa | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | — | |
| --fontSize-xs | dimension | semantic/typography | 0.625 | 0.625rem | — | |
| --fontSize-sm | dimension | semantic/typography | 0.75 | 0.75rem | — | |
| --fontSize-base | dimension | semantic/typography | 1 | 1rem | — | |
| --fontSize-lg | dimension | semantic/typography | 1.125 | 1.125rem | — | |
| --fontSize-xl | dimension | semantic/typography | 1.25 | 1.25rem | — | |
| --fontSize-2xl | dimension | semantic/typography | 1.5 | 1.5rem | — | |
| --fontSize-3xl | dimension | semantic/typography | 1.875 | 1.875rem | — | |
| --fontSize-4xl | dimension | semantic/typography | 2.25 | 2.25rem | — | |
| --fontSize-5xl | dimension | semantic/typography | 3 | 3rem | — | |
| --fontSize-6xl | dimension | semantic/typography | 3.75 | 3.75rem | — | |
| --fontSize-7xl | dimension | semantic/typography | 4.5 | 4.5rem | — | |
| --fontSize-8xl | dimension | semantic/typography | 6 | 6rem | — | |
| --fontSize-9xl | dimension | semantic/typography | 8 | 8rem | — | |
| --lineHeight-xs | number | semantic/typography | calc(1 / 0.75) | — | ||
| --lineHeight-sm | number | semantic/typography | calc(1.25 / 0.875) | — | ||
| --lineHeight-base | number | semantic/typography | calc(1.5 / 1) | — | ||
| --lineHeight-lg | number | semantic/typography | calc(1.75 / 1.125) | — | ||
| --lineHeight-xl | number | semantic/typography | calc(1.75 / 1.25) | — | ||
| --lineHeight-2xl | number | semantic/typography | calc(2 / 1.5) | — | ||
| --lineHeight-3xl | number | semantic/typography | calc(2.25 / 1.875) | — | ||
| --lineHeight-4xl | number | semantic/typography | calc(2.5 / 2.25) | — | ||
| --lineHeight-5xl | number | semantic/typography | 1 | — | ||
| --lineHeight-6xl | number | semantic/typography | 1 | — | ||
| --lineHeight-7xl | number | semantic/typography | 1 | — | ||
| --lineHeight-8xl | number | semantic/typography | 1 | — | ||
| --lineHeight-9xl | number | semantic/typography | 1 | — | ||
| --fontWeight-thin | fontWeight | semantic/typography | Aa | 100 | — | |
| --fontWeight-extralight | fontWeight | semantic/typography | Aa | 200 | — | |
| --fontWeight-light | fontWeight | semantic/typography | Aa | 300 | — | |
| --fontWeight-normal | fontWeight | semantic/typography | Aa | 400 | — | |
| --fontWeight-medium | fontWeight | semantic/typography | Aa | 500 | — | |
| --fontWeight-semibold | fontWeight | semantic/typography | Aa | 600 | — | |
| --fontWeight-bold | fontWeight | semantic/typography | Aa | 700 | — | |
| --fontWeight-extrabold | fontWeight | semantic/typography | Aa | 800 | — | |
| --fontWeight-black | fontWeight | semantic/typography | Aa | 900 | — | |
| --tracking-tighter | dimension | semantic/typography | -0.05 | -0.05em | — | |
| --tracking-tight | dimension | semantic/typography | -0.025 | -0.025em | — | |
| --tracking-normal | dimension | semantic/typography | 0 | 0em | — | |
| --tracking-wide | dimension | semantic/typography | 0.025 | 0.025em | — | |
| --tracking-wider | dimension | semantic/typography | 0.05 | 0.05em | — | |
| --tracking-widest | dimension | semantic/typography | 0.1 | 0.1em | — | |
| --leading-tight | number | semantic/typography | 1.25 | — | ||
| --leading-snug | number | semantic/typography | 1.375 | — | ||
| --leading-normal | number | semantic/typography | 1.5 | — | ||
| --leading-relaxed | number | semantic/typography | 1.625 | — | ||
| --leading-loose | number | semantic/typography | 2 | — | ||
| --easing-in | cubicBezier | motion | cubic-bezier(0.4, 0, 1, 1) | — | ||
| --easing-out | cubicBezier | motion | cubic-bezier(0, 0, 0.2, 1) | — | ||
| --easing-in-out | cubicBezier | motion | cubic-bezier(0.4, 0, 0.2, 1) | — | ||
| --animation-spin | string | motion | spin 1s linear infinite | — | ||
| --animation-ping | string | motion | ping 1s cubic-bezier(0, 0, 0.2, 1) infinite | — | ||
| --animation-pulse | string | motion | pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite | — | ||
| --animation-bounce | string | motion | bounce 1s infinite | — | ||
| --transition-duration | duration | motion | 150ms | — | ||
| --transition-timingFunction | cubicBezier | motion | cubic-bezier(0.4, 0, 0.2, 1) | — | ||
| --blur-xs | dimension | semantic/effects | var(--spacing) | var(--spacing) | — | |
| --blur-sm | dimension | semantic/effects | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --blur-md | dimension | semantic/effects | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --blur-lg | dimension | semantic/effects | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --blur-xl | dimension | semantic/effects | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --blur-2xl | dimension | semantic/effects | calc(var(--spacing) * 10) | calc(var(--spacing) * 10) | — | |
| --blur-3xl | dimension | semantic/effects | calc(var(--spacing) * 16) | calc(var(--spacing) * 16) | — | |
| --perspective-dramatic | dimension | semantic/effects | calc(var(--spacing) * 25) | calc(var(--spacing) * 25) | — | |
| --perspective-near | dimension | semantic/effects | calc(var(--spacing) * 75) | calc(var(--spacing) * 75) | — | |
| --perspective-normal | dimension | semantic/effects | calc(var(--spacing) * 125) | calc(var(--spacing) * 125) | — | |
| --perspective-midrange | dimension | semantic/effects | calc(var(--spacing) * 200) | calc(var(--spacing) * 200) | — | |
| --perspective-distant | dimension | semantic/effects | calc(var(--spacing) * 300) | calc(var(--spacing) * 300) | — | |
| --aspect-video | string | semantic/effects | 16 / 9 | — | ||
| --red-50 | color | palette | OKLCHoklch(97.1% 0.013 17.38) | — | ||
| --red-100 | color | palette | OKLCHoklch(93.6% 0.032 17.717) | — | ||
| --red-200 | color | palette | OKLCHoklch(88.5% 0.062 18.334) | — | ||
| --red-300 | color | palette | OKLCHoklch(80.8% 0.114 19.571) | — | ||
| --red-400 | color | palette | OKLCHoklch(70.4% 0.191 22.216) | — | ||
| --red-500 | color | palette | OKLCHoklch(63.7% 0.237 25.331) | — | ||
| --red-600 | color | palette | OKLCHoklch(57.7% 0.245 27.325) | — | ||
| --red-700 | color | palette | OKLCHoklch(50.5% 0.213 27.518) | — | ||
| --red-800 | color | palette | OKLCHoklch(44.4% 0.177 26.899) | — | ||
| --red-900 | color | palette | OKLCHoklch(39.6% 0.141 25.723) | — | ||
| --red-950 | color | palette | OKLCHoklch(25.8% 0.092 26.042) | — | ||
| --orange-50 | color | palette | OKLCHoklch(98% 0.016 73.684) | — | ||
| --orange-100 | color | palette | OKLCHoklch(95.4% 0.038 75.164) | — | ||
| --orange-200 | color | palette | OKLCHoklch(90.1% 0.076 70.697) | — | ||
| --orange-300 | color | palette | OKLCHoklch(83.7% 0.128 66.29) | — | ||
| --orange-400 | color | palette | OKLCHoklch(75% 0.183 55.934) | — | ||
| --orange-500 | color | palette | OKLCHoklch(70.5% 0.213 47.604) | — | ||
| --orange-600 | color | palette | OKLCHoklch(64.6% 0.222 41.116) | — | ||
| --orange-700 | color | palette | OKLCHoklch(55.3% 0.195 38.402) | — | ||
| --orange-800 | color | palette | OKLCHoklch(47% 0.157 37.304) | — | ||
| --orange-900 | color | palette | OKLCHoklch(40.8% 0.123 38.172) | — | ||
| --orange-950 | color | palette | OKLCHoklch(26.6% 0.079 36.259) | — | ||
| --amber-50 | color | palette | OKLCHoklch(98.7% 0.022 95.277) | — | ||
| --amber-100 | color | palette | OKLCHoklch(96.2% 0.059 95.617) | — | ||
| --amber-200 | color | palette | OKLCHoklch(92.4% 0.12 95.746) | — | ||
| --amber-300 | color | palette | OKLCHoklch(87.9% 0.169 91.605) | — | ||
| --amber-400 | color | palette | OKLCHoklch(82.8% 0.189 84.429) | — | ||
| --amber-500 | color | palette | OKLCHoklch(76.9% 0.188 70.08) | — | ||
| --amber-600 | color | palette | OKLCHoklch(66.6% 0.179 58.318) | — | ||
| --amber-700 | color | palette | OKLCHoklch(55.5% 0.163 48.998) | — | ||
| --amber-800 | color | palette | OKLCHoklch(47.3% 0.137 46.201) | — | ||
| --amber-900 | color | palette | OKLCHoklch(41.4% 0.112 45.904) | — | ||
| --amber-950 | color | palette | OKLCHoklch(27.9% 0.077 45.635) | — | ||
| --yellow-50 | color | palette | OKLCHoklch(98.7% 0.026 102.212) | — | ||
| --yellow-100 | color | palette | OKLCHoklch(97.3% 0.071 103.193) | — | ||
| --yellow-200 | color | palette | OKLCHoklch(94.5% 0.129 101.54) | — | ||
| --yellow-300 | color | palette | OKLCHoklch(90.5% 0.182 98.111) | — | ||
| --yellow-400 | color | palette | OKLCHoklch(85.2% 0.199 91.936) | — | ||
| --yellow-500 | color | palette | OKLCHoklch(79.5% 0.184 86.047) | — | ||
| --yellow-600 | color | palette | OKLCHoklch(68.1% 0.162 75.834) | — | ||
| --yellow-700 | color | palette | OKLCHoklch(55.4% 0.135 66.442) | — | ||
| --yellow-800 | color | palette | OKLCHoklch(47.6% 0.114 61.907) | — | ||
| --yellow-900 | color | palette | OKLCHoklch(42.1% 0.095 57.708) | — | ||
| --yellow-950 | color | palette | OKLCHoklch(28.6% 0.066 53.813) | — | ||
| --lime-50 | color | palette | OKLCHoklch(98.6% 0.031 120.757) | — | ||
| --lime-100 | color | palette | OKLCHoklch(96.7% 0.067 122.328) | — | ||
| --lime-200 | color | palette | OKLCHoklch(93.8% 0.127 124.321) | — | ||
| --lime-300 | color | palette | OKLCHoklch(89.7% 0.196 126.665) | — | ||
| --lime-400 | color | palette | OKLCHoklch(84.1% 0.238 128.85) | — | ||
| --lime-500 | color | palette | OKLCHoklch(76.8% 0.233 130.85) | — | ||
| --lime-600 | color | palette | OKLCHoklch(64.8% 0.2 131.684) | — | ||
| --lime-700 | color | palette | OKLCHoklch(53.2% 0.157 131.589) | — | ||
| --lime-800 | color | palette | OKLCHoklch(45.3% 0.124 130.933) | — | ||
| --lime-900 | color | palette | OKLCHoklch(40.5% 0.101 131.063) | — | ||
| --lime-950 | color | palette | OKLCHoklch(27.4% 0.072 132.109) | — | ||
| --green-50 | color | palette | OKLCHoklch(98.2% 0.018 155.826) | — | ||
| --green-100 | color | palette | OKLCHoklch(96.2% 0.044 156.743) | — | ||
| --green-200 | color | palette | OKLCHoklch(92.5% 0.084 155.995) | — | ||
| --green-300 | color | palette | OKLCHoklch(87.1% 0.15 154.449) | — | ||
| --green-400 | color | palette | OKLCHoklch(79.2% 0.209 151.711) | — | ||
| --green-500 | color | palette | OKLCHoklch(72.3% 0.219 149.579) | — | ||
| --green-600 | color | palette | OKLCHoklch(62.7% 0.194 149.214) | — | ||
| --green-700 | color | palette | OKLCHoklch(52.7% 0.154 150.069) | — | ||
| --green-800 | color | palette | OKLCHoklch(44.8% 0.119 151.328) | — | ||
| --green-900 | color | palette | OKLCHoklch(39.3% 0.095 152.535) | — | ||
| --green-950 | color | palette | OKLCHoklch(26.6% 0.065 152.934) | — | ||
| --emerald-50 | color | palette | OKLCHoklch(97.9% 0.021 166.113) | — | ||
| --emerald-100 | color | palette | OKLCHoklch(95% 0.052 163.051) | — | ||
| --emerald-200 | color | palette | OKLCHoklch(90.5% 0.093 164.15) | — | ||
| --emerald-300 | color | palette | OKLCHoklch(84.5% 0.143 164.978) | — | ||
| --emerald-400 | color | palette | OKLCHoklch(76.5% 0.177 163.223) | — | ||
| --emerald-500 | color | palette | OKLCHoklch(69.6% 0.17 162.48) | — | ||
| --emerald-600 | color | palette | OKLCHoklch(59.6% 0.145 163.225) | — | ||
| --emerald-700 | color | palette | OKLCHoklch(50.8% 0.118 165.612) | — | ||
| --emerald-800 | color | palette | OKLCHoklch(43.2% 0.095 166.913) | — | ||
| --emerald-900 | color | palette | OKLCHoklch(37.8% 0.077 168.94) | — | ||
| --emerald-950 | color | palette | OKLCHoklch(26.2% 0.051 172.552) | — | ||
| --teal-50 | color | palette | OKLCHoklch(98.4% 0.014 180.72) | — | ||
| --teal-100 | color | palette | OKLCHoklch(95.3% 0.051 180.801) | — | ||
| --teal-200 | color | palette | OKLCHoklch(91% 0.096 180.426) | — | ||
| --teal-300 | color | palette | OKLCHoklch(85.5% 0.138 181.071) | — | ||
| --teal-400 | color | palette | OKLCHoklch(77.7% 0.152 181.912) | — | ||
| --teal-500 | color | palette | OKLCHoklch(70.4% 0.14 182.503) | — | ||
| --teal-600 | color | palette | OKLCHoklch(60% 0.118 184.704) | — | ||
| --teal-700 | color | palette | OKLCHoklch(51.1% 0.096 186.391) | — | ||
| --teal-800 | color | palette | OKLCHoklch(43.7% 0.078 188.216) | — | ||
| --teal-900 | color | palette | OKLCHoklch(38.6% 0.063 188.416) | — | ||
| --teal-950 | color | palette | OKLCHoklch(27.7% 0.046 192.524) | — | ||
| --cyan-50 | color | palette | OKLCHoklch(98.4% 0.019 200.873) | — | ||
| --cyan-100 | color | palette | OKLCHoklch(95.6% 0.045 203.388) | — | ||
| --cyan-200 | color | palette | OKLCHoklch(91.7% 0.08 205.041) | — | ||
| --cyan-300 | color | palette | OKLCHoklch(86.5% 0.127 207.078) | — | ||
| --cyan-400 | color | palette | OKLCHoklch(78.9% 0.154 211.53) | — | ||
| --cyan-500 | color | palette | OKLCHoklch(71.5% 0.143 215.221) | — | ||
| --cyan-600 | color | palette | OKLCHoklch(60.9% 0.126 221.723) | — | ||
| --cyan-700 | color | palette | OKLCHoklch(52% 0.105 223.128) | — | ||
| --cyan-800 | color | palette | OKLCHoklch(45% 0.085 224.283) | — | ||
| --cyan-900 | color | palette | OKLCHoklch(39.8% 0.07 227.392) | — | ||
| --cyan-950 | color | palette | OKLCHoklch(30.2% 0.056 229.695) | — | ||
| --sky-50 | color | palette | OKLCHoklch(97.7% 0.013 236.62) | — | ||
| --sky-100 | color | palette | OKLCHoklch(95.1% 0.026 236.824) | — | ||
| --sky-200 | color | palette | OKLCHoklch(90.1% 0.058 230.902) | — | ||
| --sky-300 | color | palette | OKLCHoklch(82.8% 0.111 230.318) | — | ||
| --sky-400 | color | palette | OKLCHoklch(74.6% 0.16 232.661) | — | ||
| --sky-500 | color | palette | OKLCHoklch(68.5% 0.169 237.323) | — | ||
| --sky-600 | color | palette | OKLCHoklch(58.8% 0.158 241.966) | — | ||
| --sky-700 | color | palette | OKLCHoklch(50% 0.134 242.749) | — | ||
| --sky-800 | color | palette | OKLCHoklch(44.3% 0.11 240.79) | — | ||
| --sky-900 | color | palette | OKLCHoklch(39.1% 0.09 240.876) | — | ||
| --sky-950 | color | palette | OKLCHoklch(29.3% 0.066 243.157) | — | ||
| --blue-50 | color | palette | OKLCHoklch(97% 0.014 254.604) | — | ||
| --blue-100 | color | palette | OKLCHoklch(93.2% 0.032 255.585) | — | ||
| --blue-200 | color | palette | OKLCHoklch(88.2% 0.059 254.128) | — | ||
| --blue-300 | color | palette | OKLCHoklch(80.9% 0.105 251.813) | — | ||
| --blue-400 | color | palette | OKLCHoklch(70.7% 0.165 254.624) | — | ||
| --blue-500 | color | palette | OKLCHoklch(62.3% 0.214 259.815) | — | ||
| --blue-600 | color | palette | OKLCHoklch(54.6% 0.245 262.881) | — | ||
| --blue-700 | color | palette | OKLCHoklch(48.8% 0.243 264.376) | — | ||
| --blue-800 | color | palette | OKLCHoklch(42.4% 0.199 265.638) | — | ||
| --blue-900 | color | palette | OKLCHoklch(37.9% 0.146 265.522) | — | ||
| --blue-950 | color | palette | OKLCHoklch(28.2% 0.091 267.935) | — | ||
| --indigo-50 | color | palette | OKLCHoklch(96.2% 0.018 272.314) | — | ||
| --indigo-100 | color | palette | OKLCHoklch(93% 0.034 272.788) | — | ||
| --indigo-200 | color | palette | OKLCHoklch(87% 0.065 274.039) | — | ||
| --indigo-300 | color | palette | OKLCHoklch(78.5% 0.115 274.713) | — | ||
| --indigo-400 | color | palette | OKLCHoklch(67.3% 0.182 276.935) | — | ||
| --indigo-500 | color | palette | OKLCHoklch(58.5% 0.233 277.117) | — | ||
| --indigo-600 | color | palette | OKLCHoklch(51.1% 0.262 276.966) | — | ||
| --indigo-700 | color | palette | OKLCHoklch(45.7% 0.24 277.023) | — | ||
| --indigo-800 | color | palette | OKLCHoklch(39.8% 0.195 277.366) | — | ||
| --indigo-900 | color | palette | OKLCHoklch(35.9% 0.144 278.697) | — | ||
| --indigo-950 | color | palette | OKLCHoklch(25.7% 0.09 281.288) | — | ||
| --violet-50 | color | palette | OKLCHoklch(96.9% 0.016 293.756) | — | ||
| --violet-100 | color | palette | OKLCHoklch(94.3% 0.029 294.588) | — | ||
| --violet-200 | color | palette | OKLCHoklch(89.4% 0.057 293.283) | — | ||
| --violet-300 | color | palette | OKLCHoklch(81.1% 0.111 293.571) | — | ||
| --violet-400 | color | palette | OKLCHoklch(70.2% 0.183 293.541) | — | ||
| --violet-500 | color | palette | OKLCHoklch(60.6% 0.25 292.717) | — | ||
| --violet-600 | color | palette | OKLCHoklch(54.1% 0.281 293.009) | — | ||
| --violet-700 | color | palette | OKLCHoklch(49.1% 0.27 292.581) | — | ||
| --violet-800 | color | palette | OKLCHoklch(43.2% 0.232 292.759) | — | ||
| --violet-900 | color | palette | OKLCHoklch(38% 0.189 293.745) | — | ||
| --violet-950 | color | palette | OKLCHoklch(28.3% 0.141 291.089) | — | ||
| --purple-50 | color | palette | OKLCHoklch(97.7% 0.014 308.299) | — | ||
| --purple-100 | color | palette | OKLCHoklch(94.6% 0.033 307.174) | — | ||
| --purple-200 | color | palette | OKLCHoklch(90.2% 0.063 306.703) | — | ||
| --purple-300 | color | palette | OKLCHoklch(82.7% 0.119 306.383) | — | ||
| --purple-400 | color | palette | OKLCHoklch(71.4% 0.203 305.504) | — | ||
| --purple-500 | color | palette | OKLCHoklch(62.7% 0.265 303.9) | — | ||
| --purple-600 | color | palette | OKLCHoklch(55.8% 0.288 302.321) | — | ||
| --purple-700 | color | palette | OKLCHoklch(49.6% 0.265 301.924) | — | ||
| --purple-800 | color | palette | OKLCHoklch(43.8% 0.218 303.724) | — | ||
| --purple-900 | color | palette | OKLCHoklch(38.1% 0.176 304.987) | — | ||
| --purple-950 | color | palette | OKLCHoklch(29.1% 0.149 302.717) | — | ||
| --fuchsia-50 | color | palette | OKLCHoklch(97.7% 0.017 320.058) | — | ||
| --fuchsia-100 | color | palette | OKLCHoklch(95.2% 0.037 318.852) | — | ||
| --fuchsia-200 | color | palette | OKLCHoklch(90.3% 0.076 319.62) | — | ||
| --fuchsia-300 | color | palette | OKLCHoklch(83.3% 0.145 321.434) | — | ||
| --fuchsia-400 | color | palette | OKLCHoklch(74% 0.238 322.16) | — | ||
| --fuchsia-500 | color | palette | OKLCHoklch(66.7% 0.295 322.15) | — | ||
| --fuchsia-600 | color | palette | OKLCHoklch(59.1% 0.293 322.896) | — | ||
| --fuchsia-700 | color | palette | OKLCHoklch(51.8% 0.253 323.949) | — | ||
| --fuchsia-800 | color | palette | OKLCHoklch(45.2% 0.211 324.591) | — | ||
| --fuchsia-900 | color | palette | OKLCHoklch(40.1% 0.17 325.612) | — | ||
| --fuchsia-950 | color | palette | OKLCHoklch(29.3% 0.136 325.661) | — | ||
| --pink-50 | color | palette | OKLCHoklch(97.1% 0.014 343.198) | — | ||
| --pink-100 | color | palette | OKLCHoklch(94.8% 0.028 342.258) | — | ||
| --pink-200 | color | palette | OKLCHoklch(89.9% 0.061 343.231) | — | ||
| --pink-300 | color | palette | OKLCHoklch(82.3% 0.12 346.018) | — | ||
| --pink-400 | color | palette | OKLCHoklch(71.8% 0.202 349.761) | — | ||
| --pink-500 | color | palette | OKLCHoklch(65.6% 0.241 354.308) | — | ||
| --pink-600 | color | palette | OKLCHoklch(59.2% 0.249 0.584) | — | ||
| --pink-700 | color | palette | OKLCHoklch(52.5% 0.223 3.958) | — | ||
| --pink-800 | color | palette | OKLCHoklch(45.9% 0.187 3.815) | — | ||
| --pink-900 | color | palette | OKLCHoklch(40.8% 0.153 2.432) | — | ||
| --pink-950 | color | palette | OKLCHoklch(28.4% 0.109 3.907) | — | ||
| --rose-50 | color | palette | OKLCHoklch(96.9% 0.015 12.422) | — | ||
| --rose-100 | color | palette | OKLCHoklch(94.1% 0.03 12.58) | — | ||
| --rose-200 | color | palette | OKLCHoklch(89.2% 0.058 10.001) | — | ||
| --rose-300 | color | palette | OKLCHoklch(81% 0.117 11.638) | — | ||
| --rose-400 | color | palette | OKLCHoklch(71.2% 0.194 13.428) | — | ||
| --rose-500 | color | palette | OKLCHoklch(64.5% 0.246 16.439) | — | ||
| --rose-600 | color | palette | OKLCHoklch(58.6% 0.253 17.585) | — | ||
| --rose-700 | color | palette | OKLCHoklch(51.4% 0.222 16.935) | — | ||
| --rose-800 | color | palette | OKLCHoklch(45.5% 0.188 13.697) | — | ||
| --rose-900 | color | palette | OKLCHoklch(41% 0.159 10.272) | — | ||
| --rose-950 | color | palette | OKLCHoklch(27.1% 0.105 12.094) | — | ||
| --slate-50 | color | palette | OKLCHoklch(98.4% 0.003 247.858) | — | ||
| --slate-100 | color | palette | OKLCHoklch(96.8% 0.007 247.896) | — | ||
| --slate-200 | color | palette | OKLCHoklch(92.9% 0.013 255.508) | — | ||
| --slate-300 | color | palette | OKLCHoklch(86.9% 0.022 252.894) | — | ||
| --slate-400 | color | palette | OKLCHoklch(70.4% 0.04 256.788) | — | ||
| --slate-500 | color | palette | OKLCHoklch(55.4% 0.046 257.417) | — | ||
| --slate-600 | color | palette | OKLCHoklch(44.6% 0.043 257.281) | — | ||
| --slate-700 | color | palette | OKLCHoklch(37.2% 0.044 257.287) | — | ||
| --slate-800 | color | palette | OKLCHoklch(27.9% 0.041 260.031) | — | ||
| --slate-900 | color | palette | OKLCHoklch(20.8% 0.042 265.755) | — | ||
| --slate-950 | color | palette | OKLCHoklch(12.9% 0.042 264.695) | — | ||
| --gray-50 | color | palette | OKLCHoklch(98.5% 0.002 247.839) | — | ||
| --gray-100 | color | palette | OKLCHoklch(96.7% 0.003 264.542) | — | ||
| --gray-200 | color | palette | OKLCHoklch(92.8% 0.006 264.531) | — | ||
| --gray-300 | color | palette | OKLCHoklch(87.2% 0.01 258.338) | — | ||
| --gray-400 | color | palette | OKLCHoklch(70.7% 0.022 261.325) | — | ||
| --gray-500 | color | palette | OKLCHoklch(55.1% 0.027 264.364) | — | ||
| --gray-600 | color | palette | OKLCHoklch(44.6% 0.03 256.802) | — | ||
| --gray-700 | color | palette | OKLCHoklch(37.3% 0.034 259.733) | — | ||
| --gray-800 | color | palette | OKLCHoklch(27.8% 0.033 256.848) | — | ||
| --gray-900 | color | palette | OKLCHoklch(21% 0.034 264.665) | — | ||
| --gray-950 | color | palette | OKLCHoklch(13% 0.028 261.692) | — | ||
| --zinc-50 | color | palette | OKLCHoklch(98.5% 0 0) | — | ||
| --zinc-100 | color | palette | OKLCHoklch(96.7% 0.001 286.375) | — | ||
| --zinc-200 | color | palette | OKLCHoklch(92% 0.004 286.32) | — | ||
| --zinc-300 | color | palette | OKLCHoklch(87.1% 0.006 286.286) | — | ||
| --zinc-400 | color | palette | OKLCHoklch(70.5% 0.015 286.067) | — | ||
| --zinc-500 | color | palette | OKLCHoklch(55.2% 0.016 285.938) | — | ||
| --zinc-600 | color | palette | OKLCHoklch(44.2% 0.017 285.786) | — | ||
| --zinc-700 | color | palette | OKLCHoklch(37% 0.013 285.805) | — | ||
| --zinc-800 | color | palette | OKLCHoklch(27.4% 0.006 286.033) | — | ||
| --zinc-900 | color | palette | OKLCHoklch(21% 0.006 285.885) | — | ||
| --zinc-950 | color | palette | OKLCHoklch(14.1% 0.005 285.823) | — | ||
| --neutral-50 | color | palette | OKLCHoklch(98.5% 0 0) | — | ||
| --neutral-100 | color | palette | OKLCHoklch(97% 0 0) | — | ||
| --neutral-200 | color | palette | OKLCHoklch(92.2% 0 0) | — | ||
| --neutral-300 | color | palette | OKLCHoklch(87% 0 0) | — | ||
| --neutral-400 | color | palette | OKLCHoklch(70.8% 0 0) | — | ||
| --neutral-500 | color | palette | OKLCHoklch(55.6% 0 0) | — | ||
| --neutral-600 | color | palette | OKLCHoklch(43.9% 0 0) | — | ||
| --neutral-700 | color | palette | OKLCHoklch(37.1% 0 0) | — | ||
| --neutral-800 | color | palette | OKLCHoklch(26.9% 0 0) | — | ||
| --neutral-900 | color | palette | OKLCHoklch(20.5% 0 0) | — | ||
| --neutral-950 | color | palette | OKLCHoklch(14.5% 0 0) | — | ||
| --stone-50 | color | palette | OKLCHoklch(98.5% 0.001 106.423) | — | ||
| --stone-100 | color | palette | OKLCHoklch(97% 0.001 106.424) | — | ||
| --stone-200 | color | palette | OKLCHoklch(92.3% 0.003 48.717) | — | ||
| --stone-300 | color | palette | OKLCHoklch(86.9% 0.005 56.366) | — | ||
| --stone-400 | color | palette | OKLCHoklch(70.9% 0.01 56.259) | — | ||
| --stone-500 | color | palette | OKLCHoklch(55.3% 0.013 58.071) | — | ||
| --stone-600 | color | palette | OKLCHoklch(44.4% 0.011 73.639) | — | ||
| --stone-700 | color | palette | OKLCHoklch(37.4% 0.01 67.558) | — | ||
| --stone-800 | color | palette | OKLCHoklch(26.8% 0.007 34.298) | — | ||
| --stone-900 | color | palette | OKLCHoklch(21.6% 0.006 56.043) | — | ||
| --stone-950 | color | palette | OKLCHoklch(14.7% 0.004 49.25) | — | ||
| --black | color | palette | Hex#000 | — | ||
| --white | color | palette | Hex#fff | — | ||
| --mauve-50 | color | palette | OKLCHoklch(98.5% 0 0) | — | ||
| --mauve-100 | color | palette | OKLCHoklch(96% 0.003 325.6) | — | ||
| --mauve-200 | color | palette | OKLCHoklch(92.2% 0.005 325.62) | — | ||
| --mauve-300 | color | palette | OKLCHoklch(86.5% 0.012 325.68) | — | ||
| --mauve-400 | color | palette | OKLCHoklch(71.1% 0.019 323.02) | — | ||
| --mauve-500 | color | palette | OKLCHoklch(54.2% 0.034 322.5) | — | ||
| --mauve-600 | color | palette | OKLCHoklch(43.5% 0.029 321.78) | — | ||
| --mauve-700 | color | palette | OKLCHoklch(36.4% 0.029 323.89) | — | ||
| --mauve-800 | color | palette | OKLCHoklch(26.3% 0.024 320.12) | — | ||
| --mauve-900 | color | palette | OKLCHoklch(21.2% 0.019 322.12) | — | ||
| --mauve-950 | color | palette | OKLCHoklch(14.5% 0.008 326) | — | ||
| --olive-50 | color | palette | OKLCHoklch(98.8% 0.003 106.5) | — | ||
| --olive-100 | color | palette | OKLCHoklch(96.6% 0.005 106.5) | — | ||
| --olive-200 | color | palette | OKLCHoklch(93% 0.007 106.5) | — | ||
| --olive-300 | color | palette | OKLCHoklch(88% 0.011 106.6) | — | ||
| --olive-400 | color | palette | OKLCHoklch(73.7% 0.021 106.9) | — | ||
| --olive-500 | color | palette | OKLCHoklch(58% 0.031 107.3) | — | ||
| --olive-600 | color | palette | OKLCHoklch(46.6% 0.025 107.3) | — | ||
| --olive-700 | color | palette | OKLCHoklch(39.4% 0.023 107.4) | — | ||
| --olive-800 | color | palette | OKLCHoklch(28.6% 0.016 107.4) | — | ||
| --olive-900 | color | palette | OKLCHoklch(22.8% 0.013 107.4) | — | ||
| --olive-950 | color | palette | OKLCHoklch(15.3% 0.006 107.1) | — | ||
| --mist-50 | color | palette | OKLCHoklch(98.7% 0.002 197.1) | — | ||
| --mist-100 | color | palette | OKLCHoklch(96.3% 0.002 197.1) | — | ||
| --mist-200 | color | palette | OKLCHoklch(92.5% 0.005 214.3) | — | ||
| --mist-300 | color | palette | OKLCHoklch(87.2% 0.007 219.6) | — | ||
| --mist-400 | color | palette | OKLCHoklch(72.3% 0.014 214.4) | — | ||
| --mist-500 | color | palette | OKLCHoklch(56% 0.021 213.5) | — | ||
| --mist-600 | color | palette | OKLCHoklch(45% 0.017 213.2) | — | ||
| --mist-700 | color | palette | OKLCHoklch(37.8% 0.015 216) | — | ||
| --mist-800 | color | palette | OKLCHoklch(27.5% 0.011 216.9) | — | ||
| --mist-900 | color | palette | OKLCHoklch(21.8% 0.008 223.9) | — | ||
| --mist-950 | color | palette | OKLCHoklch(14.8% 0.004 228.8) | — | ||
| --taupe-50 | color | palette | OKLCHoklch(98.6% 0.002 67.8) | — | ||
| --taupe-100 | color | palette | OKLCHoklch(96% 0.002 17.2) | — | ||
| --taupe-200 | color | palette | OKLCHoklch(92.2% 0.005 34.3) | — | ||
| --taupe-300 | color | palette | OKLCHoklch(86.8% 0.007 39.5) | — | ||
| --taupe-400 | color | palette | OKLCHoklch(71.4% 0.014 41.2) | — | ||
| --taupe-500 | color | palette | OKLCHoklch(54.7% 0.021 43.1) | — | ||
| --taupe-600 | color | palette | OKLCHoklch(43.8% 0.017 39.3) | — | ||
| --taupe-700 | color | palette | OKLCHoklch(36.7% 0.016 35.7) | — | ||
| --taupe-800 | color | palette | OKLCHoklch(26.8% 0.011 36.5) | — | ||
| --taupe-900 | color | palette | OKLCHoklch(21.4% 0.009 43.1) | — | ||
| --taupe-950 | color | palette | OKLCHoklch(14.7% 0.004 49.3) | — | ||
| --brand-primary | color | base/brand | OKLCHoklch(68.02% 0.09992 165.947) | — | ||
| --brand-primary-dark | color | base/brand | OKLCHoklch(91.67% 0.1329 160.61) | — | ||
| --brand-primary-foreground | color | base/brand | OKLCHoklch(98% 0.02 166) | — | ||
| --brand-primary-foreground-dark | color | base/brand | OKLCHoklch(37.1% 0 0) | — | ||
| --background | color | theme/orange | OKLCHoklch(0.9499 0.0031 57.18) | OKLCHoklch(0.18 0.018 85) | ||
| --foreground | color | theme/orange | OKLCHoklch(0.18 0.02 85) | OKLCHoklch(0.93 0.012 85) | ||
| --card | color | theme/orange | OKLCHoklch(0.95 0.014 85) | OKLCHoklch(0.22 0.02 85) | ||
| --card-foreground | color | theme/orange | OKLCHoklch(0.18 0.02 85) | OKLCHoklch(0.93 0.012 85) | ||
| --popover | color | theme/orange | OKLCHoklch(0.95 0.014 85) | OKLCHoklch(0.22 0.02 85) | ||
| --popover-foreground | color | theme/orange | OKLCHoklch(0.18 0.02 85) | OKLCHoklch(0.93 0.012 85) | ||
| --primary | color | theme/blue | OKLCHoklch(0.546 0.245 262.881) | OKLCHoklch(0.623 0.214 259.815) | ||
| --primary-foreground | color | theme/blue | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.985 0 0) | ||
| --primary-container | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-container-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-pop | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-pop-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-muted | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-muted-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --primary-border | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --secondary | color | semantic/colors | OKLCHoklch(0.97 0 0) | OKLCHoklch(0.269 0 0) | ||
| --secondary-foreground | color | semantic/colors | OKLCHoklch(0.205 0 0) | OKLCHoklch(0.985 0 0) | ||
| --muted | color | theme/orange | OKLCHoklch(0.884 0.01 85) | OKLCHoklch(0.28 0.022 85) | ||
| --muted-foreground | color | theme/orange | OKLCHoklch(0.45 0.03 85) | OKLCHoklch(0.62 0.025 85) | ||
| --accent | color | theme/orange | OKLCHoklch(0.45 0.03 85) | OKLCHoklch(0.62 0.025 85) | ||
| --accent-foreground | color | semantic/colors | OKLCHoklch(0.205 0 0) | OKLCHoklch(0.985 0 0) | ||
| --destructive | color | semantic/colors | OKLCHoklch(0.577 0.245 27.325) | OKLCHoklch(0.396 0.141 25.723) | ||
| --destructive-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.637 0.237 25.331) | ||
| --border | color | theme/orange | OKLCHoklch(0.87 0.02 85) | OKLCHoklch(0.30 0.022 85) | ||
| --input | color | theme/orange | OKLCHoklch(0.87 0.02 85) | OKLCHoklch(0.30 0.022 85) | ||
| --ring | color | theme/blue | OKLCHoklch(0.546 0.245 262.881) | OKLCHoklch(0.623 0.214 259.815) | ||
| --info | color | semantic/colors | OKLCHoklch(0.623 0.214 259.815) | OKLCHoklch(0.488 0.243 264.376) | ||
| --info-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.808 0.151 261.188) | ||
| --success | color | semantic/colors | OKLCHoklch(0.627 0.194 149.214) | OKLCHoklch(0.448 0.119 151.328) | ||
| --success-foreground | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.792 0.209 151.711) | ||
| --success-foreground-inverse | color | semantic/colors | OKLCHoklch(0.448 0.119 151.328) | OKLCHoklch(0.723 0.219 149.579) | ||
| --warning | color | semantic/colors | OKLCHoklch(0.769 0.188 70.08) | OKLCHoklch(0.666 0.179 58.318) | ||
| --warning-foreground | color | semantic/colors | OKLCHoklch(0.205 0 0) | OKLCHoklch(0.985 0 0) | ||
| --chart-1 | color | semantic/colors | OKLCHoklch(0.646 0.222 41.116) | OKLCHoklch(0.488 0.243 264.376) | ||
| --chart-2 | color | semantic/colors | OKLCHoklch(0.6 0.118 184.704) | OKLCHoklch(0.696 0.17 162.48) | ||
| --chart-3 | color | semantic/colors | OKLCHoklch(0.398 0.07 227.392) | OKLCHoklch(0.769 0.188 70.08) | ||
| --chart-4 | color | semantic/colors | OKLCHoklch(0.828 0.189 84.429) | OKLCHoklch(0.627 0.265 303.9) | ||
| --chart-5 | color | semantic/colors | OKLCHoklch(0.769 0.188 70.08) | OKLCHoklch(0.645 0.246 16.439) | ||
| --sidebar | color | semantic/colors | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.205 0 0) | ||
| --sidebar-foreground | color | semantic/colors | OKLCHoklch(0.145 0 0) | OKLCHoklch(0.985 0 0) | ||
| --sidebar-primary | color | theme/blue | OKLCHoklch(0.546 0.245 262.881) | OKLCHoklch(0.623 0.214 259.815) | ||
| --sidebar-primary-foreground | color | theme/blue | OKLCHoklch(0.985 0 0) | OKLCHoklch(0.985 0 0) | ||
| --sidebar-accent | color | semantic/colors | OKLCHoklch(0.97 0 0) | OKLCHoklch(0.269 0 0) | ||
| --sidebar-accent-foreground | color | semantic/colors | OKLCHoklch(0.205 0 0) | OKLCHoklch(0.985 0 0) | ||
| --sidebar-border | color | semantic/colors | OKLCHoklch(0.922 0 0) | OKLCHoklch(1 0 0 / 10%) | ||
| --sidebar-ring | color | theme/blue | OKLCHoklch(0.546 0.245 262.881) | OKLCHoklch(0.623 0.214 259.815) | ||
| --container-primary | color | semantic/colors | var(--primary) | var(--primary-dark) | ||
| --container-secondary | color | semantic/colors | var(--stone-200) | var(--stone-700) | ||
| --aspect-square | string | semantic/effects | 1 / 1 | — | ||
| --aspect-portrait | string | semantic/effects | 3 / 4 | — | ||
| --aspect-ultrawide | string | semantic/effects | 21 / 9 | — | ||
| --components-radius-xs | dimension | semantic/radii | var(--radius-sm) | var(--radius-sm) | — | |
| --components-radius-sm | dimension | semantic/radii | var(--radius-md) | var(--radius-md) | — | |
| --components-radius-md | dimension | semantic/radii | var(--radius-lg) | var(--radius-lg) | — | |
| --components-radius-lg | dimension | semantic/radii | var(--radius-xl) | var(--radius-xl) | — | |
| --components-radius-xl | dimension | semantic/radii | var(--radius-2xl) | var(--radius-2xl) | — | |
| --components-radius-full | dimension | semantic/radii | 9999 | 9999px | — | |
| --radius-xs | dimension | semantic/radii | 0.125 | 0.125rem | — | |
| --radius-sm | dimension | semantic/radii | calc(var(--radius) - 4px) | calc(var(--radius) - 4px) | — | |
| --radius-md | dimension | semantic/radii | calc(var(--radius) - 2px) | calc(var(--radius) - 2px) | — | |
| --radius-lg | dimension | semantic/radii | var(--radius) | var(--radius) | — | |
| --radius-xl | dimension | semantic/radii | calc(var(--radius) + 4px) | calc(var(--radius) + 4px) | — | |
| --radius-2xl | dimension | semantic/radii | calc(var(--radius) + 8px) | calc(var(--radius) + 8px) | — | |
| --radius-3xl | dimension | semantic/radii | calc(var(--radius) + 12px) | calc(var(--radius) + 12px) | — | |
| --radius-4xl | dimension | semantic/radii | calc(var(--radius) + 16px) | calc(var(--radius) + 16px) | — | |
| --components-height-2xs | dimension | semantic/scale | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --components-height-xs | dimension | semantic/scale | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --components-height-sm | dimension | semantic/scale | calc(var(--spacing) * 8) | calc(var(--spacing) * 8) | — | |
| --components-height-md | dimension | semantic/scale | calc(var(--spacing) * 9) | calc(var(--spacing) * 9) | — | |
| --components-height-lg | dimension | semantic/scale | calc(var(--spacing) * 10) | calc(var(--spacing) * 10) | — | |
| --components-height-xl | dimension | semantic/scale | calc(var(--spacing) * 11) | calc(var(--spacing) * 11) | — | |
| --components-height-2xl | dimension | semantic/scale | calc(var(--spacing) * 12) | calc(var(--spacing) * 12) | — | |
| --components-px-2xs | dimension | semantic/scale | calc(var(--spacing) * 1.5) | calc(var(--spacing) * 1.5) | — | |
| --components-px-xs | dimension | semantic/scale | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --components-px-sm | dimension | semantic/scale | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --components-px-md | dimension | semantic/scale | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --components-px-lg | dimension | semantic/scale | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --components-px-xl | dimension | semantic/scale | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --components-px-2xl | dimension | semantic/scale | calc(var(--spacing) * 8) | calc(var(--spacing) * 8) | — | |
| --components-gap-xs | dimension | semantic/scale | calc(var(--spacing) * 1) | calc(var(--spacing) * 1) | — | |
| --components-gap-sm | dimension | semantic/scale | calc(var(--spacing) * 1.5) | calc(var(--spacing) * 1.5) | — | |
| --components-gap-md | dimension | semantic/scale | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --components-gap-lg | dimension | semantic/scale | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --components-gap-xl | dimension | semantic/scale | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --components-text-2xs | dimension | semantic/scale | calc(var(--spacing) * 2.5) | calc(var(--spacing) * 2.5) | — | |
| --components-text-xs | dimension | semantic/scale | calc(var(--spacing) * 2.75) | calc(var(--spacing) * 2.75) | — | |
| --components-text-sm | dimension | semantic/scale | var(--text-xs) | var(--text-xs) | — | |
| --components-text-md | dimension | semantic/scale | var(--text-sm) | var(--text-sm) | — | |
| --components-text-lg | dimension | semantic/scale | var(--text-base) | var(--text-base) | — | |
| --components-text-xl | dimension | semantic/scale | var(--text-lg) | var(--text-lg) | — | |
| --section-2xs | dimension | semantic/scale | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --section-xs | dimension | semantic/scale | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --section-sm | dimension | semantic/scale | calc(var(--spacing) * 8) | calc(var(--spacing) * 8) | — | |
| --section-md | dimension | semantic/scale | calc(var(--spacing) * 12) | calc(var(--spacing) * 12) | — | |
| --section-lg | dimension | semantic/scale | calc(var(--spacing) * 16) | calc(var(--spacing) * 16) | — | |
| --section-xl | dimension | semantic/scale | calc(var(--spacing) * 20) | calc(var(--spacing) * 20) | — | |
| --section-2xl | dimension | semantic/scale | calc(var(--spacing) * 24) | calc(var(--spacing) * 24) | — | |
| --container-sm | dimension | semantic/scale | calc(var(--spacing) * 96) | calc(var(--spacing) * 96) | — | |
| --container-md | dimension | semantic/scale | calc(var(--spacing) * 128) | calc(var(--spacing) * 128) | — | |
| --container-lg | dimension | semantic/scale | calc(var(--spacing) * 192) | calc(var(--spacing) * 192) | — | |
| --shadows-box-2xs | shadow | semantic/shadows | 0 1px rgb(0 0 0 / 0.05) | — | ||
| --shadows-box-xs | shadow | semantic/shadows | 0 1px 2px 0 rgb(0 0 0 / 0.05) | — | ||
| --shadows-box-sm | shadow | semantic/shadows | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | — | ||
| --shadows-box-md | shadow | semantic/shadows | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | — | ||
| --shadows-box-lg | shadow | semantic/shadows | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | — | ||
| --shadows-box-xl | shadow | semantic/shadows | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | — | ||
| --shadows-box-2xl | shadow | semantic/shadows | 0 25px 50px -12px rgb(0 0 0 / 0.25) | — | ||
| --shadows-box-shadow | shadow | semantic/shadows | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | — | ||
| --shadows-box-inner | shadow | semantic/shadows | inset 0 2px 4px 0 rgb(0 0 0 / 0.05) | — | ||
| --shadows-box-drop-shadow | shadow | semantic/shadows | 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06) | — | ||
| --shadows-inset-2xs | shadow | semantic/shadows | inset 0 1px rgb(0 0 0 / 0.05) | — | ||
| --shadows-inset-xs | shadow | semantic/shadows | inset 0 1px 1px rgb(0 0 0 / 0.05) | — | ||
| --shadows-inset-sm | shadow | semantic/shadows | inset 0 2px 4px rgb(0 0 0 / 0.05) | — | ||
| --shadows-drop-xs | shadow | semantic/shadows | 0 1px 1px rgb(0 0 0 / 0.05) | — | ||
| --shadows-drop-sm | shadow | semantic/shadows | 0 1px 2px rgb(0 0 0 / 0.15) | — | ||
| --shadows-drop-md | shadow | semantic/shadows | 0 3px 3px rgb(0 0 0 / 0.12) | — | ||
| --shadows-drop-lg | shadow | semantic/shadows | 0 4px 4px rgb(0 0 0 / 0.15) | — | ||
| --shadows-drop-xl | shadow | semantic/shadows | 0 9px 7px rgb(0 0 0 / 0.1) | — | ||
| --shadows-drop-2xl | shadow | semantic/shadows | 0 25px 25px rgb(0 0 0 / 0.15) | — | ||
| --shadows-text-2xs | shadow | semantic/shadows | 0px 1px 0px rgb(0 0 0 / 0.15) | — | ||
| --shadows-text-xs | shadow | semantic/shadows | 0px 1px 1px rgb(0 0 0 / 0.2) | — | ||
| --shadows-text-sm | shadow | semantic/shadows | 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) | — | ||
| --shadows-text-md | shadow | semantic/shadows | 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) | — | ||
| --shadows-text-lg | shadow | semantic/shadows | 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) | — | ||
| --font-family-serif | fontFamily | semantic/typography | Aa | ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif | — | |
| --font-family-sans | fontFamily | semantic/typography | Aa | ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | — | |
| --font-family-mono | fontFamily | semantic/typography | Aa | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | — | |
| --fontSize-md | dimension | semantic/typography | 0.875 | 0.875rem | — | |
| --accordion-px | dimension | component/accordion | var(--component-px-lg) | var(--component-px-lg) | — | |
| --accordion-py | dimension | component/accordion | 1 | 1rem | — | |
| --accordion-gap | dimension | component/accordion | var(--component-gap-md) | var(--component-gap-md) | — | |
| --accordion-radius | dimension | component/accordion | var(--component-radius-md) | var(--component-radius-md) | — | |
| --alert-dialog-px | dimension | component/alert-dialog | var(--component-px-md) | var(--component-px-md) | — | |
| --alert-dialog-py | dimension | component/alert-dialog | var(--component-px-md) | var(--component-px-md) | — | |
| --alert-dialog-gap | dimension | component/alert-dialog | var(--component-gap-xl) | var(--component-gap-xl) | — | |
| --alert-dialog-radius | dimension | component/alert-dialog | var(--component-radius-lg) | var(--component-radius-lg) | — | |
| --alert-dialog-radix-py | dimension | component/alert-dialog | var(--component-px-xl) | var(--component-px-xl) | — | |
| --alert-dialog-radix-radius | dimension | component/alert-dialog | var(--component-radius-md) | var(--component-radius-md) | — | |
| --alert-dialog-radix-max-width | dimension | component/alert-dialog | 32 | 32rem | — | |
| --alert-px-sm | dimension | component/alert | var(--component-px-md) | var(--component-px-md) | — | |
| --alert-px-md | dimension | component/alert | var(--component-px-md) | var(--component-px-md) | — | |
| --alert-px-lg | dimension | component/alert | var(--component-px-lg) | var(--component-px-lg) | — | |
| --alert-py-sm | dimension | component/alert | 0.625 | 0.625rem | — | |
| --alert-py-md | dimension | component/alert | 0.875 | 0.875rem | — | |
| --alert-py-lg | dimension | component/alert | 1 | 1rem | — | |
| --alert-gap-sm | dimension | component/alert | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --alert-gap-md | dimension | component/alert | var(--component-gap-md) | var(--component-gap-md) | — | |
| --alert-gap-lg | dimension | component/alert | var(--component-gap-md) | var(--component-gap-md) | — | |
| --alert-text | color | component/alert | inherit | — | ||
| --alert-icon-size-sm | dimension | component/alert | 1 | 1rem | — | |
| --alert-icon-size-md | dimension | component/alert | 1.25 | 1.25rem | — | |
| --alert-icon-size-lg | dimension | component/alert | 1.5 | 1.5rem | — | |
| --alert-radius-sm | dimension | component/alert | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --alert-radius-md | dimension | component/alert | var(--component-radius-md) | var(--component-radius-md) | — | |
| --alert-radius-lg | dimension | component/alert | var(--component-radius-md) | var(--component-radius-md) | — | |
| --alert-bg | color | component/alert | transparent | — | ||
| --alert-border | color | component/alert | transparent | — | ||
| --aspect-ratio-default | number | component/aspect-ratio | 16 / 9 | — | ||
| --autocomplete-input-height-sm | dimension | component/autocomplete | var(--component-height-sm) | var(--component-height-sm) | — | |
| --autocomplete-input-height-md | dimension | component/autocomplete | var(--component-height-md) | var(--component-height-md) | — | |
| --autocomplete-input-height-lg | dimension | component/autocomplete | var(--component-height-lg) | var(--component-height-lg) | — | |
| --autocomplete-input-px-sm | dimension | component/autocomplete | 0.625 | 0.625rem | — | |
| --autocomplete-input-px-md | dimension | component/autocomplete | var(--component-px-sm) | var(--component-px-sm) | — | |
| --autocomplete-input-px-lg | dimension | component/autocomplete | var(--component-px-md) | var(--component-px-md) | — | |
| --autocomplete-input-text-sm | dimension | component/autocomplete | var(--component-text-sm) | var(--component-text-sm) | — | |
| --autocomplete-input-text-md | dimension | component/autocomplete | var(--component-text-md) | var(--component-text-md) | — | |
| --autocomplete-input-text-lg | dimension | component/autocomplete | var(--component-text-md) | var(--component-text-md) | — | |
| --autocomplete-radius | dimension | component/autocomplete | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --autocomplete-popup-py | dimension | component/autocomplete | 0.25 | 0.25rem | — | |
| --autocomplete-popup-max-height | dimension | component/autocomplete | 23 | 23rem | — | |
| --autocomplete-list-gap | dimension | component/autocomplete | 0.125 | 0.125rem | — | |
| --autocomplete-item-px | dimension | component/autocomplete | var(--component-px-md) | var(--component-px-md) | — | |
| --autocomplete-item-py | dimension | component/autocomplete | 0.5 | 0.5rem | — | |
| --autocomplete-item-gap | dimension | component/autocomplete | var(--component-gap-md) | var(--component-gap-md) | — | |
| --autocomplete-section-px | dimension | component/autocomplete | var(--component-px-xs) | var(--component-px-xs) | — | |
| --autocomplete-section-py | dimension | component/autocomplete | 0.375 | 0.375rem | — | |
| --avatar-size-xs | dimension | component/avatar | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --avatar-size-sm | dimension | component/avatar | calc(var(--spacing) * 8) | calc(var(--spacing) * 8) | — | |
| --avatar-size-md | dimension | component/avatar | calc(var(--spacing) * 10) | calc(var(--spacing) * 10) | — | |
| --avatar-size-lg | dimension | component/avatar | calc(var(--spacing) * 12) | calc(var(--spacing) * 12) | — | |
| --avatar-size-xl | dimension | component/avatar | calc(var(--spacing) * 18) | calc(var(--spacing) * 18) | — | |
| --avatar-radius-circle | dimension | component/avatar | 9999 | 9999px | — | |
| --avatar-radius-square | dimension | component/avatar | 0 | 0px | — | |
| --avatar-radius-rounded | dimension | component/avatar | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --badge-height-sm | dimension | theme/orange | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --badge-height-md | dimension | theme/orange | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --badge-height-lg | dimension | theme/orange | calc(var(--spacing) * 7.5) | calc(var(--spacing) * 7.5) | — | |
| --badge-radius | dimension | component/badge | var(--components-radius-sm) | var(--components-radius-sm) | — | |
| --badge-px-sm | dimension | component/badge | var(--components-px-xs) | var(--components-px-xs) | — | |
| --badge-px-md | dimension | component/badge | var(--components-px-sm) | var(--components-px-sm) | — | |
| --badge-px-lg | dimension | component/badge | var(--components-px-md) | var(--components-px-md) | — | |
| --badge-gap-sm | dimension | component/badge | var(--components-gap-xs) | var(--components-gap-xs) | — | |
| --badge-gap-md | dimension | component/badge | var(--components-gap-xs) | var(--components-gap-xs) | — | |
| --badge-gap-lg | dimension | component/badge | var(--components-gap-sm) | var(--components-gap-sm) | — | |
| --badge-text-sm | dimension | component/badge | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --badge-text-md | dimension | component/badge | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --badge-text-lg | dimension | component/badge | calc(var(--spacing) * 3.5) | calc(var(--spacing) * 3.5) | — | |
| --badge-icon-sm | dimension | component/badge | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --badge-icon-md | dimension | component/badge | calc(var(--spacing) * 3.5) | calc(var(--spacing) * 3.5) | — | |
| --badge-icon-lg | dimension | component/badge | calc(var(--spacing) * 3.5) | calc(var(--spacing) * 3.5) | — | |
| --badge-min-width-sm | dimension | component/badge | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --badge-min-width-md | dimension | component/badge | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --badge-min-width-lg | dimension | component/badge | calc(var(--spacing) * 7) | calc(var(--spacing) * 7) | — | |
| --breadcrumb-text | dimension | component/breadcrumb | var(--component-text-sm) | var(--component-text-sm) | — | |
| --breadcrumb-separator-size | dimension | component/breadcrumb | 0.875 | 0.875rem | — | |
| --breadcrumb-gap | dimension | component/breadcrumb | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --button-group-gap | dimension | component/button-group | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --button-height-xs | dimension | component/button | var(--components-height-xs) | var(--components-height-xs) | — | |
| --button-height-sm | dimension | component/button | var(--components-height-sm) | var(--components-height-sm) | — | |
| --button-height-md | dimension | component/button | var(--components-height-md) | var(--components-height-md) | — | |
| --button-height-lg | dimension | component/button | var(--components-height-lg) | var(--components-height-lg) | — | |
| --button-height-xl | dimension | component/button | var(--components-height-xl) | var(--components-height-xl) | — | |
| --button-px-xs | dimension | component/button | var(--components-px-xs) | var(--components-px-xs) | — | |
| --button-px-sm | dimension | component/button | var(--components-px-sm) | var(--components-px-sm) | — | |
| --button-px-md | dimension | component/button | var(--components-px-md) | var(--components-px-md) | — | |
| --button-px-lg | dimension | component/button | var(--components-px-xl) | var(--components-px-xl) | — | |
| --button-px-xl | dimension | component/button | var(--components-px-2xl) | var(--components-px-2xl) | — | |
| --button-gap-xs | dimension | component/button | var(--components-gap-xs) | var(--components-gap-xs) | — | |
| --button-gap-sm | dimension | component/button | var(--components-gap-xs) | var(--components-gap-xs) | — | |
| --button-gap-md | dimension | component/button | var(--components-gap-sm) | var(--components-gap-sm) | — | |
| --button-gap-lg | dimension | component/button | var(--components-gap-sm) | var(--components-gap-sm) | — | |
| --button-gap-xl | dimension | component/button | var(--components-gap-md) | var(--components-gap-md) | — | |
| --button-text-xs | dimension | component/button | var(--components-text-sm) | var(--components-text-sm) | — | |
| --button-text-sm | dimension | component/button | var(--components-text-md) | var(--components-text-md) | — | |
| --button-text-md | dimension | component/button | var(--components-text-md) | var(--components-text-md) | — | |
| --button-text-lg | dimension | component/button | var(--components-text-md) | var(--components-text-md) | — | |
| --button-text-xl | dimension | component/button | var(--components-text-lg) | var(--components-text-lg) | — | |
| --button-icon-size-xs | dimension | component/button | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --button-icon-size-sm | dimension | component/button | calc(var(--spacing) * 3.5) | calc(var(--spacing) * 3.5) | — | |
| --button-icon-size-md | dimension | component/button | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --button-icon-size-lg | dimension | component/button | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --button-icon-size-xl | dimension | component/button | calc(var(--spacing) * 4.5) | calc(var(--spacing) * 4.5) | — | |
| --button-radius | dimension | component/button | var(--components-radius-sm) | var(--components-radius-sm) | — | |
| --card-px-sm | dimension | component/card | 0.75 | 0.75rem | — | |
| --card-px-default | dimension | component/card | 1 | 1rem | — | |
| --card-py-sm | dimension | component/card | 0.75 | 0.75rem | — | |
| --card-py-default | dimension | component/card | 1 | 1rem | — | |
| --card-gap-sm | dimension | component/card | 0.75 | 0.75rem | — | |
| --card-gap-default | dimension | component/card | 1 | 1rem | — | |
| --card-radius | dimension | component/card | var(--radius-xl) | var(--radius-xl) | — | |
| --carousel-gap | dimension | component/carousel | var(--component-gap-xl) | var(--component-gap-xl) | — | |
| --carousel-nav-offset | dimension | component/carousel | 3 | 3rem | — | |
| --carousel-nav-radius | dimension | component/carousel | var(--component-radius-full) | var(--component-radius-full) | — | |
| --checkbox-size-sm | dimension | component/checkbox | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --checkbox-size-md | dimension | component/checkbox | calc(var(--spacing) * 4.5) | calc(var(--spacing) * 4.5) | — | |
| --checkbox-size-lg | dimension | component/checkbox | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --checkbox-icon-size-sm | dimension | component/checkbox | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --checkbox-icon-size-md | dimension | component/checkbox | calc(var(--spacing) * 3.5) | calc(var(--spacing) * 3.5) | — | |
| --checkbox-icon-size-lg | dimension | component/checkbox | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --checkbox-radius | dimension | component/checkbox | var(--component-radius-xs) | var(--component-radius-xs) | — | |
| --collapsible-radius | dimension | component/collapsible | var(--component-radius-md) | var(--component-radius-md) | — | |
| --collapsible-gap | dimension | component/collapsible | var(--component-gap-md) | var(--component-gap-md) | — | |
| --combobox-height-sm | dimension | component/combobox | var(--components-height-sm) | var(--components-height-sm) | — | |
| --combobox-height-md | dimension | component/combobox | var(--components-height-md) | var(--components-height-md) | — | |
| --combobox-height-lg | dimension | component/combobox | var(--components-height-lg) | var(--components-height-lg) | — | |
| --combobox-px-sm | dimension | component/combobox | var(--components-px-sm) | var(--components-px-sm) | — | |
| --combobox-px-md | dimension | component/combobox | var(--components-px-md) | var(--components-px-md) | — | |
| --combobox-px-lg | dimension | component/combobox | var(--components-px-lg) | var(--components-px-lg) | — | |
| --combobox-radius | dimension | component/combobox | var(--components-radius-md) | var(--components-radius-md) | — | |
| --command-width-sm | dimension | component/command | 16 | 16rem | — | |
| --command-width-md | dimension | component/command | 20 | 20rem | — | |
| --command-width-lg | dimension | component/command | 24 | 24rem | — | |
| --command-item-px | dimension | component/command | 0.5 | 0.5rem | — | |
| --command-item-py | dimension | component/command | 0.375 | 0.375rem | — | |
| --command-group-p | dimension | component/command | 0.375 | 0.375rem | — | |
| --command-radius | dimension | component/command | var(--component-radius-md) | var(--component-radius-md) | — | |
| --dialog-px | dimension | component/dialog | var(--components-px-xl) | var(--components-px-xl) | — | |
| --dialog-py | dimension | component/dialog | var(--components-px-xl) | var(--components-px-xl) | — | |
| --dialog-gap | dimension | component/dialog | var(--components-gap-lg) | var(--components-gap-lg) | — | |
| --dialog-radius | dimension | component/dialog | var(--components-radius-lg) | var(--components-radius-lg) | — | |
| --dialog-max-width | dimension | component/dialog | 32 | 32rem | — | |
| --hover-card-width | dimension | component/hover-card | 16 | 16rem | — | |
| --hover-card-radius | dimension | component/hover-card | var(--component-radius-md) | var(--component-radius-md) | — | |
| --hover-card-padding | dimension | component/hover-card | 0.625 | 0.625rem | — | |
| --hover-card-radius-bordered | dimension | component/hover-card | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --hover-card-padding-bordered | dimension | component/hover-card | var(--component-px-md) | var(--component-px-md) | — | |
| --hover-card-bg | color | component/hover-card | var(--popover) | var(--popover) | ||
| --hover-card-text-color | color | component/hover-card | var(--popover-foreground) | var(--popover-foreground) | ||
| --input-height-sm | dimension | component/input | var(--component-height-sm) | var(--component-height-sm) | — | |
| --input-height-md | dimension | component/input | var(--component-height-md) | var(--component-height-md) | — | |
| --input-height-lg | dimension | component/input | var(--component-height-lg) | var(--component-height-lg) | — | |
| --input-px-sm | dimension | component/input | var(--component-px-sm) | var(--component-px-sm) | — | |
| --input-px-md | dimension | component/input | var(--component-px-md) | var(--component-px-md) | — | |
| --input-px-lg | dimension | component/input | var(--component-px-md) | var(--component-px-md) | — | |
| --input-text-sm | dimension | component/input | var(--component-text-sm) | var(--component-text-sm) | — | |
| --input-text-md | dimension | component/input | var(--component-text-md) | var(--component-text-md) | — | |
| --input-text-lg | dimension | component/input | var(--component-text-md) | var(--component-text-md) | — | |
| --input-radius | dimension | component/input | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --item-radius | dimension | component/item | var(--component-radius-md) | var(--component-radius-md) | — | |
| --item-px-default | dimension | component/item | var(--component-px-sm) | var(--component-px-sm) | — | |
| --item-px-xs | dimension | component/item | 0.625 | 0.625rem | — | |
| --item-py-default | dimension | component/item | 0.625 | 0.625rem | — | |
| --item-py-xs | dimension | component/item | var(--component-px-xs) | var(--component-px-xs) | — | |
| --item-gap-default | dimension | component/item | 0.625 | 0.625rem | — | |
| --item-gap-xs | dimension | component/item | var(--component-gap-md) | var(--component-gap-md) | — | |
| --label-text | dimension | component/label | var(--component-text-sm) | var(--component-text-sm) | — | |
| --label-helper-text | dimension | component/label | var(--component-text-xs) | var(--component-text-xs) | — | |
| --label-gap | dimension | component/label | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --menu-content-min-width | dimension | component/menu | 8 | 8rem | — | |
| --menu-content-padding | dimension | component/menu | 0.5 | 0.5rem | — | |
| --menu-item-px | dimension | component/menu | 0.5 | 0.5rem | — | |
| --menu-item-py | dimension | component/menu | 0.375 | 0.375rem | — | |
| --menu-item-radius | dimension | component/menu | var(--component-radius-xs) | var(--component-radius-xs) | — | |
| --menu-item-text | dimension | component/menu | var(--component-text-sm) | var(--component-text-sm) | — | |
| --menu-label-text | dimension | component/menu | var(--component-text-xs) | var(--component-text-xs) | — | |
| --menu-separator-my | dimension | component/menu | 0.375 | 0.375rem | — | |
| --menu-icon-size | dimension | component/menu | 1 | 1rem | — | |
| --menubar-height | dimension | component/menubar | 2.25 | 2.25rem | — | |
| --menubar-item-px | dimension | component/menubar | 0.5 | 0.5rem | — | |
| --menubar-item-py | dimension | component/menubar | 0.25 | 0.25rem | — | |
| --menubar-item-radius | dimension | component/menubar | var(--components-radius-xs) | var(--components-radius-xs) | — | |
| --menubar-item-text | dimension | component/menubar | var(--components-text-sm) | var(--components-text-sm) | — | |
| --meter-height | dimension | component/meter | 0.5 | 0.5rem | — | |
| --meter-radius | dimension | component/meter | 9999 | 9999px | — | |
| --navbar-height | dimension | component/navbar | 3.5 | 3.5rem | — | |
| --navbar-px | dimension | component/navbar | var(--components-px-xl) | var(--components-px-xl) | — | |
| --navbar-gap | dimension | component/navbar | var(--components-gap-md) | var(--components-gap-md) | — | |
| --navigation-menu-trigger-height | dimension | component/navigation-menu | 2.25 | 2.25rem | — | |
| --navigation-menu-trigger-px | dimension | component/navigation-menu | 1 | 1rem | — | |
| --navigation-menu-trigger-py | dimension | component/navigation-menu | 0.5 | 0.5rem | — | |
| --navigation-menu-trigger-radius | dimension | component/navigation-menu | var(--components-radius-xs) | var(--components-radius-xs) | — | |
| --navigation-menu-trigger-text | dimension | component/navigation-menu | var(--components-text-sm) | var(--components-text-sm) | — | |
| --navigation-menu-popup-radius | dimension | component/navigation-menu | var(--components-radius-md) | var(--components-radius-md) | — | |
| --navigation-menu-link-radius | dimension | component/navigation-menu | var(--components-radius-xs) | var(--components-radius-xs) | — | |
| --navigation-menu-link-padding | dimension | component/navigation-menu | 0.5 | 0.5rem | — | |
| --number-field-height-sm | dimension | component/number-field | var(--component-height-sm) | var(--component-height-sm) | — | |
| --number-field-height-md | dimension | component/number-field | var(--component-height-md) | var(--component-height-md) | — | |
| --number-field-height-lg | dimension | component/number-field | var(--component-height-lg) | var(--component-height-lg) | — | |
| --number-field-px-sm | dimension | component/number-field | var(--component-px-sm) | var(--component-px-sm) | — | |
| --number-field-px-md | dimension | component/number-field | var(--component-px-md) | var(--component-px-md) | — | |
| --number-field-px-lg | dimension | component/number-field | var(--component-px-lg) | var(--component-px-lg) | — | |
| --number-field-radius | dimension | component/number-field | var(--component-radius-md) | var(--component-radius-md) | — | |
| --popover-px | dimension | component/popover | var(--components-px-lg) | var(--components-px-lg) | — | |
| --popover-py | dimension | component/popover | var(--components-px-md) | var(--components-px-md) | — | |
| --popover-radius | dimension | component/popover | var(--components-radius-lg) | var(--components-radius-lg) | — | |
| --popover-max-width | dimension | component/popover | 24 | 24rem | — | |
| --progress-color-main | color | component/progress | var(--primary) | — | ||
| --progress-color-secondary | color | component/progress | var(--secondary) | — | ||
| --progress-height-sm | dimension | component/progress | 1 | 1px | — | |
| --progress-height-md | dimension | component/progress | 0.375 | 0.375rem | — | |
| --progress-height-lg | dimension | component/progress | 0.5 | 0.5rem | — | |
| --progress-radius | dimension | component/progress | 9999 | 9999px | — | |
| --radio-size-sm | dimension | component/radio-group | 1.125 | 1.125rem | — | |
| --radio-size-md | dimension | component/radio-group | 1.25 | 1.25rem | — | |
| --radio-size-lg | dimension | component/radio-group | 1.375 | 1.375rem | — | |
| --radio-icon-size-sm | dimension | component/radio-group | 0.5 | 0.5rem | — | |
| --radio-icon-size-md | dimension | component/radio-group | 0.625 | 0.625rem | — | |
| --radio-icon-size-lg | dimension | component/radio-group | 0.75 | 0.75rem | — | |
| --resizeable-thickness | dimension | component/resizeable | 1 | 1px | — | |
| --resizeable-hit-area | dimension | component/resizeable | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --resizeable-handle-length | dimension | component/resizeable | var(--component-height-xs) | var(--component-height-xs) | — | |
| --resizeable-handle-thickness | dimension | component/resizeable | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --resizeable-handle-radius | dimension | component/resizeable | var(--component-radius-md) | var(--component-radius-md) | — | |
| --scroll-area-size | dimension | component/scroll-area | var(--component-gap-md) | var(--component-gap-md) | — | |
| --scroll-area-padding | dimension | component/scroll-area | 1 | 1px | — | |
| --scroll-area-thumb-radius | dimension | component/scroll-area | var(--component-radius-full) | var(--component-radius-full) | — | |
| --select-height-xs | dimension | component/select | var(--component-height-xs) | var(--component-height-xs) | — | |
| --select-height-sm | dimension | component/select | var(--component-height-sm) | var(--component-height-sm) | — | |
| --select-height-md | dimension | component/select | var(--component-height-md) | var(--component-height-md) | — | |
| --select-height-lg | dimension | component/select | var(--component-height-lg) | var(--component-height-lg) | — | |
| --select-px-xs | dimension | component/select | var(--component-px-xs) | var(--component-px-xs) | — | |
| --select-px-sm | dimension | component/select | var(--component-px-sm) | var(--component-px-sm) | — | |
| --select-px-md | dimension | component/select | var(--component-px-md) | var(--component-px-md) | — | |
| --select-px-lg | dimension | component/select | var(--component-px-md) | var(--component-px-md) | — | |
| --select-gap-xs | dimension | component/select | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --select-gap-sm | dimension | component/select | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --select-gap-md | dimension | component/select | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --select-gap-lg | dimension | component/select | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --select-text-xs | dimension | component/select | var(--component-text-sm) | var(--component-text-sm) | — | |
| --select-text-sm | dimension | component/select | var(--component-text-sm) | var(--component-text-sm) | — | |
| --select-text-md | dimension | component/select | var(--component-text-md) | var(--component-text-md) | — | |
| --select-text-lg | dimension | component/select | var(--component-text-md) | var(--component-text-md) | — | |
| --select-radius | dimension | component/select | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --separator-thickness-md | dimension | component/separator | 1 | 1px | — | |
| --separator-thickness-lg | dimension | component/separator | 0.25 | 0.25rem | — | |
| --sheet-width-sm | dimension | component/sheet | 20 | 20rem | — | |
| --sheet-width-md | dimension | component/sheet | 24 | 24rem | — | |
| --sheet-width-lg | dimension | component/sheet | 32 | 32rem | — | |
| --sheet-width-xl | dimension | component/sheet | 40 | 40rem | — | |
| --sheet-width-full | dimension | component/sheet | 100 | 100vw | — | |
| --sheet-px | dimension | component/sheet | var(--components-px-xl) | var(--components-px-xl) | — | |
| --sheet-py | dimension | component/sheet | var(--components-px-xl) | var(--components-px-xl) | — | |
| --sheet-gap | dimension | component/sheet | var(--components-gap-lg) | var(--components-gap-lg) | — | |
| --sidebar-width-collapsed | dimension | component/sidebar | 3.5 | 3.5rem | — | |
| --sidebar-width-default | dimension | component/sidebar | 16 | 16rem | — | |
| --sidebar-width-wide | dimension | component/sidebar | 20 | 20rem | — | |
| --sidebar-header-height | dimension | component/sidebar | 3.5 | 3.5rem | — | |
| --sidebar-footer-height | dimension | component/sidebar | 3.5 | 3.5rem | — | |
| --sidebar-px | dimension | component/sidebar | var(--components-px-md) | var(--components-px-md) | — | |
| --sidebar-gap | dimension | component/sidebar | var(--components-gap-sm) | var(--components-gap-sm) | — | |
| --skeleton-radius | dimension | component/skeleton | var(--components-radius-sm) | var(--components-radius-sm) | — | |
| --slider-track-height | dimension | component/slider | 0.375 | 0.375rem | — | |
| --slider-track-width | dimension | component/slider | 0.375 | 0.375rem | — | |
| --slider-thumb-size | dimension | component/slider | 1 | 1rem | — | |
| --slider-thumb-border | dimension | component/slider | 2 | 2px | — | |
| --spinner-size-xs | dimension | component/spinner | 0.75 | 0.75rem | — | |
| --spinner-size-sm | dimension | component/spinner | 1 | 1rem | — | |
| --spinner-size-md | dimension | component/spinner | 1.25 | 1.25rem | — | |
| --spinner-size-lg | dimension | component/spinner | 1.5 | 1.5rem | — | |
| --spinner-size-xl | dimension | component/spinner | 2 | 2rem | — | |
| --switch-height-sm | dimension | component/switch | 1.25 | 1.25rem | — | |
| --switch-height-md | dimension | component/switch | 1.5 | 1.5rem | — | |
| --switch-height-lg | dimension | component/switch | 2 | 2rem | — | |
| --switch-height-xl | dimension | component/switch | 2.25 | 2.25rem | — | |
| --switch-width-sm | dimension | component/switch | 2 | 2rem | — | |
| --switch-width-md | dimension | component/switch | 2.5 | 2.5rem | — | |
| --switch-width-lg | dimension | component/switch | 3.5 | 3.5rem | — | |
| --switch-width-xl | dimension | component/switch | 4 | 4rem | — | |
| --tabs-line-xs | dimension | component/tabs | 0.25 | 0.25rem | — | |
| --tabs-line-sm | dimension | component/tabs | 0.25 | 0.25rem | — | |
| --tabs-line-md | dimension | component/tabs | 0.5 | 0.5rem | — | |
| --tabs-line-lg | dimension | component/tabs | 0.625 | 0.625rem | — | |
| --tabs-px-xs | dimension | component/tabs | 0.5 | 0.5rem | — | |
| --tabs-px-sm | dimension | component/tabs | 0.625 | 0.625rem | — | |
| --tabs-px-md | dimension | component/tabs | 0.75 | 0.75rem | — | |
| --tabs-px-lg | dimension | component/tabs | 1 | 1rem | — | |
| --tabs-py-xs | dimension | component/tabs | 0.375 | 0.375rem | — | |
| --tabs-py-sm | dimension | component/tabs | 0.5 | 0.5rem | — | |
| --tabs-py-md | dimension | component/tabs | 0.625 | 0.625rem | — | |
| --tabs-py-lg | dimension | component/tabs | 0.625 | 0.625rem | — | |
| --tabs-gap-xs | dimension | component/tabs | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --tabs-gap-sm | dimension | component/tabs | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --tabs-gap-md | dimension | component/tabs | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --tabs-gap-lg | dimension | component/tabs | var(--component-gap-md) | var(--component-gap-md) | — | |
| --tabs-text-xs | dimension | component/tabs | var(--component-text-xs) | var(--component-text-xs) | — | |
| --tabs-text-sm | dimension | component/tabs | var(--component-text-xs) | var(--component-text-xs) | — | |
| --tabs-text-md | dimension | component/tabs | var(--component-text-sm) | var(--component-text-sm) | — | |
| --tabs-text-lg | dimension | component/tabs | var(--component-text-sm) | var(--component-text-sm) | — | |
| --tabs-icon-size-xs | dimension | component/tabs | 0.875 | 0.875rem | — | |
| --tabs-icon-size-sm | dimension | component/tabs | 0.875 | 0.875rem | — | |
| --tabs-icon-size-md | dimension | component/tabs | 1 | 1rem | — | |
| --tabs-icon-size-lg | dimension | component/tabs | 1.25 | 1.25rem | — | |
| --tabs-list-p-xs | dimension | component/tabs | 0.25 | 0.25rem | — | |
| --tabs-list-p-sm | dimension | component/tabs | 0.25 | 0.25rem | — | |
| --tabs-list-p-md | dimension | component/tabs | 0.25 | 0.25rem | — | |
| --tabs-list-p-lg | dimension | component/tabs | 0.375 | 0.375rem | — | |
| --tabs-radius | dimension | component/tabs | var(--component-radius-md) | var(--component-radius-md) | — | |
| --textarea-px-sm | dimension | component/textarea | var(--component-px-sm) | var(--component-px-sm) | — | |
| --textarea-px-md | dimension | component/textarea | var(--component-px-md) | var(--component-px-md) | — | |
| --textarea-px-lg | dimension | component/textarea | var(--component-px-lg) | var(--component-px-lg) | — | |
| --textarea-py-sm | dimension | component/textarea | 0.375 | 0.375rem | — | |
| --textarea-py-md | dimension | component/textarea | 0.5 | 0.5rem | — | |
| --textarea-py-lg | dimension | component/textarea | 0.625 | 0.625rem | — | |
| --textarea-text-sm | dimension | component/textarea | var(--component-text-xs) | var(--component-text-xs) | — | |
| --textarea-text-md | dimension | component/textarea | var(--component-text-sm) | var(--component-text-sm) | — | |
| --textarea-text-lg | dimension | component/textarea | var(--component-text-md) | var(--component-text-md) | — | |
| --textarea-radius | dimension | component/textarea | var(--component-radius-md) | var(--component-radius-md) | — | |
| --toast-padding | dimension | component/toast | 1 | 1rem | — | |
| --toast-gap | dimension | component/toast | 0.625 | 0.625rem | — | |
| --toast-radius | dimension | component/toast | var(--component-radius-md) | var(--component-radius-md) | — | |
| --toast-width-sm | dimension | component/toast | 24 | 24rem | — | |
| --toast-text-title | dimension | component/toast | var(--component-text-sm) | var(--component-text-sm) | — | |
| --toast-text-desc | dimension | component/toast | var(--component-text-xs) | var(--component-text-xs) | — | |
| --toast-close-size | dimension | component/toast | 0.875 | 0.875rem | — | |
| --toggle-group-gap-sm | dimension | component/toggle-group | 0.125 | 0.125rem | — | |
| --toggle-group-gap-md | dimension | component/toggle-group | 0.25 | 0.25rem | — | |
| --toggle-group-gap-lg | dimension | component/toggle-group | 0.25 | 0.25rem | — | |
| --toggle-height-sm | dimension | component/toggle | 1.75 | 1.75rem | — | |
| --toggle-height-md | dimension | component/toggle | 2.125 | 2.125rem | — | |
| --toggle-height-lg | dimension | component/toggle | 2.5 | 2.5rem | — | |
| --toggle-min-width-sm | dimension | component/toggle | 1.75 | 1.75rem | — | |
| --toggle-min-width-md | dimension | component/toggle | 2.125 | 2.125rem | — | |
| --toggle-min-width-lg | dimension | component/toggle | 2.5 | 2.5rem | — | |
| --toggle-px-sm | dimension | component/toggle | 0.3125 | 0.3125rem | — | |
| --toggle-px-md | dimension | component/toggle | 0.5 | 0.5rem | — | |
| --toggle-px-lg | dimension | component/toggle | 0.625 | 0.625rem | — | |
| --toggle-gap-sm | dimension | component/toggle | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --toggle-gap-md | dimension | component/toggle | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --toggle-gap-lg | dimension | component/toggle | var(--component-gap-sm) | var(--component-gap-sm) | — | |
| --toggle-text-sm | dimension | component/toggle | var(--component-text-xs) | var(--component-text-xs) | — | |
| --toggle-text-md | dimension | component/toggle | 0.8125 | 0.8125rem | — | |
| --toggle-text-lg | dimension | component/toggle | var(--component-text-sm) | var(--component-text-sm) | — | |
| --toggle-icon-size-sm | dimension | component/toggle | 0.875 | 0.875rem | — | |
| --toggle-icon-size-md | dimension | component/toggle | 1 | 1rem | — | |
| --toggle-icon-size-lg | dimension | component/toggle | 1 | 1rem | — | |
| --toggle-radius | dimension | component/toggle | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --tooltip-px | dimension | component/tooltip | var(--component-px-sm) | var(--component-px-sm) | — | |
| --tooltip-py | dimension | component/tooltip | 0.25 | 0.25rem | — | |
| --tooltip-text | dimension | component/tooltip | var(--component-text-xs) | var(--component-text-xs) | — | |
| --tooltip-radius | dimension | component/tooltip | var(--component-radius-sm) | var(--component-radius-sm) | — | |
| --tooltip-max-width | dimension | component/tooltip | 18 | 18rem | — | |
| --tooltip-bg | color | component/tooltip | var(--popover) | var(--popover) | ||
| --tooltip-text-color | color | component/tooltip | var(--popover-foreground) | var(--popover-foreground) | ||
| --tree-indent | dimension | component/tree | 20 | 20px | — | |
| --tree-gap | dimension | component/tree | var(--component-gap-xs) | var(--component-gap-xs) | — | |
| --tree-px | dimension | component/tree | var(--component-px-xs) | var(--component-px-xs) | — | |
| --tree-py | dimension | component/tree | var(--component-px-2xs) | var(--component-px-2xs) | — | |
| --tree-radius | dimension | component/tree | var(--component-radius-xs) | var(--component-radius-xs) | — | |
| --tree-item-gap | dimension | component/tree | 0.125 | 0.125rem | — | |
| --tree-label-indent | dimension | component/tree | 1.75 | 1.75rem | — | |
| --component-px-2xs | dimension | theme/blue | calc(var(--spacing) * 1) | calc(var(--spacing) * 1) | — | |
| --component-px-xs | dimension | theme/blue | calc(var(--spacing) * 1.5) | calc(var(--spacing) * 1.5) | — | |
| --component-px-sm | dimension | theme/blue | calc(var(--spacing) * 2.5) | calc(var(--spacing) * 2.5) | — | |
| --component-px-md | dimension | theme/blue | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --component-px-lg | dimension | theme/blue | calc(var(--spacing) * 4) | calc(var(--spacing) * 4) | — | |
| --component-px-xl | dimension | theme/blue | calc(var(--spacing) * 5) | calc(var(--spacing) * 5) | — | |
| --component-gap-xs | dimension | theme/blue | calc(var(--spacing) * 0.75) | calc(var(--spacing) * 0.75) | — | |
| --component-gap-sm | dimension | theme/blue | calc(var(--spacing) * 1) | calc(var(--spacing) * 1) | — | |
| --component-gap-md | dimension | theme/blue | calc(var(--spacing) * 1.5) | calc(var(--spacing) * 1.5) | — | |
| --component-gap-lg | dimension | theme/blue | calc(var(--spacing) * 2) | calc(var(--spacing) * 2) | — | |
| --component-gap-xl | dimension | theme/blue | calc(var(--spacing) * 3) | calc(var(--spacing) * 3) | — | |
| --component-height-2xs | dimension | theme/green | calc(var(--spacing) * 6) | calc(var(--spacing) * 6) | — | |
| --component-height-xs | dimension | theme/green | calc(var(--spacing) * 7) | calc(var(--spacing) * 7) | — | |
| --component-height-sm | dimension | theme/green | calc(var(--spacing) * 9) | calc(var(--spacing) * 9) | — | |
| --component-height-md | dimension | theme/green | calc(var(--spacing) * 10) | calc(var(--spacing) * 10) | — | |
| --component-height-lg | dimension | theme/green | calc(var(--spacing) * 11) | calc(var(--spacing) * 11) | — | |
| --component-height-xl | dimension | theme/green | calc(var(--spacing) * 12) | calc(var(--spacing) * 12) | — | |
| --sidebar-background | color | theme/orange | OKLCHoklch(0.94 0.015 85) | OKLCHoklch(0.20 0.019 85) |