@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/cupcake.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/cyberpunk.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/dark.css
CHANGED
|
@@ -2079,6 +2079,7 @@
|
|
|
2079
2079
|
.locale-picker,
|
|
2080
2080
|
.text-size-picker,
|
|
2081
2081
|
.search-picker,
|
|
2082
|
+
.link-picker,
|
|
2082
2083
|
.share-picker,
|
|
2083
2084
|
.date-time-picker
|
|
2084
2085
|
) {
|
|
@@ -2091,6 +2092,7 @@
|
|
|
2091
2092
|
.locale-picker-button,
|
|
2092
2093
|
.text-size-picker-button,
|
|
2093
2094
|
.search-picker-button,
|
|
2095
|
+
.link-picker-button,
|
|
2094
2096
|
.share-picker-button,
|
|
2095
2097
|
.date-time-picker-button
|
|
2096
2098
|
) {
|
|
@@ -2126,6 +2128,7 @@
|
|
|
2126
2128
|
.locale-picker-icon,
|
|
2127
2129
|
.text-size-picker-icon,
|
|
2128
2130
|
.motion-picker-icon,
|
|
2131
|
+
.link-picker-icon,
|
|
2129
2132
|
.share-picker-icon,
|
|
2130
2133
|
.search-picker-icon
|
|
2131
2134
|
) {
|
|
@@ -2184,6 +2187,31 @@
|
|
|
2184
2187
|
background-color: var(--lily-surface-alt);
|
|
2185
2188
|
}
|
|
2186
2189
|
|
|
2190
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2191
|
+
so its items get the share list's treatment; the current page is
|
|
2192
|
+
marked by aria-current and shown in bold. */
|
|
2193
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2194
|
+
list-style: none;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
:where(.link-picker-link) {
|
|
2198
|
+
display: block;
|
|
2199
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2200
|
+
color: var(--lily-text);
|
|
2201
|
+
text-decoration: none;
|
|
2202
|
+
border-radius: var(--lily-radius-sm);
|
|
2203
|
+
cursor: pointer;
|
|
2204
|
+
}
|
|
2205
|
+
|
|
2206
|
+
:where(.link-picker-link:hover) {
|
|
2207
|
+
background-color: var(--lily-surface-alt);
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2211
|
+
font-weight: 600;
|
|
2212
|
+
background-color: var(--lily-surface-sunken);
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2187
2215
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2188
2216
|
region for screen-reader users. */
|
|
2189
2217
|
:where(.share-picker-status) {
|
|
@@ -2465,6 +2493,7 @@
|
|
|
2465
2493
|
.locale-picker-tooltip,
|
|
2466
2494
|
.text-size-picker-tooltip,
|
|
2467
2495
|
.motion-picker-tooltip,
|
|
2496
|
+
.link-picker-tooltip,
|
|
2468
2497
|
.share-picker-tooltip,
|
|
2469
2498
|
.search-picker-tooltip,
|
|
2470
2499
|
.date-time-picker-tooltip
|
|
@@ -2489,6 +2518,7 @@
|
|
|
2489
2518
|
.locale-picker-tooltip,
|
|
2490
2519
|
.text-size-picker-tooltip,
|
|
2491
2520
|
.motion-picker-tooltip,
|
|
2521
|
+
.link-picker-tooltip,
|
|
2492
2522
|
.share-picker-tooltip,
|
|
2493
2523
|
.search-picker-tooltip,
|
|
2494
2524
|
.date-time-picker-tooltip
|
|
@@ -2505,6 +2535,7 @@
|
|
|
2505
2535
|
.locale-picker-tooltip,
|
|
2506
2536
|
.text-size-picker-tooltip,
|
|
2507
2537
|
.motion-picker-tooltip,
|
|
2538
|
+
.link-picker-tooltip,
|
|
2508
2539
|
.share-picker-tooltip,
|
|
2509
2540
|
.search-picker-tooltip,
|
|
2510
2541
|
.date-time-picker-tooltip
|
|
@@ -2558,6 +2589,7 @@
|
|
|
2558
2589
|
.locale-picker-list,
|
|
2559
2590
|
.text-size-picker-list,
|
|
2560
2591
|
.motion-picker-list,
|
|
2592
|
+
.link-picker-list,
|
|
2561
2593
|
.share-picker-list,
|
|
2562
2594
|
.search-picker-panel
|
|
2563
2595
|
) {
|
|
@@ -2584,6 +2616,7 @@
|
|
|
2584
2616
|
.locale-picker-list,
|
|
2585
2617
|
.text-size-picker-list,
|
|
2586
2618
|
.motion-picker-list,
|
|
2619
|
+
.link-picker-list,
|
|
2587
2620
|
.share-picker-list,
|
|
2588
2621
|
.search-picker-panel
|
|
2589
2622
|
)[hidden] {
|
|
@@ -2601,12 +2634,14 @@
|
|
|
2601
2634
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2602
2635
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2603
2636
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2637
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2604
2638
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2605
2639
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2606
2640
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2607
2641
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2608
2642
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2609
2643
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2644
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2610
2645
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2611
2646
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2612
2647
|
:where(
|
|
@@ -2614,6 +2649,7 @@
|
|
|
2614
2649
|
.locale-picker-list,
|
|
2615
2650
|
.text-size-picker-list,
|
|
2616
2651
|
.motion-picker-list,
|
|
2652
|
+
.link-picker-list,
|
|
2617
2653
|
.share-picker-list,
|
|
2618
2654
|
.search-picker-panel
|
|
2619
2655
|
) {
|
package/dist/dim.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/dracula.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/emerald.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
|
) {
|