<ul id="color-picker">
    <li class="yellow">
        <button data-color="#fff312" aria-label="Yellow"></button>
    </li>
    <li class="blue selected">
        <button data-color="#0d63f8" aria-label="Blue"></button>
    </li>
    <li class="pink">
        <button data-color="#ff0088" aria-label="Pink"></button>
    </li>
</ul>

<script type="module">
    // Note: view is currently in alpha and importable via the "motion-dom" package
    const { press, view } = window.MotionDom
    const { spring } = window.Motion

    async function selectColor({ currentTarget, pageX, pageY }) {
        const logo = document.querySelector("#main-logo")

        /**
         * Set the view transition name to crossfade the logo to its new color.
         * This will be removed in a later version of the API with
         *
         * view(update).add("#main-logo")
         */
        logo.style.viewTransitionName = "logo"

        const selectColor = () => {
            const color = currentTarget.getAttribute("data-color")
            document.body.style.setProperty("--accent", color)

            const selected = document.querySelector("#color-picker .selected")
            selected.classList.remove("selected")

            if (window.innerWidth > 600) {
                logo.querySelector("svg").style.fill =
                    color === "#fff312" ? "#0f1115" : "#f5f5f5"
            }

            currentTarget.parentElement.classList.add("selected")
        }

        const animation = await view(selectColor, {
            duration: 0.4,
            ease: [0.28, 0.02, 0.1, 0.99],
        }).new(
            {
                clipPath: [
                    `circle(0% at ${pageX}px ${pageY}px)`,
                    `circle(100% at ${pageX}px ${pageY}px)`,
                ],
            },
            { duration: 0.6, ease: "easeIn" }
        )

        // Remove the logo's view transition name after the animation finishes
        animation.finished.then(() => {
            logo.style.viewTransitionName = ""
        })
    }

    press("#color-picker button", (event) => {
        selectColor(event)
    })
</script>

<style>
    #color-picker {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    #color-picker button {
        position: relative;
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        overflow: visible;
    }

    #color-picker .yellow button {
        background-color: #fff312;
    }

    #color-picker .blue button {
        background-color: #0d63f8;
    }

    #color-picker .pink button {
        background-color: #ff0088;
    }

    #color-picker .selected button::after {
        content: "";
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        border: 4px solid #f5f5f5;
        border-radius: 50%;
        view-transition-name: color-picker-button;
    }
</style>