@conduction/theme 1.1.1 → 1.1.2

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

@@ -0,0 +1,290 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 18 Dec 2023 16:14:21 GMT
+ */
+
+.sloterburg-theme {
+  --conduction-tooltip-z-index: 9999;
+  --conduction-tooltip-border-radius: 0px;
+  --conduction-tooltip-border-color: unset;
+  --conduction-tooltip-border-style: unset;
+  --conduction-tooltip-border-width: 0px;
+  --conduction-logo-navbar-background-image: url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp');
+  --conduction-logo-navbar-block-size: 51px;
+  --conduction-logo-navbar-inline-size: 137px;
+  --conduction-logo-footer-background-image: url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp');
+  --conduction-logo-footer-block-size: 80px;
+  --conduction-logo-footer-inline-size: 200px;
+  --conduction-logo-header-background-image: url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp');
+  --conduction-logo-header-block-size: 80px;
+  --conduction-logo-header-inline-size: 200px;
+  --utrecht-page-max-inline-size: 1140px;
+  --utrecht-page-header-logo-max-width: 150px;
+  --utrecht-page-footer-background-image: unset;
+  --utrecht-page-footer-link-hover-text-decoration: underline;
+  --utrecht-page-footer-link-text-decoration-color: unset;
+  --utrecht-page-footer-link-text-decoration: none;
+  --utrecht-page-footer-logo-max-width: 100px;
+  --utrecht-page-footer-logo-max-height: 100px;
+  --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;
+  --utrecht-button-primary-action-font-weight: inherit;
+  --utrecht-button-font-weight: inherit;
+  --utrecht-button-font-size: inherit;
+  --utrecht-button-border-radius: 10px;
+  --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-breadcrumb-nav-border-radius: 3px;
+  --utrecht-badge-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;
+  --sloterburg-typography-font-weight-light: 100;
+  --sloterburg-typography-font-weight-normal: 400;
+  --sloterburg-typography-font-weight-bold: 700;
+  --sloterburg-typography-monospace-font-family: Monospace, "Lucida Console";
+  --sloterburg-typography-sans-serif-font-family: "Noto Sans", Arial, sans-serif;
+  --sloterburg-typography-pt-sans-narrow-font-family: "PT Sans Narrow", "Noto Sans", Arial, sans-serif;
+  --sloterburg-size-4xl: 96px;
+  --sloterburg-size-3xl: 72px;
+  --sloterburg-size-2xl: 48px;
+  --sloterburg-size-xl: 32px;
+  --sloterburg-size-lg: 24px;
+  --sloterburg-size-md: 18px;
+  --sloterburg-size-sm: 14px;
+  --sloterburg-size-xs: 8px;
+  --sloterburg-size-2xs: 4px;
+  --sloterburg-size-3xs: 2px;
+  --sloterburg-size-4xs: 1px;
+  --sloterburg-font-size-4xl: 48px;
+  --sloterburg-font-size-3xl: 36px;
+  --sloterburg-font-size-2xl: 25px;
+  --sloterburg-font-size-xl: 20px;
+  --sloterburg-font-size-lg: 18px;
+  --sloterburg-font-size-md: 16px;
+  --sloterburg-font-size-sm: 14px;
+  --sloterburg-font-size-xs: 12px;
+  --sloterburg-font-size-2xs: 10px;
+  --sloterburg-font-size-3xs: 8px;
+  --sloterburg-font-size-4xs: 5px;
+  --sloterburg-color-purple-28: #6b246c; /* Base/Purple */
+  --sloterburg-color-darkgreen-23-90t: #357500e6; /* Darkgreen with 90% transparency */
+  --sloterburg-color-darkgreen-23: #357500; /* Base/Darkgreen */
+  --sloterburg-color-lightgrey-96: #f5f5f5; /* Base/LightGrey */
+  --sloterburg-color-grey-97: #f7f7f7;
+  --sloterburg-color-grey-82: #d1d1d1;
+  --sloterburg-color-grey-50: #808080; /* Base/Grey */
+  --sloterburg-color-grey-48: #7a7a7a;
+  --sloterburg-color-grey-46: #767676;
+  --sloterburg-color-grey-42: #6b6b6b;
+  --sloterburg-color-grey-31: #4f4f4f;
+  --sloterburg-color-grey-29: #4a4a4a;
+  --sloterburg-color-darkblue-30: #18407f; /* Base/Darkblue */
+  --sloterburg-color-blue-38-90t: #1b7da7e6; /* Blue with 90% transparency */
+  --sloterburg-color-blue-38: #1b7da7; /* Base/Blue */
+  --sloterburg-color-black-0: #000000; /* Base/Black */
+  --sloterburg-color-white-100: #ffffff; /* Base/White */
+  --sloterburg-color-alert-info-background: #cce5ff;
+  --sloterburg-color-alert-info: #004085;
+  --sloterburg-color-alert-succes-background: #d4edda;
+  --sloterburg-color-alert-succes: #155724;
+  --sloterburg-color-succes: #28a745;
+  --sloterburg-color-alert-warning-background: #fff3cd;
+  --sloterburg-color-alert-warning: #856404;
+  --sloterburg-color-warning: #ffc107;
+  --sloterburg-color-alert-error-background: #f8d7da;
+  --sloterburg-color-alert-error: #721c24;
+  --sloterburg-color-error: #dc3545;
+  --conduction-tooltip-padding-inline-end: var(--sloterburg-size-sm);
+  --conduction-tooltip-padding-inline-start: var(--sloterburg-size-sm);
+  --conduction-tooltip-padding-block-end: var(--sloterburg-size-xs);
+  --conduction-tooltip-padding-block-start: var(--sloterburg-size-xs);
+  --conduction-tooltip-color: var(--sloterburg-color-white-100);
+  --conduction-tooltip-background-color: var(--sloterburg-color-black-0);
+  --utrecht-page-margin-inline-end: var(--sloterburg-size-lg);
+  --utrecht-page-margin-inline-start: var(--sloterburg-size-lg);
+  --utrecht-heading-5-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-heading-5-margin-block-end: var(--sloterburg-size-lg);
+  --utrecht-heading-5-font-weight: var(--sloterburg-typography-font-weight-light);
+  --utrecht-heading-5-font-size: var(--sloterburg-font-size-md);
+  --utrecht-heading-5-color: var(--sloterburg-color-darkgreen-23);
+  --utrecht-heading-4-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-heading-4-margin-block-end: var(--sloterburg-size-lg);
+  --utrecht-heading-4-font-weight: var(--sloterburg-typography-font-weight-normal);
+  --utrecht-heading-4-font-size: var(--sloterburg-font-size-lg);
+  --utrecht-heading-4-color: var(--sloterburg-color-darkgreen-23);
+  --utrecht-heading-3-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-heading-3-margin-block-end: var(--sloterburg-size-xl);
+  --utrecht-heading-3-font-weight: var(--sloterburg-typography-font-weight-normal);
+  --utrecht-heading-3-font-size: var(--sloterburg-font-size-xl);
+  --utrecht-heading-3-color: var(--sloterburg-color-darkgreen-23);
+  --utrecht-heading-2-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-heading-2-margin-block-end: var(--sloterburg-size-2xl);
+  --utrecht-heading-2-font-weight: var(--sloterburg-typography-font-weight-bold);
+  --utrecht-heading-2-font-size: var(--sloterburg-font-size-2xl);
+  --utrecht-heading-1-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-heading-1-margin-block-end: var(--sloterburg-size-2xl);
+  --utrecht-heading-1-font-weight: var(--sloterburg-typography-font-weight-bold);
+  --utrecht-heading-1-font-size: var(--sloterburg-font-size-3xl);
+  --utrecht-page-header-padding-block-end: var(--sloterburg-size-sm);
+  --utrecht-page-header-padding-block-start: var(--sloterburg-size-sm);
+  --utrecht-page-header-background-color: var(--sloterburg-color-white-100);
+  --utrecht-page-footer-padding-block-start: var(--sloterburg-size-2xl);
+  --utrecht-page-footer-padding-block-end: var(--sloterburg-size-2xl);
+  --utrecht-page-footer-padding-inline-start: var(--sloterburg-size-sm);
+  --utrecht-page-footer-padding-inline-end: var(--sloterburg-size-sm);
+  --utrecht-page-footer-color: var(--sloterburg-color-white-100);
+  --utrecht-page-footer-background-color: var(--sloterburg-color-purple-28);
+  --utrecht-page-footer-link-hover-text-decoration-thickness: var(--sloterburg-size-4xs);
+  --utrecht-page-footer-link-hover-color: var(--sloterburg-color-white-100);
+  --utrecht-page-footer-link-text-underline-offset: var(--sloterburg-size-3xs);
+  --utrecht-page-footer-link-text-decoration-thickness: var(--sloterburg-size-4xs);
+  --utrecht-icon-gap: var(--sloterburg-size-xs);
+  --utrecht-form-input-padding-inline-start: var(--sloterburg-size-sm);
+  --utrecht-form-input-padding-inline-end: var(--sloterburg-size-sm);
+  --utrecht-form-input-padding-block-start: var(--sloterburg-size-xs);
+  --utrecht-form-input-padding-block-end: var(--sloterburg-size-xs);
+  --utrecht-form-input-font-size: var(--sloterburg-font-size-md);
+  --utrecht-form-input-font-family: var(--sloterburg-typography-pt-sans-narrow-font-family);
+  --utrecht-form-input-color: var(--sloterburg-color-grey-29);
+  --utrecht-form-input-border-width: var(--sloterburg-size-4xs);
+  --utrecht-form-input-border-color: var(--sloterburg-color-grey-48);
+  --utrecht-form-input-focus-background-color: var(--sloterburg-color-white-100);
+  --utrecht-form-input-placeholder-color: var(--sloterburg-color-grey-50);
+  --utrecht-form-input-background-color: var(--sloterburg-color-white-100);
+  --utrecht-document-font-size: var(--sloterburg-font-size-md);
+  --utrecht-document-font-family: var(--sloterburg-typography-pt-sans-narrow-font-family);
+  --utrecht-document-color: var(--sloterburg-color-black-0);
+  --utrecht-document-background-color: var(--sloterburg-color-white-100);
+  --utrecht-code-block-padding-inline-end: var(--sloterburg-size-md);
+  --utrecht-code-block-padding-inline-start: var(--sloterburg-size-md);
+  --utrecht-code-block-padding-block-end: var(--sloterburg-size-md);
+  --utrecht-code-block-padding-block-start: var(--sloterburg-size-md);
+  --utrecht-code-block-margin-block-end: var(--sloterburg-size-md);
+  --utrecht-code-block-margin-block-start: var(--sloterburg-size-md);
+  --utrecht-code-block-line-height: var(--sloterburg-size-lg);
+  --utrecht-code-block-font-size: var(--sloterburg-font-size-md);
+  --utrecht-code-block-font-family: var(--sloterburg-typography-monospace-font-family);
+  --utrecht-code-block-color: var(--sloterburg-color-black-0);
+  --utrecht-code-block-background-color: var(--sloterburg-color-lightgrey-96);
+  --utrecht-code-font-family: var(--sloterburg-typography-monospace-font-family);
+  --utrecht-code-color: var(--sloterburg-color-black-0);
+  --utrecht-code-background-color: var(--sloterburg-color-lightgrey-96);
+  --utrecht-button-secondary-action-hover-background-color: var(--sloterburg-color-white-100);
+  --utrecht-button-secondary-action-font-weight: var(--sloterburg-typography-font-weight-normal);
+  --utrecht-button-secondary-action-border-width: var(--sloterburg-size-3xs);
+  --utrecht-button-secondary-action-background-color: var(--sloterburg-color-white-100);
+  --utrecht-button-primary-action-hover-color: var(--sloterburg-color-white-100);
+  --utrecht-button-primary-action-color: var(--sloterburg-color-white-100);
+  --utrecht-button-primary-action-border-width: var(--sloterburg-size-3xs);
+  --utrecht-button-hover-color: var(--sloterburg-color-white-100);
+  --utrecht-button-hover-border-color: var(--sloterburg-color-darkgreen-23-90t);
+  --utrecht-button-hover-background-color: var(--sloterburg-color-darkgreen-23-90t);
+  --utrecht-button-icon-gap: var(--sloterburg-size-xs);
+  --utrecht-button-padding-inline-end: var(--sloterburg-size-sm);
+  --utrecht-button-padding-inline-start: var(--sloterburg-size-sm);
+  --utrecht-button-padding-block-end: var(--sloterburg-size-2xs);
+  --utrecht-button-padding-block-start: var(--sloterburg-size-2xs);
+  --utrecht-button-font-family: var(--sloterburg-typography-pt-sans-narrow-font-family);
+  --utrecht-button-color: var(--sloterburg-color-white-100);
+  --utrecht-button-border-width: var(--sloterburg-size-3xs);
+  --utrecht-button-border-color: var(--sloterburg-color-darkgreen-23);
+  --utrecht-button-background-color: var(--sloterburg-color-darkgreen-23);
+  --utrecht-breadcrumb-nav-background-color: var(--sloterburg-color-white-100);
+  --utrecht-breadcrumb-nav-separator-icon-size: var(--sloterburg-font-size-xs);
+  --utrecht-breadcrumb-nav-separator-color: var(--sloterburg-color-darkblue-30);
+  --utrecht-breadcrumb-nav-link-disabled-color: var(--sloterburg-color-grey-42);
+  --utrecht-breadcrumb-nav-link-current-color: var(--sloterburg-color-grey-42);
+  --utrecht-breadcrumb-nav-font-size: var(--sloterburg-font-size-xs);
+  --utrecht-blockquote-content-font-size: var(--sloterburg-font-size-md);
+  --utrecht-blockquote-content-color: var(--sloterburg-color-black-0);
+  --utrecht-blockquote-margin-inline-end: var(--sloterburg-size-xl);
+  --utrecht-blockquote-margin-inline-start: var(--sloterburg-size-xl);
+  --utrecht-badge-padding-inline: var(--sloterburg-size-xs);
+  --utrecht-badge-padding-block: var(--sloterburg-size-xs);
+  --utrecht-badge-font-weight: var(--sloterburg-typography-font-weight-normal);
+  --utrecht-badge-font-size: var(--sloterburg-font-size-sm);
+  --utrecht-badge-color: var(--sloterburg-color-white-100) ;
+  --utrecht-badge-background-color: var(--sloterburg-color-black-0) ;
+  --utrecht-badge-counter-padding-inline: var(--sloterburg-size-2xs);
+  --utrecht-badge-counter-padding-block: var(--sloterburg-size-2xs);
+  --utrecht-badge-counter-font-weight: var(--sloterburg-typography-font-weight-normal);
+  --utrecht-badge-counter-color: var(--sloterburg-color-white-100);
+  --utrecht-alert-icon-gap: var(--sloterburg-size-xs);
+  --utrecht-alert-icon-ok-color: var(--sloterburg-color-alert-succes);
+  --utrecht-alert-icon-warning-color: var(--sloterburg-color-alert-warning);
+  --utrecht-alert-icon-error-color: var(--sloterburg-color-alert-error);
+  --utrecht-alert-icon-color: var(--sloterburg-color-alert-info);
+  --utrecht-alert-ok-color: var(--sloterburg-color-alert-succes);
+  --utrecht-alert-ok-background-color: var(--sloterburg-color-alert-succes-background);
+  --utrecht-alert-error-color: var(--sloterburg-color-alert-error);
+  --utrecht-alert-error-background-color: var(--sloterburg-color-alert-error-background);
+  --utrecht-alert-warning-color: var(--sloterburg-color-alert-warning);
+  --utrecht-alert-warning-background-color: var(--sloterburg-color-alert-warning-background);
+  --utrecht-alert-padding-inline-end: var(--sloterburg-size-lg);
+  --utrecht-alert-padding-inline-start: var(--sloterburg-size-lg);
+  --utrecht-alert-padding-block-end: var(--sloterburg-size-lg);
+  --utrecht-alert-padding-block-start: var(--sloterburg-size-lg);
+  --utrecht-alert-color: var(--sloterburg-color-alert-info);
+  --utrecht-alert-background-color: var(--sloterburg-color-alert-info-background);
+  --utrecht-space-inline-3xl: var(--sloterburg-size-3xl);
+  --utrecht-space-inline-2xl: var(--sloterburg-size-2xl);
+  --utrecht-space-inline-xl: var(--sloterburg-size-xl);
+  --utrecht-space-inline-lg: var(--sloterburg-size-lg);
+  --utrecht-space-inline-md: var(--sloterburg-size-md);
+  --utrecht-space-inline-sm: var(--sloterburg-size-sm);
+  --utrecht-space-inline-xs: var(--sloterburg-size-xs);
+  --utrecht-space-inline-2xs: var(--sloterburg-size-2xs);
+  --utrecht-space-inline-3xs: var(--sloterburg-size-3xs);
+  --utrecht-space-block-3xl: var(--sloterburg-size-3xl);
+  --utrecht-space-block-2xl: var(--sloterburg-size-2xl);
+  --utrecht-space-block-xl: var(--sloterburg-size-xl);
+  --utrecht-space-block-lg: var(--sloterburg-size-lg);
+  --utrecht-space-block-md: var(--sloterburg-size-md);
+  --utrecht-space-block-sm: var(--sloterburg-size-sm);
+  --utrecht-space-block-xs: var(--sloterburg-size-xs);
+  --utrecht-space-block-2xs: var(--sloterburg-size-2xs);
+  --utrecht-space-block-3xs: var(--sloterburg-size-3xs);
+  --sloterburg-typography-scale-4xl: var(--sloterburg-font-size-4xl);
+  --sloterburg-typography-scale-3xl: var(--sloterburg-font-size-3xl);
+  --sloterburg-typography-scale-2xl: var(--sloterburg-font-size-2xl);
+  --sloterburg-typography-scale-xl: var(--sloterburg-font-size-xl);
+  --sloterburg-typography-scale-lg: var(--sloterburg-font-size-lg);
+  --sloterburg-typography-scale-md: var(--sloterburg-font-size-md);
+  --sloterburg-typography-scale-sm: var(--sloterburg-font-size-sm);
+  --sloterburg-typography-scale-xs: var(--sloterburg-font-size-xs);
+  --sloterburg-typography-scale-2xs: var(--sloterburg-font-size-2xs);
+  --sloterburg-typography-scale-3xs: var(--sloterburg-font-size-3xs);
+  --sloterburg-typography-scale-4xs: var(--sloterburg-font-size-4xs);
+  --sloterburg-color-primary-hover: var(--sloterburg-color-blue-38-90t);
+  --sloterburg-color-primary: var(--sloterburg-color-blue-38);
+  --utrecht-heading-5-font-family: var(--utrecht-document-font-family);
+  --utrecht-heading-4-font-family: var(--utrecht-document-font-family);
+  --utrecht-heading-3-font-family: var(--utrecht-document-font-family);
+  --utrecht-heading-2-font-family: var(--utrecht-document-font-family);
+  --utrecht-heading-2-color: var(--sloterburg-color-primary);
+  --utrecht-heading-1-font-family: var(--utrecht-document-font-family);
+  --utrecht-heading-1-color: var(--sloterburg-color-primary);
+  --utrecht-page-header-color: var(--sloterburg-color-primary);
+  --utrecht-button-secondary-action-hover-color: var(--sloterburg-color-primary-hover);
+  --utrecht-button-secondary-action-hover-border-color: var(--sloterburg-color-primary-hover);
+  --utrecht-button-secondary-action-color: var(--sloterburg-color-primary);
+  --utrecht-button-secondary-action-border-color: var(--sloterburg-color-primary);
+  --utrecht-button-primary-action-hover-border-color: var(--sloterburg-color-primary);
+  --utrecht-button-primary-action-hover-background-color: var(--sloterburg-color-primary);
+  --utrecht-button-primary-action-border-color: var(--sloterburg-color-primary);
+  --utrecht-button-primary-action-background-color: var(--sloterburg-color-primary);
+  --utrecht-breadcrumb-nav-link-hover-color: var(--sloterburg-color-primary-hover);
+  --utrecht-breadcrumb-nav-link-color: var(--sloterburg-color-primary);
+  --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-badge-counter-background-color: var(--sloterburg-color-primary);
+  --sloterburg-color-info: var(--sloterburg-color-primary);
+}

