@conduction/theme 1.0.18 → 1.0.20

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

@@ -689,6 +689,27 @@
       "89"
     ]
   },
+  {
+    "value": "#f5f5f5",
+    "filePath": "src/brand/tubbergen/color.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "#f5f5f5"
+    },
+    "name": "tubbergenColorLightgrey96",
+    "attributes": {
+      "category": "tubbergen",
+      "type": "color",
+      "item": "lightgrey",
+      "subitem": "96"
+    },
+    "path": [
+      "tubbergen",
+      "color",
+      "lightgrey",
+      "96"
+    ]
+  },
   {
     "value": "#0b612d",
     "filePath": "src/brand/tubbergen/color.tokens.json",
@@ -3159,11 +3180,11 @@
     ]
   },
   {
-    "value": "#e4e4e4",
+    "value": "#f5f5f5",
     "filePath": "src/component/utrecht/code.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{tubbergen.color.lightgrey.89}"
+      "value": "{tubbergen.color.lightgrey.96}"
     },
     "name": "utrechtCodeBackgroundColor",
     "attributes": {
@@ -3178,11 +3199,11 @@
     ]
   },
   {
-    "value": "#e4e4e4",
+    "value": "#f5f5f5",
     "filePath": "src/component/utrecht/code.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{tubbergen.color.lightgrey.89}"
+      "value": "{tubbergen.color.lightgrey.96}"
     },
     "name": "utrechtCodeBlockBackgroundColor",
     "attributes": {

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 14 Aug 2023 13:42:16 GMT
+// Generated on Tue, 15 Aug 2023 14:13:22 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -78,6 +78,7 @@
 @tubbergen-font-size-2xs: 10px;
 @tubbergen-font-size-3xs: 8px;
 @tubbergen-font-size-4xs: 5px;
+@tubbergen-color-lightgrey-96: #f5f5f5;
 @tubbergen-color-lightgrey-89: #e4e4e4; // Base/LightGrey
 @tubbergen-color-grey-64: #9aa1ab; // Base/Grey
 @tubbergen-color-grey-46: #767676;
@@ -193,9 +194,9 @@
 @utrecht-code-block-line-height: @tubbergen-size-lg;
 @utrecht-code-block-font-size: @tubbergen-font-size-md;
 @utrecht-code-block-font-family: @tubbergen-typography-monospace-font-family;
-@utrecht-code-block-background-color: @tubbergen-color-lightgrey-89;
+@utrecht-code-block-background-color: @tubbergen-color-lightgrey-96;
 @utrecht-code-font-family: @tubbergen-typography-monospace-font-family;
-@utrecht-code-background-color: @tubbergen-color-lightgrey-89;
+@utrecht-code-background-color: @tubbergen-color-lightgrey-96;
 @utrecht-button-secondary-action-focus-background-color: @tubbergen-color-white-100;
 @utrecht-button-secondary-action-hover-background-color: @tubbergen-color-white-100;
 @utrecht-button-secondary-action-font-weight: @tubbergen-typography-font-weight-normal;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 14 Aug 2023 13:42:16 GMT
+// Generated on Tue, 15 Aug 2023 14:13:22 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -78,6 +78,7 @@ $tubbergen-font-size-xs: 12px;
 $tubbergen-font-size-2xs: 10px;
 $tubbergen-font-size-3xs: 8px;
 $tubbergen-font-size-4xs: 5px;
+$tubbergen-color-lightgrey-96: #f5f5f5;
 $tubbergen-color-lightgrey-89: #e4e4e4; // Base/LightGrey
 $tubbergen-color-grey-64: #9aa1ab; // Base/Grey
 $tubbergen-color-grey-46: #767676;
@@ -193,9 +194,9 @@ $utrecht-code-block-margin-block-start: $tubbergen-size-md;
 $utrecht-code-block-line-height: $tubbergen-size-lg;
 $utrecht-code-block-font-size: $tubbergen-font-size-md;
 $utrecht-code-block-font-family: $tubbergen-typography-monospace-font-family;
-$utrecht-code-block-background-color: $tubbergen-color-lightgrey-89;
+$utrecht-code-block-background-color: $tubbergen-color-lightgrey-96;
 $utrecht-code-font-family: $tubbergen-typography-monospace-font-family;
-$utrecht-code-background-color: $tubbergen-color-lightgrey-89;
+$utrecht-code-background-color: $tubbergen-color-lightgrey-96;
 $utrecht-button-secondary-action-focus-background-color: $tubbergen-color-white-100;
 $utrecht-button-secondary-action-hover-background-color: $tubbergen-color-white-100;
 $utrecht-button-secondary-action-font-weight: $tubbergen-typography-font-weight-normal;

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

@@ -713,6 +713,27 @@
             "lightgrey",
             "89"
           ]
