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

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))
+- 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))

src/themes/teams-dark/componentVariables.ts

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

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,7 +1,5 @@
 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 Text } from './components/Text/textVariables'

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: 'black',
+    descriptionColor: undefined,
+  }
+}