@conduction/theme 1.0.49 → 1.0.50

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

@@ -391,6 +391,73 @@
       "background-color"
     ]
   },
+  {
+    "value": "#000000",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.black.0}"
+    },
+    "name": "conductionInputSelectListOptionColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "color"
+    ]
+  },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.white.100}"
+    },
+    "name": "conductionInputSelectListOptionFocusBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "focus",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "focus",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#000000",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.black.0}"
+    },
+    "name": "conductionInputSelectListOptionFocusColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "focus",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "focus",
+      "color"
+    ]
+  },
   {
     "value": "\"Roboto\", Monospace, Arial, sans-serif",
     "filePath": "src/component/conduction/select.tokens.json",
@@ -481,6 +548,52 @@
       "font-family"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.white.100}"
+    },
+    "name": "conductionInputSelectListOptionSelectedBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "selected",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "selected",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#2c2276",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{noordwijk.color.primary}"
+    },
+    "name": "conductionInputSelectListOptionSelectedColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "selected",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "selected",
+      "color"
+    ]
+  },
   {
     "value": 0,
     "filePath": "src/component/conduction/select.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:00 GMT
+// Generated on Tue, 17 Oct 2023 12:25:36 GMT
 
 @conduction-tabs-tab-list-border-bottom-style: solid;
 @conduction-tabs-tab-list-margin-block-end: 0px;
@@ -179,8 +179,12 @@
 @conduction-table-wrapper-scroll-button-color: @noordwijk-color-black-0;
 @conduction-table-wrapper-scroll-button-background-color: @noordwijk-color-white-100;
 @conduction-input-select-placeholder-font-family: @noordwijk-typography-roboto-font-family;
+@conduction-input-select-list-option-focus-color: @noordwijk-color-black-0;
+@conduction-input-select-list-option-focus-background-color: @noordwijk-color-white-100;
+@conduction-input-select-list-option-selected-background-color: @noordwijk-color-white-100;
 @conduction-input-select-list-option-hover-background-color: @noordwijk-color-white-100;
 @conduction-input-select-list-option-hover-font-family: @noordwijk-typography-roboto-font-family;
+@conduction-input-select-list-option-color: @noordwijk-color-black-0;
 @conduction-input-select-list-option-background-color: @noordwijk-color-white-100;
 @conduction-input-select-list-option-font-family: @noordwijk-typography-roboto-font-family;
 @conduction-input-select-invalid-border-color: @noordwijk-color-error;
@@ -421,6 +425,7 @@
 @conduction-tabs-tab-selected-border-bottom-color: @noordwijk-color-primary;
 @conduction-tabs-tab-font-family: @utrecht-document-font-family;
 @conduction-input-select-placeholder-color: @utrecht-form-input-placeholder-color;
+@conduction-input-select-list-option-selected-color: @noordwijk-color-primary;
 @conduction-input-select-list-option-hover-color: @noordwijk-color-primary;
 @conduction-pagination-item-font-size: @utrecht-document-font-size;
 @conduction-secondary-top-nav-current-box-shadow: inset 0 -4px @noordwijk-color-primary;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:00 GMT
+// Generated on Tue, 17 Oct 2023 12:25:36 GMT
 
 $conduction-tabs-tab-list-border-bottom-style: solid;
 $conduction-tabs-tab-list-margin-block-end: 0px;
@@ -179,8 +179,12 @@ $conduction-table-wrapper-scroll-button-padding-inline-start: $noordwijk-size-sm
 $conduction-table-wrapper-scroll-button-color: $noordwijk-color-black-0;
 $conduction-table-wrapper-scroll-button-background-color: $noordwijk-color-white-100;
 $conduction-input-select-placeholder-font-family: $noordwijk-typography-roboto-font-family;
+$conduction-input-select-list-option-focus-color: $noordwijk-color-black-0;
+$conduction-input-select-list-option-focus-background-color: $noordwijk-color-white-100;
+$conduction-input-select-list-option-selected-background-color: $noordwijk-color-white-100;
 $conduction-input-select-list-option-hover-background-color: $noordwijk-color-white-100;
 $conduction-input-select-list-option-hover-font-family: $noordwijk-typography-roboto-font-family;
+$conduction-input-select-list-option-color: $noordwijk-color-black-0;
 $conduction-input-select-list-option-background-color: $noordwijk-color-white-100;
 $conduction-input-select-list-option-font-family: $noordwijk-typography-roboto-font-family;
 $conduction-input-select-invalid-border-color: $noordwijk-color-error;
@@ -421,6 +425,7 @@ $conduction-tabs-tab-selected-font-family: $utrecht-document-font-family;
 $conduction-tabs-tab-selected-border-bottom-color: $noordwijk-color-primary;
 $conduction-tabs-tab-font-family: $utrecht-document-font-family;
 $conduction-input-select-placeholder-color: $utrecht-form-input-placeholder-color;
+$conduction-input-select-list-option-selected-color: $noordwijk-color-primary;
 $conduction-input-select-list-option-hover-color: $noordwijk-color-primary;
 $conduction-pagination-item-font-size: $utrecht-document-font-size;
 $conduction-secondary-top-nav-current-box-shadow: inset 0 -4px $noordwijk-color-primary;

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

@@ -8823,6 +8823,27 @@
             "background-color"
           ]
         },
