addressed comments

Author: bmdalex

src/lib/colorUtils.ts

@@ -3,7 +3,7 @@ import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types'
 
 export const mapColorsToScheme = <T>(
   siteVars: SiteVariablesInput,
-  mapper: string | number | keyof ColorVariants | ((color: ColorVariants) => T),
+  mapper: keyof ColorVariants | ((color: ColorVariants) => T),
 ): ColorValues<T> =>
   _.mapValues(
     { ...siteVars.emphasisColors, ...siteVars.naturalColors },

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

@@ -6,18 +6,22 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider'
 import { DividerVariables } from './dividerVariables'
 
-const beforeAndAfter = (color, size, variables: DividerVariables): ICSSInJSStyle => ({
+const beforeAndAfter = (
+  color: string,
+  size: number,
+  variables: DividerVariables,
+): ICSSInJSStyle => ({
   content: '""',
   flex: 1,
   height: `${size + 1}px`,
-  background: color ? _.get(variables.colors, color) : variables.dividerColor,
+  background: _.get(variables.colors, color, variables.dividerColor),
 })
 
 const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, DividerVariables> = {
   root: ({ props, variables }): ICSSInJSStyle => {
     const { children, color, fitted, size, important, content } = props
     return {
-      color: color ? _.get(variables.colors, color) : variables.textColor,
+      color: _.get(variables.colors, color, variables.textColor),
       display: 'flex',
       alignItems: 'center',
       ...(!fitted && {

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

@@ -16,7 +16,7 @@ export interface DividerVariables {
 }
 
 export default (siteVars: any): DividerVariables => {
-  const colorVariant = '500'
+  const colorVariant = 500
 
   return {
     colors: mapColorsToScheme(siteVars, colorVariant),

src/themes/teams/components/Text/textStyles.ts

@@ -24,7 +24,7 @@ export default {
   }: ComponentStyleFunctionParam<TextProps, TextVariables>): ICSSInJSStyle => {
     return {
       display: 'inline-block',
-      ...(color && { color: _.get(v.colors, color) }),
+      color: _.get(v.colors, color),
       ...(truncated && truncateStyle),
       ...(atMention === true && {
         color: v.atMentionOtherColor,

src/themes/teams/components/Text/textVariables.ts

@@ -33,7 +33,7 @@ export interface TextVariables {
 }
 
 export default (siteVariables): TextVariables => {
-  const colorVariant = '500'
+  const colorVariant = 500
 
   return {
     colors: mapColorsToScheme(siteVariables, colorVariant),

src/themes/types.ts

@@ -77,9 +77,9 @@ export type EmphasisColors = Extendable<EmphasisColorsStrict, ColorVariants>
 type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict)
 
 /**
- * A type for extracting the color names and values.
+ * A type for an extendable set of ColorNames properties of type T
  */
-export type ColorValues<T> = Partial<Record<ColorNames, T>>
+export type ColorValues<T> = Extendable<Partial<Record<ColorNames, T>>, T>
 
 /**
  * A type for a base colors.