@conduction/theme 1.0.42 → 1.0.44

package/municipalities/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json

@@ -27,6 +27,10 @@
         "31-60t": {
           "value": "#012c9d99",
           "comment": "Blue with 60% transparency"
+        },
+        "59": {
+          "value": "#6780c4",
+          "comment": "Blue color for over 31-60t color"
         }
       },
       "yellow": {

package/municipalities/noaberkracht-design-tokens/src/brand/noaberkracht/font-size.tokens.json

@@ -1,17 +1,18 @@
 {
   "noaberkracht": {
     "font-size": {
-      "4xs": { "value": "8px" },
-      "3xs": { "value": "10x" },
-      "2xs": { "value": "12px" },
-      "xs": { "value": "14px" },
-      "sm": { "value": "18px" },
-      "md": { "value": "24px" },
-      "lg": { "value": "36px" },
-      "xl": { "value": "48px" },
-      "2xl": { "value": "60px" },
-      "3xl": { "value": "72px" },
-      "4xl": { "value": "84px" }
+      "4xs": { "value": "5px" },
+      "3xs": { "value": "8px" },
+      "2xs": { "value": "10x" },
+      "xs": { "value": "12px" },
+      "sm": { "value": "14px" },
+      "md": { "value": "18px" },
+      "lg": { "value": "24px" },
+      "xl": { "value": "36px" },
+      "2xl": { "value": "48px" },
+      "3xl": { "value": "60px" },
+      "4xl": { "value": "72px" },
+      "5xl": { "value": "84px" }
     }
   }
 }

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

@@ -0,0 +1,66 @@
+{
+  "conduction": {
+    "primary": {
+      "top-nav": {
+        "color": { "value": "{noaberkracht.color.white.100}" },
+        "background-color": { "value": "{noaberkracht.color.blue.59}" },
+        "hover": {
+          "color": { "value": "{noaberkracht.color.white.100}" },
+          "background-color": { "value": "{noaberkracht.color.blue.59}" },
+          "box-shadow": {}
+        },
+        "current": {
+          "color": { "value": "{noaberkracht.color.white.100}" },
+          "background-color": { "value": "{noaberkracht.color.blue.59}" },
+          "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" },
+          "mobile": {
+            "box-shadow": { "value": "inset 4px 0 {noaberkracht.color.yellow.47}" }
+          }
+        },
+        "dropdown": {
+          "color": { "value": "{noaberkracht.color.white.100}" },
+          "background-color": { "value": "{noaberkracht.color.blue.59}" },
+          "border-width": { "value": "{noaberkracht.size.4xs}" },
+          "border-style": { "value": "solid" },
+          "border-color": { "value": "{noaberkracht.color.blue.31-60t}" },
+          "hover": {
+            "color": { "value": "{noaberkracht.color.white.100}" },
+            "background-color": { "value": "{noaberkracht.color.blue.59}" },
+            "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" }
+          }
+        },
+        "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": "{noaberkracht.color.white.100}" },
+        "background-color": { "value": "transparent" },
+        "hover": {
+          "color": { "value": "{noaberkracht.color.white.100}" },
+          "background-color": { "value": "transparent" }
+        },
+        "current": {
+          "color": { "value": "{noaberkracht.color.white.100}" },
+          "background-color": { "value": "unset" },
+          "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" }
+        },
+        "font-size": { "value": "{noaberkracht.font-size.xs}" },
+        "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/noaberkracht-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": "{noaberkracht.color.yellow.47}" },
         "inline-size": {},
         "icon": {
-          "color": { "value": "{noaberkracht.color.black.0}" },
           "size": { "value": "{noaberkracht.font-size.sm}" }
         }
       }

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 13:22:24 GMT
+ * Generated on Fri, 06 Oct 2023 12:30:05 GMT
  */
 
 .noordwijk-theme {
@@ -26,6 +26,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-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-primary-top-nav-dropdown-hover-box-shadow: none;
+  --conduction-primary-top-nav-current-background-color: unset;
   --conduction-card-wrapper-border-radius: 5px;
   --conduction-card-wrapper-border-width: unset;
   --utrecht-separator-margin-block-start: 0px;
@@ -59,10 +75,10 @@
   --utrecht-button-font-weight: 500;
   --utrecht-button-font-size: inherit;
   --utrecht-button-border-radius: 5px;
-  --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;
@@ -96,6 +112,7 @@
   --noordwijk-font-size-2xs: 10px;
   --noordwijk-font-size-3xs: 8px;
   --noordwijk-font-size-4xs: 5px;
+  --noordwijk-color-black-15: #212529;
   --noordwijk-color-black-0: #000000; /* Base/Black */
   --noordwijk-color-white-100: #ffffff; /* Base/White */
   --noordwijk-color-white-98: #fafafa;
@@ -176,6 +193,22 @@
   --conduction-pagination-item-background-color: var(--noordwijk-color-white-100);
   --conduction-pagination-item-color: var(--noordwijk-color-black-0);
   --conduction-pagination-item-gap: var(--noordwijk-size-xs);
+  --conduction-secondary-top-nav-font-size: var(--noordwijk-font-size-md);
+  --conduction-secondary-top-nav-current-color: var(--noordwijk-color-blue-30);
+  --conduction-secondary-top-nav-hover-color: var(--noordwijk-color-black-15);
+  --conduction-secondary-top-nav-color: var(--noordwijk-color-blue-30);
+  --conduction-primary-top-nav-dropdown-hover-background-color: var(--noordwijk-color-light-blue-96);
+  --conduction-primary-top-nav-dropdown-hover-color: var(--noordwijk-color-black-15);
+  --conduction-primary-top-nav-dropdown-background-color: var(--noordwijk-color-white-100);
+  --conduction-primary-top-nav-dropdown-color: var(--noordwijk-color-black-15);
+  --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 var(--noordwijk-color-light-blue-58);
+  --conduction-primary-top-nav-current-box-shadow: inset 0 -4px var(--noordwijk-color-light-blue-58);
+  --conduction-primary-top-nav-current-color: var(--noordwijk-color-blue-30);
+  --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px var(--noordwijk-color-light-blue-58);
+  --conduction-primary-top-nav-hover-background-color: var(--noordwijk-color-white-100);
+  --conduction-primary-top-nav-hover-color: var(--noordwijk-color-blue-30);
+  --conduction-primary-top-nav-background-color: var(--noordwijk-color-white-100);
+  --conduction-primary-top-nav-color: var(--noordwijk-color-blue-30);
   --conduction-card-wrapper-padding-block-start: var(--noordwijk-size-md);
   --conduction-card-wrapper-padding-block-end: var(--noordwijk-size-md);
   --conduction-card-wrapper-padding-inline-start: var(--noordwijk-size-md);
@@ -246,6 +279,7 @@
   --utrecht-table-cell-padding-block-end: var(--noordwijk-size-md);
   --utrecht-table-header-cell-font-weight: var(--noordwijk-typography-font-weight-bold);
   --utrecht-table-margin-block-start: var(--noordwijk-size-md);
+  --utrecht-table-row-hover-background-color: var(--noordwijk-color-white-98);
   --utrecht-table-header-font-weight: var(--noordwijk-typography-font-weight-bold);
   --utrecht-table-background-color: var(--noordwijk-color-white-100);
   --utrecht-page-header-padding-block-end: var(--noordwijk-size-sm);
@@ -308,15 +342,15 @@
   --utrecht-button-border-width: var(--noordwijk-size-3xs);
   --utrecht-button-border-color: var(--noordwijk-color-light-blue-58);
   --utrecht-button-background-color: var(--noordwijk-color-light-blue-58);
-  --utrecht-breadcrumb-background-color: var(--noordwijk-color-light-blue-46);
-  --utrecht-breadcrumb-separator-icon-size: var(--noordwijk-font-size-sm);
-  --utrecht-breadcrumb-separator-icon-color: var(--noordwijk-color-white-100);
-  --utrecht-breadcrumb-link-hover-color: var(--noordwijk-color-white-100);
-  --utrecht-breadcrumb-link-disabled-color: var(--noordwijk-color-white-100);
-  --utrecht-breadcrumb-link-current-color: var(--noordwijk-color-white-100);
-  --utrecht-breadcrumb-link-color: var(--noordwijk-color-white-100);
-  --utrecht-breadcrumb-font-size: var(--noordwijk-font-size-sm);
-  --utrecht-breadcrumb-font-family: var(--noordwijk-typography-roboto-slab-font-family);
+  --utrecht-breadcrumb-nav-background-color: var(--noordwijk-color-light-blue-46);
+  --utrecht-breadcrumb-nav-separator-icon-size: var(--noordwijk-font-size-sm);
+  --utrecht-breadcrumb-nav-separator-color: var(--noordwijk-color-white-100);
+  --utrecht-breadcrumb-nav-link-hover-color: var(--noordwijk-color-white-100);
+  --utrecht-breadcrumb-nav-link-disabled-color: var(--noordwijk-color-white-100);
+  --utrecht-breadcrumb-nav-link-current-color: var(--noordwijk-color-white-100);
+  --utrecht-breadcrumb-nav-link-color: var(--noordwijk-color-white-100);
+  --utrecht-breadcrumb-nav-font-size: var(--noordwijk-font-size-sm);
+  --utrecht-breadcrumb-nav-font-family: var(--noordwijk-typography-roboto-slab-font-family);
   --utrecht-blockquote-content-font-size: var(--noordwijk-font-size-md);
   --utrecht-blockquote-content-color: var(--noordwijk-color-black-0);
   --utrecht-blockquote-margin-inline-end: var(--noordwijk-size-xl);
@@ -381,6 +415,7 @@
   --conduction-pagination-page-hover-background-color: var(--noordwijk-color-primary);
   --conduction-pagination-current-page-background-color: var(--noordwijk-color-primary);
   --conduction-pagination-item-font-size: var(--utrecht-document-font-size);
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px var(--noordwijk-color-primary);
   --conduction-card-header-title-color: var(--noordwijk-color-primary);
   --conduction-card-header-color: var(--utrecht-document-color);
   --utrecht-paragraph-color: var(--utrecht-document-color);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 13:22:24 GMT
+ * Generated on Fri, 06 Oct 2023 12:30:04 GMT
  */
 
 export const noordwijkColorPrimary = "#2c2276";
@@ -35,6 +35,7 @@ export const noordwijkColorBlue30 = "#2c2276"; // Base/Blue
 export const noordwijkColorWhite98 = "#fafafa";
 export const noordwijkColorWhite100 = "#ffffff"; // Base/White
 export const noordwijkColorBlack0 = "#000000"; // Base/Black
+export const noordwijkColorBlack15 = "#212529";
 export const noordwijkFontSize4xs = "5px";
 export const noordwijkFontSize3xs = "8px";
 export const noordwijkFontSize2xs = "10px";
@@ -125,19 +126,19 @@ export const utrechtBlockquoteMarginInlineStart = "32px";
 export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#000000";
 export const utrechtBlockquoteContentFontSize = "16px";
-export const utrechtBreadcrumbFontFamily = "\"Roboto Slab\", Monospace, Arial, sans-serif";
-export const utrechtBreadcrumbFontSize = "14px";
-export const utrechtBreadcrumbLinkColor = "#ffffff";
-export const utrechtBreadcrumbLinkCurrentColor = "#ffffff";
-export const utrechtBreadcrumbLinkDisabledColor = "#ffffff";
-export const utrechtBreadcrumbLinkHoverColor = "#ffffff";
-export const utrechtBreadcrumbSeparatorIconColor = "#ffffff";
-export const utrechtBreadcrumbSeparatorIconSize = "14px";
-export const utrechtBreadcrumbBackgroundColor = "#417aa9";
-export const utrechtBreadcrumbPaddingInlineStart = "0";
-export const utrechtBreadcrumbPaddingInlineEnd = "0";
-export const utrechtBreadcrumbPaddingBlockStart = "12px";
-export const utrechtBreadcrumbPaddingBlockEnd = "12px";
+export const utrechtBreadcrumbNavFontFamily = "\"Roboto Slab\", Monospace, Arial, sans-serif";
+export const utrechtBreadcrumbNavFontSize = "14px";
+export const utrechtBreadcrumbNavLinkColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkCurrentColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkDisabledColor = "#ffffff";
+export const utrechtBreadcrumbNavLinkHoverColor = "#ffffff";
+export const utrechtBreadcrumbNavSeparatorColor = "#ffffff";
+export const utrechtBreadcrumbNavSeparatorIconSize = "14px";
+export const utrechtBreadcrumbNavBackgroundColor = "#417aa9";
+export const utrechtBreadcrumbNavPaddingInlineStart = "0";
+export const utrechtBreadcrumbNavPaddingInlineEnd = "0";
+export const utrechtBreadcrumbNavPaddingBlockStart = "12px";
+export const utrechtBreadcrumbNavPaddingBlockEnd = "12px";
 export const utrechtButtonBackgroundColor = "#6096c7";
 export const utrechtButtonBorderColor = "#6096c7";
 export const utrechtButtonBorderRadius = "5px";
@@ -221,6 +222,7 @@ export const utrechtTableBackgroundColor = "#ffffff";
 export const utrechtTableHeaderFontWeight = "700";
 export const utrechtTableHeaderColor = "#000000";
 export const utrechtTableHeaderTextTransform = "unset";
+export const utrechtTableRowHoverBackgroundColor = "#fafafa";
 export const utrechtTableFontFamily = "\"Roboto\", Monospace, Arial, sans-serif";
 export const utrechtTableFontSize = "16px";
 export const utrechtTableMarginBlockEnd = 0;
@@ -329,6 +331,39 @@ export const conductionCardWrapperPaddingInlineEnd = "18px";
 export const conductionCardWrapperPaddingInlineStart = "18px";
 export const conductionCardWrapperPaddingBlockEnd = "18px";
 export const conductionCardWrapperPaddingBlockStart = "18px";
+export const conductionPrimaryTopNavColor = "#2c2276";
+export const conductionPrimaryTopNavBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavHoverColor = "#2c2276";
+export const conductionPrimaryTopNavHoverBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavHoverBoxShadow = "inset 0 -4px #6096c7";
+export const conductionPrimaryTopNavCurrentColor = "#2c2276";
+export const conductionPrimaryTopNavCurrentBackgroundColor = "unset";
+export const conductionPrimaryTopNavCurrentBoxShadow = "inset 0 -4px #6096c7";
+export const conductionPrimaryTopNavCurrentMobileBoxShadow = "inset 4px 0 #6096c7";
+export const conductionPrimaryTopNavDropdownColor = "#212529";
+export const conductionPrimaryTopNavDropdownBackgroundColor = "#ffffff";
+export const conductionPrimaryTopNavDropdownHoverColor = "#212529";
+export const conductionPrimaryTopNavDropdownHoverBackgroundColor = "#f2f7fa";
+export const conductionPrimaryTopNavDropdownHoverBoxShadow = "none";
+export const conductionPrimaryTopNavItemPadding = "18px";
+export const conductionPrimaryTopNavPaddingInlineEnd = "16px";
+export const conductionPrimaryTopNavPaddingInlineStart = "16px";
+export const conductionPrimaryTopNavPaddingBlockEnd = "16px";
+export const conductionPrimaryTopNavPaddingBlockStart = "16px";
+export const conductionSecondaryTopNavColor = "#2c2276";
+export const conductionSecondaryTopNavBackgroundColor = "transparent";
+export const conductionSecondaryTopNavHoverColor = "#212529";
+export const conductionSecondaryTopNavHoverBackgroundColor = "transparent";
+export const conductionSecondaryTopNavCurrentColor = "#2c2276";
+export const conductionSecondaryTopNavCurrentBackgroundColor = "unset";
+export const conductionSecondaryTopNavCurrentBoxShadow = "inset 0 -4px #2c2276";
+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";