@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-main.fcc0d83b33

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 (384) hide show
  1. package/dist/lib/browser/index.mjs +762 -2803
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +762 -2803
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/plugin/node-cjs/main.css +1561 -0
  8. package/dist/plugin/node-cjs/main.css.map +7 -0
  9. package/dist/plugin/node-cjs/meta.json +1 -1
  10. package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs +137 -0
  11. package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map +7 -0
  12. package/dist/plugin/node-esm/main.css +1561 -0
  13. package/dist/plugin/node-esm/main.css.map +7 -0
  14. package/dist/plugin/node-esm/meta.json +1 -1
  15. package/dist/plugin/node-esm/plugins/ThemePlugin.mjs +105 -0
  16. package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +7 -0
  17. package/dist/types/src/Theme.stories.d.ts +27 -0
  18. package/dist/types/src/Theme.stories.d.ts.map +1 -0
  19. package/dist/types/src/defs.d.ts +21 -0
  20. package/dist/types/src/defs.d.ts.map +1 -0
  21. package/dist/types/src/fragments/density.d.ts +4 -0
  22. package/dist/types/src/fragments/density.d.ts.map +1 -0
  23. package/dist/types/src/fragments/disabled.d.ts.map +1 -0
  24. package/dist/types/src/fragments/hover.d.ts +10 -0
  25. package/dist/types/src/fragments/hover.d.ts.map +1 -0
  26. package/dist/types/src/fragments/index.d.ts +5 -0
  27. package/dist/types/src/fragments/index.d.ts.map +1 -0
  28. package/dist/types/src/fragments/text.d.ts +2 -0
  29. package/dist/types/src/fragments/text.d.ts.map +1 -0
  30. package/dist/types/src/index.d.ts +3 -10
  31. package/dist/types/src/index.d.ts.map +1 -1
  32. package/dist/types/src/plugins/ThemePlugin.d.ts +16 -0
  33. package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -0
  34. package/dist/types/src/plugins/dark-mode.d.ts +1 -0
  35. package/dist/types/src/plugins/dark-mode.d.ts.map +1 -0
  36. package/dist/types/src/theme/components/avatar.d.ts.map +1 -0
  37. package/dist/types/src/theme/components/breadcrumb.d.ts.map +1 -0
  38. package/dist/types/src/theme/components/button.d.ts +15 -0
  39. package/dist/types/src/theme/components/button.d.ts.map +1 -0
  40. package/dist/types/src/theme/components/card.d.ts +12 -0
  41. package/dist/types/src/theme/components/card.d.ts.map +1 -0
  42. package/dist/types/src/{styles → theme}/components/dialog.d.ts +2 -0
  43. package/dist/types/src/theme/components/dialog.d.ts.map +1 -0
  44. package/dist/types/src/theme/components/focus.d.ts +6 -0
  45. package/dist/types/src/theme/components/focus.d.ts.map +1 -0
  46. package/dist/types/src/{styles → theme}/components/icon-button.d.ts +1 -0
  47. package/dist/types/src/theme/components/icon-button.d.ts.map +1 -0
  48. package/dist/types/src/{styles → theme}/components/icon.d.ts +3 -0
  49. package/dist/types/src/theme/components/icon.d.ts.map +1 -0
  50. package/dist/types/src/{styles → theme}/components/index.d.ts +4 -1
  51. package/dist/types/src/theme/components/index.d.ts.map +1 -0
  52. package/dist/types/src/{styles → theme}/components/input.d.ts +31 -27
  53. package/dist/types/src/theme/components/input.d.ts.map +1 -0
  54. package/dist/types/src/theme/components/link.d.ts.map +1 -0
  55. package/dist/types/src/theme/components/list.d.ts.map +1 -0
  56. package/dist/types/src/{styles → theme}/components/main.d.ts +2 -7
  57. package/dist/types/src/theme/components/main.d.ts.map +1 -0
  58. package/dist/types/src/{styles → theme}/components/menu.d.ts +1 -1
  59. package/dist/types/src/theme/components/menu.d.ts.map +1 -0
  60. package/dist/types/src/{styles → theme}/components/message.d.ts +1 -0
  61. package/dist/types/src/theme/components/message.d.ts.map +1 -0
  62. package/dist/types/src/{styles → theme}/components/popover.d.ts +1 -1
  63. package/dist/types/src/theme/components/popover.d.ts.map +1 -0
  64. package/dist/types/src/theme/components/scroll-area.d.ts +32 -0
  65. package/dist/types/src/theme/components/scroll-area.d.ts.map +1 -0
  66. package/dist/types/src/theme/components/select.d.ts.map +1 -0
  67. package/dist/types/src/theme/components/separator.d.ts.map +1 -0
  68. package/dist/types/src/theme/components/skeleton.d.ts +7 -0
  69. package/dist/types/src/theme/components/skeleton.d.ts.map +1 -0
  70. package/dist/types/src/theme/components/splitter.d.ts +4 -0
  71. package/dist/types/src/theme/components/splitter.d.ts.map +1 -0
  72. package/dist/types/src/{styles → theme}/components/status.d.ts +1 -1
  73. package/dist/types/src/theme/components/status.d.ts.map +1 -0
  74. package/dist/types/src/theme/components/tag.d.ts.map +1 -0
  75. package/dist/types/src/theme/components/toast.d.ts.map +1 -0
  76. package/dist/types/src/theme/components/toolbar.d.ts +11 -0
  77. package/dist/types/src/theme/components/toolbar.d.ts.map +1 -0
  78. package/dist/types/src/theme/components/tooltip.d.ts.map +1 -0
  79. package/dist/types/src/theme/components/treegrid.d.ts.map +1 -0
  80. package/dist/types/src/theme/index.d.ts +4 -0
  81. package/dist/types/src/theme/index.d.ts.map +1 -0
  82. package/dist/types/src/theme/primitives/column.d.ts +29 -0
  83. package/dist/types/src/theme/primitives/column.d.ts.map +1 -0
  84. package/dist/types/src/theme/primitives/index.d.ts +3 -0
  85. package/dist/types/src/theme/primitives/index.d.ts.map +1 -0
  86. package/dist/types/src/theme/primitives/panel.d.ts +13 -0
  87. package/dist/types/src/theme/primitives/panel.d.ts.map +1 -0
  88. package/dist/types/src/theme/theme.d.ts +5 -0
  89. package/dist/types/src/theme/theme.d.ts.map +1 -0
  90. package/dist/types/src/{styles/fragments → util}/elevation.d.ts +0 -6
  91. package/dist/types/src/util/elevation.d.ts.map +1 -0
  92. package/dist/types/src/util/hash-styles.d.ts +8 -5
  93. package/dist/types/src/util/hash-styles.d.ts.map +1 -1
  94. package/dist/types/src/util/index.d.ts +3 -0
  95. package/dist/types/src/util/index.d.ts.map +1 -1
  96. package/dist/types/src/util/mx.d.ts +56 -0
  97. package/dist/types/src/util/mx.d.ts.map +1 -1
  98. package/dist/types/src/util/size.d.ts +27 -0
  99. package/dist/types/src/util/size.d.ts.map +1 -0
  100. package/dist/types/src/util/valence.d.ts +4 -0
  101. package/dist/types/src/util/valence.d.ts.map +1 -0
  102. package/dist/types/tsconfig.tsbuildinfo +1 -1
  103. package/package.json +25 -35
  104. package/src/Theme.stories.tsx +224 -0
  105. package/src/css/base/base.css +43 -0
  106. package/src/{styles/layers → css/base}/typography.css +3 -5
  107. package/src/{styles/layers → css/components}/button.css +23 -14
  108. package/src/{styles/layers → css/components}/checkbox.css +12 -8
  109. package/src/{styles/layers → css/components}/dialog.css +16 -15
  110. package/src/{styles/layers/focus-ring.css → css/components/focus.css} +60 -41
  111. package/src/css/components/icon.css +9 -0
  112. package/src/css/components/link.css +9 -0
  113. package/src/css/components/panel.css +117 -0
  114. package/src/css/components/scrollbar.css +24 -0
  115. package/src/css/components/selected.css +30 -0
  116. package/src/css/components/surface.css +34 -0
  117. package/src/css/components/tag.css +132 -0
  118. package/src/css/components/text.css +124 -0
  119. package/src/css/integrations/codemirror.css +34 -0
  120. package/src/css/integrations/tldraw.css +14 -0
  121. package/src/css/layout/main.css +205 -0
  122. package/src/{styles/layers → css/layout}/native.css +6 -4
  123. package/src/css/layout/positioning.css +19 -0
  124. package/src/{styles/layers → css/layout}/size.css +129 -108
  125. package/src/css/theme/animation.css +260 -0
  126. package/src/css/theme/border.css +23 -0
  127. package/src/css/theme/palette.css +36 -0
  128. package/src/css/theme/semantic.css +116 -0
  129. package/src/css/theme/spacing.css +147 -0
  130. package/src/css/theme/styles.css +145 -0
  131. package/src/css/theme/text.css +37 -0
  132. package/src/css/utilities.css +118 -0
  133. package/src/defs.ts +48 -0
  134. package/src/fragments/AUDIT.md +57 -0
  135. package/src/fragments/density.ts +16 -0
  136. package/src/fragments/hover.ts +18 -0
  137. package/src/fragments/index.ts +10 -0
  138. package/src/fragments/text.ts +6 -0
  139. package/src/index.ts +3 -14
  140. package/src/main.css +87 -0
  141. package/src/plugins/ThemePlugin.ts +125 -0
  142. package/src/plugins/dark-mode.ts +22 -0
  143. package/src/plugins/main.css +45 -0
  144. package/src/{styles → theme}/components/avatar.ts +12 -13
  145. package/src/theme/components/button.ts +48 -0
  146. package/src/theme/components/card.ts +102 -0
  147. package/src/{styles → theme}/components/dialog.ts +19 -10
  148. package/src/theme/components/focus.ts +33 -0
  149. package/src/{styles → theme}/components/icon-button.ts +6 -5
  150. package/src/theme/components/icon.ts +28 -0
  151. package/src/{styles → theme}/components/index.ts +4 -1
  152. package/src/theme/components/input.ts +171 -0
  153. package/src/{styles → theme}/components/link.ts +3 -4
  154. package/src/{styles → theme}/components/list.ts +5 -5
  155. package/src/{styles → theme}/components/main.ts +2 -6
  156. package/src/{styles → theme}/components/menu.ts +11 -21
  157. package/src/{styles → theme}/components/message.ts +11 -7
  158. package/src/{styles → theme}/components/popover.ts +13 -12
  159. package/src/theme/components/scroll-area.ts +115 -0
  160. package/src/{styles → theme}/components/select.ts +8 -16
  161. package/src/{styles → theme}/components/separator.ts +3 -3
  162. package/src/theme/components/skeleton.ts +23 -0
  163. package/src/theme/components/splitter.ts +20 -0
  164. package/src/{styles → theme}/components/status.ts +7 -7
  165. package/src/{styles → theme}/components/tag.ts +1 -1
  166. package/src/{styles → theme}/components/toast.ts +6 -8
  167. package/src/theme/components/toolbar.ts +35 -0
  168. package/src/{styles → theme}/components/tooltip.ts +4 -6
  169. package/src/{styles → theme}/components/treegrid.ts +9 -9
  170. package/src/{styles → theme}/index.ts +2 -2
  171. package/src/theme/primitives/column.ts +71 -0
  172. package/src/theme/primitives/index.ts +6 -0
  173. package/src/theme/primitives/panel.ts +43 -0
  174. package/src/{styles → theme}/theme.ts +27 -9
  175. package/src/typings.d.ts +3 -1
  176. package/src/{styles/fragments → util}/elevation.ts +6 -8
  177. package/src/util/hash-styles.ts +118 -98
  178. package/src/util/index.ts +3 -0
  179. package/src/util/mx.ts +165 -43
  180. package/src/util/size.ts +103 -0
  181. package/src/util/valence.ts +33 -0
  182. package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs +0 -79
  183. package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs.map +0 -7
  184. package/dist/plugin/node-cjs/chunk-ZVALPM6U.cjs +0 -1619
  185. package/dist/plugin/node-cjs/chunk-ZVALPM6U.cjs.map +0 -7
  186. package/dist/plugin/node-cjs/config/tailwind.cjs +0 -29
  187. package/dist/plugin/node-cjs/config/tailwind.cjs.map +0 -7
  188. package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs +0 -90
  189. package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs.map +0 -7
  190. package/dist/plugin/node-cjs/plugins/plugin.cjs +0 -124
  191. package/dist/plugin/node-cjs/plugins/plugin.cjs.map +0 -7
  192. package/dist/plugin/node-cjs/theme.css +0 -1418
  193. package/dist/plugin/node-cjs/theme.css.map +0 -7
  194. package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs +0 -49
  195. package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs.map +0 -7
  196. package/dist/plugin/node-esm/chunk-HJE6EZWE.mjs +0 -1614
  197. package/dist/plugin/node-esm/chunk-HJE6EZWE.mjs.map +0 -7
  198. package/dist/plugin/node-esm/config/tailwind.mjs +0 -8
  199. package/dist/plugin/node-esm/config/tailwind.mjs.map +0 -7
  200. package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs +0 -63
  201. package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs.map +0 -7
  202. package/dist/plugin/node-esm/plugins/plugin.mjs +0 -98
  203. package/dist/plugin/node-esm/plugins/plugin.mjs.map +0 -7
  204. package/dist/plugin/node-esm/theme.css +0 -1418
  205. package/dist/plugin/node-esm/theme.css.map +0 -7
  206. package/dist/types/src/Tokens.stories.d.ts +0 -10
  207. package/dist/types/src/Tokens.stories.d.ts.map +0 -1
  208. package/dist/types/src/config/index.d.ts +0 -3
  209. package/dist/types/src/config/index.d.ts.map +0 -1
  210. package/dist/types/src/config/tailwind.d.ts +0 -9
  211. package/dist/types/src/config/tailwind.d.ts.map +0 -1
  212. package/dist/types/src/config/tokens/alias-colors.d.ts +0 -21
  213. package/dist/types/src/config/tokens/alias-colors.d.ts.map +0 -1
  214. package/dist/types/src/config/tokens/index.d.ts +0 -486
  215. package/dist/types/src/config/tokens/index.d.ts.map +0 -1
  216. package/dist/types/src/config/tokens/lengths.d.ts +0 -139
  217. package/dist/types/src/config/tokens/lengths.d.ts.map +0 -1
  218. package/dist/types/src/config/tokens/physical-colors.d.ts +0 -23
  219. package/dist/types/src/config/tokens/physical-colors.d.ts.map +0 -1
  220. package/dist/types/src/config/tokens/semantic-colors.d.ts +0 -187
  221. package/dist/types/src/config/tokens/semantic-colors.d.ts.map +0 -1
  222. package/dist/types/src/config/tokens/sememes-calls.d.ts +0 -3
  223. package/dist/types/src/config/tokens/sememes-calls.d.ts.map +0 -1
  224. package/dist/types/src/config/tokens/sememes-codemirror.d.ts +0 -43
  225. package/dist/types/src/config/tokens/sememes-codemirror.d.ts.map +0 -1
  226. package/dist/types/src/config/tokens/sememes-hue.d.ts +0 -4
  227. package/dist/types/src/config/tokens/sememes-hue.d.ts.map +0 -1
  228. package/dist/types/src/config/tokens/sememes-sheet.d.ts +0 -58
  229. package/dist/types/src/config/tokens/sememes-sheet.d.ts.map +0 -1
  230. package/dist/types/src/config/tokens/sememes-system.d.ts +0 -99
  231. package/dist/types/src/config/tokens/sememes-system.d.ts.map +0 -1
  232. package/dist/types/src/config/tokens/sizes.d.ts +0 -7
  233. package/dist/types/src/config/tokens/sizes.d.ts.map +0 -1
  234. package/dist/types/src/config/tokens/types.d.ts +0 -5
  235. package/dist/types/src/config/tokens/types.d.ts.map +0 -1
  236. package/dist/types/src/plugins/esbuild-plugin.d.ts +0 -9
  237. package/dist/types/src/plugins/esbuild-plugin.d.ts.map +0 -1
  238. package/dist/types/src/plugins/plugin.d.ts +0 -20
  239. package/dist/types/src/plugins/plugin.d.ts.map +0 -1
  240. package/dist/types/src/plugins/resolveContent.d.ts +0 -2
  241. package/dist/types/src/plugins/resolveContent.d.ts.map +0 -1
  242. package/dist/types/src/styles/components/anchored-overflow.d.ts +0 -6
  243. package/dist/types/src/styles/components/anchored-overflow.d.ts.map +0 -1
  244. package/dist/types/src/styles/components/avatar.d.ts.map +0 -1
  245. package/dist/types/src/styles/components/breadcrumb.d.ts.map +0 -1
  246. package/dist/types/src/styles/components/button.d.ts +0 -19
  247. package/dist/types/src/styles/components/button.d.ts.map +0 -1
  248. package/dist/types/src/styles/components/dialog.d.ts.map +0 -1
  249. package/dist/types/src/styles/components/icon-button.d.ts.map +0 -1
  250. package/dist/types/src/styles/components/icon.d.ts.map +0 -1
  251. package/dist/types/src/styles/components/index.d.ts.map +0 -1
  252. package/dist/types/src/styles/components/input.d.ts.map +0 -1
  253. package/dist/types/src/styles/components/link.d.ts.map +0 -1
  254. package/dist/types/src/styles/components/list.d.ts.map +0 -1
  255. package/dist/types/src/styles/components/main.d.ts.map +0 -1
  256. package/dist/types/src/styles/components/menu.d.ts.map +0 -1
  257. package/dist/types/src/styles/components/message.d.ts.map +0 -1
  258. package/dist/types/src/styles/components/popover.d.ts.map +0 -1
  259. package/dist/types/src/styles/components/scroll-area.d.ts +0 -9
  260. package/dist/types/src/styles/components/scroll-area.d.ts.map +0 -1
  261. package/dist/types/src/styles/components/select.d.ts.map +0 -1
  262. package/dist/types/src/styles/components/separator.d.ts.map +0 -1
  263. package/dist/types/src/styles/components/status.d.ts.map +0 -1
  264. package/dist/types/src/styles/components/tag.d.ts.map +0 -1
  265. package/dist/types/src/styles/components/toast.d.ts.map +0 -1
  266. package/dist/types/src/styles/components/toolbar.d.ts +0 -11
  267. package/dist/types/src/styles/components/toolbar.d.ts.map +0 -1
  268. package/dist/types/src/styles/components/tooltip.d.ts.map +0 -1
  269. package/dist/types/src/styles/components/treegrid.d.ts.map +0 -1
  270. package/dist/types/src/styles/fragments/density.d.ts +0 -13
  271. package/dist/types/src/styles/fragments/density.d.ts.map +0 -1
  272. package/dist/types/src/styles/fragments/dimension.d.ts +0 -5
  273. package/dist/types/src/styles/fragments/dimension.d.ts.map +0 -1
  274. package/dist/types/src/styles/fragments/disabled.d.ts.map +0 -1
  275. package/dist/types/src/styles/fragments/elevation.d.ts.map +0 -1
  276. package/dist/types/src/styles/fragments/focus.d.ts +0 -6
  277. package/dist/types/src/styles/fragments/focus.d.ts.map +0 -1
  278. package/dist/types/src/styles/fragments/group.d.ts +0 -5
  279. package/dist/types/src/styles/fragments/group.d.ts.map +0 -1
  280. package/dist/types/src/styles/fragments/hover.d.ts +0 -17
  281. package/dist/types/src/styles/fragments/hover.d.ts.map +0 -1
  282. package/dist/types/src/styles/fragments/index.d.ts +0 -17
  283. package/dist/types/src/styles/fragments/index.d.ts.map +0 -1
  284. package/dist/types/src/styles/fragments/layout.d.ts +0 -3
  285. package/dist/types/src/styles/fragments/layout.d.ts.map +0 -1
  286. package/dist/types/src/styles/fragments/motion.d.ts +0 -2
  287. package/dist/types/src/styles/fragments/motion.d.ts.map +0 -1
  288. package/dist/types/src/styles/fragments/ornament.d.ts +0 -5
  289. package/dist/types/src/styles/fragments/ornament.d.ts.map +0 -1
  290. package/dist/types/src/styles/fragments/selected.d.ts +0 -13
  291. package/dist/types/src/styles/fragments/selected.d.ts.map +0 -1
  292. package/dist/types/src/styles/fragments/shimmer.d.ts +0 -3
  293. package/dist/types/src/styles/fragments/shimmer.d.ts.map +0 -1
  294. package/dist/types/src/styles/fragments/size.d.ts +0 -9
  295. package/dist/types/src/styles/fragments/size.d.ts.map +0 -1
  296. package/dist/types/src/styles/fragments/surface.d.ts +0 -9
  297. package/dist/types/src/styles/fragments/surface.d.ts.map +0 -1
  298. package/dist/types/src/styles/fragments/text.d.ts +0 -7
  299. package/dist/types/src/styles/fragments/text.d.ts.map +0 -1
  300. package/dist/types/src/styles/fragments/valence.d.ts +0 -13
  301. package/dist/types/src/styles/fragments/valence.d.ts.map +0 -1
  302. package/dist/types/src/styles/index.d.ts +0 -4
  303. package/dist/types/src/styles/index.d.ts.map +0 -1
  304. package/dist/types/src/styles/theme.d.ts +0 -5
  305. package/dist/types/src/styles/theme.d.ts.map +0 -1
  306. package/dist/types/src/tailwind.d.ts +0 -3
  307. package/dist/types/src/tailwind.d.ts.map +0 -1
  308. package/dist/types/src/types.d.ts +0 -3
  309. package/dist/types/src/types.d.ts.map +0 -1
  310. package/dist/types/src/util/withLogical.d.ts +0 -164
  311. package/dist/types/src/util/withLogical.d.ts.map +0 -1
  312. package/src/Tokens.stories.tsx +0 -88
  313. package/src/config/index.ts +0 -6
  314. package/src/config/tailwind.ts +0 -264
  315. package/src/config/tokens/alias-colors.ts +0 -39
  316. package/src/config/tokens/index.ts +0 -92
  317. package/src/config/tokens/lengths.ts +0 -97
  318. package/src/config/tokens/physical-colors.ts +0 -125
  319. package/src/config/tokens/semantic-colors.ts +0 -27
  320. package/src/config/tokens/sememes-calls.ts +0 -17
  321. package/src/config/tokens/sememes-codemirror.ts +0 -50
  322. package/src/config/tokens/sememes-hue.ts +0 -54
  323. package/src/config/tokens/sememes-sheet.ts +0 -62
  324. package/src/config/tokens/sememes-system.ts +0 -302
  325. package/src/config/tokens/sizes.ts +0 -10
  326. package/src/config/tokens/types.ts +0 -9
  327. package/src/docs/theme.drawio.svg +0 -635
  328. package/src/plugins/esbuild-plugin.ts +0 -65
  329. package/src/plugins/plugin.ts +0 -130
  330. package/src/plugins/resolveContent.ts +0 -51
  331. package/src/styles/components/README.md +0 -6
  332. package/src/styles/components/anchored-overflow.ts +0 -20
  333. package/src/styles/components/button.ts +0 -48
  334. package/src/styles/components/icon.ts +0 -19
  335. package/src/styles/components/input.ts +0 -177
  336. package/src/styles/components/scroll-area.ts +0 -43
  337. package/src/styles/components/toolbar.ts +0 -29
  338. package/src/styles/fragments/density.ts +0 -17
  339. package/src/styles/fragments/dimension.ts +0 -8
  340. package/src/styles/fragments/focus.ts +0 -16
  341. package/src/styles/fragments/group.ts +0 -12
  342. package/src/styles/fragments/hover.ts +0 -25
  343. package/src/styles/fragments/index.ts +0 -20
  344. package/src/styles/fragments/layout.ts +0 -7
  345. package/src/styles/fragments/motion.ts +0 -6
  346. package/src/styles/fragments/ornament.ts +0 -10
  347. package/src/styles/fragments/selected.ts +0 -45
  348. package/src/styles/fragments/shimmer.ts +0 -9
  349. package/src/styles/fragments/size.ts +0 -117
  350. package/src/styles/fragments/surface.ts +0 -29
  351. package/src/styles/fragments/text.ts +0 -12
  352. package/src/styles/fragments/valence.ts +0 -46
  353. package/src/styles/layers/README.md +0 -15
  354. package/src/styles/layers/anchored-overflow.css +0 -9
  355. package/src/styles/layers/animation.css +0 -17
  356. package/src/styles/layers/attention.css +0 -8
  357. package/src/styles/layers/base.css +0 -25
  358. package/src/styles/layers/can-scroll.css +0 -26
  359. package/src/styles/layers/drag-preview.css +0 -18
  360. package/src/styles/layers/hues.css +0 -110
  361. package/src/styles/layers/index.css +0 -26
  362. package/src/styles/layers/main.css +0 -227
  363. package/src/styles/layers/positioning.css +0 -23
  364. package/src/styles/layers/surfaces.css +0 -31
  365. package/src/styles/layers/tag.css +0 -132
  366. package/src/styles/layers/tldraw.css +0 -91
  367. package/src/styles/layers/tokens.css +0 -46
  368. package/src/tailwind.ts +0 -7
  369. package/src/theme.css +0 -9
  370. package/src/types.ts +0 -7
  371. package/src/util/withLogical.ts +0 -114
  372. /package/dist/types/src/{styles/fragments → fragments}/disabled.d.ts +0 -0
  373. /package/dist/types/src/{styles → theme}/components/avatar.d.ts +0 -0
  374. /package/dist/types/src/{styles → theme}/components/breadcrumb.d.ts +0 -0
  375. /package/dist/types/src/{styles → theme}/components/link.d.ts +0 -0
  376. /package/dist/types/src/{styles → theme}/components/list.d.ts +0 -0
  377. /package/dist/types/src/{styles → theme}/components/select.d.ts +0 -0
  378. /package/dist/types/src/{styles → theme}/components/separator.d.ts +0 -0
  379. /package/dist/types/src/{styles → theme}/components/tag.d.ts +0 -0
  380. /package/dist/types/src/{styles → theme}/components/toast.d.ts +0 -0
  381. /package/dist/types/src/{styles → theme}/components/tooltip.d.ts +0 -0
  382. /package/dist/types/src/{styles → theme}/components/treegrid.d.ts +0 -0
  383. /package/src/{styles/fragments → fragments}/disabled.ts +0 -0
  384. /package/src/{styles → theme}/components/breadcrumb.ts +0 -0
