UI recipes

HTML CSS JS

<div class="demo">
  <button type="button" class="btn btn-neutral" onclick="dialog.showModal();">
    Open dialog
  </button>

  <dialog id="dialog" class="dialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <h4 class="dialog-title">Success</h4>
        <button
          type="button"
          class="btn btn-plain-neutral btn-icon"
          onclick="dialog.close();"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </button>
      </div>
      <div class="dialog-body">
        <p>
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
      </div>
      <div class="dialog-footer">
        <button
          type="button"
          class="btn btn-outline-neutral"
          onclick="dialog.close();"
        >
          Close
        </button>
      </div>
    </div>
  </dialog>
</div>

@import url("/support.css") layer(support);
@import url("/button.css") layer(recipes);

@layer support, recipes;

@layer recipe {
  .dialog {
    padding: 0;
    border: 0;
    outline: none;
    margin: auto;
    max-height: 100%;
    height: fit-content;
    max-width: 100%;
    width: min(100% - 2rem, 500px);
    border-radius: 0.375rem;
  }

  .dialog {
    transform: translateY(20px);
    transform: scale(0.95);

    transition:
      display 150ms allow-discrete,
      overlay 150ms allow-discrete,
      opacity 150ms,
      transform 150ms;

    opacity: 0;

    &[open] {
      opacity: 1;
      transform: translateY(0px);
      transform: scale(1);

      @starting-style {
        opacity: 0;
        transform: translateY(20px);
        transform: scale(0.95);
      }
    }
  }

  .dialog::backdrop {
    opacity: 0;
    backdrop-filter: blur(0);
    transition:
      display 150ms allow-discrete,
      overlay 150ms allow-discrete,
      opacity 150ms,
      transform 150ms,
      backdrop-filter 150ms;
  }

  .dialog[open]::backdrop {
    opacity: 1;
    backdrop-filter: blur(4px);
  }

  @starting-style {
    .dialog[open]::backdrop {
      opacity: 0;
      backdrop-filter: blur(0);
    }
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
  }

  .dialog-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .dialog-title {
    font-size: 1.125rem;
    font-weight: 700;
  }

  .dialog-body {
    padding-inline: 1rem;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .dialog-footer {
    padding: 1rem;
    display: flex;
    justify-content: end;
  }
}

@layer support {
  .demo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

const dialog = document.querySelector("dialog");

dialog.addEventListener("click", (e) => {
  if (e.target === dialog) {
    dialog.close();
  }
});