@tldraw/tlschema 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

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