UI recipes

HTML CSS

<div class="demo">
  <button type="button" class="btn btn-neutral">Button</button>
  <button type="button" class="btn btn-outline-neutral">Button</button>
  <button type="button" class="btn btn-plain-neutral">Button</button>
  <button type="button" class="btn btn-neutral btn-icon">
    <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-cookie"
    >
      <path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
      <path d="M8.5 8.5v.01" />
      <path d="M16 15.5v.01" />
      <path d="M12 12v.01" />
      <path d="M11 17v.01" />
      <path d="M7 14v.01" />
    </svg>
  </button>
</div>

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

@layer support, recipes;

@layer recipe {
  .btn {
    --_padding-inline: 0.75rem;
    --_padding-block: 0.375rem;
    --_font-size: 0.875rem;
    --_height: 2.25rem;

    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;

    min-height: var(--_height);
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);
    gap: 0.375rem;
    font-size: var(--_font-size);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius);

    border: 1px solid var(--_border-color);
    color: var(--_text);
    background-color: var(--_bg);

    &:not(:disabled):hover {
      color: var(--_hover-text);
      background-color: var(--_hover-bg);
      border-color: var(--_hover-border-color);
    }

    &:not(:disabled):active {
      color: var(--_active-text);
      background-color: var(--_active-bg);
      border-color: var(--_active-border-color);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .btn-neutral {
    --_text: #fff;
    --_bg: oklch(from var(--neutral) 20% c h);
    --_border-color: transparent;
    --_hover-text: #fff;
    --_hover-bg: oklch(from var(--_bg) calc(l + 0.1) c h);
    --_hover-border-color: transparent;
    --_active-text: #fff;
    --_active-bg: oklch(from var(--_bg) calc(l + 0.15) c h);
    --_active-border-color: transparent;

    @container style(--theme: dark) {
      --_bg: var(--neutral);
      --_hover-bg: oklch(from var(--_bg) calc(l + 0.025) c h);
      --_active-bg: oklch(from var(--_bg) calc(l + 0.05) c h);
    }
  }

  .btn-outline-neutral {
    --_text: var(--text);
    --_bg: transparent;
    --_border-color: oklch(from var(--border) calc(l - 0.05) c h);
    --_hover-text: var(--_text);
    --_hover-bg: oklch(from var(--document) calc(l - 0.035) c h);
    --_hover-border-color: var(--_border-color);
    --_active-text: var(--_text);
    --_active-bg: oklch(from var(--document) calc(l - 0.055) c h);
    --_active-border-color: var(--_border-color);

    @container style(--theme: dark) {
      --_border-color: oklch(from var(--border) calc(l + 0.05) c h);
      --_hover-bg: oklch(from var(--document) calc(l + 0.05) c h);
      --_active-bg: oklch(from var(--document) calc(l + 0.075) c h);
    }

    box-shadow:
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  }

  .btn-plain-neutral {
    --_text: var(--text);
    --_bg: transparent;
    --_border-color: transparent;
    --_hover-text: var(--_text);
    --_hover-bg: oklch(from var(--document) calc(l - 0.05) c h);
    --_hover-border-color: transparent;
    --_active-text: var(--_text);
    --_active-bg: oklch(from var(--document) calc(l - 0.075) c h);
    --_active-border-color: transparent;

    @container style(--theme: dark) {
      --_hover-bg: oklch(from var(--document) calc(l + 0.065) c h);
      --_active-bg: oklch(from var(--document) calc(l + 0.0875) c h);
    }
  }

  .btn-icon {
    --_padding-inline: 0;
    --_padding-block: 0;

    height: var(--_height);
    width: var(--_height);
  }
}

@layer support {
  .demo {
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
}