@bi-digital/css 0.4.2 → 0.5.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 (21) hide show
  1. package/dist/baseline.css +2 -7
  2. package/dist/components/alert.css +24 -0
  3. package/dist/components/button.css +5 -13
  4. package/dist/components/card.css +62 -27
  5. package/dist/components/checkbox-subsection.css +1 -1
  6. package/dist/components/details.css +1 -1
  7. package/dist/components/dialog.css +3 -3
  8. package/dist/components/dropdown.css +3 -3
  9. package/dist/components/field.css +7 -37
  10. package/dist/components/filter-group.css +3 -3
  11. package/dist/components/input.css +11 -39
  12. package/dist/components/label.css +1 -5
  13. package/dist/components/popover.css +3 -3
  14. package/dist/components/spinner.css +3 -3
  15. package/dist/components/validation-message.css +1 -5
  16. package/dist/components.css +128 -143
  17. package/dist/index.css +61 -224
  18. package/dist/reset.css +2 -14
  19. package/dist/salesforce.css +185 -346
  20. package/dist/tokens.css +57 -203
  21. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
- :root {
2
+ :root, :host {
3
3
  --bi-basic-key: #000;
4
4
  --bi-basic-white: #fff;
5
5
  --bi-neutral-0: #fafbfc;
@@ -37,7 +37,7 @@
37
37
  --bi-primary-95: #002341;
38
38
  --bi-primary-100: #001932;
39
39
  --bi-secondary-0: #fffbeb;
40
- --bi-secondary-5: #fcf6df;
40
+ --bi-secondary-5: #fff7d5;
41
41
  --bi-secondary-10: #fff2bf;
42
42
  --bi-secondary-15: #ffea95;
43
43
  --bi-secondary-20: #ffe680;
@@ -139,6 +139,7 @@
139
139
  --bi-scale-12x: 3rem;
140
140
  --bi-scale-14x: 3.5rem;
141
141
  --bi-scale-16x: 4rem;
142
+ --bi-scale-18x: 4.5rem;
142
143
  --bi-scale-20x: 5rem;
143
144
  --bi-scale-24x: 6rem;
144
145
  --bi-scale-32x: 8rem;
@@ -149,23 +150,26 @@
149
150
  --bi-scale-64x: 16rem;
150
151
  --bi-scale-80x: 20rem;
151
152
  --bi-scale-max: 624.938rem;
152
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
153
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
154
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
155
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
156
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
157
- --bi-stroke-default: .09375rem;
158
- --bi-elevation-25: rgba(38, 51, 63, .15);
159
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
160
- --bi-states-hover-light: rgba(255, 255, 255, .1);
161
- --bi-states-press-dark: rgba(38, 51, 63, .15);
162
- --bi-states-press-light: rgba(255, 255, 255, .15);
153
+ --bi-opacity-dark-80: #26333f33;
154
+ --bi-opacity-dark-50: #26333f80;
155
+ --bi-opacity-light-100: #fff0;
156
+ --bi-opacity-light-80: #fff3;
157
+ --bi-opacity-light-50: #ffffff80;
158
+ --bi-stroke-medium: .09375rem;
159
+ --bi-elevation-25: #26333f26;
160
+ --bi-font-family-plain: "museo-sans", Arial, sans-serif;
161
+ --bi-font-family-brand: "museo-slab", serif;
162
+ --bi-font-weight-bold: 700;
163
+ --bi-font-weight-regular: 500;
164
+ --bi-font-color-secondary-dark-background-2: #ffffffb3;
165
+ --bi-font-color-disabled-dark-background: #ffffffb3;
166
+ --bi-states-hover-dark: #26333f1a;
167
+ --bi-states-hover-light: #ffffff1a;
168
+ --bi-states-press-dark: #26333f26;
169
+ --bi-states-press-light: #ffffff26;
163
170
  --bi-stroke-none: var(--bi-scale-0);
164
171
  --bi-stroke-thin: var(--bi-scale-0-25x);
165
172
  --bi-stroke-thick: var(--bi-scale-0-50x);
166
- --bi-stroke-color-1: var(--bi-neutral-15);
167
- --bi-stroke-color-2: var(--bi-neutral-25);
168
- --bi-stroke-color-3: var(--bi-neutral-50);
169
173
  --bi-radius-none: var(--bi-scale-0);
170
174
  --bi-radius-small: var(--bi-scale-0-50x);
171
175
  --bi-radius-medium: var(--bi-scale-1x);
@@ -178,197 +182,47 @@
178
182
  --bi-icon-large: var(--bi-scale-8x);
179
183
  --bi-icon-xl: var(--bi-scale-10x);
180
184
  --bi-icon-2xl: var(--bi-scale-11x);
181
- --bi-icon-primary: var(--bi-neutral-90);
182
- --bi-icon-secondary: var(--bi-neutral-60);
183
- --bi-icon-disabled: var(--bi-neutral-50);
184
- --bi-icon-link: var(--bi-primary-50);
185
- --bi-layout-navbar-height: var(--bi-scale-16x);
186
- }
187
-
188
- :host {
189
- --bi-basic-key: #000;
190
- --bi-basic-white: #fff;
191
- --bi-neutral-0: #fafbfc;
192
- --bi-neutral-5: #f5f7fa;
193
- --bi-neutral-10: #e4e8ed;
194
- --bi-neutral-15: #d5dde4;
195
- --bi-neutral-20: #c8d1db;
196
- --bi-neutral-25: #bac6d2;
197
- --bi-neutral-30: #acbbca;
198
- --bi-neutral-40: #90a3b7;
199
- --bi-neutral-50: #597694;
200
- --bi-neutral-60: #475e75;
201
- --bi-neutral-70: #3e5266;
202
- --bi-neutral-75: #344557;
203
- --bi-neutral-80: #303f4f;
204
- --bi-neutral-85: #2b3947;
205
- --bi-neutral-90: #26333f;
206
- --bi-neutral-95: #222d38;
207
- --bi-neutral-100: #171f26;
208
- --bi-primary-0: #ebf3ff;
209
- --bi-primary-5: #d9e6f9;
210
- --bi-primary-10: #c5d9f7;
211
- --bi-primary-15: #b2cdf4;
212
- --bi-primary-20: #9ec0f1;
213
- --bi-primary-25: #8bb3ee;
214
- --bi-primary-30: #75a5f1;
215
- --bi-primary-40: #6196f4;
216
- --bi-primary-50: #0a64ff;
217
- --bi-primary-60: #0b4db4;
218
- --bi-primary-70: #0b49a1;
219
- --bi-primary-75: #0c468f;
220
- --bi-primary-80: #093f82;
221
- --bi-primary-85: #083a76;
222
- --bi-primary-90: #042f5b;
223
- --bi-primary-95: #002341;
224
- --bi-primary-100: #001932;
225
- --bi-secondary-0: #fffbeb;
226
- --bi-secondary-5: #fcf6df;
227
- --bi-secondary-10: #fff2bf;
228
- --bi-secondary-15: #ffea95;
229
- --bi-secondary-20: #ffe680;
230
- --bi-secondary-25: #ffe26a;
231
- --bi-secondary-30: #ffde55;
232
- --bi-secondary-40: #ffd52b;
233
- --bi-secondary-50: #ffcd00;
234
- --bi-secondary-60: #deb300;
235
- --bi-secondary-70: #bd9800;
236
- --bi-secondary-75: #9d7e00;
237
- --bi-secondary-80: #7c6400;
238
- --bi-secondary-85: #5b4900;
239
- --bi-secondary-90: #4a3c01;
240
- --bi-secondary-95: #3a2f00;
241
- --bi-secondary-100: #262000;
242
- --bi-info-0: #f3ebff;
243
- --bi-info-5: #e6d5ff;
244
- --bi-info-10: #d9bfff;
245
- --bi-info-15: #cdaaff;
246
- --bi-info-20: #c094ff;
247
- --bi-info-25: #b480ff;
248
- --bi-info-30: #a76aff;
249
- --bi-info-40: #822bff;
250
- --bi-info-50: #6900ff;
251
- --bi-info-60: #5c03dc;
252
- --bi-info-70: #4f05b9;
253
- --bi-info-75: #420896;
254
- --bi-info-80: #3b0984;
255
- --bi-info-85: #350a73;
256
- --bi-info-90: #2e0b61;
257
- --bi-info-95: #280d50;
258
- --bi-info-100: #1a0833;
259
- --bi-warning-0: #fffbeb;
260
- --bi-warning-5: #fff7d5;
261
- --bi-warning-10: #fff2bf;
262
- --bi-warning-15: #ffea95;
263
- --bi-warning-20: #ffe680;
264
- --bi-warning-25: #ffe26a;
265
- --bi-warning-30: #ffde55;
266
- --bi-warning-40: #ffd52b;
267
- --bi-warning-50: #ffcd00;
268
- --bi-warning-60: #deb300;
269
- --bi-warning-70: #bd9800;
270
- --bi-warning-75: #9d7e00;
271
- --bi-warning-80: #7c6400;
272
- --bi-warning-85: #5b4900;
273
- --bi-warning-90: #4a3c01;
274
- --bi-warning-95: #3a2f00;
275
- --bi-warning-100: #262000;
276
- --bi-success-0: #ebffeb;
277
- --bi-success-5: #d5f4d6;
278
- --bi-success-10: #bfeec2;
279
- --bi-success-15: #aae8ae;
280
- --bi-success-20: #95e299;
281
- --bi-success-25: #80dd85;
282
- --bi-success-30: #55d15c;
283
- --bi-success-40: #2bc634;
284
- --bi-success-50: #00ab0b;
285
- --bi-success-60: #04a30d;
286
- --bi-success-70: #078b0f;
287
- --bi-success-75: #0b7411;
288
- --bi-success-80: #0f5d13;
289
- --bi-success-85: #124515;
290
- --bi-success-90: #143a16;
291
- --bi-success-95: #162e17;
292
- --bi-success-100: #0f1f0f;
293
- --bi-alert-0: #fff1f0;
294
- --bi-alert-5: #ffe1df;
295
- --bi-alert-10: #ffd7d5;
296
- --bi-alert-15: #ffc3bf;
297
- --bi-alert-20: #ffafaa;
298
- --bi-alert-25: #ff8780;
299
- --bi-alert-30: #ff5f55;
300
- --bi-alert-40: #ff372b;
301
- --bi-alert-50: #ff0f00;
302
- --bi-alert-60: #e41100;
303
- --bi-alert-70: #c91300;
304
- --bi-alert-75: #ae1601;
305
- --bi-alert-80: #931801;
306
- --bi-alert-85: #731a15;
307
- --bi-alert-90: #6a1b16;
308
- --bi-alert-95: #5d1c18;
309
- --bi-alert-100: #280c0a;
310
- --bi-scale-0: 0;
311
- --bi-scale-0-25x: .0625rem;
312
- --bi-scale-0-50x: .125rem;
313
- --bi-scale-0-75x: .1875rem;
314
- --bi-scale-1x: .25rem;
315
- --bi-scale-1-5x: .375rem;
316
- --bi-scale-2x: .5rem;
317
- --bi-scale-3x: .75rem;
318
- --bi-scale-4x: 1rem;
319
- --bi-scale-5x: 1.25rem;
320
- --bi-scale-6x: 1.5rem;
321
- --bi-scale-8x: 2rem;
322
- --bi-scale-9x: 2.25rem;
323
- --bi-scale-10x: 2.5rem;
324
- --bi-scale-11x: 2.75rem;
325
- --bi-scale-12x: 3rem;
326
- --bi-scale-14x: 3.5rem;
327
- --bi-scale-16x: 4rem;
328
- --bi-scale-20x: 5rem;
329
- --bi-scale-24x: 6rem;
330
- --bi-scale-32x: 8rem;
331
- --bi-scale-36x: 9rem;
332
- --bi-scale-40x: 10rem;
333
- --bi-scale-48x: 12rem;
334
- --bi-scale-56x: 14rem;
335
- --bi-scale-64x: 16rem;
336
- --bi-scale-80x: 20rem;
337
- --bi-scale-max: 624.938rem;
338
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
339
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
340
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
341
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
342
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
343
- --bi-stroke-default: .09375rem;
344
- --bi-elevation-25: rgba(38, 51, 63, .15);
345
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
346
- --bi-states-hover-light: rgba(255, 255, 255, .1);
347
- --bi-states-press-dark: rgba(38, 51, 63, .15);
348
- --bi-states-press-light: rgba(255, 255, 255, .15);
349
- --bi-stroke-none: var(--bi-scale-0);
350
- --bi-stroke-thin: var(--bi-scale-0-25x);
351
- --bi-stroke-thick: var(--bi-scale-0-50x);
352
- --bi-stroke-color-1: var(--bi-neutral-15);
353
- --bi-stroke-color-2: var(--bi-neutral-25);
354
- --bi-stroke-color-3: var(--bi-neutral-50);
355
- --bi-radius-none: var(--bi-scale-0);
356
- --bi-radius-small: var(--bi-scale-0-50x);
357
- --bi-radius-medium: var(--bi-scale-1x);
358
- --bi-radius-large: var(--bi-scale-2x);
359
- --bi-radius-xl: var(--bi-scale-3x);
360
- --bi-radius-brand: var(--bi-scale-12x);
361
- --bi-radius-full: var(--bi-scale-max);
362
- --bi-icon-small: var(--bi-scale-5x);
363
- --bi-icon-medium: var(--bi-scale-6x);
364
- --bi-icon-large: var(--bi-scale-8x);
365
- --bi-icon-xl: var(--bi-scale-10x);
366
- --bi-icon-2xl: var(--bi-scale-11x);
367
- --bi-icon-primary: var(--bi-neutral-90);
185
+ --bi-icon-primary: var(--bi-neutral-95);
368
186
  --bi-icon-secondary: var(--bi-neutral-60);
369
187
  --bi-icon-disabled: var(--bi-neutral-50);
370
188
  --bi-icon-link: var(--bi-primary-50);
189
+ --bi-font-color-primary: var(--bi-neutral-95);
190
+ --bi-font-color-secondary: var(--bi-neutral-60);
191
+ --bi-font-color-disabled: var(--bi-neutral-50);
192
+ --bi-font-color-accent: var(--bi-primary-60);
193
+ --bi-font-color-link: var(--bi-primary-50);
194
+ --bi-font-color-primary-dark-background: var(--bi-basic-white);
195
+ --bi-font-color-accent-dark-background: var(--bi-primary-20);
371
196
  --bi-layout-navbar-height: var(--bi-scale-16x);
197
+ --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
198
+ --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
199
+ --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
200
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
201
+ --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
202
+ --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
203
+ --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
204
+ --bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem / 1.6875rem var(--bi-font-family-plain);
205
+ --bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem / 1.4375rem var(--bi-font-family-plain);
206
+ --bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem / 1.25rem var(--bi-font-family-plain);
207
+ --bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem / 1.125rem var(--bi-font-family-plain);
208
+ --bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem / 1rem var(--bi-font-family-plain);
209
+ --bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem / 2.25rem var(--bi-font-family-plain);
210
+ --bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-plain);
211
+ --bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem / 1.6875rem var(--bi-font-family-plain);
212
+ --bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem / 1.4375rem var(--bi-font-family-plain);
213
+ --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
214
+ --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
215
+ --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
216
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
217
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
218
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
219
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
220
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
221
+ --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
222
+ --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
223
+ --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
224
+ --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
225
+ --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
372
226
  }
