tldraw 3.16.0-canary.efdec30fc411 → 3.16.0-canary.f55016ece635

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 (286) hide show
  1. package/dist-cjs/index.d.ts +133 -4
  2. package/dist-cjs/index.js +12 -1
  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/ArrowShapeUtil.js +3 -3
  11. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  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/draw/DrawShapeUtil.js +3 -3
  15. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
  17. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
  18. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +12 -12
  19. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  20. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
  21. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
  22. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
  23. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
  25. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
  26. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
  27. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
  28. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -3
  29. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +1 -1
  30. package/dist-cjs/lib/shapes/line/LineShapeUtil.js +5 -1
  31. package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
  32. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
  33. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  34. package/dist-cjs/lib/shapes/shared/ShapeFill.js +4 -4
  35. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  36. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  37. package/dist-cjs/lib/shapes/text/TextShapeUtil.js +2 -2
  38. package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
  39. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
  40. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
  41. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
  42. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  43. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
  44. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  45. package/dist-cjs/lib/ui/TldrawUi.js +27 -12
  46. package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
  47. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  48. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  49. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +10 -2
  50. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  51. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  52. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  53. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +1 -1
  54. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  55. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
  56. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  57. package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
  58. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  59. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +1 -1
  60. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +2 -2
  61. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
  62. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  63. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -22
  64. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
  65. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +188 -78
  66. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
  67. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +1 -1
  68. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +2 -2
  69. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +15 -3
  70. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  71. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +146 -168
  72. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  73. package/dist-cjs/lib/ui/components/primitives/layout.js +30 -5
  74. package/dist-cjs/lib/ui/components/primitives/layout.js.map +2 -2
  75. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
  76. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
  77. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  78. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +3 -19
  79. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  80. package/dist-cjs/lib/ui/context/actions.js +16 -2
  81. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  82. package/dist-cjs/lib/ui/context/components.js +2 -0
  83. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  84. package/dist-cjs/lib/ui/hooks/useTools.js +21 -3
  85. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  86. package/dist-cjs/lib/ui/version.js +3 -3
  87. package/dist-cjs/lib/ui/version.js.map +1 -1
  88. package/dist-esm/index.d.mts +133 -4
  89. package/dist-esm/index.mjs +18 -3
  90. package/dist-esm/index.mjs.map +2 -2
  91. package/dist-esm/lib/Tldraw.mjs +14 -4
  92. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  93. package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
  94. package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
  95. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  96. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  97. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +4 -3
  98. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  99. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
  100. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
  101. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +4 -3
  102. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
  103. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
  104. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
  105. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +13 -12
  106. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  107. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
  108. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
  109. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +3 -2
  110. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  111. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs +2 -1
  112. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs.map +2 -2
  113. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +6 -1
  114. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
  115. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -3
  116. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +1 -1
  117. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +6 -1
  118. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
  119. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +5 -4
  120. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  121. package/dist-esm/lib/shapes/shared/ShapeFill.mjs +5 -4
  122. package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
  123. package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
  124. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
  125. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
  126. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
  127. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
  128. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  129. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  130. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  131. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  132. package/dist-esm/lib/ui/TldrawUi.mjs +29 -14
  133. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  134. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  135. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  136. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +10 -2
  137. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  138. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  139. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  140. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +1 -1
  141. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  142. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
  143. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  144. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
  145. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  146. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +1 -1
  147. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  148. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
  149. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  150. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -22
  151. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  152. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -80
  153. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
  154. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +2 -1
  155. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
  156. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +16 -4
  157. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  158. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +155 -170
  159. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  160. package/dist-esm/lib/ui/components/primitives/layout.mjs +31 -6
  161. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +2 -2
  162. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
  163. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
  164. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  165. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +3 -19
  166. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  167. package/dist-esm/lib/ui/context/actions.mjs +16 -2
  168. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  169. package/dist-esm/lib/ui/context/components.mjs +2 -0
  170. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  171. package/dist-esm/lib/ui/hooks/useTools.mjs +22 -3
  172. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  173. package/dist-esm/lib/ui/version.mjs +3 -3
  174. package/dist-esm/lib/ui/version.mjs.map +1 -1
  175. package/package.json +11 -34
  176. package/src/index.ts +11 -1
  177. package/src/lib/Tldraw.tsx +15 -2
  178. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  179. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  180. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  181. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  182. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  183. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
  184. package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
  185. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  186. package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
  187. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  188. package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -14
  189. package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
  190. package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
  191. package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
  192. package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
  193. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
  194. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  195. package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
  196. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  197. package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
  198. package/src/lib/shapes/shared/ShapeFill.tsx +5 -4
  199. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  200. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  201. package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
  202. package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
  203. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  204. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  205. package/src/lib/ui/TldrawUi.tsx +33 -12
  206. package/src/lib/ui/assetUrls.ts +13 -10
  207. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +13 -2
  208. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  209. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +1 -1
  210. package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
  211. package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
  212. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +1 -1
  213. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
  214. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -24
  215. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +208 -56
  216. package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +3 -2
  217. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +22 -5
  218. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +184 -191
  219. package/src/lib/ui/components/primitives/layout.tsx +79 -5
  220. package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
  221. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
  222. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +5 -18
  223. package/src/lib/ui/context/actions.tsx +16 -2
  224. package/src/lib/ui/context/components.tsx +3 -0
  225. package/src/lib/ui/hooks/useTools.tsx +25 -3
  226. package/src/lib/ui/version.ts +3 -3
  227. package/src/lib/ui.css +349 -243
  228. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  229. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  230. package/src/test/A11y.test.tsx +3 -2
  231. package/src/test/ClickManager.test.ts +7 -6
  232. package/src/test/Editor.test.tsx +20 -19
  233. package/src/test/EraserTool.test.ts +184 -13
  234. package/src/test/HandTool.test.ts +10 -9
  235. package/src/test/HighlightShape.test.ts +2 -1
  236. package/src/test/SelectTool.test.ts +3 -2
  237. package/src/test/TLUserPreferences.test.ts +4 -3
  238. package/src/test/TestEditor.ts +13 -15
  239. package/src/test/TldrawEditor.test.tsx +11 -10
  240. package/src/test/ZoomTool.test.ts +7 -6
  241. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  242. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  243. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  244. package/src/test/arrows-megabus.test.tsx +5 -4
  245. package/src/test/bindings.test.tsx +24 -37
  246. package/src/test/bookmark-shapes.test.ts +1 -8
  247. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  248. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  249. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  250. package/src/test/commands/alignShapes.test.tsx +25 -24
  251. package/src/test/commands/animationSpeed.test.ts +2 -1
  252. package/src/test/commands/centerOnPoint.test.ts +3 -2
  253. package/src/test/commands/clipboard.test.ts +3 -2
  254. package/src/test/commands/createShapes.test.ts +2 -1
  255. package/src/test/commands/deleteShapes.test.ts +2 -1
  256. package/src/test/commands/distributeShapes.test.tsx +11 -10
  257. package/src/test/commands/getSvgString.test.ts +2 -1
  258. package/src/test/commands/packShapes.test.ts +5 -4
  259. package/src/test/commands/resizeShape.test.ts +2 -1
  260. package/src/test/commands/rotateShapes.test.ts +7 -6
  261. package/src/test/commands/setCamera.test.ts +4 -3
  262. package/src/test/commands/setCurrentPage.test.ts +3 -2
  263. package/src/test/commands/stackShapes.test.ts +11 -10
  264. package/src/test/commands/stretch.test.tsx +13 -12
  265. package/src/test/createDeepLink.test.tsx +2 -1
  266. package/src/test/cropping.test.ts +3 -2
  267. package/src/test/drawing.test.ts +2 -1
  268. package/src/test/flipShapes.test.ts +4 -3
  269. package/src/test/frames.test.ts +25 -24
  270. package/src/test/getCulledShapes.test.tsx +3 -2
  271. package/src/test/groups.test.tsx +1 -1
  272. package/src/test/handleDeepLink.test.tsx +2 -1
  273. package/src/test/maxShapes.test.ts +3 -2
  274. package/src/test/modifiers.test.ts +5 -4
  275. package/src/test/navigation.test.ts +12 -11
  276. package/src/test/panning.test.ts +2 -1
  277. package/src/test/perf/perf.test.ts +2 -1
  278. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  279. package/src/test/resizing.test.ts +39 -38
  280. package/src/test/select.test.tsx +4 -3
  281. package/src/test/selection-omnibus.test.ts +11 -10
  282. package/src/test/shapeutils.test.ts +4 -3
  283. package/src/test/translating.test.ts +9 -8
  284. package/tldraw.css +650 -533
  285. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  286. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
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;
@@ -683,7 +694,7 @@ input,
683
694
 
684
695
  .tl-text-measure {
685
696
  position: absolute;
686
- z-index: var(--layer-canvas-hidden);
697
+ z-index: var(--tl-layer-canvas-hidden);
687
698
  top: 0px;
688
699
  left: 0px;
689
700
  opacity: 0;
@@ -746,8 +757,8 @@ input,
746
757
  }
747
758
 
748
759
  .tl-text-input::selection {
749
- background: var(--color-selected);
750
- color: var(--color-selected-contrast);
760
+ background: var(--tl-color-selected);
761
+ color: var(--tl-color-selected-contrast);
751
762
  text-shadow: none;
752
763
  }
753
764
 
@@ -757,7 +768,7 @@ input,
757
768
  display: flex;
758
769
  justify-content: center;
759
770
  align-items: center;
760
- color: var(--color-text);
771
+ color: var(--tl-color-text);
761
772
  text-shadow: var(--tl-text-outline);
762
773
  line-height: inherit;
763
774
  position: absolute;
@@ -801,7 +812,7 @@ input,
801
812
 
802
813
  .tl-text-wrapper .tl-text-content {
803
814
  pointer-events: all;
804
- z-index: var(--layer-text-content);
815
+ z-index: var(--tl-layer-text-content);
805
816
  }
806
817
 
807
818
  .tl-text-label__inner > .tl-text-content {
@@ -811,7 +822,7 @@ input,
811
822
  padding: inherit;
812
823
  height: fit-content;
813
824
  width: fit-content;
814
- border-radius: var(--radius-1);
825
+ border-radius: var(--tl-radius-1);
815
826
  max-width: 100%;
816
827
  }
817
828
 
@@ -824,7 +835,7 @@ input,
824
835
  }
825
836
 
826
837
  .tl-text-wrapper[data-isselected='true'] .tl-text-input {
827
- z-index: var(--layer-text-editor);
838
+ z-index: var(--tl-layer-text-editor);
828
839
  pointer-events: all;
829
840
  }
830
841
 
@@ -919,7 +930,7 @@ input,
919
930
  }
920
931
 
921
932
  .tl-rich-text a {
922
- color: var(--color-primary);
933
+ color: var(--tl-color-primary);
923
934
  text-decoration: underline;
924
935
  }
925
936
 
@@ -942,14 +953,14 @@ input,
942
953
  }
943
954
 
944
955
  .tl-theme__dark .tl-rich-text mark {
945
- background-color: var(--color-text-highlight);
956
+ background-color: var(--tl-color-text-highlight);
946
957
  color: currentColor;
947
958
  }
948
959
 
949
960
  @supports (color: color(display-p3 1 1 1)) {
950
961
  @media (color-gamut: p3) {
951
962
  .tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
952
- background-color: var(--color-text-highlight-p3);
963
+ background-color: var(--tl-color-text-highlight-p3);
953
964
  }
954
965
  }
955
966
  }
@@ -961,15 +972,15 @@ input,
961
972
  /* --------------------- Loading -------------------- */
962
973
 
963
974
  .tl-loading {
964
- background-color: var(--color-background);
965
- color: var(--color-text-1);
975
+ background-color: var(--tl-color-background);
976
+ color: var(--tl-color-text-1);
966
977
  height: 100%;
967
978
  width: 100%;
968
979
  display: flex;
969
980
  flex-direction: column;
970
981
  justify-content: center;
971
982
  align-items: center;
972
- gap: var(--space-2);
983
+ gap: var(--tl-space-2);
973
984
  font-size: 14px;
974
985
  font-weight: 500;
975
986
  opacity: 0;
@@ -977,7 +988,7 @@ input,
977
988
  animation-delay: 0.2s;
978
989
  position: absolute;
979
990
  inset: 0px;
980
- z-index: var(--layer-canvas-blocker);
991
+ z-index: var(--tl-layer-canvas-blocker);
981
992
  }
