@conduction/theme 1.0.30 → 1.0.31

package/README.md

@@ -6,8 +6,9 @@ Conduction's design tokens theme
 
 - **Version 1**
 
+  - 1.0.31: Added surface tokens to all themes.
   - 1.0.30: Added Noaberkracht theme.
-  - 1.0.29: 
+  - 1.0.29:
     - Added extra select tokens to all themes.
     - Updated table tokens in noordwijk theme.
     - Updated card-header tokens in epe theme.

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:19:54 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:42 GMT
  */
 
 .conduction-theme {
@@ -90,6 +90,7 @@
   --conduction-color-error: #dc3545;
   --conduction-color-primary-hover: #2e5ed9;
   --conduction-color-primary: #4376fc;
+  --utrecht-surface-background-color: var(--conduction-color-white-98);
   --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);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:19:54 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:42 GMT
  */
 
 export const conductionColorPrimary = "#4376fc";
@@ -306,3 +306,4 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#fafafa";

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

@@ -5190,6 +5190,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#fafafa",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.white.98}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/extra-tokens/table.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:19:54 GMT
+// Generated on Fri, 25 Aug 2023 13:31:42 GMT
 
 @utrecht-paragraph-margin-block-end: 0;
 @utrecht-paragraph-margin-block-start: 0;
@@ -88,6 +88,7 @@
 @conduction-color-error: #dc3545;
 @conduction-color-primary-hover: #2e5ed9;
 @conduction-color-primary: #4376fc;
+@utrecht-surface-background-color: @conduction-color-white-98;
 @utrecht-paragraph-font-weight: @conduction-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @conduction-font-size-md;
 @utrecht-paragraph-font-family: @conduction-typography-sans-serif-font-family;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:19:54 GMT
+// Generated on Fri, 25 Aug 2023 13:31:42 GMT
 
 $utrecht-paragraph-margin-block-end: 0;
 $utrecht-paragraph-margin-block-start: 0;
@@ -88,6 +88,7 @@ $conduction-color-alert-error: #721c24;
 $conduction-color-error: #dc3545;
 $conduction-color-primary-hover: #2e5ed9;
 $conduction-color-primary: #4376fc;
+$utrecht-surface-background-color: $conduction-color-white-98;
 $utrecht-paragraph-font-weight: $conduction-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $conduction-font-size-md;
 $utrecht-paragraph-font-family: $conduction-typography-sans-serif-font-family;

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

@@ -6470,6 +6470,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#fafafa",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{conduction.color.white.98}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   }
 }

