@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/united-states-web-design-system.css CHANGED
@@ -2079,6 +2079,9 @@
2079
2079
  .locale-picker,
2080
2080
  .text-size-picker,
2081
2081
  .search-picker,
2082
+ .link-picker,
2083
+ .menu-picker,
2084
+ .settings-picker,
2082
2085
  .share-picker,
2083
2086
  .date-time-picker
2084
2087
  ) {
@@ -2091,6 +2094,9 @@
2091
2094
  .locale-picker-button,
2092
2095
  .text-size-picker-button,
2093
2096
  .search-picker-button,
2097
+ .link-picker-button,
2098
+ .menu-picker-button,
2099
+ .settings-picker-button,
2094
2100
  .share-picker-button,
2095
2101
  .date-time-picker-button
2096
2102
  ) {
@@ -2126,6 +2132,9 @@
2126
2132
  .locale-picker-icon,
2127
2133
  .text-size-picker-icon,
2128
2134
  .motion-picker-icon,
2135
+ .link-picker-icon,
2136
+ .menu-picker-icon,
2137
+ .settings-picker-icon,
2129
2138
  .share-picker-icon,
2130
2139
  .search-picker-icon
2131
2140
  ) {
@@ -2184,6 +2193,31 @@
2184
2193
  background-color: var(--lily-surface-alt);
2185
2194
  }
2186
2195
 
2196
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2197
+ so its items get the share list's treatment; the current page is
2198
+ marked by aria-current and shown in bold. */
2199
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2200
+ list-style: none;
2201
+ }
2202
+
2203
+ :where(.link-picker-link) {
2204
+ display: block;
2205
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2206
+ color: var(--lily-text);
2207
+ text-decoration: none;
2208
+ border-radius: var(--lily-radius-sm);
2209
+ cursor: pointer;
2210
+ }
2211
+
2212
+ :where(.link-picker-link:hover) {
2213
+ background-color: var(--lily-surface-alt);
2214
+ }
2215
+
2216
+ :where(.link-picker-link[aria-current="page"]) {
2217
+ font-weight: 600;
2218
+ background-color: var(--lily-surface-sunken);
2219
+ }
2220
+
2187
2221
  /* Copy feedback. Never display:none this — that silences the live
2188
2222
  region for screen-reader users. */
