From f123ea6a9964ca954aa8d0ed3157b2e338e2f63c Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Tue, 18 Dec 2018 18:39:18 +0200
Subject: [PATCH 01/20] feat(label): color prop

---
 .../LabelExampleColor.shorthand.tsx           | 19 +++++++
 .../components/Label/Variations/index.tsx     |  7 ++-
 src/components/Label/Label.tsx                |  6 +-
 .../teams/components/Label/labelStyles.ts     | 56 +++++++++----------
 .../teams/components/Label/labelVariables.ts  | 24 ++++++--
 5 files changed, 76 insertions(+), 36 deletions(-)
 create mode 100644 docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx

diff --git a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
new file mode 100644
index 0000000000..cd84c9187b
--- /dev/null
+++ b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import _ from 'lodash'
+import { Label, ProviderConsumer } from '@stardust-ui/react'
+
+const LabelExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <>
+          <Label key={color} color={color} content={_.startCase(color)} />
+          <br />
+          <br />
+        </>
+      ))
+    }
+  />
+)
+
+export default LabelExampleColor
diff --git a/docs/src/examples/components/Label/Variations/index.tsx b/docs/src/examples/components/Label/Variations/index.tsx
index 28aa3f55bd..b84d877a3e 100644
--- a/docs/src/examples/components/Label/Variations/index.tsx
+++ b/docs/src/examples/components/Label/Variations/index.tsx
@@ -6,9 +6,14 @@ const Variations = () => (
   <ExampleSection title="Variations">
     <ComponentExample
       title="Circular"
-      description="A label can be circular."
+      description="A Label can be circular."
       examplePath="components/Label/Variations/LabelExampleCircular"
     />
+    <ComponentExample
+      title="Color"
+      description="A Label can have different colors."
+      examplePath="components/Label/Variations/LabelExampleColor"
+    />
   </ExampleSection>
 )
 
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 971c94a387..dcc4c781da 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
@@ -22,7 +23,8 @@ import { ReactProps, ShorthandValue } from '../../../types/utils'
 export interface LabelProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {
+    ContentComponentProps,
+    ColorComponentProps {
   accessibility?: Accessibility
 
   /** A label can be circular. */
@@ -55,7 +57,7 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
   static className = 'ui-label'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: true }),
     circular: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 931129e227..490e5cc0b8 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -1,42 +1,42 @@
+import * as _ from 'lodash'
+
 import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
+import { LabelVariables } from './labelVariables'
 
