Skip to content

Commit 7300554

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
feat(PageHeader): inverse kleurvariant (#151)
- `colorScheme` prop: 'default' | 'inverse' - `.dsn-page-header--inverse` modifier: accent-1-inverse achtergronden op navbar, compact balk en zoekpaneel; masthead blijft neutraal - Logo-kleuren automatisch omgedraaid via CSS custom property overrides - Menu-items en subtle buttons wit op inverse achtergrond via context-gebonden token-overrides (--dsn-menu-item-color, --dsn-button-subtle-color) - Orthogonaal modifier: combineerbaar met layout="compact" - 2 nieuwe Storybook stories: Inverse color scheme, Inverse compact layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent cc50245 commit 7300554

3 files changed

Lines changed: 163 additions & 0 deletions

File tree

‎packages/components-html/src/page-header/page-header.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,3 +307,111 @@
307307
--dsn-text-input-padding-block-start: var(--dsn-space-block-md);
308308
--dsn-text-input-padding-block-end: var(--dsn-space-block-md);
309309
}
310+
311+
/* =============================================================================
312+
Inverse kleurvariant — accent-1-inverse achtergrond voor prominente branding
313+
Navbar + compact bar: accent-1-inverse.bg-default
314+
Zoekpaneel: accent-1-inverse.bg-document (iets donkerder voor visuele scheiding)
315+
Masthead: ongewijzigd (neutral.bg-document)
316+
Logo-kleuren passen zich automatisch aan via CSS custom property overrides.
317+
============================================================================= */
318+
319+
.dsn-page-header--inverse {
320+
/* Small viewport: header-balk en border krijgen de inverse achtergrondkleur */
321+
--dsn-page-header-background-color: var(
322+
--dsn-color-accent-1-inverse-bg-default
323+
);
324+
--dsn-page-header-border-block-end-color: var(
325+
--dsn-color-accent-1-inverse-bg-default
326+
);
327+
/* Navbar (large default layout) */
328+
--dsn-page-header-navbar-background-color: var(
329+
--dsn-color-accent-1-inverse-bg-default
330+
);
331+
/* Zoekpaneel: bg-document is donkerder dan bg-default — visuele scheiding */
332+
--dsn-page-header-search-panel-background-color: var(
333+
--dsn-color-accent-1-inverse-bg-document
334+
);
335+
/* Compact layout balk */
336+
--dsn-page-header-compact-background-color: var(
337+
--dsn-color-accent-1-inverse-bg-default
338+
);
339+
/* Logo: primaire kleur en label omdraaien voor donkere achtergrond */
340+
--dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-color-default);
341+
--dsn-logo-color-label: var(--dsn-color-accent-1-inverse-bg-default);
342+
}
343+
344+
/* Masthead blijft op neutrale achtergrond — logo kleuren resetten naar standaard */
345+
.dsn-page-header--inverse .dsn-page-header__masthead {
346+
--dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-bg-default);
347+
--dsn-logo-color-label: var(--dsn-color-neutral-bg-document);
348+
}
349+
350+
/* Buttons in de header-balk (small viewport: menu + zoekknop) op inverse achtergrond */
351+
.dsn-page-header--inverse .dsn-page-header__small-layout {
352+
--dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
353+
--dsn-button-subtle-hover-background-color: var(
354+
--dsn-color-accent-1-inverse-bg-hover
355+
);
356+
--dsn-button-subtle-hover-color: var(
357+
--dsn-color-accent-1-inverse-color-hover
358+
);
359+
--dsn-button-subtle-active-background-color: var(
360+
--dsn-color-accent-1-inverse-bg-active
361+
);
362+
--dsn-button-subtle-active-color: var(
363+
--dsn-color-accent-1-inverse-color-active
364+
);
365+
}
366+
367+
/* Menu-items + expand-buttons + zoekknop in de inverse navbar en compacte navigatie */
368+
.dsn-page-header--inverse .dsn-page-header__navbar,
369+
.dsn-page-header--inverse .dsn-page-header__compact-primary-nav,
370+
.dsn-page-header--inverse .dsn-page-header__compact-secondary {
371+
/* Menu-item kleuren: tekst en interactiestaten */
372+
--dsn-menu-item-color: var(--dsn-color-accent-1-inverse-color-default);
373+
--dsn-menu-item-hover-color: var(--dsn-color-accent-1-inverse-color-hover);
374+
--dsn-menu-item-hover-background-color: var(
375+
--dsn-color-accent-1-inverse-bg-hover
376+
);
377+
--dsn-menu-item-active-color: var(--dsn-color-accent-1-inverse-color-active);
378+
--dsn-menu-item-active-background-color: var(
379+
--dsn-color-accent-1-inverse-bg-active
380+
);
381+
/* MenuLink current (actieve pagina) */
382+
--dsn-menu-link-current-color: var(
383+
--dsn-color-accent-1-inverse-color-default
384+
);
385+
--dsn-menu-link-current-background-color: var(
386+
--dsn-color-accent-1-inverse-bg-active
387+
);
388+
--dsn-menu-link-current-indicator-color: var(
389+
--dsn-color-accent-1-inverse-color-default
390+
);
391+
--dsn-menu-link-current-hover-color: var(
392+
--dsn-color-accent-1-inverse-color-hover
393+
);
394+
--dsn-menu-link-current-hover-background-color: var(
395+
--dsn-color-accent-1-inverse-bg-active
396+
);
397+
--dsn-menu-link-current-active-color: var(
398+
--dsn-color-accent-1-inverse-color-active
399+
);
400+
--dsn-menu-link-current-active-background-color: var(
401+
--dsn-color-accent-1-inverse-bg-active
402+
);
403+
/* Subtle buttons: uitklapknop in MenuLink + icon-only zoekknop */
404+
--dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
405+
--dsn-button-subtle-hover-background-color: var(
406+
--dsn-color-accent-1-inverse-bg-hover
407+
);
408+
--dsn-button-subtle-hover-color: var(
409+
--dsn-color-accent-1-inverse-color-hover
410+
);
411+
--dsn-button-subtle-active-background-color: var(
412+
--dsn-color-accent-1-inverse-bg-active
413+
);
414+
--dsn-button-subtle-active-color: var(
415+
--dsn-color-accent-1-inverse-color-active
416+
);
417+
}

