Added colors to Heading component

src/components/layout/Heading/index.jsx

@@ -11,6 +11,7 @@ type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
 type Props = {
   align?: 'left' | 'center' | 'right',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
   tag: HeadingTag,
   truncate?: boolean,
   children: React$Node,
@@ -19,7 +20,7 @@ type Props = {
 class Heading extends React.PureComponent<Props> {
   render() {
     const {
-      align, tag, truncate, margin, children, ...props
+      align, tag, truncate, margin, color, children, ...props
     } = this.props
 
     const className = cx(
@@ -27,6 +28,7 @@ class Heading extends React.PureComponent<Props> {
       align,
       tag,
       margin ? capitalize(margin, 'margin') : undefined,
+      color,
       { truncate },
     )
 

src/components/layout/Heading/index.scss

@@ -63,3 +63,39 @@
 .marginXl {
   margin: 0 0 $xl 0;
 }
+
+.soft {
+  color: #888888;
+}
+
+.medium {
+  color: #686868;
+}
+
+.dark {
+  color: black;
+}
+
+.fancy {
+  color: $fancy;
+}
+
+.warning {
+  color: $warning;
+}
+
+.primary {
+  color: $fontColor;
+}
+
+.secondary {
+  color: $secondary;
+}
+
+.disabled {
+  color: $disabled;
+}
+
+.white {
+  color: white;
+}