@volverjs/style 0.1.9-beta.8 → 0.1.9

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 (30) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/components/vv-alert-group.css +1 -1
  3. package/dist/components/vv-alert.css +1 -1
  4. package/dist/components/vv-dialog.css +1 -1
  5. package/dist/components.css +1 -1
  6. package/dist/export.css +1 -1
  7. package/dist/props/colors.css +1 -1
  8. package/dist/props/sizing.css +1 -1
  9. package/dist/props/transitions.css +1 -1
  10. package/dist/props.css +1 -1
  11. package/dist/reset.css +1 -1
  12. package/dist/themes/dark/components.css +1 -1
  13. package/dist/themes/dark/volver.css +1 -1
  14. package/dist/utilities/colors.css +1 -1
  15. package/dist/utilities/sizing.css +1 -1
  16. package/dist/utilities.css +1 -1
  17. package/dist/volver.css +1 -1
  18. package/package.json +76 -76
  19. package/src/_preflight.scss +2 -2
  20. package/src/props/transitions.scss +10 -0
  21. package/src/reset.scss +1 -1
  22. package/src/settings/_colors.scss +1 -1
  23. package/src/settings/_sizing.scss +4 -4
  24. package/src/settings/components/_vv-alert-group.scss +31 -28
  25. package/src/settings/components/_vv-alert.scss +101 -59
  26. package/src/settings/components/_vv-dialog.scss +3 -3
  27. package/src/themes/dark/components/_vv-alert.scss +22 -0
  28. package/src/themes/dark/components/index.scss +1 -0
  29. package/src/themes/dark/settings/_index.scss +1 -0
  30. package/src/themes/dark/settings/components/_vv-alert.scss +94 -0