‎packages/components-react/src/PageHeader/PageHeader.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import './PageHeader.css';
99

1010
export type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';
1111
export type PageHeaderLayout = 'default' | 'compact';
12+
export type PageHeaderColorScheme = 'default' | 'inverse';
1213

1314
export interface PageHeaderProps extends Omit<
1415
React.HTMLAttributes<HTMLElement>,
@@ -41,6 +42,16 @@ export interface PageHeaderProps extends Omit<
4142
*/
4243
layout?: PageHeaderLayout;
4344

45+
/**
46+
* Kleurschema van de header.
47+
* - `default`: neutrale achtergrond met accent-1 navbar
48+
* - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk
49+
* voor prominente branding. Het masthead blijft altijd neutraal.
50+
* Logo-kleuren passen zich automatisch aan via CSS context overrides.
51+
* @default 'default'
52+
*/
53+
colorScheme?: PageHeaderColorScheme;
54+
4455
/**
4556
* Initiële open-staat van het zoekpaneel (small viewport).
4657
* Handig voor Storybook en tests — het paneel kan daarna nog steeds
@@ -141,6 +152,7 @@ export const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
141152
logoSlot,
142153
sticky = 'none',
143154
layout = 'default',
155+
colorScheme = 'default',
144156
initialSearchOpen = false,
145157
primaryNavigation,
146158
primaryNavigationLarge,
@@ -254,6 +266,7 @@ export const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
254266
sticky === 'sticky' && 'dsn-page-header--sticky',
255267
sticky === 'auto-hide' && 'dsn-page-header--auto-hide',
256268
layout === 'compact' && 'dsn-page-header--compact',
269+
colorScheme === 'inverse' && 'dsn-page-header--inverse',
257270
className
258271
);
259272

‎packages/storybook/src/PageHeader.stories.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,11 @@ const meta: Meta<typeof PageHeader> = {
311311
options: ['default', 'compact'],
312312
table: { category: 'Gedrag' },
313313
},
314+
colorScheme: {
315+
control: 'select',
316+
options: ['default', 'inverse'],
317+
table: { category: 'Gedrag' },
318+
},
314319
initialSearchOpen: {
315320
control: 'boolean',
316321
table: { category: 'Gedrag' },
@@ -489,6 +494,43 @@ export const CompactLayout: Story = {
489494
},
490495
};
491496

497+
// =============================================================================
498+
// INVERSE KLEURVARIANT
499+
// =============================================================================
500+
501+
export const InverseColorScheme: Story = {
502+
name: 'Inverse color scheme',
503+
args: {
504+
colorScheme: 'inverse',
505+
},
506+
parameters: {
507+
viewport: { defaultViewport: 'large' },
508+
docs: {
509+
description: {
510+
story:
511+
'De inverse kleurvariant (`colorScheme="inverse"`) gebruikt `accent-1-inverse` achtergronden op de navbar en het zoekpaneel voor prominente branding. Het masthead blijft neutraal. Het logo past zijn kleuren automatisch aan via CSS context overrides.',
512+
},
513+
},
514+
},
515+
};
516+
517+
export const InverseCompactLayout: Story = {
518+
name: 'Inverse compact layout',
519+
args: {
520+
layout: 'compact',
521+
colorScheme: 'inverse',
522+
},
523+
parameters: {
524+
viewport: { defaultViewport: 'large' },
525+
docs: {
526+
description: {
527+
story:
528+
'Combinatie van `layout="compact"` en `colorScheme="inverse"`: de compacte balk (logo, primaire navigatie, servicemenu) heeft een `accent-1-inverse` achtergrond. Het zoekpaneel gebruikt `accent-1-inverse.bg-document` voor visuele scheiding.',
529+
},
530+
},
531+
},
532+
};
533+
492534
// =============================================================================
493535
// RTL
494536
// =============================================================================

0 commit comments

Comments
 (0)