@tldraw/tlschema 3.12.0-canary.a6c2905c622f → 3.12.0-canary.ae51995a58aa

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 (16) hide show
  1. package/dist-cjs/index.d.ts +8 -0
  2. package/dist-cjs/index.js +1 -1
  3. package/dist-cjs/shapes/TLFrameShape.js +23 -3
  4. package/dist-cjs/shapes/TLFrameShape.js.map +2 -2
  5. package/dist-cjs/styles/TLColorStyle.js +233 -11
  6. package/dist-cjs/styles/TLColorStyle.js.map +2 -2
  7. package/dist-esm/index.d.mts +8 -0
  8. package/dist-esm/index.mjs +1 -1
  9. package/dist-esm/shapes/TLFrameShape.mjs +24 -4
  10. package/dist-esm/shapes/TLFrameShape.mjs.map +2 -2
  11. package/dist-esm/styles/TLColorStyle.mjs +233 -11
  12. package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
  13. package/package.json +5 -5
  14. package/src/migrations.test.ts +13 -0
  15. package/src/shapes/TLFrameShape.ts +25 -2
  16. package/src/styles/TLColorStyle.ts +205 -16
package/src/shapes/TLFrameShape.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { T } from '@tldraw/validate'
2
- import { createShapePropsMigrationSequence } from '../records/TLShape'
2
+ import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
3
3
  import { RecordProps } from '../recordsWithProps'
4
+ import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
4
5
  import { TLBaseShape } from './TLBaseShape'
5
6
 
6
7
  /** @public */
@@ -8,6 +9,7 @@ export interface TLFrameShapeProps {
8
9
  w: number
9
10
  h: number
10
11
  name: string
12
+ color: TLDefaultColorStyle
11
13
  }
12
14
 
13
15
  /** @public */
@@ -18,9 +20,30 @@ export const frameShapeProps: RecordProps<TLFrameShape> = {
18
20
  w: T.nonZeroNumber,
19
21
  h: T.nonZeroNumber,
20
22
  name: T.string,
23
+ // because shape colors are an option, we don't want them to be picked up by the editor as a
24
+ // style prop by default, so instead of a proper style we just supply an equivalent validator.
25
+ // Check `FrameShapeUtil.configure` for how we replace this with the original
26
+ // `DefaultColorStyle` style when the option is turned on.
27
+ color: T.literalEnum(...DefaultColorStyle.values),
21
28
  }
22
29
 
30
+ const Versions = createShapePropsMigrationIds('frame', {
31
+ AddColorProp: 1,
32
+ })
33
+
34
+ export { Versions as frameShapeVersions }
35
+
23
36
  /** @public */
24
37
  export const frameShapeMigrations = createShapePropsMigrationSequence({
25
- sequence: [],
38
+ sequence: [
39
+ {
40
+ id: Versions.AddColorProp,
41
+ up: (props) => {
42
+ props.color = 'black'
43
+ },
44
+ down: (props) => {
45
+ delete props.color
46
+ },
47
+ },
48
+ ],
26
49
  })
