feat(colors): updating category colors

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add experimental runtime accessibility attributes validation (the initial step validates the Button component only) @mshoho ([#1911](https://github.com/stardust-ui/react/pull/1911))
 - Add `sync` icon to Teams theme @codepretty ([#1973](https://github.com/stardust-ui/react/pull/1973))
+- Updating category colors palette and schemes in Teams theme @codepretty ([#1994](https://github.com/stardust-ui/react/pull/1994))
 - Add `bell` icon to Teams theme @codepretty ([#1993](https://github.com/stardust-ui/react/pull/1993))
 
 <!--------------------------------[ v0.39.0 ]------------------------------- -->

docs/src/components/CategoryColorSchemes.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import {
+  createComponent,
+  ComponentSlotStylesInput,
+  ThemePrepared,
+  Grid,
+  Header,
+  HeaderProps,
+  ShorthandCollection,
+} from '@stardust-ui/react'
+
+import ColorBox from './ColorBox'
+
+type ColorVariantsProps = {
+  name?: string
+  themes?: ThemePrepared[]
+  headers?: ShorthandCollection<HeaderProps>
+}
+
+export const colorVariantsStyles: ComponentSlotStylesInput<ColorVariantsProps> = {
+  root: {
+    border: '1px solid transparent',
+    borderRadius: '.25rem',
+    overflow: 'hidden',
+  },
+}
+
+const CategoryColorSchemes = createComponent<ColorVariantsProps>({
+  displayName: 'ColorVariants',
+  render: ({ name, themes, headers, stardust: { classes } }) => {
+    if (themes.length === 0) return <></>
+
+    const colorSchemes = _.map(themes, theme => theme.siteVariables.categoryColorScheme[name])
+
+    const elements = _.flatMap(_.head(colorSchemes), (i, token) => [
+      <ColorBox
+        copyToClipboardIcon={false}
+        showColorValue={false}
+        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]}
+          copyToClipboardIcon={false}
+        />
+      )),
+    ])
+
+    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 CategoryColorSchemes

docs/src/routes.tsx

@@ -12,7 +12,9 @@ import * as Layout from './pages/Layout.mdx'
 import Accessibility from './views/Accessibility'
 import Colors from './views/Colors'
 import ColorPalette from './views/ColorPalette'
+import CategoryColorPalette from './views/CategoryColorPalette'
 import ColorSchemes from './views/ColorSchemes'
+import CategoryColorSchemes from './views/CategoryColorSchemes'
 
 import FAQ from './views/FAQ'
 import * as ShorthandProps from './pages/ShorthandProps.mdx'
@@ -98,7 +100,9 @@ const Routes = () => (
           </Route>
           <Route exact path="/colors" component={Colors} />
           <Route exact path="/color-palette" component={ColorPalette} />
+          <Route exact path="/color-palette-category" component={CategoryColorPalette} />
           <Route exact path="/color-schemes" component={ColorSchemes} />
+          <Route exact path="/color-schemes-category" component={CategoryColorSchemes} />
           <Route exact path="/*" component={PageNotFound} />
         </Switch>
       </DocsLayout>

docs/src/views/CategoryColorPalette.tsx

@@ -0,0 +1,59 @@
+import { Provider, ProviderConsumer, Grid } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import * as React from 'react'
+
+import ColorBox, { colorBoxStyles, colorBoxVariables } from 'docs/src/components/ColorBox'
+import { colorVariantsStyles } from 'docs/src/components/ColorVariants'
+import DocPage from 'docs/src/components/DocPage/DocPage'
+
+const ColorPalette = () => (
+  <Provider
+    theme={{
+      componentStyles: {
+        ColorBox: colorBoxStyles,
+        ColorVariants: colorVariantsStyles,
+        Header: {
+          root: {
+            fontWeight: 700,
+          },
+        },
+      },
+      componentVariables: {
+        ColorBox: colorBoxVariables,
+      },
+    }}
+  >
+    <ProviderConsumer
+      render={({ siteVariables: { categoryColors } }) => (
+        <DocPage title="Category color palette">
+          <p>
+            This page displays all category colors in the Teams theme. These colors are used for
+            features like calendar, announcement posts, and text formatting.
+          </p>
+
+          <Grid columns={2} variables={{ gridGap: '2rem' }}>
+            {_.map(categoryColors, (variants, colorName) => (
+              <div key={colorName}>
+                <ColorBox
+                  name={colorName}
+                  size="normal"
+                  value={
+                    categoryColors[colorName][600] ||
+                    categoryColors[colorName][500] ||
+                    categoryColors[colorName][400]
+                  }
+                  copyToClipboardIcon={false}
+                />
+                {_.map(categoryColors[colorName], (value, variable) => (
+                  <ColorBox key={variable} name={variable} size="small" value={value} />
+                ))}
+              </div>
+            ))}
+          </Grid>
+        </DocPage>
+      )}
+    />
+  </Provider>
+)
+
+export default ColorPalette

docs/src/views/CategoryColorSchemes.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import DocPage from '../components/DocPage/DocPage'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
+import CategoryColorSchemes from 'docs/src/components/CategoryColorSchemes'
+
+import { Dropdown, themes, Flex, Provider } from '@stardust-ui/react'
+import { faderStyles } from 'docs/src/components/Fader'
+import { colorVariantsStyles } from 'docs/src/components/ColorVariants'
+import { colorBoxStyles, colorBoxVariables } from 'docs/src/components/ColorBox'
+
+export default () => {
+  const [color, setColor] = React.useState('red')
+  return (
+    <Provider
+      theme={{
+        componentStyles: {
+          ColorBox: colorBoxStyles,
+          ColorVariants: colorVariantsStyles,
+          Fader: faderStyles,
+          Header: {
+            root: {
+              fontWeight: 700,
+            },
+          },
+        },
+        componentVariables: {
+          ColorBox: colorBoxVariables,
+        },
+      }}
+    >
+      <DocPage title="Category color schemes">
+        <Flex column>
+          <Dropdown
+            items={[
+              'red',
+              'redDark',
+              'orangeDark',
+              'orange',
+              'orangeLight',
+              'yellowDark',
+              'yellow',
+              'brown',
+              'oliveDark',
+              'olive',
+              'neon',
+              'formatting',
+            ]}
+            defaultValue={'red'}
+            placeholder="Select the color"
+            onSelectedChange={(e, { value }) => setColor(value as string)}
+          />
+          <CategoryColorSchemes
+            themes={[themes.teams, themes.teamsHighContrast, themes.teamsDark]}
+            headers={[
+              {
+                as: 'h3',
+                content: 'Design token',
+              },
+              {
+                as: 'h3',
+                content: 'Light theme',
+              },
+              {
+                as: 'h3',
+                content: 'HC theme',
+              },
+              {
+                as: 'h3',
+                content: 'Dark theme',
+              },
+            ]}
+            name={color}
+          />
+        </Flex>
+        <GuidesNavigationFooter previous={{ name: 'Colors', url: 'colors' }} />
+      </DocPage>
+    </Provider>
+  )
+}

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

@@ -261,6 +261,7 @@ export const colorScheme: ColorSchemeMapping = {
     background2: colors.onyx[500],
     border: colors.onyx[800],
     border1: 'transparent',
+    border2: colors.silver[400],
   }),
   amethyst: createColorScheme({
     background: colors.onyx[200],
@@ -307,4 +308,23 @@ export const categoryColorScheme: TeamsCategoryColorSchemeMapping = {
   smokeLight: createCategoryColorScheme('smokeLight'),
   steelDark: createCategoryColorScheme('steelDark'),
   steelLight: createCategoryColorScheme('steelLight'),
+  neon: createCategoryColorScheme('neon'),
+  formatting: {
+    foreground1: categoryColors.red[250],
+    background1: categoryColors.red[700],
+    foreground2: categoryColors.orangeDark[350],
+    background2: categoryColors.orange[700],
+    foreground3: categoryColors.yellow[250],
+    background3: categoryColors.yellow[800],
+    foreground4: categoryColors.neon[150],
+    background4: categoryColors.neon[800],
+    foreground5: categoryColors.green[250],
+    background5: categoryColors.green[700],
+    foreground6: categoryColors.tealLight[250],
+    background6: categoryColors.tealLight[700],
+    foreground7: categoryColors.blueDark[250],
+    background7: categoryColors.blueDark[450],
+    foreground8: categoryColors.maroon[350],
+    background8: categoryColors.maroon[800],
+  },
 }

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

@@ -1,6 +1,6 @@
 import { colors } from '../teams/siteVariables'
 
-export { colorScheme } from './colors'
+export { colorScheme, categoryColorScheme } from './colors'
 
 //
 // BORDER STYLES

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

@@ -264,6 +264,7 @@ export const colorScheme: ColorSchemeMapping = {
     background2: colors.white,
     border: colors.white,
     border1: colors.white,
+    border2: colors.white,
   }),
   amethyst: createEmptyColorScheme({
     background: colors.silver[900],
@@ -308,4 +309,23 @@ export const categoryColorScheme: TeamsCategoryColorSchemeMapping = {
   smokeLight: createCategoryColorScheme(),
   steelDark: createCategoryColorScheme(),
   steelLight: createCategoryColorScheme(),
+  neon: createCategoryColorScheme(),
+  formatting: {
+    foreground1: undefined,
+    background1: undefined,
+    foreground2: undefined,
+    background2: undefined,
+    foreground3: undefined,
+    background3: undefined,
+    foreground4: undefined,
+    background4: undefined,
+    foreground5: undefined,
+    background5: undefined,
+    foreground6: undefined,
+    background6: undefined,
+    foreground7: undefined,
+    background7: undefined,
+    foreground8: undefined,
+    background8: undefined,
+  },
 }

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

@@ -476,6 +476,25 @@ export const categoryColors: TeamsCategoryColors = {
     850: '#404243',
     900: '#292828',
   },
+  neon: {
+    100: '#FAFEDF',
+    150: '#F4FBC4',
+    200: '#E9F1AC',
+    250: '#E5F18F',
+    300: '#D9E388',
+    350: '#C8D464',
+    400: '#BDCB4C',
+    450: '#B7C640',
+    500: '#A8B63A',
+    550: '#99A43B',
+    600: '#909A45',
+    650: '#899338',
+    700: '#7A8337',
+    750: '#656C2B',
+    800: '#50571E',
+    850: '#3C4212',
+    900: '#272B0E',
+  },
 }
 
 const createCategoryColorScheme = (color: string, customValues = {}) => {
@@ -513,4 +532,23 @@ export const categoryColorScheme: TeamsCategoryColorSchemeMapping = {
   smokeLight: createCategoryColorScheme('smokeLight'),
   steelDark: createCategoryColorScheme('steelDark'),
   steelLight: createCategoryColorScheme('steelLight'),
+  neon: createCategoryColorScheme('neon'),
+  formatting: {
+    foreground1: categoryColors.red[600],
+    background1: categoryColors.red[300],
+    foreground2: categoryColors.orangeDark[400],
+    background2: categoryColors.orange[300],
+    foreground3: categoryColors.yellow[400],
+    background3: categoryColors.yellow[300],
+    foreground4: categoryColors.neon[450],
+    background4: categoryColors.neon[200],
+    foreground5: categoryColors.green[600],
+    background5: categoryColors.green[300],
+    foreground6: categoryColors.tealLight[650],
+    background6: categoryColors.tealLight[300],
+    foreground7: categoryColors.blueDark[400],
+    background7: categoryColors.blueDark[200],
+    foreground8: categoryColors.maroon[500],
+    background8: categoryColors.maroon[200],
+  },
 }

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

@@ -153,8 +153,8 @@ export const transparentColors: TeamsTransparentColors = {
   onyx: {
     100: 'rgba(59,58,57,0.9)',
     200: 'rgba(45,44,44,0.4)',
-    300: undefined,
-    400: undefined,
+    300: 'rgba(37,36,35,0.2)',
+    400: 'rgba(37,36,35,0.65)',
     500: 'rgba(41,40,40,0.9)',
     600: undefined,
     700: 'rgba(0,0,0,0.5)',
@@ -468,6 +468,7 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background2: colors.onyx[500],
     border: colors.onyx[800],
     border1: 'transparent',
+    border2: colors.onyx[300],
   }),
   amethyst: createColorScheme({
     background: colors.amethyst[600],

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

@@ -53,6 +53,7 @@ export type TeamsCategoryColors = {
   smokeLight: ColorVariants
   steelDark: ColorVariants
   steelLight: ColorVariants
+  neon: ColorVariants
 }
 
 export type TeamsCategoryColorNames = keyof TeamsCategoryColors