vanilla-jui 1.7.9 → 1.7.11

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 (62) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/accordion.ts +1 -1
  6. package/src/components/flow.ts +1 -1
  7. package/src/components/form.ts +1 -1
  8. package/src/components/modal.ts +1 -1
  9. package/src/css/index.css +1 -2
  10. package/src/css/layout.css +156 -63
  11. package/src/css/status.css +0 -1
  12. package/src/css/themes/default/accordion.css +37 -1
  13. package/src/css/themes/default/avatar.css +23 -1
  14. package/src/css/themes/default/badge.css +20 -3
  15. package/src/css/themes/default/breadcrumb.css +65 -1
  16. package/src/css/themes/default/button.css +64 -11
  17. package/src/css/themes/default/drop.css +19 -1
  18. package/src/css/themes/default/editor.css +781 -7
  19. package/src/css/themes/default/form.css +650 -2
  20. package/src/css/themes/default/index.css +17 -14
  21. package/src/css/themes/default/loading.css +144 -2
  22. package/src/css/themes/default/menu.css +113 -125
  23. package/src/css/themes/default/modal.css +26 -4
  24. package/src/css/themes/default/offcanvas.css +19 -1
  25. package/src/css/themes/default/pagination.css +13 -1
  26. package/src/css/themes/default/swiper.css +99 -1
  27. package/src/css/themes/default/tabs.css +50 -1
  28. package/src/css/themes/default/theme-palette.css +24 -1
  29. package/src/css/themes/default/tip.css +36 -1
  30. package/src/css/themes/default/toast.css +42 -1
  31. package/src/css/themes/default/toolbar.css +29 -1
  32. package/src/css/themes/default/tooltip.css +8 -2
  33. package/src/css/themes/default/tree.css +40 -3
  34. package/src/css/accordion.css +0 -47
  35. package/src/css/avatar.css +0 -27
  36. package/src/css/badge.css +0 -8
  37. package/src/css/breadcrumb.css +0 -71
  38. package/src/css/button.css +0 -32
  39. package/src/css/components.css +0 -28
  40. package/src/css/divider.css +0 -9
  41. package/src/css/drop.css +0 -21
  42. package/src/css/editor.css +0 -794
  43. package/src/css/form.css +0 -658
  44. package/src/css/loading.css +0 -150
  45. package/src/css/menu.css +0 -74
  46. package/src/css/modal.css +0 -33
  47. package/src/css/offcanvas.css +0 -23
  48. package/src/css/pagination.css +0 -15
  49. package/src/css/popup.css +0 -66
  50. package/src/css/skeleton.css +0 -72
  51. package/src/css/swiper.css +0 -107
  52. package/src/css/tabs.css +0 -58
  53. package/src/css/tag.css +0 -36
  54. package/src/css/theme-palette.css +0 -28
  55. package/src/css/themes/default/popup.css +0 -7
  56. package/src/css/themes/default/tag.css +0 -85
  57. package/src/css/tip.css +0 -40
  58. package/src/css/toast.css +0 -54
  59. package/src/css/toolbar.css +0 -34
  60. package/src/css/tooltip.css +0 -12
  61. package/src/css/tree.css +0 -51
  62. /package/src/css/{flow.css → themes/default/flow.css} +0 -0
