@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

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 (394) hide show
  1. package/LICENSE +102 -5
  2. package/README.md +1 -1
  3. package/dist/lib/browser/index.mjs +765 -2903
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/node-esm/index.mjs +765 -2903
  7. package/dist/lib/node-esm/index.mjs.map +4 -4
  8. package/dist/lib/node-esm/meta.json +1 -1
  9. package/dist/plugin/node-cjs/main.css +1573 -0
  10. package/dist/plugin/node-cjs/main.css.map +7 -0
  11. package/dist/plugin/node-cjs/meta.json +1 -1
  12. package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs +137 -0
  13. package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map +7 -0
  14. package/dist/plugin/node-esm/main.css +1573 -0
  15. package/dist/plugin/node-esm/main.css.map +7 -0
  16. package/dist/plugin/node-esm/meta.json +1 -1
  17. package/dist/plugin/node-esm/plugins/ThemePlugin.mjs +105 -0
  18. package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +7 -0
  19. package/dist/types/src/Theme.stories.d.ts +27 -0
  20. package/dist/types/src/Theme.stories.d.ts.map +1 -0
  21. package/dist/types/src/defs.d.ts +21 -0
  22. package/dist/types/src/defs.d.ts.map +1 -0
  23. package/dist/types/src/fragments/density.d.ts +4 -0
  24. package/dist/types/src/fragments/density.d.ts.map +1 -0
  25. package/dist/types/src/fragments/disabled.d.ts.map +1 -0
  26. package/dist/types/src/fragments/hover.d.ts +9 -0
  27. package/dist/types/src/fragments/hover.d.ts.map +1 -0
  28. package/dist/types/src/fragments/index.d.ts +5 -0
  29. package/dist/types/src/fragments/index.d.ts.map +1 -0
  30. package/dist/types/src/fragments/text.d.ts +2 -0
  31. package/dist/types/src/fragments/text.d.ts.map +1 -0
  32. package/dist/types/src/index.d.ts +3 -11
  33. package/dist/types/src/index.d.ts.map +1 -1
  34. package/dist/types/src/plugins/ThemePlugin.d.ts +16 -0
  35. package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -0
  36. package/dist/types/src/plugins/dark-mode.d.ts +1 -0
  37. package/dist/types/src/plugins/dark-mode.d.ts.map +1 -0
  38. package/dist/types/src/theme/components/avatar.d.ts.map +1 -0
  39. package/dist/types/src/theme/components/breadcrumb.d.ts.map +1 -0
  40. package/dist/types/src/theme/components/button.d.ts +15 -0
  41. package/dist/types/src/theme/components/button.d.ts.map +1 -0
  42. package/dist/types/src/theme/components/card.d.ts +12 -0
  43. package/dist/types/src/theme/components/card.d.ts.map +1 -0
  44. package/dist/types/src/theme/components/dialog.d.ts.map +1 -0
  45. package/dist/types/src/theme/components/focus.d.ts +6 -0
  46. package/dist/types/src/theme/components/focus.d.ts.map +1 -0
  47. package/dist/types/src/{styles → theme}/components/icon-button.d.ts +1 -0
  48. package/dist/types/src/theme/components/icon-button.d.ts.map +1 -0
  49. package/dist/types/src/{styles → theme}/components/icon.d.ts +3 -0
  50. package/dist/types/src/theme/components/icon.d.ts.map +1 -0
  51. package/dist/types/src/{styles → theme}/components/index.d.ts +3 -1
  52. package/dist/types/src/theme/components/index.d.ts.map +1 -0
  53. package/dist/types/src/{styles → theme}/components/input.d.ts +31 -27
  54. package/dist/types/src/theme/components/input.d.ts.map +1 -0
  55. package/dist/types/src/theme/components/link.d.ts.map +1 -0
  56. package/dist/types/src/theme/components/list.d.ts.map +1 -0
  57. package/dist/types/src/{styles → theme}/components/main.d.ts +2 -2
  58. package/dist/types/src/theme/components/main.d.ts.map +1 -0
  59. package/dist/types/src/{styles → theme}/components/menu.d.ts +1 -1
  60. package/dist/types/src/theme/components/menu.d.ts.map +1 -0
  61. package/dist/types/src/{styles → theme}/components/message.d.ts +1 -0
  62. package/dist/types/src/theme/components/message.d.ts.map +1 -0
  63. package/dist/types/src/{styles → theme}/components/popover.d.ts +1 -1
  64. package/dist/types/src/theme/components/popover.d.ts.map +1 -0
  65. package/dist/types/src/{styles → theme}/components/scroll-area.d.ts +17 -1
  66. package/dist/types/src/theme/components/scroll-area.d.ts.map +1 -0
  67. package/dist/types/src/theme/components/select.d.ts.map +1 -0
  68. package/dist/types/src/theme/components/separator.d.ts.map +1 -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/{styles → theme}/components/toolbar.d.ts +2 -2
  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/{styles → theme}/index.d.ts +0 -1
  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.map +1 -0
  89. package/dist/types/src/{styles/fragments → util}/elevation.d.ts +0 -6
  90. package/dist/types/src/util/elevation.d.ts.map +1 -0
  91. package/dist/types/src/util/hash-styles.d.ts +8 -5
  92. package/dist/types/src/util/hash-styles.d.ts.map +1 -1
  93. package/dist/types/src/util/index.d.ts +3 -0
  94. package/dist/types/src/util/index.d.ts.map +1 -1
  95. package/dist/types/src/util/mx.d.ts +56 -0
  96. package/dist/types/src/util/mx.d.ts.map +1 -1
  97. package/dist/types/src/util/size.d.ts +27 -0
  98. package/dist/types/src/util/size.d.ts.map +1 -0
  99. package/dist/types/src/util/valence.d.ts +4 -0
  100. package/dist/types/src/util/valence.d.ts.map +1 -0
  101. package/dist/types/tsconfig.tsbuildinfo +1 -1
  102. package/package.json +27 -38
  103. package/src/Theme.stories.tsx +224 -0
  104. package/src/css/DESIGN_SYSTEM.md +159 -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 -11
  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 +12 -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 +76 -0
  116. package/src/css/components/selected.md +101 -0
  117. package/src/css/components/surface.css +34 -0
  118. package/src/css/components/tag.css +132 -0
  119. package/src/css/components/text.css +124 -0
  120. package/src/css/integrations/codemirror.css +34 -0
  121. package/src/css/integrations/tldraw.css +14 -0
  122. package/src/css/layout/main.css +205 -0
  123. package/src/{styles/layers → css/layout}/native.css +6 -4
  124. package/src/css/layout/positioning.css +19 -0
  125. package/src/{styles/layers → css/layout}/size.css +129 -106
  126. package/src/css/theme/animation.css +260 -0
  127. package/src/css/theme/border.css +23 -0
  128. package/src/css/theme/palette.css +36 -0
  129. package/src/css/theme/semantic.css +112 -0
  130. package/src/css/theme/spacing.css +147 -0
  131. package/src/css/theme/styles.css +145 -0
  132. package/src/css/theme/text.css +37 -0
  133. package/src/css/utilities.css +118 -0
  134. package/src/defs.ts +48 -0
  135. package/src/fragments/AUDIT.md +55 -0
  136. package/src/fragments/density.ts +16 -0
  137. package/src/fragments/hover.ts +16 -0
  138. package/src/fragments/index.ts +10 -0
  139. package/src/fragments/text.ts +6 -0
  140. package/src/index.ts +3 -15
  141. package/src/main.css +121 -0
  142. package/src/plugins/ThemePlugin.ts +125 -0
  143. package/src/plugins/dark-mode.ts +22 -0
  144. package/src/plugins/main.css +45 -0
  145. package/src/{styles → theme}/components/avatar.ts +12 -13
  146. package/src/theme/components/button.ts +48 -0
  147. package/src/theme/components/card.ts +102 -0
  148. package/src/{styles → theme}/components/dialog.ts +13 -12
  149. package/src/theme/components/focus.ts +33 -0
  150. package/src/{styles → theme}/components/icon-button.ts +6 -5
  151. package/src/theme/components/icon.ts +28 -0
  152. package/src/{styles → theme}/components/index.ts +3 -1
  153. package/src/theme/components/input.ts +171 -0
  154. package/src/{styles → theme}/components/link.ts +3 -4
  155. package/src/{styles → theme}/components/list.ts +5 -5
  156. package/src/{styles → theme}/components/main.ts +2 -2
  157. package/src/{styles → theme}/components/menu.ts +11 -13
  158. package/src/{styles → theme}/components/message.ts +11 -7
  159. package/src/{styles → theme}/components/popover.ts +13 -12
  160. package/src/theme/components/scroll-area.ts +115 -0
  161. package/src/{styles → theme}/components/select.ts +8 -16
  162. package/src/{styles → theme}/components/separator.ts +3 -3
  163. package/src/{styles → theme}/components/skeleton.ts +2 -2
  164. package/src/theme/components/splitter.ts +20 -0
  165. package/src/{styles → theme}/components/status.ts +7 -7
  166. package/src/{styles → theme}/components/tag.ts +1 -1
  167. package/src/{styles → theme}/components/toast.ts +6 -8
  168. package/src/{styles → theme}/components/toolbar.ts +6 -7
  169. package/src/{styles → theme}/components/tooltip.ts +4 -6
  170. package/src/{styles → theme}/components/treegrid.ts +9 -9
  171. package/src/{styles → theme}/index.ts +1 -2
  172. package/src/theme/primitives/column.ts +71 -0
  173. package/src/theme/primitives/index.ts +6 -0
  174. package/src/theme/primitives/panel.ts +43 -0
  175. package/src/{styles → theme}/theme.ts +13 -19
  176. package/src/typings.d.ts +3 -1
  177. package/src/{styles/fragments → util}/elevation.ts +6 -8
  178. package/src/util/hash-styles.ts +118 -98
  179. package/src/util/index.ts +3 -0
  180. package/src/util/mx.ts +165 -43
  181. package/src/util/size.ts +103 -0
  182. package/src/util/valence.ts +33 -0
  183. package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs +0 -79
  184. package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs.map +0 -7
  185. package/dist/plugin/node-cjs/chunk-YBWOZKXY.cjs +0 -1634
  186. package/dist/plugin/node-cjs/chunk-YBWOZKXY.cjs.map +0 -7
  187. package/dist/plugin/node-cjs/config/tailwind.cjs +0 -29
  188. package/dist/plugin/node-cjs/config/tailwind.cjs.map +0 -7
  189. package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs +0 -90
  190. package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs.map +0 -7
  191. package/dist/plugin/node-cjs/plugins/plugin.cjs +0 -124
  192. package/dist/plugin/node-cjs/plugins/plugin.cjs.map +0 -7
  193. package/dist/plugin/node-cjs/theme.css +0 -1378
  194. package/dist/plugin/node-cjs/theme.css.map +0 -7
  195. package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs +0 -49
  196. package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs.map +0 -7
  197. package/dist/plugin/node-esm/chunk-LTGUAP22.mjs +0 -1629
  198. package/dist/plugin/node-esm/chunk-LTGUAP22.mjs.map +0 -7
  199. package/dist/plugin/node-esm/config/tailwind.mjs +0 -8
  200. package/dist/plugin/node-esm/config/tailwind.mjs.map +0 -7
  201. package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs +0 -63
  202. package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs.map +0 -7
  203. package/dist/plugin/node-esm/plugins/plugin.mjs +0 -98
  204. package/dist/plugin/node-esm/plugins/plugin.mjs.map +0 -7
  205. package/dist/plugin/node-esm/theme.css +0 -1378
  206. package/dist/plugin/node-esm/theme.css.map +0 -7
  207. package/dist/types/src/Tokens.stories.d.ts +0 -10
  208. package/dist/types/src/Tokens.stories.d.ts.map +0 -1
  209. package/dist/types/src/config/index.d.ts +0 -3
  210. package/dist/types/src/config/index.d.ts.map +0 -1
  211. package/dist/types/src/config/tailwind.d.ts +0 -9
  212. package/dist/types/src/config/tailwind.d.ts.map +0 -1
  213. package/dist/types/src/config/tokens/alias-colors.d.ts +0 -21
  214. package/dist/types/src/config/tokens/alias-colors.d.ts.map +0 -1
  215. package/dist/types/src/config/tokens/index.d.ts +0 -3
  216. package/dist/types/src/config/tokens/index.d.ts.map +0 -1
  217. package/dist/types/src/config/tokens/lengths.d.ts +0 -142
  218. package/dist/types/src/config/tokens/lengths.d.ts.map +0 -1
  219. package/dist/types/src/config/tokens/physical-colors.d.ts +0 -23
  220. package/dist/types/src/config/tokens/physical-colors.d.ts.map +0 -1
  221. package/dist/types/src/config/tokens/semantic-colors.d.ts +0 -192
  222. package/dist/types/src/config/tokens/semantic-colors.d.ts.map +0 -1
  223. package/dist/types/src/config/tokens/sememes-calls.d.ts +0 -3
  224. package/dist/types/src/config/tokens/sememes-calls.d.ts.map +0 -1
  225. package/dist/types/src/config/tokens/sememes-codemirror.d.ts +0 -43
  226. package/dist/types/src/config/tokens/sememes-codemirror.d.ts.map +0 -1
  227. package/dist/types/src/config/tokens/sememes-hue.d.ts +0 -4
  228. package/dist/types/src/config/tokens/sememes-hue.d.ts.map +0 -1
  229. package/dist/types/src/config/tokens/sememes-sheet.d.ts +0 -58
  230. package/dist/types/src/config/tokens/sememes-sheet.d.ts.map +0 -1
  231. package/dist/types/src/config/tokens/sememes-system.d.ts +0 -104
  232. package/dist/types/src/config/tokens/sememes-system.d.ts.map +0 -1
  233. package/dist/types/src/config/tokens/sizes.d.ts +0 -9
  234. package/dist/types/src/config/tokens/sizes.d.ts.map +0 -1
  235. package/dist/types/src/config/tokens/tokens.d.ts +0 -498
  236. package/dist/types/src/config/tokens/tokens.d.ts.map +0 -1
  237. package/dist/types/src/config/tokens/types.d.ts +0 -5
  238. package/dist/types/src/config/tokens/types.d.ts.map +0 -1
  239. package/dist/types/src/plugins/esbuild-plugin.d.ts +0 -9
  240. package/dist/types/src/plugins/esbuild-plugin.d.ts.map +0 -1
  241. package/dist/types/src/plugins/plugin.d.ts +0 -20
  242. package/dist/types/src/plugins/plugin.d.ts.map +0 -1
  243. package/dist/types/src/plugins/resolveContent.d.ts +0 -2
  244. package/dist/types/src/plugins/resolveContent.d.ts.map +0 -1
  245. package/dist/types/src/styles/components/anchored-overflow.d.ts +0 -6
  246. package/dist/types/src/styles/components/anchored-overflow.d.ts.map +0 -1
  247. package/dist/types/src/styles/components/avatar.d.ts.map +0 -1
  248. package/dist/types/src/styles/components/breadcrumb.d.ts.map +0 -1
  249. package/dist/types/src/styles/components/button.d.ts +0 -19
  250. package/dist/types/src/styles/components/button.d.ts.map +0 -1
  251. package/dist/types/src/styles/components/dialog.d.ts.map +0 -1
  252. package/dist/types/src/styles/components/icon-button.d.ts.map +0 -1
  253. package/dist/types/src/styles/components/icon.d.ts.map +0 -1
  254. package/dist/types/src/styles/components/index.d.ts.map +0 -1
  255. package/dist/types/src/styles/components/input.d.ts.map +0 -1
  256. package/dist/types/src/styles/components/link.d.ts.map +0 -1
  257. package/dist/types/src/styles/components/list.d.ts.map +0 -1
  258. package/dist/types/src/styles/components/main.d.ts.map +0 -1
  259. package/dist/types/src/styles/components/menu.d.ts.map +0 -1
  260. package/dist/types/src/styles/components/message.d.ts.map +0 -1
  261. package/dist/types/src/styles/components/popover.d.ts.map +0 -1
  262. package/dist/types/src/styles/components/scroll-area.d.ts.map +0 -1
  263. package/dist/types/src/styles/components/select.d.ts.map +0 -1
  264. package/dist/types/src/styles/components/separator.d.ts.map +0 -1
  265. package/dist/types/src/styles/components/skeleton.d.ts.map +0 -1
  266. package/dist/types/src/styles/components/status.d.ts.map +0 -1
  267. package/dist/types/src/styles/components/tag.d.ts.map +0 -1
  268. package/dist/types/src/styles/components/toast.d.ts.map +0 -1
  269. package/dist/types/src/styles/components/toolbar.d.ts.map +0 -1
  270. package/dist/types/src/styles/components/tooltip.d.ts.map +0 -1
  271. package/dist/types/src/styles/components/treegrid.d.ts.map +0 -1
  272. package/dist/types/src/styles/fragments/density.d.ts +0 -13
  273. package/dist/types/src/styles/fragments/density.d.ts.map +0 -1
  274. package/dist/types/src/styles/fragments/dimension.d.ts +0 -5
  275. package/dist/types/src/styles/fragments/dimension.d.ts.map +0 -1
  276. package/dist/types/src/styles/fragments/disabled.d.ts.map +0 -1
  277. package/dist/types/src/styles/fragments/elevation.d.ts.map +0 -1
  278. package/dist/types/src/styles/fragments/focus.d.ts +0 -6
  279. package/dist/types/src/styles/fragments/focus.d.ts.map +0 -1
  280. package/dist/types/src/styles/fragments/group.d.ts +0 -5
  281. package/dist/types/src/styles/fragments/group.d.ts.map +0 -1
  282. package/dist/types/src/styles/fragments/hover.d.ts +0 -17
  283. package/dist/types/src/styles/fragments/hover.d.ts.map +0 -1
  284. package/dist/types/src/styles/fragments/index.d.ts +0 -17
  285. package/dist/types/src/styles/fragments/index.d.ts.map +0 -1
  286. package/dist/types/src/styles/fragments/layout.d.ts +0 -3
  287. package/dist/types/src/styles/fragments/layout.d.ts.map +0 -1
  288. package/dist/types/src/styles/fragments/motion.d.ts +0 -2
  289. package/dist/types/src/styles/fragments/motion.d.ts.map +0 -1
  290. package/dist/types/src/styles/fragments/ornament.d.ts +0 -5
  291. package/dist/types/src/styles/fragments/ornament.d.ts.map +0 -1
  292. package/dist/types/src/styles/fragments/selected.d.ts +0 -13
  293. package/dist/types/src/styles/fragments/selected.d.ts.map +0 -1
  294. package/dist/types/src/styles/fragments/shimmer.d.ts +0 -3
  295. package/dist/types/src/styles/fragments/shimmer.d.ts.map +0 -1
  296. package/dist/types/src/styles/fragments/size.d.ts +0 -9
  297. package/dist/types/src/styles/fragments/size.d.ts.map +0 -1
  298. package/dist/types/src/styles/fragments/surface.d.ts +0 -9
  299. package/dist/types/src/styles/fragments/surface.d.ts.map +0 -1
  300. package/dist/types/src/styles/fragments/text.d.ts +0 -7
  301. package/dist/types/src/styles/fragments/text.d.ts.map +0 -1
  302. package/dist/types/src/styles/fragments/valence.d.ts +0 -13
  303. package/dist/types/src/styles/fragments/valence.d.ts.map +0 -1
  304. package/dist/types/src/styles/index.d.ts.map +0 -1
  305. package/dist/types/src/styles/primitives/container.d.ts +0 -15
  306. package/dist/types/src/styles/primitives/container.d.ts.map +0 -1
  307. package/dist/types/src/styles/primitives/index.d.ts +0 -2
  308. package/dist/types/src/styles/primitives/index.d.ts.map +0 -1
  309. package/dist/types/src/styles/theme.d.ts.map +0 -1
  310. package/dist/types/src/tailwind.d.ts +0 -3
  311. package/dist/types/src/tailwind.d.ts.map +0 -1
  312. package/dist/types/src/types.d.ts +0 -3
  313. package/dist/types/src/types.d.ts.map +0 -1
  314. package/dist/types/src/util/withLogical.d.ts +0 -164
  315. package/dist/types/src/util/withLogical.d.ts.map +0 -1
  316. package/src/Tokens.stories.tsx +0 -88
  317. package/src/config/index.ts +0 -6
  318. package/src/config/tailwind.ts +0 -265
  319. package/src/config/tokens/alias-colors.ts +0 -39
  320. package/src/config/tokens/index.ts +0 -6
  321. package/src/config/tokens/lengths.ts +0 -106
  322. package/src/config/tokens/physical-colors.ts +0 -125
  323. package/src/config/tokens/semantic-colors.ts +0 -27
  324. package/src/config/tokens/sememes-calls.ts +0 -17
  325. package/src/config/tokens/sememes-codemirror.ts +0 -50
  326. package/src/config/tokens/sememes-hue.ts +0 -54
  327. package/src/config/tokens/sememes-sheet.ts +0 -62
  328. package/src/config/tokens/sememes-system.ts +0 -307
  329. package/src/config/tokens/sizes.ts +0 -12
  330. package/src/config/tokens/tokens.ts +0 -90
  331. package/src/config/tokens/types.ts +0 -9
  332. package/src/docs/theme.drawio.svg +0 -635
  333. package/src/plugins/esbuild-plugin.ts +0 -65
  334. package/src/plugins/plugin.ts +0 -130
  335. package/src/plugins/resolveContent.ts +0 -51
  336. package/src/styles/components/README.md +0 -6
  337. package/src/styles/components/anchored-overflow.ts +0 -20
  338. package/src/styles/components/button.ts +0 -48
  339. package/src/styles/components/icon.ts +0 -19
  340. package/src/styles/components/input.ts +0 -177
  341. package/src/styles/components/scroll-area.ts +0 -90
  342. package/src/styles/fragments/density.ts +0 -17
  343. package/src/styles/fragments/dimension.ts +0 -8
  344. package/src/styles/fragments/focus.ts +0 -16
  345. package/src/styles/fragments/group.ts +0 -12
  346. package/src/styles/fragments/hover.ts +0 -25
  347. package/src/styles/fragments/index.ts +0 -20
  348. package/src/styles/fragments/layout.ts +0 -7
  349. package/src/styles/fragments/motion.ts +0 -6
  350. package/src/styles/fragments/ornament.ts +0 -10
  351. package/src/styles/fragments/selected.ts +0 -45
  352. package/src/styles/fragments/shimmer.ts +0 -9
  353. package/src/styles/fragments/size.ts +0 -117
  354. package/src/styles/fragments/surface.ts +0 -29
  355. package/src/styles/fragments/text.ts +0 -12
  356. package/src/styles/fragments/valence.ts +0 -46
  357. package/src/styles/layers/README.md +0 -15
  358. package/src/styles/layers/anchored-overflow.css +0 -9
  359. package/src/styles/layers/animation.css +0 -17
  360. package/src/styles/layers/attention.css +0 -8
  361. package/src/styles/layers/base.css +0 -25
  362. package/src/styles/layers/can-scroll.css +0 -26
  363. package/src/styles/layers/drag-preview.css +0 -18
  364. package/src/styles/layers/hues.css +0 -110
  365. package/src/styles/layers/index.css +0 -27
  366. package/src/styles/layers/main.css +0 -183
  367. package/src/styles/layers/positioning.css +0 -23
  368. package/src/styles/layers/scrollbar.css +0 -10
  369. package/src/styles/layers/surfaces.css +0 -31
  370. package/src/styles/layers/tag.css +0 -132
  371. package/src/styles/layers/tldraw.css +0 -91
  372. package/src/styles/layers/tokens.css +0 -47
  373. package/src/styles/primitives/container.ts +0 -33
  374. package/src/styles/primitives/index.ts +0 -5
  375. package/src/tailwind.ts +0 -7
  376. package/src/theme.css +0 -9
  377. package/src/types.ts +0 -7
  378. package/src/util/withLogical.ts +0 -114
  379. /package/dist/types/src/{styles/fragments → fragments}/disabled.d.ts +0 -0
  380. /package/dist/types/src/{styles → theme}/components/avatar.d.ts +0 -0
  381. /package/dist/types/src/{styles → theme}/components/breadcrumb.d.ts +0 -0
  382. /package/dist/types/src/{styles → theme}/components/dialog.d.ts +0 -0
  383. /package/dist/types/src/{styles → theme}/components/link.d.ts +0 -0
  384. /package/dist/types/src/{styles → theme}/components/list.d.ts +0 -0
  385. /package/dist/types/src/{styles → theme}/components/select.d.ts +0 -0
  386. /package/dist/types/src/{styles → theme}/components/separator.d.ts +0 -0
  387. /package/dist/types/src/{styles → theme}/components/skeleton.d.ts +0 -0
  388. /package/dist/types/src/{styles → theme}/components/tag.d.ts +0 -0
  389. /package/dist/types/src/{styles → theme}/components/toast.d.ts +0 -0
  390. /package/dist/types/src/{styles → theme}/components/tooltip.d.ts +0 -0
  391. /package/dist/types/src/{styles → theme}/components/treegrid.d.ts +0 -0
  392. /package/dist/types/src/{styles → theme}/theme.d.ts +0 -0
  393. /package/src/{styles/fragments → fragments}/disabled.ts +0 -0
  394. /package/src/{styles → theme}/components/breadcrumb.ts +0 -0
