tldraw 3.16.0-canary.856874107ebd → 3.16.0-canary.887377ec7acc

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 (369) hide show
  1. package/dist-cjs/index.d.ts +269 -106
  2. package/dist-cjs/index.js +36 -14
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/Tldraw.js +12 -2
  5. package/dist-cjs/lib/Tldraw.js.map +2 -2
  6. package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
  7. package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
  8. package/dist-cjs/lib/defaultExternalContentHandlers.js +5 -4
  9. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/arrowLabel.js +6 -0
  11. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
  12. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
  13. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
  14. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
  15. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
  16. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +12 -5
  17. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  18. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
  19. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
  20. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +1 -0
  21. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  22. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +6 -3
  23. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +2 -1
  25. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  26. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
  27. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  28. package/dist-cjs/lib/shapes/shared/ShapeFill.js +1 -1
  29. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  30. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  31. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +0 -2
  32. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  33. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
  34. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  35. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
  36. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
  37. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
  38. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  39. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
  40. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  41. package/dist-cjs/lib/ui/TldrawUi.js +27 -12
  42. package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
  43. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  44. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  45. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +10 -2
  46. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  48. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  49. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  50. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  51. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
  52. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  53. package/dist-cjs/lib/ui/components/MobileStylePanel.js +4 -2
  54. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  55. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
  56. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  57. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  58. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  59. package/dist-cjs/lib/ui/components/{primitives/TldrawUiButtonPicker.js → StylePanel/StylePanelButtonPicker.js} +52 -45
  60. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  61. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
  62. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  63. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  64. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  65. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +24 -21
  66. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  67. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  68. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  69. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +3 -2
  70. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  71. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +39 -10
  72. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  73. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -22
  74. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
  75. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  76. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  77. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +3 -3
  78. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  79. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +188 -78
  80. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
  81. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +10 -1
  82. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  83. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +18 -5
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +17 -3
  86. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  87. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +176 -166
  88. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  89. package/dist-cjs/lib/ui/components/primitives/layout.js +30 -5
  90. package/dist-cjs/lib/ui/components/primitives/layout.js.map +2 -2
  91. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
  92. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
  93. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  94. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +8 -24
  95. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  96. package/dist-cjs/lib/ui/context/actions.js +23 -10
  97. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  98. package/dist-cjs/lib/ui/context/components.js +2 -0
  99. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  100. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  101. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  102. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  103. package/dist-cjs/lib/ui/hooks/useTools.js +22 -4
  104. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  105. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  106. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +4 -2
  107. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  108. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  109. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  110. package/dist-cjs/lib/ui/version.js +3 -3
  111. package/dist-cjs/lib/ui/version.js.map +1 -1
  112. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  113. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  114. package/dist-cjs/lib/utils/export/export.js +0 -20
  115. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  116. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  117. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  118. package/dist-esm/index.d.mts +269 -106
  119. package/dist-esm/index.mjs +68 -30
  120. package/dist-esm/index.mjs.map +2 -2
  121. package/dist-esm/lib/Tldraw.mjs +14 -4
  122. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  123. package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
  124. package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
  125. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  126. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  127. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  128. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  129. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
  130. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
  131. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
  132. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
  133. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +12 -5
  134. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  135. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
  136. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
  137. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
  138. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  139. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +6 -3
  140. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  141. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
  142. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  143. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  144. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  145. package/dist-esm/lib/shapes/shared/ShapeFill.mjs +1 -1
  146. package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
  147. package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
  148. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +0 -2
  149. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  150. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  151. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  152. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
  153. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
  154. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  155. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  156. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  157. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  158. package/dist-esm/lib/ui/TldrawUi.mjs +29 -14
  159. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  160. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  161. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  162. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +10 -2
  163. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  164. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  165. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  166. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  167. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  168. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
  169. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  170. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +4 -2
  171. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  172. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
  173. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  174. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  175. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  176. package/dist-esm/lib/ui/components/{primitives/TldrawUiButtonPicker.mjs → StylePanel/StylePanelButtonPicker.mjs} +54 -43
  177. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  178. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
  179. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  180. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  181. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  182. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +21 -18
  183. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  184. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  185. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  186. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +3 -2
  187. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  188. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +39 -10
  189. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  190. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -22
  191. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  193. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +3 -3
  195. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -80
  197. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
  198. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +10 -1
  199. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  200. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +18 -5
  201. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  202. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +18 -4
  203. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  204. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +186 -168
  205. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  206. package/dist-esm/lib/ui/components/primitives/layout.mjs +31 -6
  207. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +2 -2
  208. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
  209. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
  210. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  211. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +8 -24
  212. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  213. package/dist-esm/lib/ui/context/actions.mjs +23 -10
  214. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  215. package/dist-esm/lib/ui/context/components.mjs +2 -0
  216. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  217. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  218. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  219. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  220. package/dist-esm/lib/ui/hooks/useTools.mjs +23 -4
  221. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  222. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +4 -2
  223. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  224. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  225. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  226. package/dist-esm/lib/ui/version.mjs +3 -3
  227. package/dist-esm/lib/ui/version.mjs.map +1 -1
  228. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  229. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  230. package/dist-esm/lib/utils/export/export.mjs +0 -20
  231. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  232. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  233. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  234. package/package.json +11 -34
  235. package/src/index.ts +49 -22
  236. package/src/lib/Tldraw.tsx +15 -2
  237. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  238. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  239. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  240. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +6 -5
  241. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +48 -6
  242. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  243. package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
  244. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  245. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  246. package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -4
  247. package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
  248. package/src/lib/shapes/geo/GeoShapeUtil.tsx +1 -0
  249. package/src/lib/shapes/image/ImageShapeUtil.tsx +6 -3
  250. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  251. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  252. package/src/lib/shapes/note/NoteShapeUtil.tsx +1 -0
  253. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  254. package/src/lib/shapes/shared/ShapeFill.tsx +1 -1
  255. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  256. package/src/lib/shapes/shared/useEditablePlainText.ts +0 -6
  257. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  258. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  259. package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
  260. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  261. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  262. package/src/lib/ui/TldrawUi.tsx +33 -12
  263. package/src/lib/ui/assetUrls.ts +13 -10
  264. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +13 -2
  265. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  266. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  267. package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
  268. package/src/lib/ui/components/MobileStylePanel.tsx +4 -3
  269. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
  270. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
  271. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +63 -50
  272. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
  273. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  274. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  275. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  276. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +4 -3
  277. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +33 -16
  278. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -24
  279. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  280. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +5 -5
  281. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +208 -56
  282. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +6 -1
  283. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +52 -32
  284. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +25 -5
  285. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +220 -187
  286. package/src/lib/ui/components/primitives/layout.tsx +79 -5
  287. package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
  288. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
  289. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +11 -24
  290. package/src/lib/ui/context/actions.tsx +23 -10
  291. package/src/lib/ui/context/components.tsx +3 -0
  292. package/src/lib/ui/context/events.tsx +1 -1
  293. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  294. package/src/lib/ui/hooks/useTools.tsx +26 -4
  295. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +2 -0
  296. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +4 -2
  297. package/src/lib/ui/kbd-utils.ts +10 -3
  298. package/src/lib/ui/version.ts +3 -3
  299. package/src/lib/ui.css +365 -245
  300. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  301. package/src/lib/utils/export/copyAs.ts +1 -24
  302. package/src/lib/utils/export/export.ts +0 -36
  303. package/src/lib/utils/export/exportAs.ts +1 -32
  304. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  305. package/src/test/A11y.test.tsx +3 -2
  306. package/src/test/ClickManager.test.ts +7 -6
  307. package/src/test/Editor.test.tsx +20 -19
  308. package/src/test/EraserTool.test.ts +184 -13
  309. package/src/test/HandTool.test.ts +10 -9
  310. package/src/test/HighlightShape.test.ts +2 -1
  311. package/src/test/SelectTool.test.ts +3 -2
  312. package/src/test/TLUserPreferences.test.ts +4 -3
  313. package/src/test/TestEditor.ts +13 -15
  314. package/src/test/TldrawEditor.test.tsx +11 -10
  315. package/src/test/ZoomTool.test.ts +7 -6
  316. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  317. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  318. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  319. package/src/test/arrows-megabus.test.tsx +5 -4
  320. package/src/test/bindings.test.tsx +24 -37
  321. package/src/test/bookmark-shapes.test.ts +1 -8
  322. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  323. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  324. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  325. package/src/test/commands/alignShapes.test.tsx +25 -24
  326. package/src/test/commands/animationSpeed.test.ts +2 -1
  327. package/src/test/commands/centerOnPoint.test.ts +3 -2
  328. package/src/test/commands/clipboard.test.ts +3 -2
  329. package/src/test/commands/createShapes.test.ts +2 -1
  330. package/src/test/commands/deleteShapes.test.ts +2 -1
  331. package/src/test/commands/distributeShapes.test.tsx +11 -10
  332. package/src/test/commands/getSvgString.test.ts +2 -1
  333. package/src/test/commands/packShapes.test.ts +5 -4
  334. package/src/test/commands/resizeShape.test.ts +2 -1
  335. package/src/test/commands/rotateShapes.test.ts +7 -6
  336. package/src/test/commands/setCamera.test.ts +4 -3
  337. package/src/test/commands/setCurrentPage.test.ts +3 -2
  338. package/src/test/commands/stackShapes.test.ts +11 -10
  339. package/src/test/commands/stretch.test.tsx +13 -12
  340. package/src/test/createDeepLink.test.tsx +2 -1
  341. package/src/test/cropping.test.ts +3 -2
  342. package/src/test/custom-clipping.test.ts +436 -0
  343. package/src/test/drawing.test.ts +2 -1
  344. package/src/test/flipShapes.test.ts +4 -3
  345. package/src/test/frames.test.ts +25 -24
  346. package/src/test/getCulledShapes.test.tsx +74 -4
  347. package/src/test/groups.test.tsx +1 -1
  348. package/src/test/handleDeepLink.test.tsx +2 -1
  349. package/src/test/maxShapes.test.ts +3 -2
  350. package/src/test/modifiers.test.ts +5 -4
  351. package/src/test/navigation.test.ts +12 -11
  352. package/src/test/panning.test.ts +2 -1
  353. package/src/test/perf/perf.test.ts +2 -1
  354. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  355. package/src/test/resizing.test.ts +39 -38
  356. package/src/test/select.test.tsx +4 -3
  357. package/src/test/selection-omnibus.test.ts +11 -10
  358. package/src/test/shapeutils.test.ts +4 -3
  359. package/src/test/translating.test.ts +9 -8
  360. package/tldraw.css +673 -537
  361. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  362. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
  363. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
  364. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
  365. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
  366. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  367. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  368. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  369. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
package/tldraw.css CHANGED
@@ -9,57 +9,58 @@
9
9
  height: 100%;
10
10
  font-size: 12px;
11
11
  /* Spacing */
12
- --space-1: 2px;
13
- --space-2: 4px;
14
- --space-3: 8px;
15
- --space-4: 12px;
16
- --space-5: 16px;
17
- --space-6: 20px;
18
- --space-7: 28px;
19
- --space-8: 32px;
20
- --space-9: 64px;
21
- --space-10: 72px;
12
+ --tl-space-1: 2px;
13
+ --tl-space-2: 4px;
14
+ --tl-space-3: 8px;
15
+ --tl-space-4: 12px;
16
+ --tl-space-5: 16px;
17
+ --tl-space-6: 20px;
18
+ --tl-space-7: 28px;
19
+ --tl-space-8: 32px;
20
+ --tl-space-9: 64px;
21
+ --tl-space-10: 72px;
22
22
  /* Radius */
23
- --radius-0: 2px;
24
- --radius-1: 4px;
25
- --radius-2: 6px;
26
- --radius-3: 9px;
27
- --radius-4: 11px;
23
+ --tl-radius-0: 2px;
24
+ --tl-radius-1: 4px;
25
+ --tl-radius-2: 6px;
26
+ --tl-radius-3: 9px;
27
+ --tl-radius-4: 11px;
28
28
 
29
29
  /* Canvas z-index */
30
- --layer-canvas-hidden: -999999;
31
- --layer-canvas-background: 100;
32
- --layer-canvas-grid: 150;
33
- --layer-watermark: 200;
34
- --layer-canvas-shapes: 300;
35
- --layer-canvas-overlays: 500;
36
- --layer-canvas-blocker: 10000;
30
+ --tl-layer-canvas-hidden: -999999;
31
+ --tl-layer-canvas-background: 100;
32
+ --tl-layer-canvas-grid: 150;
33
+ --tl-layer-watermark: 200;
34
+ --tl-layer-canvas-shapes: 300;
35
+ --tl-layer-canvas-overlays: 500;
36
+ --tl-layer-canvas-in-front: 600;
37
+ --tl-layer-canvas-blocker: 10000;
37
38
 
38
39
  /* Canvas overlays z-index */
39
- --layer-overlays-collaborator-scribble: 10;
40
- --layer-overlays-collaborator-brush: 20;
41
- --layer-overlays-collaborator-shape-indicator: 30;
42
- --layer-overlays-user-scribble: 40;
43
- --layer-overlays-user-brush: 50;
44
- --layer-overlays-user-snapline: 90;
45
- --layer-overlays-selection-fg: 100;
40
+ --tl-layer-overlays-collaborator-scribble: 10;
41
+ --tl-layer-overlays-collaborator-brush: 20;
42
+ --tl-layer-overlays-collaborator-shape-indicator: 30;
43
+ --tl-layer-overlays-user-scribble: 40;
44
+ --tl-layer-overlays-user-brush: 50;
45
+ --tl-layer-overlays-user-snapline: 90;
46
+ --tl-layer-overlays-selection-fg: 100;
46
47
  /* User handles need to be above selection edges / corners, matters for sticky note clone handles */
47
- --layer-overlays-user-handles: 105;
48
- --layer-overlays-user-indicator-hint: 110;
49
- --layer-overlays-custom: 115;
50
- --layer-overlays-collaborator-cursor-hint: 120;
51
- --layer-overlays-collaborator-cursor: 130;
48
+ --tl-layer-overlays-user-handles: 105;
49
+ --tl-layer-overlays-user-indicator-hint: 110;
50
+ --tl-layer-overlays-custom: 115;
51
+ --tl-layer-overlays-collaborator-cursor-hint: 120;
52
+ --tl-layer-overlays-collaborator-cursor: 130;
52
53
 
53
54
  /* Text editor z-index */
54
- --layer-text-container: 1;
55
- --layer-text-content: 3;
56
- --layer-text-editor: 4;
55
+ --tl-layer-text-container: 1;
56
+ --tl-layer-text-content: 3;
57
+ --tl-layer-text-editor: 4;
57
58
 
58
59
  /* Error fallback z-index */
59
- --layer-error-overlay: 1;
60
- --layer-error-canvas: 2;
61
- --layer-error-canvas-after: 3;
62
- --layer-error-content: 4;
60
+ --tl-layer-error-overlay: 1;
61
+ --tl-layer-error-canvas: 2;
62
+ --tl-layer-error-canvas-after: 3;
63
+ --tl-layer-error-content: 4;
63
64
 
64
65
  /* Misc */
65
66
  --tl-zoom: 1;
@@ -124,12 +125,15 @@
124
125
  --tl-font-serif: 'tldraw_serif', serif;
125
126
  --tl-font-mono: 'tldraw_mono', monospace;
126
127
  /* text outline */
127
- --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
128
- --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
128
+ --tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
129
+ --tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
129
130
  --tl-text-outline-reference:
130
- 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
131
- var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
132
- var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);
131
+ 0 var(--tl-text-outline-b) 0 var(--tl-color-background),
132
+ 0 var(--tl-text-outline-a) 0 var(--tl-color-background),
133
+ var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
134
+ var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
135
+ var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
136
+ var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
133
137
  --tl-text-outline: var(--tl-text-outline-reference);
134
138
  /* own properties */
135
139
  position: relative;
@@ -137,118 +141,118 @@
137
141
  height: 100%;
138
142
  width: 100%;
139
143
  overflow: clip;
