@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
@@ -0,0 +1,1561 @@
1
+ @layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
2
+ @import "tailwindcss";
3
+ @import "@fontsource-variable/jetbrains-mono/wght-italic.css";
4
+ @import "@fontsource-variable/jetbrains-mono/wght.css";
5
+ @import "@fontsource/poiret-one";
6
+
7
+ /* src/css/theme/animation.css */
8
+ @theme { --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1); @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } --animate-fade-in: fade-in 200ms ease-out; --animate-fade-out: fade-out 400ms ease-out; @keyframes slide-down-and-fade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } } @keyframes slide-left-and-fade { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-up-and-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-right-and-fade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); @keyframes toast-hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-slide-in-right { 0% { transform: translateX(calc(100% + 1rem)); } 100% { transform: translateX(0); } } @keyframes toast-slide-in-bottom { 0% { transform: translateY(calc(100% + 1rem)); } 100% { transform: translateY(0); } } @keyframes toast-swipe-out { 0% { transform: translateX(var(--radix-toast-swipe-end-x)); } 100% { transform: translateX(calc(100% + 1rem)); } } --animate-toast-hide: toast-hide 100ms ease-in forwards; --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards; @keyframes slide-down { from { height: 0px; } to { height: var(--radix-accordion-content-height); } } @keyframes slide-up { from { height: var(--radix-accordion-content-height); } to { height: 0px; } } --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1); --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1); @keyframes shimmer-loop { 100% { transform: translateX(100%); } } --animate-shimmer: shimmer-loop 2s infinite; @keyframes halo-pulse { 0% { opacity: 0.3; } 5% { opacity: 1; } 100% { opacity: 0.3; } } --animate-halo-pulse: halo-pulse 2s ease-out infinite; @keyframes progress-indeterminate { 0% { left: 0; width: 0%; } 25% { left: 25%; width: 50%; } 75% { left: 50%; width: 100%; } 100% { left: 100%; width: 0%; } } --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite; @keyframes trail { to { offset-distance: 100%; } } @keyframes trail-offset { 0% { offset-distance: 50%; } 100% { offset-distance: 150%; } } --animate-trail: trail 6s linear infinite; --animate-trail-offset: trail-offset 6s linear infinite; --animate-spin-slow: spin 3s linear infinite; @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } --animate-blink: blink 1s step-start infinite; }
9
+ @keyframes shimmer-text {
10
+ from {
11
+ mask-position-x: 100%;
12
+ -webkit-mask-position-x: 100%;
13
+ }
14
+ to {
15
+ mask-position-x: -100%;
16
+ -webkit-mask-position-x: -100%;
17
+ }
18
+ }
19
+ @media (prefers-reduced-motion: reduce) {
20
+ .animate-halo-pulse,
21
+ .animate-spin-slow,
22
+ .animate-trail,
23
+ .animate-trail-offset,
24
+ .animate-shimmer {
25
+ animation: none;
26
+ }
27
+ }
28
+
29
+ /* src/css/theme/border.css */
30
+ @theme { --ring-offset-width-focus-offset: var(--dx-focus-offset); --ring-width-focus-line: var(--dx-focus-line); --ring-width-hair-line: var(--dx-hair-line); --ring-width-thick-line: var(--dx-thick-line); --ring-width-no-line: var(--dx-no-line); --border-width-landmark-line: var(--dx-landmark-line); --radius-none: 0; --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3); }
31
+
32
+ /* src/css/theme/palette.css */
33
+ @theme { --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); --color-composer-100: rgb(5 40 61); --color-composer-200: rgb(10 75 105); --color-composer-300: rgb(1 122 183); --color-composer-400: rgb(6 197 253); }
34
+
35
+ /* src/css/theme/semantic.css */
36
+ @theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrim-surface: light-dark( oklch(from var(--color-neutral-50) l c h / 0.5), oklch(from var(--color-neutral-950) l c h / 0.25) ); --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-highlight-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-selected-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700)); --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800)); --color-accent-surface-text: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700)); --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700)); --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800)); --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600)); --color-grid-comment-active: light-dark( oklch(from var(--color-green-400) l c h / 0.5), oklch(from var(--color-green-600) l c h / 0.5) ); --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1); --color-grid-selection-overlay: var(--color-blue-500); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600)); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
37
+
38
+ /* src/css/theme/spacing.css */
39
+ @theme { --spacing-screen-border: 2rem; --spacing-popover-default-width: 20rem; --spacing-popover-min-width: 16rem; --spacing-document-max-width: 50rem; --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-card-default-width: 20rem; --spacing-card-min-width: 18rem; --spacing-card-max-width: 22rem; --spacing-card-min-height: 18rem; --spacing-card-max-height: 30rem; --spacing-tag-padding-block: 0.125rem; --spacing-trim-xs: 0.25rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1.5rem; --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-gap: var(--spacing-trim-sm); --spacing-form-section-gap: var(--spacing-trim-lg); --spacing-form-padding: var(--spacing-trim-sm); --spacing-icon-button-padding: var(--spacing-trim-xs); --spacing-scroll-padding: 4px; }
40
+ @layer dx-tokens {
41
+ }
42
+ @layer dx-tokens {
43
+ :root {
44
+ --dx-line-0: 0px;
45
+ --dx-line-1: 1px;
46
+ --dx-line-2: 2px;
47
+ --dx-lacuna-12: 1.5rem;
48
+ --dx-lacuna-3: 0.375rem;
49
+ --dx-lacuna-4: 0.5rem;
50
+ --dx-lacuna-6: 0.75rem;
51
+ --dx-gutter-xs: 0.25rem;
52
+ --dx-gutter-sm: 1rem;
53
+ --dx-gutter-md: 2rem;
54
+ --dx-gutter-lg: 2.5rem;
55
+ }
56
+ :root {
57
+ --dx-hair-line: 1px;
58
+ --dx-landmark-line: 1px;
59
+ --dx-modal-line: 1px;
60
+ --dx-no-line: 0px;
61
+ --dx-thick-line: 2px;
62
+ --dx-focus-line: 2px;
63
+ --dx-no-line: var(--dx-line-0);
64
+ --dx-hair-line: var(--dx-line-1);
65
+ --dx-thick-line: var(--dx-line-2);
66
+ --dx-focus-offset: var(--dx-no-line);
67
+ --dx-focus-line: var(--dx-thick-line);
68
+ --dx-modal-line: var(--dx-hair-line);
69
+ --dx-grid-focus-indicator-width: var(--dx-hair-line);
70
+ --dx-input-fine: var(--dx-lacuna-3);
71
+ --dx-input-coarse: var(--dx-lacuna-4);
72
+ --dx-default-icons-size: 1rem;
73
+ }
74
+ [data-grid-focus-indicator-variant=stack] {
75
+ --dx-grid-focus-indicator-width: var(--dx-thick-line);
76
+ }
77
+ :root {
78
+ --dx-rail-content: 3rem;
79
+ --dx-rail-size: calc(var(--dx-rail-content) + 1px);
80
+ --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
81
+ --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
82
+ --dx-topbar-size: var(--dx-rail-size);
83
+ --dx-toolbar-size: var(--dx-rail-action);
84
+ --dx-statusbar-size: var(--dx-rail-item);
85
+ --dx-nav-sidebar-size: 350px;
86
+ --dx-complementary-sidebar-size: 25rem;
87
+ --dx-drawer-size: 50dvh;
88
+ --dx-l0-size: 72px;
89
+ --dx-l0-avatar-size: 3rem;
90
+ --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
91
+ --dx-r0-size: var(--dx-rail-size);
92
+ --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
93
+ }
94
+ :root {
95
+ --dx-calc-auto: auto;
96
+ --dx-calc-min: min-content;
97
+ --dx-calc-fit: fit-content;
98
+ --dx-calc-max: max-content;
99
+ --dx-calc-content: content;
100
+ }
101
+ @supports (block-size: calc-size(fit-content, size)) {
102
+ :root {
103
+ --dx-calc-auto: calc-size(auto, size);
104
+ --dx-calc-min: calc-size(min-content, size);
105
+ --dx-calc-fit: calc-size(fit-content, size);
106
+ --dx-calc-max: calc-size(max-content, size);
107
+ --dx-calc-content: calc-size(content, size);
108
+ }
109
+ }
110
+ }
111
+
112
+ /* src/css/theme/styles.css */
113
+ @theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-surface-text: var(--color-cyan-surface-text); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-fill: var(--color-emerald-fill); --color-success-surface: var(--color-emerald-surface); --color-success-surface-text: var(--color-emerald-surface-text); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-fill: var(--color-amber-fill); --color-warning-surface: var(--color-amber-surface); --color-warning-surface-text: var(--color-amber-surface-text); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-fill: var(--color-rose-fill); --color-error-surface: var(--color-rose-surface); --color-error-surface-text: var(--color-rose-surface-text); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700)); --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800)); --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200)); --color-red-text: light-dark(var(--color-red-700), var(--color-red-300)); --color-red-border: light-dark(var(--color-red-400), var(--color-red-600)); --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700)); --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800)); --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200)); --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300)); --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600)); --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700)); --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800)); --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300)); --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600)); --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700)); --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800)); --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200)); --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300)); --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600)); --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700)); --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800)); --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200)); --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300)); --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600)); --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700)); --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800)); --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200)); --color-green-text: light-dark(var(--color-green-700), var(--color-green-300)); --color-green-border: light-dark(var(--color-green-400), var(--color-green-600)); --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700)); --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800)); --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200)); --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300)); --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600)); --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700)); --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800)); --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200)); --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300)); --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600)); --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700)); --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800)); --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200)); --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300)); --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600)); --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700)); --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800)); --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200)); --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300)); --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600)); --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700)); --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800)); --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200)); --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700)); --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800)); --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200)); --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300)); --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600)); --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700)); --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800)); --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200)); --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300)); --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600)); --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700)); --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800)); --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200)); --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300)); --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600)); --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700)); --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800)); --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200)); --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300)); --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600)); --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700)); --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800)); --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200)); --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300)); --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600)); --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700)); --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800)); --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200)); --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300)); --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600)); }
114
+
115
+ /* src/css/theme/text.css */
116
+ @theme { --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; }
117
+
118
+ /* src/css/base/base.css */
119
+ @layer dx-base {
120
+ :root {
121
+ color-scheme: light;
122
+ touch-action: pan-x pan-y;
123
+ font-synthesis: none;
124
+ font-variation-settings: "wght" 400, "slnt" 0;
125
+ scroll-padding-block-start: var(--spacing-14);
126
+ scroll-padding-block-end: var(--spacing-2);
127
+ @apply font-body;
128
+ }
129
+ .dark {
130
+ color-scheme: dark;
131
+ }
132
+ button {
133
+ @apply cursor-pointer;
134
+ -webkit-tap-highlight-color: transparent;
135
+ }
136
+ }
137
+ @layer dx-tokens {
138
+ :root {
139
+ --dx-tag-padding-block: var(--spacing-tag-padding-block);
140
+ }
141
+ html,
142
+ html.dark,
143
+ html .dark,
144
+ .sb-show-main {
145
+ background-color: var(--color-base-surface);
146
+ color: var(--color-base-surface-text);
147
+ --surface-bg: var(--color-base-surface);
148
+ --surface-text: var(--color-base-surface-text);
149
+ --description-text: var(--color-description);
150
+ }
151
+ }
152
+
153
+ /* src/css/base/typography.css */
154
+ @layer dx-components {
155
+ .not-italic {
156
+ font-variation-settings: "wght" 400, "slnt" 0;
157
+ }
158
+ .font-thin,
159
+ .not-italic.font-thin,
160
+ .not-italic .font-thin,
161
+ .font-thin .not-italic {
162
+ font-variation-settings: "wght" 100, "slnt" 0;
163
+ }
164
+ .font-extralight,
165
+ .not-italic.font-extralight,
166
+ .not-italic .font-extralight,
167
+ .font-extralight .not-italic {
168
+ font-variation-settings: "wght" 200, "slnt" 0;
169
+ }
170
+ .font-light,
171
+ .not-italic.font-light,
172
+ .not-italic .font-light,
173
+ .font-light .not-italic {
174
+ font-variation-settings: "wght" 300, "slnt" 0;
175
+ }
176
+ .font-normal,
177
+ .not-italic.font-normal,
178
+ .not-italic .font-normal,
179
+ .font-normal .not-italic {
180
+ font-variation-settings: "wght" 400, "slnt" 0;
181
+ }
182
+ .font-medium,
183
+ .not-italic.font-medium,
184
+ .not-italic .font-medium,
185
+ .font-medium .not-italic {
186
+ font-variation-settings: "wght" 500, "slnt" 0;
187
+ }
188
+ .font-semibold,
189
+ .not-italic.font-semibold,
190
+ .not-italic .font-semibold,
191
+ .font-semibold .not-italic {
192
+ font-variation-settings: "wght" 600, "slnt" 0;
193
+ }
194
+ .font-bold,
195
+ .not-italic.font-bold,
196
+ .not-italic .font-bold,
197
+ .font-bold .not-italic {
198
+ font-variation-settings: "wght" 700, "slnt" 0;
199
+ }
200
+ .font-extrabold,
201
+ .not-italic.font-extrabold,
202
+ .not-italic .font-extrabold,
203
+ .font-extrabold .not-italic {
204
+ font-variation-settings: "wght" 800, "slnt" 0;
205
+ }
206
+ .font-black,
207
+ .not-italic.font-black,
208
+ .not-italic .font-black,
209
+ .font-black .not-italic {
210
+ font-variation-settings: "wght" 900, "slnt" 0;
211
+ }
212
+ .italic {
213
+ font-variation-settings: "wght" 400, "slnt" -10;
214
+ }
215
+ .italic.font-thin,
216
+ .italic .font-thin,
217
+ .font-thin .italic {
218
+ font-variation-settings: "wght" 100, "slnt" -10;
219
+ }
220
+ .italic.font-extralight,
221
+ .italic .font-extralight,
222
+ .font-extralight .italic {
223
+ font-variation-settings: "wght" 200, "slnt" -10;
224
+ }
225
+ .italic.font-light,
226
+ .italic .font-light,
227
+ .font-light .italic {
228
+ font-variation-settings: "wght" 300, "slnt" -10;
229
+ }
230
+ .italic.font-normal,
231
+ .italic .font-normal,
232
+ .font-normal .italic {
233
+ font-variation-settings: "wght" 400, "slnt" -10;
234
+ }
235
+ .italic.font-medium,
236
+ .italic .font-medium,
237
+ .font-medium .italic {
238
+ font-variation-settings: "wght" 500, "slnt" -10;
239
+ }
240
+ .italic.font-semibold,
241
+ .italic .font-semibold,
242
+ .font-semibold .italic {
243
+ font-variation-settings: "wght" 600, "slnt" -10;
244
+ }
245
+ .italic.font-bold,
246
+ .italic .font-bold,
247
+ .font-bold .italic {
248
+ font-variation-settings: "wght" 700, "slnt" -10;
249
+ }
250
+ .italic.font-extrabold,
251
+ .italic .font-extrabold,
252
+ .font-extrabold .italic {
253
+ font-variation-settings: "wght" 800, "slnt" -10;
254
+ }
255
+ .italic.font-black,
256
+ .italic .font-black,
257
+ .font-black .italic {
258
+ font-variation-settings: "wght" 900, "slnt" -10;
259
+ }
260
+ }
261
+
262
+ /* src/css/components/button.css */
263
+ @layer dx-components {
264
+ .dx-button {
265
+ @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2.5rem] px-3;
266
+ @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
267
+ &[aria-pressed=true],
268
+ &[aria-checked=true] {
269
+ @apply text-accent-text bg-attention-surface;
270
+ }
271
+ &[disabled]:not([disabled=false]) {
272
+ @apply opacity-40 cursor-not-allowed shadow-none;
273
+ }
274
+ &[data-variant=ghost] {
275
+ @apply bg-transparent;
276
+ &:hover {
277
+ @apply bg-hover-surface text-inherit;
278
+ }
279
+ &[data-state=open] {
280
+ @apply bg-input-surface;
281
+ }
282
+ &[aria-pressed=true],
283
+ &[aria-checked=true] {
284
+ @apply bg-base-surface text-accent-text;
285
+ }
286
+ }
287
+ &[data-variant=outline] {
288
+ @apply border border-base-surface bg-transparent;
289
+ &:hover {
290
+ @apply bg-hover-surface;
291
+ }
292
+ }
293
+ &:not([disabled]),
294
+ &[disabled=false] {
295
+ &:hover {
296
+ @apply bg-hover-surface;
297
+ }
298
+ &[data-variant=primary] {
299
+ @apply text-accent-surface-text bg-accent-surface;
300
+ &:hover,
301
+ &[aria-pressed=true],
302
+ &[aria-checked=true] &[data-state=open] {
303
+ @apply bg-accent-surface-hover;
304
+ }
305
+ }
306
+ &[data-variant=destructive] {
307
+ @apply text-accent-surface-text bg-rose-fill;
308
+ &:hover,
309
+ &[aria-pressed=true],
310
+ &[aria-checked=true] &[data-state=open] {
311
+ @apply bg-rose-fill;
312
+ }
313
+ }
314
+ }
315
+ }
316
+ .dx-button:not([data-props~=grouped]) {
317
+ @apply rounded-xs;
318
+ }
319
+ .dx-button:not([data-props~=wrap]) {
320
+ @apply truncate;
321
+ }
322
+ @media (pointer: fine) {
323
+ .dx-button[data-density=fine] {
324
+ @apply min-h-[2rem] px-2.5;
325
+ }
326
+ }
327
+ }
328
+
329
+ /* src/css/components/checkbox.css */
330
+ @layer dx-components {
331
+ .dx-checkbox--switch,
332
+ .dx-checkbox {
333
+ @apply border border-un-accent;
334
+ &[aria-checked=true],
335
+ &[aria-checked=mixed],
336
+ &:checked {
337
+ @apply bg-accent-surface accent-accent-surface border-accent-surface;
338
+ }
339
+ &:not([disabled]),
340
+ &[disabled=false] {
341
+ &:hover {
342
+ @apply bg-un-accent-hover accent-un-accent-hover;
343
+ &[aria-checked=true],
344
+ &[aria-checked=mixed],
345
+ &:checked {
346
+ @apply bg-accent-surface-hover accent-accent-surface-hover border-accent-surface-hover;
347
+ }
348
+ }
349
+ }
350
+ }
351
+ .dx-checkbox {
352
+ @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-surface-text shrink-0 inline-grid place-items-center rounded-xs;
353
+ }
354
+ .dx-checkbox--switch {
355
+ @apply inline-block appearance-none relative shrink-0 h-5 w-8;
356
+ @apply shadow-inner transition-colors bg-un-accent;
357
+ @apply cursor-pointer rounded-full;
358
+ &::before {
359
+ @apply w-3 h-3 mx-[0.1875rem] my-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
360
+ content: "";
361
+ }
362
+ &[aria-checked=true],
363
+ &[aria-checked=mixed],
364
+ &:checked {
365
+ background-image: none;
366
+ &::before {
367
+ @apply translate-x-[100%];
368
+ }
369
+ }
370
+ }
371
+ }
372
+
373
+ /* src/css/components/dialog.css */
374
+ @layer dx-components {
375
+ .dx-dialog__overlay {
376
+ @apply z-40 fixed grid inset-x-0 top-0 h-dvh py-[env(safe-area-inset-top)] place-items-center;
377
+ @apply bg-scrim-surface backdrop-blur-xs;
378
+ &[data-state=open] {
379
+ @apply animate-fade-in;
380
+ }
381
+ &[data-state=closed] {
382
+ @apply animate-fade-out;
383
+ }
384
+ &[data-block-align=start] {
385
+ align-items: start;
386
+ justify-items: center;
387
+ }
388
+ &[data-block-align=center] {
389
+ place-items: center;
390
+ }
391
+ &[data-block-align=end] {
392
+ align-items: end;
393
+ justify-items: center;
394
+ }
395
+ }
396
+ @media (width >= theme(--breakpoint-sm)) {
397
+ .dx-dialog__overlay {
398
+ @apply p-[calc(env(safe-area-inset-top)+.6rem)];
399
+ }
400
+ }
401
+ @media (width >= theme(--breakpoint-md)) {
402
+ .dx-dialog__overlay {
403
+ @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
404
+ }
405
+ }
406
+ @media (width >= theme(--breakpoint-lg)) {
407
+ .dx-dialog__overlay {
408
+ @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
409
+ }
410
+ }
411
+ .dx-dialog__content {
412
+ @apply flex flex-col w-dvw max-w-full max-h-full overflow-hidden shadow-md;
413
+ &[data-state=open] {
414
+ @apply animate-slide-up-and-fade;
415
+ }
416
+ &[data-state=closed] {
417
+ @apply animate-slide-down-and-fade;
418
+ }
419
+ }
420
+ @media (width >= theme(--breakpoint-sm)) {
421
+ .dx-dialog__content {
422
+ @apply w-[95vw] border rounded-md border-separator;
423
+ }
424
+ }
425
+ @media (width >= theme(--breakpoint-md)) {
426
+ .dx-dialog__content {
427
+ @apply max-w-[24rem];
428
+ }
429
+ }
430
+ .dx-dialog__title {
431
+ @apply shrink-0 text-xl font-medium;
432
+ }
433
+ }
434
+
435
+ /* src/css/components/focus.css */
436
+ @layer dx-components {
437
+ .dx-focus-ring,
438
+ .dx-focus-ring-inset {
439
+ &:not([disabled]),
440
+ &[disabled=false] {
441
+ &:focus {
442
+ @apply outline-hidden;
443
+ }
444
+ &:focus-visible {
445
+ @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
446
+ &[data-variant=primary] {
447
+ @apply ring-[var(--color-accent-focus-indicator)];
448
+ }
449
+ &:hover {
450
+ @apply outline-hidden;
451
+ .dark & {
452
+ @apply outline-hidden;
453
+ }
454
+ }
455
+ }
456
+ }
457
+ }
458
+ .dx-focus-ring-none {
459
+ &:focus,
460
+ &:focus-visible {
461
+ @apply outline-hidden! ring-0!;
462
+ }
463
+ }
464
+ .dx-focus-ring-always,
465
+ .dx-focus-ring-inset-always {
466
+ &:not([disabled]),
467
+ &[disabled=false] {
468
+ &:focus {
469
+ @apply outline-hidden;
470
+ }
471
+ &:focus {
472
+ @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
473
+ &[data-variant=primary] {
474
+ @apply ring-[var(--color-accent-focus-indicator)];
475
+ }
476
+ &:hover {
477
+ @apply outline-hidden;
478
+ .dark & {
479
+ @apply outline-hidden;
480
+ }
481
+ }
482
+ }
483
+ }
484
+ }
485
+ .dx-focus-ring-group,
486
+ .dx-focus-ring-group-x,
487
+ .dx-focus-ring-group-y,
488
+ .dx-focus-ring-group-always,
489
+ .dx-focus-ring-group-x-always,
490
+ .dx-focus-ring-group-y-always {
491
+ &:not([disabled]),
492
+ &[disabled=false] {
493
+ &:focus {
494
+ @apply outline-hidden;
495
+ }
496
+ }
497
+ }
498
+ .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
499
+ .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
500
+ .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
501
+ @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
502
+ &[data-variant=primary] {
503
+ @apply ring-[var(--color-accent-focus-indicator)];
504
+ }
505
+ &:hover {
506
+ @apply outline-hidden;
507
+ .dark & {
508
+ @apply outline-hidden;
509
+ }
510
+ }
511
+ }
512
+ .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
513
+ .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
514
+ .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
515
+ @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
516
+ &[data-variant=primary] {
517
+ @apply ring-[var(--color-accent-focus-indicator)];
518
+ }
519
+ &:hover {
520
+ @apply outline-hidden;
521
+ .dark & {
522
+ @apply outline-hidden;
523
+ }
524
+ }
525
+ }
526
+ .dx-focus-ring-inset {
527
+ &:not([disabled]),
528
+ &[disabled=false] {
529
+ &:focus-visible {
530
+ @apply ring-inset;
531
+ }
532
+ }
533
+ }
534
+ .dx-focus-ring-inset-always {
535
+ &:not([disabled]),
536
+ &[disabled=false] {
537
+ &:focus {
538
+ @apply ring-inset;
539
+ }
540
+ }
541
+ }
542
+ .dx-focus-ring-inset-over-all,
543
+ .dx-focus-ring-main[data-handles-focus=true] {
544
+ &:not([disabled]),
545
+ &[disabled=false] {
546
+ &::after {
547
+ content: "";
548
+ @apply z-20 pointer-events-none;
549
+ }
550
+ &:focus {
551
+ @apply outline-hidden;
552
+ }
553
+ &:focus-visible {
554
+ &::after {
555
+ @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
556
+ }
557
+ &[data-variant=primary]::after {
558
+ @apply ring-[var(--color-accent-focus-indicator)];
559
+ }
560
+ &:hover {
561
+ @apply outline-hidden;
562
+ .dark & {
563
+ @apply outline-hidden;
564
+ }
565
+ }
566
+ }
567
+ }
568
+ }
569
+ .dx-focus-ring-inset-over-all-always,
570
+ .dx-focus-ring-main-always[data-handles-focus=true] {
571
+ &:not([disabled]),
572
+ &[disabled=false] {
573
+ &::after {
574
+ content: "";
575
+ @apply z-20 pointer-events-none;
576
+ }
577
+ &:focus {
578
+ @apply outline-hidden;
579
+ }
580
+ &:focus {
581
+ &::after {
582
+ @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
583
+ }
584
+ &[data-variant=primary]::after {
585
+ @apply ring-[var(--color-accent-focus-indicator)];
586
+ }
587
+ &:hover {
588
+ @apply outline-hidden;
589
+ .dark & {
590
+ @apply outline-hidden;
591
+ }
592
+ }
593
+ }
594
+ }
595
+ }
596
+ .dx-focus-ring-inset-over-all,
597
+ .dx-focus-ring-inset-over-all-always {
598
+ &:not([disabled]),
599
+ &[disabled=false] {
600
+ &::after {
601
+ @apply inset-0 absolute;
602
+ }
603
+ }
604
+ }
605
+ .dx-focus-ring-main[data-handles-focus=true] {
606
+ &:not([disabled]),
607
+ &[disabled=false] {
608
+ &::after {
609
+ position: fixed;
610
+ inset: 0;
611
+ }
612
+ @media (width >= theme(--breakpoint-lg)) {
613
+ &[data-sidebar-left-state=expanded]::after {
614
+ inset-inline-start: var(--dx-nav-sidebar-size);
615
+ }
616
+ &[data-sidebar-left-state=collapsed]::after {
617
+ inset-inline-start: var(--dx-l0-size);
618
+ }
619
+ &[data-sidebar-right-state=expanded]::after {
620
+ inset-inline-end: var(--dx-complementary-sidebar-size);
621
+ }
622
+ &[data-sidebar-right-state=collapsed]::after {
623
+ inset-inline-end: var(--dx-r0-size);
624
+ }
625
+ }
626
+ }
627
+ }
628
+ .dx-focus-subdued {
629
+ @apply focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0;
630
+ }
631
+ .dx-focus-static {
632
+ @apply ring-2 ring-offset-0 ring-primary-300 ring-offset-white dark:ring-primary-400 dark:ring-offset-black;
633
+ }
634
+ }
635
+
636
+ /* src/css/components/icon.css */
637
+ @layer dx-components {
638
+ .dx-icon-inline {
639
+ @apply inline-block align-[-0.125em];
640
+ }
641
+ }
642
+
643
+ /* src/css/components/panel.css */
644
+ @layer dx-components {
645
+ [data-hue=neutral] .dx-panel,
646
+ .dx-panel--neutral {
647
+ @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
648
+ }
649
+ [data-hue=red] .dx-panel,
650
+ .dx-panel--red {
651
+ @apply bg-red-surface text-red-surface-text border-red-border;
652
+ }
653
+ [data-hue=orange] .dx-panel,
654
+ .dx-panel--orange {
655
+ @apply bg-orange-surface text-orange-surface-text border-orange-border;
656
+ }
657
+ [data-hue=amber] .dx-panel,
658
+ .dx-panel--amber {
659
+ @apply bg-amber-surface text-amber-surface-text border-amber-border;
660
+ }
661
+ [data-hue=yellow] .dx-panel,
662
+ .dx-panel--yellow {
663
+ @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
664
+ }
665
+ [data-hue=lime] .dx-panel,
666
+ .dx-panel--lime {
667
+ @apply bg-lime-surface text-lime-surface-text border-lime-border;
668
+ }
669
+ [data-hue=green] .dx-panel,
670
+ .dx-panel--green {
671
+ @apply bg-green-surface text-green-surface-text border-green-border;
672
+ }
673
+ [data-hue=emerald] .dx-panel,
674
+ .dx-panel--emerald {
675
+ @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
676
+ }
677
+ [data-hue=teal] .dx-panel,
678
+ .dx-panel--teal {
679
+ @apply bg-teal-surface text-teal-surface-text border-teal-border;
680
+ }
681
+ [data-hue=cyan] .dx-panel,
682
+ .dx-panel--cyan {
683
+ @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
684
+ }
685
+ [data-hue=sky] .dx-panel,
686
+ .dx-panel--sky {
687
+ @apply bg-sky-surface text-sky-surface-text border-sky-border;
688
+ }
689
+ [data-hue=blue] .dx-panel,
690
+ .dx-panel--blue {
691
+ @apply bg-blue-surface text-blue-surface-text border-blue-border;
692
+ }
693
+ [data-hue=indigo] .dx-panel,
694
+ .dx-panel--indigo {
695
+ @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
696
+ }
697
+ [data-hue=violet] .dx-panel,
698
+ .dx-panel--violet {
699
+ @apply bg-violet-surface text-violet-surface-text border-violet-border;
700
+ }
701
+ [data-hue=purple] .dx-panel,
702
+ .dx-panel--purple {
703
+ @apply bg-purple-surface text-purple-surface-text border-purple-border;
704
+ }
705
+ [data-hue=fuchsia] .dx-panel,
706
+ .dx-panel--fuchsia {
707
+ @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
708
+ }
709
+ [data-hue=pink] .dx-panel,
710
+ .dx-panel--pink {
711
+ @apply bg-pink-surface text-pink-surface-text border-pink-border;
712
+ }
713
+ [data-hue=rose] .dx-panel,
714
+ .dx-panel--rose {
715
+ @apply bg-rose-surface text-rose-surface-text border-rose-border;
716
+ }
717
+ [data-hue=info] .dx-panel,
718
+ .dx-panel--info {
719
+ @apply bg-info-surface text-info-surface-text border-info-border;
720
+ }
721
+ [data-hue=success] .dx-panel,
722
+ .dx-panel--success {
723
+ @apply bg-success-surface text-success-surface-text border-success-border;
724
+ }
725
+ [data-hue=warning] .dx-panel,
726
+ .dx-panel--warning {
727
+ @apply bg-warning-surface text-warning-surface-text border-warning-border;
728
+ }
729
+ [data-hue=error] .dx-panel,
730
+ .dx-panel--error {
731
+ @apply bg-error-surface text-error-surface-text border-error-border;
732
+ }
733
+ }
734
+
735
+ /* src/css/components/link.css */
736
+ @layer dx-components {
737
+ .dx-link {
738
+ @apply text-accent-text hover:text-accent-text-hover;
739
+ }
740
+ }
741
+
742
+ /* src/css/components/scrollbar.css */
743
+ @layer dx-components {
744
+ ::-webkit-scrollbar-thumb:hover {
745
+ @apply bg-scrollbar-thumb-hover!;
746
+ }
747
+ ::-webkit-scrollbar-thumb:active {
748
+ @apply bg-scrollbar-thumb-active!;
749
+ }
750
+ .dx-scrollbar-thin::-webkit-scrollbar {
751
+ @apply w-[4px];
752
+ }
753
+ .dx-scrollbar-thin::-webkit-scrollbar-thumb {
754
+ @apply bg-transparent;
755
+ transition: background 0.15s;
756
+ }
757
+ .dx-scrollbar-thin:hover::-webkit-scrollbar-thumb {
758
+ @apply bg-scrollbar-thumb;
759
+ }
760
+ }
761
+
762
+ /* src/css/components/selected.css */
763
+ @layer dx-components {
764
+ .dx-hover {
765
+ @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
766
+ }
767
+ .dx-highlighted {
768
+ @apply data-[highlighted]:bg-highlight-surface data-[highlighted]:text-highlight-surface-text hover:data-[highlighted]:bg-highlight-surface-hover;
769
+ }
770
+ .dx-current {
771
+ @apply dx-ring-pseudo aria-[current=true]:bg-highlight-surface aria-[current=true]:text-highlight-surface-text aria-[current=true]:after:ring-active-separator!;
772
+ }
773
+ .dx-selected {
774
+ @apply aria-selected:bg-selected-surface aria-selected:text-selected-surface-text hover:aria-selected:text-selected-surface-text aria-selected:font-semibold aria-selected:tracking-normal transition-[color, font-variation-settings, letter-spacing];
775
+ }
776
+ }
777
+
778
+ /* src/css/components/surface.css */
779
+ @layer dx-components {
780
+ .dx-base-surface {
781
+ @apply bg-base-surface text-base-surface-text;
782
+ --surface-bg: var(--color-base-surface);
783
+ }
784
+ .dx-sidebar-surface {
785
+ @apply bg-sidebar-surface text-base-surface-text;
786
+ --surface-bg: var(--color-sidebar-surface);
787
+ }
788
+ .dx-modal-surface {
789
+ @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
790
+ --surface-bg: var(--color-modal-surface);
791
+ }
792
+ .dx-attention-surface {
793
+ @apply bg-attention-surface text-base-surface-text;
794
+ --surface-bg: var(--color-attention-surface);
795
+ }
796
+ }
797
+
798
+ /* src/css/components/tag.css */
799
+ @layer dx-components {
800
+ .dx-tag {
801
+ @apply inline-block text-xs font-semibold m-0.5 px-1 rounded-sm cursor-default truncate;
802
+ padding-block: var(--spacing-tag-padding-block);
803
+ user-select: none;
804
+ }
805
+ .dx-tag--anchor {
806
+ @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
807
+ @apply bg-group-surface text-sky-surface-text border-sky-border;
808
+ &:hover {
809
+ @apply bg-hover-surface;
810
+ }
811
+ }
812
+ .dx-tag[data-hue=neutral],
813
+ .dx-tag--neutral {
814
+ @apply bg-neutral-surface text-neutral-surface-text;
815
+ }
816
+ .dx-tag[data-hue=red],
817
+ .dx-tag--red {
818
+ @apply bg-red-surface text-red-surface-text;
819
+ }
820
+ .dx-tag[data-hue=orange],
821
+ .dx-tag--orange {
822
+ @apply bg-orange-surface text-orange-surface-text;
823
+ }
824
+ .dx-tag[data-hue=amber],
825
+ .dx-tag--amber {
826
+ @apply bg-amber-surface text-amber-surface-text;
827
+ }
828
+ .dx-tag[data-hue=yellow],
829
+ .dx-tag--yellow {
830
+ @apply bg-yellow-surface text-yellow-surface-text;
831
+ }
832
+ .dx-tag[data-hue=lime],
833
+ .dx-tag--lime {
834
+ @apply bg-lime-surface text-lime-surface-text;
835
+ }
836
+ .dx-tag[data-hue=green],
837
+ .dx-tag--green {
838
+ @apply bg-green-surface text-green-surface-text;
839
+ }
840
+ .dx-tag[data-hue=emerald],
841
+ .dx-tag--emerald {
842
+ @apply bg-emerald-surface text-emerald-surface-text;
843
+ }
844
+ .dx-tag[data-hue=teal],
845
+ .dx-tag--teal {
846
+ @apply bg-teal-surface text-teal-surface-text;
847
+ }
848
+ .dx-tag[data-hue=cyan],
849
+ .dx-tag--cyan {
850
+ @apply bg-cyan-surface text-cyan-surface-text;
851
+ }
852
+ .dx-tag[data-hue=sky],
853
+ .dx-tag--sky {
854
+ @apply bg-sky-surface text-sky-surface-text;
855
+ }
856
+ .dx-tag[data-hue=blue],
857
+ .dx-tag--blue {
858
+ @apply bg-blue-surface text-blue-surface-text;
859
+ }
860
+ .dx-tag[data-hue=indigo],
861
+ .dx-tag--indigo {
862
+ @apply bg-indigo-surface text-indigo-surface-text;
863
+ }
864
+ .dx-tag[data-hue=violet],
865
+ .dx-tag--violet {
866
+ @apply bg-violet-surface text-violet-surface-text;
867
+ }
868
+ .dx-tag[data-hue=purple],
869
+ .dx-tag--purple {
870
+ @apply bg-purple-surface text-purple-surface-text;
871
+ }
872
+ .dx-tag[data-hue=fuchsia],
873
+ .dx-tag--fuchsia {
874
+ @apply bg-fuchsia-surface text-fuchsia-surface-text;
875
+ }
876
+ .dx-tag[data-hue=pink],
877
+ .dx-tag--pink {
878
+ @apply bg-pink-surface text-pink-surface-text;
879
+ }
880
+ .dx-tag[data-hue=rose],
881
+ .dx-tag--rose {
882
+ @apply bg-rose-surface text-rose-surface-text;
883
+ }
884
+ .dx-tag[data-hue=info],
885
+ .dx-tag--info {
886
+ @apply bg-cyan-surface text-cyan-surface-text;
887
+ }
888
+ .dx-tag[data-hue=success],
889
+ .dx-tag--success {
890
+ @apply bg-emerald-surface text-emerald-surface-text;
891
+ }
892
+ .dx-tag[data-hue=warning],
893
+ .dx-tag--warning {
894
+ @apply bg-amber-surface text-amber-surface-text;
895
+ }
896
+ .dx-tag[data-hue=error],
897
+ .dx-tag--error {
898
+ @apply bg-rose-surface text-rose-surface-text;
899
+ }
900
+ }
901
+
902
+ /* src/css/components/text.css */
903
+ @layer dx-components {
904
+ .dx-text[data-hue=info],
905
+ .dx-text--info {
906
+ @apply text-cyan-text;
907
+ }
908
+ .dx-text[data-hue=success],
909
+ .dx-text--success {
910
+ @apply text-emerald-text;
911
+ }
912
+ .dx-text[data-hue=warning],
913
+ .dx-text--warning {
914
+ @apply text-amber-text;
915
+ }
916
+ .dx-text[data-hue=error],
917
+ .dx-text--error {
918
+ @apply text-rose-text;
919
+ }
920
+ .dx-text[data-hue=neutral],
921
+ .dx-text--neutral {
922
+ @apply text-neutral-text;
923
+ }
924
+ .dx-text[data-hue=red],
925
+ .dx-text--red {
926
+ @apply text-red-text;
927
+ }
928
+ .dx-text[data-hue=orange],
929
+ .dx-text--orange {
930
+ @apply text-orange-text;
931
+ }
932
+ .dx-text[data-hue=amber],
933
+ .dx-text--amber {
934
+ @apply text-amber-text;
935
+ }
936
+ .dx-text[data-hue=yellow],
937
+ .dx-text--yellow {
938
+ @apply text-yellow-text;
939
+ }
940
+ .dx-text[data-hue=lime],
941
+ .dx-text--lime {
942
+ @apply text-lime-text;
943
+ }
944
+ .dx-text[data-hue=green],
945
+ .dx-text--green {
946
+ @apply text-green-text;
947
+ }
948
+ .dx-text[data-hue=emerald],
949
+ .dx-text--emerald {
950
+ @apply text-emerald-text;
951
+ }
952
+ .dx-text[data-hue=teal],
953
+ .dx-text--teal {
954
+ @apply text-teal-text;
955
+ }
956
+ .dx-text[data-hue=cyan],
957
+ .dx-text--cyan {
958
+ @apply text-cyan-text;
959
+ }
960
+ .dx-text[data-hue=sky],
961
+ .dx-text--sky {
962
+ @apply text-sky-text;
963
+ }
964
+ .dx-text[data-hue=blue],
965
+ .dx-text--blue {
966
+ @apply text-blue-text;
967
+ }
968
+ .dx-text[data-hue=indigo],
969
+ .dx-text--indigo {
970
+ @apply text-indigo-text;
971
+ }
972
+ .dx-text[data-hue=violet],
973
+ .dx-text--violet {
974
+ @apply text-violet-text;
975
+ }
976
+ .dx-text[data-hue=purple],
977
+ .dx-text--purple {
978
+ @apply text-purple-text;
979
+ }
980
+ .dx-text[data-hue=fuchsia],
981
+ .dx-text--fuchsia {
982
+ @apply text-fuchsia-text;
983
+ }
984
+ .dx-text[data-hue=pink],
985
+ .dx-text--pink {
986
+ @apply text-pink-text;
987
+ }
988
+ .dx-text[data-hue=rose],
989
+ .dx-text--rose {
990
+ @apply text-rose-text;
991
+ }
992
+ }
993
+
994
+ /* src/css/layout/main.css */
995
+ @layer dx-components {
996
+ .dx-main-bounce-layout {
997
+ @apply fixed overflow-auto overscroll-auto;
998
+ transition-duration: 200ms;
999
+ transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
1000
+ transition-property:
1001
+ padding-inline-start,
1002
+ padding-inline-end,
1003
+ scroll-padding-start,
1004
+ scroll-padding-end;
1005
+ inset-inline-start: 0;
1006
+ inset-inline-end: 0;
1007
+ inset-block-start: 0;
1008
+ inset-block-end: 0;
1009
+ z-index: 0;
1010
+ }
1011
+ .dx-main-content-padding-transitions {
1012
+ transition-duration: 200ms;
1013
+ transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
1014
+ transition-property:
1015
+ padding-inline-start,
1016
+ padding-inline-end,
1017
+ scroll-padding-start,
1018
+ scroll-padding-end;
1019
+ }
1020
+ .dx-main-intrinsic-size {
1021
+ inline-size: calc(100dvw - 2 * var(--main-spacing));
1022
+ transition-property: inline-size;
1023
+ transition-duration: 200ms;
1024
+ transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
1025
+ @media (width >= theme(--breakpoint-lg)) {
1026
+ &[data-sidebar-left-state=closed][data-sidebar-right-state=closed] {
1027
+ inline-size: calc(100dvw - 2 * var(--main-spacing));
1028
+ }
1029
+ &[data-sidebar-left-state=collapsed][data-sidebar-right-state=closed] {
1030
+ inline-size: calc(100dvw - var(--dx-l0-size) - 2 * var(--main-spacing));
1031
+ }
1032
+ &[data-sidebar-left-state=expanded][data-sidebar-right-state=closed] {
1033
+ inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - 2 * var(--main-spacing));
1034
+ }
1035
+ &[data-sidebar-left-state=closed][data-sidebar-right-state=collapsed] {
1036
+ inline-size: calc(100dvw - var(--dx-r0-size) - 2 * var(--main-spacing));
1037
+ }
1038
+ &[data-sidebar-left-state=collapsed][data-sidebar-right-state=collapsed] {
1039
+ inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
1040
+ }
1041
+ &[data-sidebar-left-state=expanded][data-sidebar-right-state=collapsed] {
1042
+ inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
1043
+ }
1044
+ &[data-sidebar-left-state=closed][data-sidebar-right-state=expanded] {
1045
+ inline-size: calc(100dvw - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
1046
+ }
1047
+ &[data-sidebar-left-state=collapsed][data-sidebar-right-state=expanded] {
1048
+ inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
1049
+ }
1050
+ &[data-sidebar-left-state=expanded][data-sidebar-right-state=expanded] {
1051
+ inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
1052
+ }
1053
+ }
1054
+ }
1055
+ }
1056
+ @layer dx-components {
1057
+ .dx-main-sidebar {
1058
+ @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
1059
+ transition-duration: 200ms;
1060
+ transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
1061
+ @apply border-primary-separator rounded-md;
1062
+ @apply backdrop-blur-md;
1063
+ .dark & {
1064
+ @apply backdrop-blur-lg;
1065
+ }
1066
+ background-color: var(--color-sidebar-surface);
1067
+ --surface-bg: var(--color-sidebar-surface);
1068
+ transition-property:
1069
+ inset-inline-start,
1070
+ inset-inline-end,
1071
+ inline-size;
1072
+ inset-block-start: max(0.5rem, env(safe-area-inset-top));
1073
+ inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
1074
+ inline-size: calc(100dvw - 3rem);
1075
+ z-index: 7;
1076
+ @media (width >= theme(--breakpoint-lg)) {
1077
+ @apply top-0 bottom-0 rounded-none border-y-0;
1078
+ }
1079
+ &[data-resizing=false] {
1080
+ @apply duration-200;
1081
+ }
1082
+ &[data-side=is] {
1083
+ @apply -start-[100vw] border-e;
1084
+ border-inline-end-width: var(--border-width-landmark-line) !important;
1085
+ border-inline-end-style: solid;
1086
+ z-index: 8;
1087
+ &[data-state=expanded] {
1088
+ inset-inline-start: max(0.5rem, env(safe-area-inset-left));
1089
+ @media (width >= theme(--breakpoint-lg)) {
1090
+ @apply start-0;
1091
+ }
1092
+ }
1093
+ @media (width >= theme(--breakpoint-sm)) {
1094
+ @apply w-(--dx-nav-sidebar-size);
1095
+ }
1096
+ @media (width >= theme(--breakpoint-lg)) {
1097
+ border-inline-start-width: 0;
1098
+ border-inline-end-width: 0;
1099
+ &[data-state=collapsed] {
1100
+ @apply w-(--dx-l0-size) start-0;
1101
+ }
1102
+ &[data-state=expanded] {
1103
+ @apply w-(--dx-nav-sidebar-size);
1104
+ }
1105
+ }
1106
+ }
1107
+ &[data-side=ie] {
1108
+ @apply -end-[100vw] border-s;
1109
+ border-inline-start-width: var(--border-width-landmark-line);
1110
+ border-inline-start-style: solid;
1111
+ &[data-state=expanded] {
1112
+ inset-inline-end: max(0.5rem, env(safe-area-inset-right));
1113
+ @media (width >= theme(--breakpoint-lg)) {
1114
+ @apply end-0;
1115
+ }
1116
+ }
1117
+ @media (width >= theme(--breakpoint-sm)) {
1118
+ @apply w-(--dx-complementary-sidebar-size);
1119
+ }
1120
+ @media (width >= theme(--breakpoint-lg)) {
1121
+ border-inline-end-width: 0;
1122
+ &[data-state=collapsed] {
1123
+ @apply w-(--dx-r0-size) end-0;
1124
+ }
1125
+ &[data-state=expanded] {
1126
+ @apply w-(--dx-complementary-sidebar-size);
1127
+ }
1128
+ }
1129
+ }
1130
+ }
1131
+ .dx-main-overlay {
1132
+ @apply fixed inset-0 bg-scrim-surface;
1133
+ transition-property: opacity;
1134
+ transition-duration: 200ms;
1135
+ transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
1136
+ @apply opacity-0 hidden;
1137
+ z-index: 6;
1138
+ &[data-state=open] {
1139
+ @apply opacity-100 block;
1140
+ @media (width >= theme(--breakpoint-lg)) {
1141
+ @apply opacity-100 hidden;
1142
+ }
1143
+ }
1144
+ }
1145
+ .dx-main-content-padding {
1146
+ padding-inline-start: 0;
1147
+ scroll-padding-inline-start: 0;
1148
+ padding-inline-end: 0;
1149
+ scroll-padding-inline-end: 0;
1150
+ @media (width >= theme(--breakpoint-lg)) {
1151
+ &[data-sidebar-left-state=collapsed] {
1152
+ padding-inline-start: var(--dx-l0-size);
1153
+ scroll-padding-inline-start: var(--dx-l0-size);
1154
+ }
1155
+ &[data-sidebar-left-state=expanded] {
1156
+ padding-inline-start: var(--dx-nav-sidebar-size);
1157
+ scroll-padding-inline-start: var(--dx-nav-sidebar-size);
1158
+ }
1159
+ &[data-sidebar-right-state=collapsed] {
1160
+ padding-inline-end: var(--dx-r0-size);
1161
+ scroll-padding-inline-end: var(--dx-r0-size);
1162
+ }
1163
+ &[data-sidebar-right-state=expanded] {
1164
+ padding-inline-end: var(--dx-complementary-sidebar-size);
1165
+ scroll-padding-inline-end: var(--dx-complementary-sidebar-size);
1166
+ }
1167
+ }
1168
+ }
1169
+ }
1170
+
1171
+ /* src/css/layout/native.css */
1172
+ @layer dx-components {
1173
+ .dx-app-drag {
1174
+ -webkit-user-select: none;
1175
+ -webkit-app-region: drag;
1176
+ --app-region: drag;
1177
+ }
1178
+ .dx-app-no-drag {
1179
+ -webkit-app-region: no-drag;
1180
+ --app-region: no-drag;
1181
+ }
1182
+ }
1183
+
1184
+ /* src/css/layout/positioning.css */
1185
+ @layer dx-components {
1186
+ .dx-contain-layout {
1187
+ contain: layout;
1188
+ }
1189
+ .dx-sticky-top-0 {
1190
+ --sticky-top: 0;
1191
+ }
1192
+ .dx-sticky-top-from-topbar-bottom {
1193
+ --sticky-top: var(--dx-topbar-size);
1194
+ }
1195
+ .dx-sticky-bottom-from-statusbar-bottom {
1196
+ --sticky-bottom: var(--dx-statusbar-size);
1197
+ }
1198
+ }
1199
+
1200
+ /* src/css/layout/size.css */
1201
+ @layer dx-components {
1202
+ .dx-size-container {
1203
+ container-type: size;
1204
+ }
1205
+ .dx-inline-size-container {
1206
+ container-type: inline-size;
1207
+ }
1208
+ .dx-document {
1209
+ @apply mx-auto w-full max-w-document-max-width;
1210
+ }
1211
+ .dx-card {
1212
+ @apply flex flex-col w-full;
1213
+ }
1214
+ .dx-card-square {
1215
+ inline-size: min(min(var(--radix-popper-available-width), var(--spacing-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
1216
+ block-size: min(min(var(--radix-popper-available-width), var(--spacing-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
1217
+ }
1218
+ .dx-card-default-width {
1219
+ @apply w-card-default-width;
1220
+ }
1221
+ .dx-card-min-width {
1222
+ @apply min-w-card-min-width;
1223
+ }
1224
+ .dx-card-max-width {
1225
+ @apply w-full max-w-card-max-width;
1226
+ }
1227
+ .dx-card-popover {
1228
+ @apply inline-card-max-width bg-card-surface;
1229
+ max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
1230
+ max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
1231
+ }
1232
+ }
1233
+ @layer dx-components {
1234
+ [data-size="0"],
1235
+ [data-block-size="0"] {
1236
+ @apply h-0;
1237
+ }
1238
+ [data-size=px],
1239
+ [data-block-size=px] {
1240
+ @apply h-px;
1241
+ }
1242
+ [data-size="0.5"],
1243
+ [data-block-size="0.5"] {
1244
+ @apply h-0.5;
1245
+ }
1246
+ [data-size="1"],
1247
+ [data-block-size="1"] {
1248
+ @apply h-1;
1249
+ }
1250
+ [data-size="1.5"],
1251
+ [data-block-size="1.5"] {
1252
+ @apply h-1.5;
1253
+ }
1254
+ [data-size="2"],
1255
+ [data-block-size="2"] {
1256
+ @apply h-2;
1257
+ }
1258
+ [data-size="2.5"],
1259
+ [data-block-size="2.5"] {
1260
+ @apply h-2.5;
1261
+ }
1262
+ [data-size="3"],
1263
+ [data-block-size="3"] {
1264
+ @apply h-3;
1265
+ }
1266
+ [data-size="3.5"],
1267
+ [data-block-size="3.5"] {
1268
+ @apply h-3.5;
1269
+ }
1270
+ [data-size="4"],
1271
+ [data-block-size="4"] {
1272
+ @apply h-4;
1273
+ }
1274
+ [data-size="5"],
1275
+ [data-block-size="5"] {
1276
+ @apply h-5;
1277
+ }
1278
+ [data-size="6"],
1279
+ [data-block-size="6"] {
1280
+ @apply h-6;
1281
+ }
1282
+ [data-size="7"],
1283
+ [data-block-size="7"] {
1284
+ @apply h-7;
1285
+ }
1286
+ [data-size="8"],
1287
+ [data-block-size="8"] {
1288
+ @apply h-8;
1289
+ }
1290
+ [data-size="9"],
1291
+ [data-block-size="9"] {
1292
+ @apply h-9;
1293
+ }
1294
+ [data-size="10"],
1295
+ [data-block-size="10"] {
1296
+ @apply h-10;
1297
+ }
1298
+ [data-size="11"],
1299
+ [data-block-size="11"] {
1300
+ @apply h-11;
1301
+ }
1302
+ [data-size="12"],
1303
+ [data-block-size="12"] {
1304
+ @apply h-12;
1305
+ }
1306
+ [data-size="14"],
1307
+ [data-block-size="14"] {
1308
+ @apply h-14;
1309
+ }
1310
+ [data-size="16"],
1311
+ [data-block-size="16"] {
1312
+ @apply h-16;
1313
+ }
1314
+ [data-size="20"],
1315
+ [data-block-size="20"] {
1316
+ @apply h-20;
1317
+ }
1318
+ [data-size="24"],
1319
+ [data-block-size="24"] {
1320
+ @apply h-24;
1321
+ }
1322
+ [data-size="28"],
1323
+ [data-block-size="28"] {
1324
+ @apply h-28;
1325
+ }
1326
+ [data-size="32"],
1327
+ [data-block-size="32"] {
1328
+ @apply h-32;
1329
+ }
1330
+ [data-size="36"],
1331
+ [data-block-size="36"] {
1332
+ @apply h-36;
1333
+ }
1334
+ [data-size="40"],
1335
+ [data-block-size="40"] {
1336
+ @apply h-40;
1337
+ }
1338
+ [data-size="44"],
1339
+ [data-block-size="44"] {
1340
+ @apply h-44;
1341
+ }
1342
+ [data-size="48"],
1343
+ [data-block-size="48"] {
1344
+ @apply h-48;
1345
+ }
1346
+ [data-size="52"],
1347
+ [data-block-size="52"] {
1348
+ @apply h-52;
1349
+ }
1350
+ [data-size="56"],
1351
+ [data-block-size="56"] {
1352
+ @apply h-56;
1353
+ }
1354
+ [data-size="60"],
1355
+ [data-block-size="60"] {
1356
+ @apply h-60;
1357
+ }
1358
+ [data-size="64"],
1359
+ [data-block-size="64"] {
1360
+ @apply h-64;
1361
+ }
1362
+ [data-size="72"],
1363
+ [data-block-size="72"] {
1364
+ @apply h-72;
1365
+ }
1366
+ [data-size="80"],
1367
+ [data-block-size="80"] {
1368
+ @apply h-80;
1369
+ }
1370
+ [data-size="96"],
1371
+ [data-block-size="96"] {
1372
+ @apply h-96;
1373
+ }
1374
+ [data-size="0"],
1375
+ [data-inline-size="0"] {
1376
+ @apply w-0;
1377
+ }
1378
+ [data-size=px],
1379
+ [data-inline-size=px] {
1380
+ @apply w-px;
1381
+ }
1382
+ [data-size="0.5"],
1383
+ [data-inline-size="0.5"] {
1384
+ @apply w-0.5;
1385
+ }
1386
+ [data-size="1"],
1387
+ [data-inline-size="1"] {
1388
+ @apply w-1;
1389
+ }
1390
+ [data-size="1.5"],
1391
+ [data-inline-size="1.5"] {
1392
+ @apply w-1.5;
1393
+ }
1394
+ [data-size="2"],
1395
+ [data-inline-size="2"] {
1396
+ @apply w-2;
1397
+ }
1398
+ [data-size="2.5"],
1399
+ [data-inline-size="2.5"] {
1400
+ @apply w-2.5;
1401
+ }
1402
+ [data-size="3"],
1403
+ [data-inline-size="3"] {
1404
+ @apply w-3;
1405
+ }
1406
+ [data-size="3.5"],
1407
+ [data-inline-size="3.5"] {
1408
+ @apply w-3.5;
1409
+ }
1410
+ [data-size="4"],
1411
+ [data-inline-size="4"] {
1412
+ @apply w-4;
1413
+ }
1414
+ [data-size="5"],
1415
+ [data-inline-size="5"] {
1416
+ @apply w-5;
1417
+ }
1418
+ [data-size="6"],
1419
+ [data-inline-size="6"] {
1420
+ @apply w-6;
1421
+ }
1422
+ [data-size="7"],
1423
+ [data-inline-size="7"] {
1424
+ @apply w-7;
1425
+ }
1426
+ [data-size="8"],
1427
+ [data-inline-size="8"] {
1428
+ @apply w-8;
1429
+ }
1430
+ [data-size="9"],
1431
+ [data-inline-size="9"] {
1432
+ @apply w-9;
1433
+ }
1434
+ [data-size="10"],
1435
+ [data-inline-size="10"] {
1436
+ @apply w-10;
1437
+ }
1438
+ [data-size="11"],
1439
+ [data-inline-size="11"] {
1440
+ @apply w-11;
1441
+ }
1442
+ [data-size="12"],
1443
+ [data-inline-size="12"] {
1444
+ @apply w-12;
1445
+ }
1446
+ [data-size="14"],
1447
+ [data-inline-size="14"] {
1448
+ @apply w-14;
1449
+ }
1450
+ [data-size="16"],
1451
+ [data-inline-size="16"] {
1452
+ @apply w-16;
1453
+ }
1454
+ [data-size="20"],
1455
+ [data-inline-size="20"] {
1456
+ @apply w-20;
1457
+ }
1458
+ [data-size="24"],
1459
+ [data-inline-size="24"] {
1460
+ @apply w-24;
1461
+ }
1462
+ [data-size="28"],
1463
+ [data-inline-size="28"] {
1464
+ @apply w-28;
1465
+ }
1466
+ [data-size="32"],
1467
+ [data-inline-size="32"] {
1468
+ @apply w-32;
1469
+ }
1470
+ [data-size="36"],
1471
+ [data-inline-size="36"] {
1472
+ @apply w-36;
1473
+ }
1474
+ [data-size="40"],
1475
+ [data-inline-size="40"] {
1476
+ @apply w-40;
1477
+ }
1478
+ [data-size="44"],
1479
+ [data-inline-size="44"] {
1480
+ @apply w-44;
1481
+ }
1482
+ [data-size="48"],
1483
+ [data-inline-size="48"] {
1484
+ @apply w-48;
1485
+ }
1486
+ [data-size="52"],
1487
+ [data-inline-size="52"] {
1488
+ @apply w-52;
1489
+ }
1490
+ [data-size="56"],
1491
+ [data-inline-size="56"] {
1492
+ @apply w-56;
1493
+ }
1494
+ [data-size="60"],
1495
+ [data-inline-size="60"] {
1496
+ @apply w-60;
1497
+ }
1498
+ [data-size="64"],
1499
+ [data-inline-size="64"] {
1500
+ @apply w-64;
1501
+ }
1502
+ [data-size="72"],
1503
+ [data-inline-size="72"] {
1504
+ @apply w-72;
1505
+ }
1506
+ [data-size="80"],
1507
+ [data-inline-size="80"] {
1508
+ @apply w-80;
1509
+ }
1510
+ [data-size="96"],
1511
+ [data-inline-size="96"] {
1512
+ @apply w-96;
1513
+ }
1514
+ }
1515
+
1516
+ /* src/css/utilities.css */
1517
+ @utility dx-expander { @apply flex-1 min-h-0 min-w-0 h-full w-full; }
1518
+ @utility dx-container { @apply dx-expander overflow-hidden; }
1519
+ @utility dx-column { @apply flex-1 min-w-0 w-full; }
1520
+ @utility dx-fullscreen { @apply absolute inset-0; }
1521
+ @utility dx-slot-warning { @apply border border-rose-500 border-dashed; }
1522
+ @utility dx-ring-pseudo { @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:ring after:ring-inset after:ring-transparent; }
1523
+ @utility shimmer-text { mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); mask-size: 200% 100%; -webkit-mask-size: 200% 100%; mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x; animation: shimmer-text 2s linear infinite; }
1524
+ @media (prefers-reduced-motion: reduce) {
1525
+ .shimmer-text {
1526
+ animation: none;
1527
+ mask-image: none;
1528
+ -webkit-mask-image: none;
1529
+ opacity: 0.6;
1530
+ }
1531
+ }
1532
+
1533
+ /* src/css/integrations/codemirror.css */
1534
+ @theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800)); --color-cm-comment-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400)); --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500)); --color-cm-code-mark: var(--color-blue-500); --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400)); }
1535
+
1536
+ /* src/css/integrations/tldraw.css */
1537
+ .tl-background {
1538
+ --color-background: var(--color-base-surface);
1539
+ }
1540
+ .tl-container.tl-theme__light,
1541
+ .tl-container.tl-theme__dark {
1542
+ --color-selected: var(--color-accent-surface);
1543
+ --color-panel: var(--color-modal-surface);
1544
+ --color-panel-contrast: var(--color-separator);
1545
+ }
1546
+
1547
+ /* src/main.css */
1548
+ @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
1549
+ @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
1550
+ @source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
1551
+ @source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
1552
+ @source inline("border-{info,success,warning,error}-border");
1553
+ @plugin "@tailwindcss/forms";
1554
+ @plugin "tailwind-scrollbar";
1555
+ @plugin "tailwindcss-radix";
1556
+ @variant dark (&:where(.dark, .dark *));
1557
+ @custom-variant pointer-coarse (@media (pointer: coarse));
1558
+ @custom-variant pointer-fine (@media (pointer: fine));
1559
+ @custom-variant hover-hover (@media (hover: hover));
1560
+ @custom-variant is-current (&[aria-current]:not([aria-current="false"]));
1561
+ /*# sourceMappingURL=main.css.map */