vanilla-jui 1.7.30 → 1.7.32

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 (45) hide show
  1. package/dist/index.d.ts +276 -334
  2. package/dist/index.js +1 -1
  3. package/dist/index.umd.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/package.json +8 -4
  6. package/src/components/accordion.ts +22 -8
  7. package/src/components/flow.ts +1 -1
  8. package/src/components/form.ts +1 -1
  9. package/src/components/modal.ts +1 -1
  10. package/src/components/offcanvas.ts +2 -2
  11. package/src/components/pagination.ts +5 -5
  12. package/src/components/tabs.ts +132 -16
  13. package/src/css/animation.css +7 -3
  14. package/src/css/card.css +10 -10
  15. package/src/css/font.css +3 -6
  16. package/src/css/icon.css +3 -20
  17. package/src/css/layout.css +11 -18
  18. package/src/css/status.css +39 -3
  19. package/src/css/themes/default/accordion.css +13 -45
  20. package/src/css/themes/default/avatar.css +2 -3
  21. package/src/css/themes/default/badge.css +14 -22
  22. package/src/css/themes/default/breadcrumb.css +11 -12
  23. package/src/css/themes/default/button.css +101 -159
  24. package/src/css/themes/default/editor.css +36 -36
  25. package/src/css/themes/default/flow.css +4 -4
  26. package/src/css/themes/default/form.css +110 -217
  27. package/src/css/themes/default/loading.css +48 -63
  28. package/src/css/themes/default/menu.css +17 -17
  29. package/src/css/themes/default/modal.css +9 -9
  30. package/src/css/themes/default/offcanvas.css +3 -3
  31. package/src/css/themes/default/swiper.css +18 -18
  32. package/src/css/themes/default/tabs.css +38 -24
  33. package/src/css/themes/default/theme-palette.css +22 -18
  34. package/src/css/themes/default/tip.css +24 -13
  35. package/src/css/themes/default/toast.css +65 -45
  36. package/src/css/themes/default/toolbar.css +2 -2
  37. package/src/css/themes/default/tooltip.css +3 -4
  38. package/src/css/tokens.css +89 -59
  39. package/src/css/tokens_/345/211/257/346/234/254.css +4 -4
  40. package/src/icons/index.ts +9 -7
  41. package/src/locales/index.ts +3 -1
  42. package/src/primitives/theme.ts +7 -10
  43. package/src/primitives/toast.ts +191 -107
  44. package/src/primitives/tooltip.ts +4 -4
  45. package/src/utilities/browser.ts +1 -1
package/src/css/themes/default/tip.css CHANGED
@@ -1,13 +1,14 @@
1
1
  @layer components {
2
2
  .j-tip {
3
- --tip-border-color: var(--ui-border);
4
- --tip-bg: var(--ui-bg);
3
+ --tip-border-color: var(--ui-border-subtle);
4
+ --tip-icon-shadow: var(--ui-bg-soft);
5
+ --tip-icon-bg: var(--ui-bg-soft);
5
6
 
6
- row-gap: var(--s2);
7
+ row-gap: 8px;
7
8
  width: 100%;
8
9
  border: 1px solid var(--tip-border-color);
9
10
  border-radius: var(--radius-md);
10
- padding: var(--s3) var(--s4);
11
+ padding: 12px 16px;
11
12
  font-size: var(--font-size-md);
12
13
  background: var(--tip-bg);
13
14
  box-shadow: var(--shadow-xs);
@@ -20,17 +21,19 @@
20
21
  }
21
22
 
22
23
  .j-tip:has(.tip-icon) {
23
- column-gap: var(--s3);
24
- grid-template-columns: var(--s4) 1fr;
24
+ column-gap: 16px;
25
+ grid-template-columns: 16px 1fr;
25
26
  }
26
27
 
27
28
  .j-font-md .j-tip:has(.tip-icon) {
28
- column-gap: var(--s5);
29
+ column-gap: 20px;
29
30
  }
30
31
 
31
32
  .j-tip .tip-icon {
32
- transform: translateY(calc(var(--space, 0.25rem) * 0.5));
33
- margin: 0;
33
+ transform: translateY(2px);
34
+ border-radius: 99px;
35
+ box-shadow: 0 0 0 3px var(--tip-icon-shadow);
36
+ background-color: var(--tip-icon-bg);
34
37
  }
35
38
 
36
39
  .j-tip .tip-icon,
@@ -75,25 +78,33 @@
75
78
 
76
79
  .j-tip.is-info {
77
80
  --tip-border-color: var(--state-info-border);
78
- --tip-bg: var(--state-info-soft);
81
+ --tip-bg: var(--state-info-subtle);
79
82
  --tip-fg: var(--state-info-text);
83
+ --tip-icon-shadow: var(--state-info-soft);
84
+ --tip-icon-bg: var(--state-info-soft);
80
85
  }
81
86
 
82
87
  .j-tip.is-success {
83
88
  --tip-border-color: var(--state-success-border);
84
- --tip-bg: var(--state-success-soft);
89
+ --tip-bg: var(--state-success-subtle);
85
90
  --tip-fg: var(--state-success-text);
91
+ --tip-icon-shadow: var(--state-success-soft);
92
+ --tip-icon-bg: var(--state-success-soft);
86
93
  }
87
94
 
88
95
  .j-tip.is-warning {
89
96
  --tip-border-color: var(--state-warning-border);
90
- --tip-bg: var(--state-warning-soft);
97
+ --tip-bg: var(--state-warning-subtle);
91
98
  --tip-fg: var(--state-warning-text);
99
+ --tip-icon-shadow: var(--state-warning-soft);
100
+ --tip-icon-bg: var(--state-warning-soft);
92
101
  }
93
102
 
94
103
  .j-tip.is-error {
95
104
  --tip-border-color: var(--state-error-border);
96
- --tip-bg: var(--state-error-soft);
105
+ --tip-bg: var(--state-error-subtle);
97
106
  --tip-fg: var(--state-error-text);
107
+ --tip-icon-shadow: var(--state-error-soft);
108
+ --tip-icon-bg: var(--state-error-soft);
98
109
  }
99
110
  }
