Adding dropdown theming

Author: Jialecl

lib/src/table/DropdownTheme.jsx

@@ -20,34 +20,34 @@ export default {
     buttonBackgroundColor: componentTokens.table.actionBackgroundColor,
     hoverButtonBackgroundColor: componentTokens.table.hoverActionBackgroundColor,
     activeButtonBackgroundColor: componentTokens.table.activeActionBackgroundColor,
-    buttonFontFamily: "Open Sans, sans-serif",
-    buttonFontSize: "1rem",
-    buttonFontStyle: "normal",
-    buttonFontWeight: "400",
-    buttonFontColor: "#000000",
-    buttonIconSpacing: "10px",
+    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: "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",
+    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,
   },
 };