@volverjs/style 0.1.2-beta.3 → 0.1.2-beta.30

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 (188) hide show
  1. package/README.md +40 -40
  2. package/dist/components/vv-accordion.css +1 -0
  3. package/dist/components/vv-alert.css +1 -0
  4. package/dist/components/vv-avatar.css +1 -0
  5. package/dist/components/vv-badge.css +1 -1
  6. package/dist/components/vv-breadcrumb.css +1 -0
  7. package/dist/components/vv-button-group.css +1 -1
  8. package/dist/components/vv-button.css +1 -1
  9. package/dist/components/vv-card.css +1 -1
  10. package/dist/components/vv-checkbox-group.css +1 -0
  11. package/dist/components/vv-checkbox.css +1 -0
  12. package/dist/components/vv-dialog.css +1 -1
  13. package/dist/components/vv-dropdown.css +1 -1
  14. package/dist/components/vv-input-text.css +1 -1
  15. package/dist/components/vv-nav.css +1 -0
  16. package/dist/components/vv-progress.css +1 -1
  17. package/dist/components/vv-radio-group.css +1 -0
  18. package/dist/components/vv-radio.css +1 -0
  19. package/dist/components/vv-select.css +1 -1
  20. package/dist/components/vv-skeleton.css +1 -0
  21. package/dist/components/vv-tab.css +1 -0
  22. package/dist/components/vv-table.css +1 -1
  23. package/dist/components/vv-text.css +1 -1
  24. package/dist/components/vv-textarea.css +1 -1
  25. package/dist/components/vv-toast.css +1 -0
  26. package/dist/components/vv-tooltip.css +1 -0
  27. package/dist/components.css +1 -1
  28. package/dist/export.css +1 -1
  29. package/dist/props/background.css +1 -1
  30. package/dist/props/colors.css +1 -1
  31. package/dist/props/filters.css +1 -1
  32. package/dist/props/input.css +1 -1
  33. package/dist/props/spacing.css +1 -1
  34. package/dist/props/transitions.css +1 -0
  35. package/dist/props.css +1 -1
  36. package/dist/reset.css +1 -1
  37. package/dist/themes/dark/components.css +1 -1
  38. package/dist/themes/dark/props.css +1 -1
  39. package/dist/themes/dark/volver.css +1 -0
  40. package/dist/utilities/backgrounds.css +1 -1
  41. package/dist/utilities/borders.css +1 -1
  42. package/dist/utilities/colors.css +1 -1
  43. package/dist/utilities/effects.css +1 -1
  44. package/dist/utilities/filters.css +1 -1
  45. package/dist/utilities/flexbox.css +1 -1
  46. package/dist/utilities/grid.css +1 -1
  47. package/dist/utilities/interactivity.css +1 -0
  48. package/dist/utilities/layout.css +1 -1
  49. package/dist/utilities/sizing.css +1 -1
  50. package/dist/utilities/spacing.css +1 -1
  51. package/dist/utilities/transitions.css +1 -0
  52. package/dist/utilities/typography.css +1 -1
  53. package/dist/utilities.css +1 -1
  54. package/dist/volver.css +1 -0
  55. package/package.json +163 -118
  56. package/src/_config.scss +19 -11
  57. package/src/_context.scss +3 -3
  58. package/src/_preflight.scss +412 -0
  59. package/src/components/index.scss +25 -17
  60. package/src/components/vv-accordion.scss +13 -0
  61. package/src/components/vv-alert.scss +13 -0
  62. package/src/components/vv-avatar.scss +13 -0
  63. package/src/components/vv-badge.scss +3 -2
  64. package/src/components/vv-breadcrumb.scss +13 -0
  65. package/src/components/vv-button-group.scss +15 -18
  66. package/src/components/vv-button.scss +5 -8
  67. package/src/components/vv-card.scss +3 -2
  68. package/src/components/vv-checkbox-group.scss +13 -0
  69. package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} +7 -6
  70. package/src/components/vv-dialog.scss +3 -2
  71. package/src/components/vv-dropdown.scss +3 -2
  72. package/src/components/vv-input-text.scss +6 -5
  73. package/src/components/vv-nav.scss +13 -0
  74. package/src/components/vv-progress.scss +3 -2
  75. package/src/components/vv-radio-group.scss +13 -0
  76. package/src/components/{vv-input-radio.scss → vv-radio.scss} +6 -5
  77. package/src/components/vv-select.scss +6 -5
  78. package/src/components/vv-skeleton.scss +14 -0
  79. package/src/components/vv-tab.scss +13 -0
  80. package/src/components/vv-table.scss +3 -2
  81. package/src/components/vv-text.scss +3 -2
  82. package/src/components/vv-textarea.scss +6 -5
  83. package/src/components/vv-toast.scss +13 -0
  84. package/src/components/vv-tooltip.scss +33 -0
  85. package/src/export.scss +62 -6
  86. package/src/props/background.scss +1 -1
  87. package/src/props/borders.scss +1 -1
  88. package/src/props/colors.scss +1 -1
  89. package/src/props/effects.scss +1 -1
  90. package/src/props/filters.scss +2 -1
  91. package/src/props/index.scss +12 -12
  92. package/src/props/input.scss +1 -1
  93. package/src/props/layout.scss +1 -1
  94. package/src/props/media.scss +1 -1
  95. package/src/props/sizing.scss +1 -1
  96. package/src/props/spacing.scss +2 -2
  97. package/src/props/{animation.scss → transitions.scss} +53 -2
  98. package/src/props/typography.scss +2 -2
  99. package/src/reset.scss +1 -1
  100. package/src/settings/_background.scss +6 -1
  101. package/src/settings/_breakpoints.scss +2 -0
  102. package/src/settings/_colors.scss +16 -2
  103. package/src/settings/_effects.scss +47 -2
  104. package/src/settings/_filters.scss +9 -0
  105. package/src/settings/_index.scss +40 -31
  106. package/src/settings/_input.scss +8 -6
  107. package/src/settings/_interactivity.scss +39 -0
  108. package/src/settings/_spacing.scss +1 -0
  109. package/src/settings/_transitions.scss +44 -0
  110. package/src/settings/components/_vv-accordion.scss +134 -0
  111. package/src/settings/components/_vv-alert.scss +161 -0
  112. package/src/settings/components/_vv-avatar.scss +55 -0
  113. package/src/settings/components/_vv-badge.scss +58 -18
  114. package/src/settings/components/_vv-breadcrumb.scss +95 -0
  115. package/src/settings/components/_vv-button-group.scss +4 -0
  116. package/src/settings/components/_vv-button.scss +121 -15
  117. package/src/settings/components/_vv-card.scss +4 -3
  118. package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} +2 -1
  119. package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} +46 -10
  120. package/src/settings/components/_vv-dialog.scss +71 -89
  121. package/src/settings/components/_vv-input-text.scss +83 -37
  122. package/src/settings/components/_vv-nav.scss +142 -0
  123. package/src/settings/components/_vv-progress.scss +1 -1
  124. package/src/settings/components/_vv-radio-group.scss +3 -0
  125. package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} +34 -4
  126. package/src/settings/components/_vv-select.scss +77 -12
  127. package/src/settings/components/_vv-skeleton.scss +22 -0
  128. package/src/settings/components/_vv-tab.scss +16 -0
  129. package/src/settings/components/_vv-table.scss +22 -3
  130. package/src/settings/components/_vv-text.scss +20 -1
  131. package/src/settings/components/_vv-textarea.scss +49 -24
  132. package/src/settings/components/_vv-toast.scss +259 -0
  133. package/src/settings/components/_vv-tooltip.scss +74 -0
  134. package/src/themes/dark/_context.scss +7 -4
  135. package/src/themes/dark/components/_vv-button.scss +3 -5
  136. package/src/themes/dark/components/index.scss +1 -2
  137. package/src/themes/dark/props/_background.scss +2 -2
  138. package/src/themes/dark/props/_colors.scss +2 -2
  139. package/src/themes/dark/props/_input.scss +15 -0
  140. package/src/themes/dark/props/index.scss +3 -2
  141. package/src/themes/dark/settings/_background.scss +9 -4
  142. package/src/themes/dark/settings/_colors.scss +25 -10
  143. package/src/themes/dark/settings/_index.scss +4 -4
  144. package/src/themes/dark/settings/_input.scss +8 -0
  145. package/src/themes/dark/settings/components/_vv-button.scss +10 -10
  146. package/src/themes/dark/volver.scss +5 -0
  147. package/src/tools/_breakpoints.scss +7 -7
  148. package/src/tools/_index.scss +3 -3
  149. package/src/tools/_mixins.scss +200 -37
  150. package/src/utilities/backgrounds.scss +15 -8
  151. package/src/utilities/borders.scss +22 -9
  152. package/src/utilities/colors.scss +9 -5
  153. package/src/utilities/effects.scss +23 -5
  154. package/src/utilities/filters.scss +15 -4
  155. package/src/utilities/flexbox.scss +26 -8
  156. package/src/utilities/grid.scss +25 -9
  157. package/src/utilities/index.scss +13 -12
  158. package/src/utilities/interactivity.scss +10 -0
  159. package/src/utilities/layout.scss +27 -14
  160. package/src/utilities/sizing.scss +23 -26
  161. package/src/utilities/spacing.scss +1 -1
  162. package/src/utilities/transitions.scss +47 -0
  163. package/src/utilities/typography.scss +34 -17
  164. package/src/volver.scss +14 -0
  165. package/dist/components/vv-collapse.css +0 -1
  166. package/dist/components/vv-input-checkbox-group.css +0 -1
  167. package/dist/components/vv-input-checkbox.css +0 -1
  168. package/dist/components/vv-input-radio-group.css +0 -1
  169. package/dist/components/vv-input-radio.css +0 -1
  170. package/dist/preflight.css +0 -1
  171. package/dist/props/animation.css +0 -1
  172. package/dist/style.css +0 -1
  173. package/dist/themes/dark/style.css +0 -1
  174. package/dist/utilities/animation.css +0 -1
  175. package/src/assets/24consulting.svg +0 -63
  176. package/src/assets/volverjs.svg +0 -15
  177. package/src/components/vv-collapse.scss +0 -12
  178. package/src/components/vv-input-checkbox-group.scss +0 -12
  179. package/src/components/vv-input-radio-group.scss +0 -12
  180. package/src/preflight.scss +0 -281
  181. package/src/settings/_animation.scss +0 -9
  182. package/src/settings/components/_vv-collapse.scss +0 -111
  183. package/src/settings/components/_vv-input-radio-group.scss +0 -1
  184. package/src/style.scss +0 -14
  185. package/src/themes/dark/components/_vv-input-checkbox.scss +0 -24
  186. package/src/themes/dark/settings/components/_vv-input-checkbox.scss +0 -26
  187. package/src/themes/dark/style.scss +0 -5
  188. package/src/utilities/animation.scss +0 -8
