tldraw 3.16.0-canary.fa3749606e52 → 3.16.0-next.282b7be564ae

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 (275) hide show
  1. package/dist-cjs/index.d.ts +100 -5
  2. package/dist-cjs/index.js +13 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
  5. package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
  6. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +3 -3
  7. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +1 -1
  9. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
  11. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
  12. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -3
  13. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
  14. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
  15. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
  16. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +12 -12
  17. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  18. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
  19. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
  20. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
  21. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  22. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
  23. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
  24. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
  25. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
  26. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -3
  27. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +1 -1
  28. package/dist-cjs/lib/shapes/line/LineShapeUtil.js +5 -1
  29. package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
  30. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
  31. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  32. package/dist-cjs/lib/shapes/shared/ShapeFill.js +4 -4
  33. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  34. package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js +10 -1
  35. package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js.map +2 -2
  36. package/dist-cjs/lib/shapes/text/TextShapeUtil.js +2 -2
  37. package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
  38. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
  39. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
  40. package/dist-cjs/lib/ui/TldrawUi.js +14 -0
  41. package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
  42. package/dist-cjs/lib/ui/components/AccessibilityMenu.js +35 -0
  43. package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +7 -0
  44. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +12 -3
  45. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  46. package/dist-cjs/lib/ui/components/DefaultMenuPanel.js +3 -2
  47. package/dist-cjs/lib/ui/components/DefaultMenuPanel.js.map +2 -2
  48. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +3 -3
  49. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
  50. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
  51. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  52. package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
  53. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  54. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +1 -1
  55. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
  56. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +2 -1
  57. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  58. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js +3 -2
  59. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map +2 -2
  60. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -2
  61. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +2 -2
  62. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +2 -0
  63. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  64. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +171 -140
  65. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  66. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js +3 -3
  67. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +2 -2
  68. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +26 -25
  69. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +3 -3
  70. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
  71. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  72. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -21
  73. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
  74. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +189 -80
  75. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
  76. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +5 -4
  77. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  78. package/dist-cjs/lib/ui/components/menu-items.js +6 -0
  79. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  80. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +5 -16
  81. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +3 -3
  82. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +1 -1
  83. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +3 -2
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +3 -3
  86. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +30 -7
  87. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  88. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +268 -0
  89. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +7 -0
  90. package/dist-cjs/lib/ui/components/primitives/layout.js +76 -0
  91. package/dist-cjs/lib/ui/components/primitives/layout.js.map +7 -0
  92. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
  93. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
  94. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  95. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +11 -26
  96. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  97. package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js +3 -2
  98. package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
  99. package/dist-cjs/lib/ui/context/actions.js +15 -0
  100. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  101. package/dist-cjs/lib/ui/context/events.js.map +2 -2
  102. package/dist-cjs/lib/ui/hooks/useTools.js +21 -3
  103. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  104. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  105. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +3 -0
  106. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  107. package/dist-cjs/lib/ui/version.js +3 -3
  108. package/dist-cjs/lib/ui/version.js.map +1 -1
  109. package/dist-esm/index.d.mts +100 -5
  110. package/dist-esm/index.mjs +23 -1
  111. package/dist-esm/index.mjs.map +2 -2
  112. package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
  113. package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
  114. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +4 -3
  115. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  116. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +1 -1
  117. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
  118. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
  119. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
  120. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +4 -3
  121. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
  122. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
  123. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
  124. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +13 -12
  125. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  126. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
  127. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
  128. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +3 -2
  129. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  130. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs +2 -1
  131. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs.map +2 -2
  132. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +6 -1
  133. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
  134. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -3
  135. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +1 -1
  136. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +6 -1
  137. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
  138. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +5 -4
  139. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  140. package/dist-esm/lib/shapes/shared/ShapeFill.mjs +5 -4
  141. package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
  142. package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs +10 -1
  143. package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs.map +2 -2
  144. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
  145. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
  146. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
  147. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
  148. package/dist-esm/lib/ui/TldrawUi.mjs +16 -2
  149. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  150. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +19 -0
  151. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +7 -0
  152. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +12 -3
  153. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  154. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs +3 -2
  155. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map +2 -2
  156. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +3 -5
  157. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
  158. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
  159. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  160. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
  161. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  162. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +1 -1
  163. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
  164. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +2 -1
  165. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  166. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs +3 -2
  167. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map +2 -2
  168. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -2
  169. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +2 -2
  170. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +3 -1
  171. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  172. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +171 -140
  173. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  174. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs +3 -3
  175. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +2 -2
  176. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +26 -25
  177. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  178. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
  179. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  180. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -21
  181. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  182. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -81
  183. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
  184. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +5 -4
  185. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  186. package/dist-esm/lib/ui/components/menu-items.mjs +6 -0
  187. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  188. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +6 -6
  189. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
  190. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +1 -1
  191. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +3 -2
  193. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +30 -7
  195. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +245 -0
  197. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +7 -0
  198. package/dist-esm/lib/ui/components/primitives/layout.mjs +46 -0
  199. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +7 -0
  200. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
  201. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
  202. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  203. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +11 -26
  204. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  205. package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs +3 -2
  206. package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
  207. package/dist-esm/lib/ui/context/actions.mjs +15 -0
  208. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  209. package/dist-esm/lib/ui/context/events.mjs.map +2 -2
  210. package/dist-esm/lib/ui/hooks/useTools.mjs +22 -3
  211. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  212. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +3 -0
  213. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  214. package/dist-esm/lib/ui/version.mjs +3 -3
  215. package/dist-esm/lib/ui/version.mjs.map +1 -1
  216. package/package.json +3 -3
  217. package/src/index.ts +18 -0
  218. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  219. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
  220. package/src/lib/shapes/arrow/arrowTargetState.ts +2 -1
  221. package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
  222. package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
  223. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  224. package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -14
  225. package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
  226. package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
  227. package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
  228. package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
  229. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
  230. package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
  231. package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
  232. package/src/lib/shapes/shared/ShapeFill.tsx +5 -4
  233. package/src/lib/shapes/shared/usePrefersReducedMotion.tsx +11 -1
  234. package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
  235. package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
  236. package/src/lib/ui/TldrawUi.tsx +17 -2
  237. package/src/lib/ui/components/AccessibilityMenu.tsx +20 -0
  238. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
  239. package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
  240. package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +4 -4
  241. package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
  242. package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
  243. package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +1 -1
  244. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +3 -2
  245. package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx +4 -3
  246. package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +3 -3
  247. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +3 -1
  248. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +146 -107
  249. package/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +3 -3
  250. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +7 -6
  251. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
  252. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -23
  253. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +212 -61
  254. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +14 -11
  255. package/src/lib/ui/components/menu-items.tsx +8 -0
  256. package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +40 -37
  257. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +1 -1
  258. package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +4 -2
  259. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +51 -12
  260. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +327 -0
  261. package/src/lib/ui/components/primitives/layout.tsx +107 -0
  262. package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
  263. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
  264. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +15 -25
  265. package/src/lib/ui/context/TldrawUiContextProvider.tsx +23 -20
  266. package/src/lib/ui/context/actions.tsx +15 -0
  267. package/src/lib/ui/context/events.tsx +1 -0
  268. package/src/lib/ui/hooks/useTools.tsx +25 -3
  269. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +3 -0
  270. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +3 -0
  271. package/src/lib/ui/version.ts +3 -3
  272. package/src/lib/ui.css +406 -292
  273. package/src/test/arrows-megabus.test.tsx +12 -6
  274. package/src/test/inner-outer-margin.test.ts +315 -0
  275. package/tldraw.css +699 -580
package/tldraw.css CHANGED
@@ -9,57 +9,57 @@
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-blocker: 10000;
37
37
 
38
38
  /* 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;
39
+ --tl-layer-overlays-collaborator-scribble: 10;
40
+ --tl-layer-overlays-collaborator-brush: 20;
41
+ --tl-layer-overlays-collaborator-shape-indicator: 30;
42
+ --tl-layer-overlays-user-scribble: 40;
43
+ --tl-layer-overlays-user-brush: 50;
44
+ --tl-layer-overlays-user-snapline: 90;
45
+ --tl-layer-overlays-selection-fg: 100;
46
46
  /* 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;
47
+ --tl-layer-overlays-user-handles: 105;
48
+ --tl-layer-overlays-user-indicator-hint: 110;
49
+ --tl-layer-overlays-custom: 115;
50
+ --tl-layer-overlays-collaborator-cursor-hint: 120;
51
+ --tl-layer-overlays-collaborator-cursor: 130;
52
52
 
53
53
  /* Text editor z-index */
54
- --layer-text-container: 1;
55
- --layer-text-content: 3;
56
- --layer-text-editor: 4;
54
+ --tl-layer-text-container: 1;
55
+ --tl-layer-text-content: 3;
56
+ --tl-layer-text-editor: 4;
57
57
 
58
58
  /* 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;
59
+ --tl-layer-error-overlay: 1;
60
+ --tl-layer-error-canvas: 2;
61
+ --tl-layer-error-canvas-after: 3;
62
+ --tl-layer-error-content: 4;
63
63
 
64
64
  /* Misc */
65
65
  --tl-zoom: 1;
@@ -124,12 +124,15 @@
124
124
  --tl-font-serif: 'tldraw_serif', serif;
125
125
  --tl-font-mono: 'tldraw_mono', monospace;
126
126
  /* text outline */
127
- --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
128
- --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
127
+ --tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
128
+ --tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
129
129
  --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);
130
+ 0 var(--tl-text-outline-b) 0 var(--tl-color-background),
131
+ 0 var(--tl-text-outline-a) 0 var(--tl-color-background),
132
+ var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
133
+ var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
134
+ var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
135
+ var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
133
136
  --tl-text-outline: var(--tl-text-outline-reference);
134
137
  /* own properties */
135
138
  position: relative;
@@ -137,116 +140,118 @@
137
140
  height: 100%;
138
141
  width: 100%;
139
142
  overflow: clip;
140
- color: var(--color-text);
143
+ color: var(--tl-color-text);
141
144
  }
142
145
 
143
146
  .tl-theme__light {
144
147
  /* 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%);
148
+ --tl-color-snap: hsl(0, 76%, 60%);
149
+ --tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
150
+ --tl-color-selection-stroke: hsl(214, 84%, 56%);
151
+ --tl-color-background: hsl(210, 20%, 98%);
152
+ --tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
153
+ --tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
154
+ --tl-color-grid: hsl(0, 0%, 43%);
152
155
  /* 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%);
156
+ --tl-color-low: hsl(204, 16%, 94%);
157
+ --tl-color-low-border: hsl(204, 16%, 92%);
158
+ --tl-color-culled: hsl(204, 14%, 93%);
159
+ --tl-color-muted-none: hsl(0, 0%, 0%, 0%);
160
+ --tl-color-muted-0: hsl(0, 0%, 0%, 2%);
161
+ --tl-color-muted-1: hsl(0, 0%, 0%, 10%);
162
+ --tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
163
+ --tl-color-hint: hsl(0, 0%, 0%, 5.5%);
164
+ --tl-color-overlay: hsl(0, 0%, 0%, 20%);
165
+ --tl-color-divider: hsl(0, 0%, 91%);
166
+ --tl-color-panel: hsl(0, 0%, 99%);
167
+ --tl-color-panel-contrast: hsl(0, 0%, 100%);
168
+ --tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
169
+ --tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
170
+ --tl-color-selected: hsl(214, 84%, 56%);
171
+ --tl-color-selected-contrast: hsl(0, 0%, 100%);
172
+ --tl-color-focus: hsl(219, 65%, 50%);
173
+ --tl-color-tooltip: hsla(200, 14%, 4%, 1);
170
174
  /* Text */
171
- --color-text: hsl(0, 0%, 0%);
172
- --color-text-0: hsl(0, 0%, 11%);
173
- --color-text-1: hsl(0, 0%, 18%);
174
- --color-text-3: hsl(204, 4%, 45%);
175
- --color-text-shadow: hsl(0, 0%, 100%);
176
- --color-text-highlight: hsl(52, 100%, 50%);
177
- --color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
175
+ --tl-color-text: hsl(0, 0%, 0%);
176
+ --tl-color-text-0: hsl(0, 0%, 11%);
177
+ --tl-color-text-1: hsl(0, 0%, 18%);
178
+ --tl-color-text-3: hsl(204, 4%, 45%);
179
+ --tl-color-text-shadow: hsl(0, 0%, 100%);
180
+ --tl-color-text-highlight: hsl(52, 100%, 50%);
181
+ --tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
178
182
  /* Named */
179
- --color-primary: hsl(214, 84%, 56%);
180
- --color-success: hsl(123, 46%, 34%);
181
- --color-info: hsl(201, 98%, 41%);
182
- --color-warning: hsl(27, 98%, 47%);
183
- --color-danger: hsl(0, 90%, 43%);
184
- --color-laser: hsl(0, 100%, 50%);
183
+ --tl-color-primary: hsl(214, 84%, 56%);
184
+ --tl-color-success: hsl(123, 46%, 34%);
185
+ --tl-color-info: hsl(201, 98%, 41%);
186
+ --tl-color-warning: hsl(27, 98%, 47%);
187
+ --tl-color-danger: hsl(0, 90%, 43%);
188
+ --tl-color-laser: hsl(0, 100%, 50%);
185
189
  /* Shadows */
186
- --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
187
- --shadow-2:
190
+ --tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
191
+ --tl-shadow-2:
188
192
  0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
189
- 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
190
- --shadow-3:
193
+ 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
194
+ --tl-shadow-3:
191
195
  0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
192
- inset 0px 0px 0px 1px var(--color-panel-contrast);
193
- --shadow-4:
196
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
197
+ --tl-shadow-4:
194
198
  0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
195
- 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
199
+ 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
196
200
  }
197
201
 
