@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.
Files changed (59) hide show
  1. package/dist/abyss.css +58 -0
  2. package/dist/acid.css +58 -0
  3. package/dist/adobe-spectrum.css +58 -0
  4. package/dist/ant-design.css +3632 -0
  5. package/dist/aqua.css +58 -0
  6. package/dist/atlassian.css +3632 -0
  7. package/dist/autumn.css +58 -0
  8. package/dist/black.css +58 -0
  9. package/dist/bumblebee.css +58 -0
  10. package/dist/business.css +58 -0
  11. package/dist/cappuccino.css +3632 -0
  12. package/dist/caramellatte.css +58 -0
  13. package/dist/cmyk.css +58 -0
  14. package/dist/coffee.css +58 -0
  15. package/dist/corporate.css +58 -0
  16. package/dist/cupcake.css +58 -0
  17. package/dist/cyberpunk.css +58 -0
  18. package/dist/dark.css +58 -0
  19. package/dist/dim.css +58 -0
  20. package/dist/dracula.css +58 -0
  21. package/dist/emerald.css +58 -0
  22. package/dist/excel.css +3632 -0
  23. package/dist/fantasy.css +58 -0
  24. package/dist/fluent.css +3632 -0
  25. package/dist/forest.css +58 -0
  26. package/dist/garden.css +58 -0
  27. package/dist/github-primer.css +3632 -0
  28. package/dist/halloween.css +58 -0
  29. package/dist/ibm-carbon.css +3632 -0
  30. package/dist/lemonade.css +58 -0
  31. package/dist/light.css +58 -0
  32. package/dist/linear.css +3632 -0
  33. package/dist/lofi.css +58 -0
  34. package/dist/luxury.css +58 -0
  35. package/dist/mozilla-protocol.css +58 -0
  36. package/dist/night.css +58 -0
  37. package/dist/nord.css +58 -0
  38. package/dist/notion.css +3632 -0
  39. package/dist/pastel.css +58 -0
  40. package/dist/retro.css +58 -0
  41. package/dist/salesforce.css +3632 -0
  42. package/dist/sap-fiori.css +3632 -0
  43. package/dist/silk.css +58 -0
  44. package/dist/sunset.css +58 -0
  45. package/dist/synthwave.css +58 -0
  46. package/dist/united-kingdom-government-digital-service.css +58 -0
  47. package/dist/united-kingdom-national-health-service-england-for-patients.css +58 -0
  48. package/dist/united-kingdom-national-health-service-england-for-practitioners.css +58 -0
  49. package/dist/united-kingdom-national-health-service-scotland-for-patients.css +58 -0
  50. package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +58 -0
  51. package/dist/united-kingdom-national-health-service-wales-for-patients.css +58 -0
  52. package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +58 -0
  53. package/dist/united-states-web-design-system.css +58 -0
  54. package/dist/valentine.css +58 -0
  55. package/dist/vercel.css +3632 -0
  56. package/dist/winter.css +58 -0
  57. package/dist/wireframe.css +58 -0
  58. package/index.md +14 -10
  59. package/package.json +4 -3
package/dist/abyss.css CHANGED
@@ -2078,6 +2078,9 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2082
+ .menu-picker,
2083
+ .settings-picker,
2081
2084
  .share-picker,
2082
2085
  .date-time-picker
2083
2086
  ) {
@@ -2090,6 +2093,9 @@
2090
2093
  .locale-picker-button,
2091
2094
  .text-size-picker-button,
2092
2095
  .search-picker-button,
2096
+ .link-picker-button,
2097
+ .menu-picker-button,
2098
+ .settings-picker-button,
2093
2099
  .share-picker-button,
2094
2100
  .date-time-picker-button
2095
2101
  ) {
@@ -2125,6 +2131,9 @@
2125
2131
  .locale-picker-icon,
2126
2132
  .text-size-picker-icon,
2127
2133
  .motion-picker-icon,
2134
+ .link-picker-icon,
2135
+ .menu-picker-icon,
2136
+ .settings-picker-icon,
2128
2137
  .share-picker-icon,
2129
2138
  .search-picker-icon
2130
2139
  ) {
@@ -2183,6 +2192,31 @@
2183
2192
  background-color: var(--lily-surface-alt);
2184
2193
  }
2185
2194
 
2195
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2196
+ so its items get the share list's treatment; the current page is
2197
+ marked by aria-current and shown in bold. */
2198
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2199
+ list-style: none;
2200
+ }
2201
+
2202
+ :where(.link-picker-link) {
2203
+ display: block;
2204
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2205
+ color: var(--lily-text);
2206
+ text-decoration: none;
2207
+ border-radius: var(--lily-radius-sm);
2208
+ cursor: pointer;
2209
+ }
2210
+
2211
+ :where(.link-picker-link:hover) {
2212
+ background-color: var(--lily-surface-alt);
2213
+ }
2214
+
2215
+ :where(.link-picker-link[aria-current="page"]) {
2216
+ font-weight: 600;
2217
+ background-color: var(--lily-surface-sunken);
2218
+ }
2219
+
2186
2220
  /* Copy feedback. Never display:none this — that silences the live
2187
2221
  region for screen-reader users. */
