@conduction/theme 1.0.36 → 1.0.38

package/README.md

@@ -6,6 +6,10 @@ Conduction's design tokens theme
 
 - **Version 1**
 
+  - 1.0.38: 
+    - Added table-wrapper-tokens to all themes.
+    - Updated tabs tokens in all themes.
+  - 1.0.37: Updated all themes to correct way of working.
   - 1.0.36: Added Badge-counter and Tabs tokens to all themes.
   - 1.0.34 / 1.0.35: Rotterdam theme fix.
   - 1.0.33: Added Rotterdam theme.

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 08:35:43 GMT
+ * Generated on Tue, 19 Sep 2023 14:29:50 GMT
  */
 
 .conduction-theme {
@@ -158,8 +158,6 @@
   --utrecht-heading-1-font-weight: var(--conduction-typography-font-weight-bold);
   --utrecht-heading-1-font-size: var(--conduction-font-size-3xl);
   --utrecht-heading-1-font-family: var(--conduction-typography-aldritch-font-family);
-  --utrecht-textbox-focus-background-color: var(--conduction-color-white-100);
-  --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
   --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
   --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
   --utrecht-textbox-padding-block-start: var(--conduction-size-xs);
@@ -168,6 +166,8 @@
   --utrecht-textbox-color: var(--conduction-color-grey-29);
   --utrecht-textbox-border-width: var(--conduction-size-4xs);
   --utrecht-textbox-border-color: var(--conduction-color-grey-48);
+  --utrecht-textbox-focus-background-color: var(--conduction-color-white-100);
+  --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
   --utrecht-textbox-background-color: var(--conduction-color-white-100);
   --utrecht-table-cell-padding-inline-start: var(--conduction-size-md);
   --utrecht-table-cell-padding-inline-end: var(--conduction-size-md);
@@ -193,8 +193,6 @@
   --utrecht-page-footer-color: var(--conduction-color-black-0);
   --utrecht-page-footer-background-color: var(--conduction-color-lightgrey-96);
   --utrecht-icon-gap: var(--conduction-size-xs);
-  --utrecht-form-input-focus-background-color: var(--conduction-color-white-100);
-  --utrecht-form-input-placeholder-color: var(--conduction-color-grey-50);
   --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
   --utrecht-form-input-padding-inline-end: var(--conduction-size-sm);
   --utrecht-form-input-padding-block-start: var(--conduction-size-xs);
@@ -203,6 +201,8 @@
   --utrecht-form-input-color: var(--conduction-color-grey-29);
   --utrecht-form-input-border-width: var(--conduction-size-4xs);
   --utrecht-form-input-border-color: var(--conduction-color-grey-48);
+  --utrecht-form-input-focus-background-color: var(--conduction-color-white-100);
+  --utrecht-form-input-placeholder-color: var(--conduction-color-grey-50);
   --utrecht-form-input-background-color: var(--conduction-color-white-100);
   --utrecht-document-font-size: var(--conduction-font-size-md);
   --utrecht-document-font-family: var(--conduction-typography-sans-serif-font-family);
@@ -294,6 +294,10 @@
   --utrecht-space-block-xs: var(--conduction-size-xs);
   --utrecht-space-block-2xs: var(--conduction-size-2xs);
   --utrecht-space-block-3xs: var(--conduction-size-3xs);
+  --conduction-tabs-scroll-button-hover-color: var(--conduction-color-white-100);
+  --conduction-tabs-scroll-button-hover-background-color: var(--conduction-color-primary-hover);
+  --conduction-tabs-scroll-button-color: var(--conduction-color-white-100);
+  --conduction-tabs-scroll-button-background-color: var(--conduction-color-primary);
   --conduction-tabs-tab-panel-padding-inline-end: var(--conduction-size-lg);
   --conduction-tabs-tab-panel-padding-inline-start: var(--conduction-size-lg);
   --conduction-tabs-tab-panel-padding-block-end: var(--conduction-size-lg);
@@ -313,6 +317,12 @@
   --conduction-tabs-tab-padding-block-end: var(--conduction-size-xs);
   --conduction-tabs-tab-padding-block-start: var(--conduction-size-xs);
   --conduction-tabs-tab-color: var(--conduction-color-grey-29);
+  --conduction-table-wrapper-scroll-button-hover-color: var(--conduction-color-primary);
+  --conduction-table-wrapper-scroll-button-hover-background-color: var(--conduction-color-white-100);
+  --conduction-table-wrapper-scroll-button-padding-inline-end: var(--conduction-size-sm);
+  --conduction-table-wrapper-scroll-button-padding-inline-start: var(--conduction-size-sm);
+  --conduction-table-wrapper-scroll-button-color: var(--conduction-color-black-0);
+  --conduction-table-wrapper-scroll-button-background-color: var(--conduction-color-white-100);
   --conduction-input-select-placeholder-font-family: var(--conduction-typography-sans-serif-font-family);
   --conduction-input-select-list-option-hover-font-family: var(--conduction-typography-sans-serif-font-family);
   --conduction-input-select-list-option-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 Wed, 13 Sep 2023 08:35:43 GMT
+ * Generated on Tue, 19 Sep 2023 14:29:50 GMT
  */
 
 export const conductionColorPrimary = "#4376fc";
@@ -119,6 +119,12 @@ export const conductionInputSelectListOptionFontFamily = "\"Noto Sans\", Arial,
 export const conductionInputSelectListOptionHoverFontFamily = "\"Noto Sans\", Arial, sans-serif";
 export const conductionInputSelectPlaceholderColor = "#808080";
 export const conductionInputSelectPlaceholderFontFamily = "\"Noto Sans\", Arial, sans-serif";
+export const conductionTableWrapperScrollButtonBackgroundColor = "#ffffff";
+export const conductionTableWrapperScrollButtonColor = "#000000";
+export const conductionTableWrapperScrollButtonPaddingInlineStart = "14px";
+export const conductionTableWrapperScrollButtonPaddingInlineEnd = "14px";
+export const conductionTableWrapperScrollButtonHoverBackgroundColor = "#ffffff";
+export const conductionTableWrapperScrollButtonHoverColor = "#4376fc";
 export const conductionTabsTabBackgroundColor = "transparent";
 export const conductionTabsTabColor = "#4a4a4a";
 export const conductionTabsTabBottom = "-2px";
@@ -150,6 +156,10 @@ export const conductionTabsTabPanelPaddingBlockStart = "24px";
 export const conductionTabsTabPanelPaddingBlockEnd = "24px";
 export const conductionTabsTabPanelPaddingInlineStart = "24px";
 export const conductionTabsTabPanelPaddingInlineEnd = "24px";
+export const conductionTabsScrollButtonBackgroundColor = "#4376fc";
+export const conductionTabsScrollButtonColor = "#ffffff";
+export const conductionTabsScrollButtonHoverBackgroundColor = "#2e5ed9";
+export const conductionTabsScrollButtonHoverColor = "#ffffff";
 export const utrechtActionBusyCursor = "wait";
 export const utrechtActionDisabledCursor = "not-allowed";
 export const utrechtActionSubmitCursor = "pointer";
@@ -255,6 +265,8 @@ export const utrechtDocumentColor = "#000000";
 export const utrechtDocumentFontFamily = "\"Noto Sans\", Arial, sans-serif";
 export const utrechtDocumentFontSize = "18px";
 export const utrechtFormInputBackgroundColor = "#ffffff";
+export const utrechtFormInputPlaceholderColor = "#808080";
+export const utrechtFormInputFocusBackgroundColor = "#ffffff";
 export const utrechtFormInputBorderColor = "#7a7a7a";
 export const utrechtFormInputBorderRadius = "3px";
 export const utrechtFormInputBorderWidth = "1px";
@@ -265,8 +277,6 @@ export const utrechtFormInputPaddingBlockEnd = "8px";
 export const utrechtFormInputPaddingBlockStart = "8px";
 export const utrechtFormInputPaddingInlineEnd = "14px";
 export const utrechtFormInputPaddingInlineStart = "14px";
-export const utrechtFormInputPlaceholderColor = "#808080";
-export const utrechtFormInputFocusBackgroundColor = "#ffffff";
 export const utrechtIconGap = "8px";
 export const utrechtPageFooterLogoMaxHeight = "100px";
 export const utrechtPageFooterLogoMaxWidth = "100px";
@@ -304,6 +314,8 @@ export const utrechtTableCellPaddingBlockStart = "18px";
 export const utrechtTableCellPaddingInlineEnd = "18px";
 export const utrechtTableCellPaddingInlineStart = "18px";
 export const utrechtTextboxBackgroundColor = "#ffffff";
+export const utrechtTextboxPlaceholderColor = "#808080";
+export const utrechtTextboxFocusBackgroundColor = "#ffffff";
 export const utrechtTextboxBorderColor = "#7a7a7a";
 export const utrechtTextboxBorderRadius = "3px";
 export const utrechtTextboxBorderWidth = "1px";
@@ -314,8 +326,6 @@ export const utrechtTextboxPaddingBlockEnd = "8px";
 export const utrechtTextboxPaddingBlockStart = "8px";
 export const utrechtTextboxPaddingInlineEnd = "14px";
 export const utrechtTextboxPaddingInlineStart = "14px";
-export const utrechtTextboxPlaceholderColor = "#808080";
-export const utrechtTextboxFocusBackgroundColor = "#ffffff";
 export const utrechtHeading1FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
 export const utrechtHeading1FontSize = "48px";
 export const utrechtHeading1FontWeight = "700";

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

@@ -1926,6 +1926,224 @@
       "xs"
     ]
   },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.white.100}"
