@sanity/ui 3.0.0-static.15 → 3.0.0-static.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (526) hide show
  1. package/README.md +6 -6
  2. package/bin/{ui.js → sanity-ui.cjs} +1 -1
  3. package/dist/_chunks-cjs/{_visual-editing.js → _visual-editing.cjs} +67 -77
  4. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -0
  5. package/dist/_chunks-cjs/{buildCommand.js → buildCommand.cjs} +26 -10
  6. package/dist/_chunks-cjs/buildCommand.cjs.map +1 -0
  7. package/dist/_chunks-cjs/{refractor.js → refractor.cjs} +1 -1
  8. package/dist/_chunks-cjs/refractor.cjs.map +1 -0
  9. package/dist/_chunks-es/{_visual-editing.mjs → _visual-editing.js} +68 -78
  10. package/dist/_chunks-es/_visual-editing.js.map +1 -0
  11. package/dist/_chunks-es/{refractor.mjs → refractor.js} +1 -1
  12. package/dist/_chunks-es/refractor.js.map +1 -0
  13. package/dist/_visual-editing.cjs +30 -0
  14. package/dist/_visual-editing.cjs.map +1 -0
  15. package/dist/{_visual-editing.d.mts → _visual-editing.d.cts} +5 -15
  16. package/dist/_visual-editing.d.ts +5 -15
  17. package/dist/_visual-editing.js +29 -30
  18. package/dist/_visual-editing.js.map +1 -1
  19. package/dist/{cli.js → cli.cjs} +4 -4
  20. package/dist/cli.cjs.map +1 -0
  21. package/dist/{css.mjs → css.cjs} +809 -923
  22. package/dist/css.cjs.map +1 -0
  23. package/dist/{css.d.mts → css.d.cts} +31 -24
  24. package/dist/css.d.ts +31 -24
  25. package/dist/css.js +809 -921
  26. package/dist/css.js.map +1 -1
  27. package/dist/{index.mjs → index.cjs} +373 -406
  28. package/dist/index.cjs.map +1 -0
  29. package/dist/{index.d.mts → index.d.cts} +10 -20
  30. package/dist/index.d.ts +10 -20
  31. package/dist/index.js +371 -406
  32. package/dist/index.js.map +1 -1
  33. package/dist/{theme.mjs → theme.cjs} +219 -196
  34. package/dist/theme.cjs.map +1 -0
  35. package/dist/{theme.d.mts → theme.d.cts} +2 -0
  36. package/dist/theme.d.ts +2 -0
  37. package/dist/theme.js +218 -195
  38. package/dist/theme.js.map +1 -1
  39. package/dist/{sanity-palette.css → ui-palette.css} +1 -1
  40. package/dist/ui-palette.min.css +1 -0
  41. package/dist/{system.css → ui-system.css} +1135 -245
  42. package/dist/ui-system.min.css +1 -0
  43. package/dist/{sanity-theme.css → ui-theme.css} +199 -199
  44. package/dist/ui-theme.min.css +1 -0
  45. package/dist/ui.css +29152 -0
  46. package/dist/ui.min.css +1 -0
  47. package/exports/_visual-editing.ts +27 -27
  48. package/exports/index.ts +1 -1
  49. package/package.json +24 -24
  50. package/src/cli/buildCommand.ts +55 -20
  51. package/src/cli/index.ts +2 -14
  52. package/src/{ui → core}/StyleTags.tsx +4 -4
  53. package/src/{ui → core}/_compat/index.ts +0 -1
  54. package/src/{ui → core}/_compat/theme/themeProvider.tsx +3 -3
  55. package/src/{ui → core}/components/autocomplete/__workshop__/async.tsx +2 -2
  56. package/src/{ui → core}/components/autocomplete/__workshop__/custom.tsx +2 -2
  57. package/src/{ui → core}/components/autocomplete/__workshop__/focusAndBlur.tsx +3 -3
  58. package/src/{ui → core}/components/tab/tabList.tsx +19 -4
  59. package/src/{ui → core}/index.ts +0 -1
  60. package/src/{ui → core}/primitives/box/box.tsx +3 -0
  61. package/src/core/primitives/button/__workshop__/custom.tsx +27 -0
  62. package/src/{ui → core}/primitives/button/button.tsx +3 -1
  63. package/src/{ui → core}/primitives/card/__workshop__/asButton.tsx +0 -9
  64. package/src/{ui → core}/primitives/card/__workshop__/interactive.tsx +0 -1
  65. package/src/{ui → core}/primitives/card/__workshop__/props.tsx +0 -3
  66. package/src/{ui → core}/primitives/card/__workshop__/selected.tsx +6 -37
  67. package/src/{ui → core}/primitives/card/card.tsx +15 -21
  68. package/src/core/primitives/card/cardProvider.tsx +27 -0
  69. package/src/{ui → core}/primitives/card/types.ts +5 -4
  70. package/src/{ui → core}/primitives/heading/__workshop__/opticalAlignment.tsx +1 -1
  71. package/src/{ui → core}/primitives/heading/__workshop__/plain.tsx +1 -8
  72. package/src/{ui → core}/primitives/label/__workshop__/plain.tsx +1 -9
  73. package/src/{ui → core}/primitives/popover/popover.tsx +1 -1
  74. package/src/{ui → core}/primitives/text/__workshop__/example.tsx +1 -9
  75. package/src/{ui → core}/primitives/tooltip/tooltip.tsx +1 -1
  76. package/src/{ui/utils/portal/portal.ts → core/utils/portal/portal.tsx} +8 -10
  77. package/src/css/{compilePalette.ts → _compilePalette.ts} +2 -2
  78. package/src/css/{compileSystem.ts → _compileSystem.ts} +1 -1
  79. package/src/css/{compileTheme.ts → _compileTheme.ts} +3 -3
  80. package/src/css/{compileTheme_v3.ts → _compileTheme_v3.ts} +7 -1
  81. package/src/css/_mergeStyles.ts +0 -7
  82. package/src/css/_system.style.ts +3 -0
  83. package/src/css/aspects/font/font.style.ts +0 -21
  84. package/src/css/aspects/font/font.ts +1 -6
  85. package/src/css/aspects/font/types.ts +0 -4
  86. package/src/css/aspects/index.ts +1 -0
  87. package/src/css/aspects/textAlign/index.ts +2 -0
  88. package/src/css/aspects/textAlign/textAlign.style.ts +26 -0
  89. package/src/css/aspects/textAlign/textAlign.ts +8 -0
  90. package/src/css/aspects/textAlign/types.ts +7 -0
  91. package/src/css/index.ts +3 -3
  92. package/src/css/primitives/_input/_input.style.ts +9 -11
  93. package/src/css/primitives/box/box.style.ts +5 -1
  94. package/src/css/primitives/box/box.ts +2 -0
  95. package/src/css/primitives/box/types.ts +2 -0
  96. package/src/css/primitives/button/button.style.ts +23 -9
  97. package/src/css/primitives/button/button.ts +1 -12
  98. package/src/css/primitives/button/types.ts +1 -6
  99. package/src/css/primitives/card/card.style.ts +12 -21
  100. package/src/css/primitives/heading/heading.ts +2 -1
  101. package/src/css/primitives/heading/types.ts +2 -1
  102. package/src/css/primitives/kbd/kbd.style.ts +3 -6
  103. package/src/css/primitives/label/label.ts +2 -1
  104. package/src/css/primitives/label/types.ts +2 -1
  105. package/src/css/primitives/text/text.style.ts +0 -5
  106. package/src/css/primitives/text/text.ts +2 -1
  107. package/src/css/primitives/text/types.ts +2 -1
  108. package/src/css/primitives/textInput/textInput.style.ts +1 -120
  109. package/src/css/types.ts +9 -9
  110. package/src/theme/v3/color/buildColor_v3.ts +53 -25
  111. package/src/theme/v3/color/card.ts +0 -42
  112. package/src/theme/v3/color/renderColor.test.ts +1 -0
  113. package/src/theme/v3/color/renderColor.ts +9 -2
  114. package/src/theme/v3/color/token.ts +1 -0
  115. package/src/theme/v3/defaultTokens.ts +7 -2
  116. package/dist/_chunks-cjs/_visual-editing.js.map +0 -1
  117. package/dist/_chunks-cjs/buildCommand.js.map +0 -1
  118. package/dist/_chunks-cjs/refractor.js.map +0 -1
  119. package/dist/_chunks-es/_visual-editing.mjs.map +0 -1
  120. package/dist/_chunks-es/refractor.mjs.map +0 -1
  121. package/dist/_visual-editing.mjs +0 -31
  122. package/dist/_visual-editing.mjs.map +0 -1
  123. package/dist/cli.js.map +0 -1
  124. package/dist/css.mjs.map +0 -1
  125. package/dist/index.mjs.map +0 -1
  126. package/dist/sanity-palette.min.css +0 -1
  127. package/dist/sanity-theme.min.css +0 -1
  128. package/dist/system.min.css +0 -1
  129. package/dist/theme.mjs.map +0 -1
  130. package/src/css/primitives/button/_constants.ts +0 -17
  131. package/src/ui/RootClassNames.tsx +0 -44
  132. package/src/ui/_compat/studioTheme.ts +0 -7
  133. package/src/ui/primitives/button/__workshop__/custom.tsx +0 -50
  134. package/src/ui/primitives/card/cardProvider.tsx +0 -21
  135. /package/dist/{cli.d.ts → cli.d.cts} +0 -0
  136. /package/src/{ui → core}/_compat/helpers.ts +0 -0
  137. /package/src/{ui → core}/_compat/styles/_responsive.ts +0 -0
  138. /package/src/{ui → core}/_compat/styles/index.ts +0 -0
  139. /package/src/{ui → core}/_compat/theme/index.ts +0 -0
  140. /package/src/{ui → core}/_compat/theme/theme.test.tsx +0 -0
  141. /package/src/{ui → core}/_compat/theme/themeColorProvider.tsx +0 -0
  142. /package/src/{ui → core}/_compat/theme/themeContext.ts +0 -0
  143. /package/src/{ui → core}/_compat/theme/types.ts +0 -0
  144. /package/src/{ui → core}/_compat/theme/useRootTheme.ts +0 -0
  145. /package/src/{ui → core}/_compat/theme/useTheme.ts +0 -0
  146. /package/src/{ui → core}/_compat/types.ts +0 -0
  147. /package/src/{ui → core}/components/autocomplete/__mocks__/apiStore.ts +0 -0
  148. /package/src/{ui → core}/components/autocomplete/__mocks__/countries.ts +0 -0
  149. /package/src/{ui → core}/components/autocomplete/__workshop__/constrainedHeight.tsx +0 -0
  150. /package/src/{ui → core}/components/autocomplete/__workshop__/example.tsx +0 -0
  151. /package/src/{ui → core}/components/autocomplete/__workshop__/fullscreen.tsx +0 -0
  152. /package/src/{ui → core}/components/autocomplete/__workshop__/index.ts +0 -0
  153. /package/src/{ui → core}/components/autocomplete/__workshop__/types.ts +0 -0
  154. /package/src/{ui → core}/components/autocomplete/autocomplete.tsx +0 -0
  155. /package/src/{ui → core}/components/autocomplete/autocompleteOption.tsx +0 -0
  156. /package/src/{ui → core}/components/autocomplete/autocompleteReducer.ts +0 -0
  157. /package/src/{ui → core}/components/autocomplete/constants.ts +0 -0
  158. /package/src/{ui → core}/components/autocomplete/index.ts +0 -0
  159. /package/src/{ui → core}/components/autocomplete/types.ts +0 -0
  160. /package/src/{ui → core}/components/breadcrumbs/__workshop__/example.tsx +0 -0
  161. /package/src/{ui → core}/components/breadcrumbs/__workshop__/index.ts +0 -0
  162. /package/src/{ui → core}/components/breadcrumbs/breadcrumbs.tsx +0 -0
  163. /package/src/{ui → core}/components/breadcrumbs/index.ts +0 -0
  164. /package/src/{ui → core}/components/dialog/__workshop__/activate.tsx +0 -0
  165. /package/src/{ui → core}/components/dialog/__workshop__/autoFocus.tsx +0 -0
  166. /package/src/{ui → core}/components/dialog/__workshop__/index.ts +0 -0
  167. /package/src/{ui → core}/components/dialog/__workshop__/layering.tsx +0 -0
  168. /package/src/{ui → core}/components/dialog/__workshop__/nested.tsx +0 -0
  169. /package/src/{ui → core}/components/dialog/__workshop__/onScroll.tsx +0 -0
  170. /package/src/{ui → core}/components/dialog/__workshop__/panes.tsx +0 -0
  171. /package/src/{ui → core}/components/dialog/__workshop__/position.tsx +0 -0
  172. /package/src/{ui → core}/components/dialog/__workshop__/props.tsx +0 -0
  173. /package/src/{ui → core}/components/dialog/__workshop__/provider.tsx +0 -0
  174. /package/src/{ui → core}/components/dialog/__workshop__/wrapped.tsx +0 -0
  175. /package/src/{ui → core}/components/dialog/dialog.tsx +0 -0
  176. /package/src/{ui → core}/components/dialog/dialogCard.tsx +0 -0
  177. /package/src/{ui → core}/components/dialog/dialogContext.ts +0 -0
  178. /package/src/{ui → core}/components/dialog/dialogProvider.tsx +0 -0
  179. /package/src/{ui → core}/components/dialog/index.ts +0 -0
  180. /package/src/{ui → core}/components/dialog/isTargetWithinScope.ts +0 -0
  181. /package/src/{ui → core}/components/dialog/useDialog.ts +0 -0
  182. /package/src/{ui → core}/components/hotkeys/__workshop__/index.ts +0 -0
  183. /package/src/{ui → core}/components/hotkeys/__workshop__/plain.tsx +0 -0
  184. /package/src/{ui → core}/components/hotkeys/hotkeys.tsx +0 -0
  185. /package/src/{ui → core}/components/hotkeys/index.ts +0 -0
  186. /package/src/{ui → core}/components/index.ts +0 -0
  187. /package/src/{ui → core}/components/menu/__workshop__/asComponent.tsx +0 -0
  188. /package/src/{ui → core}/components/menu/__workshop__/avatarMenu.tsx +0 -0
  189. /package/src/{ui → core}/components/menu/__workshop__/closableMenuButton.tsx +0 -0
  190. /package/src/{ui → core}/components/menu/__workshop__/constrainedInBoundary.tsx +0 -0
  191. /package/src/{ui → core}/components/menu/__workshop__/customMenuItem.tsx +0 -0
  192. /package/src/{ui → core}/components/menu/__workshop__/customSelectedState.tsx +0 -0
  193. /package/src/{ui → core}/components/menu/__workshop__/disableFocusOnClose.tsx +0 -0
  194. /package/src/{ui → core}/components/menu/__workshop__/groups.tsx +0 -0
  195. /package/src/{ui → core}/components/menu/__workshop__/index.ts +0 -0
  196. /package/src/{ui → core}/components/menu/__workshop__/menuButton.tsx +0 -0
  197. /package/src/{ui → core}/components/menu/__workshop__/menuGroupRight.tsx +0 -0
  198. /package/src/{ui → core}/components/menu/__workshop__/nestedMenu.tsx +0 -0
  199. /package/src/{ui → core}/components/menu/__workshop__/onCloseMenuButton.tsx +0 -0
  200. /package/src/{ui → core}/components/menu/__workshop__/selectedItem.tsx +0 -0
  201. /package/src/{ui → core}/components/menu/__workshop__/shouldFocus.tsx +0 -0
  202. /package/src/{ui → core}/components/menu/__workshop__/tones.tsx +0 -0
  203. /package/src/{ui → core}/components/menu/__workshop__/withoutArrow.tsx +0 -0
  204. /package/src/{ui → core}/components/menu/helpers.ts +0 -0
  205. /package/src/{ui → core}/components/menu/index.ts +0 -0
  206. /package/src/{ui → core}/components/menu/menu.test.tsx +0 -0
  207. /package/src/{ui → core}/components/menu/menu.tsx +0 -0
  208. /package/src/{ui → core}/components/menu/menuButton.tsx +0 -0
  209. /package/src/{ui → core}/components/menu/menuContext.ts +0 -0
  210. /package/src/{ui → core}/components/menu/menuDivider.tsx +0 -0
  211. /package/src/{ui → core}/components/menu/menuGroup.tsx +0 -0
  212. /package/src/{ui → core}/components/menu/menuItem.tsx +0 -0
  213. /package/src/{ui → core}/components/menu/useMenu.ts +0 -0
  214. /package/src/{ui → core}/components/menu/useMenuController.ts +0 -0
  215. /package/src/{ui → core}/components/skeleton/__workshop__/delay.tsx +0 -0
  216. /package/src/{ui → core}/components/skeleton/__workshop__/index.ts +0 -0
  217. /package/src/{ui → core}/components/skeleton/__workshop__/skeleton.tsx +0 -0
  218. /package/src/{ui → core}/components/skeleton/codeSkeleton.tsx +0 -0
  219. /package/src/{ui → core}/components/skeleton/headingSkeleton.tsx +0 -0
  220. /package/src/{ui → core}/components/skeleton/index.ts +0 -0
  221. /package/src/{ui → core}/components/skeleton/labelSkeleton.tsx +0 -0
  222. /package/src/{ui → core}/components/skeleton/skeleton.tsx +0 -0
  223. /package/src/{ui → core}/components/skeleton/textSkeleton.tsx +0 -0
  224. /package/src/{ui → core}/components/tab/__workshop__/example.tsx +0 -0
  225. /package/src/{ui → core}/components/tab/__workshop__/index.ts +0 -0
  226. /package/src/{ui → core}/components/tab/index.ts +0 -0
  227. /package/src/{ui → core}/components/tab/tab.tsx +0 -0
  228. /package/src/{ui → core}/components/tab/tabPanel.tsx +0 -0
  229. /package/src/{ui → core}/components/toast/__workshop__/hook.tsx +0 -0
  230. /package/src/{ui → core}/components/toast/__workshop__/index.ts +0 -0
  231. /package/src/{ui → core}/components/toast/__workshop__/toast.tsx +0 -0
  232. /package/src/{ui → core}/components/toast/index.ts +0 -0
  233. /package/src/{ui → core}/components/toast/toast.test.tsx +0 -0
  234. /package/src/{ui → core}/components/toast/toast.tsx +0 -0
  235. /package/src/{ui → core}/components/toast/toastContext.ts +0 -0
  236. /package/src/{ui → core}/components/toast/toastLayer.tsx +0 -0
  237. /package/src/{ui → core}/components/toast/toastProvider.tsx +0 -0
  238. /package/src/{ui → core}/components/toast/toastState.ts +0 -0
  239. /package/src/{ui → core}/components/toast/types.ts +0 -0
  240. /package/src/{ui → core}/components/toast/useToast.ts +0 -0
  241. /package/src/{ui → core}/components/tree/__workshop__/basic.perf.ts +0 -0
  242. /package/src/{ui → core}/components/tree/__workshop__/basic.tsx +0 -0
  243. /package/src/{ui → core}/components/tree/__workshop__/index.ts +0 -0
  244. /package/src/{ui → core}/components/tree/__workshop__/tabFromElement.tsx +0 -0
  245. /package/src/{ui → core}/components/tree/helpers.ts +0 -0
  246. /package/src/{ui → core}/components/tree/index.ts +0 -0
  247. /package/src/{ui → core}/components/tree/tree.tsx +0 -0
  248. /package/src/{ui → core}/components/tree/treeContext.ts +0 -0
  249. /package/src/{ui → core}/components/tree/treeGroup.tsx +0 -0
  250. /package/src/{ui → core}/components/tree/treeItem.tsx +0 -0
  251. /package/src/{ui → core}/components/tree/types.ts +0 -0
  252. /package/src/{ui → core}/components/tree/useTree.ts +0 -0
  253. /package/src/{ui → core}/constants.ts +0 -0
  254. /package/src/{ui → core}/global.ts +0 -0
  255. /package/src/{ui → core}/helpers/animation.ts +0 -0
  256. /package/src/{ui → core}/helpers/element.ts +0 -0
  257. /package/src/{ui → core}/helpers/focus.ts +0 -0
  258. /package/src/{ui → core}/helpers/index.ts +0 -0
  259. /package/src/{ui → core}/helpers/props.ts +0 -0
  260. /package/src/{ui → core}/helpers/scroll.ts +0 -0
  261. /package/src/{ui → core}/hooks/index.ts +0 -0
  262. /package/src/{ui → core}/hooks/useArrayProp.ts +0 -0
  263. /package/src/{ui → core}/hooks/useClickOutside.test.tsx +0 -0
  264. /package/src/{ui → core}/hooks/useClickOutside.ts +0 -0
  265. /package/src/{ui → core}/hooks/useClickOutsideEvent.test.tsx +0 -0
  266. /package/src/{ui → core}/hooks/useClickOutsideEvent.ts +0 -0
  267. /package/src/{ui → core}/hooks/useCustomValidity.ts +0 -0
  268. /package/src/{ui → core}/hooks/useDelayed.test.ts +0 -0
  269. /package/src/{ui → core}/hooks/useDelayedState.ts +0 -0
  270. /package/src/{ui → core}/hooks/useElementRect/__workshop__/example.tsx +0 -0
  271. /package/src/{ui → core}/hooks/useElementRect/__workshop__/index.ts +0 -0
  272. /package/src/{ui → core}/hooks/useElementRect/index.ts +0 -0
  273. /package/src/{ui → core}/hooks/useElementRect/useElementRect.ts +0 -0
  274. /package/src/{ui → core}/hooks/useElementSize.ts +0 -0
  275. /package/src/{ui → core}/hooks/useForwardedRef.ts +0 -0
  276. /package/src/{ui → core}/hooks/useGlobalKeyDown.ts +0 -0
  277. /package/src/{ui → core}/hooks/useIsomorphicEffect.ts +0 -0
  278. /package/src/{ui → core}/hooks/useMatchMedia.ts +0 -0
  279. /package/src/{ui → core}/hooks/useMediaIndex/__workshop__/index.ts +0 -0
  280. /package/src/{ui → core}/hooks/useMediaIndex/__workshop__/test.tsx +0 -0
  281. /package/src/{ui → core}/hooks/useMediaIndex/index.ts +0 -0
  282. /package/src/{ui → core}/hooks/useMediaIndex/useMediaIndex.test.tsx +0 -0
  283. /package/src/{ui → core}/hooks/useMediaIndex/useMediaIndex.ts +0 -0
  284. /package/src/{ui → core}/hooks/useMounted.ts +0 -0
  285. /package/src/{ui → core}/hooks/usePrefersDark.hydration.test.tsx +0 -0
  286. /package/src/{ui → core}/hooks/usePrefersDark.test.tsx +0 -0
  287. /package/src/{ui → core}/hooks/usePrefersDark.ts +0 -0
  288. /package/src/{ui → core}/hooks/usePrefersReducedMotion.hydration.test.tsx +0 -0
  289. /package/src/{ui → core}/hooks/usePrefersReducedMotion.test.tsx +0 -0
  290. /package/src/{ui → core}/hooks/usePrefersReducedMotion.ts +0 -0
  291. /package/src/{ui → core}/lib/createGlobalScopedContext.ts +0 -0
  292. /package/src/{ui → core}/lib/globalScope.ts +0 -0
  293. /package/src/{ui → core}/lib/isRecord.ts +0 -0
  294. /package/src/{ui → core}/middleware/origin.ts +0 -0
  295. /package/src/{ui → core}/observers/elementSizeObserver.ts +0 -0
  296. /package/src/{ui → core}/observers/index.ts +0 -0
  297. /package/src/{ui → core}/observers/resizeObserver.ts +0 -0
  298. /package/src/{ui → core}/primitives/_selectable/index.ts +0 -0
  299. /package/src/{ui → core}/primitives/_selectable/selectable.tsx +0 -0
  300. /package/src/{ui → core}/primitives/avatar/__workshop__/asButton.tsx +0 -0
  301. /package/src/{ui → core}/primitives/avatar/__workshop__/index.ts +0 -0
  302. /package/src/{ui → core}/primitives/avatar/__workshop__/stack.tsx +0 -0
  303. /package/src/{ui → core}/primitives/avatar/__workshop__/withinButton.tsx +0 -0
  304. /package/src/{ui → core}/primitives/avatar/__workshop__/withinMenuItem.tsx +0 -0
  305. /package/src/{ui → core}/primitives/avatar/avatar.tsx +0 -0
  306. /package/src/{ui → core}/primitives/avatar/avatarCounter.tsx +0 -0
  307. /package/src/{ui → core}/primitives/avatar/avatarStack.tsx +0 -0
  308. /package/src/{ui → core}/primitives/avatar/index.ts +0 -0
  309. /package/src/{ui → core}/primitives/avatar/types.ts +0 -0
  310. /package/src/{ui → core}/primitives/badge/__workshop__/index.ts +0 -0
  311. /package/src/{ui → core}/primitives/badge/__workshop__/props.tsx +0 -0
  312. /package/src/{ui → core}/primitives/badge/__workshop__/tones.tsx +0 -0
  313. /package/src/{ui → core}/primitives/badge/badge.test.tsx +0 -0
  314. /package/src/{ui → core}/primitives/badge/badge.tsx +0 -0
  315. /package/src/{ui → core}/primitives/badge/index.ts +0 -0
  316. /package/src/{ui → core}/primitives/badge/types.ts +0 -0
  317. /package/src/{ui → core}/primitives/box/__workshop__/index.ts +0 -0
  318. /package/src/{ui → core}/primitives/box/__workshop__/props.tsx +0 -0
  319. /package/src/{ui → core}/primitives/box/__workshop__/responsive.tsx +0 -0
  320. /package/src/{ui → core}/primitives/box/index.ts +0 -0
  321. /package/src/{ui → core}/primitives/button/__workshop__/customIcons.tsx +0 -0
  322. /package/src/{ui → core}/primitives/button/__workshop__/disabled.tsx +0 -0
  323. /package/src/{ui → core}/primitives/button/__workshop__/index.ts +0 -0
  324. /package/src/{ui → core}/primitives/button/__workshop__/mixedChildren.tsx +0 -0
  325. /package/src/{ui → core}/primitives/button/__workshop__/props.tsx +0 -0
  326. /package/src/{ui → core}/primitives/button/__workshop__/sanityUploadButton.tsx +0 -0
  327. /package/src/{ui → core}/primitives/button/__workshop__/stacked.tsx +0 -0
  328. /package/src/{ui → core}/primitives/button/__workshop__/styled1.tsx +0 -0
  329. /package/src/{ui → core}/primitives/button/__workshop__/styled2.tsx +0 -0
  330. /package/src/{ui → core}/primitives/button/__workshop__/uploadButton.tsx +0 -0
  331. /package/src/{ui → core}/primitives/button/button.test.tsx +0 -0
  332. /package/src/{ui → core}/primitives/button/index.ts +0 -0
  333. /package/src/{ui → core}/primitives/card/__workshop__/allTones.tsx +0 -0
  334. /package/src/{ui → core}/primitives/card/__workshop__/asComponent.tsx +0 -0
  335. /package/src/{ui → core}/primitives/card/__workshop__/checkered.tsx +0 -0
  336. /package/src/{ui → core}/primitives/card/__workshop__/index.ts +0 -0
  337. /package/src/{ui → core}/primitives/card/__workshop__/listNavigation.tsx +0 -0
  338. /package/src/{ui → core}/primitives/card/__workshop__/styled.tsx +0 -0
  339. /package/src/{ui → core}/primitives/card/cardContext.ts +0 -0
  340. /package/src/{ui → core}/primitives/card/index.ts +0 -0
  341. /package/src/{ui → core}/primitives/card/useCard.ts +0 -0
  342. /package/src/{ui → core}/primitives/checkbox/__workshop__/example.tsx +0 -0
  343. /package/src/{ui → core}/primitives/checkbox/__workshop__/index.ts +0 -0
  344. /package/src/{ui → core}/primitives/checkbox/__workshop__/props.tsx +0 -0
  345. /package/src/{ui → core}/primitives/checkbox/__workshop__/readOnly.tsx +0 -0
  346. /package/src/{ui → core}/primitives/checkbox/__workshop__/tones.tsx +0 -0
  347. /package/src/{ui → core}/primitives/checkbox/checkbox.tsx +0 -0
  348. /package/src/{ui → core}/primitives/checkbox/index.ts +0 -0
  349. /package/src/{ui → core}/primitives/code/__workshop__/index.ts +0 -0
  350. /package/src/{ui → core}/primitives/code/__workshop__/opticalAlignment.tsx +0 -0
  351. /package/src/{ui → core}/primitives/code/__workshop__/props.tsx +0 -0
  352. /package/src/{ui → core}/primitives/code/code.tsx +0 -0
  353. /package/src/{ui → core}/primitives/code/index.ts +0 -0
  354. /package/src/{ui → core}/primitives/code/refractor.tsx +0 -0
  355. /package/src/{ui → core}/primitives/container/__workshop__/example.tsx +0 -0
  356. /package/src/{ui → core}/primitives/container/__workshop__/index.ts +0 -0
  357. /package/src/{ui → core}/primitives/container/container.tsx +0 -0
  358. /package/src/{ui → core}/primitives/container/index.ts +0 -0
  359. /package/src/{ui → core}/primitives/container/types.ts +0 -0
  360. /package/src/{ui → core}/primitives/flex/__workshop__/example.tsx +0 -0
  361. /package/src/{ui → core}/primitives/flex/__workshop__/gap.tsx +0 -0
  362. /package/src/{ui → core}/primitives/flex/__workshop__/index.ts +0 -0
  363. /package/src/{ui → core}/primitives/flex/flex.tsx +0 -0
  364. /package/src/{ui → core}/primitives/flex/index.ts +0 -0
  365. /package/src/{ui → core}/primitives/grid/__workshop__/index.ts +0 -0
  366. /package/src/{ui → core}/primitives/grid/__workshop__/responsive.tsx +0 -0
  367. /package/src/{ui → core}/primitives/grid/grid.tsx +0 -0
  368. /package/src/{ui → core}/primitives/grid/index.ts +0 -0
  369. /package/src/{ui → core}/primitives/heading/__workshop__/index.ts +0 -0
  370. /package/src/{ui → core}/primitives/heading/heading.tsx +0 -0
  371. /package/src/{ui → core}/primitives/heading/index.ts +0 -0
  372. /package/src/{ui → core}/primitives/index.ts +0 -0
  373. /package/src/{ui → core}/primitives/inline/__workshop__/index.ts +0 -0
  374. /package/src/{ui → core}/primitives/inline/__workshop__/plain.tsx +0 -0
  375. /package/src/{ui → core}/primitives/inline/index.ts +0 -0
  376. /package/src/{ui → core}/primitives/inline/inline.tsx +0 -0
  377. /package/src/{ui → core}/primitives/inline/types.ts +0 -0
  378. /package/src/{ui → core}/primitives/kbd/__workshop__/index.ts +0 -0
  379. /package/src/{ui → core}/primitives/kbd/__workshop__/plain.tsx +0 -0
  380. /package/src/{ui → core}/primitives/kbd/index.ts +0 -0
  381. /package/src/{ui → core}/primitives/kbd/kbd.tsx +0 -0
  382. /package/src/{ui → core}/primitives/label/__workshop__/index.ts +0 -0
  383. /package/src/{ui → core}/primitives/label/__workshop__/opticalAlignment.tsx +0 -0
  384. /package/src/{ui → core}/primitives/label/index.ts +0 -0
  385. /package/src/{ui → core}/primitives/label/label.tsx +0 -0
  386. /package/src/{ui → core}/primitives/popover/__workshop__/AlignedStory.tsx +0 -0
  387. /package/src/{ui → core}/primitives/popover/__workshop__/MarginsStory.tsx +0 -0
  388. /package/src/{ui → core}/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +0 -0
  389. /package/src/{ui → core}/primitives/popover/__workshop__/OpenOnMountStory.tsx +0 -0
  390. /package/src/{ui → core}/primitives/popover/__workshop__/PlainStory.tsx +0 -0
  391. /package/src/{ui → core}/primitives/popover/__workshop__/RecursiveStory.tsx +0 -0
  392. /package/src/{ui → core}/primitives/popover/__workshop__/SidePanelStory.tsx +0 -0
  393. /package/src/{ui → core}/primitives/popover/__workshop__/TestStory.tsx +0 -0
  394. /package/src/{ui → core}/primitives/popover/__workshop__/index.ts +0 -0
  395. /package/src/{ui → core}/primitives/popover/constants.ts +0 -0
  396. /package/src/{ui → core}/primitives/popover/floating-ui/size.ts +0 -0
  397. /package/src/{ui → core}/primitives/popover/helpers.ts +0 -0
  398. /package/src/{ui → core}/primitives/popover/index.ts +0 -0
  399. /package/src/{ui → core}/primitives/popover/popoverLayer.tsx +0 -0
  400. /package/src/{ui → core}/primitives/popover/types.ts +0 -0
  401. /package/src/{ui → core}/primitives/radio/__workshop__/example.tsx +0 -0
  402. /package/src/{ui → core}/primitives/radio/__workshop__/index.ts +0 -0
  403. /package/src/{ui → core}/primitives/radio/__workshop__/plain.tsx +0 -0
  404. /package/src/{ui → core}/primitives/radio/index.ts +0 -0
  405. /package/src/{ui → core}/primitives/radio/radio.tsx +0 -0
  406. /package/src/{ui → core}/primitives/select/__workshop__/index.ts +0 -0
  407. /package/src/{ui → core}/primitives/select/__workshop__/plain.tsx +0 -0
  408. /package/src/{ui → core}/primitives/select/__workshop__/readOnly.tsx +0 -0
  409. /package/src/{ui → core}/primitives/select/index.ts +0 -0
  410. /package/src/{ui → core}/primitives/select/select.tsx +0 -0
  411. /package/src/{ui → core}/primitives/spinner/__workshop__/Props.tsx +0 -0
  412. /package/src/{ui → core}/primitives/spinner/__workshop__/index.ts +0 -0
  413. /package/src/{ui → core}/primitives/spinner/animatedSpinnerIcon.tsx +0 -0
  414. /package/src/{ui → core}/primitives/spinner/index.ts +0 -0
  415. /package/src/{ui → core}/primitives/spinner/spinner.tsx +0 -0
  416. /package/src/{ui → core}/primitives/stack/__workshop__/index.ts +0 -0
  417. /package/src/{ui → core}/primitives/stack/__workshop__/plain.tsx +0 -0
  418. /package/src/{ui → core}/primitives/stack/index.ts +0 -0
  419. /package/src/{ui → core}/primitives/stack/stack.tsx +0 -0
  420. /package/src/{ui → core}/primitives/switch/__workshop__/example.tsx +0 -0
  421. /package/src/{ui → core}/primitives/switch/__workshop__/index.ts +0 -0
  422. /package/src/{ui → core}/primitives/switch/__workshop__/props.tsx +0 -0
  423. /package/src/{ui → core}/primitives/switch/index.ts +0 -0
  424. /package/src/{ui → core}/primitives/switch/switch.tsx +0 -0
  425. /package/src/{ui → core}/primitives/text/__workshop__/colored.tsx +0 -0
  426. /package/src/{ui → core}/primitives/text/__workshop__/index.ts +0 -0
  427. /package/src/{ui → core}/primitives/text/__workshop__/opticalAlignment.tsx +0 -0
  428. /package/src/{ui → core}/primitives/text/index.ts +0 -0
  429. /package/src/{ui → core}/primitives/text/text.tsx +0 -0
  430. /package/src/{ui → core}/primitives/textArea/__workshop__/index.ts +0 -0
  431. /package/src/{ui → core}/primitives/textArea/__workshop__/plain.tsx +0 -0
  432. /package/src/{ui → core}/primitives/textArea/index.ts +0 -0
  433. /package/src/{ui → core}/primitives/textArea/textArea.tsx +0 -0
  434. /package/src/{ui → core}/primitives/textInput/__workshop__/clearButton.tsx +0 -0
  435. /package/src/{ui → core}/primitives/textInput/__workshop__/customValidity.tsx +0 -0
  436. /package/src/{ui → core}/primitives/textInput/__workshop__/index.ts +0 -0
  437. /package/src/{ui → core}/primitives/textInput/__workshop__/plain.tsx +0 -0
  438. /package/src/{ui → core}/primitives/textInput/__workshop__/readOnly.tsx +0 -0
  439. /package/src/{ui → core}/primitives/textInput/__workshop__/states.tsx +0 -0
  440. /package/src/{ui → core}/primitives/textInput/__workshop__/tones.tsx +0 -0
  441. /package/src/{ui → core}/primitives/textInput/__workshop__/typed.tsx +0 -0
  442. /package/src/{ui → core}/primitives/textInput/index.ts +0 -0
  443. /package/src/{ui → core}/primitives/textInput/textInput.tsx +0 -0
  444. /package/src/{ui → core}/primitives/tooltip/__workshop__/customPortal.tsx +0 -0
  445. /package/src/{ui → core}/primitives/tooltip/__workshop__/index.ts +0 -0
  446. /package/src/{ui → core}/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -0
  447. /package/src/{ui → core}/primitives/tooltip/__workshop__/props.tsx +0 -0
  448. /package/src/{ui → core}/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -0
  449. /package/src/{ui → core}/primitives/tooltip/constants.ts +0 -0
  450. /package/src/{ui → core}/primitives/tooltip/index.ts +0 -0
  451. /package/src/{ui → core}/primitives/tooltip/tooltip.test.tsx +0 -0
  452. /package/src/{ui → core}/primitives/tooltip/tooltipDelayGroup/index.ts +0 -0
  453. /package/src/{ui → core}/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +0 -0
  454. /package/src/{ui → core}/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +0 -0
  455. /package/src/{ui → core}/primitives/tooltip/tooltipDelayGroup/types.ts +0 -0
  456. /package/src/{ui → core}/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +0 -0
  457. /package/src/{ui → core}/primitives/tooltip/tooltipLayer.tsx +0 -0
  458. /package/src/{ui → core}/primitives/types.ts +0 -0
  459. /package/src/{ui → core}/types/avatar.ts +0 -0
  460. /package/src/{ui → core}/types/badge.ts +0 -0
  461. /package/src/{ui → core}/types/box.ts +0 -0
  462. /package/src/{ui → core}/types/button.ts +0 -0
  463. /package/src/{ui → core}/types/card.ts +0 -0
  464. /package/src/{ui → core}/types/dialog.ts +0 -0
  465. /package/src/{ui → core}/types/flex.ts +0 -0
  466. /package/src/{ui → core}/types/grid.ts +0 -0
  467. /package/src/{ui → core}/types/gridItem.ts +0 -0
  468. /package/src/{ui → core}/types/index.ts +0 -0
  469. /package/src/{ui → core}/types/placement.ts +0 -0
  470. /package/src/{ui → core}/types/popover.ts +0 -0
  471. /package/src/{ui → core}/types/props.ts +0 -0
  472. /package/src/{ui → core}/types/radius.ts +0 -0
  473. /package/src/{ui → core}/types/selectable.ts +0 -0
  474. /package/src/{ui → core}/types/text.ts +0 -0
  475. /package/src/{ui → core}/utils/arrow/arrow.tsx +0 -0
  476. /package/src/{ui → core}/utils/arrow/cmds.ts +0 -0
  477. /package/src/{ui → core}/utils/arrow/index.ts +0 -0
  478. /package/src/{ui → core}/utils/boundaryElement/__workshop__/index.ts +0 -0
  479. /package/src/{ui → core}/utils/boundaryElement/__workshop__/plain.tsx +0 -0
  480. /package/src/{ui → core}/utils/boundaryElement/boundaryElement.test.tsx +0 -0
  481. /package/src/{ui → core}/utils/boundaryElement/boundaryElementContext.ts +0 -0
  482. /package/src/{ui → core}/utils/boundaryElement/boundaryElementProvider.tsx +0 -0
  483. /package/src/{ui → core}/utils/boundaryElement/index.ts +0 -0
  484. /package/src/{ui → core}/utils/boundaryElement/types.ts +0 -0
  485. /package/src/{ui → core}/utils/boundaryElement/useBoundaryElement.ts +0 -0
  486. /package/src/{ui → core}/utils/elementQuery/__workshop__/customMedia.tsx +0 -0
  487. /package/src/{ui → core}/utils/elementQuery/__workshop__/index.ts +0 -0
  488. /package/src/{ui → core}/utils/elementQuery/elementQuery.tsx +0 -0
  489. /package/src/{ui → core}/utils/elementQuery/helpers.ts +0 -0
  490. /package/src/{ui → core}/utils/elementQuery/index.ts +0 -0
  491. /package/src/{ui → core}/utils/errorBoundary.tsx +0 -0
  492. /package/src/{ui → core}/utils/getElementRef.ts +0 -0
  493. /package/src/{ui → core}/utils/index.ts +0 -0
  494. /package/src/{ui → core}/utils/layer/__workshop__/_debug.tsx +0 -0
  495. /package/src/{ui → core}/utils/layer/__workshop__/index.ts +0 -0
  496. /package/src/{ui → core}/utils/layer/__workshop__/multipleRoots.tsx +0 -0
  497. /package/src/{ui → core}/utils/layer/__workshop__/nested.tsx +0 -0
  498. /package/src/{ui → core}/utils/layer/__workshop__/responsiveZOffset.tsx +0 -0
  499. /package/src/{ui → core}/utils/layer/getLayerContext.test.ts +0 -0
  500. /package/src/{ui → core}/utils/layer/getLayerContext.ts +0 -0
  501. /package/src/{ui → core}/utils/layer/index.ts +0 -0
  502. /package/src/{ui → core}/utils/layer/layer.test.tsx +0 -0
  503. /package/src/{ui → core}/utils/layer/layer.tsx +0 -0
  504. /package/src/{ui → core}/utils/layer/layerCard.tsx +0 -0
  505. /package/src/{ui → core}/utils/layer/layerContext.ts +0 -0
  506. /package/src/{ui → core}/utils/layer/layerProvider.tsx +0 -0
  507. /package/src/{ui → core}/utils/layer/types.ts +0 -0
  508. /package/src/{ui → core}/utils/layer/useLayer.ts +0 -0
  509. /package/src/{ui → core}/utils/portal/__workshop__/index.ts +0 -0
  510. /package/src/{ui → core}/utils/portal/__workshop__/named.tsx +0 -0
  511. /package/src/{ui → core}/utils/portal/index.ts +0 -0
  512. /package/src/{ui → core}/utils/portal/portal.test.tsx +0 -0
  513. /package/src/{ui → core}/utils/portal/portalContext.ts +0 -0
  514. /package/src/{ui → core}/utils/portal/portalProvider.tsx +0 -0
  515. /package/src/{ui → core}/utils/portal/types.ts +0 -0
  516. /package/src/{ui → core}/utils/portal/usePortal.ts +0 -0
  517. /package/src/{ui → core}/utils/spanWithTextOverflow.tsx +0 -0
  518. /package/src/{ui → core}/utils/srOnly/index.ts +0 -0
  519. /package/src/{ui → core}/utils/srOnly/srOnly.tsx +0 -0
  520. /package/src/{ui → core}/utils/virtualList/__workshop__/changingProps.tsx +0 -0
  521. /package/src/{ui → core}/utils/virtualList/__workshop__/elementScroll.tsx +0 -0
  522. /package/src/{ui → core}/utils/virtualList/__workshop__/index.ts +0 -0
  523. /package/src/{ui → core}/utils/virtualList/__workshop__/infiniteList.tsx +0 -0
  524. /package/src/{ui → core}/utils/virtualList/__workshop__/windowScrolll.tsx +0 -0
  525. /package/src/{ui → core}/utils/virtualList/index.ts +0 -0
  526. /package/src/{ui → core}/utils/virtualList/virtualList.tsx +0 -0
