feat(Divider): Redlining divider component for Teams dark & contrast themes

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'

src/themes/teams-dark/components/Divider/dividerVariables.ts

@@ -0,0 +1,6 @@
+export default (siteVars: any) => {
+  return {
+    primaryColor: siteVars.brand06,
+    textColor: siteVars.gray02,
+  }
+}

src/themes/teams-dark/siteVariables.ts

@@ -4,20 +4,20 @@ 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'
 
 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'

src/themes/teams-high-contrast/componentVariables.ts

@@ -0,0 +1 @@
+export { default as Divider } from './components/Divider/dividerVariables'

src/themes/teams-high-contrast/components/Divider/dividerVariables.ts

@@ -0,0 +1,7 @@
+export default (siteVars: any) => {
+  return {
+    dividerColor: siteVars.white,
+    textColor: siteVars.white,
+    primaryColor: siteVars.white,
+  }
+}

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

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<IDividerPropsWithDefaults, any> = {
@@ -30,14 +27,11 @@ const dividerStyles: IComponentPartStylesInput<IDividerPropsWithDefaults, any> =
       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,
       }),
-      ...(type === 'secondary' && {
-        color: variables.secondaryColor,
-      }),
       ...(important && {
         fontWeight: variables.importantFontWeight,
       }),

src/themes/teams/components/Divider/dividerVariables.ts

@@ -1,12 +1,13 @@
+import { pxToRem } from '../../../../lib'
+
 export default (siteVars: any) => {
   return {
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,
     textFontSize: siteVars.fontSizeSmall,
     textLineHeight: siteVars.lineHeightSmall,
     primaryColor: siteVars.brand,
-    secondaryColor: siteVars.gray04,
     importantFontWeight: siteVars.fontWeightBold,
-    dividerPadding: 4,
+    dividerPadding: pxToRem(4),
   }
 }