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

11
public/cibg-huisstijl/images/beeldmerk-large.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

55
public/cibg-huisstijl/images/edit.svg Normal file
View File

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="509.337px" height="509.338px" viewBox="0 0 509.337 509.338" style="enable-background:new 0 0 509.337 509.338;"
xml:space="preserve">
<g>
<g>
<path d="M396.283,310.907c-3.809-1.52-7.143-0.853-9.996,1.998l-18.274,18.274c-1.711,1.708-2.573,3.806-2.573,6.276v35.978
c0,12.565-4.463,23.314-13.408,32.264c-8.952,8.945-19.701,13.418-32.264,13.418H82.224c-12.562,0-23.317-4.473-32.264-13.418
c-8.947-8.949-13.418-19.698-13.418-32.264V135.895c0-12.563,4.471-23.317,13.418-32.265c8.947-8.945,19.702-13.418,32.264-13.418
H319.77c4.186,0,8.47,0.571,12.847,1.714c3.433,1.141,6.472,0.381,9.134-2.284l13.986-13.99c2.286-2.281,3.138-5.043,2.57-8.278
c-0.571-3.044-2.286-5.234-5.141-6.565c-10.28-4.752-21.412-7.139-33.403-7.139H82.224c-22.648,0-42.017,8.042-58.102,24.126
C8.042,93.882,0,113.246,0,135.897V373.44c0,22.647,8.042,42.014,24.123,58.098c16.084,16.088,35.454,24.13,58.102,24.13h237.539
c22.647,0,42.014-8.042,58.098-24.13c16.088-16.084,24.13-35.45,24.13-58.098v-54.245
C401.991,315.191,400.084,312.434,396.283,310.907z"/>
<path d="M182.721,300.354v82.221h82.229L456.81,190.716l-82.228-82.225L182.721,300.354z M253.524,355.169L253.524,355.169
l-15.99-0.007v-27.401h-27.406v-15.984l33.12-33.12l43.396,43.4L253.524,355.169z M378.861,159.023l-99.931,99.928
c-3.234,3.241-6.376,3.334-9.421,0.288c-3.043-3.046-2.95-6.186,0.287-9.419l99.931-99.929c3.233-3.239,6.368-3.333,9.421-0.287
S382.091,155.789,378.861,159.023z"/>
<path d="M501.346,107.348L457.95,63.952c-5.328-5.33-11.796-7.995-19.413-7.995c-7.615,0-14.086,2.665-19.411,7.995
l-26.269,26.263l82.228,82.229l26.262-26.268c5.328-5.327,7.991-11.8,7.991-19.414S506.674,112.678,501.346,107.348z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

6
public/cibg-huisstijl/images/fallback-beeldmerk.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/cibg-huisstijl/images/favicon-32-robijn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 859 B

BIN
public/cibg-huisstijl/images/favicon-64-robijn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/cibg-huisstijl/images/favicon152_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/cibg-huisstijl/images/favicon32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/cibg-huisstijl/images/favicon64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

