From 6acee822ec0fee8dcf832948b28263402c927a94 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 2 Nov 2018 13:28:39 -0700 Subject: [PATCH 1/5] adding dark and contrast styles for Header --- src/themes/teams-dark/componentVariables.ts | 1 + .../components/Header/headerVariables.ts | 9 +++++++++ .../teams-high-contrast/componentVariables.ts | 4 +--- .../components/Header/headerVariables.ts | 9 +++++++++ .../Header/headerDescriptionVariables.ts | 2 +- .../teams/components/Header/headerVariables.ts | 15 +++++++++++---- 6 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 src/themes/teams-dark/components/Header/headerVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Header/headerVariables.ts diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 34c15933b6..3e2f177721 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/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' diff --git a/src/themes/teams-dark/components/Header/headerVariables.ts b/src/themes/teams-dark/components/Header/headerVariables.ts new file mode 100644 index 0000000000..2f207a7c01 --- /dev/null +++ b/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 => { + return { + color: siteVars.white, + descriptionColor: siteVars.gray02, + } +} diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 7b4fc7d0dd..939ec1bf01 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/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' diff --git a/src/themes/teams-high-contrast/components/Header/headerVariables.ts b/src/themes/teams-high-contrast/components/Header/headerVariables.ts new file mode 100644 index 0000000000..7a9deccdc7 --- /dev/null +++ b/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 => { + return { + color: siteVars.white, + descriptionColor: siteVars.white, + } +} diff --git a/src/themes/teams/components/Header/headerDescriptionVariables.ts b/src/themes/teams/components/Header/headerDescriptionVariables.ts index da975bad96..3de2fffb02 100644 --- a/src/themes/teams/components/Header/headerDescriptionVariables.ts +++ b/src/themes/teams/components/Header/headerDescriptionVariables.ts @@ -1,3 +1,3 @@ export default siteVariables => ({ - color: 'rgba(0,0,0,.6)', + color: siteVariables.gray04, }) diff --git a/src/themes/teams/components/Header/headerVariables.ts b/src/themes/teams/components/Header/headerVariables.ts index f43709739a..4ded6b96f2 100644 --- a/src/themes/teams/components/Header/headerVariables.ts +++ b/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, + } +} From 40a62be46c9ebccaf09b515dff8231a1ba3859a6 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 2 Nov 2018 13:40:28 -0700 Subject: [PATCH 2/5] updating changelog with PR link --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ada4c7c919..d1d6a50c24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,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)) ## [v0.11.0](https://github.com/stardust-ui/react/tree/v0.11.0) (2018-10-30) From 2046145d17d8c4d8a47868079825ef6782ad1a69 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 8 Nov 2018 19:16:47 +0100 Subject: [PATCH 3/5] -added variables in the docs' Header components to always be black --- docs/src/components/ComponentDoc/ComponentDoc.tsx | 2 +- .../components/ComponentDoc/ComponentDocAccessibility.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentDoc.tsx b/docs/src/components/ComponentDoc/ComponentDoc.tsx index bde132c4b9..8cabe86903 100644 --- a/docs/src/components/ComponentDoc/ComponentDoc.tsx +++ b/docs/src/components/ComponentDoc/ComponentDoc.tsx @@ -80,7 +80,7 @@ class ComponentDoc extends React.Component { -
+

{_.join(info.docblock.description, ' ')}

diff --git a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx index 1b7e6d39c8..898774be89 100644 --- a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx +++ b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx @@ -19,7 +19,12 @@ const ComponentDocAccessibility = ({ info }) => { return ( <> -
+
{behaviorName && (

From 2faaceac11dd02879662b227deee2a5b5f9f5caf Mon Sep 17 00:00:00 2001 From: alinais Date: Mon, 12 Nov 2018 17:29:49 +0100 Subject: [PATCH 4/5] adding siteVars black to header vars instead of hardcoded value --- .github/add-a-feature.md | 1 - src/themes/teams/components/Header/headerVariables.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/add-a-feature.md b/.github/add-a-feature.md index e7eec8c397..146e599bbb 100644 --- a/.github/add-a-feature.md +++ b/.github/add-a-feature.md @@ -8,7 +8,6 @@ Add a feature - [Propose feature](#propose-feature) - [Prototype](#prototype) - [Spec out the API](#spec-out-the-api) -- [Component anatomy](#component-anatomy) - [Create a component](#create-a-component) - [How to create a component](#how-to-create-a-component) - [Good practice](#good-practice) diff --git a/src/themes/teams/components/Header/headerVariables.ts b/src/themes/teams/components/Header/headerVariables.ts index 4ded6b96f2..2147b544b9 100644 --- a/src/themes/teams/components/Header/headerVariables.ts +++ b/src/themes/teams/components/Header/headerVariables.ts @@ -5,7 +5,7 @@ export interface HeaderVariables { export default (siteVars: any): HeaderVariables => { return { - color: 'black', + color: siteVars.black, descriptionColor: undefined, } } From 90dc28cc450de430f3171f3b379ecb820cd8ca5a Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 12 Nov 2018 17:40:42 +0100 Subject: [PATCH 5/5] -revert add-a-feature.md --- .github/add-a-feature.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/add-a-feature.md b/.github/add-a-feature.md index 146e599bbb..e7eec8c397 100644 --- a/.github/add-a-feature.md +++ b/.github/add-a-feature.md @@ -8,6 +8,7 @@ Add a feature - [Propose feature](#propose-feature) - [Prototype](#prototype) - [Spec out the API](#spec-out-the-api) +- [Component anatomy](#component-anatomy) - [Create a component](#create-a-component) - [How to create a component](#how-to-create-a-component) - [Good practice](#good-practice)