982
993
 
983
994
  @keyframes tl-fade-in {
@@ -1010,8 +1021,8 @@ input,
1010
1021
  }
1011
1022
 
1012
1023
  .tl-brush__default {
1013
- stroke: var(--color-brush-stroke);
1014
- fill: var(--color-brush-fill);
1024
+ stroke: var(--tl-color-brush-stroke);
1025
+ fill: var(--tl-color-brush-fill);
1015
1026
  }
1016
1027
 
1017
1028
  /* -------------------- Scribble -------------------- */
@@ -1026,13 +1037,13 @@ input,
1026
1037
  /* ---------------------- Snaps --------------------- */
1027
1038
 
1028
1039
  .tl-snap-indicator {
1029
- stroke: var(--color-snap);
1040
+ stroke: var(--tl-color-snap);
1030
1041
  stroke-width: calc(1px * var(--tl-scale));
1031
1042
  fill: none;
1032
1043
  }
1033
1044
 
1034
1045
  .tl-snap-point {
1035
- stroke: var(--color-snap);
1046
+ stroke: var(--tl-color-snap);
1036
1047
  stroke-width: calc(1px * var(--tl-scale));
1037
1048
  fill: none;
1038
1049
  }
@@ -1052,7 +1063,7 @@ input,
1052
1063
  justify-content: center;
1053
1064
  font-size: 12px;
1054
1065
  font-weight: 400;
1055
- color: var(--color-text-1);
1066
+ color: var(--tl-color-text-1);
1056
1067
  padding: 13px;
1057
1068
  cursor: var(--tl-cursor-pointer);
1058
1069
  border: none;
@@ -1070,13 +1081,13 @@ input,
1070
1081
  display: block;
1071
1082
  width: calc(100% - 12px);
1072
1083
  height: calc(100% - 12px);
1073
- border-radius: var(--radius-1);
1074
- background-color: var(--color-background);
1084
+ border-radius: var(--tl-radius-1);
1085
+ background-color: var(--tl-color-background);
1075
1086
  pointer-events: none;
1076
1087
  }
1077
1088
 
1078
1089
  .tl-hyperlink-button:focus-visible {
1079
- color: var(--color-selected);
1090
+ color: var(--tl-color-selected);
1080
1091
  }
1081
1092
 
1082
1093
  .tl-hyperlink__icon {
@@ -1103,8 +1114,8 @@ input,
1103
1114
  }
1104
1115
 
1105
1116
  .tl-handle__fg {
1106
- fill: var(--color-selected-contrast);
1107
- stroke: var(--color-selection-stroke);
1117
+ fill: var(--tl-color-selected-contrast);
1118
+ stroke: var(--tl-color-selection-stroke);
1108
1119
  stroke-width: calc(1.5px * var(--tl-scale));
1109
1120
  pointer-events: none;
1110
1121
  }
@@ -1114,7 +1125,7 @@ input,
1114
1125
  }
1115
1126
 
1116
1127
  .tl-handle__clone > .tl-handle__fg {
1117
- fill: var(--color-selection-stroke);
1128
+ fill: var(--tl-color-selection-stroke);
1118
1129
  stroke: none;
1119
1130
  }
1120
1131
 
@@ -1124,7 +1135,7 @@ input,
1124
1135
 
1125
1136
  @media (pointer: coarse) {
1126
1137
  .tl-handle__bg:active {
1127
- fill: var(--color-selection-fill);
1138
+ fill: var(--tl-color-selection-fill);
1128
1139
  }
1129
1140
 
1130
1141
  .tl-handle__create {
@@ -1180,13 +1191,13 @@ input,
1180
1191
  stroke-linejoin: round;
1181
1192
  /* content-visibility: auto; */
1182
1193
  transform-origin: top left;
1183
- color: var(--color-text-1);
1194
+ color: var(--tl-color-text-1);
1184
1195
  }
1185
1196
 
1186
1197
  /* -------------------- Group shape ------------------ */
1187
1198
 
1188
1199
  .tl-group {
1189
- stroke: var(--color-text);
1200
+ stroke: var(--tl-color-text);
1190
1201
  stroke-width: calc(1px * var(--tl-scale));
1191
1202
  opacity: 0.5;
1192
1203
  }
@@ -1204,12 +1215,12 @@ input,
1204
1215
  justify-content: center;
1205
1216
  align-items: center;
1206
1217
  text-align: center;
1207
- color: var(--color-text);
1218
+ color: var(--tl-color-text);
1208
1219
  text-shadow: var(--tl-text-outline);
1209
1220
  }
1210
1221
 
1211
1222
  .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
1212
- border-radius: var(--radius-1);
1223
+ border-radius: var(--tl-radius-1);
1213
1224
  box-sizing: content-box;
1214
1225
  height: max-content;
1215
1226
  width: max-content;
@@ -1220,22 +1231,22 @@ input,
1220
1231
  }
1221
1232
 
1222
1233
  .tl-arrow-hint {
1223
- stroke: var(--color-text-1);
1234
+ stroke: var(--tl-color-text-1);
1224
1235
  fill: none;
1225
1236
  stroke-linecap: round;
1226
1237
  overflow: visible;
1227
1238
  }
1228
1239
 
1229
1240
  .tl-arrow-hint-handle {
1230
- fill: var(--color-selected-contrast);
1231
- stroke: var(--color-selection-stroke);
1241
+ fill: var(--tl-color-selected-contrast);
1242
+ stroke: var(--tl-color-selection-stroke);
1232
1243
  stroke-width: calc(1.5px * var(--tl-scale));
1233
1244
  r: calc(4px * var(--tl-scale));
1234
1245
  }
1235
1246
 
1236
1247
  .tl-arrow-hint-snap {
1237
1248
  stroke: transparent;
1238
- fill: var(--color-selection-fill);
1249
+ fill: var(--tl-color-selection-fill);
1239
1250
  r: calc(12px * var(--tl-scale));
1240
1251
  }
1241
1252
 
@@ -1255,40 +1266,40 @@ input,
1255
1266
  width: 100%;
1256
1267
  height: 100%;
1257
1268
  position: relative;
1258
- border: 1px solid var(--color-panel-contrast);
1259
- background-color: var(--color-panel);
1260
- border-radius: var(--radius-2);
1269
+ border: 1px solid var(--tl-color-panel-contrast);
1270
+ background-color: var(--tl-color-panel);
1271
+ border-radius: var(--tl-radius-2);
1261
1272
  display: flex;
1262
1273
  flex-direction: column;
1263
1274
  overflow: hidden;
1264
1275
  }
1265
1276
 
1266
1277
  .tl-bookmark__container--safariExport {
1267
- border: 1px solid var(--color-divider);
1278
+ border: 1px solid var(--tl-color-divider);
1268
1279
  }
1269
1280
 
1270
1281
  .tl-bookmark__image_container {
1271
1282
  flex: 1 1 100%;
1272
1283
  overflow: hidden;
1273
- border-top-left-radius: var(--radius-1);
1274
- border-top-right-radius: var(--radius-1);
1284
+ border-top-left-radius: var(--tl-radius-1);
1285
+ border-top-right-radius: var(--tl-radius-1);
1275
1286
  width: 100%;
1276
1287
  height: 100%;
1277
1288
  display: flex;
1278
1289
  justify-content: flex-end;
1279
1290
  align-items: flex-start;
1280
- box-shadow: inset 0px 0px 0px 1px var(--color-divider);
1291
+ box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
1281
1292
  }
1282
1293
 
1283
1294
  .tl-bookmark__image_container > .tl-hyperlink-button::after {
1284
- background-color: var(--color-panel);
1295
+ background-color: var(--tl-color-panel);
1285
1296
  }
1286
1297
 
1287
1298
  .tl-bookmark__placeholder {
1288
1299
  width: 100%;
1289
1300
  height: 100%;
1290
- background-color: var(--color-muted-2);
1291
- border-bottom: 1px solid var(--color-muted-2);
1301
+ background-color: var(--tl-color-muted-2);
1302
+ border-bottom: 1px solid var(--tl-color-muted-2);
1292
1303
  }
1293
1304
 
1294
1305
  .tl-bookmark__image {
@@ -1296,12 +1307,12 @@ input,
1296
1307
  height: 100%;
1297
1308
  object-fit: cover;
1298
1309
  object-position: center;
1299
- border-bottom: 1px solid var(--color-muted-2);
1310
+ border-bottom: 1px solid var(--tl-color-muted-2);
1300
1311
  }
1301
1312
 
1302
1313
  .tl-bookmark__copy_container {
1303
- background-color: var(--color-muted-0);
1304
- padding: var(--space-4);
1314
+ background-color: var(--tl-color-muted-0);
1315
+ padding: var(--tl-space-4);
1305
1316
  pointer-events: all;
1306
1317
  display: flex;
1307
1318
  flex-direction: column;
@@ -1321,7 +1332,7 @@ input,
1321
1332
  font-size: 16px;
1322
1333
  line-height: 1.6;
1323
1334
  font-weight: bold;
1324
- padding-bottom: var(--space-2);
1335
+ padding-bottom: var(--tl-space-2);
1325
1336
  overflow: hidden;
1326
1337
  max-height: calc((16px * 1.6) * 2);
1327
1338
  -webkit-box-orient: vertical;
@@ -1341,19 +1352,19 @@ input,
1341
1352
  line-clamp: 3;
1342
1353
  text-overflow: ellipsis;
1343
1354
  display: -webkit-box;
1344
- color: var(--color-text-2);
1345
- margin: var(--space-2) 0px;
1355
+ color: var(--tl-color-text-2);
1356
+ margin: var(--tl-space-2) 0px;
1346
1357
  }
1347
1358
 
1348
1359
  .tl-bookmark__heading + .tl-bookmark__link,
1349
1360
  .tl-bookmark__description + .tl-bookmark__link {
1350
- margin-top: var(--space-3);
1361
+ margin-top: var(--tl-space-3);
1351
1362
  }
1352
1363
  .tl-bookmark__link {
1353
1364
  font-size: 12px;
1354
1365
  pointer-events: all;
1355
1366
  display: flex;
1356
- color: var(--color-text-2);
1367
+ color: var(--tl-color-text-2);
1357
1368
  align-items: center;
1358
1369
  cursor: var(--tl-cursor-pointer);
1359
1370
  width: fit-content;
@@ -1395,7 +1406,7 @@ input,
1395
1406
  width: 100%;
1396
1407
  height: 100%;
1397
1408
  pointer-events: all;
1398
- /* background-color: var(--color-background); */
1409
+ /* background-color: var(--tl-color-background); */
1399
1410
 
1400
1411
  display: flex;
1401
1412
  justify-content: center;
@@ -1424,7 +1435,7 @@ input,
1424
1435
  height: 100%;
1425
1436
  pointer-events: all;
1426
1437
  opacity: 1;
1427
- z-index: var(--layer-text-container);
1438
+ z-index: var(--tl-layer-text-container);
1428
1439
  border-radius: 1px;
1429
1440
  }
1430
1441
 
@@ -1440,22 +1451,22 @@ input,
1440
1451
  }
1441
1452
 
1442
1453
  .tl-frame__creating {
1443
- stroke: var(--color-selected);
1454
+ stroke: var(--tl-color-selected);
1444
1455
  fill: none;
1445
1456
  }
1446
1457
 
1447
1458
  .tl-frame-heading {
1448
- --frame-padding-x: 6px;
1449
- --frame-height: 24px;
1450
- --frame-minimum-width: 32px;
1451
- --frame-offset-width: 16px;
1459
+ --tl-frame-padding-x: 6px;
1460
+ --tl-frame-height: 24px;
1461
+ --tl-frame-minimum-width: 32px;
1462
+ --tl-frame-offset-width: 16px;
1452
1463
  display: flex;
1453
1464
  align-items: center;
1454
1465
  position: absolute;
1455
1466
  transform-origin: 0% 100%;
1456
1467
  overflow: hidden;
1457
1468
  max-width: 100%;
1458
- min-width: var(--frame-minimum-width);
1469
+ min-width: var(--tl-frame-minimum-width);
1459
1470
  height: auto;
1460
1471
  font-size: 12px;
1461
1472
  padding-bottom: 4px;
@@ -1467,18 +1478,18 @@ input,
1467
1478
  /* scale from bottom left corner so we can pin it to the top left corner of the frame */
1468
1479
  transform-origin: 0% 100%;
1469
1480
  display: flex;
1470
- height: var(--frame-height);
1481
+ height: var(--tl-frame-height);
1471
1482
  width: 100%;
1472
1483
  align-items: center;
1473
- border-radius: var(--radius-1);
1484
+ border-radius: var(--tl-radius-1);
1474
1485
  }
1475
1486
 
1476
1487
  .tl-frame-label {
1477
1488
  pointer-events: all;
1478
1489
  overflow: hidden;
1479
1490
  text-overflow: ellipsis;
1480
- padding: 0px var(--frame-padding-x);
1481
- border-radius: var(--radius-1);
1491
+ padding: 0px var(--tl-frame-padding-x);
1492
+ border-radius: var(--tl-radius-1);
1482
1493
  position: relative;
1483
1494
  font-size: inherit;
1484
1495
  white-space: pre;
@@ -1488,12 +1499,12 @@ input,
1488
1499
  color: transparent;
1489
1500
  white-space: pre;
1490
1501
  width: auto;
1491
- min-width: var(--frame-minimum-width);
1502
+ min-width: var(--tl-frame-minimum-width);
1492
1503
  height: 100%;
1493
1504
  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);
1505
+ background-color: var(--tl-color-panel);
1506
+ border-color: var(--tl-color-selected);
1507
+ box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
1497
1508
  }
1498
1509
 
1499
1510
  .tl-frame-name-input {
@@ -1501,7 +1512,7 @@ input,
1501
1512
  border: none;
1502
1513
  background: none;
1503
1514
  outline: none;
1504
- padding: 0px var(--frame-padding-x);
1515
+ padding: 0px var(--tl-frame-padding-x);
1505
1516
  inset: 0px;
1506
1517
  height: 100%;
1507
1518
  width: 100%;
@@ -1509,8 +1520,8 @@ input,
1509
1520
  font-family: inherit;
1510
1521
  font-weight: inherit;
1511
1522
  width: 100%;
1512
- color: var(--color-text-1);
1513
- border-radius: var(--radius-1);
1523
+ color: var(--tl-color-text-1);
1524
+ border-radius: var(--tl-radius-1);
1514
1525
  user-select: all;
1515
1526
  -webkit-user-select: text;
1516
1527
  white-space: pre;
@@ -1530,7 +1541,7 @@ input,
1530
1541
 
1531
1542
  .tl-embed {
1532
1543
  border: none;
1533
- border-radius: var(--radius-2);
1544
+ border-radius: var(--tl-radius-2);
1534
1545
  }
1535
1546
 
1536
1547
  /* -------------- Shape error boundary -------------- */
@@ -1538,11 +1549,11 @@ input,
1538
1549
  .tl-shape-error-boundary {
1539
1550
  width: 100%;
1540
1551
  height: 100%;
1541
- background-color: var(--color-muted-1);
1552
+ background-color: var(--tl-color-muted-1);
1542
1553
  border-width: calc(1px * var(--tl-scale));
1543
- border-color: var(--color-muted-1);
1554
+ border-color: var(--tl-color-muted-1);
1544
1555
  border-style: solid;
1545
- border-radius: calc(var(--radius-1) * var(--tl-scale));
1556
+ border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
1546
1557
  display: flex;
1547
1558
  flex-direction: column;
1548
1559
  align-items: center;
@@ -1551,7 +1562,7 @@ input,
1551
1562
  position: relative;
1552
1563
  pointer-events: all;
1553
1564
  overflow: hidden;
1554
- padding: var(--space-2);
1565
+ padding: var(--tl-space-2);
1555
1566
  }
1556
1567
 
1557
1568
  .tl-shape-error-boundary::before {
@@ -1559,7 +1570,7 @@ input,
1559
1570
  content: 'Error';
1560
1571
  font-size: 12px;
1561
1572
  font-family: inherit;
1562
- color: var(--color-text-0);
1573
+ color: var(--tl-color-text-0);
1563
1574
  }
1564
1575
 
1565
1576
  /* ----------------- Error boundary ----------------- */
@@ -1570,9 +1581,9 @@ input,
1570
1581
  display: flex;
1571
1582
  align-items: center;
1572
1583
  justify-content: center;
1573
- padding: var(--space-4);
1574
- background-color: var(--color-background);
1575
- color: var(--color-text-1);
1584
+ padding: var(--tl-space-4);
1585
+ background-color: var(--tl-color-background);
1586
+ color: var(--tl-color-text-1);
1576
1587
  position: absolute;
1577
1588
  }
1578
1589
 
@@ -1581,8 +1592,8 @@ input,
1581
1592
  inset: 0px;
1582
1593
  height: 100%;
1583
1594
  width: 100%;
1584
- z-index: var(--layer-error-overlay);
1585
- background-color: var(--color-overlay);
1595
+ z-index: var(--tl-layer-error-overlay);
1596
+ background-color: var(--tl-color-overlay);
1586
1597
  }
1587
1598
 
1588
1599
  .tl-error-boundary__content * {
@@ -1597,7 +1608,7 @@ input,
1597
1608
  inset: 0px;
1598
1609
  height: 100%;
1599
1610
  width: 100%;
1600
- z-index: var(--layer-error-canvas);
1611
+ z-index: var(--tl-layer-error-canvas);
1601
1612
  }
1602
1613
 
1603
1614
  /* some browsers seem to have some weird interactions between stacking contexts
@@ -1610,7 +1621,7 @@ it from receiving any pointer events or affecting the cursor. */
1610
1621
  inset: 0px;
1611
1622
  height: 100%;
1612
1623
  width: 100%;
1613
- z-index: var(--layer-error-canvas-after);
1624
+ z-index: var(--tl-layer-error-canvas-after);
1614
1625
  pointer-events: all;
1615
1626
  }
1616
1627
 
@@ -1620,16 +1631,16 @@ it from receiving any pointer events or affecting the cursor. */
1620
1631
  max-width: 100%;
1621
1632
  width: 400px;
1622
1633
  max-height: 100%;
1623
- background-color: var(--color-panel);
1634
+ background-color: var(--tl-color-panel);
1624
1635
  padding: 16px;
1625
1636
  border-radius: 16px;
1626
- box-shadow: var(--shadow-2);
1637
+ box-shadow: var(--tl-shadow-2);
1627
1638
  font-size: 14px;
1628
1639
  font-weight: 400;
1629
1640
  display: flex;
1630
1641
  flex-direction: column;
1631
1642
  overflow: auto;
1632
- z-index: var(--layer-error-content);
1643
+ z-index: var(--tl-layer-error-content);
1633
1644
  gap: 12px;
1634
1645
  }
1635
1646
 
@@ -1644,10 +1655,10 @@ it from receiving any pointer events or affecting the cursor. */
1644
1655
  }
1645
1656
 
1646
1657
  .tl-error-boundary__content h4 {
1647
- border: 1px solid var(--color-low-border);
1658
+ border: 1px solid var(--tl-color-low-border);
1648
1659
  margin: -6px 0 0 0;
1649
- padding: var(--space-5);
1650
- border-radius: var(--radius-2);
1660
+ padding: var(--tl-space-5);
1661
+ border-radius: var(--tl-radius-2);
1651
1662
  font-weight: normal;
1652
1663
  }
1653
1664
 
@@ -1657,10 +1668,10 @@ it from receiving any pointer events or affecting the cursor. */
1657
1668
  }
1658
1669
 
1659
1670
  .tl-error-boundary__content pre {
1660
- background-color: var(--color-muted-2);
1671
+ background-color: var(--tl-color-muted-2);
1661
1672
  margin-top: 0;
1662
- padding: var(--space-5);
1663
- border-radius: var(--radius-2);
1673
+ padding: var(--tl-space-5);
1674
+ border-radius: var(--tl-radius-2);
1664
1675
  overflow: auto;
1665
1676
  font-size: 12px;
1666
1677
  max-height: 320px;
@@ -1672,15 +1683,15 @@ it from receiving any pointer events or affecting the cursor. */
1672
1683
  font-family: inherit;
1673
1684
  font-size: 14px;
1674
1685
  font-weight: 500;
1675
- padding: var(--space-4);
1676
- border-radius: var(--radius-3);
1686
+ padding: var(--tl-space-4);
1687
+ border-radius: var(--tl-radius-3);
1677
1688
  cursor: var(--tl-cursor-pointer);
1678
1689
  color: inherit;
1679
1690
  background-color: transparent;
1680
1691
  }
1681
1692
 
1682
1693
  .tl-error-boundary__content a {
1683
- color: var(--color-selected);
1694
+ color: var(--tl-color-selected);
1684
1695
  font-weight: 500;
1685
1696
  text-decoration: none;
1686
1697
  }
@@ -1692,31 +1703,31 @@ it from receiving any pointer events or affecting the cursor. */
1692
1703
 
1693
1704
  .tl-error-boundary__content__error button {
1694
1705
  position: absolute;
1695
- top: var(--space-2);
1696
- right: var(--space-2);
1706
+ top: var(--tl-space-2);
1707
+ right: var(--tl-space-2);
1697
1708
  font-size: 12px;
1698
- padding: var(--space-2) var(--space-3);
1699
- background-color: var(--color-panel);
1700
- border-radius: var(--radius-1);
1709
+ padding: var(--tl-space-2) var(--tl-space-3);
1710
+ background-color: var(--tl-color-panel);
1711
+ border-radius: var(--tl-radius-1);
1701
1712
  }
1702
1713
 
1703
1714
  .tl-error-boundary__content__actions {
1704
1715
  display: flex;
1705
1716
  justify-content: space-between;
1706
- gap: var(--space-4);
1717
+ gap: var(--tl-space-4);
1707
1718
  margin: 0px;
1708
1719
  margin-left: -4px;
1709
1720
  }
1710
1721
  .tl-error-boundary__content__actions__group {
1711
1722
  display: flex;
1712
- gap: var(--space-4);
1723
+ gap: var(--tl-space-4);
1713
1724
  }
1714
1725
  .tl-error-boundary__content .tl-error-boundary__reset {
1715
- color: var(--color-danger);
1726
+ color: var(--tl-color-danger);
1716
1727
  }
1717
1728
  .tl-error-boundary__content .tl-error-boundary__refresh {
1718
- background-color: var(--color-primary);
1719
- color: var(--color-selected-contrast);
1729
+ background-color: var(--tl-color-primary);
1730
+ color: var(--tl-color-selected-contrast);
1720
1731
  }
1721
1732
  .tl-container__focused:not(.tl-container__no-focus-ring)
