@department-of-veterans-affairs/css-library 0.17.0 → 0.18.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 (16) hide show
  1. package/dist/stylesheets/base/fonts.css +0 -1578
  2. package/dist/stylesheets/base/headings.css +1 -1
  3. package/dist/stylesheets/base/utils.css +1 -1
  4. package/dist/stylesheets/core.css +140 -1584
  5. package/dist/stylesheets/formation-overrides/elements/buttons.css +1 -1
  6. package/dist/stylesheets/formation-overrides/elements/inputs.css +1 -1
  7. package/dist/stylesheets/formation-overrides/elements/typography.css +2 -2
  8. package/dist/stylesheets/modules/m-emergency-banner.css +1 -1
  9. package/dist/stylesheets/modules/m-maintenance-banner.css +1 -1
  10. package/dist/stylesheets/modules/m-megamenu.css +2 -2
  11. package/dist/stylesheets/shame.css +1 -1
  12. package/dist/stylesheets/utilities.css +1 -1
  13. package/dist/tokens/css/variables.css +54 -116
  14. package/dist/tokens/json/variables.json +877 -1663
  15. package/dist/tokens/scss/variables.scss +54 -116
  16. package/package.json +1 -1
package/dist/stylesheets/formation-overrides/elements/buttons.css CHANGED
@@ -47,7 +47,7 @@ button,
47
47
  color: #ffffff;
48
48
  cursor: pointer;
49
49
  display: inline-block;
50
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
50
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
51
51
  font-size: 16px;
52
52
  font-weight: 700;
53
53
  line-height: 1;
package/dist/stylesheets/formation-overrides/elements/inputs.css CHANGED
@@ -160,7 +160,7 @@ legend {
160
160
 
161
161
  .usa-form-hint {
162
162
  color: #757575;
163
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
163
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
164
164
  margin-bottom: 0;
165
165
  }
166
166
 
package/dist/stylesheets/formation-overrides/elements/typography.css CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  html {
33
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
33
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
34
34
  font-size: 100%;
35
35
  }
36
36
 
@@ -194,7 +194,7 @@ dfn {
194
194
  .usa-sans a,
195
195
  .usa-sans li,
196
196
  .usa-sans span {
197
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
197
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
198
198
  }
199
199
  .usa-sans a {
200
200
  border-bottom: none;
package/dist/stylesheets/modules/m-emergency-banner.css CHANGED
@@ -14,7 +14,7 @@
14
14
  margin-right: -22.5px;
15
15
  }
16
16
  .vads-c-emergency-banner .usa-alert .usa-alert-heading {
17
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
17
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
18
18
  font-size: 1rem;
19
19
  margin-top: 4px;
20
20
  margin-left: 30.5px;
package/dist/stylesheets/modules/m-maintenance-banner.css CHANGED
@@ -14,7 +14,7 @@
14
14
  margin-right: -22.5px;
15
15
  }
16
16
  .vads-c-maintenance-banner .usa-alert .usa-alert-heading {
17
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
17
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
18
18
  font-size: 1rem;
19
19
  margin-top: 4px;
20
20
  margin-left: 30.5px;
package/dist/stylesheets/modules/m-megamenu.css CHANGED
@@ -108,7 +108,7 @@
108
108
  .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
109
109
  display: block;
110
110
  color: #000000;
111
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
111
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
112
112
  font-size: 16px;
113
113
  font-weight: bold;
114
114
  margin-top: 4px;
@@ -263,7 +263,7 @@
263
263
  }
264
264
  #mega-menu .vetnav-panel--submenu:not([hidden]) h3,
265
265
  .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
266
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
266
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
267
267
  font-size: 16px;
268
268
  }
269
269
  }
package/dist/stylesheets/shame.css CHANGED
@@ -48,7 +48,7 @@ fieldset {
48
48
 
49
49
  .usa-form-note {
50
50
  float: right;
51
- font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
51
+ font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
52
52
  font-size: 0.9375rem;
53
53
  margin: 0 0 scale(1.5rem);
54
54
  }
package/dist/stylesheets/utilities.css CHANGED
@@ -5796,7 +5796,7 @@ through all possible variants
5796
5796
  }
5797
5797
 
5798
5798
  .vads-u-font-family--sans {
5799
- font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
5799
+ font-family: Source Sans Pro Web, Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
5800
5800
  }
