@bi-digital/css 0.2.20 → 0.2.22

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 (11) hide show
  1. package/dist/components/card.css +39 -27
  2. package/dist/components/chip.css +16 -8
  3. package/dist/components/field.css +19 -38
  4. package/dist/components/filter-group.css +28 -12
  5. package/dist/components/input.css +63 -36
  6. package/dist/components/navbar.css +1 -1
  7. package/dist/components/search.css +4 -0
  8. package/dist/components/skip-link.css +1 -1
  9. package/dist/components/tabs.css +1 -0
  10. package/dist/components.css +172 -123
  11. package/package.json +2 -2
package/dist/components/card.css CHANGED
@@ -1,10 +1,9 @@
1
1
  .bi-card {
2
- --bic-card-border-width: 1px;
2
+ --bic-card-border-color: var(--bi-neutral-15);
3
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
3
4
  --bic-card-border-radius: var(--bi-radius-medium);
4
- --bic-card-child-border-radius: calc(var(--bic-card-border-radius) - var(--bic-card-border-width));
5
5
  --bic-card-background-color: var(--bi-basic-white);
6
6
  --bic-card-color: var(--bi-neutral-95);
7
- --bic-card-border-color: var(--bi-neutral-15);
8
7
  --bic-card-header-title-color: var(--bi-neutral-95);
9
8
  --bic-card-header-bold-color: var(--bi-primary-60);
10
9
  --bic-card-header-label-color: var(--bi-neutral-50);
@@ -17,9 +16,10 @@
17
16
  }
18
17
 
19
18
  .bi-card[data-dark="true"] {
19
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
20
+ --bic-card-border-color: var(--bi-neutral-70);
20
21
  --bic-card-background-color: var(--bi-neutral-95);
21
22
  --bic-card-color: var(--bi-neutral-5);
22
- --bic-card-border-color: var(--bi-neutral-70);
23
23
  --bic-card-header-title-color: var(--bi-neutral-5);
24
24
  --bic-card-header-bold-color: var(--bi-primary-20);
25
25
  --bic-card-header-label-color: var(--bi-neutral-30);
@@ -29,23 +29,23 @@
29
29
  }
30
30
 
31
31
  .bi-card {
32
- border: var(--bic-card-border-width) solid var(--bic-card-border-color);
32
+ width: 100%;
33
+ box-shadow: var(--bic-card-box-shadow);
33
34
  border-radius: var(--bic-card-border-radius);
34
35
  background-color: var(--bic-card-background-color);
35
- width: 100%;
36
36
  color: var(--bic-card-color);
37
37
  flex-direction: row;
38
38
  display: flex;
39
39
  }
40
40
 
41
41
  .bi-card[data-orientation="horizontal"] > div:first-child {
42
- border-top-left-radius: var(--bic-card-child-border-radius);
43
- border-bottom-left-radius: var(--bic-card-child-border-radius);
42
+ border-top-left-radius: var(--bic-card-border-radius);
43
+ border-bottom-left-radius: var(--bic-card-border-radius);
44
44
  }
45
45
 
46
46
  .bi-card[data-orientation="horizontal"] > div:last-child {
47
- border-top-right-radius: var(--bic-card-child-border-radius);
48
- border-bottom-right-radius: var(--bic-card-child-border-radius);
47
+ border-top-right-radius: var(--bic-card-border-radius);
48
+ border-bottom-right-radius: var(--bic-card-border-radius);
49
49
  }
50
50
 
51
51
  .bi-card[data-orientation="horizontal"] {
@@ -70,13 +70,13 @@
70
70
  }
71
71
 
72
72
  .bi-card[data-orientation="vertical"] > div:first-child {
73
- border-top-left-radius: var(--bic-card-child-border-radius);
74
- border-top-right-radius: var(--bic-card-child-border-radius);
73
+ border-top-left-radius: var(--bic-card-border-radius);
74
+ border-top-right-radius: var(--bic-card-border-radius);
75
75
  }
76
76
 
77
77
  .bi-card[data-orientation="vertical"] > div:last-child {
78
- border-bottom-left-radius: var(--bic-card-child-border-radius);
79
- border-bottom-right-radius: var(--bic-card-child-border-radius);
78
+ border-bottom-left-radius: var(--bic-card-border-radius);
79
+ border-bottom-right-radius: var(--bic-card-border-radius);
80
80
  }
81
81
 
82
82
  .bi-card[data-orientation="vertical"] .bi-card--actions {
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .bi-card[data-error="true"] {
105
- box-shadow: 0 0 0 2px var(--bi-alert-50);
105
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
106
106
  --bic-card-border-color: transparent;
107
107
  }
108
108
 
@@ -143,11 +143,12 @@
143
143
  .bi-card:-webkit-any(a, button) {
144
144
  cursor: pointer;
145
145
  text-decoration: none;
146
+ transition: box-shadow .25s ease-in-out;
146
147
  position: relative;
147
148
  }
148
149
 
149
150
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
150
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
151
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
151
152
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
152
153
  outline-offset: var(--_bi--focus, 2px);
153
154
  }
@@ -156,8 +157,10 @@
156
157
  --_bi--focus: ;
157
158
  }
158
159
 
159
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
160
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
160
+ @media (hover: hover) and (pointer: fine) {
161
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
162
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
163
+ }
161
164
  }
162
165
 
163
166
  .bi-card:-webkit-any(a, button):not(.disabled):active {
@@ -171,11 +174,12 @@
171
174
  .bi-card:is(a, button) {
172
175
  cursor: pointer;
173
176
  text-decoration: none;
177
+ transition: box-shadow .25s ease-in-out;
174
178
  position: relative;
175
179
  }
176
180
 
177
181
  .bi-card:is(a, button):not(.disabled):focus-visible {
178
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
182
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
179
183
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
180
184
  outline-offset: var(--_bi--focus, 2px);
181
185
  }
@@ -184,8 +188,10 @@
184
188
  --_bi--focus: ;
185
189
  }
186
190
 
187
- .bi-card:is(a, button):not(.disabled):hover {
188
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
191
+ @media (hover: hover) and (pointer: fine) {
192
+ .bi-card:is(a, button):not(.disabled):hover {
193
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
194
+ }
189
195
  }
190
196
 
191
197
  .bi-card:is(a, button):not(.disabled):active {
@@ -199,11 +205,12 @@
199
205
  .bi-card .bi-card--content:-webkit-any(a, button) {
200
206
  cursor: pointer;
201
207
  text-decoration: none;
208
+ transition: box-shadow .25s ease-in-out;
202
209
  position: relative;
203
210
  }
204
211
 
205
212
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
206
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
213
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
207
214
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
208
215
  outline-offset: var(--_bi--focus, 2px);
209
216
  }
@@ -212,8 +219,10 @@
212
219
  --_bi--focus: ;
213
220
  }
