@bi-digital/css 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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/details.css +1 -1
  7. package/dist/components/dialog.css +3 -3
  8. package/dist/components/dropdown.css +3 -3
  9. package/dist/components/field.css +7 -37
  10. package/dist/components/filter-group.css +3 -3
  11. package/dist/components/input.css +11 -39
  12. package/dist/components/label.css +1 -5
  13. package/dist/components/navbar.css +7 -1
  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 +135 -144
  18. package/dist/index.css +61 -224
  19. package/dist/reset.css +2 -14
  20. package/dist/salesforce.css +192 -403
  21. package/dist/tokens.css +57 -203
  22. package/package.json +3 -3
package/dist/baseline.css CHANGED
@@ -1,10 +1,5 @@
1
- body {
2
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
3
- line-height: 1.5;
4
- }
5
-
6
- :host {
7
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
1
+ body, :host {
2
+ font-family: museo-sans, Arial, sans-serif, system-ui;
8
3
  line-height: 1.5;
9
4
  }
10
5
 
package/dist/components/alert.css CHANGED
@@ -90,6 +90,30 @@
90
90
  --bic-alert-color: var(--bi-warning-5);
91
91
  }
92
92
 
93
+ .bi-alert[data-variant="info"] {
94
+ --bic-alert-background: var(--bi-info-5);
95
+ --bic-alert-border-color: var(--bi-info-10);
96
+ --bic-alert-color: var(--bi-info-90);
97
+ }
98
+
99
+ .bi-alert[data-variant="info"][data-dark="true"] {
100
+ --bic-alert-background: var(--bi-info-90);
101
+ --bic-alert-border-color: var(--bi-info-80);
102
+ --bic-alert-color: var(--bi-info-10);
103
+ }
104
+
105
+ .bi-alert[data-variant="neutral"] {
106
+ --bic-alert-background: var(--bi-neutral-10);
107
+ --bic-alert-border-color: var(--bi-neutral-15);
108
+ --bic-alert-color: var(--bi-neutral-95);
109
+ }
110
+
111
+ .bi-alert[data-variant="neutral"][data-dark="true"] {
112
+ --bic-alert-background: var(--bi-neutral-90);
113
+ --bic-alert-border-color: var(--bi-neutral-90);
114
+ --bic-alert-color: var(--bi-neutral-30);
115
+ }
116
+
93
117
  .bi-alert:has( > .bi-alert--footer) {
94
118
  width: 100%;
95
119
  }
package/dist/components/button.css CHANGED
@@ -83,7 +83,7 @@
83
83
  --bic-button-background: var(--bi-primary-50);
84
84
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
85
85
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
86
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
86
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
87
87
  }
88
88
 
89
89
  .bi-button[data-variant="filled"] {
@@ -91,7 +91,7 @@
91
91
  --bic-button-background: var(--bi-primary-50);
92
92
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
93
93
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
94
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
94
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
95
95
  }
96
96
 
97
97
  .bi-button[data-variant="outlined"] {
@@ -129,17 +129,13 @@
129
129
 
130
130
  .bi-button[data-variant="flat"][data-dark="true"] {
131
131
  --bic-button-color: var(--bi-basic-white);
132
- --bic-button-background: rgba(255, 255, 255, .1);
132
+ --bic-button-background: #ffffff1a;
133
133
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
134
134
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
135
135
  }
136
136
 
137
137
  @media (hover: hover) and (pointer: fine) {
138
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
139
- background: var(--bic-button-background-hover);
140
- }
141
-
142
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
138
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
143
139
  background: var(--bic-button-background-hover);
144
140
  }
145
141
  }
@@ -164,11 +160,7 @@
164
160
  cursor: progress;
165
161
  }
166
162
 
167
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
168
- background: var(--bic-button-background-press);
169
- }
170
-
171
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
163
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
172
164
  background: var(--bic-button-background-press);
173
165
  }
174
166
 
