@mirai/ui 1.0.265 → 1.0.266

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 (7) hide show
  1. package/README.md +12 -8
  2. package/build/components/Menu/Menu.module.css +0 -3
  3. package/build/components/Notification/Notification.module.css +5 -0
  4. package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +289 -0
  5. package/build/primitives/Pressable/Pressable.module.css +0 -1
  6. package/build/theme/default.theme.css +4 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1316,17 +1316,21 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
1316
1316
  --mirai-ui-accent-light: #88aedc;
1317
1317
  --mirai-ui-accent-dark: #224876;
1318
1318
 
1319
- --mirai-ui-error: #cc003a;
1320
- --mirai-ui-error-background: #ffece5;
1319
+ --mirai-ui-error: #d32f2f;
1320
+ --mirai-ui-error-background: #fdeded;
1321
+ --mirai-ui-error-border: #fbdbdb;
1321
1322
 
1322
- --mirai-ui-warning: #ffad00;
1323
- --mirai-ui-warning-background: #fff3cc;
1323
+ --mirai-ui-warning: #663c00;
1324
+ --mirai-ui-warning-background: #fff4e5;
1325
+ --mirai-ui-warning-border: #ffe8ca;
1324
1326
 
1325
- --mirai-ui-success: #067949;
1326
- --mirai-ui-success-background: #e7fde7;
1327
+ --mirai-ui-success: #1e4620;
1328
+ --mirai-ui-success-background: #edf7ed;
1329
+ --mirai-ui-success-border: #dcefdc;
1327
1330
 
1328
- --mirai-ui-info: #005cb2;
1329
- --mirai-ui-info-background: #e6f8ff;
1331
+ --mirai-ui-info: #014361;
1332
+ --mirai-ui-info-background: #e6f5fd;
1333
+ --mirai-ui-info-border: #cceafa;
1330
1334
 
1331
1335
  /* spacing */
1332
1336
  --mirai-ui-space-XS: 8px;
package/build/components/Menu/Menu.module.css CHANGED
@@ -1,6 +1,3 @@
1
- .menu {
2
- }
3
-
4
1
  .menu.desktop {
5
2
  background-color: var(--mirai-ui-menu-base);
6
3
  border-radius: var(--mirai-ui-menu-border-radius);
package/build/components/Notification/Notification.module.css CHANGED
@@ -29,6 +29,7 @@
29
29
  background-color: var(--mirai-ui-content-background);
30
30
  border-radius: var(--mirai-ui-notification-border-radius);
31
31
  padding: var(--mirai-ui-notification-padding);
32
+ border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
32
33
  }
33
34
 