140
- color: var(--color-text);
144
+ color: var(--tl-color-text);
141
145
  }
142
146
 
143
147
  .tl-theme__light {
144
148
  /* Canvas */
145
- --color-snap: hsl(0, 76%, 60%);
146
- --color-selection-fill: hsl(210, 100%, 56%, 24%);
147
- --color-selection-stroke: hsl(214, 84%, 56%);
148
- --color-background: hsl(210, 20%, 98%);
149
- --color-brush-fill: hsl(0, 0%, 56%, 10.2%);
150
- --color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
151
- --color-grid: hsl(0, 0%, 43%);
149
+ --tl-color-snap: hsl(0, 76%, 60%);
150
+ --tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
151
+ --tl-color-selection-stroke: hsl(214, 84%, 56%);
152
+ --tl-color-background: hsl(210, 20%, 98%);
153
+ --tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
154
+ --tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
155
+ --tl-color-grid: hsl(0, 0%, 43%);
152
156
  /* UI */
153
- --color-low: hsl(204, 16%, 94%);
154
- --color-low-border: hsl(204, 16%, 92%);
155
- --color-culled: hsl(204, 14%, 93%);
156
- --color-muted-none: hsl(0, 0%, 0%, 0%);
157
- --color-muted-0: hsl(0, 0%, 0%, 2%);
158
- --color-muted-1: hsl(0, 0%, 0%, 10%);
159
- --color-muted-2: hsl(0, 0%, 0%, 4.3%);
160
- --color-hint: hsl(0, 0%, 0%, 5.5%);
161
- --color-overlay: hsl(0, 0%, 0%, 20%);
162
- --color-divider: hsl(0, 0%, 91%);
163
- --color-panel: hsl(0, 0%, 99%);
164
- --color-panel-contrast: hsl(0, 0%, 100%);
165
- --color-panel-overlay: hsl(0, 0%, 100%, 82%);
166
- --color-panel-transparent: hsla(0, 0%, 99%, 0%);
167
- --color-selected: hsl(214, 84%, 56%);
168
- --color-selected-contrast: hsl(0, 0%, 100%);
169
- --color-focus: hsl(219, 65%, 50%);
170
- --color-tooltip: hsla(200, 14%, 4%, 1);
157
+ --tl-color-low: hsl(204, 16%, 94%);
158
+ --tl-color-low-border: hsl(204, 16%, 92%);
159
+ --tl-color-culled: hsl(204, 14%, 93%);
160
+ --tl-color-muted-none: hsl(0, 0%, 0%, 0%);
161
+ --tl-color-muted-0: hsl(0, 0%, 0%, 2%);
162
+ --tl-color-muted-1: hsl(0, 0%, 0%, 10%);
163
+ --tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
164
+ --tl-color-hint: hsl(0, 0%, 0%, 5.5%);
165
+ --tl-color-overlay: hsl(0, 0%, 0%, 20%);
166
+ --tl-color-divider: hsl(0, 0%, 91%);
167
+ --tl-color-panel: hsl(0, 0%, 99%);
168
+ --tl-color-panel-contrast: hsl(0, 0%, 100%);
169
+ --tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
170
+ --tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
171
+ --tl-color-selected: hsl(214, 84%, 56%);
172
+ --tl-color-selected-contrast: hsl(0, 0%, 100%);
173
+ --tl-color-focus: hsl(219, 65%, 50%);
174
+ --tl-color-tooltip: hsla(200, 14%, 4%, 1);
171
175
  /* Text */
172
- --color-text: hsl(0, 0%, 0%);
173
- --color-text-0: hsl(0, 0%, 11%);
174
- --color-text-1: hsl(0, 0%, 18%);
175
- --color-text-3: hsl(204, 4%, 45%);
176
- --color-text-shadow: hsl(0, 0%, 100%);
177
- --color-text-highlight: hsl(52, 100%, 50%);
178
- --color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
176
+ --tl-color-text: hsl(0, 0%, 0%);
177
+ --tl-color-text-0: hsl(0, 0%, 11%);
178
+ --tl-color-text-1: hsl(0, 0%, 18%);
179
+ --tl-color-text-3: hsl(204, 4%, 45%);
180
+ --tl-color-text-shadow: hsl(0, 0%, 100%);
181
+ --tl-color-text-highlight: hsl(52, 100%, 50%);
182
+ --tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
179
183
  /* Named */
180
- --color-primary: hsl(214, 84%, 56%);
181
- --color-success: hsl(123, 46%, 34%);
182
- --color-info: hsl(201, 98%, 41%);
183
- --color-warning: hsl(27, 98%, 47%);
184
- --color-danger: hsl(0, 90%, 43%);
185
- --color-laser: hsl(0, 100%, 50%);
184
+ --tl-color-primary: hsl(214, 84%, 56%);
185
+ --tl-color-success: hsl(123, 46%, 34%);
186
+ --tl-color-info: hsl(201, 98%, 41%);
187
+ --tl-color-warning: hsl(27, 98%, 47%);
188
+ --tl-color-danger: hsl(0, 90%, 43%);
189
+ --tl-color-laser: hsl(0, 100%, 50%);
186
190
  /* Shadows */
187
- --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
188
- --shadow-2:
191
+ --tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
192
+ --tl-shadow-2:
189
193
  0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
190
- 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
191
- --shadow-3:
194
+ 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
195
+ --tl-shadow-3:
192
196
  0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
193
- inset 0px 0px 0px 1px var(--color-panel-contrast);
194
- --shadow-4:
197
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
198
+ --tl-shadow-4:
195
199
  0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
196
- 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
200
+ 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
197
201
  }
198
202
 
199
203
  .tl-theme__dark {
200
204
  /* Canvas */
201
- --color-snap: hsl(0, 76%, 60%);
202
- --color-selection-fill: hsl(209, 100%, 57%, 20%);
203
- --color-selection-stroke: hsl(214, 84%, 56%);
204
- --color-background: hsl(240, 5%, 6.5%);
205
- --color-brush-fill: hsl(0, 0%, 71%, 5.1%);
206
- --color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
207
- --color-grid: hsl(0, 0%, 40%);
205
+ --tl-color-snap: hsl(0, 76%, 60%);
206
+ --tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
207
+ --tl-color-selection-stroke: hsl(214, 84%, 56%);
208
+ --tl-color-background: hsl(240, 5%, 6.5%);
209
+ --tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
210
+ --tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
211
+ --tl-color-grid: hsl(0, 0%, 40%);
208
212
  /* UI */
209
- --color-low: hsl(260, 4.5%, 10.5%);
210
- --color-low-border: hsl(207, 10%, 10%);
211
- --color-culled: hsl(210, 11%, 19%);
212
- --color-muted-none: hsl(0, 0%, 100%, 0%);
213
- --color-muted-0: hsl(0, 0%, 100%, 2%);
214
- --color-muted-1: hsl(0, 0%, 100%, 10%);
215
- --color-muted-2: hsl(0, 0%, 100%, 5%);
216
- --color-hint: hsl(0, 0%, 100%, 7%);
217
- --color-overlay: hsl(0, 0%, 0%, 50%);
218
- --color-divider: hsl(240, 9%, 22%);
219
- --color-panel: hsl(235, 6.8%, 13.5%);
220
- --color-panel-contrast: hsl(245, 12%, 23%);
221
- --color-panel-overlay: hsl(210, 10%, 24%, 82%);
222
- --color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
223
- --color-selected: hsl(217, 89%, 61%);
224
- --color-selected-contrast: hsl(0, 0%, 100%);
225
- --color-focus: hsl(217, 76%, 80%);
226
- --color-tooltip: hsla(0, 0%, 100%, 1);
213
+ --tl-color-low: hsl(260, 4.5%, 10.5%);
214
+ --tl-color-low-border: hsl(207, 10%, 10%);
215
+ --tl-color-culled: hsl(210, 11%, 19%);
216
+ --tl-color-muted-none: hsl(0, 0%, 100%, 0%);
217
+ --tl-color-muted-0: hsl(0, 0%, 100%, 2%);
218
+ --tl-color-muted-1: hsl(0, 0%, 100%, 10%);
219
+ --tl-color-muted-2: hsl(0, 0%, 100%, 5%);
220
+ --tl-color-hint: hsl(0, 0%, 100%, 7%);
221
+ --tl-color-overlay: hsl(0, 0%, 0%, 50%);
222
+ --tl-color-divider: hsl(240, 9%, 22%);
223
+ --tl-color-panel: hsl(235, 6.8%, 13.5%);
224
+ --tl-color-panel-contrast: hsl(245, 12%, 23%);
225
+ --tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
226
+ --tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
227
+ --tl-color-selected: hsl(217, 89%, 61%);
228
+ --tl-color-selected-contrast: hsl(0, 0%, 100%);
229
+ --tl-color-focus: hsl(217, 76%, 80%);
230
+ --tl-color-tooltip: hsla(0, 0%, 100%, 1);
227
231
  /* Text */
228
- --color-text: hsl(210, 17%, 98%);
229
- --color-text-0: hsl(0, 9%, 94%);
230
- --color-text-1: hsl(0, 0%, 85%);
231
- --color-text-3: hsl(204, 4%, 75%);
232
- --color-text-shadow: hsl(210, 13%, 18%);
233
- --color-text-highlight: hsl(52, 100%, 41%);
234
- --color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
232
+ --tl-color-text: hsl(210, 17%, 98%);
233
+ --tl-color-text-0: hsl(0, 9%, 94%);
234
+ --tl-color-text-1: hsl(0, 0%, 85%);
235
+ --tl-color-text-3: hsl(204, 4%, 75%);
236
+ --tl-color-text-shadow: hsl(210, 13%, 18%);
237
+ --tl-color-text-highlight: hsl(52, 100%, 41%);
238
+ --tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
235
239
  /* Named */
236
- --color-primary: hsl(214, 84%, 56%);
237
- --color-success: hsl(123, 38%, 57%);
238
- --color-info: hsl(199, 92%, 56%);
239
- --color-warning: hsl(36, 100%, 57%);
240
- --color-danger: hsl(0, 82%, 66%);
241
- --color-laser: hsl(0, 100%, 50%);
240
+ --tl-color-primary: hsl(214, 84%, 56%);
241
+ --tl-color-success: hsl(123, 38%, 57%);
242
+ --tl-color-info: hsl(199, 92%, 56%);
243
+ --tl-color-warning: hsl(36, 100%, 57%);
244
+ --tl-color-danger: hsl(0, 82%, 66%);
245
+ --tl-color-laser: hsl(0, 100%, 50%);
242
246
  /* Shadows */
243
- --shadow-1:
247
+ --tl-shadow-1:
244
248
  0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
245
- inset 0px 0px 0px 1px var(--color-panel-contrast);
246
- --shadow-2:
249
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
250
+ --tl-shadow-2:
247
251
  0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
248
- inset 0px 0px 0px 1px var(--color-panel-contrast);
249
- --shadow-3:
252
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
253
+ --tl-shadow-3:
250
254
  0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
251
- inset 0px 0px 0px 1px var(--color-panel-contrast);
255
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
252
256
  }
253
257
 
254
258
  .tl-counter-scaled {
@@ -274,7 +278,7 @@
274
278
  }
275
279
 
276
280
  .tl-container__focused {
277
- outline: 1px solid var(--color-low);
281
+ outline: 1px solid var(--tl-color-low);
278
282
  }
279
283
 
280
284
  input,
@@ -290,7 +294,7 @@ input,
290
294
  inset: 0px;
291
295
  height: 100%;
292
296
  width: 100%;
293
- color: var(--color-text);
297
+ color: var(--tl-color-text);
294
298
  cursor: var(--tl-cursor);
295
299
  overflow: clip;
296
300
  content-visibility: auto;
@@ -298,9 +302,16 @@ input,
298
302
  contain: strict;
299
303
  }
300
304
 
305
+ .tl-canvas__in-front {
306
+ position: absolute;
307
+ inset: 0;
308
+ pointer-events: none;
309
+ z-index: var(--tl-layer-canvas-in-front);
310
+ }
311
+
301
312
  .tl-shapes {
302
313
  position: relative;
303
- z-index: var(--layer-canvas-shapes);
314
+ z-index: var(--tl-layer-canvas-shapes);
304
315
  }
305
316
 
306
317
  .tl-overlays {
@@ -311,7 +322,7 @@ input,
311
322
  width: 100%;
312
323
  contain: strict;
313
324
  pointer-events: none;
314
- z-index: var(--layer-canvas-overlays);
325
+ z-index: var(--tl-layer-canvas-overlays);
315
326
  }
316
327
 
317
328
  .tl-overlays__item {
@@ -335,7 +346,7 @@ input,
335
346
  /* ------------------- Background ------------------- */
336
347
 
337
348
  .tl-background__wrapper {
338
- z-index: var(--layer-canvas-background);
349
+ z-index: var(--tl-layer-canvas-background);
339
350
  position: absolute;
340
351
  inset: 0px;
341
352
  height: 100%;
@@ -343,7 +354,7 @@ input,
343
354
  }
344
355
 
345
356
  .tl-background {
346
- background-color: var(--color-background);
357
+ background-color: var(--tl-color-background);
347
358
  width: 100%;
348
359
  height: 100%;
349
360
  }
@@ -357,12 +368,12 @@ input,
357
368
  height: 100%;
358
369
  touch-action: none;
359
370
  pointer-events: none;
360
- z-index: var(--layer-canvas-grid);
371
+ z-index: var(--tl-layer-canvas-grid);
361
372
  contain: strict;
362
373
  }
363
374
 
364
375
  .tl-grid-dot {
365
- fill: var(--color-grid);
376
+ fill: var(--tl-color-grid);
366
377
  }
367
378
 
368
379
  /* --------------------- Layers --------------------- */
@@ -380,54 +391,54 @@ input,
380
391
 
381
392
  /* back of the stack, behind user's stuff */
382
393
  .tl-collaborator__scribble {
383
- z-index: var(--layer-overlays-collaborator-scribble);
394
+ z-index: var(--tl-layer-overlays-collaborator-scribble);
384
395
  }
385
396
 
386
397
  .tl-collaborator__brush {
387
- z-index: var(--layer-overlays-collaborator-brush);
398
+ z-index: var(--tl-layer-overlays-collaborator-brush);
388
399
  }
389
400
 
390
401
  .tl-collaborator__shape-indicator {
391
- z-index: var(--layer-overlays-collaborator-shape-indicator);
402
+ z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
392
403
  }
393
404
 
394
405
  .tl-user-scribble {
395
- z-index: var(--layer-overlays-user-scribble);
406
+ z-index: var(--tl-layer-overlays-user-scribble);
396
407
  }
397
408
 
398
409
  .tl-user-brush {
399
- z-index: var(--layer-overlays-user-brush);
410
+ z-index: var(--tl-layer-overlays-user-brush);
400
411
  }
401
412
 
402
413
  .tl-user-handles {
403
- z-index: var(--layer-overlays-user-handles);
414
+ z-index: var(--tl-layer-overlays-user-handles);
404
415
  }
405
416
 
406
417
  .tl-user-snapline {
407
- z-index: var(--layer-overlays-user-snapline);
418
+ z-index: var(--tl-layer-overlays-user-snapline);
408
419
  }
409
420
 
410
421
  .tl-selection__fg {
411
422
  pointer-events: none;
412
- z-index: var(--layer-overlays-selection-fg);
423
+ z-index: var(--tl-layer-overlays-selection-fg);
413
424
  }
414
425
 
415
426
  .tl-user-indicator__hint {
416
- z-index: var(--layer-overlays-user-indicator-hint);
427
+ z-index: var(--tl-layer-overlays-user-indicator-hint);
417
428
  stroke-width: calc(2.5px * var(--tl-scale));
418
429
  }
419
430
 
420
431
  .tl-custom-overlays {
421
- z-index: var(--layer-overlays-custom);
432
+ z-index: var(--tl-layer-overlays-custom);
422
433
  }
423
434
 
424
435
  /* behind collaborator cursor */
425
436
  .tl-collaborator__cursor-hint {
426
- z-index: var(--layer-overlays-collaborator-cursor-hint);
437
+ z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
427
438
  }
