@conduction/theme 1.0.42 → 1.0.43

package/municipalities/epe-design-tokens/src/component/conduction/card-header.tokens.json

@@ -8,7 +8,7 @@
       "color": { "value": "{utrecht.document.color}" },
       "hover": {
         "background-color": {},
-        "border-bottom-width": { "value": "{epe.size.4xs}" },
+        "border-bottom-width": { "value": "1.6px" },
         "border-bottom-style": { "value": "solid" },
         "border-bottom-color": { "value": "{epe.color.blue.31}" }
       },

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

@@ -0,0 +1,66 @@
+{
+  "conduction": {
+    "primary": {
+      "top-nav": {
+        "color": { "value": "{epe.color.black.19}" },
+        "background-color": { "value": "{epe.color.white.100}" },
+        "hover": {
+          "color": { "value": "{epe.color.primary}" },
+          "background-color": { "value": "{epe.color.white.100}" },
+          "box-shadow": {}
+        },
+        "current": {
+          "color": { "value": "{epe.color.primary}" },
+          "background-color": { "value": "unset" },
+          "box-shadow": { "value": "inset 0 -4px {epe.color.primary}" },
+          "mobile": {
+            "box-shadow": { "value": "inset 4px 0 {epe.color.primary}" }
+          }
+        },
+        "dropdown": {
+          "color": {},
+          "background-color": {},
+          "border-width": {},
+          "border-style": {},
+          "border-color": {},
+          "hover": {
+            "color": {},
+            "background-color": {},
+            "box-shadow": {}
+          }
+        },
+        "item": {
+          "padding": { "value": "18px" }
+        },
+        "padding-inline-end": { "value": "16px" },
+        "padding-inline-start": { "value": "16px" },
+        "padding-block-end": { "value": "16px" },
+        "padding-block-start": { "value": "16px" }
+      }
+    },
+    "secondary": {
+      "top-nav": {
+        "color": { "value": "{epe.color.black.19}" },
+        "background-color": { "value": "transparent" },
+        "hover": {
+          "color": { "value": "{epe.color.primary}" },
+          "background-color": { "value": "{epe.color.grey.90}" }
+        },
+        "current": {
+          "color": { "value": "{epe.color.primary}" },
+          "background-color": { "value": "unset" },
+          "box-shadow": { "value": "inset 0 -4px {epe.color.primary}" }
+        },
+        "font-size": { "value": "{epe.font-size.md}" },
+        "font-weight": { "value": "400" },
+        "item": {
+          "padding": { "value": "18px" }
+        },
+        "padding-inline-end": { "value": "16px" },
+        "padding-inline-start": { "value": "16px" },
+        "padding-block-end": { "value": "16px" },
+        "padding-block-start": { "value": "16px" }
+      }
+    }
+  }
+}