31
public/cibg-huisstijl/images/icon-calendar.svg Normal file
View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 19 20" style="enable-background:new 0 0 19 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#07699C;}
.st1{fill:#428EB4;}
.st2{fill:#CD1F3F;}
</style>
<rect class="st0" width="19" height="4"/>
<rect y="5" class="st1" width="3" height="3"/>
<rect x="4" y="5" class="st1" width="3" height="3"/>
<rect x="8" y="5" class="st1" width="3" height="3"/>
<rect x="12" y="5" class="st1" width="3" height="3"/>
<rect x="16" y="5" class="st1" width="3" height="3"/>
<rect x="16" y="9" class="st1" width="3" height="3"/>
<rect x="12" y="9" class="st1" width="3" height="3"/>
<rect x="8" y="9" class="st1" width="3" height="3"/>
<rect y="9" class="st1" width="3" height="3"/>
<rect x="4" y="9" class="st2" width="3" height="3"/>
<rect y="13" class="st1" width="3" height="3"/>
<rect x="4" y="13" class="st1" width="3" height="3"/>
<rect x="8" y="13" class="st1" width="3" height="3"/>
<rect x="12" y="13" class="st1" width="3" height="3"/>
<rect x="16" y="13" class="st1" width="3" height="3"/>
<rect x="16" y="17" class="st1" width="3" height="3"/>
<rect x="12" y="17" class="st1" width="3" height="3"/>
<rect x="8" y="17" class="st1" width="3" height="3"/>
<rect x="4" y="17" class="st1" width="3" height="3"/>
<rect y="17" class="st1" width="3" height="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/cibg-huisstijl/images/icon-pdf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 B

63
public/cibg-huisstijl/images/logo-cibg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

41
public/cibg-huisstijl/images/open-folder.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 536.461 536.46" style="enable-background:new 0 0 536.461 536.46;" xml:space="preserve">
<g>
<g>
<path d="M144.752,263.52c19.603-9.038,38.354-13.559,56.243-13.559h237.548v-45.683c0-17.511-6.283-32.555-18.85-45.118 c-12.565-12.562-27.596-18.842-45.11-18.842H219.266v-9.136c0-17.511-6.28-32.548-18.842-45.107 c-12.563-12.562-27.6-18.846-45.111-18.846h-91.36c-17.511,0-32.548,6.283-45.111,18.846C6.279,98.635,0,113.672,0,131.183 v274.084c0,0.764,0.049,1.955,0.144,3.576c0.094,1.615,0.144,2.807,0.144,3.566l1.426-1.704L97.93,297.637 C109.54,283.931,125.148,272.556,144.752,263.52z" fill="#FFFFFF"/>
<path d="M528.898,290.214c-5.041-2.478-10.797-3.72-17.272-3.72H200.995c-12.562,0-26.219,3.381-40.968,10.14 c-14.75,6.766-26.219,14.986-34.401,24.701l-95.93,113.059c-5.902,6.662-8.853,12.945-8.853,18.849 c0,5.708,2.523,9.802,7.566,12.272c5.043,2.478,10.8,3.716,17.273,3.716h310.64c12.56,0,26.21-3.381,40.963-10.136 c14.75-6.756,26.214-14.989,34.399-24.701l95.931-113.059c5.899-6.663,8.846-12.939,8.846-18.849 C536.465,296.779,533.946,292.689,528.898,290.214z" fill="#FFFFFF"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
public/cibg-huisstijl/images/sort-asc.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 576"><defs><style>.cls-1{fill:#000;}</style></defs><title>sort-asc-2</title><path class="cls-1" d="M818,621q0,26-19,45t-45,19H-142q-26,0-45-19t-19-45q0-26,19-45L261,128q19-19,45-19t45,19L799,576Q818,595,818,621Z" transform="translate(206 -109)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

1
public/cibg-huisstijl/images/sort-desc.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 576"><defs><style>.cls-1{fill:#000;}</style></defs><title>sort-desc-2</title><path class="cls-1" d="M818,172q0,26-19,45L351,665q-19,19-45,19t-45-19L-187,217q-19-19-19-45t19-45q19-19,45-19H754q26,0,45,19T818,172Z" transform="translate(206 -108)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

1
public/cibg-huisstijl/images/sort.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1408"><defs><style>.cls-1{fill:#010101;}</style></defs><title>sort-2</title><path class="cls-1" d="M818,588q0,26-19,45L351,1081q-19,19-45,19t-45-19L-187,633q-19-19-19-45t19-45q19-19,45-19H754q26,0,45,19T818,588Zm0-384q0,26-19,45t-45,19H-142q-26,0-45-19t-19-45q0-26,19-45L261-289q19-19,45-19t45,19L799,159Q818,178,818,204Z" transform="translate(206 308)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

63
public/cibg-huisstijl/images/trash.svg Normal file
View File

@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="438.529px" height="438.529px" viewBox="0 0 438.529 438.529" style="enable-background:new 0 0 438.529 438.529;"
xml:space="preserve">
<g>
<g>
<path d="M417.689,75.654c-1.711-1.709-3.901-2.568-6.563-2.568h-88.224L302.917,25.41c-2.854-7.044-7.994-13.04-15.413-17.989
C280.078,2.473,272.556,0,264.945,0h-91.363c-7.611,0-15.131,2.473-22.554,7.421c-7.424,4.949-12.563,10.944-15.419,17.989
l-19.985,47.676h-88.22c-2.667,0-4.853,0.859-6.567,2.568c-1.709,1.713-2.568,3.903-2.568,6.567v18.274
c0,2.664,0.855,4.854,2.568,6.564c1.714,1.712,3.904,2.568,6.567,2.568h27.406v271.8c0,15.803,4.473,29.266,13.418,40.398
c8.947,11.139,19.701,16.703,32.264,16.703h237.542c12.566,0,23.319-5.756,32.265-17.268c8.945-11.52,13.415-25.174,13.415-40.971
V109.627h27.411c2.662,0,4.853-0.856,6.563-2.568c1.708-1.709,2.57-3.9,2.57-6.564V82.221
C420.26,79.557,419.397,77.367,417.689,75.654z M169.301,39.678c1.331-1.712,2.95-2.762,4.853-3.14h90.504
c1.903,0.381,3.525,1.43,4.854,3.14l13.709,33.404H155.311L169.301,39.678z M347.173,380.291c0,4.186-0.664,8.042-1.999,11.561
c-1.334,3.518-2.717,6.088-4.141,7.706c-1.431,1.622-2.423,2.427-2.998,2.427H100.493c-0.571,0-1.565-0.805-2.996-2.427
c-1.429-1.618-2.81-4.188-4.143-7.706c-1.331-3.519-1.997-7.379-1.997-11.561V109.627h255.815V380.291z"/>
<path d="M137.04,347.172h18.271c2.667,0,4.858-0.855,6.567-2.567c1.709-1.718,2.568-3.901,2.568-6.57V173.581
c0-2.663-0.859-4.853-2.568-6.567c-1.714-1.709-3.899-2.565-6.567-2.565H137.04c-2.667,0-4.854,0.855-6.567,2.565
c-1.711,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C132.186,346.316,134.373,347.172,137.04,347.172z"
/>
<path d="M210.129,347.172h18.271c2.666,0,4.856-0.855,6.564-2.567c1.718-1.718,2.569-3.901,2.569-6.57V173.581
c0-2.663-0.852-4.853-2.569-6.567c-1.708-1.709-3.898-2.565-6.564-2.565h-18.271c-2.664,0-4.854,0.855-6.567,2.565
c-1.714,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C205.274,346.316,207.465,347.172,210.129,347.172z
"/>
<path d="M283.22,347.172h18.268c2.669,0,4.859-0.855,6.57-2.567c1.711-1.718,2.562-3.901,2.562-6.57V173.581
c0-2.663-0.852-4.853-2.562-6.567c-1.711-1.709-3.901-2.565-6.57-2.565H283.22c-2.67,0-4.853,0.855-6.571,2.565
c-1.711,1.714-2.566,3.904-2.566,6.567v164.454c0,2.669,0.855,4.853,2.566,6.57C278.367,346.316,280.55,347.172,283.22,347.172z"
/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB