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

feat(design): re-theme to CIBG Huisstijl (Bootstrap 5.2), replacing RHC/Utrecht

Browse Source 
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:
Edwin van den Houdt
2026-07-02 12:32:50 +02:00
parent 180c08d4ee
commit b443f1fc04
74 changed files with 4286 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
public/cibg-huisstijl/css/components/vragenlijst.css Normal file
View File

@@ -0,0 +1,99 @@
/*! CIBG Huisstijl 3.22.0 */
.vragenlijst .form-horizontal .form-group .col-control {
padding-right: 0.833em;
}
.vragenlijst .form-horizontal .form-group .col-form-label {
font-size: 1.1em;
font-weight: 600;
}
.vragenlijst .conclusion {
border: 1px solid #cccccc;
padding: 1em;
}
.vragenlijst .conclusion .feedback.disclaimer {
font-size: 0.8em;
margin-bottom: 0;
margin-top: 1.5em;
}
.vragenlijst .answers-summary {
background-color: #f1f5f9;
margin-bottom: 0.75em;
padding: 0.75em;
}
.vragenlijst .answers-summary .edit-link {
font-size: 0.85em;
line-height: 1.5em;
}
.vragenlijst .answers-summary .row {
border-bottom: 1px solid #f1f5f9;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
.vragenlijst .answers-summary .row:last-of-type {
border-bottom: 0;
}
.vragenlijst .answers-summary .block-wrapper {
background-color: #fff;
margin-bottom: 0.75em;
padding: 0.25em 1.75em 0.5em;
}
.vragenlijst .answers-summary .block-wrapper:last-of-type {
margin-bottom: 0;
}
.vragenlijst .answers-summary .block-wrapper dt,
.vragenlijst .answers-summary .block-wrapper dd {
padding: 6px 12px 6px 0;
}
.vragenlijst .answers-summary .block-wrapper dt:first-of-type,
.vragenlijst .answers-summary .block-wrapper dd:first-of-type {
padding-top: 0;
}
.vragenlijst .answers-summary .block-wrapper dt:last-of-type,
.vragenlijst .answers-summary .block-wrapper dd:last-of-type {
padding-bottom: 0;
}
.vragenlijst .answers-summary .block-wrapper dd {
line-height: 1.5em;
margin-bottom: 0;
}
.vragenlijst .answers-summary .block-wrapper dt {
color: #617286;
font-weight: normal;
padding-right: 5em;
}
.vragenlijst .progress {
border: 1px solid #f1f5f9;
}
.vragenlijst .progress .progress-bar {
background-color: #01689b;
}
.vragenlijst .progress .w10 {
width: 10%;
}
.vragenlijst .progress .w20 {
width: 20%;
}
.vragenlijst .progress .w30 {
width: 30%;
}
.vragenlijst .progress .w40 {
width: 40%;
}
.vragenlijst .progress .w50 {
width: 50%;
}
.vragenlijst .progress .w60 {
width: 60%;
}
.vragenlijst .progress .w70 {
width: 70%;
}
.vragenlijst .progress .w80 {
width: 80%;
}
.vragenlijst .progress .w90 {
width: 90%;
}
.vragenlijst .progress .w100 {
width: 100%;
}

1
public/cibg-huisstijl/css/components/vragenlijst.min.css vendored Normal file
View File

@@ -0,0 +1 @@
/*! CIBG Huisstijl 3.22.0 */.vragenlijst .form-horizontal .form-group .col-control{padding-right:.833em}.vragenlijst .form-horizontal .form-group .col-form-label{font-size:1.1em;font-weight:600}.vragenlijst .conclusion{border:1px solid #ccc;padding:1em}.vragenlijst .conclusion .feedback.disclaimer{font-size:.8em;margin-bottom:0;margin-top:1.5em}.vragenlijst .answers-summary{background-color:#f1f5f9;margin-bottom:.75em;padding:.75em}.vragenlijst .answers-summary .edit-link{font-size:.85em;line-height:1.5em}.vragenlijst .answers-summary .row{border-bottom:1px solid #f1f5f9;padding-bottom:.5em;padding-top:.5em}.vragenlijst .answers-summary .row:last-of-type{border-bottom:0}.vragenlijst .answers-summary .block-wrapper{background-color:#fff;margin-bottom:.75em;padding:.25em 1.75em .5em}.vragenlijst .answers-summary .block-wrapper:last-of-type{margin-bottom:0}.vragenlijst .answers-summary .block-wrapper dd,.vragenlijst .answers-summary .block-wrapper dt{padding:6px 12px 6px 0}.vragenlijst .answers-summary .block-wrapper dd:first-of-type,.vragenlijst .answers-summary .block-wrapper dt:first-of-type{padding-top:0}.vragenlijst .answers-summary .block-wrapper dd:last-of-type,.vragenlijst .answers-summary .block-wrapper dt:last-of-type{padding-bottom:0}.vragenlijst .answers-summary .block-wrapper dd{line-height:1.5em;margin-bottom:0}.vragenlijst .answers-summary .block-wrapper dt{color:#617286;font-weight:400;padding-right:5em}.vragenlijst .progress{border:1px solid #f1f5f9}.vragenlijst .progress .progress-bar{background-color:#01689b}.vragenlijst .progress .w10{width:10%}.vragenlijst .progress .w20{width:20%}.vragenlijst .progress .w30{width:30%}.vragenlijst .progress .w40{width:40%}.vragenlijst .progress .w50{width:50%}.vragenlijst .progress .w60{width:60%}.vragenlijst .progress .w70{width:70%}.vragenlijst .progress .w80{width:80%}.vragenlijst .progress .w90{width:90%}.vragenlijst .progress .w100{width:100%}