@conduction/theme 1.0.41 → 1.0.43

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

@@ -0,0 +1,66 @@
+{
+  "conduction": {
+    "primary": {
+      "top-nav": {
+        "color": { "value": "{tubbergen.color.black.20}" },
+        "background-color": { "value": "{tubbergen.color.white.100}" },
+        "hover": {
+          "color": { "value": "{tubbergen.color.primary}" },
+          "background-color": { "value": "{tubbergen.color.white.100}" },
+          "box-shadow": {}
+        },
+        "current": {
+          "color": { "value": "{tubbergen.color.primary}" },
+          "background-color": { "value": "unset" },
+          "box-shadow": { "value": "inset 0 -4px {tubbergen.color.primary}" },
+          "mobile": {
+            "box-shadow": { "value": "inset 4px 0 {tubbergen.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": "{tubbergen.color.black.20}" },
+        "background-color": { "value": "transparent" },
+        "hover": {
+          "color": { "value": "{tubbergen.color.primary}" },
+          "background-color": { "value": "{tubbergen.color.white.100}" }
+        },
+        "current": {
+          "color": { "value": "{tubbergen.color.primary}" },
+          "background-color": { "value": "unset" },
+          "box-shadow": { "value": "inset 0 -4px {tubbergen.color.primary}" }
+        },
+        "font-size": { "value": "{tubbergen.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/tubbergen-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": "{tubbergen.font-size.xs}" },
@@ -24,9 +24,9 @@
         }
       },
       "separator": {
+        "color": { "value": "{tubbergen.color.white.100}" },
         "inline-size": {},
         "icon": {
-          "color": { "value": "{tubbergen.color.white.100}" },
           "size": { "value": "{tubbergen.font-size.xs}" }
         }
       }

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

@@ -1,6 +1,6 @@
 {
   "utrecht": {
-    "breadcrumb": {
+    "breadcrumb-nav": {
       "background-color": { "value": "{tubbergen.color.green.21}" },
       "padding-inline-start": { "value": "7.5px" },
       "padding-inline-end": { "value": "7.5px" },

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 28 Sep 2023 18:52:58 GMT
+ * Generated on Wed, 04 Oct 2023 14:26:47 GMT
  */
 
 .xxllnc-theme {
@@ -33,7 +33,22 @@
   --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-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;
@@ -67,10 +82,10 @@
   --utrecht-button-font-size: inherit;
   --utrecht-button-border-width: 0;
   --utrecht-button-border-radius: 16px;
-  --utrecht-breadcrumb-padding-block-end: 12px;
-  --utrecht-breadcrumb-padding-block-start: 12px;
-  --utrecht-breadcrumb-padding-inline-end: 0;
-  --utrecht-breadcrumb-padding-inline-start: 0;
+  --utrecht-breadcrumb-nav-padding-block-end: 12px;
+  --utrecht-breadcrumb-nav-padding-block-start: 12px;
+  --utrecht-breadcrumb-nav-padding-inline-end: 0;
+  --utrecht-breadcrumb-nav-padding-inline-start: 0;
   --utrecht-badge-counter-text-decoration: none;
   --utrecht-badge-counter-border-radius: 50%;
   --utrecht-action-submit-cursor: pointer;
@@ -105,16 +120,20 @@
   --xxllnc-font-size-3xs: 8px;
   --xxllnc-font-size-4xs: 5px;
   --xxllnc-color-lightgrey-96: #f5f5f5;
+  --xxllnc-color-lightgrey-86: #dbdbdb;
   --xxllnc-color-grey-90-hover: #e5e5e5cc; /* Grey with 80% transparency */
   --xxllnc-color-grey-92: #eaeaea; /* Base/Grey */
   --xxllnc-color-grey-90: #e5e5e5;
   --xxllnc-color-grey-43: #6d6d6d;
   --xxllnc-color-black-17-hover: #2b2b2bcc; /* Black with 80% transparency */
+  --xxllnc-color-black-12-6-7t: #1e1e2010; /* Black with transparency between 6% and 7% */
   --xxllnc-color-black-0-22t: #00000038; /* Black with 22% transparency */
+  --xxllnc-color-black-23: #39383f;
   --xxllnc-color-black-21: #333338;
   --xxllnc-color-black-17: #2b2b2b;
   --xxllnc-color-black-16: #28282c; /* Base/Black */
   --xxllnc-color-black-14: #202125;
+  --xxllnc-color-black-6: #0e0d10;
   --xxllnc-color-white-100-0t: #ffffff; /* White with 0% transparency */
   --xxllnc-color-white-100: #ffffff; /* Base/White */
   --xxllnc-color-white-95: #f1f1f1;
@@ -180,6 +199,22 @@
   --conduction-pagination-item-background-color: var(--xxllnc-color-white-100);
   --conduction-pagination-item-color: var(--xxllnc-color-primary);
   --conduction-pagination-item-gap: var(--xxllnc-size-2xs);
+  --conduction-secondary-top-nav-font-size: var(--xxllnc-font-size-md);
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px var(--xxllnc-color-primary);
+  --conduction-secondary-top-nav-current-color: var(--xxllnc-color-black-23);
+  --conduction-secondary-top-nav-hover-background-color: var(--xxllnc-color-black-12-6-7t);
+  --conduction-secondary-top-nav-hover-color: var(--xxllnc-color-black-23);
+  --conduction-secondary-top-nav-color: var(--xxllnc-color-black-23);
+  --conduction-primary-top-nav-dropdown-hover-background-color: var(--xxllnc-color-black-6);
+  --conduction-primary-top-nav-dropdown-hover-color: var(--xxllnc-color-grey-92);
+  --conduction-primary-top-nav-dropdown-background-color: var(--xxllnc-color-black-6);
+  --conduction-primary-top-nav-dropdown-color: var(--xxllnc-color-lightgrey-86);
+  --conduction-primary-top-nav-current-background-color: var(--xxllnc-color-black-12-6-7t);
+  --conduction-primary-top-nav-current-color: var(--xxllnc-color-black-23);
+  --conduction-primary-top-nav-hover-background-color: var(--xxllnc-color-black-12-6-7t);
+  --conduction-primary-top-nav-hover-color: var(--xxllnc-color-black-23);
+  --conduction-primary-top-nav-background-color: var(--xxllnc-color-grey-92);
+  --conduction-primary-top-nav-color: var(--xxllnc-color-black-23);
   --conduction-card-wrapper-padding-block-start: var(--xxllnc-size-md);
   --conduction-card-wrapper-padding-block-end: var(--xxllnc-size-md);
   --conduction-card-wrapper-padding-inline-start: var(--xxllnc-size-md);
@@ -194,6 +229,8 @@
   --conduction-card-header-title-color: var(--xxllnc-color-white-95);
   --conduction-card-header-color: var(--xxllnc-color-white-95);
   --utrecht-surface-background-color: var(--xxllnc-color-white-100);
+  --utrecht-separator-block-size: var(--xxllnc-size-4xs);
+  --utrecht-separator-color: var(--xxllnc-color-grey-90);
   --utrecht-paragraph-font-weight: var(--xxllnc-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--xxllnc-font-size-md);
   --utrecht-paragraph-font-family: var(--xxllnc-typography-sans-serif-font-family);
@@ -320,12 +357,12 @@
   --utrecht-button-font-family: var(--xxllnc-typography-inter-font-family);
   --utrecht-button-color: var(--xxllnc-color-grey-90);
   --utrecht-button-background-color: var(--xxllnc-color-black-17);
-  --utrecht-breadcrumb-separator-icon-size: var(--xxllnc-font-size-sm);
-  --utrecht-breadcrumb-separator-icon-color: var(--xxllnc-color-black-14);
-  --utrecht-breadcrumb-link-hover-color: var(--xxllnc-color-black-14);
-  --utrecht-breadcrumb-link-disabled-color: var(--xxllnc-color-black-14);
-  --utrecht-breadcrumb-link-current-color: var(--xxllnc-color-black-14);
-  --utrecht-breadcrumb-link-color: var(--xxllnc-color-black-14);
+  --utrecht-breadcrumb-nav-separator-icon-size: var(--xxllnc-font-size-sm);
+  --utrecht-breadcrumb-nav-separator-color: var(--xxllnc-color-black-14);
+  --utrecht-breadcrumb-nav-link-hover-color: var(--xxllnc-color-black-14);
+  --utrecht-breadcrumb-nav-link-disabled-color: var(--xxllnc-color-black-14);
+  --utrecht-breadcrumb-nav-link-current-color: var(--xxllnc-color-black-14);
+  --utrecht-breadcrumb-nav-link-color: var(--xxllnc-color-black-14);
   --utrecht-blockquote-content-font-size: var(--xxllnc-font-size-md);
   --utrecht-blockquote-content-color: var(--xxllnc-color-black-16);
   --utrecht-blockquote-margin-inline-end: var(--xxllnc-size-xl);
@@ -394,7 +431,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);
   --utrecht-alert-icon-color: var(--xxllnc-color-alert-info);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 28 Sep 2023 18:52:58 GMT
+ * Generated on Wed, 04 Oct 2023 14:26:47 GMT
  */
 
 export const xxllncColorPrimary = "#000000ad"; // Primary with 68% transparency
@@ -20,16 +20,20 @@ export const xxllncColorAlertInfoBackground = "#eaeaea";
 export const xxllncColorWhite95 = "#f1f1f1";
 export const xxllncColorWhite100 = "#ffffff"; // Base/White
 export const xxllncColorWhite1000t = "#ffffff"; // White with 0% transparency
+export const xxllncColorBlack6 = "#0e0d10";
 export const xxllncColorBlack14 = "#202125";
 export const xxllncColorBlack16 = "#28282c"; // Base/Black
 export const xxllncColorBlack17 = "#2b2b2b";
 export const xxllncColorBlack21 = "#333338";
+export const xxllncColorBlack23 = "#39383f";
 export const xxllncColorBlack022t = "#00000038"; // Black with 22% transparency
+export const xxllncColorBlack1267t = "#1e1e2010"; // Black with transparency between 6% and 7%
 export const xxllncColorBlack17Hover = "#2b2b2bcc"; // Black with 80% transparency
 export const xxllncColorGrey43 = "#6d6d6d";
 export const xxllncColorGrey90 = "#e5e5e5";
 export const xxllncColorGrey92 = "#eaeaea"; // Base/Grey
 export const xxllncColorGrey90Hover = "#e5e5e5cc"; // Grey with 80% transparency
+export const xxllncColorLightgrey86 = "#dbdbdb";
 export const xxllncColorLightgrey96 = "#f5f5f5";
 export const xxllncFontSize4xs = "5px";
 export const xxllncFontSize3xs = "8px";
@@ -121,17 +125,17 @@ export const utrechtBlockquoteMarginInlineStart = "32px";
 export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#28282c";
 export const utrechtBlockquoteContentFontSize = "16px";
-export const utrechtBreadcrumbFontFamily = "neue-haas-grotesk-text, sans-serif";
-export const utrechtBreadcrumbLinkColor = "#202125";
-export const utrechtBreadcrumbLinkCurrentColor = "#202125";
-export const utrechtBreadcrumbLinkDisabledColor = "#202125";
-export const utrechtBreadcrumbLinkHoverColor = "#202125";
-export const utrechtBreadcrumbSeparatorIconColor = "#202125";
-export const utrechtBreadcrumbSeparatorIconSize = "14px";
-export const utrechtBreadcrumbPaddingInlineStart = "0";
-export const utrechtBreadcrumbPaddingInlineEnd = "0";
-export const utrechtBreadcrumbPaddingBlockStart = "12px";
-export const utrechtBreadcrumbPaddingBlockEnd = "12px";
+export const utrechtBreadcrumbNavFontFamily = "neue-haas-grotesk-text, sans-serif";
+export const utrechtBreadcrumbNavLinkColor = "#202125";
+export const utrechtBreadcrumbNavLinkCurrentColor = "#202125";
+export const utrechtBreadcrumbNavLinkDisabledColor = "#202125";
+export const utrechtBreadcrumbNavLinkHoverColor = "#202125";
+export const utrechtBreadcrumbNavSeparatorColor = "#202125";
+export const utrechtBreadcrumbNavSeparatorIconSize = "14px";
+export const utrechtBreadcrumbNavPaddingInlineStart = "0";
+export const utrechtBreadcrumbNavPaddingInlineEnd = "0";
+export const utrechtBreadcrumbNavPaddingBlockStart = "12px";
+export const utrechtBreadcrumbNavPaddingBlockEnd = "12px";
 export const utrechtButtonBackgroundColor = "#2b2b2b";
 export const utrechtButtonBorderRadius = "16px";
 export const utrechtButtonBorderWidth = 0;
@@ -299,6 +303,10 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSeparatorColor = "#e5e5e5";
+export const utrechtSeparatorBlockSize = "1px";
+export const utrechtSeparatorMarginBlockEnd = "0px";
+export const utrechtSeparatorMarginBlockStart = "0px";
 export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#f1f1f1";
 export const conductionCardHeaderTitleColor = "#f1f1f1";
@@ -314,6 +322,35 @@ export const conductionCardWrapperPaddingInlineEnd = "18px";
 export const conductionCardWrapperPaddingInlineStart = "18px";
 export const conductionCardWrapperPaddingBlockEnd = "18px";
 export const conductionCardWrapperPaddingBlockStart = "18px";
+export const conductionPrimaryTopNavColor = "#39383f";
+export const conductionPrimaryTopNavBackgroundColor = "#eaeaea";
+export const conductionPrimaryTopNavHoverColor = "#39383f";
+export const conductionPrimaryTopNavHoverBackgroundColor = "#1e1e2010";
+export const conductionPrimaryTopNavCurrentColor = "#39383f";
+export const conductionPrimaryTopNavCurrentBackgroundColor = "#1e1e2010";
+export const conductionPrimaryTopNavDropdownColor = "#dbdbdb";
+export const conductionPrimaryTopNavDropdownBackgroundColor = "#0e0d10";
+export const conductionPrimaryTopNavDropdownHoverColor = "#eaeaea";
+export const conductionPrimaryTopNavDropdownHoverBackgroundColor = "#0e0d10";
+export const conductionPrimaryTopNavItemPadding = "18px";
+export const conductionPrimaryTopNavPaddingInlineEnd = "16px";
+export const conductionPrimaryTopNavPaddingInlineStart = "16px";
+export const conductionPrimaryTopNavPaddingBlockEnd = "16px";
+export const conductionPrimaryTopNavPaddingBlockStart = "16px";
+export const conductionSecondaryTopNavColor = "#39383f";
+export const conductionSecondaryTopNavBackgroundColor = "transparent";
+export const conductionSecondaryTopNavHoverColor = "#39383f";
+export const conductionSecondaryTopNavHoverBackgroundColor = "#1e1e2010";
+export const conductionSecondaryTopNavCurrentColor = "#39383f";
+export const conductionSecondaryTopNavCurrentBackgroundColor = "unset";
+export const conductionSecondaryTopNavCurrentBoxShadow = "inset 0 -4px #000000ad";
+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";