@conduction/theme 1.0.35 → 1.0.38

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

@@ -1,9 +1,30 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Aug 2023 09:13:05 GMT
+ * Generated on Tue, 19 Sep 2023 14:30:44 GMT
  */
 
 .dinkelland-theme {
+  --conduction-tabs-scroll-button-border-style: solid;
+  --conduction-tabs-tab-panel-border-top: 0;
+  --conduction-tabs-tab-panel-border-style: solid;
+  --conduction-tabs-tab-list-border-bottom-style: solid;
+  --conduction-tabs-tab-list-border-bottom-width: 1px;
+  --conduction-tabs-tab-list-margin-block-end: 0px;
+  --conduction-tabs-tab-hover-text-decoration: underline;
+  --conduction-tabs-tab-selected-hover-text-decoration: underline;
+  --conduction-tabs-tab-selected-hover-background-color: transparent;
+  --conduction-tabs-tab-selected-border-bottom-color: unset;
+  --conduction-tabs-tab-selected-border-bottom-style: unset;
+  --conduction-tabs-tab-selected-border-bottom-width: 0px;
+  --conduction-tabs-tab-selected-border-bottom: 0;
+  --conduction-tabs-tab-selected-border-style: solid;
+  --conduction-tabs-tab-selected-background-color: transparent;
+  --conduction-tabs-tab-min-height: 61px;
+  --conduction-tabs-tab-min-width: 160px;
+  --conduction-tabs-tab-max-width: unset;
+  --conduction-tabs-tab-bottom: 0px;
+  --conduction-tabs-tab-border-bottom: 0;
+  --conduction-tabs-tab-border-style: solid;
   --conduction-input-select-padding-block-start: 0;
   --conduction-input-select-padding-block-end: 0;
   --conduction-input-select-border-focus: unset;
@@ -43,8 +64,8 @@
   --utrecht-heading-4-margin-block-end: 0;
   --utrecht-heading-3-margin-block-start: 0;
   --utrecht-heading-2-margin-block-start: 0;
-  --utrecht-text-box-font-size: 15px;
-  --utrecht-text-box-border-radius: 0px;
+  --utrecht-textbox-font-size: 15px;
+  --utrecht-textbox-border-radius: 0px;
   --utrecht-table-header-cell-text-transform: unset;
   --utrecht-table-margin-block-end: 0;
   --utrecht-table-header-text-transform: unset;
@@ -63,6 +84,8 @@
   --utrecht-button-font-weight: inherit;
   --utrecht-button-font-size: inherit;
   --utrecht-button-border-radius: 0;
+  --utrecht-badge-counter-text-decoration: none;
+  --utrecht-badge-counter-border-radius: 50%;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
@@ -97,9 +120,11 @@
   --dinkelland-color-lightgrey-96: #f5f5f5;
   --dinkelland-color-lightgrey-89: #e4e4e4; /* Base/LightGrey */
   --dinkelland-color-grey-94: #edeff2;
+  --dinkelland-color-grey-72: #AEB6C2;
   --dinkelland-color-grey-64: #9aa1ab; /* Base/Grey */
   --dinkelland-color-grey-46: #767676;
   --dinkelland-color-grey-42: #6b6b6b;
+  --dinkelland-color-grey-38: #5c6066;
   --dinkelland-color-black-33: #555555;
   --dinkelland-color-black-20: #333333;
   --dinkelland-color-black-13: #222222; /* Base/Black */
@@ -120,6 +145,44 @@
   --dinkelland-color-warning: #ffc107;
   --dinkelland-color-alert-error-background: #f8d7da;
   --dinkelland-color-error: #dc3545;
+  --conduction-tabs-scroll-button-hover-color: var(--dinkelland-color-blue-36);
+  --conduction-tabs-scroll-button-hover-background-color: var(--dinkelland-color-blue-96);
+  --conduction-tabs-scroll-button-border-color: var(--dinkelland-color-grey-72);
+  --conduction-tabs-scroll-button-border-width: var(--dinkelland-size-4xs);
+  --conduction-tabs-scroll-button-color: var(--dinkelland-color-grey-38);
+  --conduction-tabs-scroll-button-background-color: var(--dinkelland-color-blue-96);
+  --conduction-tabs-tab-panel-border-color: var(--dinkelland-color-grey-72);
+  --conduction-tabs-tab-panel-border-width: var(--dinkelland-size-4xs);
+  --conduction-tabs-tab-panel-padding-inline-end: var(--dinkelland-size-lg);
+  --conduction-tabs-tab-panel-padding-inline-start: var(--dinkelland-size-lg);
+  --conduction-tabs-tab-panel-padding-block-end: var(--dinkelland-size-lg);
+  --conduction-tabs-tab-panel-padding-block-start: var(--dinkelland-size-lg);
+  --conduction-tabs-tab-list-border-bottom-color: var(--dinkelland-color-grey-72);
+  --conduction-tabs-tab-hover-color: var(--dinkelland-color-blue-36);
+  --conduction-tabs-tab-hover-background-color: var(--dinkelland-color-blue-96);
+  --conduction-tabs-tab-selected-hover-color: var(--dinkelland-color-blue-36);
+  --conduction-tabs-tab-selected-font-weight: var(--dinkelland-typography-font-weight-normal);
+  --conduction-tabs-tab-selected-border-color: var(--dinkelland-color-grey-72);
+  --conduction-tabs-tab-selected-border-width: var(--dinkelland-size-4xs);
+  --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 0px var(--dinkelland-color-white-100);
+  --conduction-tabs-tab-selected-color: var(--dinkelland-color-blue-36);
+  --conduction-tabs-tab-font-weight: var(--dinkelland-typography-font-weight-normal);
+  --conduction-tabs-tab-font-size: var(--dinkelland-font-size-md);
+  --conduction-tabs-tab-margin-inline-end: var(--dinkelland-size-xs);
+  --conduction-tabs-tab-padding-inline-end: var(--dinkelland-size-sm);
+  --conduction-tabs-tab-padding-inline-start: var(--dinkelland-size-sm);
+  --conduction-tabs-tab-padding-block-end: var(--dinkelland-size-xs);
+  --conduction-tabs-tab-padding-block-start: var(--dinkelland-size-xs);
+  --conduction-tabs-tab-border-color: var(--dinkelland-color-blue-96);
+  --conduction-tabs-tab-border-width: var(--dinkelland-size-4xs);
+  --conduction-tabs-tab-color: var(--dinkelland-color-grey-38);
+  --conduction-tabs-tab-background-color: var(--dinkelland-color-blue-96);
+  --conduction-table-wrapper-scroll-button-hover-color: var(--dinkelland-color-green-24);
+  --conduction-table-wrapper-scroll-button-hover-background-color: var(--dinkelland-color-blue-96);
+  --conduction-table-wrapper-scroll-button-padding-inline-end: var(--dinkelland-size-sm);
+  --conduction-table-wrapper-scroll-button-padding-inline-start: var(--dinkelland-size-sm);
+  --conduction-table-wrapper-scroll-button-color: var(--dinkelland-color-black-20);
+  --conduction-table-wrapper-scroll-button-background-color: var(--dinkelland-color-blue-96);
   --conduction-input-select-placeholder-font-family: var(--dinkelland-typography-lato-font-family);
   --conduction-input-select-list-option-hover-font-family: var(--dinkelland-typography-lato-font-family);
   --conduction-input-select-list-option-font-family: var(--dinkelland-typography-lato-font-family);
@@ -189,17 +252,17 @@
   --utrecht-heading-1-font-size: var(--dinkelland-font-size-2xl);
   --utrecht-heading-1-font-family: var(--dinkelland-typography-montserrat-font-family);
   --utrecht-heading-1-color: var(--dinkelland-color-black-13);
-  --utrecht-text-box-focus-border-color: var(--dinkelland-color-blue-48);
-  --utrecht-text-box-placeholder-color: var(--dinkelland-color-grey-42);
-  --utrecht-text-box-padding-inline-start: var(--dinkelland-size-sm);
-  --utrecht-text-box-padding-inline-end: var(--dinkelland-size-sm);
-  --utrecht-text-box-padding-block-start: var(--dinkelland-size-xs);
-  --utrecht-text-box-padding-block-end: var(--dinkelland-size-xs);
-  --utrecht-text-box-font-family: var(--dinkelland-typography-lato-font-family);
-  --utrecht-text-box-color: var(--dinkelland-color-black-33);
-  --utrecht-text-box-border-width: var(--dinkelland-size-4xs);
-  --utrecht-text-box-border-color: var(--dinkelland-color-grey-46);
-  --utrecht-text-box-background-color: var(--dinkelland-color-white-100);
+  --utrecht-textbox-padding-inline-start: var(--dinkelland-size-sm);
+  --utrecht-textbox-padding-inline-end: var(--dinkelland-size-sm);
+  --utrecht-textbox-padding-block-start: var(--dinkelland-size-xs);
+  --utrecht-textbox-padding-block-end: var(--dinkelland-size-xs);
+  --utrecht-textbox-font-family: var(--dinkelland-typography-lato-font-family);
+  --utrecht-textbox-color: var(--dinkelland-color-black-33);
+  --utrecht-textbox-border-width: var(--dinkelland-size-4xs);
+  --utrecht-textbox-border-color: var(--dinkelland-color-grey-46);
+  --utrecht-textbox-focus-border-color: var(--dinkelland-color-blue-48);
+  --utrecht-textbox-placeholder-color: var(--dinkelland-color-grey-42);
+  --utrecht-textbox-background-color: var(--dinkelland-color-white-100);
   --utrecht-table-cell-padding-inline-start: var(--dinkelland-size-md);
   --utrecht-table-cell-padding-inline-end: var(--dinkelland-size-md);
   --utrecht-table-cell-padding-block-start: var(--dinkelland-size-md);
@@ -228,8 +291,6 @@
   --utrecht-page-footer-padding-inline-end: var(--dinkelland-size-sm);
   --utrecht-page-footer-color: var(--dinkelland-color-white-100);
   --utrecht-icon-gap: var(--dinkelland-size-xs);
-  --utrecht-form-input-focus-border-color: var(--dinkelland-color-blue-48);
-  --utrecht-form-input-placeholder-color: var(--dinkelland-color-grey-42);
   --utrecht-form-input-padding-inline-start: var(--dinkelland-size-sm);
   --utrecht-form-input-padding-inline-end: var(--dinkelland-size-sm);
   --utrecht-form-input-padding-block-start: var(--dinkelland-size-xs);
@@ -238,6 +299,8 @@
   --utrecht-form-input-color: var(--dinkelland-color-black-33);
   --utrecht-form-input-border-width: var(--dinkelland-size-4xs);
   --utrecht-form-input-border-color: var(--dinkelland-color-grey-46);
+  --utrecht-form-input-focus-border-color: var(--dinkelland-color-blue-48);
+  --utrecht-form-input-placeholder-color: var(--dinkelland-color-grey-42);
   --utrecht-form-input-background-color: var(--dinkelland-color-white-100);
   --utrecht-document-font-size: var(--dinkelland-font-size-md);
   --utrecht-document-font-family: var(--dinkelland-typography-lato-font-family);
@@ -291,6 +354,10 @@
   --utrecht-blockquote-margin-inline-start: var(--dinkelland-size-xl);
   --utrecht-blockquote-color: var(--dinkelland-color-grey-64);
   --utrecht-blockquote-background-color: var(--dinkelland-color-grey-64);
+  --utrecht-badge-counter-padding-inline: var(--dinkelland-size-2xs);
+  --utrecht-badge-counter-padding-block: var(--dinkelland-size-2xs);
+  --utrecht-badge-counter-font-weight: var(--dinkelland-typography-font-weight-normal);
+  --utrecht-badge-counter-color: var(--dinkelland-color-white-100);
   --utrecht-alert-icon-gap: var(--dinkelland-size-xs);
   --utrecht-alert-ok-background-color: var(--dinkelland-color-alert-succes-background);
   --utrecht-alert-error-background-color: var(--dinkelland-color-alert-error-background);
@@ -336,6 +403,8 @@
   --dinkelland-color-alert-error: var(--dinkelland-color-black-20);
   --dinkelland-color-primary-hover: var(--dinkelland-color-blue-26);
   --dinkelland-color-primary: var(--dinkelland-color-blue-36);
+  --conduction-tabs-tab-selected-font-family: var(--utrecht-document-font-family);
+  --conduction-tabs-tab-font-family: var(--utrecht-document-font-family);
   --conduction-input-select-placeholder-color: var(--utrecht-form-input-placeholder-color);
   --conduction-pagination-current-page-color: var(--dinkelland-color-primary);
   --conduction-pagination-item-font-family: var(--utrecht-document-font-family);
@@ -363,6 +432,9 @@
   --utrecht-button-secondary-action-color: var(--dinkelland-color-primary);
   --utrecht-button-secondary-action-border-color: var(--dinkelland-color-primary);
   --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);