@@ -1,22 +1,32 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  // flex direction
5
5
  @include spread-map-into-utilities(
6
6
  $map: $flex-direction,
7
7
  $class: flex,
8
- $attribute: flex-direction
8
+ $attribute: flex-direction,
9
+ $bps: $breakpoints,
10
+ $zero-specificity: $zero-specificity-for-utilities
9
11
  );
10
12
 
11
13
  // flex wrap
12
14
  @include spread-map-into-utilities(
13
15
  $map: $flex-wrap,
14
16
  $class: flex,
15
- $attribute: flex-wrap
17
+ $attribute: flex-wrap,
18
+ $bps: $breakpoints,
19
+ $zero-specificity: $zero-specificity-for-utilities
16
20
  );
17
21
 
18
22
  // flex
19
- @include spread-map-into-utilities($map: $flex, $class: flex, $attribute: flex);
23
+ @include spread-map-into-utilities(
24
+ $map: $flex,
25
+ $class: flex,
26
+ $attribute: flex,
27
+ $bps: $breakpoints,
28
+ $zero-specificity: $zero-specificity-for-utilities
29
+ );
20
30
 
21
31
  // flex grow
22
32
  @each $prefix, $prop in (grow: flex-grow, shrink: flex-shrink) {
@@ -37,7 +47,9 @@
37
47
  @include spread-map-into-utilities(
38
48
  $map: $order,
39
49
  $class: order,
40
- $attribute: order
50
+ $attribute: order,
51
+ $bps: $breakpoints,
52
+ $zero-specificity: $zero-specificity-for-utilities
41
53
  );
42
54
 
43
55
  // gap
@@ -90,7 +102,9 @@
90
102
  @include spread-map-into-utilities(
91
103
  $map: $justify-align-content,
92
104
  $class: $class,
93
- $attribute: $attribute
105
+ $attribute: $attribute,
106
+ $bps: $breakpoints,
107
+ $zero-specificity: $zero-specificity-for-utilities
94
108
  );
95
109
  }