34
35
  .notification.outlined.large {
@@ -41,18 +42,22 @@
41
42
 
42
43
  .notification.outlined.error {
43
44
  background-color: var(--mirai-ui-error-background);
45
+ border-color: var(--mirai-ui-error-border);
44
46
  }
45
47
 
46
48
  .notification.outlined.warning {
47
49
  background-color: var(--mirai-ui-warning-background);
50
+ border-color: var(--mirai-ui-warning-border);
48
51
  }
49
52
 
50
53
  .notification.outlined.success {
51
54
  background-color: var(--mirai-ui-success-background);
55
+ border-color: var(--mirai-ui-success-border);
52
56
  }
53
57
 
54
58
  .notification.outlined.info {
55
59
  background-color: var(--mirai-ui-info-background);
60
+ border-color: var(--mirai-ui-info-border);
56
61
  }
57
62
 
58
63
  /* -- <Text>s ------------------------------------------------------------------------------------------------------- */
package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap CHANGED
@@ -351,6 +351,84 @@ exports[`component:<Notification> prop:info 1`] = `
351
351
  </DocumentFragment>
352
352
  `;
353
353
 
354
+ exports[`component:<Notification> prop:inline 1`] = `
355
+ <DocumentFragment>
356
+ <div
357
+ class="view row notification inline"
358
+ >
359
+ <span
360
+ class="icon headline-2"
361
+ >
362
+ <svg
363
+ fill="currentColor"
364
+ height="1em"
365
+ stroke="currentColor"
366
+ stroke-width="0"
367
+ viewBox="0 0 24 24"
368
+ width="1em"
369
+ xmlns="http://www.w3.org/2000/svg"
370
+ >
371
+ <path
372
+ d="M0 0h24v24H0V0z"
373
+ fill="none"
374
+ />
375
+ <path
376
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
377
+ />
378
+ </svg>
379
+ </span>
380
+ <div
381
+ class="view texts"
382
+ >
383
+ <span
384
+ class="text action"
385
+ >
386
+ Lorem Ipsum...
387
+ </span>
388
+ </div>
389
+ </div>
390
+ </DocumentFragment>
391
+ `;
392
+
393
+ exports[`component:<Notification> prop:large 1`] = `
394
+ <DocumentFragment>
395
+ <div
396
+ class="view row notification outlined large"
397
+ >
398
+ <span
399
+ class="icon headline-1"
400
+ >
401
+ <svg
402
+ fill="currentColor"
403
+ height="1em"
404
+ stroke="currentColor"
405
+ stroke-width="0"
406
+ viewBox="0 0 24 24"
407
+ width="1em"
408
+ xmlns="http://www.w3.org/2000/svg"
409
+ >
410
+ <path
411
+ d="M0 0h24v24H0V0z"
412
+ fill="none"
413
+ />
414
+ <path
415
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
416
+ />
417
+ </svg>
418
+ </span>
419
+ <div
420
+ class="view texts"
421
+ >
422
+ <span
423
+ class="text action"
424
+ >
425
+ Lorem Ipsum...
426
+ </span>
427
+ </div>
428
+ </div>
429
+ </DocumentFragment>
430
+ `;
431
+
354
432
  exports[`component:<Notification> prop:onClose 1`] = `
355
433
  <DocumentFragment>
356
434
  <div
@@ -417,6 +495,45 @@ exports[`component:<Notification> prop:onClose 1`] = `
417
495
  </DocumentFragment>
418
496
  `;
419
497
 
498
+ exports[`component:<Notification> prop:small 1`] = `
499
+ <DocumentFragment>
500
+ <div
501
+ class="view row notification outlined small"
502
+ >
503
+ <span
504
+ class="icon headline-3"
505
+ >
506
+ <svg
507
+ fill="currentColor"
508
+ height="1em"
509
+ stroke="currentColor"
510
+ stroke-width="0"
511
+ viewBox="0 0 24 24"
512
+ width="1em"
513
+ xmlns="http://www.w3.org/2000/svg"
514
+ >
515
+ <path
516
+ d="M0 0h24v24H0V0z"
517
+ fill="none"
518
+ />
519
+ <path
520
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
521
+ />
522
+ </svg>
523
+ </span>
524
+ <div
525
+ class="view texts"
526
+ >
527
+ <span
528
+ class="text small"
529
+ >
530
+ Lorem Ipsum...
531
+ </span>
532
+ </div>
533
+ </div>
534
+ </DocumentFragment>
535
+ `;
536
+
420
537
  exports[`component:<Notification> prop:success & inline 1`] = `
421
538
  <DocumentFragment>
422
539
  <div
@@ -617,6 +734,178 @@ exports[`component:<Notification> prop:title 1`] = `
617
734
  </DocumentFragment>
618
735
  `;
619
736
 
737
+ exports[`component:<Notification> prop:title 2`] = `
738
+ <DocumentFragment>
739
+ <div
740
+ class="view row notification error outlined"
741
+ >
742
+ <span
743
+ class="icon headline-2"
744
+ >
745
+ <svg
746
+ fill="currentColor"
747
+ height="1em"
748
+ stroke="currentColor"
749
+ stroke-width="0"
750
+ viewBox="0 0 24 24"
751
+ width="1em"
752
+ xmlns="http://www.w3.org/2000/svg"
753
+ >
754
+ <path
755
+ d="M0 0h24v24H0V0z"
756
+ fill="none"
757
+ />
758
+ <path
759
+ d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
760
+ />
761
+ </svg>
762
+ </span>
763
+ <div
764
+ class="view texts"
765
+ >
766
+ <span
767
+ class="text bold paragraph"
768
+ >
769
+ Title
770
+ </span>
771
+ <span
772
+ class="text action"
773
+ >
774
+ Lorem Ipsum...
775
+ </span>
776
+ </div>
777
+ </div>
778
+ </DocumentFragment>
779
+ `;
780
+
781
+ exports[`component:<Notification> prop:title 3`] = `
782
+ <DocumentFragment>
783
+ <div
784
+ class="view row notification warning outlined"
785
+ >
786
+ <span
787
+ class="icon headline-2"
788
+ >
789
+ <svg
790
+ fill="currentColor"
791
+ height="1em"
792
+ stroke="currentColor"
793
+ stroke-width="0"
794
+ viewBox="0 0 24 24"
795
+ width="1em"
796
+ xmlns="http://www.w3.org/2000/svg"
797
+ >
798
+ <path
799
+ d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
800
+ />
801
+ </svg>
802
+ </span>
803
+ <div
804
+ class="view texts"
805
+ >
806
+ <span
807
+ class="text bold paragraph"
808
+ >
809
+ Title
810
+ </span>
811
+ <span
812
+ class="text action"
813
+ >
814
+ Lorem Ipsum...
815
+ </span>
816
+ </div>
817
+ </div>
818
+ </DocumentFragment>
819
+ `;
820
+
821
+ exports[`component:<Notification> prop:title 4`] = `
822
+ <DocumentFragment>
823
+ <div
824
+ class="view row notification success outlined"
825
+ >
826
+ <span
827
+ class="icon headline-2"
828
+ >
829
+ <svg
830
+ fill="currentColor"
831
+ height="1em"
832
+ stroke="currentColor"
833
+ stroke-width="0"
834
+ viewBox="0 0 24 24"
835
+ width="1em"
836
+ xmlns="http://www.w3.org/2000/svg"
837
+ >
838
+ <path
839
+ d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
840
+ fill="none"
841
+ />
842
+ <path
843
+ d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
844
+ />
845
+ </svg>
846
+ </span>
847
+ <div
848
+ class="view texts"
849
+ >
850
+ <span
851
+ class="text bold paragraph"
852
+ >
853
+ Title
854
+ </span>
855
+ <span
856
+ class="text action"
857
+ >
858
+ Lorem Ipsum...
859
+ </span>
860
+ </div>
861
+ </div>
862
+ </DocumentFragment>
863
+ `;
864
+
865
+ exports[`component:<Notification> prop:title 5`] = `
866
+ <DocumentFragment>
867
+ <div
868
+ class="view row notification info outlined"
869
+ >
870
+ <span
871
+ class="icon headline-2"
872
+ >
873
+ <svg
874
+ fill="currentColor"
875
+ height="1em"
876
+ stroke="currentColor"
877
+ stroke-width="0"
878
+ viewBox="0 0 24 24"
879
+ width="1em"
880
+ xmlns="http://www.w3.org/2000/svg"
881
+ >
882
+ <path
883
+ d="M0 0h24v24H0V0z"
884
+ fill="none"
885
+ />
886
+ <path
887
+ d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
888
+ />
889
+ </svg>
890
+ </span>
891
+ <div
892
+ class="view texts"
893
+ >
894
+ <span
895
+ class="text bold paragraph"
896
+ >
897
+ Title
898
+ </span>
899
+ <span
900
+ class="text action"
901
+ >
902
+ Lorem Ipsum...
903
+ </span>
904
+ </div>
905
+ </div>
906
+ </DocumentFragment>
907
+ `;
908
+
620
909
  exports[`component:<Notification> prop:warning & inline 1`] = `
621
910
  <DocumentFragment>
622
911
  <div
package/build/primitives/Pressable/Pressable.module.css CHANGED
@@ -6,7 +6,6 @@
6
6
  display: inline-block;
7
7
  height: fit-content;
8
8
  margin: 0;
9
- overflow: hidden;
10
9
  padding: 0;
11
10
  user-select: none;
12
11
  width: fit-content;
package/build/theme/default.theme.css CHANGED
@@ -48,15 +48,19 @@
48
48
 
49
49
  --mirai-ui-error: #d32f2f;
50
50
  --mirai-ui-error-background: #fdeded;
51
+ --mirai-ui-error-border: #fbdbdb;
51
52
 
52
53
  --mirai-ui-warning: #663c00;
53
54
  --mirai-ui-warning-background: #fff4e5;
55
+ --mirai-ui-warning-border: #ffe8ca;
54
56
 
55
57
  --mirai-ui-success: #1e4620;
56
58
  --mirai-ui-success-background: #edf7ed;
59
+ --mirai-ui-success-border: #dcefdc;
57
60
 
58
61
  --mirai-ui-info: #014361;
59
62
  --mirai-ui-info-background: #e6f5fd;
63
+ --mirai-ui-info-border: #cceafa;
60
64
 
61
65
  /* spacing */
62
66
  --mirai-ui-space-XS: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.0.265",
3
+ "version": "1.0.266",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",