@tldraw/tlschema 3.16.0-next.34fddf633325 → 3.16.0-next.b88d494af370

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 (13) hide show
  1. package/dist-cjs/index.d.ts +12 -15
  2. package/dist-cjs/index.js +2 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/styles/TLColorStyle.js +277 -421
  5. package/dist-cjs/styles/TLColorStyle.js.map +2 -2
  6. package/dist-esm/index.d.mts +12 -15
  7. package/dist-esm/index.mjs +3 -1
  8. package/dist-esm/index.mjs.map +2 -2
  9. package/dist-esm/styles/TLColorStyle.mjs +277 -421
  10. package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
  11. package/package.json +5 -5
  12. package/src/index.ts +1 -0
  13. package/src/styles/TLColorStyle.ts +266 -406
package/src/styles/TLColorStyle.ts CHANGED
@@ -24,22 +24,16 @@ export interface TLDefaultColorThemeColor {
24
24
  solid: string
25
25
  semi: string
26
26
  pattern: 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
- }
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
43
37
  }
44
38
 
45
39
  /** @public */
@@ -65,275 +59,197 @@ export const DefaultColorThemePalette: {
65
59
  black: {
66
60
  solid: '#1d1d1d',
67
61
  fill: '#1d1d1d',
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
- },
62
+ frameHeadingStroke: '#717171',
63
+ frameHeadingFill: '#ffffff',
64
+ frameStroke: '#717171',
65
+ frameFill: '#ffffff',
66
+ frameText: '#000000',
67
+ noteFill: '#FCE19C',
68
+ noteText: '#000000',
79
69
  semi: '#e8e8e8',
80
70
  pattern: '#494949',
81
- highlight: {
82
- srgb: '#fddd00',
83
- p3: 'color(display-p3 0.972 0.8205 0.05)',
84
- },
71
+ highlightSrgb: '#fddd00',
72
+ highlightP3: 'color(display-p3 0.972 0.8205 0.05)',
85
73
  },
86
74
  blue: {
87
75
  solid: '#4465e9',
88
76
  fill: '#4465e9',
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
- },
77
+ frameHeadingStroke: '#6681ec',
78
+ frameHeadingFill: '#f9fafe',
79
+ frameStroke: '#6681ec',
80
+ frameFill: '#f9fafe',
81
+ frameText: '#000000',
82
+ noteFill: '#8AA3FF',
83
+ noteText: '#000000',
100
84
  semi: '#dce1f8',
101
85
  pattern: '#6681ee',
102
- highlight: {
103
- srgb: '#10acff',
104
- p3: 'color(display-p3 0.308 0.6632 0.9996)',
105
- },
86
+ highlightSrgb: '#10acff',
87
+ highlightP3: 'color(display-p3 0.308 0.6632 0.9996)',
106
88
  },
107
89
  green: {
108
90
  solid: '#099268',
109
91
  fill: '#099268',
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
- },
92
+ frameHeadingStroke: '#37a684',
93
+ frameHeadingFill: '#f8fcfa',
94
+ frameStroke: '#37a684',
95
+ frameFill: '#f8fcfa',
96
+ frameText: '#000000',
97
+ noteFill: '#6FC896',
98
+ noteText: '#000000',
121
99
  semi: '#d3e9e3',
122
100
  pattern: '#39a785',
123
- highlight: {
124
- srgb: '#00ffc8',
125
- p3: 'color(display-p3 0.2536 0.984 0.7981)',
126
- },
101
+ highlightSrgb: '#00ffc8',
102
+ highlightP3: 'color(display-p3 0.2536 0.984 0.7981)',
127
103
  },
128
104
  grey: {
129
105
  solid: '#9fa8b2',
130
106
  fill: '#9fa8b2',
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
- },
107
+ frameHeadingStroke: '#aaaaab',
108
+ frameHeadingFill: '#fbfcfc',
109
+ frameStroke: '#aaaaab',
110
+ frameFill: '#fcfcfd',
111
+ frameText: '#000000',
112
+ noteFill: '#C0CAD3',
113
+ noteText: '#000000',
142
114
  semi: '#eceef0',