1722
1733
  .tlui-button.tl-error-boundary__refresh:focus-visible {
@@ -1728,7 +1739,7 @@ it from receiving any pointer events or affecting the cursor. */
1728
1739
 
1729
1740
  .tl-hit-test-blocker {
1730
1741
  position: absolute;
1731
- z-index: var(--layer-canvas-blocker);
1742
+ z-index: var(--tl-layer-canvas-blocker);
1732
1743
  inset: 0px;
1733
1744
  width: 100%;
1734
1745
  height: 100%;
@@ -1748,32 +1759,32 @@ it from receiving any pointer events or affecting the cursor. */
1748
1759
 
1749
1760
  .tl-handle__bg:hover {
1750
1761
  cursor: var(--tl-cursor-grab);
1751
- fill: var(--color-selection-fill);
1762
+ fill: var(--tl-color-selection-fill);
1752
1763
  }
1753
1764
 
1754
1765
  .tl-bookmark__link:hover {
1755
- color: var(--color-selected);
1766
+ color: var(--tl-color-selected);
1756
1767
  }
1757
1768
 
1758
1769
  .tl-hyperlink-button:hover {
1759
- color: var(--color-selected);
1770
+ color: var(--tl-color-selected);
1760
1771
  }
1761
1772
 
1762
1773
  .tl-error-boundary__content button:hover {
1763
- background-color: var(--color-low);
1774
+ background-color: var(--tl-color-low);
1764
1775
  }
1765
1776
  .tl-error-boundary__content a:hover {
1766
- color: var(--color-text-1);
1777
+ color: var(--tl-color-text-1);
1767
1778
  }
1768
1779
  .tl-error-boundary__content .tl-error-boundary__refresh:hover {
1769
- background-color: var(--color-primary);
1780
+ background-color: var(--tl-color-primary);
1770
1781
  opacity: 0.9;
1771
1782
  }
1772
1783
 
1773
1784
  /* These three rules help preserve clicking into specific points in text areas *while*
1774
1785
  * already in edit mode when jumping from shape to shape. */
1775
1786
  .tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
1776
- z-index: var(--layer-text-editor);
1787
+ z-index: var(--tl-layer-text-editor);
1777
1788
  pointer-events: all;
1778
1789
  }
1779
1790
  }
@@ -1781,15 +1792,15 @@ it from receiving any pointer events or affecting the cursor. */
1781
1792
  /* @tldraw/ui */
1782
1793
 
1783
1794
  .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;
1795
+ --tl-layer-above: 1;
1796
+ --tl-layer-focused-input: 10;
1797
+ --tl-layer-menu-click-capture: 250;
1798
+ --tl-layer-panels: 300;
1799
+ --tl-layer-menus: 400;
1800
+ --tl-layer-toasts: 650;
1801
+ --tl-layer-cursor: 700;
1802
+ --tl-layer-header-footer: 999;
1803
+ --tl-layer-following-indicator: 1000;
1793
1804
  }
1794
1805
 
1795
1806
  /* Button */
@@ -1813,23 +1824,23 @@ it from receiving any pointer events or affecting the cursor. */
1813
1824
  text-rendering: optimizeLegibility;
1814
1825
  font-size: 12px;
1815
1826
  gap: 0px;
1816
- color: var(--color-text-1);
1827
+ color: var(--tl-color-text-1);
1817
1828
  z-index: 0;
1818
1829
  }
1819
1830
 
1820
1831
  .tlui-button:disabled {
1821
- color: var(--color-text-3);
1832
+ color: var(--tl-color-text-3);
1822
1833
  text-shadow: none;
1823
1834
  cursor: default;
1824
1835
  }
1825
1836
 
1826
1837
  .tlui-button:disabled .tlui-kbd {
1827
- color: var(--color-text-3);
1838
+ color: var(--tl-color-text-3);
1828
1839
  }
1829
1840
 
1830
1841
  .tlui-button > * {
1831
1842
  position: relative;
1832
- z-index: var(--layer-above);
1843
+ z-index: var(--tl-layer-above);
1833
1844
  }
1834
1845
 
1835
1846
  .tlui-button__label {
@@ -1845,7 +1856,7 @@ it from receiving any pointer events or affecting the cursor. */
1845
1856
  */
1846
1857
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
1847
1858
  border-radius: 10px;
1848
- outline: 2px solid var(--color-focus);
1859
+ outline: 2px solid var(--tl-color-focus);
1849
1860
  outline-offset: -5px;
1850
1861
  }
1851
1862
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
@@ -1853,7 +1864,7 @@ it from receiving any pointer events or affecting the cursor. */
1853
1864
  }
1854
1865
  .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
1855
1866
  border-radius: 10px;
1856
- outline: 2px solid var(--color-focus);
1867
+ outline: 2px solid var(--tl-color-focus);
1857
1868
  outline-offset: -5px;
1858
1869
  }
1859
1870
 
@@ -1862,8 +1873,8 @@ it from receiving any pointer events or affecting the cursor. */
1862
1873
  content: '';
1863
1874
  position: absolute;
1864
1875
  inset: 4px;
1865
- border-radius: var(--radius-2);
1866
- background: var(--color-muted-2);
1876
+ border-radius: var(--tl-radius-2);
1877
+ background: var(--tl-color-muted-2);
1867
1878
  opacity: 0;
1868
1879
  }
1869
1880
 
@@ -1873,18 +1884,18 @@ it from receiving any pointer events or affecting the cursor. */
1873
1884
 
1874
1885
  .tlui-button[data-isactive='true']::after,
1875
1886
  .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
1876
- background: var(--color-hint);
1887
+ background: var(--tl-color-hint);
1877
1888
  opacity: 1;
1878
1889
  }
1879
1890
 
1880
1891
  .tlui-button[aria-expanded='true'][data-direction='left'] {
1881
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
1892
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1882
1893
  opacity: 1;
1883
1894
  }
1884
1895
 
1885
1896
  @media (hover: hover) {
1886
1897
  .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%);
1898
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1888
1899
  opacity: 1;
1889
1900
  }
1890
1901
 
@@ -1898,18 +1909,18 @@ it from receiving any pointer events or affecting the cursor. */
1898
1909
  }
1899
1910
 
1900
1911
  .tlui-button__icon + .tlui-button__label {
1901
- margin-left: var(--space-2);
1912
+ margin-left: var(--tl-space-2);
1902
1913
  }
1903
1914
 
1904
1915
  /* Low button */
1905
1916
 
1906
1917
  .tlui-button__low {
1907
- border-radius: var(--radius-3);
1908
- background-color: var(--color-low);
1918
+ border-radius: var(--tl-radius-3);
1919
+ background-color: var(--tl-color-low);
1909
1920
  }
1910
1921
 
1911
1922
  .tlui-button__low::after {
1912
- background-color: var(--color-muted-2);
1923
+ background-color: var(--tl-color-muted-2);
1913
1924
  opacity: 0;
1914
1925
  }
1915
1926
 
@@ -1922,21 +1933,21 @@ it from receiving any pointer events or affecting the cursor. */
1922
1933
  /* Primary / danger buttons */
1923
1934
 
1924
1935
  .tlui-button__primary {
1925
- color: var(--color-primary);
1936
+ color: var(--tl-color-primary);
1926
1937
  }
1927
1938
 
1928
1939
  .tlui-button__danger {
1929
- color: var(--color-danger);
1940
+ color: var(--tl-color-danger);
1930
1941
  text-shadow: none;
1931
1942
  }
1932
1943
 
1933
1944
  @media (hover: hover) {
1934
1945
  .tlui-button__primary:not(:disabled, :focus-visible):hover {
1935
- color: var(--color-primary);
1946
+ color: var(--tl-color-primary);
1936
1947
  }
1937
1948
 
1938
1949
  .tlui-button__danger:not(:disabled, :focus-visible):hover {
1939
- color: var(--color-danger);
1950
+ color: var(--tl-color-danger);
1940
1951
  text-shadow: none;
1941
1952
  }
1942
1953
  }
@@ -1953,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
1953
1964
 
1954
1965
  .tlui-button__menu::after {
1955
1966
  inset: 4px;
1956
- border-radius: var(--radius-2);
1967
+ border-radius: var(--tl-radius-2);
1957
1968
  }
1958
1969
 
1959
1970
  .tlui-button__menu > .tlui-icon + .tlui-button__label {
@@ -1983,13 +1994,21 @@ it from receiving any pointer events or affecting the cursor. */
1983
1994
 
1984
1995
  .tlui-main-toolbar__lock-button {
1985
1996
  position: absolute;
1986
- top: 4px;
1987
- right: 0px;
1988
1997
  pointer-events: all;
1989
1998
  height: 40px;
1990
1999
  width: 40px;
2000
+ border-radius: var(--tl-radius-2);
2001
+ }
2002
+
2003
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
2004
+ top: 4px;
2005
+ right: 0px;
1991
2006
  min-width: 0px;
1992
- border-radius: var(--radius-2);
2007
+ }
2008
+
2009
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
2010
+ bottom: 0px;
2011
+ min-height: 0px;
1993
2012
  }
1994
2013
 
1995
2014
  .tlui-main-toolbar__lock-button::after {
@@ -2012,24 +2031,24 @@ it from receiving any pointer events or affecting the cursor. */
2012
2031
  }
2013
2032
 
2014
2033
  .tlui-button__tool[aria-pressed='true'] {
2015
- color: var(--color-selected-contrast);
2034
+ color: var(--tl-color-selected-contrast);
2016
2035
  }
2017
2036
 
2018
2037
  .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
2019
- color: var(--color-selected-contrast);
2038
+ color: var(--tl-color-selected-contrast);
2020
2039
  }
2021
2040
 
2022
2041
  .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
2023
- background: var(--color-selected);
2042
+ background: var(--tl-color-selected);
2024
2043
  opacity: 1;
2025
2044
  }
2026
2045
 
2027
- .tlui-layout__mobile .tlui-button__tool {
2046
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
2028
2047
  height: 48px;
2029
2048
  width: 43px;
2030
2049
  }
2031
2050
 
2032
- .tlui-layout__mobile .tlui-button__tool > .tlui-icon {
2051
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
2033
2052
  height: 16px;
2034
2053
  width: 16px;
2035
2054
  }
@@ -2046,6 +2065,18 @@ it from receiving any pointer events or affecting the cursor. */
2046
2065
  margin-right: -2px;
2047
2066
  }
2048
2067
 
2068
+ /* Column layout */
2069
+
2070
+ .tlui-column {
2071
+ display: flex;
2072
+ flex-direction: column;
2073
+ padding: 2px 0;
2074
+ }
2075
+ .tlui-column > * {
2076
+ margin-top: -2px;
2077
+ margin-bottom: -2px;
2078
+ }
2079
+
2049
2080
  /* Grid layout */
2050
2081
 
2051
2082
  .tlui-grid {
@@ -2081,9 +2112,9 @@ it from receiving any pointer events or affecting the cursor. */
2081
2112
  pointer-events: none;
2082
2113
  user-select: none;
2083
2114
  contain: strict;
2084
- z-index: var(--layer-panels);
2115
+ z-index: var(--tl-layer-panels);
2085
2116
  transform: translate3d(0, 0, 0);
2086
- --sab: env(safe-area-inset-bottom);
2117
+ --tl-sab: env(safe-area-inset-bottom);
2087
2118
  font-weight: 500;
2088
2119
  line-height: 1.6;
2089
2120
  -webkit-font-smoothing: antialiased;
@@ -2136,11 +2167,11 @@ it from receiving any pointer events or affecting the cursor. */
2136
2167
  justify-content: flex-start;
2137
2168
  align-items: flex-start;
2138
2169
  width: min-content;
2139
- gap: var(--space-3);
2140
- margin: var(--space-2) var(--space-3);
2170
+ gap: var(--tl-space-3);
2171
+ margin: var(--tl-space-2) var(--tl-space-3);
2141
2172
  white-space: nowrap;
2142
2173
  pointer-events: none;
2143
- z-index: var(--layer-panels);
2174
+ z-index: var(--tl-layer-panels);
2144
2175
  }
2145
2176
 
2146
2177
  /* ---------------------- Icon ---------------------- */
@@ -2168,7 +2199,7 @@ it from receiving any pointer events or affecting the cursor. */
2168
2199
 
2169
2200
  .tlui-slider__container {
2170
2201
  width: 100%;
2171
- padding: 0px var(--space-4);
2202
+ padding: 0px var(--tl-space-4);
2172
2203
  }
2173
2204
 
2174
2205
  .tlui-slider {
@@ -2194,7 +2225,7 @@ it from receiving any pointer events or affecting the cursor. */
2194
2225
  content: '';
2195
2226
  height: 3px;
2196
2227
  width: 100%;
2197
- background-color: var(--color-muted-1);
2228
+ background-color: var(--tl-color-muted-1);
2198
2229
  border-radius: 14px;
2199
2230
  }
2200
2231
 
@@ -2203,7 +2234,7 @@ it from receiving any pointer events or affecting the cursor. */
2203
2234
  top: calc(50% - 2px);