package/dist/{system.css → ui-system.css} RENAMED
@@ -1660,6 +1660,26 @@
1660
1660
  var(--shadow-5-ambient) var(--color-shadow-ambient);
1661
1661
  }
1662
1662
 
1663
+ .s-text-align-initial {
1664
+ text-align: initial;
1665
+ }
1666
+
1667
+ .s-text-align-left {
1668
+ text-align: left;
1669
+ }
1670
+
1671
+ .s-text-align-center {
1672
+ text-align: center;
1673
+ }
1674
+
1675
+ .s-text-align-right {
1676
+ text-align: right;
1677
+ }
1678
+
1679
+ .s-text-align-justify {
1680
+ text-align: justify;
1681
+ }
1682
+
1663
1683
  .s-text-overflow-ellipsis {
1664
1684
  display: block;
1665
1685
  white-space: nowrap;
@@ -3294,6 +3314,26 @@
3294
3314
  var(--shadow-5-ambient) var(--color-shadow-ambient);
3295
3315
  }
3296
3316
 
3317
+ .s-1\:text-align-initial {
3318
+ text-align: initial;
3319
+ }
3320
+
3321
+ .s-1\:text-align-left {
3322
+ text-align: left;
3323
+ }
3324
+
3325
+ .s-1\:text-align-center {
3326
+ text-align: center;
3327
+ }
3328
+
3329
+ .s-1\:text-align-right {
3330
+ text-align: right;
3331
+ }
3332
+
3333
+ .s-1\:text-align-justify {
3334
+ text-align: justify;
3335
+ }
3336
+
3297
3337
  .s-1\:w-fill {
3298
3338
  width: -moz-available;
3299
3339
  width: -webkit-fill-available;
@@ -4913,6 +4953,26 @@
4913
4953
  var(--shadow-5-ambient) var(--color-shadow-ambient);
4914
4954
  }
