Web:Components:SelectedItem: add support dark-theme

packages/asc-web-components/selected-item/index.js

@@ -1,17 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Text from "../text";
 import IconButton from "../icon-button";
 import {
   StyledCloseButton,
   StyledSelectedTextBox,
   StyledSelectedItem,
+  StyledText,
 } from "./styled-selected-item";
 
 const SelectedItem = (props) => {
   const { isDisabled, text, onClose } = props;
-  const colorProps = { color: isDisabled ? "#D0D5DA" : "#555F65" };
 
   const onCloseClick = (e) => {
     !isDisabled && onClose && onClose(e);
@@ -21,13 +20,12 @@ const SelectedItem = (props) => {
   return (
     <StyledSelectedItem {...props}>
       <StyledSelectedTextBox>
-        <Text as="span" truncate {...colorProps} fontWeight={600}>
+        <StyledText as="span" truncate isDisabled={isDisabled} fontWeight={600}>
           {text}
-        </Text>
+        </StyledText>
       </StyledSelectedTextBox>
       <StyledCloseButton onClick={onCloseClick} isDisabled={isDisabled}>
         <IconButton
-          color="#979797"
           size={10}
           iconName="/static/images/cross.react.svg"
           isFill={true}

packages/asc-web-components/selected-item/styled-selected-item.js

@@ -1,4 +1,6 @@
 import styled from "styled-components";
+
+import Text from "../text";
 import Base from "../themes/base";
 
 const StyledSelectedItem = styled.div`
@@ -28,6 +30,12 @@ const StyledCloseButton = styled.div`
   padding: ${(props) => props.theme.selectedItem.closeButton.padding};
   cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
 
+  path {
+    ${(props) =>
+      !props.isDisabled &&
+      `fill: ${props.theme.selectedItem.closeButton.color};`}
+  }
+
   &:hover {
     path {
       ${(props) =>
@@ -44,4 +52,17 @@ const StyledCloseButton = styled.div`
 `;
 StyledCloseButton.defaultProps = { theme: Base };
 
-export { StyledCloseButton, StyledSelectedTextBox, StyledSelectedItem };
+const StyledText = styled(Text)`
+  color: ${(props) =>
+    props.isDisabled
+      ? props.theme.selectedItem.text.disabledColor
+      : props.theme.selectedItem.text.color};
+`;
+StyledText.defaultProps = { theme: Base };
+
+export {
+  StyledCloseButton,
+  StyledSelectedTextBox,
+  StyledSelectedItem,
+  StyledText,
+};

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

@@ -357,9 +357,15 @@ const Base = {
       borderRight: `1px solid ${globalColors.grayLightMid}`,
     },
 
+    text: {
+      color: "#555F65",
+      disabledColor: "#D0D5DA",
+    },
+
     closeButton: {
       alignItems: "center",
       padding: "0 8px",
+      color: "#979797",
       colorHover: cyanBlueDarkShade,
       backgroundColor: grayLightMid,
     },

packages/asc-web-components/themes/dark.js

@@ -343,22 +343,28 @@ const Dark = {
   },
 
   selectedItem: {
-    background: grayLight,
-    border: `1px solid ${globalColors.grayLightMid}`,
+    background: "#242424",
+    border: `1px solid #242424`,
     borderRadius: "3px",
 
     textBox: {
       padding: "0 8px",
       height: "32px",
       alignItems: "center",
-      borderRight: `1px solid ${globalColors.grayLightMid}`,
+      borderRight: `1px solid #242424`,
+    },
+
+    text: {
+      color: "#eeeeee",
+      disabledColor: "#474747",
     },
 
     closeButton: {
       alignItems: "center",
       padding: "0 8px",
-      colorHover: cyanBlueDarkShade,
-      backgroundColor: grayLightMid,
+      color: "#eeeeee",
+      colorHover: "#eeeeee",
+      backgroundColor: "#242424",
     },
   },