214
221
 
215
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
216
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
222
+ @media (hover: hover) and (pointer: fine) {
223
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
224
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
225
+ }
217
226
  }
218
227
 
219
228
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
@@ -227,11 +236,12 @@
227
236
  .bi-card .bi-card--content:is(a, button) {
228
237
  cursor: pointer;
229
238
  text-decoration: none;
239
+ transition: box-shadow .25s ease-in-out;
230
240
  position: relative;
231
241
  }
232
242
 
233
243
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
234
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
244
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
235
245
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
236
246
  outline-offset: var(--_bi--focus, 2px);
237
247
  }
@@ -240,8 +250,10 @@
240
250
  --_bi--focus: ;
241
251
  }
242
252
 
243
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
244
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
253
+ @media (hover: hover) and (pointer: fine) {
254
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
255
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
256
+ }
245
257
  }
246
258
 
247
259
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
package/dist/components/chip.css CHANGED
@@ -36,8 +36,10 @@
36
36
  box-shadow: 0 0 0 2px #fff;
37
37
  }
38
38
 
39
- .bi-chip:-webkit-any(button):hover {
40
- --bg-color: var(--bic-chip-bg-hover);
39
+ @media (hover: hover) and (pointer: fine) {
40
+ .bi-chip:-webkit-any(button):hover {
41
+ --bg-color: var(--bic-chip-bg-hover);
42
+ }
41
43
  }
42
44
 
43
45
  .bi-chip:-webkit-any(button):active {
@@ -57,8 +59,10 @@
57
59
  box-shadow: 0 0 0 2px #fff;
58
60
  }
59
61
 
60
- .bi-chip:is(button):hover {
61
- --bg-color: var(--bic-chip-bg-hover);
62
+ @media (hover: hover) and (pointer: fine) {
63
+ .bi-chip:is(button):hover {
64
+ --bg-color: var(--bic-chip-bg-hover);
65
+ }
62
66
  }
63
67
 
64
68
  .bi-chip:is(button):active {
@@ -78,8 +82,10 @@
78
82
  box-shadow: 0 0 0 2px #fff;
79
83
  }
80
84
 
81
- .bi-chip:-webkit-any(a):hover {
82
- --bg-color: var(--bic-chip-bg-hover);
85
+ @media (hover: hover) and (pointer: fine) {
86
+ .bi-chip:-webkit-any(a):hover {
87
+ --bg-color: var(--bic-chip-bg-hover);
88
+ }
83
89
  }
84
90
 
85
91
  .bi-chip:-webkit-any(a):active {
@@ -99,8 +105,10 @@
99
105
  box-shadow: 0 0 0 2px #fff;
100
106
  }
101
107
 
102
- .bi-chip:is(a):hover {
103
- --bg-color: var(--bic-chip-bg-hover);
108
+ @media (hover: hover) and (pointer: fine) {
109
+ .bi-chip:is(a):hover {
110
+ --bg-color: var(--bic-chip-bg-hover);
111
+ }
104
112
  }
105
113
 
106
114
  .bi-chip:is(a):active {
package/dist/components/field.css CHANGED
@@ -1,44 +1,32 @@
1
1
  .bi-field {
2
+ --bic-field-border-color-invalid: var(--bi-alert-50);
3
+ --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
4
+ --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
2
5
  --bic-field-content-spacing: var(--bi-scale-0-50x);
3
- --bic-field-description-color: var(--bi-neutral-60);
4
6
  --bic-field-padding-inline: var(--bi-scale-3x);
7
+ --bic-field-affix-color: var(--bi-neutral-60);
5
8
  --bic-field-background: var(--bi-basic-white);
6
9
  --bic-field-background-hover: var(--bi-states-hover-dark);
7
10
  --bic-field-background-readonly: var(--bi-neutral-10);
8
11
  --bic-field-border-color: var(--bi-neutral-50);
12
+ --bic-field-border-color-hover: var(--bi-neutral-50);
9
13
  --bic-field-border-color-readonly: var(--bi-neutral-50);
10
- --bic-field-border-color-invalid: var(--bi-alert-50);
11
- --bic-field-border-style: solid;
12
- --bic-field-border-width: var(--bi-stroke-thin);
13
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
14
- --bic-field-color: var(--bi-neutral-95);
15
14
  --bic-field-disabled-color: var(--bi-neutral-50);
15
+ --bic-field-description-color: var(--bi-neutral-60);
16
16
  --bic-field-label-color: var(--bi-neutral-95);
17
17
  --bic-field-label-required-color: var(--bi-primary-50);
18
- --bic-field-input-color-readonly: var(--bi-neutral-95);
19
- --bic-field-input-color: var(--bi-neutral-95);
20
- --bic-field-toggle-color: var(--bi-basic-white);
21
- --bic-field-toggle-background: var(--bi-primary-50);
22
18
  }
23
19
 
24
20
  .bi-field[data-dark="true"] {
25
- --bic-field-description-color: var(--bi-neutral-15);
21
+ --bic-field-affix-color: var(--bi-neutral-30);
26
22
  --bic-field-background: var(--bi-neutral-95);
27
23
  --bic-field-background-hover: var(--bi-states-hover-light);
28
24
  --bic-field-background-readonly: var(--bi-neutral-50);
29
- --bic-field-border-color: var(--bi-neutral-10);
30
- --bic-field-border-color-hover: var(--bi-neutral-50);
31
- --bic-field-border-color-readonly: var(--bi-neutral-50);
32
- --bic-field-border-color-invalid: var(--bi-alert-50);
33
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
34
- --bic-field-color: var(--bi-basic-white);
25
+ --bic-field-border-color-hover: var(--bi-neutral-25);
35
26
  --bic-field-disabled-color: var(--bi-neutral-40);
27
+ --bic-field-description-color: var(--bi-neutral-15);
36
28
  --bic-field-label-color: var(--bi-basic-white);
37
29
  --bic-field-label-required-color: var(--bi-secondary-50);
38
- --bic-field-input-color-readonly: var(--bi-basic-white);
39
- --bic-field-input-color: var(--bi-basic-white);
40
- --bic-field-toggle-color: var(--bi-basic-white);
41
- --bic-field-toggle-background: var(--bi-primary-50);
42
30
  }
43
31
 
44
32
  .bi-field > * {
@@ -70,8 +58,8 @@
70
58
  cursor: not-allowed;
71
59
  --bic-field-label-color: var(--bic-field-disabled-color);
72
60
  --bic-field-description-color: var(--bic-field-disabled-color);
73
- --bic-field-color: var(--bic-field-disabled-color);
74
- --bic-field-toggle-background: var(--bic-field-disabled-color);
61
+ --bic-field-affix-color: var(--bic-field-disabled-color);
62
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
75
63
  }
76
64
 
77
65
  .bi-field[data-fullwidth="true"] {
@@ -232,18 +220,15 @@
232
220
  background: var(--bic-field-background);
233
221
  border-radius: var(--bi-radius-medium);
234
222
  box-sizing: border-box;
235
- color: var(--bic-field-color);
236
223
  white-space: nowrap;
237
- border-width: var(--bic-field-border-width);
238
- border-style: var(--bic-field-border-style);
239
- border-color: var(--bic-field-border-color);
240
224
  max-width: 100%;
225
+ box-shadow: var(--bic-field-box-shadow);
226
+ transition: box-shadow .25s ease-in-out;
241
227
  }
242
228
 
243
229
  .bi-field .bi-field--affixes .bi-input {
244
- --bic-field-background: ;
245
- --bic-field-box-shadow-hover: ;
246
- --bic-field-border-width: 0;
230
+ --bic-input-background: ;
231
+ --bic-input-box-shadow: ;
247
232
  flex: auto;
248
233
  }
249
234
 
@@ -265,22 +250,18 @@
265
250
  }
266
251
 
267
252
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
268
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
269
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
270
- outline-offset: var(--_bi--focus, 2px);
271
- --bic-field-border-color: var(--bi-primary-50);
253
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
254
+ outline-offset: 0;
255
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
272
256
  }
273
257
 
274
258
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
275
259
  --_bi--focus: ;
276
260
  }
277
261
 
278
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
279
- --bic-field-border-color: var(--bic-field-border-color-invalid);
280
- }
281
-
282
262
  .bi-field .bi-field--affixes .bi-field--affix {
283
263
  padding-inline: var(--bic-field-padding-inline);
264
+ color: var(--bic-field-affix-color);
284
265
  flex-shrink: 0;
285
266
  align-items: center;
286
267
  }
package/dist/components/filter-group.css CHANGED
@@ -1,15 +1,17 @@
1
1
  .bi-filter-group {
2
- --bic-filter-group-background-color: var(--bi-basic-white);
3
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
4
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
2
+ --bic-filter-group-background: var(--bi-basic-white);
3
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
4
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
5
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
5
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
6
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
7
8
  }
8
9
 
9
10
  .bi-filter-group[data-dark="true"] {
10
- --bic-filter-group-background-color: var(--bi-neutral-90);
11
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
12
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
11
+ --bic-filter-group-background: var(--bi-neutral-90);
12
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
13
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
14
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
13
15
  --bic-filter-group-border-color: var(--bi-neutral-70);
14
16
  --bic-filter-group-text-color: var(--bi-basic-white);
15
17
  }
@@ -25,10 +27,10 @@
25
27
  height: var(--bi-scale-12x);
26
28
  color: var(--bic-filter-group-text-color);
27
29
  align-items: center;
28
- gap: var(--bi-scale-2x);
30
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
29
31
  width: 100%;
30
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
31
- background: var(--bic-filter-group-background-color);
32
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
33
+ background: var(--bic-filter-group-background);
32
34
  cursor: pointer;
33
35
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
34
36
  -webkit-user-select: none;
@@ -37,8 +39,14 @@
37
39
  display: flex;
38
40
  }
