@tldraw/tlschema 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.51e99e128bd4

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.
@@ -23,275 +23,197 @@ const DefaultColorThemePalette = {
23
23
  black: {
24
24
  solid: "#1d1d1d",
25
25
  fill: "#1d1d1d",
26
- frame: {
27
- headingStroke: "#717171",
28
- headingFill: "#ffffff",
29
- stroke: "#717171",
30
- fill: "#ffffff",
31
- text: "#000000"
32
- },
33
- note: {
34
- fill: "#FCE19C",
35
- text: "#000000"
36
- },
26
+ frameHeadingStroke: "#717171",
27
+ frameHeadingFill: "#ffffff",
28
+ frameStroke: "#717171",
29
+ frameFill: "#ffffff",
30
+ frameText: "#000000",
31
+ noteFill: "#FCE19C",
32
+ noteText: "#000000",
37
33
  semi: "#e8e8e8",
38
34
  pattern: "#494949",
39
- highlight: {
40
- srgb: "#fddd00",
41
- p3: "color(display-p3 0.972 0.8205 0.05)"
42
- }
35
+ highlightSrgb: "#fddd00",
36
+ highlightP3: "color(display-p3 0.972 0.8205 0.05)"
43
37
  },
44
38
  blue: {
45
39
  solid: "#4465e9",
46
40
  fill: "#4465e9",
47
- frame: {
48
- headingStroke: "#6681ec",
49
- headingFill: "#f9fafe",
50
- stroke: "#6681ec",
51
- fill: "#f9fafe",
52
- text: "#000000"
53
- },
54
- note: {
55
- fill: "#8AA3FF",
56
- text: "#000000"
57
- },
41
+ frameHeadingStroke: "#6681ec",
42
+ frameHeadingFill: "#f9fafe",
43
+ frameStroke: "#6681ec",
44
+ frameFill: "#f9fafe",
45
+ frameText: "#000000",
46
+ noteFill: "#8AA3FF",
47
+ noteText: "#000000",
58
48
  semi: "#dce1f8",
59
49
  pattern: "#6681ee",
60
- highlight: {
61
- srgb: "#10acff",
62
- p3: "color(display-p3 0.308 0.6632 0.9996)"
63
- }
50
+ highlightSrgb: "#10acff",
51
+ highlightP3: "color(display-p3 0.308 0.6632 0.9996)"
64
52
  },
65
53
  green: {
66
54
  solid: "#099268",
67
55
  fill: "#099268",
68
- frame: {
69
- headingStroke: "#37a684",
70
- headingFill: "#f8fcfa",
71
- stroke: "#37a684",
72
- fill: "#f8fcfa",
73
- text: "#000000"
74
- },
75
- note: {
76
- fill: "#6FC896",
77
- text: "#000000"
78
- },
56
+ frameHeadingStroke: "#37a684",
57
+ frameHeadingFill: "#f8fcfa",
58
+ frameStroke: "#37a684",
59
+ frameFill: "#f8fcfa",
60
+ frameText: "#000000",
61
+ noteFill: "#6FC896",
62
+ noteText: "#000000",
79
63
  semi: "#d3e9e3",
80
64
  pattern: "#39a785",
81
- highlight: {
82
- srgb: "#00ffc8",
83
- p3: "color(display-p3 0.2536 0.984 0.7981)"
84
- }
65
+ highlightSrgb: "#00ffc8",
66
+ highlightP3: "color(display-p3 0.2536 0.984 0.7981)"
85
67
  },
86
68
  grey: {
87
69
  solid: "#9fa8b2",
88
70
  fill: "#9fa8b2",
89
- frame: {
90
- headingStroke: "#aaaaab",
91
- headingFill: "#fbfcfc",
92
- stroke: "#aaaaab",
93
- fill: "#fcfcfd",
94
- text: "#000000"
95
- },
96
- note: {
97
- fill: "#C0CAD3",
98
- text: "#000000"
99
- },
71
+ frameHeadingStroke: "#aaaaab",
72
+ frameHeadingFill: "#fbfcfc",
73
+ frameStroke: "#aaaaab",
74
+ frameFill: "#fcfcfd",
75
+ frameText: "#000000",
76
+ noteFill: "#C0CAD3",
77
+ noteText: "#000000",
100
78
  semi: "#eceef0",
101
79
  pattern: "#bcc3c9",
102
- highlight: {
103
- srgb: "#cbe7f1",
104
- p3: "color(display-p3 0.8163 0.9023 0.9416)"
105
- }
80
+ highlightSrgb: "#cbe7f1",
81
+ highlightP3: "color(display-p3 0.8163 0.9023 0.9416)"
106
82
  },
107
83
  "light-blue": {
108
84
  solid: "#4ba1f1",
109
85
  fill: "#4ba1f1",
110
- frame: {
111
- headingStroke: "#6cb2f3",
112
- headingFill: "#f8fbfe",
113
- stroke: "#6cb2f3",
114
- fill: "#fafcff",
115
- text: "#000000"
116
- },
117
- note: {
118
- fill: "#9BC4FD",
119
- text: "#000000"
120
- },
86
+ frameHeadingStroke: "#6cb2f3",
87
+ frameHeadingFill: "#f8fbfe",
88
+ frameStroke: "#6cb2f3",
89
+ frameFill: "#fafcff",
90
+ frameText: "#000000",
91
+ noteFill: "#9BC4FD",
92
+ noteText: "#000000",
121
93
  semi: "#ddedfa",
122
94
  pattern: "#6fbbf8",
123
- highlight: {
124
- srgb: "#00f4ff",
125
- p3: "color(display-p3 0.1512 0.9414 0.9996)"
126
- }
95
+ highlightSrgb: "#00f4ff",
96
+ highlightP3: "color(display-p3 0.1512 0.9414 0.9996)"
127
97
  },
128
98
  "light-green": {
129
99
  solid: "#4cb05e",
130
100
  fill: "#4cb05e",
131
- frame: {
132
- headingStroke: "#6dbe7c",
133
- headingFill: "#f8fcf9",
134
- stroke: "#6dbe7c",
135
- fill: "#fafdfa",
136
- text: "#000000"
137
- },
138
- note: {
139
- fill: "#98D08A",
140
- text: "#000000"
141
- },
101
+ frameHeadingStroke: "#6dbe7c",
102
+ frameHeadingFill: "#f8fcf9",
103
+ frameStroke: "#6dbe7c",
104
+ frameFill: "#fafdfa",
105
+ frameText: "#000000",
106
+ noteFill: "#98D08A",
107
+ noteText: "#000000",
142
108
  semi: "#dbf0e0",
143
109
  pattern: "#65cb78",
144
- highlight: {
145
- srgb: "#65f641",
146
- p3: "color(display-p3 0.563 0.9495 0.3857)"
147
- }
110
+ highlightSrgb: "#65f641",
111
+ highlightP3: "color(display-p3 0.563 0.9495 0.3857)"
148
112
  },
149
113
  "light-red": {
150
114
  solid: "#f87777",
151
115
  fill: "#f87777",
152
- frame: {
153
- headingStroke: "#f89090",
154
- headingFill: "#fffafa",
155
- stroke: "#f89090",
156
- fill: "#fffbfb",
157
- text: "#000000"
158
- },
159
- note: {
160
- fill: "#F7A5A1",
161
- text: "#000000"
162
- },
116
+ frameHeadingStroke: "#f89090",
117
+ frameHeadingFill: "#fffafa",
118
+ frameStroke: "#f89090",
119
+ frameFill: "#fffbfb",
120
+ frameText: "#000000",
121
+ noteFill: "#F7A5A1",
122
+ noteText: "#000000",
163
123
  semi: "#f4dadb",
164
124
  pattern: "#fe9e9e",
165
- highlight: {
166
- srgb: "#ff7fa3",
167
- p3: "color(display-p3 0.9988 0.5301 0.6397)"
168
- }
125
+ highlightSrgb: "#ff7fa3",
126
+ highlightP3: "color(display-p3 0.9988 0.5301 0.6397)"
169
127
  },
170
128
  "light-violet": {
171
129
  solid: "#e085f4",
172
130
  fill: "#e085f4",
173
- frame: {
174
- headingStroke: "#e59bf5",
175
- headingFill: "#fefaff",
176
- stroke: "#e59bf5",
177
- fill: "#fefbff",
178
- text: "#000000"
179
- },
180
- note: {
181
- fill: "#DFB0F9",
182
- text: "#000000"
183
- },
131
+ frameHeadingStroke: "#e59bf5",
132
+ frameHeadingFill: "#fefaff",
133
+ frameStroke: "#e59bf5",
134
+ frameFill: "#fefbff",
135
+ frameText: "#000000",
136
+ noteFill: "#DFB0F9",
137
+ noteText: "#000000",
184
138
  semi: "#f5eafa",
185
139
  pattern: "#e9acf8",
186
- highlight: {
187
- srgb: "#ff88ff",
188
- p3: "color(display-p3 0.9676 0.5652 0.9999)"
189
- }
140
+ highlightSrgb: "#ff88ff",
141
+ highlightP3: "color(display-p3 0.9676 0.5652 0.9999)"
190
142
  },
191
143
  orange: {
192
144
  solid: "#e16919",
193
145
  fill: "#e16919",
194
- frame: {
195
- headingStroke: "#e68544",
196
- headingFill: "#fef9f6",
197
- stroke: "#e68544",
198
- fill: "#fef9f6",
199
- text: "#000000"
200
- },
201
- note: {
202
- fill: "#FAA475",
203
- text: "#000000"
204
- },
146
+ frameHeadingStroke: "#e68544",
147
+ frameHeadingFill: "#fef9f6",
148
+ frameStroke: "#e68544",
149
+ frameFill: "#fef9f6",
150
+ frameText: "#000000",
151
+ noteFill: "#FAA475",
152
+ noteText: "#000000",
205
153
  semi: "#f8e2d4",
206
154
  pattern: "#f78438",
207
- highlight: {
208
- srgb: "#ffa500",
209
- p3: "color(display-p3 0.9988 0.6905 0.266)"
210
- }
155
+ highlightSrgb: "#ffa500",
156
+ highlightP3: "color(display-p3 0.9988 0.6905 0.266)"
211
157
  },
212
158
  red: {
213
159
  solid: "#e03131",
214
160
  fill: "#e03131",
215
- frame: {
216
- headingStroke: "#e55757",
217
- headingFill: "#fef7f7",
218
- stroke: "#e55757",
219
- fill: "#fef9f9",
220
- text: "#000000"
221
- },
222
- note: {
223
- fill: "#FC8282",
224
- text: "#000000"
225
- },
161
+ frameHeadingStroke: "#e55757",
162
+ frameHeadingFill: "#fef7f7",
163
+ frameStroke: "#e55757",
164
+ frameFill: "#fef9f9",
165
+ frameText: "#000000",
166
+ noteFill: "#FC8282",
167
+ noteText: "#000000",
226
168
  semi: "#f4dadb",
227
169
  pattern: "#e55959",
228
- highlight: {
229
- srgb: "#ff636e",
230
- p3: "color(display-p3 0.9992 0.4376 0.45)"
231
- }
170
+ highlightSrgb: "#ff636e",
171
+ highlightP3: "color(display-p3 0.9992 0.4376 0.45)"
232
172
  },
233
173
  violet: {
234
174
  solid: "#ae3ec9",
235
175
  fill: "#ae3ec9",
236
- frame: {
237
- headingStroke: "#bc62d3",
238
- headingFill: "#fcf7fd",
239
- stroke: "#bc62d3",
240
- fill: "#fdf9fd",
241
- text: "#000000"
242
- },
243
- note: {
244
- fill: "#DB91FD",
245
- text: "#000000"
246
- },
176
+ frameHeadingStroke: "#bc62d3",
177
+ frameHeadingFill: "#fcf7fd",
178
+ frameStroke: "#bc62d3",
179
+ frameFill: "#fdf9fd",
180
+ frameText: "#000000",
181
+ noteFill: "#DB91FD",
182
+ noteText: "#000000",
247
183
  semi: "#ecdcf2",
248
184
  pattern: "#bd63d3",
249
- highlight: {
250
- srgb: "#c77cff",
251
- p3: "color(display-p3 0.7469 0.5089 0.9995)"
252
- }
185
+ highlightSrgb: "#c77cff",
186
+ highlightP3: "color(display-p3 0.7469 0.5089 0.9995)"
253
187
  },
254
188
  yellow: {
255
189
  solid: "#f1ac4b",
256
190
  fill: "#f1ac4b",
257
- frame: {
258
- headingStroke: "#f3bb6c",
259
- headingFill: "#fefcf8",
260
- stroke: "#f3bb6c",
261
- fill: "#fffdfa",
262
- text: "#000000"
263
- },
264
- note: {
265
- fill: "#FED49A",
266
- text: "#000000"
267
- },
191
+ frameHeadingStroke: "#f3bb6c",
192
+ frameHeadingFill: "#fefcf8",
193
+ frameStroke: "#f3bb6c",
194
+ frameFill: "#fffdfa",
195
+ frameText: "#000000",
196
+ noteFill: "#FED49A",
197
+ noteText: "#000000",
268
198
  semi: "#f9f0e6",
269
199
  pattern: "#fecb92",
270
- highlight: {
271
- srgb: "#fddd00",
272
- p3: "color(display-p3 0.972 0.8705 0.05)"
273
- }
200
+ highlightSrgb: "#fddd00",
201
+ highlightP3: "color(display-p3 0.972 0.8705 0.05)"
274
202
  },
275
203
  white: {
276
204
  solid: "#FFFFFF",
277
205
  fill: "#FFFFFF",
278
206
  semi: "#f5f5f5",
279
207
  pattern: "#f9f9f9",
280
- frame: {
281
- headingStroke: "#7d7d7d",
282
- headingFill: "#ffffff",
283
- stroke: "#7d7d7d",
284
- fill: "#ffffff",
285
- text: "#000000"
286
- },
287
- note: {
288
- fill: "#FFFFFF",
289
- text: "#000000"
290
- },
291
- highlight: {
292
- srgb: "#ffffff",
293
- p3: "color(display-p3 1 1 1)"
294
- }
208
+ frameHeadingStroke: "#7d7d7d",
209
+ frameHeadingFill: "#ffffff",
210
+ frameStroke: "#7d7d7d",
211
+ frameFill: "#ffffff",
212
+ frameText: "#000000",
213
+ noteFill: "#FFFFFF",
214
+ noteText: "#000000",
215
+ highlightSrgb: "#ffffff",
216
+ highlightP3: "color(display-p3 1 1 1)"
295
217
  }
296
218
  },
