<aside class="s-modal s-modal__celebration z-base" id="modal-base" aria-hidden="false">
    <div class="s-modal--dialog wmx4" role="document">
        <h1 class="s-modal--header" id="modal-title">You’re published!</h1>
        <p class="s-modal--body" id="modal-description">Sometimes it’s appropriate to confirm a user’s action with some confetti in celebration. You can combine our confetti background utility with some extra spacing by adding the <code>.s-modal__celebration</code> modifier.</p>
        <div class="s-modal--footer">
            <button class="grid--cell s-btn s-btn__primary" type="button">Got it!</button>
        </div>
        <button class="s-modal--close s-btn s-btn__muted" aria-label="Close">
            <svg aria-hidden="true" class="svg-icon iconClearSm" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7 12 3.41z"></path></svg>
        </button>
    </div>
</aside>
<button class="s-btn s-btn__muted s-btn__filled ps-fixed r12 t12" onclick="document.getElementsByTagName('body')[0].classList.toggle('theme-dark');">Toggle dark mode</button>