2188
2222
  :where(.share-picker-status) {
@@ -2464,6 +2498,9 @@
2464
2498
  .locale-picker-tooltip,
2465
2499
  .text-size-picker-tooltip,
2466
2500
  .motion-picker-tooltip,
2501
+ .link-picker-tooltip,
2502
+ .menu-picker-tooltip,
2503
+ .settings-picker-tooltip,
2467
2504
  .share-picker-tooltip,
2468
2505
  .search-picker-tooltip,
2469
2506
  .date-time-picker-tooltip
@@ -2488,6 +2525,9 @@
2488
2525
  .locale-picker-tooltip,
2489
2526
  .text-size-picker-tooltip,
2490
2527
  .motion-picker-tooltip,
2528
+ .link-picker-tooltip,
2529
+ .menu-picker-tooltip,
2530
+ .settings-picker-tooltip,
2491
2531
  .share-picker-tooltip,
2492
2532
  .search-picker-tooltip,
2493
2533
  .date-time-picker-tooltip
@@ -2504,6 +2544,9 @@
2504
2544
  .locale-picker-tooltip,
2505
2545
  .text-size-picker-tooltip,
2506
2546
  .motion-picker-tooltip,
2547
+ .link-picker-tooltip,
2548
+ .menu-picker-tooltip,
2549
+ .settings-picker-tooltip,
2507
2550
  .share-picker-tooltip,
2508
2551
  .search-picker-tooltip,
2509
2552
  .date-time-picker-tooltip
@@ -2557,6 +2600,9 @@
2557
2600
  .locale-picker-list,
2558
2601
  .text-size-picker-list,
2559
2602
  .motion-picker-list,
2603
+ .link-picker-list,
2604
+ .menu-picker-panel,
2605
+ .settings-picker-panel,
2560
2606
  .share-picker-list,
2561
2607
  .search-picker-panel
2562
2608
  ) {
@@ -2583,6 +2629,9 @@
2583
2629
  .locale-picker-list,
2584
2630
  .text-size-picker-list,
2585
2631
  .motion-picker-list,
2632
+ .link-picker-list,
2633
+ .menu-picker-panel,
2634
+ .settings-picker-panel,
2586
2635
  .share-picker-list,
2587
2636
  .search-picker-panel
2588
2637
  )[hidden] {
@@ -2600,12 +2649,18 @@
2600
2649
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2650
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2651
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2652
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2653
+ :where(.menu-picker) { anchor-name: --lily-menu-picker; }
2654
+ :where(.settings-picker) { anchor-name: --lily-settings-picker; }
2603
2655
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2656
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2657
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2658
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2659
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2660
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2661
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2662
+ :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
2663
+ :where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
2609
2664
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2665
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2666
  :where(
@@ -2613,6 +2668,9 @@
2613
2668
  .locale-picker-list,
2614
2669
  .text-size-picker-list,
2615
2670
  .motion-picker-list,
2671
+ .link-picker-list,
2672
+ .menu-picker-panel,
2673
+ .settings-picker-panel,
2616
2674
  .share-picker-list,
2617
2675
  .search-picker-panel
2618
2676
  ) {
package/dist/acid.css CHANGED
@@ -2078,6 +2078,9 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2082
+ .menu-picker,
2083
+ .settings-picker,
2081
2084
  .share-picker,
2082
2085
  .date-time-picker
2083
2086
  ) {
@@ -2090,6 +2093,9 @@
2090
2093
  .locale-picker-button,
2091
2094
  .text-size-picker-button,
2092
2095
  .search-picker-button,
2096
+ .link-picker-button,
2097
+ .menu-picker-button,
2098
+ .settings-picker-button,
2093
2099
  .share-picker-button,
2094
2100
  .date-time-picker-button
2095
2101
  ) {
@@ -2125,6 +2131,9 @@
2125
2131
  .locale-picker-icon,
2126
2132
  .text-size-picker-icon,
2127
2133
  .motion-picker-icon,
2134
+ .link-picker-icon,
2135
+ .menu-picker-icon,
2136
+ .settings-picker-icon,
2128
2137
  .share-picker-icon,
2129
2138
  .search-picker-icon
2130
2139
  ) {
@@ -2183,6 +2192,31 @@
2183
2192
  background-color: var(--lily-surface-alt);
2184
2193
  }
2185
2194
 
2195
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2196
+ so its items get the share list's treatment; the current page is
2197
+ marked by aria-current and shown in bold. */
2198
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2199
+ list-style: none;
2200
+ }
2201
+
2202
+ :where(.link-picker-link) {
2203
+ display: block;
2204
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2205
+ color: var(--lily-text);
2206
+ text-decoration: none;
2207
+ border-radius: var(--lily-radius-sm);
2208
+ cursor: pointer;
2209
+ }
2210
+
2211
+ :where(.link-picker-link:hover) {
2212
+ background-color: var(--lily-surface-alt);
2213
+ }
2214
+
2215
+ :where(.link-picker-link[aria-current="page"]) {
2216
+ font-weight: 600;
2217
+ background-color: var(--lily-surface-sunken);
2218
+ }
2219
+
2186
2220
  /* Copy feedback. Never display:none this — that silences the live
2187
2221
  region for screen-reader users. */
