feat(colors): add red color scheme in Teams theme (#1353)

mnajdova · web-flow · commit 24337ce447de · 2019-05-20T16:03:35.000+02:00
* -added red color scheme
-added new colors in default color scheme
-refactored label variables to use inverted color scheme

* -added labelVariables for dark and HC themes

* -added transparent colors in the color palette

* -reverted the inverted added foreground and background colors in default scheme

* -added typings on the invert color scheme function

* -reverted changes for inverted color scheme

* -updated changelog
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Aligned link styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
 - Export `qna` and `yammer` SVG icons for `Teams` theme @manindr ([#1325](https://github.com/stardust-ui/react/pull/1325))
 - Add FontAwesome theme @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
+- Add red color scheme in Teams theme @mnajdova ([#1353](https://github.com/stardust-ui/react/pull/1353))
 
 ### Documentation
 - Clearly identify Slots in DocSite @hughreeling ([#1292](https://github.com/stardust-ui/react/pull/1292))
diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx
@@ -59,7 +59,7 @@ const ColorPalette = () => (
     }}
   >
     <ProviderConsumer
-      render={({ siteVariables: { colors, emphasisColors, naturalColors } }) => (
+      render={({ siteVariables: { colors, emphasisColors, naturalColors, transparentColors } }) => (
         <DocPage title="Colors">
           <Header as="h2">Introduction</Header>
           <p>
@@ -140,11 +140,14 @@ const ColorPalette = () => (
           <Header as="h3">All colors</Header>
           <p>This are all colors available in the color palette.</p>
           <Grid columns={2} variables={{ gridGap: '2rem' }}>
-            {_.map({ ...emphasisColors, ...naturalColors }, (variants, color) => (
-              <div key={color}>
-                <ColorVariants name={color} />
-              </div>
-            ))}
+            {_.map(
+              { ...emphasisColors, ...naturalColors, ...transparentColors },
+              (variants, color) => (
+                <div key={color}>
+                  <ColorVariants name={color} />
+                </div>
+              ),
+            )}
           </Grid>
 
           <Header as="h2" content="Color scheme" />
diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts
@@ -40,8 +40,8 @@ export const colorScheme: ColorSchemeMapping = {
   default: {
     foreground: colors.white,
     foreground1: colors.grey[250],
-    foreground3: colors.grey[300],
-    foreground4: colors.white,
+    foreground2: colors.grey[300],
+    foreground3: colors.white,
 
     background: colors.grey[650],
     background1: colors.grey[700],
@@ -241,23 +241,51 @@ export const colorScheme: ColorSchemeMapping = {
     shadowDisabled: colors.white,
   },
   grey: createColorScheme('grey', { foreground: colors.grey[250] }),
-  green: createColorScheme('green'),
-  orange: createColorScheme('orange', {
-    background: colors.black,
-    foregroundHover: colors.black,
-    foregroundActive: colors.black,
-    foregroundFocus: colors.black,
-    foregroundFocusWithin: colors.black,
-    foregroundDisabled: colors.black,
+  green: createColorScheme('green', {
+    background: colors.white,
   }),
+  orange: createColorScheme('orange'),
   pink: createColorScheme('pink'),
-  red: createColorScheme('red'),
+  red: {
+    foreground: colors.red[200],
+    foreground1: colors.white,
+    foreground2: colors.grey[800],
+
+    background: colors.red[300],
+    background1: colors.red[800],
+    background2: colors.ruby[500],
+    background3: colors.red[400],
+
+    border: colors.red[900],
+
+    shadow: undefined,
+
+    foregroundHover: colors.white,
+    backgroundHover: colors.ruby[600],
+    borderHover: undefined,
+    shadowHover: undefined,
+
+    foregroundActive: undefined,
+    backgroundActive: undefined,
+    borderActive: undefined,
+    shadowActive: undefined,
+
+    foregroundFocus: undefined,
+    backgroundFocus: undefined,
+    borderFocus: undefined,
+    shadowFocus: undefined,
+
+    foregroundPressed: colors.white,
+    backgroundPressed: colors.ruby[600],
+    borderPressed: undefined,
+    shadowPressed: undefined,
+
+    foregroundDisabled: undefined,
+    backgroundDisabled: undefined,
+    borderDisabled: undefined,
+    shadowDisabled: undefined,
+  },
   yellow: createColorScheme('yellow', {
-    background: colors.black,
-    foregroundHover: colors.black,
-    foregroundActive: colors.black,
-    foregroundFocus: colors.black,
-    foregroundFocusWithin: colors.black,
-    foregroundDisabled: colors.black,
+    background: colors.yellow[100],
   }),
 }
diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts
@@ -17,5 +17,5 @@ export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
-
+export { default as Label } from './components/Label/labelVariables'
 export { default as PopupContent } from './components/Popup/popupContentVariables'
diff --git a/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts b/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts
@@ -0,0 +1,16 @@
+import { SiteVariablesPrepared } from '../../../types'
+import { LabelVariables } from '../../../teams/components/Label/labelVariables'
+import { extendColorScheme } from '../../../colorUtils'
+
+export default (siteVars: SiteVariablesPrepared): Partial<LabelVariables> => {
+  return {
+    colorScheme: extendColorScheme(siteVars.colorScheme, {
+      brand: {
+        background: siteVars.colorScheme.brand.foreground4,
+      },
+      red: {
+        background: siteVars.colorScheme.red.foreground1,
+      },
+    }),
+  }
+}
diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts
@@ -189,6 +189,44 @@ export const colorScheme: ColorSchemeMapping = {
   green: createColorScheme(),
   orange: createColorScheme(),
   pink: createColorScheme(),
-  red: createColorScheme(),
+  red: {
+    foreground: colors.white,
+    foreground1: colors.black,
+    foreground2: colors.black,
+
+    background: colors.white,
+    background1: colors.white,
+    background2: colors.black,
+    background3: colors.white,
+
+    border: colors.white,
+
+    shadow: undefined,
+
+    foregroundHover: colors.black,
+    backgroundHover: accessibleYellow,
+    borderHover: undefined,
+    shadowHover: undefined,
+
+    foregroundActive: undefined,
+    backgroundActive: undefined,
+    borderActive: undefined,
+    shadowActive: undefined,
+
+    foregroundFocus: undefined,
+    backgroundFocus: undefined,
+    borderFocus: undefined,
+    shadowFocus: undefined,
+
+    foregroundPressed: colors.black,
+    backgroundPressed: accessibleYellow,
+    borderPressed: undefined,
+    shadowPressed: undefined,
+
+    foregroundDisabled: undefined,
+    backgroundDisabled: undefined,
+    borderDisabled: undefined,
+    shadowDisabled: undefined,
+  },
   yellow: createColorScheme(),
 }
diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
@@ -17,3 +17,4 @@ export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
+export { default as Label } from './components/Label/labelVariables'
diff --git a/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts
@@ -0,0 +1,16 @@
+import { SiteVariablesPrepared } from '../../../types'
+import { LabelVariables } from '../../../teams/components/Label/labelVariables'
+import { extendColorScheme } from '../../../colorUtils'
+
+export default (siteVars: SiteVariablesPrepared): Partial<LabelVariables> => {
+  return {
+    colorScheme: extendColorScheme(siteVars.colorScheme, {
+      brand: {
+        background: siteVars.colorScheme.brand.foreground4,
+      },
+      red: {
+        background: siteVars.colorScheme.red.foreground1,
+      },
+    }),
+  }
+}
diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts
@@ -205,15 +205,6 @@ const createColorScheme = (color: string, customValues = {}) => {
   }
 }
 
-const lightColorOverrides = {
-  background: colors.black,
-  foregroundHover: colors.black,
-  foregroundActive: colors.black,
-  foregroundFocus: colors.black,
-  foregroundFocusWithin: colors.black,
-  foregroundDisabled: colors.black,
-}
-
 export const colorScheme: ColorSchemeMapping = {
   default: {
     foreground: colors.grey[750],
@@ -418,11 +409,53 @@ export const colorScheme: ColorSchemeMapping = {
     shadowDisabled: colors.white,
   },
   grey: createColorScheme('grey'),
-  green: createColorScheme('green'),
-  orange: createColorScheme('orange', lightColorOverrides),
+  green: createColorScheme('green', {
+    background: colors.white,
+  }),
+  orange: createColorScheme('orange'),
   pink: createColorScheme('pink'),
-  red: createColorScheme('red'),
-  yellow: createColorScheme('yellow', lightColorOverrides),
+  red: {
+    foreground: colors.red[400],
+    foreground1: colors.white,
+    foreground2: colors.white,
+
+    background: colors.red[400],
+    background1: colors.red[50],
+    background2: colors.ruby[500],
+    background3: colors.red[400],
+
+    border: colors.red[100],
+
+    shadow: undefined,
+
+    foregroundHover: colors.white,
+    backgroundHover: colors.ruby[600],
+    borderHover: undefined,
+    shadowHover: undefined,
+
+    foregroundActive: undefined,
+    backgroundActive: undefined,
+    borderActive: undefined,
+    shadowActive: undefined,
+
+    foregroundFocus: undefined,
+    backgroundFocus: undefined,
+    borderFocus: undefined,
+    shadowFocus: undefined,
+
+    foregroundPressed: colors.white,
+    backgroundPressed: colors.ruby[600],
+    borderPressed: undefined,
+    shadowPressed: undefined,
+
+    foregroundDisabled: undefined,
+    backgroundDisabled: undefined,
+    borderDisabled: undefined,
+    shadowDisabled: undefined,
+  },
+  yellow: createColorScheme('yellow', {
+    background: colors.yellow[100],
+  }),
 }
 
 export const availableColors = [
diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts
@@ -9,29 +9,27 @@ export interface LabelVariables {
   startPaddingLeft: string
   endPaddingRight: string
   height: string
-  iconColor: string
 }
 
 export default (siteVars: SiteVariablesPrepared): LabelVariables => {
-  const color = 'rgba(0, 0, 0, 0.6)'
-
   return {
     colorScheme: extendColorScheme(siteVars.colorScheme, {
+      // TODO use here some color scheme values, after the designs are delivered
       default: {
-        background: color,
+        background: 'rgba(0, 0, 0, 0.6)',
         foreground: 'rgb(232, 232, 232)',
       },
       brand: {
         background: siteVars.colorScheme.brand.foreground4,
       },
+      red: {
+        background: siteVars.colorScheme.red.foreground1,
+      },
     }),
     circularRadius: pxToRem(9999),
     padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`,
     startPaddingLeft: '0px',
     endPaddingRight: '0px',
     height: pxToRem(20),
-
-    // variables for 'icon' part
-    iconColor: color,
   }
 }
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
@@ -4,7 +4,14 @@ import { colors } from './colors'
 //
 // COLORS
 //
-export { colors, emphasisColors, naturalColors, primitiveColors, colorScheme } from './colors'
+export {
+  colors,
+  emphasisColors,
+  naturalColors,
+  primitiveColors,
+  colorScheme,
+  transparentColors,
+} from './colors'
 
 //
 // BORDER STYLES
