vanilla-framework 3.0.0-beta.1 → 3.0.1

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 (31) hide show
  1. package/README.md +19 -21
  2. package/package.json +15 -15
  3. package/scss/_base_button.scss +1 -1
  4. package/scss/_base_details.scss +2 -2
  5. package/scss/_base_fontfaces.scss +183 -181
  6. package/scss/_base_forms.scss +2 -2
  7. package/scss/_base_grid-definitions.scss +6 -6
  8. package/scss/_base_hr.scss +4 -4
  9. package/scss/_base_placeholders.scss +12 -12
  10. package/scss/_base_tables.scss +2 -2
  11. package/scss/_base_typography-definitions.scss +50 -50
  12. package/scss/_base_typography.scss +2 -2
  13. package/scss/_layouts_fluid-breakout.scss +12 -12
  14. package/scss/_patterns_chip.scss +265 -53
  15. package/scss/_patterns_divider.scss +1 -1
  16. package/scss/_patterns_grid.scss +4 -4
  17. package/scss/_patterns_heading-icon.scss +2 -2
  18. package/scss/_patterns_label.scss +6 -30
  19. package/scss/_patterns_logo-section.scss +4 -4
  20. package/scss/_patterns_matrix.scss +4 -4
  21. package/scss/_patterns_navigation.scss +9 -9
  22. package/scss/_patterns_search-and-filter.scss +10 -6
  23. package/scss/_patterns_side-navigation.scss +2 -2
  24. package/scss/_patterns_switch.scss +11 -11
  25. package/scss/_patterns_table-expanding.scss +0 -4
  26. package/scss/_patterns_table-mobile-card.scss +3 -3
  27. package/scss/_settings_colors.scss +75 -2
  28. package/scss/_settings_grid.scss +2 -4
  29. package/scss/_settings_spacing.scss +45 -45
  30. package/scss/_settings_themes.scss +1 -0
  31. package/scss/_utilities_content-align.scss +2 -2
package/scss/_base_placeholders.scss CHANGED
@@ -150,55 +150,55 @@
150
150
  }
151
151
 
152
152
  %u-no-margin--bottom--h1 {
153
- margin-bottom: -#{map-get($nudges, nudge--h1-mobile)} !important;
153
+ margin-bottom: -#{map-get($nudges, h1-mobile)} !important;
154
154
 
155
155
  @media (min-width: $breakpoint-heading-threshold) {
156
- margin-bottom: -#{map-get($nudges, nudge--h1)} !important;
156
+ margin-bottom: -#{map-get($nudges, h1)} !important;
157
157
  }
158
158
 
159
159
  @if ($increase-font-size-on-larger-screens) {
160
160
  @media (min-width: $breakpoint-x-large) {
161
- margin-bottom: -#{map-get($nudges, nudge--h1-large)} !important;
161
+ margin-bottom: -#{map-get($nudges, h1-large)} !important;
162
162
  }
163
163
  }
164
164
  }
165
165
 
166
166
  %u-no-margin--bottom--h2 {
167
- margin-bottom: -#{map-get($nudges, nudge--h2-mobile)} !important;
167
+ margin-bottom: -#{map-get($nudges, h2-mobile)} !important;
168
168
 
169
169
  @media (min-width: $breakpoint-heading-threshold) {
170
- margin-bottom: -#{map-get($nudges, nudge--h2)} !important;
170
+ margin-bottom: -#{map-get($nudges, h2)} !important;
171
171
  }
172
172
  }
173
173
 
174
174
  %u-no-margin--bottom--h3 {
175
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--h3-mobile)} !important;
175
+ margin-bottom: #{$sp-unit - map-get($nudges, h3-mobile)} !important;
176
176
 
177
177
  @media (min-width: $breakpoint-heading-threshold) {
178
- margin-bottom: -#{map-get($nudges, nudge--h3)} !important;
178
+ margin-bottom: -#{map-get($nudges, h3)} !important;
179
179
  }
180
180
  }
181
181
 
182
182
  %u-no-margin--bottom--h4 {
183
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--h4-mobile)} !important;
183
+ margin-bottom: #{$sp-unit - map-get($nudges, h4-mobile)} !important;
184
184
 