@@ -1,1378 +0,0 @@
1
- @import "tailwindcss/base" layer(tw-base);
2
- @import "tailwindcss/utilities";
3
- @import "tailwindcss/components" layer(tw-components);
4
- @import "@fontsource-variable/jetbrains-mono/wght-italic.css";
5
- @import "@fontsource-variable/jetbrains-mono/wght.css";
6
- @import "@fontsource/poiret-one";
7
-
8
- /* src/styles/layers/anchored-overflow.css */
9
- @layer utilities {
10
- .overflow-anchored * {
11
- overflow-anchor: none;
12
- }
13
- .overflow-anchor {
14
- overflow-anchor: auto;
15
- }
16
- }
17
-
18
- /* src/styles/layers/animation.css */
19
- @layer utilities {
20
- @keyframes blink {
21
- 0%, 50%, 100% {
22
- opacity: 1;
23
- }
24
- 25%, 75% {
25
- opacity: 0;
26
- }
27
- }
28
- .animate-blink {
29
- animation: blink 1s step-start infinite;
30
- }
31
- }
32
-
33
- /* src/styles/layers/attention.css */
34
- @layer utilities {
35
- .attention-surface {
36
- --surface-separator: transparent;
37
- background-color: var(--dx-baseSurface);
38
- border-color: var(--dx-separator);
39
- }
40
- }
41
-
42
- /* src/styles/layers/base.css */
43
- @layer dx-base {
44
- :root {
45
- touch-action: pan-x pan-y;
46
- font-synthesis: none;
47
- font-variation-settings: "wght" 400, "slnt" 0;
48
- scroll-padding-block-start: theme(spacing.14);
49
- scroll-padding-block-end: theme(spacing.2);
50
- @apply font-body;
51
- }
52
- button {
53
- -webkit-tap-highlight-color: transparent;
54
- }
55
- }
56
- @layer dx-tokens {
57
- html,
58
- html.dark,
59
- html .dark {
60
- background-color: var(--dx-baseSurface);
61
- --surface-bg: var(--dx-baseSurface);
62
- color: var(--dx-baseText);
63
- --surface-text: var(--dx-baseText);
64
- --description-text: var(--dx-description);
65
- }
66
- }
67
-
68
- /* src/styles/layers/button.css */
69
- @layer dx-components {
70
- .dx-button {
71
- @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-inputSurface min-bs-[2.5rem] pli-3;
72
- &[aria-pressed=true],
73
- &[aria-checked=true] {
74
- @apply text-accentText bg-attention;
75
- }
76
- &[disabled]:not([disabled=false]) {
77
- @apply opacity-40 cursor-not-allowed shadow-none;
78
- }
79
- &[data-variant=ghost] {
80
- @apply bg-transparent;
81
- &:hover {
82
- @apply bg-hoverSurface text-inherit;
83
- }
84
- &[data-state=open] {
85
- @apply bg-inputSurface;
86
- }
87
- &[aria-pressed=true],
88
- &[aria-checked=true] {
89
- @apply bg-baseSurface text-accentText;
90
- }
91
- }
92
- &[data-variant=outline] {
93
- @apply border border-baseSurface bg-transparent;
94
- &:hover {
95
- @apply bg-hoverSurface;
96
- }
97
- }
98
- &:not([disabled]),
99
- &[disabled=false] {
100
- &:hover {
101
- @apply bg-hoverSurface;
102
- }
103
- &[data-variant=primary] {
104
- @apply text-accentSurfaceText bg-accentSurface;
105
- &:hover,
106
- &[aria-pressed=true],
107
- &[aria-checked=true] &[data-state=open] {
108
- @apply bg-accentSurfaceHover;
109
- }
110
- }
111
- &[data-variant=destructive] {
112
- @apply text-accentSurfaceText bg-roseFill;
113
- &:hover,
114
- &[aria-pressed=true],
115
- &[aria-checked=true] &[data-state=open] {
116
- @apply bg-roseFill;
117
- }
118
- }
119
- }
120
- }
121
- .dx-button:not([data-props~=grouped]) {
122
- @apply rounded-sm;
123
- }
124
- .dx-button:not([data-props~=wrap]) {
125
- @apply truncate;
126
- }
127
- @media (pointer: fine) {
128
- .dx-button[data-density=fine] {
129
- @apply min-bs-[2rem] pli-2.5;
130
- }
131
- }
132
- }
133
-
134
- /* src/styles/layers/can-scroll.css */
135
- @layer dx-components {
136
- :root {
137
- --can-scroll-inline: initial;
138
- }
139
- @keyframes detect-scroll-inline {
140
- from, to {
141
- --can-scroll-inline: ;
142
- }
143
- }
144
- .justify-center-if-no-scroll {
145
- justify-content: start;
146
- }
147
- @supports (animation-timeline: scroll(inline self)) {
148
- .justify-center-if-no-scroll {
149
- animation: detect-scroll-inline linear;
150
- animation-timeline: scroll(inline self);
151
- --justify-if-no-scroll: center;
152
- --justify-if-can-scroll: var(--can-scroll-inline) start;
153
- justify-content: var(--justify-if-can-scroll, var(--justify-if-no-scroll));
154
- }
155
- }
156
- }
157
-
158
- /* src/styles/layers/checkbox.css */
159
- @layer dx-components {
160
- .dx-checkbox--switch,
161
- .dx-checkbox {
162
- @apply border border-unAccent;
163
- &[aria-checked=true],
164
- &[aria-checked=mixed],
165
- &:checked {
166
- @apply bg-accentSurface accent-accentSurface border-accentSurface;
167
- }
168
- &:not([disabled]),
169
- &[disabled=false] {
170
- &:hover {
171
- @apply bg-unAccentHover accent-unAccentHover;
172
- &[aria-checked=true],
173
- &[aria-checked=mixed],
174
- &:checked {
175
- @apply bg-accentSurfaceHover accent-accentSurfaceHover border-accentSurfaceHover;
176
- }
177
- }
178
- }
179
- }
180
- .dx-checkbox {
181
- @apply is-4 bs-4 overflow-hidden shadow-inner transition-colors bg-unAccent accent-unAccent text-accentSurfaceText shrink-0 inline-grid place-items-center rounded-sm;
182
- }
183
- .dx-checkbox--switch {
184
- @apply inline-block appearance-none relative shrink-0 bs-5 is-8;
185
- @apply shadow-inner transition-colors bg-unAccent;
186
- @apply cursor-pointer rounded-full;
187
- &::before {
188
- @apply is-3 bs-3 mli-[0.1875rem] mlb-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
189
- content: "";
190
- }
191
- &[aria-checked=true],
192
- &[aria-checked=mixed],
193
- &:checked {
194
- background-image: none;
195
- &::before {
196
- @apply translate-x-[100%];
197
- }
198
- }
199
- }
200
- }
201
-
202
- /* src/styles/layers/dialog.css */
203
- @layer dx-components {
204
- .dx-dialog__overlay {
205
- @apply z-50 fixed grid inset-inline-0 block-start-0 bs-dvh pbs-[env(safe-area-inset-top)] place-items-center overflow-auto bg-scrimSurface;
206
- &[data-state=open] {
207
- @apply animate-fade-in;
208
- }
209
- &[data-state=closed] {
210
- @apply animate-fade-out;
211
- }
212
- &[data-block-align=start] {
213
- align-items: start;
214
- justify-items: center;
215
- }
216
- &[data-block-align=center] {
217
- place-items: center;
218
- }
219
- &[data-block-align=end] {
220
- align-items: end;
221
- justify-items: center;
222
- }
223
- }
224
- @media (min-width: theme("screens.sm")) {
225
- .dx-dialog__overlay {
226
- @apply p-[calc(env(safe-area-inset-top)+.6rem)];
227
- }
228
- }
229
- @media (min-width: theme("screens.md")) {
230
- .dx-dialog__overlay {
231
- @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
232
- }
233
- }
234
- @media (min-width: theme("screens.lg")) {
235
- .dx-dialog__overlay {
236
- @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
237
- }
238
- }
239
- .dx-dialog__content {
240
- @apply flex flex-col is-dvw max-bs-full max-is-full p-4 overflow-hidden shadow-md backdrop-blur;
241
- &[data-state=open] {
242
- @apply animate-slide-up-and-fade;
243
- }
244
- &[data-state=closed] {
245
- @apply animate-slide-down-and-fade;
246
- }
247
- }
248
- @media (min-width: theme("screens.sm")) {
249
- .dx-dialog__content {
250
- @apply is-[95vw] border rounded-md border-separator;
251
- }
252
- }
253
- @media (min-width: theme("screens.md")) {
254
- .dx-dialog__content {
255
- @apply max-is-[24rem];
256
- }
257
- }
258
- .dx-dialog__title {
259
- @apply shrink-0 text-xl font-medium;
260
- }
261
- }
262
-
263
- /* src/styles/layers/drag-preview.css */
264
- @layer dx-base {
265
- body[data-drag-preview] {
266
- i[data-tabster-dummy] {
267
- display: none;
268
- }
269
- }
270
- }
271
- @layer utilities {
272
- body[data-drag-preview] {
273
- .drag-preview-p-0 {
274
- padding-inline-start: 0;
275
- padding-inline-end: 0;
276
- padding-block-start: 0;
277
- padding-block-end: 0;
278
- }
279
- }
280
- }
281
-
282
- /* src/styles/layers/focus-ring.css */
283
- @layer utilities {
284
- .dx-focus-ring,
285
- .dx-focus-ring-inset {
286
- &:not([disabled]),
287
- &[disabled=false] {
288
- &:focus {
289
- @apply outline-none;
290
- }
291
- &:focus-visible {
292
- @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
293
- &[data-variant=primary] {
294
- @apply ring-accentFocusIndicator;
295
- }
296
- &:hover {
297
- @apply outline-none;
298
- .dark & {
299
- @apply outline-none;
300
- }
301
- }
302
- }
303
- }
304
- }
305
- .dx-focus-ring-always,
306
- .dx-focus-ring-inset-always {
307
- &:not([disabled]),
308
- &[disabled=false] {
309
- &:focus {
310
- @apply outline-none;
311
- }
312
- &:focus {
313
- @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
314
- &[data-variant=primary] {
315
- @apply ring-accentFocusIndicator;
316
- }
317
- &:hover {
318
- @apply outline-none;
319
- .dark & {
320
- @apply outline-none;
321
- }
322
- }
323
- }
324
- }
325
- }
326
- .dx-focus-ring-group,
327
- .dx-focus-ring-group-x,
328
- .dx-focus-ring-group-y,
329
- .dx-focus-ring-group-always,
330
- .dx-focus-ring-group-x-always,
331
- .dx-focus-ring-group-y-always {
332
- &:not([disabled]),
333
- &[disabled=false] {
334
- &:focus {
335
- @apply outline-none;
336
- }
337
- }
338
- }
339
- .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
340
- .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
341
- .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
342
- @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
343
- &[data-variant=primary] {
344
- @apply ring-accentFocusIndicator;
345
- }
346
- &:hover {
347
- @apply outline-none;
348
- .dark & {
349
- @apply outline-none;
350
- }
351
- }
352
- }
353
- .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
354
- .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
355
- .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
356
- @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
357
- &[data-variant=primary] {
358
- @apply ring-accentFocusIndicator;
359
- }
360
- &:hover {
361
- @apply outline-none;
362
- .dark & {
363
- @apply outline-none;
364
- }
365
- }
366
- }
367
- .dx-focus-ring-inset {
368
- &:not([disabled]),
369
- &[disabled=false] {
370
- &:focus-visible {
371
- @apply ring-inset;
372
- }
373
- }
374
- }
375
- .dx-focus-ring-inset-always {
376
- &:not([disabled]),
377
- &[disabled=false] {
378
- &:focus {
379
- @apply ring-inset;
380
- }
381
- }
382
- }
383
- .dx-focus-ring-inset-over-all,
384
- .dx-focus-ring-main[data-handles-focus=true] {
385
- &:not([disabled]),
386
- &[disabled=false] {
387
- &::after {
388
- content: "";
389
- @apply z-20 pointer-events-none;
390
- }
391
- &:focus {
392
- @apply outline-none;
393
- }
394
- &:focus-visible {
395
- &::after {
396
- @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
397
- }
398
- &[data-variant=primary]::after {
399
- @apply ring-accentFocusIndicator;
400
- }
401
- &:hover {
402
- @apply outline-none;
403
- .dark & {
404
- @apply outline-none;
405
- }
406
- }
407
- }
408
- }
409
- }
410
- .dx-focus-ring-inset-over-all-always,
411
- .dx-focus-ring-main-always[data-handles-focus=true] {
412
- &:not([disabled]),
413
- &[disabled=false] {
414
- &::after {
415
- content: "";
416
- @apply z-20 pointer-events-none;
417
- }
418
- &:focus {
419
- @apply outline-none;
420
- }
421
- &:focus {
422
- &::after {
423
- @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
424
- }
425
- &[data-variant=primary]::after {
426
- @apply ring-accentFocusIndicator;
427
- }
428
- &:hover {
429
- @apply outline-none;
430
- .dark & {
431
- @apply outline-none;
432
- }
433
- }
434
- }
435
- }
436
- }
437
- .dx-focus-ring-inset-over-all,
438
- .dx-focus-ring-inset-over-all-always {
439
- &:not([disabled]),
440
- &[disabled=false] {
441
- &::after {
442
- @apply inset-0 absolute;
443
- }
444
- }
445
- }
446
- .dx-focus-ring-main[data-handles-focus=true] {
447
- &:not([disabled]),
448
- &[disabled=false] {
449
- &::after {
450
- position: fixed;
451
- inset: 0;
452
- }
453
- @media screen(lg) {
454
- &[data-sidebar-inline-start-state=expanded]::after {
455
- inset-inline-start: var(--nav-sidebar-size);
456
- }
457
- &[data-sidebar-inline-start-state=collapsed]::after {
458
- inset-inline-start: var(--l0-size);
459
- }
460
- &[data-sidebar-inline-end-state=expanded]::after {
461
- inset-inline-end: var(--complementary-sidebar-size);
462
- }
463
- &[data-sidebar-inline-end-state=collapsed]::after {
464
- inset-inline-end: var(--r0-size);
465
- }
466
- }
467
- }
468
- }
469
- }
470
-
471
- /* src/styles/layers/hues.css */
472
- @layer dx-components {
473
- .dx-text-hue[data-hue=red],
474
- .dx-text-hue--red {
475
- @apply text-redText;
476
- }
477
- .dx-text-hue[data-hue=orange],
478
- .dx-text-hue--orange {
479
- @apply text-orangeText;
480
- }
481
- .dx-text-hue[data-hue=amber],
482
- .dx-text-hue--amber {
483
- @apply text-amberText;
484
- }
485
- .dx-text-hue[data-hue=yellow],
486
- .dx-text-hue--yellow {
487
- @apply text-yellowText;
488
- }
489
- .dx-text-hue[data-hue=lime],
490
- .dx-text-hue--lime {
491
- @apply text-limeText;
492
- }
493
- .dx-text-hue[data-hue=green],
494
- .dx-text-hue--green {
495
- @apply text-greenText;
496
- }
497
- .dx-text-hue[data-hue=emerald],
498
- .dx-text-hue--emerald {
499
- @apply text-emeraldText;
500
- }
501
- .dx-text-hue[data-hue=teal],
502
- .dx-text-hue--teal {
503
- @apply text-tealText;
504
- }
505
- .dx-text-hue[data-hue=cyan],
506
- .dx-text-hue--cyan {
507
- @apply text-cyanText;
508
- }
509
- .dx-text-hue[data-hue=sky],
510
- .dx-text-hue--sky {
511
- @apply text-skyText;
512
- }
513
- .dx-text-hue[data-hue=blue],
514
- .dx-text-hue--blue {
515
- @apply text-blueText;
516
- }
517
- .dx-text-hue[data-hue=indigo],
518
- .dx-text-hue--indigo {
519
- @apply text-indigoText;
520
- }
521
- .dx-text-hue[data-hue=violet],
522
- .dx-text-hue--violet {
523
- @apply text-violetText;
524
- }
525
- .dx-text-hue[data-hue=purple],
526
- .dx-text-hue--purple {
527
- @apply text-purpleText;
528
- }
529
- .dx-text-hue[data-hue=fuchsia],
530
- .dx-text-hue--fuchsia {
531
- @apply text-fuchsiaText;
532
- }
533
- .dx-text-hue[data-hue=pink],
534
- .dx-text-hue--pink {
535
- @apply text-pinkText;
536
- }
537
- .dx-text-hue[data-hue=rose],
538
- .dx-text-hue--rose {
539
- @apply text-roseText;
540
- }
541
- .dx-text-hue[data-hue=info],
542
- .dx-text-hue--info {
543
- @apply text-cyanText;
544
- }
545
- .dx-text-hue[data-hue=success],
546
- .dx-text-hue--success {
547
- @apply text-emeraldText;
548
- }
549
- .dx-text-hue[data-hue=warning],
550
- .dx-text-hue--warning {
551
- @apply text-amberText;
552
- }
553
- .dx-text-hue[data-hue=error],
554
- .dx-text-hue--error {
555
- @apply text-roseText;
556
- }
557
- }
558
-
559
- /* src/styles/layers/positioning.css */
560
- @layer utilities {
561
- .snap-inline {
562
- scroll-snap-type: inline var(--tw-scroll-snap-strictness);
563
- }
564
- .snap-block {
565
- scroll-snap-type: block var(--tw-scroll-snap-strictness);
566
- }
567
- .sticky-top-0 {
568
- --sticky-top: 0;
569
- }
570
- .contain-layout {
571
- contain: layout;
572
- }
573
- }
574
- @layer dx-components {
575
- .sticky-top-from-topbar-bottom {
576
- --sticky-top: var(--topbar-size);
577
- }
578
- .sticky-bottom-from-statusbar-bottom {
579
- --sticky-bottom: var(--statusbar-size);
580
- }
581
- }
582
-
583
- /* src/styles/layers/main.css */
584
- @layer utilities {
585
- .dx-main-bounce-layout {
586
- @apply fixed overflow-auto overscroll-auto;
587
- @apply duration-200 ease-in-out-symmetric;
588
- transition-property:
589
- padding-inline-start,
590
- padding-inline-end,
591
- scroll-padding-start,
592
- scroll-padding-end;
593
- inset-inline-start: 0;
594
- inset-inline-end: 0;
595
- inset-block-start: 0;
596
- inset-block-end: 0;
597
- z-index: 0;
598
- }
599
- .dx-main-mobile-layout {
600
- @apply absolute inset-0 overflow-hidden flex flex-col;
601
- }
602
- .dx-main-content-padding {
603
- @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
604
- @media (min-width: theme("screens.lg")) {
605
- &[data-sidebar-inline-start-state=collapsed] {
606
- @apply pis-[--l0-size] scroll-ps-[--l0-size];
607
- }
608
- &[data-sidebar-inline-start-state=expanded] {
609
- @apply pis-[--nav-sidebar-size] scroll-ps-[--nav-sidebar-size];
610
- }
611
- &[data-sidebar-inline-end-state=collapsed] {
612
- @apply pie-[--r0-size] scroll-pe-[--r0-size];
613
- }
614
- &[data-sidebar-inline-end-state=expanded] {
615
- @apply pie-[--complementary-sidebar-size] scroll-pe-[--complementary-sidebar-size];
616
- }
617
- }
618
- }
619
- .dx-main-content-padding-transitions {
620
- @apply duration-200 ease-in-out-symmetric;
621
- transition-property:
622
- padding-inline-start,
623
- padding-inline-end,
624
- scroll-padding-start,
625
- scroll-padding-end;
626
- }
627
- .dx-main-intrinsic-size {
628
- @apply is-[calc(100dvw)-2*var(--main-spacing)] transition-[inline-size] ease-in-out-symmetric duration-200;
629
- @media (min-width: theme("screens.lg")) {
630
- &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=closed] {
631
- inline-size: calc(100dvw - 2 * var(--main-spacing));
632
- }
633
- &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=closed] {
634
- inline-size: calc(100dvw - var(--l0-size) - 2 * var(--main-spacing));
635
- }
636
- &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=closed] {
637
- inline-size: calc(100dvw - var(--nav-sidebar-size) - 2 * var(--main-spacing));
638
- }
639
- &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=collapsed] {
640
- inline-size: calc(100dvw - var(--r0-size) - 2 * var(--main-spacing));
641
- }
642
- &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=collapsed] {
643
- inline-size: calc(100dvw - var(--l0-size) - var(--r0-size) - 2 * var(--main-spacing));
644
- }
645
- &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=collapsed] {
646
- inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size) - 2 * var(--main-spacing));
647
- }
648
- &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=expanded] {
649
- inline-size: calc(100dvw - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
650
- }
651
- &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=expanded] {
652
- inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
653
- }
654
- &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=expanded] {
655
- inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
656
- }
657
- }
658
- }
659
- }
660
- @layer dx-components {
661
- .dx-main-sidebar {
662
- @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
663
- @apply duration-200 ease-in-out-symmetric;
664
- @apply border-landmarkLine border-subduedSeparator rounded-md;
665
- @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
666
- transition-property:
667
- inset-inline-start,
668
- inset-inline-end,
669
- inline-size;
670
- inset-block-start: max(0.5rem, env(safe-area-inset-top));
671
- inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
672
- inline-size: calc(100dvw - 3rem);
673
- z-index: 7;
674
- @media (min-width: theme("screens.lg")) {
675
- @apply block-start-0 block-end-0 rounded-none border-lb-0;
676
- }
677
- &[data-resizing=false] {
678
- @apply duration-200;
679
- }
680
- &[data-side=is] {
681
- @apply -inline-start-[100vw] border-ie-landmarkLine border-subduedSeparator;
682
- z-index: 8;
683
- &[data-state=expanded] {
684
- inset-inline-start: max(0.5rem, env(safe-area-inset-left));
685
- @media (min-width: theme("screens.lg")) {
686
- @apply inline-start-0;
687
- }
688
- }
689
- @media (min-width: theme("screens.sm")) {
690
- @apply is-[--nav-sidebar-size];
691
- }
692
- @media (min-width: theme("screens.lg")) {
693
- @apply border-is-0;
694
- &[data-state=collapsed] {
695
- @apply is-[--l0-size] inline-start-0;
696
- }
697
- &[data-state=expanded] {
698
- @apply is-[--nav-sidebar-size];
699
- }
700
- }
701
- }
702
- &[data-side=ie] {
703
- @apply -inline-end-[100vw] border-is-landmarkLine border-separator;
704
- &[data-state=expanded] {
705
- inset-inline-end: max(0.5rem, env(safe-area-inset-right));
706
- @media (min-width: theme("screens.lg")) {
707
- @apply inline-end-0;
708
- }
709
- }
710
- @media (min-width: theme("screens.sm")) {
711
- @apply is-[--complementary-sidebar-size];
712
- }
713
- @media (min-width: theme("screens.lg")) {
714
- @apply border-ie-0;
715
- &[data-state=collapsed] {
716
- @apply is-[--r0-size] inline-end-0;
717
- }
718
- &[data-state=expanded] {
719
- @apply is-[--complementary-sidebar-size];
720
- }
721
- }
722
- }
723
- }
724
- .dx-main-overlay {
725
- @apply fixed inset-0 bg-scrimSurface;
726
- @apply transition-opacity duration-200 ease-in-out-symmetric;
727
- @apply opacity-0 hidden;
728
- z-index: 6;
729
- &[data-state=open] {
730
- @apply opacity-100 block;
731
- @media (min-width: theme("screens.lg")) {
732
- @apply opacity-100 hidden;
733
- }
734
- }
735
- }
736
- }
737
-
738
- /* src/styles/layers/native.css */
739
- @layer utilities {
740
- .app-drag {
741
- -webkit-user-select: none;
742
- -webkit-app-region: drag;
743
- --app-region: drag;
744
- }
745
- .app-no-drag {
746
- -webkit-app-region: no-drag;
747
- --app-region: no-drag;
748
- }
749
- }
750
-
751
- /* src/styles/layers/scrollbar.css */
752
- @layer components {
753
- ::-webkit-scrollbar-thumb:hover {
754
- @apply bg-scrollbarThumbHover !important;
755
- }
756
- ::-webkit-scrollbar-thumb:active {
757
- @apply bg-scrollbarThumbActive !important;
758
- }
759
- }
760
-
761
- /* src/styles/layers/size.css */
762
- .size-container {
763
- container-type: size;
764
- }
765
- .container-max-width {
766
- @apply is-full max-is-container-max-width mli-auto;
767
- }
768
- .card-square {
769
- inline-size: min(min(var(--radix-popper-available-width), var(--dx-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
770
- block-size: min(min(var(--radix-popper-available-width), var(--dx-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
771
- }
772
- .card-default-width {
773
- @apply is-card-default-width;
774
- }
775
- .card-min-width {
776
- @apply min-is-card-min-width;
777
- }
778
- .card-max-width {
779
- @apply is-full max-is-card-max-width;
780
- }
781
- .popover-card-max-width {
782
- inline-size: min(var(--radix-popper-available-width), var(--dx-card-max-width));
783
- }
784
- .popover-card-max-height {
785
- block-size: min(var(--radix-popper-available-height), var(--dx-card-max-height));
786
- }
787
- @layer dx-components {
788
- [data-size="0"],
789
- [data-block-size="0"] {
790
- @apply bs-0;
791
- }
792
- [data-size=px],
793
- [data-block-size=px] {
794
- @apply bs-px;
795
- }
796
- [data-size="0.5"],
797
- [data-block-size="0.5"] {
798
- @apply bs-0.5;
799
- }
800
- [data-size="1"],
801
- [data-block-size="1"] {
802
- @apply bs-1;
803
- }
804
- [data-size="1.5"],
805
- [data-block-size="1.5"] {
806
- @apply bs-1.5;
807
- }
808
- [data-size="2"],
809
- [data-block-size="2"] {
810
- @apply bs-2;
811
- }
812
- [data-size="2.5"],
813
- [data-block-size="2.5"] {
814
- @apply bs-2.5;
815
- }
816
- [data-size="3"],
817
- [data-block-size="3"] {
818
- @apply bs-3;
819
- }
820
- [data-size="3.5"],
821
- [data-block-size="3.5"] {
822
- @apply bs-3.5;
823
- }
824
- [data-size="4"],
825
- [data-block-size="4"] {
826
- @apply bs-4;
827
- }
828
- [data-size="5"],
829
- [data-block-size="5"] {
830
- @apply bs-5;
831
- }
832
- [data-size="6"],
833
- [data-block-size="6"] {
834
- @apply bs-6;
835
- }
836
- [data-size="7"],
837
- [data-block-size="7"] {
838
- @apply bs-7;
839
- }
840
- [data-size="8"],
841
- [data-block-size="8"] {
842
- @apply bs-8;
843
- }
844
- [data-size="9"],
845
- [data-block-size="9"] {
846
- @apply bs-9;
847
- }
848
- [data-size="10"],
849
- [data-block-size="10"] {
850
- @apply bs-10;
851
- }
852
- [data-size="11"],
853
- [data-block-size="11"] {
854
- @apply bs-11;
855
- }
856
- [data-size="12"],
857
- [data-block-size="12"] {
858
- @apply bs-12;
859
- }
860
- [data-size="14"],
861
- [data-block-size="14"] {
862
- @apply bs-14;
863
- }
864
- [data-size="16"],
865
- [data-block-size="16"] {
866
- @apply bs-16;
867
- }
868
- [data-size="20"],
869
- [data-block-size="20"] {
870
- @apply bs-20;
871
- }
872
- [data-size="24"],
873
- [data-block-size="24"] {
874
- @apply bs-24;
875
- }
876
- [data-size="28"],
877
- [data-block-size="28"] {
878
- @apply bs-28;
879
- }
880
- [data-size="32"],
881
- [data-block-size="32"] {
882
- @apply bs-32;
883
- }
884
- [data-size="36"],
885
- [data-block-size="36"] {
886
- @apply bs-36;
887
- }
888
- [data-size="40"],
889
- [data-block-size="40"] {
890
- @apply bs-40;
891
- }
892
- [data-size="44"],
893
- [data-block-size="44"] {
894
- @apply bs-44;
895
- }
896
- [data-size="48"],
897
- [data-block-size="48"] {
898
- @apply bs-48;
899
- }
900
- [data-size="52"],
901
- [data-block-size="52"] {
902
- @apply bs-52;
903
- }
904
- [data-size="56"],
905
- [data-block-size="56"] {
906
- @apply bs-56;
907
- }
908
- [data-size="60"],
909
- [data-block-size="60"] {
910
- @apply bs-60;
911
- }
912
- [data-size="64"],
913
- [data-block-size="64"] {
914
- @apply bs-64;
915
- }
916
- [data-size="72"],
917
- [data-block-size="72"] {
918
- @apply bs-72;
919
- }
920
- [data-size="80"],
921
- [data-block-size="80"] {
922
- @apply bs-80;
923
- }
924
- [data-size="96"],
925
- [data-block-size="96"] {
926
- @apply bs-96;
927
- }
928
- [data-size="0"],
929
- [data-inline-size="0"] {
930
- @apply is-0;
931
- }
932
- [data-size=px],
933
- [data-inline-size=px] {
934
- @apply is-px;
935
- }
936
- [data-size="0.5"],
937
- [data-inline-size="0.5"] {
938
- @apply is-0.5;
939
- }
940
- [data-size="1"],
941
- [data-inline-size="1"] {
942
- @apply is-1;
943
- }
944
- [data-size="1.5"],
945
- [data-inline-size="1.5"] {
946
- @apply is-1.5;
947
- }
948
- [data-size="2"],
949
- [data-inline-size="2"] {
950
- @apply is-2;
951
- }
952
- [data-size="2.5"],
953
- [data-inline-size="2.5"] {
954
- @apply is-2.5;
955
- }
956
- [data-size="3"],
957
- [data-inline-size="3"] {
958
- @apply is-3;
959
- }
960
- [data-size="3.5"],
961
- [data-inline-size="3.5"] {
962
- @apply is-3.5;
963
- }
964
- [data-size="4"],
965
- [data-inline-size="4"] {
966
- @apply is-4;
967
- }
968
- [data-size="5"],
969
- [data-inline-size="5"] {
970
- @apply is-5;
971
- }
972
- [data-size="6"],
973
- [data-inline-size="6"] {
974
- @apply is-6;
975
- }
976
- [data-size="7"],
977
- [data-inline-size="7"] {
978
- @apply is-7;
979
- }
980
- [data-size="8"],
981
- [data-inline-size="8"] {
982
- @apply is-8;
983
- }
984
- [data-size="9"],
985
- [data-inline-size="9"] {
986
- @apply is-9;
987
- }
988
- [data-size="10"],
989
- [data-inline-size="10"] {
990
- @apply is-10;
991
- }
992
- [data-size="11"],
993
- [data-inline-size="11"] {
994
- @apply is-11;
995
- }
996
- [data-size="12"],
997
- [data-inline-size="12"] {
998
- @apply is-12;
999
- }
1000
- [data-size="14"],
1001
- [data-inline-size="14"] {
1002
- @apply is-14;
1003
- }
1004
- [data-size="16"],
1005
- [data-inline-size="16"] {
1006
- @apply is-16;
1007
- }
1008
- [data-size="20"],
1009
- [data-inline-size="20"] {
1010
- @apply is-20;
1011
- }
1012
- [data-size="24"],
1013
- [data-inline-size="24"] {
1014
- @apply is-24;
1015
- }
1016
- [data-size="28"],
1017
- [data-inline-size="28"] {
1018
- @apply is-28;
1019
- }
1020
- [data-size="32"],
1021
- [data-inline-size="32"] {
1022
- @apply is-32;
1023
- }
1024
- [data-size="36"],
1025
- [data-inline-size="36"] {
1026
- @apply is-36;
1027
- }
1028
- [data-size="40"],
1029
- [data-inline-size="40"] {
1030
- @apply is-40;
1031
- }
1032
- [data-size="44"],
1033
- [data-inline-size="44"] {
1034
- @apply is-44;
1035
- }
1036
- [data-size="48"],
1037
- [data-inline-size="48"] {
1038
- @apply is-48;
1039
- }
1040
- [data-size="52"],
1041
- [data-inline-size="52"] {
1042
- @apply is-52;
1043
- }
1044
- [data-size="56"],
1045
- [data-inline-size="56"] {
1046
- @apply is-56;
1047
- }
1048
- [data-size="60"],
1049
- [data-inline-size="60"] {
1050
- @apply is-60;
1051
- }
1052
- [data-size="64"],
1053
- [data-inline-size="64"] {
1054
- @apply is-64;
1055
- }
1056
- [data-size="72"],
1057
- [data-inline-size="72"] {
1058
- @apply is-72;
1059
- }
1060
- [data-size="80"],
1061
- [data-inline-size="80"] {
1062
- @apply is-80;
1063
- }
1064
- [data-size="96"],
1065
- [data-inline-size="96"] {
1066
- @apply is-96;
1067
- }
1068
- }
1069
-
1070
- /* src/styles/layers/surfaces.css */
1071
- @layer utilities {
1072
- .base-surface {
1073
- background-color: var(--dx-baseSurface);
1074
- --surface-bg: var(--dx-baseSurface);
1075
- }
1076
- .dark .base-surface {
1077
- background-color: var(--dx-baseSurface);
1078
- --surface-bg: var(--dx-baseSurface);
1079
- }
1080
- .sidebar-surface {
1081
- background-color: var(--dx-sidebarSurface);
1082
- --surface-bg: var(--dx-sidebarSurface);
1083
- }
1084
- .dark .sidebar-surface {
1085
- background-color: var(--dx-sidebarSurface);
1086
- --surface-bg: var(--dx-sidebarSurface);
1087
- }
1088
- .modal-surface {
1089
- background-color: var(--dx-modalSurface);
1090
- --surface-bg: var(--dx-modalSurface);
1091
- }
1092
- .dark .modal-surface {
1093
- background-color: var(--dx-modalSurface);
1094
- --surface-bg: var(--dx-modalSurface);
1095
- }
1096
- }
1097
-
1098
- /* src/styles/layers/tag.css */
1099
- @layer dx-tokens {
1100
- :root {
1101
- --dx-tag-padding-block: 0.125rem;
1102
- }
1103
- }
1104
- @layer dx-components {
1105
- .dx-tag {
1106
- @apply inline-block text-xs font-semibold m-0.5 pli-1 rounded-sm cursor-default truncate;
1107
- padding-block: var(--dx-tag-padding-block);
1108
- user-select: none;
1109
- }
1110
- .dx-tag--anchor {
1111
- @apply inline cursor-pointer -mli-[4px] pli-[3px] plb-0.5 border border-separator rounded-sm bg-groupSurface transition-colors;
1112
- &:hover {
1113
- @apply bg-hoverSurface;
1114
- }
1115
- }
1116
- .dx-tag[data-hue=neutral],
1117
- .dx-tag--neutral {
1118
- @apply bg-separator text-neutral-700 dark:text-neutral-150;
1119
- }
1120
- .dx-tag[data-hue=red],
1121
- .dx-tag--red {
1122
- @apply bg-redSurface text-redSurfaceText;
1123
- }
1124
- .dx-tag[data-hue=orange],
1125
- .dx-tag--orange {
1126
- @apply bg-orangeSurface text-orangeSurfaceText;
1127
- }
1128
- .dx-tag[data-hue=amber],
1129
- .dx-tag--amber {
1130
- @apply bg-amberSurface text-amberSurfaceText;
1131
- }
1132
- .dx-tag[data-hue=yellow],
1133
- .dx-tag--yellow {
1134
- @apply bg-yellowSurface text-yellowSurfaceText;
1135
- }
1136
- .dx-tag[data-hue=lime],
1137
- .dx-tag--lime {
1138
- @apply bg-limeSurface text-limeSurfaceText;
1139
- }
1140
- .dx-tag[data-hue=green],
1141
- .dx-tag--green {
1142
- @apply bg-greenSurface text-greenSurfaceText;
1143
- }
1144
- .dx-tag[data-hue=emerald],
1145
- .dx-tag--emerald {
1146
- @apply bg-emeraldSurface text-emeraldSurfaceText;
1147
- }
1148
- .dx-tag[data-hue=teal],
1149
- .dx-tag--teal {
1150
- @apply bg-tealSurface text-tealSurfaceText;
1151
- }
1152
- .dx-tag[data-hue=cyan],
1153
- .dx-tag--cyan {
1154
- @apply bg-cyanSurface text-cyanSurfaceText;
1155
- }
1156
- .dx-tag[data-hue=sky],
1157
- .dx-tag--sky {
1158
- @apply bg-skySurface text-skySurfaceText;
1159
- }
1160
- .dx-tag[data-hue=blue],
1161
- .dx-tag--blue {
1162
- @apply bg-blueSurface text-blueSurfaceText;
1163
- }
1164
- .dx-tag[data-hue=indigo],
1165
- .dx-tag--indigo {
1166
- @apply bg-indigoSurface text-indigoSurfaceText;
1167
- }
1168
- .dx-tag[data-hue=violet],
1169
- .dx-tag--violet {
1170
- @apply bg-violetSurface text-violetSurfaceText;
1171
- }
1172
- .dx-tag[data-hue=purple],
1173
- .dx-tag--purple {
1174
- @apply bg-purpleSurface text-purpleSurfaceText;
1175
- }
1176
- .dx-tag[data-hue=fuchsia],
1177
- .dx-tag--fuchsia {
1178
- @apply bg-fuchsiaSurface text-fuchsiaSurfaceText;
1179
- }
1180
- .dx-tag[data-hue=pink],
1181
- .dx-tag--pink {
1182
- @apply bg-pinkSurface text-pinkSurfaceText;
1183
- }
1184
- .dx-tag[data-hue=rose],
1185
- .dx-tag--rose {
1186
- @apply bg-roseSurface text-roseSurfaceText;
1187
- }
1188
- .dx-tag[data-hue=info],
1189
- .dx-tag--info {
1190
- @apply bg-cyanSurface text-cyanSurfaceText;
1191
- }
1192
- .dx-tag[data-hue=success],
1193
- .dx-tag--success {
1194
- @apply bg-emeraldSurface text-emeraldSurfaceText;
1195
- }
1196
- .dx-tag[data-hue=warning],
1197
- .dx-tag--warning {
1198
- @apply bg-amberSurface text-amberSurfaceText;
1199
- }
1200
- .dx-tag[data-hue=error],
1201
- .dx-tag--error {
1202
- @apply bg-roseSurface text-roseSurfaceText;
1203
- }
1204
- }
1205
-
1206
- /* src/styles/layers/tldraw.css */
1207
- @layer dx-components {
1208
- .tl-container.tl-theme__light {
1209
- --color-accent: var(--color-accent);
1210
- --color-background: var(--surface-bg);
1211
- --color-panel-contrast: var(--dx-separator);
1212
- --color-panel-overlay: rgba(255, 255, 255, 0.82);
1213
- }
1214
- .tl-container.tl-theme__dark {
1215
- --color-accent: var(--color-accent);
1216
- --color-background: var(--surface-bg);
1217
- --color-divider: var(--dx-separator);
1218
- --color-panel: var(--dx-attention);
1219
- --color-panel-contrast: var(--dx-separator);
1220
- --color-panel-overlay: rgba(54, 61, 68, 0.82);
1221
- }
1222
- }
1223
-
1224
- /* src/styles/layers/tokens.css */
1225
- @layer dx-tokens {
1226
- @tokens dx;
1227
- :root {
1228
- --sticky-top: 0;
1229
- --rail-content: 3rem;
1230
- --rail-size: calc(var(--rail-content) + 1px);
1231
- --rail-action: calc(var(--rail-content) - 0.5rem + 1px);
1232
- --rail-item: calc(var(--rail-content) - 1rem);
1233
- --line-height: 32px;
1234
- --topbar-size: var(--rail-size);
1235
- --toolbar-size: var(--rail-content);
1236
- --statusbar-size: var(--rail-content);
1237
- --nav-sidebar-size: 22.5rem;
1238
- --complementary-sidebar-size: 25rem;
1239
- --drawer-size: 50dvh;
1240
- --l0-size: 74px;
1241
- --l0-avatar-size: 3rem;
1242
- --l1-size: calc(var(--nav-sidebar-size) - var(--l0-size));
1243
- --r0-size: var(--rail-size);
1244
- --r1-size: calc(var(--complementary-sidebar-size) - var(--r0-size));
1245
- --text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
1246
- }
1247
- :root {
1248
- --dx-calc-auto: auto;
1249
- --dx-calc-min: min-content;
1250
- --dx-calc-fit: fit-content;
1251
- --dx-calc-max: max-content;
1252
- --dx-calc-content: content;
1253
- }
1254
- @supports (block-size: calc-size(fit-content, size)) {
1255
- :root {
1256
- --dx-calc-auto: calc-size(auto, size);
1257
- --dx-calc-min: calc-size(min-content, size);
1258
- --dx-calc-fit: calc-size(fit-content, size);
1259
- --dx-calc-max: calc-size(max-content, size);
1260
- --dx-calc-content: calc-size(content, size);
1261
- }
1262
- }
1263
- }
1264
-
1265
- /* src/styles/layers/typography.css */
1266
- @layer utilities {
1267
- .not-italic {
1268
- font-variation-settings: "wght" 400, "slnt" 0;
1269
- }
1270
- .font-thin,
1271
- .not-italic.font-thin,
1272
- .not-italic .font-thin,
1273
- .font-thin .not-italic {
1274
- font-variation-settings: "wght" 100, "slnt" 0;
1275
- }
1276
- .font-extralight,
1277
- .not-italic.font-extralight,
1278
- .not-italic .font-extralight,
1279
- .font-extralight .not-italic {
1280
- font-variation-settings: "wght" 200, "slnt" 0;
1281
- }
1282
- .font-light,
1283
- .not-italic.font-light,
1284
- .not-italic .font-light,
1285
- .font-light .not-italic {
1286
- font-variation-settings: "wght" 300, "slnt" 0;
1287
- }
1288
- .font-normal,
1289
- .not-italic.font-normal,
1290
- .not-italic .font-normal,
1291
- .font-normal .not-italic {
1292
- font-variation-settings: "wght" 400, "slnt" 0;
1293
- }
1294
- .font-medium,
1295
- .not-italic.font-medium,
1296
- .not-italic .font-medium,
1297
- .font-medium .not-italic {
1298
- font-variation-settings: "wght" 500, "slnt" 0;
1299
- }
1300
- .font-semibold,
1301
- .not-italic.font-semibold,
1302
- .not-italic .font-semibold,
1303
- .font-semibold .not-italic {
1304
- font-variation-settings: "wght" 600, "slnt" 0;
1305
- }
1306
- .font-bold,
1307
- .not-italic.font-bold,
1308
- .not-italic .font-bold,
1309
- .font-bold .not-italic {
1310
- font-variation-settings: "wght" 700, "slnt" 0;
1311
- }
1312
- .font-extrabold,
1313
- .not-italic.font-extrabold,
1314
- .not-italic .font-extrabold,
1315
- .font-extrabold .not-italic {
1316
- font-variation-settings: "wght" 800, "slnt" 0;
1317
- }
1318
- .font-black,
1319
- .not-italic.font-black,
1320
- .not-italic .font-black,
1321
- .font-black .not-italic {
1322
- font-variation-settings: "wght" 900, "slnt" 0;
1323
- }
1324
- .italic {
1325
- font-variation-settings: "wght" 400, "slnt" -10;
1326
- }
1327
- .italic.font-thin,
1328
- .italic .font-thin,
1329
- .font-thin .italic {
1330
- font-variation-settings: "wght" 100, "slnt" -10;
1331
- }
1332
- .italic.font-extralight,
1333
- .italic .font-extralight,
1334
- .font-extralight .italic {
1335
- font-variation-settings: "wght" 200, "slnt" -10;
1336
- }
1337
- .italic.font-light,
1338
- .italic .font-light,
1339
- .font-light .italic {
1340
- font-variation-settings: "wght" 300, "slnt" -10;
1341
- }
1342
- .italic.font-normal,
1343
- .italic .font-normal,
1344
- .font-normal .italic {
1345
- font-variation-settings: "wght" 400, "slnt" -10;
1346
- }
1347
- .italic.font-medium,
1348
- .italic .font-medium,
1349
- .font-medium .italic {
1350
- font-variation-settings: "wght" 500, "slnt" -10;
1351
- }
1352
- .italic.font-semibold,
1353
- .italic .font-semibold,
1354
- .font-semibold .italic {
1355
- font-variation-settings: "wght" 600, "slnt" -10;
1356
- }
1357
- .italic.font-bold,
1358
- .italic .font-bold,
1359
- .font-bold .italic {
1360
- font-variation-settings: "wght" 700, "slnt" -10;
1361
- }
1362
- .italic.font-extrabold,
1363
- .italic .font-extrabold,
1364
- .font-extrabold .italic {
1365
- font-variation-settings: "wght" 800, "slnt" -10;
1366
- }
1367
- .italic.font-black,
1368
- .italic .font-black,
1369
- .font-black .italic {
1370
- font-variation-settings: "wght" 900, "slnt" -10;
1371
- }
1372
- }
1373
-
1374
- /* src/styles/layers/index.css */
1375
- @layer dx-tokens, user-tokens, tw-base, dx-base, tw-components, dx-components, utilities;
1376
-
1377
- /* src/theme.css */
1378
- /*# sourceMappingURL=theme.css.map */