@bi-digital/css 0.4.2 → 0.6.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 (22) 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/chip.css +182 -95
  7. package/dist/components/details.css +1 -1
  8. package/dist/components/dialog.css +3 -3
  9. package/dist/components/dropdown.css +3 -3
  10. package/dist/components/field.css +7 -37
  11. package/dist/components/filter-group.css +3 -3
  12. package/dist/components/input.css +11 -39
  13. package/dist/components/label.css +1 -5
  14. package/dist/components/popover.css +3 -3
  15. package/dist/components/spinner.css +3 -3
  16. package/dist/components/validation-message.css +1 -5
  17. package/dist/components.css +310 -238
  18. package/dist/index.css +61 -224
  19. package/dist/reset.css +2 -14
  20. package/dist/salesforce.css +367 -441
  21. package/dist/tokens.css +57 -203
  22. package/package.json +3 -3
package/dist/tokens.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :root, :host {
2
2
  --bi-basic-key: #000;
3
3
  --bi-basic-white: #fff;
4
4
  --bi-neutral-0: #fafbfc;
@@ -36,7 +36,7 @@
36
36
  --bi-primary-95: #002341;
37
37
  --bi-primary-100: #001932;
38
38
  --bi-secondary-0: #fffbeb;
39
- --bi-secondary-5: #fcf6df;
39
+ --bi-secondary-5: #fff7d5;
40
40
  --bi-secondary-10: #fff2bf;
41
41
  --bi-secondary-15: #ffea95;
42
42
  --bi-secondary-20: #ffe680;
@@ -138,6 +138,7 @@
138
138
  --bi-scale-12x: 3rem;
139
139
  --bi-scale-14x: 3.5rem;
140
140
  --bi-scale-16x: 4rem;
141
+ --bi-scale-18x: 4.5rem;
141
142
  --bi-scale-20x: 5rem;
142
143
  --bi-scale-24x: 6rem;
143
144
  --bi-scale-32x: 8rem;
@@ -148,23 +149,26 @@
148
149
  --bi-scale-64x: 16rem;
149
150
  --bi-scale-80x: 20rem;
150
151
  --bi-scale-max: 624.938rem;
151
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
152
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
153
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
154
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
155
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
156
- --bi-stroke-default: .09375rem;
157
- --bi-elevation-25: rgba(38, 51, 63, .15);
158
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
159
- --bi-states-hover-light: rgba(255, 255, 255, .1);
160
- --bi-states-press-dark: rgba(38, 51, 63, .15);
161
- --bi-states-press-light: rgba(255, 255, 255, .15);
152
+ --bi-opacity-dark-80: #26333f33;
153
+ --bi-opacity-dark-50: #26333f80;
154
+ --bi-opacity-light-100: #fff0;
155
+ --bi-opacity-light-80: #fff3;
156
+ --bi-opacity-light-50: #ffffff80;
157
+ --bi-stroke-medium: .09375rem;
158
+ --bi-elevation-25: #26333f26;
159
+ --bi-font-family-plain: "museo-sans", Arial, sans-serif;
160
+ --bi-font-family-brand: "museo-slab", serif;
161
+ --bi-font-weight-bold: 700;
162
+ --bi-font-weight-regular: 500;
163
+ --bi-font-color-secondary-dark-background-2: #ffffffb3;
164
+ --bi-font-color-disabled-dark-background: #ffffffb3;
165
+ --bi-states-hover-dark: #26333f1a;
166
+ --bi-states-hover-light: #ffffff1a;
167
+ --bi-states-press-dark: #26333f26;
168
+ --bi-states-press-light: #ffffff26;
162
169
  --bi-stroke-none: var(--bi-scale-0);
163
170
  --bi-stroke-thin: var(--bi-scale-0-25x);
164
171
  --bi-stroke-thick: var(--bi-scale-0-50x);
165
- --bi-stroke-color-1: var(--bi-neutral-15);
166
- --bi-stroke-color-2: var(--bi-neutral-25);
167
- --bi-stroke-color-3: var(--bi-neutral-50);
168
172
  --bi-radius-none: var(--bi-scale-0);
169
173
  --bi-radius-small: var(--bi-scale-0-50x);
170
174
  --bi-radius-medium: var(--bi-scale-1x);
@@ -177,195 +181,45 @@
177
181
  --bi-icon-large: var(--bi-scale-8x);
178
182
  --bi-icon-xl: var(--bi-scale-10x);
179
183
  --bi-icon-2xl: var(--bi-scale-11x);
180
- --bi-icon-primary: var(--bi-neutral-90);
181
- --bi-icon-secondary: var(--bi-neutral-60);
182
- --bi-icon-disabled: var(--bi-neutral-50);
183
- --bi-icon-link: var(--bi-primary-50);
184
- --bi-layout-navbar-height: var(--bi-scale-16x);
185
- }
186
-
187
- :host {
188
- --bi-basic-key: #000;
189
- --bi-basic-white: #fff;
190
- --bi-neutral-0: #fafbfc;
191
- --bi-neutral-5: #f5f7fa;
192
- --bi-neutral-10: #e4e8ed;
193
- --bi-neutral-15: #d5dde4;
194
- --bi-neutral-20: #c8d1db;
195
- --bi-neutral-25: #bac6d2;
196
- --bi-neutral-30: #acbbca;
197
- --bi-neutral-40: #90a3b7;
198
- --bi-neutral-50: #597694;
199
- --bi-neutral-60: #475e75;
200
- --bi-neutral-70: #3e5266;
201
- --bi-neutral-75: #344557;
202
- --bi-neutral-80: #303f4f;
203
- --bi-neutral-85: #2b3947;
204
- --bi-neutral-90: #26333f;
205
- --bi-neutral-95: #222d38;
206
- --bi-neutral-100: #171f26;
207
- --bi-primary-0: #ebf3ff;
208
- --bi-primary-5: #d9e6f9;
209
- --bi-primary-10: #c5d9f7;
210
- --bi-primary-15: #b2cdf4;
211
- --bi-primary-20: #9ec0f1;
212
- --bi-primary-25: #8bb3ee;
213
- --bi-primary-30: #75a5f1;
214
- --bi-primary-40: #6196f4;
215
- --bi-primary-50: #0a64ff;
216
- --bi-primary-60: #0b4db4;
217
- --bi-primary-70: #0b49a1;
218
- --bi-primary-75: #0c468f;
219
- --bi-primary-80: #093f82;
220
- --bi-primary-85: #083a76;
221
- --bi-primary-90: #042f5b;
222
- --bi-primary-95: #002341;
223
- --bi-primary-100: #001932;
224
- --bi-secondary-0: #fffbeb;
225
- --bi-secondary-5: #fcf6df;
226
- --bi-secondary-10: #fff2bf;
227
- --bi-secondary-15: #ffea95;
228
- --bi-secondary-20: #ffe680;
229
- --bi-secondary-25: #ffe26a;
230
- --bi-secondary-30: #ffde55;
231
- --bi-secondary-40: #ffd52b;
232
- --bi-secondary-50: #ffcd00;
233
- --bi-secondary-60: #deb300;
234
- --bi-secondary-70: #bd9800;
235
- --bi-secondary-75: #9d7e00;
236
- --bi-secondary-80: #7c6400;
237
- --bi-secondary-85: #5b4900;
238
- --bi-secondary-90: #4a3c01;
239
- --bi-secondary-95: #3a2f00;
240
- --bi-secondary-100: #262000;
241
- --bi-info-0: #f3ebff;
242
- --bi-info-5: #e6d5ff;
243
- --bi-info-10: #d9bfff;
244
- --bi-info-15: #cdaaff;
245
- --bi-info-20: #c094ff;
246
- --bi-info-25: #b480ff;
247
- --bi-info-30: #a76aff;
248
- --bi-info-40: #822bff;
249
- --bi-info-50: #6900ff;
250
- --bi-info-60: #5c03dc;
251
- --bi-info-70: #4f05b9;
252
- --bi-info-75: #420896;
253
- --bi-info-80: #3b0984;
254
- --bi-info-85: #350a73;
255
- --bi-info-90: #2e0b61;
256
- --bi-info-95: #280d50;
257
- --bi-info-100: #1a0833;
258
- --bi-warning-0: #fffbeb;
259
- --bi-warning-5: #fff7d5;
260
- --bi-warning-10: #fff2bf;
261
- --bi-warning-15: #ffea95;
262
- --bi-warning-20: #ffe680;
263
- --bi-warning-25: #ffe26a;
264
- --bi-warning-30: #ffde55;
265
- --bi-warning-40: #ffd52b;
266
- --bi-warning-50: #ffcd00;
267
- --bi-warning-60: #deb300;
268
- --bi-warning-70: #bd9800;
269
- --bi-warning-75: #9d7e00;
270
- --bi-warning-80: #7c6400;
271
- --bi-warning-85: #5b4900;
272
- --bi-warning-90: #4a3c01;
273
- --bi-warning-95: #3a2f00;
274
- --bi-warning-100: #262000;
275
- --bi-success-0: #ebffeb;
276
- --bi-success-5: #d5f4d6;
277
- --bi-success-10: #bfeec2;
278
- --bi-success-15: #aae8ae;
279
- --bi-success-20: #95e299;
280
- --bi-success-25: #80dd85;
281
- --bi-success-30: #55d15c;
282
- --bi-success-40: #2bc634;
283
- --bi-success-50: #00ab0b;
284
- --bi-success-60: #04a30d;
285
- --bi-success-70: #078b0f;
286
- --bi-success-75: #0b7411;
287
- --bi-success-80: #0f5d13;
288
- --bi-success-85: #124515;
289
- --bi-success-90: #143a16;
290
- --bi-success-95: #162e17;
291
- --bi-success-100: #0f1f0f;
292
- --bi-alert-0: #fff1f0;
293
- --bi-alert-5: #ffe1df;
294
- --bi-alert-10: #ffd7d5;
295
- --bi-alert-15: #ffc3bf;
296
- --bi-alert-20: #ffafaa;
297
- --bi-alert-25: #ff8780;
298
- --bi-alert-30: #ff5f55;
299
- --bi-alert-40: #ff372b;
300
- --bi-alert-50: #ff0f00;
301
- --bi-alert-60: #e41100;
302
- --bi-alert-70: #c91300;
303
- --bi-alert-75: #ae1601;
304
- --bi-alert-80: #931801;
305
- --bi-alert-85: #731a15;
306
- --bi-alert-90: #6a1b16;
307
- --bi-alert-95: #5d1c18;
308
- --bi-alert-100: #280c0a;
309
- --bi-scale-0: 0;
310
- --bi-scale-0-25x: .0625rem;
311
- --bi-scale-0-50x: .125rem;
312
- --bi-scale-0-75x: .1875rem;
313
- --bi-scale-1x: .25rem;
314
- --bi-scale-1-5x: .375rem;
315
- --bi-scale-2x: .5rem;
316
- --bi-scale-3x: .75rem;
317
- --bi-scale-4x: 1rem;
318
- --bi-scale-5x: 1.25rem;
319
- --bi-scale-6x: 1.5rem;
320
- --bi-scale-8x: 2rem;
321
- --bi-scale-9x: 2.25rem;
322
- --bi-scale-10x: 2.5rem;
323
- --bi-scale-11x: 2.75rem;
324
- --bi-scale-12x: 3rem;
325
- --bi-scale-14x: 3.5rem;
326
- --bi-scale-16x: 4rem;
327
- --bi-scale-20x: 5rem;
328
- --bi-scale-24x: 6rem;
329
- --bi-scale-32x: 8rem;
330
- --bi-scale-36x: 9rem;
331
- --bi-scale-40x: 10rem;
332
- --bi-scale-48x: 12rem;
333
- --bi-scale-56x: 14rem;
334
- --bi-scale-64x: 16rem;
335
- --bi-scale-80x: 20rem;
336
- --bi-scale-max: 624.938rem;
337
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
338
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
339
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
340
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
341
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
342
- --bi-stroke-default: .09375rem;
343
- --bi-elevation-25: rgba(38, 51, 63, .15);
344
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
345
- --bi-states-hover-light: rgba(255, 255, 255, .1);
346
- --bi-states-press-dark: rgba(38, 51, 63, .15);
347
- --bi-states-press-light: rgba(255, 255, 255, .15);
348
- --bi-stroke-none: var(--bi-scale-0);
349
- --bi-stroke-thin: var(--bi-scale-0-25x);
350
- --bi-stroke-thick: var(--bi-scale-0-50x);
351
- --bi-stroke-color-1: var(--bi-neutral-15);
352
- --bi-stroke-color-2: var(--bi-neutral-25);
353
- --bi-stroke-color-3: var(--bi-neutral-50);
354
- --bi-radius-none: var(--bi-scale-0);
355
- --bi-radius-small: var(--bi-scale-0-50x);
356
- --bi-radius-medium: var(--bi-scale-1x);
357
- --bi-radius-large: var(--bi-scale-2x);
358
- --bi-radius-xl: var(--bi-scale-3x);
359
- --bi-radius-brand: var(--bi-scale-12x);
360
- --bi-radius-full: var(--bi-scale-max);
361
- --bi-icon-small: var(--bi-scale-5x);
362
- --bi-icon-medium: var(--bi-scale-6x);
363
- --bi-icon-large: var(--bi-scale-8x);
364
- --bi-icon-xl: var(--bi-scale-10x);
365
- --bi-icon-2xl: var(--bi-scale-11x);
366
- --bi-icon-primary: var(--bi-neutral-90);
184
+ --bi-icon-primary: var(--bi-neutral-95);
367
185
  --bi-icon-secondary: var(--bi-neutral-60);
368
186
  --bi-icon-disabled: var(--bi-neutral-50);
369
187
  --bi-icon-link: var(--bi-primary-50);
188
+ --bi-font-color-primary: var(--bi-neutral-95);
189
+ --bi-font-color-secondary: var(--bi-neutral-60);
190
+ --bi-font-color-disabled: var(--bi-neutral-50);
191
+ --bi-font-color-accent: var(--bi-primary-60);
192
+ --bi-font-color-link: var(--bi-primary-50);
193
+ --bi-font-color-primary-dark-background: var(--bi-basic-white);
194
+ --bi-font-color-accent-dark-background: var(--bi-primary-20);
370
195
  --bi-layout-navbar-height: var(--bi-scale-16x);
196
+ --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
197
+ --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
198
+ --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
199
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
200
+ --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
201
+ --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
202
+ --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
203
+ --bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem / 1.6875rem var(--bi-font-family-plain);
204
+ --bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem / 1.4375rem var(--bi-font-family-plain);
205
+ --bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem / 1.25rem var(--bi-font-family-plain);
206
+ --bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem / 1.125rem var(--bi-font-family-plain);
207
+ --bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem / 1rem var(--bi-font-family-plain);
208
+ --bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem / 2.25rem var(--bi-font-family-plain);
209
+ --bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-plain);
210
+ --bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem / 1.6875rem var(--bi-font-family-plain);
211
+ --bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem / 1.4375rem var(--bi-font-family-plain);
212
+ --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
213
+ --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
214
+ --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
215
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
216
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
217
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
218
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
219
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
220
+ --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
+ --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
222
+ --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
223
+ --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
224
+ --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
371
225
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.4.2",
4
+ "version": "0.6.0",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -30,12 +30,12 @@
30
30
  "/dist"
31
31
  ],
32
32
  "devDependencies": {
33
- "browserslist": "^4.26.2",
33
+ "browserslist": "^4.27.0",
34
34
  "glob": "^11.0.3",
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
37
  "rimraf": "^6.0.1",
38
- "@bi-digital/tokens": "0.4.2"
38
+ "@bi-digital/tokens": "0.6.0"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",