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:
257
public/cibg-huisstijl/scss/variables.scss
Normal file
257
public/cibg-huisstijl/scss/variables.scss
Normal file
@@ -0,0 +1,257 @@
|
||||
@use "sass:string";
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide Sass variables.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
);
|
||||
|
||||
/// Regular font family
|
||||
$text-font-stack: RijksSans, Calibri, sans-serif;
|
||||
|
||||
// Text color
|
||||
$text-color: #0f172a;
|
||||
$fieldset-meta: #617286; // Slighty changed from $grey-3 because of contrast
|
||||
|
||||
|
||||
// Brand color
|
||||
$brand-color: #01689b;
|
||||
$brand-color-2: #154273; // Active & hover
|
||||
$brand-contrast-color: #0E7C77; // groenish
|
||||
$header-base-color: $brand-color-2;
|
||||
|
||||
// Nieuwe kleurteinten
|
||||
$robijn: #cc005d;
|
||||
$mintgroen: #76d2b6;
|
||||
$paars: #42145f;
|
||||
|
||||
|
||||
// Grijstinten
|
||||
$white: #fff; // Background-color
|
||||
$grey-0: #f8fafc;
|
||||
$grey-1: #f1f5f9; // Fieldset | mainNav | stappenindicator not visited | tbody rows
|
||||
$grey-2: #e2e8f0; // thead bg | form toelichting bg
|
||||
$grey-3: #617286; // Visited links | Meta // Should be #64748b (not dark enough for usage on grey-1 background)
|
||||
$grey-4: #475569; // Table resoonsive labels
|
||||
$grey-5: #334155; // Table resoonsive labels
|
||||
$light-grey: #cccccc;
|
||||
$black: #000; // Text color
|
||||
|
||||
// Lintblauwtinten
|
||||
$lintblauw-30: #b8c6d5;
|
||||
|
||||
|
||||
$placeholder: #6f6d6d;
|
||||
|
||||
// Table responsive colors.
|
||||
$pro-odd-bg: #edeff5;
|
||||
$pro-even-bg: #fff;
|
||||
|
||||
// Waarschuwingskleuren
|
||||
$red: #d52b1e;
|
||||
$light-red: #f9dfdd;
|
||||
|
||||
$yellow: #ffb612; // warning | stappenindicator active
|
||||
$light-yellow: #fff4dc; // warning | stappenindicator visited
|
||||
$dark-yellow: #ffb612; // Todo: replace usage of variable
|
||||
|
||||
$green: #39870c;
|
||||
$light-green: #e1eddb;
|
||||
$dark-green: #176e1b;
|
||||
|
||||
$blue: #007bc7;
|
||||
$light-blue: #d9ebf7;
|
||||
|
||||
|
||||
// Stappenindicator kleuren
|
||||
$step-default-color: #f8f8f9;
|
||||
$step-current-color: #fada3c;
|
||||
$step-finished-color: $light-yellow;
|
||||
|
||||
|
||||
$shadow-1: rgba(0, 0, 0, .075);
|
||||
$shadow-2: rgba(102, 175, 233, .6);
|
||||
|
||||
// Input variabelen
|
||||
$input-padding-right: 70px;
|
||||
$input-focus-color: $black;
|
||||
$input-color: $black;
|
||||
$input-border-radius: 0;
|
||||
$input-height: 32px;
|
||||
$input-box-shadow: none;
|
||||
$input-focus-box-shadow: none;
|
||||
$input-focus-border-color: $brand-color;
|
||||
|
||||
// Button outline overrides
|
||||
$outline-color: #82befb;
|
||||
$btn-active-box-shadow: none;
|
||||
$btn-focus-box-shadow: none;
|
||||
$btn-focus-width: 0;
|
||||
$enable-shadows: false;
|
||||
$pagination-focus-box-shadow: none;
|
||||
|
||||
$btn-primary-outline-hover-bg: #e7f2f7;
|
||||
$btn-secondary-outline-hover-bg: #E9F8F6;
|
||||
$btn-danger-outline-hover-bg: #fbecf0;
|
||||
|
||||
|
||||
// Overschrijven van modal variabelen
|
||||
$modal-content-border-width: 0;
|
||||
$modal-content-border-radius: 2px;
|
||||
$modal-header-padding-x: 1.5rem;
|
||||
$modal-header-padding-y: 1.25rem;
|
||||
$modal-header-padding-bottom: 0;
|
||||
$modal-inner-padding: .5rem 1.5rem;
|
||||
$modal-footer-padding: .5rem 1.5rem 1.5rem;
|
||||
$modal-footer-margin-between: 0;
|
||||
$modal-footer-padding: .5rem 1.5rem 1.5rem 1.5rem;
|
||||
|
||||
//Dropdown
|
||||
$dropdown-border-radius: 0;
|
||||
$dropdown-padding-y: .325rem;
|
||||
$dropdown-item-padding-x: .875rem;
|
||||
$dropdown-item-padding-y: .275rem;
|
||||
$dropdown-link-active-bg: var(--ro-form-accent-color);
|
||||
$dropdown-link-active-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $brand-color;
|
||||
$dropdown-link-color: $black;
|
||||
|
||||
// Overschrijven van badge variabelen
|
||||
$primary: $brand-color;
|
||||
$success: $green;
|
||||
$danger: $red;
|
||||
|
||||
// Overschrijven tab variabelen
|
||||
$nav-tabs-border-color: $grey-2;
|
||||
$nav-tabs-border-radius: 0;
|
||||
$nav-tabs-link-active-color: $black;
|
||||
$nav-link-color: var(--ro-link-color);
|
||||
|
||||
// Progress bar variabelen
|
||||
$progress-bar-bg: $green;
|
||||
$progress-bg: $white;
|
||||
$progress-border-radius: 0;
|
||||
$progress-height: 6px;
|
||||
|
||||
// Table settings
|
||||
$table-border-color: $white;
|
||||
$table-group-separator-color: $white;
|
||||
$table-border-width: 1px;
|
||||
|
||||
// SSP table
|
||||
$ssp-table-border-color: $grey-2;
|
||||
$ssp-table-hover-bg: $grey-0;
|
||||
$ssp-table-accent-color: #01817c; //slight darker than brand-secondary
|
||||
$ssp-table-tag-border-color: #ddd;
|
||||
|
||||
// Data block
|
||||
$dt-color: $grey-3; // Term text color
|
||||
$dt-font-weight: 400;
|
||||
|
||||
// Pagination
|
||||
$pagination-active-color: $white;
|
||||
$pagination-active-bg: var(--ro-pagination-color);
|
||||
$pagination-color: var(--ro-pagination-color);
|
||||
$pagination-line-height: 1.2381em;
|
||||
$pagination-bg: $white;
|
||||
$pagination-border-width: 0;
|
||||
$pagination-font-size: 1.4rem;
|
||||
|
||||
$pagination-hover-bg: $white;
|
||||
$pagination-hover-color: var(--ro-pagination-color);
|
||||
|
||||
// Tooltip
|
||||
$tooltip-border-radius: 2px;
|
||||
$tooltip-bg: var(--ro-form-accent-color);
|
||||
|
||||
|
||||
// Button hover colors
|
||||
$btn-outline-remove-bg-hover: #fff8f8;
|
||||
|
||||
$hr-height: 3;
|
||||
$hr-opacity: 1;
|
||||
|
||||
// Reset bootstrap's new min heigh for form-check
|
||||
$form-check-min-height: initial;
|
||||
|
||||
// Set pagination focus color
|
||||
$pagination-focus-bg: $white;
|
||||
|
||||
// Custom line height for input selects to match 4.6.1 style
|
||||
$form-select-bg-position: right .25rem center;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-font-size: 1rem;
|
||||
$breadcrumb-divider: string.quote("\EA1C");
|
||||
$breadcrumb-divider-font-size: .8rem;
|
||||
$breadcrumb-divider-font-family: 'CIBG Icons', Calibri, sans-serif;
|
||||
$breadcrumb-divider-pt: 0.225rem;
|
||||
$breadcrumb-margin-bottom: 0;
|
||||
$breadcrumb-active-color: $grey-3;
|
||||
|
||||
$card-bg: $grey-1;
|
||||
$card-border-width: 0;
|
||||
$card-border-radius: 0;
|
||||
$card-cap-bg: $grey-1;
|
||||
$card-cap-padding-y: 1.5rem;
|
||||
$card-spacer-x: 1.5rem;
|
||||
$card-spacer-y: 1rem;
|
||||
$card-group-margin: 1rem;
|
||||
$card-group-gap: 1rem;
|
||||
|
||||
// Lists
|
||||
$list-item-gutter: 3px;
|
||||
|
||||
|
||||
// Header border
|
||||
$nav-border-bottom: #ddd;
|
||||
|
||||
// Timeline
|
||||
$timeline-done: var(--ro-timeline-color);
|
||||
$timeline-background-color: $light-grey;
|
||||
|
||||
|
||||
// RO styling update opt-in styling colors
|
||||
$feedback-error-bg: #f9dfdd;
|
||||
$feedback-error-icon: #d52b1e;
|
||||
|
||||
$feedback-warning-bg: #fff4dc;
|
||||
$feedback-warning-icon: #ffb612;
|
||||
|
||||
$feedback-success-bg: #e1eddb;
|
||||
$feedback-success-icon: #39870c;
|
||||
|
||||
$feedback-info-bg: #d9ebf7;
|
||||
$feedback-info-icon: #007bc7;
|
||||
|
||||
$checkbox-border-color: #444444;
|
||||
|
||||
// User opinion service
|
||||
$feedback-service-cta-background: #A90061;
|
||||
|
||||
// Tooltip
|
||||
$tooltip-opacity: 1;
|
||||
|
||||
// Backoffice accent colors
|
||||
$backoffice-yellow: #ffb612;
|
||||
$backoffice-accent: #a90061;
|
||||
|
||||
//Typography
|
||||
$headings-font-weight: 600;
|
||||
|
||||
//Default font-weight bold weight
|
||||
$font-weight-bold: 600;
|
||||
|
||||
Reference in New Issue
Block a user