@likec4/styles 1.29.1 → 1.31.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 (12) hide show
  1. package/README.md +3 -2
  2. package/build.config.ts +7 -2
  3. package/dev.ts +1 -1
  4. package/dist/css/css.mjs +1 -1
  5. package/dist/jsx/is-valid-prop.mjs +1 -1
  6. package/dist/patterns/hstack.mjs +1 -1
  7. package/dist/patterns/vstack.mjs +1 -1
  8. package/dist/types/style-props.d.ts +1 -2
  9. package/package.json +12 -12
  10. package/preset.d.mts +6 -2750
  11. package/preset.mjs +47 -28
  12. package/preset.ts +2 -2
package/preset.d.mts CHANGED
@@ -1,2753 +1,9 @@
1
- import { defineRecipe, defineSemanticTokens, defineTextStyles, defineTokens, defineUtility, definePreset } from '@pandacss/dev';
1
+ import * as _pandacss_dev from '@pandacss/dev';
2
+ import { Config } from '@pandacss/dev';
2
3
 
3
- const themeColors = [
4
- "amber",
5
- "blue",
6
- "gray",
7
- "slate",
8
- "green",
9
- "indigo",
10
- "muted",
11
- "primary",
12
- "red",
13
- "secondary",
14
- "sky"
15
- ];
16
- const compoundColors = [
17
- "amber.1",
18
- "amber.2",
19
- "amber.3",
20
- "amber.4",
21
- "amber.5",
22
- "blue.1",
23
- "blue.2",
24
- "blue.3",
25
- "blue.4",
26
- "blue.5",
27
- "gray.1",
28
- "gray.2",
29
- "gray.3",
30
- "gray.4",
31
- "gray.5",
32
- "slate.1",
33
- "slate.2",
34
- "slate.3",
35
- "slate.4",
36
- "slate.5",
37
- "green.1",
38
- "green.2",
39
- "green.3",
40
- "green.4",
41
- "green.5",
42
- "indigo.1",
43
- "indigo.2",
44
- "indigo.3",
45
- "indigo.4",
46
- "indigo.5",
47
- "muted.1",
48
- "muted.2",
49
- "muted.3",
50
- "muted.4",
51
- "muted.5",
52
- "primary.1",
53
- "primary.2",
54
- "primary.3",
55
- "primary.4",
56
- "primary.5",
57
- "red.1",
58
- "red.2",
59
- "red.3",
60
- "red.4",
61
- "red.5",
62
- "secondary.1",
63
- "secondary.2",
64
- "secondary.3",
65
- "secondary.4",
66
- "secondary.5",
67
- "sky.1",
68
- "sky.2",
69
- "sky.3",
70
- "sky.4",
71
- "sky.5"
72
- ];
73
- const conditions$1 = {
74
- shapeSizeXs: ":where([data-likec4-shape-size='xs']) &",
75
- shapeSizeSm: ":where([data-likec4-shape-size='sm']) &",
76
- shapeSizeMd: ":where([data-likec4-shape-size='md']) &",
77
- shapeSizeLg: ":where([data-likec4-shape-size='lg']) &",
78
- shapeSizeXl: ":where([data-likec4-shape-size='xl']) &",
79
- shapeRectangle: ":where([data-likec4-shape='rectangle']) &",
80
- shapePerson: ":where([data-likec4-shape='person']) &",
81
- shapeBrowser: ":where([data-likec4-shape='browser']) &",
82
- shapeMobile: ":where([data-likec4-shape='mobile']) &",
83
- shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
84
- shapeStorage: ":where([data-likec4-shape='storage']) &",
85
- shapeQueue: ":where([data-likec4-shape='queue']) &"
86
- };
87
- const globalCss = {
88
- ":where([data-likec4-text-size='xs'])": {
89
- "--likec4-text-size": "{fontSizes.likec4.xs}"
90
- },
91
- ":where([data-likec4-text-size='sm'])": {
92
- "--likec4-text-size": "{fontSizes.likec4.sm}"
93
- },
94
- ":where([data-likec4-text-size='md'])": {
95
- "--likec4-text-size": "{fontSizes.likec4.md}"
96
- },
97
- ":where([data-likec4-text-size='lg'])": {
98
- "--likec4-text-size": "{fontSizes.likec4.lg}"
99
- },
100
- ":where([data-likec4-text-size='xl'])": {
101
- "--likec4-text-size": "{fontSizes.likec4.xl}"
102
- },
103
- ":where([data-likec4-spacing='xs'])": {
104
- "--likec4-spacing": "{spacing.likec4.xs}"
105
- },
106
- ":where([data-likec4-spacing='sm'])": {
107
- "--likec4-spacing": "{spacing.likec4.sm}"
108
- },
109
- ":where([data-likec4-spacing='md'])": {
110
- "--likec4-spacing": "{spacing.likec4.md}"
111
- },
112
- ":where([data-likec4-spacing='lg'])": {
113
- "--likec4-spacing": "{spacing.likec4.lg}"
114
- },
115
- ":where([data-likec4-spacing='xl'])": {
116
- "--likec4-spacing": "{spacing.likec4.xl}"
117
- }
118
- };
119
- const theme$1 = {
120
- breakpoints: {
121
- xs: "36em",
122
- sm: "48em",
123
- md: "62em",
124
- lg: "75em",
125
- xl: "88em"
126
- },
127
- tokens: {
128
- spacing: {
129
- xs: {
130
- value: "calc(0.625rem * var(--mantine-scale))"
131
- },
132
- sm: {
133
- value: "calc(0.75rem * var(--mantine-scale))"
134
- },
135
- md: {
136
- value: "calc(1rem * var(--mantine-scale))"
137
- },
138
- lg: {
139
- value: "calc(1.25rem * var(--mantine-scale))"
140
- },
141
- xl: {
142
- value: "calc(2rem * var(--mantine-scale))"
143
- },
144
- likec4: {
145
- xs: {
146
- description: "LikeC4 style spacing: xs",
147
- value: "8px"
148
- },
149
- sm: {
150
- description: "LikeC4 style spacing: sm",
151
- value: "10px"
152
- },
153
- md: {
154
- description: "LikeC4 style spacing: md",
155
- value: "16px"
156
- },
157
- lg: {
158
- description: "LikeC4 style spacing: lg",
159
- value: "24px"
160
- },
161
- xl: {
162
- description: "LikeC4 style spacing: xl",
163
- value: "32px"
164
- }
165
- }
166
- },
167
- radii: {
168
- xs: {
169
- value: "var(--mantine-radius-xs)"
170
- },
171
- sm: {
172
- value: "var(--mantine-radius-sm)"
173
- },
174
- md: {
175
- value: "var(--mantine-radius-md)"
176
- },
177
- lg: {
178
- value: "var(--mantine-radius-lg)"
179
- },
180
- xl: {
181
- value: "var(--mantine-radius-xl)"
182
- }
183
- },
184
- fontSizes: {
185
- xxs: {
186
- value: "0.625rem"
187
- },
188
- xs: {
189
- value: "calc(0.75rem * var(--mantine-scale))"
190
- },
191
- sm: {
192
- value: "calc(0.875rem * var(--mantine-scale))"
193
- },
194
- md: {
195
- value: "calc(1rem * var(--mantine-scale))"
196
- },
197
- lg: {
198
- value: "calc(1.125rem * var(--mantine-scale))"
199
- },
200
- xl: {
201
- value: "calc(1.25rem * var(--mantine-scale))"
202
- },
203
- likec4: {
204
- xs: {
205
- description: "LikeC4 style text size: xs",
206
- value: "0.750rem"
207
- },
208
- sm: {
209
- description: "LikeC4 style text size: sm",
210
- value: "0.875rem"
211
- },
212
- md: {
213
- description: "LikeC4 style text size: md",
214
- value: "1.19rem"
215
- },
216
- lg: {
217
- description: "LikeC4 style text size: lg",
218
- value: "1.50rem"
219
- },
220
- xl: {
221
- description: "LikeC4 style text size: xl",
222
- value: "2.00rem"
223
- }
224
- }
225
- },
226
- lineHeights: {
227
- xs: {
228
- value: "1.4"
229
- },
230
- sm: {
231
- value: "1.45"
232
- },
233
- md: {
234
- value: "1.55"
235
- },
236
- lg: {
237
- value: "1.6"
238
- },
239
- xl: {
240
- value: "1.65"
241
- }
242
- },
243
- colors: {
244
- mantine: {
245
- colors: {
246
- primary: {
247
- DEFAULT: {
248
- value: "var(--mantine-primary-color-6)"
249
- },
250
- filled: {
251
- value: "var(--mantine-primary-color-filled)"
252
- },
253
- filledHover: {
254
- value: "var(--mantine-primary-color-filled-hover)"
255
- },
256
- light: {
257
- value: "var(--mantine-primary-color-light)"
258
- },
259
- lightHover: {
260
- value: "var(--mantine-primary-color-light-hover)"
261
- },
262
- lightColor: {
263
- value: "var(--mantine-primary-color-light-color)"
264
- },
265
- outline: {
266
- value: "var(--mantine-primary-color-outline)"
267
- },
268
- outlineHover: {
269
- value: "var(--mantine-primary-color-outline-hover)"
270
- }
271
- },
272
- "primary[0]": {
273
- value: "var(--mantine-primary-color-0)"
274
- },
275
- "primary[1]": {
276
- value: "var(--mantine-primary-color-1)"
277
- },
278
- "primary[2]": {
279
- value: "var(--mantine-primary-color-2)"
280
- },
281
- "primary[3]": {
282
- value: "var(--mantine-primary-color-3)"
283
- },
284
- "primary[4]": {
285
- value: "var(--mantine-primary-color-4)"
286
- },
287
- "primary[5]": {
288
- value: "var(--mantine-primary-color-5)"
289
- },
290
- "primary[6]": {
291
- value: "var(--mantine-primary-color-6)"
292
- },
293
- "primary[7]": {
294
- value: "var(--mantine-primary-color-7)"
295
- },
296
- "primary[8]": {
297
- value: "var(--mantine-primary-color-8)"
298
- },
299
- "primary[9]": {
300
- value: "var(--mantine-primary-color-9)"
301
- },
302
- white: {
303
- value: "var(--mantine-color-white)"
304
- },
305
- text: {
306
- value: "var(--mantine-color-text)"
307
- },
308
- body: {
309
- value: "var(--mantine-color-body)"
310
- },
311
- dimmed: {
312
- value: "var(--mantine-color-dimmed)"
313
- },
314
- defaultBorder: {
315
- value: "var(--mantine-color-default-border)"
316
- },
317
- defaultColor: {
318
- value: "var(--mantine-color-default-color)"
319
- },
320
- defaultHover: {
321
- value: "var(--mantine-color-default-hover)"
322
- },
323
- default: {
324
- value: "var(--mantine-color-default)"
325
- },
326
- error: {
327
- value: "var(--mantine-color-error)"
328
- },
329
- placeholder: {
330
- value: "var(--mantine-color-placeholder)"
331
- },
332
- gray: {
333
- DEFAULT: {
334
- value: "var(--mantine-color-gray-6)"
335
- },
336
- filled: {
337
- value: "var(--mantine-color-gray-filled)"
338
- },
339
- filledHover: {
340
- value: "var(--mantine-color-gray-filled-hover)"
341
- },
342
- light: {
343
- value: "var(--mantine-color-gray-light)"
344
- },
345
- lightHover: {
346
- value: "var(--mantine-color-gray-light-hover)"
347
- },
348
- lightColor: {
349
- value: "var(--mantine-color-gray-light-color)"
350
- },
351
- outline: {
352
- value: "var(--mantine-color-gray-outline)"
353
- },
354
- outlineHover: {
355
- value: "var(--mantine-color-gray-outline-hover)"
356
- }
357
- },
358
- "gray[0]": {
359
- value: "var(--mantine-color-gray-0)"
360
- },
361
- "gray[1]": {
362
- value: "var(--mantine-color-gray-1)"
363
- },
364
- "gray[2]": {
365
- value: "var(--mantine-color-gray-2)"
366
- },
367
- "gray[3]": {
368
- value: "var(--mantine-color-gray-3)"
369
- },
370
- "gray[4]": {
371
- value: "var(--mantine-color-gray-4)"
372
- },
373
- "gray[5]": {
374
- value: "var(--mantine-color-gray-5)"
375
- },
376
- "gray[6]": {
377
- value: "var(--mantine-color-gray-6)"
378
- },
379
- "gray[7]": {
380
- value: "var(--mantine-color-gray-7)"
381
- },
382
- "gray[8]": {
383
- value: "var(--mantine-color-gray-8)"
384
- },
385
- "gray[9]": {
386
- value: "var(--mantine-color-gray-9)"
387
- },
388
- dark: {
389
- DEFAULT: {
390
- value: "var(--mantine-color-dark-6)"
391
- },
392
- filled: {
393
- value: "var(--mantine-color-dark-filled)"
394
- },
395
- filledHover: {
396
- value: "var(--mantine-color-dark-filled-hover)"
397
- },
398
- light: {
399
- value: "var(--mantine-color-dark-light)"
400
- },
401
- lightHover: {
402
- value: "var(--mantine-color-dark-light-hover)"
403
- },
404
- lightColor: {
405
- value: "var(--mantine-color-dark-light-color)"
406
- },
407
- outline: {
408
- value: "var(--mantine-color-dark-outline)"
409
- },
410
- outlineHover: {
411
- value: "var(--mantine-color-dark-outline-hover)"
412
- }
413
- },
414
- "dark[0]": {
415
- value: "var(--mantine-color-dark-0)"
416
- },
417
- "dark[1]": {
418
- value: "var(--mantine-color-dark-1)"
419
- },
420
- "dark[2]": {
421
- value: "var(--mantine-color-dark-2)"
422
- },
423
- "dark[3]": {
424
- value: "var(--mantine-color-dark-3)"
425
- },
426
- "dark[4]": {
427
- value: "var(--mantine-color-dark-4)"
428
- },
429
- "dark[5]": {
430
- value: "var(--mantine-color-dark-5)"
431
- },
432
- "dark[6]": {
433
- value: "var(--mantine-color-dark-6)"
434
- },
435
- "dark[7]": {
436
- value: "var(--mantine-color-dark-7)"
437
- },
438
- "dark[8]": {
439
- value: "var(--mantine-color-dark-8)"
440
- },
441
- "dark[9]": {
442
- value: "var(--mantine-color-dark-9)"
443
- },
444
- orange: {
445
- DEFAULT: {
446
- value: "var(--mantine-color-orange-6)"
447
- },
448
- filled: {
449
- value: "var(--mantine-color-orange-filled)"
450
- },
451
- filledHover: {
452
- value: "var(--mantine-color-orange-filled-hover)"
453
- },
454
- light: {
455
- value: "var(--mantine-color-orange-light)"
456
- },
457
- lightHover: {
458
- value: "var(--mantine-color-orange-light-hover)"
459
- },
460
- lightColor: {
461
- value: "var(--mantine-color-orange-light-color)"
462
- },
463
- outline: {
464
- value: "var(--mantine-color-orange-outline)"
465
- },
466
- outlineHover: {
467
- value: "var(--mantine-color-orange-outline-hover)"
468
- }
469
- },
470
- "orange[0]": {
471
- value: "var(--mantine-color-orange-0)"
472
- },
473
- "orange[1]": {
474
- value: "var(--mantine-color-orange-1)"
475
- },
476
- "orange[2]": {
477
- value: "var(--mantine-color-orange-2)"
478
- },
479
- "orange[3]": {
480
- value: "var(--mantine-color-orange-3)"
481
- },
482
- "orange[4]": {
483
- value: "var(--mantine-color-orange-4)"
484
- },
485
- "orange[5]": {
486
- value: "var(--mantine-color-orange-5)"
487
- },
488
- "orange[6]": {
489
- value: "var(--mantine-color-orange-6)"
490
- },
491
- "orange[7]": {
492
- value: "var(--mantine-color-orange-7)"
493
- },
494
- "orange[8]": {
495
- value: "var(--mantine-color-orange-8)"
496
- },
497
- "orange[9]": {
498
- value: "var(--mantine-color-orange-9)"
499
- },
500
- teal: {
501
- DEFAULT: {
502
- value: "var(--mantine-color-teal-6)"
503
- },
504
- filled: {
505
- value: "var(--mantine-color-teal-filled)"
506
- },
507
- filledHover: {
508
- value: "var(--mantine-color-teal-filled-hover)"
509
- },
510
- light: {
511
- value: "var(--mantine-color-teal-light)"
512
- },
513
- lightHover: {
514
- value: "var(--mantine-color-teal-light-hover)"
515
- },
516
- lightColor: {
517
- value: "var(--mantine-color-teal-light-color)"
518
- },
519
- outline: {
520
- value: "var(--mantine-color-teal-outline)"
521
- },
522
- outlineHover: {
523
- value: "var(--mantine-color-teal-outline-hover)"
524
- }
525
- },
526
- "teal[0]": {
527
- value: "var(--mantine-color-teal-0)"
528
- },
529
- "teal[1]": {
530
- value: "var(--mantine-color-teal-1)"
531
- },
532
- "teal[2]": {
533
- value: "var(--mantine-color-teal-2)"
534
- },
535
- "teal[3]": {
536
- value: "var(--mantine-color-teal-3)"
537
- },
538
- "teal[4]": {
539
- value: "var(--mantine-color-teal-4)"
540
- },
541
- "teal[5]": {
542
- value: "var(--mantine-color-teal-5)"
543
- },
544
- "teal[6]": {
545
- value: "var(--mantine-color-teal-6)"
546
- },
547
- "teal[7]": {
548
- value: "var(--mantine-color-teal-7)"
549
- },
550
- "teal[8]": {
551
- value: "var(--mantine-color-teal-8)"
552
- },
553
- "teal[9]": {
554
- value: "var(--mantine-color-teal-9)"
555
- },
556
- red: {
557
- DEFAULT: {
558
- value: "var(--mantine-color-red-6)"
559
- },
560
- filled: {
561
- value: "var(--mantine-color-red-filled)"
562
- },
563
- filledHover: {
564
- value: "var(--mantine-color-red-filled-hover)"
565
- },
566
- light: {
567
- value: "var(--mantine-color-red-light)"
568
- },
569
- lightHover: {
570
- value: "var(--mantine-color-red-light-hover)"
571
- },
572
- lightColor: {
573
- value: "var(--mantine-color-red-light-color)"
574
- },
575
- outline: {
576
- value: "var(--mantine-color-red-outline)"
577
- },
578
- outlineHover: {
579
- value: "var(--mantine-color-red-outline-hover)"
580
- }
581
- },
582
- "red[0]": {
583
- value: "var(--mantine-color-red-0)"
584
- },
585
- "red[1]": {
586
- value: "var(--mantine-color-red-1)"
587
- },
588
- "red[2]": {
589
- value: "var(--mantine-color-red-2)"
590
- },
591
- "red[3]": {
592
- value: "var(--mantine-color-red-3)"
593
- },
594
- "red[4]": {
595
- value: "var(--mantine-color-red-4)"
596
- },
597
- "red[5]": {
598
- value: "var(--mantine-color-red-5)"
599
- },
600
- "red[6]": {
601
- value: "var(--mantine-color-red-6)"
602
- },
603
- "red[7]": {
604
- value: "var(--mantine-color-red-7)"
605
- },
606
- "red[8]": {
607
- value: "var(--mantine-color-red-8)"
608
- },
609
- "red[9]": {
610
- value: "var(--mantine-color-red-9)"
611
- },
612
- green: {
613
- DEFAULT: {
614
- value: "var(--mantine-color-green-6)"
615
- },
616
- filled: {
617
- value: "var(--mantine-color-green-filled)"
618
- },
619
- filledHover: {
620
- value: "var(--mantine-color-green-filled-hover)"
621
- },
622
- light: {
623
- value: "var(--mantine-color-green-light)"
624
- },
625
- lightHover: {
626
- value: "var(--mantine-color-green-light-hover)"
627
- },
628
- lightColor: {
629
- value: "var(--mantine-color-green-light-color)"
630
- },
631
- outline: {
632
- value: "var(--mantine-color-green-outline)"
633
- },
634
- outlineHover: {
635
- value: "var(--mantine-color-green-outline-hover)"
636
- }
637
- },
638
- "green[0]": {
639
- value: "var(--mantine-color-green-0)"
640
- },
641
- "green[1]": {
642
- value: "var(--mantine-color-green-1)"
643
- },
644
- "green[2]": {
645
- value: "var(--mantine-color-green-2)"
646
- },
647
- "green[3]": {
648
- value: "var(--mantine-color-green-3)"
649
- },
650
- "green[4]": {
651
- value: "var(--mantine-color-green-4)"
652
- },
653
- "green[5]": {
654
- value: "var(--mantine-color-green-5)"
655
- },
656
- "green[6]": {
657
- value: "var(--mantine-color-green-6)"
658
- },
659
- "green[7]": {
660
- value: "var(--mantine-color-green-7)"
661
- },
662
- "green[8]": {
663
- value: "var(--mantine-color-green-8)"
664
- },
665
- "green[9]": {
666
- value: "var(--mantine-color-green-9)"
667
- },
668
- yellow: {
669
- DEFAULT: {
670
- value: "var(--mantine-color-yellow-6)"
671
- },
672
- filled: {
673
- value: "var(--mantine-color-yellow-filled)"
674
- },
675
- filledHover: {
676
- value: "var(--mantine-color-yellow-filled-hover)"
677
- },
678
- light: {
679
- value: "var(--mantine-color-yellow-light)"
680
- },
681
- lightHover: {
682
- value: "var(--mantine-color-yellow-light-hover)"
683
- },
684
- lightColor: {
685
- value: "var(--mantine-color-yellow-light-color)"
686
- },
687
- outline: {
688
- value: "var(--mantine-color-yellow-outline)"
689
- },
690
- outlineHover: {
691
- value: "var(--mantine-color-yellow-outline-hover)"
692
- }
693
- },
694
- "yellow[0]": {
695
- value: "var(--mantine-color-yellow-0)"
696
- },
697
- "yellow[1]": {
698
- value: "var(--mantine-color-yellow-1)"
699
- },
700
- "yellow[2]": {
701
- value: "var(--mantine-color-yellow-2)"
702
- },
703
- "yellow[3]": {
704
- value: "var(--mantine-color-yellow-3)"
705
- },
706
- "yellow[4]": {
707
- value: "var(--mantine-color-yellow-4)"
708
- },
709
- "yellow[5]": {
710
- value: "var(--mantine-color-yellow-5)"
711
- },
712
- "yellow[6]": {
713
- value: "var(--mantine-color-yellow-6)"
714
- },
715
- "yellow[7]": {
716
- value: "var(--mantine-color-yellow-7)"
717
- },
718
- "yellow[8]": {
719
- value: "var(--mantine-color-yellow-8)"
720
- },
721
- "yellow[9]": {
722
- value: "var(--mantine-color-yellow-9)"
723
- }
724
- }
725
- }
726
- },
727
- shadows: {
728
- xs: {
729
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1)"
730
- },
731
- sm: {
732
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
733
- },
734
- md: {
735
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
736
- },
737
- lg: {
738
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
739
- },
740
- xl: {
741
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
742
- }
743
- }
744
- },
745
- semanticTokens: {
746
- colors: {
747
- likec4: {
748
- background: {
749
- DEFAULT: {
750
- description: "Background color",
751
- value: "{colors.mantine.colors.body}"
752
- },
753
- pattern: {
754
- description: "Background pattern color",
755
- value: {
756
- base: "{colors.mantine.colors.dark[5]}",
757
- _light: "{colors.mantine.colors.gray[4]}"
758
- }
759
- }
760
- },
761
- amber: {
762
- element: {
763
- fill: {
764
- value: "#A35829"
765
- },
766
- stroke: {
767
- value: "#7E451D"
768
- },
769
- hiContrast: {
770
- value: "#FFE0C2"
771
- },
772
- loContrast: {
773
- value: "#f9b27c"
774
- }
775
- },
776
- relation: {
777
- stroke: {
778
- DEFAULT: {
779
- value: "#b45309"
780
- },
781
- selected: {
782
- value: {
783
- _light: "#994708",
784
- _dark: "#cb8753"
785
- }
786
- }
787
- },
788
- label: {
789
- DEFAULT: {
790
- value: "#FFE0C2"
791
- },
792
- bg: {
793
- value: "#78350f"
794
- }
795
- }
796
- }
797
- },
798
- blue: {
799
- element: {
800
- fill: {
801
- value: "#3b82f6"
802
- },
803
- stroke: {
804
- value: "#2563eb"
805
- },
806
- hiContrast: {
807
- value: "#eff6ff"
808
- },
809
- loContrast: {
810
- value: "#bfdbfe"
811
- }
812
- },
813
- relation: {
814
- stroke: {
815
- DEFAULT: {
816
- value: "#3b82f6"
817
- },
818
- selected: {
819
- value: {
820
- _light: "#326fd1",
821
- _dark: "#76a8f9"
822
- }
823
- }
824
- },
825
- label: {
826
- DEFAULT: {
827
- value: "#60a5fa"
828
- },
829
- bg: {
830
- value: "#172554"
831
- }
832
- }
833
- }
834
- },
835
- gray: {
836
- element: {
837
- fill: {
838
- value: "#737373"
839
- },
840
- stroke: {
841
- value: "#525252"
842
- },
843
- hiContrast: {
844
- value: "#fafafa"
845
- },
846
- loContrast: {
847
- value: "#d4d4d4"
848
- }
849
- },
850
- relation: {
851
- stroke: {
852
- DEFAULT: {
853
- value: "#6E6E6E"
854
- },
855
- selected: {
856
- value: {
857
- _light: "#5e5e5e",
858
- _dark: "#9a9a9a"
859
- }
860
- }
861
- },
862
- label: {
863
- DEFAULT: {
864
- value: "#C6C6C6"
865
- },
866
- bg: {
867
- value: "#18191b"
868
- }
869
- }
870
- }
871
- },
872
- slate: {
873
- element: {
874
- fill: {
875
- value: "#64748b"
876
- },
877
- stroke: {
878
- value: "#475569"
879
- },
880
- hiContrast: {
881
- value: "#f8fafc"
882
- },
883
- loContrast: {
884
- value: "#cbd5e1"
885
- }
886
- },
887
- relation: {
888
- stroke: {
889
- DEFAULT: {
890
- value: "#64748b"
891
- },
892
- selected: {
893
- value: {
894
- _light: "#556376",
895
- _dark: "#939eae"
896
- }
897
- }
898
- },
899
- label: {
900
- DEFAULT: {
901
- value: "#cbd5e1"
902
- },
903
- bg: {
904
- value: "#0f172a"
905
- }
906
- }
907
- }
908
- },
909
- green: {
910
- element: {
911
- fill: {
912
- value: "#428a4f"
913
- },
914
- stroke: {
915
- value: "#2d5d39"
916
- },
917
- hiContrast: {
918
- value: "#f8fafc"
919
- },
920
- loContrast: {
921
- value: "#c2f0c2"
922
- }
923
- },
924
- relation: {
925
- stroke: {
926
- DEFAULT: {
927
- value: "#15803d"
928
- },
929
- selected: {
930
- value: {
931
- _light: "#126d34",
932
- _dark: "#5ba677"
933
- }
934
- }
935
- },
936
- label: {
937
- DEFAULT: {
938
- value: "#22c55e"
939
- },
940
- bg: {
941
- value: "#052e16"
942
- }
943
- }
944
- }
945
- },
946
- indigo: {
947
- element: {
948
- fill: {
949
- value: "#6366f1"
950
- },
951
- stroke: {
952
- value: "#4f46e5"
953
- },
954
- hiContrast: {
955
- value: "#eef2ff"
956
- },
957
- loContrast: {
958
- value: "#c7d2fe"
959
- }
960
- },
961
- relation: {
962
- stroke: {
963
- DEFAULT: {
964
- value: "#6366f1"
965
- },
966
- selected: {
967
- value: {
968
- _light: "#5457cd",
969
- _dark: "#9294f5"
970
- }
971
- }
972
- },
973
- label: {
974
- DEFAULT: {
975
- value: "#818cf8"
976
- },
977
- bg: {
978
- value: "#1e1b4b"
979
- }
980
- }
981
- }
982
- },
983
- muted: {
984
- element: {
985
- fill: {
986
- value: "#64748b"
987
- },
988
- stroke: {
989
- value: "#475569"
990
- },
991
- hiContrast: {
992
- value: "#f8fafc"
993
- },
994
- loContrast: {
995
- value: "#cbd5e1"
996
- }
997
- },
998
- relation: {
999
- stroke: {
1000
- DEFAULT: {
1001
- value: "#64748b"
1002
- },
1003
- selected: {
1004
- value: {
1005
- _light: "#556376",
1006
- _dark: "#939eae"
1007
- }
1008
- }
1009
- },
1010
- label: {
1011
- DEFAULT: {
1012
- value: "#cbd5e1"
1013
- },
1014
- bg: {
1015
- value: "#0f172a"
1016
- }
1017
- }
1018
- }
1019
- },
1020
- primary: {
1021
- element: {
1022
- fill: {
1023
- value: "#3b82f6"
1024
- },
1025
- stroke: {
1026
- value: "#2563eb"
1027
- },
1028
- hiContrast: {
1029
- value: "#eff6ff"
1030
- },
1031
- loContrast: {
1032
- value: "#bfdbfe"
1033
- }
1034
- },
1035
- relation: {
1036
- stroke: {
1037
- DEFAULT: {
1038
- value: "#3b82f6"
1039
- },
1040
- selected: {
1041
- value: {
1042
- _light: "#326fd1",
1043
- _dark: "#76a8f9"
1044
- }
1045
- }
1046
- },
1047
- label: {
1048
- DEFAULT: {
1049
- value: "#60a5fa"
1050
- },
1051
- bg: {
1052
- value: "#172554"
1053
- }
1054
- }
1055
- }
1056
- },
1057
- red: {
1058
- element: {
1059
- fill: {
1060
- value: "#AC4D39"
1061
- },
1062
- stroke: {
1063
- value: "#853A2D"
1064
- },
1065
- hiContrast: {
1066
- value: "#FBD3CB"
1067
- },
1068
- loContrast: {
1069
- value: "#f5b2a3"
1070
- }
1071
- },
1072
- relation: {
1073
- stroke: {
1074
- DEFAULT: {
1075
- value: "#AC4D39"
1076
- },
1077
- selected: {
1078
- value: {
1079
- _light: "#924130",
1080
- _dark: "#c58274"
1081
- }
1082
- }
1083
- },
1084
- label: {
1085
- DEFAULT: {
1086
- value: "#f5b2a3"
1087
- },
1088
- bg: {
1089
- value: "#b91c1c"
1090
- }
1091
- }
1092
- }
1093
- },
1094
- secondary: {
1095
- element: {
1096
- fill: {
1097
- value: "#0284c7"
1098
- },
1099
- stroke: {
1100
- value: "#0369a1"
1101
- },
1102
- hiContrast: {
1103
- value: "#f0f9ff"
1104
- },
1105
- loContrast: {
1106
- value: "#B6ECF7"
1107
- }
1108
- },
1109
- relation: {
1110
- stroke: {
1111
- DEFAULT: {
1112
- value: "#0ea5e9"
1113
- },
1114
- selected: {
1115
- value: {
1116
- _light: "#0c8cc6",
1117
- _dark: "#56c0f0"
1118
- }
1119
- }
1120
- },
1121
- label: {
1122
- DEFAULT: {
1123
- value: "#38bdf8"
1124
- },
1125
- bg: {
1126
- value: "#082f49"
1127
- }
1128
- }
1129
- }
1130
- },
1131
- sky: {
1132
- element: {
1133
- fill: {
1134
- value: "#0284c7"
1135
- },
1136
- stroke: {
1137
- value: "#0369a1"
1138
- },
1139
- hiContrast: {
1140
- value: "#f0f9ff"
1141
- },
1142
- loContrast: {
1143
- value: "#B6ECF7"
1144
- }
1145
- },
1146
- relation: {
1147
- stroke: {
1148
- DEFAULT: {
1149
- value: "#0ea5e9"
1150
- },
1151
- selected: {
1152
- value: {
1153
- _light: "#0c8cc6",
1154
- _dark: "#56c0f0"
1155
- }
1156
- }
1157
- },
1158
- label: {
1159
- DEFAULT: {
1160
- value: "#38bdf8"
1161
- },
1162
- bg: {
1163
- value: "#082f49"
1164
- }
1165
- }
1166
- }
1167
- },
1168
- compound1: {
1169
- amber: {
1170
- hiContrast: {
1171
- value: "{colors.likec4.amber.element.hiContrast}"
1172
- },
1173
- loContrast: {
1174
- value: "{colors.likec4.amber.element.loContrast}"
1175
- },
1176
- fill: {
1177
- value: {
1178
- _light: "#794524",
1179
- _dark: "#704225"
1180
- }
1181
- },
1182
- stroke: {
1183
- value: {
1184
- _light: "#5e361a",
1185
- _dark: "#56331b"
1186
- }
1187
- }
1188
- },
1189
- blue: {
1190
- hiContrast: {
1191
- value: "{colors.likec4.blue.element.hiContrast}"
1192
- },
1193
- loContrast: {
1194
- value: "{colors.likec4.blue.element.loContrast}"
1195
- },
1196
- fill: {
1197
- value: {
1198
- _light: "#145ed7",
1199
- _dark: "#1a5bc5"
1200
- }
1201
- },
1202
- stroke: {
1203
- value: {
1204
- _light: "#194bb8",
1205
- _dark: "#1e49a9"
1206
- }
1207
- }
1208
- },
1209
- gray: {
1210
- hiContrast: {
1211
- value: "{colors.likec4.gray.element.hiContrast}"
1212
- },
1213
- loContrast: {
1214
- value: "{colors.likec4.gray.element.loContrast}"
1215
- },
1216
- fill: {
1217
- value: {
1218
- _light: "#595959",
1219
- _dark: "#545454"
1220
- }
1221
- },
1222
- stroke: {
1223
- value: {
1224
- _light: "#3f3f3f",
1225
- _dark: "#3c3c3c"
1226
- }
1227
- }
1228
- },
1229
- slate: {
1230
- hiContrast: {
1231
- value: "{colors.likec4.slate.element.hiContrast}"
1232
- },
1233
- loContrast: {
1234
- value: "{colors.likec4.slate.element.loContrast}"
1235
- },
1236
- fill: {
1237
- value: {
1238
- _light: "#4e5a6a",
1239
- _dark: "#4b5563"
1240
- }
1241
- },
1242
- stroke: {
1243
- value: {
1244
- _light: "#384250",
1245
- _dark: "#363e4b"
1246
- }
1247
- }
1248
- },
1249
- green: {
1250
- hiContrast: {
1251
- value: "{colors.likec4.green.element.hiContrast}"
1252
- },
1253
- loContrast: {
1254
- value: "{colors.likec4.green.element.loContrast}"
1255
- },
1256
- fill: {
1257
- value: {
1258
- _light: "#35683e",
1259
- _dark: "#34613c"
1260
- }
1261
- },
1262
- stroke: {
1263
- value: {
1264
- _light: "#24462d",
1265
- _dark: "#24412b"
1266
- }
1267
- }
1268
- },
1269
- indigo: {
1270
- hiContrast: {
1271
- value: "{colors.likec4.indigo.element.hiContrast}"
1272
- },
1273
- loContrast: {
1274
- value: "{colors.likec4.indigo.element.loContrast}"
1275
- },
1276
- fill: {
1277
- value: {
1278
- _light: "#2529e1",
1279
- _dark: "#2529d3"
1280
- }
1281
- },
1282
- stroke: {
1283
- value: {
1284
- _light: "#2d24c2",
1285
- _dark: "#3028b2"
1286
- }
1287
- }
1288
- },
1289
- muted: {
1290
- hiContrast: {
1291
- value: "{colors.likec4.muted.element.hiContrast}"
1292
- },
1293
- loContrast: {
1294
- value: "{colors.likec4.muted.element.loContrast}"
1295
- },
1296
- fill: {
1297
- value: {
1298
- _light: "#4e5a6a",
1299
- _dark: "#4b5563"
1300
- }
1301
- },
1302
- stroke: {
1303
- value: {
1304
- _light: "#384250",
1305
- _dark: "#363e4b"
1306
- }
1307
- }
1308
- },
1309
- primary: {
1310
- hiContrast: {
1311
- value: "{colors.likec4.primary.element.hiContrast}"
1312
- },
1313
- loContrast: {
1314
- value: "{colors.likec4.primary.element.loContrast}"
1315
- },
1316
- fill: {
1317
- value: {
1318
- _light: "#145ed7",
1319
- _dark: "#1a5bc5"
1320
- }
1321
- },
1322
- stroke: {
1323
- value: {
1324
- _light: "#194bb8",
1325
- _dark: "#1e49a9"
1326
- }
1327
- }
1328
- },
1329
- red: {
1330
- hiContrast: {
1331
- value: "{colors.likec4.red.element.hiContrast}"
1332
- },
1333
- loContrast: {
1334
- value: "{colors.likec4.red.element.loContrast}"
1335
- },
1336
- fill: {
1337
- value: {
1338
- _light: "#803e30",
1339
- _dark: "#773d30"
1340
- }
1341
- },
1342
- stroke: {
1343
- value: {
1344
- _light: "#632f26",
1345
- _dark: "#5c2e26"
1346
- }
1347
- }
1348
- },
1349
- secondary: {
1350
- hiContrast: {
1351
- value: "{colors.likec4.secondary.element.hiContrast}"
1352
- },
1353
- loContrast: {
1354
- value: "{colors.likec4.secondary.element.loContrast}"
1355
- },
1356
- fill: {
1357
- value: {
1358
- _light: "#086392",
1359
- _dark: "#0d5d86"
1360
- }
1361
- },
1362
- stroke: {
1363
- value: {
1364
- _light: "#084f76",
1365
- _dark: "#0b4a6c"
1366
- }
1367
- }
1368
- },
1369
- sky: {
1370
- hiContrast: {
1371
- value: "{colors.likec4.sky.element.hiContrast}"
1372
- },
1373
- loContrast: {
1374
- value: "{colors.likec4.sky.element.loContrast}"
1375
- },
1376
- fill: {
1377
- value: {
1378
- _light: "#086392",
1379
- _dark: "#0d5d86"
1380
- }
1381
- },
1382
- stroke: {
1383
- value: {
1384
- _light: "#084f76",
1385
- _dark: "#0b4a6c"
1386
- }
1387
- }
1388
- }
1389
- },
1390
- compound2: {
1391
- amber: {
1392
- hiContrast: {
1393
- value: "{colors.likec4.amber.element.hiContrast}"
1394
- },
1395
- loContrast: {
1396
- value: "{colors.likec4.amber.element.loContrast}"
1397
- },
1398
- fill: {
1399
- value: {
1400
- _light: "#724325",
1401
- _dark: "#663e25"
1402
- }
1403
- },
1404
- stroke: {
1405
- value: {
1406
- _light: "#58341b",
1407
- _dark: "#4e301b"
1408
- }
1409
- }
1410
- },
1411
- blue: {
1412
- hiContrast: {
1413
- value: "{colors.likec4.blue.element.hiContrast}"
1414
- },
1415
- loContrast: {
1416
- value: "{colors.likec4.blue.element.loContrast}"
1417
- },
1418
- fill: {
1419
- value: {
1420
- _light: "#195cc8",
1421
- _dark: "#1e56b1"
1422
- }
1423
- },
1424
- stroke: {
1425
- value: {
1426
- _light: "#1d4aac",
1427
- _dark: "#204698"
1428
- }
1429
- }
1430
- },
1431
- gray: {
1432
- hiContrast: {
1433
- value: "{colors.likec4.gray.element.hiContrast}"
1434
- },
1435
- loContrast: {
1436
- value: "{colors.likec4.gray.element.loContrast}"
1437
- },
1438
- fill: {
1439
- value: {
1440
- _light: "#555555",
1441
- _dark: "#4e4e4e"
1442
- }
1443
- },
1444
- stroke: {
1445
- value: {
1446
- _light: "#3d3d3d",
1447
- _dark: "#383838"
1448
- }
1449
- }
1450
- },
1451
- slate: {
1452
- hiContrast: {
1453
- value: "{colors.likec4.slate.element.hiContrast}"
1454
- },
1455
- loContrast: {
1456
- value: "{colors.likec4.slate.element.loContrast}"
1457
- },
1458
- fill: {
1459
- value: {
1460
- _light: "#4c5665",
1461
- _dark: "#474f5c"
1462
- }
1463
- },
1464
- stroke: {
1465
- value: {
1466
- _light: "#363f4c",
1467
- _dark: "#333a45"
1468
- }
1469
- }
1470
- },
1471
- green: {
1472
- hiContrast: {
1473
- value: "{colors.likec4.green.element.hiContrast}"
1474
- },
1475
- loContrast: {
1476
- value: "{colors.likec4.green.element.loContrast}"
1477
- },
1478
- fill: {
1479
- value: {
1480
- _light: "#35623d",
1481
- _dark: "#325839"
1482
- }
1483
- },
1484
- stroke: {
1485
- value: {
1486
- _light: "#24422c",
1487
- _dark: "#223c29"
1488
- }
1489
- }
1490
- },
1491
- indigo: {
1492
- hiContrast: {
1493
- value: "{colors.likec4.indigo.element.hiContrast}"
1494
- },
1495
- loContrast: {
1496
- value: "{colors.likec4.indigo.element.loContrast}"
1497
- },
1498
- fill: {
1499
- value: {
1500
- _light: "#2428d7",
1501
- _dark: "#282bbf"
1502
- }
1503
- },
1504
- stroke: {
1505
- value: {
1506
- _light: "#3028b5",
1507
- _dark: "#312aa1"
1508
- }
1509
- }
1510
- },
1511
- muted: {
1512
- hiContrast: {
1513
- value: "{colors.likec4.muted.element.hiContrast}"
1514
- },
1515
- loContrast: {
1516
- value: "{colors.likec4.muted.element.loContrast}"
1517
- },
1518
- fill: {
1519
- value: {
1520
- _light: "#4c5665",
1521
- _dark: "#474f5c"
1522
- }
1523
- },
1524
- stroke: {
1525
- value: {
1526
- _light: "#363f4c",
1527
- _dark: "#333a45"
1528
- }
1529
- }
1530
- },
1531
- primary: {
1532
- hiContrast: {
1533
- value: "{colors.likec4.primary.element.hiContrast}"
1534
- },
1535
- loContrast: {
1536
- value: "{colors.likec4.primary.element.loContrast}"
1537
- },
1538
- fill: {
1539
- value: {
1540
- _light: "#195cc8",
1541
- _dark: "#1e56b1"
1542
- }
1543
- },
1544
- stroke: {
1545
- value: {
1546
- _light: "#1d4aac",
1547
- _dark: "#204698"
1548
- }
1549
- }
1550
- },
1551
- red: {
1552
- hiContrast: {
1553
- value: "{colors.likec4.red.element.hiContrast}"
1554
- },
1555
- loContrast: {
1556
- value: "{colors.likec4.red.element.loContrast}"
1557
- },
1558
- fill: {
1559
- value: {
1560
- _light: "#793d31",
1561
- _dark: "#6c3a2f"
1562
- }
1563
- },
1564
- stroke: {
1565
- value: {
1566
- _light: "#5e2e26",
1567
- _dark: "#542c25"
1568
- }
1569
- }
1570
- },
1571
- secondary: {
1572
- hiContrast: {
1573
- value: "{colors.likec4.secondary.element.hiContrast}"
1574
- },
1575
- loContrast: {
1576
- value: "{colors.likec4.secondary.element.loContrast}"
1577
- },
1578
- fill: {
1579
- value: {
1580
- _light: "#0c5e88",
1581
- _dark: "#105579"
1582
- }
1583
- },
1584
- stroke: {
1585
- value: {
1586
- _light: "#0b4b6e",
1587
- _dark: "#0e4462"
1588
- }
1589
- }
1590
- },
1591
- sky: {
1592
- hiContrast: {
1593
- value: "{colors.likec4.sky.element.hiContrast}"
1594
- },
1595
- loContrast: {
1596
- value: "{colors.likec4.sky.element.loContrast}"
1597
- },
1598
- fill: {
1599
- value: {
1600
- _light: "#0c5e88",
1601
- _dark: "#105579"
1602
- }
1603
- },
1604
- stroke: {
1605
- value: {
1606
- _light: "#0b4b6e",
1607
- _dark: "#0e4462"
1608
- }
1609
- }
1610
- }
1611
- },
1612
- compound3: {
1613
- amber: {
1614
- hiContrast: {
1615
- value: "{colors.likec4.amber.element.hiContrast}"
1616
- },
1617
- loContrast: {
1618
- value: "{colors.likec4.amber.element.loContrast}"
1619
- },
1620
- fill: {
1621
- value: {
1622
- _light: "#6b4126",
1623
- _dark: "#5c3a25"
1624
- }
1625
- },
1626
- stroke: {
1627
- value: {
1628
- _light: "#52321c",
1629
- _dark: "#472d1b"
1630
- }
1631
- }
1632
- },
1633
- blue: {
1634
- hiContrast: {
1635
- value: "{colors.likec4.blue.element.hiContrast}"
1636
- },
1637
- loContrast: {
1638
- value: "{colors.likec4.blue.element.loContrast}"
1639
- },
1640
- fill: {
1641
- value: {
1642
- _light: "#1e59ba",
1643
- _dark: "#21519f"
1644
- }
1645
- },
1646
- stroke: {
1647
- value: {
1648
- _light: "#2149a0",
1649
- _dark: "#224289"
1650
- }
1651
- }
1652
- },
1653
- gray: {
1654
- hiContrast: {
1655
- value: "{colors.likec4.gray.element.hiContrast}"
1656
- },
1657
- loContrast: {
1658
- value: "{colors.likec4.gray.element.loContrast}"
1659
- },
1660
- fill: {
1661
- value: {
1662
- _light: "#525252",
1663
- _dark: "#484848"
1664
- }
1665
- },
1666
- stroke: {
1667
- value: {
1668
- _light: "#3a3a3a",
1669
- _dark: "#343434"
1670
- }
1671
- }
1672
- },
1673
- slate: {
1674
- hiContrast: {
1675
- value: "{colors.likec4.slate.element.hiContrast}"
1676
- },
1677
- loContrast: {
1678
- value: "{colors.likec4.slate.element.loContrast}"
1679
- },
1680
- fill: {
1681
- value: {
1682
- _light: "#4a5360",
1683
- _dark: "#424a54"
1684
- }
1685
- },
1686
- stroke: {
1687
- value: {
1688
- _light: "#353d48",
1689
- _dark: "#30363f"
1690
- }
1691
- }
1692
- },
1693
- green: {
1694
- hiContrast: {
1695
- value: "{colors.likec4.green.element.hiContrast}"
1696
- },
1697
- loContrast: {
1698
- value: "{colors.likec4.green.element.loContrast}"
1699
- },
1700
- fill: {
1701
- value: {
1702
- _light: "#345d3c",
1703
- _dark: "#305136"
1704
- }
1705
- },
1706
- stroke: {
1707
- value: {
1708
- _light: "#243e2a",
1709
- _dark: "#213626"
1710
- }
1711
- }
1712
- },
1713
- indigo: {
1714
- hiContrast: {
1715
- value: "{colors.likec4.indigo.element.hiContrast}"
1716
- },
1717
- loContrast: {
1718
- value: "{colors.likec4.indigo.element.loContrast}"
1719
- },
1720
- fill: {
1721
- value: {
1722
- _light: "#292cc8",
1723
- _dark: "#2b2dac"
1724
- }
1725
- },
1726
- stroke: {
1727
- value: {
1728
- _light: "#322ba9",
1729
- _dark: "#312b91"
1730
- }
1731
- }
1732
- },
1733
- muted: {
1734
- hiContrast: {
1735
- value: "{colors.likec4.muted.element.hiContrast}"
1736
- },
1737
- loContrast: {
1738
- value: "{colors.likec4.muted.element.loContrast}"
1739
- },
1740
- fill: {
1741
- value: {
1742
- _light: "#4a5360",
1743
- _dark: "#424a54"
1744
- }
1745
- },
1746
- stroke: {
1747
- value: {
1748
- _light: "#353d48",
1749
- _dark: "#30363f"
1750
- }
1751
- }
1752
- },
1753
- primary: {
1754
- hiContrast: {
1755
- value: "{colors.likec4.primary.element.hiContrast}"
1756
- },
1757
- loContrast: {
1758
- value: "{colors.likec4.primary.element.loContrast}"
1759
- },
1760
- fill: {
1761
- value: {
1762
- _light: "#1e59ba",
1763
- _dark: "#21519f"
1764
- }
1765
- },
1766
- stroke: {
1767
- value: {
1768
- _light: "#2149a0",
1769
- _dark: "#224289"
1770
- }
1771
- }
1772
- },
1773
- red: {
1774
- hiContrast: {
1775
- value: "{colors.likec4.red.element.hiContrast}"
1776
- },
1777
- loContrast: {
1778
- value: "{colors.likec4.red.element.loContrast}"
1779
- },
1780
- fill: {
1781
- value: {
1782
- _light: "#723c31",
1783
- _dark: "#62372e"
1784
- }
1785
- },
1786
- stroke: {
1787
- value: {
1788
- _light: "#582e27",
1789
- _dark: "#4c2a24"
1790
- }
1791
- }
1792
- },
1793
- secondary: {
1794
- hiContrast: {
1795
- value: "{colors.likec4.secondary.element.hiContrast}"
1796
- },
1797
- loContrast: {
1798
- value: "{colors.likec4.secondary.element.loContrast}"
1799
- },
1800
- fill: {
1801
- value: {
1802
- _light: "#10597f",
1803
- _dark: "#134e6c"
1804
- }
1805
- },
1806
- stroke: {
1807
- value: {
1808
- _light: "#0e4767",
1809
- _dark: "#103e57"
1810
- }
1811
- }
1812
- },
1813
- sky: {
1814
- hiContrast: {
1815
- value: "{colors.likec4.sky.element.hiContrast}"
1816
- },
1817
- loContrast: {
1818
- value: "{colors.likec4.sky.element.loContrast}"
1819
- },
1820
- fill: {
1821
- value: {
1822
- _light: "#10597f",
1823
- _dark: "#134e6c"
1824
- }
1825
- },
1826
- stroke: {
1827
- value: {
1828
- _light: "#0e4767",
1829
- _dark: "#103e57"
1830
- }
1831
- }
1832
- }
1833
- },
1834
- compound4: {
1835
- amber: {
1836
- hiContrast: {
1837
- value: "{colors.likec4.amber.element.hiContrast}"
1838
- },
1839
- loContrast: {
1840
- value: "{colors.likec4.amber.element.loContrast}"
1841
- },
1842
- fill: {
1843
- value: {
1844
- _light: "#643e27",
1845
- _dark: "#533624"
1846
- }
1847
- },
1848
- stroke: {
1849
- value: {
1850
- _light: "#4d301d",
1851
- _dark: "#402a1a"
1852
- }
1853
- }
1854
- },
1855
- blue: {
1856
- hiContrast: {
1857
- value: "{colors.likec4.blue.element.hiContrast}"
1858
- },
1859
- loContrast: {
1860
- value: "{colors.likec4.blue.element.loContrast}"
1861
- },
1862
- fill: {
1863
- value: {
1864
- _light: "#2357ad",
1865
- _dark: "#234c8e"
1866
- }
1867
- },
1868
- stroke: {
1869
- value: {
1870
- _light: "#244795",
1871
- _dark: "#243f7a"
1872
- }
1873
- }
1874
- },
1875
- gray: {
1876
- hiContrast: {
1877
- value: "{colors.likec4.gray.element.hiContrast}"
1878
- },
1879
- loContrast: {
1880
- value: "{colors.likec4.gray.element.loContrast}"
1881
- },
1882
- fill: {
1883
- value: {
1884
- _light: "#4e4e4e",
1885
- _dark: "#434343"
1886
- }
1887
- },
1888
- stroke: {
1889
- value: {
1890
- _light: "#383838",
1891
- _dark: "#303030"
1892
- }
1893
- }
1894
- },
1895
- slate: {
1896
- hiContrast: {
1897
- value: "{colors.likec4.slate.element.hiContrast}"
1898
- },
1899
- loContrast: {
1900
- value: "{colors.likec4.slate.element.loContrast}"
1901
- },
1902
- fill: {
1903
- value: {
1904
- _light: "#48505b",
1905
- _dark: "#3e444d"
1906
- }
1907
- },
1908
- stroke: {
1909
- value: {
1910
- _light: "#333a44",
1911
- _dark: "#2d323a"
1912
- }
1913
- }
1914
- },
1915
- green: {
1916
- hiContrast: {
1917
- value: "{colors.likec4.green.element.hiContrast}"
1918
- },
1919
- loContrast: {
1920
- value: "{colors.likec4.green.element.loContrast}"
1921
- },
1922
- fill: {
1923
- value: {
1924
- _light: "#33573a",
1925
- _dark: "#2d4932"
1926
- }
1927
- },
1928
- stroke: {
1929
- value: {
1930
- _light: "#233b29",
1931
- _dark: "#1f3123"
1932
- }
1933
- }
1934
- },
1935
- indigo: {
1936
- hiContrast: {
1937
- value: "{colors.likec4.indigo.element.hiContrast}"
1938
- },
1939
- loContrast: {
1940
- value: "{colors.likec4.indigo.element.loContrast}"
1941
- },
1942
- fill: {
1943
- value: {
1944
- _light: "#2d30ba",
1945
- _dark: "#2c2f99"
1946
- }
1947
- },
1948
- stroke: {
1949
- value: {
1950
- _light: "#342e9e",
1951
- _dark: "#302c82"
1952
- }
1953
- }
1954
- },
1955
- muted: {
1956
- hiContrast: {
1957
- value: "{colors.likec4.muted.element.hiContrast}"
1958
- },
1959
- loContrast: {
1960
- value: "{colors.likec4.muted.element.loContrast}"
1961
- },
1962
- fill: {
1963
- value: {
1964
- _light: "#48505b",
1965
- _dark: "#3e444d"
1966
- }
1967
- },
1968
- stroke: {
1969
- value: {
1970
- _light: "#333a44",
1971
- _dark: "#2d323a"
1972
- }
1973
- }
1974
- },
1975
- primary: {
1976
- hiContrast: {
1977
- value: "{colors.likec4.primary.element.hiContrast}"
1978
- },
1979
- loContrast: {
1980
- value: "{colors.likec4.primary.element.loContrast}"
1981
- },
1982
- fill: {
1983
- value: {
1984
- _light: "#2357ad",
1985
- _dark: "#234c8e"
1986
- }
1987
- },
1988
- stroke: {
1989
- value: {
1990
- _light: "#244795",
1991
- _dark: "#243f7a"
1992
- }
1993
- }
1994
- },
1995
- red: {
1996
- hiContrast: {
1997
- value: "{colors.likec4.red.element.hiContrast}"
1998
- },
1999
- loContrast: {
2000
- value: "{colors.likec4.red.element.loContrast}"
2001
- },
2002
- fill: {
2003
- value: {
2004
- _light: "#6a3b31",
2005
- _dark: "#58342c"
2006
- }
2007
- },
2008
- stroke: {
2009
- value: {
2010
- _light: "#522d27",
2011
- _dark: "#442823"
2012
- }
2013
- }
2014
- },
2015
- secondary: {
2016
- hiContrast: {
2017
- value: "{colors.likec4.secondary.element.hiContrast}"
2018
- },
2019
- loContrast: {
2020
- value: "{colors.likec4.secondary.element.loContrast}"
2021
- },
2022
- fill: {
2023
- value: {
2024
- _light: "#135475",
2025
- _dark: "#154660"
2026
- }
2027
- },
2028
- stroke: {
2029
- value: {
2030
- _light: "#11435f",
2031
- _dark: "#11384e"
2032
- }
2033
- }
2034
- },
2035
- sky: {
2036
- hiContrast: {
2037
- value: "{colors.likec4.sky.element.hiContrast}"
2038
- },
2039
- loContrast: {
2040
- value: "{colors.likec4.sky.element.loContrast}"
2041
- },
2042
- fill: {
2043
- value: {
2044
- _light: "#135475",
2045
- _dark: "#154660"
2046
- }
2047
- },
2048
- stroke: {
2049
- value: {
2050
- _light: "#11435f",
2051
- _dark: "#11384e"
2052
- }
2053
- }
2054
- }
2055
- },
2056
- compound5: {
2057
- amber: {
2058
- hiContrast: {
2059
- value: "{colors.likec4.amber.element.hiContrast}"
2060
- },
2061
- loContrast: {
2062
- value: "{colors.likec4.amber.element.loContrast}"
2063
- },
2064
- fill: {
2065
- value: {
2066
- _light: "#5d3c28",
2067
- _dark: "#493223"
2068
- }
2069
- },
2070
- stroke: {
2071
- value: {
2072
- _light: "#472f1d",
2073
- _dark: "#38261a"
2074
- }
2075
- }
2076
- },
2077
- blue: {
2078
- hiContrast: {
2079
- value: "{colors.likec4.blue.element.hiContrast}"
2080
- },
2081
- loContrast: {
2082
- value: "{colors.likec4.blue.element.loContrast}"
2083
- },
2084
- fill: {
2085
- value: {
2086
- _light: "#2755a0",
2087
- _dark: "#25467d"
2088
- }
2089
- },
2090
- stroke: {
2091
- value: {
2092
- _light: "#27468a",
2093
- _dark: "#243b6c"
2094
- }
2095
- }
2096
- },
2097
- gray: {
2098
- hiContrast: {
2099
- value: "{colors.likec4.gray.element.hiContrast}"
2100
- },
2101
- loContrast: {
2102
- value: "{colors.likec4.gray.element.loContrast}"
2103
- },
2104
- fill: {
2105
- value: {
2106
- _light: "#4b4b4b",
2107
- _dark: "#3d3d3d"
2108
- }
2109
- },
2110
- stroke: {
2111
- value: {
2112
- _light: "#353535",
2113
- _dark: "#2b2b2b"
2114
- }
2115
- }
2116
- },
2117
- slate: {
2118
- hiContrast: {
2119
- value: "{colors.likec4.slate.element.hiContrast}"
2120
- },
2121
- loContrast: {
2122
- value: "{colors.likec4.slate.element.loContrast}"
2123
- },
2124
- fill: {
2125
- value: {
2126
- _light: "#454c56",
2127
- _dark: "#393e46"
2128
- }
2129
- },
2130
- stroke: {
2131
- value: {
2132
- _light: "#323841",
2133
- _dark: "#292e34"
2134
- }
2135
- }
2136
- },
2137
- green: {
2138
- hiContrast: {
2139
- value: "{colors.likec4.green.element.hiContrast}"
2140
- },
2141
- loContrast: {
2142
- value: "{colors.likec4.green.element.loContrast}"
2143
- },
2144
- fill: {
2145
- value: {
2146
- _light: "#335238",
2147
- _dark: "#2b422f"
2148
- }
2149
- },
2150
- stroke: {
2151
- value: {
2152
- _light: "#223728",
2153
- _dark: "#1d2c21"
2154
- }
2155
- }
2156
- },
2157
- indigo: {
2158
- hiContrast: {
2159
- value: "{colors.likec4.indigo.element.hiContrast}"
2160
- },
2161
- loContrast: {
2162
- value: "{colors.likec4.indigo.element.loContrast}"
2163
- },
2164
- fill: {
2165
- value: {
2166
- _light: "#3133ac",
2167
- _dark: "#2d2f87"
2168
- }
2169
- },
2170
- stroke: {
2171
- value: {
2172
- _light: "#363092",
2173
- _dark: "#2f2b73"
2174
- }
2175
- }
2176
- },
2177
- muted: {
2178
- hiContrast: {
2179
- value: "{colors.likec4.muted.element.hiContrast}"
2180
- },
2181
- loContrast: {
2182
- value: "{colors.likec4.muted.element.loContrast}"
2183
- },
2184
- fill: {
2185
- value: {
2186
- _light: "#454c56",
2187
- _dark: "#393e46"
2188
- }
2189
- },
2190
- stroke: {
2191
- value: {
2192
- _light: "#323841",
2193
- _dark: "#292e34"
2194
- }
2195
- }
2196
- },
2197
- primary: {
2198
- hiContrast: {
2199
- value: "{colors.likec4.primary.element.hiContrast}"
2200
- },
2201
- loContrast: {
2202
- value: "{colors.likec4.primary.element.loContrast}"
2203
- },
2204
- fill: {
2205
- value: {
2206
- _light: "#2755a0",
2207
- _dark: "#25467d"
2208
- }
2209
- },
2210
- stroke: {
2211
- value: {
2212
- _light: "#27468a",
2213
- _dark: "#243b6c"
2214
- }
2215
- }
2216
- },
2217
- red: {
2218
- hiContrast: {
2219
- value: "{colors.likec4.red.element.hiContrast}"
2220
- },
2221
- loContrast: {
2222
- value: "{colors.likec4.red.element.loContrast}"
2223
- },
2224
- fill: {
2225
- value: {
2226
- _light: "#633a31",
2227
- _dark: "#4f312a"
2228
- }
2229
- },
2230
- stroke: {
2231
- value: {
2232
- _light: "#4d2c27",
2233
- _dark: "#3d2521"
2234
- }
2235
- }
2236
- },
2237
- secondary: {
2238
- hiContrast: {
2239
- value: "{colors.likec4.secondary.element.hiContrast}"
2240
- },
2241
- loContrast: {
2242
- value: "{colors.likec4.secondary.element.loContrast}"
2243
- },
2244
- fill: {
2245
- value: {
2246
- _light: "#164f6c",
2247
- _dark: "#163f55"
2248
- }
2249
- },
2250
- stroke: {
2251
- value: {
2252
- _light: "#133f58",
2253
- _dark: "#123345"
2254
- }
2255
- }
2256
- },
2257
- sky: {
2258
- hiContrast: {
2259
- value: "{colors.likec4.sky.element.hiContrast}"
2260
- },
2261
- loContrast: {
2262
- value: "{colors.likec4.sky.element.loContrast}"
2263
- },
2264
- fill: {
2265
- value: {
2266
- _light: "#164f6c",
2267
- _dark: "#163f55"
2268
- }
2269
- },
2270
- stroke: {
2271
- value: {
2272
- _light: "#133f58",
2273
- _dark: "#123345"
2274
- }
2275
- }
2276
- }
2277
- }
2278
- }
2279
- }
2280
- }
2281
- };
4
+ type ExtendableTheme = NonNullable<Config['theme']>;
5
+ declare const theme: ExtendableTheme;
2282
6
 