-const labelStyles: ComponentSlotStylesInput<LabelProps, any> = {
-  root: ({ props: { image, imagePosition, circular }, variables }): ICSSInJSStyle => ({
-    padding: variables.padding,
-    ...(image &&
-      imagePosition === 'start' && {
-        paddingLeft: variables.startPaddingLeft,
-      }),
-    ...(image &&
-      imagePosition === 'end' && {
-        paddingRight: variables.endPaddingRight,
-      }),
+const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'inline-flex',
     alignItems: 'center',
-    height: variables.height,
+    overflow: 'hidden',
+    height: v.height,
+    lineHeight: v.height,
+    color: v.color,
+    backgroundColor: _.get(v.colors, p.color, v.backgroundColor),
     fontSize: pxToRem(14),
-    lineHeight: variables.height,
-    backgroundColor: variables.backgroundColor,
-    color: variables.color,
     borderRadius: pxToRem(3),
-    ...(circular && {
-      borderRadius: variables.circularRadius,
+    padding: v.padding,
+    ...(p.image &&
+      (p.imagePosition === 'start'
+        ? { paddingLeft: v.startPaddingLeft }
+        : { paddingRight: v.endPaddingRight })),
+    ...(p.circular && {
+      borderRadius: v.circularRadius,
     }),
-    overflow: 'hidden',
   }),
-  image: ({ variables }): ICSSInJSStyle => ({
-    height: variables.height,
-    width: variables.height,
-  }),
-  icon: ({ props }): ICSSInJSStyle => ({
-    ...(props.icon &&
-      typeof props.icon === 'object' &&
-      (props.icon as any).onClick && {
-        cursor: 'pointer',
-      }),
+
+  image: ({ variables: v }): ICSSInJSStyle => ({
+    height: v.height,
+    width: v.height,
   }),
+
+  icon: ({ props: p }): ICSSInJSStyle =>
+    p.icon &&
+    typeof p.icon === 'object' &&
+    (p.icon as any).onClick && {
+      cursor: 'pointer',
+    },
 }
 
 export default labelStyles
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 2cd9a9592f..9d71cfa5ef 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -1,20 +1,34 @@
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
 import { pxToRem } from '../../utils'
 
-export default () => {
+export interface LabelVariables {
+  colors: ColorValues<string>
+  circularRadius: string
+  padding: string
+  color: string
+  backgroundColor: string
+  startPaddingLeft: string
+  endPaddingRight: string
+  height: string
+  iconColor: string
+}
+
+export default (siteVars: any): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
+  const colorVariant = 500
 
   return {
+    colors: mapColorsToScheme(siteVars, colorVariant),
+    color,
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
-    color,
     backgroundColor: 'rgb(232, 232, 232)',
     startPaddingLeft: '0px',
     endPaddingRight: '0px',
     height: pxToRem(20),
 
     // variables for 'icon' part
-    icon: {
-      color,
-    },
+    iconColor: color,
   }
 }

From 400415adb9363af45ed3694f8a1b0faeb253e51f Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Wed, 19 Dec 2018 17:36:19 +0200
Subject: [PATCH 02/20] color scheme approach for Label

---
 src/themes/teams/components/Label/labelStyles.ts   |  3 +--
 .../teams/components/Label/labelVariables.ts       | 14 +++++++++-----
 src/themes/types.ts                                |  7 +++++++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 490e5cc0b8..0e7ab0f093 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -12,8 +12,7 @@ const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
     overflow: 'hidden',
     height: v.height,
     lineHeight: v.height,
-    color: v.color,
-    backgroundColor: _.get(v.colors, p.color, v.backgroundColor),
+    ..._.get(v.colors, p.color, { color: v.color, backgroundColor: v.backgroundColor }),
     fontSize: pxToRem(14),
     borderRadius: pxToRem(3),
     padding: v.padding,
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 9d71cfa5ef..8eb93ab8fc 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -1,9 +1,11 @@
-import { ColorValues } from '../../../types'
+import { ColorValues, ColorScheme } from '../../../types'
 import { mapColorsToScheme } from '../../../../lib'
 import { pxToRem } from '../../utils'
 
+type LabelColorScheme = Pick<ColorScheme, 'color' | 'backgroundColor'>
+
 export interface LabelVariables {
-  colors: ColorValues<string>
+  colors: ColorValues<LabelColorScheme>
   circularRadius: string
   padding: string
   color: string
@@ -16,14 +18,16 @@ export interface LabelVariables {
 
 export default (siteVars: any): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
-  const colorVariant = 500
 
   return {
-    colors: mapColorsToScheme(siteVars, colorVariant),
+    colors: mapColorsToScheme(siteVars, colorVariants => ({
+      color: colorVariants[50],
+      backgroundColor: colorVariants[500],
+    })),
     color,
+    backgroundColor: 'rgb(232, 232, 232)',
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
-    backgroundColor: 'rgb(232, 232, 232)',
     startPaddingLeft: '0px',
     endPaddingRight: '0px',
     height: pxToRem(20),
diff --git a/src/themes/types.ts b/src/themes/types.ts
index 646d876224..a4542ac67c 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -96,6 +96,13 @@ export type ColorPalette = ExtendablePalette<
   EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors
 >
 
+/**
+ * A type for the generic color scheme of a component based on CSS property names
+ */
+export type ColorScheme = Required<
+  Pick<React.CSSProperties, 'color' | 'backgroundColor' | 'borderColor'> & { shadowColor: string }
+>
+
 // ========================================================
 // Props
 // ========================================================

From 79c4c4f3970581092a4fb2c3dfbc624e98e0d448 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Wed, 19 Dec 2018 18:07:20 +0200
Subject: [PATCH 03/20] changelog

---
 CHANGELOG.md                                                  | 1 +
 .../Label/Variations/LabelExampleColor.shorthand.tsx          | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33b08528ac..cb17081fc1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Enable RTL for keyboard handlers @sophieH29 ([#656](https://github.com/stardust-ui/react/pull/656))
 - Add `color` prop to `Icon` component @Bugaa92 ([#651](https://github.com/stardust-ui/react/pull/651))
 - Create a `base` theme with Text component example @almedint ([#618](https://github.com/stardust-ui/react/pull/618))
+- Add `color` prop to `Label` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
 
 ### Documentation
 - Add more accessibility descriptions to components and behaviors @jurokapsiar  ([#648](https://github.com/stardust-ui/react/pull/648))
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
index cd84c9187b..a304810ee4 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Label, ProviderConsumer } from '@stardust-ui/react'
 
 const LabelExampleColor = () => (

From d0aaea2e49583d3750f6ce7f2860e35b7e18f11b Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Thu, 20 Dec 2018 21:03:19 +0200
Subject: [PATCH 04/20] color scheme attempt at theme level

---
 .../LabelExampleColor.shorthand.tsx           |  4 +-
 src/lib/renderComponent.tsx                   |  1 +
 src/themes/base/colors.ts                     | 35 +++++++++++++--
 src/themes/default/siteVariables.ts           |  1 +
 src/themes/teams/colors.ts                    | 35 +++++++++++++--
 .../teams/components/Label/labelStyles.ts     | 44 +++++++++++--------
 .../teams/components/Label/labelVariables.ts  | 15 +++----
 src/themes/teams/siteVariables.ts             |  2 +-
 src/themes/types.ts                           | 22 +++++-----
 9 files changed, 112 insertions(+), 47 deletions(-)
 create mode 100644 src/themes/default/siteVariables.ts

diff --git a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
index a304810ee4..e116b452d8 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
@@ -4,8 +4,8 @@ import { Label, ProviderConsumer } from '@stardust-ui/react'
 
 const LabelExampleColor = () => (
   <ProviderConsumer
-    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
-      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+    render={({ siteVariables: { colorScheme } }) =>
+      _.keys(colorScheme).map(color => (
         <>
           <Label key={color} color={color} content={_.startCase(color)} />
           <br />
diff --git a/src/lib/renderComponent.tsx b/src/lib/renderComponent.tsx
index ad01a00870..6716c70621 100644
--- a/src/lib/renderComponent.tsx
+++ b/src/lib/renderComponent.tsx
@@ -159,6 +159,7 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
 
         const {
           siteVariables = {
+            colorScheme: {},
             colors: {},
             contextualColors: {},
             emphasisColors: {},
diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index 640888e214..2001f3e7bc 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -1,4 +1,12 @@
-import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types'
+import * as _ from 'lodash'
+
+import {
+  ColorPalette,
+  ContextualColors,
+  EmphasisColors,
+  NaturalColors,
+  ColorSchemeMapping,
+} from '../types'
 
 export const naturalColors: NaturalColors = {
   blue: {
@@ -135,11 +143,32 @@ export const contextualColors: ContextualColors = {
   warning: naturalColors.yellow,
 }
 
-export const colors: ColorPalette = {
-  ...contextualColors,
+const emphasisAndNaturalColors: EmphasisColors & NaturalColors = {
   ...emphasisColors,
   ...naturalColors,
+}
+
+const lightBackgroundColors = ['orange', 'yellow', 'postOrange']
+const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName)
+
+export const colors: ColorPalette = {
+  ...emphasisAndNaturalColors,
+  ...contextualColors,
 
   black: '#000',
   white: '#fff',
 }
+
+export const colorScheme: ColorSchemeMapping = _.mapValues(
+  emphasisAndNaturalColors,
+  (colorVariants, colorName) => {
+    const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
+
+    return {
+      foreground,
+      background: colorVariants[500],
+      border: foreground,
+      shadow: foreground,
+    }
+  },
+)
diff --git a/src/themes/default/siteVariables.ts b/src/themes/default/siteVariables.ts
new file mode 100644
index 0000000000..f903444d1a
--- /dev/null
+++ b/src/themes/default/siteVariables.ts
@@ -0,0 +1 @@
+export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index d342ea9d54..c14add0e0d 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -1,4 +1,12 @@
-import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types'
+import * as _ from 'lodash'
+
+import {
+  ColorPalette,
+  ContextualColors,
+  EmphasisColors,
+  NaturalColors,
+  ColorSchemeMapping,
+} from '../types'
 
 export const emphasisColors: EmphasisColors = {
   primary: {
@@ -142,12 +150,33 @@ export const contextualColors: ContextualColors = {
   text: naturalColors.grey,
 }
 
-export const colors: ColorPalette = {
-  ...contextualColors,
+const emphasisAndNaturalColors: EmphasisColors & NaturalColors = {
   ...emphasisColors,
   ...naturalColors,
+}
+
+const lightBackgroundColors = ['orange', 'yellow', 'postOrange']
+const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName)
+
+export const colors: ColorPalette = {
+  ...emphasisAndNaturalColors,
+  ...contextualColors,
 
   // Primitive colors
   black: naturalColors.grey[900],
   white: naturalColors.grey[50],
 }
+
+export const colorScheme: ColorSchemeMapping = _.mapValues(
+  emphasisAndNaturalColors,
+  (colorVariants, colorName) => {
+    const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
+
+    return {
+      foreground,
+      background: colorVariants[500],
+      border: foreground,
+      shadow: foreground,
+    }
+  },
+)
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 0e7ab0f093..f2038e0c3f 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -6,24 +6,32 @@ import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    overflow: 'hidden',
-    height: v.height,
-    lineHeight: v.height,
-    ..._.get(v.colors, p.color, { color: v.color, backgroundColor: v.backgroundColor }),
-    fontSize: pxToRem(14),
-    borderRadius: pxToRem(3),
-    padding: v.padding,
-    ...(p.image &&
-      (p.imagePosition === 'start'
-        ? { paddingLeft: v.startPaddingLeft }
-        : { paddingRight: v.endPaddingRight })),
-    ...(p.circular && {
-      borderRadius: v.circularRadius,
-    }),
-  }),
+  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const colors = _.get(v.colorScheme, p.color, {
+      foreground: v.color,
+      background: v.backgroundColor,
+    })
+
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      height: v.height,
+      lineHeight: v.height,
+      color: colors.foreground,
+      backgroundColor: colors.background,
+      fontSize: pxToRem(14),
+      borderRadius: pxToRem(3),
+      padding: v.padding,
+      ...(p.image &&
+        (p.imagePosition === 'start'
+          ? { paddingLeft: v.startPaddingLeft }
+          : { paddingRight: v.endPaddingRight })),
+      ...(p.circular && {
+        borderRadius: v.circularRadius,
+      }),
+    }
+  },
 
   image: ({ variables: v }): ICSSInJSStyle => ({
     height: v.height,
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 8eb93ab8fc..54a55d8553 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -1,11 +1,10 @@
-import { ColorValues, ColorScheme } from '../../../types'
-import { mapColorsToScheme } from '../../../../lib'
+import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types'
 import { pxToRem } from '../../utils'
 
-type LabelColorScheme = Pick<ColorScheme, 'color' | 'backgroundColor'>
+type LabelColorScheme = Pick<ColorScheme, 'foreground' | 'background'>
 
 export interface LabelVariables {
-  colors: ColorValues<LabelColorScheme>
+  colorScheme: ColorValues<LabelColorScheme>
   circularRadius: string
   padding: string
   color: string
@@ -16,14 +15,12 @@ export interface LabelVariables {
   iconColor: string
 }
 
-export default (siteVars: any): LabelVariables => {
+export default (siteVars: SiteVariablesPrepared): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
+  const colorScheme = siteVars.colorScheme
 
   return {
-    colors: mapColorsToScheme(siteVars, colorVariants => ({
-      color: colorVariants[50],
-      backgroundColor: colorVariants[500],
-    })),
+    colorScheme,
     color,
     backgroundColor: 'rgb(232, 232, 232)',
     circularRadius: pxToRem(9999),
diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts
index 2bc16e3e18..b7389bf624 100644
--- a/src/themes/teams/siteVariables.ts
+++ b/src/themes/teams/siteVariables.ts
@@ -9,7 +9,7 @@ export const htmlFontSize = '10px' // what 1rem represents
 //
 // COLORS
 //
-export { colors, contextualColors, emphasisColors, naturalColors } from './colors'
+export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
 export const black = colors.black
 export const gray02 = '#484644'
diff --git a/src/themes/types.ts b/src/themes/types.ts
index a4542ac67c..1d7ebbb0e8 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -74,7 +74,7 @@ export type EmphasisColors = Extendable<EmphasisColorsStrict, ColorVariants>
 /**
  * A type for extracting the color names.
  */
-type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict)
+export type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict)
 
 /**
  * A type for an extendable set of ColorNames properties of type T
@@ -99,9 +99,14 @@ export type ColorPalette = ExtendablePalette<
 /**
  * A type for the generic color scheme of a component based on CSS property names
  */
-export type ColorScheme = Required<
-  Pick<React.CSSProperties, 'color' | 'backgroundColor' | 'borderColor'> & { shadowColor: string }
->
+export type ColorScheme = {
+  foreground: string
+  background: string
+  border: string
+  shadow: string
+}
+
+export type ColorSchemeMapping = ColorValues<ColorScheme>
 
 // ========================================================
 // Props
@@ -124,6 +129,7 @@ export type State = ObjectOf<any>
 
 export interface SiteVariablesInput extends ObjectOf<any> {
   colors?: ColorPalette
+  colorScheme?: ColorSchemeMapping
   contextualColors?: ContextualColors
   emphasisColors?: EmphasisColors
   naturalColors?: NaturalColorsStrict
@@ -131,13 +137,7 @@ export interface SiteVariablesInput extends ObjectOf<any> {
   htmlFontSize?: string
 }
 
-export interface SiteVariablesPrepared extends ObjectOf<any> {
-  colors?: ColorPalette
-  contextualColors?: ContextualColors
-  emphasisColors?: EmphasisColors
-  naturalColors?: NaturalColorsStrict
-  brand?: string
-  htmlFontSize?: string
+export interface SiteVariablesPrepared extends SiteVariablesInput {
   fontSizes: ObjectOf<string>
 }
 

From 1f824e493b70c5e93a884ef7c41f41119927ed5d Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 21 Dec 2018 15:05:33 +0200
Subject: [PATCH 05/20] improved colors

---
 src/themes/base/colors.ts  | 2 +-
 src/themes/teams/colors.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index 2001f3e7bc..1ae8a44bc9 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -148,7 +148,7 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = {
   ...naturalColors,
 }
 
-const lightBackgroundColors = ['orange', 'yellow', 'postOrange']
+const lightBackgroundColors = ['teal', 'yellow']
 const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName)
 
 export const colors: ColorPalette = {
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index c14add0e0d..cf21ba80e3 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -155,7 +155,7 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = {
   ...naturalColors,
 }
 
-const lightBackgroundColors = ['orange', 'yellow', 'postOrange']
+const lightBackgroundColors = ['orange', 'yellow', 'lightGreen', 'postOrange']
 const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName)
 
 export const colors: ColorPalette = {

From c2d712c45d4141daa705ad1afbb5118a778543bc Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 21 Dec 2018 16:44:44 +0200
Subject: [PATCH 06/20] improved examples

---
 .../LabelExampleColor.shorthand.tsx           | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
index e116b452d8..cf5b146add 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx
@@ -1,19 +1,21 @@
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Label, ProviderConsumer } from '@stardust-ui/react'
+import { Label, ProviderConsumer, Grid } from '@stardust-ui/react'
 
 const LabelExampleColor = () => (
-  <ProviderConsumer
-    render={({ siteVariables: { colorScheme } }) =>
-      _.keys(colorScheme).map(color => (
-        <>
+  <Grid
+    columns="auto"
+    styles={{ justifyContent: 'left', justifyItems: 'left' }}
+    variables={{ gridGap: '10px' }}
+  >
+    <ProviderConsumer
+      render={({ siteVariables: { colorScheme } }) =>
+        _.keys(colorScheme).map(color => (
           <Label key={color} color={color} content={_.startCase(color)} />
-          <br />
-          <br />
-        </>
-      ))
-    }
-  />
+        ))
+      }
+    />
+  </Grid>
 )
 
 export default LabelExampleColor

From 28156e613816eab58f88f158ed2f0a8a67d858a7 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 21 Dec 2018 19:47:24 +0200
Subject: [PATCH 07/20] removed unused variable

---
 src/themes/teams/components/Label/labelVariables.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 54a55d8553..b4e516dd5e 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -17,10 +17,9 @@ export interface LabelVariables {
 
 export default (siteVars: SiteVariablesPrepared): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
-  const colorScheme = siteVars.colorScheme
 
   return {
-    colorScheme,
+    colorScheme: siteVars.colorScheme,
     color,
     backgroundColor: 'rgb(232, 232, 232)',
     circularRadius: pxToRem(9999),

From 8224fb84b20e21129ae084379705300c7641bd0f Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 21 Dec 2018 19:47:57 +0200
Subject: [PATCH 08/20] feat(menu): color prop

---
 .../Variations/MenuExampleColor.shorthand.tsx |  26 +++
 .../components/Menu/Variations/index.tsx      |   5 +
 src/components/Menu/Menu.tsx                  |   6 +-
 src/components/Menu/MenuItem.tsx              |   9 +-
 src/lib/colorUtils.ts                         |   5 +
 src/lib/index.ts                              |   2 +-
 src/themes/base/colors.ts                     |   3 +-
 src/themes/teams/colors.ts                    |   3 +-
 .../teams/components/Menu/menuItemStyles.ts   | 162 +++++++++++-------
 .../teams/components/Menu/menuStyles.ts       |  18 +-
 .../teams/components/Menu/menuVariables.ts    |   9 +-
 src/themes/types.ts                           |   1 +
 12 files changed, 168 insertions(+), 81 deletions(-)
 create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx

diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx
new file mode 100644
index 0000000000..bcbc15be6b
--- /dev/null
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Menu, ProviderConsumer, Grid } from '@stardust-ui/react'
+
+const MenuExampleColor = () => (
+  <Grid
+    columns="auto"
+    styles={{ justifyContent: 'left', justifyItems: 'left' }}
+    variables={{ gridGap: '10px' }}
+  >
+    <ProviderConsumer
+      render={({ siteVariables: { colorScheme } }) => (
+        <Menu
+          defaultActiveIndex={0}
+          items={_.keys(colorScheme).map(color => ({
+            key: color,
+            color,
+            content: _.startCase(color),
+          }))}
+        />
+      )}
+    />
+  </Grid>
+)
+
+export default MenuExampleColor
diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx
index 32d2f205fe..5ad5f29627 100644
--- a/docs/src/examples/components/Menu/Variations/index.tsx
+++ b/docs/src/examples/components/Menu/Variations/index.tsx
@@ -114,6 +114,11 @@ const Variations = () => (
       description="A menu with Toolbar accessibility behavior."
       examplePath="components/Menu/Variations/MenuExampleToolbar"
     />
+    <ComponentExample
+      title="Colored Menu"
+      description="A Menu can have different colors."
+      examplePath="components/Menu/Variations/MenuExampleColor"
+    />
   </ExampleSection>
 )
 
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 03c1dd5d3f..729883e6fa 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -10,6 +10,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 import MenuItem from './MenuItem'
 import { menuBehavior } from '../../lib/accessibility'
@@ -18,7 +19,7 @@ import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentVariablesObject } from '../../themes/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
 
-export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
+export interface MenuProps extends UIComponentProps, ChildrenComponentProps, ColorComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuBehavior
@@ -85,6 +86,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   static propTypes = {
     ...commonPropTypes.createCommon({
       content: false,
+      color: true,
     }),
     accessibility: PropTypes.func,
     activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -131,6 +133,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
   renderItems = (variables: ComponentVariablesObject) => {
     const {
+      color,
       iconOnly,
       items,
       pills,
@@ -148,6 +151,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
         (typeof activeIndex === 'string' ? parseInt(activeIndex, 10) : activeIndex) === index
       return MenuItem.create(item, {
         defaultProps: {
+          color,
           iconOnly,
           pills,
           pointing,
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 567432c6a3..c2dc1370d3 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -15,6 +15,7 @@ import {
   commonPropTypes,
   isFromKeyboard,
   EventStack,
+  ColorComponentProps,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from '../Menu/Menu'
@@ -28,7 +29,8 @@ import Ref from '../Ref/Ref'
 export interface MenuItemProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {
+    ContentComponentProps,
+    ColorComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuItemBehavior
@@ -124,7 +126,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   static create: Function
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: true }),
     accessibility: PropTypes.func,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -172,7 +174,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   }
 
   renderComponent({ ElementType, classes, accessibility, rest, styles }) {
-    const { children, content, icon, wrapper, menu, primary, secondary, active } = this.props
+    const { children, color, content, icon, wrapper, menu, primary, secondary, active } = this.props
 
     const { menuOpen } = this.state
 
@@ -202,6 +204,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
           {Menu.create(menu, {
             defaultProps: {
               accessibility: submenuBehavior,
+              color,
               vertical: true,
               primary,
               secondary,
diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index 471b27aa54..3fe9aa5be4 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -9,3 +9,8 @@ export const mapColorsToScheme = <T>(
     { ...siteVars.emphasisColors, ...siteVars.naturalColors },
     typeof mapper === 'number' ? String(mapper) : (mapper as any),
   ) as ColorValues<T>
+
+export const getColorSchemeFn = <T>(colorProp: string, colorScheme: ColorValues<T>) => {
+  const colors = _.get(colorScheme, colorProp)
+  return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor)
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 7ad00ecc6e..bedfe7938f 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -3,7 +3,7 @@ import * as commonPropTypes from './commonPropTypes'
 
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
-export { mapColorsToScheme } from './colorUtils'
+export { mapColorsToScheme, getColorSchemeFn } from './colorUtils'
 export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'
diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index 1ae8a44bc9..540253523c 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -166,9 +166,10 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
 
     return {
       foreground,
-      background: colorVariants[500],
       border: foreground,
       shadow: foreground,
+      background: colorVariants[500],
+      hover: colorVariants[300],
     }
   },
 )
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index cf21ba80e3..338927ff6b 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -174,9 +174,10 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
 
     return {
       foreground,
-      background: colorVariants[500],
       border: foreground,
       shadow: foreground,
+      background: colorVariants[500],
+      hover: colorVariants[300],
     }
   },
 )
diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts
index 36ef09fbf5..b0a40edfc7 100644
--- a/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -1,9 +1,13 @@
+import * as _ from 'lodash'
+
+import { getColorSchemeFn } from '../../../../lib'
 import { pxToRem } from '../../utils'
 import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { MenuVariables } from './menuVariables'
+import { MenuVariables, MenuColorScheme } from './menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
 
 type MenuItemPropsAndState = MenuItemProps & MenuItemState
+type GetColorFn = (area: keyof MenuColorScheme, defaultColor: string) => string
 
 const underlinedItem = (color: string): ICSSInJSStyle => ({
   paddingBottom: 0,
@@ -12,44 +16,47 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({
 })
 
 const getActionStyles = ({
-  props: { primary, underlined, iconOnly, isFromKeyboard },
+  props: { primary, underlined, iconOnly },
   variables: v,
-  color,
+  colorVariable,
+  getColor,
 }: {
   props: MenuItemPropsAndState
   variables: MenuVariables
-  color: string
+  colorVariable: string
+  getColor: GetColorFn
 }): ICSSInJSStyle =>
   underlined || iconOnly
     ? {
-        color,
+        color: colorVariable,
         background: v.backgroundColor,
       }
-    : primary
-    ? {
-        color: v.primaryActiveColor,
-        background: v.primaryActiveBackgroundColor,
-      }
     : {
-        color,
-        background: v.activeBackgroundColor,
+        color: getColor('foreground', primary ? v.primaryActiveColor : colorVariable),
+        background: getColor(
+          'background',
+          primary ? v.primaryActiveBackgroundColor : v.activeBackgroundColor,
+        ),
       }
 
 const getFocusedStyles = ({
   props,
   variables: v,
-  color,
+  colorVariable,
+  getColor,
 }: {
   props: MenuItemPropsAndState
   variables: MenuVariables
-  color: string
+  colorVariable: string
+  getColor: GetColorFn
 }): ICSSInJSStyle => {
   const { primary, underlined, iconOnly, isFromKeyboard, active } = props
   if (active && !underlined) return {}
-  return {
-    ...((underlined && !isFromKeyboard) || iconOnly
+
+  const { color, background } =
+    (underlined && !isFromKeyboard) || iconOnly
       ? {
-          color,
+          color: colorVariable,
           background: v.backgroundColor,
         }
       : primary
@@ -58,17 +65,19 @@ const getFocusedStyles = ({
           background: v.primaryFocusedBackgroundColor,
         }
       : {
-          color,
+          color: colorVariable,
           background: v.focusedBackgroundColor,
-        }),
-  }
+        }
+
+  return { color: getColor('foreground', color), background: getColor('hover', background) }
 }
 
 const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { iconOnly, pointing, pills, primary, underlined, vertical } = props
+  const { color, iconOnly, pointing, pills, primary, underlined, vertical } = props
+  const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
 
   return (
     !pills &&
@@ -80,8 +89,8 @@ const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVaria
         content: '""',
         top: 0,
         right: 0,
+        backgroundColor: getColor('background', primary ? v.primaryBorderColor : v.borderColor),
         ...(vertical ? { width: '100%', height: '1px' } : { width: '1px', height: '100%' }),
-        ...(primary ? { background: v.primaryBorderColor } : { background: v.borderColor }),
       },
     }
   )
@@ -91,34 +100,33 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { pointing, primary } = props
-
-  let backgroundColor: string
-  let borderColor: string
-  let top: string
-  let borders: ICSSInJSStyle
-
-  if (primary) {
-    backgroundColor = v.primaryActiveBackgroundColor
-    borderColor = v.primaryBorderColor
-  } else {
-    backgroundColor = v.activeBackgroundColor
-    borderColor = v.borderColor
-  }
+  const { color, pointing, primary } = props
+  const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
+  const backgroundColor = getColor(
+    'background',
+    primary ? v.primaryActiveBackgroundColor : v.activeBackgroundColor,
+  )
+  const borderValue = `1px solid ${getColor(
+    'background',
+    primary ? v.primaryBorderColor : v.borderColor,
+  )}`
 
-  if (pointing === 'start') {
-    borders = {
-      borderTop: `1px solid ${borderColor}`,
-      borderLeft: `1px solid ${borderColor}`,
-    }
-    top = '-1px' // 1px for the border
-  } else {
-    borders = {
-      borderBottom: `1px solid ${borderColor}`,
-      borderRight: `1px solid ${borderColor}`,
-    }
-    top = '100%'
-  }
+  const { top, borders }: { top: string; borders: ICSSInJSStyle } =
+    pointing === 'start'
+      ? {
+          top: '-1px', // 1px for the border
+          borders: {
+            borderTop: borderValue,
+            borderLeft: borderValue,
+          },
+        }
+      : {
+          top: '100%',
+          borders: {
+            borderBottom: borderValue,
+            borderRight: borderValue,
+          },
+        }
 
   return {
     '::after': {
@@ -144,6 +152,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
   wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
     const {
       active,
+      color,
       iconOnly,
       isFromKeyboard,
       pills,
@@ -153,6 +162,8 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       vertical,
     } = props
 
+    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
+
     return {
       color: v.color,
       background: v.backgroundColor,
@@ -201,21 +212,32 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
       // active styles
       ...(active && {
-        ...getActionStyles({ props, variables: v, color: v.color }),
+        ...getActionStyles({ props, variables: v, colorVariable: v.color, getColor }),
 
         ...(pointing &&
           (vertical
             ? pointing === 'end'
-              ? { borderRight: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
-              : { borderLeft: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
+              ? {
+                  borderRight: `${pxToRem(3)} solid ${getColor(
+                    'background',
+                    v.primaryActiveBorderColor,
+                  )}`,
+                }
+              : {
+                  borderLeft: `${pxToRem(3)} solid ${getColor(
+                    'background',
+                    v.primaryActiveBorderColor,
+                  )}`,
+                }
             : pointingBeak({ props, variables: v, theme }))),
       }),
 
       // focus styles
-      ...(isFromKeyboard && getFocusedStyles({ props, variables: v, color: v.activeColor })),
+      ...(isFromKeyboard &&
+        getFocusedStyles({ props, variables: v, colorVariable: v.activeColor, getColor })),
 
       // hover styles
-      ':hover': getFocusedStyles({ props, variables: v, color: v.activeColor }),
+      ':hover': getFocusedStyles({ props, variables: v, colorVariable: v.activeColor, getColor }),
 
       ':first-child': {
         ...(!pills &&
@@ -251,7 +273,17 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
   },
 
   root: ({ props, variables: v }): ICSSInJSStyle => {
-    const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props
+    const {
+      active,
+      color,
+      iconOnly,
+      isFromKeyboard,
+      pointing,
+      primary,
+      underlined,
+      vertical,
+    } = props
+    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
 
     return {
       color: 'inherit',
@@ -277,16 +309,16 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       ...(active &&
         (primary
           ? {
-              ...(iconOnly && { color: v.primaryActiveBorderColor }),
+              ...(iconOnly && { color: getColor('foreground', v.primaryActiveBorderColor) }),
 
               ...(underlined && {
-                color: v.primaryActiveBorderColor,
-                ...underlinedItem(v.primaryActiveBorderColor),
+                color: getColor('foreground', v.primaryActiveBorderColor),
+                ...underlinedItem(getColor('border', v.primaryActiveBorderColor)),
               }),
             }
           : underlined && {
               fontWeight: 700,
-              ...underlinedItem(v.activeColor),
+              ...underlinedItem(getColor('border', v.activeColor)),
             })),
 
       // focus styles
@@ -294,24 +326,24 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         ...(primary
           ? {
               ...(iconOnly && {
-                color: v.primaryActiveBorderColor,
-                border: `1px solid ${v.primaryActiveBorderColor}`,
+                color: getColor('foreground', v.primaryActiveBorderColor),
+                border: `1px solid ${getColor('border', v.primaryActiveBorderColor)}`,
                 borderRadius: v.circularRadius,
               }),
 
-              ...(underlined && { color: v.primaryActiveColor }),
+              ...(underlined && { color: getColor('foreground', v.primaryActiveColor) }),
 
-              ...(underlined && active && underlinedItem(v.primaryActiveColor)),
+              ...(underlined && active && underlinedItem(getColor('border', v.primaryActiveColor))),
             }
           : {
               ...(iconOnly && {
-                border: `1px solid ${v.activeColor}`,
+                border: `1px solid ${getColor('border', v.activeColor)}`,
                 borderRadius: v.circularRadius,
               }),
 
               ...(underlined && { fontWeight: 700 }),
 
-              ...(underlined && active && underlinedItem(v.activeColor)),
+              ...(underlined && active && underlinedItem(getColor('border', v.activeColor))),
             }),
       }),
 
diff --git a/src/themes/teams/components/Menu/menuStyles.ts b/src/themes/teams/components/Menu/menuStyles.ts
index d3fc40d934..fa143437cd 100644
--- a/src/themes/teams/components/Menu/menuStyles.ts
+++ b/src/themes/teams/components/Menu/menuStyles.ts
@@ -1,7 +1,10 @@
+import * as _ from 'lodash'
+
+import { getColorSchemeFn } from '../../../../lib'
 import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuProps, MenuState } from '../../../../components/Menu/Menu'
-import { MenuVariables } from './menuVariables'
+import { MenuVariables, MenuColorScheme } from './menuVariables'
 
 type MenuPropsAndState = MenuProps & MenuState
 
@@ -10,8 +13,10 @@ const solidBorder = (color: string) => ({
 })
 
 export default {
-  root: ({ props, variables }): ICSSInJSStyle => {
-    const { iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
+  root: ({ props, variables: v }): ICSSInJSStyle => {
+    const { color, iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
+    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
+
     return {
       display: 'flex',
       ...(iconOnly && { alignItems: 'center' }),
@@ -27,14 +32,11 @@ export default {
         !iconOnly &&
         !(pointing && vertical) &&
         !underlined && {
-          ...solidBorder(variables.borderColor),
-          ...(primary && {
-            ...solidBorder(variables.primaryBorderColor),
-          }),
+          ...solidBorder(getColor('background', primary ? v.primaryBorderColor : v.borderColor)),
           borderRadius: pxToRem(4),
         }),
       ...(underlined && {
-        borderBottom: `2px solid ${variables.primaryUnderlinedBorderColor}`,
+        borderBottom: `2px solid ${getColor('background', v.primaryUnderlinedBorderColor)}`,
       }),
       minHeight: pxToRem(24),
       margin: 0,
diff --git a/src/themes/teams/components/Menu/menuVariables.ts b/src/themes/teams/components/Menu/menuVariables.ts
index 3558f204b1..bf0ba7613b 100644
--- a/src/themes/teams/components/Menu/menuVariables.ts
+++ b/src/themes/teams/components/Menu/menuVariables.ts
@@ -1,6 +1,11 @@
+import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types'
 import { pxToRem } from '../../utils'
 
+export type MenuColorScheme = Pick<ColorScheme, 'foreground' | 'background' | 'border' | 'hover'>
+
 export interface MenuVariables {
+  colorScheme: ColorValues<MenuColorScheme>
+
   color: string
   backgroundColor: string
 
@@ -27,8 +32,10 @@ export interface MenuVariables {
   submenuIndicatorRotationAngle: number
 }
 
-export default (siteVars: any): MenuVariables => {
+export default (siteVars: SiteVariablesPrepared): MenuVariables => {
   return {
+    colorScheme: siteVars.colorScheme,
+
     color: siteVars.gray02,
     backgroundColor: siteVars.white,
 
diff --git a/src/themes/types.ts b/src/themes/types.ts
index 1d7ebbb0e8..1a9cdbb3d1 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -104,6 +104,7 @@ export type ColorScheme = {
   background: string
   border: string
   shadow: string
+  hover: string
 }
 
 export type ColorSchemeMapping = ColorValues<ColorScheme>

From 2e9b8c79c32c7d33dc4e3d8e09b86c1cfd1c6dd9 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 21 Dec 2018 19:55:03 +0200
Subject: [PATCH 09/20] fixed merge

---
 src/themes/base/siteVariables.ts    | 2 +-
 src/themes/default/siteVariables.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 src/themes/default/siteVariables.ts

diff --git a/src/themes/base/siteVariables.ts b/src/themes/base/siteVariables.ts
index 45a44de555..81ced90456 100644
--- a/src/themes/base/siteVariables.ts
+++ b/src/themes/base/siteVariables.ts
@@ -2,7 +2,7 @@
 // COLORS
 //
 
-export { colors, contextualColors, emphasisColors, naturalColors } from './colors'
+export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
 //
 // FONT SIZES
diff --git a/src/themes/default/siteVariables.ts b/src/themes/default/siteVariables.ts
deleted file mode 100644
index f903444d1a..0000000000
--- a/src/themes/default/siteVariables.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'

From 472c36359683880e37ea76ca510fe86718aac0a6 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 10 Jan 2019 12:19:57 +0100
Subject: [PATCH 10/20] -reverted menu's changes

---
 .../Variations/MenuExampleColor.shorthand.tsx |  26 ---
 .../components/Menu/Variations/index.tsx      |   5 -
 src/components/Menu/Menu.tsx                  |   6 +-
 src/components/Menu/MenuItem.tsx              |   9 +-
 .../teams/components/Menu/menuItemStyles.ts   | 162 +++++++-----------
 .../teams/components/Menu/menuStyles.ts       |  18 +-
 6 files changed, 77 insertions(+), 149 deletions(-)
 delete mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx

diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx
deleted file mode 100644
index bcbc15be6b..0000000000
--- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-import * as _ from 'lodash'
-import { Menu, ProviderConsumer, Grid } from '@stardust-ui/react'
-
-const MenuExampleColor = () => (
-  <Grid
-    columns="auto"
-    styles={{ justifyContent: 'left', justifyItems: 'left' }}
-    variables={{ gridGap: '10px' }}
-  >
-    <ProviderConsumer
-      render={({ siteVariables: { colorScheme } }) => (
-        <Menu
-          defaultActiveIndex={0}
-          items={_.keys(colorScheme).map(color => ({
-            key: color,
-            color,
-            content: _.startCase(color),
-          }))}
-        />
-      )}
-    />
-  </Grid>
-)
-
-export default MenuExampleColor
diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx
index 5ad5f29627..32d2f205fe 100644
--- a/docs/src/examples/components/Menu/Variations/index.tsx
+++ b/docs/src/examples/components/Menu/Variations/index.tsx
@@ -114,11 +114,6 @@ const Variations = () => (
       description="A menu with Toolbar accessibility behavior."
       examplePath="components/Menu/Variations/MenuExampleToolbar"
     />
-    <ComponentExample
-      title="Colored Menu"
-      description="A Menu can have different colors."
-      examplePath="components/Menu/Variations/MenuExampleColor"
-    />
   </ExampleSection>
 )
 
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 32d1e47ad9..f97a0301aa 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -10,7 +10,6 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
-  ColorComponentProps,
   getKindProp,
 } from '../../lib'
 import MenuItem from './MenuItem'
@@ -23,7 +22,7 @@ import MenuDivider from './MenuDivider'
 
 export type MenuShorthandKinds = 'divider' | 'item'
 
-export interface MenuProps extends UIComponentProps, ChildrenComponentProps, ColorComponentProps {
+export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuBehavior
@@ -90,7 +89,6 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   static propTypes = {
     ...commonPropTypes.createCommon({
       content: false,
-      color: true,
     }),
     accessibility: PropTypes.func,
     activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -138,7 +136,6 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
   renderItems = (variables: ComponentVariablesObject) => {
     const {
-      color,
       iconOnly,
       items,
       pills,
@@ -169,7 +166,6 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
       return MenuItem.create(item, {
         defaultProps: {
-          color,
           iconOnly,
           pills,
           pointing,
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 4283cd2125..e8a6e757b8 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -15,7 +15,6 @@ import {
   commonPropTypes,
   isFromKeyboard,
   EventStack,
-  ColorComponentProps,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from '../Menu/Menu'
@@ -29,8 +28,7 @@ import Ref from '../Ref/Ref'
 export interface MenuItemProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps,
-    ColorComponentProps {
+    ContentComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuItemBehavior
@@ -125,7 +123,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   static create: Function
 
   static propTypes = {
-    ...commonPropTypes.createCommon({ color: true }),
+    ...commonPropTypes.createCommon(),
     accessibility: PropTypes.func,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -174,7 +172,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   }
 
   renderComponent({ ElementType, classes, accessibility, rest, styles }) {
-    const { children, color, content, icon, wrapper, menu, primary, secondary, active } = this.props
+    const { children, content, icon, wrapper, menu, primary, secondary, active } = this.props
 
     const { menuOpen } = this.state
 
@@ -204,7 +202,6 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
           {Menu.create(menu, {
             defaultProps: {
               accessibility: submenuBehavior,
-              color,
               vertical: true,
               primary,
               secondary,
diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts
index 8db1150368..34c6aa9950 100644
--- a/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -1,13 +1,9 @@
-import * as _ from 'lodash'
-
-import { getColorSchemeFn } from '../../../../lib'
 import { pxToRem, getSideArrow } from '../../utils'
 import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { MenuVariables, MenuColorScheme } from './menuVariables'
+import { MenuVariables } from './menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
 
 type MenuItemPropsAndState = MenuItemProps & MenuItemState
-type GetColorFn = (area: keyof MenuColorScheme, defaultColor: string) => string
 
 const underlinedItem = (color: string): ICSSInJSStyle => ({
   paddingBottom: 0,
@@ -16,47 +12,44 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({
 })
 
 const getActionStyles = ({
-  props: { primary, underlined, iconOnly },
+  props: { primary, underlined, iconOnly, isFromKeyboard },
   variables: v,
-  colorVariable,
-  getColor,
+  color,
 }: {
   props: MenuItemPropsAndState
   variables: MenuVariables
-  colorVariable: string
-  getColor: GetColorFn
+  color: string
 }): ICSSInJSStyle =>
   underlined || iconOnly
     ? {
-        color: colorVariable,
+        color,
         background: v.backgroundColor,
       }
+    : primary
+    ? {
+        color: v.primaryActiveColor,
+        background: v.primaryActiveBackgroundColor,
+      }
     : {
-        color: getColor('foreground', primary ? v.primaryActiveColor : colorVariable),
-        background: getColor(
-          'background',
-          primary ? v.primaryActiveBackgroundColor : v.activeBackgroundColor,
-        ),
+        color,
+        background: v.activeBackgroundColor,
       }
 
 const getFocusedStyles = ({
   props,
   variables: v,
-  colorVariable,
-  getColor,
+  color,
 }: {
   props: MenuItemPropsAndState
   variables: MenuVariables
-  colorVariable: string
-  getColor: GetColorFn
+  color: string
 }): ICSSInJSStyle => {
   const { primary, underlined, iconOnly, isFromKeyboard, active } = props
   if (active && !underlined) return {}
-
-  const { color, background } =
-    (underlined && !isFromKeyboard) || iconOnly
+  return {
+    ...((underlined && !isFromKeyboard) || iconOnly
       ? {
-          color: colorVariable,
+          color,
           background: v.backgroundColor,
         }
       : primary
@@ -65,19 +58,17 @@ const getFocusedStyles = ({
           background: v.primaryFocusedBackgroundColor,
         }
       : {
-          color: colorVariable,
+          color,
           background: v.focusedBackgroundColor,
-        }
-
-  return { color: getColor('foreground', color), background: getColor('hover', background) }
+        }),
+  }
 }
 
 const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { color, iconOnly, pointing, pills, primary, underlined, vertical } = props
-  const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
+  const { iconOnly, pointing, pills, primary, underlined, vertical } = props
 
   return (
     !pills &&
@@ -89,8 +80,8 @@ const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVaria
         content: '""',
         top: 0,
         right: 0,
-        backgroundColor: getColor('background', primary ? v.primaryBorderColor : v.borderColor),
         ...(vertical ? { width: '100%', height: '1px' } : { width: '1px', height: '100%' }),
+        ...(primary ? { background: v.primaryBorderColor } : { background: v.borderColor }),
       },
     }
   )
@@ -100,33 +91,34 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { color, pointing, primary } = props
-  const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
-  const backgroundColor = getColor(
-    'background',
-    primary ? v.primaryActiveBackgroundColor : v.activeBackgroundColor,
-  )
-  const borderValue = `1px solid ${getColor(
-    'background',
-    primary ? v.primaryBorderColor : v.borderColor,
-  )}`
+  const { pointing, primary } = props
+
+  let backgroundColor: string
+  let borderColor: string
+  let top: string
+  let borders: ICSSInJSStyle
+
+  if (primary) {
+    backgroundColor = v.primaryActiveBackgroundColor
+    borderColor = v.primaryBorderColor
+  } else {
+    backgroundColor = v.activeBackgroundColor
+    borderColor = v.borderColor
+  }
 
-  const { top, borders }: { top: string; borders: ICSSInJSStyle } =
-    pointing === 'start'
-      ? {
-          top: '-1px', // 1px for the border
-          borders: {
-            borderTop: borderValue,
-            borderLeft: borderValue,
-          },
-        }
-      : {
-          top: '100%',
-          borders: {
-            borderBottom: borderValue,
-            borderRight: borderValue,
-          },
-        }
+  if (pointing === 'start') {
+    borders = {
+      borderTop: `1px solid ${borderColor}`,
+      borderLeft: `1px solid ${borderColor}`,
+    }
+    top = '-1px' // 1px for the border
+  } else {
+    borders = {
+      borderBottom: `1px solid ${borderColor}`,
+      borderRight: `1px solid ${borderColor}`,
+    }
+    top = '100%'
+  }
 
   return {
     '::after': {
@@ -152,7 +144,6 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
   wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
     const {
       active,
-      color,
       iconOnly,
       isFromKeyboard,
       pills,
@@ -162,8 +153,6 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       vertical,
     } = props
 
-    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
-
     return {
       color: v.color,
       background: v.backgroundColor,
@@ -212,32 +201,21 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
       // active styles
       ...(active && {
-        ...getActionStyles({ props, variables: v, colorVariable: v.color, getColor }),
+        ...getActionStyles({ props, variables: v, color: v.color }),
 
         ...(pointing &&
           (vertical
             ? pointing === 'end'
-              ? {
-                  borderRight: `${pxToRem(3)} solid ${getColor(
-                    'background',
-                    v.primaryActiveBorderColor,
-                  )}`,
-                }
-              : {
-                  borderLeft: `${pxToRem(3)} solid ${getColor(
-                    'background',
-                    v.primaryActiveBorderColor,
-                  )}`,
-                }
+              ? { borderRight: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
+              : { borderLeft: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
             : pointingBeak({ props, variables: v, theme }))),
       }),
 
       // focus styles
-      ...(isFromKeyboard &&
-        getFocusedStyles({ props, variables: v, colorVariable: v.activeColor, getColor })),
+      ...(isFromKeyboard && getFocusedStyles({ props, variables: v, color: v.activeColor })),
 
       // hover styles
-      ':hover': getFocusedStyles({ props, variables: v, colorVariable: v.activeColor, getColor }),
+      ':hover': getFocusedStyles({ props, variables: v, color: v.activeColor }),
 
       ':first-child': {
         ...(!pills &&
@@ -273,17 +251,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
   },
 
   root: ({ props, variables: v, theme }): ICSSInJSStyle => {
-    const {
-      active,
-      color,
-      iconOnly,
-      isFromKeyboard,
-      pointing,
-      primary,
-      underlined,
-      vertical,
-    } = props
-    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
+    const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props
     const { arrowDown } = theme.siteVariables
     const sideArrow = getSideArrow(theme)
 
@@ -311,16 +279,16 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       ...(active &&
         (primary
           ? {
-              ...(iconOnly && { color: getColor('foreground', v.primaryActiveBorderColor) }),
+              ...(iconOnly && { color: v.primaryActiveBorderColor }),
 
               ...(underlined && {
-                color: getColor('foreground', v.primaryActiveBorderColor),
-                ...underlinedItem(getColor('border', v.primaryActiveBorderColor)),
+                color: v.primaryActiveBorderColor,
+                ...underlinedItem(v.primaryActiveBorderColor),
               }),
             }
           : underlined && {
               fontWeight: 700,
-              ...underlinedItem(getColor('border', v.activeColor)),
+              ...underlinedItem(v.activeColor),
             })),
 
       // focus styles
@@ -328,24 +296,24 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         ...(primary
           ? {
               ...(iconOnly && {
-                color: getColor('foreground', v.primaryActiveBorderColor),
-                border: `1px solid ${getColor('border', v.primaryActiveBorderColor)}`,
+                color: v.primaryActiveBorderColor,
+                border: `1px solid ${v.primaryActiveBorderColor}`,
                 borderRadius: v.circularRadius,
               }),
 
-              ...(underlined && { color: getColor('foreground', v.primaryActiveColor) }),
+              ...(underlined && { color: v.primaryActiveColor }),
 
-              ...(underlined && active && underlinedItem(getColor('border', v.primaryActiveColor))),
+              ...(underlined && active && underlinedItem(v.primaryActiveColor)),
             }
           : {
               ...(iconOnly && {
-                border: `1px solid ${getColor('border', v.activeColor)}`,
+                border: `1px solid ${v.activeColor}`,
                 borderRadius: v.circularRadius,
               }),
 
               ...(underlined && { fontWeight: 700 }),
 
-              ...(underlined && active && underlinedItem(getColor('border', v.activeColor))),
+              ...(underlined && active && underlinedItem(v.activeColor)),
             }),
       }),
 
diff --git a/src/themes/teams/components/Menu/menuStyles.ts b/src/themes/teams/components/Menu/menuStyles.ts
index fa143437cd..d3fc40d934 100644
--- a/src/themes/teams/components/Menu/menuStyles.ts
+++ b/src/themes/teams/components/Menu/menuStyles.ts
@@ -1,10 +1,7 @@
-import * as _ from 'lodash'
-
-import { getColorSchemeFn } from '../../../../lib'
 import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuProps, MenuState } from '../../../../components/Menu/Menu'
-import { MenuVariables, MenuColorScheme } from './menuVariables'
+import { MenuVariables } from './menuVariables'
 
 type MenuPropsAndState = MenuProps & MenuState
 
@@ -13,10 +10,8 @@ const solidBorder = (color: string) => ({
 })
 
 export default {
-  root: ({ props, variables: v }): ICSSInJSStyle => {
-    const { color, iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
-    const getColor = getColorSchemeFn<MenuColorScheme>(color, v.colorScheme)
-
+  root: ({ props, variables }): ICSSInJSStyle => {
+    const { iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
     return {
       display: 'flex',
       ...(iconOnly && { alignItems: 'center' }),
@@ -32,11 +27,14 @@ export default {
         !iconOnly &&
         !(pointing && vertical) &&
         !underlined && {
-          ...solidBorder(getColor('background', primary ? v.primaryBorderColor : v.borderColor)),
+          ...solidBorder(variables.borderColor),
+          ...(primary && {
+            ...solidBorder(variables.primaryBorderColor),
+          }),
           borderRadius: pxToRem(4),
         }),
       ...(underlined && {
-        borderBottom: `2px solid ${getColor('background', v.primaryUnderlinedBorderColor)}`,
+        borderBottom: `2px solid ${variables.primaryUnderlinedBorderColor}`,
       }),
       minHeight: pxToRem(24),
       margin: 0,

From 77e5562b05a9dcc58737eff3752b8e16daad534c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 10 Jan 2019 12:25:24 +0100
Subject: [PATCH 11/20] -reverted menu variables

---
 CHANGELOG.md                                      | 2 +-
 src/themes/teams/components/Menu/menuVariables.ts | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb8b45314d..9c9d4b42d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,7 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
 - Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
 - Add `MenuDivider` component and `kind` prop to the `items` inside of the `Menu` for creating different components @mnajdova ([#682](https://github.com/stardust-ui/react/pull/682))
-- Add `color` prop to `Label` and `Menu` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
+- Add `color` prop to `Label` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
 
 ### Fixes
 - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))
diff --git a/src/themes/teams/components/Menu/menuVariables.ts b/src/themes/teams/components/Menu/menuVariables.ts
index d85369e716..024cf62023 100644
--- a/src/themes/teams/components/Menu/menuVariables.ts
+++ b/src/themes/teams/components/Menu/menuVariables.ts
@@ -1,11 +1,6 @@
-import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types'
 import { pxToRem } from '../../utils'
 
-export type MenuColorScheme = Pick<ColorScheme, 'foreground' | 'background' | 'border' | 'hover'>
-
 export interface MenuVariables {
-  colorScheme: ColorValues<MenuColorScheme>
-
   color: string
   backgroundColor: string
 
@@ -29,10 +24,8 @@ export interface MenuVariables {
   lineHeightBase: string
 }
 
-export default (siteVars: SiteVariablesPrepared): MenuVariables => {
+export default (siteVars: any): MenuVariables => {
   return {
-    colorScheme: siteVars.colorScheme,
-
     color: siteVars.gray02,
     backgroundColor: siteVars.white,
 

From cb731e24e7be5f3ff5a2649b8b7786e1b09d7aa9 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 10 Jan 2019 18:26:36 +0100
Subject: [PATCH 12/20] wip -making the color prop obj -adding default colors
 to the color scheme

---
 src/components/Label/Label.tsx                |  8 ++--
 src/lib/commonPropInterfaces.ts               | 39 +++++++++++++------
 src/themes/teams/colors.ts                    | 14 +++++--
 .../teams/components/Label/labelStyles.ts     | 14 +++++--
 .../teams/components/Label/labelVariables.ts  |  9 +++--
 src/themes/types.ts                           |  2 +-
 6 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 84a165981c..bef478167e 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -11,7 +11,6 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
-  ColorComponentProps,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
@@ -19,12 +18,13 @@ import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
+import { ComplexColorComponentProps } from '../../lib/commonPropInterfaces'
 
 export interface LabelProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ContentComponentProps,
-    ColorComponentProps {
+    ComplexColorComponentProps {
   accessibility?: Accessibility
 
   /** A Label can be circular. */
@@ -57,13 +57,15 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
   static className = 'ui-label'
 
   static propTypes = {
-    ...commonPropTypes.createCommon({ color: true }),
+    ...commonPropTypes.createCommon(),
     circular: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
     image: customPropTypes.itemShorthand,
     imagePosition: PropTypes.oneOf(['start', 'end']),
     fluid: PropTypes.bool,
+    // TODO: type this one correctly
+    color: PropTypes.any,
   }
 
   static defaultProps = {
diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts
index df04272e05..7b769e4c39 100644
--- a/src/lib/commonPropInterfaces.ts
+++ b/src/lib/commonPropInterfaces.ts
@@ -25,21 +25,36 @@ export interface UIComponentProps<P = any, V = any>
   className?: string
 }
 
+export type ColorValue =
+  | 'primary'
+  | 'secondary'
+  | 'blue'
+  | 'green'
+  | 'grey'
+  | 'orange'
+  | 'pink'
+  | 'purple'
+  | 'teal'
+  | 'red'
+  | 'yellow'
+  | string
+
 export interface ColorComponentProps {
   /** A component can have a color. */
+  color?: ColorValue
+}
+
+export interface ComplexColorComponentProps {
+  /** A component can have color defined for different parts. */
   color?:
-    | 'primary'
-    | 'secondary'
-    | 'blue'
-    | 'green'
-    | 'grey'
-    | 'orange'
-    | 'pink'
-    | 'purple'
-    | 'teal'
-    | 'red'
-    | 'yellow'
-    | string
+    | {
+        foreground?: ColorValue
+        background?: ColorValue
+        border?: ColorValue
+        shadow?: ColorValue
+        hover?: ColorValue
+      }
+    | ColorValue
 }
 
 export interface ContentComponentProps<TContent = React.ReactNode> {
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index 338927ff6b..7ca32ba3c9 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -167,9 +167,8 @@ export const colors: ColorPalette = {
   white: naturalColors.grey[50],
 }
 
-export const colorScheme: ColorSchemeMapping = _.mapValues(
-  emphasisAndNaturalColors,
-  (colorVariants, colorName) => {
+export const colorScheme: ColorSchemeMapping = {
+  ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => {
     const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
 
     return {
@@ -179,5 +178,12 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
       background: colorVariants[500],
       hover: colorVariants[300],
     }
+  }),
+  default: {
+    foreground: colors.grey[600],
+    border: colors.grey[600],
+    shadow: colors.grey[600],
+    background: colors.grey[100],
+    hover: colors.grey[300],
   },
-)
+}
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index f2038e0c3f..b06c5004ed 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -7,10 +7,16 @@ import { LabelVariables } from './labelVariables'
 
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const colors = _.get(v.colorScheme, p.color, {
-      foreground: v.color,
-      background: v.backgroundColor,
-    })
+    const colorsComponentVariables = {
+      foreground: v.foreground,
+      background: v.background,
+    }
+    const colors = _.isObject(p.color)
+      ? { ...v.colorScheme.default, ...colorsComponentVariables, ...(p.color as object) }
+      : _.get(v.colorScheme, p.color as string, {
+          ...v.colorScheme.default,
+          ...colorsComponentVariables,
+        })
 
     return {
       display: 'inline-flex',
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index b4e516dd5e..b3258c2d9e 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -7,8 +7,8 @@ export interface LabelVariables {
   colorScheme: ColorValues<LabelColorScheme>
   circularRadius: string
   padding: string
-  color: string
-  backgroundColor: string
+  foreground: string
+  background: string
   startPaddingLeft: string
   endPaddingRight: string
   height: string
@@ -20,8 +20,9 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => {
 
   return {
     colorScheme: siteVars.colorScheme,
-    color,
-    backgroundColor: 'rgb(232, 232, 232)',
+    // TODO: see if we can get rid of this, or define them in different why
+    foreground: color,
+    background: 'rgb(232, 232, 232)',
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
     startPaddingLeft: '0px',
diff --git a/src/themes/types.ts b/src/themes/types.ts
index 1a9cdbb3d1..f3330452e1 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -107,7 +107,7 @@ export type ColorScheme = {
   hover: string
 }
 
-export type ColorSchemeMapping = ColorValues<ColorScheme>
+export type ColorSchemeMapping = ColorValues<ColorScheme> & { default?: ColorScheme }
 
 // ========================================================
 // Props

From c5aa2762def0d909bd024d58836879e35f35a860 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 11:36:20 +0100
Subject: [PATCH 13/20] -finished complex color prop and adding default colors

---
 src/components/Label/Label.tsx                |  4 +-
 src/lib/commonPropTypes.ts                    | 47 ++++++++++++-------
 src/themes/base/colors.ts                     | 14 ++++--
 .../teams/components/Label/labelStyles.ts     |  7 +--
 .../teams/components/Label/labelVariables.ts  | 15 +++---
 src/themes/teams/utils/index.ts               | 17 ++++++-
 6 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index bef478167e..f95625fc57 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -57,15 +57,13 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
   static className = 'ui-label'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: 'complex' }),
     circular: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
     image: customPropTypes.itemShorthand,
     imagePosition: PropTypes.oneOf(['start', 'end']),
     fluid: PropTypes.bool,
-    // TODO: type this one correctly
-    color: PropTypes.any,
   }
 
   static defaultProps = {
diff --git a/src/lib/commonPropTypes.ts b/src/lib/commonPropTypes.ts
index 0dab2712a4..51958930af 100644
--- a/src/lib/commonPropTypes.ts
+++ b/src/lib/commonPropTypes.ts
@@ -6,11 +6,39 @@ export interface CreateCommonConfig {
   children?: boolean | 'node' | 'element'
   as?: boolean
   className?: boolean
-  color?: boolean
+  color?: boolean | 'single' | 'complex'
   content?: boolean | 'node' | 'shorthand'
   styled?: boolean
 }
 
+const colorPropType = PropTypes.oneOfType([
+  PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'blue',
+    'green',
+    'grey',
+    'orange',
+    'pink',
+    'purple',
+    'teal',
+    'red',
+    'yellow',
+  ]),
+  PropTypes.string,
+])
+
+export const complexColorPropType = PropTypes.oneOfType([
+  PropTypes.shape({
+    foreground: colorPropType,
+    background: colorPropType,
+    border: colorPropType,
+    hover: colorPropType,
+    shadow: colorPropType,
+  }),
+  colorPropType,
+])
+
 export const createCommon = (config: CreateCommonConfig = {}) => {
   const {
     animated = true,
@@ -35,22 +63,7 @@ export const createCommon = (config: CreateCommonConfig = {}) => {
       className: PropTypes.string,
     }),
     ...(color && {
-      color: PropTypes.oneOfType([
-        PropTypes.oneOf([
-          'primary',
-          'secondary',
-          'blue',
-          'green',
-          'grey',
-          'orange',
-          'pink',
-          'purple',
-          'teal',
-          'red',
-          'yellow',
-        ]),
-        PropTypes.string,
-      ]),
+      color: color === true || color === 'single' ? colorPropType : complexColorPropType,
     }),
     ...(content && {
       content:
diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index 540253523c..d3ccec21a6 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -159,9 +159,8 @@ export const colors: ColorPalette = {
   white: '#fff',
 }
 
-export const colorScheme: ColorSchemeMapping = _.mapValues(
-  emphasisAndNaturalColors,
-  (colorVariants, colorName) => {
+export const colorScheme: ColorSchemeMapping = {
+  ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => {
     const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
 
     return {
@@ -171,5 +170,12 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
       background: colorVariants[500],
       hover: colorVariants[300],
     }
+  }),
+  default: {
+    foreground: colors.grey[600],
+    border: colors.grey[600],
+    shadow: colors.grey[600],
+    background: colors.grey[100],
+    hover: colors.grey[300],
   },
-)
+}
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index b06c5004ed..b3a479b273 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -7,15 +7,10 @@ import { LabelVariables } from './labelVariables'
 
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const colorsComponentVariables = {
-      foreground: v.foreground,
-      background: v.background,
-    }
     const colors = _.isObject(p.color)
-      ? { ...v.colorScheme.default, ...colorsComponentVariables, ...(p.color as object) }
+      ? { ...v.colorScheme.default, ...(p.color as object) }
       : _.get(v.colorScheme, p.color as string, {
           ...v.colorScheme.default,
-          ...colorsComponentVariables,
         })
 
     return {
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index b3258c2d9e..1eda345be0 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -1,5 +1,5 @@
 import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types'
-import { pxToRem } from '../../utils'
+import { pxToRem, getColorSchemeWithCustomDefaults } from '../../utils'
 
 type LabelColorScheme = Pick<ColorScheme, 'foreground' | 'background'>
 
@@ -7,8 +7,6 @@ export interface LabelVariables {
   colorScheme: ColorValues<LabelColorScheme>
   circularRadius: string
   padding: string
-  foreground: string
-  background: string
   startPaddingLeft: string
   endPaddingRight: string
   height: string
@@ -19,10 +17,13 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
 
   return {
-    colorScheme: siteVars.colorScheme,
-    // TODO: see if we can get rid of this, or define them in different why
-    foreground: color,
-    background: 'rgb(232, 232, 232)',
+    colorScheme: getColorSchemeWithCustomDefaults(
+      {
+        foreground: color,
+        background: 'rgb(232, 232, 232)',
+      },
+      siteVars.colorScheme,
+    ),
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
     startPaddingLeft: '0px',
diff --git a/src/themes/teams/utils/index.ts b/src/themes/teams/utils/index.ts
index 3735b1320a..fa534c8a90 100644
--- a/src/themes/teams/utils/index.ts
+++ b/src/themes/teams/utils/index.ts
@@ -1,5 +1,6 @@
 import { pxToRem as basePxToRem } from '../../../lib'
-import { ThemeInput } from '../../types'
+import { ThemeInput, ColorScheme, ColorSchemeMapping } from '../../types'
+import { Partial } from '../../../../types/utils'
 
 const themeFontSizeInPx = 14
 
@@ -10,3 +11,17 @@ export const getSideArrow = (theme: ThemeInput) => {
   const { arrowLeft, arrowRight } = siteVariables
   return rtl ? arrowLeft : arrowRight
 }
+
+export const getColorSchemeWithCustomDefaults = (
+  customDefaultValues: Partial<ColorScheme>,
+  colorScheme: ColorSchemeMapping,
+) => {
+  const mergedDefaultValues = {
+    ...colorScheme.default,
+    customDefaultValues,
+  }
+  return {
+    ...colorScheme,
+    default: mergedDefaultValues,
+  }
+}

From c98ce09eda37f48003c2274e5ece83203ed146a3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 12:09:26 +0100
Subject: [PATCH 14/20] -introduced mechanism for getting the color prop value
 from the color scheme

---
 src/themes/teams/components/Label/labelStyles.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index b3a479b273..5907aabe20 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -5,10 +5,21 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 
+const getColorSchemeFromObject = (colorScheme, colors) => {
+  const result = {}
+  const keys = _.keys(colors)
+  keys.forEach(key => {
+    // if the color scheme contains the color, then get the value from it, otherwise return the color provided
+    const colorSchemeValue = _.get(colorScheme, colors[key], colorScheme.default[colors[key]])
+    result[key] = colorSchemeValue ? colorSchemeValue[key] : colors[key]
+  })
+  return result
+}
+
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
     const colors = _.isObject(p.color)
-      ? { ...v.colorScheme.default, ...(p.color as object) }
+      ? { ...v.colorScheme.default, ...getColorSchemeFromObject(v.colorScheme, p.color) }
       : _.get(v.colorScheme, p.color as string, {
           ...v.colorScheme.default,
         })

From 0e5a91f2e78cb3a93b272e1bc1de1d76798860a9 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 15:00:04 +0100
Subject: [PATCH 15/20] -refactored color utils and move all helpers function
 for colors in this util -changed color prop interface to be similar as the
 content and children by receiving generic type -fix merging the default
 scheme values with the variables

---
 src/components/Label/Label.tsx                |  5 ++-
 src/lib/colorUtils.ts                         | 42 ++++++++++++++++++-
 src/lib/commonPropInterfaces.ts               | 27 ++++++------
 src/lib/commonPropTypes.ts                    |  4 +-
 src/lib/index.ts                              |  2 +-
 src/themes/base/colors.ts                     | 21 +++++-----
 src/themes/teams/colors.ts                    | 21 +++++-----
 .../teams/components/Label/labelStyles.ts     | 19 +--------
 .../teams/components/Label/labelVariables.ts  | 14 +++----
 src/themes/teams/utils/index.ts               | 17 +-------
 10 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index e09d49cc55..0c09346daa 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
@@ -18,13 +19,13 @@ import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
-import { ComplexColorComponentProps } from '../../lib/commonPropInterfaces'
+import { ComplexColorPropType } from '../../lib/commonPropInterfaces'
 
 export interface LabelProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ContentComponentProps,
-    ComplexColorComponentProps {
+    ColorComponentProps<ComplexColorPropType> {
   accessibility?: Accessibility
 
   /** A Label can be circular. */
diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index 3fe9aa5be4..15fa636dcd 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -1,5 +1,13 @@
 import * as _ from 'lodash'
-import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types'
+import {
+  SiteVariablesInput,
+  ColorVariants,
+  ColorValues,
+  ColorSchemeMapping,
+  ColorScheme,
+} from '../themes/types'
+import { Partial } from '../../types/utils'
+import { ComplexColorPropType } from './commonPropInterfaces'
 
 export const mapColorsToScheme = <T>(
   siteVars: SiteVariablesInput,
@@ -14,3 +22,35 @@ export const getColorSchemeFn = <T>(colorProp: string, colorScheme: ColorValues<
   const colors = _.get(colorScheme, colorProp)
   return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor)
 }
+
+export const getColorSchemeFromObject = (colorScheme, colors) =>
+  _.mapValues(colors, (color, colorName) => {
+    // if the color scheme contains the color, then get the value from it, otherwise return the color provided
+    const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color])
+    return colorSchemeValue ? colorSchemeValue[colorName] : colors[colorName]
+  })
+
+export const getColorSchemeWithCustomDefaults = (
+  colorScheme: ColorSchemeMapping,
+  customDefaultValues: Partial<ColorScheme>,
+) => {
+  const mergedDefaultValues = {
+    ...colorScheme.default,
+    ...customDefaultValues,
+  }
+  return {
+    ...colorScheme,
+    default: mergedDefaultValues,
+  }
+}
+
+export const generateColorScheme = (
+  colorProp: ComplexColorPropType,
+  colorScheme: ColorValues<Partial<ColorScheme>>,
+): Partial<ColorScheme> => {
+  return _.isObject(colorProp)
+    ? { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
+    : _.get(colorScheme, colorProp as string, {
+        ...colorScheme.default,
+      })
+}
diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts
index 7b769e4c39..20285edbf6 100644
--- a/src/lib/commonPropInterfaces.ts
+++ b/src/lib/commonPropInterfaces.ts
@@ -39,22 +39,19 @@ export type ColorValue =
   | 'yellow'
   | string
 
-export interface ColorComponentProps {
-  /** A component can have a color. */
-  color?: ColorValue
-}
+export type ComplexColorPropType =
+  | {
+      foreground?: ColorValue
+      background?: ColorValue
+      border?: ColorValue
+      shadow?: ColorValue
+      hover?: ColorValue
+    }
+  | ColorValue
 
-export interface ComplexColorComponentProps {
-  /** A component can have color defined for different parts. */
-  color?:
-    | {
-        foreground?: ColorValue
-        background?: ColorValue
-        border?: ColorValue
-        shadow?: ColorValue
-        hover?: ColorValue
-      }
-    | ColorValue
+export interface ColorComponentProps<TColor = ColorValue> {
+  /** A component can have a color. */
+  color?: TColor
 }
 
 export interface ContentComponentProps<TContent = React.ReactNode> {
diff --git a/src/lib/commonPropTypes.ts b/src/lib/commonPropTypes.ts
index 51958930af..d395b995c9 100644
--- a/src/lib/commonPropTypes.ts
+++ b/src/lib/commonPropTypes.ts
@@ -6,7 +6,7 @@ export interface CreateCommonConfig {
   children?: boolean | 'node' | 'element'
   as?: boolean
   className?: boolean
-  color?: boolean | 'single' | 'complex'
+  color?: boolean | 'simple' | 'complex'
   content?: boolean | 'node' | 'shorthand'
   styled?: boolean
 }
@@ -63,7 +63,7 @@ export const createCommon = (config: CreateCommonConfig = {}) => {
       className: PropTypes.string,
     }),
     ...(color && {
-      color: color === true || color === 'single' ? colorPropType : complexColorPropType,
+      color: color === true || color === 'simple' ? colorPropType : complexColorPropType,
     }),
     ...(content && {
       content:
diff --git a/src/lib/index.ts b/src/lib/index.ts
index e228036f82..bff791ebbd 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -3,7 +3,7 @@ import * as commonPropTypes from './commonPropTypes'
 
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
-export { mapColorsToScheme, getColorSchemeFn } from './colorUtils'
+export * from './colorUtils'
 export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'
diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index d3ccec21a6..5803bbbc65 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -159,8 +159,9 @@ export const colors: ColorPalette = {
   white: '#fff',
 }
 
-export const colorScheme: ColorSchemeMapping = {
-  ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => {
+export const colorScheme: ColorSchemeMapping = _.mapValues(
+  emphasisAndNaturalColors,
+  (colorVariants, colorName) => {
     const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
 
     return {
@@ -169,13 +170,13 @@ export const colorScheme: ColorSchemeMapping = {
       shadow: foreground,
       background: colorVariants[500],
       hover: colorVariants[300],
+      default: {
+        foreground: colors.grey[600],
+        border: colors.grey[600],
+        shadow: colors.grey[600],
+        background: colors.grey[100],
+        hover: colors.grey[300],
+      },
     }
-  }),
-  default: {
-    foreground: colors.grey[600],
-    border: colors.grey[600],
-    shadow: colors.grey[600],
-    background: colors.grey[100],
-    hover: colors.grey[300],
   },
-}
+)
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index 7ca32ba3c9..63a9b525f1 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -167,8 +167,9 @@ export const colors: ColorPalette = {
   white: naturalColors.grey[50],
 }
 
-export const colorScheme: ColorSchemeMapping = {
-  ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => {
+export const colorScheme: ColorSchemeMapping = _.mapValues(
+  emphasisAndNaturalColors,
+  (colorVariants, colorName) => {
     const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
 
     return {
@@ -177,13 +178,13 @@ export const colorScheme: ColorSchemeMapping = {
       shadow: foreground,
       background: colorVariants[500],
       hover: colorVariants[300],
+      default: {
+        foreground: colors.grey[600],
+        border: colors.grey[600],
+        shadow: colors.grey[600],
+        background: colors.grey[100],
+        hover: colors.grey[300],
+      },
     }
-  }),
-  default: {
-    foreground: colors.grey[600],
-    border: colors.grey[600],
-    shadow: colors.grey[600],
-    background: colors.grey[100],
-    hover: colors.grey[300],
   },
-}
+)
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 80bbf404c5..55f61ae7b8 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -1,28 +1,13 @@
 import * as _ from 'lodash'
 
-import { pxToRem } from '../../../../lib'
+import { pxToRem, generateColorScheme } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 
-const getColorSchemeFromObject = (colorScheme, colors) => {
-  const result = {}
-  const keys = _.keys(colors)
-  keys.forEach(key => {
-    // if the color scheme contains the color, then get the value from it, otherwise return the color provided
-    const colorSchemeValue = _.get(colorScheme, colors[key], colorScheme.default[colors[key]])
-    result[key] = colorSchemeValue ? colorSchemeValue[key] : colors[key]
-  })
-  return result
-}
-
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const colors = _.isObject(p.color)
-      ? { ...v.colorScheme.default, ...getColorSchemeFromObject(v.colorScheme, p.color) }
-      : _.get(v.colorScheme, p.color as string, {
-          ...v.colorScheme.default,
-        })
+    const colors = generateColorScheme(p.color, v.colorScheme)
 
     return {
       display: 'inline-flex',
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 0aa1201e44..8f9256fc05 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -1,6 +1,5 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem, getColorSchemeWithCustomDefaults } from '../../../../lib'
 import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types'
-import { getColorSchemeWithCustomDefaults } from '../../utils'
 
 type LabelColorScheme = Pick<ColorScheme, 'foreground' | 'background'>
 
@@ -18,13 +17,10 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => {
   const color = 'rgba(0, 0, 0, 0.6)'
 
   return {
-    colorScheme: getColorSchemeWithCustomDefaults(
-      {
-        foreground: color,
-        background: 'rgb(232, 232, 232)',
-      },
-      siteVars.colorScheme,
-    ),
+    colorScheme: getColorSchemeWithCustomDefaults(siteVars.colorScheme, {
+      foreground: color,
+      background: 'rgb(232, 232, 232)',
+    }),
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
     startPaddingLeft: '0px',
diff --git a/src/themes/teams/utils/index.ts b/src/themes/teams/utils/index.ts
index 325e74000a..e818cf91b3 100644
--- a/src/themes/teams/utils/index.ts
+++ b/src/themes/teams/utils/index.ts
@@ -1,22 +1,7 @@
-import { ThemeInput, ColorScheme, ColorSchemeMapping } from '../../types'
-import { Partial } from '../../../../types/utils'
+import { ThemeInput } from '../../types'
 
 export const getSideArrow = (theme: ThemeInput) => {
   const { rtl, siteVariables } = theme
   const { arrowLeft, arrowRight } = siteVariables
   return rtl ? arrowLeft : arrowRight
 }
-
-export const getColorSchemeWithCustomDefaults = (
-  customDefaultValues: Partial<ColorScheme>,
-  colorScheme: ColorSchemeMapping,
-) => {
-  const mergedDefaultValues = {
-    ...colorScheme.default,
-    customDefaultValues,
-  }
-  return {
-    ...colorScheme,
-    default: mergedDefaultValues,
-  }
-}

From 233403b1c31ff5325450637b229a87d841aa167c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 15:04:38 +0100
Subject: [PATCH 16/20] -added typings for getColorSchemeFromObject

---
 src/lib/colorUtils.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index 15fa636dcd..bde59d3526 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -23,7 +23,10 @@ export const getColorSchemeFn = <T>(colorProp: string, colorScheme: ColorValues<
   return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor)
 }
 
-export const getColorSchemeFromObject = (colorScheme, colors) =>
+export const getColorSchemeFromObject = (
+  colorScheme: ColorValues<Partial<ColorScheme>>,
+  colors: ComplexColorPropType,
+): Partial<ColorScheme> =>
   _.mapValues(colors, (color, colorName) => {
     // if the color scheme contains the color, then get the value from it, otherwise return the color provided
     const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color])

From d299f0df8fd7ec499a3926a08f7adac276c11521 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 16:41:10 +0100
Subject: [PATCH 17/20] -small refactorings -fixed changelog

---
 CHANGELOG.md          | 2 +-
 src/lib/colorUtils.ts | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 939afdc477..85a221ff70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `Loader` component @layershifter ([#685](https://github.com/stardust-ui/react/pull/685))
+- Add `color` prop to `Label` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
 
 <!--------------------------------[ v0.16.1 ]------------------------------- -->
 ## [v0.16.1](https://github.com/stardust-ui/react/tree/v0.16.1) (2019-01-10)
@@ -28,7 +29,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
 - Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
 - Add `MenuDivider` component and `kind` prop to the `items` inside of the `Menu` for creating different components @mnajdova ([#682](https://github.com/stardust-ui/react/pull/682))
-- Add `color` prop to `Label` component @Bugaa92 ([#647](https://github.com/stardust-ui/react/pull/647))
 
 ### Fixes
 - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))
diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index bde59d3526..ef8e45239c 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -51,9 +51,7 @@ export const generateColorScheme = (
   colorProp: ComplexColorPropType,
   colorScheme: ColorValues<Partial<ColorScheme>>,
 ): Partial<ColorScheme> => {
-  return _.isObject(colorProp)
-    ? { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
-    : _.get(colorScheme, colorProp as string, {
-        ...colorScheme.default,
-      })
+  return typeof colorProp === 'string'
+    ? _.get(colorScheme, colorProp as string, colorScheme.default)
+    : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
 }

From 23c44e3d316f3a0cc352b13439c19c9d647677e1 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 17:21:49 +0100
Subject: [PATCH 18/20] -removed hovered from the color scheme

---
 src/lib/commonPropInterfaces.ts | 1 -
 src/lib/commonPropTypes.ts      | 1 -
 src/themes/base/colors.ts       | 2 --
 src/themes/teams/colors.ts      | 2 --
 src/themes/types.ts             | 1 -
 5 files changed, 7 deletions(-)

diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts
index 20285edbf6..8dbeb7776f 100644
--- a/src/lib/commonPropInterfaces.ts
+++ b/src/lib/commonPropInterfaces.ts
@@ -45,7 +45,6 @@ export type ComplexColorPropType =
       background?: ColorValue
       border?: ColorValue
       shadow?: ColorValue
-      hover?: ColorValue
     }
   | ColorValue
 
diff --git a/src/lib/commonPropTypes.ts b/src/lib/commonPropTypes.ts
index d395b995c9..699e023cc7 100644
--- a/src/lib/commonPropTypes.ts
+++ b/src/lib/commonPropTypes.ts
@@ -33,7 +33,6 @@ export const complexColorPropType = PropTypes.oneOfType([
     foreground: colorPropType,
     background: colorPropType,
     border: colorPropType,
-    hover: colorPropType,
     shadow: colorPropType,
   }),
   colorPropType,
diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts
index 5803bbbc65..e49ca7af62 100644
--- a/src/themes/base/colors.ts
+++ b/src/themes/base/colors.ts
@@ -169,13 +169,11 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
       border: foreground,
       shadow: foreground,
       background: colorVariants[500],
-      hover: colorVariants[300],
       default: {
         foreground: colors.grey[600],
         border: colors.grey[600],
         shadow: colors.grey[600],
         background: colors.grey[100],
-        hover: colors.grey[300],
       },
     }
   },
diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts
index 63a9b525f1..199794c570 100644
--- a/src/themes/teams/colors.ts
+++ b/src/themes/teams/colors.ts
@@ -177,13 +177,11 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
       border: foreground,
       shadow: foreground,
       background: colorVariants[500],
-      hover: colorVariants[300],
       default: {
         foreground: colors.grey[600],
         border: colors.grey[600],
         shadow: colors.grey[600],
         background: colors.grey[100],
-        hover: colors.grey[300],
       },
     }
   },
diff --git a/src/themes/types.ts b/src/themes/types.ts
index f3330452e1..4fc8af4e1d 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -104,7 +104,6 @@ export type ColorScheme = {
   background: string
   border: string
   shadow: string
-  hover: string
 }
 
 export type ColorSchemeMapping = ColorValues<ColorScheme> & { default?: ColorScheme }

From 623e727a176ff5a498ac3f805093573fde470177 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 17:41:47 +0100
Subject: [PATCH 19/20] -added colors as a prop to the styles functions

---
 src/lib/colorUtils.ts                              | 3 +++
 src/lib/renderComponent.tsx                        | 5 +++++
 src/themes/teams/components/Label/labelStyles.ts   | 6 ++----
 src/themes/teams/components/Menu/menuItemStyles.ts | 6 +++---
 src/themes/types.ts                                | 1 +
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index ef8e45239c..74f5cb7534 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -51,6 +51,9 @@ export const generateColorScheme = (
   colorProp: ComplexColorPropType,
   colorScheme: ColorValues<Partial<ColorScheme>>,
 ): Partial<ColorScheme> => {
+  if (!colorProp) {
+    return colorScheme && colorScheme.default ? colorScheme.default : {}
+  }
   return typeof colorProp === 'string'
     ? _.get(colorScheme, colorProp as string, colorScheme.default)
     : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
diff --git a/src/lib/renderComponent.tsx b/src/lib/renderComponent.tsx
index d3dfaf858f..ee859554b0 100644
--- a/src/lib/renderComponent.tsx
+++ b/src/lib/renderComponent.tsx
@@ -32,6 +32,7 @@ import { mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
 import { FocusZoneProps, FocusZone, FocusZone as FabricFocusZone } from './accessibility/FocusZone'
 import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities'
 import createAnimationStyles from './createAnimationStyles'
+import { generateColorScheme } from './index'
 
 export interface RenderResultConfig<P> {
   // TODO: Switch back to React.ReactType after issue will be resolved
@@ -203,10 +204,14 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
           { handledProps: [...handledProps, ...accessibility.handledProps] },
           props,
         )
+
+        const colors = generateColorScheme(stateAndProps.color, resolvedVariables.colorScheme)
+
         const styleParam: ComponentStyleFunctionParam = {
           props: stateAndProps,
           variables: resolvedVariables,
           theme,
+          colors,
         }
 
         mergedStyles.root = {
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 55f61ae7b8..a188c2dd21 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -1,14 +1,12 @@
 import * as _ from 'lodash'
 
-import { pxToRem, generateColorScheme } from '../../../../lib'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 
 const labelStyles: ComponentSlotStylesInput<LabelProps, LabelVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const colors = generateColorScheme(p.color, v.colorScheme)
-
+  root: ({ props: p, variables: v, colors }): ICSSInJSStyle => {
     return {
       display: 'inline-flex',
       alignItems: 'center',
diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts
index ee58466747..f0553f481a 100644
--- a/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -142,7 +142,7 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
 }
 
 const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
-  wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
+  wrapper: ({ props, variables: v, theme, colors }): ICSSInJSStyle => {
     const {
       active,
       iconOnly,
@@ -198,7 +198,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         display: 'flex',
       }),
 
-      ...itemSeparator({ props, variables: v, theme }),
+      ...itemSeparator({ props, variables: v, theme, colors }),
 
       // active styles
       ...(active && {
@@ -209,7 +209,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
             ? pointing === 'end'
               ? { borderRight: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
               : { borderLeft: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
-            : pointingBeak({ props, variables: v, theme }))),
+            : pointingBeak({ props, variables: v, theme, colors }))),
       }),
 
       // focus styles
diff --git a/src/themes/types.ts b/src/themes/types.ts
index 4fc8af4e1d..3882596ce5 100644
--- a/src/themes/types.ts
+++ b/src/themes/types.ts
@@ -197,6 +197,7 @@ export interface ComponentStyleFunctionParam<
   props: State & TProps
   variables: TVars
   theme: ThemePrepared
+  colors: Partial<ColorScheme>
 }
 
 export type ComponentSlotStyleFunction<TProps = {}, TVars = {}> = ((

From 6cfc12243a9a6960761b61f1ec48d3cf688916f3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 11 Jan 2019 18:27:16 +0100
Subject: [PATCH 20/20] -fixed the generateColorScheme object, and documented
 it's conditions

---
 src/lib/colorUtils.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index 74f5cb7534..3530cb2980 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -51,10 +51,26 @@ export const generateColorScheme = (
   colorProp: ComplexColorPropType,
   colorScheme: ColorValues<Partial<ColorScheme>>,
 ): Partial<ColorScheme> => {
-  if (!colorProp) {
+  // if both color prop and color scheme are defined, we are merging them
+  if (colorProp && colorScheme) {
+    return typeof colorProp === 'string'
+      ? _.get(colorScheme, colorProp as string, colorScheme.default)
+      : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
+  }
+
+  // if the color prop is not defined, but the the color scheme is defined, then we are returning
+  // the defaults from the color scheme if they exists
+  if (colorScheme) {
     return colorScheme && colorScheme.default ? colorScheme.default : {}
   }
-  return typeof colorProp === 'string'
-    ? _.get(colorScheme, colorProp as string, colorScheme.default)
-    : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) }
+
+  // if the color scheme is not defined, then if the color prop is a scheme object we are
+  // returning it, otherwise we return an empty object, as it means that the component is
+  // implementing the simple color prop
+  if (colorProp) {
+    return typeof colorProp === 'string' ? {} : colorProp
+  }
+
+  // if neither the color prop, nor the color scheme are defined, we are returning empty object
+  return {}
 }