@tldraw/tlschema 4.6.0-next.4dde09fa17ab → 4.6.0-next.59173cd7226e

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 (79) hide show
  1. package/dist-cjs/assets/TLBaseAsset.js +4 -3
  2. package/dist-cjs/assets/TLBaseAsset.js.map +2 -2
  3. package/dist-cjs/assets/TLBookmarkAsset.js +9 -7
  4. package/dist-cjs/assets/TLBookmarkAsset.js.map +2 -2
  5. package/dist-cjs/assets/TLImageAsset.js +12 -10
  6. package/dist-cjs/assets/TLImageAsset.js.map +2 -2
  7. package/dist-cjs/assets/TLVideoAsset.js +11 -9
  8. package/dist-cjs/assets/TLVideoAsset.js.map +2 -2
  9. package/dist-cjs/createTLSchema.js +10 -4
  10. package/dist-cjs/createTLSchema.js.map +2 -2
  11. package/dist-cjs/index.d.ts +601 -343
  12. package/dist-cjs/index.js +17 -7
  13. package/dist-cjs/index.js.map +2 -2
  14. package/dist-cjs/records/TLAsset.js +29 -14
  15. package/dist-cjs/records/TLAsset.js.map +2 -2
  16. package/dist-cjs/shapes/TLFrameShape.js +3 -1
  17. package/dist-cjs/shapes/TLFrameShape.js.map +2 -2
  18. package/dist-cjs/shapes/TLNoteShape.js +12 -2
  19. package/dist-cjs/shapes/TLNoteShape.js.map +2 -2
  20. package/dist-cjs/styles/StyleProp.js +38 -1
  21. package/dist-cjs/styles/StyleProp.js.map +2 -2
  22. package/dist-cjs/styles/TLColorStyle.js +36 -487
  23. package/dist-cjs/styles/TLColorStyle.js.map +2 -2
  24. package/dist-cjs/styles/TLDashStyle.js +1 -1
  25. package/dist-cjs/styles/TLDashStyle.js.map +2 -2
  26. package/dist-cjs/styles/TLFontFace.js +17 -0
  27. package/dist-cjs/styles/TLFontFace.js.map +7 -0
  28. package/dist-cjs/styles/TLFontStyle.js +36 -1
  29. package/dist-cjs/styles/TLFontStyle.js.map +2 -2
  30. package/dist-cjs/styles/TLTheme.js +17 -0
  31. package/dist-cjs/styles/TLTheme.js.map +7 -0
  32. package/dist-esm/assets/TLBaseAsset.mjs +4 -3
  33. package/dist-esm/assets/TLBaseAsset.mjs.map +2 -2
  34. package/dist-esm/assets/TLBookmarkAsset.mjs +9 -7
  35. package/dist-esm/assets/TLBookmarkAsset.mjs.map +2 -2
  36. package/dist-esm/assets/TLImageAsset.mjs +12 -10
  37. package/dist-esm/assets/TLImageAsset.mjs.map +2 -2
  38. package/dist-esm/assets/TLVideoAsset.mjs +11 -9
  39. package/dist-esm/assets/TLVideoAsset.mjs.map +2 -2
  40. package/dist-esm/createTLSchema.mjs +17 -8
  41. package/dist-esm/createTLSchema.mjs.map +2 -2
  42. package/dist-esm/index.d.mts +601 -343
  43. package/dist-esm/index.mjs +28 -14
  44. package/dist-esm/index.mjs.map +2 -2
  45. package/dist-esm/records/TLAsset.mjs +29 -14
  46. package/dist-esm/records/TLAsset.mjs.map +2 -2
  47. package/dist-esm/shapes/TLFrameShape.mjs +3 -1
  48. package/dist-esm/shapes/TLFrameShape.mjs.map +2 -2
  49. package/dist-esm/shapes/TLNoteShape.mjs +12 -2
  50. package/dist-esm/shapes/TLNoteShape.mjs.map +2 -2
  51. package/dist-esm/styles/StyleProp.mjs +38 -1
  52. package/dist-esm/styles/StyleProp.mjs.map +2 -2
  53. package/dist-esm/styles/TLColorStyle.mjs +36 -487
  54. package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
  55. package/dist-esm/styles/TLDashStyle.mjs +1 -1
  56. package/dist-esm/styles/TLDashStyle.mjs.map +2 -2
  57. package/dist-esm/styles/TLFontFace.mjs +1 -0
  58. package/dist-esm/styles/TLFontFace.mjs.map +7 -0
  59. package/dist-esm/styles/TLFontStyle.mjs +36 -1
  60. package/dist-esm/styles/TLFontStyle.mjs.map +2 -2
  61. package/dist-esm/styles/TLTheme.mjs +1 -0
  62. package/dist-esm/styles/TLTheme.mjs.map +7 -0
  63. package/package.json +5 -5
  64. package/src/assets/TLBaseAsset.ts +25 -28
  65. package/src/assets/TLBookmarkAsset.ts +13 -33
  66. package/src/assets/TLImageAsset.ts +16 -42
  67. package/src/assets/TLVideoAsset.ts +15 -40
  68. package/src/createTLSchema.ts +54 -15
  69. package/src/index.ts +31 -11
  70. package/src/migrations.test.ts +22 -0
  71. package/src/records/TLAsset.ts +139 -74
  72. package/src/shapes/TLFrameShape.ts +3 -1
  73. package/src/shapes/TLNoteShape.ts +19 -5
  74. package/src/styles/StyleProp.ts +42 -5
  75. package/src/styles/TLColorStyle.ts +55 -698
  76. package/src/styles/TLDashStyle.ts +1 -1
  77. package/src/styles/TLFontFace.ts +65 -0
  78. package/src/styles/TLFontStyle.ts +53 -4
  79. package/src/styles/TLTheme.ts +240 -0
@@ -14,480 +14,6 @@ const defaultColorNames = [
14
14
  "red",
15
15
  "white"
16
16
  ];
