vanilla-framework 4.1.0 → 4.2.0

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 (8) hide show
  1. package/package.json +6 -6
  2. package/scss/_base_forms.scss +90 -19
  3. package/scss/_base_icon-definitions.scss +6 -6
  4. package/scss/_patterns_form-help-text.scss +28 -0
  5. package/scss/_patterns_form-validation.scss +228 -33
  6. package/scss/_patterns_logo-section.scss +67 -129
  7. package/scss/_patterns_navigation.scss +2 -1
  8. package/scss/_settings_colors.scss +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vanilla-framework",
3
- "version": "4.1.0",
3
+ "version": "4.2.0",
4
4
  "author": {
5
5
  "email": "webteam@canonical.com",
6
6
  "name": "Canonical Webteam"
@@ -57,19 +57,19 @@
57
57
  "devDependencies": {
58
58
  "@canonical/cookie-policy": "3.5.0",
59
59
  "@canonical/latest-news": "1.4.1",
60
- "@percy/cli": "1.26.0",
60
+ "@percy/cli": "1.26.2",
61
61
  "@testing-library/cypress": "9.0.0",
62
62
  "autoprefixer": "10.4.14",
63
- "cypress": "12.13.0",
63
+ "cypress": "12.17.2",
64
64
  "get-site-urls": "3.0.0",
65
65
  "markdown-spellcheck": "1.3.1",
66
66
  "parker": "0.0.10",
67
- "postcss": "8.4.24",
67
+ "postcss": "8.4.27",
68
68
  "postcss-cli": "10.1.0",
69
69
  "postcss-scss": "4.0.6",
70
70
  "prettier": "2.8.8",
71
- "sass": "1.62.1",
72
- "stylelint": "15.10.1",
71
+ "sass": "1.64.2",
72
+ "stylelint": "15.10.2",
73
73
  "stylelint-config-prettier": "9.0.5",
74
74
  "stylelint-config-recommended-scss": "5.0.2",
75
75
  "stylelint-order": "5.0.0",
package/scss/_base_forms.scss CHANGED
@@ -68,22 +68,29 @@
68
68
  }
69
69
  }
70
70
 