4915
4955
 
4956
+ .s-2\:text-align-initial {
4957
+ text-align: initial;
4958
+ }
4959
+
4960
+ .s-2\:text-align-left {
4961
+ text-align: left;
4962
+ }
4963
+
4964
+ .s-2\:text-align-center {
4965
+ text-align: center;
4966
+ }
4967
+
4968
+ .s-2\:text-align-right {
4969
+ text-align: right;
4970
+ }
4971
+
4972
+ .s-2\:text-align-justify {
4973
+ text-align: justify;
4974
+ }
4975
+
4916
4976
  .s-2\:w-fill {
4917
4977
  width: -moz-available;
4918
4978
  width: -webkit-fill-available;
@@ -6532,6 +6592,26 @@
6532
6592
  var(--shadow-5-ambient) var(--color-shadow-ambient);
6533
6593
  }
6534
6594
 
6595
+ .s-3\:text-align-initial {
6596
+ text-align: initial;
6597
+ }
6598
+
6599
+ .s-3\:text-align-left {
6600
+ text-align: left;
6601
+ }
6602
+
6603
+ .s-3\:text-align-center {
6604
+ text-align: center;
6605
+ }
6606
+
6607
+ .s-3\:text-align-right {
6608
+ text-align: right;
6609
+ }
6610
+
6611
+ .s-3\:text-align-justify {
6612
+ text-align: justify;
6613
+ }
6614
+
6535
6615
  .s-3\:w-fill {
6536
6616
  width: -moz-available;
6537
6617
  width: -webkit-fill-available;
@@ -8151,6 +8231,26 @@
8151
8231
  var(--shadow-5-ambient) var(--color-shadow-ambient);
8152
8232
  }
8153
8233
 
8234
+ .s-4\:text-align-initial {
8235
+ text-align: initial;
8236
+ }
8237
+
8238
+ .s-4\:text-align-left {
8239
+ text-align: left;
8240
+ }
8241
+
8242
+ .s-4\:text-align-center {
8243
+ text-align: center;
8244
+ }
8245
+
8246
+ .s-4\:text-align-right {
8247
+ text-align: right;
8248
+ }
8249
+
8250
+ .s-4\:text-align-justify {
8251
+ text-align: justify;
8252
+ }
8253
+
8154
8254
  .s-4\:w-fill {
8155
8255
  width: -moz-available;
8156
8256
  width: -webkit-fill-available;
@@ -9770,6 +9870,26 @@
9770
9870
  var(--shadow-5-ambient) var(--color-shadow-ambient);
9771
9871
  }
9772
9872
 
9873
+ .s-5\:text-align-initial {
9874
+ text-align: initial;
9875
+ }
9876
+
9877
+ .s-5\:text-align-left {
9878
+ text-align: left;
9879
+ }
9880
+
9881
+ .s-5\:text-align-center {
9882
+ text-align: center;
9883
+ }
9884
+
9885
+ .s-5\:text-align-right {
9886
+ text-align: right;
9887
+ }
9888
+
9889
+ .s-5\:text-align-justify {
9890
+ text-align: justify;
9891
+ }
9892
+
9773
9893
  .s-5\:w-fill {
9774
9894
  width: -moz-available;
9775
9895
  width: -webkit-fill-available;
@@ -11389,6 +11509,26 @@
11389
11509
  var(--shadow-5-ambient) var(--color-shadow-ambient);
11390
11510
  }
11391
11511
 
11512
+ .s-6\:text-align-initial {
11513
+ text-align: initial;
11514
+ }
11515
+
11516
+ .s-6\:text-align-left {
11517
+ text-align: left;
11518
+ }
11519
+
11520
+ .s-6\:text-align-center {
11521
+ text-align: center;
11522
+ }
11523
+
11524
+ .s-6\:text-align-right {
11525
+ text-align: right;
11526
+ }
11527
+
11528
+ .s-6\:text-align-justify {
11529
+ text-align: justify;
11530
+ }
11531
+
11392
11532
  .s-6\:w-fill {
11393
11533
  width: -moz-available;
11394
11534
  width: -webkit-fill-available;
@@ -11452,26 +11592,6 @@
11452
11592
  --font-weight: var(--font-weight-bold);
11453
11593
  }
11454
11594
 
11455
- .s-text-align-initial {
11456
- text-align: initial;
11457
- }
11458
-
11459
- .s-text-align-left {
11460
- text-align: left;
11461
- }
11462
-
11463
- .s-text-align-center {
11464
- text-align: center;
11465
- }
11466
-
11467
- .s-text-align-right {
11468
- text-align: right;
11469
- }
11470
-
11471
- .s-text-align-justify {
11472
- text-align: justify;
11473
- }
11474
-
11475
11595
  .s-sr-only {
11476
11596
  display: block;
11477
11597
  width: 0;
@@ -11694,7 +11814,7 @@
11694
11814
  --input-padding: var(--space-0);
11695
11815
  }
11696
11816
 
11697
- .s-input-p-0.s-5 {
11817
+ .s-input-p-0_5 {
11698
11818
  --input-padding: var(--space-0_5);
11699
11819
  }
11700
11820
 
@@ -11738,7 +11858,7 @@
11738
11858
  --input-gap: var(--space-0);
11739
11859
  }
11740
11860
 
11741
- .s-input-g-0.s-5 {
11861
+ .s-input-g-0_5 {
11742
11862
  --input-gap: var(--space-0_5);
11743
11863
  }
11744
11864
 
@@ -12272,8 +12392,12 @@
12272
12392
  min-height: 0;
12273
12393
  }
12274
12394
 
12275
- .s-box:is(ul),
12276
- .s-box:is(ol) {
12395
+ iframe.s-box {
12396
+ border: none;
12397
+ }
12398
+
12399
+ ul.s-box,
12400
+ ol.s-box {
12277
12401
  list-style: none;
12278
12402
  }
12279
12403
 
@@ -12336,40 +12460,48 @@
12336
12460
  opacity: 0.8;
12337
12461
  }
12338
12462
 
12339
- .s-button.s-solid.s-default {
12463
+ .s-button[data-mode='default'][data-tone='default'] {
12340
12464
  --color-bg: var(--color-solid-default-bg-0);
12341
12465
  --color-border: var(--color-solid-default-border-1);
12466
+ --color-code-bg: var(--color-solid-default-bg-1);
12467
+ --color-code-fg: var(--color-solid-default-fg-4);
12342
12468
  --color-fg: var(--color-solid-default-fg-0);
12343
12469
  --color-muted-bg: var(--color-solid-default-bg-1);
12344
12470
  --color-muted-fg: var(--color-solid-default-fg-4);
12345
12471
  --button-box-shadow: none;
12346
12472
  }
12347
12473
 
12348
- .s-button.s-solid.s-default:not([data-disabled]):hover {
12474
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled]):hover {
12349
12475
  --color-bg: var(--color-solid-default-bg-1);
12350
12476
  --color-border: var(--color-solid-default-border-2);
12477
+ --color-code-bg: var(--color-solid-default-bg-2);
12478
+ --color-code-fg: var(--color-solid-default-fg-4);
12351
12479
  --color-fg: var(--color-solid-default-fg-0);
12352
12480
  --color-muted-bg: var(--color-solid-default-bg-2);
12353
12481
  --color-muted-fg: var(--color-solid-default-fg-4);
12354
12482
  }
12355
12483
 
12356
- .s-button.s-solid.s-default:not([data-disabled]):active {
12484
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled]):active {
12357
12485
  --color-bg: var(--color-solid-default-bg-2);
12358
12486
  --color-border: var(--color-solid-default-border-3);
12487
+ --color-code-bg: var(--color-solid-default-bg-3);
12488
+ --color-code-fg: var(--color-solid-default-fg-4);
12359
12489
  --color-fg: var(--color-solid-default-fg-0);
12360
12490
  --color-muted-bg: var(--color-solid-default-bg-3);
12361
12491
  --color-muted-fg: var(--color-solid-default-fg-4);
12362
12492
  }