2204
2235
  left: 0px;
2205
2236
  height: 3px;
2206
- background-color: var(--color-selected);
2237
+ background-color: var(--tl-color-selected);
2207
2238
  border-radius: 14px;
2208
2239
  }
2209
2240
 
@@ -2215,16 +2246,16 @@ it from receiving any pointer events or affecting the cursor. */
2215
2246
  height: 18px;
2216
2247
  position: relative;
2217
2248
  top: -1px;
2218
- background-color: var(--color-panel);
2249
+ background-color: var(--tl-color-panel);
2219
2250
  border-radius: 999px;
2220
- box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
2251
+ box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
2221
2252
  }
2222
2253
 
2223
2254
  .tlui-slider__thumb:active {
2224
2255
  cursor: grabbing;
2225
2256
  box-shadow:
2226
- inset 0px 0px 0px 2px var(--color-text-1),
2227
- var(--shadow-1);
2257
+ inset 0px 0px 0px 2px var(--tl-color-text-1),
2258
+ var(--tl-shadow-1);
2228
2259
  }
2229
2260
 
2230
2261
  /* ---------------------- Input --------------------- */
@@ -2233,7 +2264,7 @@ it from receiving any pointer events or affecting the cursor. */
2233
2264
  background: none;
2234
2265
  margin: 0px;
2235
2266
  position: relative;
2236
- z-index: var(--layer-above);
2267
+ z-index: var(--tl-layer-above);
2237
2268
  height: 40px;
2238
2269
  max-height: 40px;
2239
2270
  display: flex;
@@ -2242,8 +2273,8 @@ it from receiving any pointer events or affecting the cursor. */
2242
2273
  font-family: inherit;
2243
2274
  font-size: 12px;
2244
2275
  font-weight: inherit;
2245
- color: var(--color-text-1);
2246
- padding: var(--space-4);
2276
+ color: var(--tl-color-text-1);
2277
+ padding: var(--tl-space-4);
2247
2278
  padding-left: 0px;
2248
2279
  border: none;
2249
2280
  outline: none;
@@ -2259,8 +2290,8 @@ it from receiving any pointer events or affecting the cursor. */
2259
2290
  height: 44px;
2260
2291
  display: flex;
2261
2292
  align-items: center;
2262
- gap: var(--space-4);
2263
- color: var(--color-text);
2293
+ gap: var(--tl-space-4);
2294
+ color: var(--tl-color-text);
2264
2295
  }
2265
2296
 
2266
2297
  .tlui-input__wrapper > .tlui-icon {
@@ -2292,7 +2323,7 @@ it from receiving any pointer events or affecting the cursor. */
2292
2323
  grid-auto-columns: minmax(1em, auto);
2293
2324
  align-self: bottom;
2294
2325
  color: currentColor;
2295
- margin-left: var(--space-4);
2326
+ margin-left: var(--tl-space-4);
2296
2327
  }
2297
2328
 
2298
2329
  .tlui-kbd > span {
@@ -2309,13 +2340,13 @@ it from receiving any pointer events or affecting the cursor. */
2309
2340
  }
2310
2341
 
2311
2342
  .tlui-kbd:not(:last-child) {
2312
- margin-right: var(--space-2);
2343
+ margin-right: var(--tl-space-2);
2313
2344
  }
2314
2345
 
2315
2346
  /* Focus Mode Button */
2316
2347
 
2317
2348
  .tlui-focus-button {
2318
- z-index: var(--layer-panels);
2349
+ z-index: var(--tl-layer-panels);
2319
2350
  pointer-events: all;
2320
2351
  }
2321
2352
 
@@ -2326,16 +2357,16 @@ it from receiving any pointer events or affecting the cursor. */
2326
2357
  }
2327
2358
 
2328
2359
  .tlui-menu {
2329
- z-index: var(--layer-menus);
2360
+ z-index: var(--tl-layer-menus);
2330
2361
  height: fit-content;
2331
2362
  width: fit-content;
2332
- border-radius: var(--radius-3);
2363
+ border-radius: var(--tl-radius-3);
2333
2364
  pointer-events: all;
2334
2365
  touch-action: auto;
2335
2366
  overflow-y: auto;
2336
2367
  overscroll-behavior: none;
2337
- background-color: var(--color-panel);
2338
- box-shadow: var(--shadow-3);
2368
+ background-color: var(--tl-color-panel);
2369
+ box-shadow: var(--tl-shadow-3);
2339
2370
  }
2340
2371
 
2341
2372
  .tlui-menu::-webkit-scrollbar {
@@ -2353,7 +2384,7 @@ it from receiving any pointer events or affecting the cursor. */
2353
2384
  }
2354
2385
 
2355
2386
  .tlui-menu__group {
2356
- border-bottom: 1px solid var(--color-divider);
2387
+ border-bottom: 1px solid var(--tl-color-divider);
2357
2388
  }
2358
2389
  .tlui-menu__group:nth-last-of-type(1) {
2359
2390
  border-bottom: none;
@@ -2363,23 +2394,23 @@ it from receiving any pointer events or affecting the cursor. */
2363
2394
 
2364
2395
  .tlui-menu__submenu__trigger[data-state='open']::after {
2365
2396
  opacity: 1;
2366
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2397
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2367
2398
  }
2368
2399
 
2369
2400
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
2370
2401
  opacity: 1;
2371
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2402
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2372
2403
  }
2373
2404
 
2374
2405
  @media (hover: hover) {
2375
2406
  .tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
2376
2407
  opacity: 1;
2377
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2408
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2378
2409
  }
2379
2410
 
2380
2411
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
2381
2412
  opacity: 1;
2382
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2413
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2383
2414
  }
2384
2415
  }
2385
2416
 
@@ -2404,7 +2435,7 @@ it from receiving any pointer events or affecting the cursor. */
2404
2435
  .tlui-menu-click-capture {
2405
2436
  position: fixed;
2406
2437
  inset: 0;
2407
- z-index: var(--layer-menu-click-capture);
2438
+ z-index: var(--tl-layer-menu-click-capture);
2408
2439
  }
2409
2440
 
2410
2441
  /* --------------------- Popover -------------------- */
@@ -2420,10 +2451,10 @@ it from receiving any pointer events or affecting the cursor. */
2420
2451
  max-height: calc(var(--radix-popover-content-available-height) - 8px);
2421
2452
  margin: 0px;
2422
2453
  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);
2454
+ border-radius: var(--tl-radius-3);
2455
+ background-color: var(--tl-color-panel);
2456
+ box-shadow: var(--tl-shadow-3);
2457
+ z-index: var(--tl-layer-menus);
2427
2458
  overflow: hidden;
2428
2459
  overflow-y: auto;
2429
2460
  touch-action: auto;
@@ -2436,22 +2467,22 @@ it from receiving any pointer events or affecting the cursor. */
2436
2467
 
2437
2468
  .tlui-menu-zone {
2438
2469
  position: relative;
2439
- z-index: var(--layer-panels);
2470
+ z-index: var(--tl-layer-panels);
2440
2471
  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);
2472
+ border-right: 2px solid var(--tl-color-background);
2473
+ border-bottom: 2px solid var(--tl-color-background);
2474
+ border-bottom-right-radius: var(--tl-radius-4);
2475
+ background-color: var(--tl-color-low);
2445
2476
  }
2446
2477
 
2447
2478
  .tlui-menu-zone *[data-state='open']::after {
2448
- background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2479
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2449
2480
  opacity: 1;
2450
2481
  }
2451
2482
 
2452
2483
  @media (hover: hover) {
2453
2484
  .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%);
2485
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2455
2486
  opacity: 1;
2456
2487
  }
2457
2488
  }
@@ -2477,8 +2508,8 @@ it from receiving any pointer events or affecting the cursor. */
2477
2508
  align-items: center;
2478
2509
  width: 100%;
2479
2510
  height: 40px;
2480
- padding-left: var(--space-4);
2481
- border-bottom: 1px solid var(--color-divider);
2511
+ padding-left: var(--tl-space-4);
2512
+ border-bottom: 1px solid var(--tl-color-divider);
2482
2513
  }
2483
2514
 
2484
2515
  .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
@@ -2486,7 +2517,7 @@ it from receiving any pointer events or affecting the cursor. */
2486
2517
  }
2487
2518
 
2488
2519
  .tlui-page-menu__header__title {
2489
- color: var(--color-text);
2520
+ color: var(--tl-color-text);
2490
2521
  font-size: 12px;
2491
2522
  flex-grow: 2;
2492
2523
  }
@@ -2571,7 +2602,7 @@ it from receiving any pointer events or affecting the cursor. */
2571
2602
  display: inline-flex;
2572
2603
  align-items: center;
2573
2604
  justify-content: center;
2574
- color: var(--color-text);
2605
+ color: var(--tl-color-text);
2575
2606
  }
2576
2607
 
2577
2608
  .tlui-page_menu__item__sortable {
@@ -2584,7 +2615,7 @@ it from receiving any pointer events or affecting the cursor. */
2584
2615
  flex-direction: row;
2585
2616
  align-items: center;
2586
2617
  overflow: hidden;
2587
- z-index: var(--layer-above);
2618
+ z-index: var(--tl-layer-above);
2588
2619
  }
2589
2620
 
2590
2621
  .tlui-page_menu__item__sortable__title {
@@ -2596,7 +2627,7 @@ it from receiving any pointer events or affecting the cursor. */
2596
2627
  }
2597
2628
 
2598
2629
  .tlui-page_menu__item__sortable:focus-visible {
2599
- z-index: var(--layer-focused-input);
2630
+ z-index: var(--tl-layer-focused-input);
2600
2631
  }
2601
2632
 
2602
2633
  .tlui-page_menu__item__sortable__handle {
@@ -2605,7 +2636,7 @@ it from receiving any pointer events or affecting the cursor. */
2605
2636
  min-width: 0px;
2606
2637
  height: 40px;
2607
2638
  cursor: grab;
2608
- color: var(--color-text-3);
2639
+ color: var(--tl-color-text-3);
2609
2640
  flex-shrink: 0;
2610
2641
  margin-right: -9px;
2611
2642
  }
@@ -2647,13 +2678,13 @@ it from receiving any pointer events or affecting the cursor. */
2647
2678
  }
2648
2679
 
2649
2680
  .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%);
2681
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2651
2682
  opacity: 1;
2652
2683
  }
2653
2684
 
2654
2685
  @media (hover: hover) {
2655
2686
  .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%);
2687
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2657
2688
  opacity: 1;
2658
2689
  }
2659
2690
  }
@@ -2689,7 +2720,7 @@ it from receiving any pointer events or affecting the cursor. */
2689
2720
  top: 48px;
2690
2721
  left: -9999px;
2691
2722
  padding: 8px 16px;
2692
- z-index: var(--layer-toasts);
2723
+ z-index: var(--tl-layer-toasts);
2693
2724
  }
2694
2725
 