143
115
  pattern: '#bcc3c9',
144
- highlight: {
145
- srgb: '#cbe7f1',
146
- p3: 'color(display-p3 0.8163 0.9023 0.9416)',
147
- },
116
+ highlightSrgb: '#cbe7f1',
117
+ highlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',
148
118
  },
149
119
  'light-blue': {
150
120
  solid: '#4ba1f1',
151
121
  fill: '#4ba1f1',
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
- },
122
+ frameHeadingStroke: '#6cb2f3',
123
+ frameHeadingFill: '#f8fbfe',
124
+ frameStroke: '#6cb2f3',
125
+ frameFill: '#fafcff',
126
+ frameText: '#000000',
127
+ noteFill: '#9BC4FD',
128
+ noteText: '#000000',
163
129
  semi: '#ddedfa',
164
130
  pattern: '#6fbbf8',
165
- highlight: {
166
- srgb: '#00f4ff',
167
- p3: 'color(display-p3 0.1512 0.9414 0.9996)',
168
- },
131
+ highlightSrgb: '#00f4ff',
132
+ highlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',
169
133
  },
170
134
  'light-green': {
171
135
  solid: '#4cb05e',
172
136
  fill: '#4cb05e',
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
- },
137
+ frameHeadingStroke: '#6dbe7c',
138
+ frameHeadingFill: '#f8fcf9',
139
+ frameStroke: '#6dbe7c',
140
+ frameFill: '#fafdfa',
141
+ frameText: '#000000',
142
+ noteFill: '#98D08A',
143
+ noteText: '#000000',
184
144
  semi: '#dbf0e0',
185
145
  pattern: '#65cb78',
186
- highlight: {
187
- srgb: '#65f641',
188
- p3: 'color(display-p3 0.563 0.9495 0.3857)',
189
- },
146
+ highlightSrgb: '#65f641',
147
+ highlightP3: 'color(display-p3 0.563 0.9495 0.3857)',
190
148
  },
191
149
  'light-red': {
192
150
  solid: '#f87777',
193
151
  fill: '#f87777',
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
- },
152
+ frameHeadingStroke: '#f89090',
153
+ frameHeadingFill: '#fffafa',
154
+ frameStroke: '#f89090',
155
+ frameFill: '#fffbfb',
156
+ frameText: '#000000',
157
+ noteFill: '#F7A5A1',
158
+ noteText: '#000000',
205
159
  semi: '#f4dadb',
206
160
  pattern: '#fe9e9e',
207
- highlight: {
208
- srgb: '#ff7fa3',
209
- p3: 'color(display-p3 0.9988 0.5301 0.6397)',
210
- },
161
+ highlightSrgb: '#ff7fa3',
162
+ highlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',
211
163
  },
212
164
  'light-violet': {
213
165
  solid: '#e085f4',
214
166
  fill: '#e085f4',
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
- },
167
+ frameHeadingStroke: '#e59bf5',
168
+ frameHeadingFill: '#fefaff',
169
+ frameStroke: '#e59bf5',
170
+ frameFill: '#fefbff',
171
+ frameText: '#000000',
172
+ noteFill: '#DFB0F9',
173
+ noteText: '#000000',
226
174
  semi: '#f5eafa',
227
175
  pattern: '#e9acf8',
228
- highlight: {
229
- srgb: '#ff88ff',
230
- p3: 'color(display-p3 0.9676 0.5652 0.9999)',
231
- },
176
+ highlightSrgb: '#ff88ff',
177
+ highlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',
232
178
  },
233
179
  orange: {
234
180
  solid: '#e16919',
235
181
  fill: '#e16919',
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
- },
182
+ frameHeadingStroke: '#e68544',
183
+ frameHeadingFill: '#fef9f6',
184
+ frameStroke: '#e68544',
185
+ frameFill: '#fef9f6',
186
+ frameText: '#000000',
187
+ noteFill: '#FAA475',
188
+ noteText: '#000000',
247
189
  semi: '#f8e2d4',