package/src/settings/components/_vv-alert.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $vv-alert: (
2
- --alert-pie-animation-duration: 3s,
2
+ --alert-duration: 3s,
3
3
  background-color: var(--color-surface-2),
4
4
  box-shadow: var(--shadow-lg),
5
5
  border-color: var(--color-gray-lighten-4),
@@ -19,11 +19,16 @@ $vv-alert: (
19
19
  display: flex,
20
20
  align-items: center,
21
21
  gap: var(--spacing-sm),
22
- line-height: var(--leading-none),
22
+ line-height: var(--leading-normal),
23
23
  color: var(--color-word),
24
+ overflow: hidden,
25
+ text-overflow: ellipsis,
24
26
  ),
25
27
  title: (
28
+ min-width: 0,
26
29
  font-weight: var(--font-bold),
30
+ overflow: hidden,
31
+ text-overflow: ellipsis,
27
32
  ),
28
33
  content: (
29
34
  line-height: var(--leading-normal),
@@ -45,58 +50,20 @@ $vv-alert: (
45
50
  background-size: 100% auto,
46
51
  background-repeat: no-repeat,
47
52
  align-self: center,
53
+ border-radius: var(--rounded),
48
54
  ),
49
55
  icon: (
50
56
  flex-shrink: 0,
51
57
  ),
52
- pie: (
53
- position: absolute,
54
- display: block,
55
- right: var(--spacing-10),
56
- width: 1.1em,
57
- height: 1.1em,
58
- background-color: var(--color-white),
59
- border: 1px solid var(--color-white),
60
- border-radius: 50%,
61
- overflow: hidden,
62
- opacity: var(--opacity-80),
63
- cursor: pointer,
64
- pseudo: (
65
- before: (
66
- position: absolute,
67
- top: 0,
68
- width: 50%,
69
- height: 100%,
70
- transform-origin: 100% 50%,
71
- background-color: var(--color-gray),
72
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
73
- will-change: transform,
74
- [animation]: spin var(--alert-pie-animation-duration) linear,
75
- ),
76
- after: (
77
- position: absolute,
78
- top: 0,
79
- width: 50%,
80
- height: 100%,
81
- background-color: var(--color-white),
82
- will-change: opacity,
83
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
84
- [animation]: pie-masks var(--alert-pie-animation-duration)
85
- steps(1, end),
86
- opacity: var(--opacity-0),
87
- ),
88
- ),
89
- ),
90
- pie-mask: (
58
+ close-mask: (
59
+ display: none,
91
60
  position: absolute,
92
61
  top: 0,
93
62
  width: 50%,
94
63
  height: 100%,
95
64
  left: 50%,
96
65
  background-color: var(--color-gray),
97
- will-change: opacity,
98
- [animation]: pie-masks var(--alert-pie-animation-duration)
99
- steps(1, end) reverse,
66
+ [animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
100
67
  z-index: 1,
101
68
  ),
102
69
  ),
@@ -106,10 +73,10 @@ $vv-alert: (
106
73
  background-color: var(--color-surface-success),
107
74
  element: (
108
75
  icon: (
109
- color: var(--color-success),
76
+ color: var(--color-success-darken-1),
110
77
  ),
111
78
  header: (
112
- color: var(--color-success),
79
+ color: var(--color-success-darken-1),
113
80
  ),
114
81
  ),
115
82
  ),
@@ -130,10 +97,10 @@ $vv-alert: (
130
97
  background-color: var(--color-surface-warning),
131
98
  element: (
132
99
  icon: (
133
- color: var(--color-warning-darken-2),
100
+ color: var(--color-warning-darken-5),
134
101
  ),
135
102
  header: (
136
- color: var(--color-warning-darken-2),
103
+ color: var(--color-warning-darken-5),
137
104
  ),
138
105
  ),
139
106
  ),
@@ -142,10 +109,10 @@ $vv-alert: (
142
109
  background-color: var(--color-surface-info),
143
110
  element: (
144
111
  icon: (
145
- color: var(--color-info-darken-2),
112
+ color: var(--color-info-darken-5),
146
113
  ),
147
114
  header: (
148
- color: var(--color-info-darken-2),
115
+ color: var(--color-info-darken-5),
149
116
  ),
150
117
  ),
151
118
  ),
@@ -166,10 +133,10 @@ $vv-alert: (
166
133
  background-color: var(--color-surface-brand),
167
134
  element: (
168
135
  icon: (
169
- color: var(--color-brand),
136
+ color: var(--color-brand-darken-2),
170
137
  ),
171
138
  header: (
172
- color: var(--color-brand),
139
+ color: var(--color-brand-darken-2),
173
140
  ),
174
141
  ),
175
142
  ),
@@ -177,17 +144,92 @@ $vv-alert: (
177
144
  position: relative,
178
145
  padding-right: calc(var(--spacing-md) * 2 + 1em),
179
146
  ),
147
+ nowrap: (
148
+ breakpoint: (
149
+ sm: (
150
+ flex-wrap: nowrap,
151
+ white-space: nowrap,
152
+ ),
153
+ ),
154
+ ),
155
+ auto-close: (
156
+ element: (
157
+ close: (
158
+ background-color: var(--color-white),
159
+ border: var(--border) solid var(--color-white),
160
+ border-radius: 50%,
161
+ overflow: hidden,
162
+ opacity: var(--opacity-80),
163
+ background-image: none,
164
+ background-size: 70% auto,
165
+ inline-size: 1.1em,
166
+ block-size: 1.1em,
167
+ [animation]: fade-out var(--alert-duration) forwards,
168
+ pseudo: (
169
+ before: (
170
+ position: absolute,
171
+ top: 0,
172
+ width: 50%,
173
+ height: 100%,
174
+ transform-origin: 100% 50%,
175
+ background-color: var(--color-gray),
176
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
177
+ [animation]: spin var(--alert-duration) linear,
178
+ ),
179
+ after: (
180
+ position: absolute,
181
+ top: 0,
182
+ width: 50%,
183
+ height: 100%,
184
+ background-color: var(--color-white),
185
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
186
+ [animation]: pie-masks var(--alert-duration)
187
+ steps(1, end),
188
+ opacity: var(--opacity-0),
189
+ ),
190
+ ),
191
+ ),
192
+ close-mask: (
193
+ display: block,
194
+ ),
195
+ ),
196
+ state: (
197
+ hover: (
198
+ element: (
199
+ close-mask: (
200
+ opacity: var(--opacity-0),
201
+ animation: none,
202
+ ),
203
+ close: (
204
+ border-radius: var(--rounded),
205
+ background-image: var(--bg-close),
206
+ animation: none,
207
+ pseudo: (
208
+ before: (
209
+ opacity: var(--opacity-0),
210
+ animation: none,
211
+ ),
212
+ after: (
213
+ opacity: var(--opacity-0),
214
+ animation: none,
215
+ ),
216
+ ),
217
+ ),
218
+ ),
219
+ ),
220
+ ),
221
+ ),
180
222
  notification: (
181
223
  padding: var(--spacing-0),
182
- width: clamp(15vw, 20rem, 80vw),
224
+ width: clamp(15dvw, 20rem, 80dvw),
183
225
  border-color: var(--color-gray),
184
226
  flex-direction: column,
185
227
  align-items: none,
186
228
  gap: var(--spacing-0),
187
229
  element: (
188
230
  header: (
189
- padding: var(--spacing-sm),
190
- background-color: var(--color-gray),
231
+ padding: var(--spacing-xs) var(--spacing-sm),
232
+ background-color: var(--color-gray-darken-1),
191
233
  color: var(--color-white),
192
234
  ),
193
235
  title: (
@@ -292,7 +334,7 @@ $vv-alert: (
292
334
  transition: (
293
335
  fade-inline-end: (
294
336
  active: (
295
- transition: var(--transition-transform),
337
+ transition: var(--transition-all),
296
338
  ),
297
339
  enter-from: (
298
340
  opacity: var(--opacity-0),
@@ -305,7 +347,7 @@ $vv-alert: (
305
347
  ),
306
348
  fade-inline-start: (
307
349
  active: (
308
- transition: var(--transition-transform),
350
+ transition: var(--transition-all),
309
351
  ),
310
352
  enter-from: (
311
353
  opacity: var(--opacity-0),
@@ -318,7 +360,7 @@ $vv-alert: (
318
360
  ),
319
361
  fade-block-top: (
320
362
  active: (
321
- transition: var(--transition-transform),
363
+ transition: var(--transition-all),
322
364
  ),
323
365
  enter-from: (
324
366
  opacity: var(--opacity-0),
@@ -331,7 +373,7 @@ $vv-alert: (
331
373
  ),
332
374
  fade-block-bottom: (
333
375
  active: (
334
- transition: var(--transition-transform),
376
+ transition: var(--transition-all),
335
377
  ),
336
378
  enter-from: (
337
379
  opacity: var(--opacity-0),
package/src/settings/components/_vv-dialog.scss CHANGED
@@ -26,8 +26,8 @@ $vv-dialog: (
26
26
  flex-direction: column,
27
27
  position: relative,
28
28
  box-shadow: var(--shadow-lg),
29
- width: clamp(30vw, 40rem, 90vw),
30
- max-height: 90vh,
29
+ width: clamp(30dvw, 40rem, 90dvw),
30
+ max-height: 90dvh,
31
31
  z-index: var(--z-modal),
32
32
  background: var(--color-surface),
33
33
  border-radius: var(--rounded-md),
@@ -145,7 +145,7 @@ $vv-dialog: (
145
145
  small: (
146
146
  element: (
147
147
  wrapper: (
148
- width: clamp(10vw, 25rem, 90vw),
148
+ width: clamp(10dvw, 25rem, 90dvw),
149
149
  ),
150
150
  ),
151
151
  ),
package/src/themes/dark/components/_vv-alert.scss ADDED
@@ -0,0 +1,22 @@
1
+ @use 'sass:map';
2
+ @use '../context' as *;
3
+
4
+ $component-name: map.get($components-names, vv-alert);
5
+ $component-map: $dark-vv-alert;
6
+
7
+ @mixin theme-dark-vv-alert {
8
+ @include spread-map-into-props(
9
+ $map: $component-map,
10
+ $prefix: $component-name
11
+ );
12
+ }
13
+
14
+ :where(:host, :root, .theme):not(.theme--light) {
15
+ @media (prefers-color-scheme: dark) {
16
+ @include theme-dark-vv-alert;
17
+ }
18
+ }
19
+
20
+ :where(.theme.theme--dark) {
21
+ @include theme-dark-vv-alert;
22
+ }
package/src/themes/dark/components/index.scss CHANGED
@@ -1 +1,2 @@
1
1
  @use 'vv-button';
2
+ @use 'vv-alert';
package/src/themes/dark/settings/_index.scss CHANGED
@@ -3,3 +3,4 @@
3
3
  @forward 'input';
4
4
 
5
5
  @forward 'components/vv-button';
6
+ @forward 'components/vv-alert';
package/src/themes/dark/settings/components/_vv-alert.scss ADDED
@@ -0,0 +1,94 @@
1
+ $dark-vv-alert: (
2
+ modifier: (
3
+ auto-close: (
4
+ element: (
5
+ close: (
6
+ background-color: var(--color-black),
7
+ pseudo: (
8
+ after: (
9
+ background-color: var(--color-black),
10
+ ),
11
+ ),
12
+ ),
13
+ ),
14
+ ),
15
+ success: (
16
+ element: (
17
+ header: (
18
+ color: var(--color-success-lighten-3),
19
+ ),
20
+ ),
21
+ ),
22
+ warning: (
23
+ element: (
24
+ header: (
25
+ color: var(--color-warning),
26
+ ),
27
+ ),
28
+ ),
29
+ danger: (
30
+ element: (
31
+ header: (
32
+ color: var(--color-danger-lighten-5),
33
+ ),
34
+ ),
35
+ ),
36
+ accent: (
37
+ element: (
38
+ header: (
39
+ color: var(--color-accent-lighten-4),
40
+ ),
41
+ ),
42
+ ),
43
+ brand: (
44
+ element: (
45
+ header: (
46
+ color: var(--color-brand-lighten-2),
47
+ ),
48
+ ),
49
+ ),
50
+ info: (
51
+ element: (
52
+ header: (
53
+ color: var(--color-info),
54
+ ),
55
+ ),
56
+ ),
57
+ notification: (
58
+ element: (
59
+ header: (
60
+ background-color: var(--color-gray-darken-2),
61
+ ),
62
+ ),
63
+ modifier: (
64
+ danger: (
65
+ border-color: var(--color-danger-lighten-3),
66
+ ),
67
+ brand: (
68
+ border-color: var(--color-brand-lighten-3),
69
+ ),
70
+ success: (
71
+ border-color: var(--color-success-lighten-3),
72
+ ),
73
+ accent: (
74
+ border-color: var(--color-accent-lighten-3),
75
+ ),
76
+ warning: (
77
+ element: (
78
+ header: (
79
+ background-color: var(--color-warning-darken-5),
80
+ ),
81
+ ),
82
+ ),
83
+ info: (
84
+ border-color: var(--color-info-darken-2),
85
+ element: (
86
+ header: (
87
+ background-color: var(--color-info-darken-5),
88
+ ),
89
+ ),
90
+ ),
91
+ ),
92
+ ),
93
+ ),
94
+ );