+  --utrecht-badge-counter-background-color: var(--dinkelland-color-primary);
   --utrecht-alert-icon-ok-color: var(--dinkelland-color-alert-succes);
   --utrecht-alert-icon-warning-color: var(--dinkelland-color-alert-warning);
   --utrecht-alert-icon-error-color: var(--dinkelland-color-alert-error);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Aug 2023 09:13:05 GMT
+ * Generated on Tue, 19 Sep 2023 14:30:44 GMT
  */
 
 export const dinkellandColorPrimary = "#006cb9";
@@ -31,9 +31,11 @@ export const dinkellandColorBlack0 = "#000000";
 export const dinkellandColorBlack13 = "#222222"; // Base/Black
 export const dinkellandColorBlack20 = "#333333";
 export const dinkellandColorBlack33 = "#555555";
+export const dinkellandColorGrey38 = "#5c6066";
 export const dinkellandColorGrey42 = "#6b6b6b";
 export const dinkellandColorGrey46 = "#767676";
 export const dinkellandColorGrey64 = "#9aa1ab"; // Base/Grey
+export const dinkellandColorGrey72 = "#AEB6C2";
 export const dinkellandColorGrey94 = "#edeff2";
 export const dinkellandColorLightgrey89 = "#e4e4e4"; // Base/LightGrey
 export const dinkellandColorLightgrey96 = "#f5f5f5";