428
439
 
429
440
  .tl-collaborator__cursor {
430
- z-index: var(--layer-overlays-collaborator-cursor);
441
+ z-index: var(--tl-layer-overlays-collaborator-cursor);
431
442
  }
432
443
 
433
444
  .tl-cursor {
@@ -448,32 +459,32 @@ input,
448
459
  .tl-selection__fg__outline {
449
460
  fill: none;
450
461
  pointer-events: none;
451
- stroke: var(--color-selection-stroke);
462
+ stroke: var(--tl-color-selection-stroke);
452
463
  stroke-width: calc(1.5px * var(--tl-scale));
453
464
  }
454
465
 
455
466
  .tl-corner-handle {
456
467
  pointer-events: none;
457
- stroke: var(--color-selection-stroke);
458
- fill: var(--color-background);
468
+ stroke: var(--tl-color-selection-stroke);
469
+ fill: var(--tl-color-background);
459
470
  stroke-width: calc(1.5px * var(--tl-scale));
460
471
  }
461
472
 
462
473
  .tl-text-handle {
463
474
  pointer-events: none;
464
- fill: var(--color-selection-stroke);
475
+ fill: var(--tl-color-selection-stroke);
465
476
  }
466
477
 
467
478
  .tl-corner-crop-handle {
468
479
  pointer-events: none;
469
480
  fill: none;
470
- stroke: var(--color-selection-stroke);
481
+ stroke: var(--tl-color-selection-stroke);
471
482
  }
472
483
 
473
484
  .tl-corner-crop-edge-handle {
474
485
  pointer-events: none;
475
486
  fill: none;
476
- stroke: var(--color-selection-stroke);
487
+ stroke: var(--tl-color-selection-stroke);
477
488
  }
478
489
 
479
490
  .tl-mobile-rotate__bg {
@@ -483,8 +494,8 @@ input,
483
494
 
484
495
  .tl-mobile-rotate__fg {
485
496
  pointer-events: none;
486
- stroke: var(--color-selection-stroke);
487
- fill: var(--color-background);
497
+ stroke: var(--tl-color-selection-stroke);
498
+ fill: var(--tl-color-background);
488
499
  stroke-width: calc(1.5px * var(--tl-scale));
489
500
  }
490
501
 
@@ -514,8 +525,8 @@ input,
514
525
  text-overflow: ellipsis;
515
526
  font-size: 12px;
516
527
  font-family: var(--font-body);
517
- border-radius: var(--radius-2);
518
- color: var(--color-selected-contrast);
528
+ border-radius: var(--tl-radius-2);
529
+ color: var(--tl-color-selected-contrast);
519
530
  }
520
531
 
521
532
  .tl-nametag-title {
@@ -533,7 +544,7 @@ input,
533
544
  font-size: 12px;
534
545
  font-family: var(--font-body);
535
546
  text-shadow: var(--tl-text-outline);
536
- color: var(--color-selected-contrast);
547
+ color: var(--tl-color-selected-contrast);
537
548
  }
538
549
 
539
550
  .tl-nametag-chat {
@@ -542,31 +553,31 @@ input,
542
553
  left: 13px;
543
554
  width: fit-content;
544
555
  height: fit-content;
545
- color: var(--color-selected-contrast);
556
+ color: var(--tl-color-selected-contrast);
546
557
  white-space: nowrap;
547
558
  position: absolute;
548
559
  padding: 3px 6px;
549
560
  font-size: 12px;
550
561
  font-family: var(--font-body);
551
562
  opacity: 1;
552
- border-radius: var(--radius-2);
563
+ border-radius: var(--tl-radius-2);
553
564
  }
554
565
 
555
566
  .tl-cursor-chat {
556
567
  position: absolute;
557
- color: var(--color-selected-contrast);
568
+ color: var(--tl-color-selected-contrast);
558
569
  white-space: nowrap;
559
570
  padding: 3px 6px;
560
571
  font-size: 12px;
561
572
  font-family: var(--font-body);
562
573
  pointer-events: none;
563
- z-index: var(--layer-cursor);
574
+ z-index: var(--tl-layer-cursor);
564
575
  margin-top: 16px;
565
576
  margin-left: 13px;
566
577
  opacity: 1;
567
578
  border: none;
568
579
  user-select: text;
569
- border-radius: var(--radius-2);
580
+ border-radius: var(--tl-radius-2);
570
581
  }
571
582
 
572
583
  .tl-cursor-chat .tl-cursor-chat__bubble {
@@ -574,13 +585,13 @@ input,
574
585
  }
575
586
 
576
587
  .tl-cursor-chat::selection {
577
- background: var(--color-selected);
578
- color: var(--color-selected-contrast);
588
+ background: var(--tl-color-selected);
589
+ color: var(--tl-color-selected-contrast);
579
590
  text-shadow: none;
580
591
  }
581
592
 
582
593
  .tl-cursor-chat::placeholder {
583
- color: var(--color-selected-contrast);
594
+ color: var(--tl-color-selected-contrast);
584
595
  opacity: 0.7;
585
596
  }
586
597
 
@@ -651,7 +662,7 @@ input,
651
662
  background: none;
652
663
  border-image: none;
653
664
  border: 0px;
654
- caret-color: var(--color-text);
665
+ caret-color: var(--tl-color-text);
655
666
  color: inherit;
656
667
  column-count: initial !important;
657
668
  display: inline-block;
@@ -682,11 +693,17 @@ input,
682
693
  }
683
694
 
684
695
  .tl-text-measure {
696
+ z-index: var(--tl-layer-canvas-hidden);
697
+ opacity: 0;
698
+ visibility: hidden;
699
+
700
+ /* pointer-events: all; */
701
+ /* opacity: 1; */
702
+ /* z-index: 99999; */
703
+
685
704
  position: absolute;
686
- z-index: var(--layer-canvas-hidden);
687
705
  top: 0px;
688
706
  left: 0px;
689
- opacity: 0;
690
707
  width: max-content;
691
708
  box-sizing: border-box;
692
709
  pointer-events: none;
@@ -697,7 +714,6 @@ input,
697
714
  border: none;
698
715
  user-select: none;
699
716
  contain: style paint;
700
- visibility: hidden;
701
717
  /* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
702
718
  unicode-bidi: plaintext;
703
719
  -webkit-user-select: none;
@@ -746,8 +762,8 @@ input,
746
762
  }
747
763
 
748
764
  .tl-text-input::selection {
749
- background: var(--color-selected);
750
- color: var(--color-selected-contrast);
765
+ background: var(--tl-color-selected);
766
+ color: var(--tl-color-selected-contrast);
751
767
  text-shadow: none;
752
768
  }
753
769
 
@@ -757,7 +773,7 @@ input,
757
773
  display: flex;
758
774
  justify-content: center;
759
775
  align-items: center;
760
- color: var(--color-text);
776
+ color: var(--tl-color-text);
761
777
  text-shadow: var(--tl-text-outline);
762
778
  line-height: inherit;
763
779
  position: absolute;
@@ -801,7 +817,7 @@ input,
801
817
 
802
818
  .tl-text-wrapper .tl-text-content {
803
819
  pointer-events: all;
804
- z-index: var(--layer-text-content);
820
+ z-index: var(--tl-layer-text-content);
805
821
  }
806
822
 
807
823
  .tl-text-label__inner > .tl-text-content {
@@ -811,7 +827,7 @@ input,
811
827
  padding: inherit;
812
828
  height: fit-content;
813
829
  width: fit-content;
814
- border-radius: var(--radius-1);
830
+ border-radius: var(--tl-radius-1);
815
831
  max-width: 100%;
816
832
  }
817
833
 
@@ -824,7 +840,7 @@ input,
824
840
  }
825
841
 
826
842
  .tl-text-wrapper[data-isselected='true'] .tl-text-input {
827
- z-index: var(--layer-text-editor);
843
+ z-index: var(--tl-layer-text-editor);
828
844
  pointer-events: all;
829
845
  }
830
846
 
@@ -919,7 +935,7 @@ input,
919
935
  }
920
936
 
921
937
  .tl-rich-text a {
922
- color: var(--color-primary);
938
+ color: var(--tl-color-primary);
923
939
  text-decoration: underline;
924
940
  }
925
941
 
@@ -942,14 +958,14 @@ input,
942
958
  }
943
959
 
944
960
  .tl-theme__dark .tl-rich-text mark {
945
- background-color: var(--color-text-highlight);
961
+ background-color: var(--tl-color-text-highlight);
946
962
  color: currentColor;
947
963
  }
948
964
 
949
965
  @supports (color: color(display-p3 1 1 1)) {
950
966
  @media (color-gamut: p3) {
951
967
  .tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
952
- background-color: var(--color-text-highlight-p3);
968
+ background-color: var(--tl-color-text-highlight-p3);
953
969
  }
954
970
  }
955
971
  }
@@ -961,15 +977,15 @@ input,
961
977
  /* --------------------- Loading -------------------- */
962
978
 
963
979
  .tl-loading {
964
- background-color: var(--color-background);
965
- color: var(--color-text-1);
980
+ background-color: var(--tl-color-background);
981
+ color: var(--tl-color-text-1);
966
982
  height: 100%;
967
983
  width: 100%;
968
984
  display: flex;
969
985
  flex-direction: column;
970
986
  justify-content: center;
971
987
  align-items: center;
972
- gap: var(--space-2);
988
+ gap: var(--tl-space-2);
973
989
  font-size: 14px;
974
990
  font-weight: 500;
975
991
  opacity: 0;
@@ -977,7 +993,7 @@ input,
977
993
  animation-delay: 0.2s;
978
994
  position: absolute;
979
995
  inset: 0px;
980
- z-index: var(--layer-canvas-blocker);
996
+ z-index: var(--tl-layer-canvas-blocker);
981
997
  }
982
998
 
983
999
  @keyframes tl-fade-in {
@@ -1010,8 +1026,8 @@ input,
1010
1026
  }
1011
1027
 
1012
1028
  .tl-brush__default {
1013
- stroke: var(--color-brush-stroke);
1014
- fill: var(--color-brush-fill);
1029
+ stroke: var(--tl-color-brush-stroke);
1030
+ fill: var(--tl-color-brush-fill);
1015
1031
  }
1016
1032
 
1017
1033
  /* -------------------- Scribble -------------------- */
@@ -1026,13 +1042,13 @@ input,
1026
1042
  /* ---------------------- Snaps --------------------- */
1027
1043
 
1028
1044
  .tl-snap-indicator {
1029
- stroke: var(--color-snap);
1045
+ stroke: var(--tl-color-snap);
1030
1046
  stroke-width: calc(1px * var(--tl-scale));
1031
1047
  fill: none;
1032
1048
  }
1033
1049
 
1034
1050
  .tl-snap-point {
1035
- stroke: var(--color-snap);
1051
+ stroke: var(--tl-color-snap);
1036
1052
  stroke-width: calc(1px * var(--tl-scale));
1037
1053
  fill: none;
1038
1054
  }
@@ -1052,7 +1068,7 @@ input,
1052
1068
  justify-content: center;
1053
1069
  font-size: 12px;
1054
1070
  font-weight: 400;
1055
- color: var(--color-text-1);
1071
+ color: var(--tl-color-text-1);
1056
1072
  padding: 13px;
1057
1073
  cursor: var(--tl-cursor-pointer);
1058
1074
  border: none;
@@ -1070,13 +1086,13 @@ input,
1070
1086
  display: block;
1071
1087
  width: calc(100% - 12px);
1072
1088
  height: calc(100% - 12px);
1073
- border-radius: var(--radius-1);
1074
- background-color: var(--color-background);
1089
+ border-radius: var(--tl-radius-1);
1090
+ background-color: var(--tl-color-background);
1075
1091
  pointer-events: none;
1076
1092
  }
1077
1093
 
1078
1094
  .tl-hyperlink-button:focus-visible {
1079
- color: var(--color-selected);
1095
+ color: var(--tl-color-selected);
1080
1096
  }
1081
1097
 
1082
1098
  .tl-hyperlink__icon {
@@ -1103,8 +1119,8 @@ input,
1103
1119
  }
1104
1120
 
1105
1121
  .tl-handle__fg {
1106
- fill: var(--color-selected-contrast);
1107
- stroke: var(--color-selection-stroke);
1122
+ fill: var(--tl-color-selected-contrast);
1123
+ stroke: var(--tl-color-selection-stroke);
1108
1124
  stroke-width: calc(1.5px * var(--tl-scale));
1109
1125
  pointer-events: none;
1110
1126
  }
@@ -1114,7 +1130,7 @@ input,
1114
1130
  }
1115
1131
 
1116
1132
  .tl-handle__clone > .tl-handle__fg {
1117
- fill: var(--color-selection-stroke);
1133
+ fill: var(--tl-color-selection-stroke);
1118
1134
  stroke: none;
1119
1135
  }
1120
1136
 
@@ -1124,7 +1140,7 @@ input,
1124
1140
 
1125
1141
  @media (pointer: coarse) {
1126
1142
  .tl-handle__bg:active {
1127
- fill: var(--color-selection-fill);
1143
+ fill: var(--tl-color-selection-fill);
1128
1144
  }
1129
1145
 
1130
1146
  .tl-handle__create {
@@ -1180,13 +1196,13 @@ input,
1180
1196
  stroke-linejoin: round;
1181
1197
  /* content-visibility: auto; */
1182
1198
  transform-origin: top left;
1183
- color: var(--color-text-1);
1199
+ color: var(--tl-color-text-1);
1184
1200
  }
1185
1201
 
1186
1202
  /* -------------------- Group shape ------------------ */
1187
1203
 
1188
1204
  .tl-group {
1189
- stroke: var(--color-text);
1205
+ stroke: var(--tl-color-text);
1190
1206
  stroke-width: calc(1px * var(--tl-scale));
1191
1207
  opacity: 0.5;
1192
1208
  }
@@ -1204,12 +1220,12 @@ input,
1204
1220
  justify-content: center;
1205
1221
  align-items: center;
1206
1222
  text-align: center;
1207
- color: var(--color-text);
1223
+ color: var(--tl-color-text);
1208
1224
  text-shadow: var(--tl-text-outline);
1209
1225
  }
1210
1226
 
1211
1227
  .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
1212
- border-radius: var(--radius-1);
1228
+ border-radius: var(--tl-radius-1);
1213
1229
  box-sizing: content-box;
1214
1230
  height: max-content;
1215
1231
  width: max-content;
@@ -1220,22 +1236,22 @@ input,
1220
1236
  }
1221
1237
 
1222
1238
  .tl-arrow-hint {
1223
- stroke: var(--color-text-1);
1239
+ stroke: var(--tl-color-text-1);
1224
1240
  fill: none;
1225
1241
  stroke-linecap: round;
1226
1242
  overflow: visible;
1227
1243
  }
1228
1244
 
1229
1245
  .tl-arrow-hint-handle {
1230
- fill: var(--color-selected-contrast);
1231
- stroke: var(--color-selection-stroke);
1246
+ fill: var(--tl-color-selected-contrast);
1247
+ stroke: var(--tl-color-selection-stroke);
1232
1248
  stroke-width: calc(1.5px * var(--tl-scale));
1233
1249
  r: calc(4px * var(--tl-scale));
1234
1250
  }
1235
1251
 
1236
1252
  .tl-arrow-hint-snap {
1237
1253
  stroke: transparent;
1238
- fill: var(--color-selection-fill);
1254
+ fill: var(--tl-color-selection-fill);
1239
1255
  r: calc(12px * var(--tl-scale));
1240
1256
  }
1241
1257
 
@@ -1255,40 +1271,40 @@ input,
1255
1271
  width: 100%;
1256
1272
  height: 100%;
1257
1273
  position: relative;
1258
- border: 1px solid var(--color-panel-contrast);
1259
- background-color: var(--color-panel);
1260
- border-radius: var(--radius-2);
1274
+ border: 1px solid var(--tl-color-panel-contrast);
1275
+ background-color: var(--tl-color-panel);
1276
+ border-radius: var(--tl-radius-2);
1261
1277
  display: flex;
1262
1278
  flex-direction: column;