package/src/plugins/ThemePlugin.ts ADDED
@@ -0,0 +1,125 @@
1
+ //
2
+ // Copyright 2022 DXOS.org
3
+ //
4
+
5
+ /* eslint-disable no-console */
6
+
7
+ import tailwindcss from '@tailwindcss/postcss';
8
+ import autoprefixer from 'autoprefixer';
9
+ import { existsSync, readFileSync } from 'node:fs';
10
+ import { dirname, resolve } from 'node:path';
11
+ import postcssImport from 'postcss-import';
12
+ import postcssNesting from 'postcss-nesting';
13
+ import { type HtmlTagDescriptor, type Plugin, type UserConfig } from 'vite';
14
+
15
+ /**
16
+ * CSS cascade layer order.
17
+ * Must be established before any stylesheets load so that Tailwind's own @layer declarations don't override our ordering. Exported so consuming
18
+ */
19
+ export const LAYER_ORDER = [
20
+ 'properties',
21
+ 'theme',
22
+ 'dx-tokens',
23
+ 'user-tokens',
24
+ 'base',
25
+ 'tw-base',
26
+ 'dx-base',
27
+ 'components',
28
+ 'tw-components',
29
+ 'dx-components',
30
+ 'utilities',
31
+ ] as const;
32
+
33
+ const ROOT = '../../../../';
34
+
35
+ export type ThemePluginOptions = {
36
+ srcCssPath?: string;
37
+ virtualFileId?: string;
38
+ verbose?: boolean;
39
+ };
40
+
41
+ /**
42
+ * Vite plugin to configure theme.
43
+ */
44
+ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
45
+ // Prefer source CSS if available (monorepo dev), fall back to dist for installed package.
46
+ const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/main.css');
47
+ const distThemePath = resolve(import.meta.dirname, '../main.css');
48
+ const isMonorepo = existsSync(srcThemePath);
49
+
50
+ // Static assets shipped via "files": ["src"] in package.json.
51
+ // Both monorepo and installed package resolve to the same src/plugins/ directory.
52
+ const pluginsDir = resolve(import.meta.dirname, ROOT, 'src/plugins');
53
+ const darkModeScriptPath = resolve(pluginsDir, 'dark-mode.ts');
54
+ const mainCssPath = resolve(pluginsDir, 'main.css');
55
+
56
+ const config: ThemePluginOptions = {
57
+ srcCssPath: isMonorepo ? srcThemePath : distThemePath,
58
+ virtualFileId: '@dxos-theme',
59
+ ...options,
60
+ };
61
+
62
+ // Derive project root from the source location so Tailwind scans all packages.
63
+ const base = isMonorepo ? resolve(dirname(srcThemePath), ROOT) : undefined;
64
+
65
+ if (process.env.DEBUG || options.verbose) {
66
+ console.log('ThemePlugin:\n', JSON.stringify(config, null, 2));
67
+ }
68
+
69
+ return {
70
+ name: 'vite-plugin-dxos-ui-theme',
71
+ config: (): UserConfig => {
72
+ return {
73
+ css: {
74
+ postcss: {
75
+ plugins: [
76
+ // Handles @import statements in CSS.
77
+ postcssImport(),
78
+ // Processes CSS nesting syntax.
79
+ postcssNesting(),
80
+ // Processes Tailwind directives and generates utilities from scanned content.
81
+ // base points to project root so all packages are scanned (not just ui-theme).
82
+ tailwindcss(base !== undefined ? { base } : {}),
83
+ // Adds vendor prefixes.
84
+ autoprefixer,
85
+ ],
86
+ },
87
+ },
88
+ };
89
+ },
90
+ resolveId: (id) => {
91
+ if (id === config.virtualFileId) {
92
+ return config.srcCssPath;
93
+ }
94
+ },
95
+ transformIndexHtml: () => {
96
+ // Apply .dark class to <html> synchronously before any scripts run, so that
97
+ // the critical CSS html.dark rules apply on the very first paint.
98
+ const darkModeTag: HtmlTagDescriptor = {
99
+ tag: 'script',
100
+ attrs: { 'data-dxos-theme': '' },
101
+ injectTo: 'head-prepend',
102
+ children: readFileSync(darkModeScriptPath, 'utf-8'),
103
+ };
104
+
105
+ // Establish cascade layer order before any stylesheet loads.
106
+ const layersTag: HtmlTagDescriptor = {
107
+ tag: 'style',
108
+ attrs: { 'data-dxos-layers': '' },
109
+ children: `@layer ${LAYER_ORDER.join(', ')};`,
110
+ injectTo: 'head-prepend',
111
+ };
112
+
113
+ // Critical styles: font sizing, overscroll, color fallbacks.
114
+ // Loaded from critical.css to keep styles maintainable and out of index.html.
115
+ const criticalTag: HtmlTagDescriptor = {
116
+ tag: 'style',
117
+ attrs: { 'data-dxos-critical': '' },
118
+ injectTo: 'head-prepend',
119
+ children: readFileSync(mainCssPath, 'utf-8'),
120
+ };
121
+
122
+ return [darkModeTag, layersTag, criticalTag];
123
+ },
124
+ };
125
+ };
package/src/plugins/dark-mode.ts ADDED
@@ -0,0 +1,22 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ // @ts-nocheck - This file is injected as a raw JS string into <head> by ThemePlugin (readFileSync).
6
+ // It runs in the browser, not Node.js — browser globals (window, document) are intentional.
7
+ // Must remain valid JavaScript (no TypeScript-specific syntax).
8
+
9
+ // Applies the .dark class to <html> synchronously before any other scripts run so that the
10
+ // critical CSS html.dark rules take effect on the very first paint. Continues to track changes.
11
+ // NOTE: Theme switching may be overridden in Chrome via:
12
+ // chrome://settings/appearance and chrome://flags/#enable-force-dark
13
+ (() => {
14
+ const query = window.matchMedia('(prefers-color-scheme: dark)');
15
+ const applyTheme = (dark) => {
16
+ document.documentElement.classList[dark ? 'add' : 'remove']('dark');
17
+ };
18
+ applyTheme(query.matches);
19
+ query.addEventListener('change', (event) => {
20
+ applyTheme(event.matches);
21
+ });
22
+ })();
package/src/plugins/main.css ADDED
@@ -0,0 +1,45 @@
1
+ /*
2
+ * Critical styles injected into <head> by the Vite ThemePlugin before any stylesheets load.
3
+ * Ensures text is readable and layout is stable on the very first paint.
4
+ */
5
+
6
+ /* Base font size: larger default for touch devices, smaller for precision pointers. */
7
+ html {
8
+ font-size: 20px;
9
+ }
10
+ @media (pointer: fine) {
11
+ html {
12
+ font-size: 16px;
13
+ }
14
+ }
15
+
16
+ /* Prevent overscroll bounce and ensure full viewport height. */
17
+ html,
18
+ body {
19
+ overscroll-behavior: none;
20
+ -webkit-overflow-scrolling: touch;
21
+ }
22
+ body {
23
+ height: 100vh;
24
+ }
25
+
26
+ /* Pre-CSS color fallbacks so text is readable before and during Vite HMR. */
27
+ /* Values are intentionally kept in sync with @theme tokens in semantic.css. */
28
+ :root {
29
+ color-scheme: light;
30
+ }
31
+ html {
32
+ color: oklch(0.145 0 0);
33
+ background-color: oklch(0.985 0 0);
34
+ }
35
+ html.dark {
36
+ color-scheme: dark;
37
+ color: oklch(0.985 0 0);
38
+ background-color: oklch(0.145 0 0);
39
+ }
40
+ @media (prefers-color-scheme: dark) {
41
+ html:not(.dark) {
42
+ color: oklch(0.985 0 0);
43
+ background-color: oklch(0.145 0 0);
44
+ }
45
+ }
package/src/{styles → theme}/components/avatar.ts RENAMED
@@ -4,8 +4,7 @@
4
4
 
