@bi-digital/css 0.0.0-experimental-b8ff5ba → 0.0.0-experimental-37bf70d

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 (25) hide show
  1. package/dist/baseline.css +7 -9
  2. package/dist/components/alert.css +1 -1
  3. package/dist/components/button.css +13 -5
  4. package/dist/components/card.css +19 -13
  5. package/dist/components/chip.css +1 -1
  6. package/dist/components/details.css +136 -0
  7. package/dist/components/dialog.css +3 -3
  8. package/dist/components/dropdown.css +2 -2
  9. package/dist/components/field.css +37 -7
  10. package/dist/components/filter-group.css +3 -3
  11. package/dist/components/footer.css +10 -11
  12. package/dist/components/icons.css +45 -0
  13. package/dist/components/input.css +37 -9
  14. package/dist/components/label.css +5 -1
  15. package/dist/components/popover.css +2 -2
  16. package/dist/components/spinner.css +3 -3
  17. package/dist/components/validation-message.css +8 -4
  18. package/dist/components.css +327 -65
  19. package/dist/index.css +218 -22
  20. package/dist/reset.css +14 -2
  21. package/dist/salesforce.css +3717 -0
  22. package/dist/tokens.css +197 -11
  23. package/package.json +17 -5
  24. package/dist/assets/icons/bi-cart.svg +0 -3
  25. package/dist/icons.css +0 -58
package/dist/components/input.css CHANGED
@@ -62,18 +62,26 @@
62
62
  --bic-input-font-size: 1.25rem;
63
63
  }
64
64
 
65
- .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
65
+ .bi-input:where(:not(:-webkit-any([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([type="checkbox"], [type="radio"])):focus-visible {
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 {
70
78
  --bic-input-border-color: var(--bi-primary-50);
71
79
  }
72
80
 
73
81
  .bi-input:focus-visible {
74
82
  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
75
83
  outline-offset: 0;
76
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
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));
77
85
  }
78
86
 
79
87
  .bi-input:focus-visible * {
@@ -84,7 +92,11 @@
84
92
  color: var(--bic-input-placeholder-color);
85
93
  }
86
94
 
87
- .bi-input:not([size], [cols]) {
95
+ .bi-input:not(:-webkit-any([size], [cols])) {
96
+ width: 100%;
97
+ }
98
+
99
+ .bi-input:not(:is([size], [cols])) {
88
100
  width: 100%;
89
101
  }
90
102
 
@@ -138,18 +150,26 @@
138
150
  field-sizing: content;
139
151
  }
140
152
 
141
- .bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
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)) {
142
158
  cursor: pointer;
143
159
  }
144
160
 
145
- .bi-input:-webkit-any(select) {
161
+ .bi-input:is(select) {
146
162
  background-image: var(--bic-input-select-chevron);
147
163
  background-position: calc(100% - .5em);
148
164
  background-repeat: no-repeat;
149
165
  background-size: 1.5em;
150
166
  }
151
167
 
152
- .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
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)) {
153
173
  cursor: pointer;
154
174
  }
155
175
 
@@ -183,7 +203,11 @@
183
203
  --_bi--focus: ;
184
204
  }
185
205
 
186
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
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)) {
187
211
  cursor: pointer;
188
212
  }
189
213
 
@@ -276,7 +300,11 @@
276
300
  --_bi--focus: ;
277
301
  }
278
302
 
279
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
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)) {
280
308
  cursor: pointer;
281
309
  }
282
310
 
package/dist/components/label.css CHANGED
@@ -29,7 +29,11 @@
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(: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(:-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 {
33
37
  padding-right: var(--bi-scale-0-25x);
34
38
  }
35
39
 
package/dist/components/popover.css CHANGED
@@ -7,14 +7,14 @@
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 #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
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);
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 #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
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);
18
18
  }
19
19
 
20
20
  .bi-popover {
package/dist/components/spinner.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .bi-spinner {
2
2
  --bic-spinner-color: currentColor;
3
3
  aspect-ratio: 1;
4
- background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
4
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, rgba(0, 0, 0, 0)) top / 4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 30%, var(--bic-spinner-color));
5
5
  border-radius: 50%;
6
6
  width: 1em;
7
7
  height: 1em;
8
8
  animation: 1s linear infinite bi-spinner;
9
- -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
10
- mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
9
+ -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
10
+ mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
11
11
  }
12
12
 
13
13
  @media (prefers-reduced-motion: reduce) {
package/dist/components/validation-message.css CHANGED
@@ -15,19 +15,23 @@
15
15
  position: relative;
16
16
  }
17
17
 
18
- .bi-validation-message:has( > [data-bi-icon="true"]):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)) {
18
+ .bi-validation-message:has( > svg):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))) {
19
19
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
20
20
  }
21
21
 
22
- .bi-validation-message:has( > [data-bi-icon="true"]):-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)) {
22
+ .bi-validation-message:has( > svg):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))) {
23
+ padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
24
+ }
25
+
26
+ .bi-validation-message:has( > svg):-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)) {
23
27
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
24
28
  }
25
29
 
26
- .bi-validation-message:has( > [data-bi-icon="true"]):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)) {
30
+ .bi-validation-message:has( > svg):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)) {
27
31
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
28
32
  }
29
33
 
30
- .bi-validation-message > [data-bi-icon="true"] {
34
+ .bi-validation-message > svg {
31
35
  font-size: var(--bic-validation-message-icon-size);
32
36
  top: var(--bic-validation-message-padding);
33
37
  left: var(--bic-validation-message-padding);