@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 |
|---|---|
@presencelearning/styles/colors | Legacy color tokens (SCSS + CSS vars + JS/TS) — $red-1, $blue-2, etc. |
@presencelearning/styles/colors2 | New-theme primitive ramps |
@presencelearning/styles/surfaces | Non-ramp primitives (backgrounds, brand-red, etc.) |
@presencelearning/styles/typography | Avenir @font-face + type scale + mixins |
@presencelearning/styles/spacing | Base-8 spacing scale |
@presencelearning/styles/borders | Border radius |
@presencelearning/styles/elevation | M2 box-shadow tokens |
@presencelearning/styles/material | Angular Material mat.theme() config (v19 + v20) |
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.