39
41
 
40
- .bi-filter-group > button:hover {
41
- background: var(--bic-filter-group-background-color-hover);
42
+ @media (hover: hover) and (pointer: fine) {
43
+ .bi-filter-group > button:hover {
44
+ background: var(--bic-filter-group-background-hover);
45
+ }
46
+ }
47
+
48
+ .bi-filter-group > button:active {
49
+ background: var(--bic-filter-group-background-press);
42
50
  }
43
51
 
44
52
  .bi-filter-group > button:focus-visible {
@@ -75,12 +83,20 @@
75
83
  width: 100%;
76
84
  }
77
85
 
86
+ .bi-filter-group:last-of-type > button {
87
+ border-radius: var(--bi-radius-small);
88
+ border-bottom-color: #0000;
89
+ }
90
+
78
91
  .bi-filter-group:last-of-type > div {
79
92
  padding: var(--bi-scale-2x) 0;
80
93
  }
81
94
 
95
+ .bi-filter-group[data-expanded="true"] {
96
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
97
+ }
98
+
82
99
  .bi-filter-group[data-expanded="true"] > button {
83
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
84
100
  border-radius: var(--bi-radius-small);
85
101
  border-bottom-color: #0000;
86
102
  }
package/dist/components/input.css CHANGED
@@ -3,37 +3,35 @@
3
3
  }
4
4
 
5
5
  .bi-input {
6
+ --bic-input-border-color-invalid: var(--bi-alert-50);
7
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
8
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
9
+ --bic-input-caret-color: var(--bi-primary-50);
10
+ --bic-input-font-size: 1rem;
6
11
  --bic-input-padding: var(--bi-scale-3x);
7
12
  --bic-input-size: var(--bi-scale-11x);
8
- --bic-input-font-size: 1rem;
13
+ --bic-input-toggle-background: var(--bi-primary-50);
14
+ --bic-input-toggle-color: var(--bi-basic-white);
9
15
  --bic-input-toggle-size: 1.125rem;
10
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
11
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
12
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
13
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
14
- --bic-input-border-style: var(--bic-field-border-style, solid);
15
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
16
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
17
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
18
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
19
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
20
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
21
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
22
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
16
+ --bic-input-background: var(--bi-basic-white);
17
+ --bic-input-background-readonly: var(--bi-neutral-10);
18
+ --bic-input-border-color: var(--bi-neutral-50);
19
+ --bic-input-border-color-hover: var(--bi-neutral-50);
20
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
21
+ --bic-input-color-readonly: var(--bi-neutral-95);
22
+ --bic-input-color: var(--bi-neutral-95);
23
+ --bic-input-disabled-color: var(--bi-neutral-50);
24
+ --bic-input-placeholder-color: var(--bi-neutral-60);
23
25
  }
24
26
 
25
27
  .bi-input[data-dark="true"] {
26
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
27
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
28
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
29
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
30
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
31
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
32
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
33
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
34
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
35
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
36
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
28
+ --bic-input-background: var(--bi-neutral-95);
29
+ --bic-input-background-readonly: var(--bi-neutral-50);
30
+ --bic-input-border-color-hover: var(--bi-neutral-25);
31
+ --bic-input-color-readonly: var(--bi-basic-white);
32
+ --bic-input-color: var(--bi-basic-white);
33
+ --bic-input-disabled-color: var(--bi-neutral-40);
34
+ --bic-input-placeholder-color: var(--bi-neutral-30);
37
35
  }