1263
1279
  overflow: hidden;
1264
1280
  }
1265
1281
 
1266
1282
  .tl-bookmark__container--safariExport {
1267
- border: 1px solid var(--color-divider);
1283
+ border: 1px solid var(--tl-color-divider);
1268
1284
  }
1269
1285
 
1270
1286
  .tl-bookmark__image_container {
1271
1287
  flex: 1 1 100%;
1272
1288
  overflow: hidden;
1273
- border-top-left-radius: var(--radius-1);
1274
- border-top-right-radius: var(--radius-1);
1289
+ border-top-left-radius: var(--tl-radius-1);
1290
+ border-top-right-radius: var(--tl-radius-1);
1275
1291
  width: 100%;
1276
1292
  height: 100%;
1277
1293
  display: flex;
1278
1294
  justify-content: flex-end;
1279
1295
  align-items: flex-start;
1280
- box-shadow: inset 0px 0px 0px 1px var(--color-divider);
1296
+ box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
1281
1297
  }
1282
1298
 
1283
1299
  .tl-bookmark__image_container > .tl-hyperlink-button::after {
1284
- background-color: var(--color-panel);
1300
+ background-color: var(--tl-color-panel);
1285
1301
  }
1286
1302
 
1287
1303
  .tl-bookmark__placeholder {
1288
1304
  width: 100%;
1289
1305
  height: 100%;
1290
- background-color: var(--color-muted-2);
1291
- border-bottom: 1px solid var(--color-muted-2);
1306
+ background-color: var(--tl-color-muted-2);
1307
+ border-bottom: 1px solid var(--tl-color-muted-2);
1292
1308
  }
1293
1309
 
1294
1310
  .tl-bookmark__image {
@@ -1296,12 +1312,12 @@ input,
1296
1312
  height: 100%;
1297
1313
  object-fit: cover;
1298
1314
  object-position: center;
1299
- border-bottom: 1px solid var(--color-muted-2);
1315
+ border-bottom: 1px solid var(--tl-color-muted-2);
1300
1316
  }
1301
1317
 
1302
1318
  .tl-bookmark__copy_container {
1303
- background-color: var(--color-muted-0);
1304
- padding: var(--space-4);
1319
+ background-color: var(--tl-color-muted-0);
1320
+ padding: var(--tl-space-4);
1305
1321
  pointer-events: all;
1306
1322
  display: flex;
1307
1323
  flex-direction: column;
@@ -1321,7 +1337,7 @@ input,
1321
1337
  font-size: 16px;
1322
1338
  line-height: 1.6;
1323
1339
  font-weight: bold;
1324
- padding-bottom: var(--space-2);
1340
+ padding-bottom: var(--tl-space-2);
1325
1341
  overflow: hidden;
1326
1342
  max-height: calc((16px * 1.6) * 2);
1327
1343
  -webkit-box-orient: vertical;
@@ -1341,19 +1357,19 @@ input,
1341
1357
  line-clamp: 3;
1342
1358
  text-overflow: ellipsis;
1343
1359
  display: -webkit-box;
1344
- color: var(--color-text-2);
1345
- margin: var(--space-2) 0px;
1360
+ color: var(--tl-color-text-2);
1361
+ margin: var(--tl-space-2) 0px;
1346
1362
  }
1347
1363
 
1348
1364
  .tl-bookmark__heading + .tl-bookmark__link,
1349
1365
  .tl-bookmark__description + .tl-bookmark__link {
1350
- margin-top: var(--space-3);
1366
+ margin-top: var(--tl-space-3);
1351
1367
  }
1352
1368
  .tl-bookmark__link {
1353
1369
  font-size: 12px;
1354
1370
  pointer-events: all;
1355
1371
  display: flex;
1356
- color: var(--color-text-2);
1372
+ color: var(--tl-color-text-2);
1357
1373
  align-items: center;
1358
1374
  cursor: var(--tl-cursor-pointer);
1359
1375
  width: fit-content;
@@ -1395,7 +1411,7 @@ input,
1395
1411
  width: 100%;
1396
1412
  height: 100%;
1397
1413
  pointer-events: all;
1398
- /* background-color: var(--color-background); */
1414
+ /* background-color: var(--tl-color-background); */
1399
1415
 
1400
1416
  display: flex;
1401
1417
  justify-content: center;
@@ -1424,7 +1440,7 @@ input,
1424
1440
  height: 100%;
1425
1441
  pointer-events: all;
1426
1442
  opacity: 1;
1427
- z-index: var(--layer-text-container);
1443
+ z-index: var(--tl-layer-text-container);
1428
1444
  border-radius: 1px;
1429
1445
  }
1430
1446
 
@@ -1440,22 +1456,22 @@ input,
1440
1456
  }
1441
1457
 
1442
1458
  .tl-frame__creating {
1443
- stroke: var(--color-selected);
1459
+ stroke: var(--tl-color-selected);
1444
1460
  fill: none;
1445
1461
  }
1446
1462
 
1447
1463
  .tl-frame-heading {
1448
- --frame-padding-x: 6px;
1449
- --frame-height: 24px;
1450
- --frame-minimum-width: 32px;
1451
- --frame-offset-width: 16px;
1464
+ --tl-frame-padding-x: 6px;
1465
+ --tl-frame-height: 24px;
1466
+ --tl-frame-minimum-width: 32px;
1467
+ --tl-frame-offset-width: 16px;
1452
1468
  display: flex;
1453
1469
  align-items: center;
1454
1470
  position: absolute;
1455
1471
  transform-origin: 0% 100%;
1456
1472
  overflow: hidden;
1457
1473
  max-width: 100%;
1458
- min-width: var(--frame-minimum-width);
1474
+ min-width: var(--tl-frame-minimum-width);
1459
1475
  height: auto;
1460
1476
  font-size: 12px;
1461
1477
  padding-bottom: 4px;
@@ -1467,18 +1483,18 @@ input,
1467
1483
  /* scale from bottom left corner so we can pin it to the top left corner of the frame */
1468
1484
  transform-origin: 0% 100%;
1469
1485
  display: flex;
1470
- height: var(--frame-height);
1486
+ height: var(--tl-frame-height);
1471
1487
  width: 100%;
1472
1488
  align-items: center;
1473
- border-radius: var(--radius-1);
1489
+ border-radius: var(--tl-radius-1);
1474
1490
  }
1475
1491
 
1476
1492
  .tl-frame-label {
1477
1493
  pointer-events: all;
1478
1494
  overflow: hidden;
1479
1495
  text-overflow: ellipsis;
1480
- padding: 0px var(--frame-padding-x);
1481
- border-radius: var(--radius-1);
1496
+ padding: 0px var(--tl-frame-padding-x);
1497
+ border-radius: var(--tl-radius-1);
1482
1498
  position: relative;
1483
1499
  font-size: inherit;
1484
1500
  white-space: pre;
@@ -1488,12 +1504,12 @@ input,
1488
1504
  color: transparent;
1489
1505
  white-space: pre;
1490
1506
  width: auto;
1491
- min-width: var(--frame-minimum-width);
1507
+ min-width: var(--tl-frame-minimum-width);
1492
1508
  height: 100%;
1493
1509
  overflow: visible;
1494
- background-color: var(--color-panel);
1495
- border-color: var(--color-selected);
1496
- box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
1510
+ background-color: var(--tl-color-panel);
1511
+ border-color: var(--tl-color-selected);
1512
+ box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
1497
1513
  }
1498
1514
 
1499
1515
  .tl-frame-name-input {
@@ -1501,7 +1517,7 @@ input,
1501
1517
  border: none;
1502
1518
  background: none;
1503
1519
  outline: none;
1504
- padding: 0px var(--frame-padding-x);
1520
+ padding: 0px var(--tl-frame-padding-x);
1505
1521
  inset: 0px;
1506
1522
  height: 100%;
1507
1523
  width: 100%;
@@ -1509,8 +1525,8 @@ input,
1509
1525
  font-family: inherit;
1510
1526
  font-weight: inherit;
1511
1527
  width: 100%;
1512
- color: var(--color-text-1);
1513
- border-radius: var(--radius-1);
1528
+ color: var(--tl-color-text-1);
1529
+ border-radius: var(--tl-radius-1);
1514
1530
  user-select: all;
1515
1531
  -webkit-user-select: text;
1516
1532
  white-space: pre;
@@ -1530,7 +1546,7 @@ input,
1530
1546
 
1531
1547
  .tl-embed {
1532
1548
  border: none;
1533
- border-radius: var(--radius-2);
1549
+ border-radius: var(--tl-radius-2);
1534
1550
  }
1535
1551
 
1536
1552
  /* -------------- Shape error boundary -------------- */
@@ -1538,11 +1554,11 @@ input,
1538
1554
  .tl-shape-error-boundary {
1539
1555
  width: 100%;
1540
1556
  height: 100%;
1541
- background-color: var(--color-muted-1);
1557
+ background-color: var(--tl-color-muted-1);
1542
1558
  border-width: calc(1px * var(--tl-scale));
1543
- border-color: var(--color-muted-1);
1559
+ border-color: var(--tl-color-muted-1);
1544
1560
  border-style: solid;
1545
- border-radius: calc(var(--radius-1) * var(--tl-scale));
1561
+ border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
1546
1562
  display: flex;
1547
1563
  flex-direction: column;
1548
1564
  align-items: center;
@@ -1551,7 +1567,7 @@ input,
1551
1567
  position: relative;
1552
1568
  pointer-events: all;
1553
1569
  overflow: hidden;
1554
- padding: var(--space-2);
1570
+ padding: var(--tl-space-2);
1555
1571
  }
1556
1572
 
1557
1573
  .tl-shape-error-boundary::before {
@@ -1559,7 +1575,7 @@ input,
1559
1575
  content: 'Error';
1560
1576
  font-size: 12px;
1561
1577
  font-family: inherit;
1562
- color: var(--color-text-0);
1578
+ color: var(--tl-color-text-0);
1563
1579
  }
1564
1580
 
1565
1581
  /* ----------------- Error boundary ----------------- */
@@ -1570,9 +1586,9 @@ input,
1570
1586
  display: flex;
1571
1587
  align-items: center;
1572
1588
  justify-content: center;
1573
- padding: var(--space-4);
1574
- background-color: var(--color-background);
1575
- color: var(--color-text-1);
1589
+ padding: var(--tl-space-4);
1590
+ background-color: var(--tl-color-background);
1591
+ color: var(--tl-color-text-1);
1576
1592
  position: absolute;
1577
1593
  }
1578
1594
 
@@ -1581,8 +1597,8 @@ input,
1581
1597
  inset: 0px;
1582
1598
  height: 100%;
1583
1599
  width: 100%;
1584
- z-index: var(--layer-error-overlay);
1585
- background-color: var(--color-overlay);
1600
+ z-index: var(--tl-layer-error-overlay);
1601
+ background-color: var(--tl-color-overlay);
1586
1602
  }
1587
1603
 
1588
1604
  .tl-error-boundary__content * {
@@ -1597,7 +1613,7 @@ input,
1597
1613
  inset: 0px;
1598
1614
  height: 100%;
1599
1615
  width: 100%;
1600
- z-index: var(--layer-error-canvas);
1616
+ z-index: var(--tl-layer-error-canvas);
1601
1617
  }
1602
1618
 
1603
1619
  /* some browsers seem to have some weird interactions between stacking contexts
@@ -1610,7 +1626,7 @@ it from receiving any pointer events or affecting the cursor. */
1610
1626
  inset: 0px;
1611
1627
  height: 100%;
1612
1628
  width: 100%;
1613
- z-index: var(--layer-error-canvas-after);
1629
+ z-index: var(--tl-layer-error-canvas-after);
1614
1630
  pointer-events: all;
1615
1631
  }
1616
1632
 
@@ -1620,16 +1636,16 @@ it from receiving any pointer events or affecting the cursor. */
1620
1636
  max-width: 100%;
1621
1637
  width: 400px;
1622
1638
  max-height: 100%;
1623
- background-color: var(--color-panel);
1639
+ background-color: var(--tl-color-panel);
1624
1640
  padding: 16px;
1625
1641
  border-radius: 16px;
1626
- box-shadow: var(--shadow-2);
1642
+ box-shadow: var(--tl-shadow-2);
1627
1643
  font-size: 14px;
1628
1644
  font-weight: 400;
1629
1645
  display: flex;
1630
1646
  flex-direction: column;
1631
1647
  overflow: auto;
1632
- z-index: var(--layer-error-content);
1648
+ z-index: var(--tl-layer-error-content);
1633
1649
  gap: 12px;
1634
1650
  }
1635
1651
 
@@ -1644,10 +1660,10 @@ it from receiving any pointer events or affecting the cursor. */
1644
1660
  }
1645
1661
 
1646
1662
  .tl-error-boundary__content h4 {
1647
- border: 1px solid var(--color-low-border);
1663
+ border: 1px solid var(--tl-color-low-border);
1648
1664
  margin: -6px 0 0 0;
1649
- padding: var(--space-5);
1650
- border-radius: var(--radius-2);
1665
+ padding: var(--tl-space-5);
1666
+ border-radius: var(--tl-radius-2);
1651
1667
  font-weight: normal;
1652
1668
  }
1653
1669
 
@@ -1657,10 +1673,10 @@ it from receiving any pointer events or affecting the cursor. */
1657
1673
  }
1658
1674
 
1659
1675
  .tl-error-boundary__content pre {
1660
- background-color: var(--color-muted-2);
1676
+ background-color: var(--tl-color-muted-2);
1661
1677
  margin-top: 0;
1662
- padding: var(--space-5);
1663
- border-radius: var(--radius-2);
1678
+ padding: var(--tl-space-5);
1679
+ border-radius: var(--tl-radius-2);
1664
1680
  overflow: auto;
1665
1681
  font-size: 12px;
1666
1682
  max-height: 320px;
@@ -1672,15 +1688,15 @@ it from receiving any pointer events or affecting the cursor. */
1672
1688
  font-family: inherit;
1673
1689
  font-size: 14px;
1674
1690
  font-weight: 500;
1675
- padding: var(--space-4);
1676
- border-radius: var(--radius-3);
1691
+ padding: var(--tl-space-4);
1692
+ border-radius: var(--tl-radius-3);
1677
1693
  cursor: var(--tl-cursor-pointer);
1678
1694
  color: inherit;
1679
1695
  background-color: transparent;
1680
1696
  }
1681
1697
 
1682
1698
  .tl-error-boundary__content a {
1683
- color: var(--color-selected);
1699
+ color: var(--tl-color-selected);
1684
1700
  font-weight: 500;
1685
1701
  text-decoration: none;
1686
1702
  }
@@ -1692,31 +1708,31 @@ it from receiving any pointer events or affecting the cursor. */
1692
1708
 
1693
1709
  .tl-error-boundary__content__error button {
1694
1710
  position: absolute;
1695
- top: var(--space-2);
1696
- right: var(--space-2);
1711
+ top: var(--tl-space-2);
1712
+ right: var(--tl-space-2);
1697
1713
  font-size: 12px;
1698
- padding: var(--space-2) var(--space-3);
1699
- background-color: var(--color-panel);
1700
- border-radius: var(--radius-1);
1714
+ padding: var(--tl-space-2) var(--tl-space-3);
1715
+ background-color: var(--tl-color-panel);
1716
+ border-radius: var(--tl-radius-1);
1701
1717
  }
1702
1718
 
1703
1719
  .tl-error-boundary__content__actions {
1704
1720
  display: flex;
1705
1721
  justify-content: space-between;
1706
- gap: var(--space-4);
1722
+ gap: var(--tl-space-4);
1707
1723
  margin: 0px;
1708
1724
  margin-left: -4px;
1709
1725
  }
1710
1726
  .tl-error-boundary__content__actions__group {
1711
1727
  display: flex;
1712
- gap: var(--space-4);
1728
+ gap: var(--tl-space-4);
1713
1729
  }
1714
1730
  .tl-error-boundary__content .tl-error-boundary__reset {
1715
- color: var(--color-danger);
1731
+ color: var(--tl-color-danger);
1716
1732
  }