198
202
  .tl-theme__dark {
199
203
  /* Canvas */
200
- --color-snap: hsl(0, 76%, 60%);
201
- --color-selection-fill: hsl(209, 100%, 57%, 20%);
202
- --color-selection-stroke: hsl(214, 84%, 56%);
203
- --color-background: hsl(240, 5%, 6.5%);
204
- --color-brush-fill: hsl(0, 0%, 71%, 5.1%);
205
- --color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
206
- --color-grid: hsl(0, 0%, 40%);
204
+ --tl-color-snap: hsl(0, 76%, 60%);
205
+ --tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
206
+ --tl-color-selection-stroke: hsl(214, 84%, 56%);
207
+ --tl-color-background: hsl(240, 5%, 6.5%);
208
+ --tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
209
+ --tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
210
+ --tl-color-grid: hsl(0, 0%, 40%);
207
211
  /* UI */
208
- --color-low: hsl(260, 4.5%, 10.5%);
209
- --color-low-border: hsl(207, 10%, 10%);
210
- --color-culled: hsl(210, 11%, 19%);
211
- --color-muted-none: hsl(0, 0%, 100%, 0%);
212
- --color-muted-0: hsl(0, 0%, 100%, 2%);
213
- --color-muted-1: hsl(0, 0%, 100%, 10%);
214
- --color-muted-2: hsl(0, 0%, 100%, 5%);
215
- --color-hint: hsl(0, 0%, 100%, 7%);
216
- --color-overlay: hsl(0, 0%, 0%, 50%);
217
- --color-divider: hsl(240, 9%, 22%);
218
- --color-panel: hsl(235, 6.8%, 13.5%);
219
- --color-panel-contrast: hsl(245, 12%, 23%);
220
- --color-panel-overlay: hsl(210, 10%, 24%, 82%);
221
- --color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
222
- --color-selected: hsl(217, 89%, 61%);
223
- --color-selected-contrast: hsl(0, 0%, 100%);
224
- --color-focus: hsl(217, 76%, 80%);
212
+ --tl-color-low: hsl(260, 4.5%, 10.5%);
213
+ --tl-color-low-border: hsl(207, 10%, 10%);
214
+ --tl-color-culled: hsl(210, 11%, 19%);
215
+ --tl-color-muted-none: hsl(0, 0%, 100%, 0%);
216
+ --tl-color-muted-0: hsl(0, 0%, 100%, 2%);
217
+ --tl-color-muted-1: hsl(0, 0%, 100%, 10%);
218
+ --tl-color-muted-2: hsl(0, 0%, 100%, 5%);
219
+ --tl-color-hint: hsl(0, 0%, 100%, 7%);
220
+ --tl-color-overlay: hsl(0, 0%, 0%, 50%);
221
+ --tl-color-divider: hsl(240, 9%, 22%);
222
+ --tl-color-panel: hsl(235, 6.8%, 13.5%);
223
+ --tl-color-panel-contrast: hsl(245, 12%, 23%);
224
+ --tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
225
+ --tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
226
+ --tl-color-selected: hsl(217, 89%, 61%);
227
+ --tl-color-selected-contrast: hsl(0, 0%, 100%);
228
+ --tl-color-focus: hsl(217, 76%, 80%);
229
+ --tl-color-tooltip: hsla(0, 0%, 100%, 1);
225
230
  /* Text */
226
- --color-text: hsl(210, 17%, 98%);
227
- --color-text-0: hsl(0, 9%, 94%);
228
- --color-text-1: hsl(0, 0%, 85%);
229
- --color-text-3: hsl(204, 4%, 75%);
230
- --color-text-shadow: hsl(210, 13%, 18%);
231
- --color-text-highlight: hsl(52, 100%, 41%);
232
- --color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
231
+ --tl-color-text: hsl(210, 17%, 98%);
232
+ --tl-color-text-0: hsl(0, 9%, 94%);
233
+ --tl-color-text-1: hsl(0, 0%, 85%);
234
+ --tl-color-text-3: hsl(204, 4%, 75%);
235
+ --tl-color-text-shadow: hsl(210, 13%, 18%);
236
+ --tl-color-text-highlight: hsl(52, 100%, 41%);
237
+ --tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
233
238
  /* Named */
234
- --color-primary: hsl(214, 84%, 56%);
235
- --color-success: hsl(123, 38%, 57%);
236
- --color-info: hsl(199, 92%, 56%);
237
- --color-warning: hsl(36, 100%, 57%);
238
- --color-danger: hsl(0, 82%, 66%);
239
- --color-laser: hsl(0, 100%, 50%);
239
+ --tl-color-primary: hsl(214, 84%, 56%);
240
+ --tl-color-success: hsl(123, 38%, 57%);
241
+ --tl-color-info: hsl(199, 92%, 56%);
242
+ --tl-color-warning: hsl(36, 100%, 57%);
243
+ --tl-color-danger: hsl(0, 82%, 66%);
244
+ --tl-color-laser: hsl(0, 100%, 50%);
240
245
  /* Shadows */
241
- --shadow-1:
246
+ --tl-shadow-1:
242
247
  0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
243
- inset 0px 0px 0px 1px var(--color-panel-contrast);
244
- --shadow-2:
248
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
249
+ --tl-shadow-2:
245
250
  0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
246
- inset 0px 0px 0px 1px var(--color-panel-contrast);
247
- --shadow-3:
251
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
252
+ --tl-shadow-3:
248
253
  0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
249
- inset 0px 0px 0px 1px var(--color-panel-contrast);
254
+ inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
250
255
  }
251
256
 
252
257
  .tl-counter-scaled {
@@ -272,7 +277,7 @@
272
277
  }
273
278
 
274
279
  .tl-container__focused {
275
- outline: 1px solid var(--color-low);
280
+ outline: 1px solid var(--tl-color-low);
276
281
  }
277
282
 
278
283
  input,
@@ -288,7 +293,7 @@ input,
288
293
  inset: 0px;
289
294
  height: 100%;
290
295
  width: 100%;
291
- color: var(--color-text);
296
+ color: var(--tl-color-text);
292
297
  cursor: var(--tl-cursor);
293
298
  overflow: clip;
294
299
  content-visibility: auto;
@@ -298,7 +303,7 @@ input,
298
303
 
299
304
  .tl-shapes {
300
305
  position: relative;
301
- z-index: var(--layer-canvas-shapes);
306
+ z-index: var(--tl-layer-canvas-shapes);
302
307
  }
303
308
 
304
309
  .tl-overlays {
@@ -309,7 +314,7 @@ input,
309
314
  width: 100%;
310
315
  contain: strict;
311
316
  pointer-events: none;
312
- z-index: var(--layer-canvas-overlays);
317
+ z-index: var(--tl-layer-canvas-overlays);
313
318
  }
314
319
 
315
320
  .tl-overlays__item {
@@ -333,7 +338,7 @@ input,
333
338
  /* ------------------- Background ------------------- */
334
339
 
335
340
  .tl-background__wrapper {
336
- z-index: var(--layer-canvas-background);
341
+ z-index: var(--tl-layer-canvas-background);
337
342
  position: absolute;
338
343
  inset: 0px;
339
344
  height: 100%;
@@ -341,7 +346,7 @@ input,
341
346
  }
342
347
 
343
348
  .tl-background {
344
- background-color: var(--color-background);
349
+ background-color: var(--tl-color-background);
345
350
  width: 100%;
346
351
  height: 100%;
347
352
  }
@@ -355,12 +360,12 @@ input,
355
360
  height: 100%;
356
361
  touch-action: none;
357
362
  pointer-events: none;
358
- z-index: var(--layer-canvas-grid);
363
+ z-index: var(--tl-layer-canvas-grid);
359
364
  contain: strict;
360
365
  }
361
366
 
362
367
  .tl-grid-dot {
363
- fill: var(--color-grid);
368
+ fill: var(--tl-color-grid);
364
369
  }
365
370
 
366
371
  /* --------------------- Layers --------------------- */
@@ -378,54 +383,54 @@ input,
378
383
 
379
384
  /* back of the stack, behind user's stuff */
380
385
  .tl-collaborator__scribble {
381
- z-index: var(--layer-overlays-collaborator-scribble);
386
+ z-index: var(--tl-layer-overlays-collaborator-scribble);
382
387
  }
383
388
 
384
389
  .tl-collaborator__brush {
385
- z-index: var(--layer-overlays-collaborator-brush);
390
+ z-index: var(--tl-layer-overlays-collaborator-brush);
386
391
  }
387
392
 
388
393
  .tl-collaborator__shape-indicator {
389
- z-index: var(--layer-overlays-collaborator-shape-indicator);
394
+ z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
390
395
  }
391
396
 
392
397
  .tl-user-scribble {
393
- z-index: var(--layer-overlays-user-scribble);
398
+ z-index: var(--tl-layer-overlays-user-scribble);
394
399
  }
395
400
 
396
401
  .tl-user-brush {
397
- z-index: var(--layer-overlays-user-brush);
402
+ z-index: var(--tl-layer-overlays-user-brush);
398
403
  }
399
404
 
400
405
  .tl-user-handles {
401
- z-index: var(--layer-overlays-user-handles);
406
+ z-index: var(--tl-layer-overlays-user-handles);
402
407
  }
403
408
 
404
409
  .tl-user-snapline {
405
- z-index: var(--layer-overlays-user-snapline);
410
+ z-index: var(--tl-layer-overlays-user-snapline);
406
411
  }
407
412
 
408
413
  .tl-selection__fg {
409
414
  pointer-events: none;
410
- z-index: var(--layer-overlays-selection-fg);
415
+ z-index: var(--tl-layer-overlays-selection-fg);
411
416
  }
412
417
 
413
418
  .tl-user-indicator__hint {
414
- z-index: var(--layer-overlays-user-indicator-hint);
419
+ z-index: var(--tl-layer-overlays-user-indicator-hint);
415
420
  stroke-width: calc(2.5px * var(--tl-scale));
416
421
  }
417
422
 
418
423
  .tl-custom-overlays {
419
- z-index: var(--layer-overlays-custom);
424
+ z-index: var(--tl-layer-overlays-custom);
420
425
  }
421
426
 
422
427
  /* behind collaborator cursor */
423
428
  .tl-collaborator__cursor-hint {
424
- z-index: var(--layer-overlays-collaborator-cursor-hint);
429
+ z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
425
430
  }
426
431
 
427
432
  .tl-collaborator__cursor {
428
- z-index: var(--layer-overlays-collaborator-cursor);
433
+ z-index: var(--tl-layer-overlays-collaborator-cursor);
429
434
  }
430
435
 
431
436
  .tl-cursor {
@@ -446,32 +451,32 @@ input,
446
451
  .tl-selection__fg__outline {
447
452
  fill: none;
448
453
  pointer-events: none;
449
- stroke: var(--color-selection-stroke);
454
+ stroke: var(--tl-color-selection-stroke);
450
455
  stroke-width: calc(1.5px * var(--tl-scale));
451
456
  }
452
457
 
453
458
  .tl-corner-handle {
454
459
  pointer-events: none;
455
- stroke: var(--color-selection-stroke);
456
- fill: var(--color-background);
460
+ stroke: var(--tl-color-selection-stroke);
461
+ fill: var(--tl-color-background);
457
462
  stroke-width: calc(1.5px * var(--tl-scale));
458
463
  }
459
464
 
460
465
  .tl-text-handle {
461
466
  pointer-events: none;
462
- fill: var(--color-selection-stroke);
467
+ fill: var(--tl-color-selection-stroke);
463
468
  }
464
469
 
465
470
  .tl-corner-crop-handle {
466
471
  pointer-events: none;
467
472
  fill: none;
468
- stroke: var(--color-selection-stroke);
473
+ stroke: var(--tl-color-selection-stroke);
469
474
  }
470
475
 
471
476
  .tl-corner-crop-edge-handle {
472
477
  pointer-events: none;
473
478
  fill: none;
474
- stroke: var(--color-selection-stroke);
479
+ stroke: var(--tl-color-selection-stroke);
475
480
  }
476
481
 
477
482
  .tl-mobile-rotate__bg {
@@ -481,8 +486,8 @@ input,
481
486
 
482
487
  .tl-mobile-rotate__fg {
483
488
  pointer-events: none;
484
- stroke: var(--color-selection-stroke);
485
- fill: var(--color-background);
489
+ stroke: var(--tl-color-selection-stroke);
490
+ fill: var(--tl-color-background);
486
491
  stroke-width: calc(1.5px * var(--tl-scale));
487
492
  }
488
493
 
@@ -512,8 +517,8 @@ input,
512
517
  text-overflow: ellipsis;
513
518
  font-size: 12px;
514
519
  font-family: var(--font-body);
515
- border-radius: var(--radius-2);
516
- color: var(--color-selected-contrast);
520
+ border-radius: var(--tl-radius-2);
521
+ color: var(--tl-color-selected-contrast);
517
522
  }
518
523
 
519
524
  .tl-nametag-title {
@@ -531,7 +536,7 @@ input,
531
536
  font-size: 12px;
532
537
  font-family: var(--font-body);
533
538
  text-shadow: var(--tl-text-outline);
534
- color: var(--color-selected-contrast);
539
+ color: var(--tl-color-selected-contrast);
535
540
  }
536
541
 
537
542
  .tl-nametag-chat {
@@ -540,31 +545,31 @@ input,
540
545
  left: 13px;
541
546
  width: fit-content;
542
547
  height: fit-content;
543
- color: var(--color-selected-contrast);
548
+ color: var(--tl-color-selected-contrast);
544
549
  white-space: nowrap;
545
550
  position: absolute;
546
551
  padding: 3px 6px;
547
552
  font-size: 12px;
548
553
  font-family: var(--font-body);
549
554
  opacity: 1;
550
- border-radius: var(--radius-2);
555
+ border-radius: var(--tl-radius-2);
551
556
  }
552
557
 
553
558
  .tl-cursor-chat {
554
559
  position: absolute;
555
- color: var(--color-selected-contrast);
560
+ color: var(--tl-color-selected-contrast);
556
561
  white-space: nowrap;
557
562
  padding: 3px 6px;
558
563
  font-size: 12px;
559
564
  font-family: var(--font-body);
560
565
  pointer-events: none;
561
- z-index: var(--layer-cursor);
566
+ z-index: var(--tl-layer-cursor);
562
567
  margin-top: 16px;
563
568
  margin-left: 13px;
564
569
  opacity: 1;
565
570
  border: none;
566
571
  user-select: text;
567
- border-radius: var(--radius-2);
572
+ border-radius: var(--tl-radius-2);
568
573
  }
569
574
 
570
575
  .tl-cursor-chat .tl-cursor-chat__bubble {
@@ -572,13 +577,13 @@ input,
572
577
  }
573
578
 
574
579
  .tl-cursor-chat::selection {
575
- background: var(--color-selected);
576
- color: var(--color-selected-contrast);
580
+ background: var(--tl-color-selected);
581
+ color: var(--tl-color-selected-contrast);
577
582
  text-shadow: none;
578
583
  }
579
584
 
580
585
  .tl-cursor-chat::placeholder {
581
- color: var(--color-selected-contrast);
586
+ color: var(--tl-color-selected-contrast);
582
587
  opacity: 0.7;
583
588
  }
584
589
 
@@ -649,7 +654,7 @@ input,
649
654
  background: none;
650
655
  border-image: none;
651
656
  border: 0px;
652
- caret-color: var(--color-text);
657
+ caret-color: var(--tl-color-text);
653
658
  color: inherit;
654
659
  column-count: initial !important;
655
660
  display: inline-block;
@@ -681,7 +686,7 @@ input,
681
686
 
682
687
  .tl-text-measure {
683
688
  position: absolute;
684
- z-index: var(--layer-canvas-hidden);
689
+ z-index: var(--tl-layer-canvas-hidden);
685
690
  top: 0px;
686
691
  left: 0px;
687
692
  opacity: 0;
@@ -744,8 +749,8 @@ input,
744
749
  }
745
750
 
746
751
  .tl-text-input::selection {
747
- background: var(--color-selected);
748
- color: var(--color-selected-contrast);
752
+ background: var(--tl-color-selected);
753
+ color: var(--tl-color-selected-contrast);
749
754
  text-shadow: none;
750
755
  }
751
756
 
@@ -755,7 +760,7 @@ input,
755
760
  display: flex;
756
761
  justify-content: center;
757
762
  align-items: center;
758
- color: var(--color-text);
763
+ color: var(--tl-color-text);
759
764
  text-shadow: var(--tl-text-outline);
760
765
  line-height: inherit;
761
766
  position: absolute;
@@ -799,7 +804,7 @@ input,
799
804
 
800
805
  .tl-text-wrapper .tl-text-content {
801
806
  pointer-events: all;
802
- z-index: var(--layer-text-content);
807
+ z-index: var(--tl-layer-text-content);
803
808
  }
804
809
 
805
810
  .tl-text-label__inner > .tl-text-content {
@@ -809,7 +814,7 @@ input,
809
814
  padding: inherit;
810
815
  height: fit-content;
811
816
  width: fit-content;
812
- border-radius: var(--radius-1);
817
+ border-radius: var(--tl-radius-1);
813
818
  max-width: 100%;
814
819
  }
815
820
 
@@ -822,7 +827,7 @@ input,
822
827
  }
