From d011db2756286dffc4ec8c4b27b94b37371a826b Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 10:12:40 -0700 Subject: [PATCH 1/6] adding in theme background aware doc examples --- .../ComponentExample/ComponentExample.tsx | 24 +++++++++++++------ src/themes/teams-dark/siteVariables.ts | 9 +++++++ .../teams-high-contrast/siteVariables.ts | 6 +++++ src/themes/teams/siteVariables.ts | 1 + 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index e7a0fa0c92..b7c05bc270 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -687,13 +687,23 @@ class ComponentExample extends React.Component )} - -
{exampleElement}
- + { + return ( + +
{exampleElement}
+ + ) + }} + /> {this.renderJSX()} {this.renderError()} diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index 51b8027cc6..c981153d78 100644 --- a/src/themes/teams-dark/siteVariables.ts +++ b/src/themes/teams-dark/siteVariables.ts @@ -1,6 +1,9 @@ +import { white } from '../teams/siteVariables' + // // COLORS // +export const black = '#201f1f' export const gray02 = '#bfbfbf' export const gray03 = '#a6a6a6' export const gray04 = '#808080' @@ -24,3 +27,9 @@ export const magenta = '#cf6098' export const orchid = '#ae3d84' export const red = '#d74654' export const red08 = '#4f232b' + +// +// SEMANTIC ASSIGNMENTS +// +export const bodyBackground = black +export const bodyColor = white diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 96cd019900..8a62bca6f3 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -1,6 +1,12 @@ import { white } from '../teams/siteVariables' +// +// COLORS +// +export const black = '#000' + // // SEMANTIC ASSIGNMENTS // +export const bodyBackground = black export const bodyColor = white diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index ea1fc3af7d..0d20800bc0 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -87,5 +87,6 @@ export const bodyMargin = 0 export const bodyFontFamily = '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif' export const bodyFontSize = '1.4rem' +export const bodyBackground = white export const bodyColor = black export const bodyLineHeight = lineHeightBase From 8d73044581fb33f1146d666bbd1be1ad40e36c49 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 11:22:20 -0700 Subject: [PATCH 2/6] moving 'rtl' up to remove redundant div --- .../ComponentDoc/ComponentExample/ComponentExample.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index b7c05bc270..0b12fd4829 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -692,6 +692,7 @@ class ComponentExample extends React.Component -
{exampleElement}
+ {exampleElement} ) }} From f361b48e810a2c1be60bfd1d84e28bab5d651a25 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 15:38:52 -0700 Subject: [PATCH 3/6] redlining Divider for Teams dark & contrast themes --- .github/CONTRIBUTING.md | 1 + src/themes/teams-dark/componentVariables.ts | 1 + .../teams-dark/components/Divider/dividerVariables.ts | 5 +++++ src/themes/teams-dark/siteVariables.ts | 2 +- src/themes/teams-high-contrast/componentVariables.ts | 1 + .../components/Divider/dividerVariables.ts | 8 ++++++++ src/themes/teams-high-contrast/index.ts | 3 ++- src/themes/teams/components/Divider/dividerStyles.ts | 3 --- src/themes/teams/components/Divider/dividerVariables.ts | 2 +- 9 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 src/themes/teams-dark/components/Divider/dividerVariables.ts create mode 100644 src/themes/teams-high-contrast/componentVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Divider/dividerVariables.ts diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index c11d6e2cad..6e5e37f285 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -11,6 +11,7 @@ CONTRIBUTING - [Accessibility](#accessibility) - [Role and aria props](#role-and-aria-props) - [Focus](#focus) + - [Keyboard handling](#keyboard-handling) diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index e17b98e8c2..aa8258e0c6 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1 +1,2 @@ export { default as Button } from './components/Button/buttonVariables' +export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts new file mode 100644 index 0000000000..2335ba657c --- /dev/null +++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -0,0 +1,5 @@ +export default (siteVars: any) => { + return { + primaryColor: siteVars.brand06, + } +} diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index c981153d78..1f619f48dc 100644 --- a/src/themes/teams-dark/siteVariables.ts +++ b/src/themes/teams-dark/siteVariables.ts @@ -17,7 +17,7 @@ export const brand = '#6264A7' export const brand02 = '#e2e2f6' export const brand04 = '#bdbde6' export const brand06 = '#a6a7dc' -export const brand08 = '#8b8cc7' +export const brand08 = '#393942' export const brand12 = brand export const brand14 = '#464775' export const brand16 = '#33344a' diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts new file mode 100644 index 0000000000..0b13ce6c2b --- /dev/null +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -0,0 +1 @@ +export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts new file mode 100644 index 0000000000..4e4b93347b --- /dev/null +++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -0,0 +1,8 @@ +export default (siteVars: any) => { + return { + dividerColor: siteVars.white, + textColor: siteVars.white, + primaryColor: siteVars.white, + secondaryColor: siteVars.white, + } +} diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts index 6ebff98067..4cd2c1e2b5 100644 --- a/src/themes/teams-high-contrast/index.ts +++ b/src/themes/teams-high-contrast/index.ts @@ -1,5 +1,6 @@ import mergeThemes from '../../lib/mergeThemes' import * as siteVariables from './siteVariables' +import * as componentVariables from './componentVariables' import teams from '../teams' -export default mergeThemes(teams, { siteVariables }) +export default mergeThemes(teams, { siteVariables, componentVariables }) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 06c2cb0e5e..7d27c56ca9 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -35,9 +35,6 @@ const dividerStyles: IComponentPartStylesInput = ...(type === 'primary' && { color: variables.primaryColor, }), - ...(type === 'secondary' && { - color: variables.secondaryColor, - }), ...(important && { fontWeight: variables.importantFontWeight, }), diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index b292d5070e..69d5d66c6a 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -5,7 +5,7 @@ export default (siteVars: any) => { textFontSize: siteVars.fontSizeSmall, textLineHeight: siteVars.lineHeightSmall, primaryColor: siteVars.brand, - secondaryColor: siteVars.gray04, + secondaryColor: siteVars.gray09, importantFontWeight: siteVars.fontWeightBold, dividerPadding: 4, } From 43a511f8192dcab323a7b4ee928a4450edd4d192 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 8 Oct 2018 15:57:40 -0700 Subject: [PATCH 4/6] fixing divider for dark theme --- src/themes/teams-dark/components/Divider/dividerVariables.ts | 1 + src/themes/teams-dark/siteVariables.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts index 2335ba657c..a94ed81c1f 100644 --- a/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -1,5 +1,6 @@ export default (siteVars: any) => { return { primaryColor: siteVars.brand06, + textColor: siteVars.gray02, } } diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index 1f619f48dc..342fec2d02 100644 --- a/src/themes/teams-dark/siteVariables.ts +++ b/src/themes/teams-dark/siteVariables.ts @@ -4,12 +4,12 @@ import { white } from '../teams/siteVariables' // COLORS // export const black = '#201f1f' -export const gray02 = '#bfbfbf' +export const gray02 = '#c8c6c4' export const gray03 = '#a6a6a6' export const gray04 = '#808080' export const gray06 = '#4d4d4d' export const gray08 = '#262626' -export const gray09 = '#292827' +export const gray09 = '#3b3a39' export const gray10 = '#2d2c2c' export const gray14 = '#292828' From 400e22343a5699335e14868ef429882a4eac4472 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 8 Oct 2018 16:04:57 -0700 Subject: [PATCH 5/6] remove secondary style for Teams since there is no secondary style & so it should just look like the default --- .../teams-high-contrast/components/Divider/dividerVariables.ts | 1 - src/themes/teams/components/Divider/dividerStyles.ts | 3 --- src/themes/teams/components/Divider/dividerVariables.ts | 1 - 3 files changed, 5 deletions(-) diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 4e4b93347b..8df71f9082 100644 --- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -3,6 +3,5 @@ export default (siteVars: any) => { dividerColor: siteVars.white, textColor: siteVars.white, primaryColor: siteVars.white, - secondaryColor: siteVars.white, } } diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 7d27c56ca9..a477621e4a 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -18,9 +18,6 @@ const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({ ...(type === 'primary' && { ...dividerBorderStyle(size, variables.primaryColor), }), - ...(type === 'secondary' && { - ...dividerBorderStyle(size, variables.secondaryColor), - }), }) const dividerStyles: IComponentPartStylesInput = { diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 69d5d66c6a..ba52d1e425 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -5,7 +5,6 @@ export default (siteVars: any) => { textFontSize: siteVars.fontSizeSmall, textLineHeight: siteVars.lineHeightSmall, primaryColor: siteVars.brand, - secondaryColor: siteVars.gray09, importantFontWeight: siteVars.fontWeightBold, dividerPadding: 4, } From 1434b43382070b7c55e3364ebc267af1b1bbf024 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 9 Oct 2018 12:26:40 -0700 Subject: [PATCH 6/6] move pxToRem for divider padding to the variables --- src/themes/teams/components/Divider/dividerStyles.ts | 4 ++-- src/themes/teams/components/Divider/dividerVariables.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index a477621e4a..bafee87219 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -27,8 +27,8 @@ const dividerStyles: IComponentPartStylesInput = color: variables.textColor, display: 'flex', alignItems: 'center', - paddingTop: pxToRem(variables.dividerPadding), - paddingBottom: pxToRem(variables.dividerPadding), + paddingTop: variables.dividerPadding, + paddingBottom: variables.dividerPadding, ...(type === 'primary' && { color: variables.primaryColor, }), diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index ba52d1e425..f6b675d631 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -1,3 +1,5 @@ +import { pxToRem } from '../../../../lib' + export default (siteVars: any) => { return { dividerColor: siteVars.gray09, @@ -6,6 +8,6 @@ export default (siteVars: any) => { textLineHeight: siteVars.lineHeightSmall, primaryColor: siteVars.brand, importantFontWeight: siteVars.fontWeightBold, - dividerPadding: 4, + dividerPadding: pxToRem(4), } }