diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index aa8258e0c6..34c15933b6 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,2 +1,3 @@ export { default as Button } from './components/Button/buttonVariables' +export { default as Text } from './components/Text/textVariables' export { default as Divider } from './components/Divider/dividerVariables' 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..583228c230 --- /dev/null +++ b/src/themes/teams-dark/components/Text/textVariables.ts @@ -0,0 +1,23 @@ +export interface ITextVariables { + atMentionMeColor: string + atMentionOtherColor: string + disabledColor: string + errorColor: string + importantColor: string + successColor: string + timestampColor: string + timestampHoverColor: string +} + +export default (siteVariables): ITextVariables => { + return { + 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-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts index 342fec2d02..4783349ad5 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 black = '#201f1e' + export const gray02 = '#c8c6c4' -export const gray03 = '#a6a6a6' -export const gray04 = '#808080' -export const gray06 = '#4d4d4d' -export const gray08 = '#262626' +export const gray03 = '#b3b0ad' +export const gray04 = '#8a8886' +export const gray06 = '#605e5c' +export const gray08 = '#484644' export const gray09 = '#3b3a39' -export const gray10 = '#2d2c2c' -export const gray14 = '#292828' +export const gray10 = '#323130' +export const gray14 = '#292827' export const brand = '#6264A7' export const brand02 = '#e2e2f6' @@ -27,6 +28,7 @@ export const magenta = '#cf6098' export const orchid = '#ae3d84' export const red = '#d74654' export const red08 = '#4f232b' +export const green04 = green // // SEMANTIC ASSIGNMENTS diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 0b13ce6c2b..f975eed9e2 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1 +1,2 @@ +export { default as Text } from './components/Text/textVariables' export { default as Divider } from './components/Divider/dividerVariables' 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..5409228c30 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -0,0 +1,23 @@ +export interface ITextVariables { + atMentionMeColor: string + atMentionOtherColor: string + disabledColor: string + errorColor: string + importantColor: string + successColor: string + timestampColor: string + timestampHoverColor: string +} + +export default (siteVariables): ITextVariables => { + return { + atMentionMeColor: siteVariables.accessibleYellow, + atMentionOtherColor: siteVariables.accessibleYellow, + disabledColor: siteVariables.accessibleGreen, + errorColor: siteVariables.red, + importantColor: siteVariables.red, + successColor: siteVariables.green04, + timestampColor: siteVariables.white, + timestampHoverColor: siteVariables.white, + } +} diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts index 8a62bca6f3..9aca1a5686 100644 --- a/src/themes/teams-high-contrast/siteVariables.ts +++ b/src/themes/teams-high-contrast/siteVariables.ts @@ -1,10 +1,16 @@ -import { white } from '../teams/siteVariables' +import { white, green } from '../teams/siteVariables' // // COLORS // export const black = '#000' +export const accessibleYellow = '#ffff01' +export const accessibleGreen = '#3ff23f' + +export const red = '#f00' +export const green04 = green + // // SEMANTIC ASSIGNMENTS // diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index e93fb92711..6c33815d9d 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/src/themes/teams/components/Text/textStyles.ts @@ -28,60 +28,62 @@ 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, }, }), + ...(important && { + fontWeight: v.importantWeight, + color: v.importantColor, + }), + ...(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, - }), - ...(important && { - fontWeight: v.importantWeight, - color: v.importantTextColor, + fontWeight: v.fontWeightBold, }), + ...(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, } }