96
110
 
@@ -99,7 +113,9 @@
99
113
  @include spread-map-into-utilities(
100
114
  $map: $justify-align-items,
101
115
  $class: $class,
102
- $attribute: $attribute
116
+ $attribute: $attribute,
117
+ $bps: $breakpoints,
118
+ $zero-specificity: $zero-specificity-for-utilities
103
119
  );
104
120
  }
105
121
 
@@ -108,6 +124,8 @@
108
124
  @include spread-map-into-utilities(
109
125
  $map: $justify-align-self,
110
126
  $class: $class,
111
- $attribute: $attribute
127
+ $attribute: $attribute,
128
+ $bps: $breakpoints,
129
+ $zero-specificity: $zero-specificity-for-utilities
112
130
  );
113
131
  }
@@ -1,18 +1,22 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  // grid template columns
5
5
  @include spread-map-into-utilities(
6
6
  $map: $grid-template-columns,
7
7
  $class: grid-cols,
8
- $attribute: grid-template-columns
8
+ $attribute: grid-template-columns,
9
+ $bps: $breakpoints,
10
+ $zero-specificity: $zero-specificity-for-utilities
9
11
  );
10
12
 
11
13
  // grid column
12
14
  @include spread-map-into-utilities(
13
15
  $map: $grid-column,
14
16
  $class: col,
15
- $attribute: grid-column
17
+ $attribute: grid-column,
18
+ $bps: $breakpoints,
19
+ $zero-specificity: $zero-specificity-for-utilities
16
20
  );
17
21
 
18
22
  // grid column start/end
@@ -22,7 +26,9 @@
22
26
  @include spread-map-into-utilities(
23
27
  $map: $grid-column-start-end,
24
28
  $class: $class,
25
- $attribute: $attribute
29
+ $attribute: $attribute,
30
+ $bps: $breakpoints,
31
+ $zero-specificity: $zero-specificity-for-utilities
26
32
  );
27
33
  }
28
34
 
@@ -30,14 +36,18 @@
30
36
  @include spread-map-into-utilities(
31
37
  $map: $grid-template-rows,
32
38
  $class: grid-rows,
33
- $attribute: grid-template-rows
39
+ $attribute: grid-template-rows,
40
+ $bps: $breakpoints,
41
+ $zero-specificity: $zero-specificity-for-utilities
34
42
  );
35
43
 
36
44
  // grid row
37
45
  @include spread-map-into-utilities(
38
46
  $map: $grid-row,
39
47
  $class: row,
40
- $attribute: grid-row
48
+ $attribute: grid-row,
49
+ $bps: $breakpoints,
50
+ $zero-specificity: $zero-specificity-for-utilities
41
51
  );
42
52
 
43
53
  // grid row start/end
@@ -45,7 +55,9 @@
45
55
  @include spread-map-into-utilities(
46
56
  $map: $grid-row-start-end,
47
57
  $class: $class,
48
- $attribute: $attribute
58
+ $attribute: $attribute,
59
+ $bps: $breakpoints,
60
+ $zero-specificity: $zero-specificity-for-utilities
49
61
  );
50
62
  }
51
63
 
@@ -53,7 +65,9 @@
53
65
  @include spread-map-into-utilities(
54
66
  $map: $grid-auto-flow,
55
67
  $class: grid-flow,
56
- $attribute: grid-auto-flow
68
+ $attribute: grid-auto-flow,
69
+ $bps: $breakpoints,
70
+ $zero-specificity: $zero-specificity-for-utilities
57
71
  );
58
72
 
59
73
  // grid auto rows/columns
@@ -63,6 +77,8 @@
63
77
  @include spread-map-into-utilities(
64
78
  $map: $grid-auto-rows-columns,
65
79
  $class: $class,
66
- $attribute: $attribute
80
+ $attribute: $attribute,
81
+ $bps: $breakpoints,
82
+ $zero-specificity: $zero-specificity-for-utilities
67
83
  );
68
84
  }