297
219
  darkMode: {
@@ -302,316 +224,238 @@ const DefaultColorThemePalette = {
302
224
  black: {
303
225
  solid: "#f2f2f2",
304
226
  fill: "#f2f2f2",
305
- frame: {
306
- headingStroke: "#5c5c5c",
307
- headingFill: "#252525",
308
- stroke: "#5c5c5c",
309
- fill: "#0c0c0c",
310
- text: "#f2f2f2"
311
- },
312
- note: {
313
- fill: "#2c2c2c",
314
- text: "#f2f2f2"
315
- },
227
+ frameHeadingStroke: "#5c5c5c",
228
+ frameHeadingFill: "#252525",
229
+ frameStroke: "#5c5c5c",
230
+ frameFill: "#0c0c0c",
231
+ frameText: "#f2f2f2",
232
+ noteFill: "#2c2c2c",
233
+ noteText: "#f2f2f2",
316
234
  semi: "#2c3036",
317
235
  pattern: "#989898",
318
- highlight: {
319
- srgb: "#d2b700",
320
- p3: "color(display-p3 0.8078 0.6225 0.0312)"
321
- }
236
+ highlightSrgb: "#d2b700",
237
+ highlightP3: "color(display-p3 0.8078 0.6225 0.0312)"
322
238
  },
323
239
  blue: {
324
240
  solid: "#4f72fc",
325
241
  // 3c60f0
326
242
  fill: "#4f72fc",
327
- frame: {
328
- headingStroke: "#384994",
329
- headingFill: "#1C2036",
330
- stroke: "#384994",
331
- fill: "#11141f",
332
- text: "#f2f2f2"
333
- },
334
- note: {
335
- fill: "#2A3F98",
336
- text: "#f2f2f2"
337
- },
243
+ frameHeadingStroke: "#384994",
244
+ frameHeadingFill: "#1C2036",
245
+ frameStroke: "#384994",
246
+ frameFill: "#11141f",
247
+ frameText: "#f2f2f2",
248
+ noteFill: "#2A3F98",
249
+ noteText: "#f2f2f2",
338
250
  semi: "#262d40",
339
251
  pattern: "#3a4b9e",
340
- highlight: {
341
- srgb: "#0079d2",
342
- p3: "color(display-p3 0.0032 0.4655 0.7991)"
343
- }
252
+ highlightSrgb: "#0079d2",
253
+ highlightP3: "color(display-p3 0.0032 0.4655 0.7991)"
344
254
  },
345
255
  green: {
346
256
  solid: "#099268",
347
257
  fill: "#099268",
348
- frame: {
349
- headingStroke: "#10513C",
350
- headingFill: "#14241f",
351
- stroke: "#10513C",
352
- fill: "#0E1614",
353
- text: "#f2f2f2"
354
- },
355
- note: {
356
- fill: "#014429",
357
- text: "#f2f2f2"
358
- },
258
+ frameHeadingStroke: "#10513C",
259
+ frameHeadingFill: "#14241f",
260
+ frameStroke: "#10513C",
261
+ frameFill: "#0E1614",
262
+ frameText: "#f2f2f2",
263
+ noteFill: "#014429",
264
+ noteText: "#f2f2f2",
359
265
  semi: "#253231",
360
266
  pattern: "#366a53",
361
- highlight: {
362
- srgb: "#009774",
363
- p3: "color(display-p3 0.0085 0.582 0.4604)"
364
- }
267
+ highlightSrgb: "#009774",
268
+ highlightP3: "color(display-p3 0.0085 0.582 0.4604)"
365
269
  },
366
270
  grey: {
367
271
  solid: "#9398b0",
368
272
  fill: "#9398b0",
369
- frame: {
370
- headingStroke: "#42474D",
371
- headingFill: "#23262A",
372
- stroke: "#42474D",
373
- fill: "#151719",
374
- text: "#f2f2f2"
375
- },
376
- note: {
377
- fill: "#56595F",
378
- text: "#f2f2f2"
379
- },
273
+ frameHeadingStroke: "#42474D",
274
+ frameHeadingFill: "#23262A",
275
+ frameStroke: "#42474D",
276
+ frameFill: "#151719",
277
+ frameText: "#f2f2f2",
278
+ noteFill: "#56595F",
279
+ noteText: "#f2f2f2",
380
280
  semi: "#33373c",
381
281
  pattern: "#7c8187",
382
- highlight: {
383
- srgb: "#9cb4cb",
384
- p3: "color(display-p3 0.6299 0.7012 0.7856)"
385
- }
282
+ highlightSrgb: "#9cb4cb",
283
+ highlightP3: "color(display-p3 0.6299 0.7012 0.7856)"
386
284
  },
387
285
  "light-blue": {
388
286
  solid: "#4dabf7",
389
287
  fill: "#4dabf7",
390
- frame: {
391
- headingStroke: "#075797",
392
- headingFill: "#142839",
393
- stroke: "#075797",
394
- fill: "#0B1823",
395
- text: "#f2f2f2"
396
- },
397
- note: {
398
- fill: "#1F5495",
399
- text: "#f2f2f2"
400
- },
288
+ frameHeadingStroke: "#075797",
289
+ frameHeadingFill: "#142839",
290
+ frameStroke: "#075797",
291
+ frameFill: "#0B1823",
292
+ frameText: "#f2f2f2",
293
+ noteFill: "#1F5495",
294
+ noteText: "#f2f2f2",
401
295
  semi: "#2a3642",
402
296
  pattern: "#4d7aa9",
403
- highlight: {
404
- srgb: "#00bdc8",
405
- p3: "color(display-p3 0.0023 0.7259 0.7735)"
406
- }
297
+ highlightSrgb: "#00bdc8",
298
+ highlightP3: "color(display-p3 0.0023 0.7259 0.7735)"
407
299
  },
408
300
  "light-green": {
409
301
  solid: "#40c057",
410
302
  fill: "#40c057",
411
- frame: {
412
- headingStroke: "#1C5427",
413
- headingFill: "#18251A",
414
- stroke: "#1C5427",
415
- fill: "#0F1911",
416
- text: "#f2f2f2"
417
- },
418
- note: {
419
- fill: "#21581D",
420
- text: "#f2f2f2"
421
- },
303
+ frameHeadingStroke: "#1C5427",
304
+ frameHeadingFill: "#18251A",
305
+ frameStroke: "#1C5427",
306
+ frameFill: "#0F1911",
307
+ frameText: "#f2f2f2",
308
+ noteFill: "#21581D",
309
+ noteText: "#f2f2f2",
422
310
  semi: "#2a3830",
423
311
  pattern: "#4e874e",
424
- highlight: {
425
- srgb: "#00a000",
426
- p3: "color(display-p3 0.2711 0.6172 0.0195)"
427
- }
312
+ highlightSrgb: "#00a000",
313
+ highlightP3: "color(display-p3 0.2711 0.6172 0.0195)"
428
314
  },
429
315
  "light-red": {
430
316
  solid: "#ff8787",
431
317
  fill: "#ff8787",
432
- frame: {
433
- headingStroke: "#6f3232",
434
- // Darker and desaturated variant of solid
435
- headingFill: "#341818",
436
- // Deep, muted dark red
437
- stroke: "#6f3232",
438
- // Matches headingStroke
439
- fill: "#181212",
440
- // Darker, muted background shade
441
- text: "#f2f2f2"
442
- // Consistent bright text color
443
- },
444
- note: {
445
- fill: "#7a3333",
446
- // Medium-dark, muted variant of solid
447
- text: "#f2f2f2"
448
- },
318
+ frameHeadingStroke: "#6f3232",
319
+ // Darker and desaturated variant of solid
320
+ frameHeadingFill: "#341818",
321
+ // Deep, muted dark red
322
+ frameStroke: "#6f3232",
323
+ // Matches headingStroke
324
+ frameFill: "#181212",
325
+ // Darker, muted background shade
326
+ frameText: "#f2f2f2",
327
+ // Consistent bright text color
328
+ noteFill: "#7a3333",
329
+ // Medium-dark, muted variant of solid
330
+ noteText: "#f2f2f2",
449
331
  semi: "#3c2b2b",
450
332
  // Subdued, darker neutral-red tone
451
333
  pattern: "#a56767",
452
334
  // Existing pattern shade retained
453
- highlight: {
454
- srgb: "#db005b",
455
- p3: "color(display-p3 0.7849 0.0585 0.3589)"
456
- }
335
+ highlightSrgb: "#db005b",
336
+ highlightP3: "color(display-p3 0.7849 0.0585 0.3589)"
457
337
  },
458
338
  "light-violet": {
459
339
  solid: "#e599f7",
460
340
  fill: "#e599f7",
461
- frame: {
462
- headingStroke: "#6c367a",
463
- headingFill: "#2D2230",
464
- stroke: "#6c367a",
465
- fill: "#1C151E",
466
- text: "#f2f2f2"
467
- },
468
- note: {
469
- fill: "#762F8E",
470
- text: "#f2f2f2"
471
- },
341
+ frameHeadingStroke: "#6c367a",
342
+ frameHeadingFill: "#2D2230",
343
+ frameStroke: "#6c367a",
344
+ frameFill: "#1C151E",
345
+ frameText: "#f2f2f2",
346
+ noteFill: "#762F8E",
347
+ noteText: "#f2f2f2",
472
348
  semi: "#383442",
473
349
  pattern: "#9770a9",
474
- highlight: {
475
- srgb: "#c400c7",
476
- p3: "color(display-p3 0.7024 0.0403 0.753)"
477
- }
350
+ highlightSrgb: "#c400c7",
351
+ highlightP3: "color(display-p3 0.7024 0.0403 0.753)"
478
352
  },
479
353
  orange: {
480
354
  solid: "#f76707",
481
355
  fill: "#f76707",
482
- frame: {
483
- headingStroke: "#773a0e",
484
- // Darker, muted version of solid
485
- headingFill: "#2f1d13",
486
- // Deep, warm, muted background
487
- stroke: "#773a0e",
488
- // Matches headingStroke
489
- fill: "#1c1512",
490
- // Darker, richer muted background
491
- text: "#f2f2f2"
492
- // Bright text for contrast
493
- },
494
- note: {
495
- fill: "#7c3905",
496
- // Muted dark variant for note fill
497
- text: "#f2f2f2"
498
- },
356
+ frameHeadingStroke: "#773a0e",
357
+ // Darker, muted version of solid
358
+ frameHeadingFill: "#2f1d13",
359
+ // Deep, warm, muted background
360
+ frameStroke: "#773a0e",
361
+ // Matches headingStroke
362
+ frameFill: "#1c1512",
363
+ // Darker, richer muted background
364
+ frameText: "#f2f2f2",
365
+ // Bright text for contrast
366
+ noteFill: "#7c3905",
367
+ // Muted dark variant for note fill
368
+ noteText: "#f2f2f2",
499
369
  semi: "#3b2e27",
500
370
  // Muted neutral-orange tone
501
371
  pattern: "#9f552d",
502
372
  // Retained existing shade
503
- highlight: {
504
- srgb: "#d07a00",
505
- p3: "color(display-p3 0.7699 0.4937 0.0085)"
506
- }
373
+ highlightSrgb: "#d07a00",
374
+ highlightP3: "color(display-p3 0.7699 0.4937 0.0085)"
507
375
  },
508
376
  red: {
509
377
  solid: "#e03131",
510
378
  fill: "#e03131",
511
- frame: {
512
- headingStroke: "#701e1e",
513
- // Darker, muted variation of solid
514
- headingFill: "#301616",
515
- // Deep, muted reddish backdrop
516
- stroke: "#701e1e",
517
- // Matches headingStroke
518
- fill: "#1b1313",
519
- // Rich, dark muted background
520
- text: "#f2f2f2"
521
- // Bright text for readability
522
- },
523
- note: {
524
- fill: "#7e201f",
525
- // Muted dark variant for note fill
526
- text: "#f2f2f2"
527
- },
379
+ frameHeadingStroke: "#701e1e",
380
+ // Darker, muted variation of solid
381
+ frameHeadingFill: "#301616",
382
+ // Deep, muted reddish backdrop
383
+ frameStroke: "#701e1e",
384
+ // Matches headingStroke
385
+ frameFill: "#1b1313",
386
+ // Rich, dark muted background
387
+ frameText: "#f2f2f2",
388
+ // Bright text for readability
389
+ noteFill: "#7e201f",
390
+ // Muted dark variant for note fill
391
+ noteText: "#f2f2f2",
528
392
  semi: "#382726",
529
393
  // Dark neutral-red tone
530
394
  pattern: "#8f3734",
531
395
  // Existing pattern color retained
532
- highlight: {
533
- srgb: "#de002c",
534
- p3: "color(display-p3 0.7978 0.0509 0.2035)"
535
- }
396
+ highlightSrgb: "#de002c",
397
+ highlightP3: "color(display-p3 0.7978 0.0509 0.2035)"
536
398
  },
537
399
  violet: {
538
400
  solid: "#ae3ec9",
539
401
  fill: "#ae3ec9",
540
- frame: {
541
- headingStroke: "#6d1583",
542
- // Darker, muted variation of solid
543
- headingFill: "#27152e",
544
- // Deep, rich muted violet backdrop
545
- stroke: "#6d1583",
546
- // Matches headingStroke
547
- fill: "#1b0f21",
548
- // Darker muted violet background
549
- text: "#f2f2f2"
550
- // Consistent bright text color
551
- },
552
- note: {
553
- fill: "#5f1c70",
554
- // Muted dark variant for note fill
555
- text: "#f2f2f2"
556
- },
402
+ frameHeadingStroke: "#6d1583",
403
+ // Darker, muted variation of solid
404
+ frameHeadingFill: "#27152e",
405
+ // Deep, rich muted violet backdrop
406
+ frameStroke: "#6d1583",
407
+ // Matches headingStroke
408
+ frameFill: "#1b0f21",
409
+ // Darker muted violet background
410
+ frameText: "#f2f2f2",
411
+ // Consistent bright text color
412
+ noteFill: "#5f1c70",
413
+ // Muted dark variant for note fill
414
+ noteText: "#f2f2f2",
557
415
  semi: "#342938",
558
416
  // Dark neutral-violet tone
559
417
  pattern: "#763a8b",
560
418
  // Retained existing pattern color
561
- highlight: {
562
- srgb: "#9e00ee",
563
- p3: "color(display-p3 0.5651 0.0079 0.8986)"
564
- }
419
+ highlightSrgb: "#9e00ee",
420
+ highlightP3: "color(display-p3 0.5651 0.0079 0.8986)"
565
421
  },
566
422
  yellow: {
567
423
  solid: "#ffc034",
568
424
  fill: "#ffc034",
569
- frame: {
570
- headingStroke: "#684e12",
571
- // Darker, muted variant of solid
572
- headingFill: "#2a2113",
573
- // Rich, muted dark-yellow background
574
- stroke: "#684e12",
575
- // Matches headingStroke
576
- fill: "#1e1911",
577
- // Darker muted shade for background fill
578
- text: "#f2f2f2"
579
- // Bright text color for readability
580
- },
581
- note: {
582
- fill: "#8a5e1c",
583
- // Muted, dark complementary variant
584
- text: "#f2f2f2"
585
- },
425
+ frameHeadingStroke: "#684e12",
426
+ // Darker, muted variant of solid
427
+ frameHeadingFill: "#2a2113",
428
+ // Rich, muted dark-yellow background
429
+ frameStroke: "#684e12",
430
+ // Matches headingStroke
431
+ frameFill: "#1e1911",
432
+ // Darker muted shade for background fill
433
+ frameText: "#f2f2f2",
434
+ // Bright text color for readability
435
+ noteFill: "#8a5e1c",
436
+ // Muted, dark complementary variant
437
+ noteText: "#f2f2f2",
586
438
  semi: "#3b352b",
587
439
  // Dark muted neutral-yellow tone
588
440
  pattern: "#fecb92",
589
441
  // Existing shade retained
590
- highlight: {
591
- srgb: "#d2b700",
592
- p3: "color(display-p3 0.8078 0.7225 0.0312)"
593
- }
442
+ highlightSrgb: "#d2b700",
443
+ highlightP3: "color(display-p3 0.8078 0.7225 0.0312)"
594
444
  },
595
445
  white: {
596
446
  solid: "#f3f3f3",
597
447
  fill: "#f3f3f3",
598
448
  semi: "#f5f5f5",
599
449
  pattern: "#f9f9f9",
600
- frame: {
601
- headingStroke: "#ffffff",
602
- headingFill: "#ffffff",
603
- stroke: "#ffffff",
604
- fill: "#ffffff",
605
- text: "#000000"
606
- },
607
- note: {
608
- fill: "#eaeaea",
609
- text: "#1d1d1d"
610
- },
611
- highlight: {
612
- srgb: "#ffffff",
613
- p3: "color(display-p3 1 1 1)"
614
- }
450
+ frameHeadingStroke: "#ffffff",
451
+ frameHeadingFill: "#ffffff",
452
+ frameStroke: "#ffffff",
453
+ frameFill: "#ffffff",
454
+ frameText: "#000000",
455
+ noteFill: "#eaeaea",
456
+ noteText: "#1d1d1d",
457
+ highlightSrgb: "#ffffff",
458
+ highlightP3: "color(display-p3 1 1 1)"
615
459
  }
616
460
  }
617
461
  };
@@ -626,11 +470,23 @@ const DefaultLabelColorStyle = StyleProp.defineEnum("tldraw:labelColor", {
626
470
  defaultValue: "black",
627
471
  values: defaultColorNames
628
472
  });
473
+ const defaultColorNamesSet = new Set(defaultColorNames);
474
+ function isDefaultThemeColor(color) {
475
+ return defaultColorNamesSet.has(color);
476
+ }
477
+ function getColorValue(theme, color, variant) {
478
+ if (!isDefaultThemeColor(color)) {
479
+ return color;
480
+ }
481
+ return theme[color][variant];
482
+ }
629
483
  export {
630
484
  DefaultColorStyle,
631
485
  DefaultColorThemePalette,
632
486
  DefaultLabelColorStyle,
633
487
  defaultColorNames,
634
- getDefaultColorTheme
488
+ getColorValue,
489
+ getDefaultColorTheme,
490
+ isDefaultThemeColor
635
491
  };
636
492
  //# sourceMappingURL=TLColorStyle.mjs.map