feat(theme): updating color palette and scheme

CHANGELOG.md

@@ -19,14 +19,15 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Rename `context` prop to `mountNode` in `PortalInner` @layershifter ([#1288](https://github.com/stardust-ui/react/pull/1288))
+- Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069))
 
 ### Features
-
 - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282))
 - `Ref` component extracted to a `@stardust-ui/react-component-ref` @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281))
 - added `isRefObject()`, `toRefObject()` utils for React refs @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281))
 - Add new callings icons in Teams theme @codepretty ([#1264](https://github.com/stardust-ui/react/pull/1264))
 - Add `mountNode` and `mountDocument` props to allow proper multi-window rendering ([#1288](https://github.com/stardust-ui/react/pull/1288))
+- Added default and brand color schemes in Teams' theme @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069))
 
 <!--------------------------------[ v0.29.1 ]------------------------------- -->
 ## [v0.29.1](https://github.com/stardust-ui/react/tree/v0.29.1) (2019-05-01)

docs/src/components/ColorBox.tsx

@@ -1,4 +1,10 @@
-import { ComponentSlotStylesInput, createComponent, Icon, ICSSInJSStyle } from '@stardust-ui/react'
+import {
+  ComponentSlotStylesInput,
+  ComponentSlotStyle,
+  createComponent,
+  Icon,
+  ICSSInJSStyle,
+} from '@stardust-ui/react'
 import * as Color from 'color'
 import * as _ from 'lodash'
 import * as React from 'react'
@@ -11,6 +17,7 @@ type ColorBoxProps = {
   rounded?: boolean
   size?: 'small' | 'normal' | 'big'
   value: string
+  styles?: ComponentSlotStyle
 }
 
 type ColorBoxVariables = {
@@ -48,7 +55,7 @@ export const colorBoxStyles: ComponentSlotStylesInput<ColorBoxProps, ColorBoxVar
     backgroundColor: p.value,
     border: '1px solid transparent',
     borderRadius: p.rounded && '.25rem',
-    color: Color(p.value).isDark() ? v.colorWhite : v.colorBlack,
+    color: p.value !== undefined && Color(p.value).isDark() ? v.colorWhite : v.colorBlack,
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
     fontSize: v.padding[p.size],
@@ -78,7 +85,7 @@ const ColorBox = createComponent<ColorBoxProps>({
         render={(active, onClick) => (
           <div className={classes.value}>
             <span onClick={onClick}>
-              <Icon name={active ? 'checkmark' : 'copy outline'} size="small" />
+              {value && <Icon name={active ? 'checkmark' : 'copy outline'} size="small" />}
               {value}
             </span>
           </div>

docs/src/components/ColorSchemes.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import {
+  createComponent,
+  ComponentSlotStylesInput,
+  ThemePrepared,
+  Grid,
+  ShorthandValue,
+  Header,
+} from '@stardust-ui/react'
+
+import ColorBox from './ColorBox'
+
+type ColorVariantsProps = {
+  name?: string
+  themes?: ThemePrepared[]
+  headers?: ShorthandValue[]
+}
+
+export const colorVariantsStyles: ComponentSlotStylesInput<ColorVariantsProps> = {
+  root: {
+    border: '1px solid transparent',
+    borderRadius: '.25rem',
+    overflow: 'hidden',
+  },
+}
+
+const ColorSchemes = createComponent<ColorVariantsProps>({
+  displayName: 'ColorVariants',
+  render: ({ name, themes, headers, stardust: { classes } }) => {
+    if (themes.length === 0) return <></>
+
+    const colorSchemes = _.map(themes, theme => theme.siteVariables.colorScheme[name])
+
+    const elements = _.flatMap(_.head(colorSchemes), (i, token) => [
+      <ColorBox
+        name={token}
+        key={`${token}schema`}
+        size="small"
+        value={undefined}
+        styles={{ backgroundColor: '#f2f2f2' }}
+      />,
+      ..._.map(colorSchemes, (colorScheme, i) => (
+        <ColorBox key={`${token}${i}`} size="small" value={colorScheme[token]} />
+      )),
+    ])
+
+    const columns = `auto ${_.times(themes.length, () => '180px').join(' ')}`
+    return (
+      <div className={classes.root}>
+        <Grid columns={columns}>
+          {headers && headers.map(header => Header.create(header))}
+          {elements}
+        </Grid>
+      </div>
+    )
+  },
+})
+
+export default ColorSchemes

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -68,7 +68,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
       <Menu
         {...rest}
         fluid
-        color="green"
         icon="labeled"
         size="tiny"
         pills

docs/src/components/ComponentPlayground.tsx

@@ -42,7 +42,7 @@ const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = p
           </Flex.Item>
 
           <Flex.Item align="start" push>
-            <Segment color="primary">
+            <Segment color="brand">
               <Header as="h4" className="no-anchor" styles={{ marginTop: 0 }}>
                 Props
               </Header>

docs/src/components/Sidebar/Sidebar.tsx

@@ -301,6 +301,13 @@ class Sidebar extends React.Component<any, any> {
         to: '/theming-examples',
         styles: menuItemStyles,
       },
+      {
+        key: 'colorpalette',
+        content: 'Colors',
+        as: NavLink,
+        to: '/color-palette',
+        styles: menuItemStyles,
+      },
       {
         key: 'layout',
         content: 'Layout',
@@ -429,13 +436,6 @@ class Sidebar extends React.Component<any, any> {
         to: '/menu-button',
         styles: menuItemStyles,
       },
-      {
-        key: 'colorpalette',
-        content: 'Color Palette',
-        as: NavLink,
-        to: '/color-palette',
-        styles: menuItemStyles,
-      },
       {
         key: 'divider4',
         kind: 'divider',

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

@@ -7,19 +7,19 @@ const ButtonUsageExampleShorthand = () => (
       theme={{
         componentVariables: {
           Button: siteVariables => ({
-            color: siteVariables.colors.primary[500],
-            colorActive: siteVariables.brand04,
-            colorHover: siteVariables.brand04,
-            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],
+            color: siteVariables.colors.brand[600],
+            colorActive: siteVariables.colors.brand[300],
+            colorHover: siteVariables.colors.brand[300],
+            colorFocus: siteVariables.colors.brand[900],
+            backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750]
+            backgroundColorActive: siteVariables.colors.brand[200],
+            backgroundColorHover: siteVariables.colors.brand[50],
+            backgroundColorFocus: siteVariables.colors.brand[200],
+            borderColor: siteVariables.colors.brand[200],
+            borderColorActive: siteVariables.colors.brand[300],
+            borderColorHover: siteVariables.colors.brand[300],
             borderColorFocus: siteVariables.colors.grey[900],
-            borderColorFocusIndicator: siteVariables.colors.primary[900],
+            borderColorFocusIndicator: siteVariables.colors.brand[900],
           }),
         },
       }}
@@ -33,19 +33,19 @@ const ButtonUsageExampleShorthand = () => (
       theme={{
         componentVariables: {
           Button: siteVariables => ({
-            color: siteVariables.colors.primary[500],
-            colorActive: siteVariables.colors.primary[500],
-            colorHover: siteVariables.colors.primary[500],
-            colorFocus: siteVariables.colors.primary[900],
+            color: siteVariables.colors.brand[600],
+            colorActive: siteVariables.colors.brand[600],
+            colorHover: siteVariables.colors.brand[600],
+            colorFocus: siteVariables.colors.brand[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],
+            backgroundColorActive: siteVariables.colors.brand[200],
+            backgroundColorHover: siteVariables.colors.brand[50],
+            backgroundColorFocus: siteVariables.colors.brand[200],
+            borderColor: siteVariables.colors.brand[200],
+            borderColorActive: siteVariables.colors.brand[300],
+            borderColorHover: siteVariables.colors.brand[300],
             borderColorFocus: siteVariables.colors.white,
-            borderColorFocusIndicator: siteVariables.colors.primary[900],
+            borderColorFocusIndicator: siteVariables.colors.brand[900],
           }),
         },
       }}

docs/src/examples/components/Chat/Performance/Chat.perf.tsx

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

docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx

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

docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

@@ -98,7 +98,7 @@ const items = [
     key: 'message-id-8',
   },
   {
-    children: <Divider content="Today" color="primary" important />,
+    children: <Divider content="Today" color="brand" important />,
     key: 'message-id-9',
   },
   {

docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -85,7 +85,7 @@ const ChatMessageExampleStyled = () => (
       componentVariables: {
         ChatMessage: siteVars => ({
           content: {
-            focusOutlineColor: siteVars.red,
+            focusOutlineColor: siteVars.colors.red[400],
           },
         }),
       },

docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { Label, Provider } from '@stardust-ui/react'
+import * as _ from 'lodash'
 
 const LabelExampleColor = () => (
   <Provider.Consumer
-    render={({ siteVariables: { colorScheme } }) =>
-      Object.keys(colorScheme).map(color => (
+    render={({ siteVariables: { primitiveColors, emphasisColors, naturalColors } }) =>
+      _.keys({ ...primitiveColors, ...emphasisColors, ...naturalColors }).map(color => (
         <span key={color}>
           <Label color={color} content={color} />{' '}
         </span>

docs/src/examples/components/Menu/Variations/index.tsx

@@ -13,11 +13,6 @@ const Variations = () => (
       title="Vertical & Pointing"
       examplePath="components/Menu/Variations/MenuExampleVerticalPointing"
     />
-    <ComponentExample
-      title="Primary"
-      description="A menu can have a primary color."
-      examplePath="components/Menu/Variations/MenuExamplePrimary"
-    />
     <ComponentExample
       title="Fluid"
       description="A vertical menu can be fluid which takes up the full space of its container. A horizontal menu does this by default."

docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx

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

docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx

@@ -67,7 +67,7 @@ const items = [
           badge={{ icon: 'mention' }}
           variables={siteVars => ({
             hasMention: true,
-            hasMentionColor: siteVars.colors.primary[500],
+            hasMentionColor: siteVars.colors.brand[600],
           })}
         />
       ),
@@ -86,7 +86,7 @@ const items = [
           badge={{ icon: 'redbang' }}
           variables={siteVars => ({
             isImportant: true,
-            isImportantColor: siteVars.colors.yellow[900],
+            isImportantColor: siteVars.colors.yellow[400],
           })}
         />
       ),

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -36,7 +36,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
           height: '40px',
           padding: 0,
         })}
-        variables={siteVars => ({ backgroundColor: siteVars.colors.primary[500] })}
+        variables={siteVars => ({ backgroundColor: siteVars.colors.brand[600] })}
       />
     )
   }

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -204,7 +204,7 @@ export function generateChatProps(chat: ChatData): ChatItem[] {
     chatProps.splice(
       myLastMsgIndex + 1,
       0,
-      generateDividerProps({ content: 'Last read', color: 'primary', important: true }),
+      generateDividerProps({ content: 'Last read', color: 'brand', important: true }),
     )
   }
 

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

@@ -7,7 +7,7 @@ export default props => {
     <Provider.Consumer
       render={({ siteVariables }) => {
         return (
-          <div style={{ backgroundColor: siteVariables.colors.primary[500] }}>
+          <div style={{ backgroundColor: siteVariables.colors.brand[600] }}>
             <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} color="primary">
+        <Text as="a" content={content} color="brand">
           {children}
         </Text>
       )}

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

@@ -18,7 +18,7 @@ class MSTeamsLogo extends React.Component<LogoProps, any> {
             <div style={style}>
               {Icon.create(icon, {
                 defaultProps: {
-                  variables: { color: siteVariables.colors.primary[500] },
+                  variables: { color: siteVariables.colors.brand[600] },
                   size: 'largest',
                   xSpacing: 'after',
                   styles: { verticalAlign: 'middle' },