248
190
  pattern: '#f78438',
249
- highlight: {
250
- srgb: '#ffa500',
251
- p3: 'color(display-p3 0.9988 0.6905 0.266)',
252
- },
191
+ highlightSrgb: '#ffa500',
192
+ highlightP3: 'color(display-p3 0.9988 0.6905 0.266)',
253
193
  },
254
194
  red: {
255
195
  solid: '#e03131',
256
196
  fill: '#e03131',
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
- },
197
+ frameHeadingStroke: '#e55757',
198
+ frameHeadingFill: '#fef7f7',
199
+ frameStroke: '#e55757',
200
+ frameFill: '#fef9f9',
201
+ frameText: '#000000',
202
+ noteFill: '#FC8282',
203
+ noteText: '#000000',
268
204
  semi: '#f4dadb',
269
205
  pattern: '#e55959',
270
- highlight: {
271
- srgb: '#ff636e',
272
- p3: 'color(display-p3 0.9992 0.4376 0.45)',
273
- },
206
+ highlightSrgb: '#ff636e',
207
+ highlightP3: 'color(display-p3 0.9992 0.4376 0.45)',
274
208
  },
275
209
  violet: {
276
210
  solid: '#ae3ec9',
277
211
  fill: '#ae3ec9',
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
- },
212
+ frameHeadingStroke: '#bc62d3',
213
+ frameHeadingFill: '#fcf7fd',
214
+ frameStroke: '#bc62d3',
215
+ frameFill: '#fdf9fd',
216
+ frameText: '#000000',
217
+ noteFill: '#DB91FD',
218
+ noteText: '#000000',
289
219
  semi: '#ecdcf2',
290
220
  pattern: '#bd63d3',
291
- highlight: {
292
- srgb: '#c77cff',
293
- p3: 'color(display-p3 0.7469 0.5089 0.9995)',
294
- },
221
+ highlightSrgb: '#c77cff',
222
+ highlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',
295
223
  },
296
224
  yellow: {
297
225
  solid: '#f1ac4b',
298
226
  fill: '#f1ac4b',
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
- },
227
+ frameHeadingStroke: '#f3bb6c',
228
+ frameHeadingFill: '#fefcf8',
229
+ frameStroke: '#f3bb6c',
230
+ frameFill: '#fffdfa',
231
+ frameText: '#000000',
232
+ noteFill: '#FED49A',
233
+ noteText: '#000000',
310
234
  semi: '#f9f0e6',
311
235
  pattern: '#fecb92',
312
- highlight: {
313
- srgb: '#fddd00',
314
- p3: 'color(display-p3 0.972 0.8705 0.05)',
315
- },
236
+ highlightSrgb: '#fddd00',
237
+ highlightP3: 'color(display-p3 0.972 0.8705 0.05)',
316
238
  },
317
239
  white: {
318
240
  solid: '#FFFFFF',
319
241
  fill: '#FFFFFF',
320
242
  semi: '#f5f5f5',
321
243
  pattern: '#f9f9f9',
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
- },
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)',
337
253
  },
338
254
  },