@@ -114,6 +116,15 @@ export const utrechtAlertIconErrorColor = "#333333";
 export const utrechtAlertIconWarningColor = "#333333";
 export const utrechtAlertIconOkColor = "#333333";
 export const utrechtAlertIconGap = "8px";
+export const utrechtBadgeCounterBackgroundColor = "#006cb9";
+export const utrechtBadgeCounterBorderRadius = "50%";
+export const utrechtBadgeCounterColor = "#ffffff";
+export const utrechtBadgeCounterFontSize = "16px";
+export const utrechtBadgeCounterFontWeight = "400";
+export const utrechtBadgeCounterPaddingBlock = "4px";
+export const utrechtBadgeCounterPaddingInline = "4px";
+export const utrechtBadgeCounterFontFamily = "\"Lato\", Arial, sans-serif";
+export const utrechtBadgeCounterTextDecoration = "none";
 export const utrechtBlockquoteBackgroundColor = "#9aa1ab";
 export const utrechtBlockquoteColor = "#9aa1ab";
 export const utrechtBlockquoteMarginInlineStart = "32px";
@@ -183,6 +194,8 @@ export const utrechtDocumentColor = "#333333";
 export const utrechtDocumentFontFamily = "\"Lato\", Arial, sans-serif";
 export const utrechtDocumentFontSize = "16px";
 export const utrechtFormInputBackgroundColor = "#ffffff";
