@bi-digital/css 0.11.10 → 0.12.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 (36) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +52 -114
  3. package/dist/components/avatar.css +11 -59
  4. package/dist/components/badge.css +25 -92
  5. package/dist/components/button.css +108 -131
  6. package/dist/components/card.css +232 -309
  7. package/dist/components/checkbox-subsection.css +13 -17
  8. package/dist/components/chip.css +41 -185
  9. package/dist/components/details.css +86 -105
  10. package/dist/components/dialog.css +97 -102
  11. package/dist/components/dropdown.css +19 -30
  12. package/dist/components/field.css +203 -219
  13. package/dist/components/fieldset.css +18 -26
  14. package/dist/components/filter-group.css +76 -94
  15. package/dist/components/footer.css +104 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +188 -206
  18. package/dist/components/label.css +15 -21
  19. package/dist/components/link.css +36 -56
  20. package/dist/components/logo.css +45 -41
  21. package/dist/components/navbar.css +49 -52
  22. package/dist/components/pagination.css +27 -30
  23. package/dist/components/popover.css +37 -46
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +25 -25
  29. package/dist/components/tabs.css +105 -121
  30. package/dist/components/tooltip.css +32 -32
  31. package/dist/components/validation-message.css +11 -11
  32. package/dist/components.css +1695 -2281
  33. package/dist/index.css +509 -10
  34. package/dist/salesforce.css +2200 -2289
  35. package/dist/tokens.css +505 -8
  36. package/package.json +2 -2
package/dist/components/chip.css CHANGED
@@ -1,10 +1,8 @@
1
1
  .bi-chip {
2
- --bic-chip-background: var(--bi-primary-5);
3
- --bic-chip-focus-inner: var(--bi-basic-white);
4
- --bic-chip-focus-outer: var(--bi-primary-50);
5
- --bic-chip-background-hover: var(--bi-states-hover-dark);
6
- --bic-chip-background-press: var(--bi-states-press-dark);
7
- --bic-chip-text-color: var(--bi-neutral-90);
2
+ --bic-chip-background: var(--bi-color-surface);
3
+ --bic-chip-background-selected: var(--bi-color-fill);
4
+ --bic-chip-text-color: var(--bi-color-text-subtle);
5
+ --bic-chip-text-color-selected: var(--bi-color-on-fill);
8
6
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
9
7
  --bic-chip-icon-size: var(--bi-scale-6x);
10
8
  --bic-chip-font: var(--bi-font-body-medium);
@@ -19,189 +17,47 @@
19
17
  align-items: center;
20
18
  display: inline-flex;
21
19
  overflow: hidden;
22
- }
23
-
24
- .bi-chip[data-size="small"] {
25
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
26
- --bic-chip-font: var(--bi-font-body-small);
27
- --bic-chip-icon-size: var(--bi-scale-5x);
28
- }
29
-
30
- .bi-chip[data-size="large"] {
31
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
32
- --bic-chip-font: var(--bi-font-body-large);
33
- }
34
-
35
- .bi-chip[data-dark="true"] {
36
- --bic-chip-focus-inner: var(--bi-neutral-95);
37
- --bic-chip-focus-outer: var(--bi-primary-30);
38
- --bic-chip-background-hover: var(--bi-states-hover-light);
39
- --bic-chip-background-press: var(--bi-states-press-light);
40
- }
41
-
42
- .bi-chip[data-selected="true"] {
43
- --bic-chip-background-hover: var(--bi-states-hover-light);
44
- --bic-chip-background-press: var(--bi-states-press-light);
45
- }
46
-
47
- .bi-chip[data-color="white"] {
48
- --bic-chip-background: var(--bi-basic-white);
49
- }
50
-
51
- .bi-chip[data-color="white"][data-selected="true"] {
52
- --bic-chip-background: var(--bi-neutral-60);
53
- --bic-chip-text-color: var(--bi-basic-white);
54
- }
55
-
56
- .bi-chip[data-color="white"][data-dark="true"] {
57
- --bic-chip-background: var(--bi-neutral-100);
58
- --bic-chip-text-color: var(--bi-basic-white);
59
- }
60
-
61
- .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
62
- --bic-chip-background: var(--bi-neutral-50);
63
- --bic-chip-text-color: var(--bi-basic-white);
64
- }
65
-
66
- .bi-chip[data-color="neutral"] {
67
- --bic-chip-background: var(--bi-neutral-5);
68
- }
69
-
70
- .bi-chip[data-color="neutral"][data-selected="true"] {
71
- --bic-chip-background: var(--bi-neutral-60);
72
- --bic-chip-text-color: var(--bi-basic-white);
73
- }
74
-
75
- .bi-chip[data-color="neutral"][data-dark="true"] {
76
- --bic-chip-background: var(--bi-neutral-95);
77
- --bic-chip-text-color: var(--bi-basic-white);
78
- }
79
-
80
- .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
81
- --bic-chip-background: var(--bi-neutral-50);
82
- --bic-chip-text-color: var(--bi-basic-white);
83
- }
84
-
85
- .bi-chip[data-color="primary"] {
86
- --bic-chip-background: var(--bi-primary-5);
87
- }
88
-
89
- .bi-chip[data-color="primary"][data-selected="true"] {
90
- --bic-chip-background: var(--bi-primary-50);
91
- --bic-chip-text-color: var(--bi-basic-white);
92
- }
93
-
94
- .bi-chip[data-color="primary"][data-dark="true"] {
95
- --bic-chip-background: var(--bi-primary-85);
96
- --bic-chip-text-color: var(--bi-primary-10);
97
- }
98
-
99
- .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
100
- --bic-chip-background: var(--bi-primary-50);
101
- --bic-chip-text-color: var(--bi-basic-white);
102
- }
103
-
104
- .bi-chip[data-color="info"] {
105
- --bic-chip-background: var(--bi-info-5);
106
- }
107
-
108
- .bi-chip[data-color="info"][data-selected="true"] {
109
- --bic-chip-background: var(--bi-info-50);
110
- --bic-chip-text-color: var(--bi-basic-white);
111
- }
112
20
 