38
36
 
39
37
  .bi-input {
@@ -41,9 +39,7 @@
41
39
  appearance: none;
42
40
  background: var(--bic-input-background);
43
41
  border-radius: var(--bi-radius-medium);
44
- border-width: var(--bic-input-border-width);
45
- border-style: var(--bic-input-border-style);
46
- border-color: var(--bic-input-border-color);
42
+ box-shadow: var(--bic-input-box-shadow);
47
43
  box-sizing: border-box;
48
44
  color: var(--bic-input-color);
49
45
  font-family: inherit;
@@ -53,7 +49,10 @@
53
49
  max-width: 100%;
54
50
  padding: var(--bic-input-padding);
55
51
  vertical-align: middle;
52
+ caret-color: var(--bic-input-caret-color);
53
+ border: none;
56
54
  line-height: 1;
55
+ transition: box-shadow .25s ease-in-out;
57
56
  position: relative;
58
57
  }
59
58
 
@@ -71,15 +70,19 @@
71
70
  }
72
71
 
73
72
  .bi-input:focus-visible {
74
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
75
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
76
- outline-offset: var(--_bi--focus, 2px);
73
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
74
+ outline-offset: 0;
75
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
77
76
  }
78
77
 
79
78
  .bi-input:focus-visible * {
80
79
  --_bi--focus: ;
81
80
  }
82
81
 
82
+ .bi-input::placeholder {
83
+ color: var(--bic-input-placeholder-color);
84
+ }
85
+
83
86
  .bi-input:not([size], [cols]) {
84
87
  width: 100%;
85
88
  }
@@ -98,19 +101,19 @@
98
101
 
99
102
  .bi-input[readonly] {
100
103
  background: var(--bic-input-background-readonly);
101
- border-color: var(--bic-input-border-color-readonly);
104
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
102
105
  color: var(--bic-input-color-readonly);
103
106
  }
104
107
 
105
108
  .bi-input:disabled {
106
109
  background: var(--bic-input-background-readonly);
107
- border-color: var(--bic-input-border-color-readonly);
110
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
108
111
  color: var(--bic-input-color-readonly);
109
112
  }
110
113
 
111
114
  .bi-input[aria-disabled="true"] {
112
115
  background: var(--bic-input-background-readonly);
113
- border-color: var(--bic-input-border-color-readonly);
116
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
114
117
  color: var(--bic-input-color-readonly);
115
118
  }
116
119
 
@@ -165,16 +168,28 @@
165
168
  }
166
169
 
167
170
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
168
- border-width: var(--bi-stroke-default);
169
171
  padding: var(--bi-scale-0-50x);
170
172
  line-height: inherit;
171
173
  height: var(--bic-input-toggle-size);
172
174
  width: var(--bic-input-toggle-size);
175
+ box-shadow: none;
176
+ border-width: var(--bi-stroke-default);
177
+ border-style: solid;
173
178
  border-color: var(--bic-input-border-color);
174
179
  background: none;
175
180
  flex-shrink: 0;
176
181
  }
177
182
 
183
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
184
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
185
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
186
+ outline-offset: var(--_bi--focus, 2px);
187
+ }
188
+
189
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
190
+ --_bi--focus: ;
191
+ }
192
+
178
193
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
179
194
  cursor: pointer;
180
195
  }
@@ -246,16 +261,28 @@
246
261
  }
247
262
 
248
263
  .bi-input:is([type="checkbox"], [type="radio"]) {
249
- border-width: var(--bi-stroke-default);
250
264
  padding: var(--bi-scale-0-50x);
251
265
  line-height: inherit;
252
266
  height: var(--bic-input-toggle-size);
253
267
  width: var(--bic-input-toggle-size);
268
+ box-shadow: none;
269
+ border-width: var(--bi-stroke-default);
270
+ border-style: solid;
254
271
  border-color: var(--bic-input-border-color);
255
272
  background: none;
256
273
  flex-shrink: 0;
257
274
  }
258
275
 
276
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
277
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
278
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
279
+ outline-offset: var(--_bi--focus, 2px);
280
+ }
281
+
282
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
283
+ --_bi--focus: ;
284
+ }
285
+
259
286
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
260
287
  cursor: pointer;
261
288
  }
package/dist/components/navbar.css CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  .bi-navbar[data-fixed="true"] > header {
38
- z-index: 110;
38
+ z-index: 130;
39
39
  position: fixed;
40
40
  top: 0;
41
41
  left: 0;
package/dist/components/search.css CHANGED
@@ -1,3 +1,7 @@
1
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2
+ color: var(--bi-primary-50);
3
+ }
4
+
1
5
  .bi-search .bi-field--affix:last-child {
2
6
  --bic-field-padding-inline: 0;
3
7
  }
package/dist/components/skip-link.css CHANGED
@@ -28,5 +28,5 @@
28
28
  border-radius: var(--bi-radius-medium);
29
29
  outline-offset: 2px;
30
30
  outline: 1.5px solid var(--bi-primary-50);
31
- box-shadow: 0 0 0 2px var(--bi-basic-white);
31
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
32
32
  }
package/dist/components/tabs.css CHANGED
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .bi-tabs .bi-tabs--list {
17
+ scrollbar-width: none;
17
18
  flex-direction: row;
18
19
  flex-shrink: 0;
19
20
  display: flex;
package/dist/components.css CHANGED
@@ -457,12 +457,11 @@
457
457
  }
458
458
 
459
459
  .bi-card {
460
- --bic-card-border-width: 1px;
460
+ --bic-card-border-color: var(--bi-neutral-15);
461
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
461
462
  --bic-card-border-radius: var(--bi-radius-medium);
462
- --bic-card-child-border-radius: calc(var(--bic-card-border-radius) - var(--bic-card-border-width));
463
463
  --bic-card-background-color: var(--bi-basic-white);
464
464
  --bic-card-color: var(--bi-neutral-95);
465
- --bic-card-border-color: var(--bi-neutral-15);
466
465
  --bic-card-header-title-color: var(--bi-neutral-95);
467
466
  --bic-card-header-bold-color: var(--bi-primary-60);
468
467
  --bic-card-header-label-color: var(--bi-neutral-50);
@@ -475,9 +474,10 @@
475
474
  }
476
475
 