+export const utrechtFormInputPlaceholderColor = "#6b6b6b";
+export const utrechtFormInputFocusBorderColor = "#2e79c6";
 export const utrechtFormInputBorderColor = "#767676";
 export const utrechtFormInputBorderRadius = "0px";
 export const utrechtFormInputBorderWidth = "1px";
@@ -193,8 +206,6 @@ export const utrechtFormInputPaddingBlockEnd = "8px";
 export const utrechtFormInputPaddingBlockStart = "8px";
 export const utrechtFormInputPaddingInlineEnd = "14px";
 export const utrechtFormInputPaddingInlineStart = "14px";
-export const utrechtFormInputPlaceholderColor = "#6b6b6b";
-export const utrechtFormInputFocusBorderColor = "#2e79c6";
 export const utrechtIconGap = "8px";
 export const utrechtPageFooterMinHeight = "300px";
 export const utrechtPageFooterLogoMaxHeight = "100px";
@@ -237,19 +248,19 @@ export const utrechtTableCellPaddingBlockEnd = "18px";
 export const utrechtTableCellPaddingBlockStart = "18px";
 export const utrechtTableCellPaddingInlineEnd = "18px";
 export const utrechtTableCellPaddingInlineStart = "18px";
-export const utrechtTextBoxBackgroundColor = "#ffffff";
-export const utrechtTextBoxBorderColor = "#767676";
-export const utrechtTextBoxBorderRadius = "0px";
-export const utrechtTextBoxBorderWidth = "1px";
-export const utrechtTextBoxColor = "#555555";
-export const utrechtTextBoxFontFamily = "\"Lato\", Arial, sans-serif";
-export const utrechtTextBoxFontSize = "15px";
-export const utrechtTextBoxPaddingBlockEnd = "8px";
-export const utrechtTextBoxPaddingBlockStart = "8px";
-export const utrechtTextBoxPaddingInlineEnd = "14px";
-export const utrechtTextBoxPaddingInlineStart = "14px";
-export const utrechtTextBoxPlaceholderColor = "#6b6b6b";
-export const utrechtTextBoxFocusBorderColor = "#2e79c6";
+export const utrechtTextboxBackgroundColor = "#ffffff";
+export const utrechtTextboxPlaceholderColor = "#6b6b6b";
+export const utrechtTextboxFocusBorderColor = "#2e79c6";
+export const utrechtTextboxBorderColor = "#767676";
+export const utrechtTextboxBorderRadius = "0px";
+export const utrechtTextboxBorderWidth = "1px";
+export const utrechtTextboxColor = "#555555";
+export const utrechtTextboxFontFamily = "\"Lato\", Arial, sans-serif";
+export const utrechtTextboxFontSize = "15px";
+export const utrechtTextboxPaddingBlockEnd = "8px";
+export const utrechtTextboxPaddingBlockStart = "8px";
+export const utrechtTextboxPaddingInlineEnd = "14px";
+export const utrechtTextboxPaddingInlineStart = "14px";
 export const utrechtHeading1Color = "#222222";
 export const utrechtHeading1FontFamily = "\"Montserrat\", Arial, sans-serif";
 export const utrechtHeading1FontSize = "32px";
