eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format frontend, docs and skills with prettier; add .prettierignore

Browse Source 
One-time prettier --write so the new format:check CI gate starts green.
.prettierignore excludes generated (api-client.ts, documentation.json),
vendored (public/cibg-huisstijl), and backend (dotnet format owns it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
eho
2026-07-03 13:39:31 +02:00
co-authored by Claude Opus 4.8
parent 546097434d
commit e82309786d
176 changed files with 5067 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.scss
+72 -29
View File
@@ -13,8 +13,8 @@
/* — 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-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);
@@ -34,23 +34,23 @@
/* — blues (CIBG primary family) — */
--rhc-color-lintblauw-100: #e6eef3;
--rhc-color-lintblauw-500: var(--ro-brand-primary); /* #01689b */
--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-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-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-100: #f7d2dd; /* light-red */
--rhc-color-rood-300: #eda3b6;
--rhc-color-rood-500: var(--ro-brand-danger); /* #cc003d CIBG red */
--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-geel-100: #fff4dc; /* light-yellow */
--rhc-color-geel-600: #ffb612; /* yellow */
--rhc-color-oranje-500: #e17000;
/* — spacing scale (rem, Bootstrap-aligned) — */
@@ -81,20 +81,28 @@
--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;
--bs-font-sans-serif:
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html, body { margin: 0; min-height: 100%; }
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); }
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 */
--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
@@ -110,9 +118,15 @@ body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-defau
/* 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); }
.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);
}
/* Bordered info box (outline, no fill) — e.g. a "Vragen?" contact block. */
.app-info-box {
@@ -124,8 +138,12 @@ body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-defau
/* 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; }
app-site-header {
view-transition-name: site-header;
}
app-site-footer {
view-transition-name: site-footer;
}
::view-transition-old(root),
::view-transition-new(root) {
@@ -135,14 +153,34 @@ app-site-footer { view-transition-name: site-footer; }
/* 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-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; }
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-enter { animation: app-item-enter 220ms ease both; }
.app-item-leave {
display: block; /* collapse needs block formatting (host is inline/flex by default) */
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. */
@@ -152,7 +190,12 @@ app-site-footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
::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; }
.app-item-enter,
.app-item-leave {
animation: none;
}
}