@wmcadigital/ui-sass-helpers

Shared SCSS variables, mixins and utility classes used across the WMCA design system packages. Use this package to access the design tokens, responsive helpers and common utility mixins that other packages rely on.

Install

pnpm add @wmcadigital/ui-sass-helpers

What this package provides

• Design tokens and variables (src/styles/_variables.scss) — colours, font families, sizing ($size-*), breakpoints, grid maps and font defaults.
• Mixins (src/styles/_mixins.scss) — helpers such as type-setting(), n-icon-styling(), get-color() and repeater().
• Utility classes and layout helpers (src/styles/_utilities.scss) — .ds-grid helpers, .ds-container, margin/padding helpers, .visible-hidden, .ds-full-width, background and border helpers.
• A compiled stylesheet at dist/styles/main.css (the package style field) for direct consumption.

Usage

During development import the SCSS source so you can override variables before the compiled rules are generated:

// Preferred for development where you want to override tokens
@use '@wmcadigital/ui-sass-helpers/src/styles/variables' as *;
@use '@wmcadigital/ui-sass-helpers/src/styles/mixins' as *;

// then import utility partials you need
@use '@wmcadigital/ui-sass-helpers/src/styles/utilities' as *;

For consumers that prefer the compiled stylesheet:

@import '@wmcadigital/ui-sass-helpers/dist/styles/main.css';

Notable tokens and mixins

• $x-font-family, $x-font-family-bold — primary typeface tokens.
• Sizing: $size-xs, $size-xsm, $size-sm, $size-md, $size-lg, $size-xl.
• Breakpoints: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl.
• @mixin type-setting($level, $multiplier: 1) — generates typography rules for headings and base text sizes.
• @mixin n-icon-styling($height-and-font-size) — helper to size icon SVGs consistently with text.
• @function get-color($color, $percent: 0%, $shade: null) — returns colours from the $palettes map with optional tinting (mix with white by default, or black when dark provided).

Utility classes

• .ds-grid, .ds-grid--justify-*, .ds-grid--align-center — flex/grid helpers.
• .ds-container — responsive container with padding and max-width tied to tokens.
• .ds-m-* and .ds-p-* classes — margin and padding helpers (generated via x-mar-pad mixin).
• .visible-hidden — visually hidden but available to screen readers (reveals on focus).
• .ds-full-width — utility to make elements 100% width.
• Background (.bg-*) and border (.bdr-*) helpers to apply token-driven colours.

Customisation

To customise colours or sizing, override variables before importing the helpers. Example:

// Override a palette colour before importing rest of helpers
$brand-blue: #0055aa;
@use '@wmcadigital/ui-sass-helpers/src/styles/variables' as *;
@use '@wmcadigital/ui-sass-helpers/src/styles/utilities' as *;

Be careful to override variables prior to importing any partial that consumes them so your values are used when the compiled rules are generated.

Development

• Source partials: src/styles/_variables.scss, _mixins.scss, _utilities.scss, _typography.scss, _themes.scss and colours/.
• Build the package from the monorepo root:

pnpm -w -r run build

• Linting:

pnpm -w -r run lint