2695
2726
  .tl-skip-to-main-content:focus {
@@ -2701,11 +2732,11 @@ it from receiving any pointer events or affecting the cursor. */
2701
2732
  .tlui-offline-indicator {
2702
2733
  display: flex;
2703
2734
  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);
2735
+ gap: var(--tl-space-3);
2736
+ color: var(--tl-color-text);
2737
+ background-color: var(--tl-color-low);
2738
+ border: 3px solid var(--tl-color-background);
2739
+ padding: 0px var(--tl-space-5);
2709
2740
  height: 42px;
2710
2741
  align-items: center;
2711
2742
  justify-content: center;
@@ -2720,10 +2751,10 @@ it from receiving any pointer events or affecting the cursor. */
2720
2751
  /* ------------------- Style panel ------------------ */
2721
2752
 
2722
2753
  .tlui-style-panel__wrapper {
2723
- box-shadow: var(--shadow-2);
2724
- border-radius: var(--radius-3);
2754
+ box-shadow: var(--tl-shadow-2);
2755
+ border-radius: var(--tl-radius-3);
2725
2756
  pointer-events: all;
2726
- background-color: var(--color-panel);
2757
+ background-color: var(--tl-color-panel);
2727
2758
  height: fit-content;
2728
2759
  max-height: 100%;
2729
2760
  margin: 8px;
@@ -2732,7 +2763,7 @@ it from receiving any pointer events or affecting the cursor. */
2732
2763
  overscroll-behavior: none;
2733
2764
  overflow-y: auto;
2734
2765
  overflow-x: hidden;
2735
- color: var(--color-text);
2766
+ color: var(--tl-color-text);
2736
2767
  }
2737
2768
  /* if the style panel is the only child (ie no share menu), increase the margin */
2738
2769
  .tlui-style-panel__wrapper:only-child {
@@ -2741,7 +2772,7 @@ it from receiving any pointer events or affecting the cursor. */
2741
2772
 
2742
2773
  .tlui-style-panel {
2743
2774
  position: relative;
2744
- z-index: var(--layer-panels);
2775
+ z-index: var(--tl-layer-panels);
2745
2776
  pointer-events: all;
2746
2777
  width: 148px;
2747
2778
  max-width: 148px;
@@ -2749,7 +2780,7 @@ it from receiving any pointer events or affecting the cursor. */
2749
2780
 
2750
2781
  .tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
2751
2782
  border-radius: 10px;
2752
- outline: 2px solid var(--color-text);
2783
+ outline: 2px solid var(--tl-color-text);
2753
2784
  outline-offset: -5px;
2754
2785
  }
2755
2786
 
@@ -2768,7 +2799,7 @@ it from receiving any pointer events or affecting the cursor. */
2768
2799
  }
2769
2800
 
2770
2801
  .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
2771
- border-bottom: 1px solid var(--color-divider);
2802
+ border-bottom: 1px solid var(--tl-color-divider);
2772
2803
  }
2773
2804
 
2774
2805
  .tlui-style-panel__section:empty {
@@ -2777,7 +2808,7 @@ it from receiving any pointer events or affecting the cursor. */
2777
2808
 
2778
2809
  .tlui-style-panel__section__common:not(:only-child) {
2779
2810
  margin-bottom: 7px;
2780
- border-bottom: 1px solid var(--color-divider);
2811
+ border-bottom: 1px solid var(--tl-color-divider);
2781
2812
  }
2782
2813
 
2783
2814
  .tlui-style-panel__dropdown-picker:only-child {
@@ -2788,8 +2819,8 @@ it from receiving any pointer events or affecting the cursor. */
2788
2819
  display: flex;
2789
2820
  grid-template-columns: 1fr auto;
2790
2821
  align-items: center;
2791
- padding-left: var(--space-4);
2792
- color: var(--color-text-1);
2822
+ padding-left: var(--tl-space-4);
2823
+ color: var(--tl-color-text-1);
2793
2824
  font-size: 12px;
2794
2825
  }
2795
2826
 
@@ -2803,13 +2834,16 @@ it from receiving any pointer events or affecting the cursor. */
2803
2834
 
2804
2835
  .tlui-style-panel .tlui-button[data-state='open']::after {
2805
2836
  opacity: 1;
2806
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2837
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2807
2838
  }
2808
2839
 
2809
2840
  @media (hover: hover) {
2841
+ .tlui-style-panel .tlui-button[aria-expanded='true'] {
2842
+ background: none;
2843
+ }
2810
2844
  .tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
2811
2845
  opacity: 1;
2812
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2846
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2813
2847
  }
2814
2848
  }
2815
2849
 
@@ -2819,14 +2853,14 @@ it from receiving any pointer events or affecting the cursor. */
2819
2853
  .tlui-style-panel__section__common .tlui-style-panel__subheading,
2820
2854
  .tlui-style-panel__subheading + .tlui-slider__container {
2821
2855
  margin: 0;
2822
- padding: var(--space-2) var(--space-3) 0px var(--space-4);
2856
+ padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
2823
2857
  font-size: 12px;
2824
2858
  font-weight: inherit;
2825
2859
  line-height: inherit;
2826
2860
  }
2827
2861
 
2828
2862
  .tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
2829
- padding-top: var(--space-3);
2863
+ padding-top: var(--tl-space-3);
2830
2864
  }
2831
2865
 
2832
2866
  .tlui-style-panel__subheading + .tlui-slider__container {
@@ -2837,11 +2871,11 @@ it from receiving any pointer events or affecting the cursor. */
2837
2871
 
2838
2872
  .tlui-layout__bottom {
2839
2873
  grid-row: 2;
2874
+ width: 100%;
2840
2875
  }
2841
2876
 
2842
2877
  .tlui-layout__bottom__main {
2843
2878
  width: 100%;
2844
- position: relative;
2845
2879
  display: flex;
2846
2880
  align-items: flex-end;
2847
2881
  justify-content: center;
@@ -2853,11 +2887,10 @@ it from receiving any pointer events or affecting the cursor. */
2853
2887
  display: flex;
2854
2888
  width: min-content;
2855
2889
  flex-direction: column;
2856
- z-index: var(--layer-panels);
2890
+ z-index: var(--tl-layer-panels);
2857
2891
  pointer-events: all;
2858
2892
  position: absolute;
2859
2893
  left: 0px;
2860
- bottom: 0px;
2861
2894
  }
2862
2895
 
2863
2896
  .tlui-navigation-panel::before {
@@ -2867,10 +2900,10 @@ it from receiving any pointer events or affecting the cursor. */
2867
2900
  z-index: -1;
2868
2901
  inset: -2px -2px 0px 0px;
2869
2902
  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);
2903
+ border-top: 2px solid var(--tl-color-background);
2904
+ border-right: 2px solid var(--tl-color-background);
2905
+ border-top-right-radius: var(--tl-radius-4);
2906
+ background-color: var(--tl-color-low);
2874
2907
  }
2875
2908
 
2876
2909
  .tlui-navigation-panel[data-a11y='true']::before {
@@ -2884,7 +2917,7 @@ it from receiving any pointer events or affecting the cursor. */
2884
2917
  height: 96px;
2885
2918
  min-height: 96px;
2886
2919
  overflow: hidden;
2887
- padding: var(--space-3);
2920
+ padding: var(--tl-space-3);
2888
2921
  padding-top: 0px;
2889
2922
  }
2890
2923
 
@@ -2904,7 +2937,23 @@ it from receiving any pointer events or affecting the cursor. */
2904
2937
  align-items: center;
2905
2938
  justify-content: center;
2906
2939
  flex-grow: 2;
2907
- padding-bottom: calc(var(--space-3) + var(--sab));
2940
+ }
2941
+
2942
+ .tlui-main-toolbar--horizontal {
2943
+ padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
2944
+ max-width: 100%;
2945
+ }
2946
+
2947
+ .tlui-main-toolbar--vertical {
2948
+ position: absolute;
2949
+ left: 0;
2950
+ top: 90px; /* height of page menu + 'back to content' button */
2951
+ bottom: 140px; /* height of expanded mini-map */
2952
+ padding-left: calc(var(--tl-space-3) + var(--tl-sab));
2953
+ }
2954
+
2955
+ [data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
2956
+ bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
2908
2957
  }
2909
2958
 
2910
2959
  /* Centered Content */
@@ -2912,73 +2961,145 @@ it from receiving any pointer events or affecting the cursor. */
2912
2961
  position: relative;
2913
2962
  width: fit-content;
2914
2963
  display: flex;
2915
- gap: var(--space-3);
2916
- align-items: flex-end;
2964
+ gap: var(--tl-space-3);
2965
+ align-items: flex-start;
2917
2966
  }
2918
2967
 
2919
- .tlui-main-toolbar__left {
2968
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
2969
+ flex-direction: column;
2970
+ }
2971
+
2972
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
2920
2973
  width: fit-content;
2921
2974
  }
2975
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__left {
2976
+ display: flex;
2977
+ height: fit-content;
2978
+ }
2922
2979
 
2923
2980
  /* Row of controls + lock button */
2924
2981
  .tlui-main-toolbar__extras {
2925
2982
  position: relative;
2926
- z-index: var(--layer-above);
2927
- width: 100%;
2983
+ z-index: var(--tl-layer-above);
2928
2984
  pointer-events: none;
2929
- top: 6px;
2930
- height: 48px;
2985
+ align-self: stretch;
2931
2986
  }
2932
2987
 
2933
2988
  .tlui-main-toolbar__extras:empty {
2934
2989
  display: none;
2935
2990
  }
2936
2991
 
2992
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
2993
+ height: 48px;
2994
+ top: 6px;
2995
+ }
2996
+
2997
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
2998
+ width: 48px;
2999
+ order: 1;
3000
+ }
3001
+
2937
3002
  .tlui-main-toolbar__extras__controls {
2938
- display: flex;
2939
3003
  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);
3004
+ z-index: var(--tl-layer-above);
3005
+ background-color: var(--tl-color-low);
3006
+ border: 2px solid var(--tl-color-background);
3007
+ pointer-events: all;
3008
+ }
3009
+
3010
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
3011
+ border-top-left-radius: var(--tl-radius-4);
3012
+ border-top-right-radius: var(--tl-radius-4);
2946
3013
  margin-left: 8px;
2947
3014
  margin-right: 0px;
2948
- pointer-events: all;
3015
+ width: fit-content;
3016
+ }
3017
+
3018
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
3019
+ border-top-right-radius: var(--tl-radius-4);
3020
+ border-bottom-right-radius: var(--tl-radius-4);
3021
+ margin-top: 8px;
3022
+ margin-left: -2px;
3023
+ margin-bottom: 0px;
2949
3024
  width: fit-content;
2950
3025
  }
2951
3026
 
2952
3027
  .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);
3028
+ border-radius: var(--tl-radius-4);
3029
+ z-index: var(--tl-layer-panels);
2958
3030
  pointer-events: all;
2959
3031
  position: relative;
2960
- background: var(--color-panel);
2961
- box-shadow: var(--shadow-2);
3032
+ background: var(--tl-color-panel);
3033
+ box-shadow: var(--tl-shadow-2);
2962
3034
  }
2963
3035
 
2964
- .tlui-main-toolbar__overflow {
3036
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
3037
+ align-self: flex-end;
3038
+ }
3039
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
3040
+ align-self: flex-start;
3041
+ }
3042
+
3043
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2965
3044
  width: 40px;
2966
3045
  margin-left: 2px;
2967
3046
  }
3047
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
3048
+ height: 40px;
3049
+ margin-top: 2px;
3050
+ }
2968
3051
 
2969
- .tlui-layout__mobile .tlui-main-toolbar__overflow {
3052
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2970
3053
  width: 32px;
2971
3054
  padding: 0px;
2972
3055
  }
2973
3056
 
2974
- .tlui-main-toolbar *[data-state='open']::after {
2975
- background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
3057
+ .tlui-main-toolbar--horizontal *[data-state='open']::after {
3058
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2976
3059
  opacity: 1;
2977
3060
  }
3061
+ .tlui-main-toolbar--vertical *[data-state='open']::after {
3062
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3063
+ opacity: 1;
3064
+ }
3065
+
3066
+ .tlui-main-toolbar__overflow-content {
3067
+ touch-action: none;
3068
+ }
3069
+
3070
+ .tlui-main-toolbar__tools [data-toolbar-visible='false'],
3071
+ .tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
3072
+ display: none;
3073
+ }
3074
+
3075
+ .tlui-main-toolbar__group:empty {
3076
+ display: none;
3077
+ }
3078
+ .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3079
+ border-right: 1px solid var(--color-divider);
3080
+ margin-right: 2px;
3081
+ }
3082
+ .tlui-column.tlui-main-toolbar__group:not(
3083
+ :nth-last-child(-n + 1 of [data-toolbar-visible='true'])
3084
+ ) {
3085
+ border-bottom: 1px solid var(--color-divider);
3086
+ margin-bottom: 2px;
3087
+ }
3088
+ .tlui-grid.tlui-main-toolbar__group {
3089
+ grid-column: 1 / span 4;
3090
+ }
3091
+ .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3092
+ border-bottom: 1px solid var(--color-divider);
3093
+ margin-bottom: 2px;
3094
+ }
2978
3095
 
2979
3096
  @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%);