+    },
+    "name": "conductionTableWrapperScrollButtonBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "background-color"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#000000",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.black.0}"
+    },
+    "name": "conductionTableWrapperScrollButtonColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "color"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "color"
+    ]
+  },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.white.100}"
+    },
+    "name": "conductionTableWrapperScrollButtonHoverBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "hover",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "hover",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#4376fc",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary}"
+    },
+    "name": "conductionTableWrapperScrollButtonHoverColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "hover",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "hover",
+      "color"
+    ]
+  },
+  {
+    "value": "14px",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.size.sm}"
+    },
+    "name": "conductionTableWrapperScrollButtonPaddingInlineEnd",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "padding-inline-end"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "padding-inline-end"
+    ]
+  },
+  {
+    "value": "14px",
+    "filePath": "src/component/conduction/table-wrapper.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.size.sm}"
+    },
+    "name": "conductionTableWrapperScrollButtonPaddingInlineStart",
+    "attributes": {
+      "category": "conduction",
+      "type": "table-wrapper",
+      "item": "scroll-button",
+      "subitem": "padding-inline-start"
+    },
+    "path": [
+      "conduction",
+      "table-wrapper",
+      "scroll-button",
+      "padding-inline-start"
+    ]
+  },
+  {
+    "value": "#4376fc",
+    "filePath": "src/component/conduction/tabs.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary}"
+    },
+    "name": "conductionTabsScrollButtonBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "tabs",
+      "item": "scroll-button",
+      "subitem": "background-color"
+    },
+    "path": [
+      "conduction",
+      "tabs",
+      "scroll-button",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/tabs.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.white.100}"
+    },
+    "name": "conductionTabsScrollButtonColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "tabs",
+      "item": "scroll-button",
+      "subitem": "color"
+    },
+    "path": [
+      "conduction",
+      "tabs",
+      "scroll-button",
+      "color"
+    ]
+  },
+  {
+    "value": "#2e5ed9",
+    "filePath": "src/component/conduction/tabs.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary-hover}"
+    },
+    "name": "conductionTabsScrollButtonHoverBackgroundColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "tabs",
+      "item": "scroll-button",
+      "subitem": "hover",
+      "state": "background-color"
+    },
+    "path": [
+      "conduction",
+      "tabs",
+      "scroll-button",
+      "hover",
+      "background-color"
+    ]
+  },
+  {
+    "value": "#ffffff",
+    "filePath": "src/component/conduction/tabs.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.white.100}"
+    },
+    "name": "conductionTabsScrollButtonHoverColor",
+    "attributes": {
+      "category": "conduction",
+      "type": "tabs",
+      "item": "scroll-button",
+      "subitem": "hover",
+      "state": "color"
+    },
+    "path": [
+      "conduction",
+      "tabs",
+      "scroll-button",
+      "hover",
+      "color"
+    ]
+  },
   {
     "value": "transparent",
     "filePath": "src/component/conduction/tabs.tokens.json",
@@ -4716,7 +4934,7 @@
   },
   {
     "value": "#7a7a7a",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.color.grey.48}"