1717
1733
  .tl-error-boundary__content .tl-error-boundary__refresh {
1718
- background-color: var(--color-primary);
1719
- color: var(--color-selected-contrast);
1734
+ background-color: var(--tl-color-primary);
1735
+ color: var(--tl-color-selected-contrast);
1720
1736
  }
1721
1737
  .tl-container__focused:not(.tl-container__no-focus-ring)
1722
1738
  .tlui-button.tl-error-boundary__refresh:focus-visible {
@@ -1728,7 +1744,7 @@ it from receiving any pointer events or affecting the cursor. */
1728
1744
 
1729
1745
  .tl-hit-test-blocker {
1730
1746
  position: absolute;
1731
- z-index: var(--layer-canvas-blocker);
1747
+ z-index: var(--tl-layer-canvas-blocker);
1732
1748
  inset: 0px;
1733
1749
  width: 100%;
1734
1750
  height: 100%;
@@ -1748,32 +1764,32 @@ it from receiving any pointer events or affecting the cursor. */
1748
1764
 
1749
1765
  .tl-handle__bg:hover {
1750
1766
  cursor: var(--tl-cursor-grab);
1751
- fill: var(--color-selection-fill);
1767
+ fill: var(--tl-color-selection-fill);
1752
1768
  }
1753
1769
 
1754
1770
  .tl-bookmark__link:hover {
1755
- color: var(--color-selected);
1771
+ color: var(--tl-color-selected);
1756
1772
  }
1757
1773
 
1758
1774
  .tl-hyperlink-button:hover {
1759
- color: var(--color-selected);
1775
+ color: var(--tl-color-selected);
1760
1776
  }
1761
1777
 
1762
1778
  .tl-error-boundary__content button:hover {
1763
- background-color: var(--color-low);
1779
+ background-color: var(--tl-color-low);
1764
1780
  }
1765
1781
  .tl-error-boundary__content a:hover {
1766
- color: var(--color-text-1);
1782
+ color: var(--tl-color-text-1);
1767
1783
  }
1768
1784
  .tl-error-boundary__content .tl-error-boundary__refresh:hover {
1769
- background-color: var(--color-primary);
1785
+ background-color: var(--tl-color-primary);
1770
1786
  opacity: 0.9;
1771
1787
  }
1772
1788
 
1773
1789
  /* These three rules help preserve clicking into specific points in text areas *while*
1774
1790
  * already in edit mode when jumping from shape to shape. */
1775
1791
  .tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
1776
- z-index: var(--layer-text-editor);
1792
+ z-index: var(--tl-layer-text-editor);
1777
1793
  pointer-events: all;
1778
1794
  }
1779
1795
  }
@@ -1781,15 +1797,15 @@ it from receiving any pointer events or affecting the cursor. */
1781
1797
  /* @tldraw/ui */
1782
1798
 
1783
1799
  .tl-container {
1784
- --layer-above: 1;
1785
- --layer-focused-input: 10;
1786
- --layer-menu-click-capture: 250;
1787
- --layer-panels: 300;
1788
- --layer-menus: 400;
1789
- --layer-toasts: 650;
1790
- --layer-cursor: 700;
1791
- --layer-header-footer: 999;
1792
- --layer-following-indicator: 1000;
1800
+ --tl-layer-above: 1;
1801
+ --tl-layer-focused-input: 10;
1802
+ --tl-layer-menu-click-capture: 250;
1803
+ --tl-layer-panels: 300;
1804
+ --tl-layer-menus: 400;
1805
+ --tl-layer-toasts: 650;
1806
+ --tl-layer-cursor: 700;
1807
+ --tl-layer-header-footer: 999;
1808
+ --tl-layer-following-indicator: 1000;
1793
1809
  }
1794
1810
 
1795
1811
  /* Button */
@@ -1813,23 +1829,23 @@ it from receiving any pointer events or affecting the cursor. */
1813
1829
  text-rendering: optimizeLegibility;
1814
1830
  font-size: 12px;
1815
1831
  gap: 0px;
1816
- color: var(--color-text-1);
1832
+ color: var(--tl-color-text-1);
1817
1833
  z-index: 0;
1818
1834
  }
1819
1835
 
1820
1836
  .tlui-button:disabled {
1821
- color: var(--color-text-3);
1837
+ color: var(--tl-color-text-3);
1822
1838
  text-shadow: none;
1823
1839
  cursor: default;
1824
1840
  }
1825
1841
 
1826
1842
  .tlui-button:disabled .tlui-kbd {
1827
- color: var(--color-text-3);
1843
+ color: var(--tl-color-text-3);
1828
1844
  }
1829
1845
 
1830
1846
  .tlui-button > * {
1831
1847
  position: relative;
1832
- z-index: var(--layer-above);
1848
+ z-index: var(--tl-layer-above);
1833
1849
  }
1834
1850
 
1835
1851
  .tlui-button__label {
@@ -1845,7 +1861,7 @@ it from receiving any pointer events or affecting the cursor. */
1845
1861
  */
1846
1862
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
1847
1863
  border-radius: 10px;
1848
- outline: 2px solid var(--color-focus);
1864
+ outline: 2px solid var(--tl-color-focus);
1849
1865
  outline-offset: -5px;
1850
1866
  }
1851
1867
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
@@ -1853,7 +1869,7 @@ it from receiving any pointer events or affecting the cursor. */
1853
1869
  }
1854
1870
  .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
1855
1871
  border-radius: 10px;
1856
- outline: 2px solid var(--color-focus);
1872
+ outline: 2px solid var(--tl-color-focus);
1857
1873
  outline-offset: -5px;
1858
1874
  }
1859
1875
 
@@ -1862,8 +1878,8 @@ it from receiving any pointer events or affecting the cursor. */
1862
1878
  content: '';
1863
1879
  position: absolute;
1864
1880
  inset: 4px;
1865
- border-radius: var(--radius-2);
1866
- background: var(--color-muted-2);
1881
+ border-radius: var(--tl-radius-2);
1882
+ background: var(--tl-color-muted-2);
1867
1883
  opacity: 0;
1868
1884
  }
1869
1885
 
@@ -1873,18 +1889,18 @@ it from receiving any pointer events or affecting the cursor. */
1873
1889
 
1874
1890
  .tlui-button[data-isactive='true']::after,
1875
1891
  .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
1876
- background: var(--color-hint);
1892
+ background: var(--tl-color-hint);
1877
1893
  opacity: 1;
1878
1894
  }
1879
1895
 
1880
1896
  .tlui-button[aria-expanded='true'][data-direction='left'] {
1881
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
1897
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1882
1898
  opacity: 1;
1883
1899
  }
1884
1900
 
1885
1901
  @media (hover: hover) {
1886
1902
  .tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
1887
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
1903
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1888
1904
  opacity: 1;
1889
1905
  }
1890
1906
 
@@ -1898,18 +1914,18 @@ it from receiving any pointer events or affecting the cursor. */
1898
1914
  }
1899
1915
 
1900
1916
  .tlui-button__icon + .tlui-button__label {
1901
- margin-left: var(--space-2);
1917
+ margin-left: var(--tl-space-2);
1902
1918
  }
1903
1919
 
1904
1920
  /* Low button */
1905
1921
 
1906
1922
  .tlui-button__low {
1907
- border-radius: var(--radius-3);
1908
- background-color: var(--color-low);
1923
+ border-radius: var(--tl-radius-3);
1924
+ background-color: var(--tl-color-low);
1909
1925
  }
1910
1926
 
1911
1927
  .tlui-button__low::after {
1912
- background-color: var(--color-muted-2);
1928
+ background-color: var(--tl-color-muted-2);
1913
1929
  opacity: 0;
1914
1930
  }
1915
1931
 
@@ -1922,21 +1938,21 @@ it from receiving any pointer events or affecting the cursor. */
1922
1938
  /* Primary / danger buttons */
1923
1939
 
1924
1940
  .tlui-button__primary {
1925
- color: var(--color-primary);
1941
+ color: var(--tl-color-primary);
1926
1942
  }
1927
1943
 
1928
1944
  .tlui-button__danger {
1929
- color: var(--color-danger);
1945
+ color: var(--tl-color-danger);
1930
1946
  text-shadow: none;
1931
1947
  }
1932
1948
 
1933
1949
  @media (hover: hover) {
1934
1950
  .tlui-button__primary:not(:disabled, :focus-visible):hover {
1935
- color: var(--color-primary);
1951
+ color: var(--tl-color-primary);
1936
1952
  }
1937
1953
 
1938
1954
  .tlui-button__danger:not(:disabled, :focus-visible):hover {
1939
- color: var(--color-danger);
1955
+ color: var(--tl-color-danger);
1940
1956
  text-shadow: none;
1941
1957
  }
1942
1958
  }
@@ -1953,7 +1969,7 @@ it from receiving any pointer events or affecting the cursor. */
1953
1969
 
1954
1970
  .tlui-button__menu::after {
1955
1971
  inset: 4px;
1956
- border-radius: var(--radius-2);
1972
+ border-radius: var(--tl-radius-2);
1957
1973
  }
1958
1974
 
1959
1975
  .tlui-button__menu > .tlui-icon + .tlui-button__label {
@@ -1983,13 +1999,21 @@ it from receiving any pointer events or affecting the cursor. */
1983
1999
 
1984
2000
  .tlui-main-toolbar__lock-button {
1985
2001
  position: absolute;
1986
- top: 4px;
1987
- right: 0px;
1988
2002
  pointer-events: all;
1989
2003
  height: 40px;
1990
2004
  width: 40px;
2005
+ border-radius: var(--tl-radius-2);
2006
+ }
2007
+
2008
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
2009
+ top: 4px;
2010
+ right: 0px;
1991
2011
  min-width: 0px;
1992
- border-radius: var(--radius-2);
2012
+ }
2013
+
2014
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
2015
+ bottom: 0px;
2016
+ min-height: 0px;
1993
2017
  }
1994
2018
 
1995
2019
  .tlui-main-toolbar__lock-button::after {
@@ -2012,24 +2036,24 @@ it from receiving any pointer events or affecting the cursor. */
2012
2036
  }
2013
2037
 
2014
2038
  .tlui-button__tool[aria-pressed='true'] {
2015
- color: var(--color-selected-contrast);
2039
+ color: var(--tl-color-selected-contrast);
2016
2040
  }
2017
2041
 
2018
2042
  .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
2019
- color: var(--color-selected-contrast);
2043
+ color: var(--tl-color-selected-contrast);
2020
2044
  }
2021
2045
 
2022
2046
  .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
2023
- background: var(--color-selected);
2047
+ background: var(--tl-color-selected);
2024
2048
  opacity: 1;
2025
2049
  }
2026
2050
 
2027
- .tlui-layout__mobile .tlui-button__tool {
2051
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
2028
2052
  height: 48px;
2029
2053
  width: 43px;
2030
2054
  }
2031
2055
 
2032
- .tlui-layout__mobile .tlui-button__tool > .tlui-icon {
2056
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
2033
2057
  height: 16px;
2034
2058
  width: 16px;
2035
2059
  }
@@ -2046,6 +2070,18 @@ it from receiving any pointer events or affecting the cursor. */
2046
2070
  margin-right: -2px;
2047
2071
  }
2048
2072
 
2073
+ /* Column layout */
2074
+
2075
+ .tlui-column {
2076
+ display: flex;
2077
+ flex-direction: column;
2078
+ padding: 2px 0;
2079
+ }
2080
+ .tlui-column > * {
2081
+ margin-top: -2px;
2082
+ margin-bottom: -2px;
2083
+ }
2084
+
2049
2085
  /* Grid layout */
2050
2086
 
2051
2087
  .tlui-grid {
@@ -2081,9 +2117,9 @@ it from receiving any pointer events or affecting the cursor. */
2081
2117
  pointer-events: none;
2082
2118
  user-select: none;
2083
2119
  contain: strict;
2084
- z-index: var(--layer-panels);
2120
+ z-index: var(--tl-layer-panels);
2085
2121
  transform: translate3d(0, 0, 0);
2086
- --sab: env(safe-area-inset-bottom);
2122
+ --tl-sab: env(safe-area-inset-bottom);
2087
2123
  font-weight: 500;
2088
2124
  line-height: 1.6;
2089
2125
  -webkit-font-smoothing: antialiased;
@@ -2136,11 +2172,11 @@ it from receiving any pointer events or affecting the cursor. */
2136
2172
  justify-content: flex-start;
2137
2173
  align-items: flex-start;
2138
2174
  width: min-content;
2139
- gap: var(--space-3);
2140
- margin: var(--space-2) var(--space-3);
2175
+ gap: var(--tl-space-3);
2176
+ margin: var(--tl-space-2) var(--tl-space-3);
2141
2177
  white-space: nowrap;
2142
2178
  pointer-events: none;
2143
- z-index: var(--layer-panels);
2179
+ z-index: var(--tl-layer-panels);
2144
2180
  }
2145
2181
 
2146
2182
  /* ---------------------- Icon ---------------------- */
@@ -2168,7 +2204,7 @@ it from receiving any pointer events or affecting the cursor. */
2168
2204
 
2169
2205
  .tlui-slider__container {
2170
2206
  width: 100%;
2171
- padding: 0px var(--space-4);
2207
+ padding: 0px var(--tl-space-4);
2172
2208
  }
2173
2209
 
2174
2210
  .tlui-slider {
@@ -2194,7 +2230,7 @@ it from receiving any pointer events or affecting the cursor. */
2194
2230
  content: '';
2195
2231
  height: 3px;
2196
2232
  width: 100%;
2197
- background-color: var(--color-muted-1);
2233
+ background-color: var(--tl-color-muted-1);
2198
2234
  border-radius: 14px;
2199
2235
  }
2200
2236
 
@@ -2203,7 +2239,7 @@ it from receiving any pointer events or affecting the cursor. */
2203
2239
  top: calc(50% - 2px);
2204
2240
  left: 0px;
2205
2241
  height: 3px;
2206
- background-color: var(--color-selected);
2242
+ background-color: var(--tl-color-selected);
2207
2243
  border-radius: 14px;
2208
2244
  }
2209
2245
 
@@ -2215,16 +2251,16 @@ it from receiving any pointer events or affecting the cursor. */
2215
2251
  height: 18px;
2216
2252
  position: relative;
2217
2253
  top: -1px;
2218
- background-color: var(--color-panel);
2254
+ background-color: var(--tl-color-panel);
2219
2255
  border-radius: 999px;
2220
- box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
2256
+ box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
2221
2257
  }
2222
2258
 
2223
2259
  .tlui-slider__thumb:active {
2224
2260
  cursor: grabbing;
2225
2261
  box-shadow:
2226
- inset 0px 0px 0px 2px var(--color-text-1),
2227
- var(--shadow-1);
2262
+ inset 0px 0px 0px 2px var(--tl-color-text-1),
2263
+ var(--tl-shadow-1);
2228
2264
  }
2229
2265
 
2230
2266
  /* ---------------------- Input --------------------- */
@@ -2233,7 +2269,7 @@ it from receiving any pointer events or affecting the cursor. */
2233
2269
  background: none;
2234
2270
  margin: 0px;
2235
2271
  position: relative;
2236
- z-index: var(--layer-above);
2272
+ z-index: var(--tl-layer-above);
2237
2273
  height: 40px;
2238
2274
  max-height: 40px;
2239
2275
  display: flex;
@@ -2242,8 +2278,8 @@ it from receiving any pointer events or affecting the cursor. */
2242
2278
  font-family: inherit;
2243
2279
  font-size: 12px;
2244
2280
  font-weight: inherit;
2245
- color: var(--color-text-1);
2246
- padding: var(--space-4);
2281
+ color: var(--tl-color-text-1);
2282
+ padding: var(--tl-space-4);
2247
2283
  padding-left: 0px;
2248
2284
  border: none;
2249
2285
  outline: none;
@@ -2259,8 +2295,8 @@ it from receiving any pointer events or affecting the cursor. */
2259
2295
  height: 44px;
2260
2296
  display: flex;
2261
2297
  align-items: center;