339
255
  darkMode: {
@@ -345,275 +261,197 @@ export const DefaultColorThemePalette: {
345
261
  black: {
346
262
  solid: '#f2f2f2',
347
263
  fill: '#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
- },
264
+ frameHeadingStroke: '#5c5c5c',
265
+ frameHeadingFill: '#252525',
266
+ frameStroke: '#5c5c5c',
267
+ frameFill: '#0c0c0c',
268
+ frameText: '#f2f2f2',
269
+ noteFill: '#2c2c2c',
270
+ noteText: '#f2f2f2',
359
271
  semi: '#2c3036',
360
272
  pattern: '#989898',
361
- highlight: {
362
- srgb: '#d2b700',
363
- p3: 'color(display-p3 0.8078 0.6225 0.0312)',
364
- },
273
+ highlightSrgb: '#d2b700',
274
+ highlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',
365
275
  },
366
276
  blue: {
367
277
  solid: '#4f72fc', // 3c60f0
368
278
  fill: '#4f72fc',
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
- },
279
+ frameHeadingStroke: '#384994',
280
+ frameHeadingFill: '#1C2036',
281
+ frameStroke: '#384994',
282
+ frameFill: '#11141f',
283
+ frameText: '#f2f2f2',
284
+ noteFill: '#2A3F98',
285
+ noteText: '#f2f2f2',
380
286
  semi: '#262d40',
381
287
  pattern: '#3a4b9e',
382
- highlight: {
383
- srgb: '#0079d2',
384
- p3: 'color(display-p3 0.0032 0.4655 0.7991)',
385
- },
288
+ highlightSrgb: '#0079d2',
289
+ highlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',
386
290
  },
387
291
  green: {
388
292
  solid: '#099268',
389
293
  fill: '#099268',
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
- },
294
+ frameHeadingStroke: '#10513C',
295
+ frameHeadingFill: '#14241f',
296
+ frameStroke: '#10513C',
297
+ frameFill: '#0E1614',
298
+ frameText: '#f2f2f2',
299
+ noteFill: '#014429',
300
+ noteText: '#f2f2f2',
401
301
  semi: '#253231',
402
302
  pattern: '#366a53',
403
- highlight: {
404
- srgb: '#009774',
405
- p3: 'color(display-p3 0.0085 0.582 0.4604)',
406
- },
303
+ highlightSrgb: '#009774',
304
+ highlightP3: 'color(display-p3 0.0085 0.582 0.4604)',
407
305
  },
408
306
  grey: {
409
307
  solid: '#9398b0',
410
308
  fill: '#9398b0',
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
- },
309
+ frameHeadingStroke: '#42474D',
310
+ frameHeadingFill: '#23262A',
311
+ frameStroke: '#42474D',
312
+ frameFill: '#151719',
313
+ frameText: '#f2f2f2',
314
+ noteFill: '#56595F',
315
+ noteText: '#f2f2f2',
422
316
  semi: '#33373c',
423
317
  pattern: '#7c8187',
424
- highlight: {
425
- srgb: '#9cb4cb',
426
- p3: 'color(display-p3 0.6299 0.7012 0.7856)',
427
- },
318
+ highlightSrgb: '#9cb4cb',
319
+ highlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',
428
320
  },
429
321
  'light-blue': {
430
322
  solid: '#4dabf7',
431
323
  fill: '#4dabf7',
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
- },
324
+ frameHeadingStroke: '#075797',
325
+ frameHeadingFill: '#142839',
326
+ frameStroke: '#075797',
327
+ frameFill: '#0B1823',
328
+ frameText: '#f2f2f2',
329
+ noteFill: '#1F5495',
330
+ noteText: '#f2f2f2',
443
331
  semi: '#2a3642',
444
332
  pattern: '#4d7aa9',
445
- highlight: {
446
- srgb: '#00bdc8',
447
- p3: 'color(display-p3 0.0023 0.7259 0.7735)',
448
- },
333
+ highlightSrgb: '#00bdc8',
334
+ highlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',
449
335
  },
450
336
  'light-green': {
451
337
  solid: '#40c057',
452
338
  fill: '#40c057',
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
- },
339
+ frameHeadingStroke: '#1C5427',
340
+ frameHeadingFill: '#18251A',
341
+ frameStroke: '#1C5427',
342
+ frameFill: '#0F1911',
343
+ frameText: '#f2f2f2',
344
+ noteFill: '#21581D',
345
+ noteText: '#f2f2f2',
464
346
  semi: '#2a3830',
465
347
  pattern: '#4e874e',
