@compose-market/theme 0.1.9 → 0.1.11

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.
@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { cx } from "../internal/cx";
3
3
  export const mirrorStyles = /* css */ `
4
4
  .cm-mirror-pane {
5
- container-type: inline-size;
5
+ container-name: cm-mirror;
6
+ container-type: size;
6
7
  display: flex;
7
8
  flex-direction: column;
8
9
  width: 100%;
@@ -105,16 +106,20 @@ export const mirrorStyles = /* css */ `
105
106
  }
106
107
 
107
108
  .cm-mirror-pane__body {
108
- --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);
109
+ --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
110
+ --cm-mirror-gap: clamp(0.36rem, 1.25cqi, 0.6rem);
111
+ --cm-mirror-pad: clamp(0.4rem, 1.25cqi, 0.6rem);
112
+ --cm-mirror-cell-min: clamp(1.82rem, 4.4cqb, 2.45rem);
113
+ --cm-mirror-option-min: clamp(1.55rem, 3.8cqb, 2rem);
109
114
  flex: 1 1 auto;
110
115
  display: grid;
111
116
  grid-template-rows: auto minmax(0, 1fr);
112
117
  align-content: stretch;
113
- gap: clamp(0.42rem, 1.45cqi, 0.68rem);
118
+ gap: clamp(0.42rem, 1.6cqi, 0.72rem);
114
119
  min-width: 0;
115
120
  min-height: 0;
116
121
  overflow: hidden;
117
- padding: clamp(0.52rem, 1.65cqi, 0.78rem);
122
+ padding: clamp(0.52rem, 1.7cqi, 0.82rem);
118
123
  }
119
124
 
120
125
  .cm-mirror-pane__header {
@@ -225,9 +230,8 @@ export const mirrorStyles = /* css */ `
225
230
  gap: 0.24rem;
226
231
  min-width: 0;
227
232
  max-width: 100%;
228
- min-height: 1.32rem;
229
- max-height: 1.32rem;
230
- padding: 0 0.42rem;
233
+ min-height: clamp(1.22rem, 3.4cqi, 1.38rem);
234
+ padding: 0 clamp(0.34rem, 1.1cqi, 0.46rem);
231
235
  border: 1px solid hsl(var(--accent) / 0.24);
232
236
  border-radius: 999px;
233
237
  background: hsl(var(--accent) / 0.1);
@@ -285,18 +289,28 @@ export const mirrorStyles = /* css */ `
285
289
 
286
290
  .cm-mirror-pane__content {
287
291
  display: grid;
292
+ grid-template-rows: minmax(0, 1fr);
293
+ align-items: stretch;
294
+ height: 100%;
288
295
  min-width: 0;
289
296
  min-height: 0;
290
297
  overflow: hidden;
291
298
  }
292
299
 
300
+ .cm-mirror-pane__body > .cm-mirror-pane__content:first-child:last-child {
301
+ grid-row: 1 / -1;
302
+ }
303
+
293
304
  .cm-mirror-pane__details,
294
305
  .cm-mirror-pane__custom-content {
295
306
  display: grid;
296
- gap: clamp(0.38rem, 1.25cqi, 0.58rem);
307
+ grid-auto-rows: minmax(min-content, 1fr);
308
+ gap: var(--cm-mirror-gap);
309
+ height: 100%;
297
310
  min-width: 0;
298
311
  min-height: 0;
299
- align-content: start;
312
+ align-content: stretch;
313
+ align-items: stretch;
300
314
  overflow: hidden;
301
315
  }
302
316
 
@@ -307,7 +321,8 @@ export const mirrorStyles = /* css */ `
307
321
  .cm-mirror-pane__tool-group,
308
322
  .cm-mirror-pane__no-params,
309
323
  .cm-mirror-pane__text-area,
310
- .cm-mirror-pane__field {
324
+ .cm-mirror-pane__field,
325
+ .cm-mirror-pane__option {
311
326
  border: 1px solid hsl(var(--primary) / 0.12);
312
327
  border-radius: 12px;
313
328
  background: hsl(221 50% 9% / 0.3);
@@ -333,24 +348,28 @@ export const mirrorStyles = /* css */ `
333
348
 
334
349
  .cm-mirror-pane__section {
335
350
  display: grid;
336
- grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);
337
- grid-template-rows: minmax(2.25rem, auto);
338
- align-items: center;
339
- gap: 0.4rem;
351
+ grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
352
+ grid-template-rows: auto;
353
+ align-items: stretch;
354
+ gap: clamp(0.34rem, 1.1cqi, 0.5rem);
340
355
  min-width: 0;
341
356
  min-height: 0;
342
357
  overflow: hidden;
358
+ box-shadow:
359
+ inset 0 1px 0 hsl(0 0% 100% / 0.035),
360
+ 0 0 18px hsl(var(--primary) / 0.035);
343
361
  }
