@conduction/theme 1.0.24 → 1.0.26

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

@@ -0,0 +1,19 @@
+{
+  "conduction": {
+    "card-wrapper": {
+      "background-color": { "value": "{epe.color.white.100}" },
+      "border-color": {},
+      "border-width": {},
+      "border-style": {},
+      "border-radius": {},
+      "color": { "value": "{utrecht.document.color}" },
+      "hover": {
+        "background-color": {}
+      },
+      "padding-inline-end": { "value": "{epe.size.md}" },
+      "padding-inline-start": { "value": "{epe.size.md}" },
+      "padding-block-end": { "value": "{epe.size.md}" },
+      "padding-block-start": { "value": "{epe.size.md}" }
+    }
+  }
+}

package/municipalities/leiden-design-tokens/README.md

@@ -0,0 +1,3 @@
+# NL Design System design tokens Gemeente Leiden
+
+These tokens have been obtained by analysing the [website of Gemeente Leiden](https://gemeente.leiden.nl/).

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 18 Aug 2023 12:11:24 GMT
+ * Generated on Tue, 22 Aug 2023 15:07:34 GMT
  */
 
 .leiden-theme {
@@ -19,12 +19,6 @@
   --utrecht-link-text-decoration-thickness: 0;
   --utrecht-link-text-decoration-color: unset;
   --utrecht-link-text-decoration: none;
-  --utrecht-code-block-margin-inline-end: 0;
-  --utrecht-code-block-margin-inline-start: 0;
-  --utrecht-code-font-size: inherit;
-  --utrecht-button-primary-action-font-weight: inherit;
-  --utrecht-button-font-weight: inherit;
-  --utrecht-button-font-size: inherit;
   --utrecht-textbox-font-size: 15px;
   --utrecht-textbox-border-radius: 0px;
   --utrecht-table-header-cell-text-transform: unset;
@@ -36,7 +30,12 @@
   --utrecht-page-footer-logo-max-height: 100px;
   --utrecht-form-input-font-size: 15px;
   --utrecht-form-input-border-radius: 0px;
-  --utrecht-card-border-width: unset;
+  --utrecht-code-block-margin-inline-end: 0;
+  --utrecht-code-block-margin-inline-start: 0;
+  --utrecht-code-font-size: inherit;
+  --utrecht-button-primary-action-font-weight: inherit;
+  --utrecht-button-font-weight: inherit;
+  --utrecht-button-font-size: inherit;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
@@ -90,6 +89,12 @@
   --conduction-input-select-invalid-border-color: var(--leiden-color-error);
   --conduction-input-select-border-radius: var(--utrecht-form-input-border-radius);
   --conduction-input-select-background-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);
+  --conduction-card-wrapper-padding-inline-end: var(--leiden-size-xl);
+  --conduction-card-wrapper-color: var(--leiden-color-black-9);
+  --conduction-card-wrapper-background-color: var(--leiden-color-lightgrey-89);
   --utrecht-paragraph-font-weight: var(--leiden-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--leiden-font-size-md);
   --utrecht-paragraph-font-family: var(--leiden-typography-sans-serif-font-family);
@@ -135,6 +140,48 @@
   --utrecht-heading-1-font-weight: var(--leiden-typography-font-weight-bold);
   --utrecht-heading-1-font-size: var(--leiden-font-size-3xl);
   --utrecht-heading-1-font-family: var(--leiden-typography-sans-serif-font-family);
+  --utrecht-textbox-placeholder-color: var(--leiden-color-lightblue-24);
+  --utrecht-textbox-padding-inline-start: var(--leiden-size-sm);
+  --utrecht-textbox-padding-inline-end: var(--leiden-size-sm);
+  --utrecht-textbox-padding-block-start: var(--leiden-size-xs);
+  --utrecht-textbox-padding-block-end: var(--leiden-size-xs);
+  --utrecht-textbox-font-family: var(--leiden-typography-sans-serif-font-family);
+  --utrecht-textbox-color: var(--leiden-color-grey-11);
+  --utrecht-textbox-border-width: var(--leiden-size-4xs);
+  --utrecht-textbox-border-color: var(--leiden-color-grey-33);
+  --utrecht-textbox-background-color: var(--leiden-color-white-100);
+  --utrecht-table-cell-padding-inline-start: var(--leiden-size-md);
+  --utrecht-table-cell-padding-inline-end: var(--leiden-size-md);
+  --utrecht-table-cell-padding-block-start: var(--leiden-size-md);
+  --utrecht-table-cell-padding-block-end: var(--leiden-size-md);
+  --utrecht-table-header-cell-font-weight: var(--leiden-typography-font-weight-bold);
+  --utrecht-table-margin-block-start: var(--leiden-size-md);
+  --utrecht-table-border-width: var(--leiden-size-4xs);
+  --utrecht-table-border-color: var(--leiden-color-lightgrey-89);
+  --utrecht-table-row-border-block-end-width: var(--leiden-size-4xs);
+  --utrecht-table-row-border-block-end-color: var(--leiden-color-lightgrey-89);
+  --utrecht-table-header-font-weight: var(--leiden-typography-font-weight-bold);
+  --utrecht-page-header-padding-block-end: var(--leiden-size-sm);
+  --utrecht-page-header-padding-block-start: var(--leiden-size-sm);
+  --utrecht-page-header-color: var(--leiden-color-white-100);
+  --utrecht-page-header-background-color: var(--leiden-color-black-9);
+  --utrecht-page-footer-padding-block-start: var(--leiden-size-2xl);
+  --utrecht-page-footer-padding-block-end: var(--leiden-size-2xl);
+  --utrecht-page-footer-padding-inline-start: var(--leiden-size-sm);
+  --utrecht-page-footer-padding-inline-end: var(--leiden-size-sm);
+  --utrecht-page-footer-color: var(--leiden-color-white-100);
+  --utrecht-page-footer-background-color: var(--leiden-color-black-9);
+  --utrecht-icon-gap: var(--leiden-size-xs);
+  --utrecht-form-input-placeholder-color: var(--leiden-color-lightblue-24);
+  --utrecht-form-input-padding-inline-start: var(--leiden-size-sm);
+  --utrecht-form-input-padding-inline-end: var(--leiden-size-sm);
+  --utrecht-form-input-padding-block-start: var(--leiden-size-xs);
+  --utrecht-form-input-padding-block-end: var(--leiden-size-xs);
+  --utrecht-form-input-font-family: var(--leiden-typography-sans-serif-font-family);
+  --utrecht-form-input-color: var(--leiden-color-grey-11);
+  --utrecht-form-input-border-width: var(--leiden-size-4xs);
+  --utrecht-form-input-border-color: var(--leiden-color-grey-33);
+  --utrecht-form-input-background-color: var(--leiden-color-white-100);
   --utrecht-document-font-size: var(--leiden-font-size-md);
   --utrecht-document-font-family: var(--leiden-typography-sans-serif-font-family);
   --utrecht-document-color: var(--leiden-color-black-9);
@@ -183,54 +230,11 @@
   --utrecht-blockquote-content-color: var(--leiden-color-black-9);
   --utrecht-blockquote-margin-inline-end: var(--leiden-size-xl);
   --utrecht-blockquote-margin-inline-start: var(--leiden-size-xl);
-  --utrecht-textbox-placeholder-color: var(--leiden-color-lightblue-24);
-  --utrecht-textbox-padding-inline-start: var(--leiden-size-sm);
-  --utrecht-textbox-padding-inline-end: var(--leiden-size-sm);
-  --utrecht-textbox-padding-block-start: var(--leiden-size-xs);
-  --utrecht-textbox-padding-block-end: var(--leiden-size-xs);
-  --utrecht-textbox-font-family: var(--leiden-typography-sans-serif-font-family);
-  --utrecht-textbox-color: var(--leiden-color-grey-11);
-  --utrecht-textbox-border-width: var(--leiden-size-4xs);
-  --utrecht-textbox-border-color: var(--leiden-color-grey-33);
-  --utrecht-textbox-background-color: var(--leiden-color-white-100);
-  --utrecht-table-cell-padding-inline-start: var(--leiden-size-md);
-  --utrecht-table-cell-padding-inline-end: var(--leiden-size-md);
-  --utrecht-table-cell-padding-block-start: var(--leiden-size-md);
-  --utrecht-table-cell-padding-block-end: var(--leiden-size-md);
-  --utrecht-table-header-cell-font-weight: var(--leiden-typography-font-weight-bold);
-  --utrecht-table-margin-block-start: var(--leiden-size-md);
-  --utrecht-table-border-width: var(--leiden-size-4xs);
-  --utrecht-table-border-color: var(--leiden-color-lightgrey-89);
-  --utrecht-table-row-border-block-end-width: var(--leiden-size-4xs);
-  --utrecht-table-row-border-block-end-color: var(--leiden-color-lightgrey-89);
-  --utrecht-table-header-font-weight: var(--leiden-typography-font-weight-bold);
-  --utrecht-page-header-padding-block-end: var(--leiden-size-sm);
-  --utrecht-page-header-padding-block-start: var(--leiden-size-sm);
-  --utrecht-page-header-color: var(--leiden-color-white-100);
-  --utrecht-page-header-background-color: var(--leiden-color-black-9);
-  --utrecht-page-footer-padding-block-start: var(--leiden-size-2xl);
-  --utrecht-page-footer-padding-block-end: var(--leiden-size-2xl);
-  --utrecht-page-footer-padding-inline-start: var(--leiden-size-sm);
-  --utrecht-page-footer-padding-inline-end: var(--leiden-size-sm);
-  --utrecht-page-footer-color: var(--leiden-color-white-100);
-  --utrecht-page-footer-background-color: var(--leiden-color-black-9);
-  --utrecht-icon-gap: var(--leiden-size-xs);
-  --utrecht-form-input-placeholder-color: var(--leiden-color-lightblue-24);
-  --utrecht-form-input-padding-inline-start: var(--leiden-size-sm);
-  --utrecht-form-input-padding-inline-end: var(--leiden-size-sm);
-  --utrecht-form-input-padding-block-start: var(--leiden-size-xs);
-  --utrecht-form-input-padding-block-end: var(--leiden-size-xs);
-  --utrecht-form-input-font-family: var(--leiden-typography-sans-serif-font-family);
-  --utrecht-form-input-color: var(--leiden-color-grey-11);
-  --utrecht-form-input-border-width: var(--leiden-size-4xs);
-  --utrecht-form-input-border-color: var(--leiden-color-grey-33);
-  --utrecht-form-input-background-color: var(--leiden-color-white-100);
-  --utrecht-card-padding-block-start: var(--leiden-size-sm);
-  --utrecht-card-padding-block-end: var(--leiden-size-sm);
-  --utrecht-card-padding-inline-start: var(--leiden-size-xl);
-  --utrecht-card-padding-inline-end: var(--leiden-size-xl);
-  --utrecht-card-color: var(--leiden-color-black-9);
-  --utrecht-card-background-color: var(--leiden-color-lightgrey-89);
+  --utrecht-alert-icon-gap: var(--leiden-size-xs);
+  --utrecht-alert-icon-ok-color: var(--leiden-color-alert-succes);
+  --utrecht-alert-icon-warning-color: var(--leiden-color-alert-warning);
+  --utrecht-alert-icon-error-color: var(--leiden-color-alert-error);
+  --utrecht-alert-icon-color: var(--leiden-color-alert-info);
   --utrecht-alert-ok-color: var(--leiden-color-alert-succes);
   --utrecht-alert-ok-background-color: var(--leiden-color-alert-succes-background);
   --utrecht-alert-error-color: var(--leiden-color-alert-error);
@@ -243,11 +247,6 @@
   --utrecht-alert-padding-block-start: var(--leiden-size-lg);
   --utrecht-alert-color: var(--leiden-color-alert-info);
   --utrecht-alert-background-color: var(--leiden-color-alert-info-background);
-  --utrecht-alert-icon-ok-color: var(--leiden-color-alert-succes);
-  --utrecht-alert-icon-warning-color: var(--leiden-color-alert-warning);
-  --utrecht-alert-icon-error-color: var(--leiden-color-alert-error);
-  --utrecht-alert-icon-color: var(--leiden-color-alert-info);
-  --utrecht-alert-icon-gap: var(--leiden-size-xs);
   --utrecht-space-inline-3xl: var(--leiden-size-3xl);
   --utrecht-space-inline-2xl: var(--leiden-size-2xl);
   --utrecht-space-inline-xl: var(--leiden-size-xl);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 18 Aug 2023 12:11:24 GMT
+ * Generated on Tue, 22 Aug 2023 15:07:34 GMT
  */
 
 export const leidenColorPrimary = "#d62410";
@@ -83,11 +83,6 @@ 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";
@@ -100,13 +95,65 @@ export const utrechtAlertErrorBackgroundColor = "#f8d7da";
 export const utrechtAlertErrorColor = "#721c24";
 export const utrechtAlertOkBackgroundColor = "#d4edda";
 export const utrechtAlertOkColor = "#155724";
-export const utrechtCardBackgroundColor = "#e4e4e4";
-export const utrechtCardBorderWidth = "unset";
-export const utrechtCardColor = "#0d1921";
-export const utrechtCardPaddingInlineEnd = "32px";
-export const utrechtCardPaddingInlineStart = "32px";
-export const utrechtCardPaddingBlockEnd = "14px";
-export const utrechtCardPaddingBlockStart = "14px";
+export const utrechtAlertIconColor = "#004085";
+export const utrechtAlertIconErrorColor = "#721c24";
+export const utrechtAlertIconWarningColor = "#856404";
+export const utrechtAlertIconOkColor = "#155724";
+export const utrechtAlertIconGap = "8px";
+export const utrechtBlockquoteMarginInlineStart = "32px";
+export const utrechtBlockquoteMarginInlineEnd = "32px";
+export const utrechtBlockquoteContentColor = "#0d1921";
+export const utrechtBlockquoteContentFontSize = "18px";
+export const utrechtButtonBackgroundColor = "#d62410";
+export const utrechtButtonBorderColor = "#d62410";
+export const utrechtButtonBorderRadius = "4px";
+export const utrechtButtonBorderWidth = "2px";
+export const utrechtButtonColor = "#ffffff";
+export const utrechtButtonFontFamily = "\"Open Sans\", Arial, sans-serif";
+export const utrechtButtonFontSize = "inherit";
+export const utrechtButtonFontWeight = "inherit";
+export const utrechtButtonPaddingBlockStart = "8px";
+export const utrechtButtonPaddingBlockEnd = "8px";
+export const utrechtButtonPaddingInlineStart = "8px";
+export const utrechtButtonPaddingInlineEnd = "8px";
+export const utrechtButtonIconGap = "8px";
+export const utrechtButtonHoverBackgroundColor = "#ffffff";
+export const utrechtButtonHoverColor = "#b81f0e";
+export const utrechtButtonPrimaryActionBackgroundColor = "#d62410";
+export const utrechtButtonPrimaryActionBorderWidth = "2px";
+export const utrechtButtonPrimaryActionColor = "#ffffff";
+export const utrechtButtonPrimaryActionFontWeight = "inherit";
+export const utrechtButtonPrimaryActionHoverBackgroundColor = "#d62410";
+export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
+export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
+export const utrechtButtonSecondaryActionBorderColor = "#d62410";
+export const utrechtButtonSecondaryActionBorderWidth = "2px";
+export const utrechtButtonSecondaryActionColor = "#d62410";
+export const utrechtButtonSecondaryActionFontWeight = "400";
+export const utrechtButtonSecondaryActionHoverBackgroundColor = "#ffffff";
+export const utrechtButtonSecondaryActionHoverBorderColor = "#b81f0e";
+export const utrechtButtonSecondaryActionHoverColor = "#b81f0e";
+export const utrechtCodeBackgroundColor = "#e4e4e4";
+export const utrechtCodeColor = "#0d1921";
+export const utrechtCodeFontFamily = "Monospace, \"Lucida Console\"";
+export const utrechtCodeFontSize = "inherit";
+export const utrechtCodeBlockBackgroundColor = "#e4e4e4";
+export const utrechtCodeBlockColor = "#0d1921";
+export const utrechtCodeBlockFontFamily = "Monospace, \"Lucida Console\"";
+export const utrechtCodeBlockFontSize = "18px";
+export const utrechtCodeBlockLineHeight = "24px";
+export const utrechtCodeBlockMarginBlockStart = "18px";
+export const utrechtCodeBlockMarginBlockEnd = "18px";
+export const utrechtCodeBlockMarginInlineStart = 0;
+export const utrechtCodeBlockMarginInlineEnd = 0;
+export const utrechtCodeBlockPaddingBlockStart = "18px";
+export const utrechtCodeBlockPaddingBlockEnd = "18px";
+export const utrechtCodeBlockPaddingInlineStart = "18px";
+export const utrechtCodeBlockPaddingInlineEnd = "18px";
+export const utrechtDocumentBackgroundColor = "#ffffff";
+export const utrechtDocumentColor = "#0d1921";
+export const utrechtDocumentFontFamily = "\"Open Sans\", Arial, sans-serif";
+export const utrechtDocumentFontSize = "18px";
 export const utrechtFormInputBackgroundColor = "#ffffff";
 export const utrechtFormInputBorderColor = "#5f594a";
 export const utrechtFormInputBorderRadius = "0px";
@@ -165,60 +212,6 @@ export const utrechtTextboxPaddingBlockStart = "8px";
 export const utrechtTextboxPaddingInlineEnd = "14px";
 export const utrechtTextboxPaddingInlineStart = "14px";
 export const utrechtTextboxPlaceholderColor = "#2c3e50";
-export const utrechtBlockquoteMarginInlineStart = "32px";
-export const utrechtBlockquoteMarginInlineEnd = "32px";
-export const utrechtBlockquoteContentColor = "#0d1921";
-export const utrechtBlockquoteContentFontSize = "18px";
-export const utrechtButtonBackgroundColor = "#d62410";
-export const utrechtButtonBorderColor = "#d62410";
-export const utrechtButtonBorderRadius = "4px";
-export const utrechtButtonBorderWidth = "2px";
-export const utrechtButtonColor = "#ffffff";
-export const utrechtButtonFontFamily = "\"Open Sans\", Arial, sans-serif";
-export const utrechtButtonFontSize = "inherit";
-export const utrechtButtonFontWeight = "inherit";
-export const utrechtButtonPaddingBlockStart = "8px";
-export const utrechtButtonPaddingBlockEnd = "8px";
-export const utrechtButtonPaddingInlineStart = "8px";
-export const utrechtButtonPaddingInlineEnd = "8px";
-export const utrechtButtonIconGap = "8px";
-export const utrechtButtonHoverBackgroundColor = "#ffffff";
-export const utrechtButtonHoverColor = "#b81f0e";
-export const utrechtButtonPrimaryActionBackgroundColor = "#d62410";
-export const utrechtButtonPrimaryActionBorderWidth = "2px";
-export const utrechtButtonPrimaryActionColor = "#ffffff";
-export const utrechtButtonPrimaryActionFontWeight = "inherit";
-export const utrechtButtonPrimaryActionHoverBackgroundColor = "#d62410";
-export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
-export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
-export const utrechtButtonSecondaryActionBorderColor = "#d62410";
-export const utrechtButtonSecondaryActionBorderWidth = "2px";
-export const utrechtButtonSecondaryActionColor = "#d62410";
-export const utrechtButtonSecondaryActionFontWeight = "400";
-export const utrechtButtonSecondaryActionHoverBackgroundColor = "#ffffff";
-export const utrechtButtonSecondaryActionHoverBorderColor = "#b81f0e";
-export const utrechtButtonSecondaryActionHoverColor = "#b81f0e";
-export const utrechtCodeBackgroundColor = "#e4e4e4";
-export const utrechtCodeColor = "#0d1921";
-export const utrechtCodeFontFamily = "Monospace, \"Lucida Console\"";
-export const utrechtCodeFontSize = "inherit";
-export const utrechtCodeBlockBackgroundColor = "#e4e4e4";
-export const utrechtCodeBlockColor = "#0d1921";
-export const utrechtCodeBlockFontFamily = "Monospace, \"Lucida Console\"";
-export const utrechtCodeBlockFontSize = "18px";
-export const utrechtCodeBlockLineHeight = "24px";
-export const utrechtCodeBlockMarginBlockStart = "18px";
-export const utrechtCodeBlockMarginBlockEnd = "18px";
-export const utrechtCodeBlockMarginInlineStart = 0;
-export const utrechtCodeBlockMarginInlineEnd = 0;
-export const utrechtCodeBlockPaddingBlockStart = "18px";
-export const utrechtCodeBlockPaddingBlockEnd = "18px";
-export const utrechtCodeBlockPaddingInlineStart = "18px";
-export const utrechtCodeBlockPaddingInlineEnd = "18px";
-export const utrechtDocumentBackgroundColor = "#ffffff";
-export const utrechtDocumentColor = "#0d1921";
-export const utrechtDocumentFontFamily = "\"Open Sans\", Arial, sans-serif";
-export const utrechtDocumentFontSize = "18px";
 export const utrechtHeading1FontFamily = "\"Open Sans\", Arial, sans-serif";
 export const utrechtHeading1FontSize = "48px";
 export const utrechtHeading1FontWeight = "700";
@@ -279,6 +272,12 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const conductionCardWrapperBackgroundColor = "#e4e4e4";
+export const conductionCardWrapperColor = "#0d1921";
+export const conductionCardWrapperPaddingInlineEnd = "32px";
+export const conductionCardWrapperPaddingInlineStart = "32px";
+export const conductionCardWrapperPaddingBlockEnd = "14px";
+export const conductionCardWrapperPaddingBlockStart = "14px";
 export const conductionInputSelectBackgroundColor = "#ffffff";
 export const conductionInputSelectBorder = "1px solid #5f594a";
 export const conductionInputSelectBorderFocus = "unset";