466
- highlight: {
467
- srgb: '#00a000',
468
- p3: 'color(display-p3 0.2711 0.6172 0.0195)',
469
- },
348
+ highlightSrgb: '#00a000',
349
+ highlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',
470
350
  },
471
351
  'light-red': {
472
352
  solid: '#ff8787',
473
353
  fill: '#ff8787',
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
- },
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',
485
361
  semi: '#3c2b2b', // Subdued, darker neutral-red tone
486
362
  pattern: '#a56767', // Existing pattern shade retained
487
- highlight: {
488
- srgb: '#db005b',
489
- p3: 'color(display-p3 0.7849 0.0585 0.3589)',
490
- },
363
+ highlightSrgb: '#db005b',
364
+ highlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',
491
365
  },
492
366
  'light-violet': {
493
367
  solid: '#e599f7',
494
368
  fill: '#e599f7',
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
- },
369
+ frameHeadingStroke: '#6c367a',
370
+ frameHeadingFill: '#2D2230',
371
+ frameStroke: '#6c367a',
372
+ frameFill: '#1C151E',
373
+ frameText: '#f2f2f2',
374
+ noteFill: '#762F8E',
375
+ noteText: '#f2f2f2',
506
376
  semi: '#383442',
507
377
  pattern: '#9770a9',
508
- highlight: {
509
- srgb: '#c400c7',
510
- p3: 'color(display-p3 0.7024 0.0403 0.753)',
511
- },
378
+ highlightSrgb: '#c400c7',
379
+ highlightP3: 'color(display-p3 0.7024 0.0403 0.753)',
512
380
  },
513
381
  orange: {
514
382
  solid: '#f76707',
515
383
  fill: '#f76707',
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
- },
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',
527
391
  semi: '#3b2e27', // Muted neutral-orange tone
528
392
  pattern: '#9f552d', // Retained existing shade
529
- highlight: {
530
- srgb: '#d07a00',
531
- p3: 'color(display-p3 0.7699 0.4937 0.0085)',
532
- },
393
+ highlightSrgb: '#d07a00',
394
+ highlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',
533
395
  },
534
396
  red: {
535
397
  solid: '#e03131',
536
398
  fill: '#e03131',
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
- },
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',
548
406
  semi: '#382726', // Dark neutral-red tone
549
407
  pattern: '#8f3734', // Existing pattern color retained
550
- highlight: {
551
- srgb: '#de002c',
552
- p3: 'color(display-p3 0.7978 0.0509 0.2035)',
553
- },
408
+ highlightSrgb: '#de002c',
409
+ highlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',
554
410
  },
555
411
  violet: {
556
412
  solid: '#ae3ec9',
557
413
  fill: '#ae3ec9',
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
- },
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',
569
421
  semi: '#342938', // Dark neutral-violet tone
570
422
  pattern: '#763a8b', // Retained existing pattern color
571
- highlight: {
572
- srgb: '#9e00ee',
573
- p3: 'color(display-p3 0.5651 0.0079 0.8986)',
574
- },
423
+ highlightSrgb: '#9e00ee',
424
+ highlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',
575
425
  },
576
426
  yellow: {
577
427
  solid: '#ffc034',
578
428
  fill: '#ffc034',
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
- },
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',
590
436
  semi: '#3b352b', // Dark muted neutral-yellow tone
591
437
  pattern: '#fecb92', // Existing shade retained
592
- highlight: {
593
- srgb: '#d2b700',
594
- p3: 'color(display-p3 0.8078 0.7225 0.0312)',
595
- },
438
+ highlightSrgb: '#d2b700',
439
+ highlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',
596
440
  },
597
441
  white: {
598
442
  solid: '#f3f3f3',
599
443
  fill: '#f3f3f3',
600
444
  semi: '#f5f5f5',
601
445
  pattern: '#f9f9f9',
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
- },
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)',
617
455
  },
618
456
  },
619
457
  }
@@ -637,3 +475,25 @@ export const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor',
637
475
 
638
476
  /** @public */
639
477
  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
+ }