@volverjs/style 0.1.2-beta.9 → 0.1.3

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 (190) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +53 -46
  3. package/dist/components/vv-accordion-group.css +1 -0
  4. package/dist/components/vv-accordion.css +1 -1
  5. package/dist/components/vv-alert.css +1 -0
  6. package/dist/components/vv-avatar.css +1 -0
  7. package/dist/components/vv-badge.css +1 -1
  8. package/dist/components/vv-breadcrumb.css +1 -1
  9. package/dist/components/vv-button-group.css +1 -1
  10. package/dist/components/vv-button.css +1 -1
  11. package/dist/components/vv-card.css +1 -1
  12. package/dist/components/vv-checkbox-group.css +1 -0
  13. package/dist/components/vv-checkbox.css +1 -0
  14. package/dist/components/vv-dialog.css +1 -1
  15. package/dist/components/vv-dropdown.css +1 -1
  16. package/dist/components/vv-input-text.css +1 -1
  17. package/dist/components/vv-nav.css +1 -1
  18. package/dist/components/vv-progress.css +1 -1
  19. package/dist/components/vv-radio-group.css +1 -0
  20. package/dist/components/vv-radio.css +1 -0
  21. package/dist/components/vv-select.css +1 -1
  22. package/dist/components/vv-skeleton.css +1 -0
  23. package/dist/components/vv-tab.css +1 -0
  24. package/dist/components/vv-table.css +1 -1
  25. package/dist/components/vv-text.css +1 -1
  26. package/dist/components/vv-textarea.css +1 -1
  27. package/dist/components/vv-toast.css +1 -0
  28. package/dist/components/vv-tooltip.css +1 -0
  29. package/dist/components.css +1 -1
  30. package/dist/export.css +1 -1
  31. package/dist/props/background.css +1 -1
  32. package/dist/props/breakpoints.css +1 -0
  33. package/dist/props/colors.css +1 -1
  34. package/dist/props/effects.css +1 -1
  35. package/dist/props/filters.css +1 -1
  36. package/dist/props/input.css +1 -1
  37. package/dist/props/layout.css +1 -1
  38. package/dist/props/spacing.css +1 -1
  39. package/dist/props/transitions.css +1 -0
  40. package/dist/props.css +1 -1
  41. package/dist/themes/dark/components.css +1 -1
  42. package/dist/themes/dark/props.css +1 -1
  43. package/dist/themes/dark/volver.css +1 -1
  44. package/dist/utilities/backgrounds.css +1 -1
  45. package/dist/utilities/borders.css +1 -1
  46. package/dist/utilities/colors.css +1 -1
  47. package/dist/utilities/effects.css +1 -1
  48. package/dist/utilities/filters.css +1 -1
  49. package/dist/utilities/flexbox.css +1 -1
  50. package/dist/utilities/interactivity.css +1 -0
  51. package/dist/utilities/layout.css +1 -1
  52. package/dist/utilities/sizing.css +1 -1
  53. package/dist/utilities/spacing.css +1 -1
  54. package/dist/utilities/tables.css +1 -0
  55. package/dist/utilities/transforms.css +1 -0
  56. package/dist/utilities/transitions.css +1 -0
  57. package/dist/utilities/typography.css +1 -1
  58. package/dist/utilities.css +1 -1
  59. package/dist/volver.css +1 -1
  60. package/package.json +62 -36
  61. package/src/_config.scss +18 -11
  62. package/src/_context.scss +3 -3
  63. package/src/_preflight.scss +308 -247
  64. package/src/components/index.scss +26 -19
  65. package/src/components/vv-accordion-group.scss +13 -0
  66. package/src/components/vv-accordion.scss +3 -2
  67. package/src/components/vv-alert.scss +13 -0
  68. package/src/components/vv-avatar.scss +13 -0
  69. package/src/components/vv-badge.scss +3 -2
  70. package/src/components/vv-breadcrumb.scss +3 -2
  71. package/src/components/vv-button-group.scss +11 -10
  72. package/src/components/vv-button.scss +5 -8
  73. package/src/components/vv-card.scss +3 -2
  74. package/src/components/vv-checkbox-group.scss +13 -0
  75. package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} +7 -6
  76. package/src/components/vv-dialog.scss +3 -2
  77. package/src/components/vv-dropdown.scss +3 -2
  78. package/src/components/vv-input-text.scss +6 -5
  79. package/src/components/vv-nav.scss +3 -2
  80. package/src/components/vv-progress.scss +3 -2
  81. package/src/components/vv-radio-group.scss +13 -0
  82. package/src/components/{vv-input-radio.scss → vv-radio.scss} +6 -5
  83. package/src/components/vv-select.scss +6 -5
  84. package/src/components/vv-skeleton.scss +14 -0
  85. package/src/components/vv-tab.scss +13 -0
  86. package/src/components/vv-table.scss +3 -2
  87. package/src/components/vv-text.scss +3 -2
  88. package/src/components/vv-textarea.scss +6 -5
  89. package/src/components/vv-toast.scss +13 -0
  90. package/src/components/vv-tooltip.scss +33 -0
  91. package/src/export.scss +138 -27
  92. package/src/props/background.scss +1 -1
  93. package/src/props/borders.scss +1 -1
  94. package/src/props/breakpoints.scss +15 -0
  95. package/src/props/colors.scss +1 -1
  96. package/src/props/effects.scss +2 -1
  97. package/src/props/filters.scss +2 -1
  98. package/src/props/index.scss +13 -12
  99. package/src/props/input.scss +1 -1
  100. package/src/props/layout.scss +1 -1
  101. package/src/props/media.scss +1 -1
  102. package/src/props/sizing.scss +1 -1
  103. package/src/props/spacing.scss +2 -2
  104. package/src/props/{animation.scss → transitions.scss} +53 -2
  105. package/src/props/typography.scss +2 -2
  106. package/src/settings/_background.scss +6 -1
  107. package/src/settings/_breakpoints.scss +2 -0
  108. package/src/settings/_colors.scss +23 -4
  109. package/src/settings/_effects.scss +47 -2
  110. package/src/settings/_filters.scss +9 -0
  111. package/src/settings/_index.scss +43 -33
  112. package/src/settings/_input.scss +8 -6
  113. package/src/settings/_interactivity.scss +39 -0
  114. package/src/settings/_layout.scss +30 -10
  115. package/src/settings/_spacing.scss +1 -0
  116. package/src/settings/_tables.scss +11 -0
  117. package/src/settings/_transforms.scss +50 -0
  118. package/src/settings/_transitions.scss +44 -0
  119. package/src/settings/components/_vv-accordion-group.scss +5 -0
  120. package/src/settings/components/_vv-accordion.scss +49 -34
  121. package/src/settings/components/_vv-alert.scss +161 -0
  122. package/src/settings/components/_vv-avatar.scss +55 -0
  123. package/src/settings/components/_vv-badge.scss +43 -11
  124. package/src/settings/components/_vv-breadcrumb.scss +23 -15
  125. package/src/settings/components/_vv-button-group.scss +4 -0
  126. package/src/settings/components/_vv-button.scss +31 -26
  127. package/src/settings/components/_vv-card.scss +2 -2
  128. package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} +2 -1
  129. package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} +47 -12
  130. package/src/settings/components/_vv-dialog.scss +72 -90
  131. package/src/settings/components/_vv-input-text.scss +89 -43
  132. package/src/settings/components/_vv-nav.scss +98 -13
  133. package/src/settings/components/_vv-progress.scss +1 -1
  134. package/src/settings/components/_vv-radio-group.scss +3 -0
  135. package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} +35 -6
  136. package/src/settings/components/_vv-select.scss +39 -48
  137. package/src/settings/components/_vv-skeleton.scss +22 -0
  138. package/src/settings/components/_vv-tab.scss +16 -0
  139. package/src/settings/components/_vv-table.scss +8 -1
  140. package/src/settings/components/_vv-text.scss +20 -0
  141. package/src/settings/components/_vv-textarea.scss +53 -28
  142. package/src/settings/components/_vv-toast.scss +259 -0
  143. package/src/settings/components/_vv-tooltip.scss +74 -0
  144. package/src/themes/dark/_context.scss +7 -4
  145. package/src/themes/dark/components/_vv-button.scss +2 -4
  146. package/src/themes/dark/components/index.scss +1 -2
  147. package/src/themes/dark/props/_background.scss +1 -1
  148. package/src/themes/dark/props/_colors.scss +1 -1
  149. package/src/themes/dark/props/_input.scss +15 -0
  150. package/src/themes/dark/props/index.scss +3 -2
  151. package/src/themes/dark/settings/_background.scss +5 -0
  152. package/src/themes/dark/settings/_colors.scss +22 -2
  153. package/src/themes/dark/settings/_index.scss +4 -4
  154. package/src/themes/dark/settings/_input.scss +8 -0
  155. package/src/themes/dark/settings/components/_vv-button.scss +9 -9
  156. package/src/themes/dark/volver.scss +2 -2
  157. package/src/tools/_breakpoints.scss +7 -7
  158. package/src/tools/_functions.scss +95 -37
  159. package/src/tools/_index.scss +3 -3
  160. package/src/tools/_mixins.scss +166 -35
  161. package/src/utilities/backgrounds.scss +15 -8
  162. package/src/utilities/borders.scss +22 -9
  163. package/src/utilities/colors.scss +9 -5
  164. package/src/utilities/effects.scss +23 -5
  165. package/src/utilities/filters.scss +15 -4
  166. package/src/utilities/flexbox.scss +15 -8
  167. package/src/utilities/grid.scss +17 -9
  168. package/src/utilities/index.scss +15 -12
  169. package/src/utilities/interactivity.scss +10 -0
  170. package/src/utilities/layout.scss +45 -28
  171. package/src/utilities/sizing.scss +23 -26
  172. package/src/utilities/spacing.scss +1 -1
  173. package/src/utilities/tables.scss +15 -0
  174. package/src/utilities/transforms.scss +111 -0
  175. package/src/utilities/transitions.scss +47 -0
  176. package/src/utilities/typography.scss +34 -17
  177. package/src/volver.scss +4 -4
  178. package/dist/components/vv-input-checkbox-group.css +0 -1
  179. package/dist/components/vv-input-checkbox.css +0 -1
  180. package/dist/components/vv-input-radio-group.css +0 -1
  181. package/dist/components/vv-input-radio.css +0 -1
  182. package/dist/props/animation.css +0 -1
  183. package/dist/utilities/animation.css +0 -1
  184. package/src/components/vv-input-checkbox-group.scss +0 -12
  185. package/src/components/vv-input-radio-group.scss +0 -12
  186. package/src/settings/_animation.scss +0 -9
  187. package/src/settings/components/_vv-input-radio-group.scss +0 -1
  188. package/src/themes/dark/components/_vv-input-checkbox.scss +0 -24
  189. package/src/themes/dark/settings/components/_vv-input-checkbox.scss +0 -26
  190. package/src/utilities/animation.scss +0 -8