71
- // adjust input background color for paper theme
71
+ // Theming
72
+ @if ($theme-default-forms == 'dark') {
73
+ @include vf-input-dark-theme;
72
74
 
73
- // XXX: currently these colours are transparent,
74
- // so they work both on paper and white backgrounds.
75
- // We may need later to add a specific override for
76
- // a white background within paper themed pages.
77
- .is-paper & {
78
- background-color: $colors--paper-theme--background-inputs;
75
+ &.is-light {
76
+ @include vf-input-light-theme;
77
+ }
78
+
79
+ .is-paper &,
80
+ &.is-paper {
81
+ @include vf-input-paper-theme;
82
+ }
83
+ } @else {
84
+ @include vf-input-light-theme;
79
85
 
80
- &:hover {
81
- background-color: $colors--paper-theme--background-hover;
86
+ .is-dark &,
87
+ &.is-dark {
88
+ @include vf-input-dark-theme;
82
89
  }
83
90
 
84
- &:active,
85
- &:focus {
86
- background-color: $colors--paper-theme--background-active;
91
+ .is-paper &,
92
+ &.is-paper {
93
+ @include vf-input-paper-theme;
87
94
  }
88
95
  }
89
96
  }
@@ -193,12 +200,10 @@
193
200
  -webkit-appearance: none;
194
201
  appearance: none;
195
202
  // stylelint-enable property-no-vendor-prefix
196
- background-color: $colors--light-theme--background-hover;
197
203
  background-position: right $sph--small center;
198
204
  background-repeat: no-repeat;
199
205
  background-size: map-get($icon-sizes, default);
200
206
  box-shadow: none;
201
- color: $colors--light-theme--text-default;
202
207
  min-height: map-get($line-heights, default-text);
203
208
  padding-right: calc($default-icon-size + 2 * $sph--small);
204
209
  text-indent: 0.01px;
@@ -208,10 +213,6 @@
208
213
  cursor: pointer;
209
214
  }
210
215
 
211
- option {
212
- background-color: white;
213
- }
214
-
215
216
  &[multiple],
216
217
  &[size] {
217
218
  background-image: none;
@@ -219,7 +220,6 @@
219
220
  height: auto;
220
221
 
221
222
  option {
222
- background-color: $colors--light-theme--background-hover;
223
223
  font-weight: $font-weight-regular-text;
224
224
  line-height: calc($sp-unit * 2 - 2px);
225
225
  padding: $spv--x-small 0;
@@ -247,3 +247,74 @@
247
247
  }
248
248
  // stylelint-enable selector-max-type
249
249
  }
250
+
251
+ @mixin vf-input-theme($color-background-default, $color-background-hover, $color-background-active, $color-background-option, $color-border, $color-text, $color-text-placeholder) {
252
+ background-color: $color-background-default;
253
+ border-color: $color-border;
254
+ color: $color-text;
255
+
256
+ &:hover {
257
+ background-color: $color-background-hover;
258
+ }
259
+
260
+ &:active,
261
+ &:focus {
262
+ background-color: $color-background-active;
263
+ }
264
+
265
+ // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
266
+ option,
267
+ option:checked {
268
+ background-color: $color-background-option;
269
+ color: $color-text;
270
+ }
271
+
272
+ // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
273
+ option:checked:not(:disabled) {
274
+ background-color: $color-background-active;
275
+ }
276
+
277
+ &::placeholder {
278
+ color: $color-text-placeholder;
279
+ }
280
+ }
281
+
282
+ @mixin vf-input-light-theme {
283
+ @include vf-input-theme(
284
+ $color-background-default: $colors--light-theme--background-inputs,
285
+ $color-background-hover: $colors--light-theme--background-hover,
286
+ $color-background-active: $colors--light-theme--background-active,
287
+ $color-background-option: $colors--light-theme--background-alt,
288
+ $color-border: $colors--light-theme--text-default,
289
+ $color-text: $colors--light-theme--text-default,
290
+ $color-text-placeholder: $colors--light-theme--text-muted
291
+ );
292
+ }
293
+
294
+ @mixin vf-input-paper-theme {
295
+ // XXX: currently these colours are transparent,
296
+ // so they work both on paper and white backgrounds.
297
+ // We may need later to add a specific override for
298
+ // a white background within paper themed pages.
299
+ @include vf-input-theme(
300
+ $color-background-default: $colors--paper-theme--background-inputs,
301
+ $color-background-hover: $colors--paper-theme--background-hover,
302
+ $color-background-active: $colors--paper-theme--background-active,
303
+ $color-background-option: $colors--light-theme--background-alt,
304
+ $color-border: $colors--light-theme--text-default,
305
+ $color-text: $colors--light-theme--text-default,
306
+ $color-text-placeholder: $colors--light-theme--text-muted
307
+ );
308
+ }
309
+
310
+ @mixin vf-input-dark-theme {
311
+ @include vf-input-theme(
312
+ $color-background-default: $colors--dark-theme--background-inputs,
313
+ $color-background-hover: $colors--dark-theme--background-hover,
314
+ $color-background-active: $colors--dark-theme--background-active,
315
+ $color-background-option: $colors--dark-theme--background-alt,
316
+ $color-border: $colors--dark-theme--border-high-contrast,
317
+ $color-text: $colors--dark-theme--text-default,
318
+ $color-text-placeholder: $colors--dark-theme--text-muted
319
+ );
320
+ }
package/scss/_base_icon-definitions.scss CHANGED
@@ -38,12 +38,12 @@
38
38
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6v6a1.5 1.5 0 001.356 1.493L6 13.5h4a1.5 1.5 0 001.493-1.356L11.5 12V6H13v6a3 3 0 01-3 3H6a3 3 0 01-3-3V6h1.5zm3 0v5.994H6V6h1.5zm2.498 0v5.994h-1.5V6h1.5zM8.5 0A2.5 2.5 0 0111 2.5V3h3v1.5H2V3h3v-.5A2.5 2.5 0 017.5 0h1zm0 1.5h-1a1 1 0 00-.993.883L6.5 2.5V3h3v-.5a1 1 0 00-.883-.993L8.5 1.5z' fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
39
39
  }
