@department-of-veterans-affairs/css-library 0.1.0 → 0.3.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.
package/README.md CHANGED
@@ -1,3 +1,17 @@
1
1
  # css-library
2
2
 
3
- This package is the early discovery work on basing VADS styles off of USWDS v3.
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 CHANGED
@@ -1 +1 @@
1
- /*! This is intentionally left empty for now */
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}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)}@media(max-width: 481px){h1{font-size:30px}h2{font-size:24px}}.va-notice--banner p{margin:0}.va-notice--banner a{background-image:none;color:inherit;padding:0}
@@ -0,0 +1 @@
1
+ /*! This is intentionally left empty for now */
@@ -0,0 +1 @@
1
+ /*! font definitions could also be provided */
package/dist/print.css ADDED
@@ -0,0 +1 @@
1
+ .print-only{display:none}@media print{header,footer,nav{display:none}.schemaform-title,.schemaform-subtitle,.screen-only{display:none}.print-only{display:block}a[href^="/"]:after{content:" (https://www.va.gov" attr(href) ")"}a[href^=http]:after{content:" (" attr(href) ")"}}
@@ -0,0 +1,200 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 11 Jan 2024 23:09:32 GMT
4
+ */
5
+
6
+ :root {
7
+ --small-screen: 481px;
8
+ --large-screen: 1201px;
9
+ --color-base: #1b1b1b;
10
+ --color-white: #ffffff;
11
+ --color-black: #000000;
12
+ --color-link-default: #005ea2;
13
+ --color-link-default-hover: rgba(#000000, 0.05);
14
+ --color-link-visited: #54278f;
15
+ --color-warning-message: #faf3d1;
16
+ --color-feedback-warning-background: #faf3d1;
17
+ --color-primary: #005ea2;
18
+ --color-primary-dark: #1a4480;
19
+ --color-primary-darker: #162e51;
20
+ --color-primary-alt: #00bde3;
21
+ --color-primary-alt-dark: #28a0cb;
22
+ --color-primary-alt-darkest: #07648d;
23
+ --color-primary-alt-light: #97d4ea;
24
+ --color-primary-alt-lightest: #e1f3f8;
25
+ --color-secondary: #d83933;
26
+ --color-secondary-dark: #b50909;
27
+ --color-secondary-darkest: #8b0a03;
28
+ --color-secondary-light: #f2938c;
29
+ --color-secondary-lightest: #f8dfe2;
30
+ --color-gray: #565c65;
31
+ --color-gray-dark: #3d4551;
32
+ --color-gray-medium: #757575;
33
+ --color-gray-light: #a9aeb1;
34
+ --color-gray-light-alt: #edeff0;
35
+ --color-gray-lighter: #dfe1e2;
36
+ --color-gray-lightest: #f0f0f0;
37
+ --color-gray-warm-dark: #454540;
38
+ --color-gray-warm-light: #e6e6e2;
39
+ --color-gray-cool-light: #e1e7f1;
40
+ --color-green: #008817;
41
+ --color-green-dark: #216e1f;
42
+ --color-green-darker: #154c21;
43
+ --color-green-light: #5e9f69;
44
+ --color-green-lighter: #b4d0b9;
45
+ --color-green-lightest: #ecf3ec;
46
+ --color-gold: #ffbe2e;
47
+ --color-gold-light: #face00;
48
+ --color-gold-lighter: #ffe396;
49
+ --color-gold-lightest: #fef0c8;
50
+ --color-gold-darker: #936f38;
51
+ --color-blue-cool: #345d96;
52
+ --color-blue-cool-light: #4a77b4;
53
+ --color-blue-cool-lighter: #98afd2;
54
+ --color-blue-cool-lightest: #e6e6e2;
55
+ --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
56
+ --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
57
+ --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
58
+ --font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
59
+ --font-weight-normal: 400;
60
+ --font-weight-bold: 700;
61
+ --font-style-normal: normal;
62
+ --font-style-italic: italic;
63
+ --font-size-sm: 1.5rem;
64
+ --font-size-base: 1.6rem;
65
+ --font-size-md: 1.7rem;
66
+ --font-size-lg: 2rem;
67
+ --font-size-xl: 3rem;
68
+ --font-size-2xl: 4rem;
69
+ --font-size-h1: 4rem;
70
+ --font-size-h2: 3rem;
71
+ --font-size-h3: 2rem;
72
+ --font-size-h4: 1.7rem;
73
+ --font-size-h5: 1.5rem;
74
+ --font-size-h6: 1.5rem;
75
+ --v3-font-base-size: 16px;
76
+ --units-0: 0;
77
+ --units-1: 0.8rem;
78
+ --units-2: 1.6rem;
79
+ --units-3: 2.4rem;
80
+ --units-4: 3.2rem;
81
+ --units-5: 4rem;
82
+ --units-6: 4.8rem;
83
+ --units-7: 5.6rem;
84
+ --units-8: 6.4rem;
85
+ --units-9: 7.2rem;
86
+ --units-10: 8rem;
87
+ --units-15: 12rem;
88
+ --units-1px: 1px;
89
+ --units-0p25: 2px;
90
+ --units-0p5: 0.4rem;
91
+ --units-1p5: 1.2rem;
92
+ --units-2p5: 2rem;
93
+ --units-neg-1px: -1px;
94
+ --units-neg-0p25: -2px;
95
+ --units-neg-0p5: -0.4rem;
96
+ --units-neg-1: -0.8rem;
97
+ --units-neg-1p5: -1.2rem;
98
+ --units-neg-2: -1.6rem;
99
+ --units-neg-2p5: -2rem;
100
+ --units-neg-3: -2.4rem;
101
+ --units-neg-4: -3.2rem;
102
+ --units-neg-5: -4rem;
103
+ --units-neg-6: -4.8rem;
104
+ --units-neg-7: -5.6rem;
105
+ --units-neg-8: -6.4rem;
106
+ --units-neg-9: -7.2rem;
107
+ --units-neg-10: -8rem;
108
+ --units-neg-15: -12rem;
109
+ --uswds-system-color-blue-5: #eff6fb;
110
+ --uswds-system-color-blue-10: #d9e8f6;
111
+ --uswds-system-color-blue-20: #aacdec;
112
+ --uswds-system-color-blue-30: #73b3e7;
113
+ --uswds-system-color-blue-40: #4f97d1;
114
+ --uswds-system-color-blue-50: #2378c3;
115
+ --uswds-system-color-blue-60: #2c608a;
116
+ --uswds-system-color-blue-70: #274863;
117
+ --uswds-system-color-blue-80: #1f303e;
118
+ --uswds-system-color-blue-90: #11181d;
119
+ --uswds-system-color-blue-vivid-50: #0076d6;
120
+ --uswds-system-color-blue-vivid-60: #005ea2;
121
+ --uswds-system-color-blue-cool-60: #2e6276;
122
+ --uswds-system-color-blue-cool-vivid-5: #e1f3f8;
123
+ --uswds-system-color-blue-cool-vivid-20: #97d4ea;
124
+ --uswds-system-color-blue-cool-vivid-40: #28a0cb;
125
+ --uswds-system-color-blue-cool-vivid-60: #07648d;
126
+ --uswds-system-color-blue-warm-10: #e1e7f1;
127
+ --uswds-system-color-blue-warm-30: #98afd2;
128
+ --uswds-system-color-blue-warm-50: #4a77b4;
129
+ --uswds-system-color-blue-warm-60: #345d96;
130
+ --uswds-system-color-blue-warm-vivid-60: #0050d8;
131
+ --uswds-system-color-blue-warm-vivid-70: #1a4480;
132
+ --uswds-system-color-blue-warm-vivid-80: #162e51;
133
+ --uswds-system-color-cyan-5: #e7f6f8;
134
+ --uswds-system-color-cyan-20: #99deea;
135
+ --uswds-system-color-cyan-vivid-30: #00bde3;
136
+ --uswds-system-color-cyan-vivid-40: #009ec1;
137
+ --uswds-system-color-gold-vivid-5: #fef0c8;
138
+ --uswds-system-color-gold-vivid-10: #ffe396;
139
+ --uswds-system-color-gold-vivid-20: #ffbe2e;
140
+ --uswds-system-color-gold-vivid-30: #e5a000;
141
+ --uswds-system-color-gold-vivid-50: #936f38;
142
+ --uswds-system-color-gray-1: #fcfcfc;
143
+ --uswds-system-color-gray-2: #f9f9f9;
144
+ --uswds-system-color-gray-3: #f6f6f6;
145
+ --uswds-system-color-gray-4: #f3f3f3;
146
+ --uswds-system-color-gray-5: #f0f0f0;
147
+ --uswds-system-color-gray-10: #e6e6e6;
148
+ --uswds-system-color-gray-20: #c9c9c9;
149
+ --uswds-system-color-gray-30: #adadad;
150
+ --uswds-system-color-gray-40: #919191;
151
+ --uswds-system-color-gray-50: #757575;
152
+ --uswds-system-color-gray-60: #5c5c5c;
153
+ --uswds-system-color-gray-70: #454545;
154
+ --uswds-system-color-gray-80: #2e2e2e;
155
+ --uswds-system-color-gray-90: #1b1b1b;
156
+ --uswds-system-color-gray-100: #000000;
157
+ --uswds-system-color-gray-cool-1: #fbfcfd;
158
+ --uswds-system-color-gray-cool-2: #f7f9fa;
159
+ --uswds-system-color-gray-cool-3: #f5f6f7;
160
+ --uswds-system-color-gray-cool-4: #f1f3f6;
161
+ --uswds-system-color-gray-cool-5: #edeff0;
162
+ --uswds-system-color-gray-cool-10: #dfe1e2;
163
+ --uswds-system-color-gray-cool-20: #c6cace;
164
+ --uswds-system-color-gray-cool-30: #a9aeb1;
165
+ --uswds-system-color-gray-cool-40: #8d9297;
166
+ --uswds-system-color-gray-cool-50: #71767a;
167
+ --uswds-system-color-gray-cool-60: #565c65;
168
+ --uswds-system-color-gray-cool-70: #3d4551;
169
+ --uswds-system-color-gray-cool-80: #2d2e2f;
170
+ --uswds-system-color-gray-cool-90: #1c1d1f;
171
+ --uswds-system-color-gray-warm-10: #e6e6e2;
172
+ --uswds-system-color-gray-warm-70: #454540;
173
+ --uswds-system-color-green-cool-5: #ecf3ec;
174
+ --uswds-system-color-green-cool-20: #b4d0b9;
175
+ --uswds-system-color-green-cool-40: #5e9f69;
176
+ --uswds-system-color-green-cool-vivid-20: #70e17b;
177
+ --uswds-system-color-green-cool-vivid-40: #00a91c;
178
+ --uswds-system-color-green-cool-vivid-50: #008817;
179
+ --uswds-system-color-green-cool-vivid-60: #216e1f;
180
+ --uswds-system-color-green-cool-vivid-70: #154c21;
181
+ --uswds-system-color-orange-40: #dd7533;
182
+ --uswds-system-color-red-30: #f2938c;
183
+ --uswds-system-color-red-50: #d83933;
184
+ --uswds-system-color-red-70: #6f3331;
185
+ --uswds-system-color-red-vivid-60: #b50909;
186
+ --uswds-system-color-red-vivid-70: #8b0a03;
187
+ --uswds-system-color-red-cool-vivid-10: #f8dfe2;
188
+ --uswds-system-color-red-cool-vivid-50: #e41d3d;
189
+ --uswds-system-color-red-cool-vivid-60: #b21d38;
190
+ --uswds-system-color-red-cool-vivid-70: #822133;
191
+ --uswds-system-color-red-warm-10: #f4e3db;
192
+ --uswds-system-color-red-warm-80: #332d29;
193
+ --uswds-system-color-red-warm-vivid-30: #f39268;
194
+ --uswds-system-color-red-warm-vivid-50: #d54309;
195
+ --uswds-system-color-red-warm-vivid-60: #9c3d10;
196
+ --uswds-system-color-violet-vivid-70: #54278f;
197
+ --uswds-system-color-yellow-5: #faf3d1;
198
+ --uswds-system-color-yellow-vivid-10: #fee685;
199
+ --uswds-system-color-yellow-vivid-20: #face00;
200
+ }
@@ -0,0 +1,157 @@
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
+ "gold": {
126
+ "*": {
127
+ "value": "{uswds-system-color-gold-vivid-20}"
128
+ },
129
+ "light": {
130
+ "value": "{uswds-system-color-yellow-vivid-20}"
131
+ },
132
+ "lighter": {
133
+ "value": "{uswds-system-color-gold-vivid-10}"
134
+ },
135
+ "lightest": {
136
+ "value": "{uswds-system-color-gold-vivid-5}"
137
+ },
138
+ "darker": {
139
+ "value": "{uswds-system-color-gold-vivid-50}"
140
+ }
141
+ },
142
+ "blue-cool": {
143
+ "*": {
144
+ "value": "{uswds-system-color-blue-warm-60}"
145
+ },
146
+ "light": {
147
+ "value": "{uswds-system-color-blue-warm-50}"
148
+ },
149
+ "lighter": {
150
+ "value": "{uswds-system-color-blue-warm-30}"
151
+ },
152
+ "lightest": {
153
+ "value": "{uswds-system-color-gray-warm-10}"
154
+ }
155
+ }
156
+ }
157
+ }