2189
2223
  :where(.share-picker-status) {
@@ -2465,6 +2499,9 @@
2465
2499
  .locale-picker-tooltip,
2466
2500
  .text-size-picker-tooltip,
2467
2501
  .motion-picker-tooltip,
2502
+ .link-picker-tooltip,
2503
+ .menu-picker-tooltip,
2504
+ .settings-picker-tooltip,
2468
2505
  .share-picker-tooltip,
2469
2506
  .search-picker-tooltip,
2470
2507
  .date-time-picker-tooltip
@@ -2489,6 +2526,9 @@
2489
2526
  .locale-picker-tooltip,
2490
2527
  .text-size-picker-tooltip,
2491
2528
  .motion-picker-tooltip,
2529
+ .link-picker-tooltip,
2530
+ .menu-picker-tooltip,
2531
+ .settings-picker-tooltip,
2492
2532
  .share-picker-tooltip,
2493
2533
  .search-picker-tooltip,
2494
2534
  .date-time-picker-tooltip
@@ -2505,6 +2545,9 @@
2505
2545
  .locale-picker-tooltip,
2506
2546
  .text-size-picker-tooltip,
2507
2547
  .motion-picker-tooltip,
2548
+ .link-picker-tooltip,
2549
+ .menu-picker-tooltip,
2550
+ .settings-picker-tooltip,
2508
2551
  .share-picker-tooltip,
2509
2552
  .search-picker-tooltip,
2510
2553
  .date-time-picker-tooltip
@@ -2558,6 +2601,9 @@
2558
2601
  .locale-picker-list,
2559
2602
  .text-size-picker-list,
2560
2603
  .motion-picker-list,
2604
+ .link-picker-list,
2605
+ .menu-picker-panel,
2606
+ .settings-picker-panel,
2561
2607
  .share-picker-list,
2562
2608
  .search-picker-panel
2563
2609
  ) {
@@ -2584,6 +2630,9 @@
2584
2630
  .locale-picker-list,
2585
2631
  .text-size-picker-list,
2586
2632
  .motion-picker-list,
2633
+ .link-picker-list,
2634
+ .menu-picker-panel,
2635
+ .settings-picker-panel,
2587
2636
  .share-picker-list,
2588
2637
  .search-picker-panel
2589
2638
  )[hidden] {
@@ -2601,12 +2650,18 @@
2601
2650
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2602
2651
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2603
2652
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2653
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2654
+ :where(.menu-picker) { anchor-name: --lily-menu-picker; }
2655
+ :where(.settings-picker) { anchor-name: --lily-settings-picker; }
2604
2656
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2605
2657
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2606
2658
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2607
2659
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2608
2660
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2609
2661
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2662
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2663
+ :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
2664
+ :where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
2610
2665
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2611
2666
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2612
2667
  :where(
@@ -2614,6 +2669,9 @@
2614
2669
  .locale-picker-list,
2615
2670
  .text-size-picker-list,
2616
2671
  .motion-picker-list,
2672
+ .link-picker-list,
2673
+ .menu-picker-panel,
2674
+ .settings-picker-panel,
2617
2675
  .share-picker-list,
2618
2676
  .search-picker-panel
2619
2677
  ) {
package/dist/valentine.css CHANGED
@@ -2079,6 +2079,9 @@
2079
2079
  .locale-picker,
2080
2080
  .text-size-picker,
2081
2081
  .search-picker,
2082
+ .link-picker,
2083
+ .menu-picker,
2084
+ .settings-picker,
2082
2085
  .share-picker,
2083
2086
  .date-time-picker
2084
2087
  ) {
@@ -2091,6 +2094,9 @@
2091
2094
  .locale-picker-button,
2092
2095
  .text-size-picker-button,
2093
2096
  .search-picker-button,
2097
+ .link-picker-button,
2098
+ .menu-picker-button,
2099
+ .settings-picker-button,
2094
2100
  .share-picker-button,
2095
2101
  .date-time-picker-button
2096
2102
  ) {
@@ -2126,6 +2132,9 @@
2126
2132
  .locale-picker-icon,
2127
2133
  .text-size-picker-icon,
2128
2134
  .motion-picker-icon,
2135
+ .link-picker-icon,
2136
+ .menu-picker-icon,
2137
+ .settings-picker-icon,
2129
2138
  .share-picker-icon,
2130
2139
  .search-picker-icon
2131
2140
  ) {
@@ -2184,6 +2193,31 @@
2184
2193
  background-color: var(--lily-surface-alt);
2185
2194
  }
2186
2195
 
2196
+ /* link-picker's list holds real page links (a disclosure, not a menu),
2197
+ so its items get the share list's treatment; the current page is
2198
+ marked by aria-current and shown in bold. */
2199
+ :where(.link-picker-list) > :where(.link-picker-list-item) {
2200
+ list-style: none;
2201
+ }
2202
+
2203
+ :where(.link-picker-link) {
2204
+ display: block;
2205
+ padding: var(--lily-space-xs) var(--lily-space-sm);
2206
+ color: var(--lily-text);
2207
+ text-decoration: none;
2208
+ border-radius: var(--lily-radius-sm);
2209
+ cursor: pointer;
2210
+ }
2211
+
2212
+ :where(.link-picker-link:hover) {
2213
+ background-color: var(--lily-surface-alt);
2214
+ }
2215
+
2216
+ :where(.link-picker-link[aria-current="page"]) {
2217
+ font-weight: 600;
2218
+ background-color: var(--lily-surface-sunken);
2219
+ }
2220
+
2187
2221
  /* Copy feedback. Never display:none this — that silences the live
2188
2222
  region for screen-reader users. */
2189
2223
  :where(.share-picker-status) {
@@ -2465,6 +2499,9 @@
2465
2499
  .locale-picker-tooltip,
2466
2500
  .text-size-picker-tooltip,
2467
2501
  .motion-picker-tooltip,
2502
+ .link-picker-tooltip,
2503
+ .menu-picker-tooltip,
2504
+ .settings-picker-tooltip,
2468
2505
  .share-picker-tooltip,
2469
2506
  .search-picker-tooltip,
2470
2507
  .date-time-picker-tooltip
@@ -2489,6 +2526,9 @@
2489
2526
  .locale-picker-tooltip,
2490
2527
  .text-size-picker-tooltip,
2491
2528
  .motion-picker-tooltip,
2529
+ .link-picker-tooltip,
2530
+ .menu-picker-tooltip,
2531
+ .settings-picker-tooltip,
2492
2532
  .share-picker-tooltip,
2493
2533
  .search-picker-tooltip,
2494
2534
  .date-time-picker-tooltip
@@ -2505,6 +2545,9 @@
2505
2545
  .locale-picker-tooltip,
2506
2546
  .text-size-picker-tooltip,
2507
2547
  .motion-picker-tooltip,
2548
+ .link-picker-tooltip,
2549
+ .menu-picker-tooltip,
2550
+ .settings-picker-tooltip,
2508
2551
  .share-picker-tooltip,
2509
2552
  .search-picker-tooltip,
2510
2553
  .date-time-picker-tooltip
@@ -2558,6 +2601,9 @@
2558
2601
  .locale-picker-list,
2559
2602
  .text-size-picker-list,
2560
2603
  .motion-picker-list,
2604
+ .link-picker-list,
2605
+ .menu-picker-panel,
2606
+ .settings-picker-panel,
2561
2607
  .share-picker-list,
2562
2608
  .search-picker-panel
2563
2609
  ) {
@@ -2584,6 +2630,9 @@
2584
2630
  .locale-picker-list,
2585
2631
  .text-size-picker-list,
2586
2632
  .motion-picker-list,
2633
+ .link-picker-list,
2634
+ .menu-picker-panel,
2635
+ .settings-picker-panel,
2587
2636
  .share-picker-list,
2588
2637
  .search-picker-panel
2589
2638
  )[hidden] {
@@ -2601,12 +2650,18 @@
2601
2650
  :where(.locale-picker) { anchor-name: --lily-locale-picker; }
2602
2651
  :where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
2603
2652
  :where(.motion-picker) { anchor-name: --lily-motion-picker; }
2653
+ :where(.link-picker) { anchor-name: --lily-link-picker; }
2654
+ :where(.menu-picker) { anchor-name: --lily-menu-picker; }
2655
+ :where(.settings-picker) { anchor-name: --lily-settings-picker; }
2604
2656
  :where(.share-picker) { anchor-name: --lily-share-picker; }
2605
2657
  :where(.search-picker) { anchor-name: --lily-search-picker; }
2606
2658
  :where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
2607
2659
  :where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
2608
2660
  :where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
2609
2661
  :where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
2662
+ :where(.link-picker-list) { position-anchor: --lily-link-picker; }
2663
+ :where(.menu-picker-panel) { position-anchor: --lily-menu-picker; }
2664
+ :where(.settings-picker-panel) { position-anchor: --lily-settings-picker; }
2610
2665
  :where(.share-picker-list) { position-anchor: --lily-share-picker; }
2611
2666
  :where(.search-picker-panel) { position-anchor: --lily-search-picker; }
2612
2667
  :where(
@@ -2614,6 +2669,9 @@
2614
2669
  .locale-picker-list,
2615
2670
  .text-size-picker-list,
2616
2671
  .motion-picker-list,
2672
+ .link-picker-list,
2673
+ .menu-picker-panel,
2674
+ .settings-picker-panel,
2617
2675
  .share-picker-list,
2618
2676
  .search-picker-panel
2619
2677
  ) {