From 335400f16d67681a1d7263af399a7478dd6d1ff0 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Thu, 18 Oct 2018 14:50:28 -0700
Subject: [PATCH 1/9] Adding dark and contrast theme files for Avatar and
 Status Indicator.

---
 .../Usage/AvatarUsageExample.shorthand.tsx    | 57 +++++++++++++++++
 .../components/Avatar/Usage/index.tsx         | 15 +++++
 ...arExampleStatusCustomization.shorthand.tsx |  2 +-
 docs/src/examples/components/Avatar/index.tsx |  2 +
 src/themes/teams-dark/componentVariables.ts   |  8 ++-
 .../components/Avatar/avatarStyles.ts         | 40 ++++++++++++
 .../components/Avatar/avatarVariables.ts      |  9 +++
 .../components/Status/statusStyles.ts         | 63 +++++++++++++++++++
 .../components/Status/statusVariables.ts      | 29 +++++++++
 .../teams-high-contrast/componentVariables.ts |  7 ++-
 .../components/Avatar/avatarStyles.ts         | 40 ++++++++++++
 .../components/Avatar/avatarVariables.ts      |  9 +++
 .../components/Status/statusStyles.ts         | 63 +++++++++++++++++++
 .../components/Status/statusVariables.ts      | 29 +++++++++
 .../components/Avatar/avatarVariables.ts      |  9 ++-
 15 files changed, 377 insertions(+), 5 deletions(-)
 create mode 100644 docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Avatar/Usage/index.tsx
 create mode 100644 src/themes/teams-dark/components/Avatar/avatarStyles.ts
 create mode 100644 src/themes/teams-dark/components/Avatar/avatarVariables.ts
 create mode 100644 src/themes/teams-dark/components/Status/statusStyles.ts
 create mode 100644 src/themes/teams-dark/components/Status/statusVariables.ts
 create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
 create mode 100644 src/themes/teams-high-contrast/components/Status/statusStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Status/statusVariables.ts

diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
new file mode 100644
index 0000000000..1a892ed5bf
--- /dev/null
+++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Avatar } from '@stardust-ui/react'
+
+const status = { color: 'green', icon: 'check', title: 'Available' }
+
+const AvatarUsageExampleShorthand = () => (
+  <div>
+    Correct:
+    <div>
+      <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'violet' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'yellowgreen', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'yellowgreen' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'orangered', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'orangered' }}
+        />
+      </div>
+      <div style={{ backgroundColor: 'cornflowerblue', padding: '1rem', display: 'inline-block' }}>
+        <Avatar
+          name="John Doe (Software Developer)"
+          status={status}
+          variables={{ statusBorderColor: 'cornflowerblue' }}
+        />
+      </div>
+    </div>
+    Incorrect:
+    <div>
+      <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'yellowgreen', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'orangered', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+      <div style={{ backgroundColor: 'cornflowerblue', padding: '1rem', display: 'inline-block' }}>
+        <Avatar name="John Doe (Software Developer)" status={status} />
+      </div>
+    </div>
+  </div>
+)
+
+export default AvatarUsageExampleShorthand
diff --git a/docs/src/examples/components/Avatar/Usage/index.tsx b/docs/src/examples/components/Avatar/Usage/index.tsx
new file mode 100644
index 0000000000..f36e0513fc
--- /dev/null
+++ b/docs/src/examples/components/Avatar/Usage/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Match Background Example"
+      description="The status border for avatar should be set to match whatever background it is on."
+      examplePath="components/Avatar/Usage/AvatarUsageExample"
+    />
+  </ExampleSection>
+)
+
+export default Usage
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
index 6d51923171..a28b0c081b 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
@@ -26,7 +26,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
         icon: 'check',
         title: 'Available',
       }}
-      variables={{ statusBorderColor: 'black' }}
+      variables={{ statusBorderColor: 'orange' }}
     />
     <Text content="Status can have different size for the same avatar size" />
     {defaultAvatar}
diff --git a/docs/src/examples/components/Avatar/index.tsx b/docs/src/examples/components/Avatar/index.tsx
index 67c45fa58a..184521ade5 100644
--- a/docs/src/examples/components/Avatar/index.tsx
+++ b/docs/src/examples/components/Avatar/index.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const AvatarExamples = () => (
   <div>
     <Types />
     <Variations />
+    <Usage />
   </div>
 )
 
diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
index 34c15933b6..9a3f944318 100644
--- a/src/themes/teams-dark/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,3 +1,9 @@
+export { default as Avatar } from './components/Avatar/avatarVariables'
+
 export { default as Button } from './components/Button/buttonVariables'
-export { default as Text } from './components/Text/textVariables'
+
 export { default as Divider } from './components/Divider/dividerVariables'
