@conduction/theme 1.0.41 → 1.0.43

package/municipalities/dimpact-design-tokens/src/component/conduction/navigation.tokens.json

@@ -4,11 +4,31 @@
       "top-nav": {
         "color": { "value": "{dimpact.color.blue.24}" },
         "background-color": { "value": "{dimpact.color.white.100}" },
-        "background-color-hover": { "value": "{dimpact.color.pink.62}" },
-        "background-color-active": { "value": "{dimpact.color.pink.62}" },
-        "box-shadow-active": { "value": "" },
-        "dropdown-border-radius": { "value": "{dimpact.size.md}" },
-
+        "hover": {
+          "color": { "value": "{dimpact.color.white.100}" },
+          "background-color": { "value": "{dimpact.color.pink.62}" },
+          "box-shadow": {}
+        },
+        "current": {
+          "color": { "value": "{dimpact.color.white.100}" },
+          "background-color": { "value": "{dimpact.color.pink.62}" },
+          "box-shadow": { "value": "" },
+          "mobile": {
+            "box-shadow": { "value": "" }
+          }
+        },
+        "dropdown": {
+          "color": {},
+          "background-color": {},
+          "border-width": {},
+          "border-style": {},
+          "border-color": {},
+          "hover": {
+            "color": {},
+            "background-color": {},
+            "box-shadow": {}
+          }
+        },
         "item": {
           "padding": { "value": "18px" }
         },
@@ -22,8 +42,15 @@
       "top-nav": {
         "color": { "value": "{dimpact.color.blue.24}" },
         "background-color": { "value": "transparent" },
-        "background-color-hover": { "value": "{dimpact.color.grey.93}" },
-        "background-color-active": { "value": "unset" },
+        "hover": {
+          "color": { "value": "{dimpact.color.white.100}" },
+          "background-color": { "value": "{dimpact.color.pink.62}" }
+        },
+        "current": {
+          "color": { "value": "{dimpact.color.white.100}" },
+          "background-color": { "value": "{dimpact.color.pink.62}" },
+          "box-shadow": { "value": "" }
+        },
         "font-size": { "value": "{dimpact.font-size.md}" },
         "font-weight": { "value": "400" },
         "item": {

package/municipalities/dimpact-design-tokens/src/component/utrecht/breadcrumb.tokens.json

@@ -1,6 +1,6 @@
 {
   "utrecht": {
-    "breadcrumb": {
+    "breadcrumb-nav": {
       "block-size": {},
       "font-family": { "value": "{utrecht.document.font-family}" },
       "font-size": {},
@@ -24,9 +24,9 @@
         }
       },
       "separator": {
+        "color": { "value": "{dimpact.color.primary}" },
         "inline-size": {},
         "icon": {
-          "color": { "value": "{dimpact.color.black.0}" },
           "size": { "value": "{dimpact.font-size.sm}" }
         }
       }

package/municipalities/dimpact-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json

@@ -1,7 +1,8 @@
 {
   "utrecht": {
-    "breadcrumb": {
-      "background-color": { "value": "{dimpact.color.white.100}" },
+    "breadcrumb-nav": {
+      "background-color": {},
+      "border-radius": {},
       "padding-inline-start": { "value": "0" },
       "padding-inline-end": { "value": "0" },
       "padding-block-start": { "value": "12px" },

package/municipalities/dimpact-design-tokens/src/component/utrecht/page-header.tokens.json

@@ -2,7 +2,7 @@
   "utrecht": {
     "page-header": {
       "background-color": { "value": "{dimpact.color.light-blue.53}" },
-      "color": { "value": "{dimpact.color.white.100}" },
+      "color": { "value": "{dimpact.color.primary}" },
       "padding-block-start": { "value": "{dimpact.size.sm}" },
       "padding-block-end": { "value": "{dimpact.size.sm}" }
     }

package/municipalities/dimpact-design-tokens/src/component/utrecht/separator.tokens.json

@@ -0,0 +1,10 @@
+{
+  "utrecht": {
+    "separator": {
+      "color": { "value": "{dimpact.color.grey.84}" },
+      "block-size": { "value": "{dimpact.size.4xs}" },
+      "margin-block-end": { "value": "0px" },
+      "margin-block-start": { "value": "0px" }
+    }
+  }
+}

package/municipalities/dinkelland-design-tokens/dist/design-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 28 Sep 2023 18:53:23 GMT
+ * Generated on Wed, 04 Oct 2023 14:27:05 GMT
  */
 
 .dinkelland-theme {
@@ -44,8 +44,24 @@
   --conduction-pagination-container-padding-inline-end: 0px;
   --conduction-pagination-container-padding-inline-start: 0px;
   --conduction-pagination-container-background-color: unset;
+  --conduction-secondary-top-nav-padding-block-start: 16px;
+  --conduction-secondary-top-nav-padding-block-end: 16px;
+  --conduction-secondary-top-nav-padding-inline-start: 16px;
+  --conduction-secondary-top-nav-padding-inline-end: 16px;
+  --conduction-secondary-top-nav-item-padding: 18px;
+  --conduction-secondary-top-nav-font-weight: 400;
+  --conduction-secondary-top-nav-current-background-color: unset;
+  --conduction-secondary-top-nav-background-color: transparent;
+  --conduction-primary-top-nav-padding-block-start: 16px;
+  --conduction-primary-top-nav-padding-block-end: 16px;
+  --conduction-primary-top-nav-padding-inline-start: 16px;
+  --conduction-primary-top-nav-padding-inline-end: 16px;
+  --conduction-primary-top-nav-item-padding: 18px;
+  --conduction-primary-top-nav-current-background-color: unset;
   --conduction-card-wrapper-border-radius: 0px;
   --conduction-card-wrapper-border-width: unset;
+  --utrecht-separator-margin-block-start: 0px;
+  --utrecht-separator-margin-block-end: 0px;
   --utrecht-paragraph-margin-block-end: 0;
   --utrecht-paragraph-margin-block-start: 0;
   --utrecht-paragraph-line-height: 1.5em;
@@ -84,10 +100,10 @@
   --utrecht-button-font-weight: inherit;
   --utrecht-button-font-size: inherit;
   --utrecht-button-border-radius: 0;
-  --utrecht-breadcrumb-padding-block-end: 15px;
-  --utrecht-breadcrumb-padding-block-start: 15px;
-  --utrecht-breadcrumb-padding-inline-end: 7.5px;
-  --utrecht-breadcrumb-padding-inline-start: 7.5px;
+  --utrecht-breadcrumb-nav-padding-block-end: 15px;
+  --utrecht-breadcrumb-nav-padding-block-start: 15px;
+  --utrecht-breadcrumb-nav-padding-inline-end: 7.5px;
+  --utrecht-breadcrumb-nav-padding-inline-start: 7.5px;
   --utrecht-badge-counter-text-decoration: none;
   --utrecht-badge-counter-border-radius: 50%;
   --utrecht-action-submit-cursor: pointer;
@@ -205,6 +221,12 @@
   --conduction-pagination-item-font-weight: var(--dinkelland-typography-font-weight-normal);
   --conduction-pagination-item-color: var(--dinkelland-color-white-100);
   --conduction-pagination-item-gap: var(--dinkelland-size-2xs);
+  --conduction-secondary-top-nav-font-size: var(--dinkelland-font-size-md);
+  --conduction-secondary-top-nav-hover-background-color: var(--dinkelland-color-white-100);
+  --conduction-secondary-top-nav-color: var(--dinkelland-color-black-20);
+  --conduction-primary-top-nav-hover-background-color: var(--dinkelland-color-white-100);
+  --conduction-primary-top-nav-background-color: var(--dinkelland-color-white-100);
+  --conduction-primary-top-nav-color: var(--dinkelland-color-black-20);
   --conduction-card-wrapper-padding-block-start: var(--dinkelland-size-xl);
   --conduction-card-wrapper-padding-block-end: var(--dinkelland-size-xl);
   --conduction-card-wrapper-padding-inline-start: var(--dinkelland-size-xl);
@@ -216,6 +238,8 @@
   --conduction-card-header-date-color: var(--dinkelland-color-black-0);
   --conduction-card-header-title-color: var(--dinkelland-color-black-0);
   --utrecht-surface-background-color: var(--dinkelland-color-white-100);
+  --utrecht-separator-block-size: var(--dinkelland-size-4xs);
+  --utrecht-separator-color: var(--dinkelland-color-blue-91);
   --utrecht-paragraph-font-weight: var(--dinkelland-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--dinkelland-font-size-md);
   --utrecht-paragraph-font-family: var(--dinkelland-typography-lato-font-family);
@@ -353,14 +377,14 @@
   --utrecht-button-border-width: var(--dinkelland-size-3xs);
   --utrecht-button-border-color: var(--dinkelland-color-blue-36);
   --utrecht-button-background-color: var(--dinkelland-color-blue-36);
-  --utrecht-breadcrumb-background-color: var(--dinkelland-color-green-24);
-  --utrecht-breadcrumb-separator-icon-size: var(--dinkelland-font-size-xs);
-  --utrecht-breadcrumb-separator-icon-color: var(--dinkelland-color-white-100);
-  --utrecht-breadcrumb-link-hover-color: var(--dinkelland-color-white-100);
-  --utrecht-breadcrumb-link-disabled-color: var(--dinkelland-color-white-100);
-  --utrecht-breadcrumb-link-current-color: var(--dinkelland-color-white-100);
-  --utrecht-breadcrumb-link-color: var(--dinkelland-color-white-100);
-  --utrecht-breadcrumb-font-size: var(--dinkelland-font-size-xs);
+  --utrecht-breadcrumb-nav-background-color: var(--dinkelland-color-green-24);
+  --utrecht-breadcrumb-nav-separator-icon-size: var(--dinkelland-font-size-xs);
+  --utrecht-breadcrumb-nav-separator-color: var(--dinkelland-color-white-100);
+  --utrecht-breadcrumb-nav-link-hover-color: var(--dinkelland-color-white-100);
+  --utrecht-breadcrumb-nav-link-disabled-color: var(--dinkelland-color-white-100);
+  --utrecht-breadcrumb-nav-link-current-color: var(--dinkelland-color-white-100);
+  --utrecht-breadcrumb-nav-link-color: var(--dinkelland-color-white-100);
+  --utrecht-breadcrumb-nav-font-size: var(--dinkelland-font-size-xs);
   --utrecht-blockquote-content-font-size: var(--dinkelland-font-size-md);
   --utrecht-blockquote-margin-inline-end: var(--dinkelland-size-xl);
   --utrecht-blockquote-margin-inline-start: var(--dinkelland-size-xl);
@@ -421,6 +445,13 @@
   --conduction-pagination-current-page-color: var(--dinkelland-color-primary);
   --conduction-pagination-item-font-family: var(--utrecht-document-font-family);
   --conduction-pagination-item-background-color: var(--dinkelland-color-primary);
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px var(--dinkelland-color-primary);
+  --conduction-secondary-top-nav-current-color: var(--dinkelland-color-primary);
+  --conduction-secondary-top-nav-hover-color: var(--dinkelland-color-primary);
+  --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 var(--dinkelland-color-primary);
+  --conduction-primary-top-nav-current-box-shadow: inset 0 -4px var(--dinkelland-color-primary);
+  --conduction-primary-top-nav-current-color: var(--dinkelland-color-primary);
+  --conduction-primary-top-nav-hover-color: var(--dinkelland-color-primary);
   --conduction-card-wrapper-color: var(--utrecht-document-color);
   --conduction-card-header-color: var(--utrecht-document-color);
   --utrecht-paragraph-color: var(--utrecht-document-color);
@@ -443,7 +474,7 @@
   --utrecht-button-secondary-action-hover-border-color: var(--dinkelland-color-primary-hover);
   --utrecht-button-secondary-action-color: var(--dinkelland-color-primary);
   --utrecht-button-secondary-action-border-color: var(--dinkelland-color-primary);
-  --utrecht-breadcrumb-font-family: var(--utrecht-document-font-family);
+  --utrecht-breadcrumb-nav-font-family: var(--utrecht-document-font-family);
   --utrecht-blockquote-content-color: var(--utrecht-document-color);
   --utrecht-badge-counter-font-family: var(--utrecht-document-font-family);
   --utrecht-badge-counter-font-size: var(--utrecht-document-font-size);

package/municipalities/dinkelland-design-tokens/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 28 Sep 2023 18:53:23 GMT
+ * Generated on Wed, 04 Oct 2023 14:27:05 GMT
  */
 
 export const dinkellandColorPrimary = "#006cb9";
@@ -131,19 +131,19 @@ export const utrechtBlockquoteMarginInlineStart = "32px";
 export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#333333";
 export const utrechtBlockquoteContentFontSize = "16px";
-export const utrechtBreadcrumbFontFamily = "\"Lato\", Arial, sans-serif";
-export const utrechtBreadcrumbFontSize = "12px";
-export const utrechtBreadcrumbLinkColor = "#ffffff";
-export const utrechtBreadcrumbLinkCurrentColor = "#ffffff";
-export const utrechtBreadcrumbLinkDisabledColor = "#ffffff";
-export const utrechtBreadcrumbLinkHoverColor = "#ffffff";
-export const utrechtBreadcrumbSeparatorIconColor = "#ffffff";
-export const utrechtBreadcrumbSeparatorIconSize = "12px";
-export const utrechtBreadcrumbBackgroundColor = "#007a4d";
-export const utrechtBreadcrumbPaddingInlineStart = "7.5px";
-export const utrechtBreadcrumbPaddingInlineEnd = "7.5px";
-export const utrechtBreadcrumbPaddingBlockStart = "15px";
-export const utrechtBreadcrumbPaddingBlockEnd = "15px";
+export const utrechtBreadcrumbNavFontFamily = "\"Lato\", Arial, sans-serif";
+export const utrechtBreadcrumbNavFontSize = "12px";
+export const utrechtBreadcrumbNavLinkColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkCurrentColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkDisabledColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkHoverColor = "#ffffff";
+export const utrechtBreadcrumbNavSeparatorColor = "#ffffff";
+export const utrechtBreadcrumbNavSeparatorIconSize = "12px";
+export const utrechtBreadcrumbNavBackgroundColor = "#007a4d";
+export const utrechtBreadcrumbNavPaddingInlineStart = "7.5px";
+export const utrechtBreadcrumbNavPaddingInlineEnd = "7.5px";
+export const utrechtBreadcrumbNavPaddingBlockStart = "15px";
+export const utrechtBreadcrumbNavPaddingBlockEnd = "15px";
 export const utrechtButtonBackgroundColor = "#006cb9";
 export const utrechtButtonBorderColor = "#006cb9";
 export const utrechtButtonBorderRadius = 0;
@@ -339,6 +339,10 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSeparatorColor = "#deebf4";
+export const utrechtSeparatorBlockSize = "1px";
+export const utrechtSeparatorMarginBlockEnd = "0px";
+export const utrechtSeparatorMarginBlockStart = "0px";
 export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#333333";
 export const conductionCardHeaderTitleColor = "#000000";
@@ -354,6 +358,33 @@ export const conductionCardWrapperPaddingInlineEnd = "32px";
 export const conductionCardWrapperPaddingInlineStart = "32px";
 export const conductionCardWrapperPaddingBlockEnd = "32px";
 export const conductionCardWrapperPaddingBlockStart = "32px";
+export const conductionPrimaryTopNavColor = "#333333";
+export const conductionPrimaryTopNavBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavHoverColor = "#006cb9";
+export const conductionPrimaryTopNavHoverBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavCurrentColor = "#006cb9";
+export const conductionPrimaryTopNavCurrentBackgroundColor = "unset";
+export const conductionPrimaryTopNavCurrentBoxShadow = "inset 0 -4px #006cb9";
+export const conductionPrimaryTopNavCurrentMobileBoxShadow = "inset 4px 0 #006cb9";
+export const conductionPrimaryTopNavItemPadding = "18px";
+export const conductionPrimaryTopNavPaddingInlineEnd = "16px";
+export const conductionPrimaryTopNavPaddingInlineStart = "16px";
+export const conductionPrimaryTopNavPaddingBlockEnd = "16px";
+export const conductionPrimaryTopNavPaddingBlockStart = "16px";
+export const conductionSecondaryTopNavColor = "#333333";
+export const conductionSecondaryTopNavBackgroundColor = "transparent";
+export const conductionSecondaryTopNavHoverColor = "#006cb9";
+export const conductionSecondaryTopNavHoverBackgroundColor = "#ffffff";
+export const conductionSecondaryTopNavCurrentColor = "#006cb9";
+export const conductionSecondaryTopNavCurrentBackgroundColor = "unset";
+export const conductionSecondaryTopNavCurrentBoxShadow = "inset 0 -4px #006cb9";
+export const conductionSecondaryTopNavFontSize = "16px";
+export const conductionSecondaryTopNavFontWeight = "400";
+export const conductionSecondaryTopNavItemPadding = "18px";
+export const conductionSecondaryTopNavPaddingInlineEnd = "16px";
+export const conductionSecondaryTopNavPaddingInlineStart = "16px";
+export const conductionSecondaryTopNavPaddingBlockEnd = "16px";
+export const conductionSecondaryTopNavPaddingBlockStart = "16px";
 export const conductionPaginationContainerBackgroundColor = "unset";
 export const conductionPaginationContainerPaddingInlineStart = "0px";
 export const conductionPaginationContainerPaddingInlineEnd = "0px";