@volverjs/style 0.1.9-beta.8 → 0.1.9-beta.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 (27) 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/themes/dark/components.css +1 -1
  12. package/dist/themes/dark/volver.css +1 -1
  13. package/dist/utilities/colors.css +1 -1
  14. package/dist/utilities/sizing.css +1 -1
  15. package/dist/utilities.css +1 -1
  16. package/dist/volver.css +1 -1
  17. package/package.json +1 -1
  18. package/src/props/transitions.scss +10 -0
  19. package/src/settings/_colors.scss +1 -1
  20. package/src/settings/_sizing.scss +4 -4
  21. package/src/settings/components/_vv-alert-group.scss +31 -28
  22. package/src/settings/components/_vv-alert.scss +91 -57
  23. package/src/settings/components/_vv-dialog.scss +3 -3
  24. package/src/themes/dark/components/_vv-alert.scss +22 -0
  25. package/src/themes/dark/components/index.scss +1 -0
  26. package/src/themes/dark/settings/_index.scss +1 -0
  27. package/src/themes/dark/settings/components/_vv-alert.scss +94 -0
package/package.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "bugs": {
25
25
  "url": "https://github.com/volverjs/style/issues"
26
26
  },
27
- "version": "0.1.9-beta.8",
27
+ "version": "0.1.9-beta.9",
28
28
  "engines": {
29
29
  "node": ">= 12.x"
30
30
  },
package/src/props/transitions.scss CHANGED
@@ -130,6 +130,16 @@
130
130
  }
131
131
  }
132
132
 