477
476
  .bi-card[data-dark="true"] {
477
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
478
+ --bic-card-border-color: var(--bi-neutral-70);
478
479
  --bic-card-background-color: var(--bi-neutral-95);
479
480
  --bic-card-color: var(--bi-neutral-5);
480
- --bic-card-border-color: var(--bi-neutral-70);
481
481
  --bic-card-header-title-color: var(--bi-neutral-5);
482
482
  --bic-card-header-bold-color: var(--bi-primary-20);
483
483
  --bic-card-header-label-color: var(--bi-neutral-30);
@@ -487,23 +487,23 @@
487
487
  }
488
488
 
489
489
  .bi-card {
490
- border: var(--bic-card-border-width) solid var(--bic-card-border-color);
490
+ width: 100%;
491
+ box-shadow: var(--bic-card-box-shadow);
491
492
  border-radius: var(--bic-card-border-radius);
492
493
  background-color: var(--bic-card-background-color);
493
- width: 100%;
494
494
  color: var(--bic-card-color);
495
495
  flex-direction: row;
496
496
  display: flex;
497
497
  }
498
498
 
499
499
  .bi-card[data-orientation="horizontal"] > div:first-child {
500
- border-top-left-radius: var(--bic-card-child-border-radius);
501
- border-bottom-left-radius: var(--bic-card-child-border-radius);
500
+ border-top-left-radius: var(--bic-card-border-radius);
501
+ border-bottom-left-radius: var(--bic-card-border-radius);
502
502
  }
503
503
 
504
504
  .bi-card[data-orientation="horizontal"] > div:last-child {
505
- border-top-right-radius: var(--bic-card-child-border-radius);
506
- border-bottom-right-radius: var(--bic-card-child-border-radius);
505
+ border-top-right-radius: var(--bic-card-border-radius);
506
+ border-bottom-right-radius: var(--bic-card-border-radius);
507
507
  }
508
508
 
509
509
  .bi-card[data-orientation="horizontal"] {
@@ -528,13 +528,13 @@
528
528
  }
529
529
 
530
530
  .bi-card[data-orientation="vertical"] > div:first-child {
531
- border-top-left-radius: var(--bic-card-child-border-radius);
532
- border-top-right-radius: var(--bic-card-child-border-radius);
531
+ border-top-left-radius: var(--bic-card-border-radius);
532
+ border-top-right-radius: var(--bic-card-border-radius);
533
533
  }
534
534
 
535
535
  .bi-card[data-orientation="vertical"] > div:last-child {
536
- border-bottom-left-radius: var(--bic-card-child-border-radius);
537
- border-bottom-right-radius: var(--bic-card-child-border-radius);
536
+ border-bottom-left-radius: var(--bic-card-border-radius);
537
+ border-bottom-right-radius: var(--bic-card-border-radius);
538
538
  }
539
539
 
540
540
  .bi-card[data-orientation="vertical"] .bi-card--actions {
@@ -560,7 +560,7 @@
560
560
  }
561
561
 
562
562
  .bi-card[data-error="true"] {
563
- box-shadow: 0 0 0 2px var(--bi-alert-50);
563
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
564
564
  --bic-card-border-color: transparent;
565
565
  }
566
566
 
@@ -601,11 +601,12 @@
601
601
  .bi-card:-webkit-any(a, button) {
602
602
  cursor: pointer;
603
603
  text-decoration: none;
604
+ transition: box-shadow .25s ease-in-out;
604
605
  position: relative;
605
606
  }
606
607
 
607
608
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
608
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
609
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
609
610
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
610
611
  outline-offset: var(--_bi--focus, 2px);
611
612
  }
@@ -614,8 +615,10 @@
614
615
  --_bi--focus: ;
615
616
  }
616
617
 
617
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
618
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
618
+ @media (hover: hover) and (pointer: fine) {
619
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
620
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
621
+ }
619
622
  }
620
623
 
621
624
  .bi-card:-webkit-any(a, button):not(.disabled):active {
@@ -629,11 +632,12 @@
629
632
  .bi-card:is(a, button) {
630
633
  cursor: pointer;
631
634
  text-decoration: none;
635
+ transition: box-shadow .25s ease-in-out;
632
636
  position: relative;
633
637
  }
634
638
 
635
639
  .bi-card:is(a, button):not(.disabled):focus-visible {
636
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
640
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
637
641
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
638
642
  outline-offset: var(--_bi--focus, 2px);
639
643
  }
@@ -642,8 +646,10 @@
642
646
  --_bi--focus: ;
643
647
  }
644
648
 
645
- .bi-card:is(a, button):not(.disabled):hover {
646
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
649
+ @media (hover: hover) and (pointer: fine) {
650
+ .bi-card:is(a, button):not(.disabled):hover {
651
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
652
+ }
647
653
  }
648
654
 
649
655
  .bi-card:is(a, button):not(.disabled):active {
@@ -657,11 +663,12 @@
657
663
  .bi-card .bi-card--content:-webkit-any(a, button) {
658
664
  cursor: pointer;
659
665
  text-decoration: none;
666
+ transition: box-shadow .25s ease-in-out;
660
667
  position: relative;
661
668
  }
662
669
 
663
670
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
664
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
671
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
665
672
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
666
673
  outline-offset: var(--_bi--focus, 2px);
667
674
  }
@@ -670,8 +677,10 @@
670
677
  --_bi--focus: ;
671
678
  }
672
679
 
673
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
674
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
680
+ @media (hover: hover) and (pointer: fine) {
681
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
682
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
683
+ }
675
684
  }
676
685
 
677
686
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
@@ -685,11 +694,12 @@
685
694
  .bi-card .bi-card--content:is(a, button) {
686
695
  cursor: pointer;
687
696
  text-decoration: none;
697
+ transition: box-shadow .25s ease-in-out;
688
698
  position: relative;
689
699
  }
690
700
 
691
701
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
692
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
702
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
693
703
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
694
704
  outline-offset: var(--_bi--focus, 2px);
695
705
  }
@@ -698,8 +708,10 @@
698
708
  --_bi--focus: ;
699
709
  }
700
710
 
701
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
702
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
711
+ @media (hover: hover) and (pointer: fine) {
712
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
713
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
714
+ }
703
715
  }
704
716
 
705
717
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
@@ -917,8 +929,10 @@
917
929
  box-shadow: 0 0 0 2px #fff;
918
930
  }
919
931
 
