@department-of-veterans-affairs/css-library 0.5.0 → 0.6.0-beta.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 (7) hide show
  1. package/dist/elements.css +1 -1
  2. package/dist/tokens/css/variables.css +90 -58
  3. package/dist/tokens/figma/colors/variables.json +1 -194
  4. package/dist/tokens/json/variables.json +1569 -995
  5. package/dist/tokens/scss/variables.scss +90 -58
  6. package/dist/utilities.css +1 -1
  7. package/package.json +2 -2
package/dist/elements.css CHANGED
@@ -1 +1 @@
1
- /*! This is intentionally left empty for now */html,body{padding:0;margin:0}html{font-weight:500}body{background:#fff;color:#1b1b1b}article>h1{margin-top:0}hr{margin:2.5em 0;margin:48px 0 40px;border:1px solid #a9aeb1}#content abbr{border-bottom:0px;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;cursor:pointer}a{color:#005ea2;text-decoration:underline;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-property:color,background-color,border-color;transition-property:color,background-color,border-color}a:hover{background-color:rgba(0,0,0,.05);color:inherit;text-decoration:underline}a:active{background:rgba(0,0,0,.05)}a:visited,a:visited abbr{color:#54278f}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:.87rem;line-height:1.1;font-weight:normal;letter-spacing:.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter,Georgia,Cambria,"Times New Roman",Times,serif;font-weight:700}h6{font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-weight:700}h1{margin-top:0;font-size:4rem}h2{font-size:3rem}h3{font-size:2rem}h4{font-size:1.7rem}h5{font-size:1.5rem}h6{font-size:1.5rem}@media(max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:.5em 0 0;text-transform:none;font-weight:700}ul{padding:0 0 0 1.5em;list-style:square}ol{margin:0 0 0 1.25em;list-style-position:outside}ul>ul,ul ol,ol>ul,ol ol{margin:.5em 0 .5em 1.2em}dd{margin-left:0}dd+dt{margin-top:1.5em}figure{font-size:.85em;margin-left:-15px;margin-right:-15px}@media screen and (min-width: 1201px),print and (min-width: 1201px){figure{margin-left:-16.66667%;margin-right:-16.66667%}}figcaption{color:#162e51}input::-webkit-input-placeholder{color:#565c65}input::-moz-placeholder{color:#565c65}input:-ms-input-placeholder{color:#565c65}input:focus::-webkit-input-placeholder{color:rgba(0,0,0,0)}input:focus::-moz-placeholder{color:rgba(0,0,0,0)}input:focus:-ms-input-placeholder{color:rgba(0,0,0,0)}.va-notice--banner p{margin:0}.va-notice--banner a{background-image:none;color:inherit;padding:0}
1
+ /*! This is intentionally left empty for now */html,body{padding:0;margin:0}html{font-weight:500}body{background:#fff;color:#1b1b1b}article>h1{margin-top:0}hr{margin:2.5em 0;margin:48px 0 40px;border:1px solid #a9aeb1}#content abbr{border-bottom:0px;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;cursor:pointer}a{color:#005ea2;text-decoration:underline;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-property:color,background-color,border-color;transition-property:color,background-color,border-color}a:hover{background-color:rgba(0,0,0,.05);color:inherit;text-decoration:underline}a:active{background:rgba(0,0,0,.05)}a:visited,a:visited abbr{color:#54278f}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:.87rem;line-height:1.1;font-weight:normal;letter-spacing:.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter,Georgia,Cambria,"Times New Roman",Times,serif;font-weight:700}h6{font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:.9375rem}h6{font-size:.9375rem}@media(max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:.5em 0 0;text-transform:none;font-weight:700}ul{padding:0 0 0 1.5em;list-style:square}ol{margin:0 0 0 1.25em;list-style-position:outside}ul>ul,ul ol,ol>ul,ol ol{margin:.5em 0 .5em 1.2em}dd{margin-left:0}dd+dt{margin-top:1.5em}figure{font-size:.85em;margin-left:-15px;margin-right:-15px}@media screen and (min-width: 1201px),print and (min-width: 1201px){figure{margin-left:-16.66667%;margin-right:-16.66667%}}figcaption{color:#162e51}input::-webkit-input-placeholder{color:#565c65}input::-moz-placeholder{color:#565c65}input:-ms-input-placeholder{color:#565c65}input:focus::-webkit-input-placeholder{color:rgba(0,0,0,0)}input:focus::-moz-placeholder{color:rgba(0,0,0,0)}input:focus:-ms-input-placeholder{color:rgba(0,0,0,0)}.va-notice--banner p{margin:0}.va-notice--banner a{background-image:none;color:inherit;padding:0}
package/dist/tokens/css/variables.css CHANGED
@@ -1,71 +1,100 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 06 Mar 2024 16:15:18 GMT
3
+ * Generated on Tue, 09 Apr 2024 14:41:04 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --xsmall-screen: 320px;
8
8
  --small-screen: 481px;
9
- --medium-screen: 640px;
9
+ --medium-mobile: 640px;
10
+ --medium-screen: 768px;
10
11
  --small-desktop-screen: 1008px;
11
12
  --large-screen: 1201px;
12
- --color-base: #1b1b1b;
13
- --color-white: #ffffff;
14
- --color-black: #000000;
15
- --color-link-default: #005ea2;
16
13
  --color-link-default-hover: rgba(#000000, 0.05);
17
- --color-link-visited: #54278f;
18
- --color-warning-message: #faf3d1;
19
- --color-feedback-warning-background: #faf3d1;
20
- --color-primary: #005ea2;
21
- --color-primary-dark: #1a4480;
22
- --color-primary-darker: #162e51;
23
- --color-primary-alt: #00bde3;
24
- --color-primary-alt-dark: #28a0cb;
25
- --color-primary-alt-darkest: #07648d;
26
- --color-primary-alt-light: #97d4ea;
27
- --color-primary-alt-lightest: #e1f3f8;
28
- --color-secondary: #d83933;
29
- --color-secondary-dark: #b50909;
30
- --color-secondary-darkest: #8b0a03;
31
- --color-secondary-light: #f2938c;
32
- --color-secondary-lightest: #f8dfe2;
33
- --color-gray: #565c65;
34
- --color-gray-dark: #3d4551;
35
- --color-gray-medium: #757575;
36
- --color-gray-light: #a9aeb1;
37
- --color-gray-light-alt: #edeff0;
38
- --color-gray-lighter: #dfe1e2;
39
- --color-gray-lightest: #f0f0f0;
40
- --color-gray-warm-dark: #454540;
41
- --color-gray-warm-light: #e6e6e2;
42
- --color-gray-cool-light: #e1e7f1;
43
- --color-green: #008817;
44
- --color-green-dark: #216e1f;
45
- --color-green-darker: #154c21;
46
- --color-green-light: #5e9f69;
47
- --color-green-lighter: #b4d0b9;
48
- --color-green-lightest: #ecf3ec;
49
- --color-orange: #dd7533;
50
- --color-gold: #ffbe2e;
51
- --color-gold-light: #face00;
52
- --color-gold-lighter: #ffe396;
53
- --color-gold-lightest: #fef0c8;
54
- --color-gold-darker: #936f38;
55
- --color-blue-cool: #345d96;
56
- --color-blue-cool-light: #4a77b4;
57
- --color-blue-cool-lighter: #98afd2;
58
- --color-blue-cool-lightest: #e6e6e2;
59
- --color-hub-health-care: #3f57a6;
60
- --color-hub-education: #40807e;
61
- --color-hub-disability: #a23737;
62
- --color-hub-careers: #bd5727;
63
- --color-hub-pension: #4d8055;
64
- --color-hub-housing: #8e704f;
65
- --color-hub-life-insurance: #6f7a41;
66
- --color-hub-burials: #2378c3;
67
- --color-hub-family-member: #162e51;
68
- --color-hub-service-member: #162e51;
14
+ --vads-button-color-background-primary-alt-active-on-light: #154c21;
15
+ --vads-button-color-background-secondary-on-light: #ffffff;
16
+ --vads-button-color-text-primary-alt-on-light: #ffffff;
17
+ --vads-button-color-text-primary-on-light: #ffffff;
18
+ --vads-input-background-color-on-light: #ffffff;
19
+ --vads-color-white: #ffffff;
20
+ --vads-label-hint-text-color-on-light: #757575;
21
+ --vads-process-list-color-text-pending-on-light: #757575;
22
+ --vads-color-gray-medium: #757575;
23
+ --vads-color-gray-light-alt: #edeff0;
24
+ --vads-color-gray-warm-light: #e6e6e2;
25
+ --vads-color-gray-warm-dark: #454540;
26
+ --vads-color-gray-cool-light: #e1e7f1;
27
+ --vads-color-action-focus-on-light: #face00;
28
+ --vads-color-base: #1b1b1b;
29
+ --vads-color-base-dark: #565c65;
30
+ --vads-color-base-darker: #3d4551;
31
+ --vads-color-base-darkest: #1b1b1b;
32
+ --vads-color-base-light: #a9aeb1;
33
+ --vads-color-base-lighter: #dfe1e2;
34
+ --vads-color-base-lightest: #f0f0f0;
35
+ --vads-color-emergency: #9c3d10;
36
+ --vads-color-emergency-dark: #332d29;
37
+ --vads-color-error: #d54309;
38
+ --vads-color-error-dark: #b21d38;
39
+ --vads-color-error-darker: #6f3331;
40
+ --vads-color-error-light: #f39268;
41
+ --vads-color-error-lighter: #f4e3db;
42
+ --vads-color-gibill-accent: #fef0c8;
43
+ --vads-color-hub-burials: #2378c3;
44
+ --vads-color-hub-careers: #bd5727;
45
+ --vads-color-hub-disability: #a23737;
46
+ --vads-color-hub-education: #162e51;
47
+ --vads-color-hub-health-care: #3f57a6;
48
+ --vads-color-hub-housing: #8e704f;
49
+ --vads-color-hub-life-insurance: #6f7a41;
50
+ --vads-color-hub-pension: #4d8055;
51
+ --vads-color-hub-records: #6f7a41;
52
+ --vads-color-hub-service-member: #162e51;
53
+ --vads-color-hub-family-member: #162e51;
54
+ --vads-color-info: #00bde3;
55
+ --vads-color-info-dark: #009ec1;
56
+ --vads-color-info-darker: #2e6276;
57
+ --vads-color-info-light: #99deea;
58
+ --vads-color-info-lighter: #e7f6f8;
59
+ --vads-color-ink: #1b1b1b;
60
+ --vads-color-inset-bg: #e7f6f8;
61
+ --vads-color-link: #005ea2;
62
+ --vads-color-link-active: #0b4778;
63
+ --vads-color-link-visited: #54278f;
64
+ --vads-color-primary: #005ea2;
65
+ --vads-color-primary-alt: #00bde3;
66
+ --vads-color-primary-alt-dark: #28a0cb;
67
+ --vads-color-primary-alt-darkest: #07648d;
68
+ --vads-color-primary-alt-light: #97d4ea;
69
+ --vads-color-primary-alt-lightest: #e1f3f8;
70
+ --vads-color-primary-dark: #1a4480;
71
+ --vads-color-primary-darker: #162e51;
72
+ --vads-color-primary-light: #73b3e7;
73
+ --vads-color-primary-lighter: #d9e8f6;
74
+ --vads-color-secondary: #d83933;
75
+ --vads-color-secondary-dark: #b50909;
76
+ --vads-color-secondary-darkest: #8b0a03;
77
+ --vads-color-secondary-light: #f2938c;
78
+ --vads-color-secondary-lightest: #f8dfe2;
79
+ --vads-color-success: #00a91c;
80
+ --vads-color-success-dark: #008817;
81
+ --vads-color-success-darker: #216e1f;
82
+ --vads-color-success-light: #70e17b;
83
+ --vads-color-success-lighter: #ecf3ec;
84
+ --vads-color-green-light: #5e9f69;
85
+ --vads-color-va-accent: #8a7237;
86
+ --vads-color-warning: #ffbe2e;
87
+ --vads-color-warning-dark: #e5a000;
88
+ --vads-color-warning-darker: #936f38;
89
+ --vads-color-warning-light: #fee685;
90
+ --vads-color-warning-lighter: #faf3d1;
91
+ --vads-color-gold-lighter: #ffe396;
92
+ --vads-color-gold-lightest: #fef0c8;
93
+ --vads-color-black: #000000;
94
+ --vads-color-green-lighter: #b4d0b9;
95
+ --vads-color-blue-cool: #345d96;
96
+ --vads-color-blue-cool-light: #4a77b4;
97
+ --vads-color-blue-cool-lightest: #98afd2;
69
98
  --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
70
99
  --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
71
100
  --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
@@ -132,6 +161,7 @@
132
161
  --uswds-system-color-blue-90: #11181d;
133
162
  --uswds-system-color-blue-vivid-50: #0076d6;
134
163
  --uswds-system-color-blue-vivid-60: #005ea2;
164
+ --uswds-system-color-blue-vivid-70: #0b4778;
135
165
  --uswds-system-color-blue-cool-60: #2e6276;
136
166
  --uswds-system-color-blue-cool-vivid-5: #e1f3f8;
137
167
  --uswds-system-color-blue-cool-vivid-20: #97d4ea;
@@ -213,7 +243,9 @@
213
243
  --uswds-system-color-red-warm-vivid-50: #d54309;
214
244
  --uswds-system-color-red-warm-vivid-60: #9c3d10;
215
245
  --uswds-system-color-violet-vivid-70: #54278f;
246
+ --uswds-system-color-violet-warm-60: #864381;
216
247
  --uswds-system-color-yellow-5: #faf3d1;
248
+ --uswds-system-color-yellow-50: #8a7237;
217
249
  --uswds-system-color-yellow-vivid-10: #fee685;
218
250
  --uswds-system-color-yellow-vivid-20: #face00;
219
251
  --uswds-system-color-indigo-cool-60: #3f57a6;
package/dist/tokens/figma/colors/variables.json CHANGED
@@ -1,194 +1 @@
1
- {
2
- "global": {
3
- "base": {
4
- "value": "{uswds-system-color-gray-90}"
5
- },
6
- "white": {
7
- "value": "#ffffff"
8
- },
9
- "black": {
10
- "value": "{uswds-system-color-gray-100}"
11
- },
12
- "link-default": {
13
- "value": "{uswds-system-color-blue-vivid-60}"
14
- },
15
- "link-default-hover": {
16
- "alpha": "0.05",
17
- "value": "rgba(#000000, 0.05)"
18
- },
19
- "link-visited": {
20
- "value": "{uswds-system-color-violet-vivid-70}"
21
- },
22
- "warning-message": {
23
- "value": "{uswds-system-color-yellow-5}"
24
- },
25
- "feedback-warning-background": {
26
- "value": "{uswds-system-color-yellow-5}"
27
- },
28
- "primary": {
29
- "*": {
30
- "value": "{uswds-system-color-blue-vivid-60}"
31
- },
32
- "dark": {
33
- "value": "{uswds-system-color-blue-warm-vivid-70}"
34
- },
35
- "darker": {
36
- "value": "{uswds-system-color-blue-warm-vivid-80}"
37
- },
38
- "alt": {
39
- "*": {
40
- "value": "{uswds-system-color-cyan-vivid-30}"
41
- },
42
- "dark": {
43
- "value": "{uswds-system-color-blue-cool-vivid-40}"
44
- },
45
- "darkest": {
46
- "value": "{uswds-system-color-blue-cool-vivid-60}"
47
- },
48
- "light": {
49
- "value": "{uswds-system-color-blue-cool-vivid-20}"
50
- },
51
- "lightest": {
52
- "value": "{uswds-system-color-blue-cool-vivid-5}"
53
- }
54
- }
55
- },
56
- "secondary": {
57
- "*": {
58
- "value": "{uswds-system-color-red-50}"
59
- },
60
- "dark": {
61
- "value": "{uswds-system-color-red-vivid-60}"
62
- },
63
- "darkest": {
64
- "value": "{uswds-system-color-red-vivid-70}"
65
- },
66
- "light": {
67
- "value": "{uswds-system-color-red-30}"
68
- },
69
- "lightest": {
70
- "value": "{uswds-system-color-red-cool-vivid-10}"
71
- }
72
- },
73
- "gray": {
74
- "*": {
75
- "value": "{uswds-system-color-gray-cool-60}"
76
- },
77
- "dark": {
78
- "value": "{uswds-system-color-gray-cool-70}"
79
- },
80
- "medium": {
81
- "value": "{uswds-system-color-gray-50}"
82
- },
83
- "light": {
84
- "value": "{uswds-system-color-gray-cool-30}"
85
- },
86
- "light-alt": {
87
- "value": "{uswds-system-color-gray-cool-5}"
88
- },
89
- "lighter": {
90
- "value": "{uswds-system-color-gray-cool-10}"
91
- },
92
- "lightest": {
93
- "value": "{uswds-system-color-gray-5}"
94
- },
95
- "warm-dark": {
96
- "value": "{uswds-system-color-gray-warm-70}"
97
- },
98
- "warm-light": {
99
- "value": "{uswds-system-color-gray-warm-10}"
100
- },
101
- "cool-light": {
102
- "value": "{uswds-system-color-blue-warm-10}"
103
- }
104
- },
105
- "green": {
106
- "*": {
107
- "value": "{uswds-system-color-green-cool-vivid-50}"
108
- },
109
- "dark": {
110
- "value": "{uswds-system-color-green-cool-vivid-60}"
111
- },
112
- "darker": {
113
- "value": "{uswds-system-color-green-cool-vivid-70}"
114
- },
115
- "light": {
116
- "value": "{uswds-system-color-green-cool-40}"
117
- },
118
- "lighter": {
119
- "value": "{uswds-system-color-green-cool-20}"
120
- },
121
- "lightest": {
122
- "value": "{uswds-system-color-green-cool-5}"
123
- }
124
- },
125
- "orange": {
126
- "*": {
127
- "value": "{uswds-system-color-orange-40}"
128
- }
129
- },
130
- "gold": {
131
- "*": {
132
- "value": "{uswds-system-color-gold-vivid-20}"
133
- },
134
- "light": {
135
- "value": "{uswds-system-color-yellow-vivid-20}"
136
- },
137
- "lighter": {
138
- "value": "{uswds-system-color-gold-vivid-10}"
139
- },
140
- "lightest": {
141
- "value": "{uswds-system-color-gold-vivid-5}"
142
- },
143
- "darker": {
144
- "value": "{uswds-system-color-gold-vivid-50}"
145
- }
146
- },
147
- "blue-cool": {
148
- "*": {
149
- "value": "{uswds-system-color-blue-warm-60}"
150
- },
151
- "light": {
152
- "value": "{uswds-system-color-blue-warm-50}"
153
- },
154
- "lighter": {
155
- "value": "{uswds-system-color-blue-warm-30}"
156
- },
157
- "lightest": {
158
- "value": "{uswds-system-color-gray-warm-10}"
159
- }
160
- },
161
- "hub": {
162
- "health-care": {
163
- "value": "{uswds-system-color-indigo-cool-60}"
164
- },
165
- "education": {
166
- "value": "{uswds-system-color-mint-cool-50}"
167
- },
168
- "disability": {
169
- "value": "{uswds-system-color-red-60}"
170
- },
171
- "careers": {
172
- "value": "{uswds-system-color-orange-warm-50}"
173
- },
174
- "pension": {
175
- "value": "{uswds-system-color-green-cool-50}"
176
- },
177
- "housing": {
178
- "value": "{uswds-system-color-gold-50}"
179
- },
180
- "life-insurance": {
181
- "value": "{uswds-system-color-green-warm-50}"
182
- },
183
- "burials": {
184
- "value": "{uswds-system-color-blue-50}"
185
- },
186
- "family-member": {
187
- "value": "{uswds-system-color-blue-warm-vivid-80}"
188
- },
189
- "service-member": {
190
- "value": "{uswds-system-color-blue-warm-vivid-80}"
191
- }
192
- }
193
- }
194
- }
1
+ {}