@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/button.css CHANGED
@@ -6,13 +6,17 @@
6
6
  --bic-button-size: var(--bi-scale-11x);
7
7
  --bic-button-font-size: 1rem;
8
8
  --bic-button-line-height: 1.5;
9
- --bic-button-color: var(--bi-basic-white);
10
- --bic-button-background: transparent;
11
- --bic-button-background-hover: transparent;
12
- --bic-button-background-press: transparent;
13
- --bic-button-active-color: var(--bi-primary-50);
14
- --bic-button-focus-shadow-color: var(--bi-basic-white);
15
- --bic-button-focus-outline-color: var(--bi-primary-50);
9
+ --bic-button-color: var(--bi-color-primary-on-fill);
10
+ --bic-button-background: var(--bi-color-primary-fill);
11
+ --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-button-background);
12
+ --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-button-background);
13
+ --bic-button-active-color: var(--bi-states-focus);
14
+
15
+ &[data-color] {
16
+ --bic-button-color: var(--bi-color-on-fill);
17
+ --bic-button-background: var(--bi-color-fill);
18
+ }
19
+
16
20
  font-family: var(--bi-font-family-plain);
17
21
  font-size: var(--bic-button-font-size);
18
22
  line-height: var(--bic-button-line-height);
@@ -40,154 +44,127 @@
40
44
  display: flex;
41
45
  position: relative;
42
46
  overflow: hidden;
43
- }
44
47
 
45
- .bi-button[data-dark="true"] {
46
- --bic-button-active-color: var(--bi-primary-30);
47
- --bic-button-focus-shadow-color: var(--bi-neutral-95);
48
- --bic-button-focus-outline-color: var(--bi-primary-30);
49
- }
50
-
51
- .bi-button[data-fullwidth="true"] {
52
- width: 100%;
53
- }
48
+ &[data-fullwidth="true"] {
49
+ width: 100%;
50
+ }
54
51
 
55
- .bi-button[data-active="true"], .bi-button[aria-expanded="true"] {
56
- box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
57
- }
52
+ &[data-active="true"], &[aria-expanded="true"] {
53
+ box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
54
+ }
58
55
 
59
- .bi-button:focus-visible {
60
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
61
- outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
62
- outline-offset: var(--_bi--focus, 2px);
63
- }
56
+ &:focus-visible {
57
+ box-shadow: var(--bic-button-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
58
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
59
+ outline-offset: var(--_bi--focus, 2px);
64
60
 
65
- .bi-button:focus-visible * {
66
- --_bi--focus: ;
67
- }
61
+ & * {
62
+ --_bi--focus: ;
63
+ }
64
+ }
68
65
 
69
- .bi-button[data-size="small"] {
70
- --bic-button-font-size: .875rem;
71
- --bic-button-line-height: 1.25rem;
72
- --bic-button-padding-block: var(--bi-scale-1-5x);
73
- --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
74
- --bic-button-icon-size: var(--bi-icon-small);
75
- --bic-button-size: var(--bi-scale-8x);
76
- }
66
+ &[data-size="small"] {
67
+ --bic-button-font-size: .875rem;
68
+ --bic-button-line-height: 1.25rem;
69
+ --bic-button-padding-block: var(--bi-scale-1-5x);
70
+ --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
71
+ --bic-button-icon-size: var(--bi-icon-small);
72
+ --bic-button-size: var(--bi-scale-8x);
73
+ }
77
74
 
78
- .bi-button[data-size="large"] {
79
- --bic-button-padding-block: var(--bi-scale-2x);
80
- --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
81
- --bic-button-icon-size: var(--bi-icon-large);
82
- --bic-button-size: var(--bi-scale-14x);
83
- }
75
+ &[data-size="large"] {
76
+ --bic-button-padding-block: var(--bi-scale-2x);
77
+ --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
78
+ --bic-button-icon-size: var(--bi-icon-large);
79
+ --bic-button-size: var(--bi-scale-14x);
80
+ }
84
81
 
85
- .bi-button[data-icon] {
86
- width: var(--bic-button-size);
87
- height: var(--bic-button-size);
88
- --bic-button-font-size: var(--bic-button-icon-size);
89
- padding: 0;
90
- }
82
+ &[data-icon] {
83
+ width: var(--bic-button-size);
84
+ height: var(--bic-button-size);
85
+ --bic-button-font-size: var(--bic-button-icon-size);
86
+ padding: 0;
87
+ }
91
88
 
92
- .bi-button[data-skewed] {
93
- --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
94
- --bic-button-padding-inline: var(--_bic-button-skew-dist);
95
- }
89
+ &[data-skewed] {
90
+ --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
91
+ --bic-button-padding-inline: var(--_bic-button-skew-dist);
96
92
 
97
- .bi-button[data-skewed][data-skewed="start"] {
98
- margin-left: calc(var(--_bic-button-skew-dist) * -1);
99
- }
93
+ &[data-skewed="start"] {
94
+ margin-left: calc(var(--_bic-button-skew-dist) * -1);
100
95
 
101
- .bi-button[data-skewed][data-skewed="start"]:has(.bi-button--start-icon) {
102
- --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
103
- }
96
+ &:has(.bi-button--start-icon) {
97
+ --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
98
+ }
99
+ }
104
100
 
105
- .bi-button[data-skewed][data-skewed="end"] {
106
- margin-right: calc(var(--_bic-button-skew-dist) * -1);
107
- }
101
+ &[data-skewed="end"] {
102
+ margin-right: calc(var(--_bic-button-skew-dist) * -1);
108
103
 
109
- .bi-button[data-skewed][data-skewed="end"]:has(.bi-button--end-icon) {
110
- --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
111
- }
104
+ &:has(.bi-button--end-icon) {
105
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
106
+ }
107
+ }
108
+ }
112
109
 
113
- .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
114
- --bic-button-color: var(--bi-basic-white);
115
- --bic-button-background: var(--bi-primary-50);
116
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
117
- var(--bic-button-background);
118
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
119
- var(--bic-button-background);
120
- --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
110
+ &:not([data-variant]), &[data-variant="filled"] {
111
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
121
112
  0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
122
- }
123
-
124
- .bi-button[data-variant="outlined"] {
125
- --bic-button-color: var(--bi-primary-50);
126
- --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
127
- --bic-button-background-hover: var(--bi-states-hover-dark);
128
- --bic-button-background-press: var(--bi-states-press-dark);
129
- }
113
+ }
130
114
 