@@ -371,3 +382,64 @@ export const conductionInputSelectListOptionFontFamily = "\"Lato\", Arial, sans-
 export const conductionInputSelectListOptionHoverFontFamily = "\"Lato\", Arial, sans-serif";
 export const conductionInputSelectPlaceholderColor = "#6b6b6b";
 export const conductionInputSelectPlaceholderFontFamily = "\"Lato\", Arial, sans-serif";
+export const conductionTableWrapperScrollButtonBackgroundColor = "#f2f4f7";
+export const conductionTableWrapperScrollButtonColor = "#333333";
+export const conductionTableWrapperScrollButtonPaddingInlineStart = "14px";
+export const conductionTableWrapperScrollButtonPaddingInlineEnd = "14px";
+export const conductionTableWrapperScrollButtonHoverBackgroundColor = "#f2f4f7";
+export const conductionTableWrapperScrollButtonHoverColor = "#007a4d";
+export const conductionTabsTabBackgroundColor = "#f2f4f7";
+export const conductionTabsTabColor = "#5c6066";
+export const conductionTabsTabBorderWidth = "1px";
+export const conductionTabsTabBorderStyle = "solid";
+export const conductionTabsTabBorderColor = "#f2f4f7";
+export const conductionTabsTabBorderBottom = "0";
+export const conductionTabsTabBottom = "0px";
+export const conductionTabsTabPaddingBlockStart = "8px";
+export const conductionTabsTabPaddingBlockEnd = "8px";
+export const conductionTabsTabPaddingInlineStart = "14px";
+export const conductionTabsTabPaddingInlineEnd = "14px";
+export const conductionTabsTabMarginInlineEnd = "8px";
+export const conductionTabsTabFontSize = "16px";
+export const conductionTabsTabFontWeight = "400";
+export const conductionTabsTabFontFamily = "\"Lato\", Arial, sans-serif";
+export const conductionTabsTabMaxWidth = "unset";
+export const conductionTabsTabMinWidth = "160px";
+export const conductionTabsTabMinHeight = "61px";
+export const conductionTabsTabSelectedBackgroundColor = "transparent";
+export const conductionTabsTabSelectedColor = "#006cb9";
+export const conductionTabsTabSelectedBoxShadow = "0px 1px 0px 0px #ffffff";
+export const conductionTabsTabSelectedBorderWidth = "1px";
+export const conductionTabsTabSelectedBorderStyle = "solid";
+export const conductionTabsTabSelectedBorderColor = "#AEB6C2";
+export const conductionTabsTabSelectedBorderBottom = "0";
+export const conductionTabsTabSelectedBorderBottomWidth = "0px";
+export const conductionTabsTabSelectedBorderBottomStyle = "unset";
+export const conductionTabsTabSelectedBorderBottomColor = "unset";
+export const conductionTabsTabSelectedFontWeight = "400";
+export const conductionTabsTabSelectedFontFamily = "\"Lato\", Arial, sans-serif";
+export const conductionTabsTabSelectedHoverBackgroundColor = "transparent";
+export const conductionTabsTabSelectedHoverColor = "#006cb9";
+export const conductionTabsTabSelectedHoverTextDecoration = "underline";
+export const conductionTabsTabHoverBackgroundColor = "#f2f4f7";
+export const conductionTabsTabHoverColor = "#006cb9";
+export const conductionTabsTabHoverTextDecoration = "underline";
+export const conductionTabsTabListMarginBlockEnd = "0px";
+export const conductionTabsTabListBorderBottomWidth = "1px";
+export const conductionTabsTabListBorderBottomStyle = "solid";
+export const conductionTabsTabListBorderBottomColor = "#AEB6C2";
+export const conductionTabsTabPanelPaddingBlockStart = "24px";
+export const conductionTabsTabPanelPaddingBlockEnd = "24px";
+export const conductionTabsTabPanelPaddingInlineStart = "24px";
+export const conductionTabsTabPanelPaddingInlineEnd = "24px";
+export const conductionTabsTabPanelBorderWidth = "1px";
+export const conductionTabsTabPanelBorderStyle = "solid";
+export const conductionTabsTabPanelBorderColor = "#AEB6C2";
+export const conductionTabsTabPanelBorderTop = "0";
+export const conductionTabsScrollButtonBackgroundColor = "#f2f4f7";
+export const conductionTabsScrollButtonColor = "#5c6066";
+export const conductionTabsScrollButtonBorderWidth = "1px";
+export const conductionTabsScrollButtonBorderStyle = "solid";
+export const conductionTabsScrollButtonBorderColor = "#AEB6C2";
+export const conductionTabsScrollButtonHoverBackgroundColor = "#f2f4f7";
+export const conductionTabsScrollButtonHoverColor = "#006cb9";