133
+ @keyframes fade-out {
134
+ 95% {
135
+ opacity: 1;
136
+ }
137
+
138
+ 100% {
139
+ opacity: 0;
140
+ }
141
+ }
142
+
133
143
  @keyframes shine {
134
144
  to {
135
145
  background-position-x: -200%;
package/src/settings/_colors.scss CHANGED
@@ -12,7 +12,7 @@ $color-accent: #9c27b0 !default;
12
12
  $color-success: #178230 !default;
13
13
  $color-danger: #af2323 !default;
14
14
  $color-info: #31ccec !default;
15
- $color-warning: #f2c037 !default;
15
+ $color-warning: #e7b735 !default;
16
16
  $color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
17
17
  $color-word: hsl(color.hue($color-brand) 15% 10%) !default;
18
18
  $color-surface: hsl(color.hue($color-brand) 10% 98%) !default;
package/src/settings/_sizing.scss CHANGED
@@ -28,7 +28,7 @@ $width: (
28
28
  10\/12: 83.3333%,
29
29
  11\/12: 91.6667%,
30
30
  full: 100%,
31
- screen: 100vw,
31
+ screen: 100dvw,
32
32
  min: min-content,
33
33
  max: max-content,
34
34
  fit: fit-content,
@@ -53,7 +53,7 @@ $height: (
53
53
  4\/6: 66.6667%,
54
54
  5\/6: 83.3333%,
55
55
  full: 100%,
56
- screen: 100vh,
56
+ screen: 100dvh,
57
57
  min: min-content,
58
58
  max: max-content,
59
59
  fit: fit-content,
@@ -73,7 +73,7 @@ $max-width: (
73
73
  // max-height
74
74
  $max-height: (
75
75
  full: 100%,
76
- screen: 100vh,
76
+ screen: 100dvh,
77
77
  min: min-content,
78
78
  max: max-content,
79
79
  fit: fit-content,
@@ -92,7 +92,7 @@ $min-width: (
92
92
  $min-height: (
93
93
  0: 0px,
94
94
  full: 100%,
95
- screen: 100vh,
95
+ screen: 100dvh,
96
96
  min: min-content,
97
97
  max: max-content,
98
98
  fit: fit-content,
package/src/settings/components/_vv-alert-group.scss CHANGED
@@ -4,50 +4,58 @@ $vv-alert-group: (
4
4
  display: flex,
5
5
  flex-direction: column,
6
6
  gap: var(--spacing-sm),
7
+ overflow: hidden,
7
8
  element: (
8
9
  list: (
9
- _alias: '> ul',
10
+ _alias: '> [role="group"]',
10
11
  display: flex,
11
12
  flex-direction: column,
12
13
  gap: var(--spacing-xs),
13
14
  ),
14
15
  item: (
15
- _alias: '> ul > li',
16
+ _alias: '> [role="group"] > *',
16
17
  transition: var(--transition-all),
18
+ flex-shrink: 0,
17
19
  ),
18
20
  not-first: (
19
- _alias: '> ul > li:not(:first-child)',
21
+ _alias: '> [role="group"] > *:not(:first-child)',
20
22
  ),
21
23
  nth-1: (
22
24
  --alert-counter: 1,
23
- _alias: '> ul > li:nth-child(1)',
25
+ _alias: '> [role="group"] > *:nth-child(1)',
24
26
  ),
25
27
  nth-2: (
26
28
  --alert-counter: 2,
27
- _alias: '> ul > li:nth-child(2)',
29
+ _alias: '> [role="group"] > *:nth-child(2)',
28
30
  ),
29
31
  nth-3: (
30
32
  --alert-counter: 3,
31
- _alias: '> ul > li:nth-child(3)',
33
+ _alias: '> [role="group"] > *:nth-child(3)',
32
34
  ),
33
35
  nth-4: (
34
36
  --alert-counter: 4,
35
- _alias: '> ul > li:nth-child(4)',
37
+ _alias: '> [role="group"] > *:nth-child(4)',
36
38
  ),
37
39
  nth-5: (
38
40
  --alert-counter: 5,
39
- _alias: '> ul > li:nth-child(5)',
41
+ _alias: '> [role="group"] > *:nth-child(5)',
40
42
  ),
41
43
  nth-other: (
42
- _alias: '> ul > li:nth-child(n+6)',
44
+ _alias: '> [role="group"] > *:nth-child(n+6)',
43
45
  ),
44
46
  ),
45
47
  modifier: (
46
48
  fixed: (
47
49
  position: fixed,
50
+ padding: var(--spacing-lg),
51
+ max-width: var(--w-full),
52
+ max-height: var(--h-full),
48
53
  ),
49
54
  absolute: (
50
55
  position: absolute,
56
+ padding: var(--spacing-lg),
57
+ max-width: var(--w-full),
58
+ max-height: var(--h-full),
51
59
  ),
52
60
  reverse: (
53
61
  flex-flow: column-reverse,
@@ -58,22 +66,22 @@ $vv-alert-group: (
58
66
  ),
59
67
  ),
60
68
  top-start: (
61
- inset-block: var(--spacing-lg) auto,
62
- inset-inline: var(--spacing-lg) auto,
69
+ inset-block: 0 auto,
70
+ inset-inline: 0 auto,
63
71
  ),
64
72
  top-middle: (
65
- inset-block: var(--spacing-lg) auto,
73
+ inset-block: 0 auto,
66
74
  inset-inline: 50% auto,
67
75
  transform: translateX(-50%),
68
76
  ),
69
77
  top-end: (
70
- inset-block: var(--spacing-lg) auto,
71
- inset-inline: auto var(--spacing-lg),
78
+ inset-block: 0 auto,
79
+ inset-inline: auto 0,
72
80
  ),
73
81
  center-start: (
74
82
  inset-block: 50% auto,
75
83
  transform: translateY(-50%),
76
- inset-inline: var(--spacing-lg) auto,
84
+ inset-inline: 0 auto,
77
85
  ),
78
86
  center-middle: (
79
87
  inset-block: 50% auto,
@@ -82,24 +90,24 @@ $vv-alert-group: (
82
90
  ),
83
91
  center-end: (
84
92
  inset-block: 50% auto,
93
+ inset-inline: auto 0,
85
94
  transform: translateY(-50%),
86
- inset-inline: auto var(--spacing-lg),
87
95
  ),
88
96
  bottom-start: (
89
- inset-block: auto var(--spacing-lg),
90
- inset-inline: var(--spacing-lg) auto,
97
+ inset-block: auto 0,
98
+ inset-inline: 0 auto,
91
99
  ),
92
100
  bottom-middle: (
93
- inset-block: auto var(--spacing-lg),
101
+ inset-block: auto 0,
94
102
  inset-inline: 50% auto,
95
103
  transform: translateX(-50%),
96
104
  ),
97
105
  bottom-end: (
98
- inset-block: auto var(--spacing-lg),
99
- inset-inline: auto var(--spacing-lg),
106
+ inset-block: auto 0,
107
+ inset-inline: auto 0,
100
108
  ),
101
109
  full-bleed: (
102
- width: clamp(15vw, 20rem, 80vw),
110
+ width: clamp(15dvw, 20rem, 80dvw),
103
111
  ),
104
112
  stack: (
105
113
  element: (
@@ -122,18 +130,13 @@ $vv-alert-group: (
122
130
  filter: grayscale(100%),
123
131
  ),
124
132
  nth-other: (
125
- display: none,
133
+ opacity: 0,
126
134
  ),
127
135
  ),
128
136
  state: (
129
137
  hover: (
130
138
  element: (
131
- item: (
132
- flex-wrap: wrap,
133
- white-space: wrap,
134
- ),
135
139
  not-first: (
136
- height: auto,
137
140
  transform: none,
138
141
  filter: none,
139
142
  ),
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),
@@ -21,9 +21,14 @@ $vv-alert: (
21
21
  gap: var(--spacing-sm),
22
22
  line-height: var(--leading-none),
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,9 +144,76 @@ $vv-alert: (
177
144
  position: relative,
178
145
  padding-right: calc(var(--spacing-md) * 2 + 1em),
179
146
  ),
147
+ auto-close: (
148
+ element: (
149
+ close: (
150
+ background-color: var(--color-white),
151
+ border: var(--border) solid var(--color-white),
152
+ border-radius: 50%,
153
+ overflow: hidden,
154
+ opacity: var(--opacity-80),
155
+ background-image: none,
156
+ background-size: 70% auto,
157
+ inline-size: 1.1em,
158
+ block-size: 1.1em,
159
+ [animation]: fade-out var(--alert-duration) forwards,
160
+ pseudo: (
161
+ before: (
162
+ position: absolute,
163
+ top: 0,
164
+ width: 50%,
165
+ height: 100%,
166
+ transform-origin: 100% 50%,
167
+ background-color: var(--color-gray),
168
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
169
+ [animation]: spin var(--alert-duration) linear,
170
+ ),
171
+ after: (
172
+ position: absolute,
173
+ top: 0,
174
+ width: 50%,
175
+ height: 100%,
176
+ background-color: var(--color-white),
177
+ border-radius: 100% 0 0 100% / 50% 0 0 50%,
178
+ [animation]: pie-masks var(--alert-duration)
179
+ steps(1, end),
180
+ opacity: var(--opacity-0),
181
+ ),
182
+ ),
183
+ ),
184
+ close-mask: (
185
+ display: block,
186
+ ),
187
+ ),
188
+ state: (
189
+ hover: (
190
+ element: (
191
+ close-mask: (
192
+ opacity: var(--opacity-0),
193
+ animation: none,
194
+ ),
195
+ close: (
196
+ border-radius: var(--rounded),
197
+ background-image: var(--bg-close),
198
+ animation: none,
199
+ pseudo: (
200
+ before: (
201
+ opacity: var(--opacity-0),
202
+ animation: none,
203
+ ),
204
+ after: (
205
+ opacity: var(--opacity-0),
206
+ animation: none,
207
+ ),
208
+ ),
209
+ ),
210
+ ),
211
+ ),
212
+ ),
213
+ ),
180
214
  notification: (
181
215
  padding: var(--spacing-0),
182
- width: clamp(15vw, 20rem, 80vw),
216
+ width: clamp(15dvw, 20rem, 80dvw),
183
217
  border-color: var(--color-gray),
184
218
  flex-direction: column,
185
219
  align-items: none,
@@ -187,7 +221,7 @@ $vv-alert: (
187
221
  element: (
188
222
  header: (
189
223
  padding: var(--spacing-sm),
190
- background-color: var(--color-gray),
224
+ background-color: var(--color-gray-darken-1),
191
225
  color: var(--color-white),
192
226
  ),
193
227
  title: (
@@ -292,7 +326,7 @@ $vv-alert: (
292
326
  transition: (
293
327
  fade-inline-end: (
294
328
  active: (
295
- transition: var(--transition-transform),
329
+ transition: var(--transition-all),
296
330
  ),
297
331
  enter-from: (
298
332
  opacity: var(--opacity-0),
@@ -305,7 +339,7 @@ $vv-alert: (
305
339
  ),
306
340
  fade-inline-start: (
307
341
  active: (
308
- transition: var(--transition-transform),
342
+ transition: var(--transition-all),
309
343
  ),
310
344
  enter-from: (
311
345
  opacity: var(--opacity-0),
@@ -318,7 +352,7 @@ $vv-alert: (
318
352
  ),
319
353
  fade-block-top: (
320
354
  active: (
321
- transition: var(--transition-transform),
355
+ transition: var(--transition-all),
322
356
  ),
323
357
  enter-from: (
324
358
  opacity: var(--opacity-0),
@@ -331,7 +365,7 @@ $vv-alert: (
331
365
  ),
332
366
  fade-block-bottom: (
333
367
  active: (
334
- transition: var(--transition-transform),
368
+ transition: var(--transition-all),
335
369
  ),
336
370
  enter-from: (
337
371
  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
+ );