344
362
 
345
363
  .cm-mirror-pane__section--compact {
346
- padding: clamp(0.42rem, 1.25cqi, 0.58rem);
364
+ padding: var(--cm-mirror-pad);
347
365
  }
348
366
 
349
367
  .cm-mirror-pane__section-label,
350
368
  .cm-mirror-pane__tool-group-label {
351
369
  display: inline-flex;
352
370
  align-items: center;
353
- justify-content: center;
371
+ justify-content: flex-start;
372
+ align-self: center;
354
373
  min-width: 0;
355
374
  color: hsl(var(--muted-foreground));
356
375
  font-family: var(--font-mono), monospace;
@@ -369,10 +388,56 @@ export const mirrorStyles = /* css */ `
369
388
  letter-spacing: 0;
370
389
  }
371
390
 
372
- .cm-mirror-pane__section--io {
373
- grid-template-columns: repeat(2, minmax(0, 1fr));
374
- gap: 0.44rem;
375
- align-items: stretch;
391
+ .cm-mirror-pane__section--capability {
392
+ border-color: hsl(var(--primary) / 0.22);
393
+ background:
394
+ linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 42%),
395
+ hsl(221 50% 9% / 0.3);
396
+ }
397
+
398
+ .cm-mirror-pane__section--context {
399
+ border-color: hsl(142 71% 45% / 0.18);
400
+ background:
401
+ linear-gradient(135deg, hsl(142 71% 45% / 0.08), transparent 44%),
402
+ hsl(221 50% 9% / 0.28);
403
+ }
404
+
405
+ .cm-mirror-pane__section--pricing {
406
+ border-color: hsl(var(--accent) / 0.2);
407
+ background:
408
+ linear-gradient(135deg, hsl(var(--accent) / 0.09), transparent 44%),
409
+ hsl(221 50% 9% / 0.3);
410
+ }
411
+
412
+ .cm-mirror-pane__section--custom,
413
+ .cm-mirror-pane__section--param {
414
+ border-color: hsl(var(--primary) / 0.16);
415
+ background:
416
+ linear-gradient(135deg, hsl(var(--primary) / 0.065), hsl(var(--accent) / 0.045)),
417
+ hsl(221 50% 9% / 0.3);
418
+ }
419
+
420
+ .cm-mirror-pane__section--capability .cm-mirror-pane__section-label {
421
+ color: hsl(var(--primary));
422
+ }
423
+
424
+ .cm-mirror-pane__section--context .cm-mirror-pane__section-label {
425
+ color: hsl(142 71% 58%);
426
+ }
427
+
428
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__section-label {
429
+ color: hsl(var(--accent));
430
+ }
431
+
432
+ .cm-mirror-pane__section--custom,
433
+ .cm-mirror-pane__section--param {
434
+ align-items: start;
435
+ }
436
+
437
+ .cm-mirror-pane__section--custom > .cm-mirror-pane__section-label,
438
+ .cm-mirror-pane__section--param > .cm-mirror-pane__section-label {
439
+ align-self: start;
440
+ padding-top: clamp(0.42rem, 1.25cqb, 0.64rem);
376
441
  }
377
442
 
378
443
  .cm-mirror-pane__io-row,
@@ -380,14 +445,14 @@ export const mirrorStyles = /* css */ `
380
445
  .cm-mirror-pane__pricing-header,
381
446
  .cm-mirror-pane__tool-toggle {
382
447
  min-width: 0;
383
- min-height: 1.8rem;
448
+ min-height: 0;
384
449
  }
385
450
 
386
451
  .cm-mirror-pane__io-row {
387
452
  display: grid;
388
- grid-template-columns: 1.55rem minmax(0, 1fr);
453
+ grid-template-columns: auto minmax(0, 1fr);
389
454
  align-items: center;
390
- gap: 0.42rem;
455
+ gap: clamp(0.34rem, 1.05cqi, 0.46rem);
391
456
  min-width: 0;
392
457
  }
393
458
 
@@ -410,7 +475,7 @@ export const mirrorStyles = /* css */ `
410
475
  display: flex;
411
476
  align-items: center;
412
477
  justify-content: flex-start;
413
- gap: 0.28rem;
478
+ gap: clamp(0.2rem, 0.8cqi, 0.3rem);
414
479
  min-width: 0;
415
480
  flex-wrap: wrap;
416
481
  }
@@ -423,9 +488,9 @@ export const mirrorStyles = /* css */ `
423
488
  display: inline-flex;
424
489
  align-items: center;
425
490
  justify-content: center;
426
- width: 1.22rem;
427
- height: 1.22rem;
428
- min-width: 1.22rem;
491
+ width: clamp(1.32rem, 3.8cqi, 1.5rem);
492
+ height: clamp(1.32rem, 3.8cqi, 1.5rem);
493
+ min-width: clamp(1.32rem, 3.8cqi, 1.5rem);
429
494
  border: 1px solid hsl(var(--primary) / 0.22);
430
495
  border-radius: 999px;
431
496
  background: hsl(var(--primary) / 0.08);
@@ -433,32 +498,32 @@ export const mirrorStyles = /* css */ `
433
498
  }
434
499
 
435
500
  .cm-mirror-pane__icon-label--section {
436
- width: 1.62rem;
437
- height: 1.62rem;
438
- min-width: 1.62rem;
501
+ width: clamp(1.58rem, 4.6cqi, 1.78rem);
502
+ height: clamp(1.58rem, 4.6cqi, 1.78rem);
503
+ min-width: clamp(1.58rem, 4.6cqi, 1.78rem);
439
504
  border-color: hsl(var(--primary) / 0.32);
440
505
  background: hsl(var(--primary) / 0.1);
441
506
  }
442
507
 
443
508
  .cm-mirror-pane__icon-svg {
444
- width: 0.72rem;
445
- height: 0.72rem;
509
+ width: clamp(0.78rem, 2.25cqi, 0.9rem);
510
+ height: clamp(0.78rem, 2.25cqi, 0.9rem);
446
511
  }
447
512
 
448
513
  .cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {
449
- width: 0.98rem;
450
- height: 0.98rem;
514
+ width: clamp(0.96rem, 2.85cqi, 1.08rem);
515
+ height: clamp(0.96rem, 2.85cqi, 1.08rem);
451
516
  }
452
517
 
453
- .cm-mirror-pane__badge {
518
+ .cm-mirror-pane__badge,
519
+ .cm-mirror-pane__format-badge {
454
520
  display: inline-grid;
455
521
  grid-template-columns: auto minmax(0, 1fr);
456
522
  align-items: center;
457
523
  justify-content: center;
458
524
  gap: 0.24rem;
459
525
  min-width: 0;
460
- min-height: 1.36rem;
461
- max-height: 1.36rem;
526
+ min-height: clamp(1.2rem, 3.2cqi, 1.36rem);
462
527
  max-width: 100%;
463
528
  border: 1px solid hsl(var(--primary) / 0.18);
464
529
  border-radius: 999px;
@@ -476,6 +541,15 @@ export const mirrorStyles = /* css */ `
476
541
  text-overflow: ellipsis;
477
542
  }