package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} RENAMED
@@ -1,6 +1,6 @@
1
- $vv-input-radio: (
1
+ $vv-radio: (
2
2
  display: inline-flex,
3
- flex-wrap: nowrap,
3
+ flex-wrap: wrap,
4
4
  align-items: center,
5
5
  cursor: pointer,
6
6
  user-select: none,
@@ -8,22 +8,39 @@ $vv-input-radio: (
8
8
  color: var(--input-color),
9
9
  font-size: var(--input-font-size),
10
10
  line-height: var(--input-line-height),
11
+ min-width: var(--input-min-width),
11
12
  state: (
12
13
  disabled: (
13
- opacity: 0.3,
14
+ opacity: var(--opacity-30),
14
15
  cursor: not-allowed,
15
16
  ),
17
+ ),
18
+ modifier: (
16
19
  readonly: (
17
- opacity: 1,
20
+ opacity: var(--opacity-100),
18
21
  cursor: default,
19
22
  pointer-events: none,
20
23
  ),
24
+ valid: (
25
+ element: (
26
+ hint: (
27
+ color: var(--input-valid-color),
28
+ ),
29
+ ),
30
+ ),
31
+ invalid: (
32
+ element: (
33
+ hint: (
34
+ color: var(--input-invalid-color),
35
+ ),
36
+ ),
37
+ ),
21
38
  ),
22
39
  element: (
23
40
  input: (
24
41
  _alias: "> input[type='radio']",
25
42
  border: var(--spacing-2) solid var(--input-color),
26
- width: var(--spacing-20),
43
+ min-width: var(--spacing-20),
27
44
  height: var(--spacing-20),
28
45
  border-radius: 50%,
29
46
  margin: 0 var(--input-label-gap) 0 0,
@@ -40,7 +57,7 @@ $vv-input-radio: (
40
57
  border-radius: 50%,
41
58
  transform: translate(-50%, -50%) scale(0),
42
59
  will-change: transform,
43
- transition: transform 0.3s ease-in-out,
60
+ transition: var(--transition-transform),
44
61
  ),
45
62
  ),
46
63
  state: (
@@ -57,5 +74,17 @@ $vv-input-radio: (
57
74
  ),
58
75
  ),
59
76
  ),
77
+ hint: (
78
+ _alias: '> small',
79
+ flex-basis: 100%,
80
+ display: var(--input-hint-display),
81
+ font-size: var(--input-hint-font-size),
82
+ color: var(--input-hint-color),
83
+ padding-top: var(--input-hint-gap),
84
+ white-space: var(--input-hint-white-space),
85
+ text-overflow: var(--input-hint-text-overflow),
86
+ overflow: var(--input-hint-overflow),
87
+ max-width: var(--input-hint-max-width),
88
+ ),
60
89
  ),
61
90
  ) !default;
package/src/settings/components/_vv-select.scss CHANGED
@@ -6,6 +6,7 @@ $vv-select: (
6
6
  font-size: var(--input-font-size),
7
7
  line-height: var(--input-line-height),
8
8
  user-select: none,
9
+ min-width: var(--input-min-width),
9
10
  element: (
10
11
  label: (
11
12
  _alias: '> label',
@@ -25,7 +26,7 @@ $vv-select: (
25
26
  flex: 1,
26
27
  background-color: var(--input-background-color),
27
28
  will-change: background-color,
28
- transition: background-color 0.3s ease-in-out,
29
+ transition: var(--transition-colors),
29
30
  pseudo: (
30
31
  before: (
31
32
  position: absolute,
@@ -41,7 +42,7 @@ $vv-select: (
41
42
  transform: scaleX(0),
42
43
  transform-origin: left,
43
44
  will-change: transform,
44
- transition: transform 0.3s ease-in-out,
45
+ transition: var(--transition-transform),
45
46
  ),
46
47
  ),
47
48
  state: (
@@ -68,26 +69,35 @@ $vv-select: (
68
69
  ),
69
70
  input: (
70
71
  _alias: 'select',
71
- display: block,
72
+ display: flex,
73
+ align-items: center,
72
74
  flex: 1,
73
75
  color: var(--input-placeholder-color),
74
- [padding]: var(--input-padding-top) var(--input-padding-right)
75
- var(--input-padding-bottom) var(--input-padding-left),
76
- min-height: var(--spacing-50),
76
+ [padding]: var(--input-spacing-top) var(--input-spacing-right)
77
+ var(--input-spacing-bottom) var(--input-spacing-left),
77
78
  background-image: var(--bg-chevron),
78
79
  background-repeat: no-repeat,
79
- [background-position]: right var(--input-padding-right) center,
80
+ [background-position]: right var(--input-spacing-right) center,
80
81
  background-size: 1em,
82
+ min-height: var(--spacing-50),
81
83
  state: (
82
84
  disabled: (
83
85
  cursor: not-allowed,
84
86
  ),
85
87
  ),
88
+ pseudo: (
89
+ marker: (
90
+ display: none,
91
+ ),
92
+ -webkit-details-marker: (
93
+ display: none,
94
+ ),
95
+ ),
86
96
  ),
87
97
  icon: (
88
98
  _alias: ':where(svg, [data-icon])',
89
- margin: var(--input-padding-top) var(--input-padding-right)
90
- var(--input-padding-bottom) var(--input-padding-left),
99
+ margin: var(--input-spacing-top) var(--input-spacing-right)
100
+ var(--input-spacing-bottom) var(--input-spacing-left),
91
101
  position: var(--input-icon-position),
92
102
  width: var(--input-icon-width),
93
103
  height: var(--input-icon-height),
@@ -120,10 +130,10 @@ $vv-select: (
120
130
  ),
121
131
  ),
122
132
  icon-left: (
123
- --input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
133
+ --input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
124
134
  ),
125
135
  icon-right: (
126
- --input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
136
+ --input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
127
137
  ),
128
138
  valid: (
129
139
  element: (
@@ -170,79 +180,60 @@ $vv-select: (
170
180
  background: var(--color-brand-lighten-5),
171
181
  ),
172
182
  after: (
173
- animation: var(--animate-indeterminate),
183
+ animation: var(--animation-indeterminate),
174
184
  ),
175
185
  ),
176
186
  ),
177
187
  ),
178
188
  ),
179
189
  floating: (
180
- [margin-left]: var(--input-padding-left),
181
- [margin-right]: var(--input-padding-right),
190
+ [margin-left]: var(--input-spacing-left),
191
+ [margin-right]: var(--input-spacing-right),
182
192
  element: (
183
193
  wrapper: (
184
- [margin-left]: calc(var(--input-padding-left) * -1),
185
- [margin-right]: calc(var(--input-padding-right) * -1),
194
+ [margin-left]: calc(var(--input-spacing-left) * -1),
195
+ [margin-right]: calc(var(--input-spacing-right) * -1),
186
196
  ),
187
197
  hint: (
188
- [margin-left]: calc(var(--input-padding-left) * -1),
189
- [margin-right]: calc(var(--input-padding-right) * -1),
198
+ [margin-left]: calc(var(--input-spacing-left) * -1),
199
+ [margin-right]: calc(var(--input-spacing-right) * -1),
190
200
  ),
191
201
  label: (
192
202
  position: absolute,
193
203
  z-index: 1,
194
204
  pointer-events: none,
195
205
  font-size: inherit,
196
- [padding-top]: var(--input-padding-top),
197
- [padding-bottom]: var(--input-padding-bottom),
206
+ [padding-top]: var(--input-spacing-top),
207
+ [padding-bottom]: var(--input-spacing-bottom),
198
208
  padding-inline: 0,
199
209
  margin: 0,
200
210
  will-change: 'transform',
201
211
  transform-origin: left,
202
- transition: all 0.3s ease-in-out,
212
+ transition: var(--transition-all),
203
213
  ),
204
214
  input: (
205
215
  pseudo: (
206
216
  placeholder: (
207
- opacity: 0,
217
+ opacity: var(--opacity-0),
208
218
  ),
209
219
  ),
210
220
  ),
211
221
  ),
212
222
  state: (
213
- focus-within: (
214
- element: (
215
- label: (
216
- transform: translateY(-1.2ch),
217
- font-size: var(--text-12),
218
- ),
219
- input: (
220
- [padding-top]:
221
- calc(var(--input-padding-top) + 0.85ch),
222
- [padding-bottom]:
223
- calc(var(--input-padding-bottom) - 0.85ch),
224
- pseudo: (
225
- placeholder: (
226
- opacity: 1,
227
- ),
228
- ),
229
- ),
230
- ),
231
- ),
232
223
  dirty: (
233
224
  element: (
234
225
  label: (
235
- transform: translateY(-1.2ch),
226
+ transform: translateY(-0.8em),
236
227
  font-size: var(--text-12),
237
228
  ),
238
229
  input: (
239
230
  [padding-top]:
240
- calc(var(--input-padding-top) + 0.85ch),
231
+ calc(var(--input-spacing-top) + 0.55em),
241
232
  [padding-bottom]:
242
- calc(var(--input-padding-bottom) - 0.85ch),
233
+ calc(var(--input-spacing-bottom) - 0.55em),
243
234
  pseudo: (
244
235
  placeholder: (
245
- opacity: 1,
236
+ opacity: var(--opacity-100),
246
237
  ),
247
238
  ),
248
239
  ),
@@ -251,13 +242,13 @@ $vv-select: (
251
242
  ),
252
243
  ),
253
244
  readonly: (
254
- opacity: 1,
245
+ opacity: var(--opacity-100),
255
246
  user-select: text,
256
247
  element: (
257
248
  wrapper: (
258
249
  pseudo: (
259
250
  after: (
260
- opacity: 0,
251
+ opacity: var(--opacity-0),
261
252
  ),
262
253
  ),
263
254
  state: (
@@ -275,7 +266,7 @@ $vv-select: (
275
266
  ),
276
267
  state: (
277
268
  disabled: (
278
- opacity: 0.5,
269
+ opacity: var(--opacity-50),
279
270
  element: (
280
271
  wrapper: (
281
272
  state: (
package/src/settings/components/_vv-skeleton.scss ADDED
@@ -0,0 +1,22 @@
1
+ $vv-skeleton: (
2
+ --skeleton-background: var(--color-surface-2),
3
+ --skeleton-shine-color: var(--color-surface),
4
+ display: grid,
5
+ gap: calc(1em * (var(--leading-normal) - 1)),
6
+ element: (
7
+ item: (
8
+ [background]:
9
+ linear-gradient(
10
+ 110deg,
11
+ var(--skeleton-background) 8%,
12
+ var(--skeleton-shine-color) 18%,
13
+ var(--skeleton-background) 33%
14
+ ),
15
+ [color]: transparent,
16
+ background-size: 200% 100%,
17
+ height: 1em,
18
+ border-radius: var(--rounded),
19
+ animation: var(--animation-shine),
20
+ ),
21
+ ),
22
+ ) !default;
package/src/settings/components/_vv-tab.scss ADDED
@@ -0,0 +1,16 @@
1
+ $vv-tab: (
2
+ display: flex,
3
+ flex-direction: column,
4
+ element: (
5
+ panel: (
6
+ display: none,
7
+ padding: var(--spacing-lg),
8
+ line-height: var(--leading-normal),
9
+ state: (
10
+ target: (
11
+ display: block,
12
+ ),
13
+ ),
14
+ ),
15
+ ),
16
+ ) !default;
package/src/settings/components/_vv-table.scss CHANGED
@@ -4,6 +4,11 @@ $vv-table: (
4
4
  border-collapse: collapse,
5
5
  border-color: var(--color-surface-5),
6
6
  element: (
7
+ caption: (
8
+ _alias: 'caption',
9
+ caption-side: bottom,
10
+ [padding]: var(--table-cell-padding),
11
+ ),
7
12
  tr: (
8
13
  _alias: 'tr',
9
14
  border-width: 0 0 1px 0,
@@ -21,15 +26,17 @@ $vv-table: (
21
26
  ),
22
27
  th: (
23
28
  _alias: 'th',
24
- font-weight: semibold,
29
+ font-weight: var(--font-semibold),
25
30
  font-size: var(--text-sm),
26
31
  color: var(--color-word-2),
32
+ vertical-align: middle,
27
33
  [padding]: var(--table-cell-padding),
28
34
  ),
29
35
  td: (
30
36
  _alias: 'td',
31
37
  border-style: solid,
32
38
  font-size: var(--text-xs),
39
+ vertical-align: middle,
33
40
  [padding]: var(--table-cell-padding),
34
41
  ),
35
42
  ),
package/src/settings/components/_vv-text.scss CHANGED
@@ -12,6 +12,26 @@ $vv-text: (
12
12
  copy: (
13
13
  margin-block: var(--spacing-16),
14
14
  ),
15
+ link: (
16
+ color: var(--color-brand),
17
+ state: (
18
+ focus-visible: (
19
+ outline: var(--spacing-px) solid var(--color-brand),
20
+ outline-offset: var(--spacing-4),
21
+ ),
22
+ hover: (
23
+ text-decoration: underline,
24
+ text-underline-offset: var(--spacing-4),
25
+ ),
26
+ active: (
27
+ color: var(--color-brand-darken-3),
28
+ ),
29
+ disabled: (
30
+ opacity: var(--opacity-50),
31
+ cursor: not-allowed,
32
+ ),
33
+ ),
34
+ ),
15
35
  quote: (
16
36
  font-family: var(--font-serif),
17
37
  border-left: var(--spacing-4) solid var(--color-surface-3),
package/src/settings/components/_vv-textarea.scss CHANGED
@@ -5,6 +5,7 @@ $vv-textarea: (
5
5
  margin-bottom: var(--input-gap),
6
6
  font-size: var(--input-font-size),
7
7
  line-height: var(--input-line-height),
8
+ min-width: var(--input-min-width),
8
9
  element: (
9
10
  label: (
10
11
  _alias: '> label',
@@ -17,6 +18,13 @@ $vv-textarea: (
17
18
  overflow: var(--input-label-overflow),
18
19
  max-width: var(--input-label-max-width),
19
20
  ),
21
+ limit: (
22
+ position: absolute,
23
+ right: var(--input-gap),
24
+ bottom: var(--input-gap),
25
+ font-size: var(--input-hint-font-size),
26
+ color: var(--input-hint-color),
27
+ ),
20
28
  wrapper: (
21
29
  position: relative,
22
30
  display: flex,
@@ -25,7 +33,8 @@ $vv-textarea: (
25
33
  overflow: hidden,
26
34
  background-color: var(--input-background-color),
27
35
  will-change: background-color,
28
- transition: background-color 0.3s ease-in-out,
36
+ transition: var(--transition-colors),
37
+ min-height: var(--spacing-50),
29
38
  pseudo: (
30
39
  before: (
31
40
  position: absolute,
@@ -41,7 +50,7 @@ $vv-textarea: (
41
50
  transform: scaleX(0),
42
51
  transform-origin: left,
43
52
  will-change: transform,
44
- transition: transform 0.3s ease-in-out,
53
+ transition: var(--transition-transform),
45
54
  ),
46
55
  ),
47
56
  state: (
@@ -63,9 +72,9 @@ $vv-textarea: (
63
72
  display: block,
64
73
  flex: 1,
65
74
  color: var(--input-color),
66
- [padding]: var(--input-padding-top) var(--input-padding-right)
67
- var(--input-padding-bottom) var(--input-padding-left),
68
- min-height: var(--spacing-50),
75
+ [padding]: var(--input-spacing-top) var(--input-spacing-right)
76
+ var(--input-spacing-bottom) var(--input-spacing-left),
77
+ overflow: auto,
69
78
  pseudo: (
70
79
  placeholder: (
71
80
  color: var(--input-placeholder-color),
@@ -82,8 +91,8 @@ $vv-textarea: (
82
91
  ),
83
92
  icon: (
84
93
  _alias: ':where(svg, [data-icon])',
85
- margin: var(--input-padding-top) var(--input-padding-right)
86
- var(--input-padding-bottom) var(--input-padding-left),
94
+ margin: var(--input-spacing-top) var(--input-spacing-right)
95
+ var(--input-spacing-bottom) var(--input-spacing-left),
87
96
  position: var(--input-icon-position),
88
97
  width: var(--input-icon-width),
89
98
  height: var(--input-icon-height),
@@ -117,10 +126,17 @@ $vv-textarea: (
117
126
  ),
118
127
  modifier: (
119
128
  icon-left: (
120
- --input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
129
+ --input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
121
130
  ),
122
131
  icon-right: (
123
- --input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
132
+ --input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
133
+ ),
134
+ resizable: (
135
+ element: (
136
+ input: (
137
+ resize: vertical,
138
+ ),
139
+ ),
124
140
  ),
125
141
  valid: (
126
142
  element: (
@@ -135,6 +151,9 @@ $vv-textarea: (
135
151
  hint: (
136
152
  color: var(--input-valid-color),
137
153
  ),
154
+ limit: (
155
+ color: var(--input-valid-color),
156
+ ),
138
157
  icon-right: (
139
158
  color: var(--input-valid-color),
140
159
  ),
@@ -153,6 +172,9 @@ $vv-textarea: (
153
172
  hint: (
154
173
  color: var(--input-invalid-color),
155
174
  ),
175
+ limit: (
176
+ color: var(--input-invalid-color),
177
+ ),
156
178
  icon-right: (
157
179
  color: var(--input-invalid-color),
158
180
  ),
@@ -167,41 +189,44 @@ $vv-textarea: (
167
189
  background: var(--color-brand-lighten-5),
168
190
  ),
169
191
  after: (
170
- animation: var(--animate-indeterminate),
192
+ animation: var(--animation-indeterminate),
171
193
  ),
172
194
  ),
173
195
  ),
174
196
  ),
175
197
  ),
176
198
  floating: (
177
- [margin-left]: var(--input-padding-left),
178
- [margin-right]: var(--input-padding-right),
199
+ [margin-left]: var(--input-spacing-left),
200
+ [margin-right]: var(--input-spacing-right),
179
201
  element: (
180
202
  wrapper: (
181
- [margin-left]: calc(var(--input-padding-left) * -1),
182
- [margin-right]: calc(var(--input-padding-right) * -1),
203
+ [margin-left]: calc(var(--input-spacing-left) * -1),
204
+ [margin-right]: calc(var(--input-spacing-right) * -1),
183
205
  ),
184
206
  hint: (
185
- [margin-left]: calc(var(--input-padding-left) * -1),
186
- [margin-right]: calc(var(--input-padding-right) * -1),
207
+ [margin-left]: calc(var(--input-spacing-left) * -1),
208
+ [margin-right]: calc(var(--input-spacing-right) * -1),
187
209
  ),
188
210
  label: (
189
211
  position: absolute,
190
212
  z-index: 1,
191
213
  pointer-events: none,
192
214
  font-size: inherit,
193
- [padding-top]: var(--input-padding-top),
194
- [padding-bottom]: var(--input-padding-bottom),
215
+ [padding-top]: var(--input-spacing-top),
216
+ [padding-bottom]: var(--input-spacing-bottom),
195
217
  padding-inline: 0,
196
218
  margin: 0,
197
219
  will-change: 'transform',
198
- transform-origin: left,
199
- transition: all 0.3s ease-in-out,
220
+ transition: var(--transition-all),
200
221
  ),
201
222
  input: (
223
+ will-change: 'transform',
224
+ transition: var(--transition-all),
202
225
  pseudo: (
203
226
  placeholder: (
204
- opacity: 0,
227
+ will-change: 'opacity',
228
+ transition: var(--transition-opacity),
229
+ opacity: var(--opacity-0),
205
230
  ),
206
231
  ),
207
232
  ),
@@ -210,14 +235,14 @@ $vv-textarea: (
210
235
  focus-within: (
211
236
  element: (
212
237
  label: (
213
- transform: translateY(-1.2ch),
238
+ transform: translateY(-0.8em),
214
239
  font-size: var(--text-12),
215
240
  ),
216
241
  input: (
217
- transform: translateY(0.85ch),
242
+ transform: translateY(0.55em),
218
243
  pseudo: (
219
244
  placeholder: (
220
- opacity: 1,
245
+ opacity: var(--opacity-100),
221
246
  ),
222
247
  ),
223
248
  ),
@@ -226,14 +251,14 @@ $vv-textarea: (
226
251
  dirty: (
227
252
  element: (
228
253
  label: (
229
- transform: translateY(-1.2ch),
254
+ transform: translateY(-0.8em),
230
255
  font-size: var(--text-12),
231
256
  ),
232
257
  input: (
233
- transform: translateY(0.85ch),
258
+ transform: translateY(0.55em),
234
259
  pseudo: (
235
260
  placeholder: (
236
- opacity: 1,
261
+ opacity: var(--opacity-100),
237
262
  ),
238
263
  ),
239
264
  ),
@@ -244,7 +269,7 @@ $vv-textarea: (
244
269
  ),
245
270
  state: (
246
271
  disabled: (
247
- opacity: 0.5,
272
+ opacity: var(--opacity-50),
248
273
  element: (
249
274
  wrapper: (
250
275
  state: (