feat(Text): Redlining text component for Teams dark & contrast themes (#317)

* adding in theme background aware doc examples

* redlining the themeing for text component in Teams dark and contrast themes

* moving 'rtl' up to remove redundant div

* moving text color variables to the component until we see a need to have them shared

* reordering &renaming text variables

* renaming Teams contrast theme variables

* reordering styles

Author: codepretty

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'

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,
+  }
+}

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

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'

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,
+  }
+}

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
 //

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,
       }),
     }
   },

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,
   }
 }