+        "color": {
+          "value": "#000000",
+          "filePath": "src/component/conduction/select.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{noordwijk.color.black.0}"
+          },
+          "name": "conductionInputSelectListOptionColor",
+          "attributes": {
+            "category": "conduction",
+            "type": "input-select",
+            "item": "list-option",
+            "subitem": "color"
+          },
+          "path": [
+            "conduction",
+            "input-select",
+            "list-option",
+            "color"
+          ]
+        },
         "hover": {
           "font-family": {
             "value": "\"Roboto\", Monospace, Arial, sans-serif",
@@ -8847,6 +8868,29 @@
               "font-family"
             ]
           },
+          "background-color": {
+            "value": "#ffffff",
+            "filePath": "src/component/conduction/select.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{noordwijk.color.white.100}"
+            },
+            "name": "conductionInputSelectListOptionHoverBackgroundColor",
+            "attributes": {
+              "category": "conduction",
+              "type": "input-select",
+              "item": "list-option",
+              "subitem": "hover",
+              "state": "background-color"
+            },
+            "path": [
+              "conduction",
+              "input-select",
+              "list-option",
+              "hover",
+              "background-color"
+            ]
+          },
           "color": {
             "value": "#2c2276",
             "filePath": "src/component/conduction/select.tokens.json",
@@ -8869,7 +8913,57 @@
               "hover",
               "color"
             ]
+          }
+        },
+        "selected": {
+          "background-color": {
+            "value": "#ffffff",
+            "filePath": "src/component/conduction/select.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{noordwijk.color.white.100}"
+            },
+            "name": "conductionInputSelectListOptionSelectedBackgroundColor",
+            "attributes": {
+              "category": "conduction",
+              "type": "input-select",
+              "item": "list-option",
+              "subitem": "selected",
+              "state": "background-color"
+            },
+            "path": [
+              "conduction",
+              "input-select",
+              "list-option",
+              "selected",
+              "background-color"
+            ]
           },