185
185
  @media (min-width: $breakpoint-heading-threshold) {
186
- margin-bottom: -#{map-get($nudges, nudge--h4)} !important;
186
+ margin-bottom: -#{map-get($nudges, h4)} !important;
187
187
  }
188
188
 
189
189
  @if ($increase-font-size-on-larger-screens) {
190
190
  @media (min-width: $breakpoint-x-large) {
191
- margin-bottom: -#{map-get($nudges, nudge--h4-large)} !important;
191
+ margin-bottom: -#{map-get($nudges, h4-large)} !important;
192
192
  }
193
193
  }
194
194
  }
195
195
 
196
196
  %u-no-margin--bottom--default-text {
197
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--p)} !important;
197
+ margin-bottom: #{$sp-unit - map-get($nudges, p)} !important;
198
198
  }
199
199
 
200
200
  %u-no-margin--bottom--small {
201
- margin-bottom: -#{map-get($nudges, nudge--small)} !important;
201
+ margin-bottom: -#{map-get($nudges, small)} !important;
202
202
  }
203
203
 
204
204
  %u-no-margin--bottom--hr {
package/scss/_base_tables.scss CHANGED
@@ -40,8 +40,8 @@
40
40
  th {
41
41
  @extend %table-header-label;
42
42
 
43
- padding-bottom: $spv--large - map-get($nudges, nudge--x-small);
44
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
43
+ padding-bottom: $spv--large - map-get($nudges, x-small);
44
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
45
45
  }
46
46
 
47
47
  tr {
package/scss/_base_typography-definitions.scss CHANGED
@@ -5,22 +5,22 @@
5
5
  font-style: normal;
6
6
  font-weight: $font-weight-display-heading;
7
7
  line-height: map-get($line-heights, h1-mobile);
8
- margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, nudge--h1-mobile);
8
+ margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
9
9
  margin-top: 0;
10
- max-width: $max-width--default;
11
- padding-top: map-get($nudges, nudge--h1-mobile) + map-get($browser-rounding-compensations, h1);
10
+ max-width: $text-max-width;
11
+ padding-top: map-get($nudges, h1-mobile) + map-get($browser-rounding-compensations, h1);
12
12
 
13
13
  @media (min-width: $breakpoint-heading-threshold) {
14
14
  font-size: #{map-get($font-sizes, h1)}rem;
15
15
  line-height: map-get($line-heights, h1);
16
- margin-bottom: map-get($sp-after, h1) - map-get($nudges, nudge--h1);
17
- padding-top: map-get($nudges, nudge--h1) + map-get($browser-rounding-compensations, h1);
16
+ margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1);
17
+ padding-top: map-get($nudges, h1) + map-get($browser-rounding-compensations, h1);
18
18
  }
19
19
 
20
20
  @if ($increase-font-size-on-larger-screens) {
21
21
  @media (min-width: $breakpoint-x-large) {
22
- margin-bottom: map-get($sp-after, h1) - map-get($nudges, nudge--h1-large);
23
- padding-top: map-get($nudges, nudge--h1-large) + map-get($browser-rounding-compensations, h1);
22
+ margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1-large);
23
+ padding-top: map-get($nudges, h1-large) + map-get($browser-rounding-compensations, h1);
24
24
  }
25
25
  }
26
26
 
@@ -34,16 +34,16 @@
34
34
  font-style: normal;
35
35
  font-weight: $font-weight-display-heading;
36
36
  line-height: map-get($line-heights, h2-mobile);
37
- margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, nudge--h2-mobile);
37
+ margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, h2-mobile);
38
38
  margin-top: 0;
39
- max-width: $max-width--default;
40
- padding-top: map-get($nudges, nudge--h2-mobile) + map-get($browser-rounding-compensations, h2);
39
+ max-width: $text-max-width;
40
+ padding-top: map-get($nudges, h2-mobile) + map-get($browser-rounding-compensations, h2);
41
41
 