17
- const DefaultColorThemePalette = {
18
- lightMode: {
19
- id: "light",
20
- text: "#000000",
21
- background: "#f9fafb",
22
- solid: "#fcfffe",
23
- black: {
24
- solid: "#1d1d1d",
25
- fill: "#1d1d1d",
26
- linedFill: "#363636",
27
- frameHeadingStroke: "#717171",
28
- frameHeadingFill: "#ffffff",
29
- frameStroke: "#717171",
30
- frameFill: "#ffffff",
31
- frameText: "#000000",
32
- noteFill: "#FCE19C",
33
- noteText: "#000000",
34
- semi: "#e8e8e8",
35
- pattern: "#494949",
36
- highlightSrgb: "#fddd00",
37
- highlightP3: "color(display-p3 0.972 0.8205 0.05)"
38
- },
39
- blue: {
40
- solid: "#4465e9",
41
- fill: "#4465e9",
42
- linedFill: "#6580ec",
43
- frameHeadingStroke: "#6681ec",
44
- frameHeadingFill: "#f9fafe",
45
- frameStroke: "#6681ec",
46
- frameFill: "#f9fafe",
47
- frameText: "#000000",
48
- noteFill: "#8AA3FF",
49
- noteText: "#000000",
50
- semi: "#dce1f8",
51
- pattern: "#6681ee",
52
- highlightSrgb: "#10acff",
53
- highlightP3: "color(display-p3 0.308 0.6632 0.9996)"
54
- },
55
- green: {
56
- solid: "#099268",
57
- fill: "#099268",
58
- linedFill: "#0bad7c",
59
- frameHeadingStroke: "#37a684",
60
- frameHeadingFill: "#f8fcfa",
61
- frameStroke: "#37a684",
62
- frameFill: "#f8fcfa",
63
- frameText: "#000000",
64
- noteFill: "#6FC896",
65
- noteText: "#000000",
66
- semi: "#d3e9e3",
67
- pattern: "#39a785",
68
- highlightSrgb: "#00ffc8",
69
- highlightP3: "color(display-p3 0.2536 0.984 0.7981)"
70
- },
71
- grey: {
72
- solid: "#9fa8b2",
73
- fill: "#9fa8b2",
74
- linedFill: "#bbc1c9",
75
- frameHeadingStroke: "#aaaaab",
76
- frameHeadingFill: "#fbfcfc",
77
- frameStroke: "#aaaaab",
78
- frameFill: "#fcfcfd",
79
- frameText: "#000000",
80
- noteFill: "#C0CAD3",
81
- noteText: "#000000",
82
- semi: "#eceef0",
83
- pattern: "#bcc3c9",
84
- highlightSrgb: "#cbe7f1",
85
- highlightP3: "color(display-p3 0.8163 0.9023 0.9416)"
86
- },
87
- "light-blue": {
88
- solid: "#4ba1f1",
89
- fill: "#4ba1f1",
90
- linedFill: "#7abaf5",
91
- frameHeadingStroke: "#6cb2f3",
92
- frameHeadingFill: "#f8fbfe",
93
- frameStroke: "#6cb2f3",
94
- frameFill: "#fafcff",
95
- frameText: "#000000",
96
- noteFill: "#9BC4FD",
97
- noteText: "#000000",
98
- semi: "#ddedfa",
99
- pattern: "#6fbbf8",
100
- highlightSrgb: "#00f4ff",
101
- highlightP3: "color(display-p3 0.1512 0.9414 0.9996)"
102
- },
103
- "light-green": {
104
- solid: "#4cb05e",
105
- fill: "#4cb05e",
106
- linedFill: "#7ec88c",
107
- frameHeadingStroke: "#6dbe7c",
108
- frameHeadingFill: "#f8fcf9",
109
- frameStroke: "#6dbe7c",
110
- frameFill: "#fafdfa",
111
- frameText: "#000000",
112
- noteFill: "#98D08A",
113
- noteText: "#000000",
114
- semi: "#dbf0e0",
115
- pattern: "#65cb78",
116
- highlightSrgb: "#65f641",
117
- highlightP3: "color(display-p3 0.563 0.9495 0.3857)"
118
- },
119
- "light-red": {
120
- solid: "#f87777",
121
- fill: "#f87777",
122
- linedFill: "#f99a9a",
123
- frameHeadingStroke: "#f89090",
124
- frameHeadingFill: "#fffafa",
125
- frameStroke: "#f89090",
126
- frameFill: "#fffbfb",
127
- frameText: "#000000",
128
- noteFill: "#F7A5A1",
129
- noteText: "#000000",
130
- semi: "#f4dadb",
131
- pattern: "#fe9e9e",
132
- highlightSrgb: "#ff7fa3",
133
- highlightP3: "color(display-p3 0.9988 0.5301 0.6397)"
134
- },
135
- "light-violet": {
136
- solid: "#e085f4",
137
- fill: "#e085f4",
138
- linedFill: "#e9abf7",
139
- frameHeadingStroke: "#e59bf5",
140
- frameHeadingFill: "#fefaff",
141
- frameStroke: "#e59bf5",
142
- frameFill: "#fefbff",
143
- frameText: "#000000",
144
- noteFill: "#DFB0F9",
145
- noteText: "#000000",
146
- semi: "#f5eafa",
147
- pattern: "#e9acf8",
148
- highlightSrgb: "#ff88ff",
149
- highlightP3: "color(display-p3 0.9676 0.5652 0.9999)"
150
- },
151
- orange: {
152
- solid: "#e16919",
153
- fill: "#e16919",
154
- linedFill: "#ea8643",
155
- frameHeadingStroke: "#e68544",
156
- frameHeadingFill: "#fef9f6",
157
- frameStroke: "#e68544",
158
- frameFill: "#fef9f6",
159
- frameText: "#000000",
160
- noteFill: "#FAA475",
161
- noteText: "#000000",
162
- semi: "#f8e2d4",
163
- pattern: "#f78438",
164
- highlightSrgb: "#ffa500",
165
- highlightP3: "color(display-p3 0.9988 0.6905 0.266)"
166
- },
167
- red: {
168
- solid: "#e03131",
169
- fill: "#e03131",
170
- linedFill: "#e75f5f",
171
- frameHeadingStroke: "#e55757",
172
- frameHeadingFill: "#fef7f7",
173
- frameStroke: "#e55757",
174
- frameFill: "#fef9f9",
175
- frameText: "#000000",
176
- noteFill: "#FC8282",
177
- noteText: "#000000",
178
- semi: "#f4dadb",
179
- pattern: "#e55959",
180
- highlightSrgb: "#ff636e",
181
- highlightP3: "color(display-p3 0.9992 0.4376 0.45)"
182
- },
183
- violet: {
184
- solid: "#ae3ec9",
185
- fill: "#ae3ec9",
186
- linedFill: "#be68d4",
187
- frameHeadingStroke: "#bc62d3",
188
- frameHeadingFill: "#fcf7fd",
189
- frameStroke: "#bc62d3",
190
- frameFill: "#fdf9fd",
191
- frameText: "#000000",
192
- noteFill: "#DB91FD",
193
- noteText: "#000000",
194
- semi: "#ecdcf2",
195
- pattern: "#bd63d3",
196
- highlightSrgb: "#c77cff",
197
- highlightP3: "color(display-p3 0.7469 0.5089 0.9995)"
198
- },
199
- yellow: {
200
- solid: "#f1ac4b",
201
- fill: "#f1ac4b",
202
- linedFill: "#f5c27a",
203
- frameHeadingStroke: "#f3bb6c",
204
- frameHeadingFill: "#fefcf8",
205
- frameStroke: "#f3bb6c",
206
- frameFill: "#fffdfa",
207
- frameText: "#000000",
208
- noteFill: "#FED49A",
209
- noteText: "#000000",
210
- semi: "#f9f0e6",
211
- pattern: "#fecb92",
212
- highlightSrgb: "#fddd00",
213
- highlightP3: "color(display-p3 0.972 0.8705 0.05)"
214
- },
215
- white: {
216
- solid: "#FFFFFF",
217
- fill: "#FFFFFF",
218
- linedFill: "#ffffff",
219
- semi: "#f5f5f5",
220
- pattern: "#f9f9f9",
221
- frameHeadingStroke: "#7d7d7d",
222
- frameHeadingFill: "#ffffff",
223
- frameStroke: "#7d7d7d",
224
- frameFill: "#ffffff",
225
- frameText: "#000000",
226
- noteFill: "#FFFFFF",
227
- noteText: "#000000",
228
- highlightSrgb: "#ffffff",
229
- highlightP3: "color(display-p3 1 1 1)"
230
- }
231
- },
232
- darkMode: {
233
- id: "dark",
234
- text: "hsl(210, 17%, 98%)",
235
- background: "hsl(240, 5%, 6.5%)",
236
- solid: "#010403",
237
- black: {
238
- solid: "#f2f2f2",
239
- fill: "#f2f2f2",
240
- linedFill: "#ffffff",
241
- frameHeadingStroke: "#5c5c5c",
242
- frameHeadingFill: "#252525",
243
- frameStroke: "#5c5c5c",
244
- frameFill: "#0c0c0c",
245
- frameText: "#f2f2f2",
246
- noteFill: "#2c2c2c",
247
- noteText: "#f2f2f2",
248
- semi: "#2c3036",
249
- pattern: "#989898",
250
- highlightSrgb: "#d2b700",
251
- highlightP3: "color(display-p3 0.8078 0.6225 0.0312)"
252
- },
253
- blue: {
254
- solid: "#4f72fc",
255
- // 3c60f0
256
- fill: "#4f72fc",
257
- linedFill: "#3c5cdd",
258
- frameHeadingStroke: "#384994",
259
- frameHeadingFill: "#1C2036",
260
- frameStroke: "#384994",
261
- frameFill: "#11141f",
262
- frameText: "#f2f2f2",
263
- noteFill: "#2A3F98",
264
- noteText: "#f2f2f2",
265
- semi: "#262d40",
266
- pattern: "#3a4b9e",
267
- highlightSrgb: "#0079d2",
268
- highlightP3: "color(display-p3 0.0032 0.4655 0.7991)"
269
- },
270
- green: {
271
- solid: "#099268",
272
- fill: "#099268",
273
- linedFill: "#087856",
274
- frameHeadingStroke: "#10513C",
275
- frameHeadingFill: "#14241f",
276
- frameStroke: "#10513C",
277
- frameFill: "#0E1614",
278
- frameText: "#f2f2f2",
279
- noteFill: "#014429",
280
- noteText: "#f2f2f2",
281
- semi: "#253231",
282
- pattern: "#366a53",
283
- highlightSrgb: "#009774",
284
- highlightP3: "color(display-p3 0.0085 0.582 0.4604)"
285
- },
286
- grey: {
287
- solid: "#9398b0",
288
- fill: "#9398b0",
289
- linedFill: "#8388a5",
290
- frameHeadingStroke: "#42474D",
291
- frameHeadingFill: "#23262A",
292
- frameStroke: "#42474D",
293
- frameFill: "#151719",
294
- frameText: "#f2f2f2",
295
- noteFill: "#56595F",
296
- noteText: "#f2f2f2",
297
- semi: "#33373c",
298
- pattern: "#7c8187",
299
- highlightSrgb: "#9cb4cb",
300
- highlightP3: "color(display-p3 0.6299 0.7012 0.7856)"
301
- },
302
- "light-blue": {
303
- solid: "#4dabf7",
304
- fill: "#4dabf7",
305
- linedFill: "#2793ec",
306
- frameHeadingStroke: "#075797",
307
- frameHeadingFill: "#142839",
308
- frameStroke: "#075797",
309
- frameFill: "#0B1823",
310
- frameText: "#f2f2f2",
311
- noteFill: "#1F5495",
312
- noteText: "#f2f2f2",
313
- semi: "#2a3642",
314
- pattern: "#4d7aa9",
315
- highlightSrgb: "#00bdc8",
316
- highlightP3: "color(display-p3 0.0023 0.7259 0.7735)"
317
- },
318
- "light-green": {
319
- solid: "#40c057",
320
- fill: "#40c057",
321
- linedFill: "#37a44b",
322
- frameHeadingStroke: "#1C5427",
323
- frameHeadingFill: "#18251A",
324
- frameStroke: "#1C5427",
325
- frameFill: "#0F1911",
326
- frameText: "#f2f2f2",
327
- noteFill: "#21581D",
328
- noteText: "#f2f2f2",
329
- semi: "#2a3830",
330
- pattern: "#4e874e",
331
- highlightSrgb: "#00a000",
332
- highlightP3: "color(display-p3 0.2711 0.6172 0.0195)"
333
- },
334
- "light-red": {
335
- solid: "#ff8787",
336
- fill: "#ff8787",
337
- linedFill: "#ff6666",
338
- frameHeadingStroke: "#6f3232",
339
- // Darker and desaturated variant of solid
340
- frameHeadingFill: "#341818",
341
- // Deep, muted dark red
342
- frameStroke: "#6f3232",
343
- // Matches headingStroke
344
- frameFill: "#181212",
345
- // Darker, muted background shade
346
- frameText: "#f2f2f2",
347
- // Consistent bright text color
348
- noteFill: "#7a3333",
349
- // Medium-dark, muted variant of solid
350
- noteText: "#f2f2f2",
351
- semi: "#3c2b2b",
352
- // Subdued, darker neutral-red tone
353
- pattern: "#a56767",
354
- // Existing pattern shade retained
355
- highlightSrgb: "#db005b",
356
- highlightP3: "color(display-p3 0.7849 0.0585 0.3589)"
357
- },
358
- "light-violet": {
359
- solid: "#e599f7",
360
- fill: "#e599f7",
361
- linedFill: "#dc71f4",
362
- frameHeadingStroke: "#6c367a",
363
- frameHeadingFill: "#2D2230",
364
- frameStroke: "#6c367a",
365
- frameFill: "#1C151E",
366
- frameText: "#f2f2f2",
367
- noteFill: "#762F8E",
368
- noteText: "#f2f2f2",
369
- semi: "#383442",
370
- pattern: "#9770a9",
371
- highlightSrgb: "#c400c7",
372
- highlightP3: "color(display-p3 0.7024 0.0403 0.753)"
373
- },
374
- orange: {
375
- solid: "#f76707",
376
- fill: "#f76707",
377
- linedFill: "#f54900",
378
- frameHeadingStroke: "#773a0e",
379
- // Darker, muted version of solid
380
- frameHeadingFill: "#2f1d13",
381
- // Deep, warm, muted background
382
- frameStroke: "#773a0e",
383
- // Matches headingStroke
384
- frameFill: "#1c1512",
385
- // Darker, richer muted background
386
- frameText: "#f2f2f2",
387
- // Bright text for contrast
388
- noteFill: "#7c3905",
389
- // Muted dark variant for note fill
390
- noteText: "#f2f2f2",
391
- semi: "#3b2e27",
392
- // Muted neutral-orange tone
393
- pattern: "#9f552d",
394
- // Retained existing shade
395
- highlightSrgb: "#d07a00",
396
- highlightP3: "color(display-p3 0.7699 0.4937 0.0085)"
397
- },
398
- red: {
399
- solid: "#e03131",
400
- fill: "#e03131",
401
- linedFill: "#c31d1d",
402
- frameHeadingStroke: "#701e1e",
403
- // Darker, muted variation of solid
404
- frameHeadingFill: "#301616",
405
- // Deep, muted reddish backdrop
406
- frameStroke: "#701e1e",
407
- // Matches headingStroke
408
- frameFill: "#1b1313",
409
- // Rich, dark muted background
410
- frameText: "#f2f2f2",
411
- // Bright text for readability
412
- noteFill: "#7e201f",
413
- // Muted dark variant for note fill
414
- noteText: "#f2f2f2",
415
- semi: "#382726",
416
- // Dark neutral-red tone
417
- pattern: "#8f3734",
418
- // Existing pattern color retained
419
- highlightSrgb: "#de002c",
420
- highlightP3: "color(display-p3 0.7978 0.0509 0.2035)"
421
- },
422
- violet: {
423
- solid: "#ae3ec9",
424
- fill: "#ae3ec9",
425
- linedFill: "#8f2fa7",
426
- frameHeadingStroke: "#6d1583",
427
- // Darker, muted variation of solid
428
- frameHeadingFill: "#27152e",
429
- // Deep, rich muted violet backdrop
430
- frameStroke: "#6d1583",
431
- // Matches headingStroke
432
- frameFill: "#1b0f21",
433
- // Darker muted violet background
434
- frameText: "#f2f2f2",
435
- // Consistent bright text color
436
- noteFill: "#5f1c70",
437
- // Muted dark variant for note fill
438
- noteText: "#f2f2f2",
439
- semi: "#342938",
440
- // Dark neutral-violet tone
441
- pattern: "#763a8b",
442
- // Retained existing pattern color
443
- highlightSrgb: "#9e00ee",
444
- highlightP3: "color(display-p3 0.5651 0.0079 0.8986)"
445
- },
446
- yellow: {
447
- solid: "#ffc034",
448
- fill: "#ffc034",
449
- linedFill: "#ffae00",
450
- frameHeadingStroke: "#684e12",
451
- // Darker, muted variant of solid
452
- frameHeadingFill: "#2a2113",
453
- // Rich, muted dark-yellow background
454
- frameStroke: "#684e12",
455
- // Matches headingStroke
456
- frameFill: "#1e1911",
457
- // Darker muted shade for background fill
458
- frameText: "#f2f2f2",
459
- // Bright text color for readability
460
- noteFill: "#8a5e1c",
461
- // Muted, dark complementary variant
462
- noteText: "#f2f2f2",
463
- semi: "#3b352b",
464
- // Dark muted neutral-yellow tone
465
- pattern: "#fecb92",
466
- // Existing shade retained
467
- highlightSrgb: "#d2b700",
468
- highlightP3: "color(display-p3 0.8078 0.7225 0.0312)"
469
- },
470
- white: {
471
- solid: "#f3f3f3",
472
- fill: "#f3f3f3",
473
- linedFill: "#f3f3f3",
474
- semi: "#f5f5f5",
475
- pattern: "#f9f9f9",
476
- frameHeadingStroke: "#ffffff",
477
- frameHeadingFill: "#ffffff",
478
- frameStroke: "#ffffff",
479
- frameFill: "#ffffff",
480
- frameText: "#000000",
481
- noteFill: "#eaeaea",
482
- noteText: "#1d1d1d",
483
- highlightSrgb: "#ffffff",
484
- highlightP3: "color(display-p3 1 1 1)"
485
- }
486
- }
487
- };
488
- function getDefaultColorTheme(opts) {
489
- return opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode;
490
- }
491
17
  const DefaultColorStyle = StyleProp.defineEnum("tldraw:color", {
492
18
  defaultValue: "black",
493
19
  values: defaultColorNames
@@ -496,23 +22,46 @@ const DefaultLabelColorStyle = StyleProp.defineEnum("tldraw:labelColor", {
496
22
  defaultValue: "black",
497
23
  values: defaultColorNames
498
24
  });
499
- const defaultColorNamesSet = new Set(defaultColorNames);
500
- function isDefaultThemeColor(color) {
501
- return defaultColorNamesSet.has(color);
502
- }
503
- function getColorValue(theme, color, variant) {
504
- if (!isDefaultThemeColor(color)) {
505
- return color;
25
+ function registerColorsFromThemes(definitions) {
26
+ const colorNames = /* @__PURE__ */ new Set();
27
+ for (const def of Object.values(definitions)) {
28
+ for (const colorPalette of [def.colors.light, def.colors.dark]) {
29
+ for (const [key, value] of Object.entries(colorPalette)) {
30
+ if (typeof value === "object" && value !== null) {
31
+ colorNames.add(key);
32
+ }
33
+ }
34
+ }
35
+ }
36
+ if (colorNames.size > 0) {
37
+ DefaultColorStyle.addValues(...colorNames);
38
+ DefaultLabelColorStyle.addValues(...colorNames);
39
+ }
40
+ const toRemove = DefaultColorStyle.values.filter((v) => !colorNames.has(v));
41
+ if (toRemove.length > 0) {
42
+ DefaultColorStyle.removeValues(...toRemove);
43
+ DefaultLabelColorStyle.removeValues(...toRemove);
44
+ }
45
+ if (process.env.NODE_ENV !== "production") {
46
+ for (const def of Object.values(definitions)) {
47
+ for (const color of colorNames) {
48
+ if (!(color in def.colors.light)) {
49
+ console.warn(
50
+ `Theme '${def.id}' light palette is missing color '${color}'. Shapes using this color won't render correctly.`
51
+ );
52
+ }
53
+ if (!(color in def.colors.dark)) {
54
+ console.warn(
55
+ `Theme '${def.id}' dark palette is missing color '${color}'. Shapes using this color won't render correctly.`
56
+ );
57
+ }
58
+ }
59
+ }
506
60
  }
507
- return theme[color][variant];
508
61
  }
509
62
  export {
510
63
  DefaultColorStyle,
511
- DefaultColorThemePalette,
512
64
  DefaultLabelColorStyle,
513
- defaultColorNames,
514
- getColorValue,
515
- getDefaultColorTheme,
516
- isDefaultThemeColor
65
+ registerColorsFromThemes
517
66
  };
518
67
  //# sourceMappingURL=TLColorStyle.mjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles/TLColorStyle.ts"],
4
- "sourcesContent": ["import { Expand } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Array of default color names available in tldraw's color palette.\n * These colors form the basis for the default color style system and are available\n * in both light and dark theme variants.\n *\n * @example\n * ```ts\n * import { defaultColorNames } from '@tldraw/tlschema'\n *\n * // Create a color picker with all default colors\n * const colorOptions = defaultColorNames.map(color => ({\n * name: color,\n * value: color\n * }))\n * ```\n *\n * @public\n */\nexport const defaultColorNames = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n] as const\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColorThemeColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColorThemeColor = {\n * solid: '#4465e9',\n * semi: '#dce1f8',\n * pattern: '#6681ee',\n * fill: '#4465e9',\n * // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColorThemeColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * Complete color theme definition containing all colors and their variants\n * for either light or dark mode. Includes base theme properties and all\n * default colors with their respective color variants.\n *\n * @example\n * ```ts\n * import { TLDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const customTheme: TLDefaultColorTheme = {\n * id: 'light',\n * text: '#000000',\n * background: '#ffffff',\n * solid: '#fcfffe',\n * black: { solid: '#000000', semi: '#cccccc', ... },\n * // ... other colors\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorTheme = Expand<\n\t{\n\t\tid: 'light' | 'dark'\n\t\ttext: string\n\t\tbackground: string\n\t\tsolid: string\n\t} & Record<(typeof defaultColorNames)[number], TLDefaultColorThemeColor>\n>\n\n/**\n * Complete color palette containing both light and dark theme definitions.\n * This object provides the full color system used by tldraw's default themes,\n * including all color variants and theme-specific adjustments.\n *\n * @example\n * ```ts\n * import { DefaultColorThemePalette } from '@tldraw/tlschema'\n *\n * // Get the dark theme colors\n * const darkTheme = DefaultColorThemePalette.darkMode\n * const redColor = darkTheme.red.solid // '#e03131'\n *\n * // Access light theme colors\n * const lightTheme = DefaultColorThemePalette.lightMode\n * const blueColor = lightTheme.blue.fill // '#4465e9'\n * ```\n *\n * @public\n */\nexport const DefaultColorThemePalette: {\n\tlightMode: TLDefaultColorTheme\n\tdarkMode: TLDefaultColorTheme\n} = {\n\tlightMode: {\n\t\tid: 'light',\n\t\ttext: '#000000',\n\t\tbackground: '#f9fafb',\n\t\tsolid: '#fcfffe',\n\t\tblack: {\n\t\t\tsolid: '#1d1d1d',\n\t\t\tfill: '#1d1d1d',\n\t\t\tlinedFill: '#363636',\n\t\t\tframeHeadingStroke: '#717171',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#717171',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FCE19C',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#e8e8e8',\n\t\t\tpattern: '#494949',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8205 0.05)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4465e9',\n\t\t\tfill: '#4465e9',\n\t\t\tlinedFill: '#6580ec',\n\t\t\tframeHeadingStroke: '#6681ec',\n\t\t\tframeHeadingFill: '#f9fafe',\n\t\t\tframeStroke: '#6681ec',\n\t\t\tframeFill: '#f9fafe',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#8AA3FF',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dce1f8',\n\t\t\tpattern: '#6681ee',\n\t\t\thighlightSrgb: '#10acff',\n\t\t\thighlightP3: 'color(display-p3 0.308 0.6632 0.9996)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tlinedFill: '#0bad7c',\n\t\t\tframeHeadingStroke: '#37a684',\n\t\t\tframeHeadingFill: '#f8fcfa',\n\t\t\tframeStroke: '#37a684',\n\t\t\tframeFill: '#f8fcfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#6FC896',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#d3e9e3',\n\t\t\tpattern: '#39a785',\n\t\t\thighlightSrgb: '#00ffc8',\n\t\t\thighlightP3: 'color(display-p3 0.2536 0.984 0.7981)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9fa8b2',\n\t\t\tfill: '#9fa8b2',\n\t\t\tlinedFill: '#bbc1c9',\n\t\t\tframeHeadingStroke: '#aaaaab',\n\t\t\tframeHeadingFill: '#fbfcfc',\n\t\t\tframeStroke: '#aaaaab',\n\t\t\tframeFill: '#fcfcfd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#C0CAD3',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#eceef0',\n\t\t\tpattern: '#bcc3c9',\n\t\t\thighlightSrgb: '#cbe7f1',\n\t\t\thighlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4ba1f1',\n\t\t\tfill: '#4ba1f1',\n\t\t\tlinedFill: '#7abaf5',\n\t\t\tframeHeadingStroke: '#6cb2f3',\n\t\t\tframeHeadingFill: '#f8fbfe',\n\t\t\tframeStroke: '#6cb2f3',\n\t\t\tframeFill: '#fafcff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#9BC4FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ddedfa',\n\t\t\tpattern: '#6fbbf8',\n\t\t\thighlightSrgb: '#00f4ff',\n\t\t\thighlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#4cb05e',\n\t\t\tfill: '#4cb05e',\n\t\t\tlinedFill: '#7ec88c',\n\t\t\tframeHeadingStroke: '#6dbe7c',\n\t\t\tframeHeadingFill: '#f8fcf9',\n\t\t\tframeStroke: '#6dbe7c',\n\t\t\tframeFill: '#fafdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#98D08A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#dbf0e0',\n\t\t\tpattern: '#65cb78',\n\t\t\thighlightSrgb: '#65f641',\n\t\t\thighlightP3: 'color(display-p3 0.563 0.9495 0.3857)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#f87777',\n\t\t\tfill: '#f87777',\n\t\t\tlinedFill: '#f99a9a',\n\t\t\tframeHeadingStroke: '#f89090',\n\t\t\tframeHeadingFill: '#fffafa',\n\t\t\tframeStroke: '#f89090',\n\t\t\tframeFill: '#fffbfb',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#F7A5A1',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#fe9e9e',\n\t\t\thighlightSrgb: '#ff7fa3',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e085f4',\n\t\t\tfill: '#e085f4',\n\t\t\tlinedFill: '#e9abf7',\n\t\t\tframeHeadingStroke: '#e59bf5',\n\t\t\tframeHeadingFill: '#fefaff',\n\t\t\tframeStroke: '#e59bf5',\n\t\t\tframeFill: '#fefbff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DFB0F9',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f5eafa',\n\t\t\tpattern: '#e9acf8',\n\t\t\thighlightSrgb: '#ff88ff',\n\t\t\thighlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#e16919',\n\t\t\tfill: '#e16919',\n\t\t\tlinedFill: '#ea8643',\n\t\t\tframeHeadingStroke: '#e68544',\n\t\t\tframeHeadingFill: '#fef9f6',\n\t\t\tframeStroke: '#e68544',\n\t\t\tframeFill: '#fef9f6',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FAA475',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f8e2d4',\n\t\t\tpattern: '#f78438',\n\t\t\thighlightSrgb: '#ffa500',\n\t\t\thighlightP3: 'color(display-p3 0.9988 0.6905 0.266)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tlinedFill: '#e75f5f',\n\t\t\tframeHeadingStroke: '#e55757',\n\t\t\tframeHeadingFill: '#fef7f7',\n\t\t\tframeStroke: '#e55757',\n\t\t\tframeFill: '#fef9f9',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FC8282',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f4dadb',\n\t\t\tpattern: '#e55959',\n\t\t\thighlightSrgb: '#ff636e',\n\t\t\thighlightP3: 'color(display-p3 0.9992 0.4376 0.45)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tlinedFill: '#be68d4',\n\t\t\tframeHeadingStroke: '#bc62d3',\n\t\t\tframeHeadingFill: '#fcf7fd',\n\t\t\tframeStroke: '#bc62d3',\n\t\t\tframeFill: '#fdf9fd',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#DB91FD',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#ecdcf2',\n\t\t\tpattern: '#bd63d3',\n\t\t\thighlightSrgb: '#c77cff',\n\t\t\thighlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#f1ac4b',\n\t\t\tfill: '#f1ac4b',\n\t\t\tlinedFill: '#f5c27a',\n\t\t\tframeHeadingStroke: '#f3bb6c',\n\t\t\tframeHeadingFill: '#fefcf8',\n\t\t\tframeStroke: '#f3bb6c',\n\t\t\tframeFill: '#fffdfa',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FED49A',\n\t\t\tnoteText: '#000000',\n\t\t\tsemi: '#f9f0e6',\n\t\t\tpattern: '#fecb92',\n\t\t\thighlightSrgb: '#fddd00',\n\t\t\thighlightP3: 'color(display-p3 0.972 0.8705 0.05)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#FFFFFF',\n\t\t\tfill: '#FFFFFF',\n\t\t\tlinedFill: '#ffffff',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#7d7d7d',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#7d7d7d',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#FFFFFF',\n\t\t\tnoteText: '#000000',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n\tdarkMode: {\n\t\tid: 'dark',\n\t\ttext: 'hsl(210, 17%, 98%)',\n\t\tbackground: 'hsl(240, 5%, 6.5%)',\n\t\tsolid: '#010403',\n\n\t\tblack: {\n\t\t\tsolid: '#f2f2f2',\n\t\t\tfill: '#f2f2f2',\n\t\t\tlinedFill: '#ffffff',\n\t\t\tframeHeadingStroke: '#5c5c5c',\n\t\t\tframeHeadingFill: '#252525',\n\t\t\tframeStroke: '#5c5c5c',\n\t\t\tframeFill: '#0c0c0c',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2c2c2c',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2c3036',\n\t\t\tpattern: '#989898',\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',\n\t\t},\n\t\tblue: {\n\t\t\tsolid: '#4f72fc', // 3c60f0\n\t\t\tfill: '#4f72fc',\n\t\t\tlinedFill: '#3c5cdd',\n\t\t\tframeHeadingStroke: '#384994',\n\t\t\tframeHeadingFill: '#1C2036',\n\t\t\tframeStroke: '#384994',\n\t\t\tframeFill: '#11141f',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#2A3F98',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#262d40',\n\t\t\tpattern: '#3a4b9e',\n\t\t\thighlightSrgb: '#0079d2',\n\t\t\thighlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',\n\t\t},\n\t\tgreen: {\n\t\t\tsolid: '#099268',\n\t\t\tfill: '#099268',\n\t\t\tlinedFill: '#087856',\n\t\t\tframeHeadingStroke: '#10513C',\n\t\t\tframeHeadingFill: '#14241f',\n\t\t\tframeStroke: '#10513C',\n\t\t\tframeFill: '#0E1614',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#014429',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#253231',\n\t\t\tpattern: '#366a53',\n\t\t\thighlightSrgb: '#009774',\n\t\t\thighlightP3: 'color(display-p3 0.0085 0.582 0.4604)',\n\t\t},\n\t\tgrey: {\n\t\t\tsolid: '#9398b0',\n\t\t\tfill: '#9398b0',\n\t\t\tlinedFill: '#8388a5',\n\t\t\tframeHeadingStroke: '#42474D',\n\t\t\tframeHeadingFill: '#23262A',\n\t\t\tframeStroke: '#42474D',\n\t\t\tframeFill: '#151719',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#56595F',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#33373c',\n\t\t\tpattern: '#7c8187',\n\t\t\thighlightSrgb: '#9cb4cb',\n\t\t\thighlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',\n\t\t},\n\t\t'light-blue': {\n\t\t\tsolid: '#4dabf7',\n\t\t\tfill: '#4dabf7',\n\t\t\tlinedFill: '#2793ec',\n\t\t\tframeHeadingStroke: '#075797',\n\t\t\tframeHeadingFill: '#142839',\n\t\t\tframeStroke: '#075797',\n\t\t\tframeFill: '#0B1823',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#1F5495',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3642',\n\t\t\tpattern: '#4d7aa9',\n\t\t\thighlightSrgb: '#00bdc8',\n\t\t\thighlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',\n\t\t},\n\t\t'light-green': {\n\t\t\tsolid: '#40c057',\n\t\t\tfill: '#40c057',\n\t\t\tlinedFill: '#37a44b',\n\t\t\tframeHeadingStroke: '#1C5427',\n\t\t\tframeHeadingFill: '#18251A',\n\t\t\tframeStroke: '#1C5427',\n\t\t\tframeFill: '#0F1911',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#21581D',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#2a3830',\n\t\t\tpattern: '#4e874e',\n\t\t\thighlightSrgb: '#00a000',\n\t\t\thighlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',\n\t\t},\n\t\t'light-red': {\n\t\t\tsolid: '#ff8787',\n\t\t\tfill: '#ff8787',\n\t\t\tlinedFill: '#ff6666',\n\t\t\tframeHeadingStroke: '#6f3232', // Darker and desaturated variant of solid\n\t\t\tframeHeadingFill: '#341818', // Deep, muted dark red\n\t\t\tframeStroke: '#6f3232', // Matches headingStroke\n\t\t\tframeFill: '#181212', // Darker, muted background shade\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#7a3333', // Medium-dark, muted variant of solid\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3c2b2b', // Subdued, darker neutral-red tone\n\t\t\tpattern: '#a56767', // Existing pattern shade retained\n\t\t\thighlightSrgb: '#db005b',\n\t\t\thighlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',\n\t\t},\n\t\t'light-violet': {\n\t\t\tsolid: '#e599f7',\n\t\t\tfill: '#e599f7',\n\t\t\tlinedFill: '#dc71f4',\n\t\t\tframeHeadingStroke: '#6c367a',\n\t\t\tframeHeadingFill: '#2D2230',\n\t\t\tframeStroke: '#6c367a',\n\t\t\tframeFill: '#1C151E',\n\t\t\tframeText: '#f2f2f2',\n\t\t\tnoteFill: '#762F8E',\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#383442',\n\t\t\tpattern: '#9770a9',\n\t\t\thighlightSrgb: '#c400c7',\n\t\t\thighlightP3: 'color(display-p3 0.7024 0.0403 0.753)',\n\t\t},\n\t\torange: {\n\t\t\tsolid: '#f76707',\n\t\t\tfill: '#f76707',\n\t\t\tlinedFill: '#f54900',\n\t\t\tframeHeadingStroke: '#773a0e', // Darker, muted version of solid\n\t\t\tframeHeadingFill: '#2f1d13', // Deep, warm, muted background\n\t\t\tframeStroke: '#773a0e', // Matches headingStroke\n\t\t\tframeFill: '#1c1512', // Darker, richer muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for contrast\n\t\t\tnoteFill: '#7c3905', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b2e27', // Muted neutral-orange tone\n\t\t\tpattern: '#9f552d', // Retained existing shade\n\t\t\thighlightSrgb: '#d07a00',\n\t\t\thighlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',\n\t\t},\n\t\tred: {\n\t\t\tsolid: '#e03131',\n\t\t\tfill: '#e03131',\n\t\t\tlinedFill: '#c31d1d',\n\t\t\tframeHeadingStroke: '#701e1e', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#301616', // Deep, muted reddish backdrop\n\t\t\tframeStroke: '#701e1e', // Matches headingStroke\n\t\t\tframeFill: '#1b1313', // Rich, dark muted background\n\t\t\tframeText: '#f2f2f2', // Bright text for readability\n\t\t\tnoteFill: '#7e201f', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#382726', // Dark neutral-red tone\n\t\t\tpattern: '#8f3734', // Existing pattern color retained\n\t\t\thighlightSrgb: '#de002c',\n\t\t\thighlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',\n\t\t},\n\t\tviolet: {\n\t\t\tsolid: '#ae3ec9',\n\t\t\tfill: '#ae3ec9',\n\t\t\tlinedFill: '#8f2fa7',\n\t\t\tframeHeadingStroke: '#6d1583', // Darker, muted variation of solid\n\t\t\tframeHeadingFill: '#27152e', // Deep, rich muted violet backdrop\n\t\t\tframeStroke: '#6d1583', // Matches headingStroke\n\t\t\tframeFill: '#1b0f21', // Darker muted violet background\n\t\t\tframeText: '#f2f2f2', // Consistent bright text color\n\t\t\tnoteFill: '#5f1c70', // Muted dark variant for note fill\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#342938', // Dark neutral-violet tone\n\t\t\tpattern: '#763a8b', // Retained existing pattern color\n\t\t\thighlightSrgb: '#9e00ee',\n\t\t\thighlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',\n\t\t},\n\t\tyellow: {\n\t\t\tsolid: '#ffc034',\n\t\t\tfill: '#ffc034',\n\t\t\tlinedFill: '#ffae00',\n\t\t\tframeHeadingStroke: '#684e12', // Darker, muted variant of solid\n\t\t\tframeHeadingFill: '#2a2113', // Rich, muted dark-yellow background\n\t\t\tframeStroke: '#684e12', // Matches headingStroke\n\t\t\tframeFill: '#1e1911', // Darker muted shade for background fill\n\t\t\tframeText: '#f2f2f2', // Bright text color for readability\n\t\t\tnoteFill: '#8a5e1c', // Muted, dark complementary variant\n\t\t\tnoteText: '#f2f2f2',\n\t\t\tsemi: '#3b352b', // Dark muted neutral-yellow tone\n\t\t\tpattern: '#fecb92', // Existing shade retained\n\t\t\thighlightSrgb: '#d2b700',\n\t\t\thighlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',\n\t\t},\n\t\twhite: {\n\t\t\tsolid: '#f3f3f3',\n\t\t\tfill: '#f3f3f3',\n\t\t\tlinedFill: '#f3f3f3',\n\t\t\tsemi: '#f5f5f5',\n\t\t\tpattern: '#f9f9f9',\n\t\t\tframeHeadingStroke: '#ffffff',\n\t\t\tframeHeadingFill: '#ffffff',\n\t\t\tframeStroke: '#ffffff',\n\t\t\tframeFill: '#ffffff',\n\t\t\tframeText: '#000000',\n\t\t\tnoteFill: '#eaeaea',\n\t\t\tnoteText: '#1d1d1d',\n\t\t\thighlightSrgb: '#ffffff',\n\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t},\n\t},\n}\n\n/**\n * Returns the appropriate default color theme based on the dark mode preference.\n *\n * @param opts - Configuration options\n * - isDarkMode - Whether to return the dark theme (true) or light theme (false)\n * @returns The corresponding TLDefaultColorTheme (light or dark)\n *\n * @example\n * ```ts\n * import { getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * // Get light theme\n * const lightTheme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get dark theme\n * const darkTheme = getDefaultColorTheme({ isDarkMode: true })\n *\n * // Use with editor\n * const theme = getDefaultColorTheme({ isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches })\n * ```\n *\n * @public\n */\nexport function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {\n\treturn opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode\n}\n\n/**\n * Default color style property used by tldraw shapes for their primary color.\n * This style prop allows shapes to use any of the default color names and\n * automatically saves the last used value for new shapes.\n *\n * @example\n * ```ts\n * import { DefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * color: typeof DefaultColorStyle\n * // other props...\n * }\n *\n * // Set color on a shape\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'red' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Default label color style property used for text labels on shapes.\n * This is separate from the main color style to allow different colors\n * for shape fills/strokes versus their text labels.\n *\n * @example\n * ```ts\n * import { DefaultLabelColorStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * labelColor: typeof DefaultLabelColorStyle\n * // other props...\n * }\n *\n * // Create a shape with different fill and label colors\n * const shape = {\n * // ... other properties\n * props: {\n * color: 'blue' as const,\n * labelColor: 'white' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Type representing a default color style value.\n * This is a union type of all available default color names.\n *\n * @example\n * ```ts\n * import { TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * // Valid color values\n * const redColor: TLDefaultColorStyle = 'red'\n * const blueColor: TLDefaultColorStyle = 'blue'\n *\n * // Type guard usage\n * function isValidColor(color: string): color is TLDefaultColorStyle {\n * return ['black', 'red', 'blue'].includes(color as TLDefaultColorStyle)\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>\n\nconst defaultColorNamesSet = new Set(defaultColorNames)\n\n/**\n * Type guard to check if a color value is one of the default theme colors.\n * Useful for determining if a color can be looked up in the theme palette.\n *\n * @param color - The color value to check\n * @returns True if the color is a default theme color, false otherwise\n *\n * @example\n * ```ts\n * import { isDefaultThemeColor, TLDefaultColorStyle } from '@tldraw/tlschema'\n *\n * const color: TLDefaultColorStyle = 'red'\n *\n * if (isDefaultThemeColor(color)) {\n * // color is guaranteed to be a default theme color\n * console.log(`${color} is a default theme color`)\n * } else {\n * // color might be a custom hex value or other format\n * console.log(`${color} is a custom color`)\n * }\n * ```\n *\n * @public\n */\nexport function isDefaultThemeColor(\n\tcolor: TLDefaultColorStyle\n): color is (typeof defaultColorNames)[number] {\n\treturn defaultColorNamesSet.has(color as (typeof defaultColorNames)[number])\n}\n\n/**\n * Resolves a color style value to its actual CSS color string for a given theme and variant.\n * If the color is not a default theme color, returns the color value as-is.\n *\n * @param theme - The color theme to use for resolution\n * @param color - The color style value to resolve\n * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)\n * @returns The CSS color string for the specified color and variant\n *\n * @example\n * ```ts\n * import { getColorValue, getDefaultColorTheme } from '@tldraw/tlschema'\n *\n * const theme = getDefaultColorTheme({ isDarkMode: false })\n *\n * // Get the solid variant of red\n * const redSolid = getColorValue(theme, 'red', 'solid') // '#e03131'\n *\n * // Get the fill variant of blue\n * const blueFill = getColorValue(theme, 'blue', 'fill') // '#4465e9'\n *\n * // Custom color passes through unchanged\n * const customColor = getColorValue(theme, '#ff0000', 'solid') // '#ff0000'\n * ```\n *\n * @public\n */\nexport function getColorValue(\n\ttheme: TLDefaultColorTheme,\n\tcolor: TLDefaultColorStyle,\n\tvariant: keyof TLDefaultColorThemeColor\n): string {\n\tif (!isDefaultThemeColor(color)) {\n\t\treturn color\n\t}\n\n\treturn theme[color][variant]\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { StyleProp } from './StyleProp'\nimport { TLDefaultColor, TLThemeDefaultColors, TLThemes } from './TLTheme'\n\n/**\n * The names of all available shape colors, derived from {@link TLThemeDefaultColors}.\n * Extend {@link TLThemeDefaultColors} to add custom color names.\n *\n * @public\n */\nexport type TLDefaultColorStyle = {\n\t[K in keyof TLThemeDefaultColors]: TLThemeDefaultColors[K] extends TLDefaultColor ? K : never\n}[keyof TLThemeDefaultColors] &\n\tstring\n\n/**\n * Used only for initial values of the color style; the source of truth has moved to TLTheme.\n *\n * @internal\n */\nconst defaultColorNames: TLDefaultColorStyle[] = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n] as const\n\n/**\n * @public\n */\nexport const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * @public\n */\nexport const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {\n\tdefaultValue: 'black',\n\tvalues: defaultColorNames,\n})\n\n/**\n * Scan theme definitions and sync color registrations to match.\n * A color entry is any key in `TLThemeColors` whose value is an object\n * (i.e. a {@link TLDefaultColor}), as opposed to utility strings like\n * `background` or `text`.\n *\n * Colors present in themes but not yet registered will be added.\n * Colors currently registered but absent from all themes will be removed.\n *\n * @public\n */\nexport function registerColorsFromThemes(definitions: TLThemes): void {\n\tconst colorNames = new Set<TLDefaultColorStyle>()\n\tfor (const def of Object.values(definitions)) {\n\t\tfor (const colorPalette of [def.colors.light, def.colors.dark]) {\n\t\t\tfor (const [key, value] of Object.entries(colorPalette)) {\n\t\t\t\tif (typeof value === 'object' && value !== null) {\n\t\t\t\t\tcolorNames.add(key as TLDefaultColorStyle)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\tif (colorNames.size > 0) {\n\t\tDefaultColorStyle.addValues(...colorNames)\n\t\tDefaultLabelColorStyle.addValues(...colorNames)\n\t}\n\n\tconst toRemove = DefaultColorStyle.values.filter((v) => !colorNames.has(v as TLDefaultColorStyle))\n\tif (toRemove.length > 0) {\n\t\tDefaultColorStyle.removeValues(...toRemove)\n\t\tDefaultLabelColorStyle.removeValues(...toRemove)\n\t}\n\n\tif (process.env.NODE_ENV !== 'production') {\n\t\tfor (const def of Object.values(definitions)) {\n\t\t\tfor (const color of colorNames) {\n\t\t\t\tif (!(color in def.colors.light)) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Theme '${def.id}' light palette is missing color '${color}'. Shapes using this color won't render correctly.`\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tif (!(color in def.colors.dark)) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Theme '${def.id}' dark palette is missing color '${color}'. Shapes using this color won't render correctly.`\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],
5
+ "mappings": "AAAA,SAAS,iBAAiB;AAmB1B,MAAM,oBAA2C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAKO,MAAM,oBAAoB,UAAU,WAAW,gBAAgB;AAAA,EACrE,cAAc;AAAA,EACd,QAAQ;AACT,CAAC;AAKM,MAAM,yBAAyB,UAAU,WAAW,qBAAqB;AAAA,EAC/E,cAAc;AAAA,EACd,QAAQ;AACT,CAAC;AAaM,SAAS,yBAAyB,aAA6B;AACrE,QAAM,aAAa,oBAAI,IAAyB;AAChD,aAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,eAAW,gBAAgB,CAAC,IAAI,OAAO,OAAO,IAAI,OAAO,IAAI,GAAG;AAC/D,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,YAAY,GAAG;AACxD,YAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAChD,qBAAW,IAAI,GAA0B;AAAA,QAC1C;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,MAAI,WAAW,OAAO,GAAG;AACxB,sBAAkB,UAAU,GAAG,UAAU;AACzC,2BAAuB,UAAU,GAAG,UAAU;AAAA,EAC/C;AAEA,QAAM,WAAW,kBAAkB,OAAO,OAAO,CAAC,MAAM,CAAC,WAAW,IAAI,CAAwB,CAAC;AACjG,MAAI,SAAS,SAAS,GAAG;AACxB,sBAAkB,aAAa,GAAG,QAAQ;AAC1C,2BAAuB,aAAa,GAAG,QAAQ;AAAA,EAChD;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,eAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,iBAAW,SAAS,YAAY;AAC/B,YAAI,EAAE,SAAS,IAAI,OAAO,QAAQ;AACjC,kBAAQ;AAAA,YACP,UAAU,IAAI,EAAE,qCAAqC,KAAK;AAAA,UAC3D;AAAA,QACD;AACA,YAAI,EAAE,SAAS,IAAI,OAAO,OAAO;AAChC,kBAAQ;AAAA,YACP,UAAU,IAAI,EAAE,oCAAoC,KAAK;AAAA,UAC1D;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  import { StyleProp } from "./StyleProp.mjs";
2
2
  const DefaultDashStyle = StyleProp.defineEnum("tldraw:dash", {
3
3
  defaultValue: "draw",
4
- values: ["draw", "solid", "dashed", "dotted"]
4
+ values: ["draw", "solid", "dashed", "dotted", "none"]
5
5
  });
6
6
  export {
7
7
  DefaultDashStyle
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles/TLDashStyle.ts"],
4
- "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Default dash style property used by tldraw shapes for line styling.\n * Controls how shape outlines and lines are rendered with different dash patterns.\n *\n * Available values:\n * - `draw` - Hand-drawn, sketchy line style\n * - `solid` - Continuous solid line\n * - `dashed` - Evenly spaced dashes\n * - `dotted` - Evenly spaced dots\n *\n * @example\n * ```ts\n * import { DefaultDashStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * dash: typeof DefaultDashStyle\n * // other props...\n * }\n *\n * // Create a shape with dashed outline\n * const shape = {\n * // ... other properties\n * props: {\n * dash: 'dashed' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultDashStyle = StyleProp.defineEnum('tldraw:dash', {\n\tdefaultValue: 'draw',\n\tvalues: ['draw', 'solid', 'dashed', 'dotted'],\n})\n\n/**\n * Type representing a default dash style value.\n * This is a union type of all available dash style options.\n *\n * @example\n * ```ts\n * import { TLDefaultDashStyle } from '@tldraw/tlschema'\n *\n * // Valid dash style values\n * const drawStyle: TLDefaultDashStyle = 'draw'\n * const solidStyle: TLDefaultDashStyle = 'solid'\n * const dashedStyle: TLDefaultDashStyle = 'dashed'\n * const dottedStyle: TLDefaultDashStyle = 'dotted'\n *\n * // Use in a function parameter\n * function setShapeDash(dash: TLDefaultDashStyle) {\n * // Apply dash style to shape\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultDashStyle = T.TypeOf<typeof DefaultDashStyle>\n"],
5
- "mappings": "AACA,SAAS,iBAAiB;AAkCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,SAAS,UAAU,QAAQ;AAC7C,CAAC;",
4
+ "sourcesContent": ["import { T } from '@tldraw/validate'\nimport { StyleProp } from './StyleProp'\n\n/**\n * Default dash style property used by tldraw shapes for line styling.\n * Controls how shape outlines and lines are rendered with different dash patterns.\n *\n * Available values:\n * - `draw` - Hand-drawn, sketchy line style\n * - `solid` - Continuous solid line\n * - `dashed` - Evenly spaced dashes\n * - `dotted` - Evenly spaced dots\n *\n * @example\n * ```ts\n * import { DefaultDashStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyShapeProps {\n * dash: typeof DefaultDashStyle\n * // other props...\n * }\n *\n * // Create a shape with dashed outline\n * const shape = {\n * // ... other properties\n * props: {\n * dash: 'dashed' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultDashStyle = StyleProp.defineEnum('tldraw:dash', {\n\tdefaultValue: 'draw',\n\tvalues: ['draw', 'solid', 'dashed', 'dotted', 'none'],\n})\n\n/**\n * Type representing a default dash style value.\n * This is a union type of all available dash style options.\n *\n * @example\n * ```ts\n * import { TLDefaultDashStyle } from '@tldraw/tlschema'\n *\n * // Valid dash style values\n * const drawStyle: TLDefaultDashStyle = 'draw'\n * const solidStyle: TLDefaultDashStyle = 'solid'\n * const dashedStyle: TLDefaultDashStyle = 'dashed'\n * const dottedStyle: TLDefaultDashStyle = 'dotted'\n *\n * // Use in a function parameter\n * function setShapeDash(dash: TLDefaultDashStyle) {\n * // Apply dash style to shape\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultDashStyle = T.TypeOf<typeof DefaultDashStyle>\n"],
5
+ "mappings": "AACA,SAAS,iBAAiB;AAkCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,SAAS,UAAU,UAAU,MAAM;AACrD,CAAC;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=TLFontFace.mjs.map