12363
12493
 
12364
- .s-button.s-solid.s-default:not([data-disabled])[data-selected] {
12494
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled])[data-selected] {
12365
12495
  --color-bg: var(--color-solid-default-bg-2);
12366
12496
  --color-border: var(--color-solid-default-border-3);
12497
+ --color-code-bg: var(--color-solid-default-bg-3);
12498
+ --color-code-fg: var(--color-solid-default-fg-4);
12367
12499
  --color-fg: var(--color-solid-default-fg-0);
12368
12500
  --color-muted-bg: var(--color-solid-default-bg-3);
12369
12501
  --color-muted-fg: var(--color-solid-default-fg-4);
12370
12502
  }
12371
12503
 
12372
- .s-button.s-solid.s-default[data-disabled] {
12504
+ .s-button[data-mode='default'][data-tone='default'][data-disabled] {
12373
12505
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12374
12506
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12375
12507
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12388,42 +12520,50 @@
12388
12520
  --color-muted-fg: var(--color-tinted-default-border-4);
12389
12521
  }
12390
12522
 
12391
- .s-button.s-ghost.s-default {
12523
+ .s-button[data-mode='ghost'][data-tone='default'] {
12392
12524
  --color-bg: var(--color-tinted-default-bg-1);
12393
- --color-border: var(--color-tinted-default-border-0);
12525
+ --color-border: var(--color-tinted-default-border-1);
12394
12526
  --color-fg: var(--color-tinted-default-fg-2);
12527
+ --color-code-bg: var(--color-tinted-default-bg-2);
12528
+ --color-code-fg: var(--color-tinted-default-fg-4);
12395
12529
  --color-muted-bg: var(--color-tinted-default-bg-2);
12396
12530
  --color-muted-fg: var(--color-tinted-default-fg-4);
12397
12531
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12398
12532
  }
12399
12533
 
12400
- .s-button.s-ghost.s-default:not([data-disabled]):hover {
12534
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled]):hover {
12401
12535
  --color-bg: var(--color-tinted-default-bg-2);
12402
- --color-border: var(--color-tinted-default-border-1);
12536
+ --color-border: var(--color-tinted-default-border-2);
12537
+ --color-code-bg: var(--color-tinted-default-bg-3);
12538
+ --color-code-fg: var(--color-tinted-default-fg-3);
12403
12539
  --color-fg: var(--color-tinted-default-fg-1);
12404
12540
  --color-muted-bg: var(--color-tinted-default-bg-3);
12405
12541
  --color-muted-fg: var(--color-tinted-default-fg-3);
12406
12542
  }
12407
12543
 
12408
- .s-button.s-ghost.s-default:not([data-disabled]):active {
12544
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled]):active {
12409
12545
  --color-bg: var(--color-tinted-default-bg-3);
12410
- --color-border: var(--color-tinted-default-border-2);
12546
+ --color-border: var(--color-tinted-default-border-3);
12547
+ --color-code-bg: var(--color-tinted-default-bg-4);
12548
+ --color-code-fg: var(--color-tinted-default-fg-3);
12411
12549
  --color-fg: var(--color-tinted-default-fg-1);
12412
12550
  --color-muted-bg: var(--color-tinted-default-bg-4);
12413
12551
  --color-muted-fg: var(--color-tinted-default-fg-3);
12414
12552
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12415
12553
  }
12416
12554
 
12417
- .s-button.s-ghost.s-default:not([data-disabled])[data-selected] {
12555
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled])[data-selected] {
12418
12556
  --color-bg: var(--color-tinted-default-bg-3);
12419
- --color-border: var(--color-tinted-default-border-2);
12557
+ --color-border: var(--color-tinted-default-border-3);
12558
+ --color-code-bg: var(--color-tinted-default-bg-4);
12559
+ --color-code-fg: var(--color-tinted-default-fg-3);
12420
12560
  --color-fg: var(--color-tinted-default-fg-1);
12421
12561
  --color-muted-bg: var(--color-tinted-default-bg-4);
12422
12562
  --color-muted-fg: var(--color-tinted-default-fg-3);
12423
12563
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12424
12564
  }
12425
12565
 
12426
- .s-button.s-ghost.s-default[data-disabled] {
12566
+ .s-button[data-mode='ghost'][data-tone='default'][data-disabled] {
12427
12567
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12428
12568
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12429
12569
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12442,7 +12582,7 @@
12442
12582
  --color-muted-fg: var(--color-tinted-default-border-3);
12443
12583
  }
12444
12584
 
12445
- .s-button.s-tinted.s-default {
12585
+ .s-button[data-mode='bleed'][data-tone='default'] {
12446
12586
  box-shadow: none;
12447
12587
  --color-bg: var(--color-tinted-default-bg-0);
12448
12588
  --color-border: var(--color-tinted-default-border-1);
@@ -12452,7 +12592,7 @@
12452
12592
  --button-box-shadow: none;
12453
12593
  }
12454
12594
 
12455
- .s-button.s-tinted.s-default:not([data-disabled]):hover {
12595
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled]):hover {
12456
12596
  --color-bg: var(--color-tinted-default-bg-1);
12457
12597
  --color-border: var(--color-tinted-default-border-2);
12458
12598
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12460,7 +12600,7 @@
12460
12600
  --color-muted-fg: var(--color-tinted-default-fg-3);
12461
12601
  }
12462
12602
 
12463
- .s-button.s-tinted.s-default:not([data-disabled]):active {
12603
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled]):active {
12464
12604
  --color-bg: var(--color-tinted-default-bg-2);
12465
12605
  --color-border: var(--color-tinted-default-border-3);
12466
12606
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12468,7 +12608,7 @@
12468
12608
  --color-muted-fg: var(--color-tinted-default-fg-3);
12469
12609
  }
12470
12610
 
12471
- .s-button.s-tinted.s-default:not([data-disabled])[data-selected] {
12611
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled])[data-selected] {
12472
12612
  --color-bg: var(--color-tinted-default-bg-2);
12473
12613
  --color-border: var(--color-tinted-default-border-3);
12474
12614
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12476,7 +12616,7 @@
12476
12616
  --color-muted-fg: var(--color-tinted-default-fg-3);
12477
12617
  }
12478
12618
 
12479
- .s-button.s-tinted.s-default[data-disabled] {
12619
+ .s-button[data-mode='bleed'][data-tone='default'][data-disabled] {
12480
12620
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12481
12621
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12482
12622
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12495,40 +12635,48 @@
12495
12635
  --color-muted-fg: var(--color-tinted-default-border-3);
12496
12636
  }
12497
12637
 
12498
- .s-button.s-solid.s-neutral {
12638
+ .s-button[data-mode='default'][data-tone='neutral'] {
12499
12639
  --color-bg: var(--color-solid-neutral-bg-0);
12500
12640
  --color-border: var(--color-solid-neutral-border-1);
12641
+ --color-code-bg: var(--color-solid-neutral-bg-1);
12642
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12501
12643
  --color-fg: var(--color-solid-neutral-fg-0);
12502
12644
  --color-muted-bg: var(--color-solid-neutral-bg-1);
12503
12645
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12504
12646
  --button-box-shadow: none;
12505
12647
  }
12506
12648
 
12507
- .s-button.s-solid.s-neutral:not([data-disabled]):hover {
12649
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled]):hover {
12508
12650
  --color-bg: var(--color-solid-neutral-bg-1);
12509
12651
  --color-border: var(--color-solid-neutral-border-2);
12652
+ --color-code-bg: var(--color-solid-neutral-bg-2);
12653
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12510
12654
  --color-fg: var(--color-solid-neutral-fg-0);
12511
12655
  --color-muted-bg: var(--color-solid-neutral-bg-2);
12512
12656
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12513
12657
  }
12514
12658
 
12515
- .s-button.s-solid.s-neutral:not([data-disabled]):active {
12659
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled]):active {
12516
12660
  --color-bg: var(--color-solid-neutral-bg-2);
12517
12661
  --color-border: var(--color-solid-neutral-border-3);
12662
+ --color-code-bg: var(--color-solid-neutral-bg-3);
12663
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12518
12664
  --color-fg: var(--color-solid-neutral-fg-0);
12519
12665
  --color-muted-bg: var(--color-solid-neutral-bg-3);
12520
12666
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12521
12667
  }
12522
12668
 
12523
- .s-button.s-solid.s-neutral:not([data-disabled])[data-selected] {
12669
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled])[data-selected] {
12524
12670
  --color-bg: var(--color-solid-neutral-bg-2);
12525
12671
  --color-border: var(--color-solid-neutral-border-3);
12672
+ --color-code-bg: var(--color-solid-neutral-bg-3);
12673
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12526
12674
  --color-fg: var(--color-solid-neutral-fg-0);
12527
12675
  --color-muted-bg: var(--color-solid-neutral-bg-3);
12528
12676
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12529
12677
  }
12530
12678
 
12531
- .s-button.s-solid.s-neutral[data-disabled] {
12679
+ .s-button[data-mode='default'][data-tone='neutral'][data-disabled] {
12532
12680
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12533
12681
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12534
12682
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12547,42 +12695,50 @@
12547
12695
  --color-muted-fg: var(--color-tinted-default-border-4);
12548
12696
  }
12549
12697
 
12550
- .s-button.s-ghost.s-neutral {
12698
+ .s-button[data-mode='ghost'][data-tone='neutral'] {
12551
12699
  --color-bg: var(--color-tinted-neutral-bg-1);
12552
- --color-border: var(--color-tinted-neutral-border-0);
12700
+ --color-border: var(--color-tinted-neutral-border-1);
12553
12701
  --color-fg: var(--color-tinted-neutral-fg-2);
12702
+ --color-code-bg: var(--color-tinted-neutral-bg-2);
12703
+ --color-code-fg: var(--color-tinted-neutral-fg-4);
12554
12704
  --color-muted-bg: var(--color-tinted-neutral-bg-2);
12555
12705
  --color-muted-fg: var(--color-tinted-neutral-fg-4);
12556
12706
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12557
12707
  }
12558
12708
 
12559
- .s-button.s-ghost.s-neutral:not([data-disabled]):hover {
12709
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled]):hover {
12560
12710
  --color-bg: var(--color-tinted-neutral-bg-2);
12561
- --color-border: var(--color-tinted-neutral-border-1);
12711
+ --color-border: var(--color-tinted-neutral-border-2);
12712
+ --color-code-bg: var(--color-tinted-neutral-bg-3);
12713
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12562
12714
  --color-fg: var(--color-tinted-neutral-fg-1);
12563
12715
  --color-muted-bg: var(--color-tinted-neutral-bg-3);
12564
12716
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12565
12717
  }
12566
12718
 
12567
- .s-button.s-ghost.s-neutral:not([data-disabled]):active {
12719
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled]):active {
12568
12720
  --color-bg: var(--color-tinted-neutral-bg-3);
12569
- --color-border: var(--color-tinted-neutral-border-2);
12721
+ --color-border: var(--color-tinted-neutral-border-3);
12722
+ --color-code-bg: var(--color-tinted-neutral-bg-4);
12723
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12570
12724
  --color-fg: var(--color-tinted-neutral-fg-1);
12571
12725
  --color-muted-bg: var(--color-tinted-neutral-bg-4);
12572
12726
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12573
12727
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12574
12728
  }
12575
12729
 
12576
- .s-button.s-ghost.s-neutral:not([data-disabled])[data-selected] {
12730
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled])[data-selected] {
12577
12731
  --color-bg: var(--color-tinted-neutral-bg-3);
12578
- --color-border: var(--color-tinted-neutral-border-2);
12732
+ --color-border: var(--color-tinted-neutral-border-3);
12733
+ --color-code-bg: var(--color-tinted-neutral-bg-4);
12734
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12579
12735
  --color-fg: var(--color-tinted-neutral-fg-1);
12580
12736
  --color-muted-bg: var(--color-tinted-neutral-bg-4);
12581
12737
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12582
12738
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12583
12739
  }
12584
12740
 
12585
- .s-button.s-ghost.s-neutral[data-disabled] {
12741
+ .s-button[data-mode='ghost'][data-tone='neutral'][data-disabled] {
12586
12742
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12587
12743
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12588
12744
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12601,7 +12757,7 @@
12601
12757
  --color-muted-fg: var(--color-tinted-default-border-3);
12602
12758
  }
12603
12759
 
12604
- .s-button.s-tinted.s-neutral {
12760
+ .s-button[data-mode='bleed'][data-tone='neutral'] {
12605
12761
  box-shadow: none;
12606
12762
  --color-bg: var(--color-tinted-neutral-bg-0);
12607
12763
  --color-border: var(--color-tinted-neutral-border-1);
@@ -12611,7 +12767,7 @@
12611
12767
  --button-box-shadow: none;
12612
12768
  }
12613
12769
 
12614
- .s-button.s-tinted.s-neutral:not([data-disabled]):hover {
12770
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled]):hover {
12615
12771
  --color-bg: var(--color-tinted-neutral-bg-1);
12616
12772
  --color-border: var(--color-tinted-neutral-border-2);
12617
12773
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12619,7 +12775,7 @@
12619
12775
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12620
12776
  }
12621
12777
 
12622
- .s-button.s-tinted.s-neutral:not([data-disabled]):active {
12778
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled]):active {
12623
12779
  --color-bg: var(--color-tinted-neutral-bg-2);
12624
12780
  --color-border: var(--color-tinted-neutral-border-3);
12625
12781
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12627,7 +12783,7 @@
12627
12783
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12628
12784
  }
12629
12785
 
12630
- .s-button.s-tinted.s-neutral:not([data-disabled])[data-selected] {
12786
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled])[data-selected] {
12631
12787
  --color-bg: var(--color-tinted-neutral-bg-2);
12632
12788
  --color-border: var(--color-tinted-neutral-border-3);
12633
12789
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12635,7 +12791,7 @@
12635
12791
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12636
12792
  }
12637
12793
 
12638
- .s-button.s-tinted.s-neutral[data-disabled] {
12794
+ .s-button[data-mode='bleed'][data-tone='neutral'][data-disabled] {
12639
12795
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12640
12796
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12641
12797
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12654,40 +12810,48 @@
12654
12810
  --color-muted-fg: var(--color-tinted-default-border-3);
12655
12811
  }
12656
12812
 
12657
- .s-button.s-solid.s-accent {
12813
+ .s-button[data-mode='default'][data-tone='primary'] {
12658
12814
  --color-bg: var(--color-solid-primary-bg-0);
12659
12815
  --color-border: var(--color-solid-primary-border-1);
12816
+ --color-code-bg: var(--color-solid-primary-bg-1);
12817
+ --color-code-fg: var(--color-solid-primary-fg-4);
12660
12818
  --color-fg: var(--color-solid-primary-fg-0);
12661
12819
  --color-muted-bg: var(--color-solid-primary-bg-1);
12662
12820
  --color-muted-fg: var(--color-solid-primary-fg-4);
12663
12821
  --button-box-shadow: none;
12664
12822
  }
12665
12823
 
12666
- .s-button.s-solid.s-accent:not([data-disabled]):hover {
12824
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled]):hover {
12667
12825
  --color-bg: var(--color-solid-primary-bg-1);
12668
12826
  --color-border: var(--color-solid-primary-border-2);
12827
+ --color-code-bg: var(--color-solid-primary-bg-2);
12828
+ --color-code-fg: var(--color-solid-primary-fg-4);
12669
12829
  --color-fg: var(--color-solid-primary-fg-0);
12670
12830
  --color-muted-bg: var(--color-solid-primary-bg-2);
12671
12831
  --color-muted-fg: var(--color-solid-primary-fg-4);
12672
12832
  }
12673
12833
 
12674
- .s-button.s-solid.s-accent:not([data-disabled]):active {
12834
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled]):active {
12675
12835
  --color-bg: var(--color-solid-primary-bg-2);
12676
12836
  --color-border: var(--color-solid-primary-border-3);
12837
+ --color-code-bg: var(--color-solid-primary-bg-3);
12838
+ --color-code-fg: var(--color-solid-primary-fg-4);
12677
12839
  --color-fg: var(--color-solid-primary-fg-0);
12678
12840
  --color-muted-bg: var(--color-solid-primary-bg-3);
12679
12841
  --color-muted-fg: var(--color-solid-primary-fg-4);
12680
12842
  }
12681
12843
 
12682
- .s-button.s-solid.s-accent:not([data-disabled])[data-selected] {
12844
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled])[data-selected] {
12683
12845
  --color-bg: var(--color-solid-primary-bg-2);
12684
12846
  --color-border: var(--color-solid-primary-border-3);
12847
+ --color-code-bg: var(--color-solid-primary-bg-3);
12848
+ --color-code-fg: var(--color-solid-primary-fg-4);
12685
12849
  --color-fg: var(--color-solid-primary-fg-0);
12686
12850
  --color-muted-bg: var(--color-solid-primary-bg-3);
12687
12851
  --color-muted-fg: var(--color-solid-primary-fg-4);
12688
12852
  }
12689
12853
 