package/src/css/themes/default/button.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer themes {
1
+ @layer components {
2
2
  .j-button {
3
3
  --btn-font-size: var(--font-size-md);
4
4
  --btn-height: var(--el-height-md);
@@ -7,7 +7,7 @@
7
7
  --btn-padding: 0 var(--s3);
8
8
  --btn-border-color: transparent;
9
9
  --btn-radius: var(--radius-md);
10
- --btn-box-shadow: var(--shadow-sm);
10
+ --btn-box-shadow: var(--shadow-xs);
11
11
 
12
12
  gap: var(--space);
13
13
  font-size: var(--btn-font-size);
@@ -22,6 +22,32 @@
22
22
  border-radius: var(--btn-radius);
23
23
  box-shadow: var(--btn-box-shadow);
24
24
  outline: none;
25
+ backdrop-filter: blur(4px);
26
+
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ flex-wrap: nowrap;
31
+ position: relative;
32
+ white-space: nowrap;
33
+ appearance: button;
34
+ user-select: none;
35
+ touch-action: manipulation;
36
+ }
37
+
38
+ .j-button .button-content {
39
+ display: contents;
40
+ position: relative;
41
+ }
42
+
43
+ .j-button svg {
44
+ width: var(--btn-font-size);
45
+ fill: currentColor;
46
+ }
47
+
48
+ .j-button a,
49
+ .j-button a:hover {
50
+ color: inherit;
25
51
  }
26
52
 
27
53
  .j-button.is-xs {
@@ -59,17 +85,24 @@
59
85
  --btn-bg: var(--ui-fg);
60
86
  }
61
87
 
62
- .j-button.is-primary {
88
+ .j-button.is-solid {
63
89
  --btn-fg: var(--tone-fg);
64
90
  --btn-bg: var(--tone-solid);
91
+ --btn-border-color: var(--tone-solid);
65
92
  }
66
93
 
67
- .j-button.is-secondary {
94
+ .j-button.is-soft {
68
95
  --btn-fg: var(--tone-text);
69
96
  --btn-bg: var(--tone-soft);
70
97
  --btn-border-color: transparent;
71
98
  }
72
99
 
100
+ .j-button.is-wash {
101
+ --btn-fg: var(--tone-text);
102
+ --btn-bg: var(--tone-wash);
103
+ --btn-border-color: var(--tone-wash);
104
+ }
105
+
73
106
  .j-button.is-outline {
74
107
  --btn-bg: var(--tone-card);
75
108
  --btn-border-color: var(--tone-solid);
@@ -91,6 +124,16 @@
91
124
  --btn-padding: var(--icon-padding, 0);
92
125
  }
93
126
 
127
+ .j-button.is-primary {
128
+ --btn-bg: var(--state-info);
129
+ --btn-fg: var(--state-info-fg);
130
+ }
131
+
132
+ .j-button.is-success {
133
+ --btn-bg: var(--state-success);
134
+ --btn-fg: var(--state-success-fg);
135
+ }
136
+
94
137
  .j-button.is-danger {
95
138
  --btn-bg: var(--state-danger);
96
139
  --btn-fg: var(--state-danger-fg);
@@ -101,11 +144,6 @@
101
144
  --btn-fg: var(--state-warning-fg);
102
145
  }
103
146
 
104
- .j-button.is-success {
105
- --btn-bg: var(--state-success);
106
- --btn-fg: var(--state-success-fg);
107
- }
108
-
109
147
  .j-button.is-error {
110
148
  --btn-bg: var(--state-danger-subtle);
111
149
  --btn-fg: var(--state-danger-text);
@@ -135,6 +173,8 @@
135
173
  margin: 0;
136
174
  box-shadow: var(--shadow-sm);
137
175
  border-radius: var(--btn-radius);
176
+
177
+ display: flex;
138
178
  }
139
179
 
140
180
  /* status */
@@ -170,6 +210,14 @@
170
210
  --btn-box-shadow: 0 0 0 4px var(--tone-card-active);
171
211
  }
172
212
 
213
+ .j-button.is-primary:not(:disabled).is-active,
214
+ .j-button.is-primary:not(:disabled):focus,
215
+ .j-button.is-primary:not(:disabled):focus-within,
216
+ .j-button.is-primary:not(:disabled):focus-visible {
217
+ --btn-border-color: transparent;
218
+ --btn-box-shadow: 0 0 0 4px var(--state-info-ring);
219
+ }
220
+
173
221
  .j-button.is-success:not(:disabled).is-active,
174
222
  .j-button.is-success:not(:disabled):focus,
175
223
  .j-button.is-success:not(:disabled):focus-within,
@@ -189,13 +237,18 @@
189
237
  .j-button.is-danger:not(:disabled).is-active,
190
238
  .j-button.is-danger:not(:disabled):focus,
191
239
  .j-button.is-danger:not(:disabled):focus-within,
192
- .j-button.is-danger:not(:disabled):focus-visible,
240
+ .j-button.is-danger:not(:disabled):focus-visible {
241
+ --btn-border-color: transparent;
242
+ --btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
243
+ }
244
+
193
245
  .j-button.is-error:not(:disabled).is-active,
194
246
  .j-button.is-error:not(:disabled):focus,
195
247
  .j-button.is-error:not(:disabled):focus-within,
196
248
  .j-button.is-error:not(:disabled):focus-visible {
197
249
  --btn-border-color: transparent;
198
- --btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
250
+ --btn-box-shadow:
251
+ 0 0 0 1px currentColor, 0 0 0 4px var(--state-danger-ring);
199
252
  }
200
253
 
201
254
  .j-button.is-default:hover:not(:disabled) {
package/src/css/themes/default/drop.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer themes {
1
+ @layer components {
2
2
  .drop-container {
3
3
  border-width: 1px;
4
4
  border-style: solid;
@@ -9,5 +9,23 @@
9
9
  box-shadow: var(--shadow-sm);
10
10
  min-width: 64px;
11
11
  min-height: 32px;
12
+
13
+ position: relative;
14
+ }
15
+
16
+ .j-drop {
17
+ display: none;
18
+ position: absolute;
19
+ top: 0;
20
+ left: 0;
21
+ opacity: 0;
22
+ pointer-events: none;
23
+ z-index: var(--z-drop);
24
+ }
25
+
26
+ .j-drop[aria-expanded='true'] {
27
+ display: block;
28
+ opacity: 1;
29
+ pointer-events: auto;
12
30
  }
13
31
  }