920
- .bi-chip:-webkit-any(button):hover {
921
- --bg-color: var(--bic-chip-bg-hover);
932
+ @media (hover: hover) and (pointer: fine) {
933
+ .bi-chip:-webkit-any(button):hover {
934
+ --bg-color: var(--bic-chip-bg-hover);
935
+ }
922
936
  }
923
937
 
924
938
  .bi-chip:-webkit-any(button):active {
@@ -938,8 +952,10 @@
938
952
  box-shadow: 0 0 0 2px #fff;
939
953
  }
940
954
 
941
- .bi-chip:is(button):hover {
942
- --bg-color: var(--bic-chip-bg-hover);
955
+ @media (hover: hover) and (pointer: fine) {
956
+ .bi-chip:is(button):hover {
957
+ --bg-color: var(--bic-chip-bg-hover);
958
+ }
943
959
  }
944
960
 
945
961
  .bi-chip:is(button):active {
@@ -959,8 +975,10 @@
959
975
  box-shadow: 0 0 0 2px #fff;
960
976
  }
961
977
 
962
- .bi-chip:-webkit-any(a):hover {
963
- --bg-color: var(--bic-chip-bg-hover);
978
+ @media (hover: hover) and (pointer: fine) {
979
+ .bi-chip:-webkit-any(a):hover {
980
+ --bg-color: var(--bic-chip-bg-hover);
981
+ }
964
982
  }
965
983
 
966
984
  .bi-chip:-webkit-any(a):active {
@@ -980,8 +998,10 @@
980
998
  box-shadow: 0 0 0 2px #fff;
981
999
  }
982
1000
 
983
- .bi-chip:is(a):hover {
984
- --bg-color: var(--bic-chip-bg-hover);
1001
+ @media (hover: hover) and (pointer: fine) {
1002
+ .bi-chip:is(a):hover {
1003
+ --bg-color: var(--bic-chip-bg-hover);
1004
+ }
985
1005
  }
986
1006
 
987
1007
  .bi-chip:is(a):active {
@@ -1355,46 +1375,34 @@ body:has(.bi-dialog:modal) {
1355
1375
  }
1356
1376
 
1357
1377
  .bi-field {
1378
+ --bic-field-border-color-invalid: var(--bi-alert-50);
1379
+ --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
1380
+ --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
1358
1381
  --bic-field-content-spacing: var(--bi-scale-0-50x);
1359
- --bic-field-description-color: var(--bi-neutral-60);
1360
1382
  --bic-field-padding-inline: var(--bi-scale-3x);
1383
+ --bic-field-affix-color: var(--bi-neutral-60);
1361
1384
  --bic-field-background: var(--bi-basic-white);
1362
1385
  --bic-field-background-hover: var(--bi-states-hover-dark);
1363
1386
  --bic-field-background-readonly: var(--bi-neutral-10);
1364
1387
  --bic-field-border-color: var(--bi-neutral-50);
1388
+ --bic-field-border-color-hover: var(--bi-neutral-50);
1365
1389
  --bic-field-border-color-readonly: var(--bi-neutral-50);
1366
- --bic-field-border-color-invalid: var(--bi-alert-50);
1367
- --bic-field-border-style: solid;
1368
- --bic-field-border-width: var(--bi-stroke-thin);
1369
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1370
- --bic-field-color: var(--bi-neutral-95);
1371
1390
  --bic-field-disabled-color: var(--bi-neutral-50);
1391
+ --bic-field-description-color: var(--bi-neutral-60);
1372
1392
  --bic-field-label-color: var(--bi-neutral-95);
1373
1393
  --bic-field-label-required-color: var(--bi-primary-50);
1374
- --bic-field-input-color-readonly: var(--bi-neutral-95);
1375
- --bic-field-input-color: var(--bi-neutral-95);
1376
- --bic-field-toggle-color: var(--bi-basic-white);
1377
- --bic-field-toggle-background: var(--bi-primary-50);
1378
1394
  }
1379
1395
 
1380
1396
  .bi-field[data-dark="true"] {
1381
- --bic-field-description-color: var(--bi-neutral-15);
1397
+ --bic-field-affix-color: var(--bi-neutral-30);
1382
1398
  --bic-field-background: var(--bi-neutral-95);
1383
1399
  --bic-field-background-hover: var(--bi-states-hover-light);
1384
1400
  --bic-field-background-readonly: var(--bi-neutral-50);
1385
- --bic-field-border-color: var(--bi-neutral-10);
1386
- --bic-field-border-color-hover: var(--bi-neutral-50);
1387
- --bic-field-border-color-readonly: var(--bi-neutral-50);
1388
- --bic-field-border-color-invalid: var(--bi-alert-50);
1389
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1390
- --bic-field-color: var(--bi-basic-white);
1401
+ --bic-field-border-color-hover: var(--bi-neutral-25);
1391
1402
  --bic-field-disabled-color: var(--bi-neutral-40);
1403
+ --bic-field-description-color: var(--bi-neutral-15);
1392
1404
  --bic-field-label-color: var(--bi-basic-white);
1393
1405
  --bic-field-label-required-color: var(--bi-secondary-50);
1394
- --bic-field-input-color-readonly: var(--bi-basic-white);
1395
- --bic-field-input-color: var(--bi-basic-white);
1396
- --bic-field-toggle-color: var(--bi-basic-white);
1397
- --bic-field-toggle-background: var(--bi-primary-50);
1398
1406
  }
1399
1407
 
1400
1408
  .bi-field > * {
@@ -1426,8 +1434,8 @@ body:has(.bi-dialog:modal) {
1426
1434
  cursor: not-allowed;
1427
1435
  --bic-field-label-color: var(--bic-field-disabled-color);
1428
1436
  --bic-field-description-color: var(--bic-field-disabled-color);
1429
- --bic-field-color: var(--bic-field-disabled-color);
1430
- --bic-field-toggle-background: var(--bic-field-disabled-color);
1437
+ --bic-field-affix-color: var(--bic-field-disabled-color);
1438
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
1431
1439
  }
1432
1440
 
1433
1441
  .bi-field[data-fullwidth="true"] {
@@ -1588,18 +1596,15 @@ body:has(.bi-dialog:modal) {
1588
1596
  background: var(--bic-field-background);
1589
1597
  border-radius: var(--bi-radius-medium);
1590
1598
  box-sizing: border-box;
1591
- color: var(--bic-field-color);
1592
1599
  white-space: nowrap;
1593
- border-width: var(--bic-field-border-width);
1594
- border-style: var(--bic-field-border-style);
1595
- border-color: var(--bic-field-border-color);
1596
1600
  max-width: 100%;
1601
+ box-shadow: var(--bic-field-box-shadow);
1602
+ transition: box-shadow .25s ease-in-out;
1597
1603
  }
1598
1604
 
1599
1605
  .bi-field .bi-field--affixes .bi-input {
1600
- --bic-field-background: ;
1601
- --bic-field-box-shadow-hover: ;
1602
- --bic-field-border-width: 0;
1606
+ --bic-input-background: ;
1607
+ --bic-input-box-shadow: ;
1603
1608
  flex: auto;
1604
1609
  }
1605
1610
 
@@ -1621,22 +1626,18 @@ body:has(.bi-dialog:modal) {
1621
1626
  }
1622
1627
 
1623
1628
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1624
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1625
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1626
- outline-offset: var(--_bi--focus, 2px);
1627
- --bic-field-border-color: var(--bi-primary-50);
1629
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
1630
+ outline-offset: 0;
1631
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1628
1632
  }
1629
1633
 
1630
1634
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
1631
1635
  --_bi--focus: ;
1632
1636
  }
1633
1637
 
1634
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
1635
- --bic-field-border-color: var(--bic-field-border-color-invalid);
1636
- }
1637
-
1638
1638
  .bi-field .bi-field--affixes .bi-field--affix {
1639
1639
  padding-inline: var(--bic-field-padding-inline);
1640
+ color: var(--bic-field-affix-color);
1640
1641
  flex-shrink: 0;
1641
1642
  align-items: center;
1642
1643
  }
@@ -1732,17 +1733,19 @@ body:has(.bi-dialog:modal) {
1732
1733
  }
1733
1734
 
1734
1735
  .bi-filter-group {
1735
- --bic-filter-group-background-color: var(--bi-basic-white);
1736
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
1737
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
1736
+ --bic-filter-group-background: var(--bi-basic-white);
1737
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
1738
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
1739
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
1738
1740
  --bic-filter-group-border-color: var(--bi-neutral-15);
1739
1741
  --bic-filter-group-text-color: var(--bi-neutral-90);
1740
1742
  }
1741
1743
 
1742
1744
  .bi-filter-group[data-dark="true"] {
1743
- --bic-filter-group-background-color: var(--bi-neutral-90);
1744
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
1745
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
1745
+ --bic-filter-group-background: var(--bi-neutral-90);
1746
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
1747
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
1748
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
1746
1749
  --bic-filter-group-border-color: var(--bi-neutral-70);
1747
1750
  --bic-filter-group-text-color: var(--bi-basic-white);
1748
1751
  }
@@ -1758,10 +1761,10 @@ body:has(.bi-dialog:modal) {
1758
1761
  height: var(--bi-scale-12x);
1759
1762
  color: var(--bic-filter-group-text-color);
1760
1763
  align-items: center;
1761
- gap: var(--bi-scale-2x);
1764
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1762
1765
  width: 100%;
1763
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1764
- background: var(--bic-filter-group-background-color);
1766
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1767
+ background: var(--bic-filter-group-background);
1765
1768
  cursor: pointer;
1766
1769
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1767
1770
  -webkit-user-select: none;
@@ -1770,8 +1773,14 @@ body:has(.bi-dialog:modal) {
1770
1773
  display: flex;
1771
1774
  }
1772
1775
 
1773
- .bi-filter-group > button:hover {
1774
- background: var(--bic-filter-group-background-color-hover);
1776
+ @media (hover: hover) and (pointer: fine) {
1777
+ .bi-filter-group > button:hover {
1778
+ background: var(--bic-filter-group-background-hover);
1779
+ }
1780
+ }
1781
+
1782
+ .bi-filter-group > button:active {
1783
+ background: var(--bic-filter-group-background-press);
1775
1784
  }
1776
1785
 
1777
1786
  .bi-filter-group > button:focus-visible {
@@ -1808,12 +1817,20 @@ body:has(.bi-dialog:modal) {
1808
1817
  width: 100%;
1809
1818
  }
1810
1819
 
1820
+ .bi-filter-group:last-of-type > button {
1821
+ border-radius: var(--bi-radius-small);
1822
+ border-bottom-color: #0000;
1823
+ }
1824
+
1811
1825
  .bi-filter-group:last-of-type > div {
1812
1826
  padding: var(--bi-scale-2x) 0;
1813
1827
  }
1814
1828
 
1829
+ .bi-filter-group[data-expanded="true"] {
1830
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1831
+ }
1832
+
1815
1833
  .bi-filter-group[data-expanded="true"] > button {
1816
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1817
1834
  border-radius: var(--bi-radius-small);
1818
1835
  border-bottom-color: #0000;
1819
1836
  }
@@ -1993,37 +2010,35 @@ body:has(.bi-dialog:modal) {
1993
2010
  }
1994
2011
 
1995
2012
  .bi-input {
2013
+ --bic-input-border-color-invalid: var(--bi-alert-50);
2014
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2015
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2016
+ --bic-input-caret-color: var(--bi-primary-50);
2017
+ --bic-input-font-size: 1rem;
1996
2018
  --bic-input-padding: var(--bi-scale-3x);
1997
2019
  --bic-input-size: var(--bi-scale-11x);
1998
- --bic-input-font-size: 1rem;
2020
+ --bic-input-toggle-background: var(--bi-primary-50);
2021
+ --bic-input-toggle-color: var(--bi-basic-white);
1999
2022
  --bic-input-toggle-size: 1.125rem;
2000
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
2001
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
2002
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
2003
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2004
- --bic-input-border-style: var(--bic-field-border-style, solid);
2005
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
2006
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2007
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
2008
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
2009
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
2010
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2011
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2012
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2023
+ --bic-input-background: var(--bi-basic-white);
2024
+ --bic-input-background-readonly: var(--bi-neutral-10);
2025
+ --bic-input-border-color: var(--bi-neutral-50);
2026
+ --bic-input-border-color-hover: var(--bi-neutral-50);
2027
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
2028
+ --bic-input-color-readonly: var(--bi-neutral-95);
2029
+ --bic-input-color: var(--bi-neutral-95);
2030
+ --bic-input-disabled-color: var(--bi-neutral-50);
2031
+ --bic-input-placeholder-color: var(--bi-neutral-60);
2013
2032
  }
2014
2033
 
2015
2034
  .bi-input[data-dark="true"] {
2016
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
2017
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
2018
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
2019
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2020
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2021
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
2022
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
2023
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
2024
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2025
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2026
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2035
+ --bic-input-background: var(--bi-neutral-95);
2036
+ --bic-input-background-readonly: var(--bi-neutral-50);
2037
+ --bic-input-border-color-hover: var(--bi-neutral-25);
2038
+ --bic-input-color-readonly: var(--bi-basic-white);
2039
+ --bic-input-color: var(--bi-basic-white);
2040
+ --bic-input-disabled-color: var(--bi-neutral-40);
2041
+ --bic-input-placeholder-color: var(--bi-neutral-30);
2027
2042
  }
2028
2043
 
2029
2044
  .bi-input {
@@ -2031,9 +2046,7 @@ body:has(.bi-dialog:modal) {
2031
2046
  appearance: none;
2032
2047
  background: var(--bic-input-background);
2033
2048
  border-radius: var(--bi-radius-medium);
2034
- border-width: var(--bic-input-border-width);
2035
- border-style: var(--bic-input-border-style);
2036
- border-color: var(--bic-input-border-color);
2049
+ box-shadow: var(--bic-input-box-shadow);
2037
2050
  box-sizing: border-box;
2038
2051
  color: var(--bic-input-color);
2039
2052
  font-family: inherit;
@@ -2043,7 +2056,10 @@ body:has(.bi-dialog:modal) {
2043
2056
  max-width: 100%;
2044
2057
  padding: var(--bic-input-padding);
2045
2058
  vertical-align: middle;
2059
+ caret-color: var(--bic-input-caret-color);
2060
+ border: none;
2046
2061
  line-height: 1;
2062
+ transition: box-shadow .25s ease-in-out;
2047
2063
  position: relative;
2048
2064
  }
2049
2065
 
@@ -2061,15 +2077,19 @@ body:has(.bi-dialog:modal) {
2061
2077
  }
2062
2078
 
2063
2079
  .bi-input:focus-visible {
2064
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2065
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2066
- outline-offset: var(--_bi--focus, 2px);
2080
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2081
+ outline-offset: 0;
2082
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2067
2083
  }
2068
2084
 
2069
2085
  .bi-input:focus-visible * {
2070
2086
  --_bi--focus: ;
2071
2087
  }
2072
2088
 
2089
+ .bi-input::placeholder {
2090
+ color: var(--bic-input-placeholder-color);
2091
+ }
2092
+
2073
2093
  .bi-input:not([size], [cols]) {
2074
2094
  width: 100%;
2075
2095
  }
@@ -2088,19 +2108,19 @@ body:has(.bi-dialog:modal) {
2088
2108
 
2089
2109
  .bi-input[readonly] {
2090
2110
  background: var(--bic-input-background-readonly);
2091
- border-color: var(--bic-input-border-color-readonly);
2111
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2092
2112
  color: var(--bic-input-color-readonly);
2093
2113
  }
2094
2114
 
2095
2115
  .bi-input:disabled {
2096
2116
  background: var(--bic-input-background-readonly);
2097
- border-color: var(--bic-input-border-color-readonly);
2117
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2098
2118
  color: var(--bic-input-color-readonly);
2099
2119
  }
2100
2120
 
2101
2121
  .bi-input[aria-disabled="true"] {
2102
2122
  background: var(--bic-input-background-readonly);
2103
- border-color: var(--bic-input-border-color-readonly);
2123
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2104
2124
  color: var(--bic-input-color-readonly);
2105
2125
  }
2106
2126
 
@@ -2155,16 +2175,28 @@ body:has(.bi-dialog:modal) {
2155
2175
  }
2156
2176
 
2157
2177
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2158
- border-width: var(--bi-stroke-default);
2159
2178
  padding: var(--bi-scale-0-50x);
2160
2179
  line-height: inherit;
2161
2180
  height: var(--bic-input-toggle-size);
2162
2181
  width: var(--bic-input-toggle-size);
2182
+ box-shadow: none;
2183
+ border-width: var(--bi-stroke-default);
2184
+ border-style: solid;
2163
2185
  border-color: var(--bic-input-border-color);
2164
2186
  background: none;
2165
2187
  flex-shrink: 0;
2166
2188
  }
2167
2189
 
2190
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2191
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2192
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2193
+ outline-offset: var(--_bi--focus, 2px);
2194
+ }
2195
+
2196
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2197
+ --_bi--focus: ;
2198
+ }
2199
+
2168
2200
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2169
2201
  cursor: pointer;
2170
2202
  }
@@ -2236,16 +2268,28 @@ body:has(.bi-dialog:modal) {
2236
2268
  }
2237
2269
 
2238
2270
  .bi-input:is([type="checkbox"], [type="radio"]) {
2239
- border-width: var(--bi-stroke-default);
2240
2271
  padding: var(--bi-scale-0-50x);
2241
2272
  line-height: inherit;
2242
2273
  height: var(--bic-input-toggle-size);
2243
2274
  width: var(--bic-input-toggle-size);
2275
+ box-shadow: none;
2276
+ border-width: var(--bi-stroke-default);
2277
+ border-style: solid;
2244
2278
  border-color: var(--bic-input-border-color);
2245
2279
  background: none;
2246
2280
  flex-shrink: 0;
2247
2281
  }
2248
2282
 
2283
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2284
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2285
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2286
+ outline-offset: var(--_bi--focus, 2px);
2287
+ }
2288
+
2289
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2290
+ --_bi--focus: ;
2291
+ }
2292
+
2249
2293
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2250
2294
  cursor: pointer;
2251
2295
  }
@@ -2540,7 +2584,7 @@ body:has(.bi-dialog:modal) {
2540
2584
  }
2541
2585
 
2542
2586
  .bi-navbar[data-fixed="true"] > header {
2543
- z-index: 110;
2587
+ z-index: 130;
2544
2588
  position: fixed;
2545
2589
  top: 0;
2546
2590
  left: 0;
@@ -2706,6 +2750,10 @@ body:has(.bi-dialog:modal) {
2706
2750
  display: inline;
2707
2751
  }
2708
2752
 
2753
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2754
+ color: var(--bi-primary-50);
2755
+ }
2756
+
2709
2757
  .bi-search .bi-field--affix:last-child {
2710
2758
  --bic-field-padding-inline: 0;
2711
2759
  }
@@ -2748,7 +2796,7 @@ body:has(.bi-dialog:modal) {
2748
2796
  border-radius: var(--bi-radius-medium);
2749
2797
  outline-offset: 2px;
2750
2798
  outline: 1.5px solid var(--bi-primary-50);
2751
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2799
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2752
2800
  }
2753
2801
 
2754
2802
  .bi-spinner {
@@ -2831,6 +2879,7 @@ body:has(.bi-dialog:modal) {
2831
2879
  }
2832
2880
 
2833
2881
  .bi-tabs .bi-tabs--list {
2882
+ scrollbar-width: none;
2834
2883
  flex-direction: row;
2835
2884
  flex-shrink: 0;
2836
2885
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.20",
3
+ "version": "0.2.22",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -23,7 +23,7 @@
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.2.20"
26
+ "@bi-digital/tokens": "0.2.22"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",