package/dist/components/card.css CHANGED
@@ -1,34 +1,52 @@
1
1
  .bi-card {
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);
4
- --bic-card-border-radius: var(--bi-radius-medium);
5
2
  --bic-card-background-color: var(--bi-basic-white);
3
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
4
+ --bic-card-border-color: var(--bi-neutral-15);
6
5
  --bic-card-color: var(--bi-neutral-95);
7
6
  --bic-card-header-title-color: var(--bi-neutral-95);
8
7
  --bic-card-header-bold-color: var(--bi-primary-60);
9
8
  --bic-card-header-label-color: var(--bi-neutral-50);
10
- --bic-card-actions-background-color: var(--bi-neutral-10);
11
- --bic-card-actions-icon-color: var(--bi-primary-50);
12
- --bic-card-actions-flex-direction: column;
13
- --bic-card-content-padding: var(--bi-scale-4x);
14
9
  --bic-card-content-color: var(--bi-neutral-50);
10
+ --bic-card-content-padding: var(--bi-scale-4x);
11
+ --bic-card-border-radius: var(--bi-radius-medium);
15
12
  --bic-card-content-lines: 2;
16
13
  --bic-card-media-width: 100%;
17
14
  --bic-card-media-date-width: 3.1875rem;
18
15
  --bic-card-media-date-height: 2.875rem;
16
+ --bic-card-actions-flex-direction: column;
17
+ --bic-card-actions-background-color: var(--bi-neutral-10);
18
+ --bic-card-actions-icon-color: var(--bi-primary-50);
19
+ --bic-card-border-hover-color: var(--bi-neutral-50);
20
+ --bic-card-box-shadow-hover-color: #0000000d;
21
+ --bic-card-box-shadow-focus-color: var(--bi-primary-50);
22
+ --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
23
+ --bic-card-box-shadow-focus-outer-border: 6px;
24
+ --bic-card-box-shadow-focus-inner-border: 4px;
25
+ --bic-card-border-active-color: var(--bi-primary-50);
26
+ --bic-card-box-shadow-active-color: #0000000d;
27
+ --bic-card-box-shadow-active-outer-border: 20px;
28
+ --bic-card-box-shadow-active-inner-border: 10px;
19
29
  }
20
30
 
21
31
  .bi-card[data-dark="true"] {
32
+ --bic-card-background-color: var(--bi-neutral-90);
22
33
  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
23
34
  --bic-card-border-color: var(--bi-neutral-70);
24
- --bic-card-background-color: var(--bi-neutral-95);
25
35
  --bic-card-color: var(--bi-neutral-5);
26
36
  --bic-card-header-title-color: var(--bi-neutral-5);
27
37
  --bic-card-header-bold-color: var(--bi-primary-20);
28
38
  --bic-card-header-label-color: var(--bi-neutral-30);
29
- --bic-card-actions-background-color: var(--bi-neutral-75);
30
- --bic-card-actions-icon-color: var(--bi-primary-20);
31
39
  --bic-card-content-color: var(--bi-neutral-30);
40
+ --bic-card-actions-background-color: var(--bi-neutral-75);
41
+ --bic-card-actions-icon-color: var(--bi-neutral-10);
42
+ --bic-card-border-hover-color: var(--bi-neutral-25);
43
+ --bic-card-box-shadow-hover-color: #b2cdf40d;
44
+ --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
45
+ --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
46
+ --bic-card-box-shadow-focus-outer-border: 4.5px;
47
+ --bic-card-box-shadow-focus-inner-border: 4px;
48
+ --bic-card-border-active-color: var(--bi-primary-50);
49
+ --bic-card-box-shadow-active-color: #b2cdf40d;
32
50
  }
33
51
 
34
52
  .bi-card {
@@ -107,6 +125,23 @@
107
125
  --bic-card-header-label-color: var(--bi-warning-90);
108
126
  }
109
127
 