2262
- gap: var(--space-4);
2263
- color: var(--color-text);
2298
+ gap: var(--tl-space-4);
2299
+ color: var(--tl-color-text);
2264
2300
  }
2265
2301
 
2266
2302
  .tlui-input__wrapper > .tlui-icon {
@@ -2292,7 +2328,7 @@ it from receiving any pointer events or affecting the cursor. */
2292
2328
  grid-auto-columns: minmax(1em, auto);
2293
2329
  align-self: bottom;
2294
2330
  color: currentColor;
2295
- margin-left: var(--space-4);
2331
+ margin-left: var(--tl-space-4);
2296
2332
  }
2297
2333
 
2298
2334
  .tlui-kbd > span {
@@ -2309,13 +2345,13 @@ it from receiving any pointer events or affecting the cursor. */
2309
2345
  }
2310
2346
 
2311
2347
  .tlui-kbd:not(:last-child) {
2312
- margin-right: var(--space-2);
2348
+ margin-right: var(--tl-space-2);
2313
2349
  }
2314
2350
 
2315
2351
  /* Focus Mode Button */
2316
2352
 
2317
2353
  .tlui-focus-button {
2318
- z-index: var(--layer-panels);
2354
+ z-index: var(--tl-layer-panels);
2319
2355
  pointer-events: all;
2320
2356
  }
2321
2357
 
@@ -2326,16 +2362,16 @@ it from receiving any pointer events or affecting the cursor. */
2326
2362
  }
2327
2363
 
2328
2364
  .tlui-menu {
2329
- z-index: var(--layer-menus);
2365
+ z-index: var(--tl-layer-menus);
2330
2366
  height: fit-content;
2331
2367
  width: fit-content;
2332
- border-radius: var(--radius-3);
2368
+ border-radius: var(--tl-radius-3);
2333
2369
  pointer-events: all;
2334
2370
  touch-action: auto;
2335
2371
  overflow-y: auto;
2336
2372
  overscroll-behavior: none;
2337
- background-color: var(--color-panel);
2338
- box-shadow: var(--shadow-3);
2373
+ background-color: var(--tl-color-panel);
2374
+ box-shadow: var(--tl-shadow-3);
2339
2375
  }
2340
2376
 
2341
2377
  .tlui-menu::-webkit-scrollbar {
@@ -2353,7 +2389,7 @@ it from receiving any pointer events or affecting the cursor. */
2353
2389
  }
2354
2390
 
2355
2391
  .tlui-menu__group {
2356
- border-bottom: 1px solid var(--color-divider);
2392
+ border-bottom: 1px solid var(--tl-color-divider);
2357
2393
  }
2358
2394
  .tlui-menu__group:nth-last-of-type(1) {
2359
2395
  border-bottom: none;
@@ -2363,23 +2399,23 @@ it from receiving any pointer events or affecting the cursor. */
2363
2399
 
2364
2400
  .tlui-menu__submenu__trigger[data-state='open']::after {
2365
2401
  opacity: 1;
2366
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2402
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2367
2403
  }
2368
2404
 
2369
2405
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
2370
2406
  opacity: 1;
2371
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2407
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2372
2408
  }
2373
2409
 
2374
2410
  @media (hover: hover) {
2375
2411
  .tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
2376
2412
  opacity: 1;
2377
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2413
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2378
2414
  }
2379
2415
 
2380
2416
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
2381
2417
  opacity: 1;
2382
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2418
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2383
2419
  }
2384
2420
  }
2385
2421
 
@@ -2404,7 +2440,7 @@ it from receiving any pointer events or affecting the cursor. */
2404
2440
  .tlui-menu-click-capture {
2405
2441
  position: fixed;
2406
2442
  inset: 0;
2407
- z-index: var(--layer-menu-click-capture);
2443
+ z-index: var(--tl-layer-menu-click-capture);
2408
2444
  }
2409
2445
 
2410
2446
  /* --------------------- Popover -------------------- */
@@ -2420,10 +2456,10 @@ it from receiving any pointer events or affecting the cursor. */
2420
2456
  max-height: calc(var(--radix-popover-content-available-height) - 8px);
2421
2457
  margin: 0px;
2422
2458
  border: none;
2423
- border-radius: var(--radius-3);
2424
- background-color: var(--color-panel);
2425
- box-shadow: var(--shadow-3);
2426
- z-index: var(--layer-menus);
2459
+ border-radius: var(--tl-radius-3);
2460
+ background-color: var(--tl-color-panel);
2461
+ box-shadow: var(--tl-shadow-3);
2462
+ z-index: var(--tl-layer-menus);
2427
2463
  overflow: hidden;
2428
2464
  overflow-y: auto;
2429
2465
  touch-action: auto;
@@ -2436,22 +2472,22 @@ it from receiving any pointer events or affecting the cursor. */
2436
2472
 
2437
2473
  .tlui-menu-zone {
2438
2474
  position: relative;
2439
- z-index: var(--layer-panels);
2475
+ z-index: var(--tl-layer-panels);
2440
2476
  width: fit-content;
2441
- border-right: 2px solid var(--color-background);
2442
- border-bottom: 2px solid var(--color-background);
2443
- border-bottom-right-radius: var(--radius-4);
2444
- background-color: var(--color-low);
2477
+ border-right: 2px solid var(--tl-color-background);
2478
+ border-bottom: 2px solid var(--tl-color-background);
2479
+ border-bottom-right-radius: var(--tl-radius-4);
2480
+ background-color: var(--tl-color-low);
2445
2481
  }
2446
2482
 
2447
2483
  .tlui-menu-zone *[data-state='open']::after {
2448
- background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2484
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2449
2485
  opacity: 1;
2450
2486
  }
2451
2487
 
2452
2488
  @media (hover: hover) {
2453
2489
  .tlui-menu-zone *[data-state='open']:not(:hover)::after {
2454
- background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2490
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2455
2491
  opacity: 1;
2456
2492
  }
2457
2493
  }
@@ -2477,8 +2513,8 @@ it from receiving any pointer events or affecting the cursor. */
2477
2513
  align-items: center;
2478
2514
  width: 100%;
2479
2515
  height: 40px;
2480
- padding-left: var(--space-4);
2481
- border-bottom: 1px solid var(--color-divider);
2516
+ padding-left: var(--tl-space-4);
2517
+ border-bottom: 1px solid var(--tl-color-divider);
2482
2518
  }
2483
2519
 
2484
2520
  .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
@@ -2486,7 +2522,7 @@ it from receiving any pointer events or affecting the cursor. */
2486
2522
  }
2487
2523
 
2488
2524
  .tlui-page-menu__header__title {
2489
- color: var(--color-text);
2525
+ color: var(--tl-color-text);
2490
2526
  font-size: 12px;
2491
2527
  flex-grow: 2;
2492
2528
  }
@@ -2571,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
2571
2607
  display: inline-flex;
2572
2608
  align-items: center;
2573
2609
  justify-content: center;
2574
- color: var(--color-text);
2610
+ color: var(--tl-color-text);
2575
2611
  }
2576
2612
 
2577
2613
  .tlui-page_menu__item__sortable {
@@ -2584,7 +2620,7 @@ it from receiving any pointer events or affecting the cursor. */
2584
2620
  flex-direction: row;
2585
2621
  align-items: center;
2586
2622
  overflow: hidden;
2587
- z-index: var(--layer-above);
2623
+ z-index: var(--tl-layer-above);
2588
2624
  }
2589
2625
 
2590
2626
  .tlui-page_menu__item__sortable__title {
@@ -2596,7 +2632,7 @@ it from receiving any pointer events or affecting the cursor. */
2596
2632
  }
2597
2633
 
2598
2634
  .tlui-page_menu__item__sortable:focus-visible {
2599
- z-index: var(--layer-focused-input);
2635
+ z-index: var(--tl-layer-focused-input);
2600
2636
  }
2601
2637
 
2602
2638
  .tlui-page_menu__item__sortable__handle {
@@ -2605,7 +2641,7 @@ it from receiving any pointer events or affecting the cursor. */
2605
2641
  min-width: 0px;
2606
2642
  height: 40px;
2607
2643
  cursor: grab;
2608
- color: var(--color-text-3);
2644
+ color: var(--tl-color-text-3);
2609
2645
  flex-shrink: 0;
2610
2646
  margin-right: -9px;
2611
2647
  }
@@ -2647,13 +2683,13 @@ it from receiving any pointer events or affecting the cursor. */
2647
2683
  }
2648
2684
 
2649
2685
  .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
2650
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2686
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2651
2687
  opacity: 1;
2652
2688
  }
2653
2689
 
2654
2690
  @media (hover: hover) {
2655
2691
  .tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
2656
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2692
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2657
2693
  opacity: 1;
2658
2694
  }
2659
2695
  }
@@ -2689,7 +2725,7 @@ it from receiving any pointer events or affecting the cursor. */
2689
2725
  top: 48px;
2690
2726
  left: -9999px;
2691
2727
  padding: 8px 16px;
2692
- z-index: var(--layer-toasts);
2728
+ z-index: var(--tl-layer-toasts);
2693
2729
  }
2694
2730
 
2695
2731
  .tl-skip-to-main-content:focus {
@@ -2701,11 +2737,11 @@ it from receiving any pointer events or affecting the cursor. */
2701
2737
  .tlui-offline-indicator {
2702
2738
  display: flex;
2703
2739
  flex-direction: row;
2704
- gap: var(--space-3);
2705
- color: var(--color-text);
2706
- background-color: var(--color-low);
2707
- border: 3px solid var(--color-background);
2708
- padding: 0px var(--space-5);
2740
+ gap: var(--tl-space-3);
2741
+ color: var(--tl-color-text);
2742
+ background-color: var(--tl-color-low);
2743
+ border: 3px solid var(--tl-color-background);
2744
+ padding: 0px var(--tl-space-5);
2709
2745
  height: 42px;
2710
2746
  align-items: center;
2711
2747
  justify-content: center;
@@ -2720,10 +2756,10 @@ it from receiving any pointer events or affecting the cursor. */
2720
2756
  /* ------------------- Style panel ------------------ */
2721
2757
 
2722
2758
  .tlui-style-panel__wrapper {
2723
- box-shadow: var(--shadow-2);
2724
- border-radius: var(--radius-3);
2759
+ box-shadow: var(--tl-shadow-2);
2760
+ border-radius: var(--tl-radius-3);
2725
2761
  pointer-events: all;
2726
- background-color: var(--color-panel);
2762
+ background-color: var(--tl-color-panel);
2727
2763
  height: fit-content;
2728
2764
  max-height: 100%;
2729
2765
  margin: 8px;
@@ -2732,7 +2768,7 @@ it from receiving any pointer events or affecting the cursor. */
2732
2768
  overscroll-behavior: none;
2733
2769
  overflow-y: auto;
2734
2770
  overflow-x: hidden;
2735
- color: var(--color-text);
2771
+ color: var(--tl-color-text);
2736
2772
  }
2737
2773
  /* if the style panel is the only child (ie no share menu), increase the margin */
2738
2774
  .tlui-style-panel__wrapper:only-child {
@@ -2741,7 +2777,7 @@ it from receiving any pointer events or affecting the cursor. */
2741
2777
 
2742
2778
  .tlui-style-panel {
2743
2779
  position: relative;
2744
- z-index: var(--layer-panels);
2780
+ z-index: var(--tl-layer-panels);
2745
2781
  pointer-events: all;
2746
2782
  width: 148px;
2747
2783
  max-width: 148px;
@@ -2749,7 +2785,7 @@ it from receiving any pointer events or affecting the cursor. */
2749
2785
 
2750
2786
  .tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
2751
2787
  border-radius: 10px;
2752
- outline: 2px solid var(--color-text);
2788
+ outline: 2px solid var(--tl-color-text);
2753
2789
  outline-offset: -5px;
2754
2790
  }
2755
2791
 
@@ -2767,8 +2803,22 @@ it from receiving any pointer events or affecting the cursor. */
2767
2803
  flex-direction: column;
2768
2804
  }
2769
2805
 
2770
- .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
2771
- border-bottom: 1px solid var(--color-divider);
2806
+ /*
2807
+ add a border to the bottom of all but the last section. we have to handle empty sections too, which
2808
+ are hidden and shouldn't be counted
2809
+ */
2810
+ .tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
2811
+ border-bottom: 1px solid var(--tl-color-divider);
2812
+ }
2813
+ /*
2814
+ if a section ends with a slider and we're adding a border, we need some extra space for visual
2815
+ balance. we need to handle empty sections as above. is this the most complex css selector in all of
2816
+ tldraw? probably.
2817
+ */
2818
+ .tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
2819
+ :nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
2820
+ ) {
2821
+ margin-bottom: 7px;
2772
2822
  }
2773
2823
 
2774
2824
  .tlui-style-panel__section:empty {
@@ -2777,19 +2827,19 @@ it from receiving any pointer events or affecting the cursor. */
2777
2827
 
2778
2828
  .tlui-style-panel__section__common:not(:only-child) {
2779
2829
  margin-bottom: 7px;
2780
- border-bottom: 1px solid var(--color-divider);
2830
+ border-bottom: 1px solid var(--tl-color-divider);
2781
2831
  }
2782
2832
 
2783
2833
  .tlui-style-panel__dropdown-picker:only-child {
2784
- width: 100%;
2834
+ flex: 1;
2785
2835
  }
2786
2836
 
2787
2837
  .tlui-style-panel__double-select-picker {
2788
2838
  display: flex;
2789
2839
  grid-template-columns: 1fr auto;
2790
2840
  align-items: center;
2791
- padding-left: var(--space-4);
2792
- color: var(--color-text-1);
2841
+ padding-left: var(--tl-space-4);
2842
+ color: var(--tl-color-text-1);
2793
2843
  font-size: 12px;
2794
2844
  }
2795
2845
 
@@ -2803,13 +2853,16 @@ it from receiving any pointer events or affecting the cursor. */
2803
2853
 
2804
2854
  .tlui-style-panel .tlui-button[data-state='open']::after {
2805
2855
  opacity: 1;
2806
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2856
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2807
2857
  }
2808
2858
 
2809
2859
  @media (hover: hover) {
2860
+ .tlui-style-panel .tlui-button[aria-expanded='true'] {
2861
+ background: none;
2862
+ }
2810
2863
  .tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
2811
2864
  opacity: 1;
2812
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2865
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2813
2866
  }
2814
2867
  }
2815
2868
 
@@ -2819,14 +2872,14 @@ it from receiving any pointer events or affecting the cursor. */
2819
2872
  .tlui-style-panel__section__common .tlui-style-panel__subheading,
2820
2873
  .tlui-style-panel__subheading + .tlui-slider__container {
2821
2874
  margin: 0;
2822
- padding: var(--space-2) var(--space-3) 0px var(--space-4);
2875
+ padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
2823
2876
  font-size: 12px;
2824
2877
  font-weight: inherit;
2825
2878
  line-height: inherit;
2826
2879
  }
2827
2880
 
2828
2881
  .tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
2829
- padding-top: var(--space-3);
2882
+ padding-top: var(--tl-space-3);
2830
2883
  }
2831
2884
 
