@conduction/theme 1.0.20 → 1.0.21

package/README.md

@@ -4,6 +4,12 @@ Conduction's design tokens theme
 ## Changelog
 
 - **Version 1**
+  - 1.0.21:
+    - Added custom header and footer logo code to all themes.
+    - Set custom icon code from Utrecht to Conduction directory in all themes.
+    - Set custom textbox and form-input code from Utrecht to Conduction directory in all themes.
+    - Set custom alert code from Utrecht to Conduction directory in all themes.
+    - Fixed blockquote tokens not building for xxllnc and Leiden theme.
   - 1.0.20:
     - Set color tokens of all themes in ascending order.
     - Added Dinkelland theme.

package/conduction-design-tokens/dist/design-tokens.css

@@ -1,16 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Aug 2023 14:12:58 GMT
+ * Generated on Wed, 16 Aug 2023 08:06:13 GMT
  */
 
 .conduction-theme {
-  --utrecht-textbox-font-size: 15px;
-  --utrecht-textbox-border-radius: 3px;
   --utrecht-paragraph-margin-block-end: 0;
   --utrecht-paragraph-margin-block-start: 0;
   --utrecht-paragraph-line-height: 1.5em;
   --utrecht-page-max-inline-size: 1140px;
-  --utrecht-page-footer-background-image: unset;
   --utrecht-unordered-list-item-padding-inline-start: 1ch;
   --utrecht-unordered-list-padding-inline-start: 2ch;
   --utrecht-unordered-list-margin-block-end: 0;
@@ -19,8 +16,6 @@
   --utrecht-link-text-decoration-thickness: 0;
   --utrecht-link-text-decoration-color: unset;
   --utrecht-link-text-decoration: none;
-  --utrecht-form-input-font-size: 15px;
-  --utrecht-form-input-border-radius: 3px;
   --utrecht-code-block-margin-inline-end: 0;
   --utrecht-code-block-margin-inline-start: 0;
   --utrecht-code-font-size: inherit;
@@ -28,9 +23,17 @@
   --utrecht-button-font-weight: inherit;
   --utrecht-button-font-size: inherit;
   --utrecht-button-border-radius: 3px;
+  --utrecht-textbox-font-size: 15px;
+  --utrecht-textbox-border-radius: 3px;
   --utrecht-table-header-cell-text-transform: unset;
   --utrecht-table-margin-block-end: 0;
   --utrecht-table-header-text-transform: unset;
+  --utrecht-page-header-logo-max-width: 150px;
+  --utrecht-page-footer-background-image: unset;
+  --utrecht-page-footer-logo-max-width: 100px;
+  --utrecht-page-footer-logo-max-height: 100px;
+  --utrecht-form-input-font-size: 15px;
+  --utrecht-form-input-border-radius: 3px;
   --utrecht-card-border-width: unset;
   --utrecht-card-border-radius: 16px;
   --utrecht-action-submit-cursor: pointer;
@@ -89,32 +92,11 @@
   --conduction-color-error: #dc3545;
   --conduction-color-primary-hover: #2e5ed9;
   --conduction-color-primary: #4376fc;
-  --utrecht-textbox-focus-background-color: var(--conduction-color-white-100);
-  --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
-  --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
-  --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
-  --utrecht-textbox-padding-block-start: var(--conduction-size-xs);
-  --utrecht-textbox-padding-block-end: var(--conduction-size-xs);
-  --utrecht-textbox-font-family: var(--conduction-typography-sans-serif-font-family);
-  --utrecht-textbox-color: var(--conduction-color-grey-29);
-  --utrecht-textbox-border-width: var(--conduction-size-4xs);
-  --utrecht-textbox-border-color: var(--conduction-color-grey-48);
-  --utrecht-textbox-background-color: var(--conduction-color-white-100);
   --utrecht-paragraph-font-weight: var(--conduction-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--conduction-font-size-md);
   --utrecht-paragraph-font-family: var(--conduction-typography-sans-serif-font-family);
   --utrecht-page-margin-inline-end: var(--conduction-size-lg);
   --utrecht-page-margin-inline-start: var(--conduction-size-lg);
-  --utrecht-page-header-padding-block-end: var(--conduction-size-sm);
-  --utrecht-page-header-padding-block-start: var(--conduction-size-sm);
-  --utrecht-page-header-color: var(--conduction-color-white-100);
-  --utrecht-page-header-background-color: var(--conduction-color-primary);
-  --utrecht-page-footer-padding-block-start: var(--conduction-size-2xl);
-  --utrecht-page-footer-padding-block-end: var(--conduction-size-2xl);
-  --utrecht-page-footer-padding-inline-start: var(--conduction-size-sm);
-  --utrecht-page-footer-padding-inline-end: var(--conduction-size-sm);
-  --utrecht-page-footer-color: var(--conduction-color-black-0);
-  --utrecht-page-footer-background-color: var(--conduction-color-lightgrey-96);
   --utrecht-unordered-list-marker-color: var(--conduction-color-primary);
   --utrecht-unordered-list-item-margin-block-end: var(--conduction-size-xs);
   --utrecht-unordered-list-item-margin-block-start: var(--conduction-size-xs);
@@ -130,7 +112,6 @@
   --utrecht-link-hover-color: var(--conduction-color-primary-hover);
   --utrecht-link-text-underline-offset: var(--conduction-size-3xs);
   --utrecht-link-color: var(--conduction-color-primary);
-  --utrecht-icon-gap: var(--conduction-size-xs);
   --utrecht-heading-5-margin-block-start: var(--conduction-size-md);
   --utrecht-heading-5-margin-block-end: var(--conduction-size-lg);
   --utrecht-heading-5-font-weight: var(--conduction-typography-font-weight-light);
@@ -156,17 +137,6 @@
   --utrecht-heading-1-font-weight: var(--conduction-typography-font-weight-bold);
   --utrecht-heading-1-font-size: var(--conduction-font-size-3xl);
   --utrecht-heading-1-font-family: var(--conduction-typography-aldritch-font-family);
-  --utrecht-form-input-focus-background-color: var(--conduction-color-white-100);
-  --utrecht-form-input-placeholder-color: var(--conduction-color-grey-50);
-  --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
-  --utrecht-form-input-padding-inline-end: var(--conduction-size-sm);
-  --utrecht-form-input-padding-block-start: var(--conduction-size-xs);
-  --utrecht-form-input-padding-block-end: var(--conduction-size-xs);
-  --utrecht-form-input-font-family: var(--conduction-typography-sans-serif-font-family);
-  --utrecht-form-input-color: var(--conduction-color-grey-29);
-  --utrecht-form-input-border-width: var(--conduction-size-4xs);
-  --utrecht-form-input-border-color: var(--conduction-color-grey-48);
-  --utrecht-form-input-background-color: var(--conduction-color-white-100);
   --utrecht-document-font-size: var(--conduction-font-size-md);
   --utrecht-document-font-family: var(--conduction-typography-sans-serif-font-family);
   --utrecht-document-color: var(--conduction-color-black-0);
@@ -217,23 +187,17 @@
   --utrecht-blockquote-content-color: var(--conduction-color-black-0);
   --utrecht-blockquote-margin-inline-end: var(--conduction-size-xl);
   --utrecht-blockquote-margin-inline-start: var(--conduction-size-xl);
-  --utrecht-alert-icon-ok-color: var(--conduction-color-alert-succes);
-  --utrecht-alert-icon-warning-color: var(--conduction-color-alert-warning);
-  --utrecht-alert-icon-gap: var(--conduction-size-xs);
-  --utrecht-alert-icon-error-color: var(--conduction-color-alert-error);
-  --utrecht-alert-icon-color: var(--conduction-color-alert-info);
-  --utrecht-alert-ok-color: var(--conduction-color-alert-succes);
-  --utrecht-alert-ok-background-color: var(--conduction-color-alert-succes-background);
-  --utrecht-alert-error-color: var(--conduction-color-alert-error);
-  --utrecht-alert-error-background-color: var(--conduction-color-alert-error-background);
-  --utrecht-alert-warning-color: var(--conduction-color-alert-warning);
-  --utrecht-alert-warning-background-color: var(--conduction-color-alert-warning-background);
-  --utrecht-alert-padding-inline-end: var(--conduction-size-lg);
-  --utrecht-alert-padding-inline-start: var(--conduction-size-lg);
-  --utrecht-alert-padding-block-end: var(--conduction-size-lg);
-  --utrecht-alert-padding-block-start: var(--conduction-size-lg);
-  --utrecht-alert-color: var(--conduction-color-alert-info);
-  --utrecht-alert-background-color: var(--conduction-color-alert-info-background);
+  --utrecht-textbox-focus-background-color: var(--conduction-color-white-100);
+  --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
+  --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
+  --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
+  --utrecht-textbox-padding-block-start: var(--conduction-size-xs);
+  --utrecht-textbox-padding-block-end: var(--conduction-size-xs);
+  --utrecht-textbox-font-family: var(--conduction-typography-sans-serif-font-family);
+  --utrecht-textbox-color: var(--conduction-color-grey-29);
+  --utrecht-textbox-border-width: var(--conduction-size-4xs);
+  --utrecht-textbox-border-color: var(--conduction-color-grey-48);
+  --utrecht-textbox-background-color: var(--conduction-color-white-100);
   --utrecht-table-cell-padding-inline-start: var(--conduction-size-md);
   --utrecht-table-cell-padding-inline-end: var(--conduction-size-md);
   --utrecht-table-cell-padding-block-start: var(--conduction-size-md);
@@ -247,12 +211,51 @@
   --utrecht-table-header-border-block-end-width: var(--conduction-size-4xs);
   --utrecht-table-header-border-block-end-color: var(--conduction-color-grey-82);
   --utrecht-table-background-color: var(--conduction-color-white-100);
+  --utrecht-page-header-padding-block-end: var(--conduction-size-sm);
+  --utrecht-page-header-padding-block-start: var(--conduction-size-sm);
+  --utrecht-page-header-color: var(--conduction-color-white-100);
+  --utrecht-page-header-background-color: var(--conduction-color-primary);
+  --utrecht-page-footer-padding-block-start: var(--conduction-size-2xl);
+  --utrecht-page-footer-padding-block-end: var(--conduction-size-2xl);
+  --utrecht-page-footer-padding-inline-start: var(--conduction-size-sm);
+  --utrecht-page-footer-padding-inline-end: var(--conduction-size-sm);
+  --utrecht-page-footer-color: var(--conduction-color-black-0);
+  --utrecht-page-footer-background-color: var(--conduction-color-lightgrey-96);
+  --utrecht-icon-gap: var(--conduction-size-xs);
+  --utrecht-form-input-focus-background-color: var(--conduction-color-white-100);
+  --utrecht-form-input-placeholder-color: var(--conduction-color-grey-50);
+  --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
+  --utrecht-form-input-padding-inline-end: var(--conduction-size-sm);
+  --utrecht-form-input-padding-block-start: var(--conduction-size-xs);
+  --utrecht-form-input-padding-block-end: var(--conduction-size-xs);
+  --utrecht-form-input-font-family: var(--conduction-typography-sans-serif-font-family);
+  --utrecht-form-input-color: var(--conduction-color-grey-29);
+  --utrecht-form-input-border-width: var(--conduction-size-4xs);
+  --utrecht-form-input-border-color: var(--conduction-color-grey-48);
+  --utrecht-form-input-background-color: var(--conduction-color-white-100);
   --utrecht-card-padding-block-start: var(--conduction-size-md);
   --utrecht-card-padding-block-end: var(--conduction-size-md);
   --utrecht-card-padding-inline-start: var(--conduction-size-md);
   --utrecht-card-padding-inline-end: var(--conduction-size-md);
   --utrecht-card-color: var(--conduction-color-black-0);
   --utrecht-card-background-color: var(--conduction-color-white-100);
+  --utrecht-alert-ok-color: var(--conduction-color-alert-succes);
+  --utrecht-alert-ok-background-color: var(--conduction-color-alert-succes-background);
+  --utrecht-alert-error-color: var(--conduction-color-alert-error);
+  --utrecht-alert-error-background-color: var(--conduction-color-alert-error-background);
+  --utrecht-alert-warning-color: var(--conduction-color-alert-warning);
+  --utrecht-alert-warning-background-color: var(--conduction-color-alert-warning-background);
+  --utrecht-alert-padding-inline-end: var(--conduction-size-lg);
+  --utrecht-alert-padding-inline-start: var(--conduction-size-lg);
+  --utrecht-alert-padding-block-end: var(--conduction-size-lg);
+  --utrecht-alert-padding-block-start: var(--conduction-size-lg);
+  --utrecht-alert-color: var(--conduction-color-alert-info);
+  --utrecht-alert-background-color: var(--conduction-color-alert-info-background);
+  --utrecht-alert-icon-ok-color: var(--conduction-color-alert-succes);
+  --utrecht-alert-icon-warning-color: var(--conduction-color-alert-warning);
+  --utrecht-alert-icon-error-color: var(--conduction-color-alert-error);
+  --utrecht-alert-icon-color: var(--conduction-color-alert-info);
+  --utrecht-alert-icon-gap: var(--conduction-size-xs);
   --utrecht-space-inline-3xl: var(--conduction-size-3xl);
   --utrecht-space-inline-2xl: var(--conduction-size-2xl);
   --utrecht-space-inline-xl: var(--conduction-size-xl);

package/conduction-design-tokens/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Aug 2023 14:12:58 GMT
+ * Generated on Wed, 16 Aug 2023 08:06:13 GMT
  */
 
 export const conductionColorPrimary = "#4376fc";
@@ -93,6 +93,23 @@ export const utrechtSpaceInlineLg = "24px";
 export const utrechtSpaceInlineXl = "32px";
 export const utrechtSpaceInline2xl = "48px";
 export const utrechtSpaceInline3xl = "72px";
+export const utrechtAlertIconGap = "8px";
+export const utrechtAlertIconColor = "#004085";
+export const utrechtAlertIconErrorColor = "#721c24";
+export const utrechtAlertIconWarningColor = "#856404";
+export const utrechtAlertIconOkColor = "#155724";
+export const utrechtAlertBackgroundColor = "#cce5ff";
+export const utrechtAlertColor = "#004085";
+export const utrechtAlertPaddingBlockStart = "24px";
+export const utrechtAlertPaddingBlockEnd = "24px";
+export const utrechtAlertPaddingInlineStart = "24px";
+export const utrechtAlertPaddingInlineEnd = "24px";
+export const utrechtAlertWarningBackgroundColor = "#fff3cd";
+export const utrechtAlertWarningColor = "#856404";
+export const utrechtAlertErrorBackgroundColor = "#f8d7da";
+export const utrechtAlertErrorColor = "#721c24";
+export const utrechtAlertOkBackgroundColor = "#d4edda";
+export const utrechtAlertOkColor = "#155724";
 export const utrechtCardBackgroundColor = "#ffffff";
 export const utrechtCardBorderRadius = "16px";
 export const utrechtCardBorderWidth = "unset";
@@ -101,6 +118,34 @@ export const utrechtCardPaddingInlineEnd = "18px";
 export const utrechtCardPaddingInlineStart = "18px";
 export const utrechtCardPaddingBlockEnd = "18px";
 export const utrechtCardPaddingBlockStart = "18px";
+export const utrechtFormInputBackgroundColor = "#ffffff";
+export const utrechtFormInputBorderColor = "#7a7a7a";
+export const utrechtFormInputBorderRadius = "3px";
+export const utrechtFormInputBorderWidth = "1px";
+export const utrechtFormInputColor = "#4a4a4a";
+export const utrechtFormInputFontFamily = "\"Noto Sans\", Arial, sans-serif";
+export const utrechtFormInputFontSize = "15px";
+export const utrechtFormInputPaddingBlockEnd = "8px";
+export const utrechtFormInputPaddingBlockStart = "8px";
+export const utrechtFormInputPaddingInlineEnd = "14px";
+export const utrechtFormInputPaddingInlineStart = "14px";
+export const utrechtFormInputPlaceholderColor = "#808080";
+export const utrechtFormInputFocusBackgroundColor = "#ffffff";
+export const utrechtIconGap = "8px";
+export const utrechtPageFooterLogoMaxHeight = "100px";
+export const utrechtPageFooterLogoMaxWidth = "100px";
+export const utrechtPageFooterBackgroundColor = "#f5f5f5";
+export const utrechtPageFooterBackgroundImage = "unset";
+export const utrechtPageFooterColor = "#000000";
+export const utrechtPageFooterPaddingInlineEnd = "14px";
+export const utrechtPageFooterPaddingInlineStart = "14px";
+export const utrechtPageFooterPaddingBlockEnd = "48px";
+export const utrechtPageFooterPaddingBlockStart = "48px";
+export const utrechtPageHeaderLogoMaxWidth = "150px";
+export const utrechtPageHeaderBackgroundColor = "#4376fc";
+export const utrechtPageHeaderColor = "#ffffff";
+export const utrechtPageHeaderPaddingBlockStart = "14px";
+export const utrechtPageHeaderPaddingBlockEnd = "14px";
 export const utrechtTableBackgroundColor = "#ffffff";
 export const utrechtTableHeaderBorderBlockEndColor = "#d1d1d1";
 export const utrechtTableHeaderBorderBlockEndWidth = "1px";
@@ -122,23 +167,19 @@ export const utrechtTableCellPaddingBlockEnd = "18px";
 export const utrechtTableCellPaddingBlockStart = "18px";
 export const utrechtTableCellPaddingInlineEnd = "18px";
 export const utrechtTableCellPaddingInlineStart = "18px";
-export const utrechtAlertBackgroundColor = "#cce5ff";
-export const utrechtAlertColor = "#004085";
-export const utrechtAlertPaddingBlockStart = "24px";
-export const utrechtAlertPaddingBlockEnd = "24px";
-export const utrechtAlertPaddingInlineStart = "24px";
-export const utrechtAlertPaddingInlineEnd = "24px";
-export const utrechtAlertWarningBackgroundColor = "#fff3cd";
-export const utrechtAlertWarningColor = "#856404";
-export const utrechtAlertErrorBackgroundColor = "#f8d7da";
-export const utrechtAlertErrorColor = "#721c24";
-export const utrechtAlertOkBackgroundColor = "#d4edda";
-export const utrechtAlertOkColor = "#155724";
-export const utrechtAlertIconColor = "#004085";
-export const utrechtAlertIconErrorColor = "#721c24";
-export const utrechtAlertIconGap = "8px";
-export const utrechtAlertIconWarningColor = "#856404";
-export const utrechtAlertIconOkColor = "#155724";
+export const utrechtTextboxBackgroundColor = "#ffffff";
+export const utrechtTextboxBorderColor = "#7a7a7a";
+export const utrechtTextboxBorderRadius = "3px";
+export const utrechtTextboxBorderWidth = "1px";
+export const utrechtTextboxColor = "#4a4a4a";
+export const utrechtTextboxFontFamily = "\"Noto Sans\", 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 = "#808080";
+export const utrechtTextboxFocusBackgroundColor = "#ffffff";
 export const utrechtBlockquoteMarginInlineStart = "32px";
 export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#000000";
@@ -196,19 +237,6 @@ export const utrechtDocumentBackgroundColor = "#fafafa";
 export const utrechtDocumentColor = "#000000";
 export const utrechtDocumentFontFamily = "\"Noto Sans\", Arial, sans-serif";
 export const utrechtDocumentFontSize = "18px";
-export const utrechtFormInputBackgroundColor = "#ffffff";
-export const utrechtFormInputBorderColor = "#7a7a7a";
-export const utrechtFormInputBorderRadius = "3px";
-export const utrechtFormInputBorderWidth = "1px";
-export const utrechtFormInputColor = "#4a4a4a";
-export const utrechtFormInputFontFamily = "\"Noto Sans\", Arial, sans-serif";
-export const utrechtFormInputFontSize = "15px";
-export const utrechtFormInputPaddingBlockEnd = "8px";
-export const utrechtFormInputPaddingBlockStart = "8px";
-export const utrechtFormInputPaddingInlineEnd = "14px";
-export const utrechtFormInputPaddingInlineStart = "14px";
-export const utrechtFormInputPlaceholderColor = "#808080";
-export const utrechtFormInputFocusBackgroundColor = "#ffffff";
 export const utrechtHeading1FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
 export const utrechtHeading1FontSize = "48px";
 export const utrechtHeading1FontWeight = "700";
@@ -234,7 +262,6 @@ export const utrechtHeading5FontSize = "18px";
 export const utrechtHeading5FontWeight = "100";
 export const utrechtHeading5MarginBlockEnd = "24px";
 export const utrechtHeading5MarginBlockStart = "18px";
-export const utrechtIconGap = "8px";
 export const utrechtLinkColor = "#4376fc";
 export const utrechtLinkTextDecoration = "none";
 export const utrechtLinkTextDecorationColor = "unset";
@@ -260,17 +287,6 @@ export const utrechtUnorderedListItemMarginBlockStart = "8px";
 export const utrechtUnorderedListItemMarginBlockEnd = "8px";
 export const utrechtUnorderedListItemPaddingInlineStart = "1ch";
 export const utrechtUnorderedListMarkerColor = "#4376fc";
-export const utrechtPageFooterBackgroundColor = "#f5f5f5";
-export const utrechtPageFooterBackgroundImage = "unset";
-export const utrechtPageFooterColor = "#000000";
-export const utrechtPageFooterPaddingInlineEnd = "14px";
-export const utrechtPageFooterPaddingInlineStart = "14px";
-export const utrechtPageFooterPaddingBlockEnd = "48px";
-export const utrechtPageFooterPaddingBlockStart = "48px";
-export const utrechtPageHeaderBackgroundColor = "#4376fc";
-export const utrechtPageHeaderColor = "#ffffff";
-export const utrechtPageHeaderPaddingBlockStart = "14px";
-export const utrechtPageHeaderPaddingBlockEnd = "14px";
 export const utrechtPageMarginInlineStart = "24px";
 export const utrechtPageMarginInlineEnd = "24px";
 export const utrechtPageMaxInlineSize = "1140px";
@@ -281,16 +297,3 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
-export const utrechtTextboxBackgroundColor = "#ffffff";
-export const utrechtTextboxBorderColor = "#7a7a7a";
-export const utrechtTextboxBorderRadius = "3px";
-export const utrechtTextboxBorderWidth = "1px";
-export const utrechtTextboxColor = "#4a4a4a";
-export const utrechtTextboxFontFamily = "\"Noto Sans\", 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 = "#808080";
-export const utrechtTextboxFocusBackgroundColor = "#ffffff";