package/src/css/themes/default/toast.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .j-toast-container {
3
- top: var(--s2);
4
- right: var(--s2);
3
+ top: 16px;
4
+ right: 16px;
5
5
  gap: var(--s2);
6
6
 
7
7
  position: fixed;
@@ -14,73 +14,92 @@
14
14
  pointer-events: none;
15
15
  }
16
16
 
17
+ body:has(#wpadminbar) .j-toast-container {
18
+ top: 32px;
19
+ }
20
+
17
21
  .j-toast {
18
22
  --toast-fg: var(--ui-fg);
19
23
  --toast-bg: var(--ui-bg);
20
- --toast-border-color: var(--ui-border-subtle);
21
24
 
22
- gap: var(--s2);
23
- padding: var(--s3) var(--s4);
25
+ padding: 12px 16px;
24
26
  box-shadow: var(--shadow-md);
25
- font-size: var(--font-size-md);
26
- font-weight: var(--font-medium);
27
- color: var(--toast-fg);
28
27
  background: var(--toast-bg);
29
- border: 1px solid var(--toast-border-color);
28
+ border: 1px solid var(--ui-border-soft);
30
29
  border-radius: var(--radius-md);
31
- min-width: 200px;
30
+ min-width: 240px;
32
31
  max-width: 310px;
33
32
  backdrop-filter: blur(4px);
34
33
 
35
- display: flex;
36
- align-items: center;
34
+ position: relative;
35
+ display: grid;
36
+ grid-template-columns: 0 1fr;
37
+ align-items: flex-start;
38
+ row-gap: 4px;
39
+
37
40
  word-break: break-all;
38
41
  cursor: pointer;
39
42
  pointer-events: auto;
40
43
  }
41
44
 
45
+ .j-toast:has(.el-icon) {
46
+ column-gap: 12px;
47
+ grid-template-columns: 16px 1fr;
48
+ }
49
+
42
50
  .j-toast .el-icon {
43
51
  width: var(--font-size-lg);
52
+ border-radius: 99px;
53
+ box-shadow: 0 0 0 3px var(--toast-icon-shadow);
54
+ background-color: var(--toast-icon-bg);
55
+ color: var(--toast-icon-fg);
44
56
 
57
+ margin-top: 2px;
45
58
  position: relative;
46
- color: inherit;
47
59
  }
48
60
 
