feat(Header): introduce 'color' variable

CHANGELOG.md

@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Menu `onClick` handler moved from `li` to `a` (accessibility) @miroslavstastny ([#61](https://github.com/stardust-ui/react/pull/61))
 
 
+### Features
+- Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))
+
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.5...v0.2.6)

src/components/Header/Header.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { childrenExist, customPropTypes, UIComponent } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import headerStyles from '../../themes/teams/components/Header/headerStyles'
+import headerVariables from './headerVariables'
 
 /**
  * A header provides a short summary of content
@@ -34,16 +35,29 @@ class Header extends UIComponent<any, any> {
 
     /** Align header content. */
     textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']),
+
+    /** Custom values for styling variables. */
+    variables: PropTypes.object,
   }
 
   static defaultProps = {
     as: 'h1',
   }
 
-  static handledProps = ['as', 'children', 'className', 'content', 'description', 'textAlign']
+  static handledProps = [
+    'as',
+    'children',
+    'className',
+    'content',
+    'description',
+    'textAlign',
+    'variables',
+  ]
 
   static styles = headerStyles
 
+  static variables = headerVariables
+
   static Description = HeaderDescription
 
   renderComponent({ ElementType, classes, rest }) {

src/components/Header/HeaderDescription.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
 import headerDescriptionStyles from '../../themes/teams/components/Header/headerDescriptionStyles'
+import headerDescriptionVariables from './headerDescriptionVariables'
 
 /**
  * Headers may contain description.
@@ -27,16 +28,21 @@ class HeaderDescription extends UIComponent<any, any> {
 
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
+
+    /** Custom values for styling variables. */
+    variables: PropTypes.object,
   }
 
   static defaultProps = {
     as: 'p',
   }
 
-  static handledProps = ['as', 'children', 'className', 'content']
+  static handledProps = ['as', 'children', 'className', 'content', 'variables']
 
   static styles = headerDescriptionStyles
 
+  static variables = headerDescriptionVariables
+
   renderComponent({ ElementType, classes, rest }) {
     const { children, content } = this.props
     return (

src/components/Header/headerDescriptionVariables.ts

@@ -0,0 +1,3 @@
+export default siteVariables => ({
+  color: 'rgba(0,0,0,.6)',
+})

src/components/Header/headerVariables.ts

@@ -0,0 +1,3 @@
+export default siteVariables => ({
+  color: 'black',
+})

src/themes/teams/components/Header/headerDescriptionStyles.ts

@@ -1,10 +1,10 @@
 import { pxToRem } from '../../../../lib'
 
 export default {
-  root: () => ({
+  root: ({ variables: v }) => ({
     display: 'block',
     fontSize: pxToRem(22),
-    color: 'rgba(0,0,0,.6)',
+    color: v.color,
     fontWeight: 400,
   }),
 }

src/themes/teams/components/Header/headerStyles.ts

@@ -1,5 +1,6 @@
 export default {
-  root: ({ props }) => ({
+  root: ({ props, variables: v }) => ({
+    color: v.color,
     textAlign: props.textAlign,
     display: 'block',
     ...(props.description && { marginBottom: 0 }),