128
+ .bi-card[data-color="primary"][data-dark="true"] {
129
+ --bic-card-background-color: var(--bi-primary-90);
130
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
131
+ --bic-card-border-color: var(--bi-primary-75);
132
+ --bic-card-color: var(--bi-neutral-5);
133
+ --bic-card-header-title-color: var(--bi-neutral-5);
134
+ --bic-card-header-bold-color: var(--bi-primary-20);
135
+ --bic-card-header-label-color: var(--bi-neutral-30);
136
+ --bic-card-content-color: var(--bi-neutral-30);
137
+ --bic-card-actions-background-color: var(--bi-primary-85);
138
+ --bic-card-actions-icon-color: var(--bi-primary-10);
139
+ --bic-card-border-hover-color: var(--bi-primary-40);
140
+ --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
141
+ --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
142
+ --bic-card-border-active-color: var(--bi-primary-10);
143
+ }
144
+
110
145
  .bi-card[data-error="true"] {
111
146
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
112
147
  --bic-card-border-color: transparent;
@@ -154,8 +189,8 @@
154
189
  }
155
190
 
156
191
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
157
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
158
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
192
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
193
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
159
194
  outline-offset: var(--_bi--focus, 2px);
160
195
  }
161
196
 
@@ -165,12 +200,12 @@
165
200
 
166
201
  @media (hover: hover) and (pointer: fine) {
167
202
  .bi-card:-webkit-any(a, button):not(.disabled):hover {
168
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
203
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
169
204
  }
170
205
  }
171
206
 
172
207
  .bi-card:-webkit-any(a, button):not(.disabled):active {
173
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
208
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
174
209
  }
175
210
 
176
211
  .bi-card:-webkit-any(a, button):disabled {
@@ -185,8 +220,8 @@
185
220
  }
186
221
 
187
222
  .bi-card:is(a, button):not(.disabled):focus-visible {
188
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
189
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
223
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
224
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
190
225
  outline-offset: var(--_bi--focus, 2px);
191
226
  }
192
227
 
@@ -196,12 +231,12 @@
196
231
 
197
232
  @media (hover: hover) and (pointer: fine) {
198
233
  .bi-card:is(a, button):not(.disabled):hover {
199
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
234
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
200
235
  }
201
236
  }
202
237
 
203
238
  .bi-card:is(a, button):not(.disabled):active {
204
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
239
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
205
240
  }
206
241
 
207
242
  .bi-card:is(a, button):disabled {
@@ -216,8 +251,8 @@
216
251
  }
217
252
 
218
253
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
219
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
220
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
254
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
255
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
221
256
  outline-offset: var(--_bi--focus, 2px);
222
257
  }
223
258
 
@@ -227,12 +262,12 @@
227
262
 
228
263
  @media (hover: hover) and (pointer: fine) {
229
264
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
230
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
265
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
231
266
  }
232
267
  }
233
268
 
234
269
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
235
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
270
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
236
271
  }
237
272
 
238
273
  .bi-card .bi-card--content:-webkit-any(a, button):disabled {
@@ -247,8 +282,8 @@
247
282
  }
248
283
 
249
284
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
250
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
251
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
285
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
286
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
252
287
  outline-offset: var(--_bi--focus, 2px);
253
288
  }
254
289
 
@@ -258,12 +293,12 @@
258
293
 
259
294
  @media (hover: hover) and (pointer: fine) {
260
295
  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
261
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
296
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
262
297
  }
263
298
  }
264
299
 
265
300
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
266
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
301
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
267
302
  }
268
303
 
269
304
  .bi-card .bi-card--content:is(a, button):disabled {
@@ -408,7 +443,7 @@
408
443
  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
409
444
  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
410
445
  background: var(--bic-card-background-color);
411
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) rgba(38, 51, 63, .05), 0px 4px 6px 0px rgba(38, 51, 63, .05);
446
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
412
447
  color: var(--bic-card-header-title-color);
413
448
  text-align: center;
414
449
  flex-direction: column;