3097
+ .tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
3098
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3099
+ opacity: 1;
3100
+ }
3101
+ .tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
3102
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2982
3103
  opacity: 1;
2983
3104
  }
2984
3105
  }
@@ -2989,44 +3110,40 @@ it from receiving any pointer events or affecting the cursor. */
2989
3110
  font-size: 12px;
2990
3111
  padding: 2px 8px;
2991
3112
  border-radius: 4px;
2992
- background-color: var(--color-tooltip);
3113
+ background-color: var(--tl-color-tooltip);
2993
3114
  box-shadow: none;
2994
- color: var(--color-text-shadow);
3115
+ color: var(--tl-color-text-shadow);
2995
3116
  max-width: 400px;
2996
3117
  width: fit-content;
2997
3118
  text-align: center;
2998
- pointer-events: none;
2999
3119
  will-change: transform, opacity;
3000
3120
  z-index: 2;
3001
3121
  }
3002
3122
 
3003
3123
  .tlui-tooltip__arrow {
3004
- fill: var(--color-tooltip);
3124
+ fill: var(--tl-color-tooltip);
3005
3125
  will-change: opacity;
3006
3126
  }
3007
3127
 
3008
3128
  [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;
3129
+ z-index: var(--tl-layer-toasts) !important;
3130
+ pointer-events: none;
3014
3131
  }
3015
3132
 
3016
3133
  /* ------------------- Debug panel ------------------ */
3017
3134
 
3018
3135
  .tlui-debug-panel {
3019
- background-color: var(--color-low);
3136
+ background-color: var(--tl-color-low);
3020
3137
  width: 100%;
3021
3138
  display: grid;
3022
3139
  align-items: center;
3023
3140
  grid-template-columns: 1fr auto auto auto;
3024
3141
  justify-content: space-between;
3025
- padding-left: var(--space-4);
3026
- border-top: 1px solid var(--color-background);
3142
+ padding-left: var(--tl-space-4);
3143
+ border-top: 1px solid var(--tl-color-background);
3027
3144
  font-size: 12px;
3028
- color: var(--color-text-1);
3029
- z-index: var(--layer-panels);
3145
+ color: var(--tl-color-text-1);
3146
+ z-index: var(--tl-layer-panels);
3030
3147
  pointer-events: all;
3031
3148
  }
3032
3149
 
@@ -3042,7 +3159,7 @@ it from receiving any pointer events or affecting the cursor. */
3042
3159
 
3043
3160
  .tlui-debug-panel__fps__slow {
3044
3161
  font-weight: bold;
3045
- color: var(--color-danger);
3162
+ color: var(--tl-color-danger);
3046
3163
  }
3047
3164
 
3048
3165
  .tlui-a11y-audit {
@@ -3052,7 +3169,7 @@ it from receiving any pointer events or affecting the cursor. */
3052
3169
  .tlui-a11y-audit th,
3053
3170
  .tlui-a11y-audit td {
3054
3171
  padding: 8px;
3055
- border: 1px solid var(--color-low-border);
3172
+ border: 1px solid var(--tl-color-low-border);
3056
3173
  }
3057
3174
 
3058
3175
  /* --------------------- Toasts --------------------- */
@@ -3065,10 +3182,10 @@ it from receiving any pointer events or affecting the cursor. */
3065
3182
  align-items: flex-end;
3066
3183
  justify-content: flex-end;
3067
3184
  flex-direction: column;
3068
- gap: var(--space-3);
3185
+ gap: var(--tl-space-3);
3069
3186
  pointer-events: none;
3070
- padding: 0px var(--space-3) 64px 0px;
3071
- z-index: var(--layer-toasts);
3187
+ padding: 0px var(--tl-space-3) 64px 0px;
3188
+ z-index: var(--tl-layer-toasts);
3072
3189
  }
3073
3190
 
3074
3191
  .tlui-toast__viewport > * {
@@ -3077,34 +3194,34 @@ it from receiving any pointer events or affecting the cursor. */
3077
3194
 
3078
3195
  .tlui-toast__icon {
3079
3196
  padding-top: 11px;
3080
- padding-left: var(--space-4);
3081
- color: var(--color-text-1);
3197
+ padding-left: var(--tl-space-4);
3198
+ color: var(--tl-color-text-1);
3082
3199
  }
3083
3200
 
3084
3201
  .tlui-toast__container {
3085
3202
  min-width: 200px;
3086
3203
  display: flex;
3087
3204
  flex-direction: row;
3088
- background-color: var(--color-panel);
3089
- box-shadow: var(--shadow-2);
3090
- border-radius: var(--radius-3);
3205
+ background-color: var(--tl-color-panel);
3206
+ box-shadow: var(--tl-shadow-2);
3207
+ border-radius: var(--tl-radius-3);
3091
3208
  font-size: 12px;
3092
3209
  }
3093
3210
 
3094
3211
  .tlui-toast__container[data-severity='success'] .tlui-icon {
3095
- color: var(--color-success);
3212
+ color: var(--tl-color-success);
3096
3213
  }
3097
3214
 
3098
3215
  .tlui-toast__container[data-severity='info'] .tlui-icon {
3099
- color: var(--color-info);
3216
+ color: var(--tl-color-info);
3100
3217
  }
3101
3218
 
3102
3219
  .tlui-toast__container[data-severity='warning'] .tlui-icon {
3103
- color: var(--color-warning);
3220
+ color: var(--tl-color-warning);
3104
3221
  }
3105
3222
 
3106
3223
  .tlui-toast__container[data-severity='error'] .tlui-icon {
3107
- color: var(--color-danger);
3224
+ color: var(--tl-color-danger);
3108
3225
  }
3109
3226
 
3110
3227
  .tlui-toast__main {
@@ -3113,27 +3230,27 @@ it from receiving any pointer events or affecting the cursor. */
3113
3230
  }
3114
3231
 
3115
3232
  .tlui-toast__content {
3116
- padding: var(--space-4);
3233
+ padding: var(--tl-space-4);
3117
3234
  display: flex;
3118
3235
  line-height: 1.4;
3119
3236
  flex-direction: column;
3120
- gap: var(--space-3);
3237
+ gap: var(--tl-space-3);
3121
3238
  }
3122
3239
 
3123
3240
  .tlui-toast__main[data-actions='true'] .tlui-toast__content {
3124
- padding-bottom: var(--space-2);
3241
+ padding-bottom: var(--tl-space-2);
3125
3242
  }
3126
3243
 
3127
3244
  .tlui-toast__title {
3128
3245
  font-weight: bold;
3129
- color: var(--color-text-1);
3246
+ color: var(--tl-color-text-1);
3130
3247
  /* this makes the default toast look better */
3131
3248
  line-height: 16px;
3132
3249
  }
3133
3250
 
3134
3251
  .tlui-toast__description {
3135
- color: var(--color-text-1);
3136
- padding: var(--space-3);
3252
+ color: var(--tl-color-text-1);
3253
+ padding: var(--tl-space-3);
3137
3254
  margin: 0px;
3138
3255
  padding: 0px;
3139
3256
  }
@@ -3185,14 +3302,14 @@ it from receiving any pointer events or affecting the cursor. */
3185
3302
  left: 0px;
3186
3303
  width: 100%;
3187
3304
  height: 100%;
3188
- z-index: var(--layer-canvas-overlays);
3189
- background-color: var(--color-overlay);
3305
+ z-index: var(--tl-layer-canvas-overlays);
3306
+ background-color: var(--tl-color-overlay);
3190
3307
  pointer-events: all;
3191
3308
  animation: tl-fade-in 0.12s ease-out;
3192
3309
  display: grid;
3193
3310
  place-items: center;
3194
3311
  overflow-y: auto;
3195
- padding: 0px var(--space-3);
3312
+ padding: 0px var(--tl-space-3);
3196
3313
  }
3197
3314
 
3198
3315
  .tlui-dialog__content {
@@ -3200,9 +3317,9 @@ it from receiving any pointer events or affecting the cursor. */
3200
3317
  flex-direction: column;
3201
3318
  position: relative;
3202
3319
  cursor: default;
3203
- background-color: var(--color-panel);
3204
- box-shadow: var(--shadow-3);
3205
- border-radius: var(--radius-3);
3320
+ background-color: var(--tl-color-panel);
3321
+ box-shadow: var(--tl-shadow-3);
3322
+ border-radius: var(--tl-radius-3);
3206
3323
  font-size: 12px;
3207
3324
  overflow: hidden;
3208
3325
  min-width: 300px;
@@ -3215,9 +3332,9 @@ it from receiving any pointer events or affecting the cursor. */
3215
3332
  display: flex;
3216
3333
  align-items: center;
3217
3334
  flex: 0;
3218
- z-index: var(--layer-header-footer);
3219
- padding-left: var(--space-4);
3220
- color: var(--color-text);
3335
+ z-index: var(--tl-layer-header-footer);
3336
+ padding-left: var(--tl-space-4);
3337
+ color: var(--tl-color-text);
3221
3338
  height: 40px;
3222
3339
  }
3223
3340
 
@@ -3226,7 +3343,7 @@ it from receiving any pointer events or affecting the cursor. */
3226
3343
  font-weight: inherit;
3227
3344
  font-size: 12px;
3228
3345
  margin: 0px;
3229
- color: var(--color-text-1);
3346
+ color: var(--tl-color-text-1);
3230
3347
  }
3231
3348
 
3232
3349
  .tlui-dialog__header__close {
@@ -3234,16 +3351,16 @@ it from receiving any pointer events or affecting the cursor. */
3234
3351
  }
3235
3352
 
3236
3353
  .tlui-dialog__body {
3237
- padding: var(--space-4) var(--space-4);
3354
+ padding: var(--tl-space-4) var(--tl-space-4);
3238
3355
  flex: 0 1;
3239
3356
  overflow-y: auto;
3240
3357
  overflow-x: hidden;
3241
- color: var(--color-text-1);
3358
+ color: var(--tl-color-text-1);
3242
3359
  user-select: all;
3243
3360
  -webkit-user-select: text;
3244
3361
  }
3245
3362
  .tlui-dialog__body a {
3246
- color: var(--color-selected);
3363
+ color: var(--tl-color-selected);
3247
3364
  }
3248
3365
 
3249
3366
  .tlui-dialog__body ul,
@@ -3251,13 +3368,13 @@ it from receiving any pointer events or affecting the cursor. */
3251
3368
  padding-left: 16px;
3252
3369
  display: flex;
3253
3370
  flex-direction: column;
3254
- gap: var(--space-2);
3371
+ gap: var(--tl-space-2);
3255
3372
  }
3256
3373
 
3257
3374
  .tlui-dialog__footer {
3258
3375
  position: relative;
3259
3376
  min-height: 12px;
3260
- z-index: var(--layer-header-footer);
3377
+ z-index: var(--tl-layer-header-footer);
3261
3378
  }
3262
3379
 