2188
2222
  :where(.share-picker-status) {
@@ -2464,6 +2498,9 @@
2464
2498
  .locale-picker-tooltip,
2465
2499
  .text-size-picker-tooltip,
2466
2500
  .motion-picker-tooltip,
2501
+ .link-picker-tooltip,
2502
+ .menu-picker-tooltip,
2503
+ .settings-picker-tooltip,
2467
2504
  .share-picker-tooltip,
2468
2505
  .search-picker-tooltip,
2469
2506
  .date-time-picker-tooltip
@@ -2488,6 +2525,9 @@
2488
2525
  .locale-picker-tooltip,
2489
2526
  .text-size-picker-tooltip,
2490
2527
  .motion-picker-tooltip,
2528
+ .link-picker-tooltip,
2529
+ .menu-picker-tooltip,
2530
+ .settings-picker-tooltip,
2491
2531
  .share-picker-tooltip,
2492
2532
  .search-picker-tooltip,
2493
2533
  .date-time-picker-tooltip
@@ -2504,6 +2544,9 @@
2504
2544
  .locale-picker-tooltip,
2505
2545
  .text-size-picker-tooltip,
2506
2546
  .motion-picker-tooltip,
2547
+ .link-picker-tooltip,
2548
+ .menu-picker-tooltip,
2549
+ .settings-picker-tooltip,
2507
2550
  .share-picker-tooltip,
2508
2551
  .search-picker-tooltip,
2509
2552
  .date-time-picker-tooltip
@@ -2557,6 +2600,9 @@
2557
2600
  .locale-picker-list,
2558
2601
  .text-size-picker-list,
2559
2602
  .motion-picker-list,
2603
+ .link-picker-list,
2604
+ .menu-picker-panel,
2605
+ .settings-picker-panel,
2560
2606
  .share-picker-list,
2561
2607
  .search-picker-panel
2562
2608
  ) {
@@ -2583,6 +2629,9 @@
2583
2629
  .locale-picker-list,
2584
2630
  .text-size-picker-list,
2585
2631
  .motion-picker-list,
2632
+ .link-picker-list,
2633
+ .menu-picker-panel,
2634
+ .settings-picker-panel,
2586
2635
  .share-picker-list,
2587
2636
  .search-picker-panel
2588
2637
  )[hidden] {
@@ -2600,12 +2649,18 @@
2600
2649
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2650
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2651
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2652
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2653
+ :where(.menu-picker) { anchor-name: --lily-menu-picker; }
2654
+ :where(.settings-picker) { anchor-name: --lily-settings-picker; }
2603
2655
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2656
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2657
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2658
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2659
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2660
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2661
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2662
+ :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
2663
+ :where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
2609
2664
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2665
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2666
  :where(
@@ -2613,6 +2668,9 @@
2613
2668
  .locale-picker-list,
2614
2669
  .text-size-picker-list,
2615
2670
  .motion-picker-list,
2671
+ .link-picker-list,
2672
+ .menu-picker-panel,
2673
+ .settings-picker-panel,
2616
2674
  .share-picker-list,
2617
2675
  .search-picker-panel
2618
2676
  ) {
package/dist/adobe-spectrum.css CHANGED
@@ -2078,6 +2078,9 @@
2078
2078
  .locale-picker,
2079
2079
  .text-size-picker,
2080
2080
  .search-picker,
2081
+ .link-picker,
2082
+ .menu-picker,
2083
+ .settings-picker,
2081
2084
  .share-picker,
2082
2085
  .date-time-picker
2083
2086
  ) {
@@ -2090,6 +2093,9 @@
2090
2093
  .locale-picker-button,
2091
2094
  .text-size-picker-button,
2092
2095
  .search-picker-button,
2096
+ .link-picker-button,
2097
+ .menu-picker-button,
2098
+ .settings-picker-button,
2093
2099
  .share-picker-button,
2094
2100
  .date-time-picker-button
2095
2101
  ) {
@@ -2125,6 +2131,9 @@
2125
2131
  .locale-picker-icon,
2126
2132
  .text-size-picker-icon,
2127
2133
  .motion-picker-icon,
2134
+ .link-picker-icon,
2135
+ .menu-picker-icon,
2136
+ .settings-picker-icon,
2128
2137
  .share-picker-icon,
2129
2138
  .search-picker-icon
2130
2139
  ) {
@@ -2183,6 +2192,31 @@
2183
2192
  background-color: var(--lily-surface-alt);
2184
2193
  }
2185
2194
 
2195
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2196
+ so its items get the share list's treatment; the current page is
2197
+ marked by aria-current and shown in bold. */
2198
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2199
+ list-style: none;
2200
+ }
2201
+
2202
+ :where(.link-picker-link) {
2203
+ display: block;
2204
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2205
+ color: var(--lily-text);
2206
+ text-decoration: none;
2207
+ border-radius: var(--lily-radius-sm);
2208
+ cursor: pointer;
2209
+ }
2210
+
2211
+ :where(.link-picker-link:hover) {
2212
+ background-color: var(--lily-surface-alt);
2213
+ }
2214
+
2215
+ :where(.link-picker-link[aria-current="page"]) {
2216
+ font-weight: 600;
2217
+ background-color: var(--lily-surface-sunken);
2218
+ }
2219
+
2186
2220
  /* Copy feedback. Never display:none this — that silences the live
2187
2221
  region for screen-reader users. */