package/dist/components/checkbox-subsection.css CHANGED
@@ -10,7 +10,7 @@
10
10
  .bi-checkbox-subsection > div:first-child {
11
11
  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
12
12
  background-color: var(--bic-checkbox-subsection-line-bg);
13
- width: var(--bi-stroke-default);
13
+ width: var(--bi-stroke-medium);
14
14
  }
15
15
 
16
16
  .bi-checkbox-subsection > div:last-child {
package/dist/components/details.css CHANGED
@@ -3,7 +3,7 @@ details.bi-details {
3
3
  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
4
4
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
5
5
  --bic-details-color: var(--bi-neutral-90);
6
- --bic-details-border-color: var(--bi-stroke-color-1);
6
+ --bic-details-border-color: var(--bi-neutral-15);
7
7
  --bic-details-padding: var(--bi-scale-4x);
8
8
  }
9
9
 
package/dist/components/dialog.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-dialog {
2
2
  --bic-dialog-animation-duration: .2s;
3
- --bic-dialog-backdrop-background: rgba(0, 0, 0, .5);
3
+ --bic-dialog-backdrop-background: #00000080;
4
4
  --bic-dialog-background: var(--bi-basic-white);
5
5
  --bic-dialog-border-color: var(--bi-neutral-15);
6
6
  --bic-dialog-icon-spacing: .625rem;
@@ -20,7 +20,7 @@
20
20
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
21
21
  background: var(--bic-dialog-background);
22
22
  border-radius: var(--bi-radius-large);
23
- box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 rgba(0, 0, 0, .25);
23
+ box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
24
24
  color: var(--bic-dialog-color);
25
25
  max-height: var(--bic-dialog-max-height);
26
26
  max-width: var(--bic-dialog-max-width);
@@ -39,7 +39,7 @@
39
39
 
40
40
  .bi-dialog::backdrop {
41
41
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
42
- background: var(--bic-dialog-backdrop-background, rgba(0, 0, 0, .5));
42
+ background: var(--bic-dialog-backdrop-background, #00000080);
43
43
  }
44
44
 
45
45
  .bi-dialog[open] {
package/dist/components/dropdown.css CHANGED
@@ -5,15 +5,15 @@
5
5
  --bic-dropdown-background: var(--bi-basic-white);
6
6
  --bic-dropdown-border-width: var(--bi-stroke-thin);
7
7
  --bic-dropdown-border-style: solid;
8
- --bic-dropdown-border-color: var(--bi-stroke-color-1);
9
- --bic-dropdown-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
8
+ --bic-dropdown-border-color: var(--bi-neutral-15);
9
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
10
10
  }
11
11
 
12
12
  .bi-dropdown[data-dark="true"] {
13
13
  --bic-dropdown-background: var(--bi-neutral-100);
14
14
  --bic-dropdown-border-color: var(--bi-neutral-90);
15
15
  --bic-dropdown-color: var(--bi-neutral-5);
16
- --bic-dropdown-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
16
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
17
17
  }
18
18
 
19
19
  .bi-dropdown {
package/dist/components/field.css CHANGED
@@ -117,19 +117,11 @@
117
117
  gap: 0;
118
118
  }
119
119
 
120
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
120
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
121
121
  background: var(--_bi--hover, var(--bic-field-background-hover));
122
122
  }
123
123
 
124
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
125
- --_bi--hover: ;
126
- }
127
-
128
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
129
- background: var(--_bi--hover, var(--bic-field-background-hover));
130
- }
131
-
132
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
124
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
133
125
  --_bi--hover: ;
134
126
  }
135
127
 
@@ -200,19 +192,11 @@
200
192
  gap: 0;
201
193
  }
202
194
 
203
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
204
- background: var(--_bi--hover, var(--bic-field-background-hover));
205
- }
206
-
207
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
208
- --_bi--hover: ;
209
- }
210
-
211
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
195
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
212
196
  background: var(--_bi--hover, var(--bic-field-background-hover));
213
197
  }
214
198
 
