Merge pull request #1846 from dxc-technology/jialecl-actionsCell-dropdown

Applying table theme to action dropdown

Author: kukoc

lib/src/table/DropdownTheme.jsx

@@ -1,3 +1,4 @@
+import { componentTokens } from "../common/variables";
 export default {
   dropdown: {
     // Breadcrumbs tokens
@@ -16,37 +17,37 @@ export default {
     optionPaddingRight: "16px",
 
     // Dropdown tokens
-    buttonBackgroundColor: "#ffffff",
-    hoverButtonBackgroundColor: "#f2f2f2",
-    activeButtonBackgroundColor: "#cccccc",
-    buttonFontFamily: "Open Sans, sans-serif",
-    buttonFontSize: "1rem",
-    buttonFontStyle: "normal",
-    buttonFontWeight: "400",
-    buttonFontColor: "#000000",
-    buttonIconSpacing: "10px",
-    buttonIconColor: "#5f249f",
-    disabledColor: "#999999",
-    disabledButtonBackgroundColor: "transparent",
-    disabledBorderColor: "transparent",
-    optionBackgroundColor: "#ffffff",
-    hoverOptionBackgroundColor: "#f2f2f2",
-    activeOptionBackgroundColor: "#cccccc",
-    optionFontFamily: "Open Sans, sans-serif",
-    optionFontStyle: "normal",
-    optionFontWeight: "400",
-    optionFontColor: "#000000",
-    optionIconSize: "20px",
-    optionIconSpacing: "10px",
-    optionIconColor: "#000000",
-    caretIconSize: "24px",
-    caretIconColor: "#000000",
-    caretIconSpacing: "12px",
-    borderRadius: "4px",
-    borderStyle: "none",
-    borderThickness: "0px",
-    borderColor: "transparent",
-    scrollBarThumbColor: "#666666",
-    scrollBarTrackColor: "#cccccc",
+    buttonBackgroundColor: componentTokens.table.actionBackgroundColor,
+    hoverButtonBackgroundColor: componentTokens.table.hoverActionBackgroundColor,
+    activeButtonBackgroundColor: componentTokens.table.activeActionBackgroundColor,
+    buttonFontFamily: componentTokens.dropdown.buttonFontFamily,
+    buttonFontSize: componentTokens.dropdown.buttonFontSize,
+    buttonFontStyle: componentTokens.dropdown.buttonFontStyle,
+    buttonFontWeight: componentTokens.dropdown.buttonFontWeight,
+    buttonFontColor: componentTokens.dropdown.buttonFontColor,
+    buttonIconSpacing: componentTokens.dropdown.buttonIconSpacing,
+    buttonIconColor: componentTokens.table.actionIconColor,
+    disabledColor: componentTokens.table.disabledActionIconColor,
+    disabledButtonBackgroundColor: componentTokens.table.disabledActionBackgroundColor,
+    disabledBorderColor: componentTokens.dropdown.disabledBorderColor,
+    optionBackgroundColor: componentTokens.dropdown.optionBackgroundColor,
+    hoverOptionBackgroundColor: componentTokens.dropdown.hoverOptionBackgroundColor,
+    activeOptionBackgroundColor: componentTokens.dropdown.activeOptionBackgroundColor,
+    optionFontFamily: componentTokens.dropdown.optionFontFamily,
+    optionFontStyle: componentTokens.dropdown.optionFontStyle,
+    optionFontWeight: componentTokens.dropdown.optionFontWeight,
+    optionFontColor: componentTokens.dropdown.optionFontColor,
+    optionIconSize: componentTokens.dropdown.optionIconSize,
+    optionIconSpacing: componentTokens.dropdown.optionIconSpacing,
+    optionIconColor: componentTokens.dropdown.optionIconColor,
+    caretIconSize: componentTokens.dropdown.caretIconSize,
+    caretIconColor: componentTokens.dropdown.caretIconColor,
+    caretIconSpacing: componentTokens.dropdown.caretIconSpacing,
+    borderRadius: componentTokens.dropdown.borderRadius,
+    borderStyle: componentTokens.dropdown.borderStyle,
+    borderThickness: componentTokens.dropdown.borderThickness,
+    borderColor: componentTokens.dropdown.borderColor,
+    scrollBarThumbColor: componentTokens.dropdown.scrollBarThumbColor,
+    scrollBarTrackColor: componentTokens.dropdown.scrollBarTrackColor,
   },
 };