@bi-digital/css 0.12.0 → 0.12.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 (9) hide show
  1. package/dist/components/card.css +12 -9
  2. package/dist/components/footer.css +2 -2
  3. package/dist/components/logo.css +1 -1
  4. package/dist/components/tabs.css +1 -1
  5. package/dist/components.css +16 -13
  6. package/dist/index.css +10 -10
  7. package/dist/salesforce.css +26 -23
  8. package/dist/tokens.css +10 -10
  9. package/package.json +2 -2
package/dist/components/card.css CHANGED
@@ -26,6 +26,10 @@
26
26
  flex-direction: row;
27
27
  display: flex;
28
28
 
29
+ @media (width < 768px) {
30
+ --bic-card-content-padding: var(--bi-scale-3x);
31
+ }
32
+
29
33
  &[data-orientation="horizontal"] {
30
34
  & > div:first-child {
31
35
  border-top-left-radius: var(--bic-card-border-radius);
@@ -39,11 +43,11 @@
39
43
 
40
44
  --bic-card-media-width: 15.75rem;
41
45
 
42
- @media (width < 1024px) {
46
+ @media (width < 1128px) {
43
47
  --bic-card-media-width: 14.5rem;
44
48
  }
45
49
 
46
- @media (width < 600px) {
50
+ @media (width < 768px) {
47
51
  --bic-card-media-width: 8.4375rem;
48
52
  }
49
53
  }
@@ -98,8 +102,7 @@
98
102
  overflow: hidden;
99
103
  }
100
104
 
101
- @media (width < 600px) {
102
- --bic-card-content-padding: var(--bi-scale-3x);
105
+ @media (width < 768px) {
103
106
  gap: var(--bi-scale-3x);
104
107
  }
105
108
  }
@@ -151,7 +154,7 @@
151
154
  background-color: var(--bic-card-actions-background-color);
152
155
  display: flex;
153
156
 
154
- @media (width < 600px) {
157
+ @media (width < 768px) {
155
158
  width: var(--bi-scale-11x);
156
159
  }
157
160
 
@@ -161,7 +164,7 @@
161
164
  --bic-button-size: var(--bi-scale-14x);
162
165
  flex: 1;
163
166
 
164
- @media (width < 600px) {
167
+ @media (width < 768px) {
165
168
  --bic-button-size: var(--bi-scale-11x);
166
169
  }
167
170
 
@@ -184,7 +187,7 @@
184
187
  color: var(--bic-card-header-label-color);
185
188
  margin: 0;
186
189
 
187
- @media (width < 600px) {
190
+ @media (width < 768px) {
188
191
  font: var(--bi-font-body-small);
189
192
  }
190
193
 
@@ -215,7 +218,7 @@
215
218
  display: -webkit-box;
216
219
  overflow: hidden;
217
220
 
218
- @media (width < 600px) {
221
+ @media (width < 768px) {
219
222
  font: var(--bi-font-title-bold-xs);
220
223
  }
221
224
  }
@@ -234,7 +237,7 @@
234
237
  width: 100%;
235
238
  display: block;
236
239
 
237
- @media (width < 600px) {
240
+ @media (width < 768px) {
238
241
  aspect-ratio: 3 / 2;
239
242
  }
240
243
  }
package/dist/components/footer.css CHANGED
@@ -83,7 +83,7 @@
83
83
  min-height: 58px;
84
84
  display: flex;
85
85
 
86
- @media (width < 600px) {
86
+ @media (width < 768px) {
87
87
  gap: var(--bi-scale-2x) var(--bi-scale-1x);
88
88
  }
89
89
 
@@ -118,7 +118,7 @@
118
118
  flex-wrap: wrap;
119
119
  display: flex;
120
120
 
121
- @media (width < 600px) {
121
+ @media (width < 768px) {
122
122
  gap: var(--bi-scale-2x);
123
123
  }
124
124
  }
package/dist/components/logo.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --bic-logo-height: var(--bi-scale-48x);
57
57
  }
58
58
 
59
- @media (width >= 795px) {
59
+ @media (width >= 768px) {
60
60
  &[data-international="true"] {
61
61
  &[data-vertical="true"] {
62
62
  background-image: var(--bic-logo-international-vertical);
package/dist/components/tabs.css CHANGED
@@ -101,7 +101,7 @@
101
101
  color: var(--bic-tabs-tab-color-selected);
102
102
 
103
103
  &:after {
104
- width: calc(100% - var(--bi-scale-6x));
104
+ width: 100%;
105
105
  }
106
106
  }
107
107
  }
package/dist/components.css CHANGED
@@ -352,6 +352,10 @@
352
352
  flex-direction: row;
353
353
  display: flex;
354
354
 
355
+ @media (width < 768px) {
356
+ --bic-card-content-padding: var(--bi-scale-3x);
357
+ }
358
+
355
359
  &[data-orientation="horizontal"] {
356
360
  & > div:first-child {
357
361
  border-top-left-radius: var(--bic-card-border-radius);
@@ -365,11 +369,11 @@
365
369
 
366
370
  --bic-card-media-width: 15.75rem;
367
371
 
368
- @media (width < 1024px) {
372
+ @media (width < 1128px) {
369
373
  --bic-card-media-width: 14.5rem;
370
374
  }
371
375
 
372
- @media (width < 600px) {
376
+ @media (width < 768px) {
373
377
  --bic-card-media-width: 8.4375rem;
374
378
  }
375
379
  }
@@ -424,8 +428,7 @@
424
428
  overflow: hidden;
425
429
  }
426
430
 
427
- @media (width < 600px) {
428
- --bic-card-content-padding: var(--bi-scale-3x);
431
+ @media (width < 768px) {
429
432
  gap: var(--bi-scale-3x);
430
433
  }
431
434
  }
@@ -477,7 +480,7 @@
477
480
  background-color: var(--bic-card-actions-background-color);
478
481
  display: flex;
479
482
 
480
- @media (width < 600px) {
483
+ @media (width < 768px) {
481
484
  width: var(--bi-scale-11x);
482
485
  }
483
486
 
@@ -487,7 +490,7 @@
487
490
  --bic-button-size: var(--bi-scale-14x);
488
491
  flex: 1;
489
492
 
490
- @media (width < 600px) {
493
+ @media (width < 768px) {
491
494
  --bic-button-size: var(--bi-scale-11x);
492
495
  }
493
496
 
@@ -510,7 +513,7 @@
510
513
  color: var(--bic-card-header-label-color);
511
514
  margin: 0;
512
515
 
513
- @media (width < 600px) {
516
+ @media (width < 768px) {
514
517
  font: var(--bi-font-body-small);
515
518
  }
516
519
 
@@ -541,7 +544,7 @@
541
544
  display: -webkit-box;
542
545
  overflow: hidden;
543
546
 
544
- @media (width < 600px) {
547
+ @media (width < 768px) {
545
548
  font: var(--bi-font-title-bold-xs);
546
549
  }
547
550
  }
@@ -560,7 +563,7 @@
560
563
  width: 100%;
561
564
  display: block;
562
565
 
563
- @media (width < 600px) {
566
+ @media (width < 768px) {
564
567
  aspect-ratio: 3 / 2;
565
568
  }
566
569
  }
@@ -1747,7 +1750,7 @@ body:has(.bi-dialog:modal) {
1747
1750
  min-height: 58px;
1748
1751
  display: flex;
1749
1752
 
1750
- @media (width < 600px) {
1753
+ @media (width < 768px) {
1751
1754
  gap: var(--bi-scale-2x) var(--bi-scale-1x);
1752
1755
  }
1753
1756
 
@@ -1782,7 +1785,7 @@ body:has(.bi-dialog:modal) {
1782
1785
  flex-wrap: wrap;
1783
1786
  display: flex;
1784
1787
 
1785
- @media (width < 600px) {
1788
+ @media (width < 768px) {
1786
1789
  gap: var(--bi-scale-2x);
1787
1790
  }
1788
1791
  }
@@ -1977,7 +1980,7 @@ svg {
1977
1980
  --bic-logo-height: var(--bi-scale-48x);
1978
1981
  }
1979
1982
 
1980
- @media (width >= 795px) {
1983
+ @media (width >= 768px) {
1981
1984
  &[data-international="true"] {
1982
1985
  &[data-vertical="true"] {
1983
1986
  background-image: var(--bic-logo-international-vertical);
@@ -2348,7 +2351,7 @@ svg {
2348
2351
  color: var(--bic-tabs-tab-color-selected);
2349
2352
 
2350
2353
  &:after {
2351
- width: calc(100% - var(--bi-scale-6x));
2354
+ width: 100%;
2352
2355
  }
2353
2356
  }
2354
2357
  }
package/dist/index.css CHANGED
@@ -154,15 +154,15 @@
154
154
  --bi-scale-84x: 21rem;
155
155
  --bi-scale-128x: 32rem;
156
156
  --bi-scale-max: 624.938rem;
157
+ --bi-color-stroke-basic-subtle: #0000001a;
158
+ --bi-color-stroke-basic: #0003;
159
+ --bi-color-stroke-basic-strong: #0000004d;
160
+ --bi-color-stroke-basic-contrast: #00000080;
157
161
  --bi-color-primary-text-secondary: #042f5bb3;
158
162
  --bi-color-info-text-secondary: #2e0b61b3;
159
163
  --bi-color-warning-text-secondary: #4a3c01b3;
160
164
  --bi-color-success-text-secondary: #143a16b3;
161
165
  --bi-color-alert-text-secondary: #6a1b16b3;
162
- --bi-color-stroke-basic-subtle: #0000001a;
163
- --bi-color-stroke-basic: #0003;
164
- --bi-color-stroke-basic-strong: #0000004d;
165
- --bi-color-stroke-basic-contrast: #00000080;
166
166
  --bi-states-hover: #26333f1a;
167
167
  --bi-states-press: #26333f26;
168
168
  --bi-states-hover-dark: #26333f1a;
@@ -477,6 +477,10 @@
477
477
  }
478
478
 
479
479
  [data-color-scheme="dark"] {
480
+ --bi-color-stroke-basic-subtle: #ffffff1a;
481
+ --bi-color-stroke-basic: #fff3;
482
+ --bi-color-stroke-basic-strong: #ffffff4d;
483
+ --bi-color-stroke-basic-contrast: #fff6;
480
484
  --bi-color-neutral-background: var(--bi-neutral-100);
481
485
  --bi-color-neutral-surface-subtle: var(--bi-neutral-95);
482
486
  --bi-color-neutral-surface: var(--bi-neutral-90);
@@ -509,8 +513,8 @@
509
513
  --bi-color-primary-text-secondary: #ffffffb2;
510
514
  --bi-color-primary-text-subtle: var(--bi-primary-10);
511
515
  --bi-color-primary-text-accent: var(--bi-primary-30);
512
- --bi-color-primary-contrast: var(--bi-primary-20);
513
- --bi-color-primary-contrast-hover: var(--bi-primary-30);
516
+ --bi-color-primary-contrast: var(--bi-primary-30);
517
+ --bi-color-primary-contrast-hover: var(--bi-primary-20);
514
518
  --bi-color-primary-fill: var(--bi-primary-50);
515
519
  --bi-color-primary-on-fill: var(--bi-basic-white);
516
520
  --bi-color-info-background: var(--bi-info-100);
@@ -585,10 +589,6 @@
585
589
  --bi-color-alert-contrast-hover: var(--bi-alert-15);
586
590
  --bi-color-alert-fill: var(--bi-alert-60);
587
591
  --bi-color-alert-on-fill: var(--bi-basic-white);
588
- --bi-color-stroke-basic-subtle: #ffffff1a;
589
- --bi-color-stroke-basic: #fff3;
590
- --bi-color-stroke-basic-strong: #ffffff4d;
591
- --bi-color-stroke-basic-contrast: #fff6;
592
592
  --bi-states-hover: #ffffff1a;
593
593
  --bi-states-press: #ffffff26;
594
594
  --bi-states-focus: var(--bi-primary-30);
package/dist/salesforce.css CHANGED
@@ -153,15 +153,15 @@
153
153
  --bi-scale-84x: 21rem;
154
154
  --bi-scale-128x: 32rem;
155
155
  --bi-scale-max: 624.938rem;
156
+ --bi-color-stroke-basic-subtle: #0000001a;
157
+ --bi-color-stroke-basic: #0003;
158
+ --bi-color-stroke-basic-strong: #0000004d;
159
+ --bi-color-stroke-basic-contrast: #00000080;
156
160
  --bi-color-primary-text-secondary: #042f5bb3;
157
161
  --bi-color-info-text-secondary: #2e0b61b3;
158
162
  --bi-color-warning-text-secondary: #4a3c01b3;
159
163
  --bi-color-success-text-secondary: #143a16b3;
160
164
  --bi-color-alert-text-secondary: #6a1b16b3;
161
- --bi-color-stroke-basic-subtle: #0000001a;
162
- --bi-color-stroke-basic: #0003;
163
- --bi-color-stroke-basic-strong: #0000004d;
164
- --bi-color-stroke-basic-contrast: #00000080;
165
165
  --bi-states-hover: #26333f1a;
166
166
  --bi-states-press: #26333f26;
167
167
  --bi-states-hover-dark: #26333f1a;
@@ -476,6 +476,10 @@
476
476
  }
477
477
 
478
478
  [data-color-scheme="dark"] {
479
+ --bi-color-stroke-basic-subtle: #ffffff1a;
480
+ --bi-color-stroke-basic: #fff3;
481
+ --bi-color-stroke-basic-strong: #ffffff4d;
482
+ --bi-color-stroke-basic-contrast: #fff6;
479
483
  --bi-color-neutral-background: var(--bi-neutral-100);
480
484
  --bi-color-neutral-surface-subtle: var(--bi-neutral-95);
481
485
  --bi-color-neutral-surface: var(--bi-neutral-90);
@@ -508,8 +512,8 @@
508
512
  --bi-color-primary-text-secondary: #ffffffb2;
509
513
  --bi-color-primary-text-subtle: var(--bi-primary-10);
510
514
  --bi-color-primary-text-accent: var(--bi-primary-30);
511
- --bi-color-primary-contrast: var(--bi-primary-20);
512
- --bi-color-primary-contrast-hover: var(--bi-primary-30);
515
+ --bi-color-primary-contrast: var(--bi-primary-30);
516
+ --bi-color-primary-contrast-hover: var(--bi-primary-20);
513
517
  --bi-color-primary-fill: var(--bi-primary-50);
514
518
  --bi-color-primary-on-fill: var(--bi-basic-white);
515
519
  --bi-color-info-background: var(--bi-info-100);
@@ -584,10 +588,6 @@
584
588
  --bi-color-alert-contrast-hover: var(--bi-alert-15);
585
589
  --bi-color-alert-fill: var(--bi-alert-60);
586
590
  --bi-color-alert-on-fill: var(--bi-basic-white);
587
- --bi-color-stroke-basic-subtle: #ffffff1a;
588
- --bi-color-stroke-basic: #fff3;
589
- --bi-color-stroke-basic-strong: #ffffff4d;
590
- --bi-color-stroke-basic-contrast: #fff6;
591
591
  --bi-states-hover: #ffffff1a;
592
592
  --bi-states-press: #ffffff26;
593
593
  --bi-states-focus: var(--bi-primary-30);
@@ -1075,6 +1075,10 @@
1075
1075
  flex-direction: row;
1076
1076
  display: flex;
1077
1077
 
1078
+ @media (width < 768px) {
1079
+ --bic-card-content-padding: var(--bi-scale-3x);
1080
+ }
1081
+
1078
1082
  &[data-orientation="horizontal"] {
1079
1083
  & > div:first-child {
1080
1084
  border-top-left-radius: var(--bic-card-border-radius);
@@ -1088,11 +1092,11 @@
1088
1092
 
1089
1093
  --bic-card-media-width: 15.75rem;
1090
1094
 
1091
- @media (width < 1024px) {
1095
+ @media (width < 1128px) {
1092
1096
  --bic-card-media-width: 14.5rem;
1093
1097
  }
1094
1098
 
1095
- @media (width < 600px) {
1099
+ @media (width < 768px) {
1096
1100
  --bic-card-media-width: 8.4375rem;
1097
1101
  }
1098
1102
  }
@@ -1147,8 +1151,7 @@
1147
1151
  overflow: hidden;
1148
1152
  }
1149
1153
 
1150
- @media (width < 600px) {
1151
- --bic-card-content-padding: var(--bi-scale-3x);
1154
+ @media (width < 768px) {
1152
1155
  gap: var(--bi-scale-3x);
1153
1156
  }
1154
1157
  }
@@ -1200,7 +1203,7 @@
1200
1203
  background-color: var(--bic-card-actions-background-color);
1201
1204
  display: flex;
1202
1205
 
1203
- @media (width < 600px) {
1206
+ @media (width < 768px) {
1204
1207
  width: var(--bi-scale-11x);
1205
1208
  }
1206
1209
 
@@ -1210,7 +1213,7 @@
1210
1213
  --bic-button-size: var(--bi-scale-14x);
1211
1214
  flex: 1;
1212
1215
 
1213
- @media (width < 600px) {
1216
+ @media (width < 768px) {
1214
1217
  --bic-button-size: var(--bi-scale-11x);
1215
1218
  }
1216
1219
 
@@ -1233,7 +1236,7 @@
1233
1236
  color: var(--bic-card-header-label-color);
1234
1237
  margin: 0;
1235
1238
 
1236
- @media (width < 600px) {
1239
+ @media (width < 768px) {
1237
1240
  font: var(--bi-font-body-small);
1238
1241
  }
1239
1242
 
@@ -1264,7 +1267,7 @@
1264
1267
  display: -webkit-box;
1265
1268
  overflow: hidden;
1266
1269
 
1267
- @media (width < 600px) {
1270
+ @media (width < 768px) {
1268
1271
  font: var(--bi-font-title-bold-xs);
1269
1272
  }
1270
1273
  }
@@ -1283,7 +1286,7 @@
1283
1286
  width: 100%;
1284
1287
  display: block;
1285
1288
 
1286
- @media (width < 600px) {
1289
+ @media (width < 768px) {
1287
1290
  aspect-ratio: 3 / 2;
1288
1291
  }
1289
1292
  }
@@ -2470,7 +2473,7 @@ body:has(.bi-dialog:modal) {
2470
2473
  min-height: 58px;
2471
2474
  display: flex;
2472
2475
 
2473
- @media (width < 600px) {
2476
+ @media (width < 768px) {
2474
2477
  gap: var(--bi-scale-2x) var(--bi-scale-1x);
2475
2478
  }
2476
2479
 
@@ -2505,7 +2508,7 @@ body:has(.bi-dialog:modal) {
2505
2508
  flex-wrap: wrap;
2506
2509
  display: flex;
2507
2510
 
2508
- @media (width < 600px) {
2511
+ @media (width < 768px) {
2509
2512
  gap: var(--bi-scale-2x);
2510
2513
  }
2511
2514
  }
@@ -2700,7 +2703,7 @@ svg {
2700
2703
  --bic-logo-height: var(--bi-scale-48x);
2701
2704
  }
2702
2705
 
2703
- @media (width >= 795px) {
2706
+ @media (width >= 768px) {
2704
2707
  &[data-international="true"] {
2705
2708
  &[data-vertical="true"] {
2706
2709
  background-image: var(--bic-logo-international-vertical);
@@ -3071,7 +3074,7 @@ svg {
3071
3074
  color: var(--bic-tabs-tab-color-selected);
3072
3075
 
3073
3076
  &:after {
3074
- width: calc(100% - var(--bi-scale-6x));
3077
+ width: 100%;
3075
3078
  }
3076
3079
  }
3077
3080
  }
package/dist/tokens.css CHANGED
@@ -153,15 +153,15 @@
153
153
  --bi-scale-84x: 21rem;
154
154
  --bi-scale-128x: 32rem;
155
155
  --bi-scale-max: 624.938rem;
156
+ --bi-color-stroke-basic-subtle: #0000001a;
157
+ --bi-color-stroke-basic: #0003;
158
+ --bi-color-stroke-basic-strong: #0000004d;
159
+ --bi-color-stroke-basic-contrast: #00000080;
156
160
  --bi-color-primary-text-secondary: #042f5bb3;
157
161
  --bi-color-info-text-secondary: #2e0b61b3;
158
162
  --bi-color-warning-text-secondary: #4a3c01b3;
159
163
  --bi-color-success-text-secondary: #143a16b3;
160
164
  --bi-color-alert-text-secondary: #6a1b16b3;
161
- --bi-color-stroke-basic-subtle: #0000001a;
162
- --bi-color-stroke-basic: #0003;
163
- --bi-color-stroke-basic-strong: #0000004d;
164
- --bi-color-stroke-basic-contrast: #00000080;
165
165
  --bi-states-hover: #26333f1a;
166
166
  --bi-states-press: #26333f26;
167
167
  --bi-states-hover-dark: #26333f1a;
@@ -476,6 +476,10 @@
476
476
  }
477
477
 
478
478
  [data-color-scheme="dark"] {
479
+ --bi-color-stroke-basic-subtle: #ffffff1a;
480
+ --bi-color-stroke-basic: #fff3;
481
+ --bi-color-stroke-basic-strong: #ffffff4d;
482
+ --bi-color-stroke-basic-contrast: #fff6;
479
483
  --bi-color-neutral-background: var(--bi-neutral-100);
480
484
  --bi-color-neutral-surface-subtle: var(--bi-neutral-95);
481
485
  --bi-color-neutral-surface: var(--bi-neutral-90);
@@ -508,8 +512,8 @@
508
512
  --bi-color-primary-text-secondary: #ffffffb2;
509
513
  --bi-color-primary-text-subtle: var(--bi-primary-10);
510
514
  --bi-color-primary-text-accent: var(--bi-primary-30);
511
- --bi-color-primary-contrast: var(--bi-primary-20);
512
- --bi-color-primary-contrast-hover: var(--bi-primary-30);
515
+ --bi-color-primary-contrast: var(--bi-primary-30);
516
+ --bi-color-primary-contrast-hover: var(--bi-primary-20);
513
517
  --bi-color-primary-fill: var(--bi-primary-50);
514
518
  --bi-color-primary-on-fill: var(--bi-basic-white);
515
519
  --bi-color-info-background: var(--bi-info-100);
@@ -584,10 +588,6 @@
584
588
  --bi-color-alert-contrast-hover: var(--bi-alert-15);
585
589
  --bi-color-alert-fill: var(--bi-alert-60);
586
590
  --bi-color-alert-on-fill: var(--bi-basic-white);
587
- --bi-color-stroke-basic-subtle: #ffffff1a;
588
- --bi-color-stroke-basic: #fff3;
589
- --bi-color-stroke-basic-strong: #ffffff4d;
590
- --bi-color-stroke-basic-contrast: #fff6;
591
591
  --bi-states-hover: #ffffff1a;
592
592
  --bi-states-press: #ffffff26;
593
593
  --bi-states-focus: var(--bi-primary-30);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.12.0",
4
+ "version": "0.12.1",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.12.0"
33
+ "@bi-digital/tokens": "0.12.1"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",