@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

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 (500) hide show
  1. package/README.md +2 -1
  2. package/dist/_chunks-cjs/_visual-editing.cjs +198 -862
  3. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -1
  4. package/dist/_chunks-cjs/refractor.cjs +0 -1
  5. package/dist/_chunks-cjs/refractor.cjs.map +1 -1
  6. package/dist/_chunks-es/_visual-editing.js +211 -874
  7. package/dist/_chunks-es/_visual-editing.js.map +1 -1
  8. package/dist/_chunks-es/refractor.js +0 -1
  9. package/dist/_chunks-es/refractor.js.map +1 -1
  10. package/dist/_visual-editing.d.cts +34 -100
  11. package/dist/_visual-editing.d.ts +34 -100
  12. package/dist/css.cjs +368 -4123
  13. package/dist/css.cjs.map +1 -1
  14. package/dist/css.d.cts +13095 -8462
  15. package/dist/css.d.ts +13095 -8462
  16. package/dist/css.js +368 -4124
  17. package/dist/css.js.map +1 -1
  18. package/dist/index.cjs +769 -141
  19. package/dist/index.cjs.map +1 -1
  20. package/dist/index.d.cts +93 -287
  21. package/dist/index.d.ts +93 -287
  22. package/dist/index.js +740 -112
  23. package/dist/index.js.map +1 -1
  24. package/dist/theme.cjs +31 -10
  25. package/dist/theme.cjs.map +1 -1
  26. package/dist/theme.d.cts +2 -2
  27. package/dist/theme.d.ts +2 -2
  28. package/dist/theme.js +31 -10
  29. package/dist/theme.js.map +1 -1
  30. package/dist/ui.css +21459 -24610
  31. package/package.json +17 -12
  32. package/src/cli/buildCommand.ts +1 -91
  33. package/src/core/_compat/theme/themeColorProvider.tsx +0 -2
  34. package/src/core/_compat/theme/themeProvider.tsx +0 -2
  35. package/src/core/components/autocomplete/autocomplete.tsx +15 -15
  36. package/src/core/components/autocomplete/autocompleteOption.tsx +0 -2
  37. package/src/core/components/breadcrumbs/breadcrumbs.tsx +2 -4
  38. package/src/core/components/dialog/dialog.tsx +9 -13
  39. package/src/core/components/dialog/dialogCard.tsx +2 -10
  40. package/src/core/components/dialog/dialogContext.ts +4 -2
  41. package/src/core/components/dialog/dialogProvider.tsx +3 -4
  42. package/src/core/components/hotkeys/hotkeys.tsx +0 -2
  43. package/src/core/components/menu/menu.tsx +2 -4
  44. package/src/core/components/menu/menuButton.tsx +0 -2
  45. package/src/core/components/menu/menuDivider.tsx +2 -4
  46. package/src/core/components/menu/menuGroup.tsx +0 -2
  47. package/src/core/components/menu/menuItem.tsx +2 -4
  48. package/src/core/components/skeleton/codeSkeleton.tsx +6 -10
  49. package/src/core/components/skeleton/headingSkeleton.tsx +6 -10
  50. package/src/core/components/skeleton/labelSkeleton.tsx +6 -10
  51. package/src/core/components/skeleton/skeleton.tsx +4 -8
  52. package/src/core/components/skeleton/textSkeleton.tsx +6 -10
  53. package/src/core/components/tab/tab.tsx +0 -2
  54. package/src/core/components/tab/tabList.tsx +0 -2
  55. package/src/core/components/tab/tabPanel.tsx +0 -2
  56. package/src/core/components/toast/toast.tsx +6 -36
  57. package/src/core/components/toast/toastLayer.tsx +0 -2
  58. package/src/core/components/toast/toastProvider.tsx +2 -3
  59. package/src/core/components/tree/tree.tsx +0 -2
  60. package/src/core/components/tree/treeGroup.tsx +0 -2
  61. package/src/core/components/tree/treeItem.tsx +3 -5
  62. package/src/core/helpers/props.ts +18 -0
  63. package/src/core/hooks/index.ts +1 -0
  64. package/src/core/hooks/useArrayProp.ts +1 -4
  65. package/src/core/hooks/useResponsiveProp.ts +28 -0
  66. package/src/core/index.ts +0 -1
  67. package/src/core/lib/isArray.ts +3 -0
  68. package/src/core/primitives/_selectable/selectable.tsx +2 -6
  69. package/src/core/primitives/avatar/avatar.tsx +15 -17
  70. package/src/core/primitives/avatar/avatarCounter.tsx +14 -15
  71. package/src/core/primitives/avatar/avatarStack.tsx +14 -22
  72. package/src/core/primitives/badge/badge.tsx +3 -10
  73. package/src/core/primitives/box/box.tsx +90 -70
  74. package/src/core/primitives/button/button.tsx +10 -21
  75. package/src/core/primitives/card/card.tsx +5 -11
  76. package/src/core/primitives/card/cardProvider.tsx +2 -2
  77. package/src/core/primitives/card/useCard.ts +1 -0
  78. package/src/core/primitives/checkbox/checkbox.tsx +4 -6
  79. package/src/core/primitives/code/code.tsx +5 -10
  80. package/src/core/primitives/code/refractor.tsx +0 -2
  81. package/src/core/primitives/container/container.tsx +2 -11
  82. package/src/core/primitives/flex/flex.tsx +29 -4
  83. package/src/core/primitives/grid/grid.tsx +0 -2
  84. package/src/core/primitives/heading/heading.tsx +8 -13
  85. package/src/core/primitives/inline/inline.tsx +22 -6
  86. package/src/core/primitives/kbd/kbd.tsx +2 -4
  87. package/src/core/primitives/label/label.tsx +7 -12
  88. package/src/core/primitives/popover/popover.tsx +11 -9
  89. package/src/core/primitives/popover/popoverLayer.tsx +1 -3
  90. package/src/core/primitives/radio/radio.tsx +4 -5
  91. package/src/core/primitives/select/select.tsx +0 -2
  92. package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +6 -10
  93. package/src/core/primitives/spinner/spinner.tsx +6 -6
  94. package/src/core/primitives/stack/stack.tsx +16 -6
  95. package/src/core/primitives/switch/switch.tsx +1 -4
  96. package/src/core/primitives/text/text.tsx +9 -19
  97. package/src/core/primitives/textArea/textArea.tsx +0 -2
  98. package/src/core/primitives/textInput/textInput.tsx +40 -47
  99. package/src/core/primitives/tooltip/tooltip.tsx +4 -12
  100. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +0 -2
  101. package/src/core/primitives/tooltip/tooltipLayer.tsx +0 -2
  102. package/src/core/primitives/types.ts +6 -6
  103. package/src/core/types/flex.ts +3 -3
  104. package/src/core/utils/arrow/arrow.tsx +11 -5
  105. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +0 -2
  106. package/src/core/utils/elementQuery/elementQuery.tsx +0 -2
  107. package/src/core/utils/layer/layer.tsx +3 -3
  108. package/src/core/utils/layer/layerCard.tsx +0 -2
  109. package/src/core/utils/layer/layerProvider.tsx +6 -7
  110. package/src/core/utils/portal/portal.tsx +0 -2
  111. package/src/core/utils/portal/portalProvider.tsx +0 -2
  112. package/src/core/utils/srOnly/srOnly.tsx +2 -9
  113. package/src/core/utils/virtualList/virtualList.tsx +0 -2
  114. package/src/css/__theme/index.ts +16 -0
  115. package/src/css/__theme/lib/contract/buildVarContract.ts +78 -0
  116. package/src/css/__theme/lib/contract/index.ts +4 -0
  117. package/src/css/__theme/lib/contract/types.ts +17 -0
  118. package/src/css/__theme/resolveTheme.ts +865 -0
  119. package/src/css/_responsiveClassName.ts +45 -0
  120. package/src/css/_responsiveStyle.css.ts +34 -0
  121. package/src/css/_style.css.ts +9 -0
  122. package/src/css/components/breadcrumbs/breadcrumbs.css.ts +6 -0
  123. package/src/css/components/breadcrumbs/breadcrumbs.ts +4 -3
  124. package/src/css/components/dialog/dialog.css.ts +81 -0
  125. package/src/css/components/dialog/dialog.ts +12 -12
  126. package/src/css/components/index.ts +6 -0
  127. package/src/css/components/menu/menu.css.ts +14 -0
  128. package/src/css/components/menu/menu.ts +6 -5
  129. package/src/css/components/skeleton/skeleton.css.ts +132 -0
  130. package/src/css/components/skeleton/skeleton.ts +8 -8
  131. package/src/css/components/skeleton/types.ts +9 -3
  132. package/src/css/components/toast/toast.css.ts +16 -0
  133. package/src/css/components/toast/toast.ts +3 -18
  134. package/src/css/components/tree/tree.css.ts +65 -0
  135. package/src/css/components/tree/tree.ts +4 -3
  136. package/src/css/defaultTheme.css.ts +468 -0
  137. package/src/css/index.ts +11 -37
  138. package/src/css/layers.css.ts +9 -0
  139. package/src/css/primitives/_arrow/_arrow.css.ts +68 -0
  140. package/src/css/primitives/_arrow/_arrow.ts +10 -5
  141. package/src/css/primitives/_input/_input.css.ts +258 -0
  142. package/src/css/primitives/_input/input.ts +10 -12
  143. package/src/css/primitives/_input/types.ts +1 -1
  144. package/src/css/primitives/_selectable/_selectable.css.ts +121 -0
  145. package/src/css/primitives/_selectable/selectable.ts +3 -3
  146. package/src/css/primitives/_selectable/types.ts +2 -1
  147. package/src/css/primitives/avatar/avatar.css.ts +175 -0
  148. package/src/css/primitives/avatar/avatar.ts +45 -10
  149. package/src/css/primitives/avatar/types.ts +1 -0
  150. package/src/css/primitives/badge/badge.css.ts +26 -0
  151. package/src/css/primitives/badge/badge.ts +2 -6
  152. package/src/css/primitives/badge/types.ts +4 -3
  153. package/src/css/primitives/box/box.css.ts +19 -0
  154. package/src/css/primitives/box/box.ts +39 -9
  155. package/src/css/primitives/box/types.ts +35 -8
  156. package/src/css/primitives/button/button.css.ts +285 -0
  157. package/src/css/primitives/button/button.ts +10 -7
  158. package/src/css/primitives/button/types.ts +10 -4
  159. package/src/css/primitives/card/card.css.ts +365 -0
  160. package/src/css/primitives/card/card.ts +5 -4
  161. package/src/css/primitives/card/types.ts +2 -3
  162. package/src/css/primitives/checkbox/checkbox.css.ts +193 -0
  163. package/src/css/primitives/checkbox/checkbox.ts +11 -5
  164. package/src/css/primitives/code/code.css.ts +271 -0
  165. package/src/css/primitives/code/code.ts +8 -4
  166. package/src/css/primitives/code/types.ts +3 -2
  167. package/src/css/primitives/container/container.css.ts +4 -0
  168. package/src/css/primitives/container/container.ts +9 -3
  169. package/src/css/primitives/container/types.ts +1 -0
  170. package/src/css/primitives/heading/heading.css.ts +85 -0
  171. package/src/css/primitives/heading/heading.ts +9 -10
  172. package/src/css/primitives/heading/types.ts +3 -2
  173. package/src/css/primitives/index.ts +24 -0
  174. package/src/css/primitives/kbd/kbd.css.ts +16 -0
  175. package/src/css/primitives/kbd/kbd.ts +3 -3
  176. package/src/css/primitives/kbd/types.ts +2 -3
  177. package/src/css/primitives/label/label.css.ts +85 -0
  178. package/src/css/primitives/label/label.ts +9 -4
  179. package/src/css/primitives/label/types.ts +3 -2
  180. package/src/css/primitives/popover/popover.css.ts +6 -0
  181. package/src/css/primitives/popover/popover.ts +6 -5
  182. package/src/css/primitives/radio/radio.css.ts +78 -0
  183. package/src/css/primitives/radio/radio.ts +14 -3
  184. package/src/css/primitives/select/select.css.ts +24 -0
  185. package/src/css/primitives/select/select.ts +3 -3
  186. package/src/css/primitives/spinner/index.ts +1 -0
  187. package/src/css/primitives/spinner/spinner.css.ts +23 -0
  188. package/src/css/primitives/spinner/spinner.ts +7 -5
  189. package/src/css/primitives/spinner/types.ts +4 -0
  190. package/src/css/primitives/stack/stack.css.ts +6 -0
  191. package/src/css/primitives/stack/stack.ts +4 -3
  192. package/src/css/primitives/switch/switch.css.ts +98 -0
  193. package/src/css/primitives/switch/switch.ts +8 -7
  194. package/src/css/primitives/text/text.css.ts +85 -0
  195. package/src/css/primitives/text/text.ts +9 -5
  196. package/src/css/primitives/text/types.ts +3 -2
  197. package/src/css/primitives/textArea/textArea.css.ts +4 -0
  198. package/src/css/primitives/textArea/textArea.ts +2 -2
  199. package/src/css/primitives/textArea/types.ts +4 -2
  200. package/src/css/primitives/textInput/textInput.css.ts +41 -0
  201. package/src/css/primitives/textInput/textInput.ts +5 -5
  202. package/src/css/primitives/textInput/types.ts +4 -2
  203. package/src/css/primitives/tooltip/index.ts +1 -0
  204. package/src/css/primitives/tooltip/tooltip.css.ts +6 -0
  205. package/src/css/primitives/tooltip/tooltip.ts +7 -3
  206. package/src/css/primitives/tooltip/types.ts +4 -0
  207. package/src/css/props/alignItems/alignItems.css.ts +22 -0
  208. package/src/css/props/alignItems/alignItems.ts +8 -0
  209. package/src/css/props/alignItems/index.ts +2 -0
  210. package/src/css/props/alignItems/types.ts +9 -0
  211. package/src/css/props/border/border.css.ts +65 -0
  212. package/src/css/props/border/border.ts +36 -0
  213. package/src/css/props/border/types.ts +13 -0
  214. package/src/css/props/boxSizing/boxSizing.css.ts +11 -0
  215. package/src/css/props/boxSizing/boxSizing.ts +10 -0
  216. package/src/css/{aspects → props}/boxSizing/types.ts +1 -3
  217. package/src/css/props/display/display.css.ts +56 -0
  218. package/src/css/props/display/display.ts +17 -0
  219. package/src/css/props/flex/flex.css.ts +52 -0
  220. package/src/css/props/flex/flex.ts +8 -0
  221. package/src/css/props/flex/types.ts +9 -0
  222. package/src/css/props/flexDirection/flexDirection.css.ts +19 -0
  223. package/src/css/props/flexDirection/flexDirection.ts +8 -0
  224. package/src/css/props/flexDirection/index.ts +2 -0
  225. package/src/css/props/flexDirection/types.ts +9 -0
  226. package/src/css/props/flexWrap/flexWrap.css.ts +16 -0
  227. package/src/css/props/flexWrap/flexWrap.ts +8 -0
  228. package/src/css/props/flexWrap/index.ts +2 -0
  229. package/src/css/props/flexWrap/types.ts +9 -0
  230. package/src/css/props/font/font.css.ts +93 -0
  231. package/src/css/props/font/font.ts +8 -0
  232. package/src/css/props/gap/gap.css.ts +40 -0
  233. package/src/css/props/gap/gap.ts +13 -0
  234. package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +19 -0
  235. package/src/css/props/gridAutoColumns/gridAutoColumns.ts +8 -0
  236. package/src/css/props/gridAutoColumns/index.ts +2 -0
  237. package/src/css/props/gridAutoColumns/types.ts +19 -0
  238. package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts +19 -0
  239. package/src/css/props/gridAutoFlow/gridAutoFlow.ts +8 -0
  240. package/src/css/props/gridAutoFlow/index.ts +2 -0
  241. package/src/css/props/gridAutoFlow/types.ts +13 -0
  242. package/src/css/props/gridAutoRows/gridAutoRows.css.ts +19 -0
  243. package/src/css/props/gridAutoRows/gridAutoRows.ts +8 -0
  244. package/src/css/props/gridAutoRows/index.ts +2 -0
  245. package/src/css/props/gridAutoRows/types.ts +13 -0
  246. package/src/css/props/gridColumn/gridColumn.css.ts +49 -0
  247. package/src/css/props/gridColumn/gridColumn.ts +8 -0
  248. package/src/css/props/gridColumn/index.ts +2 -0
  249. package/src/css/props/gridColumn/types.ts +19 -0
  250. package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts +46 -0
  251. package/src/css/props/gridColumnEnd/gridColumnEnd.ts +8 -0
  252. package/src/css/props/gridColumnEnd/index.ts +2 -0
  253. package/src/css/props/gridColumnEnd/types.ts +19 -0
  254. package/src/css/props/gridColumnStart/gridColumnStart.css.ts +46 -0
  255. package/src/css/props/gridColumnStart/gridColumnStart.ts +11 -0
  256. package/src/css/props/gridColumnStart/index.ts +2 -0
  257. package/src/css/props/gridColumnStart/types.ts +19 -0
  258. package/src/css/props/gridRow/gridRow.css.ts +49 -0
  259. package/src/css/props/gridRow/gridRow.ts +8 -0
  260. package/src/css/props/gridRow/index.ts +2 -0
  261. package/src/css/props/gridRow/types.ts +19 -0
  262. package/src/css/props/gridRowEnd/gridRowEnd.css.ts +46 -0
  263. package/src/css/props/gridRowEnd/gridRowEnd.ts +8 -0
  264. package/src/css/props/gridRowEnd/index.ts +2 -0
  265. package/src/css/props/gridRowEnd/types.ts +19 -0
  266. package/src/css/props/gridRowStart/gridRowStart.css.ts +46 -0
  267. package/src/css/props/gridRowStart/gridRowStart.ts +8 -0
  268. package/src/css/props/gridRowStart/index.ts +2 -0
  269. package/src/css/props/gridRowStart/types.ts +19 -0
  270. package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts +43 -0
  271. package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +8 -0
  272. package/src/css/props/gridTemplateColumns/index.ts +2 -0
  273. package/src/css/props/gridTemplateColumns/types.ts +19 -0
  274. package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts +43 -0
  275. package/src/css/props/gridTemplateRows/gridTemplateRows.ts +8 -0
  276. package/src/css/props/gridTemplateRows/index.ts +2 -0
  277. package/src/css/props/gridTemplateRows/types.ts +19 -0
  278. package/src/css/props/height/height.css.ts +25 -0
  279. package/src/css/props/height/height.ts +8 -0
  280. package/src/css/{aspects → props}/height/index.ts +1 -0
  281. package/src/css/props/height/types.ts +15 -0
  282. package/src/css/{aspects → props}/index.ts +16 -3
  283. package/src/css/props/inset/inset.css.ts +37 -0
  284. package/src/css/props/inset/inset.ts +21 -0
  285. package/src/css/props/justifyContent/index.ts +2 -0
  286. package/src/css/props/justifyContent/justifyContent.css.ts +25 -0
  287. package/src/css/props/justifyContent/justifyContent.ts +8 -0
  288. package/src/css/props/justifyContent/types.ts +15 -0
  289. package/src/css/props/margin/margin.css.ts +117 -0
  290. package/src/css/props/margin/margin.ts +25 -0
  291. package/src/css/props/maxWidth/maxWidth.css.ts +32 -0
  292. package/src/css/props/maxWidth/maxWidth.ts +8 -0
  293. package/src/css/{aspects → props}/maxWidth/types.ts +4 -1
  294. package/src/css/props/minHeight/minHeight.css.ts +13 -0
  295. package/src/css/props/minHeight/minHeight.ts +8 -0
  296. package/src/css/props/minWidth/minWidth.css.ts +25 -0
  297. package/src/css/props/minWidth/minWidth.ts +8 -0
  298. package/src/css/props/outline/index.ts +2 -0
  299. package/src/css/props/outline/outline.css.ts +10 -0
  300. package/src/css/props/outline/outline.ts +8 -0
  301. package/src/css/props/outline/types.ts +7 -0
  302. package/src/css/props/overflow/overflow.css.ts +16 -0
  303. package/src/css/props/overflow/overflow.ts +8 -0
  304. package/src/css/props/overflow/types.ts +17 -0
  305. package/src/css/props/padding/padding.css.ts +87 -0
  306. package/src/css/props/padding/padding.ts +25 -0
  307. package/src/css/props/padding/types.ts +17 -0
  308. package/src/css/props/pointerEvents/pointerEvents.css.ts +13 -0
  309. package/src/css/props/pointerEvents/pointerEvents.ts +8 -0
  310. package/src/css/props/position/position.css.ts +22 -0
  311. package/src/css/props/position/position.ts +8 -0
  312. package/src/css/props/radius/radius.css.ts +21 -0
  313. package/src/css/props/radius/radius.ts +8 -0
  314. package/src/css/props/shadow/shadow.css.ts +23 -0
  315. package/src/css/props/shadow/shadow.ts +8 -0
  316. package/src/css/props/textAlign/textAlign.css.ts +22 -0
  317. package/src/css/props/textAlign/textAlign.ts +8 -0
  318. package/src/css/props/textOverflow/textOverflow.css.ts +13 -0
  319. package/src/css/props/textOverflow/textOverflow.ts +8 -0
  320. package/src/css/{aspects → props}/textOverflow/types.ts +5 -2
  321. package/src/css/{aspects → props}/width/types.ts +1 -1
  322. package/src/css/props/width/width.css.ts +28 -0
  323. package/src/css/props/width/width.ts +8 -0
  324. package/src/css/types.ts +223 -42
  325. package/src/css/util.ts +0 -10
  326. package/src/css/utils/index.ts +1 -0
  327. package/src/css/utils/srOnly/srOnly.css.ts +10 -0
  328. package/src/css/utils/srOnly/srOnly.ts +3 -3
  329. package/src/css/vars.css.ts +676 -0
  330. package/src/theme/v3/buildTheme_v3.ts +7 -2
  331. package/src/theme/v3/defaultFonts.ts +4 -4
  332. package/src/theme/v3/defaultTokens.ts +3 -3
  333. package/src/theme/v3/types.ts +3 -2
  334. package/src/theme/versioning/v3_v2.ts +24 -3
  335. package/dist/_chunks-cjs/buildCommand.cjs +0 -71
  336. package/dist/_chunks-cjs/buildCommand.cjs.map +0 -1
  337. package/dist/cli.cjs +0 -357
  338. package/dist/cli.cjs.map +0 -1
  339. package/dist/cli.d.cts +0 -1
  340. package/dist/ui-system.css +0 -24528
  341. package/dist/ui-system.min.css +0 -1
  342. package/dist/ui-theme.css +0 -1184
  343. package/dist/ui-theme.min.css +0 -1
  344. package/dist/ui.min.css +0 -1
  345. package/src/core/StyleTags.tsx +0 -18
  346. package/src/css/_compileStyle.ts +0 -156
  347. package/src/css/_compileSystem.ts +0 -7
  348. package/src/css/_compileTheme.ts +0 -13
  349. package/src/css/_hash.ts +0 -9
  350. package/src/css/_mergeStyles.ts +0 -24
  351. package/src/css/_resp.ts +0 -31
  352. package/src/css/_responsiveRule.ts +0 -38
  353. package/src/css/_scopeClassName.ts +0 -9
  354. package/src/css/_scopeClassNames.ts +0 -12
  355. package/src/css/_system.style.ts +0 -166
  356. package/src/css/aspects/border/border.style.ts +0 -13
  357. package/src/css/aspects/border/border.ts +0 -14
  358. package/src/css/aspects/border/types.ts +0 -10
  359. package/src/css/aspects/boxSizing/boxSizing.style.ts +0 -10
  360. package/src/css/aspects/boxSizing/boxSizing.ts +0 -8
  361. package/src/css/aspects/display/display.style.ts +0 -34
  362. package/src/css/aspects/display/display.ts +0 -8
  363. package/src/css/aspects/flex/flex.ts +0 -13
  364. package/src/css/aspects/flex/flexAlign.style.ts +0 -12
  365. package/src/css/aspects/flex/flexDirection.style.ts +0 -11
  366. package/src/css/aspects/flex/flexJustify.style.ts +0 -13
  367. package/src/css/aspects/flex/flexWrap.style.ts +0 -10
  368. package/src/css/aspects/flex/types.ts +0 -27
  369. package/src/css/aspects/flexItem/flex.style.ts +0 -22
  370. package/src/css/aspects/flexItem/flexItem.ts +0 -8
  371. package/src/css/aspects/flexItem/index.ts +0 -2
  372. package/src/css/aspects/flexItem/types.ts +0 -25
  373. package/src/css/aspects/font/font.style.ts +0 -83
  374. package/src/css/aspects/font/font.ts +0 -7
  375. package/src/css/aspects/gap/gap.style.ts +0 -21
  376. package/src/css/aspects/gap/gap.ts +0 -8
  377. package/src/css/aspects/grid/grid.ts +0 -14
  378. package/src/css/aspects/grid/gridAutoColumns.style.ts +0 -11
  379. package/src/css/aspects/grid/gridAutoFlow.style.ts +0 -11
  380. package/src/css/aspects/grid/gridAutoRows.style.ts +0 -11
  381. package/src/css/aspects/grid/gridColumns.style.ts +0 -18
  382. package/src/css/aspects/grid/gridRows.style.ts +0 -18
  383. package/src/css/aspects/grid/index.ts +0 -2
  384. package/src/css/aspects/grid/types.ts +0 -25
  385. package/src/css/aspects/gridItem/gridColumn.style.ts +0 -20
  386. package/src/css/aspects/gridItem/gridColumnEnd.style.ts +0 -20
  387. package/src/css/aspects/gridItem/gridColumnStart.style.ts +0 -20
  388. package/src/css/aspects/gridItem/gridItem.ts +0 -15
  389. package/src/css/aspects/gridItem/gridRow.style.ts +0 -20
  390. package/src/css/aspects/gridItem/gridRowEnd.style.ts +0 -20
  391. package/src/css/aspects/gridItem/gridRowStart.style.ts +0 -20
  392. package/src/css/aspects/gridItem/index.ts +0 -2
  393. package/src/css/aspects/gridItem/types.ts +0 -30
  394. package/src/css/aspects/height/height.style.ts +0 -9
  395. package/src/css/aspects/height/height.ts +0 -16
  396. package/src/css/aspects/inset/inset.style.ts +0 -12
  397. package/src/css/aspects/inset/inset.ts +0 -14
  398. package/src/css/aspects/margin/margin.style.ts +0 -56
  399. package/src/css/aspects/margin/margin.ts +0 -16
  400. package/src/css/aspects/maxWidth/maxWidth.style.ts +0 -16
  401. package/src/css/aspects/maxWidth/maxWidth.ts +0 -8
  402. package/src/css/aspects/minHeight/minHeight.style.ts +0 -9
  403. package/src/css/aspects/minHeight/minHeight.ts +0 -8
  404. package/src/css/aspects/minWidth/minWidth.style.ts +0 -13
  405. package/src/css/aspects/minWidth/minWidth.ts +0 -8
  406. package/src/css/aspects/outline/outline.style.ts +0 -9
  407. package/src/css/aspects/overflow/overflow.style.ts +0 -11
  408. package/src/css/aspects/overflow/overflow.ts +0 -12
  409. package/src/css/aspects/overflow/types.ts +0 -11
  410. package/src/css/aspects/padding/padding.style.ts +0 -43
  411. package/src/css/aspects/padding/padding.ts +0 -16
  412. package/src/css/aspects/padding/types.ts +0 -14
  413. package/src/css/aspects/pointerEvents/pointerEvents.style.ts +0 -13
  414. package/src/css/aspects/pointerEvents/pointerEvents.ts +0 -7
  415. package/src/css/aspects/position/position.style.ts +0 -12
  416. package/src/css/aspects/position/position.ts +0 -8
  417. package/src/css/aspects/radius/radius.style.ts +0 -16
  418. package/src/css/aspects/radius/radius.ts +0 -8
  419. package/src/css/aspects/shadow/shadow.style.ts +0 -24
  420. package/src/css/aspects/shadow/shadow.ts +0 -8
  421. package/src/css/aspects/textAlign/textAlign.style.ts +0 -26
  422. package/src/css/aspects/textAlign/textAlign.ts +0 -8
  423. package/src/css/aspects/textOverflow/textOverflow.style.ts +0 -21
  424. package/src/css/aspects/textOverflow/textOverflow.ts +0 -7
  425. package/src/css/aspects/width/width.style.ts +0 -11
  426. package/src/css/aspects/width/width.ts +0 -8
  427. package/src/css/components/breadcrumbs/breadcrumbs.style.ts +0 -9
  428. package/src/css/components/dialog/dialog.style.ts +0 -77
  429. package/src/css/components/menu/menu.style.ts +0 -17
  430. package/src/css/components/skeleton/skeleton.style.ts +0 -104
  431. package/src/css/components/toast/toast.style.ts +0 -20
  432. package/src/css/components/tree/tree.style.ts +0 -39
  433. package/src/css/prefix/constants.ts +0 -6
  434. package/src/css/prefix/index.ts +0 -2
  435. package/src/css/prefix/types.ts +0 -1
  436. package/src/css/primitives/_arrow/_arrow.style.ts +0 -69
  437. package/src/css/primitives/_input/_input.style.ts +0 -235
  438. package/src/css/primitives/_selectable/_selectable.style.ts +0 -129
  439. package/src/css/primitives/avatar/avatar.style.ts +0 -171
  440. package/src/css/primitives/badge/badge.style.ts +0 -21
  441. package/src/css/primitives/box/box.style.ts +0 -22
  442. package/src/css/primitives/button/button.style.ts +0 -275
  443. package/src/css/primitives/card/card.style.ts +0 -295
  444. package/src/css/primitives/checkbox/checkbox.style.ts +0 -178
  445. package/src/css/primitives/code/code.style.ts +0 -61
  446. package/src/css/primitives/container/container.style.ts +0 -10
  447. package/src/css/primitives/heading/heading.style.ts +0 -56
  448. package/src/css/primitives/kbd/kbd.style.ts +0 -19
  449. package/src/css/primitives/label/label.style.ts +0 -52
  450. package/src/css/primitives/popover/popover.style.ts +0 -9
  451. package/src/css/primitives/radio/radio.style.ts +0 -84
  452. package/src/css/primitives/select/select.style.ts +0 -24
  453. package/src/css/primitives/spinner/spinner.style.ts +0 -22
  454. package/src/css/primitives/stack/stack.style.ts +0 -13
  455. package/src/css/primitives/switch/switch.style.ts +0 -102
  456. package/src/css/primitives/text/text.style.ts +0 -65
  457. package/src/css/primitives/textArea/textArea.style.ts +0 -11
  458. package/src/css/primitives/textInput/textInput.style.ts +0 -46
  459. package/src/css/primitives/token/token.style.ts +0 -50
  460. package/src/css/primitives/tooltip/tooltip.style.ts +0 -9
  461. package/src/css/renderColor.ts +0 -31
  462. package/src/css/responsiveRules.ts +0 -18
  463. package/src/css/theme/index.ts +0 -14
  464. package/src/css/theme/lib/contract/buildVarContract.ts +0 -76
  465. package/src/css/theme/lib/contract/index.ts +0 -2
  466. package/src/css/theme/lib/contract/types.ts +0 -15
  467. package/src/css/theme/resolveTheme.ts +0 -863
  468. package/src/css/utils/srOnly/srOnly.style.ts +0 -14
  469. package/src/css/{aspects → props}/border/index.ts +0 -0
  470. package/src/css/{aspects → props}/boxSizing/index.ts +0 -0
  471. package/src/css/{aspects → props}/display/index.ts +0 -0
  472. package/src/css/{aspects → props}/display/types.ts +0 -0
  473. package/src/css/{aspects → props}/flex/index.ts +0 -0
  474. package/src/css/{aspects → props}/font/index.ts +0 -0
  475. package/src/css/{aspects → props}/font/types.ts +0 -0
  476. package/src/css/{aspects → props}/gap/index.ts +0 -0
  477. package/src/css/{aspects → props}/gap/types.ts +0 -0
  478. package/src/css/{aspects → props}/inset/index.ts +0 -0
  479. package/src/css/{aspects → props}/inset/types.ts +0 -0
  480. package/src/css/{aspects → props}/margin/index.ts +0 -0
  481. package/src/css/{aspects → props}/margin/types.ts +2 -2
  482. /package/src/css/{aspects → props}/maxWidth/index.ts +0 -0
  483. /package/src/css/{aspects → props}/minHeight/index.ts +0 -0
  484. /package/src/css/{aspects → props}/minHeight/types.ts +0 -0
  485. /package/src/css/{aspects → props}/minWidth/index.ts +0 -0
  486. /package/src/css/{aspects → props}/minWidth/types.ts +0 -0
  487. /package/src/css/{aspects → props}/overflow/index.ts +0 -0
  488. /package/src/css/{aspects → props}/padding/index.ts +0 -0
  489. /package/src/css/{aspects → props}/pointerEvents/index.ts +0 -0
  490. /package/src/css/{aspects → props}/pointerEvents/types.ts +0 -0
  491. /package/src/css/{aspects → props}/position/index.ts +0 -0
  492. /package/src/css/{aspects → props}/position/types.ts +0 -0
  493. /package/src/css/{aspects → props}/radius/index.ts +0 -0
  494. /package/src/css/{aspects → props}/radius/types.ts +0 -0
  495. /package/src/css/{aspects → props}/shadow/index.ts +0 -0
  496. /package/src/css/{aspects → props}/shadow/types.ts +0 -0
  497. /package/src/css/{aspects → props}/textAlign/index.ts +0 -0
  498. /package/src/css/{aspects → props}/textAlign/types.ts +0 -0
  499. /package/src/css/{aspects → props}/textOverflow/index.ts +0 -0
  500. /package/src/css/{aspects → props}/width/index.ts +0 -0
