@department-of-veterans-affairs/css-library 0.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 (10) hide show
  1. package/README.md +17 -0
  2. package/dist/elements.css +3 -0
  3. package/dist/elements.min.css +1 -0
  4. package/dist/fonts.css +3 -0
  5. package/dist/fonts.min.css +1 -0
  6. package/dist/tokens/css/variables.css +191 -0
  7. package/dist/tokens/scss/variables.scss +188 -0
  8. package/dist/utilities.css +31499 -0
  9. package/dist/utilities.min.css +1 -0
  10. package/package.json +24 -0
package/README.md ADDED
@@ -0,0 +1,17 @@
1
+ # css-library
2
+
3
+ ## Stylesheets
4
+
5
+ The stylesheets generated by this library are based on [USWDS version 3](https://github.com/uswds/uswds) and are intended to eventually replace the Formation CSS library:
6
+
7
+ - fonts.css
8
+ - elements.css
9
+ - utilties.css
10
+
11
+ To generate stylesheets, run `yarn build:stylesheets` or `yarn build:minify`
12
+
13
+ ## Design Tokens
14
+
15
+ The tokens generated by this library will be available in several different formats so that various tools and environments can use them.
16
+
17
+ To generate all token files, run `yarn build:tokens`
package/dist/elements.css ADDED
@@ -0,0 +1,3 @@
1
+ /*! This is intentionally left empty for now */
2
+
3
+ /*# sourceMappingURL=elements.css.map */
package/dist/elements.min.css ADDED
@@ -0,0 +1 @@
1
+ /*! This is intentionally left empty for now */
package/dist/fonts.css ADDED
@@ -0,0 +1,3 @@
1
+ /*! font definitions could also be provided */
2
+
3
+ /*# sourceMappingURL=fonts.css.map */
package/dist/fonts.min.css ADDED
@@ -0,0 +1 @@
1
+ /*! font definitions could also be provided */
package/dist/tokens/css/variables.css ADDED
@@ -0,0 +1,191 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 30 Aug 2023 21:52:36 GMT
4
+ */
5
+
6
+ :root {
7
+ --color-base: #212121;
8
+ --color-white: #ffffff;
9
+ --color-black: #000000;
10
+ --color-link-default: #004795;
11
+ --color-link-visited: #4c2c92;
12
+ --color-warning-message: #fac922;
13
+ --color-feedback-warning-background: #fac922;
14
+ --color-primary: #0071bb;
15
+ --color-primary-darker: #003e73;
16
+ --color-primary-darkest: #112e51;
17
+ --color-primary-alt: #02bfe7;
18
+ --color-primary-alt-dark: #00a6d2;
19
+ --color-primary-alt-darkest: #046b99;
20
+ --color-primary-alt-light: #9bdaf1;
21
+ --color-primary-alt-lightest: #e1f3f8;
22
+ --color-secondary: #e31c3d;
23
+ --color-secondary-dark: #cd2026;
24
+ --color-secondary-darkest: #981b1e;
25
+ --color-secondary-light: #e59393;
26
+ --color-secondary-lightest: #f9dede;
27
+ --color-gray: #5b616b;
28
+ --color-gray-dark: #323a45;
29
+ --color-gray-medium: #757575;
30
+ --color-gray-light: #aeb0b5;
31
+ --color-gray-light-alt: #eeeeee;
32
+ --color-gray-lighter: #d6d7d9;
33
+ --color-gray-lightest: #f1f1f1;
34
+ --color-gray-warm-dark: #494440;
35
+ --color-gray-warm-light: #e4e2e0;
36
+ --color-gray-cool-light: #dce4ef;
37
+ --color-green: #2e8540;
38
+ --color-green-dark: #1e5f2f;
39
+ --color-green-darker: #195c27;
40
+ --color-green-darkest: #0f3f1f;
41
+ --color-green-light: #7dbf7c;
42
+ --color-green-lighter: #94bfa2;
43
+ --color-green-lightest: #e7f4e4;
44
+ --color-gold: #fdb81e;
45
+ --color-gold-light: #f9c642;
46
+ --color-gold-lighter: #fad980;
47
+ --color-gold-lightest: #fff1d2;
48
+ --v3-color-error-dark: #b50909;
49
+ --v3-color-base-darkest: #1B1B1B;
50
+ --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
51
+ --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
52
+ --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
53
+ --font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
54
+ --font-weight-normal: 400;
55
+ --font-weight-bold: 700;
56
+ --font-style-normal: normal;
57
+ --font-style-italic: italic;
58
+ --font-size-sm: 1.5rem;
59
+ --font-size-base: 1.6rem;
60
+ --font-size-md: 1.7rem;
61
+ --font-size-lg: 2rem;
62
+ --font-size-xl: 3rem;
63
+ --font-size-2xl: 4rem;
64
+ --font-size-h1: 4rem;
65
+ --font-size-h2: 3rem;
66
+ --font-size-h3: 2rem;
67
+ --font-size-h4: 1.7rem;
68
+ --font-size-h5: 1.5rem;
69
+ --font-size-h6: 1.5rem;
70
+ --v3-font-base-size: 16px;
71
+ --units-0: 0;
72
+ --units-1: 0.8rem;
73
+ --units-2: 1.6rem;
74
+ --units-3: 2.4rem;
75
+ --units-4: 3.2rem;
76
+ --units-5: 4rem;
77
+ --units-6: 4.8rem;
78
+ --units-7: 5.6rem;
79
+ --units-8: 6.4rem;
80
+ --units-9: 7.2rem;
81
+ --units-10: 8rem;
82
+ --units-15: 12rem;
83
+ --units-1px: 1px;
84
+ --units-0p25: 2px;
85
+ --units-0p5: 0.4rem;
86
+ --units-1p5: 1.2rem;
87
+ --units-2p5: 2rem;
88
+ --units-neg-1px: -1px;
89
+ --units-neg-0p25: -2px;
90
+ --units-neg-0p5: -0.4rem;
91
+ --units-neg-1: -0.8rem;
92
+ --units-neg-1p5: -1.2rem;
93
+ --units-neg-2: -1.6rem;
94
+ --units-neg-2p5: -2rem;
95
+ --units-neg-3: -2.4rem;
96
+ --units-neg-4: -3.2rem;
97
+ --units-neg-5: -4rem;
98
+ --units-neg-6: -4.8rem;
99
+ --units-neg-7: -5.6rem;
100
+ --units-neg-8: -6.4rem;
101
+ --units-neg-9: -7.2rem;
102
+ --units-neg-10: -8rem;
103
+ --units-neg-15: -12rem;
104
+ --uswds-system-color-blue-5: #eff6fb;
105
+ --uswds-system-color-blue-10: #d9e8f6;
106
+ --uswds-system-color-blue-20: #aacdec;
107
+ --uswds-system-color-blue-30: #73b3e7;
108
+ --uswds-system-color-blue-40: #4f97d1;
109
+ --uswds-system-color-blue-50: #2378c3;
110
+ --uswds-system-color-blue-60: #2c608a;
111
+ --uswds-system-color-blue-70: #274863;
112
+ --uswds-system-color-blue-80: #1f303e;
113
+ --uswds-system-color-blue-90: #11181d;
114
+ --uswds-system-color-blue-vivid-50: #0076d6;
115
+ --uswds-system-color-blue-vivid-60: #005ea2;
116
+ --uswds-system-color-blue-cool-60: #2e6276;
117
+ --uswds-system-color-blue-cool-vivid-5: #e1f3f8;
118
+ --uswds-system-color-blue-cool-vivid-20: #97d4ea;
119
+ --uswds-system-color-blue-cool-vivid-40: #28a0cb;
120
+ --uswds-system-color-blue-cool-vivid-60: #07648d;
121
+ --uswds-system-color-blue-warm-10: #e1e7f1;
122
+ --uswds-system-color-blue-warm-vivid-60: #0050d8;
123
+ --uswds-system-color-blue-warm-vivid-70: #1a4480;
124
+ --uswds-system-color-blue-warm-vivid-80: #162e51;
125
+ --uswds-system-color-cyan-5: #e7f6f8;
126
+ --uswds-system-color-cyan-20: #99deea;
127
+ --uswds-system-color-cyan-vivid-30: #00bde3;
128
+ --uswds-system-color-cyan-vivid-40: #009ec1;
129
+ --uswds-system-color-gold-vivid-5: #fef0c8;
130
+ --uswds-system-color-gold-vivid-10: #ffe396;
131
+ --uswds-system-color-gold-vivid-20: #ffbe2e;
132
+ --uswds-system-color-gold-vivid-30: #e5a000;
133
+ --uswds-system-color-gold-vivid-50: #936f38;
134
+ --uswds-system-color-gray-1: #fcfcfc;
135
+ --uswds-system-color-gray-2: #f9f9f9;
136
+ --uswds-system-color-gray-3: #f6f6f6;
137
+ --uswds-system-color-gray-4: #f3f3f3;
138
+ --uswds-system-color-gray-5: #f0f0f0;
139
+ --uswds-system-color-gray-10: #e6e6e6;
140
+ --uswds-system-color-gray-20: #c9c9c9;
141
+ --uswds-system-color-gray-30: #adadad;
142
+ --uswds-system-color-gray-40: #919191;
143
+ --uswds-system-color-gray-50: #757575;
144
+ --uswds-system-color-gray-60: #5c5c5c;
145
+ --uswds-system-color-gray-70: #454545;
146
+ --uswds-system-color-gray-80: #2e2e2e;
147
+ --uswds-system-color-gray-90: #1b1b1b;
148
+ --uswds-system-color-gray-100: #000000;
149
+ --uswds-system-color-gray-cool-1: #fbfcfd;
150
+ --uswds-system-color-gray-cool-2: #f7f9fa;
151
+ --uswds-system-color-gray-cool-3: #f5f6f7;
152
+ --uswds-system-color-gray-cool-4: #f1f3f6;
153
+ --uswds-system-color-gray-cool-5: #edeff0;
154
+ --uswds-system-color-gray-cool-10: #dfe1e2;
155
+ --uswds-system-color-gray-cool-20: #c6cace;
156
+ --uswds-system-color-gray-cool-30: #a9aeb1;
157
+ --uswds-system-color-gray-cool-40: #8d9297;
158
+ --uswds-system-color-gray-cool-50: #71767a;
159
+ --uswds-system-color-gray-cool-60: #565c65;
160
+ --uswds-system-color-gray-cool-70: #3d4551;
161
+ --uswds-system-color-gray-cool-80: #2d2e2f;
162
+ --uswds-system-color-gray-cool-90: #1c1d1f;
163
+ --uswds-system-color-gray-warm-10: #e6e6e2;
164
+ --uswds-system-color-gray-warm-70: #454540;
165
+ --uswds-system-color-green-cool-5: #ecf3ec;
166
+ --uswds-system-color-green-cool-20: #b4d0b9;
167
+ --uswds-system-color-green-cool-40: #5e9f69;
168
+ --uswds-system-color-green-cool-vivid-20: #70e17b;
169
+ --uswds-system-color-green-cool-vivid-40: #00a91c;
170
+ --uswds-system-color-green-cool-vivid-50: #008817;
171
+ --uswds-system-color-green-cool-vivid-60: #216e1f;
172
+ --uswds-system-color-orange-40: #dd7533;
173
+ --uswds-system-color-red-30: #f2938c;
174
+ --uswds-system-color-red-50: #d83933;
175
+ --uswds-system-color-red-70: #6f3331;
176
+ --uswds-system-color-red-vivid-60: #b50909;
177
+ --uswds-system-color-red-vivid-70: #8b0a03;
178
+ --uswds-system-color-red-cool-vivid-10: #f8dfe2;
179
+ --uswds-system-color-red-cool-vivid-50: #e41d3d;
180
+ --uswds-system-color-red-cool-vivid-60: #b21d38;
181
+ --uswds-system-color-red-cool-vivid-70: #822133;
182
+ --uswds-system-color-red-warm-10: #f4e3db;
183
+ --uswds-system-color-red-warm-80: #332d29;
184
+ --uswds-system-color-red-warm-vivid-30: #f39268;
185
+ --uswds-system-color-red-warm-vivid-50: #d54309;
186
+ --uswds-system-color-red-warm-vivid-60: #9c3d10;
187
+ --uswds-system-color-violet-vivid-70: #54278f;
188
+ --uswds-system-color-yellow-5: #faf3d1;
189
+ --uswds-system-color-yellow-vivid-10: #fee685;
190
+ --uswds-system-color-yellow-vivid-20: #face00;
191
+ }
package/dist/tokens/scss/variables.scss ADDED
@@ -0,0 +1,188 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 30 Aug 2023 21:52:36 GMT
4
+
5
+ $color-base: #212121;
6
+ $color-white: #ffffff;
7
+ $color-black: #000000;
8
+ $color-link-default: #004795;
9
+ $color-link-visited: #4c2c92;
10
+ $color-warning-message: #fac922;
11
+ $color-feedback-warning-background: #fac922;
12
+ $color-primary: #0071bb;
13
+ $color-primary-darker: #003e73;
14
+ $color-primary-darkest: #112e51;
15
+ $color-primary-alt: #02bfe7;
16
+ $color-primary-alt-dark: #00a6d2;
17
+ $color-primary-alt-darkest: #046b99;
18
+ $color-primary-alt-light: #9bdaf1;
19
+ $color-primary-alt-lightest: #e1f3f8;
20
+ $color-secondary: #e31c3d;
21
+ $color-secondary-dark: #cd2026;
22
+ $color-secondary-darkest: #981b1e;
23
+ $color-secondary-light: #e59393;
24
+ $color-secondary-lightest: #f9dede;
25
+ $color-gray: #5b616b;
26
+ $color-gray-dark: #323a45;
27
+ $color-gray-medium: #757575;
28
+ $color-gray-light: #aeb0b5;
29
+ $color-gray-light-alt: #eeeeee;
30
+ $color-gray-lighter: #d6d7d9;
31
+ $color-gray-lightest: #f1f1f1;
32
+ $color-gray-warm-dark: #494440;
33
+ $color-gray-warm-light: #e4e2e0;
34
+ $color-gray-cool-light: #dce4ef;
35
+ $color-green: #2e8540;
36
+ $color-green-dark: #1e5f2f;
37
+ $color-green-darker: #195c27;
38
+ $color-green-darkest: #0f3f1f;
39
+ $color-green-light: #7dbf7c;
40
+ $color-green-lighter: #94bfa2;
41
+ $color-green-lightest: #e7f4e4;
42
+ $color-gold: #fdb81e;
43
+ $color-gold-light: #f9c642;
44
+ $color-gold-lighter: #fad980;
45
+ $color-gold-lightest: #fff1d2;
46
+ $v3-color-error-dark: #b50909;
47
+ $v3-color-base-darkest: #1B1B1B;
48
+ $font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
49
+ $font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
50
+ $font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
51
+ $font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
52
+ $font-weight-normal: 400;
53
+ $font-weight-bold: 700;
54
+ $font-style-normal: normal;
55
+ $font-style-italic: italic;
56
+ $font-size-sm: 1.5rem;
57
+ $font-size-base: 1.6rem;
58
+ $font-size-md: 1.7rem;
59
+ $font-size-lg: 2rem;
60
+ $font-size-xl: 3rem;
61
+ $font-size-2xl: 4rem;
62
+ $font-size-h1: 4rem;
63
+ $font-size-h2: 3rem;
64
+ $font-size-h3: 2rem;
65
+ $font-size-h4: 1.7rem;
66
+ $font-size-h5: 1.5rem;
67
+ $font-size-h6: 1.5rem;
68
+ $v3-font-base-size: 16px;
69
+ $units-0: 0;
70
+ $units-1: 0.8rem;
71
+ $units-2: 1.6rem;
72
+ $units-3: 2.4rem;
73
+ $units-4: 3.2rem;
74
+ $units-5: 4rem;
75
+ $units-6: 4.8rem;
76
+ $units-7: 5.6rem;
77
+ $units-8: 6.4rem;
78
+ $units-9: 7.2rem;
79
+ $units-10: 8rem;
80
+ $units-15: 12rem;
81
+ $units-1px: 1px;
82
+ $units-0p25: 2px;
83
+ $units-0p5: 0.4rem;
84
+ $units-1p5: 1.2rem;
85
+ $units-2p5: 2rem;
86
+ $units-neg-1px: -1px;
87
+ $units-neg-0p25: -2px;
88
+ $units-neg-0p5: -0.4rem;
89
+ $units-neg-1: -0.8rem;
90
+ $units-neg-1p5: -1.2rem;
91
+ $units-neg-2: -1.6rem;
92
+ $units-neg-2p5: -2rem;
93
+ $units-neg-3: -2.4rem;
94
+ $units-neg-4: -3.2rem;
95
+ $units-neg-5: -4rem;
96
+ $units-neg-6: -4.8rem;
97
+ $units-neg-7: -5.6rem;
98
+ $units-neg-8: -6.4rem;
99
+ $units-neg-9: -7.2rem;
100
+ $units-neg-10: -8rem;
101
+ $units-neg-15: -12rem;
102
+ $uswds-system-color-blue-5: #eff6fb;
103
+ $uswds-system-color-blue-10: #d9e8f6;
104
+ $uswds-system-color-blue-20: #aacdec;
105
+ $uswds-system-color-blue-30: #73b3e7;
106
+ $uswds-system-color-blue-40: #4f97d1;
107
+ $uswds-system-color-blue-50: #2378c3;
108
+ $uswds-system-color-blue-60: #2c608a;
109
+ $uswds-system-color-blue-70: #274863;
110
+ $uswds-system-color-blue-80: #1f303e;
111
+ $uswds-system-color-blue-90: #11181d;
112
+ $uswds-system-color-blue-vivid-50: #0076d6;
113
+ $uswds-system-color-blue-vivid-60: #005ea2;
114
+ $uswds-system-color-blue-cool-60: #2e6276;
115
+ $uswds-system-color-blue-cool-vivid-5: #e1f3f8;
116
+ $uswds-system-color-blue-cool-vivid-20: #97d4ea;
117
+ $uswds-system-color-blue-cool-vivid-40: #28a0cb;
118
+ $uswds-system-color-blue-cool-vivid-60: #07648d;
119
+ $uswds-system-color-blue-warm-10: #e1e7f1;
120
+ $uswds-system-color-blue-warm-vivid-60: #0050d8;
121
+ $uswds-system-color-blue-warm-vivid-70: #1a4480;
122
+ $uswds-system-color-blue-warm-vivid-80: #162e51;
123
+ $uswds-system-color-cyan-5: #e7f6f8;
124
+ $uswds-system-color-cyan-20: #99deea;
125
+ $uswds-system-color-cyan-vivid-30: #00bde3;
126
+ $uswds-system-color-cyan-vivid-40: #009ec1;
127
+ $uswds-system-color-gold-vivid-5: #fef0c8;
128
+ $uswds-system-color-gold-vivid-10: #ffe396;
129
+ $uswds-system-color-gold-vivid-20: #ffbe2e;
130
+ $uswds-system-color-gold-vivid-30: #e5a000;
131
+ $uswds-system-color-gold-vivid-50: #936f38;
132
+ $uswds-system-color-gray-1: #fcfcfc;
133
+ $uswds-system-color-gray-2: #f9f9f9;
134
+ $uswds-system-color-gray-3: #f6f6f6;
135
+ $uswds-system-color-gray-4: #f3f3f3;
136
+ $uswds-system-color-gray-5: #f0f0f0;
137
+ $uswds-system-color-gray-10: #e6e6e6;
138
+ $uswds-system-color-gray-20: #c9c9c9;
139
+ $uswds-system-color-gray-30: #adadad;
140
+ $uswds-system-color-gray-40: #919191;
141
+ $uswds-system-color-gray-50: #757575;
142
+ $uswds-system-color-gray-60: #5c5c5c;
143
+ $uswds-system-color-gray-70: #454545;
144
+ $uswds-system-color-gray-80: #2e2e2e;
145
+ $uswds-system-color-gray-90: #1b1b1b;
146
+ $uswds-system-color-gray-100: #000000;
147
+ $uswds-system-color-gray-cool-1: #fbfcfd;
148
+ $uswds-system-color-gray-cool-2: #f7f9fa;
149
+ $uswds-system-color-gray-cool-3: #f5f6f7;
150
+ $uswds-system-color-gray-cool-4: #f1f3f6;
151
+ $uswds-system-color-gray-cool-5: #edeff0;
152
+ $uswds-system-color-gray-cool-10: #dfe1e2;
153
+ $uswds-system-color-gray-cool-20: #c6cace;
154
+ $uswds-system-color-gray-cool-30: #a9aeb1;
155
+ $uswds-system-color-gray-cool-40: #8d9297;
156
+ $uswds-system-color-gray-cool-50: #71767a;
157
+ $uswds-system-color-gray-cool-60: #565c65;
158
+ $uswds-system-color-gray-cool-70: #3d4551;
159
+ $uswds-system-color-gray-cool-80: #2d2e2f;
160
+ $uswds-system-color-gray-cool-90: #1c1d1f;
161
+ $uswds-system-color-gray-warm-10: #e6e6e2;
162
+ $uswds-system-color-gray-warm-70: #454540;
163
+ $uswds-system-color-green-cool-5: #ecf3ec;
164
+ $uswds-system-color-green-cool-20: #b4d0b9;
165
+ $uswds-system-color-green-cool-40: #5e9f69;
166
+ $uswds-system-color-green-cool-vivid-20: #70e17b;
167
+ $uswds-system-color-green-cool-vivid-40: #00a91c;
168
+ $uswds-system-color-green-cool-vivid-50: #008817;
169
+ $uswds-system-color-green-cool-vivid-60: #216e1f;
170
+ $uswds-system-color-orange-40: #dd7533;
171
+ $uswds-system-color-red-30: #f2938c;
172
+ $uswds-system-color-red-50: #d83933;
173
+ $uswds-system-color-red-70: #6f3331;
174
+ $uswds-system-color-red-vivid-60: #b50909;
175
+ $uswds-system-color-red-vivid-70: #8b0a03;
176
+ $uswds-system-color-red-cool-vivid-10: #f8dfe2;
177
+ $uswds-system-color-red-cool-vivid-50: #e41d3d;
178
+ $uswds-system-color-red-cool-vivid-60: #b21d38;
179
+ $uswds-system-color-red-cool-vivid-70: #822133;
180
+ $uswds-system-color-red-warm-10: #f4e3db;
181
+ $uswds-system-color-red-warm-80: #332d29;
182
+ $uswds-system-color-red-warm-vivid-30: #f39268;
183
+ $uswds-system-color-red-warm-vivid-50: #d54309;
184
+ $uswds-system-color-red-warm-vivid-60: #9c3d10;
185
+ $uswds-system-color-violet-vivid-70: #54278f;
186
+ $uswds-system-color-yellow-5: #faf3d1;
187
+ $uswds-system-color-yellow-vivid-10: #fee685;
188
+ $uswds-system-color-yellow-vivid-20: #face00;