49
- .j-toast .el-text {
50
- flex: 1;
61
+ .j-toast .toast-title {
62
+ color: var(--toast-fg);
63
+ font-size: var(--font-size-md);
64
+ font-weight: var(--font-medium);
65
+
51
66
  word-break: normal;
67
+ grid-column-start: 2;
68
+ margin: 0;
52
69
  }
53
70
 
54
- .j-toast.is-info {
55
- /* --toast-fg: var(--state-info-text); */
56
- /* --toast-bg: var(--state-info-soft); */
57
- /* --toast-border-color: var(--state-info-ring); */
71
+ .j-toast .toast-description {
72
+ grid-column-start: 2;
73
+ color: var(--tone-caption);
74
+ font-size: var(--font-size-sm);
75
+ }
58
76
 
59
- --toast-fg: var(--state-info);
77
+ .j-toast.is-info {
78
+ --toast-fg: var(--state-info-text);
79
+ --toast-icon-shadow: var(--state-info-soft);
80
+ --toast-icon-fg: var(--state-info-text);
81
+ --toast-icon-bg: var(--state-info-soft);
60
82
  }
61
83
 
62
84
  .j-toast.is-success {
63
- /* --toast-fg: var(--state-success-text); */
64
- /* --toast-bg: var(--state-success-soft); */
65
- /* --toast-border-color: var(--state-success-ring); */
66
-
67
- --toast-fg: var(--state-success);
85
+ --toast-fg: var(--state-success-text);
86
+ --toast-icon-shadow: var(--state-success-soft);
87
+ --toast-icon-fg: var(--state-success-text);
88
+ --toast-icon-bg: var(--state-success-soft);
68
89
  }
69
90
 
70
91
  .j-toast.is-warning {
71
- /* --toast-fg: var(--state-warning-text); */
72
- /* --toast-bg: var(--state-warning-soft); */
73
- /* --toast-border-color: var(--state-warning-ring); */
74
-
75
- --toast-fg: var(--state-warning);
92
+ --toast-fg: var(--state-warning-text);
93
+ --toast-icon-shadow: var(--state-warning-soft);
94
+ --toast-icon-fg: var(--state-warning-text);
95
+ --toast-icon-bg: var(--state-warning-soft);
76
96
  }
77
97
 
78
98
  .j-toast.is-error {
79
- /* --toast-fg: var(--state-error-text); */
80
- /* --toast-bg: var(--state-error-soft); */
81
- /* --toast-border-color: var(--state-error-ring); */
82
-
83
- --toast-fg: var(--state-error);
99
+ --toast-fg: var(--state-error-text);
100
+ --toast-icon-shadow: var(--state-error-soft);
101
+ --toast-icon-fg: var(--state-error-text);
102
+ --toast-icon-bg: var(--state-error-soft);
84
103
  }
85
104
 
86
105
  .j-toast-lite {
@@ -88,34 +107,35 @@
88
107
  color: var(--ui-bg);
89
108
  background: var(--ui-fg);
90
109
  border-radius: var(--radius-md);
91
- padding: var(--s2) var(--s3);
92
- max-width: calc(var(--screen-sm) / 2);
110
+ padding: var(--s2) 12px;
111
+ max-width: 288px;
112
+ z-index: var(--z-toast);
93
113
 
94
114
  position: fixed;
95
- top: 45%;
115
+ top: 40%;
96
116
  left: 50%;
97
- z-index: var(--z-toast);
117
+ transform: translate(-50%, -50%);
98
118
  width: fit-content;
99
119
  text-align: center;
120
+
100
121
  user-select: none;
101
122
  pointer-events: none;
102
- transform: translate(-50%, -50%);
103
123
  }
104
124
 
105
125
  .j-toast.is-confirm {
106
- /* --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent); */
107
-
108
- gap: var(--s4);
126
+ gap: var(--s2);
109
127
  min-width: 280px;
128
+ padding: 1rem;
110
129
 
130
+ display: flex;
111
131
  flex-direction: column;
112
132
  align-items: flex-start;
113
133
  cursor: default;
114
134
  }
115
135
 
116
- .j-toast.is-confirm .toast-buttons {
136
+ .j-toast .toast-btns {
117
137
  width: 100%;
118
- gap: var(--space);
138
+ gap: 4px;
119
139
 
120
140
  display: flex;
121
141
  justify-content: flex-end;
package/src/css/themes/default/toolbar.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --toolbar-justify: center;
21
21
 
22
22
  gap: 0;
23
- padding: var(--s2);
23
+ padding: 8px;
24
24
  box-shadow: var(--shadow-sm);
25
25
 
26
26
  position: relative;
@@ -77,4 +77,4 @@
77
77
  --toolbar-justify: flex-start;
78
78
  }
79
79
  }
80
- }
80
+ }
package/src/css/themes/default/tooltip.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .j-tooltip {
3
3
  --tooltip-fg: var(--ui-bg);
4
4
  --tooltip-bg: var(--ui-fg);
5
- --tooltip-border-color: var(--ui-border-strong);
5
+ --tooltip-border-color: var(--ui-border);
6
6
 
7
7
  background: var(--tooltip-bg);
8
8
  color: var(--tooltip-fg);
@@ -22,7 +22,7 @@
22
22
  --tooltip-border-color: var(--ui-border);
23
23
  }
24
24
 
25
- .j-tooltip.is-primary {
25
+ .j-tooltip.is-info {
26
26
  --tooltip-fg: var(--state-info-fg);
27
27
  --tooltip-bg: var(--state-info-text);
28
28
  --tooltip-border-color: var(--state-info-border);
@@ -47,12 +47,11 @@
47
47
  }
48
48
 
49
49
  .j-tooltip .el-text {
50
- padding: 2px var(--s2);
50
+ padding: 2px 8px;
51
51
  font-size: var(--font-size-md);
52
52
  line-height: var(--line-height);
53
53
 
54
54
  word-wrap: break-word;
55
- position: relative;
56
55
  }
57
56
 
58
57
  .drop-container:has(.j-tooltip) {