113
- .bi-chip[data-color="info"][data-dark="true"] {
114
- --bic-chip-background: var(--bi-info-95);
115
- --bic-chip-text-color: var(--bi-info-15);
116
- }
117
-
118
- .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
119
- --bic-chip-background: var(--bi-info-50);
120
- --bic-chip-text-color: var(--bi-basic-white);
121
- }
122
-
123
- .bi-chip[data-color="alert"] {
124
- --bic-chip-background: var(--bi-alert-10);
125
- }
126
-
127
- .bi-chip[data-color="alert"][data-selected="true"] {
128
- --bic-chip-background: var(--bi-alert-60);
129
- --bic-chip-text-color: var(--bi-basic-white);
130
- }
131
-
132
- .bi-chip[data-color="alert"][data-dark="true"] {
133
- --bic-chip-background: var(--bi-alert-95);
134
- --bic-chip-text-color: var(--bi-alert-15);
135
- }
136
-
137
- .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
138
- --bic-chip-background: var(--bi-alert-60);
139
- --bic-chip-text-color: var(--bi-basic-white);
140
- }
141
-
142
- .bi-chip[data-color="warning"] {
143
- --bic-chip-background: var(--bi-warning-10);
144
- }
145
-
146
- .bi-chip[data-color="warning"][data-selected="true"] {
147
- --bic-chip-background: var(--bi-warning-75);
148
- --bic-chip-text-color: var(--bi-basic-white);
149
- }
150
-
151
- .bi-chip[data-color="warning"][data-dark="true"] {
152
- --bic-chip-background: var(--bi-warning-90);
153
- --bic-chip-text-color: var(--bi-warning-15);
154
- }
155
-
156
- .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
157
- --bic-chip-background: var(--bi-warning-70);
158
- --bic-chip-text-color: var(--bi-basic-white);
159
- }
160
-
161
- .bi-chip[data-color="success"] {
162
- --bic-chip-background: var(--bi-success-5);
163
- }
164
-
165
- .bi-chip[data-color="success"][data-selected="true"] {
166
- --bic-chip-background: var(--bi-success-70);
167
- --bic-chip-text-color: var(--bi-basic-white);
168
- }
169
-
170
- .bi-chip[data-color="success"][data-dark="true"] {
171
- --bic-chip-background: var(--bi-success-90);
172
- --bic-chip-text-color: var(--bi-success-10);
173
- }
174
-
175
- .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
176
- --bic-chip-background: var(--bi-success-70);
177
- --bic-chip-text-color: var(--bi-basic-white);
178
- }
179
-
180
- .bi-chip:is(button), .bi-chip:is(a) {
181
- cursor: pointer;
182
- border: none;
183
- text-decoration: none;
184
- }
21
+ &[data-size="small"] {
22
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
23
+ --bic-chip-font: var(--bi-font-body-small);
24
+ --bic-chip-icon-size: var(--bi-scale-5x);
25
+ }
185
26
 
