feat(teams-theme): clearing duplicate colors from siteVariables

CHANGELOG.md

@@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### 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))
+- Removed colors from `siteVariables` in Teams theme @mnajdova ([#858](https://github.com/stardust-ui/react/pull/858))
 
 ### Features
 - Add single search flavor for `Dropdown` component @Bugaa92 ([#839](https://github.com/stardust-ui/react/pull/839))

docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx

@@ -7,19 +7,19 @@ const ButtonUsageExampleShorthand = () => (
       theme={{
         componentVariables: {
           Button: siteVariables => ({
-            color: siteVariables.brand06,
+            color: siteVariables.colors.primary[500],
             colorActive: siteVariables.brand04,
             colorHover: siteVariables.brand04,
-            colorFocus: siteVariables.brand02,
-            backgroundColor: siteVariables.black,
-            backgroundColorActive: siteVariables.brand14,
-            backgroundColorHover: siteVariables.brand16,
-            backgroundColorFocus: siteVariables.brand14,
-            borderColor: siteVariables.brand14,
-            borderColorActive: siteVariables.brand12,
-            borderColorHover: siteVariables.brand12,
-            borderColorFocus: siteVariables.black,
-            borderColorFocusIndicator: siteVariables.brand02,
+            colorFocus: siteVariables.colors.primary[900],
+            backgroundColor: siteVariables.colors.grey[900],
+            backgroundColorActive: siteVariables.colors.primary[100],
+            backgroundColorHover: siteVariables.colors.primary[50],
+            backgroundColorFocus: siteVariables.colors.primary[100],
+            borderColor: siteVariables.colors.primary[100],
+            borderColorActive: siteVariables.colors.primary[200],
+            borderColorHover: siteVariables.colors.primary[200],
+            borderColorFocus: siteVariables.colors.grey[900],
+            borderColorFocusIndicator: siteVariables.colors.primary[900],
           }),
         },
       }}
@@ -33,19 +33,19 @@ const ButtonUsageExampleShorthand = () => (
       theme={{
         componentVariables: {
           Button: siteVariables => ({
-            color: siteVariables.brand06,
-            colorActive: siteVariables.brand06,
-            colorHover: siteVariables.brand06,
-            colorFocus: siteVariables.brand02,
-            backgroundColor: siteVariables.white,
-            backgroundColorActive: siteVariables.brand14,
-            backgroundColorHover: siteVariables.brand16,
-            backgroundColorFocus: siteVariables.brand14,
-            borderColor: siteVariables.brand14,
-            borderColorActive: siteVariables.brand12,
-            borderColorHover: siteVariables.brand12,
-            borderColorFocus: siteVariables.white,
-            borderColorFocusIndicator: siteVariables.brand02,
+            color: siteVariables.colors.primary[500],
+            colorActive: siteVariables.colors.primary[500],
+            colorHover: siteVariables.colors.primary[500],
+            colorFocus: siteVariables.colors.primary[900],
+            backgroundColor: siteVariables.colors.white,
+            backgroundColorActive: siteVariables.colors.primary[100],
+            backgroundColorHover: siteVariables.colors.primary[50],
+            backgroundColorFocus: siteVariables.colors.primary[100],
+            borderColor: siteVariables.colors.primary[100],
+            borderColorActive: siteVariables.colors.primary[200],
+            borderColorHover: siteVariables.colors.primary[200],
+            borderColorFocus: siteVariables.colors.white,
+            borderColorFocusIndicator: siteVariables.colors.primary[900],
           }),
         },
       }}

docs/src/prototypes/ImportantAndMentionMessages/index.tsx

@@ -65,7 +65,10 @@ const items = [
           author="Jane Doe"
           timestamp="Yesterday, 10:15 PM"
           badge={{ icon: 'mention' }}
-          variables={siteVars => ({ hasMention: true, hasMentionColor: siteVars.brand })}
+          variables={siteVars => ({
+            hasMention: true,
+            hasMentionColor: siteVars.colors.primary[500],
+          })}
         />
       ),
     },
@@ -81,7 +84,10 @@ const items = [
           timestamp="Yesterday, 10:16 PM"
           mine
           badge={{ icon: 'redbang' }}
-          variables={siteVars => ({ isImportant: true, isImportantColor: siteVars.yellow })}
+          variables={siteVars => ({
+            isImportant: true,
+            isImportantColor: siteVars.colors.yellow[900],
+          })}
         />
       ),
     },

docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx

@@ -14,7 +14,7 @@ const ChatWithPopover = () => (
         ChatMessage: {
           root: ({ props: p, theme: { siteVariables } }) => ({
             '& a': {
-              color: siteVariables.brand,
+              color: siteVariables.colors.primary[500],
             },
           }),
         },

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -26,7 +26,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
         content={
           <Icon
             name="team-create"
-            variables={siteVars => ({ color: siteVars.white, margin: 'auto 8px' })}
+            variables={siteVars => ({ color: siteVars.colors.white, margin: 'auto 8px' })}
           />
         }
         styles={({ variables: v }) => ({
@@ -36,7 +36,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
           height: '40px',
           padding: 0,
         })}
-        variables={siteVars => ({ backgroundColor: siteVars.brand })}
+        variables={siteVars => ({ backgroundColor: siteVars.colors.primary[500] })}
       />
     )
   }
@@ -83,7 +83,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
             key: `${index}-${name}`,
             icon: {
               name,
-              variables: siteVars => ({ color: siteVars.white, margin: 'auto 8px' }),
+              variables: siteVars => ({ color: siteVars.colors.white, margin: 'auto 8px' }),
             },
             primary: true,
           }))}

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -43,7 +43,7 @@ class ComposeMessage extends React.Component {
         fluid
         placeholder="Type a message"
         input={{ styles: { height: '3.1429rem' /* 44px */ } }}
-        variables={siteVars => ({ backgroundColor: siteVars.white })}
+        variables={siteVars => ({ backgroundColor: siteVars.colors.white })}
       />
     )
   }

docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx

@@ -7,7 +7,7 @@ export default props => {
     <Provider.Consumer
       render={({ siteVariables }) => {
         return (
-          <div style={{ backgroundColor: siteVariables.brand }}>
+          <div style={{ backgroundColor: siteVariables.colors.primary[500] }}>
             <div style={{ ...middleColumnStyles }}>{props.content}</div>
           </div>
         )

docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx

@@ -6,7 +6,7 @@ export default props => {
   return (
     <Provider.Consumer
       render={({ siteVariables }) => (
-        <Text as="a" content={content} styles={{ color: siteVariables.brand }}>
+        <Text as="a" content={content} color="primary">
           {children}
         </Text>
       )}

docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx

@@ -18,14 +18,18 @@ class MSTeamsLogo extends React.Component<LogoProps, any> {
             <div style={style}>
               {Icon.create(icon, {
                 defaultProps: {
-                  variables: { color: siteVariables.brand },
+                  variables: { color: siteVariables.colors.primary[500] },
                   size: 'largest',
                   xSpacing: 'after',
                   styles: { verticalAlign: 'middle' },
                 },
               })}
               <Text
-                styles={{ color: siteVariables.white, verticalAlign: 'middle', lineHeight: '40px' }}
+                styles={{
+                  color: siteVariables.colors.white,
+                  verticalAlign: 'middle',
+                  lineHeight: '40px',
+                }}
               >
                 {companyName}
               </Text>

packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts

@@ -2,19 +2,19 @@ import { ButtonVariables } from '../../../teams/components/Button/buttonVariable
 
 export default (siteVars: any): Partial<ButtonVariables> => {
   return {
-    color: siteVars.white,
-    colorActive: siteVars.white,
-    colorHover: siteVars.white,
-    colorFocus: siteVars.white,
+    color: siteVars.colors.white,
+    colorActive: siteVars.colors.white,
+    colorHover: siteVars.colors.white,
+    colorFocus: siteVars.colors.white,
     backgroundColor: 'transparent',
     borderColorFocus: siteVars.black,
-    borderColorFocusIndicator: siteVars.white,
+    borderColorFocusIndicator: siteVars.colors.white,
 
     primaryBackgroundColorActive: siteVars.brand08,
     primaryBackgroundColorHover: siteVars.brand08,
     primaryBackgroundColorFocus: siteVars.brand14,
     primaryBorderColorFocus: siteVars.black,
-    primaryBorderColorFocusIndicator: siteVars.white,
+    primaryBorderColorFocusIndicator: siteVars.colors.white,
 
     circularColorActive: siteVars.black,
     circularBackgroundColorActive: siteVars.gray02,

packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts

@@ -4,7 +4,7 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
   return {
     backgroundColor: siteVars.gray10,
     backgroundColorMine: '#3B3C54',
-    color: siteVars.white,
+    color: siteVars.colors.white,
     contentFocusOutlineColor: siteVars.brand,
   }
 }

packages/react/src/themes/teams-dark/components/Header/headerVariables.ts

@@ -2,7 +2,7 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariable
 
 export default (siteVars: any): Partial<HeaderVariables> => {
   return {
-    color: siteVars.white,
+    color: siteVars.colors.white,
     descriptionColor: siteVars.gray02,
   }
 }

packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts

@@ -4,6 +4,6 @@ export interface MenuVariables {
 
 export default (siteVars: any): MenuVariables => {
   return {
-    color: siteVars.white,
+    color: siteVars.colors.white,
   }
 }

packages/react/src/themes/teams-dark/components/Tree/treeTitleVariables.ts

@@ -2,6 +2,6 @@ import { TreeTitleVariables } from '../../../teams/components/Tree/treeTitleVari
 
 export default (siteVars: any): TreeTitleVariables => {
   return {
-    defaultColor: siteVars.white,
+    defaultColor: siteVars.colors.white,
   }
 }

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

@@ -1,34 +1,34 @@
-import { white, green } from '../teams/siteVariables'
+import { colors, naturalColors } from '../teams/siteVariables'
 
 //
 // COLORS
 //
-export const black = '#201f1f'
+export const black = '#201f1f' // no mapping color
 
-export const gray02 = '#c8c6c4'
-export const gray03 = '#b3b0ad'
-export const gray04 = '#8a8886'
-export const gray06 = '#605e5c'
-export const gray08 = '#484644'
-export const gray09 = '#3b3a39'
-export const gray10 = '#323130'
-export const gray14 = '#292828'
+export const gray02 = '#c8c6c4' // light theme gray06
+export const gray03 = '#b3b0ad' // no mapping color
+export const gray04 = '#8a8886' // no mapping color
+export const gray06 = '#605e5c' // light theme gray03
+export const gray08 = '#484644' // light theme gray02
+export const gray09 = '#3b3a39' // no mapping color
+export const gray10 = '#323130' // no mapping color
+export const gray14 = '#292828' // no mapping color
 
-export const brand = '#6264A7'
-export const brand02 = '#e2e2f6'
-export const brand04 = '#bdbde6'
-export const brand06 = '#a6a7dc'
-export const brand08 = '#8b8cc7'
-export const brand12 = brand
-export const brand14 = '#464775'
-export const brand16 = '#33344a'
+export const brand = '#6264A7' // light theme brand - primary[500]
+export const brand02 = '#e2e2f6' // light theme brand14 - primary[100]
+export const brand04 = '#bdbde6' // light theme brand12 primary[200]
+export const brand06 = '#a6a7dc' // no mapping color
+export const brand08 = '#8b8cc7' // light theme brand08
+export const brand12 = colors.primary[500] // same as brand
+export const brand14 = '#464775' // light theme brand04
+export const brand16 = '#33344a' // light theme brand02 primary[900]
 
-export const orange04 = '#e97548'
-export const magenta = '#cf6098'
-export const orchid = '#ae3d84'
-export const red = '#d74654'
-export const red08 = '#4f232b'
-export const green04 = green
+export const orange04 = '#e97548' // orange[900]
+export const magenta = '#cf6098' // no mapping color
+export const orchid = '#ae3d84' // no mapping color
+export const red = '#d74654' // no mapping color
+export const red08 = '#4f232b' // no mapping color
+export const green04 = naturalColors.lightGreen[900]
 
 //
 // SHADOW LEVELS
@@ -39,4 +39,4 @@ export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(255, 255, 255, 0.1)'
 // SEMANTIC ASSIGNMENTS
 //
 export const bodyBackground = black
-export const bodyColor = white
+export const bodyColor = colors.white

packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts

@@ -5,7 +5,7 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
     backgroundColor: siteVars.black,
     backgroundColorMine: siteVars.black,
     color: siteVars.white,
-    contentFocusOutlineColor: siteVars.yellow,
+    contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?)
     border: `1px solid ${siteVars.white}`,
   }
 }

packages/react/src/themes/teams-high-contrast/siteVariables.ts

@@ -1,4 +1,4 @@
-import { white, green } from '../teams/siteVariables'
+import { colors, naturalColors } from '../teams/siteVariables'
 
 //
 // COLORS
@@ -10,7 +10,7 @@ export const accessibleGreen = '#3ff23f'
 export const accessibleCyan = '#1aebff'
 
 export const red = '#f00'
-export const green04 = green
+export const green04 = naturalColors.lightGreen[900]
 
 //
 // STATUS COLORS
@@ -24,11 +24,11 @@ export const warningStatusBackgroundColor = accessibleYellow
 export const warningStatusTextColor = black
 export const errorStatusBackgroundColor = red
 export const errorStatusTextColor = black
-export const unknownStatusBackgroundColor = white
+export const unknownStatusBackgroundColor = colors.white
 export const unknownStatusTextColor = black
 
 //
 // SEMANTIC ASSIGNMENTS
 //
 export const bodyBackground = black
-export const bodyColor = white
+export const bodyColor = colors.white