12690
- .s-button.s-solid.s-accent[data-disabled] {
12854
+ .s-button[data-mode='default'][data-tone='primary'][data-disabled] {
12691
12855
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12692
12856
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12693
12857
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12706,42 +12870,50 @@
12706
12870
  --color-muted-fg: var(--color-tinted-default-border-4);
12707
12871
  }
12708
12872
 
12709
- .s-button.s-ghost.s-accent {
12873
+ .s-button[data-mode='ghost'][data-tone='primary'] {
12710
12874
  --color-bg: var(--color-tinted-primary-bg-1);
12711
- --color-border: var(--color-tinted-primary-border-0);
12875
+ --color-border: var(--color-tinted-primary-border-1);
12712
12876
  --color-fg: var(--color-tinted-primary-fg-2);
12877
+ --color-code-bg: var(--color-tinted-primary-bg-2);
12878
+ --color-code-fg: var(--color-tinted-primary-fg-4);
12713
12879
  --color-muted-bg: var(--color-tinted-primary-bg-2);
12714
12880
  --color-muted-fg: var(--color-tinted-primary-fg-4);
12715
12881
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12716
12882
  }
12717
12883
 
12718
- .s-button.s-ghost.s-accent:not([data-disabled]):hover {
12884
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled]):hover {
12719
12885
  --color-bg: var(--color-tinted-primary-bg-2);
12720
- --color-border: var(--color-tinted-primary-border-1);
12886
+ --color-border: var(--color-tinted-primary-border-2);
12887
+ --color-code-bg: var(--color-tinted-primary-bg-3);
12888
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12721
12889
  --color-fg: var(--color-tinted-primary-fg-1);
12722
12890
  --color-muted-bg: var(--color-tinted-primary-bg-3);
12723
12891
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12724
12892
  }
12725
12893
 
12726
- .s-button.s-ghost.s-accent:not([data-disabled]):active {
12894
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled]):active {
12727
12895
  --color-bg: var(--color-tinted-primary-bg-3);
12728
- --color-border: var(--color-tinted-primary-border-2);
12896
+ --color-border: var(--color-tinted-primary-border-3);
12897
+ --color-code-bg: var(--color-tinted-primary-bg-4);
12898
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12729
12899
  --color-fg: var(--color-tinted-primary-fg-1);
12730
12900
  --color-muted-bg: var(--color-tinted-primary-bg-4);
12731
12901
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12732
12902
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12733
12903
  }
12734
12904
 
12735
- .s-button.s-ghost.s-accent:not([data-disabled])[data-selected] {
12905
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled])[data-selected] {
12736
12906
  --color-bg: var(--color-tinted-primary-bg-3);
12737
- --color-border: var(--color-tinted-primary-border-2);
12907
+ --color-border: var(--color-tinted-primary-border-3);
12908
+ --color-code-bg: var(--color-tinted-primary-bg-4);
12909
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12738
12910
  --color-fg: var(--color-tinted-primary-fg-1);
12739
12911
  --color-muted-bg: var(--color-tinted-primary-bg-4);
12740
12912
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12741
12913
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12742
12914
  }
12743
12915
 
12744
- .s-button.s-ghost.s-accent[data-disabled] {
12916
+ .s-button[data-mode='ghost'][data-tone='primary'][data-disabled] {
12745
12917
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12746
12918
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12747
12919
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12760,7 +12932,7 @@
12760
12932
  --color-muted-fg: var(--color-tinted-default-border-3);
12761
12933
  }
12762
12934
 
12763
- .s-button.s-tinted.s-accent {
12935
+ .s-button[data-mode='bleed'][data-tone='primary'] {
12764
12936
  box-shadow: none;
12765
12937
  --color-bg: var(--color-tinted-primary-bg-0);
12766
12938
  --color-border: var(--color-tinted-primary-border-1);
@@ -12770,7 +12942,7 @@
12770
12942
  --button-box-shadow: none;
12771
12943
  }
12772
12944
 
12773
- .s-button.s-tinted.s-accent:not([data-disabled]):hover {
12945
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled]):hover {
12774
12946
  --color-bg: var(--color-tinted-primary-bg-1);
12775
12947
  --color-border: var(--color-tinted-primary-border-2);
12776
12948
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12778,7 +12950,7 @@
12778
12950
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12779
12951
  }
12780
12952
 
12781
- .s-button.s-tinted.s-accent:not([data-disabled]):active {
12953
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled]):active {
12782
12954
  --color-bg: var(--color-tinted-primary-bg-2);
12783
12955
  --color-border: var(--color-tinted-primary-border-3);
12784
12956
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12786,7 +12958,7 @@
12786
12958
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12787
12959
  }
12788
12960
 
12789
- .s-button.s-tinted.s-accent:not([data-disabled])[data-selected] {
12961
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled])[data-selected] {
12790
12962
  --color-bg: var(--color-tinted-primary-bg-2);
12791
12963
  --color-border: var(--color-tinted-primary-border-3);
12792
12964
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12794,7 +12966,7 @@
12794
12966
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12795
12967
  }
12796
12968
 
12797
- .s-button.s-tinted.s-accent[data-disabled] {
12969
+ .s-button[data-mode='bleed'][data-tone='primary'][data-disabled] {
12798
12970
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12799
12971
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12800
12972
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12813,40 +12985,48 @@
12813
12985
  --color-muted-fg: var(--color-tinted-default-border-3);
12814
12986
  }
12815
12987
 
12816
- .s-button.s-solid.s-suggest {
12988
+ .s-button[data-mode='default'][data-tone='suggest'] {
12817
12989
  --color-bg: var(--color-solid-suggest-bg-0);
12818
12990
  --color-border: var(--color-solid-suggest-border-1);
12991
+ --color-code-bg: var(--color-solid-suggest-bg-1);
12992
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12819
12993
  --color-fg: var(--color-solid-suggest-fg-0);
12820
12994
  --color-muted-bg: var(--color-solid-suggest-bg-1);
12821
12995
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12822
12996
  --button-box-shadow: none;
12823
12997
  }
12824
12998
 
12825
- .s-button.s-solid.s-suggest:not([data-disabled]):hover {
12999
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled]):hover {
12826
13000
  --color-bg: var(--color-solid-suggest-bg-1);
12827
13001
  --color-border: var(--color-solid-suggest-border-2);
13002
+ --color-code-bg: var(--color-solid-suggest-bg-2);
13003
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12828
13004
  --color-fg: var(--color-solid-suggest-fg-0);
12829
13005
  --color-muted-bg: var(--color-solid-suggest-bg-2);
12830
13006
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12831
13007
  }
12832
13008
 
12833
- .s-button.s-solid.s-suggest:not([data-disabled]):active {
13009
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled]):active {
12834
13010
  --color-bg: var(--color-solid-suggest-bg-2);
12835
13011
  --color-border: var(--color-solid-suggest-border-3);
13012
+ --color-code-bg: var(--color-solid-suggest-bg-3);
13013
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12836
13014
  --color-fg: var(--color-solid-suggest-fg-0);
12837
13015
  --color-muted-bg: var(--color-solid-suggest-bg-3);
12838
13016
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12839
13017
  }
12840
13018
 
12841
- .s-button.s-solid.s-suggest:not([data-disabled])[data-selected] {
13019
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled])[data-selected] {
12842
13020
  --color-bg: var(--color-solid-suggest-bg-2);
12843
13021
  --color-border: var(--color-solid-suggest-border-3);
13022
+ --color-code-bg: var(--color-solid-suggest-bg-3);
13023
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12844
13024
  --color-fg: var(--color-solid-suggest-fg-0);
12845
13025
  --color-muted-bg: var(--color-solid-suggest-bg-3);
12846
13026
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12847
13027
  }
12848
13028
 
12849
- .s-button.s-solid.s-suggest[data-disabled] {
13029
+ .s-button[data-mode='default'][data-tone='suggest'][data-disabled] {
12850
13030
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12851
13031
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12852
13032
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12865,42 +13045,50 @@
12865
13045
  --color-muted-fg: var(--color-tinted-default-border-4);
12866
13046
  }
12867
13047
 
12868
- .s-button.s-ghost.s-suggest {
13048
+ .s-button[data-mode='ghost'][data-tone='suggest'] {
12869
13049
  --color-bg: var(--color-tinted-suggest-bg-1);
12870
- --color-border: var(--color-tinted-suggest-border-0);
13050
+ --color-border: var(--color-tinted-suggest-border-1);
12871
13051
  --color-fg: var(--color-tinted-suggest-fg-2);
13052
+ --color-code-bg: var(--color-tinted-suggest-bg-2);
13053
+ --color-code-fg: var(--color-tinted-suggest-fg-4);
12872
13054
  --color-muted-bg: var(--color-tinted-suggest-bg-2);
12873
13055
  --color-muted-fg: var(--color-tinted-suggest-fg-4);
12874
13056
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12875
13057
  }
12876
13058
 
12877
- .s-button.s-ghost.s-suggest:not([data-disabled]):hover {
13059
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled]):hover {
12878
13060
  --color-bg: var(--color-tinted-suggest-bg-2);
12879
- --color-border: var(--color-tinted-suggest-border-1);
13061
+ --color-border: var(--color-tinted-suggest-border-2);
13062
+ --color-code-bg: var(--color-tinted-suggest-bg-3);
13063
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
12880
13064
  --color-fg: var(--color-tinted-suggest-fg-1);
12881
13065
  --color-muted-bg: var(--color-tinted-suggest-bg-3);
12882
13066
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12883
13067
  }
12884
13068
 
12885
- .s-button.s-ghost.s-suggest:not([data-disabled]):active {
13069
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled]):active {
12886
13070
  --color-bg: var(--color-tinted-suggest-bg-3);
12887
- --color-border: var(--color-tinted-suggest-border-2);
13071
+ --color-border: var(--color-tinted-suggest-border-3);
13072
+ --color-code-bg: var(--color-tinted-suggest-bg-4);
13073
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
12888
13074
  --color-fg: var(--color-tinted-suggest-fg-1);
12889
13075
  --color-muted-bg: var(--color-tinted-suggest-bg-4);
12890
13076
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12891
13077
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12892
13078
  }
12893
13079
 
12894
- .s-button.s-ghost.s-suggest:not([data-disabled])[data-selected] {
13080
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled])[data-selected] {
12895
13081
  --color-bg: var(--color-tinted-suggest-bg-3);
12896
- --color-border: var(--color-tinted-suggest-border-2);
13082
+ --color-border: var(--color-tinted-suggest-border-3);
13083
+ --color-code-bg: var(--color-tinted-suggest-bg-4);
13084
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
12897
13085
  --color-fg: var(--color-tinted-suggest-fg-1);
12898
13086
  --color-muted-bg: var(--color-tinted-suggest-bg-4);
12899
13087
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12900
13088
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12901
13089
  }
12902
13090
 
12903
- .s-button.s-ghost.s-suggest[data-disabled] {
13091
+ .s-button[data-mode='ghost'][data-tone='suggest'][data-disabled] {
12904
13092
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12905
13093
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12906
13094
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12919,7 +13107,7 @@
12919
13107
  --color-muted-fg: var(--color-tinted-default-border-3);
12920
13108
  }
12921
13109
 
12922
- .s-button.s-tinted.s-suggest {
13110
+ .s-button[data-mode='bleed'][data-tone='suggest'] {
12923
13111
  box-shadow: none;
12924
13112
  --color-bg: var(--color-tinted-suggest-bg-0);
12925
13113
  --color-border: var(--color-tinted-suggest-border-1);
@@ -12929,7 +13117,7 @@
12929
13117
  --button-box-shadow: none;
12930
13118
  }
12931
13119
 
12932
- .s-button.s-tinted.s-suggest:not([data-disabled]):hover {
13120
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled]):hover {
12933
13121
  --color-bg: var(--color-tinted-suggest-bg-1);
12934
13122
  --color-border: var(--color-tinted-suggest-border-2);
12935
13123
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -12937,7 +13125,7 @@
12937
13125
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12938
13126
  }
12939
13127
 
12940
- .s-button.s-tinted.s-suggest:not([data-disabled]):active {
13128
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled]):active {
12941
13129
  --color-bg: var(--color-tinted-suggest-bg-2);
12942
13130
  --color-border: var(--color-tinted-suggest-border-3);
12943
13131
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -12945,7 +13133,7 @@
12945
13133
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12946
13134
  }
12947
13135
 
12948
- .s-button.s-tinted.s-suggest:not([data-disabled])[data-selected] {
13136
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled])[data-selected] {
12949
13137
  --color-bg: var(--color-tinted-suggest-bg-2);
12950
13138
  --color-border: var(--color-tinted-suggest-border-3);
12951
13139
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -12953,7 +13141,7 @@
12953
13141
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
12954
13142
  }
12955
13143
 
12956
- .s-button.s-tinted.s-suggest[data-disabled] {
13144
+ .s-button[data-mode='bleed'][data-tone='suggest'][data-disabled] {
12957
13145
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12958
13146
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12959
13147
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12972,40 +13160,48 @@
12972
13160
  --color-muted-fg: var(--color-tinted-default-border-3);
12973
13161
  }
12974
13162
 
12975
- .s-button.s-solid.s-positive {
13163
+ .s-button[data-mode='default'][data-tone='positive'] {
12976
13164
  --color-bg: var(--color-solid-positive-bg-0);
12977
13165
  --color-border: var(--color-solid-positive-border-1);
13166
+ --color-code-bg: var(--color-solid-positive-bg-1);
13167
+ --color-code-fg: var(--color-solid-positive-fg-4);
12978
13168
  --color-fg: var(--color-solid-positive-fg-0);
12979
13169
  --color-muted-bg: var(--color-solid-positive-bg-1);
12980
13170
  --color-muted-fg: var(--color-solid-positive-fg-4);
12981
13171
  --button-box-shadow: none;
12982
13172
  }
12983
13173
 
12984
- .s-button.s-solid.s-positive:not([data-disabled]):hover {
13174
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled]):hover {
12985
13175
  --color-bg: var(--color-solid-positive-bg-1);
12986
13176
  --color-border: var(--color-solid-positive-border-2);
13177
+ --color-code-bg: var(--color-solid-positive-bg-2);
13178
+ --color-code-fg: var(--color-solid-positive-fg-4);
12987
13179
  --color-fg: var(--color-solid-positive-fg-0);
12988
13180
  --color-muted-bg: var(--color-solid-positive-bg-2);
12989
13181
  --color-muted-fg: var(--color-solid-positive-fg-4);
12990
13182
  }
12991
13183
 
12992
- .s-button.s-solid.s-positive:not([data-disabled]):active {
13184
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled]):active {
12993
13185
  --color-bg: var(--color-solid-positive-bg-2);
12994
13186
  --color-border: var(--color-solid-positive-border-3);
13187
+ --color-code-bg: var(--color-solid-positive-bg-3);
13188
+ --color-code-fg: var(--color-solid-positive-fg-4);
12995
13189
  --color-fg: var(--color-solid-positive-fg-0);
12996
13190
  --color-muted-bg: var(--color-solid-positive-bg-3);
12997
13191
  --color-muted-fg: var(--color-solid-positive-fg-4);
12998
13192
  }
12999
13193
 
13000
- .s-button.s-solid.s-positive:not([data-disabled])[data-selected] {
13194
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled])[data-selected] {
13001
13195
  --color-bg: var(--color-solid-positive-bg-2);
13002
13196
  --color-border: var(--color-solid-positive-border-3);
13197
+ --color-code-bg: var(--color-solid-positive-bg-3);
13198
+ --color-code-fg: var(--color-solid-positive-fg-4);
13003
13199
  --color-fg: var(--color-solid-positive-fg-0);
13004
13200
  --color-muted-bg: var(--color-solid-positive-bg-3);
13005
13201
  --color-muted-fg: var(--color-solid-positive-fg-4);
13006
13202
  }
13007
13203
 
13008
- .s-button.s-solid.s-positive[data-disabled] {
13204
+ .s-button[data-mode='default'][data-tone='positive'][data-disabled] {
13009
13205
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13010
13206
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13011
13207
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13024,42 +13220,50 @@
13024
13220
  --color-muted-fg: var(--color-tinted-default-border-4);
13025
13221
  }
13026
13222
 
13027
- .s-button.s-ghost.s-positive {
13223
+ .s-button[data-mode='ghost'][data-tone='positive'] {
13028
13224
  --color-bg: var(--color-tinted-positive-bg-1);
13029
- --color-border: var(--color-tinted-positive-border-0);
13225
+ --color-border: var(--color-tinted-positive-border-1);
13030
13226
  --color-fg: var(--color-tinted-positive-fg-2);
13227
+ --color-code-bg: var(--color-tinted-positive-bg-2);
13228
+ --color-code-fg: var(--color-tinted-positive-fg-4);
13031
13229
  --color-muted-bg: var(--color-tinted-positive-bg-2);
13032
13230
  --color-muted-fg: var(--color-tinted-positive-fg-4);
13033
13231
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13034
13232
  }
13035
13233
 
13036
- .s-button.s-ghost.s-positive:not([data-disabled]):hover {
13234
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled]):hover {
13037
13235
  --color-bg: var(--color-tinted-positive-bg-2);
13038
- --color-border: var(--color-tinted-positive-border-1);
13236
+ --color-border: var(--color-tinted-positive-border-2);
13237
+ --color-code-bg: var(--color-tinted-positive-bg-3);
13238
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13039
13239
  --color-fg: var(--color-tinted-positive-fg-1);
13040
13240
  --color-muted-bg: var(--color-tinted-positive-bg-3);
13041
13241
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13042
13242
  }
13043
13243
 
13044
- .s-button.s-ghost.s-positive:not([data-disabled]):active {
13244
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled]):active {
13045
13245
  --color-bg: var(--color-tinted-positive-bg-3);
13046
- --color-border: var(--color-tinted-positive-border-2);
13246
+ --color-border: var(--color-tinted-positive-border-3);
13247
+ --color-code-bg: var(--color-tinted-positive-bg-4);
13248
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13047
13249
  --color-fg: var(--color-tinted-positive-fg-1);
13048
13250
  --color-muted-bg: var(--color-tinted-positive-bg-4);
13049
13251
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13050
13252
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13051
13253
  }
13052
13254
 
13053
- .s-button.s-ghost.s-positive:not([data-disabled])[data-selected] {
13255
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled])[data-selected] {
13054
13256
  --color-bg: var(--color-tinted-positive-bg-3);
13055
- --color-border: var(--color-tinted-positive-border-2);
13257
+ --color-border: var(--color-tinted-positive-border-3);
13258
+ --color-code-bg: var(--color-tinted-positive-bg-4);
13259
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13056
13260
  --color-fg: var(--color-tinted-positive-fg-1);
13057
13261
  --color-muted-bg: var(--color-tinted-positive-bg-4);
13058
13262
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13059
13263
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13060
13264
  }
