@swiftwc/ui 0.0.0-dev.42 → 0.0.0-dev.43
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/generated/components/progress-view.js +1 -0
- package/generated/css/index.css +483 -107
- package/package.json +1 -1
- package/scss/_vars.scss +1 -0
- package/scss/base/_reboot.scss +1 -1
- package/scss/base/_root.scss +26 -33
- package/scss/colors/_index.scss +135 -19
- package/scss/components/_bordered-prominent-button.scss +3 -2
- package/scss/components/_disclosure-group.scss +10 -10
- package/scss/components/_form-view.scss +58 -20
- package/scss/components/_glass-prominent-button.scss +4 -2
- package/scss/components/_label-view.scss +12 -0
- package/scss/components/_list-view.scss +65 -25
- package/scss/components/_menu-view.scss +12 -8
- package/scss/components/_table-row.scss +1 -0
- package/scss/components/_table-view.scss +1 -1
- package/scss/mixins/_index.scss +31 -0
- package/scss/placeholders/_lists.scss +79 -56
- package/scss/utils/_index.scss +16 -48
package/generated/css/index.css
CHANGED
|
@@ -68,10 +68,6 @@
|
|
|
68
68
|
--navigation-bar-block-size: var(--tool-bar-block-size);
|
|
69
69
|
--nav-split-view-sidebar-inline-size: 20rem;
|
|
70
70
|
--nav-split-view-content-inline-size: 25rem;
|
|
71
|
-
--tint: oklch(0.5325 0.1899 257.12);
|
|
72
|
-
--tint1g: color-mix(in oklch, white 70%, var(--tint));
|
|
73
|
-
--tint2: color-mix(in oklch, white 80%, var(--tint));
|
|
74
|
-
--tint3: color-mix(in oklch, white 90%, var(--tint));
|
|
75
71
|
--tintcontrast: white;
|
|
76
72
|
--view-transition-leading-x: -50%;
|
|
77
73
|
--view-transition-principal-x: 0%;
|
|
@@ -157,92 +153,92 @@
|
|
|
157
153
|
--list-row-gap: 3rem;
|
|
158
154
|
--form-gap: 1rem;
|
|
159
155
|
--form-extra-gap: 3rem;
|
|
156
|
+
--insetform-item-border-radius: 1rem;
|
|
160
157
|
--list-item-padding-inline-start: 1rem;
|
|
161
158
|
--list-item-padding-inline-end: 1rem;
|
|
162
159
|
--list-item-padding-block-start: 1rem;
|
|
163
160
|
--list-item-padding-block-start: 1rem;
|
|
164
161
|
--list-item-background-color: var(--background);
|
|
165
162
|
--list-item-color: var(--primary);
|
|
166
|
-
--list-highlighteditem-background-color: var(--
|
|
163
|
+
--list-highlighteditem-background-color: var(--accentColor3);
|
|
167
164
|
--list-highlighteditem-color: ;
|
|
168
165
|
--insetlist-item-background-color: var(--background);
|
|
169
166
|
--insetlist-item-color: var(--primary);
|
|
170
|
-
--insetlist-highlighteditem-background-color: var(--
|
|
171
|
-
--insetlist-highlighteditem-color:
|
|
167
|
+
--insetlist-highlighteditem-background-color: var(--accentColor3);
|
|
168
|
+
--insetlist-highlighteditem-color: ;
|
|
172
169
|
--insetgroupedlist-item-background-color: var(--secondaryGroupedBackground);
|
|
173
170
|
--insetgroupedlist-item-color: var(--primary);
|
|
174
|
-
--insetgroupedlist-highlighteditem-background-color: var(--
|
|
175
|
-
--insetgroupedlist-highlighteditem-color:
|
|
171
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor3);
|
|
172
|
+
--insetgroupedlist-highlighteditem-color: ;
|
|
176
173
|
--sidebarlist-item-background-color: transparent;
|
|
177
174
|
--sidebarlist-item-color: var(--primary);
|
|
178
175
|
--sidebarlist-highlighteditem-background-color: var(--accentColor);
|
|
179
176
|
--sidebarlist-highlighteditem-color: var(--tintcontrast);
|
|
180
|
-
--list-openitem-background-color: var(--
|
|
177
|
+
--list-openitem-background-color: var(--accentColor5);
|
|
181
178
|
--list-openitem-color: var(--primary);
|
|
182
|
-
--list-opensummary-background-color: var(--
|
|
179
|
+
--list-opensummary-background-color: var(--accentColor4);
|
|
183
180
|
--list-opensummary-color: var(--primary);
|
|
184
|
-
--insetgroupedlist-openitem-background-color: var(--
|
|
181
|
+
--insetgroupedlist-openitem-background-color: var(--accentColor5);
|
|
185
182
|
--insetgroupedlist-openitem-color: var(--primary);
|
|
186
|
-
--insetgroupedlist-opensummary-background-color: var(--
|
|
183
|
+
--insetgroupedlist-opensummary-background-color: var(--accentColor4);
|
|
187
184
|
--insetgroupedlist-opensummary-color: var(--primary);
|
|
188
|
-
--insetlist-openitem-background-color: var(--
|
|
185
|
+
--insetlist-openitem-background-color: var(--accentColor5);
|
|
189
186
|
--insetlist-openitem-color: var(--primary);
|
|
190
|
-
--insetlist-opensummary-background-color: var(--
|
|
187
|
+
--insetlist-opensummary-background-color: var(--accentColor4);
|
|
191
188
|
--insetlist-opensummary-color: var(--primary);
|
|
192
189
|
--sidebarlist-openitem-background-color: transparent;
|
|
193
190
|
--sidebarlist-openitem-color: var(--primary);
|
|
194
191
|
--sidebarlist-opensummary-background-color: transparent;
|
|
195
192
|
--sidebarlist-opensummary-color: var(--primary);
|
|
193
|
+
--insetgroupedlist-background-color: var(--groupedBackground);
|
|
194
|
+
--insetlist-padding-inline: 1rem;
|
|
195
|
+
--insetlist-padding-block: 0rem;
|
|
196
|
+
--insetgroupedlist-padding-inline: 1rem;
|
|
197
|
+
--insetgroupedlist-padding-block: 1rem;
|
|
198
|
+
--sidebarlist-padding-inline: 1rem;
|
|
199
|
+
--sidebarlist-padding-block: 1rem;
|
|
196
200
|
--form-item-padding-inline-start: 1rem;
|
|
197
201
|
--form-item-padding-inline-end: 1rem;
|
|
198
202
|
--form-item-padding-block-start: 1rem;
|
|
199
203
|
--form-item-padding-block-start: 1rem;
|
|
200
204
|
--form-item-background-color: var(--background);
|
|
201
205
|
--form-item-color: var(--primary);
|
|
202
|
-
--form-highlighteditem-background-color: var(--
|
|
206
|
+
--form-highlighteditem-background-color: var(--accentColor3);
|
|
203
207
|
--form-highlighteditem-color: ;
|
|
204
208
|
--insetform-item-background-color: var(--background);
|
|
205
209
|
--insetform-item-color: var(--primary);
|
|
206
|
-
--insetform-highlighteditem-background-color: var(--
|
|
207
|
-
--insetform-highlighteditem-color:
|
|
210
|
+
--insetform-highlighteditem-background-color: var(--accentColor3);
|
|
211
|
+
--insetform-highlighteditem-color: ;
|
|
208
212
|
--insetgroupedform-item-background-color: var(--secondaryGroupedBackground);
|
|
209
213
|
--insetgroupedform-item-color: var(--primary);
|
|
210
|
-
--insetgroupedform-highlighteditem-background-color: var(--
|
|
211
|
-
--insetgroupedform-highlighteditem-color:
|
|
214
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor3);
|
|
215
|
+
--insetgroupedform-highlighteditem-color: ;
|
|
212
216
|
--sidebarform-item-background-color: transparent;
|
|
213
217
|
--sidebarform-item-color: var(--primary);
|
|
214
218
|
--sidebarform-highlighteditem-background-color: var(--accentColor);
|
|
215
219
|
--sidebarform-highlighteditem-color: var(--tintcontrast);
|
|
216
|
-
--form-openitem-background-color: var(--
|
|
220
|
+
--form-openitem-background-color: var(--accentColor5);
|
|
217
221
|
--form-openitem-color: var(--primary);
|
|
218
|
-
--form-opensummary-background-color: var(--
|
|
222
|
+
--form-opensummary-background-color: var(--accentColor4);
|
|
219
223
|
--form-opensummary-color: var(--primary);
|
|
220
|
-
--insetgroupedform-openitem-background-color: var(--
|
|
224
|
+
--insetgroupedform-openitem-background-color: var(--accentColor5);
|
|
221
225
|
--insetgroupedform-openitem-color: var(--primary);
|
|
222
|
-
--insetgroupedform-opensummary-background-color: var(--
|
|
226
|
+
--insetgroupedform-opensummary-background-color: var(--accentColor4);
|
|
223
227
|
--insetgroupedform-opensummary-color: var(--primary);
|
|
224
|
-
--insetform-openitem-background-color: var(--
|
|
228
|
+
--insetform-openitem-background-color: var(--accentColor5);
|
|
225
229
|
--insetform-openitem-color: var(--primary);
|
|
226
|
-
--insetform-opensummary-background-color: var(--
|
|
230
|
+
--insetform-opensummary-background-color: var(--accentColor4);
|
|
227
231
|
--insetform-opensummary-color: var(--primary);
|
|
228
232
|
--sidebarform-openitem-background-color: transparent;
|
|
229
233
|
--sidebarform-openitem-color: var(--primary);
|
|
230
234
|
--sidebarform-opensummary-background-color: transparent;
|
|
231
235
|
--sidebarform-opensummary-color: var(--primary);
|
|
232
|
-
--insetform-item-border-radius: 1rem;
|
|
233
|
-
--insetgroupedlist-background-color: var(--groupedBackground);
|
|
234
236
|
--insetgroupedform-background-color: var(--groupedBackground);
|
|
235
|
-
--insetlist-padding-inline: 1rem;
|
|
236
|
-
--insetlist-padding-block: 0rem;
|
|
237
237
|
--insetform-padding-inline: 1rem;
|
|
238
238
|
--insetform-padding-block: 0rem;
|
|
239
|
-
--insetgroupedlist-padding-inline: 1rem;
|
|
240
239
|
--insetgroupedform-padding-inline: 1rem;
|
|
241
|
-
--insetgroupedlist-padding-block: 1rem;
|
|
242
240
|
--insetgroupedform-padding-block: 1rem;
|
|
243
|
-
--sidebarlist-padding-inline: 1rem;
|
|
244
241
|
--sidebarform-padding-inline: 1rem;
|
|
245
|
-
--sidebarlist-padding-block: 1rem;
|
|
246
242
|
--sidebarform-padding-block: 1rem;
|
|
247
243
|
--table-row-gap: 0.5rem;
|
|
248
244
|
--table-col-gap: 1rem;
|
|
@@ -299,7 +295,7 @@
|
|
|
299
295
|
color-scheme: light;
|
|
300
296
|
}
|
|
301
297
|
}
|
|
302
|
-
@layer sw-base, sw-components, sw-nav-components, sw-tab-components, sw-utils, sw-colors, sw-actions, sw-transitions, sw-final;
|
|
298
|
+
@layer sw-base, sw-components, sw-nav-components, sw-list-components, sw-tab-components, sw-utils, sw-colors, sw-actions, sw-transitions, sw-final;
|
|
303
299
|
@layer sw-base {
|
|
304
300
|
:root {
|
|
305
301
|
interpolate-size: allow-keywords;
|
|
@@ -404,7 +400,7 @@
|
|
|
404
400
|
display: none;
|
|
405
401
|
}
|
|
406
402
|
}
|
|
407
|
-
@layer sw-components {
|
|
403
|
+
@layer sw-list-components {
|
|
408
404
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
409
405
|
background-color: var(--list--host-background-color, );
|
|
410
406
|
padding-inline: var(--list--host-padding-inline, );
|
|
@@ -448,27 +444,18 @@
|
|
|
448
444
|
transition-duration: 0ms;
|
|
449
445
|
}
|
|
450
446
|
}
|
|
451
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot]
|
|
447
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot]) ~ section-view:not([slot]):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) :not([slot]) ~ section-view:not([slot]):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) :not([slot]) ~ section-view:not([slot]):not(menu-view *)) {
|
|
452
448
|
padding-block-start: var(--list--section-gap, );
|
|
453
449
|
}
|
|
454
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not([slot])
|
|
455
|
-
padding-block-start: var(--list--section-gap, );
|
|
456
|
-
}
|
|
457
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:has(~ :not([slot], section-view)):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:has(~ :not([slot], section-view)):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:has(~ :not([slot], section-view)):not(menu-view *)) {
|
|
450
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *)) {
|
|
458
451
|
padding-block-end: var(--list--section-gap, );
|
|
459
452
|
}
|
|
460
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot],
|
|
453
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *)) {
|
|
461
454
|
margin-block-start: var(--list--details-gap, );
|
|
462
455
|
}
|
|
463
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:not([slot])
|
|
464
|
-
margin-block-start: calc(var(--list--details-gap, 0px) / 2);
|
|
465
|
-
}
|
|
466
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *)) {
|
|
456
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *)) {
|
|
467
457
|
margin-block-end: var(--list--details-gap, );
|
|
468
458
|
}
|
|
469
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *)) {
|
|
470
|
-
margin-block-end: calc(var(--list--details-gap, 0px) / 2);
|
|
471
|
-
}
|
|
472
459
|
:where(table-view:not(menu-view *):not(table-view table-view, list-view table-view, [is=form-view] table-view), [is=form-view]:not(menu-view *):not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view:not(menu-view *):not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
473
460
|
--itempadistart: var(--list--item-padding-inline-start, 0rem);
|
|
474
461
|
--itempadiend: calc(var(--list--item-padding-inline-end, 0rem) + var(--list--accessories-size, 0rem));
|
|
@@ -766,22 +753,22 @@
|
|
|
766
753
|
--itemradiusbr: var(--list--item-border-radius,);
|
|
767
754
|
--itemradiusbl: var(--list--adjacentitem-border-radius,);
|
|
768
755
|
}
|
|
769
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
770
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
771
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
772
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
773
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
774
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
775
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button)) {
|
|
756
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
757
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
758
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
759
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
760
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
761
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
762
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link])) {
|
|
776
763
|
position: relative;
|
|
777
764
|
}
|
|
778
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
779
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
780
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
781
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
782
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
783
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
784
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button))::after {
|
|
765
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
766
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
767
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
768
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
769
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
770
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
771
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
|
|
785
772
|
pointer-events: none;
|
|
786
773
|
content: "";
|
|
787
774
|
-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
@@ -790,13 +777,13 @@
|
|
|
790
777
|
aspect-ratio: 1;
|
|
791
778
|
place-self: center;
|
|
792
779
|
}
|
|
793
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
794
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
795
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
796
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
797
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
798
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
799
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button))::after {
|
|
780
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
781
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
782
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
783
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
784
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
785
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
786
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
|
|
800
787
|
position: absolute;
|
|
801
788
|
inset: 50% var(--itempadiend) auto auto;
|
|
802
789
|
display: var(--list--accessories-display, grid);
|
|
@@ -805,6 +792,15 @@
|
|
|
805
792
|
background-color: var(--quaternary);
|
|
806
793
|
transform: translateY(-50%) translateX(120%);
|
|
807
794
|
}
|
|
795
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
796
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
797
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
798
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
799
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
800
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
801
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image]) {
|
|
802
|
+
color: var(--accentColor);
|
|
803
|
+
}
|
|
808
804
|
}
|
|
809
805
|
@layer sw-colors {
|
|
810
806
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
@@ -826,8 +822,21 @@
|
|
|
826
822
|
--itemface: var(--itemhighlightface,);
|
|
827
823
|
--itemtext: var(--itemhighlighttext,);
|
|
828
824
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
825
|
+
}
|
|
826
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
827
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
828
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
829
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
830
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
831
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
832
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly])):focus-visible > * {
|
|
829
833
|
--secondary: var(--itemtext);
|
|
830
834
|
--blue: var(--itemtext);
|
|
835
|
+
--red: var(--itemtext);
|
|
836
|
+
--green: var(--itemtext);
|
|
837
|
+
--orange: var(--itemtext);
|
|
838
|
+
--accentColor: var(--itemtext);
|
|
839
|
+
--accentColorEffective: var(--itemtext);
|
|
831
840
|
}
|
|
832
841
|
}
|
|
833
842
|
@layer sw-actions {
|
|
@@ -841,8 +850,21 @@
|
|
|
841
850
|
--itemface: var(--itemactiveface,);
|
|
842
851
|
--itemtext: var(--itemactivetext,);
|
|
843
852
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
853
|
+
}
|
|
854
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
855
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
856
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
857
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
858
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
859
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
860
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly])).active > * {
|
|
844
861
|
--secondary: var(--itemtext);
|
|
845
862
|
--blue: var(--itemtext);
|
|
863
|
+
--red: var(--itemtext);
|
|
864
|
+
--green: var(--itemtext);
|
|
865
|
+
--orange: var(--itemtext);
|
|
866
|
+
--accentColor: var(--itemtext);
|
|
867
|
+
--accentColorEffective: var(--itemtext);
|
|
846
868
|
}
|
|
847
869
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
848
870
|
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
@@ -854,8 +876,21 @@
|
|
|
854
876
|
--itemface: var(--itemactiveface);
|
|
855
877
|
--itemtext: var(--itemactivetext,);
|
|
856
878
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
879
|
+
}
|
|
880
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
881
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
882
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
883
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
884
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
885
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
886
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true]) > * {
|
|
857
887
|
--secondary: var(--itemtext);
|
|
858
888
|
--blue: var(--itemtext);
|
|
889
|
+
--red: var(--itemtext);
|
|
890
|
+
--green: var(--itemtext);
|
|
891
|
+
--orange: var(--itemtext);
|
|
892
|
+
--accentColor: var(--itemtext);
|
|
893
|
+
--accentColorEffective: var(--itemtext);
|
|
859
894
|
}
|
|
860
895
|
}
|
|
861
896
|
@layer sw-components {
|
|
@@ -1188,6 +1223,11 @@
|
|
|
1188
1223
|
:where([is=disclosure-group]) {
|
|
1189
1224
|
overflow: clip;
|
|
1190
1225
|
--disclosure--host-details-content-block-size: 0;
|
|
1226
|
+
--disclosure--summary-grid-template-columns: ;
|
|
1227
|
+
--disclosure--summary-grid-auto-flow: ;
|
|
1228
|
+
--disclosure--summary-gap: ;
|
|
1229
|
+
--disclosure--marker-display: none;
|
|
1230
|
+
--disclosure--marker-transform: ;
|
|
1191
1231
|
}
|
|
1192
1232
|
@supports (x: if(else:red)) {
|
|
1193
1233
|
:where([is=disclosure-group]) {
|
|
@@ -1201,11 +1241,6 @@
|
|
|
1201
1241
|
@supports not (x: if(else:red)) {
|
|
1202
1242
|
:where([is=disclosure-group]) {
|
|
1203
1243
|
--disclosure-style: ;
|
|
1204
|
-
--disclosure--summary-grid-template-columns: ;
|
|
1205
|
-
--disclosure--summary-grid-auto-flow: ;
|
|
1206
|
-
--disclosure--summary-gap: ;
|
|
1207
|
-
--disclosure--marker-display: none;
|
|
1208
|
-
--disclosure--marker-transform: ;
|
|
1209
1244
|
}
|
|
1210
1245
|
}
|
|
1211
1246
|
:where([is=disclosure-group] > summary) {
|
|
@@ -1259,9 +1294,6 @@
|
|
|
1259
1294
|
background: transparent;
|
|
1260
1295
|
block-size: var(--disclosure--host-details-content-block-size);
|
|
1261
1296
|
}
|
|
1262
|
-
:where([is=disclosure-group] > *:not(summary)) {
|
|
1263
|
-
margin: 0;
|
|
1264
|
-
}
|
|
1265
1297
|
:where([is=disclosure-group][open]) {
|
|
1266
1298
|
--disclosure--host-details-content-block-size: auto;
|
|
1267
1299
|
--disclosure--marker-transform: rotate(90deg);
|
|
@@ -2342,6 +2374,11 @@
|
|
|
2342
2374
|
:where([is=bordered-prominent-button] > *) {
|
|
2343
2375
|
--secondary: var(--btntext);
|
|
2344
2376
|
--blue: var(--btntext);
|
|
2377
|
+
--red: var(--btntext);
|
|
2378
|
+
--green: var(--btntext);
|
|
2379
|
+
--orange: var(--btntext);
|
|
2380
|
+
--accentColor: var(--btntext);
|
|
2381
|
+
--accentColorEffective: var(--btntext);
|
|
2345
2382
|
}
|
|
2346
2383
|
}
|
|
2347
2384
|
@layer sw-utils {
|
|
@@ -2464,6 +2501,11 @@
|
|
|
2464
2501
|
:where([is=glass-prominent-button] > *) {
|
|
2465
2502
|
--secondary: var(--btntext);
|
|
2466
2503
|
--blue: var(--btntext);
|
|
2504
|
+
--red: var(--btntext);
|
|
2505
|
+
--green: var(--btntext);
|
|
2506
|
+
--orange: var(--btntext);
|
|
2507
|
+
--accentColor: var(--btntext);
|
|
2508
|
+
--accentColorEffective: var(--btntext);
|
|
2467
2509
|
}
|
|
2468
2510
|
}
|
|
2469
2511
|
@layer sw-utils {
|
|
@@ -2635,12 +2677,16 @@
|
|
|
2635
2677
|
@container style(--label-style: icon-only) {
|
|
2636
2678
|
:where(label-view:not([label-style])) {
|
|
2637
2679
|
--label-style: icon-only;
|
|
2680
|
+
--label--host-align-items: center;
|
|
2681
|
+
--label--host-justify-items: normal;
|
|
2638
2682
|
--label--iconstack-display: grid;
|
|
2639
2683
|
}
|
|
2640
2684
|
}
|
|
2641
2685
|
@container style(--label-style: title-only) {
|
|
2642
2686
|
:where(label-view:not([label-style])) {
|
|
2643
2687
|
--label-style: title-only;
|
|
2688
|
+
--label--host-align-items: center;
|
|
2689
|
+
--label--host-justify-items: normal;
|
|
2644
2690
|
--label--titlestack-display: grid;
|
|
2645
2691
|
}
|
|
2646
2692
|
}
|
|
@@ -2657,10 +2703,14 @@
|
|
|
2657
2703
|
}
|
|
2658
2704
|
:where(label-view[label-style=icon-only]) {
|
|
2659
2705
|
--label-style: icon-only;
|
|
2706
|
+
--label--host-align-items: center;
|
|
2707
|
+
--label--host-justify-items: normal;
|
|
2660
2708
|
--label--iconstack-display: grid;
|
|
2661
2709
|
}
|
|
2662
2710
|
:where(label-view[label-style=title-only]) {
|
|
2663
2711
|
--label-style: title-only;
|
|
2712
|
+
--label--host-align-items: center;
|
|
2713
|
+
--label--host-justify-items: normal;
|
|
2664
2714
|
--label--titlestack-display: grid;
|
|
2665
2715
|
}
|
|
2666
2716
|
:where(label-view[label-style=title-and-icon]) {
|
|
@@ -2684,22 +2734,30 @@
|
|
|
2684
2734
|
}
|
|
2685
2735
|
:where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
|
|
2686
2736
|
--label-style: icon-only;
|
|
2737
|
+
--label--host-align-items: center;
|
|
2738
|
+
--label--host-justify-items: normal;
|
|
2687
2739
|
--label--iconstack-display: grid;
|
|
2688
2740
|
}
|
|
2689
2741
|
:where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
|
|
2690
2742
|
--label-style: title-only;
|
|
2743
|
+
--label--host-align-items: center;
|
|
2744
|
+
--label--host-justify-items: normal;
|
|
2691
2745
|
--label--titlestack-display: grid;
|
|
2692
2746
|
}
|
|
2693
2747
|
}
|
|
2694
2748
|
@container style(--label-style: icon-only) and style(--label-flow: vertical) {
|
|
2695
2749
|
:where(label-view:not([label-style])) {
|
|
2696
2750
|
--label-style: icon-only;
|
|
2751
|
+
--label--host-align-items: normal;
|
|
2752
|
+
--label--host-justify-items: center;
|
|
2697
2753
|
--label--iconstack-display: grid;
|
|
2698
2754
|
}
|
|
2699
2755
|
}
|
|
2700
2756
|
@container style(--label-style: title-only) and style(--label-flow: vertical) {
|
|
2701
2757
|
:where(label-view:not([label-style])) {
|
|
2702
2758
|
--label-style: title-only;
|
|
2759
|
+
--label--host-align-items: normal;
|
|
2760
|
+
--label--host-justify-items: center;
|
|
2703
2761
|
--label--titlestack-display: grid;
|
|
2704
2762
|
}
|
|
2705
2763
|
}
|
|
@@ -2717,10 +2775,14 @@
|
|
|
2717
2775
|
@container style(--label-flow: vertical) {
|
|
2718
2776
|
:where(label-view[label-style=icon-only]) {
|
|
2719
2777
|
--label-style: icon-only;
|
|
2778
|
+
--label--host-align-items: normal;
|
|
2779
|
+
--label--host-justify-items: center;
|
|
2720
2780
|
--label--iconstack-display: grid;
|
|
2721
2781
|
}
|
|
2722
2782
|
:where(label-view[label-style=title-only]) {
|
|
2723
2783
|
--label-style: title-only;
|
|
2784
|
+
--label--host-align-items: normal;
|
|
2785
|
+
--label--host-justify-items: center;
|
|
2724
2786
|
--label--titlestack-display: grid;
|
|
2725
2787
|
}
|
|
2726
2788
|
:where(label-view[label-style=title-and-icon]) {
|
|
@@ -2745,10 +2807,14 @@
|
|
|
2745
2807
|
}
|
|
2746
2808
|
:where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
|
|
2747
2809
|
--label-style: icon-only;
|
|
2810
|
+
--label--host-align-items: normal;
|
|
2811
|
+
--label--host-justify-items: center;
|
|
2748
2812
|
--label--iconstack-display: grid;
|
|
2749
2813
|
}
|
|
2750
2814
|
:where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
|
|
2751
2815
|
--label-style: title-only;
|
|
2816
|
+
--label--host-align-items: normal;
|
|
2817
|
+
--label--host-justify-items: center;
|
|
2752
2818
|
--label--titlestack-display: grid;
|
|
2753
2819
|
}
|
|
2754
2820
|
}
|
|
@@ -3215,6 +3281,11 @@
|
|
|
3215
3281
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3216
3282
|
--secondary: var(--menuitemtext);
|
|
3217
3283
|
--blue: var(--menuitemtext);
|
|
3284
|
+
--red: var(--menuitemtext);
|
|
3285
|
+
--green: var(--menuitemtext);
|
|
3286
|
+
--orange: var(--menuitemtext);
|
|
3287
|
+
--accentColor: var(--menuitemtext);
|
|
3288
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3218
3289
|
}
|
|
3219
3290
|
@media (pointer: fine) {
|
|
3220
3291
|
:where(menu-view > button:not(:disabled):not([readonly]),
|
|
@@ -3224,6 +3295,11 @@
|
|
|
3224
3295
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3225
3296
|
--secondary: var(--menuitemtext);
|
|
3226
3297
|
--blue: var(--menuitemtext);
|
|
3298
|
+
--red: var(--menuitemtext);
|
|
3299
|
+
--green: var(--menuitemtext);
|
|
3300
|
+
--orange: var(--menuitemtext);
|
|
3301
|
+
--accentColor: var(--menuitemtext);
|
|
3302
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3227
3303
|
}
|
|
3228
3304
|
}
|
|
3229
3305
|
:where(menu-view > menu-view:not(:disabled):not([readonly])):focus-visible {
|
|
@@ -3234,6 +3310,11 @@
|
|
|
3234
3310
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3235
3311
|
--secondary: var(--menuitemtext);
|
|
3236
3312
|
--blue: var(--menuitemtext);
|
|
3313
|
+
--red: var(--menuitemtext);
|
|
3314
|
+
--green: var(--menuitemtext);
|
|
3315
|
+
--orange: var(--menuitemtext);
|
|
3316
|
+
--accentColor: var(--menuitemtext);
|
|
3317
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3237
3318
|
}
|
|
3238
3319
|
@media (pointer: fine) {
|
|
3239
3320
|
:where(menu-view > menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
|
|
@@ -3241,6 +3322,11 @@
|
|
|
3241
3322
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3242
3323
|
--secondary: var(--menuitemtext);
|
|
3243
3324
|
--blue: var(--menuitemtext);
|
|
3325
|
+
--red: var(--menuitemtext);
|
|
3326
|
+
--green: var(--menuitemtext);
|
|
3327
|
+
--orange: var(--menuitemtext);
|
|
3328
|
+
--accentColor: var(--menuitemtext);
|
|
3329
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3244
3330
|
}
|
|
3245
3331
|
}
|
|
3246
3332
|
}
|
|
@@ -3316,7 +3402,7 @@
|
|
|
3316
3402
|
margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
|
|
3317
3403
|
}
|
|
3318
3404
|
}
|
|
3319
|
-
@layer sw-components {
|
|
3405
|
+
@layer sw-list-components {
|
|
3320
3406
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3321
3407
|
--list--section-gap: var(--list-row-gap);
|
|
3322
3408
|
--list--host-background-color: var(--list-background-color, );
|
|
@@ -3368,6 +3454,7 @@
|
|
|
3368
3454
|
--list--selectedrootsummary-color: if(style(--list-style: sidebar): var(--primary, ); );
|
|
3369
3455
|
--list--separator-background-color: if(style(--list-style: sidebar): transparent; );
|
|
3370
3456
|
--list--activeseparator-background-color: if(style(--list-style: sidebar): transparent; );
|
|
3457
|
+
--list--accessories-size: if(style(--list-style: sidebar): 0rem; else: 1.1rem ;);
|
|
3371
3458
|
--list--accessories-display: if(style(--list-style: sidebar): none; else: grid ;);
|
|
3372
3459
|
--list--rootsummary-marker-display: if(style(--list-style: sidebar): marker-trailing; );
|
|
3373
3460
|
}
|
|
@@ -3375,6 +3462,7 @@
|
|
|
3375
3462
|
@supports not (x: if(else:red)) {
|
|
3376
3463
|
@container style(--list-style: inset) {
|
|
3377
3464
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3465
|
+
--list-style: inset;
|
|
3378
3466
|
--list--item-color: var(--insetlist-item-color, );
|
|
3379
3467
|
--list--item-background-color: var(--insetlist-item-background-color, );
|
|
3380
3468
|
--list--highlighteditem-color: var(--insetlist-highlighteditem-color, );
|
|
@@ -3394,6 +3482,7 @@
|
|
|
3394
3482
|
}
|
|
3395
3483
|
@container style(--list-style: inset-grouped) {
|
|
3396
3484
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3485
|
+
--list-style: inset-grouped;
|
|
3397
3486
|
--list--item-color: var(--insetgroupedlist-item-color, );
|
|
3398
3487
|
--list--item-background-color: var(--insetgroupedlist-item-background-color, );
|
|
3399
3488
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
@@ -3413,6 +3502,7 @@
|
|
|
3413
3502
|
}
|
|
3414
3503
|
@container style(--list-style: sidebar) {
|
|
3415
3504
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3505
|
+
--list-style: sidebar;
|
|
3416
3506
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
3417
3507
|
--list--details-gap: var(--list-row-gap);
|
|
3418
3508
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3441,11 +3531,13 @@
|
|
|
3441
3531
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3442
3532
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3443
3533
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3534
|
+
--list--accessories-size: 0rem;
|
|
3444
3535
|
--list--accessories-display: none;
|
|
3445
3536
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3446
3537
|
}
|
|
3447
3538
|
}
|
|
3448
3539
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=inset]) {
|
|
3540
|
+
--list-style: inset;
|
|
3449
3541
|
--list--item-color: var(--insetlist-item-color, );
|
|
3450
3542
|
--list--item-background-color: var(--insetlist-item-background-color, );
|
|
3451
3543
|
--list--highlighteditem-color: var(--insetlist-highlighteditem-color, );
|
|
@@ -3463,6 +3555,7 @@
|
|
|
3463
3555
|
--list--opensummary-color: var(--insetlist-opensummary-color, );
|
|
3464
3556
|
}
|
|
3465
3557
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=inset-grouped]) {
|
|
3558
|
+
--list-style: inset-grouped;
|
|
3466
3559
|
--list--item-color: var(--insetgroupedlist-item-color, );
|
|
3467
3560
|
--list--item-background-color: var(--insetgroupedlist-item-background-color, );
|
|
3468
3561
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
@@ -3480,6 +3573,7 @@
|
|
|
3480
3573
|
--list--opensummary-color: var(--insetgroupedlist-opensummary-color, );
|
|
3481
3574
|
}
|
|
3482
3575
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=sidebar]) {
|
|
3576
|
+
--list-style: sidebar;
|
|
3483
3577
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
3484
3578
|
--list--details-gap: var(--list-row-gap);
|
|
3485
3579
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3508,6 +3602,7 @@
|
|
|
3508
3602
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3509
3603
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3510
3604
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3605
|
+
--list--accessories-size: 0rem;
|
|
3511
3606
|
--list--accessories-display: none;
|
|
3512
3607
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3513
3608
|
}
|
|
@@ -3541,6 +3636,7 @@
|
|
|
3541
3636
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3542
3637
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3543
3638
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3639
|
+
--list--accessories-size: 0rem;
|
|
3544
3640
|
--list--accessories-display: none;
|
|
3545
3641
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3546
3642
|
}
|
|
@@ -3576,6 +3672,73 @@
|
|
|
3576
3672
|
}
|
|
3577
3673
|
}
|
|
3578
3674
|
}
|
|
3675
|
+
@container not style(--list-style: sidebar) {
|
|
3676
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3677
|
+
--itemhighlightface: var(--accentColor3);
|
|
3678
|
+
--itemactiveface: var(--accentColor3);
|
|
3679
|
+
}
|
|
3680
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]:not([is=navigation-link]) {
|
|
3681
|
+
--itemtext: var(--accentColor);
|
|
3682
|
+
--itemhighlighttext: var(--accentColor);
|
|
3683
|
+
--itemactivetext: var(--accentColor);
|
|
3684
|
+
}
|
|
3685
|
+
}
|
|
3686
|
+
@container style(--list-style: sidebar) {
|
|
3687
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3688
|
+
--itemhighlightface: var(--accentColor);
|
|
3689
|
+
--itemactiveface: var(--accentColor);
|
|
3690
|
+
}
|
|
3691
|
+
}
|
|
3692
|
+
@media (min-width: 43rem) {
|
|
3693
|
+
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3694
|
+
--list--accessories-size: 0rem;
|
|
3695
|
+
--list--accessories-display: none;
|
|
3696
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3697
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3698
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3699
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3700
|
+
}
|
|
3701
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3702
|
+
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3703
|
+
--itemhighlightface: var(--accentColor);
|
|
3704
|
+
--itemactiveface: var(--accentColor);
|
|
3705
|
+
}
|
|
3706
|
+
}
|
|
3707
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3708
|
+
--list--accessories-size: 0rem;
|
|
3709
|
+
--list--accessories-display: none;
|
|
3710
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3711
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3712
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3713
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3714
|
+
}
|
|
3715
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3716
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3717
|
+
--itemhighlightface: var(--accentColor);
|
|
3718
|
+
--itemactiveface: var(--accentColor);
|
|
3719
|
+
}
|
|
3720
|
+
}
|
|
3721
|
+
}
|
|
3722
|
+
@media (min-width: 64rem) {
|
|
3723
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3724
|
+
--list--accessories-size: 0rem;
|
|
3725
|
+
--list--accessories-display: none;
|
|
3726
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3727
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3728
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3729
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3730
|
+
}
|
|
3731
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3732
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3733
|
+
--itemhighlightface: var(--accentColor);
|
|
3734
|
+
--itemactiveface: var(--accentColor);
|
|
3735
|
+
}
|
|
3736
|
+
}
|
|
3737
|
+
}
|
|
3738
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[navigation-link-indicator-visibility=hidden]) {
|
|
3739
|
+
--list--accessories-size: 0rem;
|
|
3740
|
+
--list--accessories-display: none;
|
|
3741
|
+
}
|
|
3579
3742
|
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[preferred-root-disclosure-style=sidebar] {
|
|
3580
3743
|
--list--rootsummary-color: var(--primary);
|
|
3581
3744
|
--list--selectedrootsummary-color: var(--primary);
|
|
@@ -3612,13 +3775,8 @@
|
|
|
3612
3775
|
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[preferred-root-disclosure-style=sidebar] > section-view > [is=disclosure-group] > button:first-of-type::before {
|
|
3613
3776
|
display: none;
|
|
3614
3777
|
}
|
|
3615
|
-
@media (min-width: 43rem) {
|
|
3616
|
-
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view), navigation-split-view > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3617
|
-
--list--accessories-display: none;
|
|
3618
|
-
}
|
|
3619
|
-
}
|
|
3620
3778
|
}
|
|
3621
|
-
@layer sw-components {
|
|
3779
|
+
@layer sw-list-components {
|
|
3622
3780
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
3623
3781
|
--list--section-gap: var(--form-gap);
|
|
3624
3782
|
--list--host-background-color: var(--form-background-color, );
|
|
@@ -3669,6 +3827,7 @@
|
|
|
3669
3827
|
--list--selectedrootsummary-color: if(style(--form-style: sidebar): var(--primary, ); );
|
|
3670
3828
|
--list--separator-background-color: if(style(--form-style: sidebar): transparent; );
|
|
3671
3829
|
--list--activeseparator-background-color: if(style(--form-style: sidebar): transparent; );
|
|
3830
|
+
--list--accessories-size: if(style(--form-style: sidebar): 0rem; else: 1.1rem ;);
|
|
3672
3831
|
--list--accessories-display: if(style(--form-style: sidebar): none; else: grid ;);
|
|
3673
3832
|
--list--rootsummary-marker-display: if(style(--form-style: sidebar): marker-trailing; );
|
|
3674
3833
|
}
|
|
@@ -3676,6 +3835,7 @@
|
|
|
3676
3835
|
@supports not (x: if(else:red)) {
|
|
3677
3836
|
@container style(--form-style: inset) {
|
|
3678
3837
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3838
|
+
--form-style: inset;
|
|
3679
3839
|
--list--host-background-color: var(--insetform-background-color, );
|
|
3680
3840
|
--list--host-padding-inline: var(--insetform-padding-inline);
|
|
3681
3841
|
--list--host-padding-block: var(--insetform-padding-block);
|
|
@@ -3695,6 +3855,7 @@
|
|
|
3695
3855
|
}
|
|
3696
3856
|
@container style(--form-style: inset-grouped) {
|
|
3697
3857
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3858
|
+
--form-style: inset-grouped;
|
|
3698
3859
|
--list--host-background-color: var(--insetgroupedform-background-color, );
|
|
3699
3860
|
--list--host-padding-inline: var(--insetgroupedform-padding-inline);
|
|
3700
3861
|
--list--host-padding-block: var(--insetgroupedform-padding-block);
|
|
@@ -3714,6 +3875,7 @@
|
|
|
3714
3875
|
}
|
|
3715
3876
|
@container style(--form-style: sidebar) {
|
|
3716
3877
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3878
|
+
--form-style: sidebar;
|
|
3717
3879
|
--list--item-border-radius: var(--insetform-item-border-radius);
|
|
3718
3880
|
--list--details-gap: var(--form-gap);
|
|
3719
3881
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3742,11 +3904,13 @@
|
|
|
3742
3904
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3743
3905
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3744
3906
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
3907
|
+
--list--accessories-size: 0rem;
|
|
3745
3908
|
--list--accessories-display: none;
|
|
3746
3909
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3747
3910
|
}
|
|
3748
3911
|
}
|
|
3749
3912
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=inset]) {
|
|
3913
|
+
--form-style: inset;
|
|
3750
3914
|
--list--host-background-color: var(--insetform-background-color, );
|
|
3751
3915
|
--list--host-padding-inline: var(--insetform-padding-inline);
|
|
3752
3916
|
--list--host-padding-block: var(--insetform-padding-block);
|
|
@@ -3764,6 +3928,7 @@
|
|
|
3764
3928
|
--list--opensummary-color: var(--insetform-opensummary-color, );
|
|
3765
3929
|
}
|
|
3766
3930
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=inset-grouped]) {
|
|
3931
|
+
--form-style: inset-grouped;
|
|
3767
3932
|
--list--host-background-color: var(--insetgroupedform-background-color, );
|
|
3768
3933
|
--list--host-padding-inline: var(--insetgroupedform-padding-inline);
|
|
3769
3934
|
--list--host-padding-block: var(--insetgroupedform-padding-block);
|
|
@@ -3781,6 +3946,7 @@
|
|
|
3781
3946
|
--list--opensummary-color: var(--insetgroupedform-opensummary-color, );
|
|
3782
3947
|
}
|
|
3783
3948
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=sidebar]) {
|
|
3949
|
+
--form-style: sidebar;
|
|
3784
3950
|
--list--item-border-radius: var(--insetform-item-border-radius);
|
|
3785
3951
|
--list--details-gap: var(--form-gap);
|
|
3786
3952
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3809,6 +3975,7 @@
|
|
|
3809
3975
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3810
3976
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3811
3977
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
3978
|
+
--list--accessories-size: 0rem;
|
|
3812
3979
|
--list--accessories-display: none;
|
|
3813
3980
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3814
3981
|
}
|
|
@@ -3842,6 +4009,7 @@
|
|
|
3842
4009
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3843
4010
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3844
4011
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
4012
|
+
--list--accessories-size: 0rem;
|
|
3845
4013
|
--list--accessories-display: none;
|
|
3846
4014
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3847
4015
|
}
|
|
@@ -3877,11 +4045,73 @@
|
|
|
3877
4045
|
}
|
|
3878
4046
|
}
|
|
3879
4047
|
}
|
|
4048
|
+
@container not style(--form-style: sidebar) {
|
|
4049
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4050
|
+
--itemhighlightface: var(--accentColor3);
|
|
4051
|
+
--itemactiveface: var(--accentColor3);
|
|
4052
|
+
}
|
|
4053
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]:not([is=navigation-link]) {
|
|
4054
|
+
--itemtext: var(--accentColor);
|
|
4055
|
+
--itemhighlighttext: var(--accentColor);
|
|
4056
|
+
--itemactivetext: var(--accentColor);
|
|
4057
|
+
}
|
|
4058
|
+
}
|
|
4059
|
+
@container style(--form-style: sidebar) {
|
|
4060
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4061
|
+
--itemhighlightface: var(--accentColor);
|
|
4062
|
+
--itemactiveface: var(--accentColor);
|
|
4063
|
+
}
|
|
4064
|
+
}
|
|
3880
4065
|
@media (min-width: 43rem) {
|
|
3881
|
-
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])
|
|
4066
|
+
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4067
|
+
--list--accessories-size: 0rem;
|
|
3882
4068
|
--list--accessories-display: none;
|
|
4069
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4070
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4071
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4072
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4073
|
+
}
|
|
4074
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4075
|
+
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4076
|
+
--itemhighlightface: var(--accentColor);
|
|
4077
|
+
--itemactiveface: var(--accentColor);
|
|
4078
|
+
}
|
|
4079
|
+
}
|
|
4080
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4081
|
+
--list--accessories-size: 0rem;
|
|
4082
|
+
--list--accessories-display: none;
|
|
4083
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4084
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4085
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4086
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4087
|
+
}
|
|
4088
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4089
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4090
|
+
--itemhighlightface: var(--accentColor);
|
|
4091
|
+
--itemactiveface: var(--accentColor);
|
|
4092
|
+
}
|
|
3883
4093
|
}
|
|
3884
4094
|
}
|
|
4095
|
+
@media (min-width: 64rem) {
|
|
4096
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4097
|
+
--list--accessories-size: 0rem;
|
|
4098
|
+
--list--accessories-display: none;
|
|
4099
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4100
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4101
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4102
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4103
|
+
}
|
|
4104
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4105
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4106
|
+
--itemhighlightface: var(--accentColor);
|
|
4107
|
+
--itemactiveface: var(--accentColor);
|
|
4108
|
+
}
|
|
4109
|
+
}
|
|
4110
|
+
}
|
|
4111
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[navigation-link-indicator-visibility=hidden]) {
|
|
4112
|
+
--list--accessories-size: 0rem;
|
|
4113
|
+
--list--accessories-display: none;
|
|
4114
|
+
}
|
|
3885
4115
|
}
|
|
3886
4116
|
@layer sw-components {
|
|
3887
4117
|
:where(section-view) {
|
|
@@ -3958,7 +4188,7 @@
|
|
|
3958
4188
|
inherits: false;
|
|
3959
4189
|
initial-value: 0;
|
|
3960
4190
|
}
|
|
3961
|
-
@layer sw-components {
|
|
4191
|
+
@layer sw-list-components {
|
|
3962
4192
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)) {
|
|
3963
4193
|
container: table/inline-size;
|
|
3964
4194
|
}
|
|
@@ -4177,6 +4407,7 @@
|
|
|
4177
4407
|
display: none;
|
|
4178
4408
|
}
|
|
4179
4409
|
:where([is=table-row]) {
|
|
4410
|
+
--list--accessories-size: 0rem;
|
|
4180
4411
|
--list--accessories-display: none;
|
|
4181
4412
|
grid-auto-flow: column;
|
|
4182
4413
|
grid-auto-columns: minmax(0, 1fr);
|
|
@@ -5024,7 +5255,8 @@
|
|
|
5024
5255
|
:where([foreground="blue.secondary"]) {
|
|
5025
5256
|
color: var(--blue2);
|
|
5026
5257
|
}
|
|
5027
|
-
:where([tint=
|
|
5258
|
+
:where([tint='"" + $tint'],
|
|
5259
|
+
[list-item-tint='"" + $tint']) {
|
|
5028
5260
|
--accentColorEffective: var(--gray);
|
|
5029
5261
|
--accentColorEffective4: var(--gray4);
|
|
5030
5262
|
--accentColor: var(--gray);
|
|
@@ -5033,7 +5265,8 @@
|
|
|
5033
5265
|
--accentColor4: var(--gray4);
|
|
5034
5266
|
--accentColor5: var(--gray5);
|
|
5035
5267
|
}
|
|
5036
|
-
:where([tint=
|
|
5268
|
+
:where([tint='"" + $tint'],
|
|
5269
|
+
[list-item-tint='"" + $tint']) {
|
|
5037
5270
|
--accentColorEffective: var(--blue);
|
|
5038
5271
|
--accentColorEffective4: var(--blue4);
|
|
5039
5272
|
--accentColor: var(--blue);
|
|
@@ -5042,7 +5275,8 @@
|
|
|
5042
5275
|
--accentColor4: var(--blue4);
|
|
5043
5276
|
--accentColor5: var(--blue5);
|
|
5044
5277
|
}
|
|
5045
|
-
:where([tint=
|
|
5278
|
+
:where([tint='"" + $tint'],
|
|
5279
|
+
[list-item-tint='"" + $tint']) {
|
|
5046
5280
|
--accentColorEffective: var(--red);
|
|
5047
5281
|
--accentColorEffective4: var(--red4);
|
|
5048
5282
|
--accentColor: var(--red);
|
|
@@ -5051,6 +5285,26 @@
|
|
|
5051
5285
|
--accentColor4: var(--red4);
|
|
5052
5286
|
--accentColor5: var(--red5);
|
|
5053
5287
|
}
|
|
5288
|
+
:where([tint='"" + $tint'],
|
|
5289
|
+
[list-item-tint='"" + $tint']) {
|
|
5290
|
+
--accentColorEffective: var(--green);
|
|
5291
|
+
--accentColorEffective4: var(--green4);
|
|
5292
|
+
--accentColor: var(--green);
|
|
5293
|
+
--accentColor2: var(--green2);
|
|
5294
|
+
--accentColor3: var(--green3);
|
|
5295
|
+
--accentColor4: var(--green4);
|
|
5296
|
+
--accentColor5: var(--green5);
|
|
5297
|
+
}
|
|
5298
|
+
:where([tint='"" + $tint'],
|
|
5299
|
+
[list-item-tint='"" + $tint']) {
|
|
5300
|
+
--accentColorEffective: var(--orange);
|
|
5301
|
+
--accentColorEffective4: var(--orange4);
|
|
5302
|
+
--accentColor: var(--orange);
|
|
5303
|
+
--accentColor2: var(--orange2);
|
|
5304
|
+
--accentColor3: var(--orange3);
|
|
5305
|
+
--accentColor4: var(--orange4);
|
|
5306
|
+
--accentColor5: var(--orange5);
|
|
5307
|
+
}
|
|
5054
5308
|
}
|
|
5055
5309
|
@layer sw-utils {
|
|
5056
5310
|
:where([frame\:width=infinity]) {
|
|
@@ -7278,13 +7532,13 @@
|
|
|
7278
7532
|
}
|
|
7279
7533
|
@property --blue5 {
|
|
7280
7534
|
syntax: "<color>";
|
|
7281
|
-
initial-value: oklch(
|
|
7535
|
+
initial-value: oklch(93.99% 0.0298 245.27deg);
|
|
7282
7536
|
inherits: true;
|
|
7283
7537
|
}
|
|
7284
7538
|
@media (prefers-color-scheme: dark) {
|
|
7285
7539
|
@property --blue5 {
|
|
7286
7540
|
syntax: "<color>";
|
|
7287
|
-
initial-value: oklch(
|
|
7541
|
+
initial-value: oklch(16.02% 0.0312 241.89deg);
|
|
7288
7542
|
inherits: true;
|
|
7289
7543
|
}
|
|
7290
7544
|
}
|
|
@@ -7338,13 +7592,133 @@
|
|
|
7338
7592
|
}
|
|
7339
7593
|
@property --red5 {
|
|
7340
7594
|
syntax: "<color>";
|
|
7341
|
-
initial-value: oklch(
|
|
7595
|
+
initial-value: oklch(94.51% 0.0312 23.18deg);
|
|
7342
7596
|
inherits: true;
|
|
7343
7597
|
}
|
|
7344
7598
|
@media (prefers-color-scheme: dark) {
|
|
7345
7599
|
@property --red5 {
|
|
7346
7600
|
syntax: "<color>";
|
|
7347
|
-
initial-value: oklch(
|
|
7601
|
+
initial-value: oklch(16.92% 0.0381 24.05deg);
|
|
7602
|
+
inherits: true;
|
|
7603
|
+
}
|
|
7604
|
+
}
|
|
7605
|
+
@property --green {
|
|
7606
|
+
syntax: "<color>";
|
|
7607
|
+
initial-value: oklch(73.03% 0.1944 147.44deg);
|
|
7608
|
+
inherits: true;
|
|
7609
|
+
}
|
|
7610
|
+
@media (prefers-color-scheme: dark) {
|
|
7611
|
+
@property --green {
|
|
7612
|
+
syntax: "<color>";
|
|
7613
|
+
initial-value: oklch(75.56% 0.2082 146.98deg);
|
|
7614
|
+
inherits: true;
|
|
7615
|
+
}
|
|
7616
|
+
}
|
|
7617
|
+
@property --green2 {
|
|
7618
|
+
syntax: "<color>";
|
|
7619
|
+
initial-value: oklch(82.24% 0.1298 162.01deg);
|
|
7620
|
+
inherits: true;
|
|
7621
|
+
}
|
|
7622
|
+
@media (prefers-color-scheme: dark) {
|
|
7623
|
+
@property --green2 {
|
|
7624
|
+
syntax: "<color>";
|
|
7625
|
+
initial-value: oklch(48.79% 0.1248 152deg);
|
|
7626
|
+
inherits: true;
|
|
7627
|
+
}
|
|
7628
|
+
}
|
|
7629
|
+
@property --green3 {
|
|
7630
|
+
syntax: "<color>";
|
|
7631
|
+
initial-value: oklch(90.6% 0.0681 165.21deg);
|
|
7632
|
+
inherits: true;
|
|
7633
|
+
}
|
|
7634
|
+
@media (prefers-color-scheme: dark) {
|
|
7635
|
+
@property --green3 {
|
|
7636
|
+
syntax: "<color>";
|
|
7637
|
+
initial-value: oklch(35.59% 0.0789 157.3deg);
|
|
7638
|
+
inherits: true;
|
|
7639
|
+
}
|
|
7640
|
+
}
|
|
7641
|
+
@property --green4 {
|
|
7642
|
+
syntax: "<color>";
|
|
7643
|
+
initial-value: oklch(93.23% 0.0504 166.1deg);
|
|
7644
|
+
inherits: true;
|
|
7645
|
+
}
|
|
7646
|
+
@media (prefers-color-scheme: dark) {
|
|
7647
|
+
@property --green4 {
|
|
7648
|
+
syntax: "<color>";
|
|
7649
|
+
initial-value: oklch(31.56% 0.0607 160.27deg);
|
|
7650
|
+
inherits: true;
|
|
7651
|
+
}
|
|
7652
|
+
}
|
|
7653
|
+
@property --green5 {
|
|
7654
|
+
syntax: "<color>";
|
|
7655
|
+
initial-value: oklch(95.58% 0.0353 166.1deg);
|
|
7656
|
+
inherits: true;
|
|
7657
|
+
}
|
|
7658
|
+
@media (prefers-color-scheme: dark) {
|
|
7659
|
+
@property --green5 {
|
|
7660
|
+
syntax: "<color>";
|
|
7661
|
+
initial-value: oklch(26.32% 0.0425 160.27deg);
|
|
7662
|
+
inherits: true;
|
|
7663
|
+
}
|
|
7664
|
+
}
|
|
7665
|
+
@property --orange {
|
|
7666
|
+
syntax: "<color>";
|
|
7667
|
+
initial-value: oklch(75.33% 0.172 55.72deg);
|
|
7668
|
+
inherits: true;
|
|
7669
|
+
}
|
|
7670
|
+
@media (prefers-color-scheme: dark) {
|
|
7671
|
+
@property --orange {
|
|
7672
|
+
syntax: "<color>";
|
|
7673
|
+
initial-value: oklch(76.19% 0.167 57.05deg);
|
|
7674
|
+
inherits: true;
|
|
7675
|
+
}
|
|
7676
|
+
}
|
|
7677
|
+
@property --orange2 {
|
|
7678
|
+
syntax: "<color>";
|
|
7679
|
+
initial-value: oklch(85.48% 0.111 68.86deg);
|
|
7680
|
+
inherits: true;
|
|
7681
|
+
}
|
|
7682
|
+
@media (prefers-color-scheme: dark) {
|
|
7683
|
+
@property --orange2 {
|
|
7684
|
+
syntax: "<color>";
|
|
7685
|
+
initial-value: oklch(44.68% 0.0914 61.4deg);
|
|
7686
|
+
inherits: true;
|
|
7687
|
+
}
|
|
7688
|
+
}
|
|
7689
|
+
@property --orange3 {
|
|
7690
|
+
syntax: "<color>";
|
|
7691
|
+
initial-value: oklch(92.68% 0.0611 75.74deg);
|
|
7692
|
+
inherits: true;
|
|
7693
|
+
}
|
|
7694
|
+
@media (prefers-color-scheme: dark) {
|
|
7695
|
+
@property --orange3 {
|
|
7696
|
+
syntax: "<color>";
|
|
7697
|
+
initial-value: oklch(28.23% 0.051 67.31deg);
|
|
7698
|
+
inherits: true;
|
|
7699
|
+
}
|
|
7700
|
+
}
|
|
7701
|
+
@property --orange4 {
|
|
7702
|
+
syntax: "<color>";
|
|
7703
|
+
initial-value: oklch(94.43% 0.045 74.78deg);
|
|
7704
|
+
inherits: true;
|
|
7705
|
+
}
|
|
7706
|
+
@media (prefers-color-scheme: dark) {
|
|
7707
|
+
@property --orange4 {
|
|
7708
|
+
syntax: "<color>";
|
|
7709
|
+
initial-value: oklch(23.89% 0.04 75.03deg);
|
|
7710
|
+
inherits: true;
|
|
7711
|
+
}
|
|
7712
|
+
}
|
|
7713
|
+
@property --orange5 {
|
|
7714
|
+
syntax: "<color>";
|
|
7715
|
+
initial-value: oklch(96.51% 0.0315 74.78deg);
|
|
7716
|
+
inherits: true;
|
|
7717
|
+
}
|
|
7718
|
+
@media (prefers-color-scheme: dark) {
|
|
7719
|
+
@property --orange5 {
|
|
7720
|
+
syntax: "<color>";
|
|
7721
|
+
initial-value: oklch(19.83% 0.028 75.03deg);
|
|
7348
7722
|
inherits: true;
|
|
7349
7723
|
}
|
|
7350
7724
|
}
|
|
@@ -7762,13 +8136,13 @@
|
|
|
7762
8136
|
}
|
|
7763
8137
|
@property --accentColor5 {
|
|
7764
8138
|
syntax: "<color>";
|
|
7765
|
-
initial-value: oklch(
|
|
8139
|
+
initial-value: oklch(93.99% 0.0298 245.27deg);
|
|
7766
8140
|
inherits: true;
|
|
7767
8141
|
}
|
|
7768
8142
|
@media (prefers-color-scheme: dark) {
|
|
7769
8143
|
@property --accentColor5 {
|
|
7770
8144
|
syntax: "<color>";
|
|
7771
|
-
initial-value: oklch(
|
|
8145
|
+
initial-value: oklch(16.02% 0.0312 241.89deg);
|
|
7772
8146
|
inherits: true;
|
|
7773
8147
|
}
|
|
7774
8148
|
}
|
|
@@ -7814,17 +8188,14 @@
|
|
|
7814
8188
|
--toolbaritemactivetext: var(--text);
|
|
7815
8189
|
}
|
|
7816
8190
|
:where(tool-bar-item,
|
|
7817
|
-
tool-bar-item-group
|
|
7818
|
-
navigation-split-view sidebar-toggle) {
|
|
8191
|
+
tool-bar-item-group) {
|
|
7819
8192
|
--toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
|
|
7820
8193
|
--toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
|
|
7821
8194
|
--toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
|
|
7822
8195
|
}
|
|
7823
|
-
:where(tool-bar-item[tint]
|
|
8196
|
+
:where(tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
|
|
7824
8197
|
tool-bar-item-group[tint],
|
|
7825
|
-
[tint] tool-bar-item
|
|
7826
|
-
navigation-split-view sidebar-toggle[tint],
|
|
7827
|
-
[tint] navigation-split-view sidebar-toggle) {
|
|
8198
|
+
tool-bar-item-group[tint] > tool-bar-item:not([tint])) {
|
|
7828
8199
|
--toolbaritemface: light-dark(var(--accentColor), var(--accentColor));
|
|
7829
8200
|
--toolbaritemtext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
|
|
7830
8201
|
--toolbaritemhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
|
|
@@ -7832,15 +8203,16 @@
|
|
|
7832
8203
|
--toolbaritemactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
|
|
7833
8204
|
--toolbaritemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
|
|
7834
8205
|
}
|
|
7835
|
-
:where(tool-bar-item[tint]
|
|
8206
|
+
:where(tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
|
|
7836
8207
|
tool-bar-item-group[tint],
|
|
7837
|
-
[tint] tool-bar-item
|
|
7838
|
-
navigation-split-view sidebar-toggle[tint],
|
|
7839
|
-
[tint] navigation-split-view sidebar-toggle) > button {
|
|
8208
|
+
tool-bar-item-group[tint] > tool-bar-item:not([tint])) > button {
|
|
7840
8209
|
--secondary: var(--btntext);
|
|
7841
8210
|
--blue: var(--btntext);
|
|
7842
|
-
--
|
|
8211
|
+
--red: var(--btntext);
|
|
8212
|
+
--green: var(--btntext);
|
|
8213
|
+
--orange: var(--btntext);
|
|
7843
8214
|
--accentColor: var(--btntext);
|
|
8215
|
+
--accentColorEffective: var(--btntext);
|
|
7844
8216
|
}
|
|
7845
8217
|
:where(sidebar-toggle) {
|
|
7846
8218
|
--toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
|
|
@@ -7883,6 +8255,10 @@
|
|
|
7883
8255
|
--btnhighlighttext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
|
|
7884
8256
|
--btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
|
|
7885
8257
|
}
|
|
8258
|
+
/**
|
|
8259
|
+
* NOTE: --accentColorEffective does NOT exist, it is NOT set anywhere initially!
|
|
8260
|
+
* NOTE: Some controls use it to override the initial style WHEN/IF ...Effective is set by someone above.
|
|
8261
|
+
*/
|
|
7886
8262
|
:where([is=bordered-button]) {
|
|
7887
8263
|
--btntext: var(--accentColorEffective, var(--accentColor));
|
|
7888
8264
|
--btnhighlighttext: light-dark(
|