+
+export { default as Status } from './components/Status/statusVariables'
+
+export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts
new file mode 100644
index 0000000000..70bdc5be5b
--- /dev/null
+++ b/src/themes/teams-dark/components/Avatar/avatarStyles.ts
@@ -0,0 +1,40 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
+
+const avatarStyles: IComponentPartStylesInput<IAvatarPropsWithDefaults, any> = {
+  root: ({ props: { size } }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size)
+    return {
+      position: 'relative',
+      backgroundColor: 'inherit',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      height: sizeInRem,
+      width: sizeInRem,
+    }
+  },
+  image: (): ICSSInJSStyle => ({
+    verticalAlign: 'top',
+  }),
+  label: ({ props: { size } }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size)
+    return {
+      display: 'inline-block',
+      width: sizeInRem,
+      height: sizeInRem,
+      lineHeight: sizeInRem,
+      fontSize: pxToRem(size / 2.333),
+      verticalAlign: 'top',
+      textAlign: 'center',
+      padding: '0px',
+    }
+  },
+  status: ({ props, variables }): ICSSInJSStyle => ({
+    position: 'absolute',
+    bottom: `-${variables.statusBorderWidth}px`,
+    right: `-${variables.statusBorderWidth}px`,
+  }),
+}
+
+export default avatarStyles
diff --git a/src/themes/teams-dark/components/Avatar/avatarVariables.ts b/src/themes/teams-dark/components/Avatar/avatarVariables.ts
new file mode 100644
index 0000000000..f03014a8d6
--- /dev/null
+++ b/src/themes/teams-dark/components/Avatar/avatarVariables.ts
@@ -0,0 +1,9 @@
+export interface IAvatarVariables {
+  statusBorderColor: string
+  statusBorderWidth: number
+}
+
+export default siteVariables => ({
+  statusBorderColor: siteVariables.bodyBackground,
+  statusBorderWidth: 2,
+})
diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts
new file mode 100644
index 0000000000..a932a43e97
--- /dev/null
+++ b/src/themes/teams-dark/components/Status/statusStyles.ts
@@ -0,0 +1,63 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IStatusPropsWithDefaults } from '../../../../components/Status/Status'
+import { IStatusVariables } from './statusVariables'
+
+const getBackgroundColor = (state: string, variables: IStatusVariables) => {
+  switch (state) {
+    case 'success':
+      return variables.successBackgroundColor
+    case 'info':
+      return variables.infoBackgroundColor
+    case 'warning':
+      return variables.warningBackgroundColor
+    case 'error':
+      return variables.errorBackgroundColor
+    case 'unknown':
+    default:
+      return variables.defaultBackgroundColor
+  }
+}
+
+const getTextColor = (state: string, variables: IStatusVariables) => {
+  switch (state) {
+    case 'success':
+      return variables.successTextColor
+    case 'info':
+      return variables.infoTextColor
+    case 'warning':
+      return variables.warningTextColor
+    case 'error':
+      return variables.errorTextColor
+    case 'unknown':
+    default:
+      return variables.defaultTextColor
+  }
+}
+
+const statusStyles: IComponentPartStylesInput<IStatusPropsWithDefaults, IStatusVariables> = {
+  root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: sizeInRem,
+      width: sizeInRem,
+      verticalAlign: 'middle',
+      borderRadius: '9999px',
+      ...(variables.borderColor && {
+        borderColor: variables.borderColor,
+        borderWidth: pxToRem(variables.borderWidth),
+        borderStyle: 'solid',
+      }),
+      backgroundColor: color || getBackgroundColor(state, variables),
+    }
+  },
+
+  icon: ({ props: { state }, variables }): ICSSInJSStyle => ({
+    color: getTextColor(state, variables),
+  }),
+}
+
+export default statusStyles
diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts
new file mode 100644
index 0000000000..0cfacbd803
--- /dev/null
+++ b/src/themes/teams-dark/components/Status/statusVariables.ts
@@ -0,0 +1,29 @@
+export interface IStatusVariables {
+  borderColor: string
+  borderWidth: number
+  successBackgroundColor: string
+  successTextColor: string
+  infoBackgroundColor: string
+  infoTextColor: string
+  warningBackgroundColor: string
+  warningTextColor: string
+  errorBackgroundColor: string
+  errorTextColor: string
+  defaultBackgroundColor: string
+  defaultTextColor: string
+}
+
+export default siteVariables => ({
+  borderColor: undefined,
+  borderWidth: 2,
+  successBackgroundColor: siteVariables.successStatusBackgroundColor,
+  successTextColor: siteVariables.successStatusTextColor,
+  infoBackgroundColor: siteVariables.infoStatusBackgroundColor,
+  infoTextColor: siteVariables.infoStatusTextColor,
+  warningBackgroundColor: siteVariables.warningStatusBackgroundColor,
+  warningTextColor: siteVariables.warningStatusTextColor,
+  errorBackgroundColor: siteVariables.errorStatusBackgroundColor,
+  errorTextColor: siteVariables.errorStatusTextColor,
+  defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor,
+  defaultTextColor: siteVariables.unknownStatusTextColor,
+})
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index f975eed9e2..d39119ee3f 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,2 +1,7 @@
-export { default as Text } from './components/Text/textVariables'
+export { default as Avatar } from './components/Avatar/avatarVariables'
+
 export { default as Divider } from './components/Divider/dividerVariables'
