ehoandClaude Opus 4.8
62ba0b98c4
Fix: address-fields shipped a scoped `fieldset { padding:0; margin:0 }` that
tied on specificity with CIBG's `.form-horizontal fieldset` and, injected later,
won — flattening the grey-box padding on "Mijn gegevens" and the registratie
wizard address step. Removed the override (kept the legend rule).
Audit cleanup (minimise atoms, converge or document near-duplicates):
- delete dead `app-card` (+ story; zero consumers, superseded by app-data-block)
and the unused `.app-info-box` utility
- review-section raw <h2> -> app-heading; registratie-wizard lone <dl> -> app-data-block
- keep application-link's raw <h3> (vendored `.applications li a h3` chain needs
the bare element) with an inline justification
- document the deliberate "don't merge these" verdicts in a new Convergence
decisions table in atomic-design.mdx; record the card removal in cibg-gaps.mdx
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
195 lines
6.7 KiB
SCSS
195 lines
6.7 KiB
SCSS
/* CIBG Huisstijl (a customized Bootstrap 5.2 build) is loaded as a plain <link> in
|
|
index.html (public/cibg-huisstijl/css/huisstijl.min.css) so its relative url(../fonts|
|
|
icons|images) references resolve at runtime.
|
|
|
|
Token bridge: the app's components reference a semantic `--rhc-*` token vocabulary
|
|
(316 refs, 54 tokens). Rather than rewrite every reference, we redefine those tokens
|
|
HERE onto CIBG/Bootstrap values (--bs-* where one exists, CIBG palette hex otherwise).
|
|
The names are now an internal alias set; the VALUES are CIBG. (styles.scss is exempt
|
|
from check:tokens, so palette hex is allowed in this one file.) */
|
|
:root {
|
|
/* — CIBG layout chrome colour (robijn under body.brand--cibg; blue fallback otherwise) — */
|
|
--rhc-color-layout: var(--ro-layout);
|
|
|
|
/* — semantic foreground/background/border — */
|
|
--rhc-color-foreground-default: var(--bs-body-color);
|
|
--rhc-color-foreground-subtle: #64748b; /* CIBG grey-3 */
|
|
--rhc-color-foreground-link: var(--ro-link-color); /* brand--cibg → hemelblauw-fixed */
|
|
--rhc-color-foreground-link-hover: var(--ro-link-active-color);
|
|
--rhc-color-foreground-on-primary: #fff;
|
|
--rhc-color-border-default: var(--bs-border-color);
|
|
--rhc-color-border-subtle: #e2e8f0;
|
|
--rhc-color-border-strong: #adb5bd;
|
|
--rhc-color-wit: #fff;
|
|
|
|
/* — greys — */
|
|
--rhc-color-cool-grey-100: #f8fafc;
|
|
--rhc-color-cool-grey-200: #f1f5f9;
|
|
--rhc-color-cool-grey-300: #e2e8f0;
|
|
--rhc-color-grijs-100: #f1f5f9;
|
|
--rhc-color-grijs-200: #e2e8f0;
|
|
--rhc-color-grijs-300: #cbd5e1;
|
|
--rhc-color-grijs-400: #94a3b8;
|
|
--rhc-color-grijs-700: #334155;
|
|
|
|
/* — blues (CIBG primary family) — */
|
|
--rhc-color-lintblauw-100: #e6eef3;
|
|
--rhc-color-lintblauw-500: var(--ro-brand-primary); /* #01689b */
|
|
--rhc-color-lintblauw-600: var(--ro-brand-primary-focus); /* #015782 */
|
|
--rhc-color-lintblauw-700: var(--ro-lintblauw); /* #154273 */
|
|
--rhc-color-hemelblauw-100: #d9ebf7; /* CIBG light-blue (info bg) */
|
|
--rhc-color-hemelblauw-500: var(--ro-hemelblauw); /* #007bc7 CIBG info blue */
|
|
--rhc-color-hemelblauw-700: #005a94;
|
|
|
|
/* — status colors (CIBG semantic, kleuren page) — */
|
|
--rhc-color-groen-300: #e1eddb; /* light-green */
|
|
--rhc-color-groen-500: #39870c; /* green */
|
|
--rhc-color-groen-700: #176e1b;
|
|
--rhc-color-rood-100: #f7d2dd; /* light-red */
|
|
--rhc-color-rood-300: #eda3b6;
|
|
--rhc-color-rood-500: var(--ro-brand-danger); /* #cc003d CIBG red */
|
|
--rhc-color-rood-600: #b30035;
|
|
--rhc-color-geel-100: #fff4dc; /* light-yellow */
|
|
--rhc-color-geel-600: #ffb612; /* yellow */
|
|
--rhc-color-oranje-500: #e17000;
|
|
|
|
/* — spacing scale (rem, Bootstrap-aligned) — */
|
|
--rhc-space-max-xs: 0.25rem;
|
|
--rhc-space-max-sm: 0.5rem;
|
|
--rhc-space-max-md: 1rem;
|
|
--rhc-space-max-lg: 1.5rem;
|
|
--rhc-space-max-xl: 2rem;
|
|
--rhc-space-max-2xl: 3rem;
|
|
--rhc-space-max-3xl: 4rem;
|
|
--rhc-space-max-4xl: 5rem;
|
|
--rhc-space-max-5xl: 6rem;
|
|
|
|
/* — border — */
|
|
--rhc-border-radius-sm: var(--bs-border-radius-sm);
|
|
--rhc-border-radius-md: var(--bs-border-radius);
|
|
--rhc-border-radius-round: 50%;
|
|
--rhc-border-width-sm: 1px;
|
|
--rhc-border-width-md: 2px;
|
|
--rhc-border-width-lg: 3px;
|
|
|
|
/* — typography — */
|
|
--rhc-text-font-size-sm: 0.875rem;
|
|
--rhc-text-font-size-lg: 1.25rem;
|
|
--rhc-text-font-weight-regular: 400;
|
|
--rhc-text-font-weight-semi-bold: 600;
|
|
--rhc-text-font-weight-bold: 700;
|
|
--rhc-text-line-height-sm: 1.4;
|
|
|
|
/* System-font stack (licensed Rijksoverheid fonts intentionally not bundled — POC). */
|
|
--bs-font-sans-serif:
|
|
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
/* Pages sit on white; cards/panels carry the subtle grey. */
|
|
body {
|
|
background: var(--rhc-color-wit);
|
|
color: var(--rhc-color-foreground-default);
|
|
}
|
|
|
|
/* App theme layer: a few app-specific measures RHC has no token for (content/form
|
|
widths), defined ONCE here and mapped onto RHC where possible. Components reference
|
|
these tokens instead of raw values. */
|
|
:root {
|
|
--app-content-max: 67rem; /* readable page column */
|
|
--app-form-narrow: 32rem; /* page-shell narrow variant */
|
|
--app-skip-link-offset: -999px; /* off-screen skip link */
|
|
|
|
/* Dev-only state inspector (debug-state.component.ts, isDevMode-gated, never in
|
|
prod): a dark code-editor palette kept deliberately OFF the CIBG design system
|
|
so it reads as a tool, not product chrome. Defined here (the one exempt file)
|
|
so the component itself stays colour-token-only. */
|
|
--app-devpanel-bg: #1e1e1e;
|
|
--app-devpanel-fg: #d4d4d4;
|
|
--app-devpanel-accent: #9cdcfe;
|
|
--app-devpanel-border: #444;
|
|
--app-devpanel-shadow: rgb(0 0 0 / 0.4);
|
|
}
|
|
|
|
/* App utility classes: centralise the repeated inline layout idioms so components stay
|
|
token-based and free of raw values. */
|
|
/* vertical rhythm between stacked blocks */
|
|
.app-stack > * + * {
|
|
margin-block-start: var(--rhc-space-max-xl);
|
|
}
|
|
.app-section {
|
|
margin-block-start: var(--rhc-space-max-2xl);
|
|
}
|
|
.app-text-subtle {
|
|
color: var(--rhc-color-foreground-subtle);
|
|
}
|
|
|
|
/* Route transitions (withViewTransitions): cross-fade the routed CONTENT only.
|
|
The chrome gets its own stable view-transition-name so it's lifted out of the
|
|
`root` snapshot and stays put while the content fades. */
|
|
app-site-header {
|
|
view-transition-name: site-header;
|
|
}
|
|
app-site-footer {
|
|
view-transition-name: site-footer;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
/* List-item enter/leave for lists that add/remove at runtime (aanvraag cards, upload
|
|
rows). Used via Angular's native `animate.enter`/`animate.leave` — no @angular/animations. */
|
|
@keyframes app-item-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes app-item-leave {
|
|
from {
|
|
opacity: 1;
|
|
max-block-size: 50rem;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-0.25rem);
|
|
max-block-size: 0;
|
|
margin-block: 0;
|
|
padding-block: 0;
|
|
}
|
|
}
|
|
.app-item-enter {
|
|
animation: app-item-enter 220ms ease both;
|
|
}
|
|
.app-item-leave {
|
|
display: block; /* collapse needs block formatting (host is inline/flex by default) */
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
/* ponytail: 50rem max-height hack; if an item is taller the collapse eases slightly late — measure height in JS then. */
|
|
animation: app-item-leave 260ms ease both;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-group(*),
|
|
::view-transition-old(*),
|
|
::view-transition-new(*) {
|
|
animation: none !important;
|
|
}
|
|
/* No animation → Angular removes the leaving node immediately (instant, no motion). */
|
|
.app-item-enter,
|
|
.app-item-leave {
|
|
animation: none;
|
|
}
|
|
}
|