+        },
+        "96": {
+          "value": "#f5f5f5",
+          "filePath": "src/brand/tubbergen/color.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "#f5f5f5"
+          },
+          "name": "tubbergenColorLightgrey96",
+          "attributes": {
+            "category": "tubbergen",
+            "type": "color",
+            "item": "lightgrey",
+            "subitem": "96"
+          },
+          "path": [
+            "tubbergen",
+            "color",
+            "lightgrey",
+            "96"
+          ]
         }
       }
     },
@@ -4209,11 +4230,11 @@
     },
     "code": {
       "background-color": {
-        "value": "#e4e4e4",
+        "value": "#f5f5f5",
         "filePath": "src/component/utrecht/code.tokens.json",
         "isSource": true,
         "original": {
-          "value": "{tubbergen.color.lightgrey.89}"
+          "value": "{tubbergen.color.lightgrey.96}"
         },
         "name": "utrechtCodeBackgroundColor",
         "attributes": {
@@ -4288,11 +4309,11 @@
     },
     "code-block": {
       "background-color": {
-        "value": "#e4e4e4",
+        "value": "#f5f5f5",
         "filePath": "src/component/utrecht/code.tokens.json",
         "isSource": true,
         "original": {
-          "value": "{tubbergen.color.lightgrey.89}"
+          "value": "{tubbergen.color.lightgrey.96}"
         },
         "name": "utrechtCodeBlockBackgroundColor",
         "attributes": {

package/municipalities/tubbergen-design-tokens/src/brand/tubbergen/color.tokens.json

@@ -25,70 +25,94 @@
       "alert-info-background": { "value": "{tubbergen.color.green.89}" },
 
       "green": {
-        "89": {
-          "value": "#d5efdf"
-        },
-        "76": { "value": "#b0d4be" },
-        "24": {
-          "value": "#067432"
+        "11": {
+          "value": "#063318"
         },
         "21": {
           "value": "#0b612d",
           "comment": "Base/Green"
         },
-        "11": {
-          "value": "#063318"
+        "24": {
+          "value": "#067432"
+        },
+        "76": {
+          "value": "#b0d4be"
+        },
+        "89": {
+          "value": "#d5efdf"
         }
       },
 
       "blue": {
+        "48": {
+          "value": "#2e79c6"
+        },
         "84": {
           "value": "#ccd4df",
           "comment": "Base/Blue"
         },
-        "96": { "value": "#f2f4f7" },
-        "94": { "value": "#edeff2" },
-        "48": {
-          "value": "#2e79c6"
+        "94": {
+          "value": "#edeff2"
+        },
+        "96": {
+          "value": "#f2f4f7"
         }
       },
 
       "white": {
+        "98": {
+          "value": "#fafafa"
+        },
         "100": {
           "value": "#ffffff",
           "comment": "Base/White"
-        },
-        "98": {
-          "value": "#fafafa"
         }
       },
 
       "black": {
-        "0": { "value": "#000000" },
-        "13": { "value": "#222222", "comment": "Base/Black" },
-        "20": { "value": "#333333" },
-        "33": { "value": "#555555" }
+        "0": {
+          "value": "#000000"
+        },
+        "13": {
+          "value": "#222222",
+          "comment": "Base/Black"
+        },
+        "20": {
+          "value": "#333333"
+        },
+        "33": {
+          "value": "#555555"
+        }
       },
 
       "yellow": {
-        "0": { "value": "#f0b700", "comment": "Base/Yellow" }
+        "0": {
+          "value": "#f0b700",
+          "comment": "Base/Yellow"
+        }
       },
 
       "grey": {
-        "64": {
-          "value": "#9aa1ab",
-          "comment": "Base/Grey"
-        },
         "42": {
           "value": "#6b6b6b"
         },
         "46": {
           "value": "#767676"
+        },
+        "64": {
+          "value": "#9aa1ab",
+          "comment": "Base/Grey"
         }
       },
 
       "lightgrey": {
-        "89": { "value": "#e4e4e4", "comment": "Base/LightGrey" }
+        "89": {
+          "value": "#e4e4e4",
+          "comment": "Base/LightGrey"
+        },
+        "96": {
+          "value": "#f5f5f5"
+        }
       }
     }
   }

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

@@ -1,7 +1,7 @@
 {
   "utrecht": {
     "code": {
-      "background-color": { "value": "{tubbergen.color.lightgrey.89}" },
+      "background-color": { "value": "{tubbergen.color.lightgrey.96}" },
       "color": { "value": "{utrecht.document.color}" },
       "font-family": { "value": "{tubbergen.typography.monospace.font-family}" },
       "font-size": { "value": "inherit" },
@@ -9,7 +9,7 @@
     },
 
     "code-block": {
-      "background-color": { "value": "{tubbergen.color.lightgrey.89}" },
+      "background-color": { "value": "{tubbergen.color.lightgrey.96}" },
       "color": { "value": "{utrecht.document.color}" },
       "font-family": { "value": "{tubbergen.typography.monospace.font-family}" },
       "font-size": { "value": "{tubbergen.font-size.md}" },

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Aug 2023 09:52:10 GMT
+ * Generated on Tue, 15 Aug 2023 14:13:14 GMT
  */
 
 .xxllnc-theme {
@@ -70,13 +70,13 @@
   --xxllnc-font-size-2xs: 10px;
   --xxllnc-font-size-3xs: 8px;
   --xxllnc-font-size-4xs: 5px;
-  --xxllnc-color-lightgrey: #f5f5f5;
+  --xxllnc-color-lightgrey-96: #f5f5f5;
   --xxllnc-color-grey-90-hover: #e5e5e5cc; /* Grey with 80% transparency */
   --xxllnc-color-grey-92: #eaeaea; /* Base/Grey */
   --xxllnc-color-grey-90: #e5e5e5;
   --xxllnc-color-grey-43: #6d6d6d;
-  --xxllnc-color-black-0-22t: #00000038; /* Black with 22% transparency */
   --xxllnc-color-black-17-hover: #2b2b2bcc; /* Black with 80% transparency */
+  --xxllnc-color-black-0-22t: #00000038; /* Black with 22% transparency */
   --xxllnc-color-black-21: #333338;
   --xxllnc-color-black-17: #2b2b2b;
   --xxllnc-color-black-16: #28282c; /* Base/Black */
@@ -109,7 +109,7 @@
   --utrecht-textbox-border-color: var(--xxllnc-color-black-0-22t);
   --utrecht-textbox-background-color: var(--xxllnc-color-white-100-0t);
   --utrecht-table-row-border-block-end-width: var(--xxllnc-size-4xs);
-  --utrecht-table-row-border-block-end-color: var(--xxllnc-color-lightgrey);
+  --utrecht-table-row-border-block-end-color: var(--xxllnc-color-lightgrey-96);
   --utrecht-table-cell-padding-inline-start: var(--xxllnc-size-md);
   --utrecht-table-cell-padding-inline-end: var(--xxllnc-size-md);
   --utrecht-table-cell-padding-block-start: var(--xxllnc-size-md);
@@ -118,7 +118,7 @@
   --utrecht-table-header-font-weight: var(--xxllnc-typography-font-weight-bold);
   --utrecht-table-margin-block-start: var(--xxllnc-size-md);
   --utrecht-table-border-width: var(--xxllnc-size-4xs);
-  --utrecht-table-border-color: var(--xxllnc-color-lightgrey);
+  --utrecht-table-border-color: var(--xxllnc-color-lightgrey-96);
   --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);
@@ -198,10 +198,10 @@
   --utrecht-code-block-font-size: var(--xxllnc-font-size-md);
   --utrecht-code-block-font-family: var(--xxllnc-typography-monospace-font-family);
   --utrecht-code-block-color: var(--xxllnc-color-black-16);
-  --utrecht-code-block-background-color: var(--xxllnc-color-lightgrey);
+  --utrecht-code-block-background-color: var(--xxllnc-color-lightgrey-96);
   --utrecht-code-font-family: var(--xxllnc-typography-monospace-font-family);
   --utrecht-code-color: var(--xxllnc-color-black-16);
-  --utrecht-code-background-color: var(--xxllnc-color-lightgrey);
+  --utrecht-code-background-color: var(--xxllnc-color-lightgrey-96);
   --utrecht-button-secondary-action-hover-color: var(--xxllnc-color-black-17-hover);
   --utrecht-button-secondary-action-hover-border-color: var(--xxllnc-color-black-17-hover);
   --utrecht-button-secondary-action-hover-background-color: var(--xxllnc-color-white-100);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 10 Aug 2023 09:52:10 GMT
+ * Generated on Tue, 15 Aug 2023 14:13:14 GMT
  */
 
 export const xxllncColorPrimary = "#000000ad"; // Primary with 68% transparency
@@ -23,13 +23,13 @@ export const xxllncColorWhite1000t = "#ffffff"; // White with 0% transparency
 export const xxllncColorBlack16 = "#28282c"; // Base/Black
 export const xxllncColorBlack17 = "#2b2b2b";
 export const xxllncColorBlack21 = "#333338";
-export const xxllncColorBlack17Hover = "#2b2b2bcc"; // Black with 80% transparency
 export const xxllncColorBlack022t = "#00000038"; // Black with 22% transparency
+export const xxllncColorBlack17Hover = "#2b2b2bcc"; // Black with 80% transparency
 export const xxllncColorGrey43 = "#6d6d6d";
 export const xxllncColorGrey90 = "#e5e5e5";
 export const xxllncColorGrey92 = "#eaeaea"; // Base/Grey
 export const xxllncColorGrey90Hover = "#e5e5e5cc"; // Grey with 80% transparency
-export const xxllncColorLightgrey = "#f5f5f5";
+export const xxllncColorLightgrey96 = "#f5f5f5";
 export const xxllncFontSize4xs = "5px";
 export const xxllncFontSize3xs = "8px";
 export const xxllncFontSize2xs = "10px";

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

@@ -1279,7 +1279,7 @@
     "filePath": "src/component/utrecht/code.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{xxllnc.color.lightgrey}"
+      "value": "{xxllnc.color.lightgrey.96}"
     },
     "name": "utrechtCodeBackgroundColor",
     "attributes": {
@@ -1298,7 +1298,7 @@
     "filePath": "src/component/utrecht/code.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{xxllnc.color.lightgrey}"
+      "value": "{xxllnc.color.lightgrey.96}"
     },
     "name": "utrechtCodeBlockBackgroundColor",
     "attributes": {
@@ -3518,7 +3518,7 @@
     "filePath": "src/component/utrecht/table.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{xxllnc.color.lightgrey}"
+      "value": "{xxllnc.color.lightgrey.96}"
     },
     "name": "utrechtTableBorderColor",
     "attributes": {
@@ -3863,7 +3863,7 @@
     "filePath": "src/component/utrecht/table.tokens.json",
     "isSource": true,
     "original": {
-      "value": "{xxllnc.color.lightgrey}"
+      "value": "{xxllnc.color.lightgrey.96}"
     },
     "name": "utrechtTableRowBorderBlockEndColor",
     "attributes": {
@@ -4686,16 +4686,18 @@
     "original": {
       "value": "#f5f5f5"
     },
-    "name": "xxllncColorLightgrey",
+    "name": "xxllncColorLightgrey96",
     "attributes": {
       "category": "xxllnc",
       "type": "color",
-      "item": "lightgrey"
+      "item": "lightgrey",
+      "subitem": "96"
     },
     "path": [
       "xxllnc",
       "color",
-      "lightgrey"
+      "lightgrey",
+      "96"
     ]
   },
   {

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Aug 2023 09:52:10 GMT
+// Generated on Tue, 15 Aug 2023 14:13:14 GMT
 
 @conduction-input-select-padding-block-start: 0;
 @conduction-input-select-padding-block-end: 0;
@@ -68,13 +68,13 @@
 @xxllnc-font-size-2xs: 10px;
 @xxllnc-font-size-3xs: 8px;
 @xxllnc-font-size-4xs: 5px;
-@xxllnc-color-lightgrey: #f5f5f5;
+@xxllnc-color-lightgrey-96: #f5f5f5;
 @xxllnc-color-grey-90-hover: #e5e5e5cc; // Grey with 80% transparency
 @xxllnc-color-grey-92: #eaeaea; // Base/Grey
 @xxllnc-color-grey-90: #e5e5e5;
 @xxllnc-color-grey-43: #6d6d6d;
-@xxllnc-color-black-0-22t: #00000038; // Black with 22% transparency
 @xxllnc-color-black-17-hover: #2b2b2bcc; // Black with 80% transparency
+@xxllnc-color-black-0-22t: #00000038; // Black with 22% transparency
 @xxllnc-color-black-21: #333338;
 @xxllnc-color-black-17: #2b2b2b;
 @xxllnc-color-black-16: #28282c; // Base/Black
@@ -107,7 +107,7 @@
 @utrecht-textbox-border-color: @xxllnc-color-black-0-22t;
 @utrecht-textbox-background-color: @xxllnc-color-white-100-0t;
 @utrecht-table-row-border-block-end-width: @xxllnc-size-4xs;
-@utrecht-table-row-border-block-end-color: @xxllnc-color-lightgrey;
+@utrecht-table-row-border-block-end-color: @xxllnc-color-lightgrey-96;
 @utrecht-table-cell-padding-inline-start: @xxllnc-size-md;
 @utrecht-table-cell-padding-inline-end: @xxllnc-size-md;
 @utrecht-table-cell-padding-block-start: @xxllnc-size-md;
@@ -116,7 +116,7 @@
 @utrecht-table-header-font-weight: @xxllnc-typography-font-weight-bold;
 @utrecht-table-margin-block-start: @xxllnc-size-md;
 @utrecht-table-border-width: @xxllnc-size-4xs;
-@utrecht-table-border-color: @xxllnc-color-lightgrey;
+@utrecht-table-border-color: @xxllnc-color-lightgrey-96;
 @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;
@@ -196,10 +196,10 @@
 @utrecht-code-block-font-size: @xxllnc-font-size-md;
 @utrecht-code-block-font-family: @xxllnc-typography-monospace-font-family;
 @utrecht-code-block-color: @xxllnc-color-black-16;
-@utrecht-code-block-background-color: @xxllnc-color-lightgrey;
+@utrecht-code-block-background-color: @xxllnc-color-lightgrey-96;
 @utrecht-code-font-family: @xxllnc-typography-monospace-font-family;
 @utrecht-code-color: @xxllnc-color-black-16;
-@utrecht-code-background-color: @xxllnc-color-lightgrey;
+@utrecht-code-background-color: @xxllnc-color-lightgrey-96;
 @utrecht-button-secondary-action-hover-color: @xxllnc-color-black-17-hover;
 @utrecht-button-secondary-action-hover-border-color: @xxllnc-color-black-17-hover;
 @utrecht-button-secondary-action-hover-background-color: @xxllnc-color-white-100;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Aug 2023 09:52:10 GMT
+// Generated on Tue, 15 Aug 2023 14:13:14 GMT
 
 $conduction-input-select-padding-block-start: 0;
 $conduction-input-select-padding-block-end: 0;
@@ -68,13 +68,13 @@ $xxllnc-font-size-xs: 12px;
 $xxllnc-font-size-2xs: 10px;
 $xxllnc-font-size-3xs: 8px;
 $xxllnc-font-size-4xs: 5px;
-$xxllnc-color-lightgrey: #f5f5f5;
+$xxllnc-color-lightgrey-96: #f5f5f5;
 $xxllnc-color-grey-90-hover: #e5e5e5cc; // Grey with 80% transparency
 $xxllnc-color-grey-92: #eaeaea; // Base/Grey
 $xxllnc-color-grey-90: #e5e5e5;
 $xxllnc-color-grey-43: #6d6d6d;
-$xxllnc-color-black-0-22t: #00000038; // Black with 22% transparency
 $xxllnc-color-black-17-hover: #2b2b2bcc; // Black with 80% transparency
+$xxllnc-color-black-0-22t: #00000038; // Black with 22% transparency
 $xxllnc-color-black-21: #333338;
 $xxllnc-color-black-17: #2b2b2b;
 $xxllnc-color-black-16: #28282c; // Base/Black
@@ -107,7 +107,7 @@ $utrecht-textbox-border-width: $xxllnc-size-4xs;
 $utrecht-textbox-border-color: $xxllnc-color-black-0-22t;
 $utrecht-textbox-background-color: $xxllnc-color-white-100-0t;
 $utrecht-table-row-border-block-end-width: $xxllnc-size-4xs;
-$utrecht-table-row-border-block-end-color: $xxllnc-color-lightgrey;
+$utrecht-table-row-border-block-end-color: $xxllnc-color-lightgrey-96;
 $utrecht-table-cell-padding-inline-start: $xxllnc-size-md;
 $utrecht-table-cell-padding-inline-end: $xxllnc-size-md;
 $utrecht-table-cell-padding-block-start: $xxllnc-size-md;
@@ -116,7 +116,7 @@ $utrecht-table-header-cell-font-weight: $xxllnc-typography-font-weight-bold;
 $utrecht-table-header-font-weight: $xxllnc-typography-font-weight-bold;
 $utrecht-table-margin-block-start: $xxllnc-size-md;
 $utrecht-table-border-width: $xxllnc-size-4xs;
-$utrecht-table-border-color: $xxllnc-color-lightgrey;
+$utrecht-table-border-color: $xxllnc-color-lightgrey-96;
 $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;
@@ -196,10 +196,10 @@ $utrecht-code-block-line-height: $xxllnc-size-lg;
 $utrecht-code-block-font-size: $xxllnc-font-size-md;
 $utrecht-code-block-font-family: $xxllnc-typography-monospace-font-family;
 $utrecht-code-block-color: $xxllnc-color-black-16;
-$utrecht-code-block-background-color: $xxllnc-color-lightgrey;
+$utrecht-code-block-background-color: $xxllnc-color-lightgrey-96;
 $utrecht-code-font-family: $xxllnc-typography-monospace-font-family;
 $utrecht-code-color: $xxllnc-color-black-16;
-$utrecht-code-background-color: $xxllnc-color-lightgrey;
+$utrecht-code-background-color: $xxllnc-color-lightgrey-96;
 $utrecht-button-secondary-action-hover-color: $xxllnc-color-black-17-hover;
 $utrecht-button-secondary-action-hover-border-color: $xxllnc-color-black-17-hover;
 $utrecht-button-secondary-action-hover-background-color: $xxllnc-color-white-100;