Utilities

PaperStack ships a focused set of utility classes in @paperstack/utilities. These are not meant to be a full Tailwind-style utility library — they cover the most common one-off needs without duplicating what the component system already handles.

@use "@paperstack/utilities/src/index.scss";

Spacing

Margin and padding utilities follow the naming pattern ps-{property}-{side}-{step}.

<div class="ps-p-4">16px padding all sides</div>
<div class="ps-px-3">12px horizontal padding</div>
<div class="ps-py-5">20px vertical padding</div>
<div class="ps-mt-2">8px margin-top</div>
<div class="ps-mb-4">16px margin-bottom</div>
<div class="ps-gap-2">8px gap (flex/grid children)</div>

Steps align to the spacing scale: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px, 10=40px, 12=48px.

Layout

Class	Equivalent CSS
ps-container	Max-width centered container with inline padding
ps-flex	display: flex
ps-grid	display: grid
ps-stack	Flex column (vertical stack)
ps-cluster	Flex row, wrapping (horizontal cluster)
ps-center	Flex center both axes
ps-hidden	display: none
ps-sr-only	Visually hidden, accessible to screen readers

Typography

Class	Effect
ps-heading-xl	Display-size heading
ps-heading-lg	Large section heading
ps-heading-sm	Small heading / subtitle
ps-body	Default body text size
ps-fine-print	Small / caption text
ps-text-secondary	Secondary (muted) text color
ps-text-primary	Accent / primary text color
ps-font-mono	Monospace font stack
ps-font-reading	Serif reading font stack
ps-truncate	Single-line overflow ellipsis
ps-balance	text-wrap: balance

Responsive

Responsive utilities are prefixed with a breakpoint name to apply only above that breakpoint. The pattern is ps-{breakpoint}:{utility} in the class attribute.

<!-- Hide on mobile, show on md+ -->
<div class="ps-hidden ps-md:ps-block">...</div>

<!-- Different column counts by breakpoint -->
<div class="ps-grid ps-grid-cols-1 ps-md:ps-grid-cols-3">...</div>

Available breakpoint prefixes: sm, md, lg, xl, 2xl.

State Utilities

Class	Use case
ps-interactive	Cursor pointer + hover/active transitions
ps-disabled	Reduced opacity + pointer-events none
ps-loading	Skeleton shimmer animation
ps-selected	Selected state highlight

Paper Helpers

Utility classes specific to the paper aesthetic:

Class	Effect
ps-depth-0 — ps-depth-max	Explicit depth/elevation levels (0–5)
ps-layer-edge	Subtle inner shadow to simulate a page edge
ps-stacking-context	Creates an isolated stacking context
ps-paper--clip	Clips children to paper boundary