Starter docs

Theme and design system

Every front end — the application, the landing page, the documentation site, the playground — and the identity host's pages draw on one design system, @blouppy/ui, in front/libs/ui/. DESIGN.md at the repository root is its specification: colours, type scale, spacing, radii, shadows, and the component and accessibility rules.

Changing the look

The tokens are CSS custom properties in front/libs/ui/src/tokens/tokens.css, in a light and a dark scheme. Change the primary palette, the fonts or the radii there and every app follows.

After a change to the tokens:

  1. Rebuild the identity host's stylesheet: cd back/Blouppy.Identity && npm ci && npm run build:css.
  2. Measure contrast: cd front/playground && npm run contrast checks the tokens against the floors DESIGN.md sets.
  3. Look at the result: npm run build && npm run gallery in each app (see Visual review).

Adding a component

There is no third-party component library: a primitive the library lacks is added to @blouppy/ui, never pulled from a package or rebuilt inside a feature. A primitive is done when:

  • it lives in front/libs/ui/src/<name>/, built on Angular and the Angular CDK;
  • every input(), model() and output() carries a JSDoc — the playground's build fails otherwise, because it turns them into the component's API reference;
  • its generic labels are in the library's own catalogues (front/libs/ui/src/i18n/translations/), not in the application's;
  • it has an entry in front/playground/src/app/catalogue.ts, naming the folders it documents in sources.

Application-specific compositions on top of the primitives live in front/application/src/app/shared/ui/.