+
+export { default as Status } from './components/Status/statusVariables'
+
+export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
new file mode 100644
index 0000000000..70bdc5be5b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
@@ -0,0 +1,40 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
+
+const avatarStyles: IComponentPartStylesInput<IAvatarPropsWithDefaults, any> = {
+  root: ({ props: { size } }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size)
+    return {
+      position: 'relative',
+      backgroundColor: 'inherit',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      height: sizeInRem,
+      width: sizeInRem,
+    }
+  },
+  image: (): ICSSInJSStyle => ({
+    verticalAlign: 'top',
+  }),
+  label: ({ props: { size } }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size)
+    return {
+      display: 'inline-block',
+      width: sizeInRem,
+      height: sizeInRem,
+      lineHeight: sizeInRem,
+      fontSize: pxToRem(size / 2.333),
+      verticalAlign: 'top',
+      textAlign: 'center',
+      padding: '0px',
+    }
+  },
+  status: ({ props, variables }): ICSSInJSStyle => ({
+    position: 'absolute',
+    bottom: `-${variables.statusBorderWidth}px`,
+    right: `-${variables.statusBorderWidth}px`,
+  }),
+}
+
+export default avatarStyles
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
new file mode 100644
index 0000000000..893b67764b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
@@ -0,0 +1,9 @@
+export interface IAvatarVariables {
+  statusBorderColor: string
+  statusBorderWidth: number
+}
+
+export default siteVariables => ({
+  statusBorderColor: siteVariables.black,
+  statusBorderWidth: 3,
+})
diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts
new file mode 100644
index 0000000000..a932a43e97
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Status/statusStyles.ts
@@ -0,0 +1,63 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IStatusPropsWithDefaults } from '../../../../components/Status/Status'
+import { IStatusVariables } from './statusVariables'
+
+const getBackgroundColor = (state: string, variables: IStatusVariables) => {
+  switch (state) {
+    case 'success':
+      return variables.successBackgroundColor
+    case 'info':
+      return variables.infoBackgroundColor
+    case 'warning':
+      return variables.warningBackgroundColor
+    case 'error':
+      return variables.errorBackgroundColor
+    case 'unknown':
+    default:
+      return variables.defaultBackgroundColor
+  }
+}
+
+const getTextColor = (state: string, variables: IStatusVariables) => {
+  switch (state) {
+    case 'success':
+      return variables.successTextColor
+    case 'info':
+      return variables.infoTextColor
+    case 'warning':
+      return variables.warningTextColor
+    case 'error':
+      return variables.errorTextColor
+    case 'unknown':
+    default:
+      return variables.defaultTextColor
+  }
+}
+
+const statusStyles: IComponentPartStylesInput<IStatusPropsWithDefaults, IStatusVariables> = {
+  root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
+    const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: sizeInRem,
+      width: sizeInRem,
+      verticalAlign: 'middle',
+      borderRadius: '9999px',
+      ...(variables.borderColor && {
+        borderColor: variables.borderColor,
+        borderWidth: pxToRem(variables.borderWidth),
+        borderStyle: 'solid',
+      }),
+      backgroundColor: color || getBackgroundColor(state, variables),
+    }
+  },
+
+  icon: ({ props: { state }, variables }): ICSSInJSStyle => ({
+    color: getTextColor(state, variables),
+  }),
+}
+
+export default statusStyles
diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts
new file mode 100644
index 0000000000..0cfacbd803
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Status/statusVariables.ts
@@ -0,0 +1,29 @@
+export interface IStatusVariables {
+  borderColor: string
+  borderWidth: number
+  successBackgroundColor: string
+  successTextColor: string
+  infoBackgroundColor: string
+  infoTextColor: string
+  warningBackgroundColor: string
+  warningTextColor: string
+  errorBackgroundColor: string
+  errorTextColor: string
+  defaultBackgroundColor: string
+  defaultTextColor: string
+}
+
+export default siteVariables => ({
+  borderColor: undefined,
+  borderWidth: 2,
+  successBackgroundColor: siteVariables.successStatusBackgroundColor,
+  successTextColor: siteVariables.successStatusTextColor,
+  infoBackgroundColor: siteVariables.infoStatusBackgroundColor,
+  infoTextColor: siteVariables.infoStatusTextColor,
+  warningBackgroundColor: siteVariables.warningStatusBackgroundColor,
+  warningTextColor: siteVariables.warningStatusTextColor,
+  errorBackgroundColor: siteVariables.errorStatusBackgroundColor,
+  errorTextColor: siteVariables.errorStatusTextColor,
+  defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor,
+  defaultTextColor: siteVariables.unknownStatusTextColor,
+})
diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts
index 82614d9278..f03014a8d6 100644
--- a/src/themes/teams/components/Avatar/avatarVariables.ts
+++ b/src/themes/teams/components/Avatar/avatarVariables.ts
@@ -1,4 +1,9 @@
-export default () => ({
-  statusBorderColor: 'white',
+export interface IAvatarVariables {
+  statusBorderColor: string
+  statusBorderWidth: number
+}
+
+export default siteVariables => ({
+  statusBorderColor: siteVariables.bodyBackground,
   statusBorderWidth: 2,
 })

From daf16d34d5454b79fe16d40666c82af0cdc016f8 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 23 Oct 2018 12:11:16 -0700
Subject: [PATCH 2/9] Making Avatar Status Indicator respond to theme change.

---
 .../Usage/AvatarUsageExample.shorthand.tsx     |  2 +-
 .../AvatarExampleStatus.shorthand.tsx          | 18 +++++++++++++-----
 src/components/Status/Status.tsx               |  3 ++-
 .../components/Avatar/avatarStyles.ts          |  6 +++---
 .../components/Status/statusStyles.ts          | 12 ++++++------
 .../components/Status/statusVariables.ts       |  2 +-
 .../components/Avatar/avatarStyles.ts          |  6 +++---
 .../components/Status/statusStyles.ts          | 12 ++++++------
 .../components/Status/statusVariables.ts       |  2 +-
 .../teams-high-contrast/siteVariables.ts       | 14 ++++++++++++++
 10 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
index 1a892ed5bf..c38ff4d200 100644
--- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
@@ -36,7 +36,7 @@ const AvatarUsageExampleShorthand = () => (
         />
       </div>
     </div>
-    Incorrect:
+    Incorrect, unless in Contrast theme:
     <div>
       <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
         <Avatar name="John Doe (Software Developer)" status={status} />
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index 0d2d497615..c33422a86b 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -5,24 +5,32 @@ const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ state: 'success', icon: 'check', title: 'Available' }}
     />
     &emsp;
-    <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
+    <Avatar
+      image="public/images/avatar/small/matt.jpg"
+      status={{ state: 'error', title: 'Busy' }}
+    />
+    &emsp;
+    <Avatar
+      image="public/images/avatar/small/matt.jpg"
+      status={{ state: 'error', icon: 'minus', title: 'Do not disturb' }}
+    />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'red', icon: 'minus', title: 'Do not disturb' }}
+      status={{ state: 'warning', icon: 'clock', title: 'Away' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'yellow', icon: 'clock', title: 'Away' }}
+      status={{ state: 'error', title: 'Offline' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'grey', title: 'Offline' }}
+      status={{ state: 'unknown', title: 'Offline' }}
     />
     &emsp;
   </div>
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index fdc128042c..4361d27cc9 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -76,7 +76,8 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
         {Icon.create(icon, {
           defaultProps: {
             size: 'tiny',
-            variables: { color: 'white' }, // This is temporary. There is a ToDo to use icon's text/fill color for box-shadow, currently it uses color
+            // HOW DO I GET THE COLOR FROM statusStyles???
+            // variables: { color: 'red' }, // This is temporary. There is a ToDo to use icon's text/fill color for box-shadow, currently it uses color
             xSpacing: 'none',
             render: renderIcon,
           },
diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts
index 70bdc5be5b..1c4a6d0f78 100644
--- a/src/themes/teams-dark/components/Avatar/avatarStyles.ts
+++ b/src/themes/teams-dark/components/Avatar/avatarStyles.ts
@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
 
-const avatarStyles: IComponentPartStylesInput<IAvatarPropsWithDefaults, any> = {
+const avatarStyles: ComponentSlotStylesInput<AvatarPropsWithDefaults, any> = {
   root: ({ props: { size } }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(size)
     return {
diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts
index a932a43e97..8d3e7ceb31 100644
--- a/src/themes/teams-dark/components/Status/statusStyles.ts
+++ b/src/themes/teams-dark/components/Status/statusStyles.ts
@@ -1,9 +1,9 @@
 import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IStatusPropsWithDefaults } from '../../../../components/Status/Status'
-import { IStatusVariables } from './statusVariables'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
+import { StatusVariables } from './statusVariables'
 
-const getBackgroundColor = (state: string, variables: IStatusVariables) => {
+const getBackgroundColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
       return variables.successBackgroundColor
@@ -19,7 +19,7 @@ const getBackgroundColor = (state: string, variables: IStatusVariables) => {
   }
 }
 
-const getTextColor = (state: string, variables: IStatusVariables) => {
+const getTextColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
       return variables.successTextColor
@@ -35,7 +35,7 @@ const getTextColor = (state: string, variables: IStatusVariables) => {
   }
 }
 
-const statusStyles: IComponentPartStylesInput<IStatusPropsWithDefaults, IStatusVariables> = {
+const statusStyles: ComponentSlotStylesInput<StatusPropsWithDefaults, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
     return {
diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts
index 0cfacbd803..df290a12eb 100644
--- a/src/themes/teams-dark/components/Status/statusVariables.ts
+++ b/src/themes/teams-dark/components/Status/statusVariables.ts
@@ -1,4 +1,4 @@
-export interface IStatusVariables {
+export interface StatusVariables {
   borderColor: string
   borderWidth: number
   successBackgroundColor: string
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
index 70bdc5be5b..1c4a6d0f78 100644
--- a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
 
-const avatarStyles: IComponentPartStylesInput<IAvatarPropsWithDefaults, any> = {
+const avatarStyles: ComponentSlotStylesInput<AvatarPropsWithDefaults, any> = {
   root: ({ props: { size } }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(size)
     return {
diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts
index a932a43e97..8d3e7ceb31 100644
--- a/src/themes/teams-high-contrast/components/Status/statusStyles.ts
+++ b/src/themes/teams-high-contrast/components/Status/statusStyles.ts
@@ -1,9 +1,9 @@
 import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IStatusPropsWithDefaults } from '../../../../components/Status/Status'
-import { IStatusVariables } from './statusVariables'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
+import { StatusVariables } from './statusVariables'
 
-const getBackgroundColor = (state: string, variables: IStatusVariables) => {
+const getBackgroundColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
       return variables.successBackgroundColor
@@ -19,7 +19,7 @@ const getBackgroundColor = (state: string, variables: IStatusVariables) => {
   }
 }
 
-const getTextColor = (state: string, variables: IStatusVariables) => {
+const getTextColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
       return variables.successTextColor
@@ -35,7 +35,7 @@ const getTextColor = (state: string, variables: IStatusVariables) => {
   }
 }
 
-const statusStyles: IComponentPartStylesInput<IStatusPropsWithDefaults, IStatusVariables> = {
+const statusStyles: ComponentSlotStylesInput<StatusPropsWithDefaults, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
     return {
diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts
index 0cfacbd803..df290a12eb 100644
--- a/src/themes/teams-high-contrast/components/Status/statusVariables.ts
+++ b/src/themes/teams-high-contrast/components/Status/statusVariables.ts
@@ -1,4 +1,4 @@
-export interface IStatusVariables {
+export interface StatusVariables {
   borderColor: string
   borderWidth: number
   successBackgroundColor: string
diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts
index 47d3776e14..f1bfdef030 100644
--- a/src/themes/teams-high-contrast/siteVariables.ts
+++ b/src/themes/teams-high-contrast/siteVariables.ts
@@ -12,6 +12,20 @@ export const accessibleCyan = '#1aebff'
 export const red = '#f00'
 export const green04 = green
 
+//
+// STATUS COLORS
+//
+export const successStatusBackgroundColor = white
+export const successStatusTextColor = black
+export const infoStatusBackgroundColor = white
+export const infoStatusTextColor = black
+export const warningStatusBackgroundColor = white
+export const warningStatusTextColor = black
+export const errorStatusBackgroundColor = white
+export const errorStatusTextColor = black
+export const unknownStatusBackgroundColor = white
+export const unknownStatusTextColor = black
+
 //
 // SEMANTIC ASSIGNMENTS
 //

From 0a3b556f03ec384ae6cc56eb7ae622800fb41c6c Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 23 Oct 2018 14:15:58 -0700
Subject: [PATCH 3/9] pass through styles variables and classes for icon in
 status indicator

---
 src/components/Status/Status.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index 4361d27cc9..c8a6a1c846 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -69,15 +69,16 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
     state: 'unknown',
   }
 
-  renderComponent({ ElementType, classes, rest, styles }) {
+  renderComponent({ ElementType, classes, rest, variables, styles }) {
     const { icon, renderIcon } = this.props as StatusPropsWithDefaults
     return (
       <ElementType {...rest} className={classes.root}>
         {Icon.create(icon, {
           defaultProps: {
             size: 'tiny',
-            // HOW DO I GET THE COLOR FROM statusStyles???
-            // variables: { color: 'red' }, // This is temporary. There is a ToDo to use icon's text/fill color for box-shadow, currently it uses color
+            styles: styles.icon,
+            variables: variables.icon,
+            className: classes.icon,
             xSpacing: 'none',
             render: renderIcon,
           },

From 15d9245af51e31d6722188f48b2e56b988e95e0e Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 23 Oct 2018 15:52:54 -0700
Subject: [PATCH 4/9] reverting changes for avatar example shorthand.

---
 .../AvatarExampleStatus.shorthand.tsx          | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index c33422a86b..0d2d497615 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -5,32 +5,24 @@ const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'success', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'check', title: 'Available' }}
     />
     &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'error', title: 'Busy' }}
-    />
-    &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'error', icon: 'minus', title: 'Do not disturb' }}
-    />
+    <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'warning', icon: 'clock', title: 'Away' }}
+      status={{ color: 'red', icon: 'minus', title: 'Do not disturb' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'error', title: 'Offline' }}
+      status={{ color: 'yellow', icon: 'clock', title: 'Away' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ state: 'unknown', title: 'Offline' }}
+      status={{ color: 'grey', title: 'Offline' }}
     />
     &emsp;
   </div>

From 6ec6b914e385314d1c610351f0f6d1debb2704ab Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Thu, 25 Oct 2018 10:38:45 -0700
Subject: [PATCH 5/9] changing language for usage example. giving contrast
 theme status colors. fixing contrast theme status border width.

---
 .../Avatar/Usage/AvatarUsageExample.shorthand.tsx        | 2 +-
 .../components/Avatar/avatarVariables.ts                 | 2 +-
 src/themes/teams-high-contrast/siteVariables.ts          | 9 +++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
index c38ff4d200..6cf03f6f1a 100644
--- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
@@ -36,7 +36,7 @@ const AvatarUsageExampleShorthand = () => (
         />
       </div>
     </div>
-    Incorrect, unless in Contrast theme:
+    Incorrect (Border should not be visible, unless in Contrast theme):
     <div>
       <div style={{ backgroundColor: 'violet', padding: '1rem', display: 'inline-block' }}>
         <Avatar name="John Doe (Software Developer)" status={status} />
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
index 893b67764b..2f37ca926c 100644
--- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
@@ -5,5 +5,5 @@ export interface IAvatarVariables {
 
 export default siteVariables => ({
   statusBorderColor: siteVariables.black,
-  statusBorderWidth: 3,
+  statusBorderWidth: 2,
 })
diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts
index f1bfdef030..00ffad9f0e 100644
--- a/src/themes/teams-high-contrast/siteVariables.ts
+++ b/src/themes/teams-high-contrast/siteVariables.ts
@@ -15,13 +15,14 @@ export const green04 = green
 //
 // STATUS COLORS
 //
-export const successStatusBackgroundColor = white
+// TODO: bcalvery - color alone is not an adequate means for differentiating in an accessible way.
+export const successStatusBackgroundColor = accessibleGreen
 export const successStatusTextColor = black
-export const infoStatusBackgroundColor = white
+export const infoStatusBackgroundColor = accessibleCyan
 export const infoStatusTextColor = black
-export const warningStatusBackgroundColor = white
+export const warningStatusBackgroundColor = accessibleYellow
 export const warningStatusTextColor = black
-export const errorStatusBackgroundColor = white
+export const errorStatusBackgroundColor = red
 export const errorStatusTextColor = black
 export const unknownStatusBackgroundColor = white
 export const unknownStatusTextColor = black

From 48e7aa11d48339a31fe9862666c37239d52aa1bf Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 30 Oct 2018 14:29:15 -0700
Subject: [PATCH 6/9] changes based on Roman's comments.

---
 src/components/Status/Status.tsx              |  1 -
 src/themes/teams-dark/componentVariables.ts   |  4 --
 .../components/Avatar/avatarStyles.ts         | 40 ------------
 .../components/Avatar/avatarVariables.ts      |  9 ---
 .../components/Status/statusStyles.ts         | 63 -------------------
 .../components/Status/statusVariables.ts      | 29 ---------
 .../teams-high-contrast/componentVariables.ts |  4 --
 .../components/Avatar/avatarStyles.ts         | 40 ------------
 .../components/Avatar/avatarVariables.ts      |  9 ---
 .../components/Status/statusStyles.ts         | 63 -------------------
 .../components/Status/statusVariables.ts      | 29 ---------
 src/themes/teams-high-contrast/index.ts       | 10 ++-
 12 files changed, 9 insertions(+), 292 deletions(-)
 delete mode 100644 src/themes/teams-dark/components/Avatar/avatarStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Avatar/avatarVariables.ts
 delete mode 100644 src/themes/teams-dark/components/Status/statusStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Status/statusVariables.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Status/statusStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Status/statusVariables.ts

diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index c8a6a1c846..f54dcb36b3 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -78,7 +78,6 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
             size: 'tiny',
             styles: styles.icon,
             variables: variables.icon,
-            className: classes.icon,
             xSpacing: 'none',
             render: renderIcon,
           },
diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
index 9a3f944318..8e388747b4 100644
--- a/src/themes/teams-dark/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,9 +1,5 @@
-export { default as Avatar } from './components/Avatar/avatarVariables'
-
 export { default as Button } from './components/Button/buttonVariables'
 
 export { default as Divider } from './components/Divider/dividerVariables'
 
-export { default as Status } from './components/Status/statusVariables'
-
 export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-dark/components/Avatar/avatarStyles.ts b/src/themes/teams-dark/components/Avatar/avatarStyles.ts
deleted file mode 100644
index 1c4a6d0f78..0000000000
--- a/src/themes/teams-dark/components/Avatar/avatarStyles.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
-
-const avatarStyles: ComponentSlotStylesInput<AvatarPropsWithDefaults, any> = {
-  root: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size)
-    return {
-      position: 'relative',
-      backgroundColor: 'inherit',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      height: sizeInRem,
-      width: sizeInRem,
-    }
-  },
-  image: (): ICSSInJSStyle => ({
-    verticalAlign: 'top',
-  }),
-  label: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size)
-    return {
-      display: 'inline-block',
-      width: sizeInRem,
-      height: sizeInRem,
-      lineHeight: sizeInRem,
-      fontSize: pxToRem(size / 2.333),
-      verticalAlign: 'top',
-      textAlign: 'center',
-      padding: '0px',
-    }
-  },
-  status: ({ props, variables }): ICSSInJSStyle => ({
-    position: 'absolute',
-    bottom: `-${variables.statusBorderWidth}px`,
-    right: `-${variables.statusBorderWidth}px`,
-  }),
-}
-
-export default avatarStyles
diff --git a/src/themes/teams-dark/components/Avatar/avatarVariables.ts b/src/themes/teams-dark/components/Avatar/avatarVariables.ts
deleted file mode 100644
index f03014a8d6..0000000000
--- a/src/themes/teams-dark/components/Avatar/avatarVariables.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface IAvatarVariables {
-  statusBorderColor: string
-  statusBorderWidth: number
-}
-
-export default siteVariables => ({
-  statusBorderColor: siteVariables.bodyBackground,
-  statusBorderWidth: 2,
-})
diff --git a/src/themes/teams-dark/components/Status/statusStyles.ts b/src/themes/teams-dark/components/Status/statusStyles.ts
deleted file mode 100644
index 8d3e7ceb31..0000000000
--- a/src/themes/teams-dark/components/Status/statusStyles.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
-import { StatusVariables } from './statusVariables'
-
-const getBackgroundColor = (state: string, variables: StatusVariables) => {
-  switch (state) {
-    case 'success':
-      return variables.successBackgroundColor
-    case 'info':
-      return variables.infoBackgroundColor
-    case 'warning':
-      return variables.warningBackgroundColor
-    case 'error':
-      return variables.errorBackgroundColor
-    case 'unknown':
-    default:
-      return variables.defaultBackgroundColor
-  }
-}
-
-const getTextColor = (state: string, variables: StatusVariables) => {
-  switch (state) {
-    case 'success':
-      return variables.successTextColor
-    case 'info':
-      return variables.infoTextColor
-    case 'warning':
-      return variables.warningTextColor
-    case 'error':
-      return variables.errorTextColor
-    case 'unknown':
-    default:
-      return variables.defaultTextColor
-  }
-}
-
-const statusStyles: ComponentSlotStylesInput<StatusPropsWithDefaults, StatusVariables> = {
-  root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
-    return {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: sizeInRem,
-      width: sizeInRem,
-      verticalAlign: 'middle',
-      borderRadius: '9999px',
-      ...(variables.borderColor && {
-        borderColor: variables.borderColor,
-        borderWidth: pxToRem(variables.borderWidth),
-        borderStyle: 'solid',
-      }),
-      backgroundColor: color || getBackgroundColor(state, variables),
-    }
-  },
-
-  icon: ({ props: { state }, variables }): ICSSInJSStyle => ({
-    color: getTextColor(state, variables),
-  }),
-}
-
-export default statusStyles
diff --git a/src/themes/teams-dark/components/Status/statusVariables.ts b/src/themes/teams-dark/components/Status/statusVariables.ts
deleted file mode 100644
index df290a12eb..0000000000
--- a/src/themes/teams-dark/components/Status/statusVariables.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export interface StatusVariables {
-  borderColor: string
-  borderWidth: number
-  successBackgroundColor: string
-  successTextColor: string
-  infoBackgroundColor: string
-  infoTextColor: string
-  warningBackgroundColor: string
-  warningTextColor: string
-  errorBackgroundColor: string
-  errorTextColor: string
-  defaultBackgroundColor: string
-  defaultTextColor: string
-}
-
-export default siteVariables => ({
-  borderColor: undefined,
-  borderWidth: 2,
-  successBackgroundColor: siteVariables.successStatusBackgroundColor,
-  successTextColor: siteVariables.successStatusTextColor,
-  infoBackgroundColor: siteVariables.infoStatusBackgroundColor,
-  infoTextColor: siteVariables.infoStatusTextColor,
-  warningBackgroundColor: siteVariables.warningStatusBackgroundColor,
-  warningTextColor: siteVariables.warningStatusTextColor,
-  errorBackgroundColor: siteVariables.errorStatusBackgroundColor,
-  errorTextColor: siteVariables.errorStatusTextColor,
-  defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor,
-  defaultTextColor: siteVariables.unknownStatusTextColor,
-})
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index d39119ee3f..1a2dab13a8 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,7 +1,3 @@
-export { default as Avatar } from './components/Avatar/avatarVariables'
-
 export { default as Divider } from './components/Divider/dividerVariables'
 
-export { default as Status } from './components/Status/statusVariables'
-
 export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts b/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
deleted file mode 100644
index 1c4a6d0f78..0000000000
--- a/src/themes/teams-high-contrast/components/Avatar/avatarStyles.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
-
-const avatarStyles: ComponentSlotStylesInput<AvatarPropsWithDefaults, any> = {
-  root: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size)
-    return {
-      position: 'relative',
-      backgroundColor: 'inherit',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      height: sizeInRem,
-      width: sizeInRem,
-    }
-  },
-  image: (): ICSSInJSStyle => ({
-    verticalAlign: 'top',
-  }),
-  label: ({ props: { size } }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size)
-    return {
-      display: 'inline-block',
-      width: sizeInRem,
-      height: sizeInRem,
-      lineHeight: sizeInRem,
-      fontSize: pxToRem(size / 2.333),
-      verticalAlign: 'top',
-      textAlign: 'center',
-      padding: '0px',
-    }
-  },
-  status: ({ props, variables }): ICSSInJSStyle => ({
-    position: 'absolute',
-    bottom: `-${variables.statusBorderWidth}px`,
-    right: `-${variables.statusBorderWidth}px`,
-  }),
-}
-
-export default avatarStyles
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
deleted file mode 100644
index 2f37ca926c..0000000000
--- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface IAvatarVariables {
-  statusBorderColor: string
-  statusBorderWidth: number
-}
-
-export default siteVariables => ({
-  statusBorderColor: siteVariables.black,
-  statusBorderWidth: 2,
-})
diff --git a/src/themes/teams-high-contrast/components/Status/statusStyles.ts b/src/themes/teams-high-contrast/components/Status/statusStyles.ts
deleted file mode 100644
index 8d3e7ceb31..0000000000
--- a/src/themes/teams-high-contrast/components/Status/statusStyles.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
-import { StatusVariables } from './statusVariables'
-
-const getBackgroundColor = (state: string, variables: StatusVariables) => {
-  switch (state) {
-    case 'success':
-      return variables.successBackgroundColor
-    case 'info':
-      return variables.infoBackgroundColor
-    case 'warning':
-      return variables.warningBackgroundColor
-    case 'error':
-      return variables.errorBackgroundColor
-    case 'unknown':
-    default:
-      return variables.defaultBackgroundColor
-  }
-}
-
-const getTextColor = (state: string, variables: StatusVariables) => {
-  switch (state) {
-    case 'success':
-      return variables.successTextColor
-    case 'info':
-      return variables.infoTextColor
-    case 'warning':
-      return variables.warningTextColor
-    case 'error':
-      return variables.errorTextColor
-    case 'unknown':
-    default:
-      return variables.defaultTextColor
-  }
-}
-
-const statusStyles: ComponentSlotStylesInput<StatusPropsWithDefaults, StatusVariables> = {
-  root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
-    const sizeInRem = pxToRem(size + 2 * ((variables.borderColor && variables.borderWidth) || 0))
-    return {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: sizeInRem,
-      width: sizeInRem,
-      verticalAlign: 'middle',
-      borderRadius: '9999px',
-      ...(variables.borderColor && {
-        borderColor: variables.borderColor,
-        borderWidth: pxToRem(variables.borderWidth),
-        borderStyle: 'solid',
-      }),
-      backgroundColor: color || getBackgroundColor(state, variables),
-    }
-  },
-
-  icon: ({ props: { state }, variables }): ICSSInJSStyle => ({
-    color: getTextColor(state, variables),
-  }),
-}
-
-export default statusStyles
diff --git a/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/src/themes/teams-high-contrast/components/Status/statusVariables.ts
deleted file mode 100644
index df290a12eb..0000000000
--- a/src/themes/teams-high-contrast/components/Status/statusVariables.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export interface StatusVariables {
-  borderColor: string
-  borderWidth: number
-  successBackgroundColor: string
-  successTextColor: string
-  infoBackgroundColor: string
-  infoTextColor: string
-  warningBackgroundColor: string
-  warningTextColor: string
-  errorBackgroundColor: string
-  errorTextColor: string
-  defaultBackgroundColor: string
-  defaultTextColor: string
-}
-
-export default siteVariables => ({
-  borderColor: undefined,
-  borderWidth: 2,
-  successBackgroundColor: siteVariables.successStatusBackgroundColor,
-  successTextColor: siteVariables.successStatusTextColor,
-  infoBackgroundColor: siteVariables.infoStatusBackgroundColor,
-  infoTextColor: siteVariables.infoStatusTextColor,
-  warningBackgroundColor: siteVariables.warningStatusBackgroundColor,
-  warningTextColor: siteVariables.warningStatusTextColor,
-  errorBackgroundColor: siteVariables.errorStatusBackgroundColor,
-  errorTextColor: siteVariables.errorStatusTextColor,
-  defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor,
-  defaultTextColor: siteVariables.unknownStatusTextColor,
-})
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index 4cd2c1e2b5..37f065a915 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -3,4 +3,12 @@ import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import teams from '../teams'
 
-export default mergeThemes(teams, { siteVariables, componentVariables })
+const darkThemeOverrides = {
+  componentVariables: {
+    Avatar: {
+      statusBorderColor: siteVariables.black,
+    },
+  },
+}
+
+export default mergeThemes(teams, { siteVariables, componentVariables }, darkThemeOverrides)

From a26b31994c666cf65cdf031941606e8a92c82a83 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 30 Oct 2018 14:39:31 -0700
Subject: [PATCH 7/9] undoing unnecessary file changes

---
 src/themes/teams-dark/componentVariables.ts          | 4 +---
 src/themes/teams-high-contrast/componentVariables.ts | 3 +--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
index 8e388747b4..34c15933b6 100644
--- a/src/themes/teams-dark/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,5 +1,3 @@
 export { default as Button } from './components/Button/buttonVariables'
-
-export { default as Divider } from './components/Divider/dividerVariables'
-
 export { default as Text } from './components/Text/textVariables'
+export { default as Divider } from './components/Divider/dividerVariables'
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index 1a2dab13a8..f975eed9e2 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,3 +1,2 @@
-export { default as Divider } from './components/Divider/dividerVariables'
-
 export { default as Text } from './components/Text/textVariables'
+export { default as Divider } from './components/Divider/dividerVariables'

From afe1a9965e3c9d37eb4aae762dfefb03fa31e6f8 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 31 Oct 2018 03:38:55 +0300
Subject: [PATCH 8/9] remove duplication in theme variations

---
 .../components/Button/buttonVariables.ts      | 58 +------------------
 .../components/Divider/dividerVariables.ts    | 13 +++--
 .../components/Text/textVariables.ts          | 34 ++++-------
 .../teams-high-contrast/componentVariables.ts |  3 +-
 .../components/Avatar/avatarVariables.ts      |  6 ++
 .../components/Divider/dividerVariables.ts    | 15 ++---
 .../components/Text/textVariables.ts          | 34 ++++-------
 src/themes/teams-high-contrast/index.ts       | 10 +---
 .../components/Avatar/avatarVariables.ts      |  4 +-
 .../components/Divider/dividerVariables.ts    | 12 +++-
 types/utils.d.ts                              |  2 +
 11 files changed, 66 insertions(+), 125 deletions(-)
 create mode 100644 src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts

diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts
index 2cb5935cc6..1c7dd1e97b 100644
--- a/src/themes/teams-dark/components/Button/buttonVariables.ts
+++ b/src/themes/teams-dark/components/Button/buttonVariables.ts
@@ -1,59 +1,7 @@
-export interface ButtonVariables {
-  [key: string]: string | number
+import { ButtonVariables } from '../../../teams/components/Button/buttonVariables'
+import { Partial } from 'types/utils'
 
-  color: string
-  colorActive: string
-  colorHover: string
-  colorFocus: string
-  colorDisabled: string
-  backgroundColor: string
-  backgroundColorActive: string
-  backgroundColorHover: string
-  backgroundColorFocus: string
-  backgroundColorDisabled: string
-  borderColor: string
-  borderColorActive: string
-  borderColorHover: string
-  borderColorFocus: string
-  borderColorFocusIndicator: string
-  borderColorDisabled: string
-
-  primaryColor: string
-  primaryBackgroundColor: string
-  primaryBackgroundColorActive: string
-  primaryBackgroundColorHover: string
-  primaryBackgroundColorFocus: string
-  primaryBorderColor: string
-  primaryBorderColorActive: string
-  primaryBorderColorHover: string
-  primaryBorderColorFocus: string
-  primaryBorderColorFocusIndicator: string
-
-  primaryCircularBorderColorFocusIndicator: string
-
-  circularColor: string
-  circularColorActive: string
-  circularBackgroundColor: string
-  circularBackgroundColorActive: string
-  circularBackgroundColorHover: string
-  circularBackgroundColorFocus: string
-  circularBorderColor: string
-  circularBorderColorActive: string
-  circularBorderColorHover: string
-  circularBorderColorFocus: string
-  circularBorderColorFocusIndicator: string
-
-  textColor: string
-  textColorHover: string
-  textPrimaryColor: string
-  textPrimaryColorHover: string
-  textSecondaryColor: string
-  textSecondaryColorHover: string
-
-  boxShadow: string
-}
-
-export default (siteVars: any): ButtonVariables => {
+export default (siteVars: any): Partial<ButtonVariables> => {
   return {
     color: siteVars.white,
     colorActive: siteVars.white,
diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts
index a94ed81c1f..6178d5f597 100644
--- a/src/themes/teams-dark/components/Divider/dividerVariables.ts
+++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts
@@ -1,6 +1,7 @@
-export default (siteVars: any) => {
-  return {
-    primaryColor: siteVars.brand06,
-    textColor: siteVars.gray02,
-  }
-}
+import { DividerVariables } from '../../../teams/components/Divider/dividerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<DividerVariables> => ({
+  primaryColor: siteVars.brand06,
+  textColor: siteVars.gray02,
+})
diff --git a/src/themes/teams-dark/components/Text/textVariables.ts b/src/themes/teams-dark/components/Text/textVariables.ts
index 60735f9659..31cc44a4ce 100644
--- a/src/themes/teams-dark/components/Text/textVariables.ts
+++ b/src/themes/teams-dark/components/Text/textVariables.ts
@@ -1,23 +1,13 @@
-export interface TextVariables {
-  atMentionMeColor: string
-  atMentionOtherColor: string
-  disabledColor: string
-  errorColor: string
-  importantColor: string
-  successColor: string
-  timestampColor: string
-  timestampHoverColor: string
-}
+import { TextVariables } from '../../../teams/components/Text/textVariables'
+import { Partial } from 'types/utils'
 
-export default (siteVariables): TextVariables => {
-  return {
-    atMentionMeColor: siteVariables.orange04,
-    atMentionOtherColor: siteVariables.brand06,
-    disabledColor: siteVariables.gray06,
-    errorColor: siteVariables.red,
-    importantColor: siteVariables.red,
-    successColor: siteVariables.green04,
-    timestampColor: siteVariables.gray04,
-    timestampHoverColor: siteVariables.gray02,
-  }
-}
+export default (siteVariables): Partial<TextVariables> => ({
+  atMentionMeColor: siteVariables.orange04,
+  atMentionOtherColor: siteVariables.brand06,
+  disabledColor: siteVariables.gray06,
+  errorColor: siteVariables.red,
+  importantColor: siteVariables.red,
+  successColor: siteVariables.green04,
+  timestampColor: siteVariables.gray04,
+  timestampHoverColor: siteVariables.gray02,
+})
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index f975eed9e2..50aa18654c 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,2 +1,3 @@
-export { default as Text } from './components/Text/textVariables'
+export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
new file mode 100644
index 0000000000..4780286ced
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
@@ -0,0 +1,6 @@
+import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVariables: any): Partial<AvatarVariables> => ({
+  statusBorderColor: siteVariables.black,
+})
diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
index 8df71f9082..193a92452d 100644
--- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
+++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
@@ -1,7 +1,8 @@
-export default (siteVars: any) => {
-  return {
-    dividerColor: siteVars.white,
-    textColor: siteVars.white,
-    primaryColor: siteVars.white,
-  }
-}
+import { DividerVariables } from '../../../teams/components/Divider/dividerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<DividerVariables> => ({
+  dividerColor: siteVars.white,
+  textColor: siteVars.white,
+  primaryColor: siteVars.white,
+})
diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts
index d66dde94cc..aa425fbd5d 100644
--- a/src/themes/teams-high-contrast/components/Text/textVariables.ts
+++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts
@@ -1,23 +1,13 @@
-export interface TextVariables {
-  atMentionMeColor: string
-  atMentionOtherColor: string
-  disabledColor: string
-  errorColor: string
-  importantColor: string
-  successColor: string
-  timestampColor: string
-  timestampHoverColor: string
-}
+import { TextVariables } from '../../../teams/components/Text/textVariables'
+import { Partial } from 'types/utils'
 
-export default (siteVariables): TextVariables => {
-  return {
-    atMentionMeColor: siteVariables.accessibleYellow,
-    atMentionOtherColor: siteVariables.accessibleYellow,
-    disabledColor: siteVariables.accessibleGreen,
-    errorColor: siteVariables.red,
-    importantColor: siteVariables.red,
-    successColor: siteVariables.green04,
-    timestampColor: siteVariables.white,
-    timestampHoverColor: siteVariables.white,
-  }
-}
+export default (siteVariables): Partial<TextVariables> => ({
+  atMentionMeColor: siteVariables.accessibleYellow,
+  atMentionOtherColor: siteVariables.accessibleYellow,
+  disabledColor: siteVariables.accessibleGreen,
+  errorColor: siteVariables.red,
+  importantColor: siteVariables.red,
+  successColor: siteVariables.green04,
+  timestampColor: siteVariables.white,
+  timestampHoverColor: siteVariables.white,
+})
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index 37f065a915..4cd2c1e2b5 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -3,12 +3,4 @@ import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import teams from '../teams'
 
-const darkThemeOverrides = {
-  componentVariables: {
-    Avatar: {
-      statusBorderColor: siteVariables.black,
-    },
-  },
-}
-
-export default mergeThemes(teams, { siteVariables, componentVariables }, darkThemeOverrides)
+export default mergeThemes(teams, { siteVariables, componentVariables })
diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts
index f03014a8d6..87bf062513 100644
--- a/src/themes/teams/components/Avatar/avatarVariables.ts
+++ b/src/themes/teams/components/Avatar/avatarVariables.ts
@@ -1,9 +1,9 @@
-export interface IAvatarVariables {
+export interface AvatarVariables {
   statusBorderColor: string
   statusBorderWidth: number
 }
 
-export default siteVariables => ({
+export default (siteVariables): AvatarVariables => ({
   statusBorderColor: siteVariables.bodyBackground,
   statusBorderWidth: 2,
 })
diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts
index f6b675d631..b363fbd31f 100644
--- a/src/themes/teams/components/Divider/dividerVariables.ts
+++ b/src/themes/teams/components/Divider/dividerVariables.ts
@@ -1,6 +1,16 @@
 import { pxToRem } from '../../../../lib'
 
-export default (siteVars: any) => {
+export interface DividerVariables {
+  dividerColor: string
+  textColor: string
+  textFontSize: string
+  textLineHeight: string
+  primaryColor: string
+  importantFontWeight: string
+  dividerPadding: string
+}
+
+export default (siteVars: any): DividerVariables => {
   return {
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,
diff --git a/types/utils.d.ts b/types/utils.d.ts
index 5a6b3b0569..b4bfde157e 100644
--- a/types/utils.d.ts
+++ b/types/utils.d.ts
@@ -8,6 +8,8 @@ export type Extendable<T> = T & {
   [key: string]: any
 }
 
+export type Partial<T> = { [Key in keyof T]?: T[Key] }
+
 export type ArgOf<T> = T extends (arg: infer TArg) => any ? TArg : never
 export type ResultOf<T> = T extends (...arg: any[]) => infer TResult ? TResult : never
 

From 110fd799428c6ddc69b9b5fe3de41e982e5741c9 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Wed, 31 Oct 2018 13:05:17 -0700
Subject: [PATCH 9/9] Added changelog entries

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6583b9c2d6..e7e2e0c714 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,12 +25,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add warning for rendering components outside provider @Bugaa92 ([#378](https://github.com/stardust-ui/react/pull/378))
 - Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384))
 - Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402))
+- Adding dark theme and contrast theme for Avatar and Status Indicator @bcalvery ([#373](https://github.com/stardust-ui/react/pull/373))
 
 ### Features
 - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
 - Add Focus Trap Zone @sophieH29 ([#239](https://github.com/stardust-ui/react/pull/239))
 - Add compose icons to Teams theme @joheredi ([#396](https://github.com/stardust-ui/react/pull/396))
 - Expose access to input element of `Input` via `inputRef` prop @silviuavram ([#377](https://github.com/stardust-ui/react/pull/377))
+- Adding `Partial` utility to enable partial Variables implementations @kuzhelov ([#373](https://github.com/stardust-ui/react/pull/373))
 
 ### Documentation
 - Add `Provider` examples @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))