package/src/styles/TLColorStyle.ts CHANGED
@@ -25,6 +25,13 @@ export interface TLDefaultColorThemeColor {
25
25
  semi: string
26
26
  pattern: string
27
27
  fill: string // same as solid
28
+ frame: {
29
+ headingStroke: string
30
+ headingFill: string
31
+ stroke: string
32
+ fill: string
33
+ text: string
34
+ }
28
35
  note: {
29
36
  fill: string
30
37
  text: string
@@ -53,11 +60,18 @@ export const DefaultColorThemePalette: {
53
60
  lightMode: {
54
61
  id: 'light',
55
62
  text: '#000000',
56
- background: 'rgb(249, 250, 251)',
63
+ background: '#f9fafb',
57
64
  solid: '#fcfffe',
58
65
  black: {
59
66
  solid: '#1d1d1d',
60
67
  fill: '#1d1d1d',
68
+ frame: {
69
+ headingStroke: '#717171',
70
+ headingFill: '#ffffff',
71
+ stroke: '#717171',
72
+ fill: '#ffffff',
73
+ text: '#000000',
74
+ },
61
75
  note: {
62
76
  fill: '#FCE19C',
63
77
  text: '#000000',
@@ -72,6 +86,13 @@ export const DefaultColorThemePalette: {
72
86
  blue: {
73
87
  solid: '#4465e9',
74
88
  fill: '#4465e9',
89
+ frame: {
90
+ headingStroke: '#6681ec',
91
+ headingFill: '#f9fafe',
92
+ stroke: '#6681ec',
93
+ fill: '#f9fafe',
94
+ text: '#000000',
95
+ },
75
96
  note: {
76
97
  fill: '#8AA3FF',
77
98
  text: '#000000',
@@ -86,6 +107,13 @@ export const DefaultColorThemePalette: {
86
107
  green: {
87
108
  solid: '#099268',
88
109
  fill: '#099268',
110
+ frame: {
111
+ headingStroke: '#37a684',
112
+ headingFill: '#f8fcfa',
113
+ stroke: '#37a684',
114
+ fill: '#f8fcfa',
115
+ text: '#000000',
116
+ },
89
117
  note: {
90
118
  fill: '#6FC896',
91
119
  text: '#000000',
@@ -100,6 +128,13 @@ export const DefaultColorThemePalette: {
100
128
  grey: {
101
129
  solid: '#9fa8b2',
102
130
  fill: '#9fa8b2',
131
+ frame: {
132
+ headingStroke: '#aaaaab',
133
+ headingFill: '#fbfcfc',
134
+ stroke: '#aaaaab',
135
+ fill: '#fcfcfd',
136
+ text: '#000000',
137
+ },
103
138
  note: {
104
139
  fill: '#C0CAD3',
105
140
  text: '#000000',
@@ -114,6 +149,13 @@ export const DefaultColorThemePalette: {
114
149
  'light-blue': {
115
150
  solid: '#4ba1f1',
116
151
  fill: '#4ba1f1',
152
+ frame: {
153
+ headingStroke: '#6cb2f3',
154
+ headingFill: '#f8fbfe',
155
+ stroke: '#6cb2f3',
156
+ fill: '#fafcff',
157
+ text: '#000000',
158
+ },
117
159
  note: {
118
160
  fill: '#9BC4FD',
119
161
  text: '#000000',
@@ -128,6 +170,13 @@ export const DefaultColorThemePalette: {
128
170
  'light-green': {
129
171
  solid: '#4cb05e',
130
172
  fill: '#4cb05e',
173
+ frame: {
174
+ headingStroke: '#6dbe7c',
175
+ headingFill: '#f8fcf9',
176
+ stroke: '#6dbe7c',
177
+ fill: '#fafdfa',
178
+ text: '#000000',
179
+ },
131
180
  note: {
132
181
  fill: '#98D08A',
133
182
  text: '#000000',
@@ -142,6 +191,13 @@ export const DefaultColorThemePalette: {
142
191
  'light-red': {
143
192
  solid: '#f87777',
144
193
  fill: '#f87777',
194
+ frame: {
195
+ headingStroke: '#f89090',
196
+ headingFill: '#fffafa',
197
+ stroke: '#f89090',
198
+ fill: '#fffbfb',
199
+ text: '#000000',
200
+ },
145
201
  note: {
146
202
  fill: '#F7A5A1',
147
203
  text: '#000000',
@@ -156,6 +212,13 @@ export const DefaultColorThemePalette: {
156
212
  'light-violet': {
157
213
  solid: '#e085f4',
158
214
  fill: '#e085f4',
215
+ frame: {
216
+ headingStroke: '#e59bf5',
217
+ headingFill: '#fefaff',
218
+ stroke: '#e59bf5',
219
+ fill: '#fefbff',
220
+ text: '#000000',
221
+ },
159
222
  note: {
160
223
  fill: '#DFB0F9',
161
224
  text: '#000000',
@@ -170,6 +233,13 @@ export const DefaultColorThemePalette: {
170
233
  orange: {
171
234
  solid: '#e16919',
172
235
  fill: '#e16919',
236
+ frame: {
237
+ headingStroke: '#e68544',
238
+ headingFill: '#fef9f6',
239
+ stroke: '#e68544',
240
+ fill: '#fef9f6',
241
+ text: '#000000',
242
+ },
173
243
  note: {
174
244
  fill: '#FAA475',
175
245
  text: '#000000',
@@ -184,6 +254,13 @@ export const DefaultColorThemePalette: {
184
254
  red: {
185
255
  solid: '#e03131',
186
256
  fill: '#e03131',
257
+ frame: {
258
+ headingStroke: '#e55757',
259
+ headingFill: '#fef7f7',
260
+ stroke: '#e55757',
261
+ fill: '#fef9f9',
262
+ text: '#000000',
263
+ },
187
264
  note: {
188
265
  fill: '#FC8282',
189
266
  text: '#000000',
@@ -198,6 +275,13 @@ export const DefaultColorThemePalette: {
198
275
  violet: {
199
276
  solid: '#ae3ec9',
200
277
  fill: '#ae3ec9',
278
+ frame: {
279
+ headingStroke: '#bc62d3',
280
+ headingFill: '#fcf7fd',
281
+ stroke: '#bc62d3',
282
+ fill: '#fdf9fd',
283
+ text: '#000000',
284
+ },
201
285
  note: {
202
286
  fill: '#DB91FD',
203
287
  text: '#000000',
@@ -212,6 +296,13 @@ export const DefaultColorThemePalette: {
212
296
  yellow: {
213
297
  solid: '#f1ac4b',
214
298
  fill: '#f1ac4b',
299
+ frame: {
300
+ headingStroke: '#f3bb6c',
301
+ headingFill: '#fefcf8',
302
+ stroke: '#f3bb6c',
303
+ fill: '#fffdfa',
304
+ text: '#000000',
305
+ },
215
306
  note: {
216
307
  fill: '#FED49A',
217
308
  text: '#000000',
@@ -228,6 +319,13 @@ export const DefaultColorThemePalette: {
228
319
  fill: '#FFFFFF',
229
320
  semi: '#f5f5f5',
230
321
  pattern: '#f9f9f9',
322
+ frame: {
323
+ headingStroke: '#7d7d7d',
324
+ headingFill: '#ffffff',
325
+ stroke: '#7d7d7d',
326
+ fill: '#ffffff',
327
+ text: '#000000',
328
+ },
231
329
  note: {
232
330
  fill: '#FFFFFF',
233
331
  text: '#000000',
@@ -247,6 +345,13 @@ export const DefaultColorThemePalette: {
247
345
  black: {
248
346
  solid: '#f2f2f2',
249
347
  fill: '#f2f2f2',
348
+ frame: {
349
+ headingStroke: '#5c5c5c',
350
+ headingFill: '#252525',
351
+ stroke: '#5c5c5c',
352
+ fill: '#0c0c0c',
353
+ text: '#f2f2f2',
354
+ },
250
355
  note: {
251
356
  fill: '#2c2c2c',
252
357
  text: '#f2f2f2',
@@ -261,6 +366,13 @@ export const DefaultColorThemePalette: {
261
366
  blue: {
262
367
  solid: '#4f72fc', // 3c60f0
263
368
  fill: '#4f72fc',
369
+ frame: {
370
+ headingStroke: '#384994',
371
+ headingFill: '#1C2036',
372
+ stroke: '#384994',
373
+ fill: '#11141f',
374
+ text: '#f2f2f2',
375
+ },
264
376
  note: {
265
377
  fill: '#2A3F98',
266
378
  text: '#f2f2f2',
@@ -275,6 +387,13 @@ export const DefaultColorThemePalette: {
275
387
  green: {
276
388
  solid: '#099268',
277
389
  fill: '#099268',
390
+ frame: {
391
+ headingStroke: '#10513C',
392
+ headingFill: '#14241f',
393
+ stroke: '#10513C',
394
+ fill: '#0E1614',
395
+ text: '#f2f2f2',
396
+ },
278
397
  note: {
279
398
  fill: '#014429',
280
399
  text: '#f2f2f2',
@@ -289,6 +408,13 @@ export const DefaultColorThemePalette: {
289
408
  grey: {
290
409
  solid: '#9398b0',
291
410
  fill: '#9398b0',
411
+ frame: {
412
+ headingStroke: '#42474D',
413
+ headingFill: '#23262A',
414
+ stroke: '#42474D',
415
+ fill: '#151719',
416
+ text: '#f2f2f2',
417
+ },
292
418
  note: {
293
419
  fill: '#56595F',
294
420
  text: '#f2f2f2',
@@ -303,6 +429,13 @@ export const DefaultColorThemePalette: {
303
429
  'light-blue': {
304
430
  solid: '#4dabf7',
305
431
  fill: '#4dabf7',
432
+ frame: {
433
+ headingStroke: '#075797',
434
+ headingFill: '#142839',
435
+ stroke: '#075797',
436
+ fill: '#0B1823',
437
+ text: '#f2f2f2',
438
+ },
306
439
  note: {
307
440
  fill: '#1F5495',
308
441
  text: '#f2f2f2',
@@ -317,6 +450,13 @@ export const DefaultColorThemePalette: {
317
450
  'light-green': {
318
451
  solid: '#40c057',
319
452
  fill: '#40c057',
453
+ frame: {
454
+ headingStroke: '#1C5427',
455
+ headingFill: '#18251A',
456
+ stroke: '#1C5427',
457
+ fill: '#0F1911',
458
+ text: '#f2f2f2',
459
+ },
320
460
  note: {
321
461
  fill: '#21581D',
322
462
  text: '#f2f2f2',
@@ -331,12 +471,19 @@ export const DefaultColorThemePalette: {
331
471
  'light-red': {
332
472
  solid: '#ff8787',
333
473
  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
+ },
334
481
  note: {
335
- fill: '#923632',
482
+ fill: '#7a3333', // Medium-dark, muted variant of solid
336
483
  text: '#f2f2f2',
337
484
  },
338
- semi: '#3b3235',
339
- pattern: '#a56767',
485
+ semi: '#3c2b2b', // Subdued, darker neutral-red tone
486
+ pattern: '#a56767', // Existing pattern shade retained
340
487
  highlight: {
341
488
  srgb: '#db005b',
342
489
  p3: 'color(display-p3 0.7849 0.0585 0.3589)',
@@ -345,6 +492,13 @@ export const DefaultColorThemePalette: {
345
492
  'light-violet': {
346
493
  solid: '#e599f7',
347
494
  fill: '#e599f7',
495
+ frame: {
496
+ headingStroke: '#6c367a',
497
+ headingFill: '#2D2230',
498
+ stroke: '#6c367a',
499
+ fill: '#1C151E',
500
+ text: '#f2f2f2',
501
+ },
348
502
  note: {
349
503
  fill: '#762F8E',
350
504
  text: '#f2f2f2',
@@ -359,12 +513,19 @@ export const DefaultColorThemePalette: {
359
513
  orange: {
360
514
  solid: '#f76707',
361
515
  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
+ },
362
523
  note: {
363
- fill: '#843906',
524
+ fill: '#7c3905', // Muted dark variant for note fill
364
525
  text: '#f2f2f2',
365
526
  },
366
- semi: '#3a2e2a',
367
- pattern: '#9f552d',
527
+ semi: '#3b2e27', // Muted neutral-orange tone
528
+ pattern: '#9f552d', // Retained existing shade
368
529
  highlight: {
369
530
  srgb: '#d07a00',
370
531
  p3: 'color(display-p3 0.7699 0.4937 0.0085)',
@@ -373,12 +534,19 @@ export const DefaultColorThemePalette: {
373
534
  red: {
374
535
  solid: '#e03131',
375
536
  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
+ },
376
544
  note: {
377
- fill: '#89231A',
545
+ fill: '#7e201f', // Muted dark variant for note fill
378
546
  text: '#f2f2f2',
379
547
  },
380
- semi: '#36292b',
381
- pattern: '#8f3734',
548
+ semi: '#382726', // Dark neutral-red tone
549
+ pattern: '#8f3734', // Existing pattern color retained
382
550
  highlight: {
383
551
  srgb: '#de002c',
384
552
  p3: 'color(display-p3 0.7978 0.0509 0.2035)',
@@ -387,12 +555,19 @@ export const DefaultColorThemePalette: {
387
555
  violet: {
388
556
  solid: '#ae3ec9',
389
557
  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
+ },
390
565
  note: {
391
- fill: '#681683',
566
+ fill: '#5f1c70', // Muted dark variant for note fill
392
567
  text: '#f2f2f2',
393
568
  },
394
- semi: '#31293c',
395
- pattern: '#763a8b',
569
+ semi: '#342938', // Dark neutral-violet tone
570
+ pattern: '#763a8b', // Retained existing pattern color
396
571
  highlight: {
397
572
  srgb: '#9e00ee',
398
573
  p3: 'color(display-p3 0.5651 0.0079 0.8986)',
@@ -401,12 +576,19 @@ export const DefaultColorThemePalette: {
401
576
  yellow: {
402
577
  solid: '#ffc034',
403
578
  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
+ },
404
586
  note: {
405
- fill: '#98571B',
587
+ fill: '#8a5e1c', // Muted, dark complementary variant
406
588
  text: '#f2f2f2',
407
589
  },
408
- semi: '#3c3934',
409
- pattern: '#fecb92',
590
+ semi: '#3b352b', // Dark muted neutral-yellow tone
591
+ pattern: '#fecb92', // Existing shade retained
410
592
  highlight: {
411
593
  srgb: '#d2b700',
412
594
  p3: 'color(display-p3 0.8078 0.7225 0.0312)',
@@ -417,6 +599,13 @@ export const DefaultColorThemePalette: {
417
599
  fill: '#f3f3f3',
418
600
  semi: '#f5f5f5',
419
601
  pattern: '#f9f9f9',
602
+ frame: {
603
+ headingStroke: '#ffffff',
604
+ headingFill: '#ffffff',
605
+ stroke: '#ffffff',
606
+ fill: '#ffffff',
607
+ text: '#000000',
608
+ },
420
609
  note: {
421
610
  fill: '#eaeaea',
422
611
  text: '#1d1d1d',