microboard-ui-temp 0.9.4 → 0.9.5

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/dist/board.html +1 -1
  2. package/dist/{chunk-tbbk28e0.js → chunk-s10r70dj.js} +1 -3
  3. package/dist/{chunk-5d161m0h.css → chunk-wyxvtxka.css} +94 -177
  4. package/dist/example.html +2 -3
  5. package/dist/index.css +4 -322
  6. package/dist/index.html +2 -3
  7. package/dist/index.js +1 -3
  8. package/dist/spa.css +20 -103
  9. package/dist/spa.js +1 -3
  10. package/dist/types/index.d.ts +1 -1
  11. package/package.json +1 -1
  12. package/dist/board.css +0 -66
package/dist/board.html CHANGED
@@ -10,7 +10,7 @@
10
10
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
11
11
  rel="stylesheet"
12
12
  />
13
- <link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/board.css" />
13
+ <link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/index.css" />
14
14
  </head>
15
15
  <body style="overflow-x: hidden; overflow-y: hidden">
16
16
  <div id="items">
package/dist/{chunk-tbbk28e0.js → chunk-s10r70dj.js} RENAMED
@@ -340887,10 +340887,8 @@ var UiButton_module_default = {
340887
340887
  active: "active_XNHIwg",
340888
340888
  disableBg: "disableBg_XNHIwg",
340889
340889
  hotkey: "hotkey_XNHIwg",
340890
- secondary: "secondary_XNHIwg",
340891
340890
  primary: "primary_XNHIwg",
340892
- loading: "loading_XNHIwg",
340893
- black: "black_XNHIwg",
340891
+ secondary: "secondary_XNHIwg",
340894
340892
  quaternary: "quaternary_XNHIwg",
340895
340893
  tertiary: "tertiary_XNHIwg",
340896
340894
  ghost: "ghost_XNHIwg",
package/dist/{chunk-5d161m0h.css → chunk-wyxvtxka.css} RENAMED
@@ -1,80 +1,6 @@
1
1
  @import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
2
2
  @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
3
3
 
4
- /* node_modules/microboard-temp/dist/microboard.css */
5
- .microboard-quickAddButton {
6
- transform-origin: 50%;
7
- z-index: 2;
8
- position: absolute;
9
- background-color: #93aff6;
10
- border: 1px solid #fff;
11
- border-radius: 50%;
12
- margin: auto;
13
- padding: 14px;
14
- transition: transform .2s, border 0s .2s;
15
- transform: translate(-50%, -50%)scale(.25);
16
- }
17
-
18
- .microboard-invisible {
19
- display: none;
20
- }
21
-
22
- .microboard-quickAddButtonActive {
23
- background-color: #924fe8;
24
- border: none;
25
- transform: translate(-50%, -50%)scale(1);
26
- }
27
-
28
- .microboard-quickAddButton:after {
29
- content: "";
30
- opacity: 1;
31
- position: absolute;
32
- border-radius: 50%;
33
- transition: all .2s .2s;
34
- inset: 0;
35
- transform: scale(4);
36
- }
37
-
38
- .microboard-quickAddButtonActive:after {
39
- opacity: 0;
40
- transform: none;
41
- }
42
-
43
- .microboard-quickAddButton:before {
44
- content: "";
45
- --quick-add-button-width: 17px;
46
- --quick-add-button-height: 10px;
47
- width: var(--quick-add-button-width);
48
- height: var(--quick-add-button-height);
49
- opacity: 0;
50
- transform-origin: 50%;
51
- position: absolute;
52
- background: url("data:image/svg+xml;utf8,<svg width=\"var(--quick-add-button-width)\" height=\"var(--quick-add-button-height)\" viewBox=\"0 0 17 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.7593 5.00009L10.5339 9.58329L9.68819 8.30677L12.9245 5.83329H0.0415039V4.16663H12.9241L9.68819 1.69341L10.5339 0.416626L16.7593 5.00009Z\" fill=\"white\"/></svg>") no-repeat;
53
- transition: opacity .2s;
54
- top: 35%;
55
- left: 20%;
56
- }
57
-
58
- .microboard-quickAddButtonActive:before {
59
- opacity: 1;
60
- }
61
-
62
- .microboard-quickAddButton.microboard-left:before {
63
- rotate: 180deg;
64
- }
65
-
66
- .microboard-quickAddButton.microboard-right:before {
67
- rotate: none;
68
- }
69
-
70
- .microboard-quickAddButton.microboard-top:before {
71
- rotate: 270deg;
72
- }
73
-
74
- .microboard-quickAddButton.microboard-bottom:before {
75
- rotate: 90deg;
76
- }
77
-
78
4
  /* src/public/index.css */
79
5
  :root {
80
6
  --background-surface-default: #fff;
@@ -204,6 +130,22 @@ input:-webkit-autofill:active {
204
130
  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
205
131
  }
206
132
 
133
+ ::-webkit-scrollbar {
134
+ appearance: none;
135
+ width: 3px;
136
+ height: 3px;
137
+ }
138
+
139
+ ::-webkit-scrollbar-button {
140
+ display: none;
141
+ }
142
+
143
+ ::-webkit-scrollbar-thumb {
144
+ display: block;
145
+ background-color: var(--scrollbar-thumb);
146
+ border-radius: 2px;
147
+ }
148
+
207
149
  button[data-variant="secondary"] {
208
150
  background-color: var(--background-button-secondary);
209
151
  color: var(--text-base-primary);
@@ -652,40 +594,10 @@ button[data-variant="black"] {
652
594
  padding: 0 4px;
653
595
  }
654
596
 
655
- .secondary_XNHIwg {
656
- background-color: var(--background-button-secondary);
657
- color: var(--text-base-primary);
658
- }
659
-
660
- @media (hover: hover) {
661
- .secondary_XNHIwg:hover:not(:disabled) {
662
- background-color: var(--background-button-secondary-hover);
663
- color: var(--text-base-primary);
664
- }
665
- }
666
-
667
- .secondary_XNHIwg:active:not(:disabled) {
668
- color: #924fe8;
669
- outline: 2px solid #c8b2ff80;
670
- }
671
-
672
- .secondary_XNHIwg:disabled {
673
- background-color: var(--background-button-secondary);
674
- color: var(--text-disabled);
675
- }
676
-
677
597
  .primary_XNHIwg {
678
- border: 1px solid var(--background-button-primary);
679
- background-color: var(--background-button-primary);
680
- color: var(--color-button-primary);
681
598
  box-shadow: 0 1px 2px #14151a0d;
682
599
  }
683
600
 
684
- .primary_XNHIwg:hover:not(:disabled) {
685
- background-color: var(--background-button-primary-hover);
686
- color: var(--color-button-primary);
687
- }
688
-
689
601
  .primary_XNHIwg:active:not(:disabled) {
690
602
  outline: 2px solid #c8b2ff80;
691
603
  }
@@ -696,93 +608,24 @@ button[data-variant="black"] {
696
608
  color: var(--text-base-quaternary);
697
609
  }
698
610
 
699
- .primary_XNHIwg.loading_XNHIwg {
700
- border-color: var(--background-button-primary);
701
- background-color: var(--background-button-primary);
702
- color: var(--color-button-primary);
703
- }
704
-
705
- .black_XNHIwg {
706
- background-color: var(--background-button-primary);
707
- color: var(--color-button-primary);
708
- }
709
-
710
- @media (hover: hover) {
711
- .black_XNHIwg:hover:not(:disabled) {
712
- background-color: var(--background-button-primary-hover);
713
- color: var(--color-button-primary);
714
- }
715
- }
716
-
717
- .black_XNHIwg:disabled {
718
- background-color: var(--border-action-normal);
719
- color: var(--text-base-quaternary);
720
- }
721
-
722
- .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
723
- color: var(--text-base-primary);
724
- background-color: var(--background-hover-subtle);
725
- }
726
-
727
- .quaternary_XNHIwg:disabled {
728
- color: var(--text-disabled);
729
- }
730
-
731
- .quaternary_XNHIwg:hover:not(:disabled) {
732
- color: var(--text-base-primary);
733
- background-color: var(--background-hover-subtle-strong);
734
- }
735
-
736
- .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
611
+ .secondary_XNHIwg:active:not(:disabled) {
737
612
  outline: 2px solid #c8b2ff80;
738
- border: 1px solid #b78af0;
739
613
  }
740
614
 
741
- .tertiary_XNHIwg {
742
- color: var(--text-base-primary);
743
- background-color: var(--background-button-tertiary);
744
- border: 1px solid var(--border-action-normal);
745
- }
746
-
747
- .tertiary_XNHIwg:hover:not(:disabled) {
748
- background-color: var(--background-button-tertiary-hover);
749
- }
750
-
751
- .ghost_XNHIwg {
752
- color: var(--text-base-secondary);
753
- background-color: #0000;
754
- font-weight: 600;
755
- }
756
-
757
- .ghost_XNHIwg:hover {
758
- color: var(--text-base-secondary);
759
- background-color: var(--background-hover-subtle);
760
- }
761
-
762
- .ghost_XNHIwg:active {
615
+ .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
763
616
  outline: 2px solid #c8b2ff80;
764
617
  border: 1px solid #b78af0;
765
618
  }
766
619
 
767
- .ghost_XNHIwg:disabled {
768
- color: var(--text-disabled);
769
- }
770
-
771
- .ghostFilled_XNHIwg {
772
- color: var(--text-base-secondary);
773
- background-color: var(--background-hover-subtle);
620
+ .ghost_XNHIwg, .ghostFilled_XNHIwg {
774
621
  font-weight: 600;
775
622
  }
776
623
 
777
- .ghostFilled_XNHIwg:active {
624
+ .ghost_XNHIwg:active, .ghostFilled_XNHIwg:active {
778
625
  outline: 2px solid #c8b2ff80;
779
626
  border: 1px solid #b78af0;
780
627
  }
781
628
 
782
- .ghostFilled_XNHIwg:disabled {
783
- color: var(--text-disabled);
784
- }
785
-
786
629
  .loader_XNHIwg {
787
630
  display: flex;
788
631
  animation: rotate 2s linear infinite;
@@ -14730,3 +14573,77 @@ audio::-webkit-media-controls-enclosure {
14730
14573
  background-color: #f8d7da !important;
14731
14574
  border-color: #f5c6cb !important;
14732
14575
  }
14576
+
14577
+ /* node_modules/microboard-temp/dist/microboard.css */
14578
+ .microboard-quickAddButton {
14579
+ transform-origin: 50%;
14580
+ z-index: 2;
14581
+ position: absolute;
14582
+ background-color: #93aff6;
14583
+ border: 1px solid #fff;
14584
+ border-radius: 50%;
14585
+ margin: auto;
14586
+ padding: 14px;
14587
+ transition: transform .2s, border 0s .2s;
14588
+ transform: translate(-50%, -50%)scale(.25);
14589
+ }
14590
+
14591
+ .microboard-invisible {
14592
+ display: none;
14593
+ }
14594
+
14595
+ .microboard-quickAddButtonActive {
14596
+ background-color: #924fe8;
14597
+ border: none;
14598
+ transform: translate(-50%, -50%)scale(1);
14599
+ }
14600
+
14601
+ .microboard-quickAddButton:after {
14602
+ content: "";
14603
+ opacity: 1;
14604
+ position: absolute;
14605
+ border-radius: 50%;
14606
+ transition: all .2s .2s;
14607
+ inset: 0;
14608
+ transform: scale(4);
14609
+ }
14610
+
14611
+ .microboard-quickAddButtonActive:after {
14612
+ opacity: 0;
14613
+ transform: none;
14614
+ }
14615
+
14616
+ .microboard-quickAddButton:before {
14617
+ content: "";
14618
+ --quick-add-button-width: 17px;
14619
+ --quick-add-button-height: 10px;
14620
+ width: var(--quick-add-button-width);
14621
+ height: var(--quick-add-button-height);
14622
+ opacity: 0;
14623
+ transform-origin: 50%;
14624
+ position: absolute;
14625
+ background: url("data:image/svg+xml;utf8,<svg width=\"var(--quick-add-button-width)\" height=\"var(--quick-add-button-height)\" viewBox=\"0 0 17 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.7593 5.00009L10.5339 9.58329L9.68819 8.30677L12.9245 5.83329H0.0415039V4.16663H12.9241L9.68819 1.69341L10.5339 0.416626L16.7593 5.00009Z\" fill=\"white\"/></svg>") no-repeat;
14626
+ transition: opacity .2s;
14627
+ top: 35%;
14628
+ left: 20%;
14629
+ }
14630
+
14631
+ .microboard-quickAddButtonActive:before {
14632
+ opacity: 1;
14633
+ }
14634
+
14635
+ .microboard-quickAddButton.microboard-left:before {
14636
+ rotate: 180deg;
14637
+ }
14638
+
14639
+ .microboard-quickAddButton.microboard-right:before {
14640
+ rotate: none;
14641
+ }
14642
+
14643
+ .microboard-quickAddButton.microboard-top:before {
14644
+ rotate: 270deg;
14645
+ }
14646
+
14647
+ .microboard-quickAddButton.microboard-bottom:before {
14648
+ rotate: 90deg;
14649
+ }
package/dist/example.html CHANGED
@@ -31,8 +31,8 @@
31
31
  rel="stylesheet"
32
32
  />
33
33
 
34
- <link rel="stylesheet" crossorigin href="/chunk-5d161m0h.css"><script src="/env.js"></script>
35
- <script type="module" crossorigin src="/chunk-tbbk28e0.js"></script></head>
34
+ <link rel="stylesheet" crossorigin href="/chunk-wyxvtxka.css"><script src="/env.js"></script>
35
+ <script type="module" crossorigin src="/chunk-s10r70dj.js"></script></head>
36
36
 
37
37
  <body
38
38
  style="
@@ -44,7 +44,6 @@
44
44
  padding: 0;
45
45
  touch-action: none;
46
46
  -ms-touch-action: none;
47
- background-color: #fff;
48
47
  "
49
48
  >
50
49
  <div
package/dist/index.css CHANGED
@@ -1,6 +1,3 @@
1
- @import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
2
- @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
3
-
4
1
  /* src/shared/ui-lib/Icon/Icon.module.css */
5
2
  .icon_zNwsNQ {
6
3
  max-width: 24px;
@@ -362,40 +359,10 @@
362
359
  padding: 0 4px;
363
360
  }
364
361
 
365
- .secondary_XNHIwg {
366
- background-color: var(--background-button-secondary);
367
- color: var(--text-base-primary);
368
- }
369
-
370
- @media (hover: hover) {
371
- .secondary_XNHIwg:hover:not(:disabled) {
372
- background-color: var(--background-button-secondary-hover);
373
- color: var(--text-base-primary);
374
- }
375
- }
376
-
377
- .secondary_XNHIwg:active:not(:disabled) {
378
- color: #924fe8;
379
- outline: 2px solid #c8b2ff80;
380
- }
381
-
382
- .secondary_XNHIwg:disabled {
383
- background-color: var(--background-button-secondary);
384
- color: var(--text-disabled);
385
- }
386
-
387
362
  .primary_XNHIwg {
388
- border: 1px solid var(--background-button-primary);
389
- background-color: var(--background-button-primary);
390
- color: var(--color-button-primary);
391
363
  box-shadow: 0 1px 2px #14151a0d;
392
364
  }
393
365
 
394
- .primary_XNHIwg:hover:not(:disabled) {
395
- background-color: var(--background-button-primary-hover);
396
- color: var(--color-button-primary);
397
- }
398
-
399
366
  .primary_XNHIwg:active:not(:disabled) {
400
367
  outline: 2px solid #c8b2ff80;
401
368
  }
@@ -406,93 +373,24 @@
406
373
  color: var(--text-base-quaternary);
407
374
  }
408
375
 
409
- .primary_XNHIwg.loading_XNHIwg {
410
- border-color: var(--background-button-primary);
411
- background-color: var(--background-button-primary);
412
- color: var(--color-button-primary);
413
- }
414
-
415
- .black_XNHIwg {
416
- background-color: var(--background-button-primary);
417
- color: var(--color-button-primary);
418
- }
419
-
420
- @media (hover: hover) {
421
- .black_XNHIwg:hover:not(:disabled) {
422
- background-color: var(--background-button-primary-hover);
423
- color: var(--color-button-primary);
424
- }
425
- }
426
-
427
- .black_XNHIwg:disabled {
428
- background-color: var(--border-action-normal);
429
- color: var(--text-base-quaternary);
430
- }
431
-
432
- .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
433
- color: var(--text-base-primary);
434
- background-color: var(--background-hover-subtle);
435
- }
436
-
437
- .quaternary_XNHIwg:disabled {
438
- color: var(--text-disabled);
439
- }
440
-
441
- .quaternary_XNHIwg:hover:not(:disabled) {
442
- color: var(--text-base-primary);
443
- background-color: var(--background-hover-subtle-strong);
444
- }
445
-
446
- .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
376
+ .secondary_XNHIwg:active:not(:disabled) {
447
377
  outline: 2px solid #c8b2ff80;
448
- border: 1px solid #b78af0;
449
- }
450
-
451
- .tertiary_XNHIwg {
452
- color: var(--text-base-primary);
453
- background-color: var(--background-button-tertiary);
454
- border: 1px solid var(--border-action-normal);
455
- }
456
-
457
- .tertiary_XNHIwg:hover:not(:disabled) {
458
- background-color: var(--background-button-tertiary-hover);
459
- }
460
-
461
- .ghost_XNHIwg {
462
- color: var(--text-base-secondary);
463
- background-color: #0000;
464
- font-weight: 600;
465
- }
466
-
467
- .ghost_XNHIwg:hover {
468
- color: var(--text-base-secondary);
469
- background-color: var(--background-hover-subtle);
470
378
  }
471
379
 
472
- .ghost_XNHIwg:active {
380
+ .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
473
381
  outline: 2px solid #c8b2ff80;
474
382
  border: 1px solid #b78af0;
475
383
  }
476
384
 
477
- .ghost_XNHIwg:disabled {
478
- color: var(--text-disabled);
479
- }
480
-
481
- .ghostFilled_XNHIwg {
482
- color: var(--text-base-secondary);
483
- background-color: var(--background-hover-subtle);
385
+ .ghost_XNHIwg, .ghostFilled_XNHIwg {
484
386
  font-weight: 600;
485
387
  }
486
388
 
487
- .ghostFilled_XNHIwg:active {
389
+ .ghost_XNHIwg:active, .ghostFilled_XNHIwg:active {
488
390
  outline: 2px solid #c8b2ff80;
489
391
  border: 1px solid #b78af0;
490
392
  }
491
393
 
492
- .ghostFilled_XNHIwg:disabled {
493
- color: var(--text-disabled);
494
- }
495
-
496
394
  .loader_XNHIwg {
497
395
  display: flex;
498
396
  animation: rotate 2s linear infinite;
@@ -14514,219 +14412,3 @@ audio::-webkit-media-controls-enclosure {
14514
14412
  .microboard-quickAddButton.microboard-bottom:before {
14515
14413
  rotate: 90deg;
14516
14414
  }
14517
-
14518
- /* src/public/index.css */
14519
- :root {
14520
- --background-surface-default: #fff;
14521
- --background-button-secondary: #fff;
14522
- --background-button-secondary-hover: #f7f7f8;
14523
- --background-button-tertiary: #f5f6f7;
14524
- --background-button-tertiary-hover: #ececee;
14525
- --background-button-primary: #14151a;
14526
- --background-button-primary-hover: #1f2228;
14527
- --color-button-primary: #fff;
14528
- --background-badge-purple-disabled: #f7f1fd;
14529
- --background-badge-gray: #e9eaec;
14530
- --background-accent-purple: #924fe8;
14531
- --background-hover-subtle: #0a0f290a;
14532
- --background-hover-subtle-strong: #0a0f2914;
14533
- --bg-action-secondary: #f5f6f7;
14534
- --bg-action-secondary-hover: #0a0f290f;
14535
- --border-action-normal: #dedfe3;
14536
- --border-action-focus: #924fe8;
14537
- --border-select-primary: #924fe8;
14538
- --text-base-primary: #14151a;
14539
- --text-base-secondary: #0f132499;
14540
- --text-base-quaternary: #0a0f2940;
14541
- --text-accent-purple: #9859e9;
14542
- --text-disabled: #b1b3bb;
14543
- --icon-base-primary: #14151a;
14544
- --icon-base-secondary: #696b76;
14545
- --icon-accent-purple: #924fe8;
14546
- --scrollbar-thumb: #dee1e8;
14547
- --absolute-position-panel-padding: 12px;
14548
- }
14549
-
14550
- [data-theme="dark"] {
14551
- --background-surface-default: #1e1f26;
14552
- --background-button-secondary: #1e1f26;
14553
- --background-button-secondary-hover: #2a2b34;
14554
- --background-button-tertiary: #2a2b34;
14555
- --background-button-tertiary-hover: #373842;
14556
- --background-button-primary: #e8e9f0;
14557
- --background-button-primary-hover: #d2d4de;
14558
- --color-button-primary: #14151a;
14559
- --background-badge-purple-disabled: #281c3c;
14560
- --background-badge-gray: #2d2e37;
14561
- --background-accent-purple: #924fe8;
14562
- --background-hover-subtle: #e8e9f00f;
14563
- --background-hover-subtle-strong: #e8e9f01a;
14564
- --bg-action-secondary: #26272f;
14565
- --bg-action-secondary-hover: #e8e9f014;
14566
- --border-action-normal: #34353e;
14567
- --border-action-focus: #924fe8;
14568
- --border-select-primary: #924fe8;
14569
- --text-base-primary: #e8e9f0;
14570
- --text-base-secondary: #e8e9f099;
14571
- --text-base-quaternary: #e8e9f040;
14572
- --text-accent-purple: #ac78f5;
14573
- --text-disabled: #e8e9f04d;
14574
- --icon-base-primary: #e8e9f0;
14575
- --icon-base-secondary: #9496a5;
14576
- --icon-accent-purple: #924fe8;
14577
- --scrollbar-thumb: #50525f;
14578
- }
14579
-
14580
- * {
14581
- box-sizing: border-box;
14582
- background: none;
14583
- border: none;
14584
- margin: 0;
14585
- padding: 0;
14586
- font-family: inherit;
14587
- }
14588
-
14589
- :focus {
14590
- outline: none;
14591
- }
14592
-
14593
- html {
14594
- font-size: 62.5%;
14595
- }
14596
-
14597
- body {
14598
- color: var(--text-base-primary);
14599
- background-color: var(--background-surface-default);
14600
- font-optical-sizing: auto;
14601
- font-family: Manrope, sans-serif;
14602
- font-size: 1.6rem;
14603
- font-style: normal;
14604
- }
14605
-
14606
- html, body {
14607
- overscroll-behavior-x: none;
14608
- -webkit-user-select: none;
14609
- }
14610
-
14611
- input:-webkit-autofill {
14612
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
14613
- }
14614
-
14615
- input:-webkit-autofill:hover {
14616
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
14617
- }
14618
-
14619
- input:-webkit-autofill:focus {
14620
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
14621
- }
14622
-
14623
- input:-webkit-autofill:active {
14624
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
14625
- }
14626
-
14627
- [data-theme="dark"] input:-webkit-autofill {
14628
- -webkit-text-fill-color: #e8e9f0 !important;
14629
- -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14630
- }
14631
-
14632
- [data-theme="dark"] input:-webkit-autofill:hover {
14633
- -webkit-text-fill-color: #e8e9f0 !important;
14634
- -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14635
- }
14636
-
14637
- [data-theme="dark"] input:-webkit-autofill:focus {
14638
- -webkit-text-fill-color: #e8e9f0 !important;
14639
- -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14640
- }
14641
-
14642
- [data-theme="dark"] input:-webkit-autofill:active {
14643
- -webkit-text-fill-color: #e8e9f0 !important;
14644
- -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14645
- }
14646
-
14647
- button[data-variant="secondary"] {
14648
- background-color: var(--background-button-secondary);
14649
- color: var(--text-base-primary);
14650
- }
14651
-
14652
- @media (hover: hover) {
14653
- button[data-variant="secondary"]:hover:not(:disabled) {
14654
- background-color: var(--background-button-secondary-hover);
14655
- color: var(--text-base-primary);
14656
- }
14657
- }
14658
-
14659
- button[data-variant="secondary"]:active:not(:disabled) {
14660
- color: #924fe8;
14661
- }
14662
-
14663
- button[data-variant="secondary"]:disabled {
14664
- background-color: var(--background-button-secondary);
14665
- color: var(--text-disabled);
14666
- }
14667
-
14668
- button[data-variant="tertiary"] {
14669
- background-color: var(--background-button-tertiary);
14670
- color: var(--text-base-primary);
14671
- border: 1px solid var(--border-action-normal);
14672
- }
14673
-
14674
- @media (hover: hover) {
14675
- button[data-variant="tertiary"]:hover:not(:disabled) {
14676
- background-color: var(--background-button-tertiary-hover);
14677
- }
14678
- }
14679
-
14680
- button[data-variant="primary"] {
14681
- background-color: var(--background-button-primary);
14682
- border-color: var(--background-button-primary);
14683
- color: var(--color-button-primary);
14684
- }
14685
-
14686
- @media (hover: hover) {
14687
- button[data-variant="primary"]:hover:not(:disabled) {
14688
- background-color: var(--background-button-primary-hover);
14689
- color: var(--color-button-primary);
14690
- }
14691
- }
14692
-
14693
- button[data-variant="ghost"] {
14694
- color: var(--text-base-secondary);
14695
- background-color: #0000;
14696
- }
14697
-
14698
- @media (hover: hover) {
14699
- button[data-variant="ghost"]:hover:not(:disabled) {
14700
- background-color: var(--background-hover-subtle);
14701
- color: var(--text-base-secondary);
14702
- }
14703
- }
14704
-
14705
- button[data-variant="ghostFilled"] {
14706
- background-color: var(--background-hover-subtle);
14707
- color: var(--text-base-secondary);
14708
- }
14709
-
14710
- button[data-variant="quaternary"] {
14711
- background-color: var(--background-hover-subtle);
14712
- color: var(--text-base-primary);
14713
- }
14714
-
14715
- @media (hover: hover) {
14716
- button[data-variant="quaternary"]:hover:not(:disabled) {
14717
- background-color: var(--background-hover-subtle-strong);
14718
- color: var(--text-base-primary);
14719
- }
14720
- }
14721
-
14722
- button[data-variant="black"] {
14723
- background-color: var(--background-button-primary);
14724
- color: var(--color-button-primary);
14725
- }
14726
-
14727
- @media (hover: hover) {
14728
- button[data-variant="black"]:hover:not(:disabled) {
14729
- background-color: var(--background-button-primary-hover);
14730
- color: var(--color-button-primary);
14731
- }
14732
- }
package/dist/index.html CHANGED
@@ -31,8 +31,8 @@
31
31
  rel="stylesheet"
32
32
  />
33
33
 
34
- <link rel="stylesheet" crossorigin href="/chunk-5d161m0h.css"><script src="/env.js"></script>
35
- <script type="module" crossorigin src="/chunk-tbbk28e0.js"></script></head>
34
+ <link rel="stylesheet" crossorigin href="/chunk-wyxvtxka.css"><script src="/env.js"></script>
35
+ <script type="module" crossorigin src="/chunk-s10r70dj.js"></script></head>
36
36
 
37
37
  <body
38
38
  style="
@@ -44,7 +44,6 @@
44
44
  padding: 0;
45
45
  touch-action: none;
46
46
  -ms-touch-action: none;
47
- background-color: #fff;
48
47
  "
49
48
  >
50
49
  <div
package/dist/index.js CHANGED
@@ -340887,10 +340887,8 @@ var UiButton_module_default = {
340887
340887
  active: "active_XNHIwg",
340888
340888
  disableBg: "disableBg_XNHIwg",
340889
340889
  hotkey: "hotkey_XNHIwg",
340890
- secondary: "secondary_XNHIwg",
340891
340890
  primary: "primary_XNHIwg",
340892
- loading: "loading_XNHIwg",
340893
- black: "black_XNHIwg",
340891
+ secondary: "secondary_XNHIwg",
340894
340892
  quaternary: "quaternary_XNHIwg",
340895
340893
  tertiary: "tertiary_XNHIwg",
340896
340894
  ghost: "ghost_XNHIwg",
package/dist/spa.css CHANGED
@@ -362,40 +362,10 @@
362
362
  padding: 0 4px;
363
363
  }
364
364
 
365
- .secondary_XNHIwg {
366
- background-color: var(--background-button-secondary);
367
- color: var(--text-base-primary);
368
- }
369
-
370
- @media (hover: hover) {
371
- .secondary_XNHIwg:hover:not(:disabled) {
372
- background-color: var(--background-button-secondary-hover);
373
- color: var(--text-base-primary);
374
- }
375
- }
376
-
377
- .secondary_XNHIwg:active:not(:disabled) {
378
- color: #924fe8;
379
- outline: 2px solid #c8b2ff80;
380
- }
381
-
382
- .secondary_XNHIwg:disabled {
383
- background-color: var(--background-button-secondary);
384
- color: var(--text-disabled);
385
- }
386
-
387
365
  .primary_XNHIwg {
388
- border: 1px solid var(--background-button-primary);
389
- background-color: var(--background-button-primary);
390
- color: var(--color-button-primary);
391
366
  box-shadow: 0 1px 2px #14151a0d;
392
367
  }
393
368
 
394
- .primary_XNHIwg:hover:not(:disabled) {
395
- background-color: var(--background-button-primary-hover);
396
- color: var(--color-button-primary);
397
- }
398
-
399
369
  .primary_XNHIwg:active:not(:disabled) {
400
370
  outline: 2px solid #c8b2ff80;
401
371
  }
@@ -406,93 +376,24 @@
406
376
  color: var(--text-base-quaternary);
407
377
  }
408
378
 
409
- .primary_XNHIwg.loading_XNHIwg {
410
- border-color: var(--background-button-primary);
411
- background-color: var(--background-button-primary);
412
- color: var(--color-button-primary);
413
- }
414
-
415
- .black_XNHIwg {
416
- background-color: var(--background-button-primary);
417
- color: var(--color-button-primary);
418
- }
419
-
420
- @media (hover: hover) {
421
- .black_XNHIwg:hover:not(:disabled) {
422
- background-color: var(--background-button-primary-hover);
423
- color: var(--color-button-primary);
424
- }
425
- }
426
-
427
- .black_XNHIwg:disabled {
428
- background-color: var(--border-action-normal);
429
- color: var(--text-base-quaternary);
430
- }
431
-
432
- .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
433
- color: var(--text-base-primary);
434
- background-color: var(--background-hover-subtle);
435
- }
436
-
437
- .quaternary_XNHIwg:disabled {
438
- color: var(--text-disabled);
439
- }
440
-
441
- .quaternary_XNHIwg:hover:not(:disabled) {
442
- color: var(--text-base-primary);
443
- background-color: var(--background-hover-subtle-strong);
444
- }
445
-
446
- .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
379
+ .secondary_XNHIwg:active:not(:disabled) {
447
380
  outline: 2px solid #c8b2ff80;
448
- border: 1px solid #b78af0;
449
- }
450
-
451
- .tertiary_XNHIwg {
452
- color: var(--text-base-primary);
453
- background-color: var(--background-button-tertiary);
454
- border: 1px solid var(--border-action-normal);
455
- }
456
-
457
- .tertiary_XNHIwg:hover:not(:disabled) {
458
- background-color: var(--background-button-tertiary-hover);
459
- }
460
-
461
- .ghost_XNHIwg {
462
- color: var(--text-base-secondary);
463
- background-color: #0000;
464
- font-weight: 600;
465
381
  }
466
382
 
467
- .ghost_XNHIwg:hover {
468
- color: var(--text-base-secondary);
469
- background-color: var(--background-hover-subtle);
470
- }
471
-
472
- .ghost_XNHIwg:active {
383
+ .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
473
384
  outline: 2px solid #c8b2ff80;
474
385
  border: 1px solid #b78af0;
475
386
  }
476
387
 
477
- .ghost_XNHIwg:disabled {
478
- color: var(--text-disabled);
479
- }
480
-
481
- .ghostFilled_XNHIwg {
482
- color: var(--text-base-secondary);
483
- background-color: var(--background-hover-subtle);
388
+ .ghost_XNHIwg, .ghostFilled_XNHIwg {
484
389
  font-weight: 600;
485
390
  }
486
391
 
487
- .ghostFilled_XNHIwg:active {
392
+ .ghost_XNHIwg:active, .ghostFilled_XNHIwg:active {
488
393
  outline: 2px solid #c8b2ff80;
489
394
  border: 1px solid #b78af0;
490
395
  }
491
396
 
492
- .ghostFilled_XNHIwg:disabled {
493
- color: var(--text-disabled);
494
- }
495
-
496
397
  .loader_XNHIwg {
497
398
  display: flex;
498
399
  animation: rotate 2s linear infinite;
@@ -14644,6 +14545,22 @@ input:-webkit-autofill:active {
14644
14545
  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14645
14546
  }
14646
14547
 
14548
+ ::-webkit-scrollbar {
14549
+ appearance: none;
14550
+ width: 3px;
14551
+ height: 3px;
14552
+ }
14553
+
14554
+ ::-webkit-scrollbar-button {
14555
+ display: none;
14556
+ }
14557
+
14558
+ ::-webkit-scrollbar-thumb {
14559
+ display: block;
14560
+ background-color: var(--scrollbar-thumb);
14561
+ border-radius: 2px;
14562
+ }
14563
+
14647
14564
  button[data-variant="secondary"] {
14648
14565
  background-color: var(--background-button-secondary);
14649
14566
  color: var(--text-base-primary);
package/dist/spa.js CHANGED
@@ -340887,10 +340887,8 @@ var UiButton_module_default = {
340887
340887
  active: "active_XNHIwg",
340888
340888
  disableBg: "disableBg_XNHIwg",
340889
340889
  hotkey: "hotkey_XNHIwg",
340890
- secondary: "secondary_XNHIwg",
340891
340890
  primary: "primary_XNHIwg",
340892
- loading: "loading_XNHIwg",
340893
- black: "black_XNHIwg",
340891
+ secondary: "secondary_XNHIwg",
340894
340892
  quaternary: "quaternary_XNHIwg",
340895
340893
  tertiary: "tertiary_XNHIwg",
340896
340894
  ghost: "ghost_XNHIwg",
package/dist/types/index.d.ts CHANGED
@@ -3,5 +3,5 @@ export { customCursors } from "./features/Cursors";
3
3
  export { initInter } from "./initI18N";
4
4
  export * from "./shared/api";
5
5
  export { default as sprite } from "./shared/ui-lib/Icon/sprite.svg";
6
- import "public/index.css";
6
+ import "microboard-temp/style";
7
7
  import "./global.d";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-ui-temp",
3
- "version": "0.9.4",
3
+ "version": "0.9.5",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "type": "module",
package/dist/board.css DELETED
@@ -1,66 +0,0 @@
1
- @import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
2
- @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
3
-
4
- :root {
5
- --background-surface-default: rgb(255, 255, 255);
6
- --background-button-secondary: rgb(255, 255, 255);
7
- --background-button-secondary-hover: rgb(247, 247, 248);
8
- --background-badge-purple-disabled: rgb(247, 241, 253);
9
- --background-badge-gray: rgb(233, 234, 236);
10
- --background-accent-purple: rgb(146, 79, 232);
11
- --border-action-normal: rgb(222, 223, 227);
12
- --border-action-focus: rgb(146, 79, 232);
13
- --border-select-primary: rgb(146, 79, 232);
14
- --text-base-primary: rgb(20, 21, 26);
15
- --text-base-secondary: rgba(15, 19, 36, 0.6);
16
- --text-base-quaternary: rgb(10, 15, 41, 0.25);
17
- --text-accent-purple: rgb(152, 89, 233);
18
- --icon-base-primary: rgb(20, 21, 26);
19
- --icon-base-secondary: rgb(105, 107, 118);
20
- --icon-accent-purple: rgb(146, 79, 232);
21
- --absolute-position-panel-padding: 12px;
22
- }
23
- * {
24
- box-sizing: border-box;
25
- padding: 0;
26
- margin: 0;
27
- border: none;
28
- background: none;
29
- font-family: inherit;
30
- }
31
- html {
32
- font-size: 62.5%;
33
- }
34
- body {
35
- color: var(--text-base-primary);
36
- font-size: 1.6rem;
37
- font-optical-sizing: auto;
38
- font-style: normal;
39
- font-family: "Manrope", sans-serif;
40
- background-color: rgba(200, 200, 200, 0.2);
41
- }
42
- html,
43
- body {
44
- overscroll-behavior-x: none;
45
- -webkit-user-select: none;
46
- }
47
- input:-webkit-autofill,
48
- input:-webkit-autofill:hover,
49
- input:-webkit-autofill:focus,
50
- input:-webkit-autofill:active {
51
- -webkit-box-shadow: 0 0 0 30px white inset !important;
52
- }
53
-
54
- ::-webkit-scrollbar {
55
- appearance: none;
56
- width: 3px;
57
- height: 3px;
58
- }
59
- ::-webkit-scrollbar-button {
60
- display: none;
61
- }
62
- ::-webkit-scrollbar-thumb {
63
- display: block;
64
- background-color: black;
65
- border-radius: 2px;
66
- }