+          "color": {
+            "value": "#2c2276",
+            "filePath": "src/component/conduction/select.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{noordwijk.color.primary}"
+            },
+            "name": "conductionInputSelectListOptionSelectedColor",
+            "attributes": {
+              "category": "conduction",
+              "type": "input-select",
+              "item": "list-option",
+              "subitem": "selected",
+              "state": "color"
+            },
+            "path": [
+              "conduction",
+              "input-select",
+              "list-option",
+              "selected",
+              "color"
+            ]
+          }
+        },
+        "focus": {
           "background-color": {
             "value": "#ffffff",
             "filePath": "src/component/conduction/select.tokens.json",
@@ -8877,21 +8971,44 @@
             "original": {
               "value": "{noordwijk.color.white.100}"
             },
-            "name": "conductionInputSelectListOptionHoverBackgroundColor",
+            "name": "conductionInputSelectListOptionFocusBackgroundColor",
             "attributes": {
               "category": "conduction",
               "type": "input-select",
               "item": "list-option",
-              "subitem": "hover",
+              "subitem": "focus",
               "state": "background-color"
             },
             "path": [
               "conduction",
               "input-select",
               "list-option",
-              "hover",
+              "focus",
               "background-color"
             ]
+          },
+          "color": {
+            "value": "#000000",
+            "filePath": "src/component/conduction/select.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{noordwijk.color.black.0}"
+            },
+            "name": "conductionInputSelectListOptionFocusColor",
+            "attributes": {
+              "category": "conduction",
+              "type": "input-select",
+              "item": "list-option",
+              "subitem": "focus",
+              "state": "color"
+            },
+            "path": [
+              "conduction",
+              "input-select",
+              "list-option",
+              "focus",
+              "color"
+            ]
           }
         }
       },

package/municipalities/noordwijk-design-tokens/src/component/conduction/select.tokens.json

@@ -13,14 +13,19 @@
       "list-option": {
         "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
         "background-color": { "value": "{noordwijk.color.white.100}" },
+        "color": { "value": "{noordwijk.color.black.0}" },
         "hover": {
           "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
-          "color": {
-            "value": "{noordwijk.color.primary}"
-          },
-          "background-color": {
-            "value": "{noordwijk.color.white.100}"
-          }
+          "background-color": { "value": "{noordwijk.color.white.100}" },
+          "color": { "value": "{noordwijk.color.primary}" }
+        },
+        "selected": {
+          "background-color": { "value": "{noordwijk.color.white.100}" },
+          "color": { "value": "{noordwijk.color.primary}" }
+        },
+        "focus": {
+          "background-color": { "value": "{noordwijk.color.white.100}" },
+          "color": { "value": "{noordwijk.color.black.0}" }
         }
       },
       "placeholder": {

package/municipalities/open-webconcept-design-tokens/dist/design-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 07:14:26 GMT
+ * Generated on Tue, 17 Oct 2023 12:26:59 GMT
  */
 
 .open-webconcept-theme {

package/municipalities/open-webconcept-design-tokens/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 07:14:25 GMT
+ * Generated on Tue, 17 Oct 2023 12:26:59 GMT
  */
 
 export const openWebconceptColorPrimary = "#1abc9c";

package/municipalities/open-webconcept-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:26 GMT
+// Generated on Tue, 17 Oct 2023 12:26:59 GMT
 
 @conduction-tabs-tab-list-border-bottom-style: solid;
 @conduction-tabs-tab-list-margin-block-end: 0px;

package/municipalities/open-webconcept-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:26 GMT
+// Generated on Tue, 17 Oct 2023 12:26:59 GMT
 
 $conduction-tabs-tab-list-border-bottom-style: solid;
 $conduction-tabs-tab-list-margin-block-end: 0px;

package/municipalities/open-webconcept-design-tokens/dist/tokens.json

@@ -8649,6 +8649,7 @@
           ]
         },
         "background-color": {},
+        "color": {},
         "hover": {
           "font-family": {
             "value": "\"Open Sans\", Monospace, Arial, sans-serif",
@@ -8673,8 +8674,16 @@
               "font-family"
             ]
           },