13061
13265
 
13062
- .s-button.s-ghost.s-positive[data-disabled] {
13266
+ .s-button[data-mode='ghost'][data-tone='positive'][data-disabled] {
13063
13267
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13064
13268
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13065
13269
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13078,7 +13282,7 @@
13078
13282
  --color-muted-fg: var(--color-tinted-default-border-3);
13079
13283
  }
13080
13284
 
13081
- .s-button.s-tinted.s-positive {
13285
+ .s-button[data-mode='bleed'][data-tone='positive'] {
13082
13286
  box-shadow: none;
13083
13287
  --color-bg: var(--color-tinted-positive-bg-0);
13084
13288
  --color-border: var(--color-tinted-positive-border-1);
@@ -13088,7 +13292,7 @@
13088
13292
  --button-box-shadow: none;
13089
13293
  }
13090
13294
 
13091
- .s-button.s-tinted.s-positive:not([data-disabled]):hover {
13295
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled]):hover {
13092
13296
  --color-bg: var(--color-tinted-positive-bg-1);
13093
13297
  --color-border: var(--color-tinted-positive-border-2);
13094
13298
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13096,7 +13300,7 @@
13096
13300
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13097
13301
  }
13098
13302
 
13099
- .s-button.s-tinted.s-positive:not([data-disabled]):active {
13303
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled]):active {
13100
13304
  --color-bg: var(--color-tinted-positive-bg-2);
13101
13305
  --color-border: var(--color-tinted-positive-border-3);
13102
13306
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13104,7 +13308,7 @@
13104
13308
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13105
13309
  }
13106
13310
 
13107
- .s-button.s-tinted.s-positive:not([data-disabled])[data-selected] {
13311
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled])[data-selected] {
13108
13312
  --color-bg: var(--color-tinted-positive-bg-2);
13109
13313
  --color-border: var(--color-tinted-positive-border-3);
13110
13314
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13112,7 +13316,7 @@
13112
13316
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13113
13317
  }
13114
13318
 
13115
- .s-button.s-tinted.s-positive[data-disabled] {
13319
+ .s-button[data-mode='bleed'][data-tone='positive'][data-disabled] {
13116
13320
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13117
13321
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13118
13322
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13131,40 +13335,48 @@
13131
13335
  --color-muted-fg: var(--color-tinted-default-border-3);
13132
13336
  }
13133
13337
 
13134
- .s-button.s-solid.s-caution {
13338
+ .s-button[data-mode='default'][data-tone='caution'] {
13135
13339
  --color-bg: var(--color-solid-caution-bg-0);
13136
13340
  --color-border: var(--color-solid-caution-border-1);
13341
+ --color-code-bg: var(--color-solid-caution-bg-1);
13342
+ --color-code-fg: var(--color-solid-caution-fg-4);
13137
13343
  --color-fg: var(--color-solid-caution-fg-0);
13138
13344
  --color-muted-bg: var(--color-solid-caution-bg-1);
13139
13345
  --color-muted-fg: var(--color-solid-caution-fg-4);
13140
13346
  --button-box-shadow: none;
13141
13347
  }
13142
13348
 
13143
- .s-button.s-solid.s-caution:not([data-disabled]):hover {
13349
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled]):hover {
13144
13350
  --color-bg: var(--color-solid-caution-bg-1);
13145
13351
  --color-border: var(--color-solid-caution-border-2);
13352
+ --color-code-bg: var(--color-solid-caution-bg-2);
13353
+ --color-code-fg: var(--color-solid-caution-fg-4);
13146
13354
  --color-fg: var(--color-solid-caution-fg-0);
13147
13355
  --color-muted-bg: var(--color-solid-caution-bg-2);
13148
13356
  --color-muted-fg: var(--color-solid-caution-fg-4);
13149
13357
  }
13150
13358
 
13151
- .s-button.s-solid.s-caution:not([data-disabled]):active {
13359
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled]):active {
13152
13360
  --color-bg: var(--color-solid-caution-bg-2);
13153
13361
  --color-border: var(--color-solid-caution-border-3);
13362
+ --color-code-bg: var(--color-solid-caution-bg-3);
13363
+ --color-code-fg: var(--color-solid-caution-fg-4);
13154
13364
  --color-fg: var(--color-solid-caution-fg-0);
13155
13365
  --color-muted-bg: var(--color-solid-caution-bg-3);
13156
13366
  --color-muted-fg: var(--color-solid-caution-fg-4);
13157
13367
  }
13158
13368
 
13159
- .s-button.s-solid.s-caution:not([data-disabled])[data-selected] {
13369
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled])[data-selected] {
13160
13370
  --color-bg: var(--color-solid-caution-bg-2);
13161
13371
  --color-border: var(--color-solid-caution-border-3);
13372
+ --color-code-bg: var(--color-solid-caution-bg-3);
13373
+ --color-code-fg: var(--color-solid-caution-fg-4);
13162
13374
  --color-fg: var(--color-solid-caution-fg-0);
13163
13375
  --color-muted-bg: var(--color-solid-caution-bg-3);
13164
13376
  --color-muted-fg: var(--color-solid-caution-fg-4);
13165
13377
  }
13166
13378
 
13167
- .s-button.s-solid.s-caution[data-disabled] {
13379
+ .s-button[data-mode='default'][data-tone='caution'][data-disabled] {
13168
13380
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13169
13381
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13170
13382
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13183,42 +13395,50 @@
13183
13395
  --color-muted-fg: var(--color-tinted-default-border-4);
13184
13396
  }
13185
13397
 
13186
- .s-button.s-ghost.s-caution {
13398
+ .s-button[data-mode='ghost'][data-tone='caution'] {
13187
13399
  --color-bg: var(--color-tinted-caution-bg-1);
13188
- --color-border: var(--color-tinted-caution-border-0);
13400
+ --color-border: var(--color-tinted-caution-border-1);
13189
13401
  --color-fg: var(--color-tinted-caution-fg-2);
13402
+ --color-code-bg: var(--color-tinted-caution-bg-2);
13403
+ --color-code-fg: var(--color-tinted-caution-fg-4);
13190
13404
  --color-muted-bg: var(--color-tinted-caution-bg-2);
13191
13405
  --color-muted-fg: var(--color-tinted-caution-fg-4);
13192
13406
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13193
13407
  }
13194
13408
 
13195
- .s-button.s-ghost.s-caution:not([data-disabled]):hover {
13409
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled]):hover {
13196
13410
  --color-bg: var(--color-tinted-caution-bg-2);
13197
- --color-border: var(--color-tinted-caution-border-1);
13411
+ --color-border: var(--color-tinted-caution-border-2);
13412
+ --color-code-bg: var(--color-tinted-caution-bg-3);
13413
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13198
13414
  --color-fg: var(--color-tinted-caution-fg-1);
13199
13415
  --color-muted-bg: var(--color-tinted-caution-bg-3);
13200
13416
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13201
13417
  }
13202
13418
 
13203
- .s-button.s-ghost.s-caution:not([data-disabled]):active {
13419
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled]):active {
13204
13420
  --color-bg: var(--color-tinted-caution-bg-3);
13205
- --color-border: var(--color-tinted-caution-border-2);
13421
+ --color-border: var(--color-tinted-caution-border-3);
13422
+ --color-code-bg: var(--color-tinted-caution-bg-4);
13423
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13206
13424
  --color-fg: var(--color-tinted-caution-fg-1);
13207
13425
  --color-muted-bg: var(--color-tinted-caution-bg-4);
13208
13426
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13209
13427
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13210
13428
  }
13211
13429
 
13212
- .s-button.s-ghost.s-caution:not([data-disabled])[data-selected] {
13430
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled])[data-selected] {
13213
13431
  --color-bg: var(--color-tinted-caution-bg-3);
13214
- --color-border: var(--color-tinted-caution-border-2);
13432
+ --color-border: var(--color-tinted-caution-border-3);
13433
+ --color-code-bg: var(--color-tinted-caution-bg-4);
13434
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13215
13435
  --color-fg: var(--color-tinted-caution-fg-1);
13216
13436
  --color-muted-bg: var(--color-tinted-caution-bg-4);
13217
13437
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13218
13438
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13219
13439
  }
13220
13440
 
13221
- .s-button.s-ghost.s-caution[data-disabled] {
13441
+ .s-button[data-mode='ghost'][data-tone='caution'][data-disabled] {
13222
13442
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13223
13443
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13224
13444
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13237,7 +13457,7 @@
13237
13457
  --color-muted-fg: var(--color-tinted-default-border-3);
13238
13458
  }
13239
13459
 
13240
- .s-button.s-tinted.s-caution {
13460
+ .s-button[data-mode='bleed'][data-tone='caution'] {
13241
13461
  box-shadow: none;
13242
13462
  --color-bg: var(--color-tinted-caution-bg-0);
13243
13463
  --color-border: var(--color-tinted-caution-border-1);
@@ -13247,7 +13467,7 @@
13247
13467
  --button-box-shadow: none;
13248
13468
  }
13249
13469
 
13250
- .s-button.s-tinted.s-caution:not([data-disabled]):hover {
13470
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled]):hover {
13251
13471
  --color-bg: var(--color-tinted-caution-bg-1);
13252
13472
  --color-border: var(--color-tinted-caution-border-2);
13253
13473
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13255,7 +13475,7 @@
13255
13475
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13256
13476
  }
13257
13477
 
13258
- .s-button.s-tinted.s-caution:not([data-disabled]):active {
13478
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled]):active {
13259
13479
  --color-bg: var(--color-tinted-caution-bg-2);
13260
13480
  --color-border: var(--color-tinted-caution-border-3);
13261
13481
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13263,7 +13483,7 @@
13263
13483
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13264
13484
  }
13265
13485
 
13266
- .s-button.s-tinted.s-caution:not([data-disabled])[data-selected] {
13486
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled])[data-selected] {
13267
13487
  --color-bg: var(--color-tinted-caution-bg-2);
13268
13488
  --color-border: var(--color-tinted-caution-border-3);
13269
13489
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13271,7 +13491,7 @@
13271
13491
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13272
13492
  }
13273
13493
 
13274
- .s-button.s-tinted.s-caution[data-disabled] {
13494
+ .s-button[data-mode='bleed'][data-tone='caution'][data-disabled] {
13275
13495
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13276
13496
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13277
13497
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13290,40 +13510,48 @@
13290
13510
  --color-muted-fg: var(--color-tinted-default-border-3);
13291
13511
  }
13292
13512
 
13293
- .s-button.s-solid.s-critical {
13513
+ .s-button[data-mode='default'][data-tone='critical'] {
13294
13514
  --color-bg: var(--color-solid-critical-bg-0);
13295
13515
  --color-border: var(--color-solid-critical-border-1);
13516
+ --color-code-bg: var(--color-solid-critical-bg-1);
13517
+ --color-code-fg: var(--color-solid-critical-fg-4);
13296
13518
  --color-fg: var(--color-solid-critical-fg-0);
13297
13519
  --color-muted-bg: var(--color-solid-critical-bg-1);
13298
13520
  --color-muted-fg: var(--color-solid-critical-fg-4);
13299
13521
  --button-box-shadow: none;
13300
13522
  }
13301
13523
 
13302
- .s-button.s-solid.s-critical:not([data-disabled]):hover {
13524
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled]):hover {
13303
13525
  --color-bg: var(--color-solid-critical-bg-1);
13304
13526
  --color-border: var(--color-solid-critical-border-2);
13527
+ --color-code-bg: var(--color-solid-critical-bg-2);
13528
+ --color-code-fg: var(--color-solid-critical-fg-4);
13305
13529
  --color-fg: var(--color-solid-critical-fg-0);
13306
13530
  --color-muted-bg: var(--color-solid-critical-bg-2);
13307
13531
  --color-muted-fg: var(--color-solid-critical-fg-4);
13308
13532
  }
13309
13533
 
13310
- .s-button.s-solid.s-critical:not([data-disabled]):active {
13534
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled]):active {
13311
13535
  --color-bg: var(--color-solid-critical-bg-2);
13312
13536
  --color-border: var(--color-solid-critical-border-3);
13537
+ --color-code-bg: var(--color-solid-critical-bg-3);
13538
+ --color-code-fg: var(--color-solid-critical-fg-4);
13313
13539
  --color-fg: var(--color-solid-critical-fg-0);
13314
13540
  --color-muted-bg: var(--color-solid-critical-bg-3);
13315
13541
  --color-muted-fg: var(--color-solid-critical-fg-4);
13316
13542
  }
13317
13543
 
13318
- .s-button.s-solid.s-critical:not([data-disabled])[data-selected] {
13544
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled])[data-selected] {
13319
13545
  --color-bg: var(--color-solid-critical-bg-2);
13320
13546
  --color-border: var(--color-solid-critical-border-3);
13547
+ --color-code-bg: var(--color-solid-critical-bg-3);
13548
+ --color-code-fg: var(--color-solid-critical-fg-4);
13321
13549
  --color-fg: var(--color-solid-critical-fg-0);
13322
13550
  --color-muted-bg: var(--color-solid-critical-bg-3);
13323
13551
  --color-muted-fg: var(--color-solid-critical-fg-4);
13324
13552
  }
13325
13553
 
13326
- .s-button.s-solid.s-critical[data-disabled] {
13554
+ .s-button[data-mode='default'][data-tone='critical'][data-disabled] {
13327
13555
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13328
13556
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13329
13557
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13342,42 +13570,50 @@
13342
13570
  --color-muted-fg: var(--color-tinted-default-border-4);
13343
13571
  }
13344
13572
 
13345
- .s-button.s-ghost.s-critical {
13573
+ .s-button[data-mode='ghost'][data-tone='critical'] {
13346
13574
  --color-bg: var(--color-tinted-critical-bg-1);
13347
- --color-border: var(--color-tinted-critical-border-0);
13575
+ --color-border: var(--color-tinted-critical-border-1);
13348
13576
  --color-fg: var(--color-tinted-critical-fg-2);
13577
+ --color-code-bg: var(--color-tinted-critical-bg-2);
13578
+ --color-code-fg: var(--color-tinted-critical-fg-4);
13349
13579
  --color-muted-bg: var(--color-tinted-critical-bg-2);
13350
13580
  --color-muted-fg: var(--color-tinted-critical-fg-4);
13351
13581
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13352
13582
  }
13353
13583
 
13354
- .s-button.s-ghost.s-critical:not([data-disabled]):hover {
13584
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled]):hover {
13355
13585
  --color-bg: var(--color-tinted-critical-bg-2);
13356
- --color-border: var(--color-tinted-critical-border-1);
13586
+ --color-border: var(--color-tinted-critical-border-2);
13587
+ --color-code-bg: var(--color-tinted-critical-bg-3);
13588
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13357
13589
  --color-fg: var(--color-tinted-critical-fg-1);
13358
13590
  --color-muted-bg: var(--color-tinted-critical-bg-3);
13359
13591
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13360
13592
  }
13361
13593
 
13362
- .s-button.s-ghost.s-critical:not([data-disabled]):active {
13594
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled]):active {
13363
13595
  --color-bg: var(--color-tinted-critical-bg-3);
13364
- --color-border: var(--color-tinted-critical-border-2);
13596
+ --color-border: var(--color-tinted-critical-border-3);
13597
+ --color-code-bg: var(--color-tinted-critical-bg-4);
13598
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13365
13599
  --color-fg: var(--color-tinted-critical-fg-1);
13366
13600
  --color-muted-bg: var(--color-tinted-critical-bg-4);
13367
13601
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13368
13602
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13369
13603
  }
13370
13604
 
13371
- .s-button.s-ghost.s-critical:not([data-disabled])[data-selected] {
13605
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled])[data-selected] {
13372
13606
  --color-bg: var(--color-tinted-critical-bg-3);
13373
- --color-border: var(--color-tinted-critical-border-2);
13607
+ --color-border: var(--color-tinted-critical-border-3);
13608
+ --color-code-bg: var(--color-tinted-critical-bg-4);
13609
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13374
13610
  --color-fg: var(--color-tinted-critical-fg-1);
13375
13611
  --color-muted-bg: var(--color-tinted-critical-bg-4);
13376
13612
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13377
13613
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13378
13614
  }
13379
13615
 
13380
- .s-button.s-ghost.s-critical[data-disabled] {
13616
+ .s-button[data-mode='ghost'][data-tone='critical'][data-disabled] {
13381
13617
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13382
13618
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13383
13619
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13396,7 +13632,7 @@
13396
13632
  --color-muted-fg: var(--color-tinted-default-border-3);
13397
13633
  }
13398
13634
 
13399
- .s-button.s-tinted.s-critical {
13635
+ .s-button[data-mode='bleed'][data-tone='critical'] {
13400
13636
  box-shadow: none;
13401
13637
  --color-bg: var(--color-tinted-critical-bg-0);
13402
13638
  --color-border: var(--color-tinted-critical-border-1);
@@ -13406,7 +13642,7 @@
13406
13642
  --button-box-shadow: none;
13407
13643
  }
13408
13644
 
13409
- .s-button.s-tinted.s-critical:not([data-disabled]):hover {
13645
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled]):hover {
13410
13646
  --color-bg: var(--color-tinted-critical-bg-1);
13411
13647
  --color-border: var(--color-tinted-critical-border-2);
13412
13648
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13414,7 +13650,7 @@
13414
13650
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13415
13651
  }
13416
13652
 
13417
- .s-button.s-tinted.s-critical:not([data-disabled]):active {
13653
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled]):active {
13418
13654
  --color-bg: var(--color-tinted-critical-bg-2);
13419
13655
  --color-border: var(--color-tinted-critical-border-3);
13420
13656
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13422,7 +13658,7 @@
13422
13658
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13423
13659
  }
13424
13660
 
