Web:Components:Heading: add dark theme support

packages/asc-web-components/heading/heading.stories.js

@@ -23,7 +23,6 @@ const Template = ({ headerText, ...args }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  color: "#333333",
   level: 1,
   title: "",
   truncate: false,

packages/asc-web-components/heading/index.js

@@ -31,7 +31,6 @@ Heading.propTypes = {
 };
 
 Heading.defaultProps = {
-  color: "#333333",
   title: null,
   truncate: false,
   isInline: false,

packages/asc-web-components/heading/styled-heading.js

@@ -8,12 +8,12 @@ const fontSizeStyle = (props) => props.theme.heading.fontSize[props.size];
 const styleCss = css`
   font-size: ${(props) => fontSizeStyle(props)};
   font-weight: ${(props) => props.theme.heading.fontWeight};
-
-  ${(props) =>
-    props.isInline &&
-    css`
-      display: inline-block;
-    `}
+  color: ${(props) => (props.color ? props.color : props.theme.heading.color)}
+    ${(props) =>
+      props.isInline &&
+      css`
+        display: inline-block;
+      `};
 `;
 
 const StyledHeading = styled.h1`

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

@@ -70,6 +70,7 @@ const Base = {
     },
 
     fontWeight: 600,
+    color: "#333333",
   },
 
   button: {

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

@@ -70,6 +70,7 @@ const Dark = {
     },
 
     fontWeight: 600,
+    color: "rgba(255, 255, 255, 0.92)",
   },
 
   button: {
@@ -1172,11 +1173,11 @@ const Dark = {
   },
 
   dropDownItem: {
-    color: black,
+    color: "rgba(255, 255, 255, 0.92)",
     disableColor: gray,
-    backgroundColor: white,
-    hoverBackgroundColor: grayLight,
-    hoverDisabledBackgroundColor: white,
+    backgroundColor: "#333333",
+    hoverBackgroundColor: "#3D3D3D",
+    hoverDisabledBackgroundColor: "#333333",
     fontWeight: "600",
     fontSize: "13px",
     width: "100%",
@@ -1192,13 +1193,13 @@ const Dark = {
       marginRight: "8px",
       lineHeight: "14px",
 
-      color: black,
+      color: "rgba(255, 255, 255, 0.92)",
       disableColor: gray,
     },
 
     separator: {
       padding: "0px 16px",
-      borderBottom: `1px solid ${globalColors.grayLightMid}`,
+      borderBottom: `1px solid rgba(255, 255, 255, 0.1)`,
       margin: " 4px 16px 4px",
       lineHeight: "1px",
       height: "1px",