5801
5801
 
5802
5802
  .vads-u-font-family--serif {
package/dist/tokens/css/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 14 Jan 2025 19:27:17 GMT
3
+ * Generated on Thu, 13 Feb 2025 17:42:38 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -15,11 +15,11 @@
15
15
  --desktop: 1024px;
16
16
  --desktop-lg: 1201px;
17
17
  --color-link-default-hover: rgba(#000000, 0.05);
18
+ --vads-button-color-background-primary-on-light: #005ea2;
18
19
  --vads-button-color-background-primary-alt-active-on-light: #154c21;
19
20
  --vads-button-color-background-secondary-on-light: #ffffff;
20
21
  --vads-button-color-text-primary-alt-on-light: #ffffff;
21
22
  --vads-button-color-text-primary-on-light: #ffffff;
22
- --vads-input-background-color-on-light: #ffffff;
23
23
  --vads-color-white: #ffffff;
24
24
  --vads-label-hint-text-color-on-light: #757575;
25
25
  --vads-process-list-color-text-pending-on-light: #757575;
@@ -95,6 +95,7 @@
95
95
  --vads-color-gold-lighter: #ffe396;
96
96
  --vads-color-gold-lightest: #fef0c8;
97
97
  --vads-color-black: #000000;
98
+ --vads-color-orange: #dd7533;
98
99
  --vads-color-green-lighter: #b4d0b9;
99
100
  --vads-color-blue-cool: #345d96;
100
101
  --vads-color-blue-cool-light: #4a77b4;
@@ -115,10 +116,18 @@
115
116
  --vads-color-background-default-on-dark: #171716;
116
117
  --vads-color-forms-surface-active-on-light: #ecf1f7;
117
118
  --vads-color-forms-surface-active-on-dark: #252f3e;
118
- --font-family-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
119
+ --vads-input-background-color-on-light: #ffffff;
120
+ --vads-input-border-color-on-light: #565c65;
121
+ --vads-input-prefix-color-fill-on-light: #757575;
122
+ --vads-input-prefix-color-text-on-light: #757575;
123
+ --vads-input-suffix-color-text-on-light: #757575;
124
+ --vads-input-tile-background-active-on-light: rgba(0, 94, 162, 0.1);
125
+ --vads-input-tile-border-active-on-light: #005ea2;
126
+ --vads-input-tile-border-on-light: rgba(27, 27, 27, 0.03);
127
+ --font-family-sans: 'Source Sans Pro Web', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
119
128
  --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
120
129
  --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
121
- --font-source-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
130
+ --font-source-sans: 'Source Sans Pro Web', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
122
131
  --font-weight-normal: 400;
123
132
  --font-weight-bold: 700;
124
133
  --font-style-normal: normal;
@@ -192,116 +201,45 @@
192
201
  --units-neg-9: -4.5rem;
193
202
  --units-neg-10: -5rem;
194
203
  --units-neg-15: -7.5rem;
195
- --uswds-system-color-blue-5: #eff6fb;
196
- --uswds-system-color-blue-10: #d9e8f6;
197
- --uswds-system-color-blue-20: #aacdec;
198
- --uswds-system-color-blue-30: #73b3e7;
199
- --uswds-system-color-blue-40: #4f97d1;
200
- --uswds-system-color-blue-50: #2378c3;
201
- --uswds-system-color-blue-60: #2c608a;
202
- --uswds-system-color-blue-70: #274863;
203
- --uswds-system-color-blue-80: #1f303e;
204
- --uswds-system-color-blue-90: #11181d;
205
- --uswds-system-color-blue-vivid-30: #58b4ff;
206
- --uswds-system-color-blue-vivid-50: #0076d6;
207
- --uswds-system-color-blue-vivid-60: #005ea2;
208
- --uswds-system-color-blue-vivid-70: #0b4778;
209
- --uswds-system-color-blue-vivid-80: #112f4e;
210
- --uswds-system-color-blue-cool-60: #2e6276;
211
- --uswds-system-color-blue-cool-vivid-5: #e1f3f8;
212
- --uswds-system-color-blue-cool-vivid-20: #97d4ea;
213
- --uswds-system-color-blue-cool-vivid-40: #28a0cb;
214
- --uswds-system-color-blue-cool-vivid-60: #07648d;
215
- --uswds-system-color-blue-warm-5: #ecf1f7;
216
- --uswds-system-color-blue-warm-10: #e1e7f1;
217
- --uswds-system-color-blue-warm-30: #98afd2;
218
- --uswds-system-color-blue-warm-50: #4a77b4;
219
- --uswds-system-color-blue-warm-60: #345d96;
220
- --uswds-system-color-blue-warm-80: #252f3e;
221
- --uswds-system-color-blue-warm-vivid-60: #0050d8;
222
- --uswds-system-color-blue-warm-vivid-70: #1a4480;
223
- --uswds-system-color-blue-warm-vivid-80: #162e51;
224
- --uswds-system-color-cyan-5: #e7f6f8;
225
- --uswds-system-color-cyan-20: #99deea;
226
- --uswds-system-color-cyan-vivid-30: #00bde3;
227
- --uswds-system-color-cyan-vivid-40: #009ec1;
228
- --uswds-system-color-gold-50: #8e704f;
229
- --uswds-system-color-gold-vivid-5: #fef0c8;
230
- --uswds-system-color-gold-vivid-10: #ffe396;
231
- --uswds-system-color-gold-vivid-20: #ffbe2e;
232
- --uswds-system-color-gold-vivid-30: #e5a000;
233
- --uswds-system-color-gold-vivid-40: #c2850c;
234
- --uswds-system-color-gold-vivid-50: #936f38;
235
- --uswds-system-color-gray-1: #fcfcfc;
236
- --uswds-system-color-gray-2: #f9f9f9;
237
- --uswds-system-color-gray-3: #f6f6f6;
238
- --uswds-system-color-gray-4: #f3f3f3;
239
- --uswds-system-color-gray-5: #f0f0f0;
240
- --uswds-system-color-gray-10: #e6e6e6;
241
- --uswds-system-color-gray-20: #c9c9c9;
242
- --uswds-system-color-gray-30: #adadad;
243
- --uswds-system-color-gray-40: #919191;
244
- --uswds-system-color-gray-50: #757575;
245
- --uswds-system-color-gray-60: #5c5c5c;
246
- --uswds-system-color-gray-70: #454545;
247
- --uswds-system-color-gray-80: #2e2e2e;
248
- --uswds-system-color-gray-90: #1b1b1b;
249
- --uswds-system-color-gray-100: #000000;
250
- --uswds-system-color-gray-cool-1: #fbfcfd;
251
- --uswds-system-color-gray-cool-2: #f7f9fa;
252
- --uswds-system-color-gray-cool-3: #f5f6f7;
253
- --uswds-system-color-gray-cool-4: #f1f3f6;
254
- --uswds-system-color-gray-cool-5: #edeff0;
255
- --uswds-system-color-gray-cool-10: #dfe1e2;
256
- --uswds-system-color-gray-cool-20: #c6cace;
257
- --uswds-system-color-gray-cool-30: #a9aeb1;
258
- --uswds-system-color-gray-cool-40: #8d9297;
259
- --uswds-system-color-gray-cool-50: #71767a;
260
- --uswds-system-color-gray-cool-60: #565c65;
261
- --uswds-system-color-gray-cool-70: #3d4551;
262
- --uswds-system-color-gray-cool-80: #2d2e2f;
263
- --uswds-system-color-gray-cool-90: #1c1d1f;
264
- --uswds-system-color-gray-warm-10: #e6e6e2;
265
- --uswds-system-color-gray-warm-70: #454540;
266
- --uswds-system-color-gray-warm-90: #171716;
267
- --uswds-system-color-green-warm-50: #6f7a41;
268
- --uswds-system-color-green-cool-5: #ecf3ec;
269
- --uswds-system-color-green-cool-20: #b4d0b9;
270
- --uswds-system-color-green-cool-40: #5e9f69;
271
- --uswds-system-color-green-cool-50: #4d8055;
272
- --uswds-system-color-green-cool-vivid-20: #70e17b;
273
- --uswds-system-color-green-cool-vivid-30: #21c834;
274
- --uswds-system-color-green-cool-vivid-40: #00a91c;
275
- --uswds-system-color-green-cool-vivid-50: #008817;
276
- --uswds-system-color-green-cool-vivid-60: #216e1f;
277
- --uswds-system-color-green-cool-vivid-70: #154c21;
278
- --uswds-system-color-green-cool-vivid-80: #19311e;
279
- --uswds-system-color-orange-40: #dd7533;
280
- --uswds-system-color-orange-warm-50: #bd5727;
281
- --uswds-system-color-red-30: #f2938c;
282
- --uswds-system-color-red-50: #d83933;
283
- --uswds-system-color-red-60: #a23737;
284
- --uswds-system-color-red-70: #6f3331;
285
- --uswds-system-color-red-vivid-40: #fb5a47;
286
- --uswds-system-color-red-vivid-60: #b50909;
287
- --uswds-system-color-red-vivid-70: #8b0a03;
288
- --uswds-system-color-red-vivid-80: #5c1111;
289
- --uswds-system-color-red-cool-vivid-10: #f8dfe2;
290
- --uswds-system-color-red-cool-vivid-50: #e41d3d;
291
- --uswds-system-color-red-cool-vivid-60: #b21d38;
292
- --uswds-system-color-red-cool-vivid-70: #822133;
293
- --uswds-system-color-red-warm-10: #f4e3db;
294
- --uswds-system-color-red-warm-80: #332d29;
295
- --uswds-system-color-red-warm-vivid-30: #f39268;
296
- --uswds-system-color-red-warm-vivid-50: #d54309;
297
- --uswds-system-color-red-warm-vivid-60: #9c3d10;
298
- --uswds-system-color-violet-vivid-70: #54278f;
299
- --uswds-system-color-violet-warm-60: #864381;
300
- --uswds-system-color-yellow-5: #faf3d1;
301
- --uswds-system-color-yellow-50: #8a7237;
302
- --uswds-system-color-yellow-vivid-10: #fee685;
303
- --uswds-system-color-yellow-vivid-20: #face00;
304
- --uswds-system-color-yellow-vivid-80: #422d19;
305
- --uswds-system-color-indigo-cool-60: #3f57a6;
306
- --uswds-system-color-mint-cool-50: #40807e;
204
+ --vads-spacing-0: 0;
205
+ --vads-spacing-1: 8px;
206
+ --vads-spacing-2: 16px;
207
+ --vads-spacing-3: 24px;
208
+ --vads-spacing-4: 32px;
209
+ --vads-spacing-5: 40px;
210
+ --vads-spacing-6: 48px;
211
+ --vads-spacing-7: 56px;
212
+ --vads-spacing-8: 64px;
213
+ --vads-spacing-9: 72px;
214
+ --vads-spacing-10: 80px;
215
+ --vads-spacing-15: 120px;
216
+ --vads-spacing-1px: 1px;
217
+ --vads-spacing-2px: 2px;
218
+ --vads-spacing-0p5: 4px;
219
+ --vads-spacing-1p5: 12px;
220
+ --vads-spacing-2p5: 20px;
221
+ --vads-spacing-neg-1px: -1px;
222
+ --vads-spacing-neg-2px: -2px;
223
+ --vads-spacing-neg-0p5: -4px;
224
+ --vads-spacing-neg-1: -8px;
225
+ --vads-spacing-neg-1p5: -12px;
226
+ --vads-spacing-neg-2: -16px;
227
+ --vads-spacing-neg-2p5: -20px;
228
+ --vads-spacing-neg-3: -24px;
229
+ --vads-spacing-neg-4: -32px;
230
+ --vads-spacing-neg-5: -40px;
231
+ --vads-spacing-neg-6: -48px;
232
+ --vads-spacing-neg-7: -56px;
233
+ --vads-spacing-neg-8: -64px;
234
+ --vads-spacing-neg-9: -72px;
235
+ --vads-spacing-neg-10: -80px;
236
+ --vads-spacing-neg-15: -120px;
237
+ --vads-spacing-inset-l: 32px;
238
+ --vads-spacing-inset-m: 24px;
239
+ --vads-spacing-inset-s: 16px;
240
+ --vads-spacing-vertical-stack-l: 32px;
241
+ --vads-spacing-vertical-stack-m: 24px;
242
+ --vads-spacing-vertical-stack-s: 16px;
243
+ --vads-spacing-vertical-stack-default: 16px;
244
+ --vads-forms-spacing-vertical-stack-default: 32px;
307
245
  }