@lilydesignsystem/themes 0.3.1 → 0.4.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/abyss.css +36 -0
- package/dist/acid.css +36 -0
- package/dist/adobe-spectrum.css +36 -0
- package/dist/aqua.css +36 -0
- package/dist/autumn.css +36 -0
- package/dist/black.css +36 -0
- package/dist/bumblebee.css +36 -0
- package/dist/business.css +36 -0
- package/dist/caramellatte.css +36 -0
- package/dist/cmyk.css +36 -0
- package/dist/coffee.css +36 -0
- package/dist/corporate.css +36 -0
- package/dist/cupcake.css +36 -0
- package/dist/cyberpunk.css +36 -0
- package/dist/dark.css +36 -0
- package/dist/dim.css +36 -0
- package/dist/dracula.css +36 -0
- package/dist/emerald.css +36 -0
- package/dist/fantasy.css +36 -0
- package/dist/forest.css +36 -0
- package/dist/garden.css +36 -0
- package/dist/halloween.css +36 -0
- package/dist/lemonade.css +36 -0
- package/dist/light.css +36 -0
- package/dist/lofi.css +36 -0
- package/dist/luxury.css +36 -0
- package/dist/mozilla-protocol.css +36 -0
- package/dist/night.css +36 -0
- package/dist/nord.css +36 -0
- package/dist/pastel.css +36 -0
- package/dist/retro.css +36 -0
- package/dist/silk.css +36 -0
- package/dist/sunset.css +36 -0
- package/dist/synthwave.css +36 -0
- package/dist/united-kingdom-government-digital-service.css +36 -0
- package/dist/united-kingdom-national-health-service-england-for-patients.css +36 -0
- package/dist/united-kingdom-national-health-service-england-for-practitioners.css +36 -0
- package/dist/united-kingdom-national-health-service-scotland-for-patients.css +36 -0
- package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +36 -0
- package/dist/united-kingdom-national-health-service-wales-for-patients.css +36 -0
- package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +36 -0
- package/dist/united-states-web-design-system.css +36 -0
- package/dist/valentine.css +36 -0
- package/dist/winter.css +36 -0
- package/dist/wireframe.css +36 -0
- package/package.json +1 -1
package/dist/retro.css
CHANGED
|
@@ -2078,6 +2078,7 @@
|
|
|
2078
2078
|
.locale-picker,
|
|
2079
2079
|
.text-size-picker,
|
|
2080
2080
|
.search-picker,
|
|
2081
|
+
.link-picker,
|
|
2081
2082
|
.share-picker,
|
|
2082
2083
|
.date-time-picker
|
|
2083
2084
|
) {
|
|
@@ -2090,6 +2091,7 @@
|
|
|
2090
2091
|
.locale-picker-button,
|
|
2091
2092
|
.text-size-picker-button,
|
|
2092
2093
|
.search-picker-button,
|
|
2094
|
+
.link-picker-button,
|
|
2093
2095
|
.share-picker-button,
|
|
2094
2096
|
.date-time-picker-button
|
|
2095
2097
|
) {
|
|
@@ -2125,6 +2127,7 @@
|
|
|
2125
2127
|
.locale-picker-icon,
|
|
2126
2128
|
.text-size-picker-icon,
|
|
2127
2129
|
.motion-picker-icon,
|
|
2130
|
+
.link-picker-icon,
|
|
2128
2131
|
.share-picker-icon,
|
|
2129
2132
|
.search-picker-icon
|
|
2130
2133
|
) {
|
|
@@ -2183,6 +2186,31 @@
|
|
|
2183
2186
|
background-color: var(--lily-surface-alt);
|
|
2184
2187
|
}
|
|
2185
2188
|
|
|
2189
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2190
|
+
so its items get the share list's treatment; the current page is
|
|
2191
|
+
marked by aria-current and shown in bold. */
|
|
2192
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2193
|
+
list-style: none;
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
:where(.link-picker-link) {
|
|
2197
|
+
display: block;
|
|
2198
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2199
|
+
color: var(--lily-text);
|
|
2200
|
+
text-decoration: none;
|
|
2201
|
+
border-radius: var(--lily-radius-sm);
|
|
2202
|
+
cursor: pointer;
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
:where(.link-picker-link:hover) {
|
|
2206
|
+
background-color: var(--lily-surface-alt);
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2210
|
+
font-weight: 600;
|
|
2211
|
+
background-color: var(--lily-surface-sunken);
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2186
2214
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2187
2215
|
region for screen-reader users. */
|
|
2188
2216
|
:where(.share-picker-status) {
|
|
@@ -2464,6 +2492,7 @@
|
|
|
2464
2492
|
.locale-picker-tooltip,
|
|
2465
2493
|
.text-size-picker-tooltip,
|
|
2466
2494
|
.motion-picker-tooltip,
|
|
2495
|
+
.link-picker-tooltip,
|
|
2467
2496
|
.share-picker-tooltip,
|
|
2468
2497
|
.search-picker-tooltip,
|
|
2469
2498
|
.date-time-picker-tooltip
|
|
@@ -2488,6 +2517,7 @@
|
|
|
2488
2517
|
.locale-picker-tooltip,
|
|
2489
2518
|
.text-size-picker-tooltip,
|
|
2490
2519
|
.motion-picker-tooltip,
|
|
2520
|
+
.link-picker-tooltip,
|
|
2491
2521
|
.share-picker-tooltip,
|
|
2492
2522
|
.search-picker-tooltip,
|
|
2493
2523
|
.date-time-picker-tooltip
|
|
@@ -2504,6 +2534,7 @@
|
|
|
2504
2534
|
.locale-picker-tooltip,
|
|
2505
2535
|
.text-size-picker-tooltip,
|
|
2506
2536
|
.motion-picker-tooltip,
|
|
2537
|
+
.link-picker-tooltip,
|
|
2507
2538
|
.share-picker-tooltip,
|
|
2508
2539
|
.search-picker-tooltip,
|
|
2509
2540
|
.date-time-picker-tooltip
|
|
@@ -2557,6 +2588,7 @@
|
|
|
2557
2588
|
.locale-picker-list,
|
|
2558
2589
|
.text-size-picker-list,
|
|
2559
2590
|
.motion-picker-list,
|
|
2591
|
+
.link-picker-list,
|
|
2560
2592
|
.share-picker-list,
|
|
2561
2593
|
.search-picker-panel
|
|
2562
2594
|
) {
|
|
@@ -2583,6 +2615,7 @@
|
|
|
2583
2615
|
.locale-picker-list,
|
|
2584
2616
|
.text-size-picker-list,
|
|
2585
2617
|
.motion-picker-list,
|
|
2618
|
+
.link-picker-list,
|
|
2586
2619
|
.share-picker-list,
|
|
2587
2620
|
.search-picker-panel
|
|
2588
2621
|
)[hidden] {
|
|
@@ -2600,12 +2633,14 @@
|
|
|
2600
2633
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
2634
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
2635
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2636
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2603
2637
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
2638
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
2639
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
2640
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
2641
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
2642
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2643
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2609
2644
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
2645
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
2646
|
:where(
|
|
@@ -2613,6 +2648,7 @@
|
|
|
2613
2648
|
.locale-picker-list,
|
|
2614
2649
|
.text-size-picker-list,
|
|
2615
2650
|
.motion-picker-list,
|
|
2651
|
+
.link-picker-list,
|
|
2616
2652
|
.share-picker-list,
|
|
2617
2653
|
.search-picker-panel
|
|
2618
2654
|
) {
|
package/dist/silk.css
CHANGED
|
@@ -2078,6 +2078,7 @@
|
|
|
2078
2078
|
.locale-picker,
|
|
2079
2079
|
.text-size-picker,
|
|
2080
2080
|
.search-picker,
|
|
2081
|
+
.link-picker,
|
|
2081
2082
|
.share-picker,
|
|
2082
2083
|
.date-time-picker
|
|
2083
2084
|
) {
|
|
@@ -2090,6 +2091,7 @@
|
|
|
2090
2091
|
.locale-picker-button,
|
|
2091
2092
|
.text-size-picker-button,
|
|
2092
2093
|
.search-picker-button,
|
|
2094
|
+
.link-picker-button,
|
|
2093
2095
|
.share-picker-button,
|
|
2094
2096
|
.date-time-picker-button
|
|
2095
2097
|
) {
|
|
@@ -2125,6 +2127,7 @@
|
|
|
2125
2127
|
.locale-picker-icon,
|
|
2126
2128
|
.text-size-picker-icon,
|
|
2127
2129
|
.motion-picker-icon,
|
|
2130
|
+
.link-picker-icon,
|
|
2128
2131
|
.share-picker-icon,
|
|
2129
2132
|
.search-picker-icon
|
|
2130
2133
|
) {
|
|
@@ -2183,6 +2186,31 @@
|
|
|
2183
2186
|
background-color: var(--lily-surface-alt);
|
|
2184
2187
|
}
|
|
2185
2188
|
|
|
2189
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2190
|
+
so its items get the share list's treatment; the current page is
|
|
2191
|
+
marked by aria-current and shown in bold. */
|
|
2192
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2193
|
+
list-style: none;
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
:where(.link-picker-link) {
|
|
2197
|
+
display: block;
|
|
2198
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2199
|
+
color: var(--lily-text);
|
|
2200
|
+
text-decoration: none;
|
|
2201
|
+
border-radius: var(--lily-radius-sm);
|
|
2202
|
+
cursor: pointer;
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
:where(.link-picker-link:hover) {
|
|
2206
|
+
background-color: var(--lily-surface-alt);
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2210
|
+
font-weight: 600;
|
|
2211
|
+
background-color: var(--lily-surface-sunken);
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2186
2214
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2187
2215
|
region for screen-reader users. */
|
|
2188
2216
|
:where(.share-picker-status) {
|
|
@@ -2464,6 +2492,7 @@
|
|
|
2464
2492
|
.locale-picker-tooltip,
|
|
2465
2493
|
.text-size-picker-tooltip,
|
|
2466
2494
|
.motion-picker-tooltip,
|
|
2495
|
+
.link-picker-tooltip,
|
|
2467
2496
|
.share-picker-tooltip,
|
|
2468
2497
|
.search-picker-tooltip,
|
|
2469
2498
|
.date-time-picker-tooltip
|
|
@@ -2488,6 +2517,7 @@
|
|
|
2488
2517
|
.locale-picker-tooltip,
|
|
2489
2518
|
.text-size-picker-tooltip,
|
|
2490
2519
|
.motion-picker-tooltip,
|
|
2520
|
+
.link-picker-tooltip,
|
|
2491
2521
|
.share-picker-tooltip,
|
|
2492
2522
|
.search-picker-tooltip,
|
|
2493
2523
|
.date-time-picker-tooltip
|
|
@@ -2504,6 +2534,7 @@
|
|
|
2504
2534
|
.locale-picker-tooltip,
|
|
2505
2535
|
.text-size-picker-tooltip,
|
|
2506
2536
|
.motion-picker-tooltip,
|
|
2537
|
+
.link-picker-tooltip,
|
|
2507
2538
|
.share-picker-tooltip,
|
|
2508
2539
|
.search-picker-tooltip,
|
|
2509
2540
|
.date-time-picker-tooltip
|
|
@@ -2557,6 +2588,7 @@
|
|
|
2557
2588
|
.locale-picker-list,
|
|
2558
2589
|
.text-size-picker-list,
|
|
2559
2590
|
.motion-picker-list,
|
|
2591
|
+
.link-picker-list,
|
|
2560
2592
|
.share-picker-list,
|
|
2561
2593
|
.search-picker-panel
|
|
2562
2594
|
) {
|
|
@@ -2583,6 +2615,7 @@
|
|
|
2583
2615
|
.locale-picker-list,
|
|
2584
2616
|
.text-size-picker-list,
|
|
2585
2617
|
.motion-picker-list,
|
|
2618
|
+
.link-picker-list,
|
|
2586
2619
|
.share-picker-list,
|
|
2587
2620
|
.search-picker-panel
|
|
2588
2621
|
)[hidden] {
|
|
@@ -2600,12 +2633,14 @@
|
|
|
2600
2633
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
2634
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
2635
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2636
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2603
2637
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
2638
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
2639
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
2640
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
2641
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
2642
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2643
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2609
2644
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
2645
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
2646
|
:where(
|
|
@@ -2613,6 +2648,7 @@
|
|
|
2613
2648
|
.locale-picker-list,
|
|
2614
2649
|
.text-size-picker-list,
|
|
2615
2650
|
.motion-picker-list,
|
|
2651
|
+
.link-picker-list,
|
|
2616
2652
|
.share-picker-list,
|
|
2617
2653
|
.search-picker-panel
|
|
2618
2654
|
) {
|
package/dist/sunset.css
CHANGED
|
@@ -2078,6 +2078,7 @@
|
|
|
2078
2078
|
.locale-picker,
|
|
2079
2079
|
.text-size-picker,
|
|
2080
2080
|
.search-picker,
|
|
2081
|
+
.link-picker,
|
|
2081
2082
|
.share-picker,
|
|
2082
2083
|
.date-time-picker
|
|
2083
2084
|
) {
|
|
@@ -2090,6 +2091,7 @@
|
|
|
2090
2091
|
.locale-picker-button,
|
|
2091
2092
|
.text-size-picker-button,
|
|
2092
2093
|
.search-picker-button,
|
|
2094
|
+
.link-picker-button,
|
|
2093
2095
|
.share-picker-button,
|
|
2094
2096
|
.date-time-picker-button
|
|
2095
2097
|
) {
|
|
@@ -2125,6 +2127,7 @@
|
|
|
2125
2127
|
.locale-picker-icon,
|
|
2126
2128
|
.text-size-picker-icon,
|
|
2127
2129
|
.motion-picker-icon,
|
|
2130
|
+
.link-picker-icon,
|
|
2128
2131
|
.share-picker-icon,
|
|
2129
2132
|
.search-picker-icon
|
|
2130
2133
|
) {
|
|
@@ -2183,6 +2186,31 @@
|
|
|
2183
2186
|
background-color: var(--lily-surface-alt);
|
|
2184
2187
|
}
|
|
2185
2188
|
|
|
2189
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2190
|
+
so its items get the share list's treatment; the current page is
|
|
2191
|
+
marked by aria-current and shown in bold. */
|
|
2192
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2193
|
+
list-style: none;
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
:where(.link-picker-link) {
|
|
2197
|
+
display: block;
|
|
2198
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2199
|
+
color: var(--lily-text);
|
|
2200
|
+
text-decoration: none;
|
|
2201
|
+
border-radius: var(--lily-radius-sm);
|
|
2202
|
+
cursor: pointer;
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
:where(.link-picker-link:hover) {
|
|
2206
|
+
background-color: var(--lily-surface-alt);
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2210
|
+
font-weight: 600;
|
|
2211
|
+
background-color: var(--lily-surface-sunken);
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2186
2214
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2187
2215
|
region for screen-reader users. */
|
|
2188
2216
|
:where(.share-picker-status) {
|
|
@@ -2464,6 +2492,7 @@
|
|
|
2464
2492
|
.locale-picker-tooltip,
|
|
2465
2493
|
.text-size-picker-tooltip,
|
|
2466
2494
|
.motion-picker-tooltip,
|
|
2495
|
+
.link-picker-tooltip,
|
|
2467
2496
|
.share-picker-tooltip,
|
|
2468
2497
|
.search-picker-tooltip,
|
|
2469
2498
|
.date-time-picker-tooltip
|
|
@@ -2488,6 +2517,7 @@
|
|
|
2488
2517
|
.locale-picker-tooltip,
|
|
2489
2518
|
.text-size-picker-tooltip,
|
|
2490
2519
|
.motion-picker-tooltip,
|
|
2520
|
+
.link-picker-tooltip,
|
|
2491
2521
|
.share-picker-tooltip,
|
|
2492
2522
|
.search-picker-tooltip,
|
|
2493
2523
|
.date-time-picker-tooltip
|
|
@@ -2504,6 +2534,7 @@
|
|
|
2504
2534
|
.locale-picker-tooltip,
|
|
2505
2535
|
.text-size-picker-tooltip,
|
|
2506
2536
|
.motion-picker-tooltip,
|
|
2537
|
+
.link-picker-tooltip,
|
|
2507
2538
|
.share-picker-tooltip,
|
|
2508
2539
|
.search-picker-tooltip,
|
|
2509
2540
|
.date-time-picker-tooltip
|
|
@@ -2557,6 +2588,7 @@
|
|
|
2557
2588
|
.locale-picker-list,
|
|
2558
2589
|
.text-size-picker-list,
|
|
2559
2590
|
.motion-picker-list,
|
|
2591
|
+
.link-picker-list,
|
|
2560
2592
|
.share-picker-list,
|
|
2561
2593
|
.search-picker-panel
|
|
2562
2594
|
) {
|
|
@@ -2583,6 +2615,7 @@
|
|
|
2583
2615
|
.locale-picker-list,
|
|
2584
2616
|
.text-size-picker-list,
|
|
2585
2617
|
.motion-picker-list,
|
|
2618
|
+
.link-picker-list,
|
|
2586
2619
|
.share-picker-list,
|
|
2587
2620
|
.search-picker-panel
|
|
2588
2621
|
)[hidden] {
|
|
@@ -2600,12 +2633,14 @@
|
|
|
2600
2633
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
2634
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
2635
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2636
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2603
2637
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
2638
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
2639
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
2640
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
2641
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
2642
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2643
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2609
2644
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
2645
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
2646
|
:where(
|
|
@@ -2613,6 +2648,7 @@
|
|
|
2613
2648
|
.locale-picker-list,
|
|
2614
2649
|
.text-size-picker-list,
|
|
2615
2650
|
.motion-picker-list,
|
|
2651
|
+
.link-picker-list,
|
|
2616
2652
|
.share-picker-list,
|
|
2617
2653
|
.search-picker-panel
|
|
2618
2654
|
) {
|
package/dist/synthwave.css
CHANGED
|
@@ -2078,6 +2078,7 @@
|
|
|
2078
2078
|
.locale-picker,
|
|
2079
2079
|
.text-size-picker,
|
|
2080
2080
|
.search-picker,
|
|
2081
|
+
.link-picker,
|
|
2081
2082
|
.share-picker,
|
|
2082
2083
|
.date-time-picker
|
|
2083
2084
|
) {
|
|
@@ -2090,6 +2091,7 @@
|
|
|
2090
2091
|
.locale-picker-button,
|
|
2091
2092
|
.text-size-picker-button,
|
|
2092
2093
|
.search-picker-button,
|
|
2094
|
+
.link-picker-button,
|
|
2093
2095
|
.share-picker-button,
|
|
2094
2096
|
.date-time-picker-button
|
|
2095
2097
|
) {
|
|
@@ -2125,6 +2127,7 @@
|
|
|
2125
2127
|
.locale-picker-icon,
|
|
2126
2128
|
.text-size-picker-icon,
|
|
2127
2129
|
.motion-picker-icon,
|
|
2130
|
+
.link-picker-icon,
|
|
2128
2131
|
.share-picker-icon,
|
|
2129
2132
|
.search-picker-icon
|
|
2130
2133
|
) {
|
|
@@ -2183,6 +2186,31 @@
|
|
|
2183
2186
|
background-color: var(--lily-surface-alt);
|
|
2184
2187
|
}
|
|
2185
2188
|
|
|
2189
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2190
|
+
so its items get the share list's treatment; the current page is
|
|
2191
|
+
marked by aria-current and shown in bold. */
|
|
2192
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2193
|
+
list-style: none;
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
:where(.link-picker-link) {
|
|
2197
|
+
display: block;
|
|
2198
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2199
|
+
color: var(--lily-text);
|
|
2200
|
+
text-decoration: none;
|
|
2201
|
+
border-radius: var(--lily-radius-sm);
|
|
2202
|
+
cursor: pointer;
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
:where(.link-picker-link:hover) {
|
|
2206
|
+
background-color: var(--lily-surface-alt);
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2210
|
+
font-weight: 600;
|
|
2211
|
+
background-color: var(--lily-surface-sunken);
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2186
2214
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2187
2215
|
region for screen-reader users. */
|
|
2188
2216
|
:where(.share-picker-status) {
|
|
@@ -2464,6 +2492,7 @@
|
|
|
2464
2492
|
.locale-picker-tooltip,
|
|
2465
2493
|
.text-size-picker-tooltip,
|
|
2466
2494
|
.motion-picker-tooltip,
|
|
2495
|
+
.link-picker-tooltip,
|
|
2467
2496
|
.share-picker-tooltip,
|
|
2468
2497
|
.search-picker-tooltip,
|
|
2469
2498
|
.date-time-picker-tooltip
|
|
@@ -2488,6 +2517,7 @@
|
|
|
2488
2517
|
.locale-picker-tooltip,
|
|
2489
2518
|
.text-size-picker-tooltip,
|
|
2490
2519
|
.motion-picker-tooltip,
|
|
2520
|
+
.link-picker-tooltip,
|
|
2491
2521
|
.share-picker-tooltip,
|
|
2492
2522
|
.search-picker-tooltip,
|
|
2493
2523
|
.date-time-picker-tooltip
|
|
@@ -2504,6 +2534,7 @@
|
|
|
2504
2534
|
.locale-picker-tooltip,
|
|
2505
2535
|
.text-size-picker-tooltip,
|
|
2506
2536
|
.motion-picker-tooltip,
|
|
2537
|
+
.link-picker-tooltip,
|
|
2507
2538
|
.share-picker-tooltip,
|
|
2508
2539
|
.search-picker-tooltip,
|
|
2509
2540
|
.date-time-picker-tooltip
|
|
@@ -2557,6 +2588,7 @@
|
|
|
2557
2588
|
.locale-picker-list,
|
|
2558
2589
|
.text-size-picker-list,
|
|
2559
2590
|
.motion-picker-list,
|
|
2591
|
+
.link-picker-list,
|
|
2560
2592
|
.share-picker-list,
|
|
2561
2593
|
.search-picker-panel
|
|
2562
2594
|
) {
|
|
@@ -2583,6 +2615,7 @@
|
|
|
2583
2615
|
.locale-picker-list,
|
|
2584
2616
|
.text-size-picker-list,
|
|
2585
2617
|
.motion-picker-list,
|
|
2618
|
+
.link-picker-list,
|
|
2586
2619
|
.share-picker-list,
|
|
2587
2620
|
.search-picker-panel
|
|
2588
2621
|
)[hidden] {
|
|
@@ -2600,12 +2633,14 @@
|
|
|
2600
2633
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
2634
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
2635
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2636
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2603
2637
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
2638
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
2639
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
2640
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
2641
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
2642
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2643
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2609
2644
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
2645
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
2646
|
:where(
|
|
@@ -2613,6 +2648,7 @@
|
|
|
2613
2648
|
.locale-picker-list,
|
|
2614
2649
|
.text-size-picker-list,
|
|
2615
2650
|
.motion-picker-list,
|
|
2651
|
+
.link-picker-list,
|
|
2616
2652
|
.share-picker-list,
|
|
2617
2653
|
.search-picker-panel
|
|
2618
2654
|
) {
|
|
@@ -2083,6 +2083,7 @@
|
|
|
2083
2083
|
.locale-picker,
|
|
2084
2084
|
.text-size-picker,
|
|
2085
2085
|
.search-picker,
|
|
2086
|
+
.link-picker,
|
|
2086
2087
|
.share-picker,
|
|
2087
2088
|
.date-time-picker
|
|
2088
2089
|
) {
|
|
@@ -2095,6 +2096,7 @@
|
|
|
2095
2096
|
.locale-picker-button,
|
|
2096
2097
|
.text-size-picker-button,
|
|
2097
2098
|
.search-picker-button,
|
|
2099
|
+
.link-picker-button,
|
|
2098
2100
|
.share-picker-button,
|
|
2099
2101
|
.date-time-picker-button
|
|
2100
2102
|
) {
|
|
@@ -2130,6 +2132,7 @@
|
|
|
2130
2132
|
.locale-picker-icon,
|
|
2131
2133
|
.text-size-picker-icon,
|
|
2132
2134
|
.motion-picker-icon,
|
|
2135
|
+
.link-picker-icon,
|
|
2133
2136
|
.share-picker-icon,
|
|
2134
2137
|
.search-picker-icon
|
|
2135
2138
|
) {
|
|
@@ -2188,6 +2191,31 @@
|
|
|
2188
2191
|
background-color: var(--lily-surface-alt);
|
|
2189
2192
|
}
|
|
2190
2193
|
|
|
2194
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2195
|
+
so its items get the share list's treatment; the current page is
|
|
2196
|
+
marked by aria-current and shown in bold. */
|
|
2197
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2198
|
+
list-style: none;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
:where(.link-picker-link) {
|
|
2202
|
+
display: block;
|
|
2203
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2204
|
+
color: var(--lily-text);
|
|
2205
|
+
text-decoration: none;
|
|
2206
|
+
border-radius: var(--lily-radius-sm);
|
|
2207
|
+
cursor: pointer;
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
:where(.link-picker-link:hover) {
|
|
2211
|
+
background-color: var(--lily-surface-alt);
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2214
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2215
|
+
font-weight: 600;
|
|
2216
|
+
background-color: var(--lily-surface-sunken);
|
|
2217
|
+
}
|
|
2218
|
+
|
|
2191
2219
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2192
2220
|
region for screen-reader users. */
|
|
2193
2221
|
:where(.share-picker-status) {
|
|
@@ -2469,6 +2497,7 @@
|
|
|
2469
2497
|
.locale-picker-tooltip,
|
|
2470
2498
|
.text-size-picker-tooltip,
|
|
2471
2499
|
.motion-picker-tooltip,
|
|
2500
|
+
.link-picker-tooltip,
|
|
2472
2501
|
.share-picker-tooltip,
|
|
2473
2502
|
.search-picker-tooltip,
|
|
2474
2503
|
.date-time-picker-tooltip
|
|
@@ -2493,6 +2522,7 @@
|
|
|
2493
2522
|
.locale-picker-tooltip,
|
|
2494
2523
|
.text-size-picker-tooltip,
|
|
2495
2524
|
.motion-picker-tooltip,
|
|
2525
|
+
.link-picker-tooltip,
|
|
2496
2526
|
.share-picker-tooltip,
|
|
2497
2527
|
.search-picker-tooltip,
|
|
2498
2528
|
.date-time-picker-tooltip
|
|
@@ -2509,6 +2539,7 @@
|
|
|
2509
2539
|
.locale-picker-tooltip,
|
|
2510
2540
|
.text-size-picker-tooltip,
|
|
2511
2541
|
.motion-picker-tooltip,
|
|
2542
|
+
.link-picker-tooltip,
|
|
2512
2543
|
.share-picker-tooltip,
|
|
2513
2544
|
.search-picker-tooltip,
|
|
2514
2545
|
.date-time-picker-tooltip
|
|
@@ -2562,6 +2593,7 @@
|
|
|
2562
2593
|
.locale-picker-list,
|
|
2563
2594
|
.text-size-picker-list,
|
|
2564
2595
|
.motion-picker-list,
|
|
2596
|
+
.link-picker-list,
|
|
2565
2597
|
.share-picker-list,
|
|
2566
2598
|
.search-picker-panel
|
|
2567
2599
|
) {
|
|
@@ -2588,6 +2620,7 @@
|
|
|
2588
2620
|
.locale-picker-list,
|
|
2589
2621
|
.text-size-picker-list,
|
|
2590
2622
|
.motion-picker-list,
|
|
2623
|
+
.link-picker-list,
|
|
2591
2624
|
.share-picker-list,
|
|
2592
2625
|
.search-picker-panel
|
|
2593
2626
|
)[hidden] {
|
|
@@ -2605,12 +2638,14 @@
|
|
|
2605
2638
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2606
2639
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2607
2640
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2641
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2608
2642
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2609
2643
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2610
2644
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2611
2645
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2612
2646
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2613
2647
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2648
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2614
2649
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2615
2650
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2616
2651
|
:where(
|
|
@@ -2618,6 +2653,7 @@
|
|
|
2618
2653
|
.locale-picker-list,
|
|
2619
2654
|
.text-size-picker-list,
|
|
2620
2655
|
.motion-picker-list,
|
|
2656
|
+
.link-picker-list,
|
|
2621
2657
|
.share-picker-list,
|
|
2622
2658
|
.search-picker-panel
|
|
2623
2659
|
) {
|
|
@@ -2119,6 +2119,7 @@
|
|
|
2119
2119
|
.locale-picker,
|
|
2120
2120
|
.text-size-picker,
|
|
2121
2121
|
.search-picker,
|
|
2122
|
+
.link-picker,
|
|
2122
2123
|
.share-picker,
|
|
2123
2124
|
.date-time-picker
|
|
2124
2125
|
) {
|
|
@@ -2131,6 +2132,7 @@
|
|
|
2131
2132
|
.locale-picker-button,
|
|
2132
2133
|
.text-size-picker-button,
|
|
2133
2134
|
.search-picker-button,
|
|
2135
|
+
.link-picker-button,
|
|
2134
2136
|
.share-picker-button,
|
|
2135
2137
|
.date-time-picker-button
|
|
2136
2138
|
) {
|
|
@@ -2166,6 +2168,7 @@
|
|
|
2166
2168
|
.locale-picker-icon,
|
|
2167
2169
|
.text-size-picker-icon,
|
|
2168
2170
|
.motion-picker-icon,
|
|
2171
|
+
.link-picker-icon,
|
|
2169
2172
|
.share-picker-icon,
|
|
2170
2173
|
.search-picker-icon
|
|
2171
2174
|
) {
|
|
@@ -2224,6 +2227,31 @@
|
|
|
2224
2227
|
background-color: var(--lily-surface-alt);
|
|
2225
2228
|
}
|
|
2226
2229
|
|
|
2230
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2231
|
+
so its items get the share list's treatment; the current page is
|
|
2232
|
+
marked by aria-current and shown in bold. */
|
|
2233
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2234
|
+
list-style: none;
|
|
2235
|
+
}
|
|
2236
|
+
|
|
2237
|
+
:where(.link-picker-link) {
|
|
2238
|
+
display: block;
|
|
2239
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2240
|
+
color: var(--lily-text);
|
|
2241
|
+
text-decoration: none;
|
|
2242
|
+
border-radius: var(--lily-radius-sm);
|
|
2243
|
+
cursor: pointer;
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
:where(.link-picker-link:hover) {
|
|
2247
|
+
background-color: var(--lily-surface-alt);
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2251
|
+
font-weight: 600;
|
|
2252
|
+
background-color: var(--lily-surface-sunken);
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2227
2255
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2228
2256
|
region for screen-reader users. */
|
|
2229
2257
|
:where(.share-picker-status) {
|
|
@@ -2505,6 +2533,7 @@
|
|
|
2505
2533
|
.locale-picker-tooltip,
|
|
2506
2534
|
.text-size-picker-tooltip,
|
|
2507
2535
|
.motion-picker-tooltip,
|
|
2536
|
+
.link-picker-tooltip,
|
|
2508
2537
|
.share-picker-tooltip,
|
|
2509
2538
|
.search-picker-tooltip,
|
|
2510
2539
|
.date-time-picker-tooltip
|
|
@@ -2529,6 +2558,7 @@
|
|
|
2529
2558
|
.locale-picker-tooltip,
|
|
2530
2559
|
.text-size-picker-tooltip,
|
|
2531
2560
|
.motion-picker-tooltip,
|
|
2561
|
+
.link-picker-tooltip,
|
|
2532
2562
|
.share-picker-tooltip,
|
|
2533
2563
|
.search-picker-tooltip,
|
|
2534
2564
|
.date-time-picker-tooltip
|
|
@@ -2545,6 +2575,7 @@
|
|
|
2545
2575
|
.locale-picker-tooltip,
|
|
2546
2576
|
.text-size-picker-tooltip,
|
|
2547
2577
|
.motion-picker-tooltip,
|
|
2578
|
+
.link-picker-tooltip,
|
|
2548
2579
|
.share-picker-tooltip,
|
|
2549
2580
|
.search-picker-tooltip,
|
|
2550
2581
|
.date-time-picker-tooltip
|
|
@@ -2598,6 +2629,7 @@
|
|
|
2598
2629
|
.locale-picker-list,
|
|
2599
2630
|
.text-size-picker-list,
|
|
2600
2631
|
.motion-picker-list,
|
|
2632
|
+
.link-picker-list,
|
|
2601
2633
|
.share-picker-list,
|
|
2602
2634
|
.search-picker-panel
|
|
2603
2635
|
) {
|
|
@@ -2624,6 +2656,7 @@
|
|
|
2624
2656
|
.locale-picker-list,
|
|
2625
2657
|
.text-size-picker-list,
|
|
2626
2658
|
.motion-picker-list,
|
|
2659
|
+
.link-picker-list,
|
|
2627
2660
|
.share-picker-list,
|
|
2628
2661
|
.search-picker-panel
|
|
2629
2662
|
)[hidden] {
|
|
@@ -2641,12 +2674,14 @@
|
|
|
2641
2674
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2642
2675
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2643
2676
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2677
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2644
2678
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2645
2679
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2646
2680
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2647
2681
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2648
2682
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2649
2683
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2684
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2650
2685
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2651
2686
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2652
2687
|
:where(
|
|
@@ -2654,6 +2689,7 @@
|
|
|
2654
2689
|
.locale-picker-list,
|
|
2655
2690
|
.text-size-picker-list,
|
|
2656
2691
|
.motion-picker-list,
|
|
2692
|
+
.link-picker-list,
|
|
2657
2693
|
.share-picker-list,
|
|
2658
2694
|
.search-picker-panel
|
|
2659
2695
|
) {
|