@tldraw/tlschema 4.2.0-next.f100cedfc45b → 4.2.0

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/dist-cjs/index.d.ts +34 -1
  2. package/dist-cjs/index.js +2 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/misc/TLHandle.js.map +1 -1
  5. package/dist-cjs/styles/TLColorStyle.js +26 -0
  6. package/dist-cjs/styles/TLColorStyle.js.map +2 -2
  7. package/dist-cjs/styles/TLFillStyle.js +1 -1
  8. package/dist-cjs/styles/TLFillStyle.js.map +2 -2
  9. package/dist-esm/index.d.mts +34 -1
  10. package/dist-esm/index.mjs +3 -1
  11. package/dist-esm/index.mjs.map +2 -2
  12. package/dist-esm/misc/TLHandle.mjs.map +1 -1
  13. package/dist-esm/styles/TLColorStyle.mjs +26 -0
  14. package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
  15. package/dist-esm/styles/TLFillStyle.mjs +1 -1
  16. package/dist-esm/styles/TLFillStyle.mjs.map +2 -2
  17. package/package.json +5 -5
  18. package/src/index.ts +1 -0
  19. package/src/misc/TLHandle.ts +2 -0
  20. package/src/styles/TLColorStyle.ts +27 -0
  21. package/src/styles/TLFillStyle.ts +1 -1