5
5
  import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
6
6
 
7
- import { mx } from '../../util';
8
- import { descriptionText, getSize, getSizeHeight } from '../fragments';
7
+ import { mx, getSize, getHeight } from '../../util';
9
8
 
10
9
  export type AvatarStyleProps = Partial<{
11
10
  size: Size;
@@ -20,34 +19,34 @@ export const avatarRoot: ComponentFunction<AvatarStyleProps> = ({ size = 10, inG
20
19
  mx(
21
20
  'relative inline-flex shrink-0',
22
21
  getSize(size),
23
- inGroup && (size === 'px' || size <= 3 ? '-mie-1' : '-mie-2'),
22
+ inGroup && (size === 'px' || size <= 3 ? '-mr-1' : '-mr-2'),
24
23
  ...etc,
25
24
  );
26
25
 
27
26
  export const avatarLabel: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
28
27
 
29
28
  export const avatarDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
30
- mx(descriptionText, srOnly && 'sr-only', ...etc);
29
+ mx('text-description', srOnly && 'sr-only', ...etc);
31
30
 
32
31
  export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
33
- mx('is-full bs-full bg-[--surface-bg]', variant === 'circle' ? 'rounded-full' : 'rounded', ...etc);
32
+ mx('h-full w-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
34
33
 
35
34
  export const avatarStatusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
36
35
  mx(
37
- 'absolute block-end-0 inline-end-0',
36
+ 'absolute bottom-0 end-0',
38
37
  getSize(size),
39
38
  status === 'inactive'
40
- ? 'text-amber-350 dark:text-amber-250'
39
+ ? 'text-amber-400 dark:text-amber-300'
41
40
  : status === 'active'
42
- ? 'text-emerald-350 dark:text-emerald-250'
43
- : 'text-neutral-350 dark:text-neutral-250',
41
+ ? 'text-emerald-400 dark:text-emerald-300'
42
+ : 'text-neutral-400 dark:text-neutral-300',
44
43
  ...etc,
45
44
  );
46
45
 
47
46
  export const avatarRing: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
48
47
  mx(
49
48
  'absolute inset-0 border-2',
50
- variant === 'circle' ? 'rounded-full' : 'rounded',
49
+ variant === 'circle' ? 'rounded-full' : 'rounded-sm',
51
50
  status === 'current'
52
51
  ? 'border-primary-400 dark:border-primary-500'
53
52
  : status === 'active'
@@ -74,13 +73,13 @@ export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, sr
74
73
  mx(
75
74
  srOnly
76
75
  ? 'sr-only'
77
- : 'rounded-full truncate text-sm leading-none plb-1 pli-2 relative z-[1] flex items-center justify-center',
78
- size && getSizeHeight(size),
76
+ : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
77
+ size && getHeight(size),
79
78
  ...etc,
80
79
  );
81
80
 
82
81
  export const avatarGroupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
83
- mx(srOnly ? 'sr-only' : descriptionText, ...etc);
82
+ mx(srOnly ? 'sr-only' : 'text-description', ...etc);
84
83
 
85
84
  export const avatarTheme: Theme<AvatarStyleProps> = {
86
85
  root: avatarRoot,
package/src/theme/components/button.ts ADDED
@@ -0,0 +1,48 @@
1
+ //
2
+ // Copyright 2022 DXOS.org
3
+ //
4
+
5
+ import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
6
+
7
+ import { ghostHover } from '../../fragments';
8
+ import { mx } from '../../util';
9
+
10
+ export const primaryButtonColors =
11
+ 'text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
12
+
13
+ export const staticDefaultButtonColors = 'bg-input-surface text-input-surface-text';
14
+
15
+ export const defaultButtonColors = mx(
16
+ staticDefaultButtonColors,
17
+ 'data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
18
+ );
19
+
20
+ export const ghostButtonColors = mx(
21
+ ghostHover,
22
+ 'hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
23
+ );
24
+
25
+ export type ButtonStyleProps = Partial<{
26
+ inGroup?: boolean;
27
+ textWrap?: boolean;
28
+ density: Density;
29
+ elevation: Elevation;
30
+ disabled: boolean;
31
+ variant: 'default' | 'primary' | 'ghost' | 'outline';
32
+ }>;
33
+
34
+ const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
35
+ return mx('dx-button dx-focus-ring group [&_span]:truncate', ...etc);
36
+ };
37
+
38
+ const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
39
+ return mx(
40
+ 'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
41
+ ...etc,
42
+ );
43
+ };
44
+
45
+ export const buttonTheme: Theme<ButtonStyleProps> = {
46
+ root: buttonRoot,
47
+ group: buttonGroup,
48
+ };
package/src/theme/components/card.ts ADDED
@@ -0,0 +1,102 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
6
+
7
+ import { mx } from '../../util';
8
+
9
+ export type CardStyleProps = {
10
+ border?: boolean;
11
+ fullWidth?: boolean;
12
+ srOnly?: boolean;
13
+ variant?: 'default' | 'subtitle' | 'description';
14
+ density?: Density;
15
+ truncate?: boolean;
16
+ padding?: boolean;
17
+ };
18
+
19
+ const cardRoot: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
20
+ mx(
21
+ 'dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
22
+ border &&
23
+ 'bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator',
24
+ fullWidth && 'max-w-none!',
25
+ ...etc,
26
+ );
27
+
28
+ const cardToolbar: ComponentFunction<CardStyleProps> = (_, ...etc) =>
29
+ mx(
30
+ 'dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]',
31
+ ...etc,
32
+ );
33
+
34
+ const cardTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
35
+
36
+ const cardContent: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
37
+ mx('dx-card__content contents pb-1 last:pb-0', ...etc);
38
+
39
+ const cardHeading: ComponentFunction<CardStyleProps> = ({ variant = 'default' }, ...etc) =>
40
+ mx(
41
+ 'dx-card__heading',
42
+ variant === 'default' && 'py-1',
43
+ variant === 'subtitle' && 'py-2 text-xs text-description font-medium uppercase',
44
+ ...etc,
45
+ );
46
+
47
+ const cardText: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
48
+ mx(
49
+ 'dx-card__text items-center overflow-hidden',
50
+ variant === 'default' && 'py-1',
51
+ variant === 'description' && 'py-1.5 text-description',
52
+ ...etc,
53
+ );
54
+
55
+ const cardTextSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate }, ...etc) =>
56
+ mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
57
+
58
+ const cardPoster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
59
+ mx('dx-card__poster col-span-3 max-h-[200px]', ...etc);
60
+
61
+ const cardPosterIcon: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
62
+ mx('dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]', ...etc);
63
+
64
+ const cardAction: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
65
+ mx('dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden', ...etc);
66
+
67
+ const cardActionLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
68
+ mx('dx-card__action-label min-w-0 flex-1 truncate', ...etc);
69
+
70
+ const cardLink: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
71
+ mx('dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!', ...etc);
72
+
73
+ const cardLinkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
74
+ mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
75
+
76
+ const cardRow: ComponentFunction<CardStyleProps> = (_, ...etc) =>
77
+ mx('dx-card__row col-span-3 grid grid-cols-subgrid', ...etc);
78
+
79
+ const cardIconBlock: ComponentFunction<CardStyleProps> = ({ padding }, ...etc) =>
80
+ mx(
81
+ 'dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center',
82
+ padding && '[&>*]:p-1',
83
+ ...etc,
84
+ );
85
+
86
+ export const cardTheme: Theme<CardStyleProps> = {
87
+ root: cardRoot,
88
+ toolbar: cardToolbar,
89
+ title: cardTitle,
90
+ content: cardContent,
91
+ row: cardRow,
92
+ heading: cardHeading,
93
+ text: cardText,
94
+ 'text-span': cardTextSpan,
95
+ poster: cardPoster,
96
+ 'poster-icon': cardPosterIcon,
97
+ action: cardAction,
98
+ 'action-label': cardActionLabel,
99
+ link: cardLink,
100
+ 'link-label': cardLinkLabel,
101
+ 'icon-block': cardIconBlock,
102
+ };
package/src/{styles → theme}/components/dialog.ts RENAMED
@@ -5,15 +5,15 @@
5
5
  import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
6
6
 
7
7
  import { mx } from '../../util';
8
- import { descriptionText } from '../fragments';
8
+ import { withColumn } from '../primitives/column';
9
9
 
10
10
  export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
11
11
 
12
12
  const sizeMap: Record<DialogSize, string> = {
13
- sm: 'md:!max-is-[24rem]',
14
- md: 'md:!max-is-[32rem]',
15
- lg: 'md:!max-is-[40rem]',
16
- xl: 'md:!max-is-[60rem]',
13
+ sm: 'md:max-w-[24rem]',
14
+ md: 'md:max-w-[32rem]!',
15
+ lg: 'md:max-w-[40rem]!',
16
+ xl: 'md:max-w-[60rem]!',
17
17
  };
18
18
 
19
19
  export type DialogStyleProps = {
@@ -25,28 +25,37 @@ export type DialogStyleProps = {
25
25
 
26
26
  export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
27
27
 
28
- export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size }, ...etc) => {
28
+ export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
29
29
  return mx(
30
- '@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-2',
30
+ '@container',
31
+ 'dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4',
31
32
  !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
32
- size && sizeMap[size],
33
+ sizeMap[size],
33
34
  ...etc,
34
35
  );
35
36
  };
36
37
 
37
38
  export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
38
- mx('dx-dialog__header flex items-center justify-between', ...etc);
39
+ mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
40
+
41
+ export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
42
+ mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
43
+
44
+ export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
45
+ mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', withColumn.center(), ...etc);
39
46
 
40
47
  export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
41
48
  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
42
49
 
43
50
  export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
44
- mx('dx-dialog__description', descriptionText, srOnly && 'sr-only', ...etc);
51
+ mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
45
52
 
46
53
  export const dialogTheme: Theme<DialogStyleProps> = {
47
54
  overlay: dialogOverlay,
48
55
  content: dialogContent,
49
56
  header: dialogHeader,
57
+ body: dialogBody,
58
+ actionbar: dialogActionBar,
50
59
  title: dialogTitle,
51
60
  description: dialogDescription,
52
61
  };
package/src/theme/components/focus.ts ADDED
@@ -0,0 +1,33 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ import { type ComponentFunction, type Theme } from '@dxos/ui-types';
6
+
7
+ import { mx } from '../../util';
8
+
9
+ export type FocusStyleProps = {
10
+ border?: boolean;
11
+ };
12
+
13
+ /**
14
+ * Focus ring styles shared by Focus.Group and Focus.Item.
15
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
16
+ * (inset box-shadow alone is obscured by children with backgrounds).
17
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
18
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
19
+ */
20
+ const focusRing: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
21
+ mx(
22
+ 'dx-ring-pseudo outline-hidden',
23
+ 'focus:after:ring-neutral-focus-indicator',
24
+ 'data-[focus-state=active]:after:ring-neutral-focus-indicator',
25
+ 'data-[focus-state=error]:after:ring-rose-500',
26
+ border && 'border border-separator',
27
+ ...etc,
28
+ );
29
+
30
+ export const focusTheme: Theme<FocusStyleProps> = {
31
+ group: focusRing,
32
+ item: focusRing,
33
+ };
package/src/{styles → theme}/components/icon-button.ts RENAMED
@@ -5,14 +5,15 @@
5
5
  import type { ComponentFunction, Theme } from '@dxos/ui-types';
6
6
 
7
7
  import { mx } from '../../util';
8
-
9
8
  import { type ButtonStyleProps } from './button';
10
9
 
11
- export type IconButtonStyleProps = ButtonStyleProps & { iconOnly?: boolean };
10
+ export type IconButtonStyleProps = ButtonStyleProps & {
11
+ iconOnly?: boolean;
12
+ square?: boolean;
13
+ };
12
14
 
13
- // TODO(burdon): Gap/font size should depend on density.
14
- export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly }, ...etc) => {
15
- return mx('gap-2', iconOnly && 'p-iconButtonPadding min-bs-0', ...etc);
15
+ export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
16
+ return mx('px-1.5', !iconOnly && 'gap-2', square && 'aspect-square', ...etc);
16
17
  };
