Web: Components: selector-add-button: Added theme provider, moved styles to a separate file.

packages/asc-web-components/src/components/selector-add-button/index.js

@@ -1,29 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+
+import StyledButton from "./styled-selector-add-button"
 import IconButton from "../icon-button";
 
-const StyledButton = styled.div`
-  background: #f8f9f9;
-  border: 1px solid #eceef1;
-  box-sizing: border-box;
-  border-radius: 3px;
-  height: 34px;
-  width: 34px;
-  padding: 9px;
-  display: inline-block;
-  cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
-
-  &:hover {
-    path {
-      ${(props) => !props.isDisabled && "fill: #333;"}
-    }
-  }
-
-  &:active {
-    ${(props) => !props.isDisabled && "background-color: #ECEEF1;"}
-  }
-`;
 
 const SelectorAddButton = (props) => {
   const { isDisabled, title, className, id, style } = props;

packages/asc-web-components/src/components/selector-add-button/styled-selector-add-button.js

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import Base from "../../themes/base";
+
+const StyledButton = styled.div`
+  display: inline-block;
+  background: ${(props) => props.theme.selectorAddButton.background};
+  border: ${(props) => props.theme.selectorAddButton.border};
+  box-sizing: ${(props) => props.theme.selectorAddButton.boxSizing};
+  border-radius: ${(props) => props.theme.selectorAddButton.boxSizing};
+  height: ${(props) => props.theme.selectorAddButton.height};
+  width: ${(props) => props.theme.selectorAddButton.width};
+  padding: ${(props) => props.theme.selectorAddButton.padding};
+
+  cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
+
+  &:hover {
+    path {
+      ${(props) =>
+        !props.isDisabled &&
+        `
+    fill: ${props.theme.selectorAddButton.color};
+    `}
+    }
+  }
+
+  &:active {
+    ${(props) =>
+      !props.isDisabled &&
+      `background-color: ${props.theme.selectorAddButton.activeBackground};`}
+  }
+`;
+
+StyledButton.defaultProps = { theme: Base };
+
+export default StyledButton;

packages/asc-web-components/src/themes/base.js

@@ -186,6 +186,19 @@ const Base = {
     },
   },
 
+  selectorAddButton:{
+    background: grayLight,
+    activeBackground: grayLightMid,
+    
+    border: `1px solid ${globalColors.grayLightMid}`,
+    boxSizing: "border-box",
+    borderRadius: "3px",
+    height:" 34px",
+    width: "34px",
+    padding: "9px",
+    color: black,
+  },
+
   // checkbox: {
   //   fillColor: white,
   //   borderColor: grayMid,