@lilydesignsystem/themes 0.3.0 → 0.3.1
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 +44 -4
- package/dist/acid.css +44 -4
- package/dist/adobe-spectrum.css +44 -4
- package/dist/aqua.css +44 -4
- package/dist/autumn.css +44 -4
- package/dist/black.css +44 -4
- package/dist/bumblebee.css +44 -4
- package/dist/business.css +44 -4
- package/dist/caramellatte.css +44 -4
- package/dist/cmyk.css +44 -4
- package/dist/coffee.css +44 -4
- package/dist/corporate.css +44 -4
- package/dist/cupcake.css +44 -4
- package/dist/cyberpunk.css +44 -4
- package/dist/dark.css +44 -4
- package/dist/dim.css +44 -4
- package/dist/dracula.css +44 -4
- package/dist/emerald.css +44 -4
- package/dist/fantasy.css +44 -4
- package/dist/forest.css +44 -4
- package/dist/garden.css +44 -4
- package/dist/halloween.css +44 -4
- package/dist/lemonade.css +44 -4
- package/dist/light.css +44 -4
- package/dist/lofi.css +44 -4
- package/dist/luxury.css +44 -4
- package/dist/mozilla-protocol.css +44 -4
- package/dist/night.css +44 -4
- package/dist/nord.css +44 -4
- package/dist/pastel.css +44 -4
- package/dist/retro.css +44 -4
- package/dist/silk.css +44 -4
- package/dist/sunset.css +44 -4
- package/dist/synthwave.css +44 -4
- package/dist/united-kingdom-government-digital-service.css +44 -4
- package/dist/united-kingdom-national-health-service-england-for-patients.css +44 -4
- package/dist/united-kingdom-national-health-service-england-for-practitioners.css +44 -4
- package/dist/united-kingdom-national-health-service-scotland-for-patients.css +44 -4
- package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +44 -4
- package/dist/united-kingdom-national-health-service-wales-for-patients.css +44 -4
- package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +44 -4
- package/dist/united-states-web-design-system.css +44 -4
- package/dist/valentine.css +44 -4
- package/dist/winter.css +44 -4
- package/dist/wireframe.css +44 -4
- package/package.json +1 -1
package/dist/sunset.css
CHANGED
|
@@ -2556,6 +2556,7 @@
|
|
|
2556
2556
|
.theme-picker-list,
|
|
2557
2557
|
.locale-picker-list,
|
|
2558
2558
|
.text-size-picker-list,
|
|
2559
|
+
.motion-picker-list,
|
|
2559
2560
|
.share-picker-list,
|
|
2560
2561
|
.search-picker-panel
|
|
2561
2562
|
) {
|
|
@@ -2581,17 +2582,56 @@
|
|
|
2581
2582
|
.theme-picker-list,
|
|
2582
2583
|
.locale-picker-list,
|
|
2583
2584
|
.text-size-picker-list,
|
|
2585
|
+
.motion-picker-list,
|
|
2584
2586
|
.share-picker-list,
|
|
2585
2587
|
.search-picker-panel
|
|
2586
2588
|
)[hidden] {
|
|
2587
2589
|
display: none;
|
|
2588
2590
|
}
|
|
2589
2591
|
|
|
2590
|
-
|
|
2592
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2593
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2594
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2595
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2596
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2597
|
+
without anchor positioning keep the absolute placement above. */
|
|
2598
|
+
@supports (position-area: block-end) {
|
|
2599
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2600
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2603
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2609
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
|
+
:where(
|
|
2612
|
+
.theme-picker-list,
|
|
2613
|
+
.locale-picker-list,
|
|
2614
|
+
.text-size-picker-list,
|
|
2615
|
+
.motion-picker-list,
|
|
2616
|
+
.share-picker-list,
|
|
2617
|
+
.search-picker-panel
|
|
2618
|
+
) {
|
|
2619
|
+
position: fixed;
|
|
2620
|
+
inset: auto;
|
|
2621
|
+
position-area: block-end span-inline-end;
|
|
2622
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2623
|
+
min-width: 0;
|
|
2624
|
+
width: max-content;
|
|
2625
|
+
max-width: calc(100vw - 1rem);
|
|
2626
|
+
}
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2629
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2591
2630
|
> :where(
|
|
2592
2631
|
.theme-picker-option,
|
|
2593
2632
|
.locale-picker-option,
|
|
2594
|
-
.text-size-picker-option
|
|
2633
|
+
.text-size-picker-option,
|
|
2634
|
+
.motion-picker-option
|
|
2595
2635
|
) {
|
|
2596
2636
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2597
2637
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2600,7 +2640,7 @@
|
|
|
2600
2640
|
|
|
2601
2641
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2602
2642
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2603
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2643
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2604
2644
|
> :where([data-active]) {
|
|
2605
2645
|
background-color: var(--lily-surface-alt);
|
|
2606
2646
|
outline: var(--lily-focus-ring);
|
|
@@ -2609,7 +2649,7 @@
|
|
|
2609
2649
|
|
|
2610
2650
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2611
2651
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2612
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2652
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2613
2653
|
> :where([aria-selected="true"]) {
|
|
2614
2654
|
font-weight: 600;
|
|
2615
2655
|
background-color: var(--lily-surface-sunken);
|
package/dist/synthwave.css
CHANGED
|
@@ -2556,6 +2556,7 @@
|
|
|
2556
2556
|
.theme-picker-list,
|
|
2557
2557
|
.locale-picker-list,
|
|
2558
2558
|
.text-size-picker-list,
|
|
2559
|
+
.motion-picker-list,
|
|
2559
2560
|
.share-picker-list,
|
|
2560
2561
|
.search-picker-panel
|
|
2561
2562
|
) {
|
|
@@ -2581,17 +2582,56 @@
|
|
|
2581
2582
|
.theme-picker-list,
|
|
2582
2583
|
.locale-picker-list,
|
|
2583
2584
|
.text-size-picker-list,
|
|
2585
|
+
.motion-picker-list,
|
|
2584
2586
|
.share-picker-list,
|
|
2585
2587
|
.search-picker-panel
|
|
2586
2588
|
)[hidden] {
|
|
2587
2589
|
display: none;
|
|
2588
2590
|
}
|
|
2589
2591
|
|
|
2590
|
-
|
|
2592
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2593
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2594
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2595
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2596
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2597
|
+
without anchor positioning keep the absolute placement above. */
|
|
2598
|
+
@supports (position-area: block-end) {
|
|
2599
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2600
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2601
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2602
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2603
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2604
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2605
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2606
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2607
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2608
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2609
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2610
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2611
|
+
:where(
|
|
2612
|
+
.theme-picker-list,
|
|
2613
|
+
.locale-picker-list,
|
|
2614
|
+
.text-size-picker-list,
|
|
2615
|
+
.motion-picker-list,
|
|
2616
|
+
.share-picker-list,
|
|
2617
|
+
.search-picker-panel
|
|
2618
|
+
) {
|
|
2619
|
+
position: fixed;
|
|
2620
|
+
inset: auto;
|
|
2621
|
+
position-area: block-end span-inline-end;
|
|
2622
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2623
|
+
min-width: 0;
|
|
2624
|
+
width: max-content;
|
|
2625
|
+
max-width: calc(100vw - 1rem);
|
|
2626
|
+
}
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2629
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2591
2630
|
> :where(
|
|
2592
2631
|
.theme-picker-option,
|
|
2593
2632
|
.locale-picker-option,
|
|
2594
|
-
.text-size-picker-option
|
|
2633
|
+
.text-size-picker-option,
|
|
2634
|
+
.motion-picker-option
|
|
2595
2635
|
) {
|
|
2596
2636
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2597
2637
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2600,7 +2640,7 @@
|
|
|
2600
2640
|
|
|
2601
2641
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2602
2642
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2603
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2643
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2604
2644
|
> :where([data-active]) {
|
|
2605
2645
|
background-color: var(--lily-surface-alt);
|
|
2606
2646
|
outline: var(--lily-focus-ring);
|
|
@@ -2609,7 +2649,7 @@
|
|
|
2609
2649
|
|
|
2610
2650
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2611
2651
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2612
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2652
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2613
2653
|
> :where([aria-selected="true"]) {
|
|
2614
2654
|
font-weight: 600;
|
|
2615
2655
|
background-color: var(--lily-surface-sunken);
|
|
@@ -2561,6 +2561,7 @@
|
|
|
2561
2561
|
.theme-picker-list,
|
|
2562
2562
|
.locale-picker-list,
|
|
2563
2563
|
.text-size-picker-list,
|
|
2564
|
+
.motion-picker-list,
|
|
2564
2565
|
.share-picker-list,
|
|
2565
2566
|
.search-picker-panel
|
|
2566
2567
|
) {
|
|
@@ -2586,17 +2587,56 @@
|
|
|
2586
2587
|
.theme-picker-list,
|
|
2587
2588
|
.locale-picker-list,
|
|
2588
2589
|
.text-size-picker-list,
|
|
2590
|
+
.motion-picker-list,
|
|
2589
2591
|
.share-picker-list,
|
|
2590
2592
|
.search-picker-panel
|
|
2591
2593
|
)[hidden] {
|
|
2592
2594
|
display: none;
|
|
2593
2595
|
}
|
|
2594
2596
|
|
|
2595
|
-
|
|
2597
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2598
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2599
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2600
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2601
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2602
|
+
without anchor positioning keep the absolute placement above. */
|
|
2603
|
+
@supports (position-area: block-end) {
|
|
2604
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2605
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2606
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2607
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2608
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2609
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2610
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2611
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2612
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2613
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2614
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2615
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2616
|
+
:where(
|
|
2617
|
+
.theme-picker-list,
|
|
2618
|
+
.locale-picker-list,
|
|
2619
|
+
.text-size-picker-list,
|
|
2620
|
+
.motion-picker-list,
|
|
2621
|
+
.share-picker-list,
|
|
2622
|
+
.search-picker-panel
|
|
2623
|
+
) {
|
|
2624
|
+
position: fixed;
|
|
2625
|
+
inset: auto;
|
|
2626
|
+
position-area: block-end span-inline-end;
|
|
2627
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2628
|
+
min-width: 0;
|
|
2629
|
+
width: max-content;
|
|
2630
|
+
max-width: calc(100vw - 1rem);
|
|
2631
|
+
}
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2634
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2596
2635
|
> :where(
|
|
2597
2636
|
.theme-picker-option,
|
|
2598
2637
|
.locale-picker-option,
|
|
2599
|
-
.text-size-picker-option
|
|
2638
|
+
.text-size-picker-option,
|
|
2639
|
+
.motion-picker-option
|
|
2600
2640
|
) {
|
|
2601
2641
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2602
2642
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2605,7 +2645,7 @@
|
|
|
2605
2645
|
|
|
2606
2646
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2607
2647
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2608
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2648
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2609
2649
|
> :where([data-active]) {
|
|
2610
2650
|
background-color: var(--lily-surface-alt);
|
|
2611
2651
|
outline: var(--lily-focus-ring);
|
|
@@ -2614,7 +2654,7 @@
|
|
|
2614
2654
|
|
|
2615
2655
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2616
2656
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2617
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2657
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2618
2658
|
> :where([aria-selected="true"]) {
|
|
2619
2659
|
font-weight: 600;
|
|
2620
2660
|
background-color: var(--lily-surface-sunken);
|
|
@@ -2597,6 +2597,7 @@
|
|
|
2597
2597
|
.theme-picker-list,
|
|
2598
2598
|
.locale-picker-list,
|
|
2599
2599
|
.text-size-picker-list,
|
|
2600
|
+
.motion-picker-list,
|
|
2600
2601
|
.share-picker-list,
|
|
2601
2602
|
.search-picker-panel
|
|
2602
2603
|
) {
|
|
@@ -2622,17 +2623,56 @@
|
|
|
2622
2623
|
.theme-picker-list,
|
|
2623
2624
|
.locale-picker-list,
|
|
2624
2625
|
.text-size-picker-list,
|
|
2626
|
+
.motion-picker-list,
|
|
2625
2627
|
.share-picker-list,
|
|
2626
2628
|
.search-picker-panel
|
|
2627
2629
|
)[hidden] {
|
|
2628
2630
|
display: none;
|
|
2629
2631
|
}
|
|
2630
2632
|
|
|
2631
|
-
|
|
2633
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2634
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2635
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2636
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2637
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2638
|
+
without anchor positioning keep the absolute placement above. */
|
|
2639
|
+
@supports (position-area: block-end) {
|
|
2640
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2641
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2642
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2643
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2644
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2645
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2646
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2647
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2648
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2649
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2650
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2651
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2652
|
+
:where(
|
|
2653
|
+
.theme-picker-list,
|
|
2654
|
+
.locale-picker-list,
|
|
2655
|
+
.text-size-picker-list,
|
|
2656
|
+
.motion-picker-list,
|
|
2657
|
+
.share-picker-list,
|
|
2658
|
+
.search-picker-panel
|
|
2659
|
+
) {
|
|
2660
|
+
position: fixed;
|
|
2661
|
+
inset: auto;
|
|
2662
|
+
position-area: block-end span-inline-end;
|
|
2663
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2664
|
+
min-width: 0;
|
|
2665
|
+
width: max-content;
|
|
2666
|
+
max-width: calc(100vw - 1rem);
|
|
2667
|
+
}
|
|
2668
|
+
}
|
|
2669
|
+
|
|
2670
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2632
2671
|
> :where(
|
|
2633
2672
|
.theme-picker-option,
|
|
2634
2673
|
.locale-picker-option,
|
|
2635
|
-
.text-size-picker-option
|
|
2674
|
+
.text-size-picker-option,
|
|
2675
|
+
.motion-picker-option
|
|
2636
2676
|
) {
|
|
2637
2677
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2638
2678
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2641,7 +2681,7 @@
|
|
|
2641
2681
|
|
|
2642
2682
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2643
2683
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2644
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2684
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2645
2685
|
> :where([data-active]) {
|
|
2646
2686
|
background-color: var(--lily-surface-alt);
|
|
2647
2687
|
outline: var(--lily-focus-ring);
|
|
@@ -2650,7 +2690,7 @@
|
|
|
2650
2690
|
|
|
2651
2691
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2652
2692
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2653
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2693
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2654
2694
|
> :where([aria-selected="true"]) {
|
|
2655
2695
|
font-weight: 600;
|
|
2656
2696
|
background-color: var(--lily-surface-sunken);
|
|
@@ -2688,6 +2688,7 @@
|
|
|
2688
2688
|
.theme-picker-list,
|
|
2689
2689
|
.locale-picker-list,
|
|
2690
2690
|
.text-size-picker-list,
|
|
2691
|
+
.motion-picker-list,
|
|
2691
2692
|
.share-picker-list,
|
|
2692
2693
|
.search-picker-panel
|
|
2693
2694
|
) {
|
|
@@ -2713,17 +2714,56 @@
|
|
|
2713
2714
|
.theme-picker-list,
|
|
2714
2715
|
.locale-picker-list,
|
|
2715
2716
|
.text-size-picker-list,
|
|
2717
|
+
.motion-picker-list,
|
|
2716
2718
|
.share-picker-list,
|
|
2717
2719
|
.search-picker-panel
|
|
2718
2720
|
)[hidden] {
|
|
2719
2721
|
display: none;
|
|
2720
2722
|
}
|
|
2721
2723
|
|
|
2722
|
-
|
|
2724
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2725
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2726
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2727
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2728
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2729
|
+
without anchor positioning keep the absolute placement above. */
|
|
2730
|
+
@supports (position-area: block-end) {
|
|
2731
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2732
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2733
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2734
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2735
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2736
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2737
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2738
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2739
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2740
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2741
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2742
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2743
|
+
:where(
|
|
2744
|
+
.theme-picker-list,
|
|
2745
|
+
.locale-picker-list,
|
|
2746
|
+
.text-size-picker-list,
|
|
2747
|
+
.motion-picker-list,
|
|
2748
|
+
.share-picker-list,
|
|
2749
|
+
.search-picker-panel
|
|
2750
|
+
) {
|
|
2751
|
+
position: fixed;
|
|
2752
|
+
inset: auto;
|
|
2753
|
+
position-area: block-end span-inline-end;
|
|
2754
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2755
|
+
min-width: 0;
|
|
2756
|
+
width: max-content;
|
|
2757
|
+
max-width: calc(100vw - 1rem);
|
|
2758
|
+
}
|
|
2759
|
+
}
|
|
2760
|
+
|
|
2761
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2723
2762
|
> :where(
|
|
2724
2763
|
.theme-picker-option,
|
|
2725
2764
|
.locale-picker-option,
|
|
2726
|
-
.text-size-picker-option
|
|
2765
|
+
.text-size-picker-option,
|
|
2766
|
+
.motion-picker-option
|
|
2727
2767
|
) {
|
|
2728
2768
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2729
2769
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2732,7 +2772,7 @@
|
|
|
2732
2772
|
|
|
2733
2773
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2734
2774
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2735
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2775
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2736
2776
|
> :where([data-active]) {
|
|
2737
2777
|
background-color: var(--lily-surface-alt);
|
|
2738
2778
|
outline: var(--lily-focus-ring);
|
|
@@ -2741,7 +2781,7 @@
|
|
|
2741
2781
|
|
|
2742
2782
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2743
2783
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2744
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2784
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2745
2785
|
> :where([aria-selected="true"]) {
|
|
2746
2786
|
font-weight: 600;
|
|
2747
2787
|
background-color: var(--lily-surface-sunken);
|
|
@@ -2700,6 +2700,7 @@
|
|
|
2700
2700
|
.theme-picker-list,
|
|
2701
2701
|
.locale-picker-list,
|
|
2702
2702
|
.text-size-picker-list,
|
|
2703
|
+
.motion-picker-list,
|
|
2703
2704
|
.share-picker-list,
|
|
2704
2705
|
.search-picker-panel
|
|
2705
2706
|
) {
|
|
@@ -2725,17 +2726,56 @@
|
|
|
2725
2726
|
.theme-picker-list,
|
|
2726
2727
|
.locale-picker-list,
|
|
2727
2728
|
.text-size-picker-list,
|
|
2729
|
+
.motion-picker-list,
|
|
2728
2730
|
.share-picker-list,
|
|
2729
2731
|
.search-picker-panel
|
|
2730
2732
|
)[hidden] {
|
|
2731
2733
|
display: none;
|
|
2732
2734
|
}
|
|
2733
2735
|
|
|
2734
|
-
|
|
2736
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2737
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2738
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2739
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2740
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2741
|
+
without anchor positioning keep the absolute placement above. */
|
|
2742
|
+
@supports (position-area: block-end) {
|
|
2743
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2744
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2745
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2746
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2747
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2748
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2749
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2750
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2751
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2752
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2753
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2754
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2755
|
+
:where(
|
|
2756
|
+
.theme-picker-list,
|
|
2757
|
+
.locale-picker-list,
|
|
2758
|
+
.text-size-picker-list,
|
|
2759
|
+
.motion-picker-list,
|
|
2760
|
+
.share-picker-list,
|
|
2761
|
+
.search-picker-panel
|
|
2762
|
+
) {
|
|
2763
|
+
position: fixed;
|
|
2764
|
+
inset: auto;
|
|
2765
|
+
position-area: block-end span-inline-end;
|
|
2766
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2767
|
+
min-width: 0;
|
|
2768
|
+
width: max-content;
|
|
2769
|
+
max-width: calc(100vw - 1rem);
|
|
2770
|
+
}
|
|
2771
|
+
}
|
|
2772
|
+
|
|
2773
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2735
2774
|
> :where(
|
|
2736
2775
|
.theme-picker-option,
|
|
2737
2776
|
.locale-picker-option,
|
|
2738
|
-
.text-size-picker-option
|
|
2777
|
+
.text-size-picker-option,
|
|
2778
|
+
.motion-picker-option
|
|
2739
2779
|
) {
|
|
2740
2780
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2741
2781
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2744,7 +2784,7 @@
|
|
|
2744
2784
|
|
|
2745
2785
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2746
2786
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2747
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2787
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2748
2788
|
> :where([data-active]) {
|
|
2749
2789
|
background-color: var(--lily-surface-alt);
|
|
2750
2790
|
outline: var(--lily-focus-ring);
|
|
@@ -2753,7 +2793,7 @@
|
|
|
2753
2793
|
|
|
2754
2794
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2755
2795
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2756
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2796
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2757
2797
|
> :where([aria-selected="true"]) {
|
|
2758
2798
|
font-weight: 600;
|
|
2759
2799
|
background-color: var(--lily-surface-sunken);
|
|
@@ -2784,6 +2784,7 @@
|
|
|
2784
2784
|
.theme-picker-list,
|
|
2785
2785
|
.locale-picker-list,
|
|
2786
2786
|
.text-size-picker-list,
|
|
2787
|
+
.motion-picker-list,
|
|
2787
2788
|
.share-picker-list,
|
|
2788
2789
|
.search-picker-panel
|
|
2789
2790
|
) {
|
|
@@ -2809,17 +2810,56 @@
|
|
|
2809
2810
|
.theme-picker-list,
|
|
2810
2811
|
.locale-picker-list,
|
|
2811
2812
|
.text-size-picker-list,
|
|
2813
|
+
.motion-picker-list,
|
|
2812
2814
|
.share-picker-list,
|
|
2813
2815
|
.search-picker-panel
|
|
2814
2816
|
)[hidden] {
|
|
2815
2817
|
display: none;
|
|
2816
2818
|
}
|
|
2817
2819
|
|
|
2818
|
-
|
|
2820
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
2821
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
2822
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
2823
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
2824
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
2825
|
+
without anchor positioning keep the absolute placement above. */
|
|
2826
|
+
@supports (position-area: block-end) {
|
|
2827
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
2828
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
2829
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
2830
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
2831
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
2832
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
2833
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
2834
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
2835
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
2836
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
2837
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
2838
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
2839
|
+
:where(
|
|
2840
|
+
.theme-picker-list,
|
|
2841
|
+
.locale-picker-list,
|
|
2842
|
+
.text-size-picker-list,
|
|
2843
|
+
.motion-picker-list,
|
|
2844
|
+
.share-picker-list,
|
|
2845
|
+
.search-picker-panel
|
|
2846
|
+
) {
|
|
2847
|
+
position: fixed;
|
|
2848
|
+
inset: auto;
|
|
2849
|
+
position-area: block-end span-inline-end;
|
|
2850
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
2851
|
+
min-width: 0;
|
|
2852
|
+
width: max-content;
|
|
2853
|
+
max-width: calc(100vw - 1rem);
|
|
2854
|
+
}
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2857
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2819
2858
|
> :where(
|
|
2820
2859
|
.theme-picker-option,
|
|
2821
2860
|
.locale-picker-option,
|
|
2822
|
-
.text-size-picker-option
|
|
2861
|
+
.text-size-picker-option,
|
|
2862
|
+
.motion-picker-option
|
|
2823
2863
|
) {
|
|
2824
2864
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
2825
2865
|
border-radius: var(--lily-radius-sm);
|
|
@@ -2828,7 +2868,7 @@
|
|
|
2828
2868
|
|
|
2829
2869
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
2830
2870
|
stays on the listbox, so this is the only visible cue for it. */
|
|
2831
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2871
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2832
2872
|
> :where([data-active]) {
|
|
2833
2873
|
background-color: var(--lily-surface-alt);
|
|
2834
2874
|
outline: var(--lily-focus-ring);
|
|
@@ -2837,7 +2877,7 @@
|
|
|
2837
2877
|
|
|
2838
2878
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
2839
2879
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
2840
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
2880
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
2841
2881
|
> :where([aria-selected="true"]) {
|
|
2842
2882
|
font-weight: 600;
|
|
2843
2883
|
background-color: var(--lily-surface-sunken);
|
|
@@ -3371,6 +3371,7 @@
|
|
|
3371
3371
|
.theme-picker-list,
|
|
3372
3372
|
.locale-picker-list,
|
|
3373
3373
|
.text-size-picker-list,
|
|
3374
|
+
.motion-picker-list,
|
|
3374
3375
|
.share-picker-list,
|
|
3375
3376
|
.search-picker-panel
|
|
3376
3377
|
) {
|
|
@@ -3396,17 +3397,56 @@
|
|
|
3396
3397
|
.theme-picker-list,
|
|
3397
3398
|
.locale-picker-list,
|
|
3398
3399
|
.text-size-picker-list,
|
|
3400
|
+
.motion-picker-list,
|
|
3399
3401
|
.share-picker-list,
|
|
3400
3402
|
.search-picker-panel
|
|
3401
3403
|
)[hidden] {
|
|
3402
3404
|
display: none;
|
|
3403
3405
|
}
|
|
3404
3406
|
|
|
3405
|
-
|
|
3407
|
+
/* Popups open under their button, aligned to its start edge, and flip to
|
|
3408
|
+
its end edge (or above it) when they would run off the viewport. A header
|
|
3409
|
+
picker near the right edge otherwise overflows, and focusing the popup
|
|
3410
|
+
scrolls the whole page sideways. `position: fixed` makes the viewport the
|
|
3411
|
+
containing block that the flip fallbacks are checked against; browsers
|
|
3412
|
+
without anchor positioning keep the absolute placement above. */
|
|
3413
|
+
@supports (position-area: block-end) {
|
|
3414
|
+
:where(.theme-picker) { anchor-name: --lily-theme-picker; }
|
|
3415
|
+
:where(.locale-picker) { anchor-name: --lily-locale-picker; }
|
|
3416
|
+
:where(.text-size-picker) { anchor-name: --lily-text-size-picker; }
|
|
3417
|
+
:where(.motion-picker) { anchor-name: --lily-motion-picker; }
|
|
3418
|
+
:where(.share-picker) { anchor-name: --lily-share-picker; }
|
|
3419
|
+
:where(.search-picker) { anchor-name: --lily-search-picker; }
|
|
3420
|
+
:where(.theme-picker-list) { position-anchor: --lily-theme-picker; }
|
|
3421
|
+
:where(.locale-picker-list) { position-anchor: --lily-locale-picker; }
|
|
3422
|
+
:where(.text-size-picker-list) { position-anchor: --lily-text-size-picker; }
|
|
3423
|
+
:where(.motion-picker-list) { position-anchor: --lily-motion-picker; }
|
|
3424
|
+
:where(.share-picker-list) { position-anchor: --lily-share-picker; }
|
|
3425
|
+
:where(.search-picker-panel) { position-anchor: --lily-search-picker; }
|
|
3426
|
+
:where(
|
|
3427
|
+
.theme-picker-list,
|
|
3428
|
+
.locale-picker-list,
|
|
3429
|
+
.text-size-picker-list,
|
|
3430
|
+
.motion-picker-list,
|
|
3431
|
+
.share-picker-list,
|
|
3432
|
+
.search-picker-panel
|
|
3433
|
+
) {
|
|
3434
|
+
position: fixed;
|
|
3435
|
+
inset: auto;
|
|
3436
|
+
position-area: block-end span-inline-end;
|
|
3437
|
+
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
|
|
3438
|
+
min-width: 0;
|
|
3439
|
+
width: max-content;
|
|
3440
|
+
max-width: calc(100vw - 1rem);
|
|
3441
|
+
}
|
|
3442
|
+
}
|
|
3443
|
+
|
|
3444
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
3406
3445
|
> :where(
|
|
3407
3446
|
.theme-picker-option,
|
|
3408
3447
|
.locale-picker-option,
|
|
3409
|
-
.text-size-picker-option
|
|
3448
|
+
.text-size-picker-option,
|
|
3449
|
+
.motion-picker-option
|
|
3410
3450
|
) {
|
|
3411
3451
|
padding: var(--lily-space-xs) var(--lily-space-sm);
|
|
3412
3452
|
border-radius: var(--lily-radius-sm);
|
|
@@ -3415,7 +3455,7 @@
|
|
|
3415
3455
|
|
|
3416
3456
|
/* data-active is the keyboard cursor (aria-activedescendant); focus
|
|
3417
3457
|
stays on the listbox, so this is the only visible cue for it. */
|
|
3418
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
3458
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
3419
3459
|
> :where([data-active]) {
|
|
3420
3460
|
background-color: var(--lily-surface-alt);
|
|
3421
3461
|
outline: var(--lily-focus-ring);
|
|
@@ -3424,7 +3464,7 @@
|
|
|
3424
3464
|
|
|
3425
3465
|
/* aria-selected marks the applied theme/locale, which is not the
|
|
3426
3466
|
same thing as the keyboard cursor. Both can be visible at once. */
|
|
3427
|
-
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
|
|
3467
|
+
:where(.theme-picker-list, .locale-picker-list, .text-size-picker-list, .motion-picker-list)
|
|
3428
3468
|
> :where([aria-selected="true"]) {
|
|
3429
3469
|
font-weight: 600;
|
|
3430
3470
|
background-color: var(--lily-surface-sunken);
|