@interstellarforge/matter-css 0.1.0 → 0.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.
- package/dist/matter.css +216 -6
- package/package.json +2 -2
package/dist/matter.css
CHANGED
|
@@ -375,6 +375,161 @@
|
|
|
375
375
|
--m-warning: #ffa24d;
|
|
376
376
|
--m-warning-soft: #3a2812;
|
|
377
377
|
}
|
|
378
|
+
:root[data-theme="pulsar"] {
|
|
379
|
+
color-scheme: light;
|
|
380
|
+
--m-control-radius: 12px;
|
|
381
|
+
--m-accent: #613ce3;
|
|
382
|
+
--m-accent-hover: #4f2cc8;
|
|
383
|
+
--m-accent-on: #ffffff;
|
|
384
|
+
--m-accent-soft: #ece8fc;
|
|
385
|
+
--m-accent-soft-on: #4a28b4;
|
|
386
|
+
--m-bg: #f8f8fc;
|
|
387
|
+
--m-border: #ddd9ee;
|
|
388
|
+
--m-border-strong: #8f85b8;
|
|
389
|
+
--m-danger: #b22342;
|
|
390
|
+
--m-danger-soft: #fce8ed;
|
|
391
|
+
--m-focus: #613ce3;
|
|
392
|
+
--m-focus-halo: #ffffff;
|
|
393
|
+
--m-info: #155bad;
|
|
394
|
+
--m-info-soft: #e2efff;
|
|
395
|
+
--m-overlay: rgba(26, 24, 53, 0.54);
|
|
396
|
+
--m-placeholder: #766d92;
|
|
397
|
+
--m-primary: #613ce3;
|
|
398
|
+
--m-primary-hover: #4f2cc8;
|
|
399
|
+
--m-primary-on: #ffffff;
|
|
400
|
+
--m-shadow-lg: 0px 24px 64px 0px rgb(10.2% 9.41% 20.78% / 0.18);
|
|
401
|
+
--m-shadow-md: 0px 8px 28px 0px rgb(10.2% 9.41% 20.78% / 0.1);
|
|
402
|
+
--m-shadow-sm: 0px 1px 3px 0px rgb(10.2% 9.41% 20.78% / 0.07);
|
|
403
|
+
--m-sidebar: #fcfcfd;
|
|
404
|
+
--m-success: #086f50;
|
|
405
|
+
--m-success-soft: #ddf6eb;
|
|
406
|
+
--m-surface: #fcfcfd;
|
|
407
|
+
--m-surface-disabled: #eeedf5;
|
|
408
|
+
--m-surface-hover: #e8e5f7;
|
|
409
|
+
--m-surface-raised: #ffffff;
|
|
410
|
+
--m-surface-soft: #f1f0f9;
|
|
411
|
+
--m-text: #1a1835;
|
|
412
|
+
--m-text-muted: #574e71;
|
|
413
|
+
--m-text-subtle: #625a7d;
|
|
414
|
+
--m-warning: #865200;
|
|
415
|
+
--m-warning-soft: #fff0d6;
|
|
416
|
+
}
|
|
417
|
+
@media (prefers-color-scheme: dark) {
|
|
418
|
+
:root[data-theme="pulsar"]:not([data-color-mode="light"]) {
|
|
419
|
+
color-scheme: dark;
|
|
420
|
+
--m-accent: #5aa9ff;
|
|
421
|
+
--m-accent-hover: #82bbff;
|
|
422
|
+
--m-accent-on: #04152b;
|
|
423
|
+
--m-accent-soft: #12335c;
|
|
424
|
+
--m-accent-soft-on: #cfe4ff;
|
|
425
|
+
--m-bg: #060e1d;
|
|
426
|
+
--m-border: #2a4662;
|
|
427
|
+
--m-border-strong: #4c6a8b;
|
|
428
|
+
--m-danger: #ff8da0;
|
|
429
|
+
--m-danger-soft: #4a1d2c;
|
|
430
|
+
--m-focus: #8fc4ff;
|
|
431
|
+
--m-focus-halo: #060e1d;
|
|
432
|
+
--m-info: #8fc4ff;
|
|
433
|
+
--m-info-soft: #12335c;
|
|
434
|
+
--m-overlay: rgba(0, 5, 13, 0.72);
|
|
435
|
+
--m-placeholder: #9fb3ca;
|
|
436
|
+
--m-primary: #1b6fd9;
|
|
437
|
+
--m-primary-hover: #2a82f0;
|
|
438
|
+
--m-primary-on: #ffffff;
|
|
439
|
+
--m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
|
|
440
|
+
--m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
|
|
441
|
+
--m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
|
|
442
|
+
--m-sidebar: #071322;
|
|
443
|
+
--m-success: #3fe0b0;
|
|
444
|
+
--m-success-soft: #0f3a35;
|
|
445
|
+
--m-surface: #0d1c30;
|
|
446
|
+
--m-surface-disabled: #14233a;
|
|
447
|
+
--m-surface-hover: #17304d;
|
|
448
|
+
--m-surface-raised: #13263d;
|
|
449
|
+
--m-surface-soft: #112238;
|
|
450
|
+
--m-text: #f4f7fc;
|
|
451
|
+
--m-text-muted: #b7c7d9;
|
|
452
|
+
--m-text-subtle: #9fb3ca;
|
|
453
|
+
--m-warning: #ffa24d;
|
|
454
|
+
--m-warning-soft: #3a2812;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
:root[data-theme="pulsar"][data-color-mode="light"] {
|
|
458
|
+
color-scheme: light;
|
|
459
|
+
--m-accent: #613ce3;
|
|
460
|
+
--m-accent-hover: #4f2cc8;
|
|
461
|
+
--m-accent-on: #ffffff;
|
|
462
|
+
--m-accent-soft: #ece8fc;
|
|
463
|
+
--m-accent-soft-on: #4a28b4;
|
|
464
|
+
--m-bg: #f8f8fc;
|
|
465
|
+
--m-border: #ddd9ee;
|
|
466
|
+
--m-border-strong: #8f85b8;
|
|
467
|
+
--m-danger: #b22342;
|
|
468
|
+
--m-danger-soft: #fce8ed;
|
|
469
|
+
--m-focus: #613ce3;
|
|
470
|
+
--m-focus-halo: #ffffff;
|
|
471
|
+
--m-info: #155bad;
|
|
472
|
+
--m-info-soft: #e2efff;
|
|
473
|
+
--m-overlay: rgba(26, 24, 53, 0.54);
|
|
474
|
+
--m-placeholder: #766d92;
|
|
475
|
+
--m-primary: #613ce3;
|
|
476
|
+
--m-primary-hover: #4f2cc8;
|
|
477
|
+
--m-primary-on: #ffffff;
|
|
478
|
+
--m-shadow-lg: 0px 24px 64px 0px rgb(10.2% 9.41% 20.78% / 0.18);
|
|
479
|
+
--m-shadow-md: 0px 8px 28px 0px rgb(10.2% 9.41% 20.78% / 0.1);
|
|
480
|
+
--m-shadow-sm: 0px 1px 3px 0px rgb(10.2% 9.41% 20.78% / 0.07);
|
|
481
|
+
--m-sidebar: #fcfcfd;
|
|
482
|
+
--m-success: #086f50;
|
|
483
|
+
--m-success-soft: #ddf6eb;
|
|
484
|
+
--m-surface: #fcfcfd;
|
|
485
|
+
--m-surface-disabled: #eeedf5;
|
|
486
|
+
--m-surface-hover: #e8e5f7;
|
|
487
|
+
--m-surface-raised: #ffffff;
|
|
488
|
+
--m-surface-soft: #f1f0f9;
|
|
489
|
+
--m-text: #1a1835;
|
|
490
|
+
--m-text-muted: #574e71;
|
|
491
|
+
--m-text-subtle: #625a7d;
|
|
492
|
+
--m-warning: #865200;
|
|
493
|
+
--m-warning-soft: #fff0d6;
|
|
494
|
+
}
|
|
495
|
+
:root[data-theme="pulsar"][data-color-mode="dark"] {
|
|
496
|
+
color-scheme: dark;
|
|
497
|
+
--m-accent: #5aa9ff;
|
|
498
|
+
--m-accent-hover: #82bbff;
|
|
499
|
+
--m-accent-on: #04152b;
|
|
500
|
+
--m-accent-soft: #12335c;
|
|
501
|
+
--m-accent-soft-on: #cfe4ff;
|
|
502
|
+
--m-bg: #060e1d;
|
|
503
|
+
--m-border: #2a4662;
|
|
504
|
+
--m-border-strong: #4c6a8b;
|
|
505
|
+
--m-danger: #ff8da0;
|
|
506
|
+
--m-danger-soft: #4a1d2c;
|
|
507
|
+
--m-focus: #8fc4ff;
|
|
508
|
+
--m-focus-halo: #060e1d;
|
|
509
|
+
--m-info: #8fc4ff;
|
|
510
|
+
--m-info-soft: #12335c;
|
|
511
|
+
--m-overlay: rgba(0, 5, 13, 0.72);
|
|
512
|
+
--m-placeholder: #9fb3ca;
|
|
513
|
+
--m-primary: #1b6fd9;
|
|
514
|
+
--m-primary-hover: #2a82f0;
|
|
515
|
+
--m-primary-on: #ffffff;
|
|
516
|
+
--m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
|
|
517
|
+
--m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
|
|
518
|
+
--m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
|
|
519
|
+
--m-sidebar: #071322;
|
|
520
|
+
--m-success: #3fe0b0;
|
|
521
|
+
--m-success-soft: #0f3a35;
|
|
522
|
+
--m-surface: #0d1c30;
|
|
523
|
+
--m-surface-disabled: #14233a;
|
|
524
|
+
--m-surface-hover: #17304d;
|
|
525
|
+
--m-surface-raised: #13263d;
|
|
526
|
+
--m-surface-soft: #112238;
|
|
527
|
+
--m-text: #f4f7fc;
|
|
528
|
+
--m-text-muted: #b7c7d9;
|
|
529
|
+
--m-text-subtle: #9fb3ca;
|
|
530
|
+
--m-warning: #ffa24d;
|
|
531
|
+
--m-warning-soft: #3a2812;
|
|
532
|
+
}
|
|
378
533
|
}
|
|
379
534
|
@layer matter.components {
|
|
380
535
|
.m-button,
|
|
@@ -469,6 +624,61 @@
|
|
|
469
624
|
.m-input[aria-invalid="true"] {
|
|
470
625
|
border-color: var(--m-danger);
|
|
471
626
|
}
|
|
627
|
+
/* Native select: own chevron so padding matches Input; the picker is styled where base-select is supported. */
|
|
628
|
+
.m-select {
|
|
629
|
+
appearance: none;
|
|
630
|
+
padding-inline-end: calc(var(--m-control-pad-x) * 2 + 8px);
|
|
631
|
+
background-image:
|
|
632
|
+
linear-gradient(45deg, transparent 50%, var(--m-text-muted) 50%),
|
|
633
|
+
linear-gradient(135deg, var(--m-text-muted) 50%, transparent 50%);
|
|
634
|
+
background-position:
|
|
635
|
+
calc(100% - var(--m-control-pad-x) - 5px) 50%,
|
|
636
|
+
calc(100% - var(--m-control-pad-x)) 50%;
|
|
637
|
+
background-size:
|
|
638
|
+
5px 5px,
|
|
639
|
+
5px 5px;
|
|
640
|
+
background-repeat: no-repeat;
|
|
641
|
+
cursor: pointer;
|
|
642
|
+
}
|
|
643
|
+
.m-select:disabled {
|
|
644
|
+
cursor: not-allowed;
|
|
645
|
+
}
|
|
646
|
+
@supports (appearance: base-select) {
|
|
647
|
+
.m-select,
|
|
648
|
+
.m-select::picker(select) {
|
|
649
|
+
appearance: base-select;
|
|
650
|
+
}
|
|
651
|
+
.m-select {
|
|
652
|
+
align-items: center;
|
|
653
|
+
}
|
|
654
|
+
.m-select::picker-icon {
|
|
655
|
+
display: none;
|
|
656
|
+
}
|
|
657
|
+
.m-select::picker(select) {
|
|
658
|
+
margin-block: var(--m-space-1);
|
|
659
|
+
padding: var(--m-space-1);
|
|
660
|
+
border: 1px solid var(--m-border);
|
|
661
|
+
border-radius: var(--m-radius-md);
|
|
662
|
+
background: var(--m-surface-raised);
|
|
663
|
+
box-shadow: var(--m-shadow-md);
|
|
664
|
+
}
|
|
665
|
+
.m-select option {
|
|
666
|
+
padding: var(--m-space-2) var(--m-control-pad-x);
|
|
667
|
+
border-radius: var(--m-radius-sm);
|
|
668
|
+
color: var(--m-text);
|
|
669
|
+
}
|
|
670
|
+
.m-select option:hover,
|
|
671
|
+
.m-select option:focus-visible {
|
|
672
|
+
background: var(--m-surface-hover);
|
|
673
|
+
}
|
|
674
|
+
.m-select option:checked {
|
|
675
|
+
background: var(--m-accent-soft);
|
|
676
|
+
color: var(--m-accent-soft-on);
|
|
677
|
+
}
|
|
678
|
+
.m-select option::checkmark {
|
|
679
|
+
display: none;
|
|
680
|
+
}
|
|
681
|
+
}
|
|
472
682
|
.m-textarea {
|
|
473
683
|
min-height: calc(var(--m-control-h) * 2.5);
|
|
474
684
|
padding-block: var(--m-space-2);
|
|
@@ -728,7 +938,7 @@
|
|
|
728
938
|
|
|
729
939
|
/* Dialog */
|
|
730
940
|
.m-dialog {
|
|
731
|
-
|
|
941
|
+
inline-size: min(32rem, calc(100vw - 2rem));
|
|
732
942
|
padding: 0;
|
|
733
943
|
border: 1px solid var(--m-border);
|
|
734
944
|
border-radius: var(--m-radius-lg);
|
|
@@ -744,22 +954,22 @@
|
|
|
744
954
|
align-items: center;
|
|
745
955
|
justify-content: space-between;
|
|
746
956
|
gap: var(--m-space-4);
|
|
747
|
-
padding: var(--m-space-4) var(--m-space-5);
|
|
748
|
-
border-bottom: 1px solid var(--m-border);
|
|
957
|
+
padding: var(--m-space-4) var(--m-space-4) 0 var(--m-space-5);
|
|
749
958
|
}
|
|
750
959
|
.m-dialog__title {
|
|
960
|
+
flex: 1;
|
|
751
961
|
margin: 0;
|
|
752
962
|
font-size: var(--m-fs-lg);
|
|
753
963
|
}
|
|
754
964
|
.m-dialog__body {
|
|
755
|
-
padding: var(--m-space-5);
|
|
965
|
+
padding: var(--m-space-4) var(--m-space-5);
|
|
966
|
+
color: var(--m-text-muted);
|
|
756
967
|
}
|
|
757
968
|
.m-dialog__footer {
|
|
758
969
|
display: flex;
|
|
759
970
|
justify-content: flex-end;
|
|
760
971
|
gap: var(--m-space-2);
|
|
761
|
-
padding: var(--m-space-
|
|
762
|
-
border-top: 1px solid var(--m-border);
|
|
972
|
+
padding: 0 var(--m-space-5) var(--m-space-5);
|
|
763
973
|
}
|
|
764
974
|
|
|
765
975
|
/* Tooltip */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@interstellarforge/matter-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Matter CSS distribution: token stylesheet and the no-flash theme init script. Framework-agnostic.",
|
|
6
6
|
"repository": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"provenance": true
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@interstellarforge/matter-tokens": "0.
|
|
29
|
+
"@interstellarforge/matter-tokens": "0.2.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"vitest": "4.1.6"
|