2832
2885
  .tlui-style-panel__subheading + .tlui-slider__container {
@@ -2837,11 +2890,11 @@ it from receiving any pointer events or affecting the cursor. */
2837
2890
 
2838
2891
  .tlui-layout__bottom {
2839
2892
  grid-row: 2;
2893
+ width: 100%;
2840
2894
  }
2841
2895
 
2842
2896
  .tlui-layout__bottom__main {
2843
2897
  width: 100%;
2844
- position: relative;
2845
2898
  display: flex;
2846
2899
  align-items: flex-end;
2847
2900
  justify-content: center;
@@ -2853,11 +2906,10 @@ it from receiving any pointer events or affecting the cursor. */
2853
2906
  display: flex;
2854
2907
  width: min-content;
2855
2908
  flex-direction: column;
2856
- z-index: var(--layer-panels);
2909
+ z-index: var(--tl-layer-panels);
2857
2910
  pointer-events: all;
2858
2911
  position: absolute;
2859
2912
  left: 0px;
2860
- bottom: 0px;
2861
2913
  }
2862
2914
 
2863
2915
  .tlui-navigation-panel::before {
@@ -2867,10 +2919,10 @@ it from receiving any pointer events or affecting the cursor. */
2867
2919
  z-index: -1;
2868
2920
  inset: -2px -2px 0px 0px;
2869
2921
  border-radius: 0;
2870
- border-top: 2px solid var(--color-background);
2871
- border-right: 2px solid var(--color-background);
2872
- border-top-right-radius: var(--radius-4);
2873
- background-color: var(--color-low);
2922
+ border-top: 2px solid var(--tl-color-background);
2923
+ border-right: 2px solid var(--tl-color-background);
2924
+ border-top-right-radius: var(--tl-radius-4);
2925
+ background-color: var(--tl-color-low);
2874
2926
  }
2875
2927
 
2876
2928
  .tlui-navigation-panel[data-a11y='true']::before {
@@ -2884,7 +2936,7 @@ it from receiving any pointer events or affecting the cursor. */
2884
2936
  height: 96px;
2885
2937
  min-height: 96px;
2886
2938
  overflow: hidden;
2887
- padding: var(--space-3);
2939
+ padding: var(--tl-space-3);
2888
2940
  padding-top: 0px;
2889
2941
  }
2890
2942
 
@@ -2904,7 +2956,23 @@ it from receiving any pointer events or affecting the cursor. */
2904
2956
  align-items: center;
2905
2957
  justify-content: center;
2906
2958
  flex-grow: 2;
2907
- padding-bottom: calc(var(--space-3) + var(--sab));
2959
+ }
2960
+
2961
+ .tlui-main-toolbar--horizontal {
2962
+ padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
2963
+ max-width: 100%;
2964
+ }
2965
+
2966
+ .tlui-main-toolbar--vertical {
2967
+ position: absolute;
2968
+ left: 0;
2969
+ top: 90px; /* height of page menu + 'back to content' button */
2970
+ bottom: 140px; /* height of expanded mini-map */
2971
+ padding-left: calc(var(--tl-space-3) + var(--tl-sab));
2972
+ }
2973
+
2974
+ [data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
2975
+ bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
2908
2976
  }
2909
2977
 
2910
2978
  /* Centered Content */
@@ -2912,73 +2980,145 @@ it from receiving any pointer events or affecting the cursor. */
2912
2980
  position: relative;
2913
2981
  width: fit-content;
2914
2982
  display: flex;
2915
- gap: var(--space-3);
2916
- align-items: flex-end;
2983
+ gap: var(--tl-space-3);
2984
+ align-items: flex-start;
2985
+ }
2986
+
2987
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
2988
+ flex-direction: column;
2917
2989
  }
2918
2990
 
2919
- .tlui-main-toolbar__left {
2991
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
2920
2992
  width: fit-content;
2921
2993
  }
2994
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__left {
2995
+ display: flex;
2996
+ height: fit-content;
2997
+ }
2922
2998
 
2923
2999
  /* Row of controls + lock button */
2924
3000
  .tlui-main-toolbar__extras {
2925
3001
  position: relative;
2926
- z-index: var(--layer-above);
2927
- width: 100%;
3002
+ z-index: var(--tl-layer-above);
2928
3003
  pointer-events: none;
2929
- top: 6px;
2930
- height: 48px;
3004
+ align-self: stretch;
2931
3005
  }
2932
3006
 
2933
3007
  .tlui-main-toolbar__extras:empty {
2934
3008
  display: none;
2935
3009
  }
2936
3010
 
3011
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
3012
+ height: 48px;
3013
+ top: 6px;
3014
+ }
3015
+
3016
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
3017
+ width: 48px;
3018
+ order: 1;
3019
+ }
3020
+
2937
3021
  .tlui-main-toolbar__extras__controls {
2938
- display: flex;
2939
3022
  position: relative;
2940
- flex-direction: row;
2941
- z-index: var(--layer-above);
2942
- background-color: var(--color-low);
2943
- border-top-left-radius: var(--radius-4);
2944
- border-top-right-radius: var(--radius-4);
2945
- border: 2px solid var(--color-background);
3023
+ z-index: var(--tl-layer-above);
3024
+ background-color: var(--tl-color-low);
3025
+ border: 2px solid var(--tl-color-background);
3026
+ pointer-events: all;
3027
+ }
3028
+
3029
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
3030
+ border-top-left-radius: var(--tl-radius-4);
3031
+ border-top-right-radius: var(--tl-radius-4);
2946
3032
  margin-left: 8px;
2947
3033
  margin-right: 0px;
2948
- pointer-events: all;
3034
+ width: fit-content;
3035
+ }
3036
+
3037
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
3038
+ border-top-right-radius: var(--tl-radius-4);
3039
+ border-bottom-right-radius: var(--tl-radius-4);
3040
+ margin-top: 8px;
3041
+ margin-left: -2px;
3042
+ margin-bottom: 0px;
2949
3043
  width: fit-content;
2950
3044
  }
2951
3045
 
2952
3046
  .tlui-main-toolbar__tools {
2953
- display: flex;
2954
- flex-direction: row;
2955
- align-items: center;
2956
- border-radius: var(--radius-4);
2957
- z-index: var(--layer-panels);
3047
+ border-radius: var(--tl-radius-4);
3048
+ z-index: var(--tl-layer-panels);
2958
3049
  pointer-events: all;
2959
3050
  position: relative;
2960
- background: var(--color-panel);
2961
- box-shadow: var(--shadow-2);
3051
+ background: var(--tl-color-panel);
3052
+ box-shadow: var(--tl-shadow-2);
3053
+ }
3054
+
3055
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
3056
+ align-self: flex-end;
3057
+ }
3058
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
3059
+ align-self: flex-start;
2962
3060
  }
2963
3061
 
2964
- .tlui-main-toolbar__overflow {
3062
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2965
3063
  width: 40px;
2966
3064
  margin-left: 2px;
2967
3065
  }
3066
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
3067
+ height: 40px;
3068
+ margin-top: 2px;
3069
+ }
2968
3070
 
2969
- .tlui-layout__mobile .tlui-main-toolbar__overflow {
3071
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2970
3072
  width: 32px;
2971
3073
  padding: 0px;
2972
3074
  }
2973
3075
 
2974
- .tlui-main-toolbar *[data-state='open']::after {
2975
- background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
3076
+ .tlui-main-toolbar--horizontal *[data-state='open']::after {
3077
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3078
+ opacity: 1;
3079
+ }
3080
+ .tlui-main-toolbar--vertical *[data-state='open']::after {
3081
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2976
3082
  opacity: 1;
2977
3083
  }
2978
3084
 
3085
+ .tlui-main-toolbar__overflow-content {
3086
+ touch-action: none;
3087
+ }
3088
+
3089
+ .tlui-main-toolbar__tools [data-toolbar-visible='false'],
3090
+ .tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
3091
+ display: none;
3092
+ }
3093
+
3094
+ .tlui-main-toolbar__group:empty {
3095
+ display: none;
3096
+ }
3097
+ .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3098
+ border-right: 1px solid var(--color-divider);
3099
+ margin-right: 2px;
3100
+ }
3101
+ .tlui-column.tlui-main-toolbar__group:not(
3102
+ :nth-last-child(-n + 1 of [data-toolbar-visible='true'])
3103
+ ) {
3104
+ border-bottom: 1px solid var(--color-divider);
3105
+ margin-bottom: 2px;
3106
+ }
3107
+ .tlui-grid.tlui-main-toolbar__group {
3108
+ grid-column: 1 / span 4;
3109
+ }
3110
+ .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3111
+ border-bottom: 1px solid var(--color-divider);
3112
+ margin-bottom: 2px;
3113
+ }
3114
+
2979
3115
  @media (hover: hover) {
2980
- .tlui-main-toolbar *[data-state='open']:not(:hover)::after {
2981
- background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
3116
+ .tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
3117
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3118
+ opacity: 1;
3119
+ }
3120
+ .tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
3121
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2982
3122
  opacity: 1;
2983
3123
  }
2984
3124
  }
@@ -2989,44 +3129,40 @@ it from receiving any pointer events or affecting the cursor. */
2989
3129
  font-size: 12px;
2990
3130
  padding: 2px 8px;
2991
3131
  border-radius: 4px;
2992
- background-color: var(--color-tooltip);
3132
+ background-color: var(--tl-color-tooltip);
2993
3133
  box-shadow: none;
2994
- color: var(--color-text-shadow);
3134
+ color: var(--tl-color-text-shadow);
2995
3135
  max-width: 400px;
2996
3136
  width: fit-content;
2997
3137
  text-align: center;
2998
- pointer-events: none;
2999
3138
  will-change: transform, opacity;
3000
3139
  z-index: 2;
3001
3140
  }
3002
3141
 
3003
3142
  .tlui-tooltip__arrow {
3004
- fill: var(--color-tooltip);
3143
+ fill: var(--tl-color-tooltip);
3005
3144
  will-change: opacity;
3006
3145
  }
3007
3146
 
3008
3147
  [data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
3009
- z-index: var(--layer-toasts) !important;
3010
- }
3011
-
3012
- [data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
3013
- transition: all 0.1s ease-out;
3148
+ z-index: var(--tl-layer-toasts) !important;
3149
+ pointer-events: none;
3014
3150
  }
3015
3151
 
3016
3152
  /* ------------------- Debug panel ------------------ */
3017
3153
 
3018
3154
  .tlui-debug-panel {
3019
- background-color: var(--color-low);
3155
+ background-color: var(--tl-color-low);
3020
3156
  width: 100%;
3021
3157
  display: grid;
3022
3158
  align-items: center;
3023
3159
  grid-template-columns: 1fr auto auto auto;
3024
3160
  justify-content: space-between;
3025
- padding-left: var(--space-4);
3026
- border-top: 1px solid var(--color-background);
3161
+ padding-left: var(--tl-space-4);
3162
+ border-top: 1px solid var(--tl-color-background);
3027
3163
  font-size: 12px;
3028
- color: var(--color-text-1);
3029
- z-index: var(--layer-panels);
3164
+ color: var(--tl-color-text-1);
3165
+ z-index: var(--tl-layer-panels);
3030
3166
  pointer-events: all;
3031
3167
  }
3032
3168
 
@@ -3042,7 +3178,7 @@ it from receiving any pointer events or affecting the cursor. */
3042
3178
 
3043
3179
  .tlui-debug-panel__fps__slow {
3044
3180
  font-weight: bold;
3045
- color: var(--color-danger);
3181
+ color: var(--tl-color-danger);
3046
3182
  }
3047
3183
 
3048
3184
  .tlui-a11y-audit {
@@ -3052,7 +3188,7 @@ it from receiving any pointer events or affecting the cursor. */
3052
3188
  .tlui-a11y-audit th,
3053
3189
  .tlui-a11y-audit td {
3054
3190
  padding: 8px;
3055
- border: 1px solid var(--color-low-border);
3191
+ border: 1px solid var(--tl-color-low-border);
3056
3192
  }
3057
3193
 
3058
3194
  /* --------------------- Toasts --------------------- */
@@ -3065,10 +3201,10 @@ it from receiving any pointer events or affecting the cursor. */
3065
3201
  align-items: flex-end;
3066
3202
  justify-content: flex-end;
3067
3203
  flex-direction: column;
3068
- gap: var(--space-3);
3204
+ gap: var(--tl-space-3);
3069
3205
  pointer-events: none;
3070
- padding: 0px var(--space-3) 64px 0px;
3071
- z-index: var(--layer-toasts);
3206
+ padding: 0px var(--tl-space-3) 64px 0px;
3207
+ z-index: var(--tl-layer-toasts);
3072
3208
  }
3073
3209
 
3074
3210
  .tlui-toast__viewport > * {
@@ -3077,34 +3213,34 @@ it from receiving any pointer events or affecting the cursor. */
3077
3213
 
3078
3214
  .tlui-toast__icon {
3079
3215
  padding-top: 11px;
3080
- padding-left: var(--space-4);
3081
- color: var(--color-text-1);
3216
+ padding-left: var(--tl-space-4);
3217
+ color: var(--tl-color-text-1);
3082
3218
  }
3083
3219
 
3084
3220
  .tlui-toast__container {
3085
3221
  min-width: 200px;
3086
3222
  display: flex;
3087
3223
  flex-direction: row;
3088
- background-color: var(--color-panel);
3089
- box-shadow: var(--shadow-2);
3090
- border-radius: var(--radius-3);
3224
+ background-color: var(--tl-color-panel);
3225
+ box-shadow: var(--tl-shadow-2);
3226
+ border-radius: var(--tl-radius-3);
3091
3227
  font-size: 12px;
3092
3228
  }
3093
3229
 
3094
3230
  .tlui-toast__container[data-severity='success'] .tlui-icon {
3095
- color: var(--color-success);
3231
+ color: var(--tl-color-success);
3096
3232
  }
3097
3233
 
3098
3234
  .tlui-toast__container[data-severity='info'] .tlui-icon {
3099
- color: var(--color-info);
3235
+ color: var(--tl-color-info);
3100
3236
  }
3101
3237
 
3102
3238
  .tlui-toast__container[data-severity='warning'] .tlui-icon {
3103
- color: var(--color-warning);
3239
+ color: var(--tl-color-warning);
3104
3240
  }
3105
3241
 
3106
3242
  .tlui-toast__container[data-severity='error'] .tlui-icon {
3107
- color: var(--color-danger);
3243
+ color: var(--tl-color-danger);
3108
3244
  }
3109
3245
 
3110
3246
  .tlui-toast__main {
@@ -3113,27 +3249,27 @@ it from receiving any pointer events or affecting the cursor. */
3113
3249
  }
3114
3250
 
3115
3251
  .tlui-toast__content {
3116
- padding: var(--space-4);
3252
+ padding: var(--tl-space-4);
3117
3253
  display: flex;
3118
3254
  line-height: 1.4;
3119
3255
  flex-direction: column;
3120
- gap: var(--space-3);
3256
+ gap: var(--tl-space-3);
3121
3257
  }
3122
3258
 
3123
3259
  .tlui-toast__main[data-actions='true'] .tlui-toast__content {
3124
- padding-bottom: var(--space-2);
3260
+ padding-bottom: var(--tl-space-2);
3125
3261
  }
3126
3262
 
3127
3263
  .tlui-toast__title {
3128
3264
  font-weight: bold;
3129
- color: var(--color-text-1);
3265
+ color: var(--tl-color-text-1);
3130
3266
  /* this makes the default toast look better */
3131
3267
  line-height: 16px;
3132
3268
  }
3133
3269
 
3134
3270
  .tlui-toast__description {
3135
- color: var(--color-text-1);
3136
- padding: var(--space-3);
3271
+ color: var(--tl-color-text-1);
3272
+ padding: var(--tl-space-3);
3137
3273
  margin: 0px;
3138
3274
  padding: 0px;
3139
3275
  }
@@ -3185,14 +3321,14 @@ it from receiving any pointer events or affecting the cursor. */
3185
3321
  left: 0px;
3186
3322
  width: 100%;
3187
3323
  height: 100%;
3188
- z-index: var(--layer-canvas-overlays);
3189
- background-color: var(--color-overlay);
3324
+ z-index: var(--tl-layer-canvas-overlays);
3325
+ background-color: var(--tl-color-overlay);
3190
3326
  pointer-events: all;
3191
3327
  animation: tl-fade-in 0.12s ease-out;
3192
3328
  display: grid;
3193
3329
  place-items: center;
3194
3330
  overflow-y: auto;
3195
- padding: 0px var(--space-3);
3331
+ padding: 0px var(--tl-space-3);
3196
3332
  }
3197
3333
 