823
828
 
824
829
  .tl-text-wrapper[data-isselected='true'] .tl-text-input {
825
- z-index: var(--layer-text-editor);
830
+ z-index: var(--tl-layer-text-editor);
826
831
  pointer-events: all;
827
832
  }
828
833
 
@@ -917,7 +922,7 @@ input,
917
922
  }
918
923
 
919
924
  .tl-rich-text a {
920
- color: var(--color-primary);
925
+ color: var(--tl-color-primary);
921
926
  text-decoration: underline;
922
927
  }
923
928
 
@@ -940,14 +945,14 @@ input,
940
945
  }
941
946
 
942
947
  .tl-theme__dark .tl-rich-text mark {
943
- background-color: var(--color-text-highlight);
948
+ background-color: var(--tl-color-text-highlight);
944
949
  color: currentColor;
945
950
  }
946
951
 
947
952
  @supports (color: color(display-p3 1 1 1)) {
948
953
  @media (color-gamut: p3) {
949
954
  .tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
950
- background-color: var(--color-text-highlight-p3);
955
+ background-color: var(--tl-color-text-highlight-p3);
951
956
  }
952
957
  }
953
958
  }
@@ -959,15 +964,15 @@ input,
959
964
  /* --------------------- Loading -------------------- */
960
965
 
961
966
  .tl-loading {
962
- background-color: var(--color-background);
963
- color: var(--color-text-1);
967
+ background-color: var(--tl-color-background);
968
+ color: var(--tl-color-text-1);
964
969
  height: 100%;
965
970
  width: 100%;
966
971
  display: flex;
967
972
  flex-direction: column;
968
973
  justify-content: center;
969
974
  align-items: center;
970
- gap: var(--space-2);
975
+ gap: var(--tl-space-2);
971
976
  font-size: 14px;
972
977
  font-weight: 500;
973
978
  opacity: 0;
@@ -975,7 +980,7 @@ input,
975
980
  animation-delay: 0.2s;
976
981
  position: absolute;
977
982
  inset: 0px;
978
- z-index: var(--layer-canvas-blocker);
983
+ z-index: var(--tl-layer-canvas-blocker);
979
984
  }
980
985
 
981
986
  @keyframes tl-fade-in {
@@ -1008,8 +1013,8 @@ input,
1008
1013
  }
1009
1014
 
1010
1015
  .tl-brush__default {
1011
- stroke: var(--color-brush-stroke);
1012
- fill: var(--color-brush-fill);
1016
+ stroke: var(--tl-color-brush-stroke);
1017
+ fill: var(--tl-color-brush-fill);
1013
1018
  }
1014
1019
 
1015
1020
  /* -------------------- Scribble -------------------- */
@@ -1024,13 +1029,13 @@ input,
1024
1029
  /* ---------------------- Snaps --------------------- */
1025
1030
 
1026
1031
  .tl-snap-indicator {
1027
- stroke: var(--color-snap);
1032
+ stroke: var(--tl-color-snap);
1028
1033
  stroke-width: calc(1px * var(--tl-scale));
1029
1034
  fill: none;
1030
1035
  }
1031
1036
 
1032
1037
  .tl-snap-point {
1033
- stroke: var(--color-snap);
1038
+ stroke: var(--tl-color-snap);
1034
1039
  stroke-width: calc(1px * var(--tl-scale));
1035
1040
  fill: none;
1036
1041
  }
@@ -1050,7 +1055,7 @@ input,
1050
1055
  justify-content: center;
1051
1056
  font-size: 12px;
1052
1057
  font-weight: 400;
1053
- color: var(--color-text-1);
1058
+ color: var(--tl-color-text-1);
1054
1059
  padding: 13px;
1055
1060
  cursor: var(--tl-cursor-pointer);
1056
1061
  border: none;
@@ -1068,13 +1073,13 @@ input,
1068
1073
  display: block;
1069
1074
  width: calc(100% - 12px);
1070
1075
  height: calc(100% - 12px);
1071
- border-radius: var(--radius-1);
1072
- background-color: var(--color-background);
1076
+ border-radius: var(--tl-radius-1);
1077
+ background-color: var(--tl-color-background);
1073
1078
  pointer-events: none;
1074
1079
  }
1075
1080
 
1076
1081
  .tl-hyperlink-button:focus-visible {
1077
- color: var(--color-selected);
1082
+ color: var(--tl-color-selected);
1078
1083
  }
1079
1084
 
1080
1085
  .tl-hyperlink__icon {
@@ -1101,8 +1106,8 @@ input,
1101
1106
  }
1102
1107
 
1103
1108
  .tl-handle__fg {
1104
- fill: var(--color-selected-contrast);
1105
- stroke: var(--color-selection-stroke);
1109
+ fill: var(--tl-color-selected-contrast);
1110
+ stroke: var(--tl-color-selection-stroke);
1106
1111
  stroke-width: calc(1.5px * var(--tl-scale));
1107
1112
  pointer-events: none;
1108
1113
  }
@@ -1112,7 +1117,7 @@ input,
1112
1117
  }
1113
1118
 
1114
1119
  .tl-handle__clone > .tl-handle__fg {
1115
- fill: var(--color-selection-stroke);
1120
+ fill: var(--tl-color-selection-stroke);
1116
1121
  stroke: none;
1117
1122
  }
1118
1123
 
@@ -1122,7 +1127,7 @@ input,
1122
1127
 
1123
1128
  @media (pointer: coarse) {
1124
1129
  .tl-handle__bg:active {
1125
- fill: var(--color-selection-fill);
1130
+ fill: var(--tl-color-selection-fill);
1126
1131
  }
1127
1132
 
1128
1133
  .tl-handle__create {
@@ -1178,13 +1183,13 @@ input,
1178
1183
  stroke-linejoin: round;
1179
1184
  /* content-visibility: auto; */
1180
1185
  transform-origin: top left;
1181
- color: var(--color-text-1);
1186
+ color: var(--tl-color-text-1);
1182
1187
  }
1183
1188
 
1184
1189
  /* -------------------- Group shape ------------------ */
1185
1190
 
1186
1191
  .tl-group {
1187
- stroke: var(--color-text);
1192
+ stroke: var(--tl-color-text);
1188
1193
  stroke-width: calc(1px * var(--tl-scale));
1189
1194
  opacity: 0.5;
1190
1195
  }
@@ -1202,12 +1207,12 @@ input,
1202
1207
  justify-content: center;
1203
1208
  align-items: center;
1204
1209
  text-align: center;
1205
- color: var(--color-text);
1210
+ color: var(--tl-color-text);
1206
1211
  text-shadow: var(--tl-text-outline);
1207
1212
  }
1208
1213
 
1209
1214
  .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
1210
- border-radius: var(--radius-1);
1215
+ border-radius: var(--tl-radius-1);
1211
1216
  box-sizing: content-box;
1212
1217
  height: max-content;
1213
1218
  width: max-content;
@@ -1218,22 +1223,22 @@ input,
1218
1223
  }
1219
1224
 
1220
1225
  .tl-arrow-hint {
1221
- stroke: var(--color-text-1);
1226
+ stroke: var(--tl-color-text-1);
1222
1227
  fill: none;
1223
1228
  stroke-linecap: round;
1224
1229
  overflow: visible;
1225
1230
  }
1226
1231
 
1227
1232
  .tl-arrow-hint-handle {
1228
- fill: var(--color-selected-contrast);
1229
- stroke: var(--color-selection-stroke);
1233
+ fill: var(--tl-color-selected-contrast);
1234
+ stroke: var(--tl-color-selection-stroke);
1230
1235
  stroke-width: calc(1.5px * var(--tl-scale));
1231
1236
  r: calc(4px * var(--tl-scale));
1232
1237
  }
1233
1238
 
1234
1239
  .tl-arrow-hint-snap {
1235
1240
  stroke: transparent;
1236
- fill: var(--color-selection-fill);
1241
+ fill: var(--tl-color-selection-fill);
1237
1242
  r: calc(12px * var(--tl-scale));
1238
1243
  }
1239
1244
 
@@ -1253,40 +1258,40 @@ input,
1253
1258
  width: 100%;
1254
1259
  height: 100%;
1255
1260
  position: relative;
1256
- border: 1px solid var(--color-panel-contrast);
1257
- background-color: var(--color-panel);
1258
- border-radius: var(--radius-2);
1261
+ border: 1px solid var(--tl-color-panel-contrast);
1262
+ background-color: var(--tl-color-panel);
1263
+ border-radius: var(--tl-radius-2);
1259
1264
  display: flex;
1260
1265
  flex-direction: column;
1261
1266
  overflow: hidden;
1262
1267
  }
1263
1268
 
1264
1269
  .tl-bookmark__container--safariExport {
1265
- border: 1px solid var(--color-divider);
1270
+ border: 1px solid var(--tl-color-divider);
1266
1271
  }
1267
1272
 
1268
1273
  .tl-bookmark__image_container {
1269
1274
  flex: 1 1 100%;
1270
1275
  overflow: hidden;
1271
- border-top-left-radius: var(--radius-1);
1272
- border-top-right-radius: var(--radius-1);
1276
+ border-top-left-radius: var(--tl-radius-1);
1277
+ border-top-right-radius: var(--tl-radius-1);
1273
1278
  width: 100%;
1274
1279
  height: 100%;
1275
1280
  display: flex;
1276
1281
  justify-content: flex-end;
1277
1282
  align-items: flex-start;
1278
- box-shadow: inset 0px 0px 0px 1px var(--color-divider);
1283
+ box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
1279
1284
  }
1280
1285
 
1281
1286
  .tl-bookmark__image_container > .tl-hyperlink-button::after {
1282
- background-color: var(--color-panel);
1287
+ background-color: var(--tl-color-panel);
1283
1288
  }
1284
1289
 
1285
1290
  .tl-bookmark__placeholder {
1286
1291
  width: 100%;
1287
1292
  height: 100%;
1288
- background-color: var(--color-muted-2);
1289
- border-bottom: 1px solid var(--color-muted-2);
1293
+ background-color: var(--tl-color-muted-2);
1294
+ border-bottom: 1px solid var(--tl-color-muted-2);
1290
1295
  }
1291
1296
 
1292
1297
  .tl-bookmark__image {
@@ -1294,12 +1299,12 @@ input,
1294
1299
  height: 100%;
1295
1300
  object-fit: cover;
1296
1301
  object-position: center;
1297
- border-bottom: 1px solid var(--color-muted-2);
1302
+ border-bottom: 1px solid var(--tl-color-muted-2);
1298
1303
  }
1299
1304
 
1300
1305
  .tl-bookmark__copy_container {
1301
- background-color: var(--color-muted-0);
1302
- padding: var(--space-4);
1306
+ background-color: var(--tl-color-muted-0);
1307
+ padding: var(--tl-space-4);
1303
1308
  pointer-events: all;
1304
1309
  display: flex;
1305
1310
  flex-direction: column;
@@ -1319,7 +1324,7 @@ input,
1319
1324
  font-size: 16px;
1320
1325
  line-height: 1.6;
1321
1326
  font-weight: bold;
1322
- padding-bottom: var(--space-2);
1327
+ padding-bottom: var(--tl-space-2);
1323
1328
  overflow: hidden;
1324
1329
  max-height: calc((16px * 1.6) * 2);
1325
1330
  -webkit-box-orient: vertical;
@@ -1339,19 +1344,19 @@ input,
1339
1344
  line-clamp: 3;
1340
1345
  text-overflow: ellipsis;
1341
1346
  display: -webkit-box;
1342
- color: var(--color-text-2);
1343
- margin: var(--space-2) 0px;
1347
+ color: var(--tl-color-text-2);
1348
+ margin: var(--tl-space-2) 0px;
1344
1349
  }
1345
1350
 
1346
1351
  .tl-bookmark__heading + .tl-bookmark__link,
1347
1352
  .tl-bookmark__description + .tl-bookmark__link {
1348
- margin-top: var(--space-3);
1353
+ margin-top: var(--tl-space-3);
1349
1354
  }
1350
1355
  .tl-bookmark__link {
1351
1356
  font-size: 12px;
1352
1357
  pointer-events: all;
1353
1358
  display: flex;
1354
- color: var(--color-text-2);
1359
+ color: var(--tl-color-text-2);
1355
1360
  align-items: center;
1356
1361
  cursor: var(--tl-cursor-pointer);
1357
1362
  width: fit-content;
@@ -1393,7 +1398,7 @@ input,
1393
1398
  width: 100%;
1394
1399
  height: 100%;
1395
1400
  pointer-events: all;
1396
- /* background-color: var(--color-background); */
1401
+ /* background-color: var(--tl-color-background); */
1397
1402
 
1398
1403
  display: flex;
1399
1404
  justify-content: center;
@@ -1422,7 +1427,7 @@ input,
1422
1427
  height: 100%;
1423
1428
  pointer-events: all;
1424
1429
  opacity: 1;
1425
- z-index: var(--layer-text-container);
1430
+ z-index: var(--tl-layer-text-container);
1426
1431
  border-radius: 1px;
1427
1432
  }
1428
1433
 
@@ -1438,22 +1443,22 @@ input,
1438
1443
  }
1439
1444
 
1440
1445
  .tl-frame__creating {
1441
- stroke: var(--color-selected);
1446
+ stroke: var(--tl-color-selected);
1442
1447
  fill: none;
1443
1448
  }
1444
1449
 
1445
1450
  .tl-frame-heading {
1446
- --frame-padding-x: 6px;
1447
- --frame-height: 24px;
1448
- --frame-minimum-width: 32px;
1449
- --frame-offset-width: 16px;
1451
+ --tl-frame-padding-x: 6px;
1452
+ --tl-frame-height: 24px;
1453
+ --tl-frame-minimum-width: 32px;
1454
+ --tl-frame-offset-width: 16px;
1450
1455
  display: flex;
1451
1456
  align-items: center;
1452
1457
  position: absolute;
1453
1458
  transform-origin: 0% 100%;
1454
1459
  overflow: hidden;
1455
1460
  max-width: 100%;
1456
- min-width: var(--frame-minimum-width);
1461
+ min-width: var(--tl-frame-minimum-width);
1457
1462
  height: auto;
1458
1463
  font-size: 12px;
1459
1464
  padding-bottom: 4px;
@@ -1465,18 +1470,18 @@ input,
1465
1470
  /* scale from bottom left corner so we can pin it to the top left corner of the frame */
1466
1471
  transform-origin: 0% 100%;
1467
1472
  display: flex;
1468
- height: var(--frame-height);
1473
+ height: var(--tl-frame-height);
1469
1474
  width: 100%;
1470
1475
  align-items: center;
1471
- border-radius: var(--radius-1);
1476
+ border-radius: var(--tl-radius-1);
1472
1477
  }
1473
1478
 
