microboard-ui-temp 0.9.3 → 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-yrsgyj7d.js → chunk-s10r70dj.js} +2 -3
  3. package/dist/{chunk-p8sb1ebp.css → chunk-wyxvtxka.css} +181 -177
  4. package/dist/example.html +2 -3
  5. package/dist/index.css +4 -235
  6. package/dist/index.html +2 -3
  7. package/dist/index.js +2 -3
  8. package/dist/spa.css +107 -103
  9. package/dist/spa.js +2 -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-yrsgyj7d.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",
@@ -341014,6 +341012,7 @@ var UiButton = import_react30.forwardRef(({
341014
341012
  }, ref) => {
341015
341013
  return /* @__PURE__ */ import_react30.default.createElement("button", {
341016
341014
  id: id2,
341015
+ "data-variant": variant,
341017
341016
  className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
341018
341017
  [UiButton_module_default.topRounded]: rounded === "top",
341019
341018
  [UiButton_module_default.bottomRounded]: rounded === "bottom",
package/dist/{chunk-p8sb1ebp.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,109 @@ 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
+
149
+ button[data-variant="secondary"] {
150
+ background-color: var(--background-button-secondary);
151
+ color: var(--text-base-primary);
152
+ }
153
+
154
+ @media (hover: hover) {
155
+ button[data-variant="secondary"]:hover:not(:disabled) {
156
+ background-color: var(--background-button-secondary-hover);
157
+ color: var(--text-base-primary);
158
+ }
159
+ }
160
+
161
+ button[data-variant="secondary"]:active:not(:disabled) {
162
+ color: #924fe8;
163
+ }
164
+
165
+ button[data-variant="secondary"]:disabled {
166
+ background-color: var(--background-button-secondary);
167
+ color: var(--text-disabled);
168
+ }
169
+
170
+ button[data-variant="tertiary"] {
171
+ background-color: var(--background-button-tertiary);
172
+ color: var(--text-base-primary);
173
+ border: 1px solid var(--border-action-normal);
174
+ }
175
+
176
+ @media (hover: hover) {
177
+ button[data-variant="tertiary"]:hover:not(:disabled) {
178
+ background-color: var(--background-button-tertiary-hover);
179
+ }
180
+ }
181
+
182
+ button[data-variant="primary"] {
183
+ background-color: var(--background-button-primary);
184
+ border-color: var(--background-button-primary);
185
+ color: var(--color-button-primary);
186
+ }
187
+
188
+ @media (hover: hover) {
189
+ button[data-variant="primary"]:hover:not(:disabled) {
190
+ background-color: var(--background-button-primary-hover);
191
+ color: var(--color-button-primary);
192
+ }
193
+ }
194
+
195
+ button[data-variant="ghost"] {
196
+ color: var(--text-base-secondary);
197
+ background-color: #0000;
198
+ }
199
+
200
+ @media (hover: hover) {
201
+ button[data-variant="ghost"]:hover:not(:disabled) {
202
+ background-color: var(--background-hover-subtle);
203
+ color: var(--text-base-secondary);
204
+ }
205
+ }
206
+
207
+ button[data-variant="ghostFilled"] {
208
+ background-color: var(--background-hover-subtle);
209
+ color: var(--text-base-secondary);
210
+ }
211
+
212
+ button[data-variant="quaternary"] {
213
+ background-color: var(--background-hover-subtle);
214
+ color: var(--text-base-primary);
215
+ }
216
+
217
+ @media (hover: hover) {
218
+ button[data-variant="quaternary"]:hover:not(:disabled) {
219
+ background-color: var(--background-hover-subtle-strong);
220
+ color: var(--text-base-primary);
221
+ }
222
+ }
223
+
224
+ button[data-variant="black"] {
225
+ background-color: var(--background-button-primary);
226
+ color: var(--color-button-primary);
227
+ }
228
+
229
+ @media (hover: hover) {
230
+ button[data-variant="black"]:hover:not(:disabled) {
231
+ background-color: var(--background-button-primary-hover);
232
+ color: var(--color-button-primary);
233
+ }
234
+ }
235
+
207
236
  /* src/shared/ui-lib/Icon/Icon.module.css */
208
237
  .icon_zNwsNQ {
209
238
  max-width: 24px;
@@ -565,40 +594,10 @@ input:-webkit-autofill:active {
565
594
  padding: 0 4px;
566
595
  }
567
596
 
568
- .secondary_XNHIwg {
569
- background-color: var(--background-button-secondary);
570
- color: var(--text-base-primary);
571
- }
572
-
573
- @media (hover: hover) {
574
- .secondary_XNHIwg:hover:not(:disabled) {
575
- background-color: var(--background-button-secondary-hover);
576
- color: var(--text-base-primary);
577
- }
578
- }
579
-
580
- .secondary_XNHIwg:active:not(:disabled) {
581
- color: #924fe8;
582
- outline: 2px solid #c8b2ff80;
583
- }
584
-
585
- .secondary_XNHIwg:disabled {
586
- background-color: var(--background-button-secondary);
587
- color: var(--text-disabled);
588
- }
589
-
590
597
  .primary_XNHIwg {
591
- border: 1px solid var(--background-button-primary);
592
- background-color: var(--background-button-primary);
593
- color: var(--color-button-primary);
594
598
  box-shadow: 0 1px 2px #14151a0d;
595
599
  }
596
600
 
597
- .primary_XNHIwg:hover:not(:disabled) {
598
- background-color: var(--background-button-primary-hover);
599
- color: var(--color-button-primary);
600
- }
601
-
602
601
  .primary_XNHIwg:active:not(:disabled) {
603
602
  outline: 2px solid #c8b2ff80;
604
603
  }
@@ -609,93 +608,24 @@ input:-webkit-autofill:active {
609
608
  color: var(--text-base-quaternary);
610
609
  }
611
610
 
612
- .primary_XNHIwg.loading_XNHIwg {
613
- border-color: var(--background-button-primary);
614
- background-color: var(--background-button-primary);
615
- color: var(--color-button-primary);
616
- }
617
-
618
- .black_XNHIwg {
619
- background-color: var(--background-button-primary);
620
- color: var(--color-button-primary);
621
- }
622
-
623
- @media (hover: hover) {
624
- .black_XNHIwg:hover:not(:disabled) {
625
- background-color: var(--background-button-primary-hover);
626
- color: var(--color-button-primary);
627
- }
628
- }
629
-
630
- .black_XNHIwg:disabled {
631
- background-color: var(--border-action-normal);
632
- color: var(--text-base-quaternary);
633
- }
634
-
635
- .quaternary_XNHIwg, .quaternary_XNHIwg:disabled {
636
- color: var(--text-base-primary);
637
- background-color: var(--background-hover-subtle);
638
- }
639
-
640
- .quaternary_XNHIwg:disabled {
641
- color: var(--text-disabled);
642
- }
643
-
644
- .quaternary_XNHIwg:hover:not(:disabled) {
645
- color: var(--text-base-primary);
646
- background-color: var(--background-hover-subtle-strong);
647
- }
648
-
649
- .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
611
+ .secondary_XNHIwg:active:not(:disabled) {
650
612
  outline: 2px solid #c8b2ff80;
651
- border: 1px solid #b78af0;
652
613
  }
653
614
 
654
- .tertiary_XNHIwg {
655
- color: var(--text-base-primary);
656
- background-color: var(--background-button-tertiary);
657
- border: 1px solid var(--border-action-normal);
658
- }
659
-
660
- .tertiary_XNHIwg:hover:not(:disabled) {
661
- background-color: var(--background-button-tertiary-hover);
662
- }
663
-
664
- .ghost_XNHIwg {
665
- color: var(--text-base-secondary);
666
- background-color: #0000;
667
- font-weight: 600;
668
- }
669
-
670
- .ghost_XNHIwg:hover {
671
- color: var(--text-base-secondary);
672
- background-color: var(--background-hover-subtle);
673
- }
674
-
675
- .ghost_XNHIwg:active {
615
+ .quaternary_XNHIwg:active:not(:disabled), .tertiary_XNHIwg:active:not(:disabled) {
676
616
  outline: 2px solid #c8b2ff80;
677
617
  border: 1px solid #b78af0;
678
618
  }
679
619
 
680
- .ghost_XNHIwg:disabled {
681
- color: var(--text-disabled);
682
- }
683
-
684
- .ghostFilled_XNHIwg {
685
- color: var(--text-base-secondary);
686
- background-color: var(--background-hover-subtle);
620
+ .ghost_XNHIwg, .ghostFilled_XNHIwg {
687
621
  font-weight: 600;
688
622
  }
689
623
 
690
- .ghostFilled_XNHIwg:active {
624
+ .ghost_XNHIwg:active, .ghostFilled_XNHIwg:active {
691
625
  outline: 2px solid #c8b2ff80;
692
626
  border: 1px solid #b78af0;
693
627
  }
694
628
 
695
- .ghostFilled_XNHIwg:disabled {
696
- color: var(--text-disabled);
697
- }
698
-
699
629
  .loader_XNHIwg {
700
630
  display: flex;
701
631
  animation: rotate 2s linear infinite;
@@ -14643,3 +14573,77 @@ audio::-webkit-media-controls-enclosure {
14643
14573
  background-color: #f8d7da !important;
14644
14574
  border-color: #f5c6cb !important;
14645
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-p8sb1ebp.css"><script src="/env.js"></script>
35
- <script type="module" crossorigin src="/chunk-yrsgyj7d.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
378
  }
460
379
 
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
- }
471
-
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,132 +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
- }
package/dist/index.html CHANGED
@@ -31,8 +31,8 @@
31
31
  rel="stylesheet"
32
32
  />
33
33
 
34
- <link rel="stylesheet" crossorigin href="/chunk-p8sb1ebp.css"><script src="/env.js"></script>
35
- <script type="module" crossorigin src="/chunk-yrsgyj7d.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",
@@ -341014,6 +341012,7 @@ var UiButton = import_react30.forwardRef(({
341014
341012
  }, ref) => {
341015
341013
  return /* @__PURE__ */ import_react30.default.createElement("button", {
341016
341014
  id: id2,
341015
+ "data-variant": variant,
341017
341016
  className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
341018
341017
  [UiButton_module_default.topRounded]: rounded === "top",
341019
341018
  [UiButton_module_default.bottomRounded]: rounded === "bottom",
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
381
  }
456
382
 
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
- }
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;
@@ -14643,3 +14544,106 @@ input:-webkit-autofill:active {
14643
14544
  -webkit-text-fill-color: #e8e9f0 !important;
14644
14545
  -webkit-box-shadow: inset 0 0 0 30px #1e1f26 !important;
14645
14546
  }
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
+
14564
+ button[data-variant="secondary"] {
14565
+ background-color: var(--background-button-secondary);
14566
+ color: var(--text-base-primary);
14567
+ }
14568
+
14569
+ @media (hover: hover) {
14570
+ button[data-variant="secondary"]:hover:not(:disabled) {
14571
+ background-color: var(--background-button-secondary-hover);
14572
+ color: var(--text-base-primary);
14573
+ }
14574
+ }
14575
+
14576
+ button[data-variant="secondary"]:active:not(:disabled) {
14577
+ color: #924fe8;
14578
+ }
14579
+
14580
+ button[data-variant="secondary"]:disabled {
14581
+ background-color: var(--background-button-secondary);
14582
+ color: var(--text-disabled);
14583
+ }
14584
+
14585
+ button[data-variant="tertiary"] {
14586
+ background-color: var(--background-button-tertiary);
14587
+ color: var(--text-base-primary);
14588
+ border: 1px solid var(--border-action-normal);
14589
+ }
14590
+
14591
+ @media (hover: hover) {
14592
+ button[data-variant="tertiary"]:hover:not(:disabled) {
14593
+ background-color: var(--background-button-tertiary-hover);
14594
+ }
14595
+ }
14596
+
14597
+ button[data-variant="primary"] {
14598
+ background-color: var(--background-button-primary);
14599
+ border-color: var(--background-button-primary);
14600
+ color: var(--color-button-primary);
14601
+ }
14602
+
14603
+ @media (hover: hover) {
14604
+ button[data-variant="primary"]:hover:not(:disabled) {
14605
+ background-color: var(--background-button-primary-hover);
14606
+ color: var(--color-button-primary);
14607
+ }
14608
+ }
14609
+
14610
+ button[data-variant="ghost"] {
14611
+ color: var(--text-base-secondary);
14612
+ background-color: #0000;
14613
+ }
14614
+
14615
+ @media (hover: hover) {
14616
+ button[data-variant="ghost"]:hover:not(:disabled) {
14617
+ background-color: var(--background-hover-subtle);
14618
+ color: var(--text-base-secondary);
14619
+ }
14620
+ }
14621
+
14622
+ button[data-variant="ghostFilled"] {
14623
+ background-color: var(--background-hover-subtle);
14624
+ color: var(--text-base-secondary);
14625
+ }
14626
+
14627
+ button[data-variant="quaternary"] {
14628
+ background-color: var(--background-hover-subtle);
14629
+ color: var(--text-base-primary);
14630
+ }
14631
+
14632
+ @media (hover: hover) {
14633
+ button[data-variant="quaternary"]:hover:not(:disabled) {
14634
+ background-color: var(--background-hover-subtle-strong);
14635
+ color: var(--text-base-primary);
14636
+ }
14637
+ }
14638
+
14639
+ button[data-variant="black"] {
14640
+ background-color: var(--background-button-primary);
14641
+ color: var(--color-button-primary);
14642
+ }
14643
+
14644
+ @media (hover: hover) {
14645
+ button[data-variant="black"]:hover:not(:disabled) {
14646
+ background-color: var(--background-button-primary-hover);
14647
+ color: var(--color-button-primary);
14648
+ }
14649
+ }
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",
@@ -341014,6 +341012,7 @@ var UiButton = import_react30.forwardRef(({
341014
341012
  }, ref) => {
341015
341013
  return /* @__PURE__ */ import_react30.default.createElement("button", {
341016
341014
  id: id2,
341015
+ "data-variant": variant,
341017
341016
  className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
341018
341017
  [UiButton_module_default.topRounded]: rounded === "top",
341019
341018
  [UiButton_module_default.bottomRounded]: rounded === "bottom",
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.3",
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
- }