@@ -1,12 +1,13 @@
1
- @import 'animation';
2
- @import 'backgrounds';
3
- @import 'borders';
4
- @import 'colors';
5
- @import 'effects';
6
- @import 'filters';
7
- @import 'flexbox';
8
- @import 'grid';
9
- @import 'layout';
10
- @import 'sizing';
11
- @import 'spacing';
12
- @import 'typography';
1
+ @forward 'backgrounds';
2
+ @forward 'borders';
3
+ @forward 'colors';
4
+ @forward 'effects';
5
+ @forward 'filters';
6
+ @forward 'flexbox';
7
+ @forward 'grid';
8
+ @forward 'interactivity';
9
+ @forward 'layout';
10
+ @forward 'sizing';
11
+ @forward 'spacing';
12
+ @forward 'transitions';
13
+ @forward 'typography';
@@ -0,0 +1,10 @@
1
+ @use 'sass:map';
2
+ @use '../context' as *;
3
+
4
+ // grid template columns
5
+ @include spread-map-into-utilities(
6
+ $map: $cursor,
7
+ $class: cursor,
8
+ $attribute: cursor,
9
+ $zero-specificity: $zero-specificity-for-utilities
10
+ );
@@ -1,12 +1,14 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  // aspect
5
5
  @include spread-map-into-utilities(
6
6
  $map: $aspect-ratio,
7
7
  $class: aspect,
8
8
  $attribute: aspect-ratio,
9
- $prop: aspect
9
+ $prop: aspect,
10
+ $bps: $breakpoints,
11
+ $zero-specificity: $zero-specificity-for-utilities
10
12
  );
11
13
 
12
14
  // container
@@ -15,7 +17,7 @@
15
17
 
16
18
  @each $breakpoint, $value in $breakpoints {
17
19
  @if $value > 0 {
18
- @include media-breakpoint-up($breakpoint) {
20
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
19
21
  max-width: $value;
20
22
  }
21
23
  }
@@ -33,54 +35,62 @@
33
35
  $map: $columns,
34
36
  $class: columns,
35
37
  $attribute: column-count,
36
- $bps: $breakpoints
38
+ $bps: $breakpoints,
39
+ $zero-specificity: $zero-specificity-for-utilities
37
40
  );
38
41
 
39
42
  // break-after
40
43
  @include spread-map-into-utilities(
41
44
  $map: $break-after,
42
45
  $class: break-after,
43
- $attribute: break-after
46
+ $attribute: break-after,
47
+ $zero-specificity: $zero-specificity-for-utilities
44
48
  );
45
49
 
46
50
  // break-before
47
51
  @include spread-map-into-utilities(
48
52
  $map: $break-before,
49
53
  $class: break-before,
50
- $attribute: break-before
54
+ $attribute: break-before,
55
+ $zero-specificity: $zero-specificity-for-utilities
51
56
  );
52
57
 
53
58
  // break-inside
54
59
  @include spread-map-into-utilities(
55
60
  $map: $break-inside,
56
61
  $class: break-inside,
57
- $attribute: break-inside
62
+ $attribute: break-inside,
63
+ $zero-specificity: $zero-specificity-for-utilities
58
64
  );
59
65
 
60
66
  // display
61
67
  @include spread-map-into-utilities(
62
68
  $map: $display-without-breakpoints,
63
- $attribute: display
69
+ $attribute: display,
70
+ $zero-specificity: $zero-specificity-for-utilities
64
71
  );
65
72
 
66
73
  @include spread-map-into-utilities(
67
74
  $map: $display-with-breakpoints,
68
75
  $attribute: display,
69
- $bps: $breakpoints
76
+ $bps: $breakpoints,
77
+ $zero-specificity: $zero-specificity-for-utilities
70
78
  );
71
79
 
72
80
  // object-fit
73
81
  @include spread-map-into-utilities(
74
82
  $map: $object-fit,
75
83
  $class: object,
76
- $attribute: object-fit
84
+ $attribute: object-fit,
85
+ $zero-specificity: $zero-specificity-for-utilities
77
86
  );
78
87
 
79
88
  // object-position
80
89
  @include spread-map-into-utilities(
81
90
  $map: $object-position,
82
91
  $class: object,
83
- $attribute: object-position
92
+ $attribute: object-position,
93
+ $zero-specificity: $zero-specificity-for-utilities
84
94
  );
85
95
 
86
96
  // overflow
@@ -114,14 +124,16 @@
114
124
  @include spread-map-into-utilities(
115
125
  $map: $position,
116
126
  $attribute: position,
117
- $bps: $breakpoints
127
+ $bps: $breakpoints,
128
+ $zero-specificity: $zero-specificity-for-utilities
118
129
  );
119
130
 
120
131
  // visibility
121
132
  @include spread-map-into-utilities(
122
133
  $map: $visibility,
123
134
  $attribute: visibility,
124
- $bps: $breakpoints
135
+ $bps: $breakpoints,
136
+ $zero-specificity: $zero-specificity-for-utilities
125
137
  );
126
138
 
127
139
  // top / right / bottom / left
@@ -184,5 +196,6 @@
184
196
  $map: $z-index,
185
197
  $class: z,
186
198
  $attribute: z-index,
187
- $prop: z
199
+ $prop: z,
200
+ $zero-specificity: $zero-specificity-for-utilities
188
201
  );