42
42
  @media (min-width: $breakpoint-heading-threshold) {
43
43
  font-size: #{map-get($font-sizes, h2)}rem;
44
44
  line-height: map-get($line-heights, h2);
45
- margin-bottom: map-get($sp-after, h2) - map-get($nudges, nudge--h2);
46
- padding-top: map-get($nudges, nudge--h2) + map-get($browser-rounding-compensations, h2);
45
+ margin-bottom: map-get($sp-after, h2) - map-get($nudges, h2);
46
+ padding-top: map-get($nudges, h2) + map-get($browser-rounding-compensations, h2);
47
47
  }
48
48
 
49
49
  &.u-no-margin--bottom {
@@ -56,16 +56,16 @@
56
56
  font-style: normal;
57
57
  font-weight: $font-weight-display-heading;
58
58
  line-height: map-get($line-heights, h3-mobile);
59
- margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, nudge--h3-mobile);
59
+ margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
60
60
  margin-top: 0;
61
- max-width: $max-width--default;
62
- padding-top: map-get($nudges, nudge--h3-mobile);
61
+ max-width: $text-max-width;
62
+ padding-top: map-get($nudges, h3-mobile);
63
63
 
64
64
  @media (min-width: $breakpoint-heading-threshold) {
65
65
  font-size: #{map-get($font-sizes, h3)}rem;
66
66
  line-height: map-get($line-heights, h3);
67
- margin-bottom: map-get($sp-after, h3) - map-get($nudges, nudge--h3);
68
- padding-top: map-get($nudges, nudge--h3) + map-get($browser-rounding-compensations, h3);
67
+ margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
68
+ padding-top: map-get($nudges, h3) + map-get($browser-rounding-compensations, h3);
69
69
  }
70
70
 
71
71
  &.u-no-margin--bottom {
@@ -78,22 +78,22 @@
78
78
  font-style: normal;
79
79
  font-weight: $font-weight-regular-text;
80
80
  line-height: map-get($line-heights, h4-mobile);
81
- margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, nudge--h4-mobile);
81
+ margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
82
82
  margin-top: 0;
83
- max-width: $max-width--default;
84
- padding-top: map-get($nudges, nudge--h4-mobile) + map-get($browser-rounding-compensations, h4);
83
+ max-width: $text-max-width;
84
+ padding-top: map-get($nudges, h4-mobile) + map-get($browser-rounding-compensations, h4);
85
85
 
86
86
  @media (min-width: $breakpoint-heading-threshold) {
87
87
  font-size: #{map-get($font-sizes, h4)}rem;
88
88
  line-height: map-get($line-heights, h4);
89
- margin-bottom: map-get($sp-after, h4) - map-get($nudges, nudge--h4);
90
- padding-top: map-get($nudges, nudge--h4) + map-get($browser-rounding-compensations, h4);
89
+ margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4);
90
+ padding-top: map-get($nudges, h4) + map-get($browser-rounding-compensations, h4);
91
91
  }
92
92
 
93
93
  @if ($increase-font-size-on-larger-screens) {
94
94
  @media (min-width: $breakpoint-x-large) {
95
- margin-bottom: map-get($sp-after, h4) - map-get($nudges, nudge--h4-large);
96
- padding-top: map-get($nudges, nudge--h4-large) + map-get($browser-rounding-compensations, h4);
95
+ margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4-large);
96
+ padding-top: map-get($nudges, h4-large) + map-get($browser-rounding-compensations, h4);
97
97
  }
98
98
  }
99
99
 
@@ -107,10 +107,10 @@
107
107
  font-style: normal;
108
108
  font-weight: $font-weight-bold;
109
109
  line-height: map-get($line-heights, default-text);
110
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
110
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
111
111
  margin-top: 0;
112
- max-width: $max-width--default;
113
- padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, h5);
112
+ max-width: $text-max-width;
113
+ padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, h5);
114
114
 
