CSS Utilities

SCSS mixins and conventions beyond spacing and layout (covered in the Spacing doc).

If a CSS pattern repeats across components, extract it as a mixin in _mixins.scss. New mixins are encouraged.

Import Convention

Every SCSS partial must begin with:

@use "../utilities/" as *;

Mixin	Output
`@include card`	`border-radius: 8px; border: 2px solid var(--border-mono-medium); padding: 24px`
`@include ulreset`	`list-style: none; padding: 0; margin: 0`
`@include hidescrollbar`	Hides scrollbar cross-browser, preserves scroll
`@include hidden`	`display: none !important` — hard hide, not accessible-hidden

Maximum 4 levels. Prefer 2–3.

The following exist in the codebase but are not the correct pattern:

_footer.scss uses @use "../utilities/_mixins.scss" as *; — correct form is @use "../utilities/" as *;
_buttons.scss has hard-coded rgba() values for disabled states — use CSS custom properties from _colours.scss