-          "color": {},
-          "background-color": {}
+          "background-color": {},
+          "color": {}
+        },
+        "selected": {
+          "background-color": {},
+          "color": {}
+        },
+        "focus": {
+          "background-color": {},
+          "color": {}
         }
       },
       "placeholder": {

package/municipalities/open-webconcept-design-tokens/src/component/conduction/select.tokens.json

@@ -13,10 +13,19 @@
       "list-option": {
         "font-family": { "value": "{open-webconcept.typography.sans-serif.font-family}" },
         "background-color": {},
+        "color": {},
         "hover": {
           "font-family": { "value": "{open-webconcept.typography.sans-serif.font-family}" },
-          "color": {},
-          "background-color": {}
+          "background-color": {},
+          "color": {}
+        },
+        "selected": {
+          "background-color": {},
+          "color": {}
+        },
+        "focus": {
+          "background-color": {},
+          "color": {}
         }
       },
       "placeholder": {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 07:14:19 GMT
+ * Generated on Tue, 17 Oct 2023 12:26:48 GMT
  */
 
 .rotterdam-theme {
@@ -131,8 +131,12 @@
   --conduction-table-wrapper-scroll-button-background-color: var(--rotterdam-color-base-white);
   --conduction-input-select-placeholder-font-family: var(--utrecht-document-font-family);
   --conduction-input-select-placeholder-color: var(--rotterdam-color-gray-tint-09);
-  --conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
+  --conduction-input-select-list-option-focus-color: var(--rotterdam-color-base-black);
+  --conduction-input-select-list-option-focus-background-color: var(--utrecht-form-select-background-color);
+  --conduction-input-select-list-option-selected-color: var(--rotterdam-color-base-white);
+  --conduction-input-select-list-option-selected-background-color: var(--rotterdam-color-green-tint-01);
   --conduction-input-select-list-option-hover-color: var(--utrecht-form-select-background-color);
+  --conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
   --conduction-input-select-list-option-hover-font-family: var(--utrecht-document-font-family);
   --conduction-input-select-list-option-background-color: var(--utrecht-form-select-background-color);
   --conduction-input-select-list-option-font-family: var(--utrecht-document-font-family);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 07:14:19 GMT
+ * Generated on Tue, 17 Oct 2023 12:26:48 GMT
  */
 
 export const conductionCardHeaderColor = "var(--utrecht-document-color)";
@@ -106,8 +106,12 @@ export const conductionInputSelectPaddingBlockStart = 0;
 export const conductionInputSelectListOptionFontFamily = "var(--utrecht-document-font-family)";
 export const conductionInputSelectListOptionBackgroundColor = "var(--utrecht-form-select-background-color)";
 export const conductionInputSelectListOptionHoverFontFamily = "var(--utrecht-document-font-family)";
-export const conductionInputSelectListOptionHoverColor = "var(--utrecht-form-select-background-color)";
 export const conductionInputSelectListOptionHoverBackgroundColor = "var(--rotterdam-color-green-tint-01)";
+export const conductionInputSelectListOptionHoverColor = "var(--utrecht-form-select-background-color)";
+export const conductionInputSelectListOptionSelectedBackgroundColor = "var(--rotterdam-color-green-tint-01)";
+export const conductionInputSelectListOptionSelectedColor = "var(--rotterdam-color-base-white)";
+export const conductionInputSelectListOptionFocusBackgroundColor = "var(--utrecht-form-select-background-color)";
+export const conductionInputSelectListOptionFocusColor = "var(--rotterdam-color-base-black)";
 export const conductionInputSelectPlaceholderColor = "var(--rotterdam-color-gray-tint-09)";
 export const conductionInputSelectPlaceholderFontFamily = "var(--utrecht-document-font-family)";
 export const conductionTableWrapperScrollButtonBackgroundColor = "var(--rotterdam-color-base-white)";

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

@@ -492,6 +492,52 @@
       "background-color"
     ]
   },
+  {
+    "value": "var(--utrecht-form-select-background-color)",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "var(--utrecht-form-select-background-color)"
+    },
+    "name": "conductionInputSelectListOptionFocusBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "focus",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "focus",
+      "background-color"
+    ]
+  },
+  {
+    "value": "var(--rotterdam-color-base-black)",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "var(--rotterdam-color-base-black)"
+    },
+    "name": "conductionInputSelectListOptionFocusColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "focus",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "focus",
+      "color"
+    ]
+  },
   {
     "value": "var(--utrecht-document-font-family)",
     "filePath": "src/component/conduction/select.tokens.json",
@@ -582,6 +628,52 @@
       "font-family"
     ]
   },