1474
1479
  .tl-frame-label {
1475
1480
  pointer-events: all;
1476
1481
  overflow: hidden;
1477
1482
  text-overflow: ellipsis;
1478
- padding: 0px var(--frame-padding-x);
1479
- border-radius: var(--radius-1);
1483
+ padding: 0px var(--tl-frame-padding-x);
1484
+ border-radius: var(--tl-radius-1);
1480
1485
  position: relative;
1481
1486
  font-size: inherit;
1482
1487
  white-space: pre;
@@ -1486,12 +1491,12 @@ input,
1486
1491
  color: transparent;
1487
1492
  white-space: pre;
1488
1493
  width: auto;
1489
- min-width: var(--frame-minimum-width);
1494
+ min-width: var(--tl-frame-minimum-width);
1490
1495
  height: 100%;
1491
1496
  overflow: visible;
1492
- background-color: var(--color-panel);
1493
- border-color: var(--color-selected);
1494
- box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
1497
+ background-color: var(--tl-color-panel);
1498
+ border-color: var(--tl-color-selected);
1499
+ box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
1495
1500
  }
1496
1501
 
1497
1502
  .tl-frame-name-input {
@@ -1499,7 +1504,7 @@ input,
1499
1504
  border: none;
1500
1505
  background: none;
1501
1506
  outline: none;
1502
- padding: 0px var(--frame-padding-x);
1507
+ padding: 0px var(--tl-frame-padding-x);
1503
1508
  inset: 0px;
1504
1509
  height: 100%;
1505
1510
  width: 100%;
@@ -1507,8 +1512,8 @@ input,
1507
1512
  font-family: inherit;
1508
1513
  font-weight: inherit;
1509
1514
  width: 100%;
1510
- color: var(--color-text-1);
1511
- border-radius: var(--radius-1);
1515
+ color: var(--tl-color-text-1);
1516
+ border-radius: var(--tl-radius-1);
1512
1517
  user-select: all;
1513
1518
  -webkit-user-select: text;
1514
1519
  white-space: pre;
@@ -1528,7 +1533,7 @@ input,
1528
1533
 
1529
1534
  .tl-embed {
1530
1535
  border: none;
1531
- border-radius: var(--radius-2);
1536
+ border-radius: var(--tl-radius-2);
1532
1537
  }
1533
1538
 
1534
1539
  /* -------------- Shape error boundary -------------- */
@@ -1536,11 +1541,11 @@ input,
1536
1541
  .tl-shape-error-boundary {
1537
1542
  width: 100%;
1538
1543
  height: 100%;
1539
- background-color: var(--color-muted-1);
1544
+ background-color: var(--tl-color-muted-1);
1540
1545
  border-width: calc(1px * var(--tl-scale));
1541
- border-color: var(--color-muted-1);
1546
+ border-color: var(--tl-color-muted-1);
1542
1547
  border-style: solid;
1543
- border-radius: calc(var(--radius-1) * var(--tl-scale));
1548
+ border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
1544
1549
  display: flex;
1545
1550
  flex-direction: column;
1546
1551
  align-items: center;
@@ -1549,7 +1554,7 @@ input,
1549
1554
  position: relative;
1550
1555
  pointer-events: all;
1551
1556
  overflow: hidden;
1552
- padding: var(--space-2);
1557
+ padding: var(--tl-space-2);
1553
1558
  }
1554
1559
 
1555
1560
  .tl-shape-error-boundary::before {
@@ -1557,7 +1562,7 @@ input,
1557
1562
  content: 'Error';
1558
1563
  font-size: 12px;
1559
1564
  font-family: inherit;
1560
- color: var(--color-text-0);
1565
+ color: var(--tl-color-text-0);
1561
1566
  }
1562
1567
 
1563
1568
  /* ----------------- Error boundary ----------------- */
@@ -1568,9 +1573,9 @@ input,
1568
1573
  display: flex;
1569
1574
  align-items: center;
1570
1575
  justify-content: center;
1571
- padding: var(--space-4);
1572
- background-color: var(--color-background);
1573
- color: var(--color-text-1);
1576
+ padding: var(--tl-space-4);
1577
+ background-color: var(--tl-color-background);
1578
+ color: var(--tl-color-text-1);
1574
1579
  position: absolute;
1575
1580
  }
1576
1581
 
@@ -1579,8 +1584,8 @@ input,
1579
1584
  inset: 0px;
1580
1585
  height: 100%;
1581
1586
  width: 100%;
1582
- z-index: var(--layer-error-overlay);
1583
- background-color: var(--color-overlay);
1587
+ z-index: var(--tl-layer-error-overlay);
1588
+ background-color: var(--tl-color-overlay);
1584
1589
  }
1585
1590
 
1586
1591
  .tl-error-boundary__content * {
@@ -1595,7 +1600,7 @@ input,
1595
1600
  inset: 0px;
1596
1601
  height: 100%;
1597
1602
  width: 100%;
1598
- z-index: var(--layer-error-canvas);
1603
+ z-index: var(--tl-layer-error-canvas);
1599
1604
  }
1600
1605
 
1601
1606
  /* some browsers seem to have some weird interactions between stacking contexts
@@ -1608,7 +1613,7 @@ it from receiving any pointer events or affecting the cursor. */
1608
1613
  inset: 0px;
1609
1614
  height: 100%;
1610
1615
  width: 100%;
1611
- z-index: var(--layer-error-canvas-after);
1616
+ z-index: var(--tl-layer-error-canvas-after);
1612
1617
  pointer-events: all;
1613
1618
  }
1614
1619
 
@@ -1618,16 +1623,16 @@ it from receiving any pointer events or affecting the cursor. */
1618
1623
  max-width: 100%;
1619
1624
  width: 400px;
1620
1625
  max-height: 100%;
1621
- background-color: var(--color-panel);
1626
+ background-color: var(--tl-color-panel);
1622
1627
  padding: 16px;
1623
1628
  border-radius: 16px;
1624
- box-shadow: var(--shadow-2);
1629
+ box-shadow: var(--tl-shadow-2);
1625
1630
  font-size: 14px;
1626
1631
  font-weight: 400;
1627
1632
  display: flex;
1628
1633
  flex-direction: column;
1629
1634
  overflow: auto;
1630
- z-index: var(--layer-error-content);
1635
+ z-index: var(--tl-layer-error-content);
1631
1636
  gap: 12px;
1632
1637
  }
1633
1638
 
@@ -1642,10 +1647,10 @@ it from receiving any pointer events or affecting the cursor. */
1642
1647
  }
1643
1648
 
1644
1649
  .tl-error-boundary__content h4 {
1645
- border: 1px solid var(--color-low-border);
1650
+ border: 1px solid var(--tl-color-low-border);
1646
1651
  margin: -6px 0 0 0;
1647
- padding: var(--space-5);
1648
- border-radius: var(--radius-2);
1652
+ padding: var(--tl-space-5);
1653
+ border-radius: var(--tl-radius-2);
1649
1654
  font-weight: normal;
1650
1655
  }
1651
1656
 
@@ -1655,10 +1660,10 @@ it from receiving any pointer events or affecting the cursor. */
1655
1660
  }
1656
1661
 
1657
1662
  .tl-error-boundary__content pre {
1658
- background-color: var(--color-muted-2);
1663
+ background-color: var(--tl-color-muted-2);
1659
1664
  margin-top: 0;
1660
- padding: var(--space-5);
1661
- border-radius: var(--radius-2);
1665
+ padding: var(--tl-space-5);
1666
+ border-radius: var(--tl-radius-2);
1662
1667
  overflow: auto;
1663
1668
  font-size: 12px;
1664
1669
  max-height: 320px;
@@ -1670,15 +1675,15 @@ it from receiving any pointer events or affecting the cursor. */
1670
1675
  font-family: inherit;
1671
1676
  font-size: 14px;
1672
1677
  font-weight: 500;
1673
- padding: var(--space-4);
1674
- border-radius: var(--radius-3);
1678
+ padding: var(--tl-space-4);
1679
+ border-radius: var(--tl-radius-3);
1675
1680
  cursor: var(--tl-cursor-pointer);
1676
1681
  color: inherit;
1677
1682
  background-color: transparent;
1678
1683
  }
1679
1684
 
1680
1685
  .tl-error-boundary__content a {
1681
- color: var(--color-selected);
1686
+ color: var(--tl-color-selected);
1682
1687
  font-weight: 500;
1683
1688
  text-decoration: none;
1684
1689
  }
@@ -1690,31 +1695,31 @@ it from receiving any pointer events or affecting the cursor. */
1690
1695
 
1691
1696
  .tl-error-boundary__content__error button {
1692
1697
  position: absolute;
1693
- top: var(--space-2);
1694
- right: var(--space-2);
1698
+ top: var(--tl-space-2);
1699
+ right: var(--tl-space-2);
1695
1700
  font-size: 12px;
1696
- padding: var(--space-2) var(--space-3);
1697
- background-color: var(--color-panel);
1698
- border-radius: var(--radius-1);
1701
+ padding: var(--tl-space-2) var(--tl-space-3);
1702
+ background-color: var(--tl-color-panel);
1703
+ border-radius: var(--tl-radius-1);
1699
1704
  }
1700
1705
 
1701
1706
  .tl-error-boundary__content__actions {
1702
1707
  display: flex;
1703
1708
  justify-content: space-between;
1704
- gap: var(--space-4);
1709
+ gap: var(--tl-space-4);
1705
1710
  margin: 0px;
1706
1711
  margin-left: -4px;
1707
1712
  }
1708
1713
  .tl-error-boundary__content__actions__group {
1709
1714
  display: flex;
1710
- gap: var(--space-4);
1715
+ gap: var(--tl-space-4);
1711
1716
  }
1712
1717
  .tl-error-boundary__content .tl-error-boundary__reset {
1713
- color: var(--color-danger);
1718
+ color: var(--tl-color-danger);
1714
1719
  }
1715
1720
  .tl-error-boundary__content .tl-error-boundary__refresh {
1716
- background-color: var(--color-primary);
1717
- color: var(--color-selected-contrast);
1721
+ background-color: var(--tl-color-primary);
1722
+ color: var(--tl-color-selected-contrast);
1718
1723
  }
1719
1724
  .tl-container__focused:not(.tl-container__no-focus-ring)
1720
1725
  .tlui-button.tl-error-boundary__refresh:focus-visible {
@@ -1726,7 +1731,7 @@ it from receiving any pointer events or affecting the cursor. */
1726
1731
 
1727
1732
  .tl-hit-test-blocker {
1728
1733
  position: absolute;
1729
- z-index: var(--layer-canvas-blocker);
1734
+ z-index: var(--tl-layer-canvas-blocker);
1730
1735
  inset: 0px;
1731
1736
  width: 100%;
1732
1737
  height: 100%;
@@ -1746,32 +1751,32 @@ it from receiving any pointer events or affecting the cursor. */
1746
1751
 
1747
1752
  .tl-handle__bg:hover {
1748
1753
  cursor: var(--tl-cursor-grab);
1749
- fill: var(--color-selection-fill);
1754
+ fill: var(--tl-color-selection-fill);
1750
1755
  }
1751
1756
 
1752
1757
  .tl-bookmark__link:hover {
1753
- color: var(--color-selected);
1758
+ color: var(--tl-color-selected);
1754
1759
  }
1755
1760
 
1756
1761
  .tl-hyperlink-button:hover {
1757
- color: var(--color-selected);
1762
+ color: var(--tl-color-selected);
1758
1763
  }
1759
1764
 
1760
1765
  .tl-error-boundary__content button:hover {
1761
- background-color: var(--color-low);
1766
+ background-color: var(--tl-color-low);
1762
1767
  }
1763
1768
  .tl-error-boundary__content a:hover {
1764
- color: var(--color-text-1);
1769
+ color: var(--tl-color-text-1);
1765
1770
  }
1766
1771
  .tl-error-boundary__content .tl-error-boundary__refresh:hover {
1767
- background-color: var(--color-primary);
1772
+ background-color: var(--tl-color-primary);
1768
1773
  opacity: 0.9;
1769
1774
  }
1770
1775
 
1771
1776
  /* These three rules help preserve clicking into specific points in text areas *while*
1772
1777
  * already in edit mode when jumping from shape to shape. */
1773
1778
  .tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
1774
- z-index: var(--layer-text-editor);
1779
+ z-index: var(--tl-layer-text-editor);
1775
1780
  pointer-events: all;
1776
1781
  }
1777
1782
  }
@@ -1779,15 +1784,15 @@ it from receiving any pointer events or affecting the cursor. */
1779
1784
  /* @tldraw/ui */
1780
1785
 
1781
1786
  .tl-container {
1782
- --layer-above: 1;
1783
- --layer-focused-input: 10;
1784
- --layer-menu-click-capture: 250;
1785
- --layer-panels: 300;
1786
- --layer-menus: 400;
1787
- --layer-toasts: 650;
1788
- --layer-cursor: 700;
1789
- --layer-header-footer: 999;
1790
- --layer-following-indicator: 1000;
1787
+ --tl-layer-above: 1;
1788
+ --tl-layer-focused-input: 10;
1789
+ --tl-layer-menu-click-capture: 250;
1790
+ --tl-layer-panels: 300;
1791
+ --tl-layer-menus: 400;
1792
+ --tl-layer-toasts: 650;
1793
+ --tl-layer-cursor: 700;
1794
+ --tl-layer-header-footer: 999;
1795
+ --tl-layer-following-indicator: 1000;
1791
1796
  }
1792
1797
 
1793
1798
  /* Button */
@@ -1811,23 +1816,23 @@ it from receiving any pointer events or affecting the cursor. */
1811
1816
  text-rendering: optimizeLegibility;
1812
1817
  font-size: 12px;
1813
1818
  gap: 0px;
1814
- color: var(--color-text-1);
1819
+ color: var(--tl-color-text-1);
1815
1820
  z-index: 0;
1816
1821
  }
1817
1822
 
1818
1823
  .tlui-button:disabled {
1819
- color: var(--color-text-3);
1824
+ color: var(--tl-color-text-3);
1820
1825
  text-shadow: none;
1821
1826
  cursor: default;
1822
1827
  }
1823
1828
 
1824
1829
  .tlui-button:disabled .tlui-kbd {
1825
- color: var(--color-text-3);
1830
+ color: var(--tl-color-text-3);
1826
1831
  }
1827
1832
 
1828
1833
  .tlui-button > * {
1829
1834
  position: relative;
1830
- z-index: var(--layer-above);
1835
+ z-index: var(--tl-layer-above);
1831
1836
  }
1832
1837
 
1833
1838
  .tlui-button__label {
@@ -1843,7 +1848,7 @@ it from receiving any pointer events or affecting the cursor. */
1843
1848
  */
1844
1849
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
1845
1850
  border-radius: 10px;
1846
- outline: 2px solid var(--color-focus);
1851
+ outline: 2px solid var(--tl-color-focus);
1847
1852
  outline-offset: -5px;
1848
1853
  }
1849
1854
  .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
@@ -1851,7 +1856,7 @@ it from receiving any pointer events or affecting the cursor. */
1851
1856
  }
1852
1857
  .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
1853
1858
  border-radius: 10px;
1854
- outline: 2px solid var(--color-focus);
1859
+ outline: 2px solid var(--tl-color-focus);
1855
1860
  outline-offset: -5px;
1856
1861
  }
1857
1862
 