17
18
 
18
19
  export const iconButtonTheme: Theme<IconButtonStyleProps> = {
package/src/theme/components/icon.ts ADDED
@@ -0,0 +1,28 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
6
+
7
+ import { getSize, mx } from '../../util';
8
+
9
+ export type IconStyleProps = {
10
+ size?: Size;
11
+ };
12
+
13
+ /**
14
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
15
+ */
16
+ export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
17
+ return mx(
18
+ 'shrink-0 text-[var(--icons-color,currentColor)]',
19
+ size
20
+ ? getSize(size)
21
+ : '[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]',
22
+ etc,
23
+ );
24
+ };
25
+
26
+ export const iconTheme: Theme<IconStyleProps> = {
27
+ root: iconRoot,
28
+ };
package/src/{styles → theme}/components/index.ts RENAMED
@@ -2,11 +2,12 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- export * from './anchored-overflow';
6
5
  export * from './avatar';
7
6
  export * from './breadcrumb';
7
+ export * from './card';
8
8
  export * from './button';
9
9
  export * from './dialog';
10
+ export * from './focus';
10
11
  export * from './icon';
11
12
  export * from './icon-button';
12
13
  export * from './input';
@@ -18,7 +19,9 @@ export * from './message';
18
19
  export * from './popover';
19
20
  export * from './scroll-area';
20
21
  export * from './select';
22
+ export * from './splitter';
21
23
  export * from './separator';
24
+ export * from './skeleton';
22
25
  export * from './status';
23
26
  export * from './tag';
24
27
  export * from './toast';