feat(Label): added black and white colors for the color prop (#855)

* -added black color

* -remove console log

* -improved typings for the complex color values

* -replaced hex values with theme's colors

* -updated changelog

* -fixed changelog

* -fixed changelog entry

* -addressing PR comments

* -updated black to be `#000`

* -updated for the siteVariables black color
-added Breaking change entry in changelog

* Update packages/react/src/themes/teams/colors.ts

Co-Authored-By: mnajdova <mnajdova@gmail.com>

* -added import statements

Author: mnajdova

CHANGELOG.md

@@ -17,9 +17,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Changed site variables' `colors.black` to be `#000` instead of `grey[900](#252424)` in Teams theme @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
+
 ### Features
 - Add single search flavor for `Dropdown` component @Bugaa92 ([#839](https://github.com/stardust-ui/react/pull/839))
 - Add multiple selection flavor for `Dropdown` component @Bugaa92 ([#845](https://github.com/stardust-ui/react/pull/845))
+- Add `black` and `white` options for the `color` prop of the `Label` component @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
 
 <!--------------------------------[ v0.20.0 ]------------------------------- -->
 ## [v0.20.0](https://github.com/stardust-ui/react/tree/v0.20.0) (2019-02-06)

packages/react/src/components/Label/Label.tsx

@@ -20,13 +20,16 @@ import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../types'
-import { ComplexColorPropType } from '../../lib/commonPropInterfaces'
+import {
+  ComplexColorPropType,
+  ColorValuesWithPrimitiveColors,
+} from '../../lib/commonPropInterfaces'
 
 export interface LabelProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ContentComponentProps,
-    ColorComponentProps<ComplexColorPropType> {
+    ColorComponentProps<ComplexColorPropType<ColorValuesWithPrimitiveColors>> {
   accessibility?: Accessibility
 
   /** A Label can be circular. */

packages/react/src/lib/commonPropInterfaces.ts

@@ -41,14 +41,16 @@ export type ColorValue =
   | 'yellow'
   | string
 
-export type ComplexColorPropType =
+export type ColorValuesWithPrimitiveColors = ColorValue | 'black' | 'white'
+
+export type ComplexColorPropType<TColorValue = ColorValue> =
   | {
-      foreground?: ColorValue
-      background?: ColorValue
-      border?: ColorValue
-      shadow?: ColorValue
+      foreground?: TColorValue
+      background?: TColorValue
+      border?: TColorValue
+      shadow?: TColorValue
     }
-  | ColorValue
+  | TColorValue
 
 export interface ColorComponentProps<TColor = ColorValue> {
   /** A component can have a color. */

packages/react/src/themes/teams/colors.ts

@@ -6,6 +6,8 @@ import {
   EmphasisColors,
   NaturalColors,
   ColorSchemeMapping,
+  PrimitiveColors,
+  ColorScheme,
 } from '../types'
 
 export const emphasisColors: EmphasisColors = {
@@ -163,13 +165,28 @@ export const colors: ColorPalette = {
   ...contextualColors,
 
   // Primitive colors
-  black: naturalColors.grey[900],
+  black: '#000',
   white: naturalColors.grey[50],
 }
 
-export const colorScheme: ColorSchemeMapping = _.mapValues(
-  emphasisAndNaturalColors,
-  (colorVariants, colorName) => {
+const primitiveColorsScheme: Record<keyof PrimitiveColors, ColorScheme> = {
+  black: {
+    foreground: colors.white,
+    border: colors.white,
+    shadow: colors.white,
+    background: colors.black,
+  },
+  white: {
+    foreground: colors.black,
+    border: colors.black,
+    shadow: colors.black,
+    background: colors.white,
+  },
+}
+
+export const colorScheme: ColorSchemeMapping = {
+  ...primitiveColorsScheme,
+  ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => {
     const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50]
 
     return {
@@ -184,5 +201,5 @@ export const colorScheme: ColorSchemeMapping = _.mapValues(
         background: colors.grey[100],
       },
     }
-  },
-)
+  }),
+}

packages/react/src/themes/teams/siteVariables.ts

@@ -11,7 +11,7 @@ export const htmlFontSize = '10px' // what 1rem represents
 //
 export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors'
 
-export const black = colors.black
+export const black = colors.grey[900]
 export const gray02 = '#484644'
 export const gray03 = '#605E5C'
 export const gray04 = '#979593'