@presencelearning/styles
Shared design tokens for Presence Learning frontends. Ships color, typography, spacing, border radius, and elevation tokens, plus a ready-to-use Angular Material theme config compatible with both v19 and v20.
Install
Section titled “Install”npm install @presencelearning/stylesDomains
Section titled “Domains”The package ships several domains. Import each via its own subpath:
| Subpath | What’s inside | Flavors |
|---|---|---|
@presencelearning/styles/colors | Legacy color tokens — $red-1, $blue-2, etc. | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/colors2 | New-theme primitive ramps | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/surfaces | Non-ramp primitives (backgrounds, brand-red, etc.) | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/typography | Type scale + mixins (CSS-free — safe to @use per component) | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/typography-fonts | Avenir @font-face declarations — load once, globally | SCSS · CSS only |
@presencelearning/styles/spacing | Base-8 spacing scale | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/borders | Border radius | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/elevation | M2 box-shadow tokens | SCSS · CSS · JS/CJS/TS |
@presencelearning/styles/material | Angular Material mat.theme() config (v19 + v20) | SCSS only |
The bare @presencelearning/styles root entry resolves to the legacy colors domain only (@use gets index.scss, which forwards colors; import/require get the colors JS). Prefer an explicit subpath.
JS and TypeScript flavors
Section titled “JS and TypeScript flavors”Each domain with a JS flavor exports a frozen token map, a cssVar(token) helper, and Token/Value types — ColorToken for colors, otherwise named after the domain (Colors2Token, SpacingToken, BordersToken, ElevationToken, SurfacesToken, TypographyToken).
import { spacing, cssVar, SpacingToken } from '@presencelearning/styles/spacing';For anything not covered by a named subpath, ./scss/* maps to the raw dist SCSS and ./fonts/* to the font files.
Since 0.5.1 the package also sets top-level main/module/types, so Angular libraries built with ng-packagr and consumers on moduleResolution: "node" can resolve it.
Source of truth
Section titled “Source of truth”- New-theme tokens come from Presence — Design System v2.
- Color ramps come from Presence MD2.
- Legacy tokens come from the original Presence Material Design file.
Use the sidebar to drill into each domain — every page renders live values straight from the SCSS sources.