@tldraw/editor 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d04b7fc312b4
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.
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +1 -1
- package/dist-cjs/lib/components/default-components/DefaultScribble.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +9 -1
- package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +2 -2
- package/dist-cjs/lib/license/Watermark.js +6 -6
- package/dist-cjs/lib/license/Watermark.js.map +1 -1
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +1 -1
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +9 -1
- package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +2 -2
- package/dist-esm/lib/license/Watermark.mjs +6 -6
- package/dist-esm/lib/license/Watermark.mjs.map +1 -1
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +293 -290
- package/package.json +7 -7
- package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +1 -1
- package/src/lib/components/default-components/DefaultScribble.tsx +1 -1
- package/src/lib/components/default-components/DefaultShapeIndicator.tsx +5 -1
- package/src/lib/license/Watermark.tsx +6 -6
- package/src/version.ts +3 -3
package/editor.css
CHANGED
|
@@ -5,57 +5,57 @@
|
|
|
5
5
|
height: 100%;
|
|
6
6
|
font-size: 12px;
|
|
7
7
|
/* Spacing */
|
|
8
|
-
--space-1: 2px;
|
|
9
|
-
--space-2: 4px;
|
|
10
|
-
--space-3: 8px;
|
|
11
|
-
--space-4: 12px;
|
|
12
|
-
--space-5: 16px;
|
|
13
|
-
--space-6: 20px;
|
|
14
|
-
--space-7: 28px;
|
|
15
|
-
--space-8: 32px;
|
|
16
|
-
--space-9: 64px;
|
|
17
|
-
--space-10: 72px;
|
|
8
|
+
--tl-space-1: 2px;
|
|
9
|
+
--tl-space-2: 4px;
|
|
10
|
+
--tl-space-3: 8px;
|
|
11
|
+
--tl-space-4: 12px;
|
|
12
|
+
--tl-space-5: 16px;
|
|
13
|
+
--tl-space-6: 20px;
|
|
14
|
+
--tl-space-7: 28px;
|
|
15
|
+
--tl-space-8: 32px;
|
|
16
|
+
--tl-space-9: 64px;
|
|
17
|
+
--tl-space-10: 72px;
|
|
18
18
|
/* Radius */
|
|
19
|
-
--radius-0: 2px;
|
|
20
|
-
--radius-1: 4px;
|
|
21
|
-
--radius-2: 6px;
|
|
22
|
-
--radius-3: 9px;
|
|
23
|
-
--radius-4: 11px;
|
|
19
|
+
--tl-radius-0: 2px;
|
|
20
|
+
--tl-radius-1: 4px;
|
|
21
|
+
--tl-radius-2: 6px;
|
|
22
|
+
--tl-radius-3: 9px;
|
|
23
|
+
--tl-radius-4: 11px;
|
|
24
24
|
|
|
25
25
|
/* Canvas z-index */
|
|
26
|
-
--layer-canvas-hidden: -999999;
|
|
27
|
-
--layer-canvas-background: 100;
|
|
28
|
-
--layer-canvas-grid: 150;
|
|
29
|
-
--layer-watermark: 200;
|
|
30
|
-
--layer-canvas-shapes: 300;
|
|
31
|
-
--layer-canvas-overlays: 500;
|
|
32
|
-
--layer-canvas-blocker: 10000;
|
|
26
|
+
--tl-layer-canvas-hidden: -999999;
|
|
27
|
+
--tl-layer-canvas-background: 100;
|
|
28
|
+
--tl-layer-canvas-grid: 150;
|
|
29
|
+
--tl-layer-watermark: 200;
|
|
30
|
+
--tl-layer-canvas-shapes: 300;
|
|
31
|
+
--tl-layer-canvas-overlays: 500;
|
|
32
|
+
--tl-layer-canvas-blocker: 10000;
|
|
33
33
|
|
|
34
34
|
/* Canvas overlays z-index */
|
|
35
|
-
--layer-overlays-collaborator-scribble: 10;
|
|
36
|
-
--layer-overlays-collaborator-brush: 20;
|
|
37
|
-
--layer-overlays-collaborator-shape-indicator: 30;
|
|
38
|
-
--layer-overlays-user-scribble: 40;
|
|
39
|
-
--layer-overlays-user-brush: 50;
|
|
40
|
-
--layer-overlays-user-snapline: 90;
|
|
41
|
-
--layer-overlays-selection-fg: 100;
|
|
35
|
+
--tl-layer-overlays-collaborator-scribble: 10;
|
|
36
|
+
--tl-layer-overlays-collaborator-brush: 20;
|
|
37
|
+
--tl-layer-overlays-collaborator-shape-indicator: 30;
|
|
38
|
+
--tl-layer-overlays-user-scribble: 40;
|
|
39
|
+
--tl-layer-overlays-user-brush: 50;
|
|
40
|
+
--tl-layer-overlays-user-snapline: 90;
|
|
41
|
+
--tl-layer-overlays-selection-fg: 100;
|
|
42
42
|
/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
|
|
43
|
-
--layer-overlays-user-handles: 105;
|
|
44
|
-
--layer-overlays-user-indicator-hint: 110;
|
|
45
|
-
--layer-overlays-custom: 115;
|
|
46
|
-
--layer-overlays-collaborator-cursor-hint: 120;
|
|
47
|
-
--layer-overlays-collaborator-cursor: 130;
|
|
43
|
+
--tl-layer-overlays-user-handles: 105;
|
|
44
|
+
--tl-layer-overlays-user-indicator-hint: 110;
|
|
45
|
+
--tl-layer-overlays-custom: 115;
|
|
46
|
+
--tl-layer-overlays-collaborator-cursor-hint: 120;
|
|
47
|
+
--tl-layer-overlays-collaborator-cursor: 130;
|
|
48
48
|
|
|
49
49
|
/* Text editor z-index */
|
|
50
|
-
--layer-text-container: 1;
|
|
51
|
-
--layer-text-content: 3;
|
|
52
|
-
--layer-text-editor: 4;
|
|
50
|
+
--tl-layer-text-container: 1;
|
|
51
|
+
--tl-layer-text-content: 3;
|
|
52
|
+
--tl-layer-text-editor: 4;
|
|
53
53
|
|
|
54
54
|
/* Error fallback z-index */
|
|
55
|
-
--layer-error-overlay: 1;
|
|
56
|
-
--layer-error-canvas: 2;
|
|
57
|
-
--layer-error-canvas-after: 3;
|
|
58
|
-
--layer-error-content: 4;
|
|
55
|
+
--tl-layer-error-overlay: 1;
|
|
56
|
+
--tl-layer-error-canvas: 2;
|
|
57
|
+
--tl-layer-error-canvas-after: 3;
|
|
58
|
+
--tl-layer-error-content: 4;
|
|
59
59
|
|
|
60
60
|
/* Misc */
|
|
61
61
|
--tl-zoom: 1;
|
|
@@ -120,12 +120,15 @@
|
|
|
120
120
|
--tl-font-serif: 'tldraw_serif', serif;
|
|
121
121
|
--tl-font-mono: 'tldraw_mono', monospace;
|
|
122
122
|
/* text outline */
|
|
123
|
-
--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
124
|
-
--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
123
|
+
--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
124
|
+
--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
125
125
|
--tl-text-outline-reference:
|
|
126
|
-
0 var(--b) 0 var(--
|
|
127
|
-
|
|
128
|
-
var(--
|
|
126
|
+
0 var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
127
|
+
0 var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
128
|
+
var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
129
|
+
var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
130
|
+
var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
131
|
+
var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
|
|
129
132
|
--tl-text-outline: var(--tl-text-outline-reference);
|
|
130
133
|
/* own properties */
|
|
131
134
|
position: relative;
|
|
@@ -133,118 +136,118 @@
|
|
|
133
136
|
height: 100%;
|
|
134
137
|
width: 100%;
|
|
135
138
|
overflow: clip;
|
|
136
|
-
color: var(--color-text);
|
|
139
|
+
color: var(--tl-color-text);
|
|
137
140
|
}
|
|
138
141
|
|
|
139
142
|
.tl-theme__light {
|
|
140
143
|
/* Canvas */
|
|
141
|
-
--color-snap: hsl(0, 76%, 60%);
|
|
142
|
-
--color-selection-fill: hsl(210, 100%, 56%, 24%);
|
|
143
|
-
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
144
|
-
--color-background: hsl(210, 20%, 98%);
|
|
145
|
-
--color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
146
|
-
--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
147
|
-
--color-grid: hsl(0, 0%, 43%);
|
|
144
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
145
|
+
--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
|
|
146
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
147
|
+
--tl-color-background: hsl(210, 20%, 98%);
|
|
148
|
+
--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
149
|
+
--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
150
|
+
--tl-color-grid: hsl(0, 0%, 43%);
|
|
148
151
|
/* UI */
|
|
149
|
-
--color-low: hsl(204, 16%, 94%);
|
|
150
|
-
--color-low-border: hsl(204, 16%, 92%);
|
|
151
|
-
--color-culled: hsl(204, 14%, 93%);
|
|
152
|
-
--color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
153
|
-
--color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
154
|
-
--color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
155
|
-
--color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
156
|
-
--color-hint: hsl(0, 0%, 0%, 5.5%);
|
|
157
|
-
--color-overlay: hsl(0, 0%, 0%, 20%);
|
|
158
|
-
--color-divider: hsl(0, 0%, 91%);
|
|
159
|
-
--color-panel: hsl(0, 0%, 99%);
|
|
160
|
-
--color-panel-contrast: hsl(0, 0%, 100%);
|
|
161
|
-
--color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
162
|
-
--color-panel-transparent: hsla(0, 0%, 99%, 0%);
|
|
163
|
-
--color-selected: hsl(214, 84%, 56%);
|
|
164
|
-
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
165
|
-
--color-focus: hsl(219, 65%, 50%);
|
|
166
|
-
--color-tooltip: hsla(200, 14%, 4%, 1);
|
|
152
|
+
--tl-color-low: hsl(204, 16%, 94%);
|
|
153
|
+
--tl-color-low-border: hsl(204, 16%, 92%);
|
|
154
|
+
--tl-color-culled: hsl(204, 14%, 93%);
|
|
155
|
+
--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
156
|
+
--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
157
|
+
--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
158
|
+
--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
159
|
+
--tl-color-hint: hsl(0, 0%, 0%, 5.5%);
|
|
160
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 20%);
|
|
161
|
+
--tl-color-divider: hsl(0, 0%, 91%);
|
|
162
|
+
--tl-color-panel: hsl(0, 0%, 99%);
|
|
163
|
+
--tl-color-panel-contrast: hsl(0, 0%, 100%);
|
|
164
|
+
--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
165
|
+
--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
|
|
166
|
+
--tl-color-selected: hsl(214, 84%, 56%);
|
|
167
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
168
|
+
--tl-color-focus: hsl(219, 65%, 50%);
|
|
169
|
+
--tl-color-tooltip: hsla(200, 14%, 4%, 1);
|
|
167
170
|
/* Text */
|
|
168
|
-
--color-text: hsl(0, 0%, 0%);
|
|
169
|
-
--color-text-0: hsl(0, 0%, 11%);
|
|
170
|
-
--color-text-1: hsl(0, 0%, 18%);
|
|
171
|
-
--color-text-3: hsl(204, 4%, 45%);
|
|
172
|
-
--color-text-shadow: hsl(0, 0%, 100%);
|
|
173
|
-
--color-text-highlight: hsl(52, 100%, 50%);
|
|
174
|
-
--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
171
|
+
--tl-color-text: hsl(0, 0%, 0%);
|
|
172
|
+
--tl-color-text-0: hsl(0, 0%, 11%);
|
|
173
|
+
--tl-color-text-1: hsl(0, 0%, 18%);
|
|
174
|
+
--tl-color-text-3: hsl(204, 4%, 45%);
|
|
175
|
+
--tl-color-text-shadow: hsl(0, 0%, 100%);
|
|
176
|
+
--tl-color-text-highlight: hsl(52, 100%, 50%);
|
|
177
|
+
--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
175
178
|
/* Named */
|
|
176
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
177
|
-
--color-success: hsl(123, 46%, 34%);
|
|
178
|
-
--color-info: hsl(201, 98%, 41%);
|
|
179
|
-
--color-warning: hsl(27, 98%, 47%);
|
|
180
|
-
--color-danger: hsl(0, 90%, 43%);
|
|
181
|
-
--color-laser: hsl(0, 100%, 50%);
|
|
179
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
180
|
+
--tl-color-success: hsl(123, 46%, 34%);
|
|
181
|
+
--tl-color-info: hsl(201, 98%, 41%);
|
|
182
|
+
--tl-color-warning: hsl(27, 98%, 47%);
|
|
183
|
+
--tl-color-danger: hsl(0, 90%, 43%);
|
|
184
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
182
185
|
/* Shadows */
|
|
183
|
-
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
184
|
-
--shadow-2:
|
|
186
|
+
--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
187
|
+
--tl-shadow-2:
|
|
185
188
|
0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
|
|
186
|
-
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
187
|
-
--shadow-3:
|
|
189
|
+
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
190
|
+
--tl-shadow-3:
|
|
188
191
|
0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
|
|
189
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
190
|
-
--shadow-4:
|
|
192
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
193
|
+
--tl-shadow-4:
|
|
191
194
|
0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
|
|
192
|
-
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
195
|
+
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
193
196
|
}
|
|
194
197
|
|
|
195
198
|
.tl-theme__dark {
|
|
196
199
|
/* Canvas */
|
|
197
|
-
--color-snap: hsl(0, 76%, 60%);
|
|
198
|
-
--color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
199
|
-
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
200
|
-
--color-background: hsl(240, 5%, 6.5%);
|
|
201
|
-
--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
202
|
-
--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
203
|
-
--color-grid: hsl(0, 0%, 40%);
|
|
200
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
201
|
+
--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
202
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
203
|
+
--tl-color-background: hsl(240, 5%, 6.5%);
|
|
204
|
+
--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
205
|
+
--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
206
|
+
--tl-color-grid: hsl(0, 0%, 40%);
|
|
204
207
|
/* UI */
|
|
205
|
-
--color-low: hsl(260, 4.5%, 10.5%);
|
|
206
|
-
--color-low-border: hsl(207, 10%, 10%);
|
|
207
|
-
--color-culled: hsl(210, 11%, 19%);
|
|
208
|
-
--color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
209
|
-
--color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
210
|
-
--color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
211
|
-
--color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
212
|
-
--color-hint: hsl(0, 0%, 100%, 7%);
|
|
213
|
-
--color-overlay: hsl(0, 0%, 0%, 50%);
|
|
214
|
-
--color-divider: hsl(240, 9%, 22%);
|
|
215
|
-
--color-panel: hsl(235, 6.8%, 13.5%);
|
|
216
|
-
--color-panel-contrast: hsl(245, 12%, 23%);
|
|
217
|
-
--color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
218
|
-
--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
219
|
-
--color-selected: hsl(217, 89%, 61%);
|
|
220
|
-
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
221
|
-
--color-focus: hsl(217, 76%, 80%);
|
|
222
|
-
--color-tooltip: hsla(0, 0%, 100%, 1);
|
|
208
|
+
--tl-color-low: hsl(260, 4.5%, 10.5%);
|
|
209
|
+
--tl-color-low-border: hsl(207, 10%, 10%);
|
|
210
|
+
--tl-color-culled: hsl(210, 11%, 19%);
|
|
211
|
+
--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
212
|
+
--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
213
|
+
--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
214
|
+
--tl-color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
215
|
+
--tl-color-hint: hsl(0, 0%, 100%, 7%);
|
|
216
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 50%);
|
|
217
|
+
--tl-color-divider: hsl(240, 9%, 22%);
|
|
218
|
+
--tl-color-panel: hsl(235, 6.8%, 13.5%);
|
|
219
|
+
--tl-color-panel-contrast: hsl(245, 12%, 23%);
|
|
220
|
+
--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
221
|
+
--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
222
|
+
--tl-color-selected: hsl(217, 89%, 61%);
|
|
223
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
224
|
+
--tl-color-focus: hsl(217, 76%, 80%);
|
|
225
|
+
--tl-color-tooltip: hsla(0, 0%, 100%, 1);
|
|
223
226
|
/* Text */
|
|
224
|
-
--color-text: hsl(210, 17%, 98%);
|
|
225
|
-
--color-text-0: hsl(0, 9%, 94%);
|
|
226
|
-
--color-text-1: hsl(0, 0%, 85%);
|
|
227
|
-
--color-text-3: hsl(204, 4%, 75%);
|
|
228
|
-
--color-text-shadow: hsl(210, 13%, 18%);
|
|
229
|
-
--color-text-highlight: hsl(52, 100%, 41%);
|
|
230
|
-
--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
227
|
+
--tl-color-text: hsl(210, 17%, 98%);
|
|
228
|
+
--tl-color-text-0: hsl(0, 9%, 94%);
|
|
229
|
+
--tl-color-text-1: hsl(0, 0%, 85%);
|
|
230
|
+
--tl-color-text-3: hsl(204, 4%, 75%);
|
|
231
|
+
--tl-color-text-shadow: hsl(210, 13%, 18%);
|
|
232
|
+
--tl-color-text-highlight: hsl(52, 100%, 41%);
|
|
233
|
+
--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
231
234
|
/* Named */
|
|
232
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
233
|
-
--color-success: hsl(123, 38%, 57%);
|
|
234
|
-
--color-info: hsl(199, 92%, 56%);
|
|
235
|
-
--color-warning: hsl(36, 100%, 57%);
|
|
236
|
-
--color-danger: hsl(0, 82%, 66%);
|
|
237
|
-
--color-laser: hsl(0, 100%, 50%);
|
|
235
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
236
|
+
--tl-color-success: hsl(123, 38%, 57%);
|
|
237
|
+
--tl-color-info: hsl(199, 92%, 56%);
|
|
238
|
+
--tl-color-warning: hsl(36, 100%, 57%);
|
|
239
|
+
--tl-color-danger: hsl(0, 82%, 66%);
|
|
240
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
238
241
|
/* Shadows */
|
|
239
|
-
--shadow-1:
|
|
242
|
+
--tl-shadow-1:
|
|
240
243
|
0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
|
|
241
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
242
|
-
--shadow-2:
|
|
244
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
245
|
+
--tl-shadow-2:
|
|
243
246
|
0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
|
|
244
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
245
|
-
--shadow-3:
|
|
247
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
248
|
+
--tl-shadow-3:
|
|
246
249
|
0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
|
|
247
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
250
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
248
251
|
}
|
|
249
252
|
|
|
250
253
|
.tl-counter-scaled {
|
|
@@ -270,7 +273,7 @@
|
|
|
270
273
|
}
|
|
271
274
|
|
|
272
275
|
.tl-container__focused {
|
|
273
|
-
outline: 1px solid var(--color-low);
|
|
276
|
+
outline: 1px solid var(--tl-color-low);
|
|
274
277
|
}
|
|
275
278
|
|
|
276
279
|
input,
|
|
@@ -286,7 +289,7 @@ input,
|
|
|
286
289
|
inset: 0px;
|
|
287
290
|
height: 100%;
|
|
288
291
|
width: 100%;
|
|
289
|
-
color: var(--color-text);
|
|
292
|
+
color: var(--tl-color-text);
|
|
290
293
|
cursor: var(--tl-cursor);
|
|
291
294
|
overflow: clip;
|
|
292
295
|
content-visibility: auto;
|
|
@@ -296,7 +299,7 @@ input,
|
|
|
296
299
|
|
|
297
300
|
.tl-shapes {
|
|
298
301
|
position: relative;
|
|
299
|
-
z-index: var(--layer-canvas-shapes);
|
|
302
|
+
z-index: var(--tl-layer-canvas-shapes);
|
|
300
303
|
}
|
|
301
304
|
|
|
302
305
|
.tl-overlays {
|
|
@@ -307,7 +310,7 @@ input,
|
|
|
307
310
|
width: 100%;
|
|
308
311
|
contain: strict;
|
|
309
312
|
pointer-events: none;
|
|
310
|
-
z-index: var(--layer-canvas-overlays);
|
|
313
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
311
314
|
}
|
|
312
315
|
|
|
313
316
|
.tl-overlays__item {
|
|
@@ -331,7 +334,7 @@ input,
|
|
|
331
334
|
/* ------------------- Background ------------------- */
|
|
332
335
|
|
|
333
336
|
.tl-background__wrapper {
|
|
334
|
-
z-index: var(--layer-canvas-background);
|
|
337
|
+
z-index: var(--tl-layer-canvas-background);
|
|
335
338
|
position: absolute;
|
|
336
339
|
inset: 0px;
|
|
337
340
|
height: 100%;
|
|
@@ -339,7 +342,7 @@ input,
|
|
|
339
342
|
}
|
|
340
343
|
|
|
341
344
|
.tl-background {
|
|
342
|
-
background-color: var(--color-background);
|
|
345
|
+
background-color: var(--tl-color-background);
|
|
343
346
|
width: 100%;
|
|
344
347
|
height: 100%;
|
|
345
348
|
}
|
|
@@ -353,12 +356,12 @@ input,
|
|
|
353
356
|
height: 100%;
|
|
354
357
|
touch-action: none;
|
|
355
358
|
pointer-events: none;
|
|
356
|
-
z-index: var(--layer-canvas-grid);
|
|
359
|
+
z-index: var(--tl-layer-canvas-grid);
|
|
357
360
|
contain: strict;
|
|
358
361
|
}
|
|
359
362
|
|
|
360
363
|
.tl-grid-dot {
|
|
361
|
-
fill: var(--color-grid);
|
|
364
|
+
fill: var(--tl-color-grid);
|
|
362
365
|
}
|
|
363
366
|
|
|
364
367
|
/* --------------------- Layers --------------------- */
|
|
@@ -376,54 +379,54 @@ input,
|
|
|
376
379
|
|
|
377
380
|
/* back of the stack, behind user's stuff */
|
|
378
381
|
.tl-collaborator__scribble {
|
|
379
|
-
z-index: var(--layer-overlays-collaborator-scribble);
|
|
382
|
+
z-index: var(--tl-layer-overlays-collaborator-scribble);
|
|
380
383
|
}
|
|
381
384
|
|
|
382
385
|
.tl-collaborator__brush {
|
|
383
|
-
z-index: var(--layer-overlays-collaborator-brush);
|
|
386
|
+
z-index: var(--tl-layer-overlays-collaborator-brush);
|
|
384
387
|
}
|
|
385
388
|
|
|
386
389
|
.tl-collaborator__shape-indicator {
|
|
387
|
-
z-index: var(--layer-overlays-collaborator-shape-indicator);
|
|
390
|
+
z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
|
|
388
391
|
}
|
|
389
392
|
|
|
390
393
|
.tl-user-scribble {
|
|
391
|
-
z-index: var(--layer-overlays-user-scribble);
|
|
394
|
+
z-index: var(--tl-layer-overlays-user-scribble);
|
|
392
395
|
}
|
|
393
396
|
|
|
394
397
|
.tl-user-brush {
|
|
395
|
-
z-index: var(--layer-overlays-user-brush);
|
|
398
|
+
z-index: var(--tl-layer-overlays-user-brush);
|
|
396
399
|
}
|
|
397
400
|
|
|
398
401
|
.tl-user-handles {
|
|
399
|
-
z-index: var(--layer-overlays-user-handles);
|
|
402
|
+
z-index: var(--tl-layer-overlays-user-handles);
|
|
400
403
|
}
|
|
401
404
|
|
|
402
405
|
.tl-user-snapline {
|
|
403
|
-
z-index: var(--layer-overlays-user-snapline);
|
|
406
|
+
z-index: var(--tl-layer-overlays-user-snapline);
|
|
404
407
|
}
|
|
405
408
|
|
|
406
409
|
.tl-selection__fg {
|
|
407
410
|
pointer-events: none;
|
|
408
|
-
z-index: var(--layer-overlays-selection-fg);
|
|
411
|
+
z-index: var(--tl-layer-overlays-selection-fg);
|
|
409
412
|
}
|
|
410
413
|
|
|
411
414
|
.tl-user-indicator__hint {
|
|
412
|
-
z-index: var(--layer-overlays-user-indicator-hint);
|
|
415
|
+
z-index: var(--tl-layer-overlays-user-indicator-hint);
|
|
413
416
|
stroke-width: calc(2.5px * var(--tl-scale));
|
|
414
417
|
}
|
|
415
418
|
|
|
416
419
|
.tl-custom-overlays {
|
|
417
|
-
z-index: var(--layer-overlays-custom);
|
|
420
|
+
z-index: var(--tl-layer-overlays-custom);
|
|
418
421
|
}
|
|
419
422
|
|
|
420
423
|
/* behind collaborator cursor */
|
|
421
424
|
.tl-collaborator__cursor-hint {
|
|
422
|
-
z-index: var(--layer-overlays-collaborator-cursor-hint);
|
|
425
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
|
|
423
426
|
}
|
|
424
427
|
|
|
425
428
|
.tl-collaborator__cursor {
|
|
426
|
-
z-index: var(--layer-overlays-collaborator-cursor);
|
|
429
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor);
|
|
427
430
|
}
|
|
428
431
|
|
|
429
432
|
.tl-cursor {
|
|
@@ -444,32 +447,32 @@ input,
|
|
|
444
447
|
.tl-selection__fg__outline {
|
|
445
448
|
fill: none;
|
|
446
449
|
pointer-events: none;
|
|
447
|
-
stroke: var(--color-selection-stroke);
|
|
450
|
+
stroke: var(--tl-color-selection-stroke);
|
|
448
451
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
449
452
|
}
|
|
450
453
|
|
|
451
454
|
.tl-corner-handle {
|
|
452
455
|
pointer-events: none;
|
|
453
|
-
stroke: var(--color-selection-stroke);
|
|
454
|
-
fill: var(--color-background);
|
|
456
|
+
stroke: var(--tl-color-selection-stroke);
|
|
457
|
+
fill: var(--tl-color-background);
|
|
455
458
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
456
459
|
}
|
|
457
460
|
|
|
458
461
|
.tl-text-handle {
|
|
459
462
|
pointer-events: none;
|
|
460
|
-
fill: var(--color-selection-stroke);
|
|
463
|
+
fill: var(--tl-color-selection-stroke);
|
|
461
464
|
}
|
|
462
465
|
|
|
463
466
|
.tl-corner-crop-handle {
|
|
464
467
|
pointer-events: none;
|
|
465
468
|
fill: none;
|
|
466
|
-
stroke: var(--color-selection-stroke);
|
|
469
|
+
stroke: var(--tl-color-selection-stroke);
|
|
467
470
|
}
|
|
468
471
|
|
|
469
472
|
.tl-corner-crop-edge-handle {
|
|
470
473
|
pointer-events: none;
|
|
471
474
|
fill: none;
|
|
472
|
-
stroke: var(--color-selection-stroke);
|
|
475
|
+
stroke: var(--tl-color-selection-stroke);
|
|
473
476
|
}
|
|
474
477
|
|
|
475
478
|
.tl-mobile-rotate__bg {
|
|
@@ -479,8 +482,8 @@ input,
|
|
|
479
482
|
|
|
480
483
|
.tl-mobile-rotate__fg {
|
|
481
484
|
pointer-events: none;
|
|
482
|
-
stroke: var(--color-selection-stroke);
|
|
483
|
-
fill: var(--color-background);
|
|
485
|
+
stroke: var(--tl-color-selection-stroke);
|
|
486
|
+
fill: var(--tl-color-background);
|
|
484
487
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
485
488
|
}
|
|
486
489
|
|
|
@@ -510,8 +513,8 @@ input,
|
|
|
510
513
|
text-overflow: ellipsis;
|
|
511
514
|
font-size: 12px;
|
|
512
515
|
font-family: var(--font-body);
|
|
513
|
-
border-radius: var(--radius-2);
|
|
514
|
-
color: var(--color-selected-contrast);
|
|
516
|
+
border-radius: var(--tl-radius-2);
|
|
517
|
+
color: var(--tl-color-selected-contrast);
|
|
515
518
|
}
|
|
516
519
|
|
|
517
520
|
.tl-nametag-title {
|
|
@@ -529,7 +532,7 @@ input,
|
|
|
529
532
|
font-size: 12px;
|
|
530
533
|
font-family: var(--font-body);
|
|
531
534
|
text-shadow: var(--tl-text-outline);
|
|
532
|
-
color: var(--color-selected-contrast);
|
|
535
|
+
color: var(--tl-color-selected-contrast);
|
|
533
536
|
}
|
|
534
537
|
|
|
535
538
|
.tl-nametag-chat {
|
|
@@ -538,31 +541,31 @@ input,
|
|
|
538
541
|
left: 13px;
|
|
539
542
|
width: fit-content;
|
|
540
543
|
height: fit-content;
|
|
541
|
-
color: var(--color-selected-contrast);
|
|
544
|
+
color: var(--tl-color-selected-contrast);
|
|
542
545
|
white-space: nowrap;
|
|
543
546
|
position: absolute;
|
|
544
547
|
padding: 3px 6px;
|
|
545
548
|
font-size: 12px;
|
|
546
549
|
font-family: var(--font-body);
|
|
547
550
|
opacity: 1;
|
|
548
|
-
border-radius: var(--radius-2);
|
|
551
|
+
border-radius: var(--tl-radius-2);
|
|
549
552
|
}
|
|
550
553
|
|
|
551
554
|
.tl-cursor-chat {
|
|
552
555
|
position: absolute;
|
|
553
|
-
color: var(--color-selected-contrast);
|
|
556
|
+
color: var(--tl-color-selected-contrast);
|
|
554
557
|
white-space: nowrap;
|
|
555
558
|
padding: 3px 6px;
|
|
556
559
|
font-size: 12px;
|
|
557
560
|
font-family: var(--font-body);
|
|
558
561
|
pointer-events: none;
|
|
559
|
-
z-index: var(--layer-cursor);
|
|
562
|
+
z-index: var(--tl-layer-cursor);
|
|
560
563
|
margin-top: 16px;
|
|
561
564
|
margin-left: 13px;
|
|
562
565
|
opacity: 1;
|
|
563
566
|
border: none;
|
|
564
567
|
user-select: text;
|
|
565
|
-
border-radius: var(--radius-2);
|
|
568
|
+
border-radius: var(--tl-radius-2);
|
|
566
569
|
}
|
|
567
570
|
|
|
568
571
|
.tl-cursor-chat .tl-cursor-chat__bubble {
|
|
@@ -570,13 +573,13 @@ input,
|
|
|
570
573
|
}
|
|
571
574
|
|
|
572
575
|
.tl-cursor-chat::selection {
|
|
573
|
-
background: var(--color-selected);
|
|
574
|
-
color: var(--color-selected-contrast);
|
|
576
|
+
background: var(--tl-color-selected);
|
|
577
|
+
color: var(--tl-color-selected-contrast);
|
|
575
578
|
text-shadow: none;
|
|
576
579
|
}
|
|
577
580
|
|
|
578
581
|
.tl-cursor-chat::placeholder {
|
|
579
|
-
color: var(--color-selected-contrast);
|
|
582
|
+
color: var(--tl-color-selected-contrast);
|
|
580
583
|
opacity: 0.7;
|
|
581
584
|
}
|
|
582
585
|
|
|
@@ -647,7 +650,7 @@ input,
|
|
|
647
650
|
background: none;
|
|
648
651
|
border-image: none;
|
|
649
652
|
border: 0px;
|
|
650
|
-
caret-color: var(--color-text);
|
|
653
|
+
caret-color: var(--tl-color-text);
|
|
651
654
|
color: inherit;
|
|
652
655
|
column-count: initial !important;
|
|
653
656
|
display: inline-block;
|
|
@@ -679,7 +682,7 @@ input,
|
|
|
679
682
|
|
|
680
683
|
.tl-text-measure {
|
|
681
684
|
position: absolute;
|
|
682
|
-
z-index: var(--layer-canvas-hidden);
|
|
685
|
+
z-index: var(--tl-layer-canvas-hidden);
|
|
683
686
|
top: 0px;
|
|
684
687
|
left: 0px;
|
|
685
688
|
opacity: 0;
|
|
@@ -742,8 +745,8 @@ input,
|
|
|
742
745
|
}
|
|
743
746
|
|
|
744
747
|
.tl-text-input::selection {
|
|
745
|
-
background: var(--color-selected);
|
|
746
|
-
color: var(--color-selected-contrast);
|
|
748
|
+
background: var(--tl-color-selected);
|
|
749
|
+
color: var(--tl-color-selected-contrast);
|
|
747
750
|
text-shadow: none;
|
|
748
751
|
}
|
|
749
752
|
|
|
@@ -753,7 +756,7 @@ input,
|
|
|
753
756
|
display: flex;
|
|
754
757
|
justify-content: center;
|
|
755
758
|
align-items: center;
|
|
756
|
-
color: var(--color-text);
|
|
759
|
+
color: var(--tl-color-text);
|
|
757
760
|
text-shadow: var(--tl-text-outline);
|
|
758
761
|
line-height: inherit;
|
|
759
762
|
position: absolute;
|
|
@@ -797,7 +800,7 @@ input,
|
|
|
797
800
|
|
|
798
801
|
.tl-text-wrapper .tl-text-content {
|
|
799
802
|
pointer-events: all;
|
|
800
|
-
z-index: var(--layer-text-content);
|
|
803
|
+
z-index: var(--tl-layer-text-content);
|
|
801
804
|
}
|
|
802
805
|
|
|
803
806
|
.tl-text-label__inner > .tl-text-content {
|
|
@@ -807,7 +810,7 @@ input,
|
|
|
807
810
|
padding: inherit;
|
|
808
811
|
height: fit-content;
|
|
809
812
|
width: fit-content;
|
|
810
|
-
border-radius: var(--radius-1);
|
|
813
|
+
border-radius: var(--tl-radius-1);
|
|
811
814
|
max-width: 100%;
|
|
812
815
|
}
|
|
813
816
|
|
|
@@ -820,7 +823,7 @@ input,
|
|
|
820
823
|
}
|
|
821
824
|
|
|
822
825
|
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
|
|
823
|
-
z-index: var(--layer-text-editor);
|
|
826
|
+
z-index: var(--tl-layer-text-editor);
|
|
824
827
|
pointer-events: all;
|
|
825
828
|
}
|
|
826
829
|
|
|
@@ -915,7 +918,7 @@ input,
|
|
|
915
918
|
}
|
|
916
919
|
|
|
917
920
|
.tl-rich-text a {
|
|
918
|
-
color: var(--color-primary);
|
|
921
|
+
color: var(--tl-color-primary);
|
|
919
922
|
text-decoration: underline;
|
|
920
923
|
}
|
|
921
924
|
|
|
@@ -938,14 +941,14 @@ input,
|
|
|
938
941
|
}
|
|
939
942
|
|
|
940
943
|
.tl-theme__dark .tl-rich-text mark {
|
|
941
|
-
background-color: var(--color-text-highlight);
|
|
944
|
+
background-color: var(--tl-color-text-highlight);
|
|
942
945
|
color: currentColor;
|
|
943
946
|
}
|
|
944
947
|
|
|
945
948
|
@supports (color: color(display-p3 1 1 1)) {
|
|
946
949
|
@media (color-gamut: p3) {
|
|
947
950
|
.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
|
|
948
|
-
background-color: var(--color-text-highlight-p3);
|
|
951
|
+
background-color: var(--tl-color-text-highlight-p3);
|
|
949
952
|
}
|
|
950
953
|
}
|
|
951
954
|
}
|
|
@@ -957,15 +960,15 @@ input,
|
|
|
957
960
|
/* --------------------- Loading -------------------- */
|
|
958
961
|
|
|
959
962
|
.tl-loading {
|
|
960
|
-
background-color: var(--color-background);
|
|
961
|
-
color: var(--color-text-1);
|
|
963
|
+
background-color: var(--tl-color-background);
|
|
964
|
+
color: var(--tl-color-text-1);
|
|
962
965
|
height: 100%;
|
|
963
966
|
width: 100%;
|
|
964
967
|
display: flex;
|
|
965
968
|
flex-direction: column;
|
|
966
969
|
justify-content: center;
|
|
967
970
|
align-items: center;
|
|
968
|
-
gap: var(--space-2);
|
|
971
|
+
gap: var(--tl-space-2);
|
|
969
972
|
font-size: 14px;
|
|
970
973
|
font-weight: 500;
|
|
971
974
|
opacity: 0;
|
|
@@ -973,7 +976,7 @@ input,
|
|
|
973
976
|
animation-delay: 0.2s;
|
|
974
977
|
position: absolute;
|
|
975
978
|
inset: 0px;
|
|
976
|
-
z-index: var(--layer-canvas-blocker);
|
|
979
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
977
980
|
}
|
|
978
981
|
|
|
979
982
|
@keyframes tl-fade-in {
|
|
@@ -1006,8 +1009,8 @@ input,
|
|
|
1006
1009
|
}
|
|
1007
1010
|
|
|
1008
1011
|
.tl-brush__default {
|
|
1009
|
-
stroke: var(--color-brush-stroke);
|
|
1010
|
-
fill: var(--color-brush-fill);
|
|
1012
|
+
stroke: var(--tl-color-brush-stroke);
|
|
1013
|
+
fill: var(--tl-color-brush-fill);
|
|
1011
1014
|
}
|
|
1012
1015
|
|
|
1013
1016
|
/* -------------------- Scribble -------------------- */
|
|
@@ -1022,13 +1025,13 @@ input,
|
|
|
1022
1025
|
/* ---------------------- Snaps --------------------- */
|
|
1023
1026
|
|
|
1024
1027
|
.tl-snap-indicator {
|
|
1025
|
-
stroke: var(--color-snap);
|
|
1028
|
+
stroke: var(--tl-color-snap);
|
|
1026
1029
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1027
1030
|
fill: none;
|
|
1028
1031
|
}
|
|
1029
1032
|
|
|
1030
1033
|
.tl-snap-point {
|
|
1031
|
-
stroke: var(--color-snap);
|
|
1034
|
+
stroke: var(--tl-color-snap);
|
|
1032
1035
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1033
1036
|
fill: none;
|
|
1034
1037
|
}
|
|
@@ -1048,7 +1051,7 @@ input,
|
|
|
1048
1051
|
justify-content: center;
|
|
1049
1052
|
font-size: 12px;
|
|
1050
1053
|
font-weight: 400;
|
|
1051
|
-
color: var(--color-text-1);
|
|
1054
|
+
color: var(--tl-color-text-1);
|
|
1052
1055
|
padding: 13px;
|
|
1053
1056
|
cursor: var(--tl-cursor-pointer);
|
|
1054
1057
|
border: none;
|
|
@@ -1066,13 +1069,13 @@ input,
|
|
|
1066
1069
|
display: block;
|
|
1067
1070
|
width: calc(100% - 12px);
|
|
1068
1071
|
height: calc(100% - 12px);
|
|
1069
|
-
border-radius: var(--radius-1);
|
|
1070
|
-
background-color: var(--color-background);
|
|
1072
|
+
border-radius: var(--tl-radius-1);
|
|
1073
|
+
background-color: var(--tl-color-background);
|
|
1071
1074
|
pointer-events: none;
|
|
1072
1075
|
}
|
|
1073
1076
|
|
|
1074
1077
|
.tl-hyperlink-button:focus-visible {
|
|
1075
|
-
color: var(--color-selected);
|
|
1078
|
+
color: var(--tl-color-selected);
|
|
1076
1079
|
}
|
|
1077
1080
|
|
|
1078
1081
|
.tl-hyperlink__icon {
|
|
@@ -1099,8 +1102,8 @@ input,
|
|
|
1099
1102
|
}
|
|
1100
1103
|
|
|
1101
1104
|
.tl-handle__fg {
|
|
1102
|
-
fill: var(--color-selected-contrast);
|
|
1103
|
-
stroke: var(--color-selection-stroke);
|
|
1105
|
+
fill: var(--tl-color-selected-contrast);
|
|
1106
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1104
1107
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1105
1108
|
pointer-events: none;
|
|
1106
1109
|
}
|
|
@@ -1110,7 +1113,7 @@ input,
|
|
|
1110
1113
|
}
|
|
1111
1114
|
|
|
1112
1115
|
.tl-handle__clone > .tl-handle__fg {
|
|
1113
|
-
fill: var(--color-selection-stroke);
|
|
1116
|
+
fill: var(--tl-color-selection-stroke);
|
|
1114
1117
|
stroke: none;
|
|
1115
1118
|
}
|
|
1116
1119
|
|
|
@@ -1120,7 +1123,7 @@ input,
|
|
|
1120
1123
|
|
|
1121
1124
|
@media (pointer: coarse) {
|
|
1122
1125
|
.tl-handle__bg:active {
|
|
1123
|
-
fill: var(--color-selection-fill);
|
|
1126
|
+
fill: var(--tl-color-selection-fill);
|
|
1124
1127
|
}
|
|
1125
1128
|
|
|
1126
1129
|
.tl-handle__create {
|
|
@@ -1176,13 +1179,13 @@ input,
|
|
|
1176
1179
|
stroke-linejoin: round;
|
|
1177
1180
|
/* content-visibility: auto; */
|
|
1178
1181
|
transform-origin: top left;
|
|
1179
|
-
color: var(--color-text-1);
|
|
1182
|
+
color: var(--tl-color-text-1);
|
|
1180
1183
|
}
|
|
1181
1184
|
|
|
1182
1185
|
/* -------------------- Group shape ------------------ */
|
|
1183
1186
|
|
|
1184
1187
|
.tl-group {
|
|
1185
|
-
stroke: var(--color-text);
|
|
1188
|
+
stroke: var(--tl-color-text);
|
|
1186
1189
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1187
1190
|
opacity: 0.5;
|
|
1188
1191
|
}
|
|
@@ -1200,12 +1203,12 @@ input,
|
|
|
1200
1203
|
justify-content: center;
|
|
1201
1204
|
align-items: center;
|
|
1202
1205
|
text-align: center;
|
|
1203
|
-
color: var(--color-text);
|
|
1206
|
+
color: var(--tl-color-text);
|
|
1204
1207
|
text-shadow: var(--tl-text-outline);
|
|
1205
1208
|
}
|
|
1206
1209
|
|
|
1207
1210
|
.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
|
|
1208
|
-
border-radius: var(--radius-1);
|
|
1211
|
+
border-radius: var(--tl-radius-1);
|
|
1209
1212
|
box-sizing: content-box;
|
|
1210
1213
|
height: max-content;
|
|
1211
1214
|
width: max-content;
|
|
@@ -1216,22 +1219,22 @@ input,
|
|
|
1216
1219
|
}
|
|
1217
1220
|
|
|
1218
1221
|
.tl-arrow-hint {
|
|
1219
|
-
stroke: var(--color-text-1);
|
|
1222
|
+
stroke: var(--tl-color-text-1);
|
|
1220
1223
|
fill: none;
|
|
1221
1224
|
stroke-linecap: round;
|
|
1222
1225
|
overflow: visible;
|
|
1223
1226
|
}
|
|
1224
1227
|
|
|
1225
1228
|
.tl-arrow-hint-handle {
|
|
1226
|
-
fill: var(--color-selected-contrast);
|
|
1227
|
-
stroke: var(--color-selection-stroke);
|
|
1229
|
+
fill: var(--tl-color-selected-contrast);
|
|
1230
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1228
1231
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1229
1232
|
r: calc(4px * var(--tl-scale));
|
|
1230
1233
|
}
|
|
1231
1234
|
|
|
1232
1235
|
.tl-arrow-hint-snap {
|
|
1233
1236
|
stroke: transparent;
|
|
1234
|
-
fill: var(--color-selection-fill);
|
|
1237
|
+
fill: var(--tl-color-selection-fill);
|
|
1235
1238
|
r: calc(12px * var(--tl-scale));
|
|
1236
1239
|
}
|
|
1237
1240
|
|
|
@@ -1251,40 +1254,40 @@ input,
|
|
|
1251
1254
|
width: 100%;
|
|
1252
1255
|
height: 100%;
|
|
1253
1256
|
position: relative;
|
|
1254
|
-
border: 1px solid var(--color-panel-contrast);
|
|
1255
|
-
background-color: var(--color-panel);
|
|
1256
|
-
border-radius: var(--radius-2);
|
|
1257
|
+
border: 1px solid var(--tl-color-panel-contrast);
|
|
1258
|
+
background-color: var(--tl-color-panel);
|
|
1259
|
+
border-radius: var(--tl-radius-2);
|
|
1257
1260
|
display: flex;
|
|
1258
1261
|
flex-direction: column;
|
|
1259
1262
|
overflow: hidden;
|
|
1260
1263
|
}
|
|
1261
1264
|
|
|
1262
1265
|
.tl-bookmark__container--safariExport {
|
|
1263
|
-
border: 1px solid var(--color-divider);
|
|
1266
|
+
border: 1px solid var(--tl-color-divider);
|
|
1264
1267
|
}
|
|
1265
1268
|
|
|
1266
1269
|
.tl-bookmark__image_container {
|
|
1267
1270
|
flex: 1 1 100%;
|
|
1268
1271
|
overflow: hidden;
|
|
1269
|
-
border-top-left-radius: var(--radius-1);
|
|
1270
|
-
border-top-right-radius: var(--radius-1);
|
|
1272
|
+
border-top-left-radius: var(--tl-radius-1);
|
|
1273
|
+
border-top-right-radius: var(--tl-radius-1);
|
|
1271
1274
|
width: 100%;
|
|
1272
1275
|
height: 100%;
|
|
1273
1276
|
display: flex;
|
|
1274
1277
|
justify-content: flex-end;
|
|
1275
1278
|
align-items: flex-start;
|
|
1276
|
-
box-shadow: inset 0px 0px 0px 1px var(--color-divider);
|
|
1279
|
+
box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
|
|
1277
1280
|
}
|
|
1278
1281
|
|
|
1279
1282
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
|
1280
|
-
background-color: var(--color-panel);
|
|
1283
|
+
background-color: var(--tl-color-panel);
|
|
1281
1284
|
}
|
|
1282
1285
|
|
|
1283
1286
|
.tl-bookmark__placeholder {
|
|
1284
1287
|
width: 100%;
|
|
1285
1288
|
height: 100%;
|
|
1286
|
-
background-color: var(--color-muted-2);
|
|
1287
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1289
|
+
background-color: var(--tl-color-muted-2);
|
|
1290
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1288
1291
|
}
|
|
1289
1292
|
|
|
1290
1293
|
.tl-bookmark__image {
|
|
@@ -1292,12 +1295,12 @@ input,
|
|
|
1292
1295
|
height: 100%;
|
|
1293
1296
|
object-fit: cover;
|
|
1294
1297
|
object-position: center;
|
|
1295
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1298
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1296
1299
|
}
|
|
1297
1300
|
|
|
1298
1301
|
.tl-bookmark__copy_container {
|
|
1299
|
-
background-color: var(--color-muted-0);
|
|
1300
|
-
padding: var(--space-4);
|
|
1302
|
+
background-color: var(--tl-color-muted-0);
|
|
1303
|
+
padding: var(--tl-space-4);
|
|
1301
1304
|
pointer-events: all;
|
|
1302
1305
|
display: flex;
|
|
1303
1306
|
flex-direction: column;
|
|
@@ -1317,7 +1320,7 @@ input,
|
|
|
1317
1320
|
font-size: 16px;
|
|
1318
1321
|
line-height: 1.6;
|
|
1319
1322
|
font-weight: bold;
|
|
1320
|
-
padding-bottom: var(--space-2);
|
|
1323
|
+
padding-bottom: var(--tl-space-2);
|
|
1321
1324
|
overflow: hidden;
|
|
1322
1325
|
max-height: calc((16px * 1.6) * 2);
|
|
1323
1326
|
-webkit-box-orient: vertical;
|
|
@@ -1337,19 +1340,19 @@ input,
|
|
|
1337
1340
|
line-clamp: 3;
|
|
1338
1341
|
text-overflow: ellipsis;
|
|
1339
1342
|
display: -webkit-box;
|
|
1340
|
-
color: var(--color-text-2);
|
|
1341
|
-
margin: var(--space-2) 0px;
|
|
1343
|
+
color: var(--tl-color-text-2);
|
|
1344
|
+
margin: var(--tl-space-2) 0px;
|
|
1342
1345
|
}
|
|
1343
1346
|
|
|
1344
1347
|
.tl-bookmark__heading + .tl-bookmark__link,
|
|
1345
1348
|
.tl-bookmark__description + .tl-bookmark__link {
|
|
1346
|
-
margin-top: var(--space-3);
|
|
1349
|
+
margin-top: var(--tl-space-3);
|
|
1347
1350
|
}
|
|
1348
1351
|
.tl-bookmark__link {
|
|
1349
1352
|
font-size: 12px;
|
|
1350
1353
|
pointer-events: all;
|
|
1351
1354
|
display: flex;
|
|
1352
|
-
color: var(--color-text-2);
|
|
1355
|
+
color: var(--tl-color-text-2);
|
|
1353
1356
|
align-items: center;
|
|
1354
1357
|
cursor: var(--tl-cursor-pointer);
|
|
1355
1358
|
width: fit-content;
|
|
@@ -1391,7 +1394,7 @@ input,
|
|
|
1391
1394
|
width: 100%;
|
|
1392
1395
|
height: 100%;
|
|
1393
1396
|
pointer-events: all;
|
|
1394
|
-
/* background-color: var(--color-background); */
|
|
1397
|
+
/* background-color: var(--tl-color-background); */
|
|
1395
1398
|
|
|
1396
1399
|
display: flex;
|
|
1397
1400
|
justify-content: center;
|
|
@@ -1420,7 +1423,7 @@ input,
|
|
|
1420
1423
|
height: 100%;
|
|
1421
1424
|
pointer-events: all;
|
|
1422
1425
|
opacity: 1;
|
|
1423
|
-
z-index: var(--layer-text-container);
|
|
1426
|
+
z-index: var(--tl-layer-text-container);
|
|
1424
1427
|
border-radius: 1px;
|
|
1425
1428
|
}
|
|
1426
1429
|
|
|
@@ -1436,22 +1439,22 @@ input,
|
|
|
1436
1439
|
}
|
|
1437
1440
|
|
|
1438
1441
|
.tl-frame__creating {
|
|
1439
|
-
stroke: var(--color-selected);
|
|
1442
|
+
stroke: var(--tl-color-selected);
|
|
1440
1443
|
fill: none;
|
|
1441
1444
|
}
|
|
1442
1445
|
|
|
1443
1446
|
.tl-frame-heading {
|
|
1444
|
-
--frame-padding-x: 6px;
|
|
1445
|
-
--frame-height: 24px;
|
|
1446
|
-
--frame-minimum-width: 32px;
|
|
1447
|
-
--frame-offset-width: 16px;
|
|
1447
|
+
--tl-frame-padding-x: 6px;
|
|
1448
|
+
--tl-frame-height: 24px;
|
|
1449
|
+
--tl-frame-minimum-width: 32px;
|
|
1450
|
+
--tl-frame-offset-width: 16px;
|
|
1448
1451
|
display: flex;
|
|
1449
1452
|
align-items: center;
|
|
1450
1453
|
position: absolute;
|
|
1451
1454
|
transform-origin: 0% 100%;
|
|
1452
1455
|
overflow: hidden;
|
|
1453
1456
|
max-width: 100%;
|
|
1454
|
-
min-width: var(--frame-minimum-width);
|
|
1457
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1455
1458
|
height: auto;
|
|
1456
1459
|
font-size: 12px;
|
|
1457
1460
|
padding-bottom: 4px;
|
|
@@ -1463,18 +1466,18 @@ input,
|
|
|
1463
1466
|
/* scale from bottom left corner so we can pin it to the top left corner of the frame */
|
|
1464
1467
|
transform-origin: 0% 100%;
|
|
1465
1468
|
display: flex;
|
|
1466
|
-
height: var(--frame-height);
|
|
1469
|
+
height: var(--tl-frame-height);
|
|
1467
1470
|
width: 100%;
|
|
1468
1471
|
align-items: center;
|
|
1469
|
-
border-radius: var(--radius-1);
|
|
1472
|
+
border-radius: var(--tl-radius-1);
|
|
1470
1473
|
}
|
|
1471
1474
|
|
|
1472
1475
|
.tl-frame-label {
|
|
1473
1476
|
pointer-events: all;
|
|
1474
1477
|
overflow: hidden;
|
|
1475
1478
|
text-overflow: ellipsis;
|
|
1476
|
-
padding: 0px var(--frame-padding-x);
|
|
1477
|
-
border-radius: var(--radius-1);
|
|
1479
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1480
|
+
border-radius: var(--tl-radius-1);
|
|
1478
1481
|
position: relative;
|
|
1479
1482
|
font-size: inherit;
|
|
1480
1483
|
white-space: pre;
|
|
@@ -1484,12 +1487,12 @@ input,
|
|
|
1484
1487
|
color: transparent;
|
|
1485
1488
|
white-space: pre;
|
|
1486
1489
|
width: auto;
|
|
1487
|
-
min-width: var(--frame-minimum-width);
|
|
1490
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1488
1491
|
height: 100%;
|
|
1489
1492
|
overflow: visible;
|
|
1490
|
-
background-color: var(--color-panel);
|
|
1491
|
-
border-color: var(--color-selected);
|
|
1492
|
-
box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
|
|
1493
|
+
background-color: var(--tl-color-panel);
|
|
1494
|
+
border-color: var(--tl-color-selected);
|
|
1495
|
+
box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
|
|
1493
1496
|
}
|
|
1494
1497
|
|
|
1495
1498
|
.tl-frame-name-input {
|
|
@@ -1497,7 +1500,7 @@ input,
|
|
|
1497
1500
|
border: none;
|
|
1498
1501
|
background: none;
|
|
1499
1502
|
outline: none;
|
|
1500
|
-
padding: 0px var(--frame-padding-x);
|
|
1503
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1501
1504
|
inset: 0px;
|
|
1502
1505
|
height: 100%;
|
|
1503
1506
|
width: 100%;
|
|
@@ -1505,8 +1508,8 @@ input,
|
|
|
1505
1508
|
font-family: inherit;
|
|
1506
1509
|
font-weight: inherit;
|
|
1507
1510
|
width: 100%;
|
|
1508
|
-
color: var(--color-text-1);
|
|
1509
|
-
border-radius: var(--radius-1);
|
|
1511
|
+
color: var(--tl-color-text-1);
|
|
1512
|
+
border-radius: var(--tl-radius-1);
|
|
1510
1513
|
user-select: all;
|
|
1511
1514
|
-webkit-user-select: text;
|
|
1512
1515
|
white-space: pre;
|
|
@@ -1526,7 +1529,7 @@ input,
|
|
|
1526
1529
|
|
|
1527
1530
|
.tl-embed {
|
|
1528
1531
|
border: none;
|
|
1529
|
-
border-radius: var(--radius-2);
|
|
1532
|
+
border-radius: var(--tl-radius-2);
|
|
1530
1533
|
}
|
|
1531
1534
|
|
|
1532
1535
|
/* -------------- Shape error boundary -------------- */
|
|
@@ -1534,11 +1537,11 @@ input,
|
|
|
1534
1537
|
.tl-shape-error-boundary {
|
|
1535
1538
|
width: 100%;
|
|
1536
1539
|
height: 100%;
|
|
1537
|
-
background-color: var(--color-muted-1);
|
|
1540
|
+
background-color: var(--tl-color-muted-1);
|
|
1538
1541
|
border-width: calc(1px * var(--tl-scale));
|
|
1539
|
-
border-color: var(--color-muted-1);
|
|
1542
|
+
border-color: var(--tl-color-muted-1);
|
|
1540
1543
|
border-style: solid;
|
|
1541
|
-
border-radius: calc(var(--radius-1) * var(--tl-scale));
|
|
1544
|
+
border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
|
|
1542
1545
|
display: flex;
|
|
1543
1546
|
flex-direction: column;
|
|
1544
1547
|
align-items: center;
|
|
@@ -1547,7 +1550,7 @@ input,
|
|
|
1547
1550
|
position: relative;
|
|
1548
1551
|
pointer-events: all;
|
|
1549
1552
|
overflow: hidden;
|
|
1550
|
-
padding: var(--space-2);
|
|
1553
|
+
padding: var(--tl-space-2);
|
|
1551
1554
|
}
|
|
1552
1555
|
|
|
1553
1556
|
.tl-shape-error-boundary::before {
|
|
@@ -1555,7 +1558,7 @@ input,
|
|
|
1555
1558
|
content: 'Error';
|
|
1556
1559
|
font-size: 12px;
|
|
1557
1560
|
font-family: inherit;
|
|
1558
|
-
color: var(--color-text-0);
|
|
1561
|
+
color: var(--tl-color-text-0);
|
|
1559
1562
|
}
|
|
1560
1563
|
|
|
1561
1564
|
/* ----------------- Error boundary ----------------- */
|
|
@@ -1566,9 +1569,9 @@ input,
|
|
|
1566
1569
|
display: flex;
|
|
1567
1570
|
align-items: center;
|
|
1568
1571
|
justify-content: center;
|
|
1569
|
-
padding: var(--space-4);
|
|
1570
|
-
background-color: var(--color-background);
|
|
1571
|
-
color: var(--color-text-1);
|
|
1572
|
+
padding: var(--tl-space-4);
|
|
1573
|
+
background-color: var(--tl-color-background);
|
|
1574
|
+
color: var(--tl-color-text-1);
|
|
1572
1575
|
position: absolute;
|
|
1573
1576
|
}
|
|
1574
1577
|
|
|
@@ -1577,8 +1580,8 @@ input,
|
|
|
1577
1580
|
inset: 0px;
|
|
1578
1581
|
height: 100%;
|
|
1579
1582
|
width: 100%;
|
|
1580
|
-
z-index: var(--layer-error-overlay);
|
|
1581
|
-
background-color: var(--color-overlay);
|
|
1583
|
+
z-index: var(--tl-layer-error-overlay);
|
|
1584
|
+
background-color: var(--tl-color-overlay);
|
|
1582
1585
|
}
|
|
1583
1586
|
|
|
1584
1587
|
.tl-error-boundary__content * {
|
|
@@ -1593,7 +1596,7 @@ input,
|
|
|
1593
1596
|
inset: 0px;
|
|
1594
1597
|
height: 100%;
|
|
1595
1598
|
width: 100%;
|
|
1596
|
-
z-index: var(--layer-error-canvas);
|
|
1599
|
+
z-index: var(--tl-layer-error-canvas);
|
|
1597
1600
|
}
|
|
1598
1601
|
|
|
1599
1602
|
/* some browsers seem to have some weird interactions between stacking contexts
|
|
@@ -1606,7 +1609,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1606
1609
|
inset: 0px;
|
|
1607
1610
|
height: 100%;
|
|
1608
1611
|
width: 100%;
|
|
1609
|
-
z-index: var(--layer-error-canvas-after);
|
|
1612
|
+
z-index: var(--tl-layer-error-canvas-after);
|
|
1610
1613
|
pointer-events: all;
|
|
1611
1614
|
}
|
|
1612
1615
|
|
|
@@ -1616,16 +1619,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1616
1619
|
max-width: 100%;
|
|
1617
1620
|
width: 400px;
|
|
1618
1621
|
max-height: 100%;
|
|
1619
|
-
background-color: var(--color-panel);
|
|
1622
|
+
background-color: var(--tl-color-panel);
|
|
1620
1623
|
padding: 16px;
|
|
1621
1624
|
border-radius: 16px;
|
|
1622
|
-
box-shadow: var(--shadow-2);
|
|
1625
|
+
box-shadow: var(--tl-shadow-2);
|
|
1623
1626
|
font-size: 14px;
|
|
1624
1627
|
font-weight: 400;
|
|
1625
1628
|
display: flex;
|
|
1626
1629
|
flex-direction: column;
|
|
1627
1630
|
overflow: auto;
|
|
1628
|
-
z-index: var(--layer-error-content);
|
|
1631
|
+
z-index: var(--tl-layer-error-content);
|
|
1629
1632
|
gap: 12px;
|
|
1630
1633
|
}
|
|
1631
1634
|
|
|
@@ -1640,10 +1643,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1640
1643
|
}
|
|
1641
1644
|
|
|
1642
1645
|
.tl-error-boundary__content h4 {
|
|
1643
|
-
border: 1px solid var(--color-low-border);
|
|
1646
|
+
border: 1px solid var(--tl-color-low-border);
|
|
1644
1647
|
margin: -6px 0 0 0;
|
|
1645
|
-
padding: var(--space-5);
|
|
1646
|
-
border-radius: var(--radius-2);
|
|
1648
|
+
padding: var(--tl-space-5);
|
|
1649
|
+
border-radius: var(--tl-radius-2);
|
|
1647
1650
|
font-weight: normal;
|
|
1648
1651
|
}
|
|
1649
1652
|
|
|
@@ -1653,10 +1656,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1653
1656
|
}
|
|
1654
1657
|
|
|
1655
1658
|
.tl-error-boundary__content pre {
|
|
1656
|
-
background-color: var(--color-muted-2);
|
|
1659
|
+
background-color: var(--tl-color-muted-2);
|
|
1657
1660
|
margin-top: 0;
|
|
1658
|
-
padding: var(--space-5);
|
|
1659
|
-
border-radius: var(--radius-2);
|
|
1661
|
+
padding: var(--tl-space-5);
|
|
1662
|
+
border-radius: var(--tl-radius-2);
|
|
1660
1663
|
overflow: auto;
|
|
1661
1664
|
font-size: 12px;
|
|
1662
1665
|
max-height: 320px;
|
|
@@ -1668,15 +1671,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1668
1671
|
font-family: inherit;
|
|
1669
1672
|
font-size: 14px;
|
|
1670
1673
|
font-weight: 500;
|
|
1671
|
-
padding: var(--space-4);
|
|
1672
|
-
border-radius: var(--radius-3);
|
|
1674
|
+
padding: var(--tl-space-4);
|
|
1675
|
+
border-radius: var(--tl-radius-3);
|
|
1673
1676
|
cursor: var(--tl-cursor-pointer);
|
|
1674
1677
|
color: inherit;
|
|
1675
1678
|
background-color: transparent;
|
|
1676
1679
|
}
|
|
1677
1680
|
|
|
1678
1681
|
.tl-error-boundary__content a {
|
|
1679
|
-
color: var(--color-selected);
|
|
1682
|
+
color: var(--tl-color-selected);
|
|
1680
1683
|
font-weight: 500;
|
|
1681
1684
|
text-decoration: none;
|
|
1682
1685
|
}
|
|
@@ -1688,31 +1691,31 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1688
1691
|
|
|
1689
1692
|
.tl-error-boundary__content__error button {
|
|
1690
1693
|
position: absolute;
|
|
1691
|
-
top: var(--space-2);
|
|
1692
|
-
right: var(--space-2);
|
|
1694
|
+
top: var(--tl-space-2);
|
|
1695
|
+
right: var(--tl-space-2);
|
|
1693
1696
|
font-size: 12px;
|
|
1694
|
-
padding: var(--space-2) var(--space-3);
|
|
1695
|
-
background-color: var(--color-panel);
|
|
1696
|
-
border-radius: var(--radius-1);
|
|
1697
|
+
padding: var(--tl-space-2) var(--tl-space-3);
|
|
1698
|
+
background-color: var(--tl-color-panel);
|
|
1699
|
+
border-radius: var(--tl-radius-1);
|
|
1697
1700
|
}
|
|
1698
1701
|
|
|
1699
1702
|
.tl-error-boundary__content__actions {
|
|
1700
1703
|
display: flex;
|
|
1701
1704
|
justify-content: space-between;
|
|
1702
|
-
gap: var(--space-4);
|
|
1705
|
+
gap: var(--tl-space-4);
|
|
1703
1706
|
margin: 0px;
|
|
1704
1707
|
margin-left: -4px;
|
|
1705
1708
|
}
|
|
1706
1709
|
.tl-error-boundary__content__actions__group {
|
|
1707
1710
|
display: flex;
|
|
1708
|
-
gap: var(--space-4);
|
|
1711
|
+
gap: var(--tl-space-4);
|
|
1709
1712
|
}
|
|
1710
1713
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
|
1711
|
-
color: var(--color-danger);
|
|
1714
|
+
color: var(--tl-color-danger);
|
|
1712
1715
|
}
|
|
1713
1716
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
|
1714
|
-
background-color: var(--color-primary);
|
|
1715
|
-
color: var(--color-selected-contrast);
|
|
1717
|
+
background-color: var(--tl-color-primary);
|
|
1718
|
+
color: var(--tl-color-selected-contrast);
|
|
1716
1719
|
}
|
|
1717
1720
|
.tl-container__focused:not(.tl-container__no-focus-ring)
|
|
1718
1721
|
.tlui-button.tl-error-boundary__refresh:focus-visible {
|
|
@@ -1724,7 +1727,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1724
1727
|
|
|
1725
1728
|
.tl-hit-test-blocker {
|
|
1726
1729
|
position: absolute;
|
|
1727
|
-
z-index: var(--layer-canvas-blocker);
|
|
1730
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
1728
1731
|
inset: 0px;
|
|
1729
1732
|
width: 100%;
|
|
1730
1733
|
height: 100%;
|
|
@@ -1744,32 +1747,32 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1744
1747
|
|
|
1745
1748
|
.tl-handle__bg:hover {
|
|
1746
1749
|
cursor: var(--tl-cursor-grab);
|
|
1747
|
-
fill: var(--color-selection-fill);
|
|
1750
|
+
fill: var(--tl-color-selection-fill);
|
|
1748
1751
|
}
|
|
1749
1752
|
|
|
1750
1753
|
.tl-bookmark__link:hover {
|
|
1751
|
-
color: var(--color-selected);
|
|
1754
|
+
color: var(--tl-color-selected);
|
|
1752
1755
|
}
|
|
1753
1756
|
|
|
1754
1757
|
.tl-hyperlink-button:hover {
|
|
1755
|
-
color: var(--color-selected);
|
|
1758
|
+
color: var(--tl-color-selected);
|
|
1756
1759
|
}
|
|
1757
1760
|
|
|
1758
1761
|
.tl-error-boundary__content button:hover {
|
|
1759
|
-
background-color: var(--color-low);
|
|
1762
|
+
background-color: var(--tl-color-low);
|
|
1760
1763
|
}
|
|
1761
1764
|
.tl-error-boundary__content a:hover {
|
|
1762
|
-
color: var(--color-text-1);
|
|
1765
|
+
color: var(--tl-color-text-1);
|
|
1763
1766
|
}
|
|
1764
1767
|
.tl-error-boundary__content .tl-error-boundary__refresh:hover {
|
|
1765
|
-
background-color: var(--color-primary);
|
|
1768
|
+
background-color: var(--tl-color-primary);
|
|
1766
1769
|
opacity: 0.9;
|
|
1767
1770
|
}
|
|
1768
1771
|
|
|
1769
1772
|
/* These three rules help preserve clicking into specific points in text areas *while*
|
|
1770
1773
|
* already in edit mode when jumping from shape to shape. */
|
|
1771
1774
|
.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
|
|
1772
|
-
z-index: var(--layer-text-editor);
|
|
1775
|
+
z-index: var(--tl-layer-text-editor);
|
|
1773
1776
|
pointer-events: all;
|
|
1774
1777
|
}
|
|
1775
1778
|
}
|