@@ -1860,8 +1865,8 @@ it from receiving any pointer events or affecting the cursor. */
1860
1865
  content: '';
1861
1866
  position: absolute;
1862
1867
  inset: 4px;
1863
- border-radius: var(--radius-2);
1864
- background: var(--color-muted-2);
1868
+ border-radius: var(--tl-radius-2);
1869
+ background: var(--tl-color-muted-2);
1865
1870
  opacity: 0;
1866
1871
  }
1867
1872
 
@@ -1871,18 +1876,18 @@ it from receiving any pointer events or affecting the cursor. */
1871
1876
 
1872
1877
  .tlui-button[data-isactive='true']::after,
1873
1878
  .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
1874
- background: var(--color-hint);
1879
+ background: var(--tl-color-hint);
1875
1880
  opacity: 1;
1876
1881
  }
1877
1882
 
1878
- .tlui-button[aria-expanded='true'][data-direction='left']::after {
1879
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
1883
+ .tlui-button[aria-expanded='true'][data-direction='left'] {
1884
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1880
1885
  opacity: 1;
1881
1886
  }
1882
1887
 
1883
1888
  @media (hover: hover) {
1884
1889
  .tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
1885
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
1890
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
1886
1891
  opacity: 1;
1887
1892
  }
1888
1893
 
@@ -1896,18 +1901,18 @@ it from receiving any pointer events or affecting the cursor. */
1896
1901
  }
1897
1902
 
1898
1903
  .tlui-button__icon + .tlui-button__label {
1899
- margin-left: var(--space-2);
1904
+ margin-left: var(--tl-space-2);
1900
1905
  }
1901
1906
 
1902
1907
  /* Low button */
1903
1908
 
1904
1909
  .tlui-button__low {
1905
- border-radius: var(--radius-3);
1906
- background-color: var(--color-low);
1910
+ border-radius: var(--tl-radius-3);
1911
+ background-color: var(--tl-color-low);
1907
1912
  }
1908
1913
 
1909
1914
  .tlui-button__low::after {
1910
- background-color: var(--color-muted-2);
1915
+ background-color: var(--tl-color-muted-2);
1911
1916
  opacity: 0;
1912
1917
  }
1913
1918
 
@@ -1920,31 +1925,25 @@ it from receiving any pointer events or affecting the cursor. */
1920
1925
  /* Primary / danger buttons */
1921
1926
 
1922
1927
  .tlui-button__primary {
1923
- color: var(--color-primary);
1928
+ color: var(--tl-color-primary);
1924
1929
  }
1925
1930
 
1926
1931
  .tlui-button__danger {
1927
- color: var(--color-danger);
1932
+ color: var(--tl-color-danger);
1928
1933
  text-shadow: none;
1929
1934
  }
1930
1935
 
1931
1936
  @media (hover: hover) {
1932
1937
  .tlui-button__primary:not(:disabled, :focus-visible):hover {
1933
- color: var(--color-primary);
1938
+ color: var(--tl-color-primary);
1934
1939
  }
1935
1940
 
1936
1941
  .tlui-button__danger:not(:disabled, :focus-visible):hover {
1937
- color: var(--color-danger);
1942
+ color: var(--tl-color-danger);
1938
1943
  text-shadow: none;
1939
1944
  }
1940
1945
  }
1941
1946
 
1942
- /* Panel button */
1943
-
1944
- .tlui-button__panel {
1945
- position: relative;
1946
- }
1947
-
1948
1947
  /* Menu button */
1949
1948
 
1950
1949
  .tlui-button__menu {
@@ -1957,7 +1956,7 @@ it from receiving any pointer events or affecting the cursor. */
1957
1956
 
1958
1957
  .tlui-button__menu::after {
1959
1958
  inset: 4px;
1960
- border-radius: var(--radius-2);
1959
+ border-radius: var(--tl-radius-2);
1961
1960
  }
1962
1961
 
1963
1962
  .tlui-button__menu > .tlui-icon + .tlui-button__label {
@@ -1985,18 +1984,26 @@ it from receiving any pointer events or affecting the cursor. */
1985
1984
 
1986
1985
  /* Tool lock button */
1987
1986
 
1988
- .tlui-toolbar__lock-button {
1987
+ .tlui-main-toolbar__lock-button {
1989
1988
  position: absolute;
1990
- top: 4px;
1991
- right: 0px;
1992
1989
  pointer-events: all;
1993
1990
  height: 40px;
1994
1991
  width: 40px;
1992
+ border-radius: var(--tl-radius-2);
1993
+ }
1994
+
1995
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
1996
+ top: 4px;
1997
+ right: 0px;
1995
1998
  min-width: 0px;
1996
- border-radius: var(--radius-2);
1997
1999
  }
1998
2000
 
1999
- .tlui-toolbar__lock-button::after {
2001
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
2002
+ bottom: 0px;
2003
+ min-height: 0px;
2004
+ }
2005
+
2006
+ .tlui-main-toolbar__lock-button::after {
2000
2007
  top: 4px;
2001
2008
  left: 8px;
2002
2009
  inset: 4px;
@@ -2008,16 +2015,6 @@ it from receiving any pointer events or affecting the cursor. */
2008
2015
  position: relative;
2009
2016
  height: 48px;
2010
2017
  width: 48px;
2011
- margin-left: -2px;
2012
- margin-right: -2px;
2013
- }
2014
-
2015
- .tlui-button__tool:nth-of-type(1) {
2016
- margin-left: 0px;
2017
- }
2018
-
2019
- .tlui-button__tool:nth-last-of-type(1) {
2020
- margin-right: 0px;
2021
2018
  }
2022
2019
 
2023
2020
  .tlui-button__tool::after {
@@ -2026,69 +2023,64 @@ it from receiving any pointer events or affecting the cursor. */
2026
2023
  }
2027
2024
 
2028
2025
  .tlui-button__tool[aria-pressed='true'] {
2029
- color: var(--color-selected-contrast);
2026
+ color: var(--tl-color-selected-contrast);
2030
2027
  }
2031
2028
 
2032
2029
  .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
2033
- color: var(--color-selected-contrast);
2030
+ color: var(--tl-color-selected-contrast);
2034
2031
  }
2035
2032
 
2036
2033
  .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
2037
- background: var(--color-selected);
2034
+ background: var(--tl-color-selected);
2038
2035
  opacity: 1;
2039
2036
  }
2040
2037
 
2041
- .tlui-layout__mobile .tlui-button__tool {
2038
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
2042
2039
  height: 48px;
2043
2040
  width: 43px;
2044
2041
  }
2045
2042
 
2046
- .tlui-layout__mobile .tlui-button__tool > .tlui-icon {
2043
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
2047
2044
  height: 16px;
2048
2045
  width: 16px;
2049
2046
  }
2050
2047
 
2051
- /* Button Row */
2048
+ /* Row layout */
2052
2049
 
2053
- .tlui-buttons__horizontal {
2050
+ .tlui-row {
2054
2051
  display: flex;
2055
2052
  flex-direction: row;
2053
+ padding: 0 2px;
2056
2054
  }
2057
- .tlui-buttons__horizontal > * {
2055
+ .tlui-row > * {
2058
2056
  margin-left: -2px;
2059
2057
  margin-right: -2px;
2060
2058
  }
2061
- .tlui-buttons__horizontal > *:nth-child(1) {
2062
- margin-left: 0px;
2059
+
2060
+ /* Column layout */
2061
+
2062
+ .tlui-column {
2063
+ display: flex;
2064
+ flex-direction: column;
2065
+ padding: 2px 0;
2063
2066
  }
2064
- .tlui-buttons__horizontal > *:nth-last-child(1) {
2065
- margin-right: 0px;
2067
+ .tlui-column > * {
2068
+ margin-top: -2px;
2069
+ margin-bottom: -2px;
2066
2070
  }
2067
2071
 
2068
- /* Button Grid */
2072
+ /* Grid layout */
2069
2073
 
2070
- .tlui-buttons__grid {
2074
+ .tlui-grid {
2071
2075
  display: grid;
2072
- grid-template-columns: repeat(4, auto);
2076
+ grid-template-columns: repeat(4, 1fr);
2073
2077
  grid-auto-flow: row;
2074
2078
  overflow: hidden;
2079
+ padding: 2px;
2075
2080
  }
2076
- .tlui-buttons__grid > .tlui-button {
2081
+ .tlui-grid > * {
2077
2082
  margin: -2px;
2078
2083
  }
2079
- .tlui-buttons__grid > .tlui-button:nth-of-type(4n),
2080
- .tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
2081
- margin-right: 0px;
2082
- }
2083
- .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
2084
- margin-left: 0px;
2085
- }
2086
- .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
2087
- margin-top: 0px;
2088
- }
2089
- .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
2090
- margin-bottom: 0px;
2091
- }
2092
2084
 
2093
2085
  /* Zoom button */
2094
2086
 
@@ -2112,9 +2104,9 @@ it from receiving any pointer events or affecting the cursor. */
2112
2104
  pointer-events: none;
2113
2105
  user-select: none;
2114
2106
  contain: strict;
2115
- z-index: var(--layer-panels);
2107
+ z-index: var(--tl-layer-panels);
2116
2108
  transform: translate3d(0, 0, 0);
2117
- --sab: env(safe-area-inset-bottom);
2109
+ --tl-sab: env(safe-area-inset-bottom);
2118
2110
  font-weight: 500;
2119
2111
  line-height: 1.6;
2120
2112
  -webkit-font-smoothing: antialiased;
@@ -2167,11 +2159,11 @@ it from receiving any pointer events or affecting the cursor. */
2167
2159
  justify-content: flex-start;
2168
2160
  align-items: flex-start;
2169
2161
  width: min-content;
2170
- gap: var(--space-3);
2171
- margin: var(--space-2) var(--space-3);
2162
+ gap: var(--tl-space-3);
2163
+ margin: var(--tl-space-2) var(--tl-space-3);
2172
2164
  white-space: nowrap;
2173
2165
  pointer-events: none;
2174
- z-index: var(--layer-panels);
2166
+ z-index: var(--tl-layer-panels);
2175
2167
  }
2176
2168
 
2177
2169
  /* ---------------------- Icon ---------------------- */
@@ -2199,7 +2191,7 @@ it from receiving any pointer events or affecting the cursor. */
2199
2191
 
2200
2192
  .tlui-slider__container {
2201
2193
  width: 100%;
2202
- padding: 0px var(--space-4);
2194
+ padding: 0px var(--tl-space-4);
2203
2195
  }
2204
2196
 
2205
2197
  .tlui-slider {
@@ -2225,7 +2217,7 @@ it from receiving any pointer events or affecting the cursor. */
2225
2217
  content: '';
2226
2218
  height: 3px;
2227
2219
  width: 100%;
2228
- background-color: var(--color-muted-1);
2220
+ background-color: var(--tl-color-muted-1);
2229
2221
  border-radius: 14px;
2230
2222
  }
2231
2223
 
@@ -2234,7 +2226,7 @@ it from receiving any pointer events or affecting the cursor. */
2234
2226
  top: calc(50% - 2px);
2235
2227
  left: 0px;
2236
2228
  height: 3px;
2237
- background-color: var(--color-selected);
2229
+ background-color: var(--tl-color-selected);
2238
2230
  border-radius: 14px;
2239
2231
  }
2240
2232
 
@@ -2246,16 +2238,16 @@ it from receiving any pointer events or affecting the cursor. */
2246
2238
  height: 18px;
2247
2239
  position: relative;
2248
2240
  top: -1px;
2249
- background-color: var(--color-panel);
2241
+ background-color: var(--tl-color-panel);
2250
2242
  border-radius: 999px;
2251
- box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
2243
+ box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
2252
2244
  }
2253
2245
 
2254
2246
  .tlui-slider__thumb:active {
2255
2247
  cursor: grabbing;
2256
2248
  box-shadow:
2257
- inset 0px 0px 0px 2px var(--color-text-1),
2258
- var(--shadow-1);
2249
+ inset 0px 0px 0px 2px var(--tl-color-text-1),
2250
+ var(--tl-shadow-1);
2259
2251
  }
2260
2252
 
2261
2253
  /* ---------------------- Input --------------------- */
@@ -2264,7 +2256,7 @@ it from receiving any pointer events or affecting the cursor. */
2264
2256
  background: none;
2265
2257
  margin: 0px;
2266
2258
  position: relative;
2267
- z-index: var(--layer-above);
2259
+ z-index: var(--tl-layer-above);
2268
2260
  height: 40px;
2269
2261
  max-height: 40px;
2270
2262
  display: flex;
@@ -2273,8 +2265,8 @@ it from receiving any pointer events or affecting the cursor. */
2273
2265
  font-family: inherit;
2274
2266
  font-size: 12px;
2275
2267
  font-weight: inherit;
2276
- color: var(--color-text-1);
2277
- padding: var(--space-4);
2268
+ color: var(--tl-color-text-1);
2269
+ padding: var(--tl-space-4);
2278
2270
  padding-left: 0px;
2279
2271
  border: none;
2280
2272
  outline: none;
@@ -2290,8 +2282,8 @@ it from receiving any pointer events or affecting the cursor. */
2290
2282
  height: 44px;
2291
2283
  display: flex;
2292
2284
  align-items: center;
2293
- gap: var(--space-4);
2294
- color: var(--color-text);
2285
+ gap: var(--tl-space-4);
2286
+ color: var(--tl-color-text);
2295
2287
  }
2296
2288
 
2297
2289
  .tlui-input__wrapper > .tlui-icon {
@@ -2323,7 +2315,7 @@ it from receiving any pointer events or affecting the cursor. */
2323
2315
  grid-auto-columns: minmax(1em, auto);
2324
2316
  align-self: bottom;
2325
2317
  color: currentColor;
2326
- margin-left: var(--space-4);
2318
+ margin-left: var(--tl-space-4);
2327
2319
  }
2328
2320
 
2329
2321
  .tlui-kbd > span {
@@ -2340,13 +2332,13 @@ it from receiving any pointer events or affecting the cursor. */
2340
2332
  }
2341
2333
 
2342
2334
  .tlui-kbd:not(:last-child) {
2343
- margin-right: var(--space-2);
2335
+ margin-right: var(--tl-space-2);
2344
2336
  }
2345
2337
 
2346
2338
  /* Focus Mode Button */
2347
2339
 
2348
2340
  .tlui-focus-button {
2349
- z-index: var(--layer-panels);
2341
+ z-index: var(--tl-layer-panels);
2350
2342
  pointer-events: all;
2351
2343
  }
2352
2344
 
@@ -2357,16 +2349,16 @@ it from receiving any pointer events or affecting the cursor. */
2357
2349
  }
2358
2350
 
2359
2351
  .tlui-menu {
2360
- z-index: var(--layer-menus);
2352
+ z-index: var(--tl-layer-menus);
2361
2353
  height: fit-content;
2362
2354
  width: fit-content;
2363
- border-radius: var(--radius-3);
2355
+ border-radius: var(--tl-radius-3);
2364
2356
  pointer-events: all;
2365
2357
  touch-action: auto;
2366
2358
  overflow-y: auto;
2367
2359
  overscroll-behavior: none;
2368
- background-color: var(--color-panel);
2369
- box-shadow: var(--shadow-3);
2360
+ background-color: var(--tl-color-panel);
2361
+ box-shadow: var(--tl-shadow-3);
2370
2362
  }
