➕ added denhaag theme

packages/next-templates/package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@fontsource/fira-sans": "5.0.12",
     "@fontsource/source-serif-pro": "5.0.8",
+    "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.357",
     "@next/eslint-plugin-next": "13.4.19",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.98",
     "@svgr/webpack": "8.1.0",

packages/next-templates/src/components/ExampleFooter/footer.css

@@ -10,18 +10,7 @@
   column-count: 1;
 }
 
-.example--footer-heading5 {
-  display: flex;
-  justify-content: column;
-}
-
-.utrecht-link-list-focus__item {
-  --utrecht-paragraph-color: white;
-}
-
-.utrecht-link-list__item {
-  --utrecht-paragraph-color: white;
-
+.denhaag-theme .utrecht-link-list__item {
   line-height: 2em;
 }
 
@@ -45,6 +34,15 @@
   margin-inline-start: 2.5em;
 }
 
-.voorbeeld-footer-block {
+.denhaag-theme .voorbeeld-footer-block {
   max-width: 50ch;
+  --utrecht-heading-2-color: var(--denhaag-color-ocher-3);
+}
+
+.denhaag-theme .example--footer-logo {
+  color: var(--denhaag-color-white);
+}
+
+.denhaag-theme .utrecht-page-footer__content {
+  --utrecht-focus-outline-color: var(--denhaag-color-ocher-3);
 }

packages/next-templates/src/components/ExampleHeader/header.css

@@ -16,6 +16,10 @@
   max-inline-size: var(--example-page-header-content-max-inline-size);
 }
 
+.denhaag-theme .example-page-header__content {
+  max-inline-size: calc(670px * 1.5);
+}
+
 .example--logo {
   text-align: center;
 }
@@ -40,6 +44,11 @@
   margin-inline-end: var(--voorbeeld-space-inline-dog);
   text-decoration-skip-ink: none;
 }
+
+.denhaag-theme .example--header-links {
+  margin-inline-end: 32px;
+}
+
 .example--header-user-icon {
   margin-inline-end: var(--voorbeeld-space-inline-ant);
 }
@@ -55,6 +64,7 @@
   cursor: pointer;
   display: none;
 }
+
 .example--header-burger-menu-button:focus-visible {
   border-radius: 3px;
   box-shadow: 0 0 0 2px var(--voorbeeld-color-white);

packages/next-templates/src/components/ExampleNavigation/Navigation.scss

@@ -98,3 +98,33 @@
 .example-nav-bar__item--end {
   justify-self: end;
 }
+
+.denhaag-theme {
+  .utrecht-breadcrumb-nav {
+    background: var(--denhaag-color-warmgrey-1);
+  }
+
+  .example-nav-bar {
+    display: flex;
+    justify-content: center;
+  }
+
+  .example-nav-bar__content {
+    max-inline-size: calc(670px * 1.5);
+  }
+
+  .example-nav-bar__link-list {
+    --utrecht-link-color: var(--denhaag-color-blue-3);
+    --utrecht-link-hover-color: var(--denhaag-color-blue-4);
+    --utrecht-link-focus-color: var(--denhaag-color-blue-4);
+  }
+
+  .example-nav-bar__link {
+    max-inline-size: 30ch;
+    margin-block: 16px;
+    margin-inline: 24px;
+    --utrecht-link-text-decoration: none;
+    --utrecht-link-hover-text-decoration: underline;
+    --utrecht-link-focus-text-decoration: underline;
+  }
+}

packages/next-templates/src/components/NavigationList/Navigationlist.css

@@ -5,11 +5,6 @@
   margin-block-start: 0;
 }
 
-.voorbeeld-navigation-list__item {
+.denhaag-theme .voorbeeld-navigation-list__item {
   line-height: 2em;
 }
-
-.voorbeeld-footer-link {
-  --utrecht-link-text-decoration-color: var(--voorbeeld-color-white);
-  --utrecht-link-hover-color: var(--voorbeeld-color-white);
-}

packages/next-templates/src/components/PageHeader.scss

@@ -15,3 +15,10 @@
   padding-block: var(--voorbeeld-space-block-mouse);
   max-inline-size: var(--example-page-header-content-max-inline-size);
 }
+
+.denhaag-theme {
+  .example-page-header__content {
+    max-inline-size: calc(670px * 1.5);
+    padding-block: 24px;
+  }
+}

packages/next-templates/src/components/VoorbeeldTheme.tsx

@@ -1,9 +1,8 @@
 import { PropsWithChildren } from 'react';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
+import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import '@/app/font';
 import './VoorbeeldTheme.scss';
 import '../app/globals.css';
 
-export const VoorbeeldTheme = ({ children }: PropsWithChildren<{}>) => (
-  <div className="voorbeeld-theme">{children}</div>
-);
+export const VoorbeeldTheme = ({ children }: PropsWithChildren<{}>) => <div className="denhaag-theme">{children}</div>;

packages/next-templates/src/components/wmebv/Footer/ExampleFooterWmebv.tsx

@@ -16,14 +16,13 @@ export const ExampleFooterWmebv = ({ ...props }: ExampleFooterWmebvProps) => (
           <Logo className="example--footer-logo" />
         </div>
         <div className="voorbeeld-footer-block utrecht-link-list__item">
-          <UtrechtHeading2>Contact</UtrechtHeading2>
+          <UtrechtHeading2 className="example-footer__heading-3">Contact</UtrechtHeading2>
           <Address>
             Bel <UtrechtLink href="tel:453453">453 453</UtrechtLink> (maandag tot en met vrijdag van 09.00 tot 17.00
             uur) of stuur een e-mail naar{' '}
             <UtrechtLink href="mailto:[email protected]">
               <UtrechtUrlData>[email protected]</UtrechtUrlData>
             </UtrechtLink>
-            {'.'}
           </Address>
         </div>
         <div className="voorbeeld-footer-block">