3263
3380
  .tlui-dialog__footer__actions {
@@ -3277,15 +3394,15 @@ it from receiving any pointer events or affecting the cursor. */
3277
3394
  .tlui-edit-link-dialog {
3278
3395
  display: flex;
3279
3396
  flex-direction: column;
3280
- gap: var(--space-4);
3281
- color: var(--color-text);
3397
+ gap: var(--tl-space-4);
3398
+ color: var(--tl-color-text);
3282
3399
  }
3283
3400
 
3284
3401
  .tlui-edit-link-dialog__input {
3285
- background-color: var(--color-muted-2);
3402
+ background-color: var(--tl-color-muted-2);
3286
3403
  flex-grow: 2;
3287
- border-radius: var(--radius-2);
3288
- padding: 0px var(--space-4);
3404
+ border-radius: var(--tl-radius-2);
3405
+ padding: 0px var(--tl-space-4);
3289
3406
  }
3290
3407
 
3291
3408
  /* Embed Dialog */
@@ -3293,15 +3410,15 @@ it from receiving any pointer events or affecting the cursor. */
3293
3410
  .tlui-embed__spacer {
3294
3411
  flex-grow: 2;
3295
3412
  min-height: 0px;
3296
- margin-left: calc(-1 * var(--space-4));
3297
- margin-top: calc(-1 * var(--space-4));
3413
+ margin-left: calc(-1 * var(--tl-space-4));
3414
+ margin-top: calc(-1 * var(--tl-space-4));
3298
3415
  pointer-events: none;
3299
3416
  }
3300
3417
 
3301
3418
  .tlui-embed-dialog__list {
3302
3419
  display: flex;
3303
3420
  flex-direction: column;
3304
- padding: 0px var(--space-3) var(--space-4) var(--space-3);
3421
+ padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
3305
3422
  }
3306
3423
 
3307
3424
  .tlui-embed-dialog__item__image {
@@ -3313,49 +3430,49 @@ it from receiving any pointer events or affecting the cursor. */
3313
3430
  background-size: contain;
3314
3431
  background-repeat: no-repeat;
3315
3432
  background-position: center center;
3316
- background-color: var(--color-selected-contrast);
3317
- border-radius: var(--radius-1);
3433
+ background-color: var(--tl-color-selected-contrast);
3434
+ border-radius: var(--tl-radius-1);
3318
3435
  }
3319
3436
 
3320
3437
  .tlui-embed-dialog__enter {
3321
3438
  display: flex;
3322
3439
  flex-direction: column;
3323
- gap: var(--space-4);
3324
- color: var(--color-text-1);
3440
+ gap: var(--tl-space-4);
3441
+ color: var(--tl-color-text-1);
3325
3442
  }
3326
3443
 
3327
3444
  .tlui-embed-dialog__input {
3328
- background-color: var(--color-muted-2);
3445
+ background-color: var(--tl-color-muted-2);
3329
3446
  flex-grow: 2;
3330
- border-radius: var(--radius-2);
3331
- padding: 0px var(--space-4);
3447
+ border-radius: var(--tl-radius-2);
3448
+ padding: 0px var(--tl-space-4);
3332
3449
  }
3333
3450
 
3334
3451
  .tlui-embed-dialog__warning {
3335
- color: var(--color-danger);
3452
+ color: var(--tl-color-danger);
3336
3453
  text-shadow: none;
3337
3454
  }
3338
3455
 
3339
3456
  .tlui-embed-dialog__instruction__link {
3340
3457
  display: flex;
3341
- gap: var(--space-1);
3342
- margin-top: var(--space-4);
3458
+ gap: var(--tl-space-1);
3459
+ margin-top: var(--tl-space-4);
3343
3460
  }
3344
3461
 
3345
3462
  .tlui-embed-dialog__enter a {
3346
- color: var(--color-text-1);
3463
+ color: var(--tl-color-text-1);
3347
3464
  }
3348
3465
 
3349
3466
  /* --------------- Keyboard shortcuts --------------- */
3350
3467
 
3351
3468
  .tlui-shortcuts-dialog__header {
3352
- border-bottom: 1px solid var(--color-divider);
3469
+ border-bottom: 1px solid var(--tl-color-divider);
3353
3470
  }
3354
3471
 
3355
3472
  .tlui-shortcuts-dialog__body {
3356
3473
  position: relative;
3357
3474
  columns: 3;
3358
- column-gap: var(--space-9);
3475
+ column-gap: var(--tl-space-9);
3359
3476
  pointer-events: all;
3360
3477
  touch-action: auto;
3361
3478
 
@@ -3373,14 +3490,14 @@ it from receiving any pointer events or affecting the cursor. */
3373
3490
 
3374
3491
  .tlui-shortcuts-dialog__group {
3375
3492
  break-inside: avoid-column;
3376
- padding-bottom: var(--space-6);
3493
+ padding-bottom: var(--tl-space-6);
3377
3494
  }
3378
3495
 
3379
3496
  .tlui-shortcuts-dialog__group__title {
3380
3497
  font-size: inherit;
3381
3498
  font-weight: inherit;
3382
3499
  margin: 0px;
3383
- color: var(--color-text-3);
3500
+ color: var(--tl-color-text-3);
3384
3501
  height: 32px;
3385
3502
  display: flex;
3386
3503
  align-items: center;
@@ -3389,12 +3506,12 @@ it from receiving any pointer events or affecting the cursor. */
3389
3506
  .tlui-shortcuts-dialog__group__content {
3390
3507
  display: flex;
3391
3508
  flex-direction: column;
3392
- color: var(--color-text-1);
3509
+ color: var(--tl-color-text-1);
3393
3510
  }
3394
3511
 
3395
3512
  .tlui-shortcuts-dialog__key-pair {
3396
3513
  display: flex;
3397
- gap: var(--space-4);
3514
+ gap: var(--tl-space-4);
3398
3515
  align-items: center;
3399
3516
  justify-content: space-between;
3400
3517
  height: 32px;
@@ -3421,12 +3538,12 @@ it from receiving any pointer events or affecting the cursor. */
3421
3538
  height: 24px;
3422
3539
  background: linear-gradient(
3423
3540
  to bottom,
3424
- var(--color-panel-transparent) 0%,
3425
- var(--color-panel) 90%,
3426
- var(--color-panel) 100%
3541
+ var(--tl-color-panel-transparent) 0%,
3542
+ var(--tl-color-panel) 90%,
3543
+ var(--tl-color-panel) 100%
3427
3544
  );
3428
- border-bottom-left-radius: var(--radius-3);
3429
- border-bottom-right-radius: var(--radius-3);
3545
+ border-bottom-left-radius: var(--tl-radius-3);
3546
+ border-bottom-right-radius: var(--tl-radius-3);
3430
3547
  pointer-events: none;
3431
3548
  }
3432
3549
 
@@ -3441,10 +3558,10 @@ it from receiving any pointer events or affecting the cursor. */
3441
3558
  .tlui-help-menu {
3442
3559
  pointer-events: all;
3443
3560
  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);
3561
+ bottom: var(--tl-space-2);
3562
+ right: var(--tl-space-2);
3563
+ z-index: var(--tl-layer-panels);
3564
+ border: 2px solid var(--tl-color-background);
3448
3565
  border-radius: 100%;
3449
3566
  }
3450
3567
 
@@ -3455,7 +3572,7 @@ it from receiving any pointer events or affecting the cursor. */
3455
3572
  display: flex;
3456
3573
  flex-direction: row;
3457
3574
  justify-content: flex-end;
3458
- z-index: var(--layer-panels);
3575
+ z-index: var(--tl-layer-panels);
3459
3576
  align-items: center;
3460
3577
  padding-top: 2px;
3461
3578
  padding-right: 4px;
@@ -3471,7 +3588,7 @@ it from receiving any pointer events or affecting the cursor. */
3471
3588
  border: none;
3472
3589
  cursor: pointer;
3473
3590
  pointer-events: all;
3474
- border-radius: var(--radius-1);
3591
+ border-radius: var(--tl-radius-1);
3475
3592
  padding-right: 1px;
3476
3593
  height: 100%;
3477
3594
  }
@@ -3484,8 +3601,8 @@ it from receiving any pointer events or affecting the cursor. */
3484
3601
  .tlui-people-menu__avatar {
3485
3602
  height: 24px;
3486
3603
  width: 24px;
3487
- border: 2px solid var(--color-background);
3488
- background-color: var(--color-low);
3604
+ border: 2px solid var(--tl-color-background);
3605
+ background-color: var(--tl-color-low);
3489
3606
  border-radius: 100%;
3490
3607
  display: flex;
3491
3608
  align-items: center;
@@ -3494,7 +3611,7 @@ it from receiving any pointer events or affecting the cursor. */
3494
3611
  font-size: 10px;
3495
3612
  font-weight: bold;
3496
3613
  text-align: center;
3497
- color: var(--color-selected-contrast);
3614
+ color: var(--tl-color-selected-contrast);
3498
3615
  z-index: 2;
3499
3616
  }
3500
3617
 
@@ -3508,7 +3625,7 @@ it from receiving any pointer events or affecting the cursor. */
3508
3625
 
3509
3626
  @media (hover: hover) {
3510
3627
  .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
3511
- border-color: var(--color-low);
3628
+ border-color: var(--tl-color-low);
3512
3629
  }
3513
3630
  }
3514
3631
 
@@ -3516,12 +3633,12 @@ it from receiving any pointer events or affecting the cursor. */
3516
3633
  min-width: 0px;
3517
3634
  font-size: 11px;
3518
3635
  font-weight: 600;
3519
- color: var(--color-text-1);
3636
+ color: var(--tl-color-text-1);
3520
3637
  font-family: inherit;
3521
3638
  padding: 0px 4px;
3522
3639
  }
3523
3640
  .tlui-people-menu__more::after {
3524
- border-radius: var(--radius-2);
3641
+ border-radius: var(--tl-radius-2);
3525
3642
  inset: 0px;
3526
3643
  }
3527
3644
 
@@ -3550,7 +3667,7 @@ it from receiving any pointer events or affecting the cursor. */
3550
3667
  }
3551
3668
 
3552
3669
  .tlui-people-menu__section:not(:last-child) {
3553
- border-bottom: 1px solid var(--color-divider);
3670
+ border-bottom: 1px solid var(--tl-color-divider);
3554
3671
  }
3555
3672
 
3556
3673
  .tlui-people-menu__user {
@@ -3569,7 +3686,7 @@ it from receiving any pointer events or affecting the cursor. */
3569
3686
  text-overflow: ellipsis;
3570
3687
  white-space: nowrap;
3571
3688
  font-size: 12px;
3572
- color: var(--color-text-1);
3689
+ color: var(--tl-color-text-1);
3573
3690
  max-width: 100%;
3574
3691
  flex-grow: 1;
3575
3692
  flex-shrink: 100;
@@ -3581,7 +3698,7 @@ it from receiving any pointer events or affecting the cursor. */
3581
3698
  text-overflow: ellipsis;
3582
3699
  white-space: nowrap;
3583
3700
  font-size: 12px;
3584
- color: var(--color-text-3);
3701
+ color: var(--tl-color-text-3);
3585
3702
  flex-grow: 100;
3586
3703
  flex-shrink: 0;
3587
3704
  margin-left: 4px;
@@ -3672,7 +3789,7 @@ it from receiving any pointer events or affecting the cursor. */
3672
3789
  inset: 0px;
3673
3790
  border-width: 2px;
3674
3791
  border-style: solid;
3675
- z-index: var(--layer-following-indicator);
3792
+ z-index: var(--tl-layer-following-indicator);
3676
3793
  pointer-events: none;
3677
3794
  }
3678
3795
 
@@ -3691,7 +3808,7 @@ it from receiving any pointer events or affecting the cursor. */
3691
3808
  }
3692
3809
 
3693
3810
  .tlui-contextual-toolbar [data-isactive='true']::after {
3694
- background-color: var(--color-muted-2);
3811
+ background-color: var(--tl-color-muted-2);
3695
3812
  opacity: 1;
3696
3813
  }
3697
3814
 
@@ -3707,7 +3824,7 @@ it from receiving any pointer events or affecting the cursor. */
3707
3824
 
3708
3825
  .tlui-contextual-toolbar[data-visible='true'] {
3709
3826
  opacity: 1;
3710
- z-index: var(--layer-menus);
3827
+ z-index: var(--tl-layer-menus);
3711
3828
  }
3712
3829
 
3713
3830
  .tlui-contextual-toolbar[data-interactive='true'],
@@ -3766,7 +3883,7 @@ it from receiving any pointer events or affecting the cursor. */
3766
3883
 
3767
3884
  @keyframes tlui-slide-in {
3768
3885
  from {
3769
- transform: translateX(calc(100% + var(--space-3)));
3886
+ transform: translateX(calc(100% + var(--tl-space-3)));
3770
3887
  }
3771
3888
  to {
3772
3889
  transform: translateX(0px);
@@ -3778,7 +3895,7 @@ it from receiving any pointer events or affecting the cursor. */
3778
3895
  transform: translateX(var(--radix-toast-swipe-end-x));
3779
3896
  }
3780
3897
  to {
3781
- transform: translateX(calc(100% + var(--space-3)));
3898
+ transform: translateX(calc(100% + var(--tl-space-3)));
3782
3899
  }
3783
3900
  }
3784
3901