package/src/css/primitives/button/button.style.ts DELETED
@@ -1,275 +0,0 @@
1
- import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
2
-
3
- import {varNames, vars} from '../../theme'
4
- import type {Style, StyleRules} from '../../types'
5
-
6
- const primitive: StyleRules = {
7
- '.button': {
8
- WebkitFontSmoothing: 'inherit',
9
- appearance: 'none',
10
- font: 'inherit',
11
- outline: 'none',
12
- userSelect: 'none',
13
- textDecoration: 'none',
14
- border: 0,
15
- boxSizing: 'border-box',
16
- padding: 0,
17
- overflow: 'hidden',
18
- margin: 0,
19
- textAlign: 'left',
20
- position: 'relative',
21
- verticalAlign: 'top',
22
- backgroundColor: vars.color.bg,
23
- color: vars.color.fg,
24
- boxShadow: vars.button.boxShadow,
25
- alignItems: 'center',
26
-
27
- nest: {
28
- '&::-moz-focus-inner': {
29
- border: 0,
30
- padding: 0,
31
- },
32
-
33
- '&:focus': {
34
- outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
35
- outlineOffset: vars.button.focusRing.offset,
36
- },
37
-
38
- '&:focus:not(:focus-visible)': {
39
- outline: 'none',
40
- },
41
- },
42
- },
43
-
44
- '.button-loading-box': {
45
- position: 'absolute',
46
- top: 0,
47
- left: 0,
48
- right: 0,
49
- bottom: 0,
50
- backgroundColor: vars.color.bg,
51
- borderRadius: 'inherit',
52
- zIndex: 1,
53
- opacity: 0.8,
54
- },
55
- }
56
-
57
- for (const tone of THEME_COLOR_STATE_TONES) {
58
- const solid = vars.color.solid[tone]
59
- const tinted = vars.color.tinted[tone]
60
-
61
- // mode: default
62
- primitive[`.button[data-mode="default"][data-tone="${tone}"]`] = {
63
- vars: {
64
- [varNames.color.bg]: solid.bg[0],
65
- [varNames.color.border]: solid.border[1],
66
- [varNames.color.code.bg]: solid.bg[1],
67
- [varNames.color.code.fg]: solid.fg[4],
68
- [varNames.color.fg]: solid.fg[0],
69
- [varNames.color.muted.bg]: solid.bg[1],
70
- [varNames.color.muted.fg]: solid.fg[4],
71
- [varNames.button.boxShadow]: 'none',
72
- },
73
-
74
- nest: {
75
- '&:not([data-disabled]):hover': {
76
- vars: {
77
- [varNames.color.bg]: solid.bg[1],
78
- [varNames.color.border]: solid.border[2],
79
- [varNames.color.code.bg]: solid.bg[2],
80
- [varNames.color.code.fg]: solid.fg[4],
81
- [varNames.color.fg]: solid.fg[0],
82
- [varNames.color.muted.bg]: solid.bg[2],
83
- [varNames.color.muted.fg]: solid.fg[4],
84
- },
85
- },
86
-
87
- '&:not([data-disabled]):active': {
88
- vars: {
89
- [varNames.color.bg]: solid.bg[2],
90
- [varNames.color.border]: solid.border[3],
91
- [varNames.color.code.bg]: solid.bg[3],
92
- [varNames.color.code.fg]: solid.fg[4],
93
- [varNames.color.fg]: solid.fg[0],
94
- [varNames.color.muted.bg]: solid.bg[3],
95
- [varNames.color.muted.fg]: solid.fg[4],
96
- },
97
- },
98
-
99
- '&:not([data-disabled])[data-selected]': {
100
- vars: {
101
- [varNames.color.bg]: solid.bg[2],
102
- [varNames.color.border]: solid.border[3],
103
- [varNames.color.code.bg]: solid.bg[3],
104
- [varNames.color.code.fg]: solid.fg[4],
105
- [varNames.color.fg]: solid.fg[0],
106
- [varNames.color.muted.bg]: solid.bg[3],
107
- [varNames.color.muted.fg]: solid.fg[4],
108
- },
109
- },
110
-
111
- '&[data-disabled]': {
112
- vars: {
113
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
114
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
115
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
116
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
117
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
118
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
119
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
120
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
121
- [varNames.color.bg]: vars.color.tinted.default.bg[1],
122
- [varNames.color.border]: vars.color.tinted.default.border[1],
123
- [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
124
- [varNames.color.code.fg]: vars.color.tinted.default.border[4],
125
- [varNames.color.fg]: vars.color.tinted.default.border[4],
126
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
127
- [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
128
- },
129
- },
130
- },
131
- }
132
-
133
- // mode: ghost
134
- primitive[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
135
- vars: {
136
- [varNames.color.bg]: tinted.bg[1],
137
- [varNames.color.border]: tinted.border[1],
138
- [varNames.color.fg]: tinted.fg[2],
139
- [varNames.color.code.bg]: tinted.bg[2],
140
- [varNames.color.code.fg]: tinted.fg[4],
141
- [varNames.color.muted.bg]: tinted.bg[2],
142
- [varNames.color.muted.fg]: tinted.fg[4],
143
- [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
144
- },
145
-
146
- nest: {
147
- '&:not([data-disabled]):hover': {
148
- vars: {
149
- [varNames.color.bg]: tinted.bg[2],
150
- [varNames.color.border]: tinted.border[2],
151
- [varNames.color.code.bg]: tinted.bg[3],
152
- [varNames.color.code.fg]: tinted.fg[3],
153
- [varNames.color.fg]: tinted.fg[1],
154
- [varNames.color.muted.bg]: tinted.bg[3],
155
- [varNames.color.muted.fg]: tinted.fg[3],
156
- },
157
- },
158
-
159
- '&:not([data-disabled]):active': {
160
- vars: {
161
- [varNames.color.bg]: tinted.bg[3],
162
- [varNames.color.border]: tinted.border[3],
163
- [varNames.color.code.bg]: tinted.bg[4],
164
- [varNames.color.code.fg]: tinted.fg[3],
165
- [varNames.color.fg]: tinted.fg[1],
166
- [varNames.color.muted.bg]: tinted.bg[4],
167
- [varNames.color.muted.fg]: tinted.fg[3],
168
- [varNames.button.boxShadow]:
169
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
170
- },
171
- },
172
-
173
- '&:not([data-disabled])[data-selected]': {
174
- vars: {
175
- [varNames.color.bg]: tinted.bg[3],
176
- [varNames.color.border]: tinted.border[3],
177
- [varNames.color.code.bg]: tinted.bg[4],
178
- [varNames.color.code.fg]: tinted.fg[3],
179
- [varNames.color.fg]: tinted.fg[1],
180
- [varNames.color.muted.bg]: tinted.bg[4],
181
- [varNames.color.muted.fg]: tinted.fg[3],
182
- [varNames.button.boxShadow]:
183
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
184
- },
185
- },
186
-
187
- '&[data-disabled]': {
188
- vars: {
189
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
190
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
191
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
192
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
193
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
194
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
195
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
196
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
197
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
198
- [varNames.color.border]: vars.color.tinted.default.border[0],
199
- [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
200
- [varNames.color.code.fg]: vars.color.tinted.default.border[3],
201
- [varNames.color.fg]: vars.color.tinted.default.border[4],
202
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
203
- [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
204
- },
205
- },
206
- },
207
- }
208
-
209
- // mode: bleed
210
- primitive[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
211
- boxShadow: 'none',
212
- vars: {
213
- [varNames.color.bg]: tinted.bg[0],
214
- [varNames.color.border]: tinted.border[1],
215
- [varNames.color.fg]: tinted.fg[2],
216
- [varNames.color.muted.bg]: tinted.bg[1],
217
- [varNames.color.muted.fg]: tinted.fg[4],
218
- [varNames.button.boxShadow]: 'none',
219
- },
220
-
221
- nest: {
222
- '&:not([data-disabled]):hover': {
223
- vars: {
224
- [varNames.color.bg]: tinted.bg[1],
225
- [varNames.color.border]: tinted.border[2],
226
- [varNames.color.fg]: tinted.fg[1],
227
- [varNames.color.muted.bg]: tinted.bg[2],
228
- [varNames.color.muted.fg]: tinted.fg[3],
229
- },
230
- },
231
-
232
- '&:not([data-disabled]):active': {
233
- vars: {
234
- [varNames.color.bg]: tinted.bg[2],
235
- [varNames.color.border]: tinted.border[3],
236
- [varNames.color.fg]: tinted.fg[1],
237
- [varNames.color.muted.bg]: tinted.bg[3],
238
- [varNames.color.muted.fg]: tinted.fg[3],
239
- },
240
- },
241
-
242
- '&:not([data-disabled])[data-selected]': {
243
- vars: {
244
- [varNames.color.bg]: tinted.bg[2],
245
- [varNames.color.border]: tinted.border[3],
246
- [varNames.color.fg]: tinted.fg[1],
247
- [varNames.color.muted.bg]: tinted.bg[3],
248
- [varNames.color.muted.fg]: tinted.fg[3],
249
- },
250
- },
251
-
252
- '&[data-disabled]': {
253
- vars: {
254
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
255
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
256
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
257
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
258
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
259
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
260
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
261
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
262
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
263
- [varNames.color.border]: vars.color.tinted.default.border[0],
264
- [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
265
- [varNames.color.code.fg]: vars.color.tinted.default.border[3],
266
- [varNames.color.fg]: vars.color.tinted.default.border[4],
267
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
268
- [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
269
- },
270
- },
271
- },
272
- }
273
- }
274
-
275
- export const buttonStyle: Style = {layers: {primitive}}
package/src/css/primitives/card/card.style.ts DELETED
@@ -1,295 +0,0 @@
1
- import {
2
- AVATAR_COLORS,
3
- COLOR_VARIANTS,
4
- THEME_COLOR_CARD_TONES as CARD_TONES,
5
- THEME_COLOR_SCHEMES as SCHEMES,
6
- THEME_COLOR_STATE_TONES as STATE_TONES,
7
- type ThemeColorCardToneKey as CardTone,
8
- type ThemeColorSchemeKey as Scheme,
9
- } from '@sanity/ui/theme'
10
-
11
- import {_assign} from '../../_assign'
12
- import {varNames, vars} from '../../theme'
13
- import type {Properties, Style, StyleRules} from '../../types'
14
-
15
- type ColorCardVarNames = typeof varNames.color | (typeof varNames.color)[CardTone]
16
- type ColorCardVars = typeof vars.color | (typeof vars.color)[Scheme][CardTone]
17
-
18
- const primitive: StyleRules = {
19
- '.card': {
20
- backgroundColor: vars.color.bg,
21
- color: vars.color.fg,
22
-
23
- vars: {
24
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
25
- [varNames.color.border]: vars.color.tinted.default.border[1],
26
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
27
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
28
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
29
- },
30
-
31
- nest: {
32
- 'button&': {
33
- WebkitFontSmoothing: 'inherit',
34
- appearance: 'none',
35
- outline: 'none',
36
- font: 'inherit',
37
- textAlign: 'inherit',
38
- border: 'none',
39
- // @ts-expect-error - TODO: fix
40
- width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
41
- },
42
-
43
- 'a&': {
44
- // border: 'none',
45
- outline: 'none',
46
- textDecoration: 'none',
47
- },
48
-
49
- 'pre&': {
50
- font: 'inherit',
51
- whiteSpace: 'inherit',
52
- },
53
-
54
- '&[data-checkered]': {
55
- backgroundSize: `${vars.space[3]} ${vars.space[3]}` as string,
56
- backgroundPosition: 'top left',
57
- backgroundImage:
58
- `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)` as string,
59
- },
60
-
61
- 'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
62
- vars: {
63
- [varNames.color.bg]: vars.color.tinted.default.bg[1],
64
- [varNames.color.border]: vars.color.tinted.default.border[3],
65
- [varNames.color.fg]: vars.color.tinted.default.fg[1],
66
- [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
67
- [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
68
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
69
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
70
- },
71
- },
72
-
73
- 'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
74
- vars: {
75
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
76
- [varNames.color.border]: vars.color.tinted.default.border[4],
77
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
78
- [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
79
- [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
80
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
81
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
82
- },
83
- },
84
-
85
- // toggle button
86
- 'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
87
- {
88
- vars: {
89
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
90
- [varNames.color.border]: vars.color.tinted.default.border[4],
91
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
92
- [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
93
- [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
94
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
95
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
96
- },
97
- },
98
-
99
- 'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
100
- vars: {
101
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
102
- [varNames.color.border]: vars.color.tinted.default.border[4],
103
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
104
- [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
105
- [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
106
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
107
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
108
- },
109
- },
110
-
111
- 'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
112
- vars: {
113
- [varNames.color.bg]: vars.color.solid.primary.bg[0],
114
- [varNames.color.border]: vars.color.solid.primary.border[1],
115
- [varNames.color.fg]: vars.color.solid.primary.fg[0],
116
- [varNames.color.code.bg]: vars.color.solid.primary.bg[1],
117
- [varNames.color.code.fg]: vars.color.solid.primary.fg[3],
118
- [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
119
- [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
120
- },
121
- },
122
-
123
- 'a&[data-disabled], button&[data-disabled]': {
124
- vars: {
125
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
126
- [varNames.color.border]: vars.color.tinted.default.border[1],
127
- [varNames.color.fg]: vars.color.tinted.default.border[3],
128
- [varNames.color.code.bg]: vars.color.tinted.default.bg[0],
129
- [varNames.color.code.fg]: vars.color.tinted.default.border[2],
130
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
131
- [varNames.color.muted.fg]: vars.color.tinted.default.border[2],
132
- },
133
- },
134
- },
135
- },
136
- }
137
-
138
- // scope variables to scheme
139
- for (const scheme of SCHEMES) {
140
- const customProps: Properties['vars'] = {}
141
-
142
- const props: Properties = {
143
- colorScheme: scheme,
144
- vars: customProps,
145
- }
146
-
147
- for (const tone of CARD_TONES) {
148
- const _varNames = varNames.color[tone]
149
- const _vars = vars.color[scheme][tone]
150
-
151
- _assignToneProps(customProps, _varNames, _vars)
152
- }
153
-
154
- primitive[`.card.${scheme}`] = props
155
- }
156
-
157
- // scope variables to tone
158
- for (const tone of CARD_TONES) {
159
- const _varNames = varNames.color
160
- const _vars = vars.color[tone]
161
-
162
- const customProps: Properties['vars'] = {}
163
- const props: Properties = {vars: customProps}
164
-
165
- _assignToneProps(customProps, _varNames, _vars)
166
-
167
- ////////////////////////////////////////////////////////////////////////////////////////////////
168
- // Legacy `--card` variables
169
- ////////////////////////////////////////////////////////////////////////////////////////////////
170
- _assign(customProps, {
171
- '--card-bg-color': vars.color.bg,
172
- '--card-bg2-color': vars.color.muted.bg,
173
- '--card-border-color': vars.color.border,
174
- '--card-code-bg-color': vars.color.code.bg,
175
- '--card-code-fg-color': vars.color.code.fg,
176
- '--card-fg-color': vars.color.fg,
177
- '--card-focus-ring-color': vars.color.focusRing,
178
- '--card-hairline-soft-color': vars.color.tinted.default.border[1],
179
- '--card-hairline-hard-color': vars.color.tinted.default.border[2],
180
- '--card-icon-color': vars.color.fg,
181
- '--card-kbd-bg-color': vars.color.muted.bg,
182
- '--card-kbd-border-color': vars.color.tinted.default.border[1],
183
- '--card-kbd-fg-color': vars.color.muted.fg,
184
- '--card-link-color': vars.color.link.fg,
185
- '--card-link-fg-color': vars.color.link.fg,
186
- '--card-muted-bg-color': vars.color.muted.bg,
187
- '--card-muted-fg-color': vars.color.muted.fg,
188
- '--card-shadow-outline-color': vars.color.shadow.outline,
189
- '--card-shadow-umbra-color': vars.color.shadow.umbra,
190
- '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
191
- '--card-shadow-ambient-color': vars.color.shadow.ambient,
192
- '--card-skeleton-from-color': vars.color.skeleton.from,
193
- '--card-skeleton-to-color': vars.color.skeleton.to,
194
- })
195
-
196
- // console.log('toneProps', toneProps)
197
-
198
- primitive[`.card.${tone}`] = props
199
- }
200
-
201
- export const cardStyle: Style = {layers: {primitive}}
202
-
203
- function _assignToneProps(
204
- props: NonNullable<Properties['vars']>,
205
- _varNames: ColorCardVarNames,
206
- _vars: ColorCardVars,
207
- ) {
208
- for (const hue of AVATAR_COLORS) {
209
- props[_varNames.avatar[hue].bg] = _vars.avatar[hue].bg
210
- props[_varNames.avatar[hue].fg] = _vars.avatar[hue].fg
211
- }
212
-
213
- _assign(props, {
214
- [_varNames.backdrop]: _vars.backdrop,
215
-
216
- [_varNames.code.fg]: _vars.code.fg,
217
- [_varNames.code.bg]: _vars.code.bg,
218
-
219
- [_varNames.code.token.atrule]: _vars.code.token.atrule,
220
- [_varNames.code.token.attrName]: _vars.code.token.attrName,
221
- [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
222
- [_varNames.code.token.attribute]: _vars.code.token.attribute,
223
- [_varNames.code.token.boolean]: _vars.code.token.boolean,
224
- [_varNames.code.token.builtin]: _vars.code.token.builtin,
225
- [_varNames.code.token.cdata]: _vars.code.token.cdata,
226
- [_varNames.code.token.char]: _vars.code.token.char,
227
- [_varNames.code.token.class]: _vars.code.token.class,
228
- [_varNames.code.token.className]: _vars.code.token.className,
229
- [_varNames.code.token.comment]: _vars.code.token.comment,
230
- [_varNames.code.token.constant]: _vars.code.token.constant,
231
- [_varNames.code.token.deleted]: _vars.code.token.deleted,
232
- [_varNames.code.token.doctype]: _vars.code.token.doctype,
233
- [_varNames.code.token.entity]: _vars.code.token.entity,
234
- [_varNames.code.token.function]: _vars.code.token.function,
235
- [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
236
- [_varNames.code.token.id]: _vars.code.token.id,
237
- [_varNames.code.token.important]: _vars.code.token.important,
238
- [_varNames.code.token.inserted]: _vars.code.token.inserted,
239
- [_varNames.code.token.keyword]: _vars.code.token.keyword,
240
- [_varNames.code.token.number]: _vars.code.token.number,
241
- [_varNames.code.token.operator]: _vars.code.token.operator,
242
- [_varNames.code.token.prolog]: _vars.code.token.prolog,
243
- [_varNames.code.token.property]: _vars.code.token.property,
244
- [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
245
- [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
246
- [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
247
- [_varNames.code.token.regex]: _vars.code.token.regex,
248
- [_varNames.code.token.selector]: _vars.code.token.selector,
249
- [_varNames.code.token.string]: _vars.code.token.string,
250
- [_varNames.code.token.symbol]: _vars.code.token.symbol,
251
- [_varNames.code.token.tag]: _vars.code.token.tag,
252
- [_varNames.code.token.unit]: _vars.code.token.unit,
253
- [_varNames.code.token.url]: _vars.code.token.url,
254
- [_varNames.code.token.variable]: _vars.code.token.variable,
255
-
256
- [_varNames.focusRing]: _vars.focusRing,
257
-
258
- [_varNames.link.fg]: _vars.link.fg,
259
-
260
- [_varNames.shadow.outline]: _vars.shadow.outline,
261
- [_varNames.shadow.umbra]: _vars.shadow.umbra,
262
- [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
263
- [_varNames.shadow.ambient]: _vars.shadow.ambient,
264
-
265
- [_varNames.skeleton.from]: _vars.skeleton.from,
266
- [_varNames.skeleton.to]: _vars.skeleton.to,
267
- })
268
-
269
- for (const variant of COLOR_VARIANTS) {
270
- for (const elementTone of STATE_TONES) {
271
- const __varNames = _varNames[variant][elementTone]
272
- const __vars = _vars[variant][elementTone]
273
-
274
- _assign(props, {
275
- [__varNames.bg[0]]: __vars.bg[0],
276
- [__varNames.bg[1]]: __vars.bg[1],
277
- [__varNames.bg[2]]: __vars.bg[2],
278
- [__varNames.bg[3]]: __vars.bg[3],
279
- [__varNames.bg[4]]: __vars.bg[4],
280
-
281
- [__varNames.border[0]]: __vars.border[0],
282
- [__varNames.border[1]]: __vars.border[1],
283
- [__varNames.border[2]]: __vars.border[2],
284
- [__varNames.border[3]]: __vars.border[3],
285
- [__varNames.border[4]]: __vars.border[4],
286
-
287
- [__varNames.fg[0]]: __vars.fg[0],
288
- [__varNames.fg[1]]: __vars.fg[1],
289
- [__varNames.fg[2]]: __vars.fg[2],
290
- [__varNames.fg[3]]: __vars.fg[3],
291
- [__varNames.fg[4]]: __vars.fg[4],
292
- })
293
- }
294
- }
295
- }