@@ -1,27 +1,18 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  // width / height / max-width / max-height
5
- @each $dimension,
6
- $attr in(w: width, h: height, max-w: max-width, max-h: max-height)
5
+ @each $class,
6
+ $attribute in(w: width, h: height, max-w: max-width, max-h: max-height)
7
7
  {
8
- @each $size, $value in map.merge($spacing, $spacing-dynamic) {
9
- // check if value is not a map (spacing-dynamic)
10
- $var: var(--spacing-#{$size});
11
- @if type-of($value) != 'map' {
12
- $var: var(--spacing-#{$size}, #{$value});
13
- }
14
-
15
- %#{$dimension}-#{$size} {
16
- #{$attr}: #{$var};
17
- }
18
- @include wrap-with-where(
19
- $selector: '.#{$dimension}-#{$size}',
20
- $enabled: $zero-specificity-for-utilities
21
- ) {
22
- @extend %#{$dimension}-#{$size};
23
- }
24
- }
8
+ @include spread-map-into-utilities(
9
+ $map: map.merge($spacing, $spacing-dynamic),
10
+ $class: $class,
11
+ $attribute: $attribute,
12
+ $bps: $breakpoints,
13
+ $prop: spacing,
14
+ $zero-specificity: $zero-specificity-for-utilities
15
+ );
25
16
  }
26
17
 
27
18
  @include spread-map-into-utilities(
@@ -29,7 +20,8 @@
29
20
  $class: w,
30
21
  $attribute: width,
31
22
  $bps: $breakpoints,
32
- $prop: w
23
+ $prop: w,
24
+ $zero-specificity: $zero-specificity-for-utilities
33
25
  );
34
26
 
35
27
  @include spread-map-into-utilities(
@@ -37,19 +29,22 @@
37
29
  $class: h,
38
30
  $attribute: height,
39
31
  $bps: $breakpoints,
40
- $prop: h
32
+ $prop: h,
33
+ $zero-specificity: $zero-specificity-for-utilities
41
34
  );
42
35
 
43
36
  @include spread-map-into-utilities(
44
37
  $map: $max-width,
45
38
  $class: max-w,
46
- $attribute: max-width
39
+ $attribute: max-width,
40
+ $zero-specificity: $zero-specificity-for-utilities
47
41
  );
48
42
 
49
43
  @include spread-map-into-utilities(
50
44
  $map: $max-height,
51
45
  $class: max-h,
52
- $attribute: max-height
46
+ $attribute: max-height,
47
+ $zero-specificity: $zero-specificity-for-utilities
53
48
  );
54
49
 
55
50
  @each $breakpoint, $breakpoint-value in $breakpoints {
@@ -70,11 +65,13 @@
70
65
  @include spread-map-into-utilities(
71
66
  $map: $min-width,
72
67
  $class: min-w,
73
- $attribute: min-width
68
+ $attribute: min-width,
69
+ $zero-specificity: $zero-specificity-for-utilities
74
70
  );
75
71
 
76
72
  @include spread-map-into-utilities(
77
73
  $map: $min-height,
78
74
  $class: min-h,
79
- $attribute: min-height
75
+ $attribute: min-height,
76
+ $zero-specificity: $zero-specificity-for-utilities
80
77
  );
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  @each $prefix, $prop in (m: margin, p: padding, n: margin) {
5
5
  @each $size, $value in map.merge($spacing, $spacing-dynamic) {
@@ -0,0 +1,47 @@
1
+ @use 'sass:map';
2
+ @use 'sass:string';
3
+ @use '../context' as *;
4
+
5
+ // transition property
6
+ @include spread-map-into-utilities(
7
+ $map: $transition-property,
8
+ $class: transition-property,
9
+ $attribute: transition-property,
10
+ $zero-specificity: $zero-specificity-for-utilities
11
+ );
12
+
13
+ // transition duration and transition delay
14
+ @each $class,
15
+ $attribute in (duration: transition-duration, delay: transition-delay)
16
+ {
17
+ @include spread-map-into-utilities(
18
+ $map: $transition-duration-delay,
19
+ $class: $class,
20
+ $attribute: $attribute,
21
+ $zero-specificity: $zero-specificity-for-utilities
22
+ );
23
+ }
24
+
25
+ // transition timing function
26
+ @include spread-map-into-utilities(
27
+ $map: $transition-timing-function,
28
+ $class: ease,
29
+ $attribute: transition-timing-function,
30
+ $zero-specificity: $zero-specificity-for-utilities
31
+ );
32
+
33
+ @each $property, $value in $transition-property {
34
+ @include wrap-with-where(
35
+ $selector: '.transition-#{$property}',
36
+ $enabled: $zero-specificity-for-utilities
37
+ ) {
38
+ transition-property: string.unquote($value);
39
+ @if $property != 'none' {
40
+ transition-duration: map.get($transition-duration-delay, 300);
41
+ transition-timing-function: map.get(
42
+ $transition-timing-function,
43
+ 'in-out'
44
+ );
45
+ }
46
+ }
47
+ }
@@ -1,12 +1,13 @@
1
1
  @use 'sass:map';
2
- @import '../context';
2
+ @use '../context' as *;
3
3
 
4
4
  // font-family
5
5
  @include spread-map-into-utilities(
6
6
  $map: $font-family,
7
7
  $class: font,
8
8
  $attribute: font-family,
9
- $prop: font
9
+ $prop: font,
10
+ $zero-specificity: $zero-specificity-for-utilities
10
11
  );
11
12
 
12
13
  // font-weight
@@ -14,7 +15,8 @@
14
15
  $map: $font-weight,
15
16
  $class: font,
16
17
  $attribute: font-weight,
17
- $prop: font
18
+ $prop: font,
19
+ $zero-specificity: $zero-specificity-for-utilities
18
20
  );
19
21
 
20
22
  // font-size
@@ -22,8 +24,10 @@
22
24
  $map: map.merge($font-size, $font-size-dynamic),
23
25
  $class: text,
24
26
  $attribute: font-size,
27
+ $bps: $breakpoints,
25
28
  $prop: text,
26
- $deep: false
29
+ $deep: false,
30
+ $zero-specificity: $zero-specificity-for-utilities
27
31
  );
28
32
 
29
33
  // font-style
@@ -75,7 +79,8 @@
75
79
  $map: $line-height,
76
80
  $class: leading,
77
81
  $attribute: line-height,
78
- $prop: leading
82
+ $prop: leading,
83
+ $zero-specificity: $zero-specificity-for-utilities
79
84
  );
80
85
 
81
86
  // letter-spacing
@@ -83,67 +88,77 @@
83
88
  $map: $letter-spacing,
84
89
  $class: tracking,
85
90
  $attribute: letter-spacing,
86
- $prop: tracking
91
+ $prop: tracking,
92
+ $zero-specificity: $zero-specificity-for-utilities
87
93
  );