40
40
 
41
- @mixin vf-icon-error($color: $color-negative) {
42
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' fill='#{vf-url-friendly-color($color)}' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E");
41
+ @mixin vf-icon-error($color: $color-negative, $color-symbol: $color-x-light) {
42
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' fill='#{vf-url-friendly-color($color)}' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E");
43
43
  }
44
44
 
45
- @mixin vf-icon-warning($color: $color-caution) {
46
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='#{vf-url-friendly-color($color)}'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
45
+ @mixin vf-icon-warning($color: $color-caution, $color-symbol: $color-x-light) {
46
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='#{vf-url-friendly-color($color)}'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='#{vf-url-friendly-color($color-symbol)}'/%3E%3C/g%3E%3C/svg%3E");
47
47
  }
48
48
 
49
49
  @mixin vf-icon-external-link($color) {
@@ -70,8 +70,8 @@
70
70
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
71
71
  }
72
72
 
73
- @mixin vf-icon-success($bg-color: $color-positive, $fg-color: $color-x-light) {
74
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($bg-color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($fg-color)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");
73
+ @mixin vf-icon-success($color: $color-positive, $color-symbol: $color-x-light) {
74
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");
75
75
  }
76
76
 
77
77
  @mixin vf-icon-share($color) {
package/scss/_patterns_form-help-text.scss CHANGED
@@ -11,4 +11,32 @@
11
11
  margin-left: $sph--large + $form-tick-box-size;
12
12
  }
13
13
  }
14
+
15
+ @if ($theme-default-forms == 'dark') {
16
+ .p-form-help-text {
17
+ @include vf-form-help-text-dark-theme;
18
+ }
19
+ } @else {
20
+ .p-form-help-text {
21
+ @include vf-form-help-text-light-theme;
22
+ }
23
+ }
24
+
25
+ .is-dark .p-form-help-text,
26
+ .p-form-help-text.is-dark {
27
+ @include vf-form-help-text-dark-theme;
28
+ }
29
+
30
+ .is-light .p-form-help-text,
31
+ .p-form-help-text.is-light {
32
+ @include vf-form-help-text-light-theme;
33
+ }
34
+ }
35
+
36
+ @mixin vf-form-help-text-dark-theme {
37
+ color: $colors--dark-theme--text-muted;
38
+ }
39
+
40
+ @mixin vf-form-help-text-light-theme {
41
+ color: $colors--light-theme--text-muted;
14
42
  }
package/scss/_patterns_form-validation.scss CHANGED
@@ -13,71 +13,266 @@
13
13
 
14
14
  .p-form-validation__message {
15
15
  @extend %small-text;
16
+ @extend %vf-validation-wrapper;
16
17
 
17
18
  margin-top: -$sp-unit;
18
19
  }
19
20
 
20
- .is-success {
21
+ // Theming
22
+ @if ($theme-default-forms == 'dark') {
21
23
  .p-form-validation__input {
22
- background-color: $color-positive-background;
23
- border-bottom-color: $color-positive;
24
+ .is-success & {
25
+ @include vf-form-validation-input-success-dark-theme;
26
+ }
24
27
 
25
- &:hover {
26
- background-color: $color-positive-background--hover;
28
+ .is-caution & {
29
+ @include vf-form-validation-input-caution-dark-theme;
27
30
  }
28
31
 
29
- &:focus {
30
- background-color: $color-positive-background--focus;
32
+ .is-error & {
33
+ @include vf-form-validation-input-error-dark-theme;
31
34
  }
32
35
  }
33
36
 
34
37
  .p-form-validation__message {
35
- @extend %vf-validation-wrapper;
36
- @include vf-icon-success($color-positive);
38
+ .is-success & {
39
+ @include vf-form-validation-message-success-dark-theme;
40
+ }
37
41
 
38
- color: $color-positive;
39
- }
40
- }
42
+ .is-caution & {
43
+ @include vf-form-validation-message-caution-dark-theme;
44
+ }
41
45
 
42
- .is-caution {
46
+ .is-error & {
47
+ @include vf-form-validation-message-error-dark-theme;
48
+ }
49
+ }
50
+ } @else {
43
51
  .p-form-validation__input {
44
- background-color: $color-caution-background;
45
- border-bottom-color: $color-caution;
52
+ .is-success & {
53
+ @include vf-form-validation-input-success-light-theme;
54
+ }
46
55
 
47
- &:hover {
48
- background-color: $color-caution-background--hover;
56
+ .is-caution & {
57
+ @include vf-form-validation-input-caution-light-theme;
49
58
  }
50
59
 
51
- &:focus {
52
- background-color: $color-caution-background--focus;
60
+ .is-error & {
61
+ @include vf-form-validation-input-error-light-theme;
53
62
  }
54
63
  }
55
64
 
56
65
  .p-form-validation__message {
57
- @extend %vf-validation-wrapper;
58
- @include vf-icon-warning($color-caution);
66
+ .is-success & {
67
+ @include vf-form-validation-message-success-light-theme;
68
+ }
69
+
70
+ .is-caution & {
71
+ @include vf-form-validation-message-caution-light-theme;
72
+ }
73
+
74
+ .is-error & {
75
+ @include vf-form-validation-message-error-light-theme;
76
+ }
59
77
  }
60
78
  }
61
79
 
62
- .is-error {
80
+ // when is-dark/is-light is set on root p-form-validation element or its parent
81
+ .is-dark .is-success,
82
+ .is-success.is-dark {
63
83
  .p-form-validation__input {
64
- background-color: $color-negative-background;
65
- border-bottom-color: $color-negative;
84
+ @include vf-form-validation-input-success-dark-theme;
85
+ }
86
+ .p-form-validation__message {
87
+ @include vf-form-validation-message-success-dark-theme;
88
+ }
89
+ }
66
90
 
67
- &:hover {
68
- background-color: $color-negative-background--hover;
69
- }
91
+ .is-success.is-light {
92
+ .p-form-validation__input {
93
+ @include vf-form-validation-input-success-light-theme;
94
+ }
95
+ .p-form-validation__message {
96
+ @include vf-form-validation-message-success-light-theme;
97
+ }
98
+ }
70
99
 
71
- &:focus {
72
- background-color: $color-negative-background--focus;
73
- }
100
+ .is-dark .is-caution,
101
+ .is-caution.is-dark {
102
+ .p-form-validation__input {
103
+ @include vf-form-validation-input-caution-dark-theme;
104
+ }
105
+ .p-form-validation__message {
106
+ @include vf-form-validation-message-caution-dark-theme;
107
+ }
108
+ }
109
+
110
+ .is-caution.is-light {
111
+ .p-form-validation__input {
112
+ @include vf-form-validation-input-caution-light-theme;
113
+ }
114
+ .p-form-validation__message {
115
+ @include vf-form-validation-message-caution-light-theme;
74
116
  }
117
+ }
75
118
 
119
+ .is-dark .is-error,
120
+ .is-error.is-dark {
121
+ .p-form-validation__input {
122
+ @include vf-form-validation-input-error-dark-theme;
123
+ }
76
124
  .p-form-validation__message {
77
- @extend %vf-validation-wrapper;
78
- @include vf-icon-error($color-negative);
125
+ @include vf-form-validation-message-error-dark-theme;
126
+ }
127
+ }
128
+
129
+ .is-error.is-light {
130
+ .p-form-validation__input {
131
+ @include vf-form-validation-input-error-light-theme;
132
+ }
133
+ .p-form-validation__message {
134
+ @include vf-form-validation-message-error-light-theme;
135
+ }
136
+ }
79
137
 
80
- color: $color-negative;
138
+ // when is-dark/is-light is set on p-form-validation__input element
139
+ .is-success .p-form-validation__input {
140
+ .is-dark &,
141
+ &.is-dark {
142
+ @include vf-form-validation-input-success-dark-theme;
81
143
  }
144
+
145
+ &.is-light {
146
+ @include vf-form-validation-input-success-light-theme;
147
+ }
148
+ }
149
+
150
+ .is-caution .p-form-validation__input {
151
+ .is-dark &,
152
+ &.is-dark {
153
+ @include vf-form-validation-input-caution-dark-theme;
154
+ }
155
+
156
+ &.is-light {
157
+ @include vf-form-validation-input-caution-light-theme;
158
+ }
159
+ }
160
+
161
+ .is-error .p-form-validation__input {
162
+ .is-dark &,
163
+ &.is-dark {
164
+ @include vf-form-validation-input-error-dark-theme;
165
+ }
166
+
167
+ &.is-light {
168
+ @include vf-form-validation-input-error-light-theme;
169
+ }
170
+ }
171
+ }
172
+
173
+ @mixin vf-form-validation-input-state-theme($color-background-default, $color-background-hover, $color-background-active, $color-border, $color-text) {
174
+ background-color: $color-background-default;
175
+ border-bottom-color: $color-border;
176
+
177
+ &:hover {
178
+ background-color: $color-background-hover;
82
179
  }
180
+
181
+ &:focus {
182
+ background-color: $color-background-active;
183
+ }
184
+ }
185
+
186
+ @mixin vf-form-validation-input-success-dark-theme {
187
+ @include vf-form-validation-input-state-theme(
188
+ $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'default'),
189
+ $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'hover'),
190
+ $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'active'),
191
+ $color-border: map-get($colors-dark-theme--tinted-borders, 'positive'),
192
+ $color-text: map-get($colors-dark-theme--tinted-borders, 'positive')
193
+ );
194
+ }
195
+
196
+ @mixin vf-form-validation-input-caution-dark-theme {
197
+ @include vf-form-validation-input-state-theme(
198
+ $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'default'),
199
+ $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'hover'),
200
+ $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'active'),
201
+ $color-border: map-get($colors-dark-theme--tinted-borders, 'caution'),
202
+ $color-text: map-get($colors-dark-theme--tinted-borders, 'caution')
203
+ );
204
+ }
205
+
206
+ @mixin vf-form-validation-input-error-dark-theme {
207
+ @include vf-form-validation-input-state-theme(
208
+ $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'default'),
209
+ $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'hover'),
210
+ $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'active'),
211
+ $color-border: map-get($colors-dark-theme--tinted-borders, 'negative'),
212
+ $color-text: map-get($colors-dark-theme--tinted-borders, 'negative')
213
+ );
214
+ }
215
+
216
+ @mixin vf-form-validation-input-success-light-theme {
217
+ @include vf-form-validation-input-state-theme(
218
+ $color-background-default: $color-positive-background,
219
+ $color-background-hover: $color-positive-background--hover,
220
+ $color-background-active: $color-positive-background--focus,
221
+ $color-border: $color-positive,
222
+ $color-text: $color-positive
223
+ );
224
+ }
225
+
226
+ @mixin vf-form-validation-input-caution-light-theme {
227
+ @include vf-form-validation-input-state-theme(
228
+ $color-background-default: $color-caution-background,
229
+ $color-background-hover: $color-caution-background--hover,
230
+ $color-background-active: $color-caution-background--focus,
231
+ $color-border: $color-caution,
232
+ $color-text: $color-caution
233
+ );
234
+ }
235
+
236
+ @mixin vf-form-validation-input-error-light-theme {
237
+ @include vf-form-validation-input-state-theme(
238
+ $color-background-default: $color-negative-background,
239
+ $color-background-hover: $color-negative-background--hover,
240
+ $color-background-active: $color-negative-background--focus,
241
+ $color-border: $color-negative,
242
+ $color-text: $color-negative
243
+ );
244
+ }
245
+
246
+ @mixin vf-form-validation-message-state-theme($color-text) {
247
+ color: $color-text;
248
+ }
249
+
250
+ @mixin vf-form-validation-message-success-dark-theme {
251
+ @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'positive'));
252
+ @include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, 'positive'), $color-symbol: $colors--dark-theme--background-default);
253
+ }
254
+
255
+ @mixin vf-form-validation-message-caution-dark-theme {
256
+ @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'caution'));
257
+ @include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, 'caution'), $color-symbol: $colors--dark-theme--background-default);
258
+ }
259
+
260
+ @mixin vf-form-validation-message-error-dark-theme {
261
+ @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'negative'));
262
+ @include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, 'negative'), $color-symbol: $colors--dark-theme--background-default);
263
+ }
264
+
265
+ @mixin vf-form-validation-message-success-light-theme {
266
+ @include vf-form-validation-message-state-theme($color-text: $color-positive);
267
+ @include vf-icon-success($color-positive);
268
+ }
269
+
270
+ @mixin vf-form-validation-message-caution-light-theme {
271
+ @include vf-form-validation-message-state-theme($color-text: $colors--light-theme--text-default);
272
+ @include vf-icon-warning($color-caution);
273
+ }
274
+
275
+ @mixin vf-form-validation-message-error-light-theme {
276
+ @include vf-form-validation-message-state-theme($color-text: $color-negative);
277
+ @include vf-icon-error($color-negative);
83
278
  }