package/municipalities/epe-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": { "value": "16px" },
@@ -24,9 +24,9 @@
         }
       },
       "separator": {
+        "color": { "value": "{epe.color.white.100}" },
         "inline-size": {},
         "icon": {
-          "color": { "value": "{epe.color.white.100}" },
           "size": { "value": "13px" }
         }
       }

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 13:22:18 GMT
+ * Generated on Wed, 04 Oct 2023 14:26:39 GMT
  */
 
 .leiden-theme {
@@ -33,6 +33,21 @@
   --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-box-shadow: ;
+  --conduction-secondary-top-nav-current-background-color: unset;
+  --conduction-secondary-top-nav-hover-background-color: transparent;
+  --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-card-wrapper-border-radius: 0px;
   --conduction-card-wrapper-border-width: unset;
   --utrecht-separator-margin-block-start: 0px;
@@ -66,12 +81,12 @@
   --utrecht-button-primary-action-font-weight: inherit;
   --utrecht-button-font-weight: inherit;
   --utrecht-button-font-size: inherit;
-  --utrecht-breadcrumb-padding-block-end: 17px;
-  --utrecht-breadcrumb-padding-block-start: 17px;
-  --utrecht-breadcrumb-padding-inline-end: 30px;
-  --utrecht-breadcrumb-padding-inline-start: 30px;
-  --utrecht-breadcrumb-separator-icon-size: 9px;
-  --utrecht-breadcrumb-font-size: 15px;
+  --utrecht-breadcrumb-nav-padding-block-end: 17px;
+  --utrecht-breadcrumb-nav-padding-block-start: 17px;
+  --utrecht-breadcrumb-nav-padding-inline-end: 30px;
+  --utrecht-breadcrumb-nav-padding-inline-start: 30px;
+  --utrecht-breadcrumb-nav-separator-icon-size: 9px;
+  --utrecht-breadcrumb-nav-font-size: 15px;
   --utrecht-badge-counter-text-decoration: none;
   --utrecht-badge-counter-border-radius: 50%;
   --utrecht-action-submit-cursor: pointer;
@@ -107,6 +122,7 @@
   --leiden-color-lightblue-89: #dce4ec;
   --leiden-color-lightblue-37: #057aba;
   --leiden-color-lightblue-24: #2c3e50; /* Base/LightBlue */
+  --leiden-color-blue-27: #035688;
   --leiden-color-black-9: #0d1921; /* Base/Black */
   --leiden-color-white-100: #ffffff; /* Base/White */
   --leiden-color-lightgrey-98: #fbfbfb;
@@ -188,6 +204,22 @@
   --conduction-pagination-item-background-color: var(--leiden-color-white-100);
   --conduction-pagination-item-color: var(--leiden-color-lightblue-37);
   --conduction-pagination-item-gap: var(--leiden-size-2xs);
+  --conduction-secondary-top-nav-font-size: var(--leiden-font-size-md);
+  --conduction-secondary-top-nav-current-color: var(--leiden-color-white-100);
+  --conduction-secondary-top-nav-hover-color: var(--leiden-color-white-100);
+  --conduction-secondary-top-nav-color: var(--leiden-color-white-100);
+  --conduction-primary-top-nav-dropdown-hover-background-color: var(--leiden-color-white-100);
+  --conduction-primary-top-nav-dropdown-hover-color: var(--leiden-color-black-9);
+  --conduction-primary-top-nav-dropdown-background-color: var(--leiden-color-white-100);
+  --conduction-primary-top-nav-dropdown-color: var(--leiden-color-blue-27);
+  --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 var(--leiden-color-white-100);
+  --conduction-primary-top-nav-current-box-shadow: inset 0 -4px var(--leiden-color-white-100);
+  --conduction-primary-top-nav-current-background-color: var(--leiden-color-black-9);
+  --conduction-primary-top-nav-current-color: var(--leiden-color-white-100);
+  --conduction-primary-top-nav-hover-background-color: var(--leiden-color-black-9);
+  --conduction-primary-top-nav-hover-color: var(--leiden-color-blue-27);
+  --conduction-primary-top-nav-background-color: var(--leiden-color-black-9);
+  --conduction-primary-top-nav-color: var(--leiden-color-white-100);
   --conduction-card-wrapper-padding-block-start: var(--leiden-size-sm);
   --conduction-card-wrapper-padding-block-end: var(--leiden-size-sm);
   --conduction-card-wrapper-padding-inline-start: var(--leiden-size-xl);
@@ -332,12 +364,12 @@
   --utrecht-button-border-radius: var(--leiden-size-2xs);
   --utrecht-button-border-color: var(--leiden-color-primary);
   --utrecht-button-background-color: var(--leiden-color-primary);
-  --utrecht-breadcrumb-background-color: var(--leiden-color-lightgrey-89);
-  --utrecht-breadcrumb-separator-icon-color: var(--leiden-color-black-9);
-  --utrecht-breadcrumb-link-hover-color: var(--leiden-color-black-9);
-  --utrecht-breadcrumb-link-disabled-color: var(--leiden-color-black-9);
-  --utrecht-breadcrumb-link-current-color: var(--leiden-color-black-9);
-  --utrecht-breadcrumb-link-color: var(--leiden-color-black-9);
+  --utrecht-breadcrumb-nav-background-color: var(--leiden-color-lightgrey-89);
+  --utrecht-breadcrumb-nav-separator-color: var(--leiden-color-black-9);
+  --utrecht-breadcrumb-nav-link-hover-color: var(--leiden-color-black-9);
+  --utrecht-breadcrumb-nav-link-disabled-color: var(--leiden-color-black-9);
+  --utrecht-breadcrumb-nav-link-current-color: var(--leiden-color-black-9);
+  --utrecht-breadcrumb-nav-link-color: var(--leiden-color-black-9);
   --utrecht-blockquote-content-font-size: var(--leiden-font-size-md);
   --utrecht-blockquote-content-color: var(--leiden-color-black-9);
   --utrecht-blockquote-margin-inline-end: var(--leiden-size-xl);
@@ -409,7 +441,7 @@
   --utrecht-table-font-size: var(--utrecht-document-font-size);
   --utrecht-table-font-family: var(--utrecht-document-font-family);
   --utrecht-table-header-color: var(--utrecht-document-color);
-  --utrecht-breadcrumb-font-family: var(--utrecht-document-font-family);
+  --utrecht-breadcrumb-nav-font-family: var(--utrecht-document-font-family);
   --utrecht-badge-counter-font-family: var(--utrecht-document-font-family);
   --utrecht-badge-counter-font-size: var(--utrecht-document-font-size);
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 13:22:18 GMT
+ * Generated on Wed, 04 Oct 2023 14:26:39 GMT
  */
 
 export const leidenColorPrimary = "#d62410";
@@ -25,6 +25,7 @@ export const leidenColorLightgrey95 = "#f1f1f1";
 export const leidenColorLightgrey98 = "#fbfbfb";
 export const leidenColorWhite100 = "#ffffff"; // Base/White
 export const leidenColorBlack9 = "#0d1921"; // Base/Black
+export const leidenColorBlue27 = "#035688";
 export const leidenColorLightblue24 = "#2c3e50"; // Base/LightBlue
 export const leidenColorLightblue37 = "#057aba";
 export const leidenColorLightblue89 = "#dce4ec";
@@ -117,19 +118,19 @@ export const utrechtBlockquoteMarginInlineStart = "32px";
 export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#0d1921";
 export const utrechtBlockquoteContentFontSize = "18px";
-export const utrechtBreadcrumbFontFamily = "\"Open Sans\", Monospace, Arial, sans-serif";
-export const utrechtBreadcrumbFontSize = "15px";
-export const utrechtBreadcrumbLinkColor = "#0d1921";
-export const utrechtBreadcrumbLinkCurrentColor = "#0d1921";
-export const utrechtBreadcrumbLinkDisabledColor = "#0d1921";
-export const utrechtBreadcrumbLinkHoverColor = "#0d1921";
-export const utrechtBreadcrumbSeparatorIconColor = "#0d1921";
-export const utrechtBreadcrumbSeparatorIconSize = "9px";
-export const utrechtBreadcrumbBackgroundColor = "#e4e4e4";
-export const utrechtBreadcrumbPaddingInlineStart = "30px";
-export const utrechtBreadcrumbPaddingInlineEnd = "30px";
-export const utrechtBreadcrumbPaddingBlockStart = "17px";
-export const utrechtBreadcrumbPaddingBlockEnd = "17px";
+export const utrechtBreadcrumbNavFontFamily = "\"Open Sans\", Monospace, Arial, sans-serif";
+export const utrechtBreadcrumbNavFontSize = "15px";
+export const utrechtBreadcrumbNavLinkColor = "#0d1921";
+export const utrechtBreadcrumbNavLinkCurrentColor = "#0d1921";
+export const utrechtBreadcrumbNavLinkDisabledColor = "#0d1921";
+export const utrechtBreadcrumbNavLinkHoverColor = "#0d1921";
+export const utrechtBreadcrumbNavSeparatorColor = "#0d1921";
+export const utrechtBreadcrumbNavSeparatorIconSize = "9px";
+export const utrechtBreadcrumbNavBackgroundColor = "#e4e4e4";
+export const utrechtBreadcrumbNavPaddingInlineStart = "30px";
+export const utrechtBreadcrumbNavPaddingInlineEnd = "30px";
+export const utrechtBreadcrumbNavPaddingBlockStart = "17px";
+export const utrechtBreadcrumbNavPaddingBlockEnd = "17px";
 export const utrechtButtonBackgroundColor = "#d62410";
 export const utrechtButtonBorderColor = "#d62410";
 export const utrechtButtonBorderRadius = "4px";
@@ -317,6 +318,37 @@ export const conductionCardWrapperPaddingInlineEnd = "32px";
 export const conductionCardWrapperPaddingInlineStart = "32px";
 export const conductionCardWrapperPaddingBlockEnd = "14px";
 export const conductionCardWrapperPaddingBlockStart = "14px";
+export const conductionPrimaryTopNavColor = "#ffffff";
+export const conductionPrimaryTopNavBackgroundColor = "#0d1921";
+export const conductionPrimaryTopNavHoverColor = "#035688";
+export const conductionPrimaryTopNavHoverBackgroundColor = "#0d1921";
+export const conductionPrimaryTopNavCurrentColor = "#ffffff";
+export const conductionPrimaryTopNavCurrentBackgroundColor = "#0d1921";
+export const conductionPrimaryTopNavCurrentBoxShadow = "inset 0 -4px #ffffff";
+export const conductionPrimaryTopNavCurrentMobileBoxShadow = "inset 4px 0 #ffffff";
+export const conductionPrimaryTopNavDropdownColor = "#035688";
+export const conductionPrimaryTopNavDropdownBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavDropdownHoverColor = "#0d1921";
+export const conductionPrimaryTopNavDropdownHoverBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavItemPadding = "18px";
+export const conductionPrimaryTopNavPaddingInlineEnd = "16px";
+export const conductionPrimaryTopNavPaddingInlineStart = "16px";
+export const conductionPrimaryTopNavPaddingBlockEnd = "16px";
+export const conductionPrimaryTopNavPaddingBlockStart = "16px";
+export const conductionSecondaryTopNavColor = "#ffffff";
+export const conductionSecondaryTopNavBackgroundColor = "transparent";
+export const conductionSecondaryTopNavHoverColor = "#ffffff";
+export const conductionSecondaryTopNavHoverBackgroundColor = "transparent";
+export const conductionSecondaryTopNavCurrentColor = "#ffffff";
+export const conductionSecondaryTopNavCurrentBackgroundColor = "unset";
+export const conductionSecondaryTopNavCurrentBoxShadow = "";
+export const conductionSecondaryTopNavFontSize = "18px";
+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";