215
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
199
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
216
200
  --_bi--hover: ;
217
201
  }
218
202
 
@@ -267,7 +251,7 @@
267
251
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
268
252
  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
269
253
  outline-offset: 0;
270
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05));
254
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
271
255
  }
272
256
 
273
257
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -285,14 +269,7 @@
285
269
  display: flex;
286
270
  }
287
271
 
288
- .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
289
- border-top-left-radius: inherit;
290
- border-bottom-left-radius: inherit;
291
- border-right: 0;
292
- padding-right: 0;
293
- }
294
-
295
- .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
272
+ .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
296
273
  border-top-left-radius: inherit;
297
274
  border-bottom-left-radius: inherit;
298
275
  border-right: 0;
@@ -313,14 +290,7 @@
313
290
  padding-left: 0;
314
291
  }
315
292
 
316
- .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
317
- border-top-right-radius: inherit;
318
- border-bottom-right-radius: inherit;
319
- border-left: 0;
320
- padding-left: 0;
321
- }
322
-
323
- .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
293
+ .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
324
294
  border-top-right-radius: inherit;
325
295
  border-bottom-right-radius: inherit;
326
296
  border-left: 0;
package/dist/components/filter-group.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --bic-filter-group-background: var(--bi-basic-white);
3
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
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
+ --bic-filter-group-background-expanded: var(--bi-neutral-15);
6
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
7
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
8
8
  }
@@ -85,7 +85,7 @@
85
85
 
86
86
  .bi-filter-group:last-of-type > button {
87
87
  border-radius: var(--bi-radius-small);
88
- border-bottom-color: rgba(0, 0, 0, 0);
88
+ border-bottom-color: #0000;
89
89
  }
90
90
 
91
91
  .bi-filter-group:last-of-type > div {
@@ -98,7 +98,7 @@
98
98
 
99
99
  .bi-filter-group[data-expanded="true"] > button {
100
100
  border-radius: var(--bi-radius-small);
101
- border-bottom-color: rgba(0, 0, 0, 0);
101
+ border-bottom-color: #0000;
102
102
  }
103
103
 
104
104
  .bi-filter-group[data-expanded="true"] > div {
package/dist/components/input.css CHANGED
@@ -62,26 +62,18 @@
62
62
  --bic-input-font-size: 1.25rem;
63
63
  }
64
64
 
65
- .bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):hover {
65
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
66
66
  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
67
67
  }
68
68
 
69
- .bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):focus-visible {
70
- --bic-input-border-color: var(--bi-primary-50);
71
- }
72
-
73
- .bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):hover {
74
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
75
- }
76
-
77
- .bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):focus-visible {
69
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
78
70
  --bic-input-border-color: var(--bi-primary-50);
79
71
  }
80
72
 
81
73
  .bi-input:focus-visible {
82
74
  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
83
75
  outline-offset: 0;
84
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05));
76
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
85
77
  }
86
78
 
87
79
  .bi-input:focus-visible * {
@@ -92,11 +84,7 @@
92
84
  color: var(--bic-input-placeholder-color);
93
85
  }
94
86
 
95
- .bi-input:not(:-webkit-any([size], [cols])) {
96
- width: 100%;
97
- }
98
-
99
- .bi-input:not(:is([size], [cols])) {
87
+ .bi-input:not([size], [cols]) {
100
88
  width: 100%;
101
89
  }
102
90
 
@@ -150,26 +138,18 @@
150
138
  field-sizing: content;
151
139
  }
152
140
 
153
- .bi-input:-webkit-any(select):not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
154
- cursor: pointer;
155
- }
156
-
157
- .bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
141
+ .bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
158
142
  cursor: pointer;
159
143
  }
160
144
 
161
- .bi-input:is(select) {
145
+ .bi-input:-webkit-any(select) {
162
146
  background-image: var(--bic-input-select-chevron);
163
147
  background-position: calc(100% - .5em);
164
148
  background-repeat: no-repeat;
165
149
  background-size: 1.5em;
166
150
  }
167
151
 
168
- .bi-input:-webkit-any(select):not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
169
- cursor: pointer;
170
- }
171
-
172
- .bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
152
+ .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
173
153
  cursor: pointer;