186
- :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
187
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
188
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
189
- outline-offset: var(--_bi--focus, 2px);
190
- }
27
+ &[data-size="large"] {
28
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
29
+ --bic-chip-font: var(--bi-font-body-large);
30
+ }
191
31
 
192
- @media (hover: hover) and (pointer: fine) {
193
- :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
194
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
195
- var(--bic-chip-background);
32
+ &[data-selected="true"] {
33
+ --bic-chip-background: var(--bic-chip-background-selected);
34
+ color: var(--bic-chip-text-color-selected);
196
35
  }
197
- }
198
36
 
199
- :is(.bi-chip:is(button), .bi-chip:is(a)):active {
200
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
201
- var(--bic-chip-background);
202
- }
37
+ &:is(button), &:is(a) {
38
+ cursor: pointer;
39
+ border: none;
40
+ text-decoration: none;
41
+
42
+ &:focus-visible {
43
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
44
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
45
+ outline-offset: var(--_bi--focus, 2px);
46
+ }
47
+
48
+ @media (hover: hover) and (pointer: fine) {
49
+ &:hover {
50
+ background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-chip-background);
51
+ }
52
+ }
53
+
54
+ &:active {
55
+ background: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-chip-background);
56
+ }
57
+ }
203
58
 
204
- .bi-chip > svg {
205
- display: inherit;
206
- font-size: var(--bic-chip-icon-size);
59
+ & > svg {
60
+ display: inherit;
61
+ font-size: var(--bic-chip-icon-size);
62
+ }
207
63
  }
package/dist/components/details.css CHANGED
@@ -1,29 +1,11 @@
1
1
  details.bi-details {
2
- --bic-details-background: var(--bi-basic-white);
3
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
4
- var(--bic-details-background);
5
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
6
- var(--bic-details-background);
7
- --bic-details-color: var(--bi-neutral-90);
8
- --bic-details-border-color: var(--bi-neutral-15);
2
+ --bic-details-background: transparent;
3
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-details-background);
4
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-details-background);
5
+ --bic-details-color: var(--bi-color-text-secondary);
6
+ --bic-details-summary-color: var(--bi-color-text);
7
+ --bic-details-border-color: var(--bi-color-stroke);
9
8
  --bic-details-padding: var(--bi-scale-4x);