@@ -4735,7 +4953,7 @@
   },
   {
     "value": "3px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "3px"
@@ -4754,7 +4972,7 @@
   },
   {
     "value": "1px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.4xs}"
@@ -4773,7 +4991,7 @@
   },
   {
     "value": "#4a4a4a",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.color.grey.29}"
@@ -4813,7 +5031,7 @@
   },
   {
     "value": "\"Noto Sans\", Arial, sans-serif",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.typography.sans-serif.font-family}"
@@ -4832,7 +5050,7 @@
   },
   {
     "value": "15px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "15px"
@@ -4851,7 +5069,7 @@
   },
   {
     "value": "8px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.xs}"
@@ -4870,7 +5088,7 @@
   },
   {
     "value": "8px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.xs}"
@@ -4889,7 +5107,7 @@
   },
   {
     "value": "14px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.sm}"
@@ -4908,7 +5126,7 @@
   },
   {
     "value": "14px",
-    "filePath": "src/component/utrecht/extra-tokens/form-input.tokens.json",
+    "filePath": "src/component/utrecht/form-input.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.sm}"
@@ -7092,7 +7310,7 @@
   },
   {
     "value": "#7a7a7a",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.color.grey.48}"
@@ -7111,7 +7329,7 @@
   },
   {
     "value": "3px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "3px"
@@ -7130,7 +7348,7 @@
   },
   {
     "value": "1px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.4xs}"
@@ -7149,7 +7367,7 @@
   },
   {
     "value": "#4a4a4a",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.color.grey.29}"
