Mixins

Mixins are imported once and available everywhere:

@use 'mixins' as *;

Naming Convention

Mixins are named after what they produce, not how you use them:

• focus-ring — produces a focus ring
• padding-box — produces box padding
• shadow — produces a shadow
• gradient — produces a gradient

Exception: respond-to — established convention, kept for familiarity.

Usage

Apply to the element directly — most mixins generate nested pseudo-class or pseudo-element rules internally:

// ✅ correct — mixin goes on the element
.button {
  @include focus-ring;
  @include shadow(2);
  @include button-primary;
}

// ❌ wrong — focus-ring generates :focus-visible internally
.button:focus-visible {
  @include focus-ring;
}

All Mixins

Layout

• stack — flex column with gap
• flow — margin-based spacing for mixed content
• scroll-container — overflow scroll container

Shadow

• shadow — depth 1–5
• shadow-inset — inset depth 1–5

Focus

• focus-ring — standard focus ring
• focus-ring-inset — inset focus ring

Border

• border — configurable border
• border-ghost — transparent border

Padding

• padding-box — block/inline padding
• box-button — button padding
• box-input — input padding
• box-card — card padding
• box-badge — badge padding

Radius

• radius — configurable radius
• radius-button — button radius
• radius-card — card radius
• radius-input — input radius
• radius-badge — badge radius
• radius-modal — modal radius
• radius-tooltip — tooltip radius

Button

• button-base — shared button foundation
• button-primary — primary action
• button-secondary — secondary action
• button-ghost — minimal bordered
• button-danger — destructive action
• button-sm — small size
• button-lg — large size
• button-pill — pill shape
• button-icon — icon only

Gradient

• gradient — oklch surface gradient

Scrollbar

• scrollbar — neutral scrollbar
• scrollbar-themed — branded scrollbar

Responsive

• respond-to — min-width breakpoint
• respond-until — max-width breakpoint
• respond-from — alias for respond-to
• respond-mobile — xs breakpoint
• respond-tablet — md breakpoint
• respond-desktop — lg breakpoint
• respond-wide — xl breakpoint

Animation

• soft-in — opacity fade
• fade-up — fade from below
• fade-in-top — fade from above
• fade-in-bottom — fade from below
• fade-in-right — fade from right
• fade-left — fade from right to left
• fade-out-top — exit upward
• scale-in-center — scale from zero
• scale-up — scale with overshoot
• puff-in-center — scale with blur
• swing-in-top — rotate in from top
• jello-horizontal — elastic attention

Utility

• debug — outline all elements