115
115
  &.u-no-margin--bottom {
116
116
  @extend %u-no-margin--bottom--default-text;
@@ -122,14 +122,14 @@
122
122
  font-style: italic;
123
123
  font-weight: $font-weight-regular-text;
124
124
  line-height: map-get($line-heights, default-text);
125
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
125
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
126
126
  margin-top: 0;
127
- max-width: $max-width--default;
128
- padding-top: map-get($nudges, nudge--h6) + map-get($browser-rounding-compensations, h6);
127
+ max-width: $text-max-width;
128
+ padding-top: map-get($nudges, h6) + map-get($browser-rounding-compensations, h6);
129
129
 
130
130
  @if ($increase-font-size-on-larger-screens) {
131
131
  @media (min-width: $breakpoint-x-large) {
132
- padding-top: map-get($nudges, nudge--h6-large) + map-get($browser-rounding-compensations, h6);
132
+ padding-top: map-get($nudges, h6-large) + map-get($browser-rounding-compensations, h6);
133
133
  }
134
134
  }
135
135
 
@@ -141,19 +141,19 @@
141
141
  %common-default-text-properties {
142
142
  line-height: map-get($line-heights, default-text);
143
143
  margin-top: 0;
144
- padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, p);
144
+ padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
145
145
  }
146
146
 
147
147
  %default-text {
148
148
  @extend %common-default-text-properties;
149
149
 
150
- margin-bottom: map-get($sp-after, default-text) - map-get($nudges, nudge--p);
150
+ margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
151
151
  }
152
152
 
153
153
  %paragraph {
154
154
  @extend %common-default-text-properties;
155
155
 
156
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
156
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
157
157
 
158
158
  &:not([class*='p-heading--']):not([class*='p-muted-heading']) + & {
159
159
  margin-top: -#{$sp-unit};
@@ -167,12 +167,12 @@
167
167
  %small-text {
168
168
  font-size: #{map-get($font-sizes, small)}rem;
169
169
  line-height: map-get($line-heights, small);
170
- margin-bottom: map-get($sp-after, small) - map-get($nudges, nudge--small);
171
- padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small);
170
+ margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
171
+ padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small);
172
172
 
173
173
  @if ($increase-font-size-on-larger-screens) {
174
174
  @media (min-width: $breakpoint-x-large) {
175
- padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small-largescreen);
175
+ padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small-largescreen);
176
176
  }
177
177
  }
178
178
 
@@ -185,12 +185,12 @@
185
185
  font-size: #{map-get($font-sizes, x-small)}rem;
186
186
  font-weight: $font-weight-bold;
187
187
  line-height: map-get($line-heights, x-small);
188
- margin-bottom: map-get($sp-after, x-small) - map-get($nudges, nudge--x-small);
189
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small);
188
+ margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small);
189
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small);
190
190
 
191
191
  @if ($increase-font-size-on-larger-screens) {
192
192
  @media (min-width: $breakpoint-x-large) {
193
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small-largescreen);
193
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small-largescreen);
194
194
  }
195
195
  }
196
196
 
@@ -226,42 +226,42 @@
226
226
  // Placeholder naming: $sp + -- + {preceding element} + {following element}, e.g. for p + h1: $sp--ph1
227
227
 
228
228
  %sp--ph1 {
229
- padding-top: map-get($nudges, nudge--h1-mobile) + $spv--x-large;
229
+ padding-top: map-get($nudges, h1-mobile) + $spv--x-large;
230
230
 
231
231
  @media (min-width: $breakpoint-heading-threshold) {
232
- padding-top: map-get($nudges, nudge--h1) + $spv--x-large;
232
+ padding-top: map-get($nudges, h1) + $spv--x-large;
233
233
  }
234
234
  }
235
235
 
236
236
  %sp--ph2 {
237
- padding-top: map-get($nudges, nudge--h2-mobile) + $spv--x-large;
237
+ padding-top: map-get($nudges, h2-mobile) + $spv--x-large;
238
238
 
239
239
  @media (min-width: $breakpoint-heading-threshold) {
240
- padding-top: map-get($nudges, nudge--h2) + $spv--x-large;
240
+ padding-top: map-get($nudges, h2) + $spv--x-large;
241
241
  }
242
242
  }
243
243
 
244
244
  %sp--ph3 {
245
- padding-top: map-get($nudges, nudge--h3-mobile) + $spv--x-large;
245
+ padding-top: map-get($nudges, h3-mobile) + $spv--x-large;
246
246
 
247
247
  @media (min-width: $breakpoint-heading-threshold) {
248
- padding-top: map-get($nudges, nudge--h3) + $spv--x-large;
248
+ padding-top: map-get($nudges, h3) + $spv--x-large;
249
249
  }
250
250
  }
