@wwtdev/bsds-css 2.16.0 → 2.18.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.
- package/dist/components/_buttons.scss +16 -16
- package/dist/components/_pills.scss +1 -1
- package/dist/components/_table.scss +328 -0
- package/dist/components/_tooltip.scss +27 -11
- package/dist/components/buttons.css +16 -16
- package/dist/components/pills.css +1 -1
- package/dist/components/table.css +324 -0
- package/dist/components/tooltip.css +27 -11
- package/dist/wwt-bsds-preset.js +7 -0
- package/dist/wwt-bsds-wc-base.css +33 -23
- package/dist/wwt-bsds.css +338 -51
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
/* ------ WRAPPER ------ */
|
|
2
|
+
|
|
3
|
+
.bs-table-wrap {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:where(.bs-table-wrap) {
|
|
10
|
+
font-size: var(--bs-text-sm);
|
|
11
|
+
color: var(--bs-table-cell-ink, var(--bs-ink-light));
|
|
12
|
+
border-radius: var(--bs-space-2);
|
|
13
|
+
border: 1px solid var(--bs-border-base);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(.bs-table-wrap-header, .bs-table-wrap-footer) {
|
|
17
|
+
padding-block: var(--bs-space-3);
|
|
18
|
+
padding-inline: var(--bs-table-cell-padding);
|
|
19
|
+
background: var(--bs-bg-medium);
|
|
20
|
+
border-color: inherit;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:where(.bs-table-wrap-header) {
|
|
24
|
+
border-bottom-width: 1px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:where(.bs-table-wrap-footer) {
|
|
28
|
+
border-top-width: 1px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* ------ TABLE ------ */
|
|
33
|
+
|
|
34
|
+
.bs-table-scroll-wrap {
|
|
35
|
+
flex: 1;
|
|
36
|
+
border-color: inherit;
|
|
37
|
+
overflow: auto;
|
|
38
|
+
overscroll-behavior: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.bs-table {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: var(--bs-table-col-widths);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:where(.bs-table) {
|
|
47
|
+
border-color: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* ------ HEADER ROWGROUP ------ */
|
|
51
|
+
|
|
52
|
+
.bs-table-header-rowgroup {
|
|
53
|
+
grid-column: 1 / -1;
|
|
54
|
+
grid-row: span var(--bs-table-header-row-count);
|
|
55
|
+
display: grid;
|
|
56
|
+
grid-template-columns: subgrid;
|
|
57
|
+
grid-template-rows: subgrid;
|
|
58
|
+
border-color: inherit;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.bs-table-header-rowgroup-freeze {
|
|
62
|
+
position: sticky;
|
|
63
|
+
top: 0;
|
|
64
|
+
z-index: 1;
|
|
65
|
+
|
|
66
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
67
|
+
box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* ------ BODY ROWGROUP ------ */
|
|
72
|
+
|
|
73
|
+
.bs-table-body-rowgroup {
|
|
74
|
+
grid-column: 1 / -1;
|
|
75
|
+
grid-row: span var(--bs-table-body-row-count);
|
|
76
|
+
display: grid;
|
|
77
|
+
grid-template-columns: subgrid;
|
|
78
|
+
grid-template-rows: subgrid;
|
|
79
|
+
border-color: inherit;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* ------ FOOTER ROWGROUP ------ */
|
|
83
|
+
|
|
84
|
+
.bs-table-footer-rowgroup {
|
|
85
|
+
grid-column: 1 / -1;
|
|
86
|
+
grid-row: span var(--bs-table-footer-row-count);
|
|
87
|
+
display: grid;
|
|
88
|
+
grid-template-columns: subgrid;
|
|
89
|
+
grid-template-rows: subgrid;
|
|
90
|
+
border-color: inherit;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.bs-table-footer-rowgroup-freeze {
|
|
94
|
+
position: sticky;
|
|
95
|
+
bottom: 0;
|
|
96
|
+
|
|
97
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
98
|
+
box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ------ ROWS ------ */
|
|
103
|
+
|
|
104
|
+
.bs-table-row {
|
|
105
|
+
grid-column: 1 / -1;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:where(.bs-table-row) {
|
|
109
|
+
background: var(--bs-bg-base);
|
|
110
|
+
border-color: inherit;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:where(.bs-table-header-rowgroup .bs-table-row) {
|
|
114
|
+
background: var(--bs-bg-light);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
:where(.bs-table-row:has(.bs-table-head-cell, .bs-table-cell)) {
|
|
118
|
+
display: grid;
|
|
119
|
+
grid-template-columns: subgrid;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ------ FROZEN COLS ------ */
|
|
123
|
+
|
|
124
|
+
.bs-table-cols-frozen-left {
|
|
125
|
+
position: sticky;
|
|
126
|
+
left: 0;
|
|
127
|
+
grid-column: span var(--bs-table-frozen-left-count);
|
|
128
|
+
display: grid;
|
|
129
|
+
grid-template-columns: subgrid;
|
|
130
|
+
background: inherit;
|
|
131
|
+
border-color: inherit;
|
|
132
|
+
|
|
133
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
134
|
+
box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.bs-table-cols-frozen-right {
|
|
139
|
+
position: sticky;
|
|
140
|
+
right: 0;
|
|
141
|
+
grid-column: span var(--bs-table-frozen-right-count);
|
|
142
|
+
display: grid;
|
|
143
|
+
grid-template-columns: subgrid;
|
|
144
|
+
background: inherit;
|
|
145
|
+
border-color: inherit;
|
|
146
|
+
|
|
147
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
148
|
+
box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* ------ CELLS ------ */
|
|
153
|
+
|
|
154
|
+
:where(.bs-table-head-cell) {
|
|
155
|
+
color: var(--bs-table-head-cell-ink, var(--bs-ink-base));
|
|
156
|
+
font-weight: var(--bs-font-bold);
|
|
157
|
+
border-color: inherit;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Couldn't use :where due to Blue Steel reset styles on <button> imposing font-size.
|
|
161
|
+
Adding inherit in case consumer does custom header cell styles */
|
|
162
|
+
.bs-table-head-cell .bs-sort-toggle {
|
|
163
|
+
font-size: inherit;
|
|
164
|
+
font-weight: var(--bs-font-bold);
|
|
165
|
+
color: inherit;
|
|
166
|
+
line-height: inherit;
|
|
167
|
+
letter-spacing: inherit;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
:where(.bs-table-cell) {
|
|
171
|
+
border-color: inherit;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* ------ PROP: CELL-PADDING ------ */
|
|
175
|
+
|
|
176
|
+
:root {
|
|
177
|
+
--bs-table-cell-padding-xs: var(--bs-space-2);
|
|
178
|
+
--bs-table-cell-padding-sm: var(--bs-space-3);
|
|
179
|
+
--bs-table-cell-padding-md: var(--bs-space-4);
|
|
180
|
+
--bs-table-cell-padding-lg: var(--bs-space-6);
|
|
181
|
+
--bs-table-cell-padding-xl: var(--bs-space-8);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
:where(.bs-table-head-cell, .bs-table-cell) {
|
|
185
|
+
padding: var(--bs-table-cell-padding);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* ------ PROP: TRUNCATE ------ */
|
|
189
|
+
|
|
190
|
+
:where(.bs-table-truncate):where(.bs-table-head-cell, .bs-table-cell) {
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
text-overflow: ellipsis;
|
|
193
|
+
white-space: nowrap;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
/* ------ PROP: STRIPED ROWS ------ */
|
|
198
|
+
|
|
199
|
+
:where(.bs-table-striped .bs-table-body-rowgroup .bs-table-row:nth-child(even)) {
|
|
200
|
+
background: var(--bs-bg-light);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
/* ------ PROP: ROW HOVER ------ */
|
|
205
|
+
|
|
206
|
+
:where(.bs-table-row-hover .bs-table-body-rowgroup .bs-table-row:hover) {
|
|
207
|
+
background: var(--bs-table-row-hover, var(--bs-bg-light));
|
|
208
|
+
transition: background-color 200ms;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
/* ------ PROP: BORDERS ------ */
|
|
213
|
+
|
|
214
|
+
/* -- borders="rows" -- */
|
|
215
|
+
:where(.bs-table-border-rows) :where(.bs-table-row) {
|
|
216
|
+
border-bottom-width: 1px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* -- borders="cols" -- */
|
|
220
|
+
/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
|
|
221
|
+
:where(.bs-table-border-cols) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
|
|
222
|
+
border-left-width: 1px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.bs-table-border-cols .bs-table-header-rowgroup {
|
|
226
|
+
border-bottom-width: 1px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* -- borders="grid" -- */
|
|
230
|
+
:where(.bs-table-border-grid) :where(.bs-table-row) {
|
|
231
|
+
border-bottom-width: 1px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
|
|
235
|
+
:where(.bs-table-border-grid) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
|
|
236
|
+
border-left-width: 1px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* -- borders="frozen" -- */
|
|
240
|
+
.bs-table-border-frozen .bs-table-header-rowgroup-freeze {
|
|
241
|
+
border-bottom-width: 1px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* -- frozen col and footer-rowgroup sections will always show border, unless borders="none" -- */
|
|
245
|
+
/* (header-rowgroup is not included below since TableRow bottom border covers most cases) */
|
|
246
|
+
.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-left {
|
|
247
|
+
border-right-width: 1px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-right {
|
|
251
|
+
border-left-width: 1px;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.bs-table:not(.bs-table-border-none) .bs-table-footer-rowgroup-freeze {
|
|
255
|
+
border-top-width: 1px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* turn off last row's bottom border, since it would double-up with Table's border */
|
|
259
|
+
:where(.bs-table-body-rowgroup, .bs-table-footer-rowgroup) .bs-table-row:last-of-type {
|
|
260
|
+
border-bottom-width: 0;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
/* ------ TABLE COLUMN RESIZER ------ */
|
|
265
|
+
|
|
266
|
+
.bs-table-col-resizer {
|
|
267
|
+
position: fixed; /* fixed instead of absolute, due to using coordinates from .getBoundingClientRect() */
|
|
268
|
+
top: 0;
|
|
269
|
+
left: -8px;
|
|
270
|
+
bottom: 0;
|
|
271
|
+
width: 15px; /* includes 5px resizer handle width + 5px of extra hover target area on left and right of handle */
|
|
272
|
+
cursor: col-resize;
|
|
273
|
+
touch-action: none;
|
|
274
|
+
z-index: var(--bs-table-col-resizer-z, 10);
|
|
275
|
+
transform: translate(var(--bs-table-col-resizer-x), var(--bs-table-col-resizer-y));
|
|
276
|
+
|
|
277
|
+
/* resizer handle and vertical line set-up */
|
|
278
|
+
&:before,
|
|
279
|
+
&::after {
|
|
280
|
+
content: "";
|
|
281
|
+
position: absolute;
|
|
282
|
+
top: 0;
|
|
283
|
+
left: 0;
|
|
284
|
+
background: var(--bs-table-col-resizer-color, var(--bs-blue-base));
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* resizer handle */
|
|
288
|
+
&::after {
|
|
289
|
+
left: 5px;
|
|
290
|
+
width: 5px;
|
|
291
|
+
height: var(--bs-table-col-resizer-handle-height);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* resizer vertical line/tail */
|
|
295
|
+
&::before {
|
|
296
|
+
left: 7px;
|
|
297
|
+
width: 1px;
|
|
298
|
+
height: var(--bs-table-col-resizer-tail-height);
|
|
299
|
+
display: none;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
&.bs-table-col-resizer-active::before {
|
|
303
|
+
display: block;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* ------ SORT TOGGLE ------ */
|
|
308
|
+
|
|
309
|
+
/* Override Blue Steel CSS: It adds "relative" to buttons by default, which was causing an overlap issue when a Table with frozen, sortable cols scrolled horizontally */
|
|
310
|
+
.bs-sort-toggle {
|
|
311
|
+
position: static;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/* Using :where to lower specificity so consumers can use utility classes to override */
|
|
315
|
+
:where(.bs-sort-toggle) {
|
|
316
|
+
display: inline-flex;
|
|
317
|
+
align-items: center;
|
|
318
|
+
gap: var(--bs-space-2);
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
:where(.bs-sort-toggle .bs-icon) {
|
|
323
|
+
flex-shrink: 0;
|
|
324
|
+
}
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
/* Active States */
|
|
42
42
|
:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
|
|
43
43
|
:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
|
|
44
|
-
:where(.bs-tooltip:not([data-position])):focus-
|
|
45
|
-
:where(.bs-tooltip[data-position="top"]):focus-
|
|
44
|
+
:where(.bs-tooltip:not([data-position])):has(:focus-visible) :where(.bs-tooltip-text),
|
|
45
|
+
:where(.bs-tooltip[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
46
46
|
:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
|
|
47
47
|
:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
|
|
48
48
|
opacity: 1;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
|
|
60
60
|
/* Active States */
|
|
61
61
|
:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
|
|
62
|
-
:where(.bs-tooltip[data-position="bottom"]):focus-
|
|
62
|
+
:where(.bs-tooltip[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
63
63
|
:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
|
|
64
64
|
opacity: 1;
|
|
65
65
|
transform: translateX(-50%) scale(1);
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
|
|
76
76
|
/* Active States */
|
|
77
77
|
:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
|
|
78
|
-
:where(.bs-tooltip[data-position="left"]):focus-
|
|
78
|
+
:where(.bs-tooltip[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
79
79
|
:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
|
|
80
80
|
opacity: 1;
|
|
81
81
|
transform: translateY(-50%) scale(1);
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
|
|
93
|
-
:where(.bs-tooltip[data-position="right"]):focus-
|
|
93
|
+
:where(.bs-tooltip[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
94
94
|
:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
|
|
95
95
|
opacity: 1;
|
|
96
96
|
transform: translateY(-50%) scale(1);
|
|
@@ -130,10 +130,10 @@
|
|
|
130
130
|
:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
|
|
131
131
|
:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
|
|
132
132
|
:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
|
|
133
|
-
:where(.bs-tooltip[data-position="top-left"]):focus-
|
|
134
|
-
:where(.bs-tooltip[data-position="top-right"]):focus-
|
|
135
|
-
:where(.bs-tooltip[data-position="bottom-left"]):focus-
|
|
136
|
-
:where(.bs-tooltip[data-position="bottom-right"]):focus-
|
|
133
|
+
:where(.bs-tooltip[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
134
|
+
:where(.bs-tooltip[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
135
|
+
:where(.bs-tooltip[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
136
|
+
:where(.bs-tooltip[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
137
137
|
:where(.bs-tooltip[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
138
138
|
:where(.bs-tooltip[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
139
139
|
:where(.bs-tooltip[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
@@ -148,12 +148,28 @@ Don't display unless data-shown is present
|
|
|
148
148
|
This must go last to properly override the other classes
|
|
149
149
|
*/
|
|
150
150
|
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-text),
|
|
151
|
-
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):focus-
|
|
151
|
+
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-text) {
|
|
152
152
|
opacity: 0;
|
|
153
153
|
transform: scale(0);
|
|
154
154
|
}
|
|
155
155
|
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-text),
|
|
156
|
-
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):focus-
|
|
156
|
+
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-text) {
|
|
157
157
|
opacity: 0;
|
|
158
158
|
transform: scale(0);
|
|
159
159
|
}
|
|
160
|
+
|
|
161
|
+
/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
|
|
162
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped) {
|
|
163
|
+
opacity: 0;
|
|
164
|
+
transform: scale(0.5);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped-x) {
|
|
168
|
+
opacity: 0;
|
|
169
|
+
transform: translateX(-50%) scale(0.5);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped-y) {
|
|
173
|
+
opacity: 0;
|
|
174
|
+
transform: translateY(-50%) scale(0.5);
|
|
175
|
+
}
|
package/dist/wwt-bsds-preset.js
CHANGED
|
@@ -95,6 +95,11 @@ module.exports = {
|
|
|
95
95
|
400: "#4E4F5F",
|
|
96
96
|
500: "#292940"
|
|
97
97
|
},
|
|
98
|
+
slate: {
|
|
99
|
+
400: "#22222E",
|
|
100
|
+
500: "#17171F",
|
|
101
|
+
600: "#0B0B10"
|
|
102
|
+
},
|
|
98
103
|
"gradient-dark":
|
|
99
104
|
"linear-gradient(90deg, #1C0087 0%, #EE282A 35%, #FFFFFF 50%, #0086EA 65%, #1C0087 100%)",
|
|
100
105
|
"gradient-light":
|
|
@@ -156,6 +161,8 @@ module.exports = {
|
|
|
156
161
|
"light-to-medium": "var(--bs-bg-light-to-medium)",
|
|
157
162
|
"medium": "var(--bs-bg-medium)",
|
|
158
163
|
"medium-to-light": "var(--bs-bg-medium-to-light)",
|
|
164
|
+
"medium-to-base": "var(--bs-bg-medium-to-base)",
|
|
165
|
+
"invert-to-light": "var(--bs-bg-invert-to-light)",
|
|
159
166
|
"invert-to-base": "var(--bs-bg-invert-to-base)",
|
|
160
167
|
"invert-to-medium": "var(--bs-bg-invert-to-medium)",
|
|
161
168
|
"disabled": "var(--bs-bg-disabled)"
|
|
@@ -64,6 +64,9 @@
|
|
|
64
64
|
--bs-gray-300: #a3a4b7;
|
|
65
65
|
--bs-gray-400: #4e4f5f;
|
|
66
66
|
--bs-gray-500: #292940;
|
|
67
|
+
--bs-slate-400: #22222e;
|
|
68
|
+
--bs-slate-500: #17171f;
|
|
69
|
+
--bs-slate-600: #0b0b10;
|
|
67
70
|
--bs-gradient-dark: linear-gradient(
|
|
68
71
|
90deg,
|
|
69
72
|
#1c0087 0%,
|
|
@@ -306,10 +309,13 @@ button {
|
|
|
306
309
|
--bs-bg-base-to-medium: var(--bs-white);
|
|
307
310
|
--bs-bg-light: var(--bs-gray-50);
|
|
308
311
|
--bs-bg-light-to-base: var(--bs-gray-50);
|
|
312
|
+
--bs-bg-light-to-medium: var(--bs-gray-50);
|
|
309
313
|
--bs-bg-medium: var(--bs-gray-100);
|
|
310
314
|
--bs-bg-medium-to-light: var(--bs-gray-100);
|
|
311
|
-
--bs-bg-
|
|
312
|
-
--bs-bg-invert-to-
|
|
315
|
+
--bs-bg-medium-to-base: var(--bs-gray-100);
|
|
316
|
+
--bs-bg-invert-to-light: var(--bs-slate-500);
|
|
317
|
+
--bs-bg-invert-to-base: var(--bs-slate-600);
|
|
318
|
+
--bs-bg-invert-to-medium: var(--bs-slate-400);
|
|
313
319
|
--bs-bg-disabled: var(--bs-gray-200);
|
|
314
320
|
|
|
315
321
|
--bs-hyperlink: var(--bs-purple-400);
|
|
@@ -397,8 +403,8 @@ button {
|
|
|
397
403
|
/* deprecate / phase out.. */
|
|
398
404
|
--bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
|
|
399
405
|
--bs-bg-subtle: var(--bs-gray-100);
|
|
400
|
-
--bs-bg-invert: var(--bs-
|
|
401
|
-
--bs-bg-invert-subtle: var(--bs-
|
|
406
|
+
--bs-bg-invert: var(--bs-slate-500);
|
|
407
|
+
--bs-bg-invert-subtle: var(--bs-slate-400);
|
|
402
408
|
--bs-border: var(--bs-gray-200);
|
|
403
409
|
--bs-ink-invert: var(--bs-gray-100);
|
|
404
410
|
--bs-orange-warning: var(--bs-orange-500);
|
|
@@ -410,27 +416,30 @@ button {
|
|
|
410
416
|
|
|
411
417
|
.dark,
|
|
412
418
|
.dark :where(:host) {
|
|
413
|
-
--bs-bg-base: var(--bs-
|
|
414
|
-
--bs-bg-base-to-light: var(--bs-
|
|
415
|
-
--bs-bg-base-to-medium: var(--bs-
|
|
416
|
-
--bs-bg-light: var(--bs-
|
|
417
|
-
--bs-bg-light-to-base: var(--bs-
|
|
418
|
-
--bs-bg-medium: var(--bs-
|
|
419
|
-
--bs-bg-medium
|
|
420
|
-
--bs-bg-
|
|
421
|
-
--bs-bg-
|
|
422
|
-
--bs-bg-
|
|
419
|
+
--bs-bg-base: var(--bs-slate-600);
|
|
420
|
+
--bs-bg-base-to-light: var(--bs-slate-500);
|
|
421
|
+
--bs-bg-base-to-medium: var(--bs-slate-400);
|
|
422
|
+
--bs-bg-light: var(--bs-slate-500);
|
|
423
|
+
--bs-bg-light-to-base: var(--bs-slate-600);
|
|
424
|
+
--bs-bg-light-to-medium: var(--bs-slate-400);
|
|
425
|
+
--bs-bg-medium: var(--bs-slate-400);
|
|
426
|
+
--bs-bg-medium-to-light: var(--bs-slate-500);
|
|
427
|
+
--bs-bg-medium-to-base: var(--bs-slate-600);
|
|
428
|
+
--bs-bg-invert-to-light: var(--bs-gray-50);
|
|
429
|
+
--bs-bg-invert-to-base: var(--bs-white);
|
|
430
|
+
--bs-bg-invert-to-medium: var(--bs-gray-100);
|
|
431
|
+
--bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
|
|
423
432
|
|
|
424
433
|
--bs-hyperlink: var(--bs-purple-200);
|
|
425
434
|
|
|
426
435
|
--bs-ink-accent: var(--bs-gray-100);
|
|
427
|
-
--bs-ink-base: var(--bs-
|
|
428
|
-
--bs-ink-disabled: rgba(163, 164, 183, 0.
|
|
436
|
+
--bs-ink-base: var(--bs-white);
|
|
437
|
+
--bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
|
|
429
438
|
--bs-ink-invert-base: var(--bs-black);
|
|
430
439
|
--bs-ink-invert-medium: var(--bs-gray-500);
|
|
431
440
|
--bs-ink-invert-light: var(--bs-gray-400);
|
|
432
|
-
--bs-ink-light: var(--bs-gray-
|
|
433
|
-
--bs-ink-medium: var(--bs-gray-
|
|
441
|
+
--bs-ink-light: var(--bs-gray-200);
|
|
442
|
+
--bs-ink-medium: var(--bs-gray-100);
|
|
434
443
|
|
|
435
444
|
--bs-ink-blue: var(--bs-blue-200);
|
|
436
445
|
--bs-ink-orange: var(--bs-orange-200);
|
|
@@ -446,6 +455,7 @@ button {
|
|
|
446
455
|
--bs-orange-base: var(--bs-orange-300);
|
|
447
456
|
--bs-pink-base: var(--bs-pink-300);
|
|
448
457
|
--bs-plum-base: var(--bs-plum-300);
|
|
458
|
+
--bs-plum-medium: var(--bs-plum-200);
|
|
449
459
|
--bs-purple-base: var(--bs-purple-300);
|
|
450
460
|
--bs-red-base: var(--bs-red-300);
|
|
451
461
|
--bs-royal-base: var(--bs-royal-300);
|
|
@@ -459,10 +469,10 @@ button {
|
|
|
459
469
|
|
|
460
470
|
--bs-warning: var(--bs-orange-400);
|
|
461
471
|
|
|
462
|
-
--bs-border-dark: var(--bs-gray-
|
|
463
|
-
--bs-border-base:
|
|
464
|
-
--bs-border-medium: var(--bs-gray-
|
|
465
|
-
--bs-border-light:
|
|
472
|
+
--bs-border-dark: var(--bs-gray-300);
|
|
473
|
+
--bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
|
|
474
|
+
--bs-border-medium: var(--bs-gray-400);
|
|
475
|
+
--bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
|
|
466
476
|
|
|
467
477
|
--bs-shadow-base: rgba(0, 0, 0, 0.06);
|
|
468
478
|
--bs-shadow-invert: rgba(10, 11, 25, 0.60);
|
|
@@ -482,7 +492,7 @@ button {
|
|
|
482
492
|
16px 16px 32px var(--bs-shadow-invert);
|
|
483
493
|
|
|
484
494
|
/* deprecate / phase out.. */
|
|
485
|
-
--bs-bg-base-elevated: var(--bs-
|
|
495
|
+
--bs-bg-base-elevated: var(--bs-slate-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
|
|
486
496
|
--bs-bg-subtle: #2F2F51;
|
|
487
497
|
--bs-bg-invert: var(--bs-white);
|
|
488
498
|
--bs-bg-invert-subtle: var(--bs-gray-100);
|