feat(design): re-theme to CIBG Huisstijl (Bootstrap 5.2), replacing RHC/Utrecht
The portal now adheres to the CIBG design system (designsystem.cibg.nl) — a customized Bootstrap 5.2 build — replacing the Rijkshuisstijl-Community / Utrecht theme. See ADR-0003. - Vendor @cibg/huisstijl@3.22.0 under public/cibg-huisstijl/, loaded via a <link> in index.html (Storybook serves it via staticDirs). Drop the two @rijkshuisstijl-community deps. - Token bridge in styles.scss: redefine the app's ~54 --rhc-* tokens onto CIBG/--bs-* values, so components keep referencing tokens (no 300+ site rewrite). System-font stack; licensed RO/Rijks text fonts intentionally not shipped. - Re-skin every shared atom to Bootstrap/CIBG classes (btn, form-control, form-check-*, table, breadcrumb, …) keeping their input() APIs. alert is hand-rolled (CIBG drops .alert); local .card/.badge renamed to avoid Bootstrap collisions. - Domain pages: drop stray rhc-*/utrecht-* classes; registration-table → table table-striped. Verified: build green, check:tokens OK, lint clean, 174 tests pass, build-storybook OK, and the served build loads the vendored CSS (200, .btn-primary present). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
13
CLAUDE.md
13
CLAUDE.md
@@ -54,8 +54,10 @@ advisories are pinned via `package.json` `overrides`; the shipped bundle audits
|
||||
`shared/ui` atoms → molecules → organisms; `shared/layout` templates (`shell`,
|
||||
`page-shell`); context `ui/` pages. Each level only uses levels below. A new page
|
||||
should be **composition of existing blocks** — adding building blocks is the
|
||||
exception, not the default. Atoms are thin wrappers over Utrecht/RHC CSS classes;
|
||||
we own only a small typed `input()` API, the design system does the visuals.
|
||||
exception, not the default. Atoms are thin wrappers over CIBG Huisstijl (Bootstrap 5.2)
|
||||
CSS classes (`btn`, `form-control`, `card`, …); we own only a small typed `input()` API,
|
||||
the design system does the visuals. (Where CIBG lacks a class — e.g. `alert` — the atom is a
|
||||
small hand-rolled surface built from the token bridge; see ADR-0003.)
|
||||
|
||||
### 3. State: make illegal states unrepresentable
|
||||
|
||||
@@ -135,7 +137,10 @@ not heavy component tests.
|
||||
fields + ad-hoc error signals.
|
||||
- Routes: lazy `loadComponent`, persistent `ShellComponent` parent, `canActivate:
|
||||
[authGuard]` on protected routes (`app.routes.ts`).
|
||||
- Theming is one import — `src/styles.scss` pulls the RHC palette; no hand-written theme.
|
||||
- Theming: CIBG Huisstijl (a customized Bootstrap 5.2 build) is vendored under
|
||||
`public/cibg-huisstijl/` and loaded via a `<link>` in `index.html`; `src/styles.scss` holds a
|
||||
**token bridge** mapping the app's `--rhc-*` token vocabulary onto CIBG/`--bs-*` values (so
|
||||
components keep referencing tokens). System-font stack (licensed RO/Rijks fonts not shipped). See ADR-0003.
|
||||
- Scenario toggle (**dev-only**, not wired in prod builds): `?scenario=slow|loading|empty|error`
|
||||
on data pages (`scenario.interceptor.ts`) to see every async state.
|
||||
- Prettier; `.editorconfig`. tsconfig: `noImplicitReturns`,
|
||||
@@ -155,5 +160,5 @@ dispatch messages). Worked example: the intake wizard (`herregistratie/`).
|
||||
|
||||
## Out of scope (POC, don't build unprompted)
|
||||
|
||||
Real auth/DigiD, NgRx, licensed Rijkshuisstijl font/logo,
|
||||
Real auth/DigiD, NgRx, licensed RO/Rijks fonts + logo (system-font stack; text wordmark),
|
||||
runtime DTO validation on every endpoint, multi-tab session sync.
|
||||
|
||||
Reference in New Issue
Block a user