13425
- .s-button.s-tinted.s-critical:not([data-disabled])[data-selected] {
13661
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled])[data-selected] {
13426
13662
  --color-bg: var(--color-tinted-critical-bg-2);
13427
13663
  --color-border: var(--color-tinted-critical-border-3);
13428
13664
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13430,7 +13666,7 @@
13430
13666
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13431
13667
  }
13432
13668
 
13433
- .s-button.s-tinted.s-critical[data-disabled] {
13669
+ .s-button[data-mode='bleed'][data-tone='critical'][data-disabled] {
13434
13670
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13435
13671
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13436
13672
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13483,6 +13719,12 @@
13483
13719
  white-space: inherit;
13484
13720
  }
13485
13721
 
13722
+ .s-card[data-checkered] {
13723
+ background-size: var(--space-3) var(--space-3);
13724
+ background-position: top left;
13725
+ background-image: repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%);
13726
+ }
13727
+
13486
13728
  a.s-card:not([data-disabled]):hover,
13487
13729
  button.s-card:not([data-disabled]):hover {
13488
13730
  --color-bg: var(--color-tinted-default-bg-1);
@@ -13530,11 +13772,11 @@
13530
13772
 
13531
13773
  a.s-card[data-disabled],
13532
13774
  button.s-card[data-disabled] {
13533
- --color-bg: var(--color-tinted-default-bg-2);
13534
- --color-border: var(--color-tinted-default-border-4);
13535
- --color-fg: var(--color-tinted-default-fg-0);
13536
- --color-muted-bg: var(--color-tinted-default-bg-3);
13537
- --color-muted-fg: var(--color-tinted-default-fg-4);
13775
+ --color-bg: var(--color-tinted-default-bg-0);
13776
+ --color-border: var(--color-tinted-default-border-1);
13777
+ --color-fg: var(--color-tinted-default-border-3);
13778
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13779
+ --color-muted-fg: var(--color-tinted-default-border-1);
13538
13780
  }
13539
13781
 
13540
13782
  .s-card.s-light {
@@ -20503,8 +20745,8 @@
20503
20745
  }
20504
20746
 
20505
20747
  .s-kbd {
20506
- box-shadow: inset 0 0 0 0.5px var(--color-tinted-default-border-3);
20507
- background: var(--color-muted-bg);
20748
+ box-shadow: inset 0 0 0 0.5px var(--color-border);
20749
+ background-color: var(--color-muted-bg);
20508
20750
  font: inherit;
20509
20751
  vertical-align: top;
20510
20752
  }
@@ -21029,57 +21271,165 @@
21029
21271
  }
21030
21272
 