2188
2222
  :where(.share-picker-status) {
@@ -2464,6 +2498,9 @@
2464
2498
  .locale-picker-tooltip,
2465
2499
  .text-size-picker-tooltip,
2466
2500
  .motion-picker-tooltip,
2501
+ .link-picker-tooltip,
2502
+ .menu-picker-tooltip,
2503
+ .settings-picker-tooltip,
2467
2504
  .share-picker-tooltip,
2468
2505
  .search-picker-tooltip,
2469
2506
  .date-time-picker-tooltip
@@ -2488,6 +2525,9 @@
2488
2525
  .locale-picker-tooltip,
2489
2526
  .text-size-picker-tooltip,
2490
2527
  .motion-picker-tooltip,
2528
+ .link-picker-tooltip,
2529
+ .menu-picker-tooltip,
2530
+ .settings-picker-tooltip,
2491
2531
  .share-picker-tooltip,
2492
2532
  .search-picker-tooltip,
2493
2533
  .date-time-picker-tooltip
@@ -2504,6 +2544,9 @@
2504
2544
  .locale-picker-tooltip,
2505
2545
  .text-size-picker-tooltip,
2506
2546
  .motion-picker-tooltip,
2547
+ .link-picker-tooltip,
2548
+ .menu-picker-tooltip,
2549
+ .settings-picker-tooltip,
2507
2550
  .share-picker-tooltip,
2508
2551
  .search-picker-tooltip,
2509
2552
  .date-time-picker-tooltip
@@ -2557,6 +2600,9 @@
2557
2600
  .locale-picker-list,
2558
2601
  .text-size-picker-list,
2559
2602
  .motion-picker-list,
2603
+ .link-picker-list,
2604
+ .menu-picker-panel,
2605
+ .settings-picker-panel,
2560
2606
  .share-picker-list,
2561
2607
  .search-picker-panel
2562
2608
  ) {
@@ -2583,6 +2629,9 @@
2583
2629
  .locale-picker-list,
2584
2630
  .text-size-picker-list,
2585
2631
  .motion-picker-list,
2632
+ .link-picker-list,
2633
+ .menu-picker-panel,
2634
+ .settings-picker-panel,
2586
2635
  .share-picker-list,
2587
2636
  .search-picker-panel
2588
2637
  )[hidden] {
@@ -2600,12 +2649,18 @@
2600
2649
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2601
2650
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2602
2651
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2652
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2653
+ :where(.menu-picker) { anchor-name: --lily-menu-picker; }
2654
+ :where(.settings-picker) { anchor-name: --lily-settings-picker; }
2603
2655
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2604
2656
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2605
2657
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2606
2658
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2607
2659
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2608
2660
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2661
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2662
+ :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
2663
+ :where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
2609
2664
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2610
2665
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2611
2666
  :where(
@@ -2613,6 +2668,9 @@
2613
2668
  .locale-picker-list,
2614
2669
  .text-size-picker-list,
2615
2670
  .motion-picker-list,
2671
+ .link-picker-list,
2672
+ .menu-picker-panel,
2673
+ .settings-picker-panel,
2616
2674
  .share-picker-list,
2617
2675
  .search-picker-panel
2618
2676
  ) {