@bi-digital/css 0.0.0-experimental-857aeae

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.
@@ -0,0 +1,4 @@
1
+ body, :host {
2
+ font-family: museo-sans, Arial, sans-serif, system-ui;
3
+ line-height: 1.5;
4
+ }
@@ -0,0 +1 @@
1
+ body,:host{font-family:museo-sans,Arial,sans-serif,system-ui;line-height:1.5}
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
package/dist/fonts.css ADDED
@@ -0,0 +1,55 @@
1
+ @font-face {
2
+ font-family: museo-sans;
3
+ font-weight: 300;
4
+ font-display: swap;
5
+ src: url("./fonts/MuseoSansLight.woff2") format("woff2");
6
+ }
7
+
8
+ @font-face {
9
+ font-family: museo-sans;
10
+ font-weight: 500;
11
+ font-display: swap;
12
+ src: url("./fonts/MuseoSansMedium.woff2") format("woff2");
13
+ }
14
+
15
+ @font-face {
16
+ font-family: museo-sans;
17
+ font-weight: 700;
18
+ font-display: swap;
19
+ src: url("./fonts/MuseoSansBold.woff2") format("woff2");
20
+ }
21
+
22
+ @font-face {
23
+ font-family: museo-sans;
24
+ font-weight: 900;
25
+ font-display: swap;
26
+ src: url("./fonts/MuseoSansExtraBold.woff2") format("woff2");
27
+ }
28
+
29
+ @font-face {
30
+ font-family: museo-slab;
31
+ font-weight: 300;
32
+ font-display: swap;
33
+ src: url("./fonts/MuseoSlabLight.woff2") format("woff2");
34
+ }
35
+
36
+ @font-face {
37
+ font-family: museo-slab;
38
+ font-weight: 500;
39
+ font-display: swap;
40
+ src: url("./fonts/MuseoSlabMedium.woff2") format("woff2");
41
+ }
42
+
43
+ @font-face {
44
+ font-family: museo-slab;
45
+ font-weight: 700;
46
+ font-display: swap;
47
+ src: url("./fonts/MuseoSlabBold.woff2") format("woff2");
48
+ }
49
+
50
+ @font-face {
51
+ font-family: museo-sans;
52
+ font-weight: 900;
53
+ font-display: swap;
54
+ src: url("./fonts/MuseoSlabExtraBold.woff2") format("woff2");
55
+ }
@@ -0,0 +1 @@
1
+ @font-face{font-family:museo-sans;font-weight:300;font-display:swap;src:url(./fonts/MuseoSansLight.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:500;font-display:swap;src:url(./fonts/MuseoSansMedium.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:700;font-display:swap;src:url(./fonts/MuseoSansBold.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:900;font-display:swap;src:url(./fonts/MuseoSansExtraBold.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:300;font-display:swap;src:url(./fonts/MuseoSlabLight.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:500;font-display:swap;src:url(./fonts/MuseoSlabMedium.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:700;font-display:swap;src:url(./fonts/MuseoSlabBold.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:900;font-display:swap;src:url(./fonts/MuseoSlabExtraBold.woff2)format("woff2")}
package/dist/index.css ADDED
@@ -0,0 +1,366 @@
1
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
+ :root, :host {
3
+ --bi-basic-key: #000;
4
+ --bi-basic-white: #fff;
5
+ --bi-neutral-5: #f2f4f6;
6
+ --bi-neutral-10: #e4e8ed;
7
+ --bi-neutral-15: #d5dde4;
8
+ --bi-neutral-20: #c8d1db;
9
+ --bi-neutral-25: #bac6d2;
10
+ --bi-neutral-30: #acbbca;
11
+ --bi-neutral-40: #90a3b7;
12
+ --bi-neutral-50: #597694;
13
+ --bi-neutral-60: #475e75;
14
+ --bi-neutral-70: #3e5266;
15
+ --bi-neutral-80: #344557;
16
+ --bi-neutral-85: #303f4f;
17
+ --bi-neutral-90: #2b3947;
18
+ --bi-neutral-95: #26333f;
19
+ --bi-neutral-100: #222d38;
20
+ --bi-primary-5: #d9e6f9;
21
+ --bi-primary-10: #c5d9f7;
22
+ --bi-primary-15: #b2cdf4;
23
+ --bi-primary-20: #9ec0f1;
24
+ --bi-primary-25: #8bb3ee;
25
+ --bi-primary-30: #75a5f1;
26
+ --bi-primary-40: #6196f4;
27
+ --bi-primary-50: #0a64ff;
28
+ --bi-primary-60: #0b4db4;
29
+ --bi-primary-70: #0b49a1;
30
+ --bi-primary-80: #0c468f;
31
+ --bi-primary-85: #093f82;
32
+ --bi-primary-90: #083a76;
33
+ --bi-primary-95: #042f5b;
34
+ --bi-primary-100: #002341;
35
+ --bi-secondary-5: #fcf6df;
36
+ --bi-secondary-10: #f9edbf;
37
+ --bi-secondary-20: #f5e49f;
38
+ --bi-secondary-30: #f2dc7e;
39
+ --bi-secondary-40: #efd35f;
40
+ --bi-secondary-50: #ecca3f;
41
+ --bi-info-5: #e6d5ff;
42
+ --bi-info-10: #d9bfff;
43
+ --bi-info-15: #cdaaff;
44
+ --bi-info-20: #c094ff;
45
+ --bi-info-25: #b480ff;
46
+ --bi-info-30: #a76aff;
47
+ --bi-info-40: #822bff;
48
+ --bi-info-50: #6900ff;
49
+ --bi-info-60: #5c03dc;
50
+ --bi-info-70: #4f05b9;
51
+ --bi-info-80: #420896;
52
+ --bi-info-85: #3b0984;
53
+ --bi-info-90: #350a73;
54
+ --bi-info-95: #2e0b61;
55
+ --bi-info-100: #280d50;
56
+ --bi-warning-5: #fff7d5;
57
+ --bi-warning-10: #fff2bf;
58
+ --bi-warning-15: #ffea95;
59
+ --bi-warning-20: #ffe680;
60
+ --bi-warning-25: #ffe26a;
61
+ --bi-warning-30: #ffde55;
62
+ --bi-warning-40: #ffd52b;
63
+ --bi-warning-50: #ffcd00;
64
+ --bi-warning-60: #deb300;
65
+ --bi-warning-70: #bd9800;
66
+ --bi-warning-80: #9d7e00;
67
+ --bi-warning-85: #7c6400;
68
+ --bi-warning-90: #5b4900;
69
+ --bi-warning-95: #4a3c01;
70
+ --bi-warning-100: #3a2f00;
71
+ --bi-success-5: #d5f4d6;
72
+ --bi-success-10: #bfeec2;
73
+ --bi-success-15: #aae8ae;
74
+ --bi-success-20: #95e299;
75
+ --bi-success-25: #80dd85;
76
+ --bi-success-30: #55d15c;
77
+ --bi-success-40: #2bc634;
78
+ --bi-success-50: #00ab0b;
79
+ --bi-success-60: #04a30d;
80
+ --bi-success-70: #078b0f;
81
+ --bi-success-80: #0b7411;
82
+ --bi-success-85: #0f5d13;
83
+ --bi-success-90: #124515;
84
+ --bi-success-95: #143a16;
85
+ --bi-success-100: #162e17;
86
+ --bi-alert-5: #ffe1df;
87
+ --bi-alert-10: #ffd7d5;
88
+ --bi-alert-15: #ffc3bf;
89
+ --bi-alert-20: #ffafaa;
90
+ --bi-alert-25: #ff8780;
91
+ --bi-alert-30: #ff5f55;
92
+ --bi-alert-40: #ff372b;
93
+ --bi-alert-50: #ff0f00;
94
+ --bi-alert-60: #e41100;
95
+ --bi-alert-70: #c91300;
96
+ --bi-alert-80: #ae1601;
97
+ --bi-alert-85: #931801;
98
+ --bi-alert-90: #731a15;
99
+ --bi-alert-95: #6a1b16;
100
+ --bi-alert-100: #5d1c18;
101
+ --bi-scale-0: 0;
102
+ --bi-scale-0-25x: .0625rem;
103
+ --bi-scale-0-50x: .125rem;
104
+ --bi-scale-0-75x: .1875rem;
105
+ --bi-scale-1x: .25rem;
106
+ --bi-scale-1-5x: .375rem;
107
+ --bi-scale-2x: .5rem;
108
+ --bi-scale-3x: .75rem;
109
+ --bi-scale-4x: 1rem;
110
+ --bi-scale-5x: 1.25rem;
111
+ --bi-scale-6x: 1.5rem;
112
+ --bi-scale-8x: 2rem;
113
+ --bi-scale-9x: 2.25rem;
114
+ --bi-scale-10x: 2.5rem;
115
+ --bi-scale-11x: 2.75rem;
116
+ --bi-scale-12x: 3rem;
117
+ --bi-scale-14x: 3.5rem;
118
+ --bi-scale-16x: 4rem;
119
+ --bi-scale-20x: 5rem;
120
+ --bi-scale-24x: 6rem;
121
+ --bi-scale-32x: 8rem;
122
+ --bi-scale-36x: 9rem;
123
+ --bi-scale-40x: 10rem;
124
+ --bi-scale-48x: 12rem;
125
+ --bi-scale-56x: 14rem;
126
+ --bi-scale-64x: 16rem;
127
+ --bi-scale-80x: 20rem;
128
+ --bi-scale-max: 624.938rem;
129
+ --bi-opacity-dark-80: #26333f33;
130
+ --bi-opacity-dark-50: #26333f80;
131
+ --bi-opacity-light-100: #fff0;
132
+ --bi-opacity-light-80: #fff3;
133
+ --bi-opacity-light-50: #ffffff80;
134
+ --bi-stroke-default: .09375rem;
135
+ --bi-elevation-25: #26333f26;
136
+ --bi-states-hover-dark: #26333f1a;
137
+ --bi-states-hover-light: #ffffff1a;
138
+ --bi-states-press-dark: #26333f26;
139
+ --bi-states-press-light: #ffffff26;
140
+ --bi-stroke-none: var(--bi-scale-0);
141
+ --bi-stroke-thin: var(--bi-scale-0-25x);
142
+ --bi-stroke-thick: var(--bi-scale-0-50x);
143
+ --bi-stroke-color-1: var(--bi-neutral-15);
144
+ --bi-stroke-color-2: var(--bi-neutral-25);
145
+ --bi-stroke-color-3: var(--bi-neutral-50);
146
+ --bi-radius-none: var(--bi-scale-0);
147
+ --bi-radius-small: var(--bi-scale-0-50x);
148
+ --bi-radius-medium: var(--bi-scale-1x);
149
+ --bi-radius-large: var(--bi-scale-2x);
150
+ --bi-radius-xl: var(--bi-scale-3x);
151
+ --bi-radius-brand: var(--bi-scale-12x);
152
+ --bi-radius-full: var(--bi-scale-max);
153
+ --bi-icon-xs: var(--bi-scale-5x);
154
+ --bi-icon-small: var(--bi-scale-6x);
155
+ --bi-icon-medium: var(--bi-scale-8x);
156
+ --bi-icon-large: var(--bi-scale-10x);
157
+ --bi-icon-2xl: var(--bi-scale-12x);
158
+ --bi-icon-primary: var(--bi-neutral-95);
159
+ --bi-icon-secondary: var(--bi-neutral-50);
160
+ --bi-icon-disabled: var(--bi-neutral-50);
161
+ --bi-icon-link: var(--bi-primary-50);
162
+ }
163
+
164
+ *, :before, :after {
165
+ box-sizing: border-box;
166
+ }
167
+
168
+ html {
169
+ -webkit-text-size-adjust: 100%;
170
+ tab-size: 4;
171
+ font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
172
+ line-height: 1.15;
173
+ }
174
+
175
+ body {
176
+ margin: 0;
177
+ }
178
+
179
+ b, strong {
180
+ font-weight: bolder;
181
+ }
182
+
183
+ code, kbd, samp, pre {
184
+ font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
185
+ font-size: 1em;
186
+ }
187
+
188
+ small {
189
+ font-size: 80%;
190
+ }
191
+
192
+ sub, sup {
193
+ vertical-align: baseline;
194
+ font-size: 75%;
195
+ line-height: 0;
196
+ position: relative;
197
+ }
198
+
199
+ sub {
200
+ bottom: -.25em;
201
+ }
202
+
203
+ sup {
204
+ top: -.5em;
205
+ }
206
+
207
+ table {
208
+ border-color: currentColor;
209
+ }
210
+
211
+ button, input, optgroup, select, textarea {
212
+ margin: 0;
213
+ font-family: inherit;
214
+ font-size: 100%;
215
+ line-height: 1.15;
216
+ }
217
+
218
+ button, [type="button"], [type="reset"], [type="submit"] {
219
+ -webkit-appearance: button;
220
+ }
221
+
222
+ legend {
223
+ padding: 0;
224
+ }
225
+
226
+ progress {
227
+ vertical-align: baseline;
228
+ }
229
+
230
+ ::-webkit-inner-spin-button {
231
+ height: auto;
232
+ }
233
+
234
+ ::-webkit-outer-spin-button {
235
+ height: auto;
236
+ }
237
+
238
+ [type="search"] {
239
+ -webkit-appearance: textfield;
240
+ outline-offset: -2px;
241
+ }
242
+
243
+ ::-webkit-search-decoration {
244
+ -webkit-appearance: none;
245
+ }
246
+
247
+ ::-webkit-file-upload-button {
248
+ -webkit-appearance: button;
249
+ font: inherit;
250
+ }
251
+
252
+ summary {
253
+ display: list-item;
254
+ }
255
+
256
+ @font-face {
257
+ font-family: museo-sans;
258
+ font-weight: 300;
259
+ font-display: swap;
260
+ src: url("./fonts/MuseoSansLight.woff2") format("woff2");
261
+ }
262
+
263
+ @font-face {
264
+ font-family: museo-sans;
265
+ font-weight: 500;
266
+ font-display: swap;
267
+ src: url("./fonts/MuseoSansMedium.woff2") format("woff2");
268
+ }
269
+
270
+ @font-face {
271
+ font-family: museo-sans;
272
+ font-weight: 700;
273
+ font-display: swap;
274
+ src: url("./fonts/MuseoSansBold.woff2") format("woff2");
275
+ }
276
+
277
+ @font-face {
278
+ font-family: museo-sans;
279
+ font-weight: 900;
280
+ font-display: swap;
281
+ src: url("./fonts/MuseoSansExtraBold.woff2") format("woff2");
282
+ }
283
+
284
+ @font-face {
285
+ font-family: museo-slab;
286
+ font-weight: 300;
287
+ font-display: swap;
288
+ src: url("./fonts/MuseoSlabLight.woff2") format("woff2");
289
+ }
290
+
291
+ @font-face {
292
+ font-family: museo-slab;
293
+ font-weight: 500;
294
+ font-display: swap;
295
+ src: url("./fonts/MuseoSlabMedium.woff2") format("woff2");
296
+ }
297
+
298
+ @font-face {
299
+ font-family: museo-slab;
300
+ font-weight: 700;
301
+ font-display: swap;
302
+ src: url("./fonts/MuseoSlabBold.woff2") format("woff2");
303
+ }
304
+
305
+ @font-face {
306
+ font-family: museo-sans;
307
+ font-weight: 900;
308
+ font-display: swap;
309
+ src: url("./fonts/MuseoSlabExtraBold.woff2") format("woff2");
310
+ }
311
+
312
+ @media print {
313
+ *, :before, :after {
314
+ color: #000 !important;
315
+ box-shadow: none !important;
316
+ text-shadow: none !important;
317
+ background: #fff !important;
318
+ }
319
+
320
+ a, a:visited {
321
+ text-decoration: underline;
322
+ }
323
+
324
+ a[href]:after {
325
+ content: " (" attr(href) ")";
326
+ }
327
+
328
+ abbr[title]:after {
329
+ content: " (" attr(title) ")";
330
+ }
331
+
332
+ a[href^="#"]:after, a[href^="javascript:"]:after {
333
+ content: "";
334
+ }
335
+
336
+ pre {
337
+ white-space: pre-wrap !important;
338
+ }
339
+
340
+ pre, blockquote {
341
+ page-break-inside: avoid;
342
+ border: 1px solid #999;
343
+ }
344
+
345
+ thead {
346
+ display: table-header-group;
347
+ }
348
+
349
+ tr, img {
350
+ page-break-inside: avoid;
351
+ }
352
+
353
+ p, h2, h3 {
354
+ orphans: 3;
355
+ widows: 3;
356
+ }
357
+
358
+ h2, h3 {
359
+ page-break-after: avoid;
360
+ }
361
+ }
362
+
363
+ body, :host {
364
+ font-family: museo-sans, Arial, sans-serif, system-ui;
365
+ line-height: 1.5;
366
+ }
@@ -0,0 +1,2 @@
1
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
+ :root,:host{--bi-basic-key:#000;--bi-basic-white:#fff;--bi-neutral-5:#f2f4f6;--bi-neutral-10:#e4e8ed;--bi-neutral-15:#d5dde4;--bi-neutral-20:#c8d1db;--bi-neutral-25:#bac6d2;--bi-neutral-30:#acbbca;--bi-neutral-40:#90a3b7;--bi-neutral-50:#597694;--bi-neutral-60:#475e75;--bi-neutral-70:#3e5266;--bi-neutral-80:#344557;--bi-neutral-85:#303f4f;--bi-neutral-90:#2b3947;--bi-neutral-95:#26333f;--bi-neutral-100:#222d38;--bi-primary-5:#d9e6f9;--bi-primary-10:#c5d9f7;--bi-primary-15:#b2cdf4;--bi-primary-20:#9ec0f1;--bi-primary-25:#8bb3ee;--bi-primary-30:#75a5f1;--bi-primary-40:#6196f4;--bi-primary-50:#0a64ff;--bi-primary-60:#0b4db4;--bi-primary-70:#0b49a1;--bi-primary-80:#0c468f;--bi-primary-85:#093f82;--bi-primary-90:#083a76;--bi-primary-95:#042f5b;--bi-primary-100:#002341;--bi-secondary-5:#fcf6df;--bi-secondary-10:#f9edbf;--bi-secondary-20:#f5e49f;--bi-secondary-30:#f2dc7e;--bi-secondary-40:#efd35f;--bi-secondary-50:#ecca3f;--bi-info-5:#e6d5ff;--bi-info-10:#d9bfff;--bi-info-15:#cdaaff;--bi-info-20:#c094ff;--bi-info-25:#b480ff;--bi-info-30:#a76aff;--bi-info-40:#822bff;--bi-info-50:#6900ff;--bi-info-60:#5c03dc;--bi-info-70:#4f05b9;--bi-info-80:#420896;--bi-info-85:#3b0984;--bi-info-90:#350a73;--bi-info-95:#2e0b61;--bi-info-100:#280d50;--bi-warning-5:#fff7d5;--bi-warning-10:#fff2bf;--bi-warning-15:#ffea95;--bi-warning-20:#ffe680;--bi-warning-25:#ffe26a;--bi-warning-30:#ffde55;--bi-warning-40:#ffd52b;--bi-warning-50:#ffcd00;--bi-warning-60:#deb300;--bi-warning-70:#bd9800;--bi-warning-80:#9d7e00;--bi-warning-85:#7c6400;--bi-warning-90:#5b4900;--bi-warning-95:#4a3c01;--bi-warning-100:#3a2f00;--bi-success-5:#d5f4d6;--bi-success-10:#bfeec2;--bi-success-15:#aae8ae;--bi-success-20:#95e299;--bi-success-25:#80dd85;--bi-success-30:#55d15c;--bi-success-40:#2bc634;--bi-success-50:#00ab0b;--bi-success-60:#04a30d;--bi-success-70:#078b0f;--bi-success-80:#0b7411;--bi-success-85:#0f5d13;--bi-success-90:#124515;--bi-success-95:#143a16;--bi-success-100:#162e17;--bi-alert-5:#ffe1df;--bi-alert-10:#ffd7d5;--bi-alert-15:#ffc3bf;--bi-alert-20:#ffafaa;--bi-alert-25:#ff8780;--bi-alert-30:#ff5f55;--bi-alert-40:#ff372b;--bi-alert-50:#ff0f00;--bi-alert-60:#e41100;--bi-alert-70:#c91300;--bi-alert-80:#ae1601;--bi-alert-85:#931801;--bi-alert-90:#731a15;--bi-alert-95:#6a1b16;--bi-alert-100:#5d1c18;--bi-scale-0:0;--bi-scale-0-25x:.0625rem;--bi-scale-0-50x:.125rem;--bi-scale-0-75x:.1875rem;--bi-scale-1x:.25rem;--bi-scale-1-5x:.375rem;--bi-scale-2x:.5rem;--bi-scale-3x:.75rem;--bi-scale-4x:1rem;--bi-scale-5x:1.25rem;--bi-scale-6x:1.5rem;--bi-scale-8x:2rem;--bi-scale-9x:2.25rem;--bi-scale-10x:2.5rem;--bi-scale-11x:2.75rem;--bi-scale-12x:3rem;--bi-scale-14x:3.5rem;--bi-scale-16x:4rem;--bi-scale-20x:5rem;--bi-scale-24x:6rem;--bi-scale-32x:8rem;--bi-scale-36x:9rem;--bi-scale-40x:10rem;--bi-scale-48x:12rem;--bi-scale-56x:14rem;--bi-scale-64x:16rem;--bi-scale-80x:20rem;--bi-scale-max:624.938rem;--bi-opacity-dark-80:#26333f33;--bi-opacity-dark-50:#26333f80;--bi-opacity-light-100:#fff0;--bi-opacity-light-80:#fff3;--bi-opacity-light-50:#ffffff80;--bi-stroke-default:.09375rem;--bi-elevation-25:#26333f26;--bi-states-hover-dark:#26333f1a;--bi-states-hover-light:#ffffff1a;--bi-states-press-dark:#26333f26;--bi-states-press-light:#ffffff26;--bi-stroke-none:var(--bi-scale-0);--bi-stroke-thin:var(--bi-scale-0-25x);--bi-stroke-thick:var(--bi-scale-0-50x);--bi-stroke-color-1:var(--bi-neutral-15);--bi-stroke-color-2:var(--bi-neutral-25);--bi-stroke-color-3:var(--bi-neutral-50);--bi-radius-none:var(--bi-scale-0);--bi-radius-small:var(--bi-scale-0-50x);--bi-radius-medium:var(--bi-scale-1x);--bi-radius-large:var(--bi-scale-2x);--bi-radius-xl:var(--bi-scale-3x);--bi-radius-brand:var(--bi-scale-12x);--bi-radius-full:var(--bi-scale-max);--bi-icon-xs:var(--bi-scale-5x);--bi-icon-small:var(--bi-scale-6x);--bi-icon-medium:var(--bi-scale-8x);--bi-icon-large:var(--bi-scale-10x);--bi-icon-2xl:var(--bi-scale-12x);--bi-icon-primary:var(--bi-neutral-95);--bi-icon-secondary:var(--bi-neutral-50);--bi-icon-disabled:var(--bi-neutral-50);--bi-icon-link:var(--bi-primary-50)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}@font-face{font-family:museo-sans;font-weight:300;font-display:swap;src:url(./fonts/MuseoSansLight.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:500;font-display:swap;src:url(./fonts/MuseoSansMedium.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:700;font-display:swap;src:url(./fonts/MuseoSansBold.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:900;font-display:swap;src:url(./fonts/MuseoSansExtraBold.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:300;font-display:swap;src:url(./fonts/MuseoSlabLight.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:500;font-display:swap;src:url(./fonts/MuseoSlabMedium.woff2)format("woff2")}@font-face{font-family:museo-slab;font-weight:700;font-display:swap;src:url(./fonts/MuseoSlabBold.woff2)format("woff2")}@font-face{font-family:museo-sans;font-weight:900;font-display:swap;src:url(./fonts/MuseoSlabExtraBold.woff2)format("woff2")}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{page-break-inside:avoid;border:1px solid #999}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}body,:host{font-family:museo-sans,Arial,sans-serif,system-ui;line-height:1.5}
package/dist/print.css ADDED
@@ -0,0 +1,50 @@
1
+ @media print {
2
+ *, :before, :after {
3
+ color: #000 !important;
4
+ box-shadow: none !important;
5
+ text-shadow: none !important;
6
+ background: #fff !important;
7
+ }
8
+
9
+ a, a:visited {
10
+ text-decoration: underline;
11
+ }
12
+
13
+ a[href]:after {
14
+ content: " (" attr(href) ")";
15
+ }
16
+
17
+ abbr[title]:after {
18
+ content: " (" attr(title) ")";
19
+ }
20
+
21
+ a[href^="#"]:after, a[href^="javascript:"]:after {
22
+ content: "";
23
+ }
24
+
25
+ pre {
26
+ white-space: pre-wrap !important;
27
+ }
28
+
29
+ pre, blockquote {
30
+ page-break-inside: avoid;
31
+ border: 1px solid #999;
32
+ }
33
+
34
+ thead {
35
+ display: table-header-group;
36
+ }
37
+
38
+ tr, img {
39
+ page-break-inside: avoid;
40
+ }
41
+
42
+ p, h2, h3 {
43
+ orphans: 3;
44
+ widows: 3;
45
+ }
46
+
47
+ h2, h3 {
48
+ page-break-after: avoid;
49
+ }
50
+ }
@@ -0,0 +1 @@
1
+ @media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{page-break-inside:avoid;border:1px solid #999}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
package/dist/reset.css ADDED
@@ -0,0 +1,92 @@
1
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
+ *, :before, :after {
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ html {
7
+ -webkit-text-size-adjust: 100%;
8
+ tab-size: 4;
9
+ font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
10
+ line-height: 1.15;
11
+ }
12
+
13
+ body {
14
+ margin: 0;
15
+ }
16
+
17
+ b, strong {
18
+ font-weight: bolder;
19
+ }
20
+
21
+ code, kbd, samp, pre {
22
+ font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
23
+ font-size: 1em;
24
+ }
25
+
26
+ small {
27
+ font-size: 80%;
28
+ }
29
+
30
+ sub, sup {
31
+ vertical-align: baseline;
32
+ font-size: 75%;
33
+ line-height: 0;
34
+ position: relative;
35
+ }
36
+
37
+ sub {
38
+ bottom: -.25em;
39
+ }
40
+
41
+ sup {
42
+ top: -.5em;
43
+ }
44
+
45
+ table {
46
+ border-color: currentColor;
47
+ }
48
+
49
+ button, input, optgroup, select, textarea {
50
+ margin: 0;
51
+ font-family: inherit;
52
+ font-size: 100%;
53
+ line-height: 1.15;
54
+ }
55
+
56
+ button, [type="button"], [type="reset"], [type="submit"] {
57
+ -webkit-appearance: button;
58
+ }
59
+
60
+ legend {
61
+ padding: 0;
62
+ }
63
+
64
+ progress {
65
+ vertical-align: baseline;
66
+ }
67
+
68
+ ::-webkit-inner-spin-button {
69
+ height: auto;
70
+ }
71
+
72
+ ::-webkit-outer-spin-button {
73
+ height: auto;
74
+ }
75
+
76
+ [type="search"] {
77
+ -webkit-appearance: textfield;
78
+ outline-offset: -2px;
79
+ }
80
+
81
+ ::-webkit-search-decoration {
82
+ -webkit-appearance: none;
83
+ }
84
+
85
+ ::-webkit-file-upload-button {
86
+ -webkit-appearance: button;
87
+ font: inherit;
88
+ }
89
+
90
+ summary {
91
+ display: list-item;
92
+ }
@@ -0,0 +1,2 @@
1
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
+ *,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
@@ -0,0 +1,161 @@
1
+ :root, :host {
2
+ --bi-basic-key: #000;
3
+ --bi-basic-white: #fff;
4
+ --bi-neutral-5: #f2f4f6;
5
+ --bi-neutral-10: #e4e8ed;
6
+ --bi-neutral-15: #d5dde4;
7
+ --bi-neutral-20: #c8d1db;
8
+ --bi-neutral-25: #bac6d2;
9
+ --bi-neutral-30: #acbbca;
10
+ --bi-neutral-40: #90a3b7;
11
+ --bi-neutral-50: #597694;
12
+ --bi-neutral-60: #475e75;
13
+ --bi-neutral-70: #3e5266;
14
+ --bi-neutral-80: #344557;
15
+ --bi-neutral-85: #303f4f;
16
+ --bi-neutral-90: #2b3947;
17
+ --bi-neutral-95: #26333f;
18
+ --bi-neutral-100: #222d38;
19
+ --bi-primary-5: #d9e6f9;
20
+ --bi-primary-10: #c5d9f7;
21
+ --bi-primary-15: #b2cdf4;
22
+ --bi-primary-20: #9ec0f1;
23
+ --bi-primary-25: #8bb3ee;
24
+ --bi-primary-30: #75a5f1;
25
+ --bi-primary-40: #6196f4;
26
+ --bi-primary-50: #0a64ff;
27
+ --bi-primary-60: #0b4db4;
28
+ --bi-primary-70: #0b49a1;
29
+ --bi-primary-80: #0c468f;
30
+ --bi-primary-85: #093f82;
31
+ --bi-primary-90: #083a76;
32
+ --bi-primary-95: #042f5b;
33
+ --bi-primary-100: #002341;
34
+ --bi-secondary-5: #fcf6df;
35
+ --bi-secondary-10: #f9edbf;
36
+ --bi-secondary-20: #f5e49f;
37
+ --bi-secondary-30: #f2dc7e;
38
+ --bi-secondary-40: #efd35f;
39
+ --bi-secondary-50: #ecca3f;
40
+ --bi-info-5: #e6d5ff;
41
+ --bi-info-10: #d9bfff;
42
+ --bi-info-15: #cdaaff;
43
+ --bi-info-20: #c094ff;
44
+ --bi-info-25: #b480ff;
45
+ --bi-info-30: #a76aff;
46
+ --bi-info-40: #822bff;
47
+ --bi-info-50: #6900ff;
48
+ --bi-info-60: #5c03dc;
49
+ --bi-info-70: #4f05b9;
50
+ --bi-info-80: #420896;
51
+ --bi-info-85: #3b0984;
52
+ --bi-info-90: #350a73;
53
+ --bi-info-95: #2e0b61;
54
+ --bi-info-100: #280d50;
55
+ --bi-warning-5: #fff7d5;
56
+ --bi-warning-10: #fff2bf;
57
+ --bi-warning-15: #ffea95;
58
+ --bi-warning-20: #ffe680;
59
+ --bi-warning-25: #ffe26a;
60
+ --bi-warning-30: #ffde55;
61
+ --bi-warning-40: #ffd52b;
62
+ --bi-warning-50: #ffcd00;
63
+ --bi-warning-60: #deb300;
64
+ --bi-warning-70: #bd9800;
65
+ --bi-warning-80: #9d7e00;
66
+ --bi-warning-85: #7c6400;
67
+ --bi-warning-90: #5b4900;
68
+ --bi-warning-95: #4a3c01;
69
+ --bi-warning-100: #3a2f00;
70
+ --bi-success-5: #d5f4d6;
71
+ --bi-success-10: #bfeec2;
72
+ --bi-success-15: #aae8ae;
73
+ --bi-success-20: #95e299;
74
+ --bi-success-25: #80dd85;
75
+ --bi-success-30: #55d15c;
76
+ --bi-success-40: #2bc634;
77
+ --bi-success-50: #00ab0b;
78
+ --bi-success-60: #04a30d;
79
+ --bi-success-70: #078b0f;
80
+ --bi-success-80: #0b7411;
81
+ --bi-success-85: #0f5d13;
82
+ --bi-success-90: #124515;
83
+ --bi-success-95: #143a16;
84
+ --bi-success-100: #162e17;
85
+ --bi-alert-5: #ffe1df;
86
+ --bi-alert-10: #ffd7d5;
87
+ --bi-alert-15: #ffc3bf;
88
+ --bi-alert-20: #ffafaa;
89
+ --bi-alert-25: #ff8780;
90
+ --bi-alert-30: #ff5f55;
91
+ --bi-alert-40: #ff372b;
92
+ --bi-alert-50: #ff0f00;
93
+ --bi-alert-60: #e41100;
94
+ --bi-alert-70: #c91300;
95
+ --bi-alert-80: #ae1601;
96
+ --bi-alert-85: #931801;
97
+ --bi-alert-90: #731a15;
98
+ --bi-alert-95: #6a1b16;
99
+ --bi-alert-100: #5d1c18;
100
+ --bi-scale-0: 0;
101
+ --bi-scale-0-25x: .0625rem;
102
+ --bi-scale-0-50x: .125rem;
103
+ --bi-scale-0-75x: .1875rem;
104
+ --bi-scale-1x: .25rem;
105
+ --bi-scale-1-5x: .375rem;
106
+ --bi-scale-2x: .5rem;
107
+ --bi-scale-3x: .75rem;
108
+ --bi-scale-4x: 1rem;
109
+ --bi-scale-5x: 1.25rem;
110
+ --bi-scale-6x: 1.5rem;
111
+ --bi-scale-8x: 2rem;
112
+ --bi-scale-9x: 2.25rem;
113
+ --bi-scale-10x: 2.5rem;
114
+ --bi-scale-11x: 2.75rem;
115
+ --bi-scale-12x: 3rem;
116
+ --bi-scale-14x: 3.5rem;
117
+ --bi-scale-16x: 4rem;
118
+ --bi-scale-20x: 5rem;
119
+ --bi-scale-24x: 6rem;
120
+ --bi-scale-32x: 8rem;
121
+ --bi-scale-36x: 9rem;
122
+ --bi-scale-40x: 10rem;
123
+ --bi-scale-48x: 12rem;
124
+ --bi-scale-56x: 14rem;
125
+ --bi-scale-64x: 16rem;
126
+ --bi-scale-80x: 20rem;
127
+ --bi-scale-max: 624.938rem;
128
+ --bi-opacity-dark-80: #26333f33;
129
+ --bi-opacity-dark-50: #26333f80;
130
+ --bi-opacity-light-100: #fff0;
131
+ --bi-opacity-light-80: #fff3;
132
+ --bi-opacity-light-50: #ffffff80;
133
+ --bi-stroke-default: .09375rem;
134
+ --bi-elevation-25: #26333f26;
135
+ --bi-states-hover-dark: #26333f1a;
136
+ --bi-states-hover-light: #ffffff1a;
137
+ --bi-states-press-dark: #26333f26;
138
+ --bi-states-press-light: #ffffff26;
139
+ --bi-stroke-none: var(--bi-scale-0);
140
+ --bi-stroke-thin: var(--bi-scale-0-25x);
141
+ --bi-stroke-thick: var(--bi-scale-0-50x);
142
+ --bi-stroke-color-1: var(--bi-neutral-15);
143
+ --bi-stroke-color-2: var(--bi-neutral-25);
144
+ --bi-stroke-color-3: var(--bi-neutral-50);
145
+ --bi-radius-none: var(--bi-scale-0);
146
+ --bi-radius-small: var(--bi-scale-0-50x);
147
+ --bi-radius-medium: var(--bi-scale-1x);
148
+ --bi-radius-large: var(--bi-scale-2x);
149
+ --bi-radius-xl: var(--bi-scale-3x);
150
+ --bi-radius-brand: var(--bi-scale-12x);
151
+ --bi-radius-full: var(--bi-scale-max);
152
+ --bi-icon-xs: var(--bi-scale-5x);
153
+ --bi-icon-small: var(--bi-scale-6x);
154
+ --bi-icon-medium: var(--bi-scale-8x);
155
+ --bi-icon-large: var(--bi-scale-10x);
156
+ --bi-icon-2xl: var(--bi-scale-12x);
157
+ --bi-icon-primary: var(--bi-neutral-95);
158
+ --bi-icon-secondary: var(--bi-neutral-50);
159
+ --bi-icon-disabled: var(--bi-neutral-50);
160
+ --bi-icon-link: var(--bi-primary-50);
161
+ }
@@ -0,0 +1 @@
1
+ :root,:host{--bi-basic-key:#000;--bi-basic-white:#fff;--bi-neutral-5:#f2f4f6;--bi-neutral-10:#e4e8ed;--bi-neutral-15:#d5dde4;--bi-neutral-20:#c8d1db;--bi-neutral-25:#bac6d2;--bi-neutral-30:#acbbca;--bi-neutral-40:#90a3b7;--bi-neutral-50:#597694;--bi-neutral-60:#475e75;--bi-neutral-70:#3e5266;--bi-neutral-80:#344557;--bi-neutral-85:#303f4f;--bi-neutral-90:#2b3947;--bi-neutral-95:#26333f;--bi-neutral-100:#222d38;--bi-primary-5:#d9e6f9;--bi-primary-10:#c5d9f7;--bi-primary-15:#b2cdf4;--bi-primary-20:#9ec0f1;--bi-primary-25:#8bb3ee;--bi-primary-30:#75a5f1;--bi-primary-40:#6196f4;--bi-primary-50:#0a64ff;--bi-primary-60:#0b4db4;--bi-primary-70:#0b49a1;--bi-primary-80:#0c468f;--bi-primary-85:#093f82;--bi-primary-90:#083a76;--bi-primary-95:#042f5b;--bi-primary-100:#002341;--bi-secondary-5:#fcf6df;--bi-secondary-10:#f9edbf;--bi-secondary-20:#f5e49f;--bi-secondary-30:#f2dc7e;--bi-secondary-40:#efd35f;--bi-secondary-50:#ecca3f;--bi-info-5:#e6d5ff;--bi-info-10:#d9bfff;--bi-info-15:#cdaaff;--bi-info-20:#c094ff;--bi-info-25:#b480ff;--bi-info-30:#a76aff;--bi-info-40:#822bff;--bi-info-50:#6900ff;--bi-info-60:#5c03dc;--bi-info-70:#4f05b9;--bi-info-80:#420896;--bi-info-85:#3b0984;--bi-info-90:#350a73;--bi-info-95:#2e0b61;--bi-info-100:#280d50;--bi-warning-5:#fff7d5;--bi-warning-10:#fff2bf;--bi-warning-15:#ffea95;--bi-warning-20:#ffe680;--bi-warning-25:#ffe26a;--bi-warning-30:#ffde55;--bi-warning-40:#ffd52b;--bi-warning-50:#ffcd00;--bi-warning-60:#deb300;--bi-warning-70:#bd9800;--bi-warning-80:#9d7e00;--bi-warning-85:#7c6400;--bi-warning-90:#5b4900;--bi-warning-95:#4a3c01;--bi-warning-100:#3a2f00;--bi-success-5:#d5f4d6;--bi-success-10:#bfeec2;--bi-success-15:#aae8ae;--bi-success-20:#95e299;--bi-success-25:#80dd85;--bi-success-30:#55d15c;--bi-success-40:#2bc634;--bi-success-50:#00ab0b;--bi-success-60:#04a30d;--bi-success-70:#078b0f;--bi-success-80:#0b7411;--bi-success-85:#0f5d13;--bi-success-90:#124515;--bi-success-95:#143a16;--bi-success-100:#162e17;--bi-alert-5:#ffe1df;--bi-alert-10:#ffd7d5;--bi-alert-15:#ffc3bf;--bi-alert-20:#ffafaa;--bi-alert-25:#ff8780;--bi-alert-30:#ff5f55;--bi-alert-40:#ff372b;--bi-alert-50:#ff0f00;--bi-alert-60:#e41100;--bi-alert-70:#c91300;--bi-alert-80:#ae1601;--bi-alert-85:#931801;--bi-alert-90:#731a15;--bi-alert-95:#6a1b16;--bi-alert-100:#5d1c18;--bi-scale-0:0;--bi-scale-0-25x:.0625rem;--bi-scale-0-50x:.125rem;--bi-scale-0-75x:.1875rem;--bi-scale-1x:.25rem;--bi-scale-1-5x:.375rem;--bi-scale-2x:.5rem;--bi-scale-3x:.75rem;--bi-scale-4x:1rem;--bi-scale-5x:1.25rem;--bi-scale-6x:1.5rem;--bi-scale-8x:2rem;--bi-scale-9x:2.25rem;--bi-scale-10x:2.5rem;--bi-scale-11x:2.75rem;--bi-scale-12x:3rem;--bi-scale-14x:3.5rem;--bi-scale-16x:4rem;--bi-scale-20x:5rem;--bi-scale-24x:6rem;--bi-scale-32x:8rem;--bi-scale-36x:9rem;--bi-scale-40x:10rem;--bi-scale-48x:12rem;--bi-scale-56x:14rem;--bi-scale-64x:16rem;--bi-scale-80x:20rem;--bi-scale-max:624.938rem;--bi-opacity-dark-80:#26333f33;--bi-opacity-dark-50:#26333f80;--bi-opacity-light-100:#fff0;--bi-opacity-light-80:#fff3;--bi-opacity-light-50:#ffffff80;--bi-stroke-default:.09375rem;--bi-elevation-25:#26333f26;--bi-states-hover-dark:#26333f1a;--bi-states-hover-light:#ffffff1a;--bi-states-press-dark:#26333f26;--bi-states-press-light:#ffffff26;--bi-stroke-none:var(--bi-scale-0);--bi-stroke-thin:var(--bi-scale-0-25x);--bi-stroke-thick:var(--bi-scale-0-50x);--bi-stroke-color-1:var(--bi-neutral-15);--bi-stroke-color-2:var(--bi-neutral-25);--bi-stroke-color-3:var(--bi-neutral-50);--bi-radius-none:var(--bi-scale-0);--bi-radius-small:var(--bi-scale-0-50x);--bi-radius-medium:var(--bi-scale-1x);--bi-radius-large:var(--bi-scale-2x);--bi-radius-xl:var(--bi-scale-3x);--bi-radius-brand:var(--bi-scale-12x);--bi-radius-full:var(--bi-scale-max);--bi-icon-xs:var(--bi-scale-5x);--bi-icon-small:var(--bi-scale-6x);--bi-icon-medium:var(--bi-scale-8x);--bi-icon-large:var(--bi-scale-10x);--bi-icon-2xl:var(--bi-scale-12x);--bi-icon-primary:var(--bi-neutral-95);--bi-icon-secondary:var(--bi-neutral-50);--bi-icon-disabled:var(--bi-neutral-50);--bi-icon-link:var(--bi-primary-50)}
package/package.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "@bi-digital/css",
3
+ "version": "0.0.0-experimental-857aeae",
4
+ "description": "CSS for the BI Design System",
5
+ "author": "BI Digital",
6
+ "license": "ISC",
7
+ "type": "module",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "main": "./dist/index.css",
12
+ "exports": {
13
+ ".": "./dist/index.css",
14
+ "./dist/*": "./dist/*"
15
+ },
16
+ "files": [
17
+ "/dist"
18
+ ],
19
+ "devDependencies": {
20
+ "browserslist": "^4.24.4",
21
+ "lightningcss": "^1.29.3",
22
+ "modern-normalize": "^3.0.1",
23
+ "@bi-digital/tokens": "0.0.0-experimental-857aeae"
24
+ },
25
+ "scripts": {
26
+ "build": "node config.js",
27
+ "dev": "node --watch-path=./src config.js",
28
+ "lint": "eslint ."
29
+ }
30
+ }
package/readme.md ADDED
@@ -0,0 +1,63 @@
1
+ # @bi-digital/css
2
+
3
+ CSS for BI's design system.
4
+
5
+ - CSS tokens
6
+ - Font loading
7
+ - Modern-normalize.css
8
+ - Print styling
9
+
10
+ This library is a requirement when using the web-components (`bi-web-components`), but can also be used elsewhere.
11
+
12
+ ## Usage
13
+
14
+ In `.css`-files:
15
+
16
+ ```css
17
+ @import '@bi-digital/css';
18
+ ```
19
+
20
+ In `.jsx`/`.tsx`-files:
21
+
22
+ ```ts
23
+ import '@bi-digital/css';
24
+ ```
25
+
26
+ CDN:
27
+
28
+ ```html
29
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/index.min.css"></script>
30
+ ```
31
+
32
+ We recommend replacing `latest` with a specific version to avoid errors when the library is updated.
33
+
34
+ ### Specific styles
35
+
36
+ You can choose to only import some of the styles:
37
+
38
+ ```css
39
+ @import '@bi-digital/css/dist/baseline.css';
40
+ @import '@bi-digital/css/dist/fonts.css';
41
+ @import '@bi-digital/css/dist/print.css';
42
+ @import '@bi-digital/css/dist/reset.css';
43
+ @import '@bi-digital/css/dist/tokens.css';
44
+ ```
45
+
46
+ ### Minified
47
+
48
+ All the CSS-files have minified equivalents. Most bundlers and frameworks handles this automatically, but this can be useful when loading the CSS from a CDN or in other solutions that don't run post-processing on the CSS.
49
+
50
+ ```css
51
+ @import '@bi-digital/css/dist/index.min.css';
52
+ ```
53
+
54
+ ### VSCode-extensions
55
+
56
+ For users of VSCode, you can use the extension "Css Custom Properties" (`Tock.vscode-css-custom-properties`) for autocomplete of tokens. You need to add the following settings:
57
+
58
+ ```json
59
+ {
60
+ "cssCustomProperties.files": ["@bi-digital/**/tokens.css"],
61
+ "cssCustomProperties.languages": ["css", "scss"]
62
+ }
63
+ ```