373
227
 
374
228
  *, :before, :after {
@@ -378,7 +232,7 @@
378
232
  html {
379
233
  -webkit-text-size-adjust: 100%;
380
234
  tab-size: 4;
381
- font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
235
+ font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
382
236
  line-height: 1.15;
383
237
  }
384
238
 
@@ -425,19 +279,7 @@ button, input, optgroup, select, textarea {
425
279
  line-height: 1.15;
426
280
  }
427
281
 
428
- button {
429
- -webkit-appearance: button;
430
- }
431
-
432
- [type="button"] {
433
- -webkit-appearance: button;
434
- }
435
-
436
- [type="reset"] {
437
- -webkit-appearance: button;
438
- }
439
-
440
- [type="submit"] {
282
+ button, [type="button"], [type="reset"], [type="submit"] {
441
283
  -webkit-appearance: button;
442
284
  }
443
285
 
@@ -582,13 +424,8 @@ summary {
582
424
  }
583
425
  }
584
426
 
585
- body {
586
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
587
- line-height: 1.5;
588
- }
589
-
590
- :host {
591
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
427
+ body, :host {
428
+ font-family: museo-sans, Arial, sans-serif, system-ui;
592
429
  line-height: 1.5;
593
430
  }
594
431
 
package/dist/reset.css CHANGED
@@ -6,7 +6,7 @@
6
6
  html {
7
7
  -webkit-text-size-adjust: 100%;
8
8
  tab-size: 4;
9
- font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
9
+ font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
10
10
  line-height: 1.15;
11
11
  }
12
12
 
@@ -53,19 +53,7 @@ button, input, optgroup, select, textarea {
53
53
  line-height: 1.15;
54
54
  }
55
55
 
56
- button {
57
- -webkit-appearance: button;
58
- }
59
-
60
- [type="button"] {
61
- -webkit-appearance: button;
62
- }
63
-
64
- [type="reset"] {
65
- -webkit-appearance: button;
66
- }
67
-
68
- [type="submit"] {
56
+ button, [type="button"], [type="reset"], [type="submit"] {
69
57
  -webkit-appearance: button;
70
58
  }
71
59