3198
3334
  .tlui-dialog__content {
@@ -3200,9 +3336,9 @@ it from receiving any pointer events or affecting the cursor. */
3200
3336
  flex-direction: column;
3201
3337
  position: relative;
3202
3338
  cursor: default;
3203
- background-color: var(--color-panel);
3204
- box-shadow: var(--shadow-3);
3205
- border-radius: var(--radius-3);
3339
+ background-color: var(--tl-color-panel);
3340
+ box-shadow: var(--tl-shadow-3);
3341
+ border-radius: var(--tl-radius-3);
3206
3342
  font-size: 12px;
3207
3343
  overflow: hidden;
3208
3344
  min-width: 300px;
@@ -3215,9 +3351,9 @@ it from receiving any pointer events or affecting the cursor. */
3215
3351
  display: flex;
3216
3352
  align-items: center;
3217
3353
  flex: 0;
3218
- z-index: var(--layer-header-footer);
3219
- padding-left: var(--space-4);
3220
- color: var(--color-text);
3354
+ z-index: var(--tl-layer-header-footer);
3355
+ padding-left: var(--tl-space-4);
3356
+ color: var(--tl-color-text);
3221
3357
  height: 40px;
3222
3358
  }
3223
3359
 
@@ -3226,7 +3362,7 @@ it from receiving any pointer events or affecting the cursor. */
3226
3362
  font-weight: inherit;
3227
3363
  font-size: 12px;
3228
3364
  margin: 0px;
3229
- color: var(--color-text-1);
3365
+ color: var(--tl-color-text-1);
3230
3366
  }
3231
3367
 
3232
3368
  .tlui-dialog__header__close {
@@ -3234,16 +3370,16 @@ it from receiving any pointer events or affecting the cursor. */
3234
3370
  }
3235
3371
 
3236
3372
  .tlui-dialog__body {
3237
- padding: var(--space-4) var(--space-4);
3373
+ padding: var(--tl-space-4) var(--tl-space-4);
3238
3374
  flex: 0 1;
3239
3375
  overflow-y: auto;
3240
3376
  overflow-x: hidden;
3241
- color: var(--color-text-1);
3377
+ color: var(--tl-color-text-1);
3242
3378
  user-select: all;
3243
3379
  -webkit-user-select: text;
3244
3380
  }
3245
3381
  .tlui-dialog__body a {
3246
- color: var(--color-selected);
3382
+ color: var(--tl-color-selected);
3247
3383
  }
3248
3384
 
3249
3385
  .tlui-dialog__body ul,
@@ -3251,13 +3387,13 @@ it from receiving any pointer events or affecting the cursor. */
3251
3387
  padding-left: 16px;
3252
3388
  display: flex;
3253
3389
  flex-direction: column;
3254
- gap: var(--space-2);
3390
+ gap: var(--tl-space-2);
3255
3391
  }
3256
3392
 
3257
3393
  .tlui-dialog__footer {
3258
3394
  position: relative;
3259
3395
  min-height: 12px;
3260
- z-index: var(--layer-header-footer);
3396
+ z-index: var(--tl-layer-header-footer);
3261
3397
  }
3262
3398
 
3263
3399
  .tlui-dialog__footer__actions {
@@ -3277,15 +3413,15 @@ it from receiving any pointer events or affecting the cursor. */
3277
3413
  .tlui-edit-link-dialog {
3278
3414
  display: flex;
3279
3415
  flex-direction: column;
3280
- gap: var(--space-4);
3281
- color: var(--color-text);
3416
+ gap: var(--tl-space-4);
3417
+ color: var(--tl-color-text);
3282
3418
  }
3283
3419
 
3284
3420
  .tlui-edit-link-dialog__input {
3285
- background-color: var(--color-muted-2);
3421
+ background-color: var(--tl-color-muted-2);
3286
3422
  flex-grow: 2;
3287
- border-radius: var(--radius-2);
3288
- padding: 0px var(--space-4);
3423
+ border-radius: var(--tl-radius-2);
3424
+ padding: 0px var(--tl-space-4);
3289
3425
  }
3290
3426
 
3291
3427
  /* Embed Dialog */
@@ -3293,15 +3429,15 @@ it from receiving any pointer events or affecting the cursor. */
3293
3429
  .tlui-embed__spacer {
3294
3430
  flex-grow: 2;
3295
3431
  min-height: 0px;
3296
- margin-left: calc(-1 * var(--space-4));
3297
- margin-top: calc(-1 * var(--space-4));
3432
+ margin-left: calc(-1 * var(--tl-space-4));
3433
+ margin-top: calc(-1 * var(--tl-space-4));
3298
3434
  pointer-events: none;
3299
3435
  }
3300
3436
 
3301
3437
  .tlui-embed-dialog__list {
3302
3438
  display: flex;
3303
3439
  flex-direction: column;
3304
- padding: 0px var(--space-3) var(--space-4) var(--space-3);
3440
+ padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
3305
3441
  }
3306
3442
 
3307
3443
  .tlui-embed-dialog__item__image {
@@ -3313,49 +3449,49 @@ it from receiving any pointer events or affecting the cursor. */
3313
3449
  background-size: contain;
3314
3450
  background-repeat: no-repeat;
3315
3451
  background-position: center center;
3316
- background-color: var(--color-selected-contrast);
3317
- border-radius: var(--radius-1);
3452
+ background-color: var(--tl-color-selected-contrast);
3453
+ border-radius: var(--tl-radius-1);
3318
3454
  }
3319
3455
 
3320
3456
  .tlui-embed-dialog__enter {
3321
3457
  display: flex;
3322
3458
  flex-direction: column;
3323
- gap: var(--space-4);
3324
- color: var(--color-text-1);
3459
+ gap: var(--tl-space-4);
3460
+ color: var(--tl-color-text-1);
3325
3461
  }
3326
3462
 
3327
3463
  .tlui-embed-dialog__input {
3328
- background-color: var(--color-muted-2);
3464
+ background-color: var(--tl-color-muted-2);
3329
3465
  flex-grow: 2;
3330
- border-radius: var(--radius-2);
3331
- padding: 0px var(--space-4);
3466
+ border-radius: var(--tl-radius-2);
3467
+ padding: 0px var(--tl-space-4);
3332
3468
  }
3333
3469
 
3334
3470
  .tlui-embed-dialog__warning {
3335
- color: var(--color-danger);
3471
+ color: var(--tl-color-danger);
3336
3472
  text-shadow: none;
3337
3473
  }
3338
3474
 
3339
3475
  .tlui-embed-dialog__instruction__link {
3340
3476
  display: flex;
3341
- gap: var(--space-1);
3342
- margin-top: var(--space-4);
3477
+ gap: var(--tl-space-1);
3478
+ margin-top: var(--tl-space-4);
3343
3479
  }
3344
3480
 
3345
3481
  .tlui-embed-dialog__enter a {
3346
- color: var(--color-text-1);
3482
+ color: var(--tl-color-text-1);
3347
3483
  }
3348
3484
 
3349
3485
  /* --------------- Keyboard shortcuts --------------- */
3350
3486
 
3351
3487
  .tlui-shortcuts-dialog__header {
3352
- border-bottom: 1px solid var(--color-divider);
3488
+ border-bottom: 1px solid var(--tl-color-divider);
3353
3489
  }
3354
3490
 
3355
3491
  .tlui-shortcuts-dialog__body {
3356
3492
  position: relative;
3357
3493
  columns: 3;
3358
- column-gap: var(--space-9);
3494
+ column-gap: var(--tl-space-9);
3359
3495
  pointer-events: all;
3360
3496
  touch-action: auto;
3361
3497
 
@@ -3373,14 +3509,14 @@ it from receiving any pointer events or affecting the cursor. */
3373
3509
 
3374
3510
  .tlui-shortcuts-dialog__group {
3375
3511
  break-inside: avoid-column;
3376
- padding-bottom: var(--space-6);
3512
+ padding-bottom: var(--tl-space-6);
3377
3513
  }
3378
3514
 
3379
3515
  .tlui-shortcuts-dialog__group__title {
3380
3516
  font-size: inherit;
3381
3517
  font-weight: inherit;
3382
3518
  margin: 0px;
3383
- color: var(--color-text-3);
3519
+ color: var(--tl-color-text-3);
3384
3520
  height: 32px;
3385
3521
  display: flex;
3386
3522
  align-items: center;
@@ -3389,12 +3525,12 @@ it from receiving any pointer events or affecting the cursor. */
3389
3525
  .tlui-shortcuts-dialog__group__content {
3390
3526
  display: flex;
3391
3527
  flex-direction: column;
3392
- color: var(--color-text-1);
3528
+ color: var(--tl-color-text-1);
3393
3529
  }
3394
3530
 
3395
3531
  .tlui-shortcuts-dialog__key-pair {
3396
3532
  display: flex;
3397
- gap: var(--space-4);
3533
+ gap: var(--tl-space-4);
3398
3534
  align-items: center;
3399
3535
  justify-content: space-between;
3400
3536
  height: 32px;
@@ -3421,12 +3557,12 @@ it from receiving any pointer events or affecting the cursor. */
3421
3557
  height: 24px;
3422
3558
  background: linear-gradient(
3423
3559
  to bottom,
3424
- var(--color-panel-transparent) 0%,
3425
- var(--color-panel) 90%,
3426
- var(--color-panel) 100%
3560
+ var(--tl-color-panel-transparent) 0%,
3561
+ var(--tl-color-panel) 90%,
3562
+ var(--tl-color-panel) 100%
3427
3563
  );
3428
- border-bottom-left-radius: var(--radius-3);
3429
- border-bottom-right-radius: var(--radius-3);
3564
+ border-bottom-left-radius: var(--tl-radius-3);
3565
+ border-bottom-right-radius: var(--tl-radius-3);
3430
3566
  pointer-events: none;
3431
3567
  }
3432
3568
 
@@ -3441,10 +3577,10 @@ it from receiving any pointer events or affecting the cursor. */
3441
3577
  .tlui-help-menu {
3442
3578
  pointer-events: all;
3443
3579
  position: absolute;
3444
- bottom: var(--space-2);
3445
- right: var(--space-2);
3446
- z-index: var(--layer-panels);
3447
- border: 2px solid var(--color-background);
3580
+ bottom: var(--tl-space-2);
3581
+ right: var(--tl-space-2);
3582
+ z-index: var(--tl-layer-panels);
3583
+ border: 2px solid var(--tl-color-background);
3448
3584
  border-radius: 100%;
3449
3585
  }
3450
3586
 
@@ -3455,7 +3591,7 @@ it from receiving any pointer events or affecting the cursor. */
3455
3591
  display: flex;
3456
3592
  flex-direction: row;
3457
3593
  justify-content: flex-end;
3458
- z-index: var(--layer-panels);
3594
+ z-index: var(--tl-layer-panels);
3459
3595
  align-items: center;
3460
3596
  padding-top: 2px;
3461
3597
  padding-right: 4px;
@@ -3471,7 +3607,7 @@ it from receiving any pointer events or affecting the cursor. */
3471
3607
  border: none;
3472
3608
  cursor: pointer;
3473
3609
  pointer-events: all;
3474
- border-radius: var(--radius-1);
3610
+ border-radius: var(--tl-radius-1);
3475
3611
  padding-right: 1px;
3476
3612
  height: 100%;
3477
3613
  }
@@ -3484,8 +3620,8 @@ it from receiving any pointer events or affecting the cursor. */
3484
3620
  .tlui-people-menu__avatar {
3485
3621
  height: 24px;
3486
3622
  width: 24px;
3487
- border: 2px solid var(--color-background);
3488
- background-color: var(--color-low);
3623
+ border: 2px solid var(--tl-color-background);
3624
+ background-color: var(--tl-color-low);
3489
3625
  border-radius: 100%;
3490
3626
  display: flex;
3491
3627
  align-items: center;
@@ -3494,7 +3630,7 @@ it from receiving any pointer events or affecting the cursor. */
3494
3630
  font-size: 10px;
3495
3631
  font-weight: bold;
3496
3632
  text-align: center;
3497
- color: var(--color-selected-contrast);
3633
+ color: var(--tl-color-selected-contrast);
3498
3634
  z-index: 2;
3499
3635
  }
3500
3636
 
@@ -3508,7 +3644,7 @@ it from receiving any pointer events or affecting the cursor. */
3508
3644
 
3509
3645
  @media (hover: hover) {
3510
3646
  .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
3511
- border-color: var(--color-low);
3647
+ border-color: var(--tl-color-low);
3512
3648
  }
3513
3649
  }
3514
3650
 
@@ -3516,12 +3652,12 @@ it from receiving any pointer events or affecting the cursor. */
3516
3652
  min-width: 0px;
3517
3653
  font-size: 11px;
3518
3654
  font-weight: 600;
3519
- color: var(--color-text-1);
3655
+ color: var(--tl-color-text-1);
3520
3656
  font-family: inherit;
3521
3657
  padding: 0px 4px;
3522
3658
  }
3523
3659
  .tlui-people-menu__more::after {
3524
- border-radius: var(--radius-2);
3660
+ border-radius: var(--tl-radius-2);
3525
3661
  inset: 0px;
3526
3662
  }
3527
3663
 
@@ -3550,7 +3686,7 @@ it from receiving any pointer events or affecting the cursor. */
3550
3686
  }
3551
3687
 
3552
3688
  .tlui-people-menu__section:not(:last-child) {
3553
- border-bottom: 1px solid var(--color-divider);
3689
+ border-bottom: 1px solid var(--tl-color-divider);
3554
3690
  }
3555
3691
 
3556
3692
  .tlui-people-menu__user {
@@ -3569,7 +3705,7 @@ it from receiving any pointer events or affecting the cursor. */
3569
3705
  text-overflow: ellipsis;
3570
3706
  white-space: nowrap;
3571
3707
  font-size: 12px;
3572
- color: var(--color-text-1);
3708
+ color: var(--tl-color-text-1);
3573
3709
  max-width: 100%;
3574
3710
  flex-grow: 1;
3575
3711
  flex-shrink: 100;
@@ -3581,7 +3717,7 @@ it from receiving any pointer events or affecting the cursor. */
3581
3717
  text-overflow: ellipsis;
3582
3718
  white-space: nowrap;
3583
3719
  font-size: 12px;
3584
- color: var(--color-text-3);
3720
+ color: var(--tl-color-text-3);
3585
3721
  flex-grow: 100;
3586
3722
  flex-shrink: 0;
3587
3723
  margin-left: 4px;
@@ -3672,7 +3808,7 @@ it from receiving any pointer events or affecting the cursor. */
3672
3808
  inset: 0px;
3673
3809
  border-width: 2px;
3674
3810
  border-style: solid;
3675
- z-index: var(--layer-following-indicator);
3811
+ z-index: var(--tl-layer-following-indicator);
3676
3812
  pointer-events: none;
3677
3813
  }
3678
3814
 
@@ -3691,7 +3827,7 @@ it from receiving any pointer events or affecting the cursor. */
3691
3827
  }
3692
3828
 
3693
3829
  .tlui-contextual-toolbar [data-isactive='true']::after {
3694
- background-color: var(--color-muted-2);
3830
+ background-color: var(--tl-color-muted-2);
3695
3831
  opacity: 1;
3696
3832
  }
3697
3833
 
@@ -3707,7 +3843,7 @@ it from receiving any pointer events or affecting the cursor. */
3707
3843
 
3708
3844
  .tlui-contextual-toolbar[data-visible='true'] {
3709
3845
  opacity: 1;
3710
- z-index: var(--layer-menus);
3846
+ z-index: var(--tl-layer-menus);
3711
3847
  }
3712
3848
 
3713
3849
  .tlui-contextual-toolbar[data-interactive='true'],
@@ -3766,7 +3902,7 @@ it from receiving any pointer events or affecting the cursor. */
3766
3902
 
3767
3903
  @keyframes tlui-slide-in {
3768
3904
  from {
3769
- transform: translateX(calc(100% + var(--space-3)));
3905
+ transform: translateX(calc(100% + var(--tl-space-3)));
3770
3906
  }
3771
3907
  to {
3772
3908
  transform: translateX(0px);
@@ -3778,7 +3914,7 @@ it from receiving any pointer events or affecting the cursor. */
3778
3914
  transform: translateX(var(--radix-toast-swipe-end-x));
3779
3915
  }
3780
3916
  to {
3781
- transform: translateX(calc(100% + var(--space-3)));
3917
+ transform: translateX(calc(100% + var(--tl-space-3)));
3782
3918
  }
3783
3919
  }
3784
3920