251
251
 
252
252
  %sp--ph4 {
253
- padding-top: map-get($nudges, nudge--h4-mobile) + $spv--x-large;
253
+ padding-top: map-get($nudges, h4-mobile) + $spv--x-large;
254
254
 
255
255
  @media (min-width: $breakpoint-heading-threshold) {
256
- padding-top: map-get($nudges, nudge--h4) + $spv--x-large;
256
+ padding-top: map-get($nudges, h4) + $spv--x-large;
257
257
  }
258
258
  }
259
259
 
260
260
  %sp--ph5 {
261
- padding-top: map-get($nudges, nudge--p) + $spv--x-large;
261
+ padding-top: map-get($nudges, p) + $spv--x-large;
262
262
  }
263
263
 
264
264
  %sp--pmuted {
265
- padding-top: map-get($nudges, nudge--small) + $spv--x-large;
265
+ padding-top: map-get($nudges, small) + $spv--x-large;
266
266
  }
267
267
  }
package/scss/_base_typography.scss CHANGED
@@ -58,7 +58,7 @@
58
58
  p {
59
59
  @extend %paragraph;
60
60
 
61
- max-width: $max-width--default;
61
+ max-width: $text-max-width;
62
62
  }
63
63
 
64
64
  .p-text--default {
@@ -70,7 +70,7 @@
70
70
  @extend %small-text;
71
71
 
72
72
  &.dense {
73
- margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, nudge--small);
73
+ margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, small);
74
74
  }
75
75
  }
76
76
 
package/scss/_layouts_fluid-breakout.scss CHANGED
@@ -25,13 +25,13 @@
25
25
  }
26
26
 
27
27
  @media (min-width: $threshold-4-6-col) {
28
- padding-left: map-get($grid-margin-widths, medium);
29
- padding-right: map-get($grid-margin-widths, medium);
28
+ padding-left: map-get($grid-margin-widths, default);
29
+ padding-right: map-get($grid-margin-widths, default);
30
30
  }
31
31
 
32
32
  @media (min-width: $threshold-6-12-col) {
33
- padding-left: map-get($grid-margin-widths, large);
34
- padding-right: map-get($grid-margin-widths, large);
33
+ padding-left: map-get($grid-margin-widths, default);
34
+ padding-right: map-get($grid-margin-widths, default);
35
35
  }
36
36
 
37
37
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
@@ -51,8 +51,8 @@
51
51
  width: 100%;
52
52
 
53
53
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
54
- padding-left: map-get($grid-margin-widths, large);
55
- padding-right: map-get($grid-margin-widths, large);
54
+ padding-left: map-get($grid-margin-widths, default);
55
+ padding-right: map-get($grid-margin-widths, default);
56
56
  }
57
57
 
58
58
  @media (min-width: $breakpoint-large) {
@@ -97,11 +97,11 @@
97
97
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
98
98
 
99
99
  @media (min-width: $breakpoint-large) {
100
- padding-right: map-get($grid-margin-widths, large);
100
+ padding-right: map-get($grid-margin-widths, default);
101
101
  }
102
102
 
103
103
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
104
- padding-left: map-get($grid-margin-widths, large);
104
+ padding-left: map-get($grid-margin-widths, default);
105
105
  padding-right: 0;
106
106
  }
107
107
  }
@@ -110,13 +110,13 @@
110
110
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
111
111
 
112
112
  @media (min-width: $breakpoint-large) {
113
- padding-left: map-get($grid-margin-widths, large);
113
+ padding-left: map-get($grid-margin-widths, default);
114
114
  padding-right: 0;
115
115
  }
116
116
 
117
117
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
118
118
  padding-left: 0;
119
- padding-right: map-get($grid-margin-widths, large);
119
+ padding-right: map-get($grid-margin-widths, default);
120
120
  }
121
121
 
122
122
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
@@ -139,8 +139,8 @@
139
139
  }
140
140
 
141
141
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
142
- margin-left: map-get($grid-margin-widths, large);
143
- margin-right: map-get($grid-margin-widths, large);
142
+ margin-left: map-get($grid-margin-widths, default);
143
+ margin-right: map-get($grid-margin-widths, default);
144
144
  }
145
145
  }
146
146