21031
21273
  @media screen and (min-width: 360px) {
21032
- .s-1\:text-align-initial {
21033
- text-align: initial;
21274
+ .s-1\:input-0 {
21275
+ --input-font-size: var(--font-text-0-size);
21276
+ --input-line-height: var(--font-text-0-line-height);
21277
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
21278
+ --input-ascender-height: var(--font-text-0-ascender-height);
21279
+ --input-descender-height: var(--font-text-0-descender-height);
21034
21280
  }
21035
21281
 
21036
- .s-1\:text-align-left {
21037
- text-align: left;
21282
+ .s-1\:input-1 {
21283
+ --input-font-size: var(--font-text-1-size);
21284
+ --input-line-height: var(--font-text-1-line-height);
21285
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
21286
+ --input-ascender-height: var(--font-text-1-ascender-height);
21287
+ --input-descender-height: var(--font-text-1-descender-height);
21038
21288
  }
21039
21289
 
21040
- .s-1\:text-align-center {
21041
- text-align: center;
21290
+ .s-1\:input-2 {
21291
+ --input-font-size: var(--font-text-2-size);
21292
+ --input-line-height: var(--font-text-2-line-height);
21293
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
21294
+ --input-ascender-height: var(--font-text-2-ascender-height);
21295
+ --input-descender-height: var(--font-text-2-descender-height);
21042
21296
  }
21043
21297
 
21044
- .s-1\:text-align-right {
21045
- text-align: right;
21298
+ .s-1\:input-3 {
21299
+ --input-font-size: var(--font-text-3-size);
21300
+ --input-line-height: var(--font-text-3-line-height);
21301
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
21302
+ --input-ascender-height: var(--font-text-3-ascender-height);
21303
+ --input-descender-height: var(--font-text-3-descender-height);
21046
21304
  }
21047
21305
 
21048
- .s-1\:text-align-justify {
21049
- text-align: justify;
21306
+ .s-1\:input-4 {
21307
+ --input-font-size: var(--font-text-4-size);
21308
+ --input-line-height: var(--font-text-4-line-height);
21309
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
21310
+ --input-ascender-height: var(--font-text-4-ascender-height);
21311
+ --input-descender-height: var(--font-text-4-descender-height);
21050
21312
  }
21051
21313
 
21052
- .s-1\:avatar-0 {
21053
- --avatar-distance: var(--avatar-0-distance);
21054
- --avatar-size: var(--avatar-0-size);
21314
+ .s-1\:input-p-0 {
21315
+ --input-padding: var(--space-0);
21055
21316
  }
21056
21317
 
21057
- .s-1\:avatar-1 {
21058
- --avatar-distance: var(--avatar-1-distance);
21059
- --avatar-size: var(--avatar-1-size);
21318
+ .s-1\:input-p-0_5 {
21319
+ --input-padding: var(--space-0_5);
21060
21320
  }
21061
21321
 
21062
- .s-1\:avatar-2 {
21063
- --avatar-distance: var(--avatar-2-distance);
21064
- --avatar-size: var(--avatar-2-size);
21322
+ .s-1\:input-p-1 {
21323
+ --input-padding: var(--space-1);
21065
21324
  }
21066
21325
 
21067
- .s-1\:avatar-3 {
21068
- --avatar-distance: var(--avatar-3-distance);
21069
- --avatar-size: var(--avatar-3-size);
21326
+ .s-1\:input-p-2 {
21327
+ --input-padding: var(--space-2);
21070
21328
  }
21071
21329
 
21072
- .s-1\:code-0 {
21073
- --font-size: var(--font-code-0-size);
21074
- --font-line-height: var(--font-code-0-line-height);
21075
- --font-letter-spacing: var(--font-code-0-letter-spacing);
21076
- --font-icon-size: var(--font-code-0-icon-size);
21077
- --font-ascender-height: var(--font-code-0-ascender-height);
21078
- --font-descender-height: var(--font-code-0-descender-height);
21330
+ .s-1\:input-p-3 {
21331
+ --input-padding: var(--space-3);
21079
21332
  }
21080
21333
 
21081
- .s-1\:code-1 {
21082
- --font-size: var(--font-code-1-size);
21334
+ .s-1\:input-p-4 {
21335
+ --input-padding: var(--space-4);
21336
+ }
21337
+
21338
+ .s-1\:input-p-5 {
21339
+ --input-padding: var(--space-5);
21340
+ }
21341
+
21342
+ .s-1\:input-p-6 {
21343
+ --input-padding: var(--space-6);
21344
+ }
21345
+
21346
+ .s-1\:input-p-7 {
21347
+ --input-padding: var(--space-7);
21348
+ }
21349
+
21350
+ .s-1\:input-p-8 {
21351
+ --input-padding: var(--space-8);
21352
+ }
21353
+
21354
+ .s-1\:input-p-9 {
21355
+ --input-padding: var(--space-9);
21356
+ }
21357
+
21358
+ .s-1\:input-g-0 {
21359
+ --input-gap: var(--space-0);
21360
+ }
21361
+
21362
+ .s-1\:input-g-0_5 {
21363
+ --input-gap: var(--space-0_5);
21364
+ }
21365
+
21366
+ .s-1\:input-g-1 {
21367
+ --input-gap: var(--space-1);
21368
+ }
21369
+
21370
+ .s-1\:input-g-2 {
21371
+ --input-gap: var(--space-2);
21372
+ }
21373
+
21374
+ .s-1\:input-g-3 {
21375
+ --input-gap: var(--space-3);
21376
+ }
21377
+
21378
+ .s-1\:input-g-4 {
21379
+ --input-gap: var(--space-4);
21380
+ }
21381
+
21382
+ .s-1\:input-g-5 {
21383
+ --input-gap: var(--space-5);
21384
+ }
21385
+
21386
+ .s-1\:input-g-6 {
21387
+ --input-gap: var(--space-6);
21388
+ }
21389
+
21390
+ .s-1\:input-g-7 {
21391
+ --input-gap: var(--space-7);
21392
+ }
21393
+
21394
+ .s-1\:input-g-8 {
21395
+ --input-gap: var(--space-8);
21396
+ }
21397
+
21398
+ .s-1\:input-g-9 {
21399
+ --input-gap: var(--space-9);
21400
+ }
21401
+
21402
+ .s-1\:avatar-0 {
21403
+ --avatar-distance: var(--avatar-0-distance);
21404
+ --avatar-size: var(--avatar-0-size);
21405
+ }
21406
+
21407
+ .s-1\:avatar-1 {
21408
+ --avatar-distance: var(--avatar-1-distance);
21409
+ --avatar-size: var(--avatar-1-size);
21410
+ }
21411
+
21412
+ .s-1\:avatar-2 {
21413
+ --avatar-distance: var(--avatar-2-distance);
21414
+ --avatar-size: var(--avatar-2-size);
21415
+ }
21416
+
21417
+ .s-1\:avatar-3 {
21418
+ --avatar-distance: var(--avatar-3-distance);
21419
+ --avatar-size: var(--avatar-3-size);
21420
+ }
21421
+
21422
+ .s-1\:code-0 {
21423
+ --font-size: var(--font-code-0-size);
21424
+ --font-line-height: var(--font-code-0-line-height);
21425
+ --font-letter-spacing: var(--font-code-0-letter-spacing);
21426
+ --font-icon-size: var(--font-code-0-icon-size);
21427
+ --font-ascender-height: var(--font-code-0-ascender-height);
21428
+ --font-descender-height: var(--font-code-0-descender-height);
21429
+ }
21430
+
21431
+ .s-1\:code-1 {
21432
+ --font-size: var(--font-code-1-size);
21083
21433
  --font-line-height: var(--font-code-1-line-height);
21084
21434
  --font-letter-spacing: var(--font-code-1-letter-spacing);
21085
21435
  --font-icon-size: var(--font-code-1-icon-size);
@@ -21269,24 +21619,132 @@
21269
21619
  }
21270
21620
 
21271
21621
  @media screen and (min-width: 600px) {
21272
- .s-2\:text-align-initial {
21273
- text-align: initial;
21622
+ .s-2\:input-0 {
21623
+ --input-font-size: var(--font-text-0-size);
21624
+ --input-line-height: var(--font-text-0-line-height);
21625
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
21626
+ --input-ascender-height: var(--font-text-0-ascender-height);
21627
+ --input-descender-height: var(--font-text-0-descender-height);
21274
21628
  }
21275
21629
 
21276
- .s-2\:text-align-left {
21277
- text-align: left;
21630
+ .s-2\:input-1 {
21631
+ --input-font-size: var(--font-text-1-size);
21632
+ --input-line-height: var(--font-text-1-line-height);
21633
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
21634
+ --input-ascender-height: var(--font-text-1-ascender-height);
21635
+ --input-descender-height: var(--font-text-1-descender-height);
21278
21636
  }
21279
21637
 
21280
- .s-2\:text-align-center {
21281
- text-align: center;
21638
+ .s-2\:input-2 {
21639
+ --input-font-size: var(--font-text-2-size);
21640
+ --input-line-height: var(--font-text-2-line-height);
21641
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
21642
+ --input-ascender-height: var(--font-text-2-ascender-height);
21643
+ --input-descender-height: var(--font-text-2-descender-height);
21282
21644
  }
21283
21645
 
21284
- .s-2\:text-align-right {
21285
- text-align: right;
21646
+ .s-2\:input-3 {
21647
+ --input-font-size: var(--font-text-3-size);
21648
+ --input-line-height: var(--font-text-3-line-height);
21649
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
21650
+ --input-ascender-height: var(--font-text-3-ascender-height);
21651
+ --input-descender-height: var(--font-text-3-descender-height);
21286
21652
  }
21287
21653
 
21288
- .s-2\:text-align-justify {
21289
- text-align: justify;
21654
+ .s-2\:input-4 {
21655
+ --input-font-size: var(--font-text-4-size);
21656
+ --input-line-height: var(--font-text-4-line-height);
21657
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
21658
+ --input-ascender-height: var(--font-text-4-ascender-height);
21659
+ --input-descender-height: var(--font-text-4-descender-height);
21660
+ }
21661
+
21662
+ .s-2\:input-p-0 {
21663
+ --input-padding: var(--space-0);
21664
+ }
21665
+
21666
+ .s-2\:input-p-0_5 {
21667
+ --input-padding: var(--space-0_5);
21668
+ }
21669
+
21670
+ .s-2\:input-p-1 {
21671
+ --input-padding: var(--space-1);
21672
+ }
21673
+
21674
+ .s-2\:input-p-2 {
21675
+ --input-padding: var(--space-2);
21676
+ }
21677
+
21678
+ .s-2\:input-p-3 {
21679
+ --input-padding: var(--space-3);
21680
+ }
21681
+
21682
+ .s-2\:input-p-4 {
21683
+ --input-padding: var(--space-4);
21684
+ }
21685
+
21686
+ .s-2\:input-p-5 {
21687
+ --input-padding: var(--space-5);
21688
+ }
21689
+
21690
+ .s-2\:input-p-6 {
21691
+ --input-padding: var(--space-6);
21692
+ }
21693
+
21694
+ .s-2\:input-p-7 {
21695
+ --input-padding: var(--space-7);
21696
+ }
21697
+
21698
+ .s-2\:input-p-8 {
21699
+ --input-padding: var(--space-8);
21700
+ }
21701
+
21702
+ .s-2\:input-p-9 {
21703
+ --input-padding: var(--space-9);
21704
+ }
21705
+
21706
+ .s-2\:input-g-0 {
21707
+ --input-gap: var(--space-0);
21708
+ }
21709
+
21710
+ .s-2\:input-g-0_5 {
21711
+ --input-gap: var(--space-0_5);
21712
+ }
21713
+
21714
+ .s-2\:input-g-1 {
21715
+ --input-gap: var(--space-1);
21716
+ }
21717
+
21718
+ .s-2\:input-g-2 {
21719
+ --input-gap: var(--space-2);
21720
+ }
21721
+
21722
+ .s-2\:input-g-3 {
21723
+ --input-gap: var(--space-3);
21724
+ }
21725
+
21726
+ .s-2\:input-g-4 {
21727
+ --input-gap: var(--space-4);
21728
+ }
21729
+
21730
+ .s-2\:input-g-5 {
21731
+ --input-gap: var(--space-5);
21732
+ }
21733
+
21734
+ .s-2\:input-g-6 {
21735
+ --input-gap: var(--space-6);
21736
+ }
21737
+
21738
+ .s-2\:input-g-7 {
21739
+ --input-gap: var(--space-7);
21740
+ }
21741
+
21742
+ .s-2\:input-g-8 {
21743
+ --input-gap: var(--space-8);
21744
+ }
21745
+
21746
+ .s-2\:input-g-9 {
21747
+ --input-gap: var(--space-9);
21290
21748
  }
21291
21749
 
21292
21750
  .s-2\:avatar-0 {
@@ -21509,24 +21967,132 @@
21509
21967
  }
21510
21968
 
21511
21969
  @media screen and (min-width: 900px) {
21512
- .s-3\:text-align-initial {
21513
- text-align: initial;
21970
+ .s-3\:input-0 {
21971
+ --input-font-size: var(--font-text-0-size);
21972
+ --input-line-height: var(--font-text-0-line-height);
21973
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
21974
+ --input-ascender-height: var(--font-text-0-ascender-height);
21975
+ --input-descender-height: var(--font-text-0-descender-height);
21514
21976
  }
21515
21977
 
21516
- .s-3\:text-align-left {
21517
- text-align: left;
21978
+ .s-3\:input-1 {
21979
+ --input-font-size: var(--font-text-1-size);
21980
+ --input-line-height: var(--font-text-1-line-height);
21981
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
21982
+ --input-ascender-height: var(--font-text-1-ascender-height);
21983
+ --input-descender-height: var(--font-text-1-descender-height);
21518
21984
  }
21519
21985
 
21520
- .s-3\:text-align-center {
21521
- text-align: center;
21986
+ .s-3\:input-2 {
21987
+ --input-font-size: var(--font-text-2-size);
21988
+ --input-line-height: var(--font-text-2-line-height);
21989
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
21990
+ --input-ascender-height: var(--font-text-2-ascender-height);
21991
+ --input-descender-height: var(--font-text-2-descender-height);
21522
21992
  }
21523
21993
 
21524
- .s-3\:text-align-right {
21525
- text-align: right;
21994
+ .s-3\:input-3 {
21995
+ --input-font-size: var(--font-text-3-size);
21996
+ --input-line-height: var(--font-text-3-line-height);
21997
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
21998
+ --input-ascender-height: var(--font-text-3-ascender-height);
21999
+ --input-descender-height: var(--font-text-3-descender-height);
21526
22000
  }
21527
22001
 
21528
- .s-3\:text-align-justify {
21529
- text-align: justify;
22002
+ .s-3\:input-4 {
22003
+ --input-font-size: var(--font-text-4-size);
22004
+ --input-line-height: var(--font-text-4-line-height);
22005
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
22006
+ --input-ascender-height: var(--font-text-4-ascender-height);
22007
+ --input-descender-height: var(--font-text-4-descender-height);
22008
+ }
22009
+
22010
+ .s-3\:input-p-0 {
22011
+ --input-padding: var(--space-0);
22012
+ }
22013
+
22014
+ .s-3\:input-p-0_5 {
22015
+ --input-padding: var(--space-0_5);
22016
+ }
22017
+
22018
+ .s-3\:input-p-1 {
22019
+ --input-padding: var(--space-1);
22020
+ }
22021
+
22022
+ .s-3\:input-p-2 {
22023
+ --input-padding: var(--space-2);
22024
+ }
22025
+
22026
+ .s-3\:input-p-3 {
22027
+ --input-padding: var(--space-3);
22028
+ }
22029
+
22030
+ .s-3\:input-p-4 {
22031
+ --input-padding: var(--space-4);
22032
+ }
22033
+
22034
+ .s-3\:input-p-5 {
22035
+ --input-padding: var(--space-5);
22036
+ }
22037
+
22038
+ .s-3\:input-p-6 {
22039
+ --input-padding: var(--space-6);
22040
+ }
22041
+
22042
+ .s-3\:input-p-7 {
22043
+ --input-padding: var(--space-7);
22044
+ }
22045
+
22046
+ .s-3\:input-p-8 {
22047
+ --input-padding: var(--space-8);
22048
+ }
22049
+
22050
+ .s-3\:input-p-9 {
22051
+ --input-padding: var(--space-9);
22052
+ }
22053
+
22054
+ .s-3\:input-g-0 {
22055
+ --input-gap: var(--space-0);
22056
+ }
22057
+
22058
+ .s-3\:input-g-0_5 {
22059
+ --input-gap: var(--space-0_5);
22060
+ }
22061
+
22062
+ .s-3\:input-g-1 {
22063
+ --input-gap: var(--space-1);
22064
+ }
22065
+
22066
+ .s-3\:input-g-2 {
22067
+ --input-gap: var(--space-2);
22068
+ }
22069
+
22070
+ .s-3\:input-g-3 {
22071
+ --input-gap: var(--space-3);
22072
+ }
22073
+
22074
+ .s-3\:input-g-4 {
22075
+ --input-gap: var(--space-4);
22076
+ }
22077
+
22078
+ .s-3\:input-g-5 {
22079
+ --input-gap: var(--space-5);
22080
+ }
22081
+
22082
+ .s-3\:input-g-6 {
22083
+ --input-gap: var(--space-6);
22084
+ }
22085
+
22086
+ .s-3\:input-g-7 {
22087
+ --input-gap: var(--space-7);
22088
+ }
22089
+
22090
+ .s-3\:input-g-8 {
22091
+ --input-gap: var(--space-8);
22092
+ }
22093
+
22094
+ .s-3\:input-g-9 {
22095
+ --input-gap: var(--space-9);
21530
22096
  }
21531
22097
 
21532
22098
  .s-3\:avatar-0 {
@@ -21749,24 +22315,132 @@
21749
22315
  }
21750
22316
 
21751
22317
  @media screen and (min-width: 1200px) {
21752
- .s-4\:text-align-initial {
21753
- text-align: initial;
22318
+ .s-4\:input-0 {
22319
+ --input-font-size: var(--font-text-0-size);
22320
+ --input-line-height: var(--font-text-0-line-height);
22321
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
22322
+ --input-ascender-height: var(--font-text-0-ascender-height);
22323
+ --input-descender-height: var(--font-text-0-descender-height);
21754
22324
  }
21755
22325
 
21756
- .s-4\:text-align-left {
21757
- text-align: left;
22326
+ .s-4\:input-1 {
22327
+ --input-font-size: var(--font-text-1-size);
22328
+ --input-line-height: var(--font-text-1-line-height);
22329
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
22330
+ --input-ascender-height: var(--font-text-1-ascender-height);
22331
+ --input-descender-height: var(--font-text-1-descender-height);
21758
22332
  }
21759
22333
 
21760
- .s-4\:text-align-center {
21761
- text-align: center;
22334
+ .s-4\:input-2 {
22335
+ --input-font-size: var(--font-text-2-size);
22336
+ --input-line-height: var(--font-text-2-line-height);
22337
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
22338
+ --input-ascender-height: var(--font-text-2-ascender-height);
22339
+ --input-descender-height: var(--font-text-2-descender-height);
21762
22340
  }
21763
22341
 
21764
- .s-4\:text-align-right {
21765
- text-align: right;
22342
+ .s-4\:input-3 {
22343
+ --input-font-size: var(--font-text-3-size);
22344
+ --input-line-height: var(--font-text-3-line-height);
22345
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
22346
+ --input-ascender-height: var(--font-text-3-ascender-height);
22347
+ --input-descender-height: var(--font-text-3-descender-height);
21766
22348
  }
21767
22349
 
21768
- .s-4\:text-align-justify {
21769
- text-align: justify;
22350
+ .s-4\:input-4 {
22351
+ --input-font-size: var(--font-text-4-size);
22352
+ --input-line-height: var(--font-text-4-line-height);
22353
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
22354
+ --input-ascender-height: var(--font-text-4-ascender-height);
22355
+ --input-descender-height: var(--font-text-4-descender-height);
22356
+ }
22357
+
22358
+ .s-4\:input-p-0 {
22359
+ --input-padding: var(--space-0);
22360
+ }
22361
+
22362
+ .s-4\:input-p-0_5 {
22363
+ --input-padding: var(--space-0_5);
22364
+ }
22365
+
22366
+ .s-4\:input-p-1 {
22367
+ --input-padding: var(--space-1);
22368
+ }
22369
+
22370
+ .s-4\:input-p-2 {
22371
+ --input-padding: var(--space-2);
22372
+ }
22373
+
22374
+ .s-4\:input-p-3 {
22375
+ --input-padding: var(--space-3);
22376
+ }
22377
+
22378
+ .s-4\:input-p-4 {
22379
+ --input-padding: var(--space-4);
22380
+ }
22381
+
22382
+ .s-4\:input-p-5 {
22383
+ --input-padding: var(--space-5);
22384
+ }
22385
+
22386
+ .s-4\:input-p-6 {
22387
+ --input-padding: var(--space-6);
22388
+ }
22389
+
22390
+ .s-4\:input-p-7 {
22391
+ --input-padding: var(--space-7);
22392
+ }
22393
+
22394
+ .s-4\:input-p-8 {
22395
+ --input-padding: var(--space-8);
22396
+ }
22397
+
22398
+ .s-4\:input-p-9 {
22399
+ --input-padding: var(--space-9);
22400
+ }
22401
+
22402
+ .s-4\:input-g-0 {
22403
+ --input-gap: var(--space-0);
22404
+ }
22405
+
22406
+ .s-4\:input-g-0_5 {
22407
+ --input-gap: var(--space-0_5);
22408
+ }
22409
+
22410
+ .s-4\:input-g-1 {
22411
+ --input-gap: var(--space-1);
22412
+ }
22413
+
22414
+ .s-4\:input-g-2 {
22415
+ --input-gap: var(--space-2);
22416
+ }
22417
+
22418
+ .s-4\:input-g-3 {
22419
+ --input-gap: var(--space-3);
22420
+ }
22421
+
22422
+ .s-4\:input-g-4 {
22423
+ --input-gap: var(--space-4);
22424
+ }
22425
+
22426
+ .s-4\:input-g-5 {
22427
+ --input-gap: var(--space-5);
22428
+ }
22429
+
22430
+ .s-4\:input-g-6 {
22431
+ --input-gap: var(--space-6);
22432
+ }
22433
+
22434
+ .s-4\:input-g-7 {
22435
+ --input-gap: var(--space-7);
22436
+ }
22437
+
22438
+ .s-4\:input-g-8 {
22439
+ --input-gap: var(--space-8);
22440
+ }
22441
+
22442
+ .s-4\:input-g-9 {
22443
+ --input-gap: var(--space-9);
21770
22444
  }
21771
22445
 
21772
22446
  .s-4\:avatar-0 {
@@ -21989,24 +22663,132 @@
21989
22663
  }
21990
22664
 
21991
22665
  @media screen and (min-width: 1800px) {
21992
- .s-5\:text-align-initial {
21993
- text-align: initial;
22666
+ .s-5\:input-0 {
22667
+ --input-font-size: var(--font-text-0-size);
22668
+ --input-line-height: var(--font-text-0-line-height);
22669
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
22670
+ --input-ascender-height: var(--font-text-0-ascender-height);
22671
+ --input-descender-height: var(--font-text-0-descender-height);
21994
22672
  }
21995
22673
 
21996
- .s-5\:text-align-left {
21997
- text-align: left;
22674
+ .s-5\:input-1 {
22675
+ --input-font-size: var(--font-text-1-size);
22676
+ --input-line-height: var(--font-text-1-line-height);
22677
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
22678
+ --input-ascender-height: var(--font-text-1-ascender-height);
22679
+ --input-descender-height: var(--font-text-1-descender-height);
21998
22680
  }
21999
22681
 
22000
- .s-5\:text-align-center {
22001
- text-align: center;
22682
+ .s-5\:input-2 {
22683
+ --input-font-size: var(--font-text-2-size);
22684
+ --input-line-height: var(--font-text-2-line-height);
22685
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
22686
+ --input-ascender-height: var(--font-text-2-ascender-height);
22687
+ --input-descender-height: var(--font-text-2-descender-height);
22002
22688
  }
22003
22689
 
22004
- .s-5\:text-align-right {
22005
- text-align: right;
22690
+ .s-5\:input-3 {
22691
+ --input-font-size: var(--font-text-3-size);
22692
+ --input-line-height: var(--font-text-3-line-height);
22693
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
22694
+ --input-ascender-height: var(--font-text-3-ascender-height);
22695
+ --input-descender-height: var(--font-text-3-descender-height);
22006
22696
  }
22007
22697
 
22008
- .s-5\:text-align-justify {
22009
- text-align: justify;
22698
+ .s-5\:input-4 {
22699
+ --input-font-size: var(--font-text-4-size);
22700
+ --input-line-height: var(--font-text-4-line-height);
22701
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
22702
+ --input-ascender-height: var(--font-text-4-ascender-height);
22703
+ --input-descender-height: var(--font-text-4-descender-height);
22704
+ }
22705
+
22706
+ .s-5\:input-p-0 {
22707
+ --input-padding: var(--space-0);
22708
+ }
22709
+
22710
+ .s-5\:input-p-0_5 {
22711
+ --input-padding: var(--space-0_5);
22712
+ }
22713
+
22714
+ .s-5\:input-p-1 {
22715
+ --input-padding: var(--space-1);
22716
+ }
22717
+
22718
+ .s-5\:input-p-2 {
22719
+ --input-padding: var(--space-2);
22720
+ }
22721
+
22722
+ .s-5\:input-p-3 {
22723
+ --input-padding: var(--space-3);
22724
+ }
22725
+
22726
+ .s-5\:input-p-4 {
22727
+ --input-padding: var(--space-4);
22728
+ }
22729
+
22730
+ .s-5\:input-p-5 {
22731
+ --input-padding: var(--space-5);
22732
+ }
22733
+
22734
+ .s-5\:input-p-6 {
22735
+ --input-padding: var(--space-6);
22736
+ }
22737
+
22738
+ .s-5\:input-p-7 {
22739
+ --input-padding: var(--space-7);
22740
+ }
22741
+
22742
+ .s-5\:input-p-8 {
22743
+ --input-padding: var(--space-8);
22744
+ }
22745
+
22746
+ .s-5\:input-p-9 {
22747
+ --input-padding: var(--space-9);
22748
+ }
22749
+
22750
+ .s-5\:input-g-0 {
22751
+ --input-gap: var(--space-0);
22752
+ }
22753
+
22754
+ .s-5\:input-g-0_5 {
22755
+ --input-gap: var(--space-0_5);
22756
+ }
22757
+
22758
+ .s-5\:input-g-1 {
22759
+ --input-gap: var(--space-1);
22760
+ }
22761
+
22762
+ .s-5\:input-g-2 {
22763
+ --input-gap: var(--space-2);
22764
+ }
22765
+
22766
+ .s-5\:input-g-3 {
22767
+ --input-gap: var(--space-3);
22768
+ }
22769
+
22770
+ .s-5\:input-g-4 {
22771
+ --input-gap: var(--space-4);
22772
+ }
22773
+
22774
+ .s-5\:input-g-5 {
22775
+ --input-gap: var(--space-5);
22776
+ }
22777
+
22778
+ .s-5\:input-g-6 {
22779
+ --input-gap: var(--space-6);
22780
+ }
22781
+
22782
+ .s-5\:input-g-7 {
22783
+ --input-gap: var(--space-7);
22784
+ }
22785
+
22786
+ .s-5\:input-g-8 {
22787
+ --input-gap: var(--space-8);
22788
+ }
22789
+
22790
+ .s-5\:input-g-9 {
22791
+ --input-gap: var(--space-9);
22010
22792
  }
22011
22793
 
22012
22794
  .s-5\:avatar-0 {
@@ -22229,24 +23011,132 @@
22229
23011
  }
22230
23012
 
22231
23013
  @media screen and (min-width: 2400px) {
22232
- .s-6\:text-align-initial {
22233
- text-align: initial;
23014
+ .s-6\:input-0 {
23015
+ --input-font-size: var(--font-text-0-size);
23016
+ --input-line-height: var(--font-text-0-line-height);
23017
+ --input-letter-spacing: var(--font-text-0-letter-spacing);
23018
+ --input-ascender-height: var(--font-text-0-ascender-height);
23019
+ --input-descender-height: var(--font-text-0-descender-height);
22234
23020
  }
22235
23021
 
22236
- .s-6\:text-align-left {
22237
- text-align: left;
23022
+ .s-6\:input-1 {
23023
+ --input-font-size: var(--font-text-1-size);
23024
+ --input-line-height: var(--font-text-1-line-height);
23025
+ --input-letter-spacing: var(--font-text-1-letter-spacing);
23026
+ --input-ascender-height: var(--font-text-1-ascender-height);
23027
+ --input-descender-height: var(--font-text-1-descender-height);
22238
23028
  }
22239
23029
 
22240
- .s-6\:text-align-center {
22241
- text-align: center;
23030
+ .s-6\:input-2 {
23031
+ --input-font-size: var(--font-text-2-size);
23032
+ --input-line-height: var(--font-text-2-line-height);
23033
+ --input-letter-spacing: var(--font-text-2-letter-spacing);
23034
+ --input-ascender-height: var(--font-text-2-ascender-height);
23035
+ --input-descender-height: var(--font-text-2-descender-height);
22242
23036
  }
22243
23037
 
22244
- .s-6\:text-align-right {
22245
- text-align: right;
23038
+ .s-6\:input-3 {
23039
+ --input-font-size: var(--font-text-3-size);
23040
+ --input-line-height: var(--font-text-3-line-height);
23041
+ --input-letter-spacing: var(--font-text-3-letter-spacing);
23042
+ --input-ascender-height: var(--font-text-3-ascender-height);
23043
+ --input-descender-height: var(--font-text-3-descender-height);
22246
23044
  }
22247
23045
 
22248
- .s-6\:text-align-justify {
22249
- text-align: justify;
23046
+ .s-6\:input-4 {
23047
+ --input-font-size: var(--font-text-4-size);
23048
+ --input-line-height: var(--font-text-4-line-height);
23049
+ --input-letter-spacing: var(--font-text-4-letter-spacing);
23050
+ --input-ascender-height: var(--font-text-4-ascender-height);
23051
+ --input-descender-height: var(--font-text-4-descender-height);
23052
+ }
23053
+
23054
+ .s-6\:input-p-0 {
23055
+ --input-padding: var(--space-0);
23056
+ }
23057
+
23058
+ .s-6\:input-p-0_5 {
23059
+ --input-padding: var(--space-0_5);
23060
+ }
23061
+
23062
+ .s-6\:input-p-1 {
23063
+ --input-padding: var(--space-1);
23064
+ }
23065
+
23066
+ .s-6\:input-p-2 {
23067
+ --input-padding: var(--space-2);
23068
+ }
23069
+
23070
+ .s-6\:input-p-3 {
23071
+ --input-padding: var(--space-3);
23072
+ }
23073
+
23074
+ .s-6\:input-p-4 {
23075
+ --input-padding: var(--space-4);
23076
+ }
23077
+
23078
+ .s-6\:input-p-5 {
23079
+ --input-padding: var(--space-5);
23080
+ }
23081
+
23082
+ .s-6\:input-p-6 {
23083
+ --input-padding: var(--space-6);
23084
+ }
23085
+
23086
+ .s-6\:input-p-7 {
23087
+ --input-padding: var(--space-7);
23088
+ }
23089
+
23090
+ .s-6\:input-p-8 {
23091
+ --input-padding: var(--space-8);
23092
+ }
23093
+
23094
+ .s-6\:input-p-9 {
23095
+ --input-padding: var(--space-9);
23096
+ }
23097
+
23098
+ .s-6\:input-g-0 {
23099
+ --input-gap: var(--space-0);
23100
+ }
23101
+
23102
+ .s-6\:input-g-0_5 {
23103
+ --input-gap: var(--space-0_5);
23104
+ }
23105
+
23106
+ .s-6\:input-g-1 {
23107
+ --input-gap: var(--space-1);
23108
+ }
23109
+
23110
+ .s-6\:input-g-2 {
23111
+ --input-gap: var(--space-2);
23112
+ }
23113
+
23114
+ .s-6\:input-g-3 {
23115
+ --input-gap: var(--space-3);
23116
+ }
23117
+
23118
+ .s-6\:input-g-4 {
23119
+ --input-gap: var(--space-4);
23120
+ }
23121
+
23122
+ .s-6\:input-g-5 {
23123
+ --input-gap: var(--space-5);
23124
+ }
23125
+
23126
+ .s-6\:input-g-6 {
23127
+ --input-gap: var(--space-6);
23128
+ }
23129
+
23130
+ .s-6\:input-g-7 {
23131
+ --input-gap: var(--space-7);
23132
+ }
23133
+
23134
+ .s-6\:input-g-8 {
23135
+ --input-gap: var(--space-8);
23136
+ }
23137
+
23138
+ .s-6\:input-g-9 {
23139
+ --input-gap: var(--space-9);
22250
23140
  }
22251
23141
 
22252
23142
  .s-6\:avatar-0 {