+  {
+    "value": "var(--rotterdam-color-green-tint-01)",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "var(--rotterdam-color-green-tint-01)"
+    },
+    "name": "conductionInputSelectListOptionSelectedBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "selected",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "selected",
+      "background-color"
+    ]
+  },
+  {
+    "value": "var(--rotterdam-color-base-white)",
+    "filePath": "src/component/conduction/select.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "var(--rotterdam-color-base-white)"
+    },
+    "name": "conductionInputSelectListOptionSelectedColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "input-select",
+      "item": "list-option",
+      "subitem": "selected",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "input-select",
+      "list-option",
+      "selected",
+      "color"
+    ]
+  },
   {
     "value": 0,
     "filePath": "src/component/conduction/select.tokens.json",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:19 GMT
+// Generated on Tue, 17 Oct 2023 12:26:48 GMT
 
 @utrecht-page-max-inline-size: 1140px;
 @utrecht-page-margin-inline-end: var(--utrecht-space-block-xl);
@@ -129,8 +129,12 @@
 @conduction-table-wrapper-scroll-button-background-color: var(--rotterdam-color-base-white);
 @conduction-input-select-placeholder-font-family: var(--utrecht-document-font-family);
 @conduction-input-select-placeholder-color: var(--rotterdam-color-gray-tint-09);
-@conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
+@conduction-input-select-list-option-focus-color: var(--rotterdam-color-base-black);
+@conduction-input-select-list-option-focus-background-color: var(--utrecht-form-select-background-color);
+@conduction-input-select-list-option-selected-color: var(--rotterdam-color-base-white);
+@conduction-input-select-list-option-selected-background-color: var(--rotterdam-color-green-tint-01);
 @conduction-input-select-list-option-hover-color: var(--utrecht-form-select-background-color);
+@conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
 @conduction-input-select-list-option-hover-font-family: var(--utrecht-document-font-family);
 @conduction-input-select-list-option-background-color: var(--utrecht-form-select-background-color);
 @conduction-input-select-list-option-font-family: var(--utrecht-document-font-family);

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 07:14:19 GMT
+// Generated on Tue, 17 Oct 2023 12:26:48 GMT
 
 $utrecht-page-max-inline-size: 1140px;
 $utrecht-page-margin-inline-end: var(--utrecht-space-block-xl);
@@ -129,8 +129,12 @@ $conduction-table-wrapper-scroll-button-color: var(--utrecht-document-color);
 $conduction-table-wrapper-scroll-button-background-color: var(--rotterdam-color-base-white);
 $conduction-input-select-placeholder-font-family: var(--utrecht-document-font-family);
 $conduction-input-select-placeholder-color: var(--rotterdam-color-gray-tint-09);
-$conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
+$conduction-input-select-list-option-focus-color: var(--rotterdam-color-base-black);
+$conduction-input-select-list-option-focus-background-color: var(--utrecht-form-select-background-color);
+$conduction-input-select-list-option-selected-color: var(--rotterdam-color-base-white);
+$conduction-input-select-list-option-selected-background-color: var(--rotterdam-color-green-tint-01);
 $conduction-input-select-list-option-hover-color: var(--utrecht-form-select-background-color);
+$conduction-input-select-list-option-hover-background-color: var(--rotterdam-color-green-tint-01);
 $conduction-input-select-list-option-hover-font-family: var(--utrecht-document-font-family);
 $conduction-input-select-list-option-background-color: var(--utrecht-form-select-background-color);
 $conduction-input-select-list-option-font-family: var(--utrecht-document-font-family);