131
- .bi-button[data-variant="outlined"][data-dark="true"] {
132
- --bic-button-color: var(--bi-basic-white);
133
- --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
134
- --bic-button-background-hover: var(--bi-states-hover-light);
135
- --bic-button-background-press: var(--bi-states-press-light);
136
- }
115
+ &[data-variant="outlined"] {
116
+ --bic-button-color: var(--bi-color-primary-contrast);
117
+ --bic-button-background: transparent;
118
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bic-button-color) inset;
119
+ --bic-button-background-hover: var(--bi-states-hover);
120
+ --bic-button-background-press: var(--bi-states-press);
137
121
 
138
- .bi-button[data-variant="text"] {
139
- --bic-button-color: var(--bi-neutral-90);
140
- --bic-button-background-hover: var(--bi-states-hover-dark);
141
- --bic-button-background-press: var(--bi-states-press-dark);
142
- }
122
+ &[data-color] {
123
+ --bic-button-color: var(--bi-color-contrast);
124
+ }
125
+ }
143
126
 
144
- .bi-button[data-variant="text"][data-dark="true"] {
145
- --bic-button-color: var(--bi-basic-white);
146
- --bic-button-background-hover: var(--bi-states-hover-light);
147
- --bic-button-background-press: var(--bi-states-press-light);
148
- }
127
+ &[data-variant="text"] {
128
+ --bic-button-color: var(--bi-color-text);
129
+ --bic-button-background: transparent;
130
+ --bic-button-background-hover: var(--bi-states-hover);
131
+ --bic-button-background-press: var(--bi-states-press);
132
+ }
149
133
 
150
- .bi-button[data-variant="flat"] {
151
- --bic-button-color: var(--bi-primary-90);
152
- --bic-button-background: var(--bi-primary-5);
153
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
154
- var(--bic-button-background);
155
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
156
- var(--bic-button-background);
157
- }
134
+ &[data-variant="flat"] {
135
+ --bic-button-color: var(--bi-color-primary-text);
136
+ --bic-button-background: var(--bi-color-primary-surface-strong);
158
137
 
159
- .bi-button[data-variant="flat"][data-dark="true"] {
160
- --bic-button-color: var(--bi-basic-white);
161
- --bic-button-background: #ffffff1a;
162
- --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
163
- var(--bic-button-background);
164
- --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
165
- var(--bic-button-background);
166
- }
138
+ &[data-color] {
139
+ --bic-button-color: var(--bi-color-text);
140
+ --bic-button-background: var(--bi-color-surface-strong);
141
+ }
142
+ }
167
143
 
168
- @media (hover: hover) and (pointer: fine) {
169
- .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
170
- background: var(--bic-button-background-hover);
144
+ @media (hover: hover) and (pointer: fine) {
145
+ &:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
146
+ background: var(--bic-button-background-hover);
147
+ }
171
148
  }
172
- }
173
149
 
174
- .bi-button[aria-busy="true"] {
175
- cursor: progress;
176
- }
150
+ &[aria-busy="true"] {
151
+ cursor: progress;
152
+ }
177
153
 
178
- .bi-button:is(:disabled, [aria-disabled="true"]) {
179
- cursor: not-allowed;
180
- }
154
+ &:is(:disabled, [aria-disabled="true"]) {
155
+ cursor: not-allowed;
181
156
 
182
- .bi-button:is(:disabled, [aria-disabled="true"])[aria-busy="true"] {
183
- cursor: progress;
184
- }
157
+ &[aria-busy="true"] {
158
+ cursor: progress;
159
+ }
160
+ }
185
161
 
186
- .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
187
- background: var(--bic-button-background-press);
188
- }
162
+ &:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
163
+ background: var(--bic-button-background-press);
164
+ }
189
165
 
190
- .bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
191
- display: inherit;
192
- font-size: var(--bic-button-icon-size);
166
+ & .bi-button--start-icon, & .bi-button--end-icon {
167
+ display: inherit;
168
+ font-size: var(--bic-button-icon-size);
169
+ }
193
170
  }