From d011db2756286dffc4ec8c4b27b94b37371a826b Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 10:12:40 -0700 Subject: [PATCH 1/7] 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 a603e98992a92afe27ca450c035b296d6040fef8 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 10:30:37 -0700 Subject: [PATCH 2/7] redlining the themeing for text component in Teams dark and contrast themes --- src/themes/teams-dark/siteVariables.ts | 32 +++++++++++++------ .../teams-high-contrast/siteVariables.ts | 21 +++++++++++- .../teams/components/Text/textVariables.ts | 16 +++++----- src/themes/teams/siteVariables.ts | 12 +++++++ 4 files changed, 63 insertions(+), 18 deletions(-) diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index c981153d78..27a2beab11 100644 --- a/src/themes/teams-dark/siteVariables.ts +++ b/src/themes/teams-dark/siteVariables.ts @@ -1,17 +1,18 @@ -import { white } from '../teams/siteVariables' +import { white, green } from '../teams/siteVariables' // // COLORS // export const black = '#201f1f' -export const gray02 = '#bfbfbf' -export const gray03 = '#a6a6a6' -export const gray04 = '#808080' -export const gray06 = '#4d4d4d' -export const gray08 = '#262626' -export const gray09 = '#292827' -export const gray10 = '#2d2c2c' -export const gray14 = '#292828' + +export const gray02 = '#c8c6c4' +export const gray03 = '#b3b0ad' +export const gray04 = '#8a8886' +export const gray06 = '#605e5c' +export const gray08 = '#484644' +export const gray09 = '#3b3a39' +export const gray10 = '#323130' +export const gray14 = '#292827' export const brand = '#6264A7' export const brand02 = '#e2e2f6' @@ -27,9 +28,22 @@ export const magenta = '#cf6098' export const orchid = '#ae3d84' export const red = '#d74654' export const red08 = '#4f232b' +export const green04 = green // // SEMANTIC ASSIGNMENTS // export const bodyBackground = black export const bodyColor = white + +// +// TEXT VARIABLES +// +export const importantTextColor = red +export const atMentionMeTextColor = orange04 +export const atMentionOtherTextColor = brand06 +export const disabledTextColor = gray06 +export const errorTextColor = red +export const successTextColor = green04 +export const timestampTextColor = gray04 +export const timestampHoverTextColor = gray02 diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 8a62bca6f3..3a7de2b322 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -1,12 +1,31 @@ -import { white } from '../teams/siteVariables' +import { white, green } from '../teams/siteVariables' // // COLORS // export const black = '#000' +export const hyperlinkColor = '#ffff01' +export const disabledColor = '#3ff23f' +export const selectionBackgroundColor = '#1aebff' + +export const red = '#f00' +export const green04 = green + // // SEMANTIC ASSIGNMENTS // export const bodyBackground = black export const bodyColor = white + +// +// TEXT VARIABLES +// +export const importantTextColor = red +export const atMentionMeTextColor = hyperlinkColor +export const atMentionOtherTextColor = hyperlinkColor +export const disabledTextColor = disabledColor +export const errorTextColor = red +export const successTextColor = green04 +export const timestampTextColor = white +export const timestampHoverTextColor = white diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 2821f27cde..c70ad76f01 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -28,15 +28,15 @@ export interface ITextVariables { export default (siteVariables): ITextVariables => { return { - atMentionOtherTextColor: siteVariables.brand06, - atMentionMeTextColor: siteVariables.orange04, + atMentionOtherTextColor: siteVariables.atMentionOtherTextColor, + atMentionMeTextColor: siteVariables.atMentionMeTextColor, atMentionMeFontWeight: siteVariables.fontWeightBold, - disabledTextColor: siteVariables.gray06, - errorTextColor: siteVariables.red, - successTextColor: siteVariables.green04, - timestampTextColor: siteVariables.gray04, - timestampHoverTextColor: siteVariables.gray02, + disabledTextColor: siteVariables.disabledTextColor, + errorTextColor: siteVariables.errorTextColor, + successTextColor: siteVariables.successTextColor, + timestampTextColor: siteVariables.timestampTextColor, + timestampHoverTextColor: siteVariables.timestampHoverTextColor, textExtraSmallFontSize: siteVariables.fontSizes.smaller, textExtraSmallLineHeight: siteVariables.lineHeightExtraSmall, @@ -54,7 +54,7 @@ export default (siteVariables): ITextVariables => { textExtraLargeLineHeight: siteVariables.lineHeightSmall, importantWeight: siteVariables.fontWeightBold, - importantTextColor: siteVariables.red, + importantTextColor: siteVariables.importantTextColor, textWeightLight: siteVariables.fontWeightLight, textWeightSemilight: siteVariables.fontWeightSemilight, diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index 0d20800bc0..606dd29ede 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -90,3 +90,15 @@ export const bodyFontSize = '1.4rem' export const bodyBackground = white export const bodyColor = black export const bodyLineHeight = lineHeightBase + +// +// TEXT VARIABLES +// +export const importantTextColor = red +export const atMentionMeTextColor = orange04 +export const atMentionOtherTextColor = brand06 +export const disabledTextColor = gray06 +export const errorTextColor = red +export const successTextColor = green04 +export const timestampTextColor = gray04 +export const timestampHoverTextColor = gray02 From 8d73044581fb33f1146d666bbd1be1ad40e36c49 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 11:22:20 -0700 Subject: [PATCH 3/7] 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 f3a7a74a8b41bc065e8a824d06f321fd7bf302d4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 4 Oct 2018 15:14:12 -0700 Subject: [PATCH 4/7] moving text color variables to the component until we see a need to have them shared --- src/themes/teams-dark/componentVariables.ts | 1 + .../components/Text/textVariables.ts | 23 +++++++++++++++++++ src/themes/teams-dark/siteVariables.ts | 12 ---------- .../teams-high-contrast/componentVariables.ts | 1 + .../components/Text/textVariables.ts | 23 +++++++++++++++++++ src/themes/teams-high-contrast/index.ts | 3 ++- .../teams-high-contrast/siteVariables.ts | 12 ---------- .../teams/components/Text/textVariables.ts | 16 ++++++------- src/themes/teams/siteVariables.ts | 12 ---------- 9 files changed, 58 insertions(+), 45 deletions(-) create mode 100644 src/themes/teams-dark/components/Text/textVariables.ts create mode 100644 src/themes/teams-high-contrast/componentVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Text/textVariables.ts diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index e17b98e8c2..9f9e34caac 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 Text } from './components/Text/textVariables' diff --git a/src/themes/teams-dark/components/Text/textVariables.ts b/src/themes/teams-dark/components/Text/textVariables.ts new file mode 100644 index 0000000000..84acd8c452 --- /dev/null +++ b/src/themes/teams-dark/components/Text/textVariables.ts @@ -0,0 +1,23 @@ +export interface ITextVariables { + importantTextColor: string + atMentionMeTextColor: string + atMentionOtherTextColor: string + disabledTextColor: string + errorTextColor: string + successTextColor: string + timestampTextColor: string + timestampHoverTextColor: string +} + +export default (siteVariables): ITextVariables => { + return { + atMentionOtherTextColor: siteVariables.brand06, + atMentionMeTextColor: siteVariables.orange04, + disabledTextColor: siteVariables.gray06, + errorTextColor: siteVariables.red, + successTextColor: siteVariables.green04, + timestampTextColor: siteVariables.gray04, + timestampHoverTextColor: siteVariables.gray02, + importantTextColor: siteVariables.red, + } +} diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index 39de39e7f5..d85d7ffe24 100644 --- a/src/themes/teams-dark/siteVariables.ts +++ b/src/themes/teams-dark/siteVariables.ts @@ -35,15 +35,3 @@ export const green04 = green // export const bodyBackground = black export const bodyColor = white - -// -// TEXT VARIABLES -// -export const importantTextColor = red -export const atMentionMeTextColor = orange04 -export const atMentionOtherTextColor = brand06 -export const disabledTextColor = gray06 -export const errorTextColor = red -export const successTextColor = green04 -export const timestampTextColor = gray04 -export const timestampHoverTextColor = gray02 diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts new file mode 100644 index 0000000000..9acfb21044 --- /dev/null +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -0,0 +1 @@ +export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts new file mode 100644 index 0000000000..7b5ec1a53a --- /dev/null +++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -0,0 +1,23 @@ +export interface ITextVariables { + importantTextColor: string + atMentionMeTextColor: string + atMentionOtherTextColor: string + disabledTextColor: string + errorTextColor: string + successTextColor: string + timestampTextColor: string + timestampHoverTextColor: string +} + +export default (siteVariables): ITextVariables => { + return { + atMentionOtherTextColor: siteVariables.hyperlinkColor, + atMentionMeTextColor: siteVariables.hyperlinkColor, + disabledTextColor: siteVariables.disabledColor, + errorTextColor: siteVariables.red, + successTextColor: siteVariables.green04, + timestampTextColor: siteVariables.white, + timestampHoverTextColor: siteVariables.white, + importantTextColor: siteVariables.red, + } +} 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-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 3a7de2b322..227ba11463 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -17,15 +17,3 @@ export const green04 = green // export const bodyBackground = black export const bodyColor = white - -// -// TEXT VARIABLES -// -export const importantTextColor = red -export const atMentionMeTextColor = hyperlinkColor -export const atMentionOtherTextColor = hyperlinkColor -export const disabledTextColor = disabledColor -export const errorTextColor = red -export const successTextColor = green04 -export const timestampTextColor = white -export const timestampHoverTextColor = white diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index c70ad76f01..2821f27cde 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -28,15 +28,15 @@ export interface ITextVariables { export default (siteVariables): ITextVariables => { return { - atMentionOtherTextColor: siteVariables.atMentionOtherTextColor, - atMentionMeTextColor: siteVariables.atMentionMeTextColor, + atMentionOtherTextColor: siteVariables.brand06, + atMentionMeTextColor: siteVariables.orange04, atMentionMeFontWeight: siteVariables.fontWeightBold, - disabledTextColor: siteVariables.disabledTextColor, - errorTextColor: siteVariables.errorTextColor, - successTextColor: siteVariables.successTextColor, - timestampTextColor: siteVariables.timestampTextColor, - timestampHoverTextColor: siteVariables.timestampHoverTextColor, + disabledTextColor: siteVariables.gray06, + errorTextColor: siteVariables.red, + successTextColor: siteVariables.green04, + timestampTextColor: siteVariables.gray04, + timestampHoverTextColor: siteVariables.gray02, textExtraSmallFontSize: siteVariables.fontSizes.smaller, textExtraSmallLineHeight: siteVariables.lineHeightExtraSmall, @@ -54,7 +54,7 @@ export default (siteVariables): ITextVariables => { textExtraLargeLineHeight: siteVariables.lineHeightSmall, importantWeight: siteVariables.fontWeightBold, - importantTextColor: siteVariables.importantTextColor, + importantTextColor: siteVariables.red, textWeightLight: siteVariables.fontWeightLight, textWeightSemilight: siteVariables.fontWeightSemilight, diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index 606dd29ede..0d20800bc0 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -90,15 +90,3 @@ export const bodyFontSize = '1.4rem' export const bodyBackground = white export const bodyColor = black export const bodyLineHeight = lineHeightBase - -// -// TEXT VARIABLES -// -export const importantTextColor = red -export const atMentionMeTextColor = orange04 -export const atMentionOtherTextColor = brand06 -export const disabledTextColor = gray06 -export const errorTextColor = red -export const successTextColor = green04 -export const timestampTextColor = gray04 -export const timestampHoverTextColor = gray02 From ce16fba1e7f7132f9c59d4e66e716cd7396685a7 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 5 Oct 2018 10:41:21 -0700 Subject: [PATCH 5/7] reordering &renaming text variables --- .github/CONTRIBUTING.md | 1 + .../components/Text/textVariables.ts | 32 +++--- .../components/Text/textVariables.ts | 32 +++--- .../teams/components/Text/textStyles.ts | 46 ++++---- .../teams/components/Text/textVariables.ts | 100 +++++++++--------- 5 files changed, 106 insertions(+), 105 deletions(-) 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/components/Text/textVariables.ts b/src/themes/teams-dark/components/Text/textVariables.ts index 84acd8c452..583228c230 100644 --- a/src/themes/teams-dark/components/Text/textVariables.ts +++ b/src/themes/teams-dark/components/Text/textVariables.ts @@ -1,23 +1,23 @@ export interface ITextVariables { - importantTextColor: string - atMentionMeTextColor: string - atMentionOtherTextColor: string - disabledTextColor: string - errorTextColor: string - successTextColor: string - timestampTextColor: string - timestampHoverTextColor: string + atMentionMeColor: string + atMentionOtherColor: string + disabledColor: string + errorColor: string + importantColor: string + successColor: string + timestampColor: string + timestampHoverColor: string } export default (siteVariables): ITextVariables => { return { - atMentionOtherTextColor: siteVariables.brand06, - atMentionMeTextColor: siteVariables.orange04, - disabledTextColor: siteVariables.gray06, - errorTextColor: siteVariables.red, - successTextColor: siteVariables.green04, - timestampTextColor: siteVariables.gray04, - timestampHoverTextColor: siteVariables.gray02, - importantTextColor: siteVariables.red, + atMentionMeColor: siteVariables.orange04, + atMentionOtherColor: siteVariables.brand06, + disabledColor: siteVariables.gray06, + errorColor: siteVariables.red, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.gray04, + timestampHoverColor: siteVariables.gray02, } } diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts index 7b5ec1a53a..9d8699250b 100644 --- a/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -1,23 +1,23 @@ export interface ITextVariables { - importantTextColor: string - atMentionMeTextColor: string - atMentionOtherTextColor: string - disabledTextColor: string - errorTextColor: string - successTextColor: string - timestampTextColor: string - timestampHoverTextColor: string + atMentionMeColor: string + atMentionOtherColor: string + disabledColor: string + errorColor: string + importantColor: string + successColor: string + timestampColor: string + timestampHoverColor: string } export default (siteVariables): ITextVariables => { return { - atMentionOtherTextColor: siteVariables.hyperlinkColor, - atMentionMeTextColor: siteVariables.hyperlinkColor, - disabledTextColor: siteVariables.disabledColor, - errorTextColor: siteVariables.red, - successTextColor: siteVariables.green04, - timestampTextColor: siteVariables.white, - timestampHoverTextColor: siteVariables.white, - importantTextColor: siteVariables.red, + atMentionMeColor: siteVariables.hyperlinkColor, + atMentionOtherColor: siteVariables.hyperlinkColor, + disabledColor: siteVariables.disabledColor, + errorColor: siteVariables.red, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.white, + timestampHoverColor: siteVariables.white, } } diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index e93fb92711..59f885e07c 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -28,60 +28,60 @@ export default { return { ...(truncated && truncateStyle), ...(atMention === true && { - color: v.atMentionOtherTextColor, + color: v.atMentionOtherColor, }), ...(atMention === 'me' && { - color: v.atMentionMeTextColor, + color: v.atMentionMeColor, fontWeight: v.atMentionMeFontWeight, }), - ...(disabled && { color: v.disabledTextColor }), - ...(error && { color: v.errorTextColor }), - ...(success && { color: v.successTextColor }), + ...(disabled && { color: v.disabledColor }), + ...(error && { color: v.errorColor }), + ...(success && { color: v.successColor }), ...(temporary && { fontStyle: 'italic' }), ...(timestamp && { - color: v.timestampTextColor, + color: v.timestampColor, ':hover': { - color: v.timestampHoverTextColor, + color: v.timestampHoverColor, }, }), ...(weight === Weights.Light && { - fontWeight: v.textWeightLight, + fontWeight: v.fontWeightLight, }), ...(weight === Weights.Semilight && { - fontWeight: v.textWeightSemilight, + fontWeight: v.fontWeightSemilight, }), ...(weight === Weights.Regular && { - fontWeight: v.textWeightRegular, + fontWeight: v.fontWeightRegular, }), ...(weight === Weights.Semibold && { - fontWeight: v.textWeightSemibold, + fontWeight: v.fontWeightSemibold, }), ...(weight === Weights.Bold && { - fontWeight: v.textWeightBold, + fontWeight: v.fontWeightBold, }), ...(important && { fontWeight: v.importantWeight, - color: v.importantTextColor, + color: v.importantColor, }), ...(size === Sizes.Smaller && { - fontSize: v.textExtraSmallFontSize, - lineHeight: v.textExtraSmallLineHeight, + fontSize: v.fontSizeExtraSmall, + lineHeight: v.fontLineHeightExtraSmall, }), ...(size === Sizes.Small && { - fontSize: v.textSmallFontSize, - lineHeight: v.textSmallLineHeight, + fontSize: v.fontSizeSmall, + lineHeight: v.fontLineHeightSmall, }), ...(size === Sizes.Medium && { - fontSize: v.textMediumFontSize, - lineHeight: v.textMediumLineHeight, + fontSize: v.fontSizeMedium, + lineHeight: v.fontLineHeightMedium, }), ...(size === Sizes.Large && { - fontSize: v.textLargeFontSize, - lineHeight: v.textLargeLineHeight, + fontSize: v.fontSizeLarge, + lineHeight: v.fontLineHeightLarge, }), ...(size === Sizes.Larger && { - fontSize: v.textExtraLargeFontSize, - lineHeight: v.textExtraLargeLineHeight, + fontSize: v.fontSizeExtraLarge, + lineHeight: v.fontLineHeightExtraLarge, }), } }, diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 2821f27cde..13705131f4 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -1,65 +1,65 @@ export interface ITextVariables { - importantTextColor: string - importantWeight: number - textWeightLight: number - textWeightSemilight: number - textWeightRegular: number - textWeightSemibold: number - textWeightBold: number + atMentionMeColor: string atMentionMeFontWeight: number - atMentionMeTextColor: string - atMentionOtherTextColor: string - disabledTextColor: string - errorTextColor: string - successTextColor: string - timestampTextColor: string - timestampHoverTextColor: string - textExtraSmallFontSize: string - textExtraSmallLineHeight: number - textSmallFontSize: string - textSmallLineHeight: number - textMediumFontSize: string - textMediumLineHeight: number - textLargeFontSize: string - textLargeLineHeight: number - textExtraLargeFontSize: string - textExtraLargeLineHeight: number + atMentionOtherColor: string + disabledColor: string + errorColor: string + importantColor: string + importantWeight: number + successColor: string + timestampColor: string + timestampHoverColor: string + + fontSizeExtraSmall: string + fontLineHeightExtraSmall: number + fontSizeSmall: string + fontLineHeightSmall: number + fontSizeMedium: string + fontLineHeightMedium: number + fontSizeLarge: string + fontLineHeightLarge: number + fontSizeExtraLarge: string + fontLineHeightExtraLarge: number + + fontWeightLight: number + fontWeightSemilight: number + fontWeightRegular: number + fontWeightSemibold: number + fontWeightBold: number } export default (siteVariables): ITextVariables => { return { - atMentionOtherTextColor: siteVariables.brand06, - atMentionMeTextColor: siteVariables.orange04, + atMentionOtherColor: siteVariables.brand06, + atMentionMeColor: siteVariables.orange04, atMentionMeFontWeight: siteVariables.fontWeightBold, + disabledColor: siteVariables.gray06, + errorColor: siteVariables.red, + importantWeight: siteVariables.fontWeightBold, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.gray04, + timestampHoverColor: siteVariables.gray02, - disabledTextColor: siteVariables.gray06, - errorTextColor: siteVariables.red, - successTextColor: siteVariables.green04, - timestampTextColor: siteVariables.gray04, - timestampHoverTextColor: siteVariables.gray02, - - textExtraSmallFontSize: siteVariables.fontSizes.smaller, - textExtraSmallLineHeight: siteVariables.lineHeightExtraSmall, - - textSmallFontSize: siteVariables.fontSizes.small, - textSmallLineHeight: siteVariables.lineHeightSmall, + fontSizeExtraSmall: siteVariables.fontSizes.smaller, + fontLineHeightExtraSmall: siteVariables.lineHeightExtraSmall, - textMediumFontSize: siteVariables.fontSizes.medium, - textMediumLineHeight: siteVariables.lineHeightBase, + fontSizeSmall: siteVariables.fontSizes.small, + fontLineHeightSmall: siteVariables.lineHeightSmall, - textLargeFontSize: siteVariables.fontSizes.large, - textLargeLineHeight: siteVariables.lineHeightSmall, + fontSizeMedium: siteVariables.fontSizes.medium, + fontLineHeightMedium: siteVariables.lineHeightBase, - textExtraLargeFontSize: siteVariables.fontSizes.larger, - textExtraLargeLineHeight: siteVariables.lineHeightSmall, + fontSizeLarge: siteVariables.fontSizes.large, + fontLineHeightLarge: siteVariables.lineHeightSmall, - importantWeight: siteVariables.fontWeightBold, - importantTextColor: siteVariables.red, + fontSizeExtraLarge: siteVariables.fontSizes.larger, + fontLineHeightExtraLarge: siteVariables.lineHeightSmall, - textWeightLight: siteVariables.fontWeightLight, - textWeightSemilight: siteVariables.fontWeightSemilight, - textWeightRegular: siteVariables.fontWeightRegular, - textWeightSemibold: siteVariables.fontWeightSemibold, - textWeightBold: siteVariables.fontWeightBold, + fontWeightLight: siteVariables.fontWeightLight, + fontWeightSemilight: siteVariables.fontWeightSemilight, + fontWeightRegular: siteVariables.fontWeightRegular, + fontWeightSemibold: siteVariables.fontWeightSemibold, + fontWeightBold: siteVariables.fontWeightBold, } } From 44c2674f9865c794a415f7168481989d2d7351c2 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Fri, 5 Oct 2018 11:01:39 -0700 Subject: [PATCH 6/7] renaming Teams contrast theme variables --- .../teams-high-contrast/components/Text/textVariables.ts | 6 +++--- src/themes/teams-high-contrast/siteVariables.ts | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts index 9d8699250b..5409228c30 100644 --- a/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -11,9 +11,9 @@ export interface ITextVariables { export default (siteVariables): ITextVariables => { return { - atMentionMeColor: siteVariables.hyperlinkColor, - atMentionOtherColor: siteVariables.hyperlinkColor, - disabledColor: siteVariables.disabledColor, + atMentionMeColor: siteVariables.accessibleYellow, + atMentionOtherColor: siteVariables.accessibleYellow, + disabledColor: siteVariables.accessibleGreen, errorColor: siteVariables.red, importantColor: siteVariables.red, successColor: siteVariables.green04, diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 227ba11463..9aca1a5686 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -5,9 +5,8 @@ import { white, green } from '../teams/siteVariables' // export const black = '#000' -export const hyperlinkColor = '#ffff01' -export const disabledColor = '#3ff23f' -export const selectionBackgroundColor = '#1aebff' +export const accessibleYellow = '#ffff01' +export const accessibleGreen = '#3ff23f' export const red = '#f00' export const green04 = green From f358ab33fda1c85fbb2e57b36720c6c85a1e982e Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 9 Oct 2018 12:29:58 -0700 Subject: [PATCH 7/7] reordering styles --- src/themes/teams/components/Text/textStyles.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index 59f885e07c..6c33815d9d 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -44,6 +44,11 @@ export default { color: v.timestampHoverColor, }, }), + ...(important && { + fontWeight: v.importantWeight, + color: v.importantColor, + }), + ...(weight === Weights.Light && { fontWeight: v.fontWeightLight, }), @@ -59,10 +64,7 @@ export default { ...(weight === Weights.Bold && { fontWeight: v.fontWeightBold, }), - ...(important && { - fontWeight: v.importantWeight, - color: v.importantColor, - }), + ...(size === Sizes.Smaller && { fontSize: v.fontSizeExtraSmall, lineHeight: v.fontLineHeightExtraSmall,