package/conduction-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{conduction.color.white.98}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:39 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:11 GMT
  */
 
 .dinkelland-theme {
@@ -120,6 +120,7 @@
   --conduction-card-header-date-font-size: var(--dinkelland-font-size-sm);
   --conduction-card-header-date-color: var(--dinkelland-color-black-0);
   --conduction-card-header-title-color: var(--dinkelland-color-black-0);
+  --utrecht-surface-background-color: var(--dinkelland-color-white-100);
   --utrecht-paragraph-font-weight: var(--dinkelland-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--dinkelland-font-size-md);
   --utrecht-paragraph-font-family: var(--dinkelland-typography-lato-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:38 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:11 GMT
  */
 
 export const dinkellandColorPrimary = "#006cb9";
@@ -314,6 +314,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#333333";
 export const conductionCardHeaderTitleColor = "#000000";
 export const conductionCardHeaderDateColor = "#000000";

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

@@ -5782,6 +5782,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{dinkelland.color.white.100}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/extra-tokens/table.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:39 GMT
+// Generated on Fri, 25 Aug 2023 13:32:11 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -118,6 +118,7 @@
 @conduction-card-header-date-font-size: @dinkelland-font-size-sm;
 @conduction-card-header-date-color: @dinkelland-color-black-0;
 @conduction-card-header-title-color: @dinkelland-color-black-0;
+@utrecht-surface-background-color: @dinkelland-color-white-100;
 @utrecht-paragraph-font-weight: @dinkelland-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @dinkelland-font-size-md;
 @utrecht-paragraph-font-family: @dinkelland-typography-lato-font-family;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:39 GMT
+// Generated on Fri, 25 Aug 2023 13:32:11 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -118,6 +118,7 @@ $conduction-card-header-date-font-weight: $dinkelland-typography-font-weight-lig
 $conduction-card-header-date-font-size: $dinkelland-font-size-sm;
 $conduction-card-header-date-color: $dinkelland-color-black-0;
 $conduction-card-header-title-color: $dinkelland-color-black-0;
+$utrecht-surface-background-color: $dinkelland-color-white-100;
 $utrecht-paragraph-font-weight: $dinkelland-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $dinkelland-font-size-md;
 $utrecht-paragraph-font-family: $dinkelland-typography-lato-font-family;

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

@@ -6623,6 +6623,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#ffffff",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{dinkelland.color.white.100}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/dinkelland-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{dinkelland.color.white.100}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:46 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:18 GMT
  */
 
 .epe-theme {
@@ -131,6 +131,7 @@
   --conduction-card-header-hover-border-bottom-width: var(--epe-size-4xs);
   --conduction-card-header-border-bottom-color: var(--epe-color-yellow-42);
   --conduction-card-header-border-bottom-width: var(--epe-size-4xs);
+  --utrecht-surface-background-color: var(--epe-color-white-100);
   --utrecht-paragraph-font-weight: var(--epe-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--epe-font-size-md);
   --utrecht-paragraph-font-family: var(--epe-typography-source-sans-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:46 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:18 GMT
  */
 
 export const epeColorPrimary = "#01699d";
@@ -302,6 +302,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderBorderBottomWidth = "1px";
 export const conductionCardHeaderBorderBottomStyle = "solid";
 export const conductionCardHeaderBorderBottomColor = "#d6a100";

package/municipalities/epe-design-tokens/dist/index.json

@@ -5765,6 +5765,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{epe.color.white.100}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/extra-tokens/table.tokens.json",

package/municipalities/epe-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:46 GMT
+// Generated on Fri, 25 Aug 2023 13:32:18 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -129,6 +129,7 @@
 @conduction-card-header-hover-border-bottom-width: @epe-size-4xs;
 @conduction-card-header-border-bottom-color: @epe-color-yellow-42;
 @conduction-card-header-border-bottom-width: @epe-size-4xs;
+@utrecht-surface-background-color: @epe-color-white-100;
 @utrecht-paragraph-font-weight: @epe-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @epe-font-size-md;
 @utrecht-paragraph-font-family: @epe-typography-source-sans-font-family;

package/municipalities/epe-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:46 GMT
+// Generated on Fri, 25 Aug 2023 13:32:18 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -129,6 +129,7 @@ $conduction-card-header-hover-border-bottom-color: $epe-color-blue-31;
 $conduction-card-header-hover-border-bottom-width: $epe-size-4xs;
 $conduction-card-header-border-bottom-color: $epe-color-yellow-42;
 $conduction-card-header-border-bottom-width: $epe-size-4xs;
+$utrecht-surface-background-color: $epe-color-white-100;
 $utrecht-paragraph-font-weight: $epe-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $epe-font-size-md;
 $utrecht-paragraph-font-family: $epe-typography-source-sans-font-family;

package/municipalities/epe-design-tokens/dist/tokens.json

@@ -6380,6 +6380,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#ffffff",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{epe.color.white.100}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/epe-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{epe.color.white.100}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:06 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:49 GMT
  */
 
 .leiden-theme {
@@ -104,6 +104,7 @@
   --conduction-card-header-date-font-size: var(--leiden-font-size-sm);
   --conduction-card-header-date-color: var(--leiden-color-black-9);
   --conduction-card-header-title-color: var(--leiden-color-black-9);
+  --utrecht-surface-background-color: var(--leiden-color-white-100);
   --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);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:06 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:49 GMT
  */
 
 export const leidenColorPrimary = "#d62410";
@@ -272,6 +272,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#0d1921";
 export const conductionCardHeaderTitleColor = "#0d1921";
 export const conductionCardHeaderDateColor = "#0d1921";

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

@@ -5062,6 +5062,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{leiden.color.white.100}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#e4e4e4",
     "filePath": "src/component/utrecht/table.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:06 GMT
+// Generated on Fri, 25 Aug 2023 13:31:49 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -102,6 +102,7 @@
 @conduction-card-header-date-font-size: @leiden-font-size-sm;
 @conduction-card-header-date-color: @leiden-color-black-9;
 @conduction-card-header-title-color: @leiden-color-black-9;
+@utrecht-surface-background-color: @leiden-color-white-100;
 @utrecht-paragraph-font-weight: @leiden-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @leiden-font-size-md;
 @utrecht-paragraph-font-family: @leiden-typography-sans-serif-font-family;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:06 GMT
+// Generated on Fri, 25 Aug 2023 13:31:49 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -102,6 +102,7 @@ $conduction-card-header-date-font-weight: $leiden-typography-font-weight-light;
 $conduction-card-header-date-font-size: $leiden-font-size-sm;
 $conduction-card-header-date-color: $leiden-color-black-9;
 $conduction-card-header-title-color: $leiden-color-black-9;
+$utrecht-surface-background-color: $leiden-color-white-100;
 $utrecht-paragraph-font-weight: $leiden-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $leiden-font-size-md;
 $utrecht-paragraph-font-family: $leiden-typography-sans-serif-font-family;

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

@@ -5750,6 +5750,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#ffffff",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{leiden.color.white.100}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/leiden-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{leiden.color.white.100}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:21:01 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:33 GMT
  */
 
 .noaberkracht-theme {
@@ -107,6 +107,7 @@
   --conduction-card-header-date-font-size: var(--noaberkracht-font-size-xs);
   --conduction-card-header-date-color: var(--noaberkracht-color-blue-22);
   --conduction-card-header-title-color: var(--noaberkracht-color-blue-22);
+  --utrecht-surface-background-color: var(--noaberkracht-color-white-98);
   --utrecht-paragraph-font-weight: var(--noaberkracht-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--noaberkracht-font-size-sm);
   --utrecht-paragraph-font-family: var(--noaberkracht-typography-greycliff-cf-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:21:01 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:33 GMT
  */
 
 export const noaberkrachtColorPrimary = "#4376fc";
@@ -282,6 +282,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#fafafa";
 export const conductionCardHeaderColor = "#003790";
 export const conductionCardHeaderTitleColor = "#003790";
 export const conductionCardHeaderDateColor = "#003790";

package/municipalities/noaberkracht-design-tokens/dist/index.json

@@ -5283,6 +5283,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#fafafa",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noaberkracht.color.white.98}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#f5f5f5",
     "filePath": "src/component/utrecht/table.tokens.json",

package/municipalities/noaberkracht-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:21:01 GMT
+// Generated on Fri, 25 Aug 2023 13:32:33 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -105,6 +105,7 @@
 @conduction-card-header-date-font-size: @noaberkracht-font-size-xs;
 @conduction-card-header-date-color: @noaberkracht-color-blue-22;
 @conduction-card-header-title-color: @noaberkracht-color-blue-22;
+@utrecht-surface-background-color: @noaberkracht-color-white-98;
 @utrecht-paragraph-font-weight: @noaberkracht-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @noaberkracht-font-size-sm;
 @utrecht-paragraph-font-family: @noaberkracht-typography-greycliff-cf-font-family;

package/municipalities/noaberkracht-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:21:01 GMT
+// Generated on Fri, 25 Aug 2023 13:32:33 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -105,6 +105,7 @@ $conduction-card-header-date-font-weight: $noaberkracht-typography-font-weight-l
 $conduction-card-header-date-font-size: $noaberkracht-font-size-xs;
 $conduction-card-header-date-color: $noaberkracht-color-blue-22;
 $conduction-card-header-title-color: $noaberkracht-color-blue-22;
+$utrecht-surface-background-color: $noaberkracht-color-white-98;
 $utrecht-paragraph-font-weight: $noaberkracht-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $noaberkracht-font-size-sm;
 $utrecht-paragraph-font-family: $noaberkracht-typography-greycliff-cf-font-family;

package/municipalities/noaberkracht-design-tokens/dist/tokens.json

@@ -5950,6 +5950,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#fafafa",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{noaberkracht.color.white.98}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

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

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{noaberkracht.color.white.98}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:54 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:25 GMT
  */
 
 .noordwijk-theme {
@@ -116,6 +116,7 @@
   --conduction-card-header-date-font-weight: var(--noordwijk-typography-font-weight-light);
   --conduction-card-header-date-font-size: var(--noordwijk-font-size-sm);
   --conduction-card-header-date-color: var(--noordwijk-color-light-green-24);
+  --utrecht-surface-background-color: var(--noordwijk-color-light-blue-96);
   --utrecht-paragraph-font-weight: var(--noordwijk-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--noordwijk-font-size-md);
   --utrecht-paragraph-font-family: var(--noordwijk-typography-roboto-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:53 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:25 GMT
  */
 
 export const noordwijkColorPrimary = "#2c2276";
@@ -287,6 +287,7 @@ export const utrechtParagraphFontWeight = "300";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#f2f7fa";
 export const conductionCardHeaderColor = "#000000";
 export const conductionCardHeaderTitleColor = "#2c2276";
 export const conductionCardHeaderDateColor = "#007c4c";

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

@@ -5501,6 +5501,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#f2f7fa",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.light-blue.96}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/extra-tokens/table.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:54 GMT
+// Generated on Fri, 25 Aug 2023 13:32:25 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -114,6 +114,7 @@
 @conduction-card-header-date-font-weight: @noordwijk-typography-font-weight-light;
 @conduction-card-header-date-font-size: @noordwijk-font-size-sm;
 @conduction-card-header-date-color: @noordwijk-color-light-green-24;
+@utrecht-surface-background-color: @noordwijk-color-light-blue-96;
 @utrecht-paragraph-font-weight: @noordwijk-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @noordwijk-font-size-md;
 @utrecht-paragraph-font-family: @noordwijk-typography-roboto-font-family;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:54 GMT
+// Generated on Fri, 25 Aug 2023 13:32:25 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -114,6 +114,7 @@ $conduction-card-header-date-margin-block-end: $noordwijk-size-xs;
 $conduction-card-header-date-font-weight: $noordwijk-typography-font-weight-light;
 $conduction-card-header-date-font-size: $noordwijk-font-size-sm;
 $conduction-card-header-date-color: $noordwijk-color-light-green-24;
+$utrecht-surface-background-color: $noordwijk-color-light-blue-96;
 $utrecht-paragraph-font-weight: $noordwijk-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $noordwijk-font-size-md;
 $utrecht-paragraph-font-family: $noordwijk-typography-roboto-font-family;

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

@@ -6064,6 +6064,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#f2f7fa",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{noordwijk.color.light-blue.96}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/noordwijk-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{noordwijk.color.light-blue.96}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:28 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:03 GMT
  */
 
 .tubbergen-theme {
@@ -120,6 +120,7 @@
   --conduction-card-header-date-margin-block-end: var(--tubbergen-size-xs);
   --conduction-card-header-date-font-weight: var(--tubbergen-typography-font-weight-light);
   --conduction-card-header-date-font-size: var(--tubbergen-font-size-sm);
+  --utrecht-surface-background-color: var(--tubbergen-color-white-100);
   --utrecht-paragraph-font-weight: var(--tubbergen-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--tubbergen-font-size-md);
   --utrecht-paragraph-font-family: var(--tubbergen-typography-lato-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:28 GMT
+ * Generated on Fri, 25 Aug 2023 13:32:03 GMT
  */
 
 export const tubbergenColorPrimary = "#0b612d";
@@ -316,6 +316,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#333333";
 export const conductionCardHeaderTitleColor = "#333333";
 export const conductionCardHeaderDateColor = "#333333";

package/municipalities/tubbergen-design-tokens/dist/index.json

@@ -5826,6 +5826,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{tubbergen.color.white.100}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/extra-tokens/table.tokens.json",

package/municipalities/tubbergen-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:28 GMT
+// Generated on Fri, 25 Aug 2023 13:32:04 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -118,6 +118,7 @@
 @conduction-card-header-date-margin-block-end: @tubbergen-size-xs;
 @conduction-card-header-date-font-weight: @tubbergen-typography-font-weight-light;
 @conduction-card-header-date-font-size: @tubbergen-font-size-sm;
+@utrecht-surface-background-color: @tubbergen-color-white-100;
 @utrecht-paragraph-font-weight: @tubbergen-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @tubbergen-font-size-md;
 @utrecht-paragraph-font-family: @tubbergen-typography-lato-font-family;

package/municipalities/tubbergen-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:28 GMT
+// Generated on Fri, 25 Aug 2023 13:32:04 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -118,6 +118,7 @@ $conduction-card-wrapper-background-color: $tubbergen-color-green-89;
 $conduction-card-header-date-margin-block-end: $tubbergen-size-xs;
 $conduction-card-header-date-font-weight: $tubbergen-typography-font-weight-light;
 $conduction-card-header-date-font-size: $tubbergen-font-size-sm;
+$utrecht-surface-background-color: $tubbergen-color-white-100;
 $utrecht-paragraph-font-weight: $tubbergen-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $tubbergen-font-size-md;
 $utrecht-paragraph-font-family: $tubbergen-typography-lato-font-family;

package/municipalities/tubbergen-design-tokens/dist/tokens.json

@@ -6669,6 +6669,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#ffffff",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{tubbergen.color.white.100}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/tubbergen-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{tubbergen.color.white.100}" },
+      "color": {}
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:16 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:56 GMT
  */
 
 .xxllnc-theme {
@@ -116,6 +116,7 @@
   --conduction-card-header-date-color: var(--xxllnc-color-white-95);
   --conduction-card-header-title-color: var(--xxllnc-color-white-95);
   --conduction-card-header-color: var(--xxllnc-color-white-95);
+  --utrecht-surface-background-color: var(--xxllnc-color-white-100);
   --utrecht-paragraph-font-weight: var(--xxllnc-typography-font-weight-normal);
   --utrecht-paragraph-font-size: var(--xxllnc-font-size-md);
   --utrecht-paragraph-font-family: var(--xxllnc-typography-sans-serif-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Aug 2023 15:20:16 GMT
+ * Generated on Fri, 25 Aug 2023 13:31:56 GMT
  */
 
 export const xxllncColorPrimary = "#000000ad"; // Primary with 68% transparency
@@ -278,6 +278,7 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5em";
 export const utrechtParagraphMarginBlockStart = 0;
 export const utrechtParagraphMarginBlockEnd = 0;
+export const utrechtSurfaceBackgroundColor = "#ffffff";
 export const conductionCardHeaderColor = "#f1f1f1";
 export const conductionCardHeaderTitleColor = "#f1f1f1";
 export const conductionCardHeaderDateColor = "#f1f1f1";

package/municipalities/xxllnc-design-tokens/dist/index.json

@@ -3866,6 +3866,25 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/utrecht/surface.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{xxllnc.color.white.100}"
+    },
+    "name": "utrechtSurfaceBackgroundColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "surface",
+      "item": "background-color"
+    },
+    "path": [
+      "utrecht",
+      "surface",
+      "background-color"
+    ]
+  },
   {
     "value": "#f5f5f5",
     "filePath": "src/component/utrecht/table.tokens.json",

package/municipalities/xxllnc-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:16 GMT
+// Generated on Fri, 25 Aug 2023 13:31:56 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -114,6 +114,7 @@
 @conduction-card-header-date-color: @xxllnc-color-white-95;
 @conduction-card-header-title-color: @xxllnc-color-white-95;
 @conduction-card-header-color: @xxllnc-color-white-95;
+@utrecht-surface-background-color: @xxllnc-color-white-100;
 @utrecht-paragraph-font-weight: @xxllnc-typography-font-weight-normal;
 @utrecht-paragraph-font-size: @xxllnc-font-size-md;
 @utrecht-paragraph-font-family: @xxllnc-typography-sans-serif-font-family;

package/municipalities/xxllnc-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 15:20:16 GMT
+// Generated on Fri, 25 Aug 2023 13:31:56 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -114,6 +114,7 @@ $conduction-card-header-date-font-size: $xxllnc-font-size-sm;
 $conduction-card-header-date-color: $xxllnc-color-white-95;
 $conduction-card-header-title-color: $xxllnc-color-white-95;
 $conduction-card-header-color: $xxllnc-color-white-95;
+$utrecht-surface-background-color: $xxllnc-color-white-100;
 $utrecht-paragraph-font-weight: $xxllnc-typography-font-weight-normal;
 $utrecht-paragraph-font-size: $xxllnc-font-size-md;
 $utrecht-paragraph-font-family: $xxllnc-typography-sans-serif-font-family;

package/municipalities/xxllnc-design-tokens/dist/tokens.json

@@ -5887,6 +5887,28 @@
         "font-weight": {},
         "line-height": {}
       }
+    },
+    "surface": {
+      "background-color": {
+        "value": "#ffffff",
+        "filePath": "src/component/utrecht/surface.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{xxllnc.color.white.100}"
+        },
+        "name": "utrechtSurfaceBackgroundColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "surface",
+          "item": "background-color"
+        },
+        "path": [
+          "utrecht",
+          "surface",
+          "background-color"
+        ]
+      },
+      "color": {}
     }
   },
   "conduction": {

package/municipalities/xxllnc-design-tokens/src/component/utrecht/surface.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "surface": {
+      "background-color": { "value": "{xxllnc.color.white.100}" },
+      "color": {}
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/theme",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Conduction's design tokens theme",
   "main": "index.js",
   "repository": {