2283
- const conditions = {
2284
- extend: {
2285
- light: '[data-mantine-color-scheme="light"] &',
2286
- dark: '[data-mantine-color-scheme="dark"] &',
2287
- // This is used to hide certain elements when the diagram is in reduced graphics mode (large)
2288
- reduceGraphics: [
2289
- ".likec4-root:is([data-likec4-reduced-graphics])",
2290
- " &"
2291
- ].join(""),
2292
- // This is used to improve performance when the diagram is in reduced graphics mode
2293
- // and the user is panning around the diagram
2294
- reduceGraphicsOnPan: [
2295
- ".likec4-root:is(",
2296
- "[data-likec4-reduced-graphics]",
2297
- "[data-likec4-diagram-panning]",
2298
- ") &"
2299
- ].join(""),
2300
- noReduceGraphics: [
2301
- ".likec4-root:not(",
2302
- "[data-likec4-reduced-graphics]",
2303
- ") &"
2304
- ].join(""),
2305
- whenPanning: ":is(.likec4-root[data-likec4-diagram-panning]) &",
2306
- smallZoom: ":where([data-likec4-zoom-small]) &",
2307
- compoundTransparent: ":where([data-compound-transparent]) &",
2308
- edgeActive: ':where([data-likec4-edge-active="true"]) &',
2309
- whenHovered: ':where([data-likec4-hovered="true"]) &',
2310
- whenSelected: ":where(.react-flow__node.selected, .react-flow__edge.selected) &",
2311
- whenDimmed: ":where([data-likec4-dimmed]) &",
2312
- whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &",
2313
- // likec4Color: ':where([data-likec4-color]) &',
2314
- ...conditions$1
2315
- }
2316
- };
7
+ declare const _default: _pandacss_dev.Preset;
2317
8
 