174
154
  }
175
155
 
@@ -186,7 +166,7 @@
186
166
  height: var(--bic-input-toggle-size);
187
167
  width: var(--bic-input-toggle-size);
188
168
  box-shadow: none;
189
- border-width: var(--bi-stroke-default);
169
+ border-width: var(--bi-stroke-medium);
190
170
  border-style: solid;
191
171
  border-color: var(--bic-input-border-color);
192
172
  background: none;
@@ -203,11 +183,7 @@
203
183
  --_bi--focus: ;
204
184
  }
205
185
 
206
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):read-only:not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
207
- cursor: pointer;
208
- }
209
-
210
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
186
+ .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
211
187
  cursor: pointer;
212
188
  }
213
189
 
@@ -283,7 +259,7 @@
283
259
  height: var(--bic-input-toggle-size);
284
260
  width: var(--bic-input-toggle-size);
285
261
  box-shadow: none;
286
- border-width: var(--bi-stroke-default);
262
+ border-width: var(--bi-stroke-medium);
287
263
  border-style: solid;
288
264
  border-color: var(--bic-input-border-color);
289
265
  background: none;
@@ -300,11 +276,7 @@
300
276
  --_bi--focus: ;
301
277
  }
302
278
 
303
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):read-only:not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
304
- cursor: pointer;
305
- }
306
-
307
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
279
+ .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
308
280
  cursor: pointer;
309
281
  }
310
282
 
package/dist/components/label.css CHANGED
@@ -29,11 +29,7 @@
29
29
  color: var(--bic-label-required-color);
30
30
  }
31
31
 
32
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
33
- padding-right: var(--bi-scale-0-25x);
34
- }
35
-
36
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
32
+ .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
37
33
  padding-right: var(--bi-scale-0-25x);
38
34
  }
39
35
 
package/dist/components/navbar.css CHANGED
@@ -18,12 +18,18 @@
18
18
  align-items: center;
19
19
  gap: var(--bi-scale-6x);
20
20
  width: 100%;
21
- padding: 0 var(--bi-scale-3x);
21
+ padding: 0 var(--bi-scale-6x);
22
22
  background-color: inherit;
23
23
  color: inherit;
24
24
  display: flex;
25
25
  }
26
26
 
27
+ @media not (min-width: 768px) {
28
+ .bi-navbar > header {
29
+ padding: 0 var(--bi-scale-4x);
30
+ }
31
+ }
32
+
27
33
  @media (prefers-reduced-motion: no-preference) {
28
34
  .bi-navbar > header {
29
35
  transition: transform .2s ease-in-out;
package/dist/components/popover.css CHANGED
@@ -2,19 +2,19 @@
2
2
  --bic-popover-background: var(--bi-basic-white);
3
3
  --bic-popover-border-width: var(--bi-stroke-thin);
4
4
  --bic-popover-border-style: solid;
5
- --bic-popover-border-color: var(--bi-stroke-color-1);
5
+ --bic-popover-border-color: var(--bi-neutral-15);
6
6
  --bic-popover-color: var(--bi-neutral-90);
7
7
  --bic-popover-border-radius: var(--bi-radius-medium);
8
8
  --bic-popover-max-width: 300px;
9
9
  --bic-popover-padding: var(--bi-scale-1x);
10
- --bic-popover-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
10
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
11
11
  }
12
12
 
13
13
  .bi-popover[data-dark="true"] {
14
14
  --bic-popover-background: var(--bi-neutral-95);
15
15
  --bic-popover-border-color: var(--bi-neutral-70);
16
16
  --bic-popover-color: var(--bi-neutral-5);
17
- --bic-popover-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
17
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
18
18
  }
19
19
 
20
20
  .bi-popover {