package/scss/_patterns_logo-section.scss CHANGED
@@ -1,152 +1,90 @@
1
- @use 'sass:math';
2
-
3
- @mixin vf-p-set-logo-section-item-width($breakpoint: small, $column-span: 1) {
4
- // This mixin calculates the width of an individual logo.
5
-
6
- $grid-column-count: $grid-columns-small;
7
- $grid-column-prefix: $grid-small-col-prefix;
8
- $gutter: map-get($grid-gutter-widths, small);
9
- // medium and small use the same breakpoint, but one uses a max-width, the other a min-width;
10
- // so, we need to specify which one to use
11
- $media-query-keyword: max-width;
12
- $media-query-width: $threshold-4-6-col;
13
- // how many grid columns should a logo span
14
- $logo-column-span: 1;
15
-
16
- @if $breakpoint == medium {
17
- $grid-column-count: $grid-columns-medium;
18
- $grid-column-prefix: $grid-medium-col-prefix;
19
- $gutter: map-get($grid-gutter-widths, default);
20
- $media-query-keyword: min-width;
21
- $media-query-width: $threshold-4-6-col;
22
- $logo-column-span: 1;
23
- } @else if $breakpoint == large {
24
- $grid-column-count: $grid-columns;
25
- $grid-column-prefix: $grid-large-col-prefix;
26
- $gutter: map-get($grid-gutter-widths, default);
27
- $media-query-keyword: min-width;
28
- $media-query-width: $threshold-6-12-col;
29
- $logo-column-span: $column-span;
1
+ @mixin vf-p-logo-section {
2
+ // deprecated, to be removed in future version
3
+ .p-logo-section__title {
4
+ @extend %small-caps-text;
30
5
  }
31
6
 
32
- @media ($media-query-keyword: #{$media-query-width}) {
33
- // First set the width assuming the parent spans the entire grid. This is the case in 4 scenarios:
34
- // 1. The logo section is nested inside a container that spans the entire grid, (depending on breakpoint that can be a .col-4, .col-6, or .col-12 class), which itself sits inside a .row
35
- // 2. The logo section is nested inside a .u-fixed-width container
36
- // 3. The logo section does not have a parent that sets a fixed width grid. This is not a recommended use case, but we ensure things still work
37
-
38
- // The logic of these calculations is explained further down, in the @for loop
39
- $gutters-total-width: $grid-column-count * $gutter;
40
- $percentage-width-of-one-col: math.div(100%, $grid-column-count);
41
- $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
42
- $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
43
- $rem-contribution: $logo-column-span * math.div($gutters-total-width, $grid-column-count) - $gutter-width-inside-logo;
44
- @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
45
-
46
- // Looping in reverse to ensure nested column rules end up further down in the generated css file, thus having higher specificity.
47
- // E.g. if a col-4 is nested inside col-8, the col-8 rule should be written above the col-4 rule in the css file, to ensure the col-4 styles take precedence
48
- // We start at one less than the column count, as this case has been handled above
49
- @for $column-count from $grid-column-count - 1 through 1 {
50
- // The number of gutters is equal to the number of columns. If we switch to usnig flex gap instead of margins, this should be updated to number of columns - 1.
51
- // $gutters-total-width calculates the total width of all gutters
52
- $gutters-total-width: $column-count * $gutter;
53
- @if $column-count == 1 {
54
- // if the available number of columns of the parent container is less than the desired number of columns the logo should span, we clamp that desired number ($logo-column-span) to what's available:
55
- $logo-column-span: min($logo-column-span, $column-count);
7
+ $logo-section-item-size: 8rem; // height of the logos on large screens
8
+ $logo-section-item-size-medium: 6rem; // height of the logos on medium screens
9
+ $logo-section-item-size-small: 4rem; // height of the logos on small screens
10
+
11
+ $logo-section-offset: 1rem; // offset by which rows are pulled closer together
12
+ $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens
13
+ $logo-section-offset-small: 0.5rem; // height of the logos on small screens
14
+
15
+ $logo-section-item-gap: 3rem;
16
+ $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap);
17
+
18
+ .p-logo-section,
19
+ .p-logo-section--dense {
20
+ .p-logo-section__item {
21
+ display: inline-block;
22
+ margin: 0;
23
+ margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
24
+ margin-right: $logo-section-item-gap;
25
+ margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
26
+
27
+ @media (min-width: $breakpoint-small) {
28
+ margin-bottom: calc(-1 * $logo-section-offset-medium);
29
+ margin-top: calc(-1 * $logo-section-offset-medium);
56
30
  }
57
31
 
58
- // The logos are sized so that, depending on breakpoint, they span either one, or two columns of the grid.
59
- // When spanning more than one column, we need to account for the gutters between the columns.
60
-
61
- // calc() doesn't allow dividing a mixture of different units, so the calculation
62
- // (100% - $gutters-total-width) / $column-count needs to be broken down into two separate divisions:
63
- // 100% / $column-count - $gutters-total-width / $column-count
64
- // Thus the calculation is split into 2 parts, which are then used in the final calc() function:
65
-
66
- // calculate the width of a single column by dividing the entire width by the number of columns it represents:
67
- $percentage-width-of-one-col: math.div(100%, $column-count);
68
-
69
- // multiply the width of one column by the number of columns the logo needs to span
70
- $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
32
+ @media (min-width: $breakpoint-large) {
33
+ margin-bottom: calc(-1 * $logo-section-offset);
34
+ margin-top: calc(-1 * $logo-section-offset);
35
+ }
36
+ }
71
37
 
72
- // calculate the number of gutters the logo spans
73
- $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
38
+ .p-logo-section__logo {
39
+ display: block;
40
+ height: $logo-section-item-size-small;
41
+ max-width: none; // prevent logos from squishing on small screens
42
+ width: auto;
74
43
 
75
- // add the width of gutters spanned by the logo, subtract the $gutters-total-width / $column-count;
76
- // the signs here are reversed because the variable is subtracted. This avoids having + and - in the final css, e.g.: "+ -.75rem"
77
- $rem-contribution: $logo-column-span * math.div($gutters-total-width, $column-count) - $gutter-width-inside-logo;
44
+ @media (min-width: $breakpoint-small) {
45
+ height: $logo-section-item-size-medium;
46
+ }
78
47
 
79
- .#{$grid-column-prefix}#{$column-count} & {
80
- @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
48
+ @media (min-width: $breakpoint-large) {
49
+ height: $logo-section-item-size;
81
50
  }
82
51
  }
83
- }
84
- }
85
52
 
86
- @mixin vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution) {
87
- @if $rem-contribution == 0 {
88
- width: $percentage-contribution;
89
- } @else {
90
- width: calc($percentage-contribution - $rem-contribution);
91
- }
92
- }
53
+ .p-logo-section__items {
54
+ line-height: 0; // prevent space between rows of inline logos
93
55
 
94
- @mixin vf-p-logo-section {
95
- // The logo section pattern needs to align logos to the grid when they are an even number, and center them (while maintaining the same logo width) when the number of logos on a line is odd.
96
- // This means we can't use css grid for this, instead we need to replicate its behavior for even numbers of logos, and center the odd ones.
97
- .p-logo-section__title {
98
- @extend %small-caps-text;
99
- }
56
+ // compensate for the negative margin on the logos
57
+ padding-bottom: $logo-section-offset-small;
58
+ padding-top: $logo-section-offset-small;
100
59
 
101
- $margin-small: map-get($grid-gutter-widths, small);
102
- $margin-medium: map-get($grid-gutter-widths, default);
103
- $margin-large: map-get($grid-gutter-widths, default);
104
-
105
- .p-logo-section__items {
106
- display: flex;
107
- flex-wrap: wrap;
108
- justify-content: center;
109
- margin-bottom: $spv--x-large;
110
- // negates the margin of logos that sit in the first column
111
- margin-left: -#{$margin-small};
112
- width: calc(100% + $margin-small);
113
-
114
- @media (min-width: $threshold-4-6-col) {
115
- margin-left: -$margin-medium;
116
- width: calc(100% + $margin-medium);
117
- }
60
+ @media (min-width: $breakpoint-small) {
61
+ padding-bottom: $logo-section-offset-medium;
62
+ padding-top: $logo-section-offset-medium;
63
+ }
118
64
 
119
- @media (min-width: $threshold-6-12-col) {
120
- margin-left: -$margin-large;
121
- width: calc(100% + $margin-large);
65
+ @media (min-width: $breakpoint-large) {
66
+ padding-bottom: $logo-section-offset;
67
+ padding-top: $logo-section-offset;
68
+ }
122
69
  }
123
70
  }
124
71
 
125
- .p-logo-section__item {
126
- align-items: center;
127
- display: flex;
128
- flex: 0 1 auto;
129
- margin-left: $margin-small;
130
-
131
- @media (min-width: $threshold-4-6-col) {
132
- margin-left: $margin-medium;
72
+ .p-logo-section--dense {
73
+ .p-logo-section__item {
74
+ display: inline-block;
75
+ margin: 0;
76
+ margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
77
+ margin-right: $logo-section-item-gap-dense;
78
+ margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
133
79
  }
134
80
 
135
- @media (min-width: $threshold-6-12-col) {
136
- margin-left: $margin-large;
81
+ .p-logo-section__logo {
82
+ height: $logo-section-item-size-small;
137
83
  }
138
84
 
139
- @include vf-p-set-logo-section-item-width($breakpoint: small);
140
- @include vf-p-set-logo-section-item-width($breakpoint: medium);
141
- @include vf-p-set-logo-section-item-width($breakpoint: large, $column-span: 2);
142
-
143
- .p-logo-section--dense & {
144
- @include vf-p-set-logo-section-item-width($breakpoint: large);
85
+ .p-logo-section__items {
86
+ padding-bottom: $logo-section-offset-small;
87
+ padding-top: $logo-section-offset-small;
145
88
  }
146
89
  }
147
-
148
- .p-logo-section__logo {
149
- height: auto;
150
- width: 100%;
151
- }
152
90
  }
package/scss/_patterns_navigation.scss CHANGED
@@ -588,7 +588,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
588
588
  position: absolute;
589
589
  right: map-get($grid-margin-widths, small);
590
590
  text-indent: calc(100% + 10rem);
591
- top: calc($spv--large + map-get($nudges, x-small));
591
+ top: $spv--large;
592
592
  transform: rotate(-90deg);
593
593
  width: map-get($icon-sizes, default);
594
594
 
@@ -598,6 +598,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
598
598
 
599
599
  @media (min-width: $breakpoint-navigation-threshold) {
600
600
  right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
601
+ top: calc($spv--large + map-get($nudges, x-small));
601
602
  transform: rotate(0deg);
602
603
  }
603
604
  }
package/scss/_settings_colors.scss CHANGED
@@ -157,6 +157,7 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
157
157
 
158
158
  $colors--dark-theme--background-default: #262626 !default;
159
159
  $colors--dark-theme--background-alt: #2d2d2d !default;
160
+ $colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
160
161
  $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
161
162
  $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
162
163
  $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
@@ -195,9 +196,9 @@ $colors-dark-theme--tinted-backgrounds: (
195
196
 
196
197
  $colors-dark-theme--tinted-borders: (
197
198
  neutral: hsl(0deg 0% 65%),
198
- positive: hsl(129deg 60% 65%),
199
- caution: hsl(27deg 80% 65%),
200
- negative: hsl(353deg 80% 70%),
199
+ positive: #62a36c,
200
+ caution: #c48831,
201
+ negative: #d17b85,
201
202
  information: hsl(210deg 80% 65%),
202
203
  );
203
204