478
543
 
544
+ .cm-mirror-pane__format-badge {
545
+ grid-template-columns: auto;
546
+ width: clamp(1.34rem, 3.65cqi, 1.48rem);
547
+ min-width: clamp(1.34rem, 3.65cqi, 1.48rem);
548
+ min-height: clamp(1.34rem, 3.65cqi, 1.48rem);
549
+ padding: 0;
550
+ border-radius: 999px;
551
+ }
552
+
479
553
  .cm-mirror-pane__badge > span:last-child {
480
554
  min-width: 0;
481
555
  overflow: hidden;
@@ -484,18 +558,20 @@ export const mirrorStyles = /* css */ `
484
558
  }
485
559
 
486
560
  .cm-mirror-pane__format-icon {
487
- width: 0.72rem;
488
- height: 0.72rem;
561
+ width: clamp(0.64rem, 1.85cqi, 0.74rem);
562
+ height: clamp(0.64rem, 1.85cqi, 0.74rem);
489
563
  flex: 0 0 auto;
490
564
  }
491
565
 
492
- .cm-mirror-pane__badge[data-tone="fuchsia"] {
566
+ .cm-mirror-pane__badge[data-tone="fuchsia"],
567
+ .cm-mirror-pane__format-badge[data-tone="fuchsia"] {
493
568
  border-color: hsl(var(--accent) / 0.24);
494
569
  background: hsl(var(--accent) / 0.1);
495
570
  color: hsl(var(--accent));
496
571
  }
497
572
 
498
- .cm-mirror-pane__badge[data-tone="green"] {
573
+ .cm-mirror-pane__badge[data-tone="green"],
574
+ .cm-mirror-pane__format-badge[data-tone="green"] {
499
575
  border-color: hsl(142 71% 45% / 0.28);
500
576
  background: hsl(142 71% 45% / 0.1);
501
577
  color: hsl(142 71% 55%);
@@ -514,28 +590,35 @@ export const mirrorStyles = /* css */ `
514
590
  }