2371
2363
 
2372
2364
  .tlui-menu::-webkit-scrollbar {
@@ -2384,7 +2376,7 @@ it from receiving any pointer events or affecting the cursor. */
2384
2376
  }
2385
2377
 
2386
2378
  .tlui-menu__group {
2387
- border-bottom: 1px solid var(--color-divider);
2379
+ border-bottom: 1px solid var(--tl-color-divider);
2388
2380
  }
2389
2381
  .tlui-menu__group:nth-last-of-type(1) {
2390
2382
  border-bottom: none;
@@ -2394,23 +2386,23 @@ it from receiving any pointer events or affecting the cursor. */
2394
2386
 
2395
2387
  .tlui-menu__submenu__trigger[data-state='open']::after {
2396
2388
  opacity: 1;
2397
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2389
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2398
2390
  }
2399
2391
 
2400
2392
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
2401
2393
  opacity: 1;
2402
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2394
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2403
2395
  }
2404
2396
 
2405
2397
  @media (hover: hover) {
2406
2398
  .tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
2407
2399
  opacity: 1;
2408
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2400
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2409
2401
  }
2410
2402
 
2411
2403
  .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
2412
2404
  opacity: 1;
2413
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2405
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2414
2406
  }
2415
2407
  }
2416
2408
 
@@ -2435,7 +2427,7 @@ it from receiving any pointer events or affecting the cursor. */
2435
2427
  .tlui-menu-click-capture {
2436
2428
  position: fixed;
2437
2429
  inset: 0;
2438
- z-index: var(--layer-menu-click-capture);
2430
+ z-index: var(--tl-layer-menu-click-capture);
2439
2431
  }
2440
2432
 
2441
2433
  /* --------------------- Popover -------------------- */
@@ -2451,10 +2443,10 @@ it from receiving any pointer events or affecting the cursor. */
2451
2443
  max-height: calc(var(--radix-popover-content-available-height) - 8px);
2452
2444
  margin: 0px;
2453
2445
  border: none;
2454
- border-radius: var(--radius-3);
2455
- background-color: var(--color-panel);
2456
- box-shadow: var(--shadow-3);
2457
- z-index: var(--layer-menus);
2446
+ border-radius: var(--tl-radius-3);
2447
+ background-color: var(--tl-color-panel);
2448
+ box-shadow: var(--tl-shadow-3);
2449
+ z-index: var(--tl-layer-menus);
2458
2450
  overflow: hidden;
2459
2451
  overflow-y: auto;
2460
2452
  touch-action: auto;
@@ -2467,22 +2459,22 @@ it from receiving any pointer events or affecting the cursor. */
2467
2459
 
2468
2460
  .tlui-menu-zone {
2469
2461
  position: relative;
2470
- z-index: var(--layer-panels);
2462
+ z-index: var(--tl-layer-panels);
2471
2463
  width: fit-content;
2472
- border-right: 2px solid var(--color-background);
2473
- border-bottom: 2px solid var(--color-background);
2474
- border-bottom-right-radius: var(--radius-4);
2475
- background-color: var(--color-low);
2464
+ border-right: 2px solid var(--tl-color-background);
2465
+ border-bottom: 2px solid var(--tl-color-background);
2466
+ border-bottom-right-radius: var(--tl-radius-4);
2467
+ background-color: var(--tl-color-low);
2476
2468
  }
2477
2469
 
2478
2470
  .tlui-menu-zone *[data-state='open']::after {
2479
- background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2471
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2480
2472
  opacity: 1;
2481
2473
  }
2482
2474
 
2483
2475
  @media (hover: hover) {
2484
2476
  .tlui-menu-zone *[data-state='open']:not(:hover)::after {
2485
- background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2477
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2486
2478
  opacity: 1;
2487
2479
  }
2488
2480
  }
@@ -2508,8 +2500,8 @@ it from receiving any pointer events or affecting the cursor. */
2508
2500
  align-items: center;
2509
2501
  width: 100%;
2510
2502
  height: 40px;
2511
- padding-left: var(--space-4);
2512
- border-bottom: 1px solid var(--color-divider);
2503
+ padding-left: var(--tl-space-4);
2504
+ border-bottom: 1px solid var(--tl-color-divider);
2513
2505
  }
2514
2506
 
2515
2507
  .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
@@ -2517,7 +2509,7 @@ it from receiving any pointer events or affecting the cursor. */
2517
2509
  }
2518
2510
 
2519
2511
  .tlui-page-menu__header__title {
2520
- color: var(--color-text);
2512
+ color: var(--tl-color-text);
2521
2513
  font-size: 12px;
2522
2514
  flex-grow: 2;
2523
2515
  }
@@ -2602,7 +2594,7 @@ it from receiving any pointer events or affecting the cursor. */
2602
2594
  display: inline-flex;
2603
2595
  align-items: center;
2604
2596
  justify-content: center;
2605
- color: var(--color-text);
2597
+ color: var(--tl-color-text);
2606
2598
  }
2607
2599
 
2608
2600
  .tlui-page_menu__item__sortable {
@@ -2615,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
2615
2607
  flex-direction: row;
2616
2608
  align-items: center;
2617
2609
  overflow: hidden;
2618
- z-index: var(--layer-above);
2610
+ z-index: var(--tl-layer-above);
2619
2611
  }
2620
2612
 
2621
2613
  .tlui-page_menu__item__sortable__title {
@@ -2627,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
2627
2619
  }
2628
2620
 
2629
2621
  .tlui-page_menu__item__sortable:focus-visible {
2630
- z-index: var(--layer-focused-input);
2622
+ z-index: var(--tl-layer-focused-input);
2631
2623
  }
2632
2624
 
2633
2625
  .tlui-page_menu__item__sortable__handle {
@@ -2636,7 +2628,7 @@ it from receiving any pointer events or affecting the cursor. */
2636
2628
  min-width: 0px;
2637
2629
  height: 40px;
2638
2630
  cursor: grab;
2639
- color: var(--color-text-3);
2631
+ color: var(--tl-color-text-3);
2640
2632
  flex-shrink: 0;
2641
2633
  margin-right: -9px;
2642
2634
  }
@@ -2678,13 +2670,13 @@ it from receiving any pointer events or affecting the cursor. */
2678
2670
  }
2679
2671
 
2680
2672
  .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
2681
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2673
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2682
2674
  opacity: 1;
2683
2675
  }
2684
2676
 
2685
2677
  @media (hover: hover) {
2686
2678
  .tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
2687
- background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2679
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2688
2680
  opacity: 1;
2689
2681
  }
2690
2682
  }
@@ -2720,7 +2712,7 @@ it from receiving any pointer events or affecting the cursor. */
2720
2712
  top: 48px;
2721
2713
  left: -9999px;
2722
2714
  padding: 8px 16px;
2723
- z-index: var(--layer-toasts);
2715
+ z-index: var(--tl-layer-toasts);
2724
2716
  }
2725
2717
 
2726
2718
  .tl-skip-to-main-content:focus {
@@ -2732,11 +2724,11 @@ it from receiving any pointer events or affecting the cursor. */
2732
2724
  .tlui-offline-indicator {
2733
2725
  display: flex;
2734
2726
  flex-direction: row;
2735
- gap: var(--space-3);
2736
- color: var(--color-text);
2737
- background-color: var(--color-low);
2738
- border: 3px solid var(--color-background);
2739
- padding: 0px var(--space-5);
2727
+ gap: var(--tl-space-3);
2728
+ color: var(--tl-color-text);
2729
+ background-color: var(--tl-color-low);
2730
+ border: 3px solid var(--tl-color-background);
2731
+ padding: 0px var(--tl-space-5);
2740
2732
  height: 42px;
2741
2733
  align-items: center;
2742
2734
  justify-content: center;
@@ -2751,10 +2743,10 @@ it from receiving any pointer events or affecting the cursor. */
2751
2743
  /* ------------------- Style panel ------------------ */
2752
2744
 
2753
2745
  .tlui-style-panel__wrapper {
2754
- box-shadow: var(--shadow-2);
2755
- border-radius: var(--radius-3);
2746
+ box-shadow: var(--tl-shadow-2);
2747
+ border-radius: var(--tl-radius-3);
2756
2748
  pointer-events: all;
2757
- background-color: var(--color-panel);
2749
+ background-color: var(--tl-color-panel);
2758
2750
  height: fit-content;
2759
2751
  max-height: 100%;
2760
2752
  margin: 8px;
@@ -2763,7 +2755,7 @@ it from receiving any pointer events or affecting the cursor. */
2763
2755
  overscroll-behavior: none;
2764
2756
  overflow-y: auto;
2765
2757
  overflow-x: hidden;
2766
- color: var(--color-text);
2758
+ color: var(--tl-color-text);
2767
2759
  }
2768
2760
  /* if the style panel is the only child (ie no share menu), increase the margin */
2769
2761
  .tlui-style-panel__wrapper:only-child {
@@ -2772,12 +2764,18 @@ it from receiving any pointer events or affecting the cursor. */
2772
2764
 
2773
2765
  .tlui-style-panel {
2774
2766
  position: relative;
2775
- z-index: var(--layer-panels);
2767
+ z-index: var(--tl-layer-panels);
2776
2768
  pointer-events: all;
2777
2769
  width: 148px;
2778
2770
  max-width: 148px;
2779
2771
  }
2780
2772
 
2773
+ .tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
2774
+ border-radius: 10px;
2775
+ outline: 2px solid var(--tl-color-text);
2776
+ outline-offset: -5px;
2777
+ }
2778
+
2781
2779
  .tlui-style-panel::-webkit-scrollbar {
2782
2780
  display: none;
2783
2781
  }
@@ -2793,7 +2791,7 @@ it from receiving any pointer events or affecting the cursor. */
2793
2791
  }
2794
2792
 
2795
2793
  .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
2796
- border-bottom: 1px solid var(--color-divider);
2794
+ border-bottom: 1px solid var(--tl-color-divider);
2797
2795
  }
2798
2796
 
2799
2797
  .tlui-style-panel__section:empty {
@@ -2802,23 +2800,19 @@ it from receiving any pointer events or affecting the cursor. */
2802
2800
 
2803
2801
  .tlui-style-panel__section__common:not(:only-child) {
2804
2802
  margin-bottom: 7px;
2805
- border-bottom: 1px solid var(--color-divider);
2803
+ border-bottom: 1px solid var(--tl-color-divider);
2806
2804
  }
2807
2805
 
2808
- .tlui-style-panel__row {
2809
- display: flex;
2810
- }
2811
- /* Only really used for the alignment picker */
2812
- .tlui-style-panel__row__extra-button {
2813
- margin-left: -2px;
2806
+ .tlui-style-panel__dropdown-picker:only-child {
2807
+ width: 100%;
2814
2808
  }
2815
2809
 
2816
2810
  .tlui-style-panel__double-select-picker {
2817
2811
  display: flex;
2818
2812
  grid-template-columns: 1fr auto;
2819
2813
  align-items: center;
2820
- padding-left: var(--space-4);
2821
- color: var(--color-text-1);
2814
+ padding-left: var(--tl-space-4);
2815
+ color: var(--tl-color-text-1);
2822
2816
  font-size: 12px;
2823
2817
  }
2824
2818
 
@@ -2832,25 +2826,45 @@ it from receiving any pointer events or affecting the cursor. */
2832
2826
 
2833
2827
  .tlui-style-panel .tlui-button[data-state='open']::after {
2834
2828
  opacity: 1;
2835
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2829
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2836
2830
  }
2837
2831
 
2838
2832
  @media (hover: hover) {
2839
2833
  .tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
2840
2834
  opacity: 1;
2841
- background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
2835
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2842
2836
  }
2843
2837
  }
2844
2838
 
2839
+ /* Accessibility subheadings */
2840
+
2841
+ .tlui-style-panel__section .tlui-style-panel__subheading,
2842
+ .tlui-style-panel__section__common .tlui-style-panel__subheading,
2843
+ .tlui-style-panel__subheading + .tlui-slider__container {
2844
+ margin: 0;
2845
+ padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
2846
+ font-size: 12px;
2847
+ font-weight: inherit;
2848
+ line-height: inherit;
2849
+ }
2850
+
2851
+ .tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
2852
+ padding-top: var(--tl-space-3);
2853
+ }
2854
+
2855
+ .tlui-style-panel__subheading + .tlui-slider__container {
2856
+ padding-top: 0px;
2857
+ }
2858
+
2845
2859
  /* --------------------- Bottom --------------------- */
2846
2860
 
2847
2861
  .tlui-layout__bottom {
2848
2862
  grid-row: 2;
2863
+ width: 100%;
2849
2864
  }
2850
2865
 
2851
2866
  .tlui-layout__bottom__main {
2852
2867
  width: 100%;
2853
- position: relative;
2854
2868
  display: flex;
2855
2869
  align-items: flex-end;
2856
2870
  justify-content: center;
@@ -2862,11 +2876,10 @@ it from receiving any pointer events or affecting the cursor. */
2862
2876
  display: flex;
2863
2877
  width: min-content;
2864
2878
  flex-direction: column;
2865
- z-index: var(--layer-panels);
2879
+ z-index: var(--tl-layer-panels);
2866
2880
  pointer-events: all;
2867
2881
  position: absolute;
2868
2882
  left: 0px;
2869
- bottom: 0px;
2870
2883
  }
2871
2884
 
2872
2885
  .tlui-navigation-panel::before {
@@ -2876,10 +2889,10 @@ it from receiving any pointer events or affecting the cursor. */
2876
2889
  z-index: -1;
2877
2890
  inset: -2px -2px 0px 0px;
2878
2891
  border-radius: 0;
2879
- border-top: 2px solid var(--color-background);
2880
- border-right: 2px solid var(--color-background);
2881
- border-top-right-radius: var(--radius-4);
2882
- background-color: var(--color-low);
2892
+ border-top: 2px solid var(--tl-color-background);
2893
+ border-right: 2px solid var(--tl-color-background);
2894
+ border-top-right-radius: var(--tl-radius-4);
2895
+ background-color: var(--tl-color-low);
2883
2896
  }
2884
2897
 
2885
2898
  .tlui-navigation-panel[data-a11y='true']::before {
@@ -2893,7 +2906,7 @@ it from receiving any pointer events or affecting the cursor. */
2893
2906
  height: 96px;
2894
2907
  min-height: 96px;
2895
2908
  overflow: hidden;
2896
- padding: var(--space-3);
2909
+ padding: var(--tl-space-3);
2897
2910
  padding-top: 0px;
2898
2911
  }
2899
2912
 
@@ -2906,114 +2919,220 @@ it from receiving any pointer events or affecting the cursor. */
2906
2919
  /* --------------------- Toolbar -------------------- */
2907
2920
 
2908
2921
  /* Wide container */