2318
- const actionBtn = defineRecipe({
2319
- className: "action-btn",
2320
- description: "The styles for the Action Buttons",
2321
- base: {
2322
- pointerEvents: "all",
2323
- cursor: "pointer",
2324
- color: "var(--actionbtn-color)",
2325
- opacity: 0.75,
2326
- "--actionbtn-color": "{colors.likec4.palette.loContrast}",
2327
- "--actionbtn-color-hovered": "{colors.likec4.palette.loContrast}",
2328
- "--actionbtn-color-hovered-btn": "{colors.likec4.palette.hiContrast}",
2329
- "--actionbtn-bg-idle": `color-mix(in srgb , {colors.likec4.palette.fill}, transparent 99%)`,
2330
- "--actionbtn-bg-hovered": `color-mix(in srgb , {colors.likec4.palette.fill} 65%, {colors.likec4.palette.stroke})`,
2331
- "--actionbtn-bg-hovered-btn": `color-mix(in srgb , {colors.likec4.palette.fill} 50%, {colors.likec4.palette.stroke})`,
2332
- "--ai-bg": `var(--actionbtn-bg-idle)`,
2333
- background: `var(--ai-bg)`,
2334
- _whenHovered: {
2335
- opacity: 1,
2336
- color: "var(--actionbtn-color-hovered)",
2337
- "--ai-bg": `var(--actionbtn-bg-hovered)`
2338
- },
2339
- _hover: {
2340
- opacity: 1,
2341
- color: "var(--actionbtn-color-hovered-btn)",
2342
- "--ai-bg": `var(--actionbtn-bg-hovered-btn)`
2343
- },
2344
- _reduceGraphicsOnPan: {
2345
- display: "none"
2346
- },
2347
- _smallZoom: {
2348
- display: "none"
2349
- },
2350
- "& *": {
2351
- pointerEvents: "none"
2352
- }
2353
- },
2354
- variants: {
2355
- variant: {
2356
- transparent: {
2357
- "--actionbtn-bg-hovered": `var(--actionbtn-bg-idle)`
2358
- },
2359
- filled: {
2360
- boxShadow: {
2361
- base: "1px 1px 3px 0px transparent",
2362
- _whenHovered: "1px 1px 3px 0px rgba(0, 0, 0, 0.2)",
2363
- _reduceGraphics: "none"
2364
- }
2365
- }
2366
- },
2367
- size: {
2368
- sm: {
2369
- ["--ai-size"]: `var(--ai-size-sm)`
2370
- },
2371
- md: {
2372
- ["--ai-size"]: `var(--ai-size-md)`
2373
- }
2374
- },
2375
- radius: {
2376
- sm: { "--ai-radius": `var(--mantine-radius-sm)` },
2377
- md: { "--ai-radius": `var(--mantine-radius-md)` }
2378
- }
2379
- },
2380
- defaultVariants: {
2381
- size: "md",
2382
- radius: "md",
2383
- variant: "filled"
2384
- },
2385
- staticCss: [{
2386
- size: ["md"],
2387
- radius: ["md"],
2388
- variant: ["*"],
2389
- conditions: ["whenHovered", "hover", "reducedGraphics"]
2390
- }]
2391
- });
2392
-
2393
- const semanticTokens = defineSemanticTokens({
2394
- fontSizes: {
2395
- likec4: {
2396
- textSize: {
2397
- description: "LikeC4 text size",
2398
- value: "{fontSizes.likec4.md}"
2399
- }
2400
- }
2401
- },
2402
- colors: {
2403
- likec4: {
2404
- mixColor: {
2405
- description: "Color to be used in color-mix",
2406
- value: {
2407
- _dark: "white",
2408
- _light: "black"
2409
- }
2410
- },
2411
- palette: {
2412
- DEFAULT: { value: `var(--likec4-palette,'likec4.primary')` },
2413
- fill: { value: "{colors.likec4.primary.element.fill}" },
2414
- stroke: { value: "{colors.likec4.primary.element.stroke}" },
2415
- hiContrast: { value: "{colors.likec4.primary.element.hiContrast}" },
2416
- loContrast: { value: "{colors.likec4.primary.element.loContrast}" }
2417
- },
2418
- relation: {
2419
- stroke: {
2420
- DEFAULT: { value: "{colors.likec4.gray.relation.stroke}" },
2421
- selected: { value: "{colors.likec4.gray.relation.stroke.selected}" }
2422
- },
2423
- label: {
2424
- DEFAULT: { value: "{colors.likec4.gray.relation.label}" },
2425
- bg: { value: "{colors.likec4.gray.relation.label.bg}" }
2426
- }
2427
- }
2428
- }
2429
- }
2430
- });
2431
-
2432
- const textStyles = defineTextStyles({
2433
- likec4: {
2434
- node: {
2435
- primary: {
2436
- description: "Primary text, usually a title or name",
2437
- value: {
2438
- fontFamily: "var(--likec4-element-font, {fonts.likec4})",
2439
- fontWeight: "500",
2440
- fontSize: "[var(--likec4-text-size)]",
2441
- lineHeight: "1.15",
2442
- textWrap: "balance",
2443
- whiteSpace: "preserve-breaks"
2444
- }
2445
- },
2446
- secondary: {
2447
- description: "Secondary text, usually a description or technology",
2448
- value: {
2449
- fontFamily: "var(--likec4-element-font, {fonts.likec4})",
2450
- fontWeight: "400",
2451
- fontSize: `[calc(var(--likec4-text-size) * 0.74)]`,
2452
- lineHeight: "1.2",
2453
- textWrap: "pretty",
2454
- whiteSpace: "preserve-breaks"
2455
- }
2456
- }
2457
- }
2458
- }
2459
- });
2460
-
2461
- const tokens = defineTokens({
2462
- lineHeights: {
2463
- "1": {
2464
- value: "1"
2465
- }
2466
- },
2467
- borders: {
2468
- none: { value: "none" },
2469
- transparent: { value: "0px solid transparent" },
2470
- default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
2471
- },
2472
- spacing: {
2473
- "0": {
2474
- value: "0px"
2475
- },
2476
- "2": {
2477
- value: "2px"
2478
- },
2479
- "4": {
2480
- value: "4px"
2481
- },
2482
- "micro": {
2483
- value: "4px"
2484
- },
2485
- "2xs": {
2486
- value: "8px"
2487
- },
2488
- "8": {
2489
- value: "8px"
2490
- }
2491
- },
2492
- colors: {
2493
- // For typesafety, otherwise wrap with []
2494
- transparent: { value: "transparent" }
2495
- },
2496
- fonts: {
2497
- body: {
2498
- value: "var(--likec4-app-font, var(--likec4-app-font-default))"
2499
- },
2500
- likec4: {
2501
- DEFAULT: {
2502
- value: "var(--likec4-app-font, var(--likec4-app-font-default))"
2503
- },
2504
- element: {
2505
- value: "var(--likec4-element-font, {fonts.likec4})"
2506
- },
2507
- compound: {
2508
- value: "var(--likec4-compound-font, {fonts.likec4})"
2509
- },
2510
- relation: {
2511
- value: "var(--likec4-relation-font, {fonts.likec4})"
2512
- }
2513
- }
2514
- },
2515
- easings: {
2516
- default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
2517
- in: { value: "cubic-bezier(0.4, 0, 1, 1)" },
2518
- out: { value: "cubic-bezier(0, 0, 0.40, 1)" },
2519
- inOut: { value: "cubic-bezier(0.50, 0, 0.2, 1)" }
2520
- },
2521
- durations: {
2522
- fastest: { value: "50ms" },
2523
- faster: { value: "100ms" },
2524
- fast: { value: "130ms" },
2525
- normal: { value: "170ms" },
2526
- slow: { value: "300ms" },
2527
- slower: { value: "400ms" },
2528
- slowest: { value: "500ms" }
2529
- }
2530
- });
2531
-
2532
- const theme = {
2533
- ...theme$1,
2534
- extend: {
2535
- textStyles,
2536
- tokens,
2537
- semanticTokens,
2538
- recipes: {
2539
- actionBtn
2540
- },
2541
- keyframes: {
2542
- "indicatorStrokeOpacity": {
2543
- "0%": {
2544
- strokeOpacity: 0.8
2545
- },
2546
- "100%": {
2547
- strokeOpacity: 0.4
2548
- }
2549
- },
2550
- "xyedgeAnimated": {
2551
- "0%": {
2552
- strokeDashoffset: 18 * 2 + 10
2553
- },
2554
- "100%": {
2555
- strokeDashoffset: 10
2556
- }
2557
- }
2558
- },
2559
- animationStyles: {
2560
- "indicator": {
2561
- value: {
2562
- animationDuration: "1s",
2563
- animationIterationCount: "infinite",
2564
- animationDirection: "alternate",
2565
- animationName: "indicatorStrokeOpacity"
2566
- }
2567
- },
2568
- "xyedgeAnimated": {
2569
- value: {
2570
- animationDuration: "800ms",
2571
- animationIterationCount: "infinite",
2572
- animationTimingFunction: "linear",
2573
- animationFillMode: "both",
2574
- animationName: "xyedgeAnimated"
2575
- }
2576
- }
2577
- }
2578
- }
2579
- };
2580
-
2581
- const colorPaletteValues = [
2582
- ...themeColors,
2583
- ...compoundColors
2584
- ];
2585
- const likec4Palette = defineUtility({
2586
- values: colorPaletteValues,
2587
- className: "likec4-palette",
2588
- // @ts-expect-error
2589
- property: "--likec4-palette",
2590
- transform(value, { token }) {
2591
- if (!colorPaletteValues.includes(value)) {
2592
- throw new Error(`Invalid value "${value}" for likec4ColorPalette`);
2593
- }
2594
- const [color, depth] = value.split(".");
2595
- if (depth) {
2596
- return {
2597
- ["--likec4-palette"]: `'likec4.compound${depth}.${color}'`,
2598
- ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.compound${depth}.${color}.hiContrast`),
2599
- ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.compound${depth}.${color}.loContrast`),
2600
- ["--colors-likec4-palette-fill"]: token(`colors.likec4.compound${depth}.${color}.fill`),
2601
- ["--colors-likec4-palette-stroke"]: token(`colors.likec4.compound${depth}.${color}.stroke`)
2602
- };
2603
- } else {
2604
- return {
2605
- ["--likec4-palette"]: `'likec4.${color}'`,
2606
- ["--colors-likec4-palette-fill"]: token(`colors.likec4.${color}.element.fill`),
2607
- ["--colors-likec4-palette-stroke"]: token(`colors.likec4.${color}.element.stroke`),
2608
- ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.${color}.element.hiContrast`),
2609
- ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.${color}.element.loContrast`)
2610
- };
2611
- }
2612
- }
2613
- });
2614
- const likec4RelationPalette = defineUtility({
2615
- values: themeColors,
2616
- className: "likec4-relation-color",
2617
- transform(value, { token, raw }) {
2618
- if (!themeColors.includes(value)) {
2619
- console.log("raw", raw);
2620
- throw new Error(`Invalid value "${value}" for likec4RelationPalette`);
2621
- }
2622
- return {
2623
- ["--likec4-palette"]: `'likec4.${value}'`,
2624
- ["--colors-likec4-relation-stroke"]: token(`colors.likec4.${value}.relation.stroke`),
2625
- ["--colors-likec4-relation-stroke-selected"]: token(`colors.likec4.${value}.relation.stroke.selected`),
2626
- ["--colors-likec4-relation-label"]: token(`colors.likec4.${value}.relation.label`),
2627
- ["--colors-likec4-relation-label-bg"]: token(`colors.likec4.${value}.relation.label.bg`)
2628
- };
2629
- }
2630
- });
2631
-
2632
- const root = ".likec4-root";
2633
- const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
2634
- const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
2635
- var index = definePreset({
2636
- name: "likec4",
2637
- // Whether to use css reset
2638
- // presets: [
2639
- // PandaPreset as any,
2640
- // ],
2641
- globalVars: {
2642
- "--likec4-palette": {
2643
- syntax: "*",
2644
- inherits: false,
2645
- initialValue: `'likec4.primary'`
2646
- },
2647
- "--likec4-text-size": {
2648
- syntax: "<length-percentage>",
2649
- inherits: false,
2650
- initialValue: "1rem"
2651
- },
2652
- "--likec4-spacing": {
2653
- syntax: "<length-percentage>",
2654
- inherits: false,
2655
- initialValue: "1rem"
2656
- }
2657
- // '--xy-edge-stroke': {},
2658
- },
2659
- globalCss: {
2660
- // '@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))': {
2661
- // // TODO: this workaround disables animations in Safari (to improve performance)
2662
- // ['--likec4-safari-animation-hook']: ' ',
2663
- // },
2664
- ":where(:host, :root)": {
2665
- ["--likec4-app-font-default"]: `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`
2666
- },
2667
- ".likec4-shadow-root": {
2668
- display: "contents",
2669
- "--mantine-font-family": "var(--likec4-app-font-default)",
2670
- "--mantine-font-family-headings": "var(--likec4-app-font-default)"
2671
- },
2672
- [`${root}`]: {
2673
- overflow: "hidden",
2674
- position: "relative",
2675
- width: "100%",
2676
- height: "100%",
2677
- padding: 0,
2678
- margin: 0,
2679
- boxSizing: "border-box",
2680
- border: "0px solid transparent"
2681
- // ['--likec4-app-font-default']:
2682
- // `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`,
2683
- // ['--mantine-font-family']: 'var(--likec4-app-font-default)',
2684
- },
2685
- [`${root} .react-flow:is(.not-initialized)`]: {
2686
- opacity: 0
2687
- },
2688
- [`:where(${root} .mantine-ActionIcon-icon) .tabler-icon`]: {
2689
- width: "75%",
2690
- height: "75%"
2691
- },
2692
- [`${root} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
2693
- opacity: 0.25
2694
- },
2695
- [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
2696
- filter: "auto",
2697
- grayscale: 0.85,
2698
- blur: "3px"
2699
- },
2700
- [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed="true"])`]: {
2701
- transitionProperty: "opacity, filter",
2702
- transitionTimingFunction: "{easings.inOut}",
2703
- transitionDuration: "800ms",
2704
- transitionDelay: "200ms"
2705
- },
2706
- [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
2707
- mixBlendMode: "plus-lighter"
2708
- },
2709
- [`[data-mantine-color-scheme="light"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
2710
- mixBlendMode: "screen"
2711
- },
2712
- ...globalCss
2713
- },
2714
- staticCss: {
2715
- extend: {
2716
- themes: ["light", "dark"],
2717
- css: [{
2718
- properties: {
2719
- color: [
2720
- "likec4.palette.hiContrast",
2721
- "likec4.palette.loContrast"
2722
- ],
2723
- likec4Palette: [...themeColors, ...compoundColors],
2724
- likec4RelationPalette: themeColors
2725
- }
2726
- }]
2727
- }
2728
- },
2729
- conditions,
2730
- utilities: {
2731
- extend: {
2732
- transition: {
2733
- values: ["fast"],
2734
- className: "transition-fast",
2735
- transform(value, { token }) {
2736
- if (value !== "fast") {
2737
- return {
2738
- transition: value
2739
- };
2740
- }
2741
- return {
2742
- transition: `all ${token("durations.fast")} ${token("easings.inOut")}`
2743
- };
2744
- }
2745
- },
2746
- likec4Palette,
2747
- likec4RelationPalette
2748
- }
2749
- },
2750
- theme
2751
- });
2752
-
2753
- export { index as default };
9
+ export { _default as default, theme };