package/src/styles/TLColorStyle.ts CHANGED
@@ -61,6 +61,7 @@ export interface TLDefaultColorThemeColor {
61
61
  semi: string
62
62
  pattern: string
63
63
  fill: string // usually same as solid
64
+ linedFill: string // usually slightly lighter than fill
64
65
  frameHeadingStroke: string
65
66
  frameHeadingFill: string
66
67
  frameStroke: string
@@ -134,6 +135,7 @@ export const DefaultColorThemePalette: {
134
135
  black: {
135
136
  solid: '#1d1d1d',
136
137
  fill: '#1d1d1d',
138
+ linedFill: '#363636',
137
139
  frameHeadingStroke: '#717171',
138
140
  frameHeadingFill: '#ffffff',
139
141
  frameStroke: '#717171',
@@ -149,6 +151,7 @@ export const DefaultColorThemePalette: {
149
151
  blue: {
150
152
  solid: '#4465e9',
151
153
  fill: '#4465e9',
154
+ linedFill: '#6580ec',
152
155
  frameHeadingStroke: '#6681ec',
153
156
  frameHeadingFill: '#f9fafe',
154
157
  frameStroke: '#6681ec',
@@ -164,6 +167,7 @@ export const DefaultColorThemePalette: {
164
167
  green: {
165
168
  solid: '#099268',
166
169
  fill: '#099268',
170
+ linedFill: '#0bad7c',
167
171
  frameHeadingStroke: '#37a684',
168
172
  frameHeadingFill: '#f8fcfa',
169
173
  frameStroke: '#37a684',
@@ -179,6 +183,7 @@ export const DefaultColorThemePalette: {
179
183
  grey: {
180
184
  solid: '#9fa8b2',
181
185
  fill: '#9fa8b2',
186
+ linedFill: '#bbc1c9',
182
187
  frameHeadingStroke: '#aaaaab',
183
188
  frameHeadingFill: '#fbfcfc',
184
189
  frameStroke: '#aaaaab',
@@ -194,6 +199,7 @@ export const DefaultColorThemePalette: {
194
199
  'light-blue': {
195
200
  solid: '#4ba1f1',
196
201
  fill: '#4ba1f1',
202
+ linedFill: '#7abaf5',
197
203
  frameHeadingStroke: '#6cb2f3',
198
204
  frameHeadingFill: '#f8fbfe',
199
205
  frameStroke: '#6cb2f3',
@@ -209,6 +215,7 @@ export const DefaultColorThemePalette: {
209
215
  'light-green': {
210
216
  solid: '#4cb05e',
211
217
  fill: '#4cb05e',
218
+ linedFill: '#7ec88c',
212
219
  frameHeadingStroke: '#6dbe7c',
213
220
  frameHeadingFill: '#f8fcf9',
214
221
  frameStroke: '#6dbe7c',
@@ -224,6 +231,7 @@ export const DefaultColorThemePalette: {
224
231
  'light-red': {
225
232
  solid: '#f87777',
226
233
  fill: '#f87777',
234
+ linedFill: '#f99a9a',
227
235
  frameHeadingStroke: '#f89090',
228
236
  frameHeadingFill: '#fffafa',
229
237
  frameStroke: '#f89090',
@@ -239,6 +247,7 @@ export const DefaultColorThemePalette: {
239
247
  'light-violet': {
240
248
  solid: '#e085f4',
241
249
  fill: '#e085f4',
250
+ linedFill: '#e9abf7',
242
251
  frameHeadingStroke: '#e59bf5',
243
252
  frameHeadingFill: '#fefaff',
244
253
  frameStroke: '#e59bf5',
@@ -254,6 +263,7 @@ export const DefaultColorThemePalette: {
254
263
  orange: {
255
264
  solid: '#e16919',
256
265
  fill: '#e16919',
266
+ linedFill: '#ea8643',
257
267
  frameHeadingStroke: '#e68544',
258
268
  frameHeadingFill: '#fef9f6',
259
269
  frameStroke: '#e68544',
@@ -269,6 +279,7 @@ export const DefaultColorThemePalette: {
269
279
  red: {
270
280
  solid: '#e03131',
271
281
  fill: '#e03131',
282
+ linedFill: '#e75f5f',
272
283
  frameHeadingStroke: '#e55757',
273
284
  frameHeadingFill: '#fef7f7',
274
285
  frameStroke: '#e55757',
@@ -284,6 +295,7 @@ export const DefaultColorThemePalette: {
284
295
  violet: {
285
296
  solid: '#ae3ec9',
286
297
  fill: '#ae3ec9',
298
+ linedFill: '#be68d4',
287
299
  frameHeadingStroke: '#bc62d3',
288
300
  frameHeadingFill: '#fcf7fd',
289
301
  frameStroke: '#bc62d3',
@@ -299,6 +311,7 @@ export const DefaultColorThemePalette: {
299
311
  yellow: {
300
312
  solid: '#f1ac4b',
301
313
  fill: '#f1ac4b',
314
+ linedFill: '#f5c27a',
302
315
  frameHeadingStroke: '#f3bb6c',
303
316
  frameHeadingFill: '#fefcf8',
304
317
  frameStroke: '#f3bb6c',
@@ -314,6 +327,7 @@ export const DefaultColorThemePalette: {
314
327
  white: {
315
328
  solid: '#FFFFFF',
316
329
  fill: '#FFFFFF',
330
+ linedFill: '#ffffff',
317
331
  semi: '#f5f5f5',
318
332
  pattern: '#f9f9f9',
319
333
  frameHeadingStroke: '#7d7d7d',
@@ -336,6 +350,7 @@ export const DefaultColorThemePalette: {
336
350
  black: {
337
351
  solid: '#f2f2f2',
338
352
  fill: '#f2f2f2',
353
+ linedFill: '#ffffff',
339
354
  frameHeadingStroke: '#5c5c5c',
340
355
  frameHeadingFill: '#252525',
341
356
  frameStroke: '#5c5c5c',
@@ -351,6 +366,7 @@ export const DefaultColorThemePalette: {
351
366
  blue: {
352
367
  solid: '#4f72fc', // 3c60f0
353
368
  fill: '#4f72fc',
369
+ linedFill: '#3c5cdd',
354
370
  frameHeadingStroke: '#384994',
355
371
  frameHeadingFill: '#1C2036',
356
372
  frameStroke: '#384994',
@@ -366,6 +382,7 @@ export const DefaultColorThemePalette: {
366
382
  green: {
367
383
  solid: '#099268',
368
384
  fill: '#099268',
385
+ linedFill: '#087856',
369
386
  frameHeadingStroke: '#10513C',
370
387
  frameHeadingFill: '#14241f',
371
388
  frameStroke: '#10513C',
@@ -381,6 +398,7 @@ export const DefaultColorThemePalette: {
381
398
  grey: {
382
399
  solid: '#9398b0',
383
400
  fill: '#9398b0',
401
+ linedFill: '#8388a5',
384
402
  frameHeadingStroke: '#42474D',
385
403
  frameHeadingFill: '#23262A',
386
404
  frameStroke: '#42474D',
@@ -396,6 +414,7 @@ export const DefaultColorThemePalette: {
396
414
  'light-blue': {
397
415
  solid: '#4dabf7',
398
416
  fill: '#4dabf7',
417
+ linedFill: '#2793ec',
399
418
  frameHeadingStroke: '#075797',
400
419
  frameHeadingFill: '#142839',
401
420
  frameStroke: '#075797',
@@ -411,6 +430,7 @@ export const DefaultColorThemePalette: {
411
430
  'light-green': {
412
431
  solid: '#40c057',
413
432
  fill: '#40c057',
433
+ linedFill: '#37a44b',
414
434
  frameHeadingStroke: '#1C5427',
415
435
  frameHeadingFill: '#18251A',
416
436
  frameStroke: '#1C5427',
@@ -426,6 +446,7 @@ export const DefaultColorThemePalette: {
426
446
  'light-red': {
427
447
  solid: '#ff8787',
428
448
  fill: '#ff8787',
449
+ linedFill: '#ff6666',
429
450
  frameHeadingStroke: '#6f3232', // Darker and desaturated variant of solid
430
451
  frameHeadingFill: '#341818', // Deep, muted dark red
431
452
  frameStroke: '#6f3232', // Matches headingStroke
@@ -441,6 +462,7 @@ export const DefaultColorThemePalette: {
441
462
  'light-violet': {
442
463
  solid: '#e599f7',
443
464
  fill: '#e599f7',
465
+ linedFill: '#dc71f4',
444
466
  frameHeadingStroke: '#6c367a',
445
467
  frameHeadingFill: '#2D2230',
446
468
  frameStroke: '#6c367a',
@@ -456,6 +478,7 @@ export const DefaultColorThemePalette: {
456
478
  orange: {
457
479
  solid: '#f76707',
458
480
  fill: '#f76707',
481
+ linedFill: '#f54900',
459
482
  frameHeadingStroke: '#773a0e', // Darker, muted version of solid
460
483
  frameHeadingFill: '#2f1d13', // Deep, warm, muted background
461
484
  frameStroke: '#773a0e', // Matches headingStroke
@@ -471,6 +494,7 @@ export const DefaultColorThemePalette: {
471
494
  red: {
472
495
  solid: '#e03131',
473
496
  fill: '#e03131',
497
+ linedFill: '#c31d1d',
474
498
  frameHeadingStroke: '#701e1e', // Darker, muted variation of solid
475
499
  frameHeadingFill: '#301616', // Deep, muted reddish backdrop
476
500
  frameStroke: '#701e1e', // Matches headingStroke
@@ -486,6 +510,7 @@ export const DefaultColorThemePalette: {
486
510
  violet: {
487
511
  solid: '#ae3ec9',
488
512
  fill: '#ae3ec9',
513
+ linedFill: '#8f2fa7',
489
514
  frameHeadingStroke: '#6d1583', // Darker, muted variation of solid
490
515
  frameHeadingFill: '#27152e', // Deep, rich muted violet backdrop
491
516
  frameStroke: '#6d1583', // Matches headingStroke
@@ -501,6 +526,7 @@ export const DefaultColorThemePalette: {
501
526
  yellow: {
502
527
  solid: '#ffc034',
503
528
  fill: '#ffc034',
529
+ linedFill: '#ffae00',
504
530
  frameHeadingStroke: '#684e12', // Darker, muted variant of solid
505
531
  frameHeadingFill: '#2a2113', // Rich, muted dark-yellow background
506
532
  frameStroke: '#684e12', // Matches headingStroke
@@ -516,6 +542,7 @@ export const DefaultColorThemePalette: {
516
542
  white: {
517
543
  solid: '#f3f3f3',
518
544
  fill: '#f3f3f3',
545
+ linedFill: '#f3f3f3',
519
546
  semi: '#f5f5f5',
520
547
  pattern: '#f9f9f9',
521
548
  frameHeadingStroke: '#ffffff',
package/src/styles/TLFillStyle.ts CHANGED
@@ -36,7 +36,7 @@ import { StyleProp } from './StyleProp'
36
36
  */
37
37
  export const DefaultFillStyle = StyleProp.defineEnum('tldraw:fill', {
38
38
  defaultValue: 'none',
39
- values: ['none', 'semi', 'solid', 'pattern', 'fill'],
39
+ values: ['none', 'semi', 'solid', 'pattern', 'fill', 'lined-fill'],
40
40
  })
41
41
 
42
42
  /**