88
94
 
89
95
  // font-variant-numeric
90
96
  @include spread-map-into-utilities(
91
97
  $map: $font-variant-numeric,
92
- $attribute: font-variant-numeric
98
+ $attribute: font-variant-numeric,
99
+ $zero-specificity: $zero-specificity-for-utilities
93
100
  );
94
101
 
95
102
  // list-style-type
96
103
  @include spread-map-into-utilities(
97
104
  $map: $list-style-type,
98
105
  $class: list,
99
- $attribute: list-style-type
106
+ $attribute: list-style-type,
107
+ $zero-specificity: $zero-specificity-for-utilities
100
108
  );
101
109
 
102
110
  // list-style-position
103
111
  @include spread-map-into-utilities(
104
112
  $map: $list-style-position,
105
113
  $class: list,
106
- $attribute: list-style-position
114
+ $attribute: list-style-position,
115
+ $zero-specificity: $zero-specificity-for-utilities
107
116
  );
108
117
 
109
118
  // text-align
110
119
  @include spread-map-into-utilities(
111
120
  $map: $text-align,
112
121
  $class: text,
113
- $attribute: text-align
122
+ $attribute: text-align,
123
+ $zero-specificity: $zero-specificity-for-utilities
114
124
  );
115
125
 
116
126
  // text-decorator-line
117
127
  @include spread-map-into-utilities(
118
128
  $map: $text-decorator-line,
119
- $attribute: text-decoration-line
129
+ $attribute: text-decoration-line,
130
+ $zero-specificity: $zero-specificity-for-utilities
120
131
  );
121
132
 
122
133
  // text-decorator-style
123
134
  @include spread-map-into-utilities(
124
135
  $map: $text-decorator-style,
125
136
  $class: decoration,
126
- $attribute: text-decoration-style
137
+ $attribute: text-decoration-style,
138
+ $zero-specificity: $zero-specificity-for-utilities
127
139
  );
128
140
 
129
141
  // text-decorator-thickness
130
142
  @include spread-map-into-utilities(
131
143
  $map: $text-decorator-thickness,
132
144
  $class: decoration,
133
- $attribute: text-decoration-thickness
145
+ $attribute: text-decoration-thickness,
146
+ $zero-specificity: $zero-specificity-for-utilities
134
147
  );
135
148
 
136
149
  // text-underline-offset
137
150
  @include spread-map-into-utilities(
138
151
  $map: $text-underline-offset,
139
152
  $class: underline-offset,
140
- $attribute: text-underline-offset
153
+ $attribute: text-underline-offset,
154
+ $zero-specificity: $zero-specificity-for-utilities
141
155
  );
142
156
 
143
157
  // text-transform
144
158
  @include spread-map-into-utilities(
145
159
  $map: $text-transform,
146
- $attribute: text-transform
160
+ $attribute: text-transform,
161
+ $zero-specificity: $zero-specificity-for-utilities
147
162
  );
148
163
 
149
164
  // text-overflow
@@ -215,12 +230,14 @@
215
230
  @include spread-map-into-utilities(
216
231
  $map: $vertical-align,
217
232
  $class: align,
218
- $attribute: vertical-align
233
+ $attribute: vertical-align,
234
+ $zero-specificity: $zero-specificity-for-utilities
219
235
  );
220
236
 
221
237
  // white-space
222
238
  @include spread-map-into-utilities(
223
239
  $map: $white-space,
224
240
  $class: whitespace,
225
- $attribute: white-space
241
+ $attribute: white-space,
242
+ $zero-specificity: $zero-specificity-for-utilities
226
243
  );