2909
- .tlui-toolbar {
2922
+ .tlui-main-toolbar {
2910
2923
  grid-column: 1 / span 3;
2911
2924
  grid-row: 1;
2912
2925
  display: flex;
2913
2926
  align-items: center;
2914
2927
  justify-content: center;
2915
2928
  flex-grow: 2;
2916
- padding-bottom: calc(var(--space-3) + var(--sab));
2929
+ }
2930
+
2931
+ .tlui-main-toolbar--horizontal {
2932
+ padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
2933
+ max-width: 100%;
2934
+ }
2935
+
2936
+ .tlui-main-toolbar--vertical {
2937
+ position: absolute;
2938
+ left: 0;
2939
+ top: 90px; /* height of page menu + 'back to content' button */
2940
+ bottom: 140px; /* height of expanded mini-map */
2941
+ padding-left: calc(var(--tl-space-3) + var(--tl-sab));
2942
+ }
2943
+
2944
+ [data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
2945
+ bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
2917
2946
  }
2918
2947
 
2919
2948
  /* Centered Content */
2920
- .tlui-toolbar__inner {
2949
+ .tlui-main-toolbar__inner {
2921
2950
  position: relative;
2922
2951
  width: fit-content;
2923
2952
  display: flex;
2924
- gap: var(--space-3);
2925
- align-items: flex-end;
2953
+ gap: var(--tl-space-3);
2954
+ align-items: flex-start;
2926
2955
  }
2927
2956
 
2928
- .tlui-toolbar__left {
2957
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
2958
+ flex-direction: column;
2959
+ }
2960
+
2961
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
2929
2962
  width: fit-content;
2930
2963
  }
2964
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__left {
2965
+ display: flex;
2966
+ height: fit-content;
2967
+ }
2931
2968
 
2932
2969
  /* Row of controls + lock button */
2933
- .tlui-toolbar__extras {
2970
+ .tlui-main-toolbar__extras {
2934
2971
  position: relative;
2935
- z-index: var(--layer-above);
2936
- width: 100%;
2972
+ z-index: var(--tl-layer-above);
2937
2973
  pointer-events: none;
2938
- top: 6px;
2939
- height: 48px;
2974
+ align-self: stretch;
2940
2975
  }
2941
2976
 
2942
- .tlui-toolbar__extras:empty {
2977
+ .tlui-main-toolbar__extras:empty {
2943
2978
  display: none;
2944
2979
  }
2945
2980
 
2946
- .tlui-toolbar__extras__controls {
2947
- display: flex;
2981
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
2982
+ height: 48px;
2983
+ top: 6px;
2984
+ }
2985
+
2986
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
2987
+ width: 48px;
2988
+ order: 1;
2989
+ }
2990
+
2991
+ .tlui-main-toolbar__extras__controls {
2948
2992
  position: relative;
2949
- flex-direction: row;
2950
- z-index: var(--layer-above);
2951
- background-color: var(--color-low);
2952
- border-top-left-radius: var(--radius-4);
2953
- border-top-right-radius: var(--radius-4);
2954
- border: 2px solid var(--color-background);
2993
+ z-index: var(--tl-layer-above);
2994
+ background-color: var(--tl-color-low);
2995
+ border: 2px solid var(--tl-color-background);
2996
+ pointer-events: all;
2997
+ }
2998
+
2999
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
3000
+ border-top-left-radius: var(--tl-radius-4);
3001
+ border-top-right-radius: var(--tl-radius-4);
2955
3002
  margin-left: 8px;
2956
3003
  margin-right: 0px;
2957
- pointer-events: all;
2958
3004
  width: fit-content;
2959
3005
  }
2960
3006
 
2961
- .tlui-toolbar__tools {
2962
- display: flex;
2963
- flex-direction: row;
2964
- align-items: center;
2965
- border-radius: var(--radius-4);
2966
- z-index: var(--layer-panels);
3007
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
3008
+ border-top-right-radius: var(--tl-radius-4);
3009
+ border-bottom-right-radius: var(--tl-radius-4);
3010
+ margin-top: 8px;
3011
+ margin-left: -2px;
3012
+ margin-bottom: 0px;
3013
+ width: fit-content;
3014
+ }
3015
+
3016
+ .tlui-main-toolbar__tools {
3017
+ border-radius: var(--tl-radius-4);
3018
+ z-index: var(--tl-layer-panels);
2967
3019
  pointer-events: all;
2968
3020
  position: relative;
2969
- background: var(--color-panel);
2970
- box-shadow: var(--shadow-2);
3021
+ background: var(--tl-color-panel);
3022
+ box-shadow: var(--tl-shadow-2);
2971
3023
  }
2972
- .tlui-toolbar__tools__list {
2973
- display: flex;
2974
- flex-direction: row;
2975
- align-items: center;
3024
+
3025
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
3026
+ align-self: flex-end;
3027
+ }
3028
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
3029
+ align-self: flex-start;
2976
3030
  }
2977
3031
 
2978
- .tlui-toolbar__overflow {
3032
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2979
3033
  width: 40px;
3034
+ margin-left: 2px;
3035
+ }
3036
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
3037
+ height: 40px;
3038
+ margin-top: 2px;
2980
3039
  }
2981
3040
 
2982
- .tlui-layout__mobile .tlui-toolbar__overflow {
3041
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2983
3042
  width: 32px;
2984
3043
  padding: 0px;
2985
3044
  }
2986
3045
 
2987
- .tlui-toolbar *[data-state='open']::after {
2988
- background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
3046
+ .tlui-main-toolbar--horizontal *[data-state='open']::after {
3047
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2989
3048
  opacity: 1;
2990
3049
  }
3050
+ .tlui-main-toolbar--vertical *[data-state='open']::after {
3051
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3052
+ opacity: 1;
3053
+ }
3054
+
3055
+ .tlui-main-toolbar__overflow-content {
3056
+ touch-action: none;
3057
+ }
3058
+
3059
+ .tlui-main-toolbar__tools [data-toolbar-visible='false'],
3060
+ .tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
3061
+ display: none;
3062
+ }
3063
+
3064
+ .tlui-main-toolbar__group:empty {
3065
+ display: none;
3066
+ }
3067
+ .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3068
+ border-right: 1px solid var(--color-divider);
3069
+ margin-right: 2px;
3070
+ }
3071
+ .tlui-column.tlui-main-toolbar__group:not(
3072
+ :nth-last-child(-n + 1 of [data-toolbar-visible='true'])
3073
+ ) {
3074
+ border-bottom: 1px solid var(--color-divider);
3075
+ margin-bottom: 2px;
3076
+ }
3077
+ .tlui-grid.tlui-main-toolbar__group {
3078
+ grid-column: 1 / span 4;
3079
+ }
3080
+ .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3081
+ border-bottom: 1px solid var(--color-divider);
3082
+ margin-bottom: 2px;
3083
+ }
2991
3084
 
2992
3085
  @media (hover: hover) {
2993
- .tlui-toolbar *[data-state='open']:not(:hover)::after {
2994
- background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
3086
+ .tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
3087
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
2995
3088
  opacity: 1;
2996
3089
  }
3090
+ .tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
3091
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
3092
+ opacity: 1;
3093
+ }
3094
+ }
3095
+
3096
+ /* ------------------- Tooltip -------------------- */
3097
+
3098
+ .tlui-tooltip {
3099
+ font-size: 12px;
3100
+ padding: 2px 8px;
3101
+ border-radius: 4px;
3102
+ background-color: var(--tl-color-tooltip);
3103
+ box-shadow: none;
3104
+ color: var(--tl-color-text-shadow);
3105
+ max-width: 400px;
3106
+ width: fit-content;
3107
+ text-align: center;
3108
+ will-change: transform, opacity;
3109
+ z-index: 2;
2997
3110
  }
2998
3111
 
2999
- .tlui-layout__mobile .tlui-toolbar {
3000
- transition: transform 0.15s ease-out 0.05s;
3112
+ .tlui-tooltip__arrow {
3113
+ fill: var(--tl-color-tooltip);
3114
+ will-change: opacity;
3115
+ }
3116
+
3117
+ [data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
3118
+ z-index: var(--tl-layer-toasts) !important;
3119
+ pointer-events: none;
3001
3120
  }
3002
3121
 
3003
3122
  /* ------------------- Debug panel ------------------ */
3004
3123
 
3005
3124
  .tlui-debug-panel {
3006
- background-color: var(--color-low);
3125
+ background-color: var(--tl-color-low);
3007
3126
  width: 100%;
3008
3127
  display: grid;
3009
3128
  align-items: center;
3010
3129
  grid-template-columns: 1fr auto auto auto;
3011
3130
  justify-content: space-between;
3012
- padding-left: var(--space-4);
3013
- border-top: 1px solid var(--color-background);
3131
+ padding-left: var(--tl-space-4);
3132
+ border-top: 1px solid var(--tl-color-background);
3014
3133
  font-size: 12px;
3015
- color: var(--color-text-1);
3016
- z-index: var(--layer-panels);
3134
+ color: var(--tl-color-text-1);
3135
+ z-index: var(--tl-layer-panels);
3017
3136
  pointer-events: all;
3018
3137
  }
3019
3138
 
@@ -3029,7 +3148,7 @@ it from receiving any pointer events or affecting the cursor. */
3029
3148
 
3030
3149
  .tlui-debug-panel__fps__slow {
3031
3150
  font-weight: bold;
3032
- color: var(--color-danger);
3151
+ color: var(--tl-color-danger);
3033
3152
  }
3034
3153
 
3035
3154
  .tlui-a11y-audit {
@@ -3039,7 +3158,7 @@ it from receiving any pointer events or affecting the cursor. */
3039
3158
  .tlui-a11y-audit th,
3040
3159
  .tlui-a11y-audit td {
3041
3160
  padding: 8px;
3042
- border: 1px solid var(--color-low-border);
3161
+ border: 1px solid var(--tl-color-low-border);
3043
3162
  }
3044
3163
 
3045
3164
  /* --------------------- Toasts --------------------- */
@@ -3052,10 +3171,10 @@ it from receiving any pointer events or affecting the cursor. */
3052
3171
  align-items: flex-end;
3053
3172
  justify-content: flex-end;
3054
3173
  flex-direction: column;
3055
- gap: var(--space-3);
3174
+ gap: var(--tl-space-3);
3056
3175
  pointer-events: none;
3057
- padding: 0px var(--space-3) 64px 0px;
3058
- z-index: var(--layer-toasts);
3176
+ padding: 0px var(--tl-space-3) 64px 0px;
3177
+ z-index: var(--tl-layer-toasts);
3059
3178
  }
3060
3179
 
3061
3180
  .tlui-toast__viewport > * {
@@ -3064,34 +3183,34 @@ it from receiving any pointer events or affecting the cursor. */
3064
3183
 
3065
3184
  .tlui-toast__icon {
3066
3185
  padding-top: 11px;
3067
- padding-left: var(--space-4);
3068
- color: var(--color-text-1);
3186
+ padding-left: var(--tl-space-4);
3187
+ color: var(--tl-color-text-1);
3069
3188
  }
3070
3189
 
3071
3190
  .tlui-toast__container {
3072
3191
  min-width: 200px;
3073
3192
  display: flex;
3074
3193
  flex-direction: row;
3075
- background-color: var(--color-panel);
3076
- box-shadow: var(--shadow-2);
3077
- border-radius: var(--radius-3);
3194
+ background-color: var(--tl-color-panel);
3195
+ box-shadow: var(--tl-shadow-2);
3196
+ border-radius: var(--tl-radius-3);
3078
3197
  font-size: 12px;
3079
3198
  }
3080
3199
 
3081
3200
  .tlui-toast__container[data-severity='success'] .tlui-icon {
3082
- color: var(--color-success);
3201
+ color: var(--tl-color-success);
3083
3202
  }
3084
3203
 
3085
3204
  .tlui-toast__container[data-severity='info'] .tlui-icon {
3086
- color: var(--color-info);
3205
+ color: var(--tl-color-info);
3087
3206
  }
3088
3207
 
3089
3208
  .tlui-toast__container[data-severity='warning'] .tlui-icon {
3090
- color: var(--color-warning);
3209
+ color: var(--tl-color-warning);
3091
3210
  }
3092
3211
 
3093
3212
  .tlui-toast__container[data-severity='error'] .tlui-icon {
3094
- color: var(--color-danger);
3213
+ color: var(--tl-color-danger);
3095
3214
  }
3096
3215
 
3097
3216
  .tlui-toast__main {
@@ -3100,27 +3219,27 @@ it from receiving any pointer events or affecting the cursor. */
3100
3219
  }
3101
3220
 
3102
3221
  .tlui-toast__content {
3103
- padding: var(--space-4);
3222
+ padding: var(--tl-space-4);
3104
3223
  display: flex;
3105
3224
  line-height: 1.4;
3106
3225
  flex-direction: column;
3107
- gap: var(--space-3);
3226
+ gap: var(--tl-space-3);
3108
3227
  }
3109
3228
 
3110
3229
  .tlui-toast__main[data-actions='true'] .tlui-toast__content {
3111
- padding-bottom: var(--space-2);
3230
+ padding-bottom: var(--tl-space-2);
3112
3231
  }
3113
3232
 
3114
3233
  .tlui-toast__title {
3115
3234
  font-weight: bold;
3116
- color: var(--color-text-1);
3235
+ color: var(--tl-color-text-1);
3117
3236
  /* this makes the default toast look better */
3118
3237
  line-height: 16px;
3119
3238
  }
3120
3239
 
3121
3240
  .tlui-toast__description {
3122
- color: var(--color-text-1);
3123
- padding: var(--space-3);
3241
+ color: var(--tl-color-text-1);
3242
+ padding: var(--tl-space-3);
3124
3243
  margin: 0px;
3125
3244
  padding: 0px;
3126
3245
  }
@@ -3172,14 +3291,14 @@ it from receiving any pointer events or affecting the cursor. */
3172
3291
  left: 0px;
3173
3292
  width: 100%;
3174
3293
  height: 100%;
3175
- z-index: var(--layer-canvas-overlays);
3176
- background-color: var(--color-overlay);
3294
+ z-index: var(--tl-layer-canvas-overlays);
3295
+ background-color: var(--tl-color-overlay);
3177
3296
  pointer-events: all;
3178
3297
  animation: tl-fade-in 0.12s ease-out;
3179
3298
  display: grid;
3180
3299
  place-items: center;
3181
3300
  overflow-y: auto;
3182
- padding: 0px var(--space-3);
3301
+ padding: 0px var(--tl-space-3);
3183
3302
  }
3184
3303
 
3185
3304
  .tlui-dialog__content {
@@ -3187,9 +3306,9 @@ it from receiving any pointer events or affecting the cursor. */
3187
3306
  flex-direction: column;
3188
3307
  position: relative;
3189
3308
  cursor: default;
3190
- background-color: var(--color-panel);
3191
- box-shadow: var(--shadow-3);
3192
- border-radius: var(--radius-3);
3309
+ background-color: var(--tl-color-panel);
3310
+ box-shadow: var(--tl-shadow-3);
3311
+ border-radius: var(--tl-radius-3);
3193
3312
  font-size: 12px;
3194
3313
  overflow: hidden;
3195
3314
  min-width: 300px;
@@ -3202,9 +3321,9 @@ it from receiving any pointer events or affecting the cursor. */
3202
3321
  display: flex;
3203
3322
  align-items: center;
3204
3323
  flex: 0;
3205
- z-index: var(--layer-header-footer);
3206
- padding-left: var(--space-4);
3207
- color: var(--color-text);
3324
+ z-index: var(--tl-layer-header-footer);
3325
+ padding-left: var(--tl-space-4);
3326
+ color: var(--tl-color-text);
3208
3327
  height: 40px;
3209
3328
  }
3210
3329
 
@@ -3213,7 +3332,7 @@ it from receiving any pointer events or affecting the cursor. */
3213
3332
  font-weight: inherit;
3214
3333
  font-size: 12px;
3215
3334
  margin: 0px;
3216
- color: var(--color-text-1);
3335
+ color: var(--tl-color-text-1);
3217
3336
  }