515
591
 
516
592
  .cm-mirror-pane__kv-grid,
517
- .cm-mirror-pane__pricing-entries {
593
+ .cm-mirror-pane__pricing-entries,
594
+ .cm-mirror-pane__lane-grid {
518
595
  display: grid;
519
596
  grid-template-columns: repeat(2, minmax(0, 1fr));
520
- grid-auto-rows: minmax(1.58rem, auto);
521
- gap: 0.24rem;
597
+ grid-auto-rows: minmax(0, 1fr);
598
+ gap: clamp(0.22rem, 0.8cqi, 0.34rem);
599
+ height: 100%;
522
600
  min-width: 0;
523
601
  min-height: 0;
524
- align-content: start;
602
+ align-content: stretch;
603
+ align-items: stretch;
525
604
  }
526
605
 
527
606
  .cm-mirror-pane__kv-row,
607
+ .cm-mirror-pane__io-row,
528
608
  .cm-mirror-pane__pricing-header {
529
609
  display: grid;
530
610
  grid-template-columns: auto minmax(0, 1fr);
531
611
  align-items: center;
532
- gap: 0.38rem;
612
+ gap: clamp(0.34rem, 1.05cqi, 0.48rem);
533
613
  min-width: 0;
534
- min-height: 2.05rem;
535
- padding: 0.34rem 0.46rem;
614
+ min-height: var(--cm-mirror-cell-min);
615
+ height: 100%;
616
+ padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
536
617
  border: 1px solid hsl(var(--primary) / 0.11);
537
618
  border-radius: 999px;
538
- background: hsl(221 50% 9% / 0.34);
619
+ background:
620
+ linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
621
+ hsl(221 50% 9% / 0.36);
539
622
  }
540
623
 
541
624
  .cm-mirror-pane__kv-value {
@@ -577,7 +660,9 @@ export const mirrorStyles = /* css */ `
577
660
  .cm-mirror-pane__pricing-block,
578
661
  .cm-mirror-pane__tool-group {
579
662
  display: grid;
580
- gap: 0.28rem;
663
+ grid-template-rows: minmax(0, 1fr) auto;
664
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
665
+ height: 100%;
581
666
  min-width: 0;
582
667
  min-height: 0;
583
668
  }
@@ -588,12 +673,13 @@ export const mirrorStyles = /* css */ `
588
673
 
589
674
  .cm-mirror-pane__pricing-block,
590
675
  .cm-mirror-pane__tool-group {
591
- padding: 0.5rem 0.58rem;
676
+ padding: clamp(0.42rem, 1.2cqi, 0.58rem);
592
677
  }
593
678
 
594
679
  .cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,
595
- .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {
596
- gap: 0.22rem;
680
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries,
681
+ .cm-mirror-pane__section--capability .cm-mirror-pane__lane-grid {
682
+ gap: clamp(0.22rem, 0.78cqi, 0.32rem);
597
683
  }
598
684
 
599
685
  .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
@@ -672,33 +758,106 @@ export const mirrorStyles = /* css */ `
672
758
  display: grid;
673
759
  grid-template-columns: minmax(0, 1fr) auto;
674
760
  align-items: center;
675
- gap: 0.58rem;
761
+ gap: clamp(0.36rem, 1.05cqi, 0.58rem);
676
762
  }
677
763
 
678
764
  .cm-mirror-pane__custom-section {
679
765
  display: grid;
680
- gap: 0.42rem;
766
+ gap: clamp(0.34rem, 1cqi, 0.46rem);
681
767
  min-width: 0;
682
768
  }
683
769
 
770
+ .cm-mirror-pane__param-body {
771
+ display: grid;
772
+ grid-template-rows: minmax(0, auto) auto;
773
+ align-content: start;
774
+ gap: clamp(0.28rem, 0.95cqi, 0.42rem);
775
+ height: 100%;
776
+ min-width: 0;
777
+ min-height: 0;
778
+ }
779
+
684
780
  .cm-mirror-pane__text-area {
685
781
  width: 100%;
686
- min-height: 7rem;
687
- padding: 0.72rem;
782
+ height: 100%;
783
+ min-height: 0;
784
+ max-height: none;
785
+ padding: clamp(0.54rem, 1.5cqi, 0.72rem);
688
786
  color: hsl(var(--foreground));
689
787
  font-family: var(--font-mono), monospace;
690
788
  font-size: 0.86rem;
691
- resize: vertical;
789
+ resize: none;
692
790
  }
693
791
 
694
792
  .cm-mirror-pane__field {
695
793
  width: 100%;
696
- min-height: 2.45rem;
794
+ min-height: clamp(2.05rem, 5.4cqi, 2.45rem);
697
795
  color: hsl(var(--foreground));
698
796
  font-family: var(--font-mono), monospace;
699
797
  font-size: 0.86rem;
700
798
  }
701
799
 
800
+ .cm-mirror-pane__option-grid {
801
+ display: grid;
802
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
803
+ grid-auto-rows: minmax(var(--cm-mirror-option-min), auto);
804
+ align-items: stretch;
805
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
806
+ width: 100%;
807
+ min-width: 0;
808
+ min-height: 0;
809
+ }
810
+
811
+ .cm-mirror-pane__option {
812
+ display: inline-flex;
813
+ align-items: center;
814
+ justify-content: center;
815
+ min-width: 0;
816
+ min-height: var(--cm-mirror-option-min);
817
+ height: 100%;
818
+ padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
819
+ color: hsl(var(--muted-foreground));
820
+ cursor: pointer;
821
+ font-family: var(--font-mono), monospace;
822
+ font-size: 0.72rem;
823
+ font-weight: 800;
824
+ letter-spacing: 0.05em;
825
+ line-height: 1;
826
+ text-transform: uppercase;
827
+ transition:
828
+ border-color 160ms ease,
829
+ background-color 160ms ease,
830
+ color 160ms ease,
831
+ box-shadow 160ms ease;
832
+ }
833
+
834
+ .cm-mirror-pane__option[data-active="true"] {
835
+ border-color: hsl(var(--primary) / 0.34);
836
+ background: hsl(var(--primary) / 0.12);
837
+ color: hsl(var(--primary));
838
+ box-shadow: 0 0 14px hsl(var(--primary) / 0.1);
839
+ }
840
+
841
+ .cm-mirror-pane__option:hover,
842
+ .cm-mirror-pane__option:focus-visible {
843
+ outline: none;
844
+ border-color: hsl(var(--primary) / 0.3);
845
+ color: hsl(var(--foreground));
846
+ }
847
+
848
+ .cm-mirror-pane__option .cm-hint,
849
+ .cm-mirror-pane__option .cm-hint__trigger {
850
+ max-width: 100%;
851
+ min-width: 0;
852
+ }
853
+
854
+ .cm-mirror-pane__option span {
855
+ min-width: 0;
856
+ overflow: hidden;
857
+ text-overflow: ellipsis;
858
+ white-space: nowrap;
859
+ }
860
+
702
861
  .cm-mirror-pane__field:focus,
703
862
  .cm-mirror-pane__field:focus-visible,
704
863
  .cm-mirror-pane__text-area:focus,
@@ -716,6 +875,16 @@ export const mirrorStyles = /* css */ `
716
875
  line-height: 1.4;
717
876
  }
718
877
 
878
+ .cm-mirror-pane__param-description,
879
+ .cm-mirror-pane__param-description .cm-excerpt,
880
+ .cm-mirror-pane__param-description .cm-excerpt__trigger,
881
+ .cm-mirror-pane__param-description .cm-excerpt__text,
882
+ .cm-mirror-pane__param-description .cm-hint,
883
+ .cm-mirror-pane__param-description .cm-hint__trigger {
884
+ width: 100%;
885
+ min-width: 0;
886
+ }
887
+
719
888
  .cm-mirror-pane__no-params {
720
889
  padding: 1rem;
721
890
  text-align: center;
@@ -723,12 +892,12 @@ export const mirrorStyles = /* css */ `
723
892
 
724
893
  @container (max-width: 28rem) {
725
894
  .cm-mirror-pane__body {
726
- gap: 0.54rem;
727
- padding: 0.62rem;
895
+ gap: clamp(0.38rem, 1.35cqi, 0.54rem);
896
+ padding: clamp(0.48rem, 1.45cqi, 0.62rem);
728
897
  }
729
898
 
730
- .cm-mirror-pane__section--io {
731
- grid-template-columns: minmax(0, 1fr);
899
+ .cm-mirror-pane__section {
900
+ grid-template-columns: clamp(4.55rem, 21cqi, 5.45rem) minmax(0, 1fr);
732
901
  }
733
902
 
734
903
  .cm-mirror-pane__io-badges {
@@ -736,6 +905,83 @@ export const mirrorStyles = /* css */ `
736
905
  }
737
906
  }
738
907
 
908
+ @container cm-mirror (max-height: 44rem) {
909
+ .cm-mirror-pane__body {
910
+ --cm-mirror-gap: clamp(0.28rem, 1cqi, 0.48rem);
911
+ --cm-mirror-pad: clamp(0.32rem, 1cqi, 0.5rem);
912
+ --cm-mirror-cell-min: clamp(1.62rem, 4cqb, 2.1rem);
913
+ --cm-mirror-option-min: clamp(1.42rem, 3.4cqb, 1.82rem);
914
+ }
915
+
916
+ .cm-mirror-pane__toolbar {
917
+ min-height: 2.6rem;
918
+ padding-block: 0.28rem;
919
+ }
920
+
921
+ .cm-mirror-pane__body {
922
+ gap: var(--cm-mirror-gap);
923
+ padding: clamp(0.42rem, 1.35cqi, 0.64rem);
924
+ }
925
+
926
+ .cm-mirror-pane__description {
927
+ padding: clamp(0.38rem, 1.1cqi, 0.52rem);
928
+ line-height: 1.26;
929
+ }
930
+
931
+ .cm-mirror-pane__section--compact {
932
+ padding: var(--cm-mirror-pad);
933
+ }
934
+ }
935
+
936
+ @container cm-mirror (max-height: 34rem) {
937
+ .cm-mirror-pane__body {
938
+ --cm-mirror-gap: 0.26rem;
939
+ --cm-mirror-pad: 0.32rem;
940
+ --cm-mirror-cell-min: 1.48rem;
941
+ --cm-mirror-option-min: 1.36rem;
942
+ }
943
+
944
+ .cm-mirror-pane__toolbar {
945
+ min-height: 2.25rem;
946
+ }
947
+
948
+ .cm-mirror-pane__toolbar-btn {
949
+ min-width: 1.85rem;
950
+ min-height: 1.85rem;
951
+ padding-inline: 0.46rem;
952
+ }
953
+
954
+ .cm-mirror-pane__body {
955
+ gap: 0.3rem;
956
+ padding: 0.38rem;
957
+ }
958
+
959
+ .cm-mirror-pane__header {
960
+ gap: 0.48rem;
961
+ }
962
+
963
+ .cm-mirror-pane__description {
964
+ font-size: 0.78rem;
965
+ line-height: 1.2;
966
+ padding: 0.34rem 0.42rem;
967
+ }
968
+
969
+ .cm-mirror-pane__section-label,
970
+ .cm-mirror-pane__tool-group-label,
971
+ .cm-mirror-pane__kv-value,
972
+ .cm-mirror-pane__field,
973
+ .cm-mirror-pane__text-area,
974
+ .cm-mirror-pane__param-description,
975
+ .cm-mirror-pane__no-params {
976
+ font-size: 0.74rem;
977
+ }
978
+
979
+ .cm-mirror-pane__option {
980
+ font-size: 0.66rem;
981
+ padding-inline: 0.38rem;
982
+ }
983
+ }
984
+
739
985
  @container (max-width: 22rem) {
740
986
  .cm-mirror-pane__model-icon-box {
741
987
  display: none;
@@ -745,6 +991,21 @@ export const mirrorStyles = /* css */ `
745
991
  grid-template-columns: minmax(0, 1fr);
746
992
  }
747
993
 
994
+ .cm-mirror-pane__section {
995
+ grid-template-columns: minmax(0, 1fr);
996
+ align-items: start;
997
+ }
998
+
999
+ .cm-mirror-pane__section-label {
1000
+ margin-bottom: -0.1rem;
1001
+ }
1002
+
1003
+ .cm-mirror-pane__kv-grid,
1004
+ .cm-mirror-pane__pricing-entries,
1005
+ .cm-mirror-pane__lane-grid {
1006
+ grid-template-columns: minmax(0, 1fr);
1007
+ }
1008
+
748
1009
  .cm-mirror-pane__tool-toggle {
749
1010
  grid-template-columns: minmax(0, 1fr);
750
1011
  align-items: start;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compose-market/theme",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "description": "Official design tokens and theme system for Compose.Market",
5
5
  "keywords": [
6
6
  "design-tokens",