10
- --bic-details-focus-shadow-color: var(--bi-basic-white);
11
- --bic-details-focus-outline-color: var(--bi-primary-50);
12
- }
13
-
14
- details.bi-details[data-dark="true"] {
15
- --bic-details-background: var(--bi-neutral-90);
16
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
17
- var(--bic-details-background);
18
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
19
- var(--bic-details-background);
20
- --bic-details-border-color: var(--bi-neutral-70);
21
- --bic-details-color: var(--bi-basic-white);
22
- --bic-details-focus-shadow-color: var(--bi-neutral-95);
23
- --bic-details-focus-outline-color: var(--bi-primary-30);
24
- }
25
-
26
- details.bi-details {
27
9
  font: var(--bi-font-body-large);
28
10
  background-color: var(--bic-details-background);
29
11
  color: var(--bic-details-color);
@@ -32,111 +14,110 @@ details.bi-details {
32
14
  border-style: solid;
33
15
  border-top-width: var(--bi-stroke-thin);
34
16
  border-bottom-width: var(--bi-stroke-thin);
35
- }
36
17
 
37
- details.bi-details + :is(details.bi-details) {
38
- border-top: 0;
39
- }
40
-
41
- details.bi-details summary {
42
- padding: var(--bic-details-padding);
43
- cursor: pointer;
44
- justify-content: space-between;
45
- align-items: center;
46
- gap: var(--bi-scale-2x);
47
- -webkit-user-select: none;
48
- user-select: none;
49
- font-weight: var(--bi-font-weight-bold);
50
- flex-direction: row;
51
- list-style: none;
52
- display: flex;
53
- position: relative;
54
- }
55
-
56
- @media (hover: hover) and (pointer: fine) {
57
- details.bi-details summary:hover {
58
- background: var(--bic-details-background-hover);
18
+ & + & {
19
+ border-top: 0;
59
20
  }
60
- }
61
21
 
62
- details.bi-details summary:active {
63
- background: var(--bic-details-background-press);
64
- }
22
+ & summary {
23
+ padding: var(--bic-details-padding);
24
+ color: var(--bic-details-summary-color);
25
+ cursor: pointer;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ gap: var(--bi-scale-2x);
29
+ -webkit-user-select: none;
30
+ user-select: none;
31
+ font-weight: var(--bi-font-weight-bold);
32
+ flex-direction: row;
33
+ list-style: none;
34
+ display: flex;
35
+ position: relative;
36
+
37
+ @media (hover: hover) and (pointer: fine) {
38
+ &:hover {
39
+ background: var(--bic-details-background-hover);
40
+ }
41
+ }
65
42
 
66
- details.bi-details summary:focus-visible {
67
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
68
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
69
- outline-offset: var(--_bi--focus, -2px);
70
- border-radius: var(--bi-radius-medium);
71
- }
43
+ &:active {
44
+ background: var(--bic-details-background-press);
45
+ }
72
46
 
73
- details.bi-details summary:focus-visible * {
74
- --_bi--focus: ;
75
- }
47
+ &:focus-visible {
48
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
49
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-states-focus));
50
+ outline-offset: var(--_bi--focus, -2px);
51
+ border-radius: var(--bi-radius-medium);
76
52
 
77
- details.bi-details summary::marker {
78
- display: none;
79
- }
53
+ & * {
54
+ --_bi--focus: ;
55
+ }
56
+ }
80
57
 
81
- details.bi-details summary::-webkit-details-marker {
82
- display: none;
83
- }
58
+ &::marker {
59
+ display: none;
60
+ }
84
61
 
85
- details.bi-details summary > svg {
86
- font-size: var(--bi-icon-medium);
87
- width: var(--bi-scale-6x);
88
- height: var(--bi-scale-6x);
89
- flex-shrink: 0;
90
- margin-left: auto;
91
- }
62
+ &::-webkit-details-marker {
63
+ display: none;
64
+ }
92
65
 
93
- @media (prefers-reduced-motion: no-preference) {
94
- details.bi-details summary > svg {
95
- transition: transform .2s ease-in-out;
66
+ & > svg {
67
+ font-size: var(--bi-icon-medium);
68
+ width: var(--bi-scale-6x);
69
+ height: var(--bi-scale-6x);
70
+ flex-shrink: 0;
71
+ margin-left: auto;
72
+
73
+ @media (prefers-reduced-motion: no-preference) {
74
+ transition: transform .2s ease-in-out;
75
+ }
76
+ }
96
77
  }
97
- }
98
78
 
99
- details.bi-details[open] summary > svg {
100
- transform: rotate(180deg);
101
- }
79
+ &[open] summary > svg {
80
+ transform: rotate(180deg);
81
+ }
102
82
 
103
- @supports (interpolate-size: allow-keywords) and selector(::details-content) {
104
- @media (prefers-reduced-motion: no-preference) {
105
- details.bi-details {
83
+ @supports (interpolate-size: allow-keywords) and selector(::details-content) {
84
+ @media (prefers-reduced-motion: no-preference) {
106
85
  interpolate-size: allow-keywords;
107
86
  }
108
- }
109
87
 
110
- details.bi-details::details-content {
111
- transition: height .2s ease-in-out,
88
+ &::details-content {
89
+ transition: height .2s ease-in-out,
112
90
  content-visibility .2s ease-in-out allow-discrete;
113
- height: 0;
114
- overflow: clip;
115
- }
91
+ height: 0;
92
+ overflow: clip;
93
+ }
116
94
 
117
- details.bi-details[open]::details-content {
118
- height: auto;
95
+ &[open]::details-content {
96
+ height: auto;
97
+ }
119
98
  }
120
- }
121
99
 
122
- details.bi-details > * {
123
- padding: var(--bic-details-padding);
124
- margin: 0;
125
- overflow: clip;
126
- }
100
+ & > * {
101
+ padding: var(--bic-details-padding);
102
+ margin: 0;
103
+ overflow: clip;
127
104
 
128
- details.bi-details > *:not(summary) + * {
129
- padding-top: 0;
105
+ &:not(summary) + * {
106
+ padding-top: 0;
107
+ }
108
+ }
130
109
  }
131
110
 
132
111
  .bi-card:has( > .bi-details) {
133
112
  overflow: clip;
134
- }
135
113
 
136
- .bi-card:has( > .bi-details) > .bi-details:first-child {
137
- border-top: 0;
138
- }
114
+ & > .bi-details {
115
+ &:first-child {
116
+ border-top: 0;
117
+ }
139
118
 
140
- .bi-card:has( > .bi-details) > .bi-details:last-child {
141
- border-bottom: 0;
119
+ &:last-child {
120
+ border-bottom: 0;
121
+ }
122
+ }
142
123
  }