3218
3337
 
3219
3338
  .tlui-dialog__header__close {
@@ -3221,16 +3340,16 @@ it from receiving any pointer events or affecting the cursor. */
3221
3340
  }
3222
3341
 
3223
3342
  .tlui-dialog__body {
3224
- padding: var(--space-4) var(--space-4);
3343
+ padding: var(--tl-space-4) var(--tl-space-4);
3225
3344
  flex: 0 1;
3226
3345
  overflow-y: auto;
3227
3346
  overflow-x: hidden;
3228
- color: var(--color-text-1);
3347
+ color: var(--tl-color-text-1);
3229
3348
  user-select: all;
3230
3349
  -webkit-user-select: text;
3231
3350
  }
3232
3351
  .tlui-dialog__body a {
3233
- color: var(--color-selected);
3352
+ color: var(--tl-color-selected);
3234
3353
  }
3235
3354
 
3236
3355
  .tlui-dialog__body ul,
@@ -3238,13 +3357,13 @@ it from receiving any pointer events or affecting the cursor. */
3238
3357
  padding-left: 16px;
3239
3358
  display: flex;
3240
3359
  flex-direction: column;
3241
- gap: var(--space-2);
3360
+ gap: var(--tl-space-2);
3242
3361
  }
3243
3362
 
3244
3363
  .tlui-dialog__footer {
3245
3364
  position: relative;
3246
3365
  min-height: 12px;
3247
- z-index: var(--layer-header-footer);
3366
+ z-index: var(--tl-layer-header-footer);
3248
3367
  }
3249
3368
 
3250
3369
  .tlui-dialog__footer__actions {
@@ -3264,15 +3383,15 @@ it from receiving any pointer events or affecting the cursor. */
3264
3383
  .tlui-edit-link-dialog {
3265
3384
  display: flex;
3266
3385
  flex-direction: column;
3267
- gap: var(--space-4);
3268
- color: var(--color-text);
3386
+ gap: var(--tl-space-4);
3387
+ color: var(--tl-color-text);
3269
3388
  }
3270
3389
 
3271
3390
  .tlui-edit-link-dialog__input {
3272
- background-color: var(--color-muted-2);
3391
+ background-color: var(--tl-color-muted-2);
3273
3392
  flex-grow: 2;
3274
- border-radius: var(--radius-2);
3275
- padding: 0px var(--space-4);
3393
+ border-radius: var(--tl-radius-2);
3394
+ padding: 0px var(--tl-space-4);
3276
3395
  }
3277
3396
 
3278
3397
  /* Embed Dialog */
@@ -3280,15 +3399,15 @@ it from receiving any pointer events or affecting the cursor. */
3280
3399
  .tlui-embed__spacer {
3281
3400
  flex-grow: 2;
3282
3401
  min-height: 0px;
3283
- margin-left: calc(-1 * var(--space-4));
3284
- margin-top: calc(-1 * var(--space-4));
3402
+ margin-left: calc(-1 * var(--tl-space-4));
3403
+ margin-top: calc(-1 * var(--tl-space-4));
3285
3404
  pointer-events: none;
3286
3405
  }
3287
3406
 
3288
3407
  .tlui-embed-dialog__list {
3289
3408
  display: flex;
3290
3409
  flex-direction: column;
3291
- padding: 0px var(--space-3) var(--space-4) var(--space-3);
3410
+ padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
3292
3411
  }
3293
3412
 
3294
3413
  .tlui-embed-dialog__item__image {
@@ -3300,49 +3419,49 @@ it from receiving any pointer events or affecting the cursor. */
3300
3419
  background-size: contain;
3301
3420
  background-repeat: no-repeat;
3302
3421
  background-position: center center;
3303
- background-color: var(--color-selected-contrast);
3304
- border-radius: var(--radius-1);
3422
+ background-color: var(--tl-color-selected-contrast);
3423
+ border-radius: var(--tl-radius-1);
3305
3424
  }
3306
3425
 
3307
3426
  .tlui-embed-dialog__enter {
3308
3427
  display: flex;
3309
3428
  flex-direction: column;
3310
- gap: var(--space-4);
3311
- color: var(--color-text-1);
3429
+ gap: var(--tl-space-4);
3430
+ color: var(--tl-color-text-1);
3312
3431
  }
3313
3432
 
3314
3433
  .tlui-embed-dialog__input {
3315
- background-color: var(--color-muted-2);
3434
+ background-color: var(--tl-color-muted-2);
3316
3435
  flex-grow: 2;
3317
- border-radius: var(--radius-2);
3318
- padding: 0px var(--space-4);
3436
+ border-radius: var(--tl-radius-2);
3437
+ padding: 0px var(--tl-space-4);
3319
3438
  }
3320
3439
 
3321
3440
  .tlui-embed-dialog__warning {
3322
- color: var(--color-danger);
3441
+ color: var(--tl-color-danger);
3323
3442
  text-shadow: none;
3324
3443
  }
3325
3444
 
3326
3445
  .tlui-embed-dialog__instruction__link {
3327
3446
  display: flex;
3328
- gap: var(--space-1);
3329
- margin-top: var(--space-4);
3447
+ gap: var(--tl-space-1);
3448
+ margin-top: var(--tl-space-4);
3330
3449
  }
3331
3450
 
3332
3451
  .tlui-embed-dialog__enter a {
3333
- color: var(--color-text-1);
3452
+ color: var(--tl-color-text-1);
3334
3453
  }
3335
3454
 
3336
3455
  /* --------------- Keyboard shortcuts --------------- */
3337
3456
 
3338
3457
  .tlui-shortcuts-dialog__header {
3339
- border-bottom: 1px solid var(--color-divider);
3458
+ border-bottom: 1px solid var(--tl-color-divider);
3340
3459
  }
3341
3460
 
3342
3461
  .tlui-shortcuts-dialog__body {
3343
3462
  position: relative;
3344
3463
  columns: 3;
3345
- column-gap: var(--space-9);
3464
+ column-gap: var(--tl-space-9);
3346
3465
  pointer-events: all;
3347
3466
  touch-action: auto;
3348
3467
 
@@ -3360,14 +3479,14 @@ it from receiving any pointer events or affecting the cursor. */
3360
3479
 
3361
3480
  .tlui-shortcuts-dialog__group {
3362
3481
  break-inside: avoid-column;
3363
- padding-bottom: var(--space-6);
3482
+ padding-bottom: var(--tl-space-6);
3364
3483
  }
3365
3484
 
3366
3485
  .tlui-shortcuts-dialog__group__title {
3367
3486
  font-size: inherit;
3368
3487
  font-weight: inherit;
3369
3488
  margin: 0px;
3370
- color: var(--color-text-3);
3489
+ color: var(--tl-color-text-3);
3371
3490
  height: 32px;
3372
3491
  display: flex;
3373
3492
  align-items: center;
@@ -3376,12 +3495,12 @@ it from receiving any pointer events or affecting the cursor. */
3376
3495
  .tlui-shortcuts-dialog__group__content {
3377
3496
  display: flex;
3378
3497
  flex-direction: column;
3379
- color: var(--color-text-1);
3498
+ color: var(--tl-color-text-1);
3380
3499
  }
3381
3500
 
3382
3501
  .tlui-shortcuts-dialog__key-pair {
3383
3502
  display: flex;
3384
- gap: var(--space-4);
3503
+ gap: var(--tl-space-4);
3385
3504
  align-items: center;
3386
3505
  justify-content: space-between;
3387
3506
  height: 32px;
@@ -3408,12 +3527,12 @@ it from receiving any pointer events or affecting the cursor. */
3408
3527
  height: 24px;
3409
3528
  background: linear-gradient(
3410
3529
  to bottom,
3411
- var(--color-panel-transparent) 0%,
3412
- var(--color-panel) 90%,
3413
- var(--color-panel) 100%
3530
+ var(--tl-color-panel-transparent) 0%,
3531
+ var(--tl-color-panel) 90%,
3532
+ var(--tl-color-panel) 100%
3414
3533
  );
3415
- border-bottom-left-radius: var(--radius-3);
3416
- border-bottom-right-radius: var(--radius-3);
3534
+ border-bottom-left-radius: var(--tl-radius-3);
3535
+ border-bottom-right-radius: var(--tl-radius-3);
3417
3536
  pointer-events: none;
3418
3537
  }
3419
3538
 
@@ -3428,10 +3547,10 @@ it from receiving any pointer events or affecting the cursor. */
3428
3547
  .tlui-help-menu {
3429
3548
  pointer-events: all;
3430
3549
  position: absolute;
3431
- bottom: var(--space-2);
3432
- right: var(--space-2);
3433
- z-index: var(--layer-panels);
3434
- border: 2px solid var(--color-background);
3550
+ bottom: var(--tl-space-2);
3551
+ right: var(--tl-space-2);
3552
+ z-index: var(--tl-layer-panels);
3553
+ border: 2px solid var(--tl-color-background);
3435
3554
  border-radius: 100%;
3436
3555
  }
3437
3556
 
@@ -3442,7 +3561,7 @@ it from receiving any pointer events or affecting the cursor. */
3442
3561
  display: flex;
3443
3562
  flex-direction: row;
3444
3563
  justify-content: flex-end;
3445
- z-index: var(--layer-panels);
3564
+ z-index: var(--tl-layer-panels);
3446
3565
  align-items: center;
3447
3566
  padding-top: 2px;
3448
3567
  padding-right: 4px;
@@ -3458,7 +3577,7 @@ it from receiving any pointer events or affecting the cursor. */
3458
3577
  border: none;
3459
3578
  cursor: pointer;
3460
3579
  pointer-events: all;
3461
- border-radius: var(--radius-1);
3580
+ border-radius: var(--tl-radius-1);
3462
3581
  padding-right: 1px;
3463
3582
  height: 100%;
3464
3583
  }
@@ -3471,8 +3590,8 @@ it from receiving any pointer events or affecting the cursor. */
3471
3590
  .tlui-people-menu__avatar {
3472
3591
  height: 24px;
3473
3592
  width: 24px;
3474
- border: 2px solid var(--color-background);
3475
- background-color: var(--color-low);
3593
+ border: 2px solid var(--tl-color-background);
3594
+ background-color: var(--tl-color-low);
3476
3595
  border-radius: 100%;
3477
3596
  display: flex;
3478
3597
  align-items: center;
@@ -3481,7 +3600,7 @@ it from receiving any pointer events or affecting the cursor. */
3481
3600
  font-size: 10px;
3482
3601
  font-weight: bold;
3483
3602
  text-align: center;
3484
- color: var(--color-selected-contrast);
3603
+ color: var(--tl-color-selected-contrast);
3485
3604
  z-index: 2;
3486
3605
  }
3487
3606
 
@@ -3495,7 +3614,7 @@ it from receiving any pointer events or affecting the cursor. */
3495
3614
 
3496
3615
  @media (hover: hover) {
3497
3616
  .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
3498
- border-color: var(--color-low);
3617
+ border-color: var(--tl-color-low);
3499
3618
  }
3500
3619
  }
3501
3620
 
@@ -3503,12 +3622,12 @@ it from receiving any pointer events or affecting the cursor. */
3503
3622
  min-width: 0px;
3504
3623
  font-size: 11px;
3505
3624
  font-weight: 600;
3506
- color: var(--color-text-1);
3625
+ color: var(--tl-color-text-1);
3507
3626
  font-family: inherit;
3508
3627
  padding: 0px 4px;
3509
3628
  }
3510
3629
  .tlui-people-menu__more::after {
3511
- border-radius: var(--radius-2);
3630
+ border-radius: var(--tl-radius-2);
3512
3631
  inset: 0px;
3513
3632
  }
3514
3633
 
@@ -3537,7 +3656,7 @@ it from receiving any pointer events or affecting the cursor. */
3537
3656
  }
3538
3657
 
3539
3658
  .tlui-people-menu__section:not(:last-child) {
3540
- border-bottom: 1px solid var(--color-divider);
3659
+ border-bottom: 1px solid var(--tl-color-divider);
3541
3660
  }
3542
3661
 
3543
3662
  .tlui-people-menu__user {
@@ -3556,7 +3675,7 @@ it from receiving any pointer events or affecting the cursor. */
3556
3675
  text-overflow: ellipsis;
3557
3676
  white-space: nowrap;
3558
3677
  font-size: 12px;
3559
- color: var(--color-text-1);
3678
+ color: var(--tl-color-text-1);
3560
3679
  max-width: 100%;
3561
3680
  flex-grow: 1;
3562
3681
  flex-shrink: 100;
@@ -3568,7 +3687,7 @@ it from receiving any pointer events or affecting the cursor. */
3568
3687
  text-overflow: ellipsis;
3569
3688
  white-space: nowrap;
3570
3689
  font-size: 12px;
3571
- color: var(--color-text-3);
3690
+ color: var(--tl-color-text-3);
3572
3691
  flex-grow: 100;
3573
3692
  flex-shrink: 0;
3574
3693
  margin-left: 4px;
@@ -3659,7 +3778,7 @@ it from receiving any pointer events or affecting the cursor. */
3659
3778
  inset: 0px;
3660
3779
  border-width: 2px;
3661
3780
  border-style: solid;
3662
- z-index: var(--layer-following-indicator);
3781
+ z-index: var(--tl-layer-following-indicator);
3663
3782
  pointer-events: none;
3664
3783
  }
3665
3784
 
@@ -3678,7 +3797,7 @@ it from receiving any pointer events or affecting the cursor. */
3678
3797
  }
3679
3798
 
3680
3799
  .tlui-contextual-toolbar [data-isactive='true']::after {
3681
- background-color: var(--color-muted-2);
3800
+ background-color: var(--tl-color-muted-2);
3682
3801
  opacity: 1;
3683
3802
  }
3684
3803
 
@@ -3694,7 +3813,7 @@ it from receiving any pointer events or affecting the cursor. */
3694
3813
 
3695
3814
  .tlui-contextual-toolbar[data-visible='true'] {
3696
3815
  opacity: 1;
3697
- z-index: var(--layer-menus);
3816
+ z-index: var(--tl-layer-menus);
3698
3817
  }
3699
3818
 
3700
3819
  .tlui-contextual-toolbar[data-interactive='true'],
@@ -3753,7 +3872,7 @@ it from receiving any pointer events or affecting the cursor. */
3753
3872
 
3754
3873
  @keyframes tlui-slide-in {
3755
3874
  from {
3756
- transform: translateX(calc(100% + var(--space-3)));
3875
+ transform: translateX(calc(100% + var(--tl-space-3)));
3757
3876
  }
3758
3877
  to {
3759
3878
  transform: translateX(0px);
@@ -3765,7 +3884,7 @@ it from receiving any pointer events or affecting the cursor. */
3765
3884
  transform: translateX(var(--radix-toast-swipe-end-x));
3766
3885
  }
3767
3886
  to {
3768
- transform: translateX(calc(100% + var(--space-3)));
3887
+ transform: translateX(calc(100% + var(--tl-space-3)));
3769
3888
  }
3770
3889
  }
3771
3890