@@ -7189,7 +7407,7 @@
   },
   {
     "value": "\"Noto Sans\", Arial, sans-serif",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.typography.sans-serif.font-family}"
@@ -7208,7 +7426,7 @@
   },
   {
     "value": "15px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "15px"
@@ -7227,7 +7445,7 @@
   },
   {
     "value": "8px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.xs}"
@@ -7246,7 +7464,7 @@
   },
   {
     "value": "8px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.xs}"
@@ -7265,7 +7483,7 @@
   },
   {
     "value": "14px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.sm}"
@@ -7284,7 +7502,7 @@
   },
   {
     "value": "14px",
-    "filePath": "src/component/utrecht/extra-tokens/textbox.tokens.json",
+    "filePath": "src/component/utrecht/textbox.tokens.json",
     "isSource": true,
     "original": {
       "value": "{conduction.size.sm}"

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Sep 2023 08:35:43 GMT
+// Generated on Tue, 19 Sep 2023 14:29:50 GMT
 
 @utrecht-paragraph-margin-block-end: 0;
 @utrecht-paragraph-margin-block-start: 0;
@@ -156,8 +156,6 @@
 @utrecht-heading-1-font-weight: @conduction-typography-font-weight-bold;
 @utrecht-heading-1-font-size: @conduction-font-size-3xl;
 @utrecht-heading-1-font-family: @conduction-typography-aldritch-font-family;
-@utrecht-textbox-focus-background-color: @conduction-color-white-100;
-@utrecht-textbox-placeholder-color: @conduction-color-grey-50;
 @utrecht-textbox-padding-inline-start: @conduction-size-sm;
 @utrecht-textbox-padding-inline-end: @conduction-size-sm;
 @utrecht-textbox-padding-block-start: @conduction-size-xs;
@@ -166,6 +164,8 @@
 @utrecht-textbox-color: @conduction-color-grey-29;
 @utrecht-textbox-border-width: @conduction-size-4xs;
 @utrecht-textbox-border-color: @conduction-color-grey-48;
+@utrecht-textbox-focus-background-color: @conduction-color-white-100;
+@utrecht-textbox-placeholder-color: @conduction-color-grey-50;
 @utrecht-textbox-background-color: @conduction-color-white-100;
 @utrecht-table-cell-padding-inline-start: @conduction-size-md;
 @utrecht-table-cell-padding-inline-end: @conduction-size-md;
@@ -191,8 +191,6 @@
 @utrecht-page-footer-color: @conduction-color-black-0;
 @utrecht-page-footer-background-color: @conduction-color-lightgrey-96;
 @utrecht-icon-gap: @conduction-size-xs;
-@utrecht-form-input-focus-background-color: @conduction-color-white-100;
-@utrecht-form-input-placeholder-color: @conduction-color-grey-50;
 @utrecht-form-input-padding-inline-start: @conduction-size-sm;
 @utrecht-form-input-padding-inline-end: @conduction-size-sm;
 @utrecht-form-input-padding-block-start: @conduction-size-xs;
@@ -201,6 +199,8 @@
 @utrecht-form-input-color: @conduction-color-grey-29;
 @utrecht-form-input-border-width: @conduction-size-4xs;
 @utrecht-form-input-border-color: @conduction-color-grey-48;
+@utrecht-form-input-focus-background-color: @conduction-color-white-100;
+@utrecht-form-input-placeholder-color: @conduction-color-grey-50;
 @utrecht-form-input-background-color: @conduction-color-white-100;
 @utrecht-document-font-size: @conduction-font-size-md;
 @utrecht-document-font-family: @conduction-typography-sans-serif-font-family;
@@ -292,6 +292,10 @@
 @utrecht-space-block-xs: @conduction-size-xs;
 @utrecht-space-block-2xs: @conduction-size-2xs;
 @utrecht-space-block-3xs: @conduction-size-3xs;
+@conduction-tabs-scroll-button-hover-color: @conduction-color-white-100;
+@conduction-tabs-scroll-button-hover-background-color: @conduction-color-primary-hover;
+@conduction-tabs-scroll-button-color: @conduction-color-white-100;
+@conduction-tabs-scroll-button-background-color: @conduction-color-primary;
 @conduction-tabs-tab-panel-padding-inline-end: @conduction-size-lg;
 @conduction-tabs-tab-panel-padding-inline-start: @conduction-size-lg;
 @conduction-tabs-tab-panel-padding-block-end: @conduction-size-lg;
@@ -311,6 +315,12 @@
 @conduction-tabs-tab-padding-block-end: @conduction-size-xs;
 @conduction-tabs-tab-padding-block-start: @conduction-size-xs;
 @conduction-tabs-tab-color: @conduction-color-grey-29;
+@conduction-table-wrapper-scroll-button-hover-color: @conduction-color-primary;
+@conduction-table-wrapper-scroll-button-hover-background-color: @conduction-color-white-100;
+@conduction-table-wrapper-scroll-button-padding-inline-end: @conduction-size-sm;
+@conduction-table-wrapper-scroll-button-padding-inline-start: @conduction-size-sm;
+@conduction-table-wrapper-scroll-button-color: @conduction-color-black-0;
+@conduction-table-wrapper-scroll-button-background-color: @conduction-color-white-100;
 @conduction-input-select-placeholder-font-family: @conduction-typography-sans-serif-font-family;
 @conduction-input-select-list-option-hover-font-family: @conduction-typography-sans-serif-font-family;
 @conduction-input-select-list-option-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 Wed, 13 Sep 2023 08:35:43 GMT
+// Generated on Tue, 19 Sep 2023 14:29:50 GMT
 
 $utrecht-paragraph-margin-block-end: 0;
 $utrecht-paragraph-margin-block-start: 0;
@@ -156,8 +156,6 @@ $utrecht-heading-1-margin-block-end: $conduction-size-2xl;
 $utrecht-heading-1-font-weight: $conduction-typography-font-weight-bold;
 $utrecht-heading-1-font-size: $conduction-font-size-3xl;
 $utrecht-heading-1-font-family: $conduction-typography-aldritch-font-family;
-$utrecht-textbox-focus-background-color: $conduction-color-white-100;
-$utrecht-textbox-placeholder-color: $conduction-color-grey-50;
 $utrecht-textbox-padding-inline-start: $conduction-size-sm;
 $utrecht-textbox-padding-inline-end: $conduction-size-sm;
 $utrecht-textbox-padding-block-start: $conduction-size-xs;
@@ -166,6 +164,8 @@ $utrecht-textbox-font-family: $conduction-typography-sans-serif-font-family;
 $utrecht-textbox-color: $conduction-color-grey-29;
 $utrecht-textbox-border-width: $conduction-size-4xs;
 $utrecht-textbox-border-color: $conduction-color-grey-48;
+$utrecht-textbox-focus-background-color: $conduction-color-white-100;
+$utrecht-textbox-placeholder-color: $conduction-color-grey-50;
 $utrecht-textbox-background-color: $conduction-color-white-100;
 $utrecht-table-cell-padding-inline-start: $conduction-size-md;
 $utrecht-table-cell-padding-inline-end: $conduction-size-md;
@@ -191,8 +191,6 @@ $utrecht-page-footer-padding-inline-end: $conduction-size-sm;
 $utrecht-page-footer-color: $conduction-color-black-0;
 $utrecht-page-footer-background-color: $conduction-color-lightgrey-96;
 $utrecht-icon-gap: $conduction-size-xs;
-$utrecht-form-input-focus-background-color: $conduction-color-white-100;
-$utrecht-form-input-placeholder-color: $conduction-color-grey-50;
 $utrecht-form-input-padding-inline-start: $conduction-size-sm;
 $utrecht-form-input-padding-inline-end: $conduction-size-sm;
 $utrecht-form-input-padding-block-start: $conduction-size-xs;
@@ -201,6 +199,8 @@ $utrecht-form-input-font-family: $conduction-typography-sans-serif-font-family;
 $utrecht-form-input-color: $conduction-color-grey-29;
 $utrecht-form-input-border-width: $conduction-size-4xs;
 $utrecht-form-input-border-color: $conduction-color-grey-48;
+$utrecht-form-input-focus-background-color: $conduction-color-white-100;
+$utrecht-form-input-placeholder-color: $conduction-color-grey-50;
 $utrecht-form-input-background-color: $conduction-color-white-100;
 $utrecht-document-font-size: $conduction-font-size-md;
 $utrecht-document-font-family: $conduction-typography-sans-serif-font-family;
@@ -292,6 +292,10 @@ $utrecht-space-block-sm: $conduction-size-sm;
 $utrecht-space-block-xs: $conduction-size-xs;
 $utrecht-space-block-2xs: $conduction-size-2xs;
 $utrecht-space-block-3xs: $conduction-size-3xs;
+$conduction-tabs-scroll-button-hover-color: $conduction-color-white-100;
+$conduction-tabs-scroll-button-hover-background-color: $conduction-color-primary-hover;
+$conduction-tabs-scroll-button-color: $conduction-color-white-100;
+$conduction-tabs-scroll-button-background-color: $conduction-color-primary;
 $conduction-tabs-tab-panel-padding-inline-end: $conduction-size-lg;
 $conduction-tabs-tab-panel-padding-inline-start: $conduction-size-lg;
 $conduction-tabs-tab-panel-padding-block-end: $conduction-size-lg;
@@ -311,6 +315,12 @@ $conduction-tabs-tab-padding-inline-start: $conduction-size-sm;
 $conduction-tabs-tab-padding-block-end: $conduction-size-xs;
 $conduction-tabs-tab-padding-block-start: $conduction-size-xs;
 $conduction-tabs-tab-color: $conduction-color-grey-29;
+$conduction-table-wrapper-scroll-button-hover-color: $conduction-color-primary;
+$conduction-table-wrapper-scroll-button-hover-background-color: $conduction-color-white-100;
+$conduction-table-wrapper-scroll-button-padding-inline-end: $conduction-size-sm;
+$conduction-table-wrapper-scroll-button-padding-inline-start: $conduction-size-sm;
+$conduction-table-wrapper-scroll-button-color: $conduction-color-black-0;
+$conduction-table-wrapper-scroll-button-background-color: $conduction-color-white-100;
 $conduction-input-select-placeholder-font-family: $conduction-typography-sans-serif-font-family;
 $conduction-input-select-list-option-hover-font-family: $conduction-typography-sans-serif-font-family;
 $conduction-input-select-list-option-font-family: $conduction-typography-sans-serif-font-family;