package/municipalities/sloterburg-design-tokens/dist/font.css

@@ -0,0 +1,5 @@
+/* Place any @font-face definitions here */
+@font-face {
+  font-family: "PT Sans Narrow";
+  src: url("../src/font/PT-Sans-Narrow.woff2") format("woff2");
+}

package/municipalities/sloterburg-design-tokens/dist/index.css

@@ -0,0 +1,7 @@
+/**
+ * @license SEE LICENSE.md
+ * Copyright (c) 2021 NL Design System Community
+ * All rights reserved
+ */
+@import "./design-tokens.css";
+@import "./font.css";

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

@@ -0,0 +1,288 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 18 Dec 2023 16:14:21 GMT
+ */
+
+export const sloterburgColorPrimary = "#1b7da7";
+export const sloterburgColorPrimaryHover = "#1b7da7e6";
+export const sloterburgColorError = "#dc3545";
+export const sloterburgColorAlertError = "#721c24";
+export const sloterburgColorAlertErrorBackground = "#f8d7da";
+export const sloterburgColorWarning = "#ffc107";
+export const sloterburgColorAlertWarning = "#856404";
+export const sloterburgColorAlertWarningBackground = "#fff3cd";
+export const sloterburgColorSucces = "#28a745";
+export const sloterburgColorAlertSucces = "#155724";
+export const sloterburgColorAlertSuccesBackground = "#d4edda";
+export const sloterburgColorInfo = "#1b7da7";
+export const sloterburgColorAlertInfo = "#004085";
+export const sloterburgColorAlertInfoBackground = "#cce5ff";
+export const sloterburgColorWhite100 = "#ffffff"; // Base/White
+export const sloterburgColorBlack0 = "#000000"; // Base/Black
+export const sloterburgColorBlue38 = "#1b7da7"; // Base/Blue
+export const sloterburgColorBlue3890t = "#1b7da7e6"; // Blue with 90% transparency
+export const sloterburgColorDarkblue30 = "#18407f"; // Base/Darkblue
+export const sloterburgColorGrey29 = "#4a4a4a";
+export const sloterburgColorGrey31 = "#4f4f4f";
+export const sloterburgColorGrey42 = "#6b6b6b";
+export const sloterburgColorGrey46 = "#767676";
+export const sloterburgColorGrey48 = "#7a7a7a";
+export const sloterburgColorGrey50 = "#808080"; // Base/Grey
+export const sloterburgColorGrey82 = "#d1d1d1";
+export const sloterburgColorGrey97 = "#f7f7f7";
+export const sloterburgColorLightgrey96 = "#f5f5f5"; // Base/LightGrey
+export const sloterburgColorDarkgreen23 = "#357500"; // Base/Darkgreen
+export const sloterburgColorDarkgreen2390t = "#357500e6"; // Darkgreen with 90% transparency
+export const sloterburgColorPurple28 = "#6b246c"; // Base/Purple
+export const sloterburgFontSize4xs = "5px";
+export const sloterburgFontSize3xs = "8px";
+export const sloterburgFontSize2xs = "10px";
+export const sloterburgFontSizeXs = "12px";
+export const sloterburgFontSizeSm = "14px";
+export const sloterburgFontSizeMd = "16px";
+export const sloterburgFontSizeLg = "18px";
+export const sloterburgFontSizeXl = "20px";
+export const sloterburgFontSize2xl = "25px";
+export const sloterburgFontSize3xl = "36px";
+export const sloterburgFontSize4xl = "48px";
+export const sloterburgSize4xs = "1px";
+export const sloterburgSize3xs = "2px";
+export const sloterburgSize2xs = "4px";
+export const sloterburgSizeXs = "8px";
+export const sloterburgSizeSm = "14px";
+export const sloterburgSizeMd = "18px";
+export const sloterburgSizeLg = "24px";
+export const sloterburgSizeXl = "32px";
+export const sloterburgSize2xl = "48px";
+export const sloterburgSize3xl = "72px";
+export const sloterburgSize4xl = "96px";
+export const sloterburgTypographyPtSansNarrowFontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const sloterburgTypographySansSerifFontFamily = "\"Noto Sans\", Arial, sans-serif";
+export const sloterburgTypographyMonospaceFontFamily = "Monospace, \"Lucida Console\"";
+export const sloterburgTypographyFontWeightBold = "700";
+export const sloterburgTypographyFontWeightNormal = "400";
+export const sloterburgTypographyFontWeightLight = "100";
+export const sloterburgTypographyScale4xs = "5px";
+export const sloterburgTypographyScale3xs = "8px";
+export const sloterburgTypographyScale2xs = "10px";
+export const sloterburgTypographyScaleXs = "12px";
+export const sloterburgTypographyScaleSm = "14px";
+export const sloterburgTypographyScaleMd = "16px";
+export const sloterburgTypographyScaleLg = "18px";
+export const sloterburgTypographyScaleXl = "20px";
+export const sloterburgTypographyScale2xl = "25px";
+export const sloterburgTypographyScale3xl = "36px";
+export const sloterburgTypographyScale4xl = "48px";
+export const utrechtActionBusyCursor = "wait";
+export const utrechtActionDisabledCursor = "not-allowed";
+export const utrechtActionSubmitCursor = "pointer";
+export const utrechtSpaceBlock3xs = "2px";
+export const utrechtSpaceBlock2xs = "4px";
+export const utrechtSpaceBlockXs = "8px";
+export const utrechtSpaceBlockSm = "14px";
+export const utrechtSpaceBlockMd = "18px";
+export const utrechtSpaceBlockLg = "24px";
+export const utrechtSpaceBlockXl = "32px";
+export const utrechtSpaceBlock2xl = "48px";
+export const utrechtSpaceBlock3xl = "72px";
+export const utrechtSpaceInline3xs = "2px";
+export const utrechtSpaceInline2xs = "4px";
+export const utrechtSpaceInlineXs = "8px";
+export const utrechtSpaceInlineSm = "14px";
+export const utrechtSpaceInlineMd = "18px";
+export const utrechtSpaceInlineLg = "24px";
+export const utrechtSpaceInlineXl = "32px";
+export const utrechtSpaceInline2xl = "48px";
+export const utrechtSpaceInline3xl = "72px";
+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 utrechtAlertIconWarningColor = "#856404";
+export const utrechtAlertIconOkColor = "#155724";
+export const utrechtAlertIconGap = "8px";
+export const utrechtBadgeCounterBackgroundColor = "#1b7da7";
+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 = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtBadgeCounterTextDecoration = "none";
+export const utrechtBadgeBackgroundColor = "#000000 ";
+export const utrechtBadgeBorderRadius = "0";
+export const utrechtBadgeColor = "#ffffff ";
+export const utrechtBadgeFontSize = "14px";
+export const utrechtBadgeFontWeight = "400";
+export const utrechtBadgePaddingBlock = "8px";
+export const utrechtBadgePaddingInline = "8px";
+export const utrechtBlockquoteMarginInlineStart = "32px";
+export const utrechtBlockquoteMarginInlineEnd = "32px";
+export const utrechtBlockquoteContentColor = "#000000";
+export const utrechtBlockquoteContentFontSize = "16px";
+export const utrechtBreadcrumbNavFontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtBreadcrumbNavFontSize = "12px";
+export const utrechtBreadcrumbNavLinkColor = "#1b7da7";
+export const utrechtBreadcrumbNavLinkCurrentColor = "#6b6b6b";
+export const utrechtBreadcrumbNavLinkDisabledColor = "#6b6b6b";
+export const utrechtBreadcrumbNavLinkHoverColor = "#1b7da7e6";
+export const utrechtBreadcrumbNavSeparatorColor = "#18407f";
+export const utrechtBreadcrumbNavSeparatorIconSize = "12px";
+export const utrechtBreadcrumbNavBackgroundColor = "#ffffff";
+export const utrechtBreadcrumbNavBorderRadius = "3px";
+export const utrechtBreadcrumbNavPaddingInlineStart = "0";
+export const utrechtBreadcrumbNavPaddingInlineEnd = "0";
+export const utrechtBreadcrumbNavPaddingBlockStart = "12px";
+export const utrechtBreadcrumbNavPaddingBlockEnd = "12px";
+export const utrechtButtonBackgroundColor = "#357500";
+export const utrechtButtonBorderColor = "#357500";
+export const utrechtButtonBorderRadius = "10px";
+export const utrechtButtonBorderWidth = "2px";
+export const utrechtButtonColor = "#ffffff";
+export const utrechtButtonFontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtButtonFontSize = "inherit";
+export const utrechtButtonFontWeight = "inherit";
+export const utrechtButtonPaddingBlockStart = "4px";
+export const utrechtButtonPaddingBlockEnd = "4px";
+export const utrechtButtonPaddingInlineStart = "14px";
+export const utrechtButtonPaddingInlineEnd = "14px";
+export const utrechtButtonIconGap = "8px";
+export const utrechtButtonHoverBackgroundColor = "#357500e6";
+export const utrechtButtonHoverBorderColor = "#357500e6";
+export const utrechtButtonHoverColor = "#ffffff";
+export const utrechtButtonPrimaryActionBackgroundColor = "#1b7da7";
+export const utrechtButtonPrimaryActionBorderColor = "#1b7da7";
+export const utrechtButtonPrimaryActionBorderWidth = "2px";
+export const utrechtButtonPrimaryActionColor = "#ffffff";
+export const utrechtButtonPrimaryActionFontWeight = "inherit";
+export const utrechtButtonPrimaryActionHoverBackgroundColor = "#1b7da7";
+export const utrechtButtonPrimaryActionHoverBorderColor = "#1b7da7";
+export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
+export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
+export const utrechtButtonSecondaryActionBorderColor = "#1b7da7";
+export const utrechtButtonSecondaryActionBorderWidth = "2px";
+export const utrechtButtonSecondaryActionColor = "#1b7da7";
+export const utrechtButtonSecondaryActionFontWeight = "400";
+export const utrechtButtonSecondaryActionHoverBackgroundColor = "#ffffff";
+export const utrechtButtonSecondaryActionHoverBorderColor = "#1b7da7e6";
+export const utrechtButtonSecondaryActionHoverColor = "#1b7da7e6";
+export const utrechtCodeBackgroundColor = "#f5f5f5";
+export const utrechtCodeColor = "#000000";
+export const utrechtCodeFontFamily = "Monospace, \"Lucida Console\"";
+export const utrechtCodeFontSize = "inherit";
+export const utrechtCodeBlockBackgroundColor = "#f5f5f5";
+export const utrechtCodeBlockColor = "#000000";
+export const utrechtCodeBlockFontFamily = "Monospace, \"Lucida Console\"";
+export const utrechtCodeBlockFontSize = "16px";
+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 = "#000000";
+export const utrechtDocumentFontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtDocumentFontSize = "16px";
+export const utrechtFormInputBackgroundColor = "#ffffff";
+export const utrechtFormInputPlaceholderColor = "#808080";
+export const utrechtFormInputFocusBackgroundColor = "#ffffff";
+export const utrechtFormInputBorderColor = "#7a7a7a";
+export const utrechtFormInputBorderRadius = "3px";
+export const utrechtFormInputBorderWidth = "1px";
+export const utrechtFormInputColor = "#4a4a4a";
+export const utrechtFormInputFontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtFormInputFontSize = "16px";
+export const utrechtFormInputPaddingBlockEnd = "8px";
+export const utrechtFormInputPaddingBlockStart = "8px";
+export const utrechtFormInputPaddingInlineEnd = "14px";
+export const utrechtFormInputPaddingInlineStart = "14px";
+export const utrechtIconGap = "8px";
+export const utrechtPageFooterLogoMaxHeight = "100px";
+export const utrechtPageFooterLogoMaxWidth = "100px";
+export const utrechtPageFooterLinkTextDecoration = "none";
+export const utrechtPageFooterLinkTextDecorationColor = "unset";
+export const utrechtPageFooterLinkTextDecorationThickness = "1px";
+export const utrechtPageFooterLinkTextUnderlineOffset = "2px";
+export const utrechtPageFooterLinkHoverColor = "#ffffff";
+export const utrechtPageFooterLinkHoverTextDecoration = "underline";
+export const utrechtPageFooterLinkHoverTextDecorationThickness = "1px";
+export const utrechtPageFooterBackgroundColor = "#6b246c";
+export const utrechtPageFooterBackgroundImage = "unset";
+export const utrechtPageFooterColor = "#ffffff";
+export const utrechtPageFooterPaddingInlineEnd = "14px";
+export const utrechtPageFooterPaddingInlineStart = "14px";
+export const utrechtPageFooterPaddingBlockEnd = "48px";
+export const utrechtPageFooterPaddingBlockStart = "48px";
+export const utrechtPageHeaderLogoMaxWidth = "150px";
+export const utrechtPageHeaderBackgroundColor = "#ffffff";
+export const utrechtPageHeaderColor = "#1b7da7";
+export const utrechtPageHeaderPaddingBlockStart = "14px";
+export const utrechtPageHeaderPaddingBlockEnd = "14px";
+export const utrechtHeading1Color = "#1b7da7";
+export const utrechtHeading1FontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtHeading1FontSize = "36px";
+export const utrechtHeading1FontWeight = "700";
+export const utrechtHeading1MarginBlockEnd = "48px";
+export const utrechtHeading1MarginBlockStart = "18px";
+export const utrechtHeading2Color = "#1b7da7";
+export const utrechtHeading2FontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtHeading2FontSize = "25px";
+export const utrechtHeading2FontWeight = "700";
+export const utrechtHeading2MarginBlockEnd = "48px";
+export const utrechtHeading2MarginBlockStart = "18px";
+export const utrechtHeading3Color = "#357500";
+export const utrechtHeading3FontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtHeading3FontSize = "20px";
+export const utrechtHeading3FontWeight = "400";
+export const utrechtHeading3MarginBlockEnd = "32px";
+export const utrechtHeading3MarginBlockStart = "18px";
+export const utrechtHeading4Color = "#357500";
+export const utrechtHeading4FontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtHeading4FontSize = "18px";
+export const utrechtHeading4FontWeight = "400";
+export const utrechtHeading4MarginBlockEnd = "24px";
+export const utrechtHeading4MarginBlockStart = "18px";
+export const utrechtHeading5Color = "#357500";
+export const utrechtHeading5FontFamily = "\"PT Sans Narrow\", \"Noto Sans\", Arial, sans-serif";
+export const utrechtHeading5FontSize = "16px";
+export const utrechtHeading5FontWeight = "100";
+export const utrechtHeading5MarginBlockEnd = "24px";
+export const utrechtHeading5MarginBlockStart = "18px";
+export const utrechtPageMarginInlineStart = "24px";
+export const utrechtPageMarginInlineEnd = "24px";
+export const utrechtPageMaxInlineSize = "1140px";
+export const conductionLogoHeaderInlineSize = "200px";
+export const conductionLogoHeaderBlockSize = "80px";
+export const conductionLogoHeaderBackgroundImage = "url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp')";
+export const conductionLogoFooterInlineSize = "200px";
+export const conductionLogoFooterBlockSize = "80px";
+export const conductionLogoFooterBackgroundImage = "url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp')";
+export const conductionLogoNavbarInlineSize = "137px";
+export const conductionLogoNavbarBlockSize = "51px";
+export const conductionLogoNavbarBackgroundImage = "url('https://cuatro.sim-cdn.nl/sloterburg/uploads/2023-02/logo-sloterburg.svg?cb=iYeQFDAp')";
+export const conductionTooltipBackgroundColor = "#000000";
+export const conductionTooltipColor = "#ffffff";
+export const conductionTooltipPaddingBlockStart = "8px";
+export const conductionTooltipPaddingBlockEnd = "8px";
+export const conductionTooltipPaddingInlineStart = "14px";
+export const conductionTooltipPaddingInlineEnd = "14px";
+export const conductionTooltipBorderWidth = "0px";
+export const conductionTooltipBorderStyle = "unset";
+export const conductionTooltipBorderColor = "unset";
+export const conductionTooltipBorderRadius = "0px";
+export const conductionTooltipZIndex = "9999";