@@ -0,0 +1,14 @@
1
+ // reset
2
+ @use 'reset';
3
+
4
+ // props
5
+ @use 'props';
6
+
7
+ // components
8
+ @use 'components';
9
+
10
+ // utilities
11
+ @use 'utilities';
12
+
13
+ // preflight
14
+ @import 'preflight';
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-collapse-display: block;--vv-collapse-min-width: 2.093em;--vv-collapse-padding: 0;--vv-collapse-border-radius: 0;--vv-collapse-border-bottom: var(--border) solid var(--color-surface-2);--vv-collapse-margin: 0;--vv-collapse-background: none;--vv-collapse-font-family: var(--font-sans);--vv-collapse-font-size: .6em;--vv-collapse-font-weight: normal;--vv-collapse-state-open-display: contents;--vv-collapse-state-open-padding: 0;--vv-collapse-state-open-margin: 0;--vv-collapse-state-open-element-header-list-style-type: none;--vv-collapse-state-open-element-header-color: var(--color-brand);--vv-collapse-state-open-element-header-pseudo-after-transform: rotate(0deg);--vv-collapse-state-open-element-header-pseudo-after-will-change: transform;--vv-collapse-state-open-element-header-pseudo-after-transition: transform .2s ease-in-out;--vv-collapse-state-open-element-content-height: auto;--vv-collapse-state-open-element-content-opacity: 1;--vv-collapse-state-blocked-cursor: not-allowed;--vv-collapse-state-blocked-opacity: .5;--vv-collapse-state-blocked-pointer-events: none;--vv-collapse-state-blocked-user-select: none;--vv-collapse-element-header-cursor: pointer;--vv-collapse-element-header-list-style-type: none;--vv-collapse-element-header-padding: 1em;--vv-collapse-element-header-margin: var(--spacing-0);--vv-collapse-element-header-background: none;--vv-collapse-element-header-color: var(--color-word-3);--vv-collapse-element-header-font-size: var(--text-sm);--vv-collapse-element-header-line-height: 1em;--vv-collapse-element-header-box-shadow: none;--vv-collapse-element-header-pseudo-after-display: block;--vv-collapse-element-header-pseudo-after-float: right;--vv-collapse-element-header-pseudo-after-width: 1em;--vv-collapse-element-header-pseudo-after-height: 1em;--vv-collapse-element-header-pseudo-after-background-image: var(--bg-chevron);--vv-collapse-element-header-pseudo-after-background-position: right center;--vv-collapse-element-header-pseudo-after-background-size: 1em auto;--vv-collapse-element-header-pseudo-after-background-repeat: no-repeat;--vv-collapse-element-header-pseudo-after-transform: rotate(-90deg);--vv-collapse-element-header-pseudo-after-will-change: transform;--vv-collapse-element-header-pseudo-after-transition: transform .2s ease-in-out;--vv-collapse-element-content-display: block;--vv-collapse-element-content-height: 0;--vv-collapse-element-content-padding: var(--spacing-0) 1em 1em 1em;--vv-collapse-element-content-margin: var(--spacing-0);--vv-collapse-element-content-background: none;--vv-collapse-element-content-color: var(--color-word-4);--vv-collapse-element-content-font-size: var(--text-xs);--vv-collapse-element-content-box-shadow: none;--vv-collapse-element-content-opacity: 0;--vv-collapse-element-content-transition: all .7s ease-in-out;--vv-collapse-modifier-minimal-display: contents;--vv-collapse-modifier-minimal-padding: 0;--vv-collapse-modifier-minimal-margin: 0;--vv-collapse-modifier-minimal-state-open-element-header-list-style-type: disclosure-open;--vv-collapse-modifier-minimal-state-open-element-header-color: var(--color-brand);--vv-collapse-modifier-minimal-element-header-display: list-item;--vv-collapse-modifier-minimal-element-header-counter-increment: list-item 0;--vv-collapse-modifier-minimal-element-header-list-style-type: disclosure-closed;--vv-collapse-modifier-minimal-element-header-pseudo-after-display: none}:where(.vv-collapse){display:var(--vv-collapse-display);min-width:var(--vv-collapse-min-width);padding:var(--vv-collapse-padding);border-radius:var(--vv-collapse-border-radius);border-bottom:var(--vv-collapse-border-bottom);margin:var(--vv-collapse-margin);background:var(--vv-collapse-background);font-family:var(--vv-collapse-font-family);font-size:var(--vv-collapse-font-size);font-weight:var(--vv-collapse-font-weight)}:where(.vv-collapse__header){cursor:var(--vv-collapse-element-header-cursor);list-style-type:var(--vv-collapse-element-header-list-style-type);padding:var(--vv-collapse-element-header-padding);margin:var(--vv-collapse-element-header-margin);background:var(--vv-collapse-element-header-background);color:var(--vv-collapse-element-header-color);font-size:var(--vv-collapse-element-header-font-size);line-height:var(--vv-collapse-element-header-line-height);box-shadow:var(--vv-collapse-element-header-box-shadow)}:where(.vv-collapse__header):after{content:"";display:var(--vv-collapse-element-header-pseudo-after-display);float:var(--vv-collapse-element-header-pseudo-after-float);width:var(--vv-collapse-element-header-pseudo-after-width);height:var(--vv-collapse-element-header-pseudo-after-height);background-image:var(--vv-collapse-element-header-pseudo-after-background-image);background-position:var(--vv-collapse-element-header-pseudo-after-background-position);background-size:var(--vv-collapse-element-header-pseudo-after-background-size);background-repeat:var(--vv-collapse-element-header-pseudo-after-background-repeat);transform:var(--vv-collapse-element-header-pseudo-after-transform);will-change:var(--vv-collapse-element-header-pseudo-after-will-change);transition:var(--vv-collapse-element-header-pseudo-after-transition)}:where(.vv-collapse__content){display:var(--vv-collapse-element-content-display);height:var(--vv-collapse-element-content-height);padding:var(--vv-collapse-element-content-padding);margin:var(--vv-collapse-element-content-margin);background:var(--vv-collapse-element-content-background);color:var(--vv-collapse-element-content-color);font-size:var(--vv-collapse-element-content-font-size);box-shadow:var(--vv-collapse-element-content-box-shadow);opacity:var(--vv-collapse-element-content-opacity);transition:var(--vv-collapse-element-content-transition)}:where(.vv-collapse--open,.vv-collapse.open,.vv-collapse[open]){--vv-collapse-display: var(--vv-collapse-state-open-display);--vv-collapse-padding: var(--vv-collapse-state-open-padding);--vv-collapse-margin: var(--vv-collapse-state-open-margin)}:where(.vv-collapse--open .vv-collapse__header,.vv-collapse.open .vv-collapse__header,.vv-collapse[open] .vv-collapse__header){list-style-type:var(--vv-collapse-state-open-element-header-list-style-type);color:var(--vv-collapse-state-open-element-header-color)}:where(.vv-collapse--open .vv-collapse__header,.vv-collapse.open .vv-collapse__header,.vv-collapse[open] .vv-collapse__header):after{content:"";transform:var(--vv-collapse-state-open-element-header-pseudo-after-transform);will-change:var(--vv-collapse-state-open-element-header-pseudo-after-will-change);transition:var(--vv-collapse-state-open-element-header-pseudo-after-transition)}:where(.vv-collapse--open .vv-collapse__content,.vv-collapse.open .vv-collapse__content,.vv-collapse[open] .vv-collapse__content){height:var(--vv-collapse-state-open-element-content-height);opacity:var(--vv-collapse-state-open-element-content-opacity)}:where(.vv-collapse--minimal.vv-collapse){--vv-collapse-display: var(--vv-collapse-modifier-minimal-display);--vv-collapse-padding: var(--vv-collapse-modifier-minimal-padding);--vv-collapse-margin: var(--vv-collapse-modifier-minimal-margin)}:where(.vv-collapse--minimal .vv-collapse__header){display:var(--vv-collapse-modifier-minimal-element-header-display);counter-increment:var(--vv-collapse-modifier-minimal-element-header-counter-increment);list-style-type:var(--vv-collapse-modifier-minimal-element-header-list-style-type)}:where(.vv-collapse--minimal .vv-collapse__header):after{content:"";display:var(--vv-collapse-modifier-minimal-element-header-pseudo-after-display)}:where(.vv-collapse--minimal.vv-collapse--open .vv-collapse__header,.vv-collapse--minimal.vv-collapse.open .vv-collapse__header,.vv-collapse--minimal.vv-collapse[open] .vv-collapse__header){list-style-type:var(--vv-collapse-modifier-minimal-state-open-element-header-list-style-type);color:var(--vv-collapse-modifier-minimal-state-open-element-header-color)}
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--vv-input-checkbox-group-display: var(--input-display);--vv-input-checkbox-group-flex: var(--input-flex);--vv-input-checkbox-group-flex-direction: var(--input-flex-direction);--vv-input-checkbox-group-element-legend-display: var(--input-label-display);--vv-input-checkbox-group-element-legend-font-size: var(--input-label-font-size);--vv-input-checkbox-group-element-legend-color: var(--input-label-color);--vv-input-checkbox-group-element-legend-margin: 0 0 var(--input-label-gap) 0;--vv-input-checkbox-group-element-legend-white-space: var(--input-label-white-space);--vv-input-checkbox-group-element-legend-text-overflow: var(--input-label-text-overflow);--vv-input-checkbox-group-element-legend-overflow: var(--input-label-overflow);--vv-input-checkbox-group-element-legend-max-width: var(--input-label-max-width);--vv-input-checkbox-group-element-wrapper-position: relative;--vv-input-checkbox-group-element-wrapper-display: flex;--vv-input-checkbox-group-element-wrapper-flex-direction: column;--vv-input-checkbox-group-element-wrapper-flex-wrap: wrap;--vv-input-checkbox-group-element-hint-display: var(--input-hint-display);--vv-input-checkbox-group-element-hint-font-size: var(--input-hint-font-size);--vv-input-checkbox-group-element-hint-color: var(--input-hint-color);--vv-input-checkbox-group-element-hint-padding-top: var(--input-hint-gap);--vv-input-checkbox-group-element-hint-white-space: var(--input-hint-white-space);--vv-input-checkbox-group-element-hint-text-overflow: var(--input-hint-text-overflow);--vv-input-checkbox-group-element-hint-overflow: var(--input-hint-overflow);--vv-input-checkbox-group-element-hint-max-width: var(--input-hint-max-width);--vv-input-checkbox-group-element-hint-margin-top: calc(var(--input-gap) * -1);--vv-input-checkbox-group-element-hint-margin-bottom: var(--input-gap);--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction: row;--vv-input-checkbox-group-modifier-valid-element-hint-color: var(--input-valid-color);--vv-input-checkbox-group-modifier-invalid-element-hint-color: var(--input-invalid-color)}:where(.vv-input-checkbox-group){display:var(--vv-input-checkbox-group-display);flex:var(--vv-input-checkbox-group-flex);flex-direction:var(--vv-input-checkbox-group-flex-direction)}:where(.vv-input-checkbox-group__legend,.vv-input-checkbox-group > legend){display:var(--vv-input-checkbox-group-element-legend-display);font-size:var(--vv-input-checkbox-group-element-legend-font-size);color:var(--vv-input-checkbox-group-element-legend-color);margin:var(--vv-input-checkbox-group-element-legend-margin);white-space:var(--vv-input-checkbox-group-element-legend-white-space);text-overflow:var(--vv-input-checkbox-group-element-legend-text-overflow);overflow:var(--vv-input-checkbox-group-element-legend-overflow);max-width:var(--vv-input-checkbox-group-element-legend-max-width)}:where(.vv-input-checkbox-group__wrapper){position:var(--vv-input-checkbox-group-element-wrapper-position);display:var(--vv-input-checkbox-group-element-wrapper-display);flex-direction:var(--vv-input-checkbox-group-element-wrapper-flex-direction);flex-wrap:var(--vv-input-checkbox-group-element-wrapper-flex-wrap)}:where(.vv-input-checkbox-group__hint,.vv-input-checkbox-group > small){display:var(--vv-input-checkbox-group-element-hint-display);font-size:var(--vv-input-checkbox-group-element-hint-font-size);color:var(--vv-input-checkbox-group-element-hint-color);padding-top:var(--vv-input-checkbox-group-element-hint-padding-top);white-space:var(--vv-input-checkbox-group-element-hint-white-space);text-overflow:var(--vv-input-checkbox-group-element-hint-text-overflow);overflow:var(--vv-input-checkbox-group-element-hint-overflow);max-width:var(--vv-input-checkbox-group-element-hint-max-width);margin-top:var(--vv-input-checkbox-group-element-hint-margin-top);margin-bottom:var(--vv-input-checkbox-group-element-hint-margin-bottom)}:where(.vv-input-checkbox-group--horizontal .vv-input-checkbox-group__wrapper){flex-direction:var(--vv-input-checkbox-group-modifier-horizontal-element-wrapper-flex-direction)}:where(.vv-input-checkbox-group--valid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--valid > small){color:var(--vv-input-checkbox-group-modifier-valid-element-hint-color)}:where(.vv-input-checkbox-group--invalid .vv-input-checkbox-group__hint,.vv-input-checkbox-group--invalid > small){color:var(--vv-input-checkbox-group-modifier-invalid-element-hint-color)}