@lilydesignsystem/themes 0.3.1 → 0.5.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 +58 -0
- package/dist/acid.css +58 -0
- package/dist/adobe-spectrum.css +58 -0
- package/dist/ant-design.css +3632 -0
- package/dist/aqua.css +58 -0
- package/dist/atlassian.css +3632 -0
- package/dist/autumn.css +58 -0
- package/dist/black.css +58 -0
- package/dist/bumblebee.css +58 -0
- package/dist/business.css +58 -0
- package/dist/cappuccino.css +3632 -0
- package/dist/caramellatte.css +58 -0
- package/dist/cmyk.css +58 -0
- package/dist/coffee.css +58 -0
- package/dist/corporate.css +58 -0
- package/dist/cupcake.css +58 -0
- package/dist/cyberpunk.css +58 -0
- package/dist/dark.css +58 -0
- package/dist/dim.css +58 -0
- package/dist/dracula.css +58 -0
- package/dist/emerald.css +58 -0
- package/dist/excel.css +3632 -0
- package/dist/fantasy.css +58 -0
- package/dist/fluent.css +3632 -0
- package/dist/forest.css +58 -0
- package/dist/garden.css +58 -0
- package/dist/github-primer.css +3632 -0
- package/dist/halloween.css +58 -0
- package/dist/ibm-carbon.css +3632 -0
- package/dist/lemonade.css +58 -0
- package/dist/light.css +58 -0
- package/dist/linear.css +3632 -0
- package/dist/lofi.css +58 -0
- package/dist/luxury.css +58 -0
- package/dist/mozilla-protocol.css +58 -0
- package/dist/night.css +58 -0
- package/dist/nord.css +58 -0
- package/dist/notion.css +3632 -0
- package/dist/pastel.css +58 -0
- package/dist/retro.css +58 -0
- package/dist/salesforce.css +3632 -0
- package/dist/sap-fiori.css +3632 -0
- package/dist/silk.css +58 -0
- package/dist/sunset.css +58 -0
- package/dist/synthwave.css +58 -0
- package/dist/united-kingdom-government-digital-service.css +58 -0
- package/dist/united-kingdom-national-health-service-england-for-patients.css +58 -0
- package/dist/united-kingdom-national-health-service-england-for-practitioners.css +58 -0
- package/dist/united-kingdom-national-health-service-scotland-for-patients.css +58 -0
- package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +58 -0
- package/dist/united-kingdom-national-health-service-wales-for-patients.css +58 -0
- package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +58 -0
- package/dist/united-states-web-design-system.css +58 -0
- package/dist/valentine.css +58 -0
- package/dist/vercel.css +3632 -0
- package/dist/winter.css +58 -0
- package/dist/wireframe.css +58 -0
- package/index.md +14 -10
- package/package.json +4 -3
|
@@ -2210,6 +2210,9 @@
|
|
|
2210
2210
|
.locale-picker,
|
|
2211
2211
|
.text-size-picker,
|
|
2212
2212
|
.search-picker,
|
|
2213
|
+
.link-picker,
|
|
2214
|
+
.menu-picker,
|
|
2215
|
+
.settings-picker,
|
|
2213
2216
|
.share-picker,
|
|
2214
2217
|
.date-time-picker
|
|
2215
2218
|
) {
|
|
@@ -2222,6 +2225,9 @@
|
|
|
2222
2225
|
.locale-picker-button,
|
|
2223
2226
|
.text-size-picker-button,
|
|
2224
2227
|
.search-picker-button,
|
|
2228
|
+
.link-picker-button,
|
|
2229
|
+
.menu-picker-button,
|
|
2230
|
+
.settings-picker-button,
|
|
2225
2231
|
.share-picker-button,
|
|
2226
2232
|
.date-time-picker-button
|
|
2227
2233
|
) {
|
|
@@ -2257,6 +2263,9 @@
|
|
|
2257
2263
|
.locale-picker-icon,
|
|
2258
2264
|
.text-size-picker-icon,
|
|
2259
2265
|
.motion-picker-icon,
|
|
2266
|
+
.link-picker-icon,
|
|
2267
|
+
.menu-picker-icon,
|
|
2268
|
+
.settings-picker-icon,
|
|
2260
2269
|
.share-picker-icon,
|
|
2261
2270
|
.search-picker-icon
|
|
2262
2271
|
) {
|
|
@@ -2315,6 +2324,31 @@
|
|
|
2315
2324
|
background-color: var(--lily-surface-alt);
|
|
2316
2325
|
}
|
|
2317
2326
|
|
|
2327
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2328
|
+
so its items get the share list's treatment; the current page is
|
|
2329
|
+
marked by aria-current and shown in bold. */
|
|
2330
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2331
|
+
list-style: none;
|
|
2332
|
+
}
|
|
2333
|
+
|
|
2334
|
+
:where(.link-picker-link) {
|
|
2335
|
+
display: block;
|
|
2336
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2337
|
+
color: var(--lily-text);
|
|
2338
|
+
text-decoration: none;
|
|
2339
|
+
border-radius: var(--lily-radius-sm);
|
|
2340
|
+
cursor: pointer;
|
|
2341
|
+
}
|
|
2342
|
+
|
|
2343
|
+
:where(.link-picker-link:hover) {
|
|
2344
|
+
background-color: var(--lily-surface-alt);
|
|
2345
|
+
}
|
|
2346
|
+
|
|
2347
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2348
|
+
font-weight: 600;
|
|
2349
|
+
background-color: var(--lily-surface-sunken);
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2318
2352
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2319
2353
|
region for screen-reader users. */
|
|
2320
2354
|
:where(.share-picker-status) {
|
|
@@ -2596,6 +2630,9 @@
|
|
|
2596
2630
|
.locale-picker-tooltip,
|
|
2597
2631
|
.text-size-picker-tooltip,
|
|
2598
2632
|
.motion-picker-tooltip,
|
|
2633
|
+
.link-picker-tooltip,
|
|
2634
|
+
.menu-picker-tooltip,
|
|
2635
|
+
.settings-picker-tooltip,
|
|
2599
2636
|
.share-picker-tooltip,
|
|
2600
2637
|
.search-picker-tooltip,
|
|
2601
2638
|
.date-time-picker-tooltip
|
|
@@ -2620,6 +2657,9 @@
|
|
|
2620
2657
|
.locale-picker-tooltip,
|
|
2621
2658
|
.text-size-picker-tooltip,
|
|
2622
2659
|
.motion-picker-tooltip,
|
|
2660
|
+
.link-picker-tooltip,
|
|
2661
|
+
.menu-picker-tooltip,
|
|
2662
|
+
.settings-picker-tooltip,
|
|
2623
2663
|
.share-picker-tooltip,
|
|
2624
2664
|
.search-picker-tooltip,
|
|
2625
2665
|
.date-time-picker-tooltip
|
|
@@ -2636,6 +2676,9 @@
|
|
|
2636
2676
|
.locale-picker-tooltip,
|
|
2637
2677
|
.text-size-picker-tooltip,
|
|
2638
2678
|
.motion-picker-tooltip,
|
|
2679
|
+
.link-picker-tooltip,
|
|
2680
|
+
.menu-picker-tooltip,
|
|
2681
|
+
.settings-picker-tooltip,
|
|
2639
2682
|
.share-picker-tooltip,
|
|
2640
2683
|
.search-picker-tooltip,
|
|
2641
2684
|
.date-time-picker-tooltip
|
|
@@ -2689,6 +2732,9 @@
|
|
|
2689
2732
|
.locale-picker-list,
|
|
2690
2733
|
.text-size-picker-list,
|
|
2691
2734
|
.motion-picker-list,
|
|
2735
|
+
.link-picker-list,
|
|
2736
|
+
.menu-picker-panel,
|
|
2737
|
+
.settings-picker-panel,
|
|
2692
2738
|
.share-picker-list,
|
|
2693
2739
|
.search-picker-panel
|
|
2694
2740
|
) {
|
|
@@ -2715,6 +2761,9 @@
|
|
|
2715
2761
|
.locale-picker-list,
|
|
2716
2762
|
.text-size-picker-list,
|
|
2717
2763
|
.motion-picker-list,
|
|
2764
|
+
.link-picker-list,
|
|
2765
|
+
.menu-picker-panel,
|
|
2766
|
+
.settings-picker-panel,
|
|
2718
2767
|
.share-picker-list,
|
|
2719
2768
|
.search-picker-panel
|
|
2720
2769
|
)[hidden] {
|
|
@@ -2732,12 +2781,18 @@
|
|
|
2732
2781
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2733
2782
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2734
2783
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2784
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2785
|
+
:where(.menu-picker) { anchor-name: --lily-menu-picker; }
|
|
2786
|
+
:where(.settings-picker) { anchor-name: --lily-settings-picker; }
|
|
2735
2787
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2736
2788
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2737
2789
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2738
2790
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2739
2791
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2740
2792
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2793
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2794
|
+
:where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
|
|
2795
|
+
:where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
|
|
2741
2796
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2742
2797
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2743
2798
|
:where(
|
|
@@ -2745,6 +2800,9 @@
|
|
|
2745
2800
|
.locale-picker-list,
|
|
2746
2801
|
.text-size-picker-list,
|
|
2747
2802
|
.motion-picker-list,
|
|
2803
|
+
.link-picker-list,
|
|
2804
|
+
.menu-picker-panel,
|
|
2805
|
+
.settings-picker-panel,
|
|
2748
2806
|
.share-picker-list,
|
|
2749
2807
|
.search-picker-panel
|
|
2750
2808
|
) {
|
|
@@ -2222,6 +2222,9 @@
|
|
|
2222
2222
|
.locale-picker,
|
|
2223
2223
|
.text-size-picker,
|
|
2224
2224
|
.search-picker,
|
|
2225
|
+
.link-picker,
|
|
2226
|
+
.menu-picker,
|
|
2227
|
+
.settings-picker,
|
|
2225
2228
|
.share-picker,
|
|
2226
2229
|
.date-time-picker
|
|
2227
2230
|
) {
|
|
@@ -2234,6 +2237,9 @@
|
|
|
2234
2237
|
.locale-picker-button,
|
|
2235
2238
|
.text-size-picker-button,
|
|
2236
2239
|
.search-picker-button,
|
|
2240
|
+
.link-picker-button,
|
|
2241
|
+
.menu-picker-button,
|
|
2242
|
+
.settings-picker-button,
|
|
2237
2243
|
.share-picker-button,
|
|
2238
2244
|
.date-time-picker-button
|
|
2239
2245
|
) {
|
|
@@ -2269,6 +2275,9 @@
|
|
|
2269
2275
|
.locale-picker-icon,
|
|
2270
2276
|
.text-size-picker-icon,
|
|
2271
2277
|
.motion-picker-icon,
|
|
2278
|
+
.link-picker-icon,
|
|
2279
|
+
.menu-picker-icon,
|
|
2280
|
+
.settings-picker-icon,
|
|
2272
2281
|
.share-picker-icon,
|
|
2273
2282
|
.search-picker-icon
|
|
2274
2283
|
) {
|
|
@@ -2327,6 +2336,31 @@
|
|
|
2327
2336
|
background-color: var(--lily-surface-alt);
|
|
2328
2337
|
}
|
|
2329
2338
|
|
|
2339
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2340
|
+
so its items get the share list's treatment; the current page is
|
|
2341
|
+
marked by aria-current and shown in bold. */
|
|
2342
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2343
|
+
list-style: none;
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
:where(.link-picker-link) {
|
|
2347
|
+
display: block;
|
|
2348
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2349
|
+
color: var(--lily-text);
|
|
2350
|
+
text-decoration: none;
|
|
2351
|
+
border-radius: var(--lily-radius-sm);
|
|
2352
|
+
cursor: pointer;
|
|
2353
|
+
}
|
|
2354
|
+
|
|
2355
|
+
:where(.link-picker-link:hover) {
|
|
2356
|
+
background-color: var(--lily-surface-alt);
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2359
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2360
|
+
font-weight: 600;
|
|
2361
|
+
background-color: var(--lily-surface-sunken);
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2330
2364
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2331
2365
|
region for screen-reader users. */
|
|
2332
2366
|
:where(.share-picker-status) {
|
|
@@ -2608,6 +2642,9 @@
|
|
|
2608
2642
|
.locale-picker-tooltip,
|
|
2609
2643
|
.text-size-picker-tooltip,
|
|
2610
2644
|
.motion-picker-tooltip,
|
|
2645
|
+
.link-picker-tooltip,
|
|
2646
|
+
.menu-picker-tooltip,
|
|
2647
|
+
.settings-picker-tooltip,
|
|
2611
2648
|
.share-picker-tooltip,
|
|
2612
2649
|
.search-picker-tooltip,
|
|
2613
2650
|
.date-time-picker-tooltip
|
|
@@ -2632,6 +2669,9 @@
|
|
|
2632
2669
|
.locale-picker-tooltip,
|
|
2633
2670
|
.text-size-picker-tooltip,
|
|
2634
2671
|
.motion-picker-tooltip,
|
|
2672
|
+
.link-picker-tooltip,
|
|
2673
|
+
.menu-picker-tooltip,
|
|
2674
|
+
.settings-picker-tooltip,
|
|
2635
2675
|
.share-picker-tooltip,
|
|
2636
2676
|
.search-picker-tooltip,
|
|
2637
2677
|
.date-time-picker-tooltip
|
|
@@ -2648,6 +2688,9 @@
|
|
|
2648
2688
|
.locale-picker-tooltip,
|
|
2649
2689
|
.text-size-picker-tooltip,
|
|
2650
2690
|
.motion-picker-tooltip,
|
|
2691
|
+
.link-picker-tooltip,
|
|
2692
|
+
.menu-picker-tooltip,
|
|
2693
|
+
.settings-picker-tooltip,
|
|
2651
2694
|
.share-picker-tooltip,
|
|
2652
2695
|
.search-picker-tooltip,
|
|
2653
2696
|
.date-time-picker-tooltip
|
|
@@ -2701,6 +2744,9 @@
|
|
|
2701
2744
|
.locale-picker-list,
|
|
2702
2745
|
.text-size-picker-list,
|
|
2703
2746
|
.motion-picker-list,
|
|
2747
|
+
.link-picker-list,
|
|
2748
|
+
.menu-picker-panel,
|
|
2749
|
+
.settings-picker-panel,
|
|
2704
2750
|
.share-picker-list,
|
|
2705
2751
|
.search-picker-panel
|
|
2706
2752
|
) {
|
|
@@ -2727,6 +2773,9 @@
|
|
|
2727
2773
|
.locale-picker-list,
|
|
2728
2774
|
.text-size-picker-list,
|
|
2729
2775
|
.motion-picker-list,
|
|
2776
|
+
.link-picker-list,
|
|
2777
|
+
.menu-picker-panel,
|
|
2778
|
+
.settings-picker-panel,
|
|
2730
2779
|
.share-picker-list,
|
|
2731
2780
|
.search-picker-panel
|
|
2732
2781
|
)[hidden] {
|
|
@@ -2744,12 +2793,18 @@
|
|
|
2744
2793
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2745
2794
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2746
2795
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2796
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2797
|
+
:where(.menu-picker) { anchor-name: --lily-menu-picker; }
|
|
2798
|
+
:where(.settings-picker) { anchor-name: --lily-settings-picker; }
|
|
2747
2799
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2748
2800
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2749
2801
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2750
2802
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2751
2803
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2752
2804
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2805
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2806
|
+
:where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
|
|
2807
|
+
:where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
|
|
2753
2808
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2754
2809
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2755
2810
|
:where(
|
|
@@ -2757,6 +2812,9 @@
|
|
|
2757
2812
|
.locale-picker-list,
|
|
2758
2813
|
.text-size-picker-list,
|
|
2759
2814
|
.motion-picker-list,
|
|
2815
|
+
.link-picker-list,
|
|
2816
|
+
.menu-picker-panel,
|
|
2817
|
+
.settings-picker-panel,
|
|
2760
2818
|
.share-picker-list,
|
|
2761
2819
|
.search-picker-panel
|
|
2762
2820
|
) {
|
|
@@ -2306,6 +2306,9 @@
|
|
|
2306
2306
|
.locale-picker,
|
|
2307
2307
|
.text-size-picker,
|
|
2308
2308
|
.search-picker,
|
|
2309
|
+
.link-picker,
|
|
2310
|
+
.menu-picker,
|
|
2311
|
+
.settings-picker,
|
|
2309
2312
|
.share-picker,
|
|
2310
2313
|
.date-time-picker
|
|
2311
2314
|
) {
|
|
@@ -2318,6 +2321,9 @@
|
|
|
2318
2321
|
.locale-picker-button,
|
|
2319
2322
|
.text-size-picker-button,
|
|
2320
2323
|
.search-picker-button,
|
|
2324
|
+
.link-picker-button,
|
|
2325
|
+
.menu-picker-button,
|
|
2326
|
+
.settings-picker-button,
|
|
2321
2327
|
.share-picker-button,
|
|
2322
2328
|
.date-time-picker-button
|
|
2323
2329
|
) {
|
|
@@ -2353,6 +2359,9 @@
|
|
|
2353
2359
|
.locale-picker-icon,
|
|
2354
2360
|
.text-size-picker-icon,
|
|
2355
2361
|
.motion-picker-icon,
|
|
2362
|
+
.link-picker-icon,
|
|
2363
|
+
.menu-picker-icon,
|
|
2364
|
+
.settings-picker-icon,
|
|
2356
2365
|
.share-picker-icon,
|
|
2357
2366
|
.search-picker-icon
|
|
2358
2367
|
) {
|
|
@@ -2411,6 +2420,31 @@
|
|
|
2411
2420
|
background-color: var(--lily-surface-alt);
|
|
2412
2421
|
}
|
|
2413
2422
|
|
|
2423
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
2424
|
+
so its items get the share list's treatment; the current page is
|
|
2425
|
+
marked by aria-current and shown in bold. */
|
|
2426
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
2427
|
+
list-style: none;
|
|
2428
|
+
}
|
|
2429
|
+
|
|
2430
|
+
:where(.link-picker-link) {
|
|
2431
|
+
display: block;
|
|
2432
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2433
|
+
color: var(--lily-text);
|
|
2434
|
+
text-decoration: none;
|
|
2435
|
+
border-radius: var(--lily-radius-sm);
|
|
2436
|
+
cursor: pointer;
|
|
2437
|
+
}
|
|
2438
|
+
|
|
2439
|
+
:where(.link-picker-link:hover) {
|
|
2440
|
+
background-color: var(--lily-surface-alt);
|
|
2441
|
+
}
|
|
2442
|
+
|
|
2443
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
2444
|
+
font-weight: 600;
|
|
2445
|
+
background-color: var(--lily-surface-sunken);
|
|
2446
|
+
}
|
|
2447
|
+
|
|
2414
2448
|
/* Copy feedback. Never display:none this — that silences the live
|
|
2415
2449
|
region for screen-reader users. */
|
|
2416
2450
|
:where(.share-picker-status) {
|
|
@@ -2692,6 +2726,9 @@
|
|
|
2692
2726
|
.locale-picker-tooltip,
|
|
2693
2727
|
.text-size-picker-tooltip,
|
|
2694
2728
|
.motion-picker-tooltip,
|
|
2729
|
+
.link-picker-tooltip,
|
|
2730
|
+
.menu-picker-tooltip,
|
|
2731
|
+
.settings-picker-tooltip,
|
|
2695
2732
|
.share-picker-tooltip,
|
|
2696
2733
|
.search-picker-tooltip,
|
|
2697
2734
|
.date-time-picker-tooltip
|
|
@@ -2716,6 +2753,9 @@
|
|
|
2716
2753
|
.locale-picker-tooltip,
|
|
2717
2754
|
.text-size-picker-tooltip,
|
|
2718
2755
|
.motion-picker-tooltip,
|
|
2756
|
+
.link-picker-tooltip,
|
|
2757
|
+
.menu-picker-tooltip,
|
|
2758
|
+
.settings-picker-tooltip,
|
|
2719
2759
|
.share-picker-tooltip,
|
|
2720
2760
|
.search-picker-tooltip,
|
|
2721
2761
|
.date-time-picker-tooltip
|
|
@@ -2732,6 +2772,9 @@
|
|
|
2732
2772
|
.locale-picker-tooltip,
|
|
2733
2773
|
.text-size-picker-tooltip,
|
|
2734
2774
|
.motion-picker-tooltip,
|
|
2775
|
+
.link-picker-tooltip,
|
|
2776
|
+
.menu-picker-tooltip,
|
|
2777
|
+
.settings-picker-tooltip,
|
|
2735
2778
|
.share-picker-tooltip,
|
|
2736
2779
|
.search-picker-tooltip,
|
|
2737
2780
|
.date-time-picker-tooltip
|
|
@@ -2785,6 +2828,9 @@
|
|
|
2785
2828
|
.locale-picker-list,
|
|
2786
2829
|
.text-size-picker-list,
|
|
2787
2830
|
.motion-picker-list,
|
|
2831
|
+
.link-picker-list,
|
|
2832
|
+
.menu-picker-panel,
|
|
2833
|
+
.settings-picker-panel,
|
|
2788
2834
|
.share-picker-list,
|
|
2789
2835
|
.search-picker-panel
|
|
2790
2836
|
) {
|
|
@@ -2811,6 +2857,9 @@
|
|
|
2811
2857
|
.locale-picker-list,
|
|
2812
2858
|
.text-size-picker-list,
|
|
2813
2859
|
.motion-picker-list,
|
|
2860
|
+
.link-picker-list,
|
|
2861
|
+
.menu-picker-panel,
|
|
2862
|
+
.settings-picker-panel,
|
|
2814
2863
|
.share-picker-list,
|
|
2815
2864
|
.search-picker-panel
|
|
2816
2865
|
)[hidden] {
|
|
@@ -2828,12 +2877,18 @@
|
|
|
2828
2877
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2829
2878
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2830
2879
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2880
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
2881
|
+
:where(.menu-picker) { anchor-name: --lily-menu-picker; }
|
|
2882
|
+
:where(.settings-picker) { anchor-name: --lily-settings-picker; }
|
|
2831
2883
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2832
2884
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2833
2885
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2834
2886
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2835
2887
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2836
2888
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2889
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
2890
|
+
:where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
|
|
2891
|
+
:where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
|
|
2837
2892
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2838
2893
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2839
2894
|
:where(
|
|
@@ -2841,6 +2896,9 @@
|
|
|
2841
2896
|
.locale-picker-list,
|
|
2842
2897
|
.text-size-picker-list,
|
|
2843
2898
|
.motion-picker-list,
|
|
2899
|
+
.link-picker-list,
|
|
2900
|
+
.menu-picker-panel,
|
|
2901
|
+
.settings-picker-panel,
|
|
2844
2902
|
.share-picker-list,
|
|
2845
2903
|
.search-picker-panel
|
|
2846
2904
|
) {
|
|
@@ -2893,6 +2893,9 @@
|
|
|
2893
2893
|
.locale-picker,
|
|
2894
2894
|
.text-size-picker,
|
|
2895
2895
|
.search-picker,
|
|
2896
|
+
.link-picker,
|
|
2897
|
+
.menu-picker,
|
|
2898
|
+
.settings-picker,
|
|
2896
2899
|
.share-picker,
|
|
2897
2900
|
.date-time-picker
|
|
2898
2901
|
) {
|
|
@@ -2905,6 +2908,9 @@
|
|
|
2905
2908
|
.locale-picker-button,
|
|
2906
2909
|
.text-size-picker-button,
|
|
2907
2910
|
.search-picker-button,
|
|
2911
|
+
.link-picker-button,
|
|
2912
|
+
.menu-picker-button,
|
|
2913
|
+
.settings-picker-button,
|
|
2908
2914
|
.share-picker-button,
|
|
2909
2915
|
.date-time-picker-button
|
|
2910
2916
|
) {
|
|
@@ -2940,6 +2946,9 @@
|
|
|
2940
2946
|
.locale-picker-icon,
|
|
2941
2947
|
.text-size-picker-icon,
|
|
2942
2948
|
.motion-picker-icon,
|
|
2949
|
+
.link-picker-icon,
|
|
2950
|
+
.menu-picker-icon,
|
|
2951
|
+
.settings-picker-icon,
|
|
2943
2952
|
.share-picker-icon,
|
|
2944
2953
|
.search-picker-icon
|
|
2945
2954
|
) {
|
|
@@ -2998,6 +3007,31 @@
|
|
|
2998
3007
|
background-color: var(--lily-surface-alt);
|
|
2999
3008
|
}
|
|
3000
3009
|
|
|
3010
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
3011
|
+
so its items get the share list's treatment; the current page is
|
|
3012
|
+
marked by aria-current and shown in bold. */
|
|
3013
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
3014
|
+
list-style: none;
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
:where(.link-picker-link) {
|
|
3018
|
+
display: block;
|
|
3019
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
3020
|
+
color: var(--lily-text);
|
|
3021
|
+
text-decoration: none;
|
|
3022
|
+
border-radius: var(--lily-radius-sm);
|
|
3023
|
+
cursor: pointer;
|
|
3024
|
+
}
|
|
3025
|
+
|
|
3026
|
+
:where(.link-picker-link:hover) {
|
|
3027
|
+
background-color: var(--lily-surface-alt);
|
|
3028
|
+
}
|
|
3029
|
+
|
|
3030
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
3031
|
+
font-weight: 600;
|
|
3032
|
+
background-color: var(--lily-surface-sunken);
|
|
3033
|
+
}
|
|
3034
|
+
|
|
3001
3035
|
/* Copy feedback. Never display:none this — that silences the live
|
|
3002
3036
|
region for screen-reader users. */
|
|
3003
3037
|
:where(.share-picker-status) {
|
|
@@ -3279,6 +3313,9 @@
|
|
|
3279
3313
|
.locale-picker-tooltip,
|
|
3280
3314
|
.text-size-picker-tooltip,
|
|
3281
3315
|
.motion-picker-tooltip,
|
|
3316
|
+
.link-picker-tooltip,
|
|
3317
|
+
.menu-picker-tooltip,
|
|
3318
|
+
.settings-picker-tooltip,
|
|
3282
3319
|
.share-picker-tooltip,
|
|
3283
3320
|
.search-picker-tooltip,
|
|
3284
3321
|
.date-time-picker-tooltip
|
|
@@ -3303,6 +3340,9 @@
|
|
|
3303
3340
|
.locale-picker-tooltip,
|
|
3304
3341
|
.text-size-picker-tooltip,
|
|
3305
3342
|
.motion-picker-tooltip,
|
|
3343
|
+
.link-picker-tooltip,
|
|
3344
|
+
.menu-picker-tooltip,
|
|
3345
|
+
.settings-picker-tooltip,
|
|
3306
3346
|
.share-picker-tooltip,
|
|
3307
3347
|
.search-picker-tooltip,
|
|
3308
3348
|
.date-time-picker-tooltip
|
|
@@ -3319,6 +3359,9 @@
|
|
|
3319
3359
|
.locale-picker-tooltip,
|
|
3320
3360
|
.text-size-picker-tooltip,
|
|
3321
3361
|
.motion-picker-tooltip,
|
|
3362
|
+
.link-picker-tooltip,
|
|
3363
|
+
.menu-picker-tooltip,
|
|
3364
|
+
.settings-picker-tooltip,
|
|
3322
3365
|
.share-picker-tooltip,
|
|
3323
3366
|
.search-picker-tooltip,
|
|
3324
3367
|
.date-time-picker-tooltip
|
|
@@ -3372,6 +3415,9 @@
|
|
|
3372
3415
|
.locale-picker-list,
|
|
3373
3416
|
.text-size-picker-list,
|
|
3374
3417
|
.motion-picker-list,
|
|
3418
|
+
.link-picker-list,
|
|
3419
|
+
.menu-picker-panel,
|
|
3420
|
+
.settings-picker-panel,
|
|
3375
3421
|
.share-picker-list,
|
|
3376
3422
|
.search-picker-panel
|
|
3377
3423
|
) {
|
|
@@ -3398,6 +3444,9 @@
|
|
|
3398
3444
|
.locale-picker-list,
|
|
3399
3445
|
.text-size-picker-list,
|
|
3400
3446
|
.motion-picker-list,
|
|
3447
|
+
.link-picker-list,
|
|
3448
|
+
.menu-picker-panel,
|
|
3449
|
+
.settings-picker-panel,
|
|
3401
3450
|
.share-picker-list,
|
|
3402
3451
|
.search-picker-panel
|
|
3403
3452
|
)[hidden] {
|
|
@@ -3415,12 +3464,18 @@
|
|
|
3415
3464
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
3416
3465
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
3417
3466
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
3467
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
3468
|
+
:where(.menu-picker) { anchor-name: --lily-menu-picker; }
|
|
3469
|
+
:where(.settings-picker) { anchor-name: --lily-settings-picker; }
|
|
3418
3470
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
3419
3471
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
3420
3472
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
3421
3473
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
3422
3474
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
3423
3475
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
3476
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
3477
|
+
:where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
|
|
3478
|
+
:where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
|
|
3424
3479
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
3425
3480
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
3426
3481
|
:where(
|
|
@@ -3428,6 +3483,9 @@
|
|
|
3428
3483
|
.locale-picker-list,
|
|
3429
3484
|
.text-size-picker-list,
|
|
3430
3485
|
.motion-picker-list,
|
|
3486
|
+
.link-picker-list,
|
|
3487
|
+
.menu-picker-panel,
|
|
3488
|
+
.settings-picker-panel,
|
|
3431
3489
|
.share-picker-list,
|
|
3432
3490
|
.search-picker-panel
|
|
3433
3491
|
) {
|
|
@@ -3035,6 +3035,9 @@
|
|
|
3035
3035
|
.locale-picker,
|
|
3036
3036
|
.text-size-picker,
|
|
3037
3037
|
.search-picker,
|
|
3038
|
+
.link-picker,
|
|
3039
|
+
.menu-picker,
|
|
3040
|
+
.settings-picker,
|
|
3038
3041
|
.share-picker,
|
|
3039
3042
|
.date-time-picker
|
|
3040
3043
|
) {
|
|
@@ -3047,6 +3050,9 @@
|
|
|
3047
3050
|
.locale-picker-button,
|
|
3048
3051
|
.text-size-picker-button,
|
|
3049
3052
|
.search-picker-button,
|
|
3053
|
+
.link-picker-button,
|
|
3054
|
+
.menu-picker-button,
|
|
3055
|
+
.settings-picker-button,
|
|
3050
3056
|
.share-picker-button,
|
|
3051
3057
|
.date-time-picker-button
|
|
3052
3058
|
) {
|
|
@@ -3082,6 +3088,9 @@
|
|
|
3082
3088
|
.locale-picker-icon,
|
|
3083
3089
|
.text-size-picker-icon,
|
|
3084
3090
|
.motion-picker-icon,
|
|
3091
|
+
.link-picker-icon,
|
|
3092
|
+
.menu-picker-icon,
|
|
3093
|
+
.settings-picker-icon,
|
|
3085
3094
|
.share-picker-icon,
|
|
3086
3095
|
.search-picker-icon
|
|
3087
3096
|
) {
|
|
@@ -3140,6 +3149,31 @@
|
|
|
3140
3149
|
background-color: var(--lily-surface-alt);
|
|
3141
3150
|
}
|
|
3142
3151
|
|
|
3152
|
+
/* link-picker's list holds real page links (a disclosure, not a menu),
|
|
3153
|
+
so its items get the share list's treatment; the current page is
|
|
3154
|
+
marked by aria-current and shown in bold. */
|
|
3155
|
+
:where(.link-picker-list) > :where(.link-picker-list-item) {
|
|
3156
|
+
list-style: none;
|
|
3157
|
+
}
|
|
3158
|
+
|
|
3159
|
+
:where(.link-picker-link) {
|
|
3160
|
+
display: block;
|
|
3161
|
+
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
3162
|
+
color: var(--lily-text);
|
|
3163
|
+
text-decoration: none;
|
|
3164
|
+
border-radius: var(--lily-radius-sm);
|
|
3165
|
+
cursor: pointer;
|
|
3166
|
+
}
|
|
3167
|
+
|
|
3168
|
+
:where(.link-picker-link:hover) {
|
|
3169
|
+
background-color: var(--lily-surface-alt);
|
|
3170
|
+
}
|
|
3171
|
+
|
|
3172
|
+
:where(.link-picker-link[aria-current="page"]) {
|
|
3173
|
+
font-weight: 600;
|
|
3174
|
+
background-color: var(--lily-surface-sunken);
|
|
3175
|
+
}
|
|
3176
|
+
|
|
3143
3177
|
/* Copy feedback. Never display:none this — that silences the live
|
|
3144
3178
|
region for screen-reader users. */
|
|
3145
3179
|
:where(.share-picker-status) {
|
|
@@ -3421,6 +3455,9 @@
|
|
|
3421
3455
|
.locale-picker-tooltip,
|
|
3422
3456
|
.text-size-picker-tooltip,
|
|
3423
3457
|
.motion-picker-tooltip,
|
|
3458
|
+
.link-picker-tooltip,
|
|
3459
|
+
.menu-picker-tooltip,
|
|
3460
|
+
.settings-picker-tooltip,
|
|
3424
3461
|
.share-picker-tooltip,
|
|
3425
3462
|
.search-picker-tooltip,
|
|
3426
3463
|
.date-time-picker-tooltip
|
|
@@ -3445,6 +3482,9 @@
|
|
|
3445
3482
|
.locale-picker-tooltip,
|
|
3446
3483
|
.text-size-picker-tooltip,
|
|
3447
3484
|
.motion-picker-tooltip,
|
|
3485
|
+
.link-picker-tooltip,
|
|
3486
|
+
.menu-picker-tooltip,
|
|
3487
|
+
.settings-picker-tooltip,
|
|
3448
3488
|
.share-picker-tooltip,
|
|
3449
3489
|
.search-picker-tooltip,
|
|
3450
3490
|
.date-time-picker-tooltip
|
|
@@ -3461,6 +3501,9 @@
|
|
|
3461
3501
|
.locale-picker-tooltip,
|
|
3462
3502
|
.text-size-picker-tooltip,
|
|
3463
3503
|
.motion-picker-tooltip,
|
|
3504
|
+
.link-picker-tooltip,
|
|
3505
|
+
.menu-picker-tooltip,
|
|
3506
|
+
.settings-picker-tooltip,
|
|
3464
3507
|
.share-picker-tooltip,
|
|
3465
3508
|
.search-picker-tooltip,
|
|
3466
3509
|
.date-time-picker-tooltip
|
|
@@ -3514,6 +3557,9 @@
|
|
|
3514
3557
|
.locale-picker-list,
|
|
3515
3558
|
.text-size-picker-list,
|
|
3516
3559
|
.motion-picker-list,
|
|
3560
|
+
.link-picker-list,
|
|
3561
|
+
.menu-picker-panel,
|
|
3562
|
+
.settings-picker-panel,
|
|
3517
3563
|
.share-picker-list,
|
|
3518
3564
|
.search-picker-panel
|
|
3519
3565
|
) {
|
|
@@ -3540,6 +3586,9 @@
|
|
|
3540
3586
|
.locale-picker-list,
|
|
3541
3587
|
.text-size-picker-list,
|
|
3542
3588
|
.motion-picker-list,
|
|
3589
|
+
.link-picker-list,
|
|
3590
|
+
.menu-picker-panel,
|
|
3591
|
+
.settings-picker-panel,
|
|
3543
3592
|
.share-picker-list,
|
|
3544
3593
|
.search-picker-panel
|
|
3545
3594
|
)[hidden] {
|
|
@@ -3557,12 +3606,18 @@
|
|
|
3557
3606
|
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
3558
3607
|
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
3559
3608
|
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
3609
|
+
:where(.link-picker) { anchor-name: --lily-link-picker; }
|
|
3610
|
+
:where(.menu-picker) { anchor-name: --lily-menu-picker; }
|
|
3611
|
+
:where(.settings-picker) { anchor-name: --lily-settings-picker; }
|
|
3560
3612
|
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
3561
3613
|
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
3562
3614
|
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
3563
3615
|
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
3564
3616
|
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
3565
3617
|
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
3618
|
+
:where(.link-picker-list) { position-anchor: --lily-link-picker; }
|
|
3619
|
+
:where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
|
|
3620
|
+
:where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
|
|
3566
3621
|
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
3567
3622
|
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
3568
3623
|
:where(
|
|
@@ -3570,6 +3625,9 @@
|
|
|
3570
3625
|
.locale-picker-list,
|
|
3571
3626
|
.text-size-picker-list,
|
|
3572
3627
|
.motion-picker-list,
|
|
3628
|
+
.link-picker-list,
|
|
3629
|
+
.menu-picker-panel,
|
|
3630
|
+
.settings-picker-panel,
|
|
3573
3631
|
.share-picker-list,
|
|
3574
3632
|
.search-picker-panel
|
|
3575
3633
|
) {
|