fix(Header): Adding dark and contrast styles for Header (#427)

* adding dark and contrast styles for Header
* -added variables in the docs' Header components to always be black

Author: bcalvery

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix focus behavior for `List` @kuzhelov ([#413](https://github.com/stardust-ui/react/pull/413))
 - Remove `Sizes` and `Weights` enums, use typed string in `Text` instead @jurokapsiar ([#446](https://github.com/stardust-ui/react/pull/446))
 - Fix React's version in `peerDependencies` @layershifter ([#452](https://github.com/stardust-ui/react/pull/452))
+- Added Dark and Contrast theme variables for `Header` @bcalvery ([#427](https://github.com/stardust-ui/react/pull/427))
 
 ### Features
 - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -80,7 +80,7 @@ class ComponentDoc extends React.Component<any, any> {
         <Grid>
           <Grid.Row style={topRowStyle}>
             <Grid.Column>
-              <Header as="h1" content={info.displayName} />
+              <Header as="h1" content={info.displayName} variables={{ color: 'black' }} />
               <p>{_.join(info.docblock.description, ' ')}</p>
               <ComponentAccessibility info={info} />
               <ComponentDocSee displayName={info.displayName} />

docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx

@@ -19,7 +19,12 @@ const ComponentDocAccessibility = ({ info }) => {
 
   return (
     <>
-      <Header as="h2" className="no-anchor" content="Accessibility" />
+      <Header
+        as="h2"
+        className="no-anchor"
+        content="Accessibility"
+        variables={{ color: 'black' }}
+      />
 
       {behaviorName && (
         <p>

src/themes/teams-dark/componentVariables.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'
 export { default as Text } from './components/Text/textVariables'

src/themes/teams-dark/components/Header/headerVariables.ts

@@ -0,0 +1,9 @@
+import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<HeaderVariables> => {
+  return {
+    color: siteVars.white,
+    descriptionColor: siteVars.gray02,
+  }
+}

src/themes/teams-high-contrast/componentVariables.ts

@@ -1,8 +1,7 @@
 export { default as Avatar } from './components/Avatar/avatarVariables'
-
 export { default as Button } from './components/Button/buttonVariables'
-
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Header } from './components/Header/headerVariables'
 
 export { default as Input } from './components/Input/inputVariables'
 

src/themes/teams-high-contrast/components/Header/headerVariables.ts

@@ -0,0 +1,9 @@
+import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<HeaderVariables> => {
+  return {
+    color: siteVars.white,
+    descriptionColor: siteVars.white,
+  }
+}

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

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

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

@@ -1,4 +1,11 @@
-export default siteVariables => ({
-  color: 'black',
-  descriptionColor: undefined,
-})
+export interface HeaderVariables {
+  color: string
+  descriptionColor: string
+}
+
+export default (siteVars: any): HeaderVariables => {
+  return {
+    color: siteVars.black,
+    descriptionColor: undefined,
+  }
+}