feat(color): add new colors and schema tokens in Teams theme (#1581)

* -added new colors and schema values

* -added changelog

CHANGELOG.md

@@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578))
 - Pass `props` of `Icon` component to SVG spec @kuzhelov ([#1562](https://github.com/stardust-ui/react/pull/1562))
 - Add svg pointing beak to the `Tooltip` component in Teams theme @mnajdova ([#1580](https://github.com/stardust-ui/react/pull/1580))
+- Add new values to the `brand`, `onyx` colors and `background4` token for default and brand color schemes in Teams theme @mnajdova ([#1581](https://github.com/stardust-ui/react/pull/1581))
 
 ### Documentation
 - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568))

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

@@ -47,6 +47,7 @@ export const colorScheme: ColorSchemeMapping = {
     background1: colors.grey[700],
     background2: colors.grey[800],
     background3: colors.grey[550],
+    background4: colors.grey[600],
 
     border: colors.grey[450], // buttons
     border1: colors.grey[850],
@@ -117,6 +118,7 @@ export const colorScheme: ColorSchemeMapping = {
     background1: colors.brand[900],
     background2: colors.brand[900],
     background3: colors.brand[1000],
+    background4: colors.grey[650],
 
     border: colors.grey[450],
     border1: colors.brand[800],

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

@@ -53,6 +53,7 @@ export const colorScheme: ColorSchemeMapping = {
     background1: colors.black,
     background2: colors.black,
     background3: colors.black,
+    background4: colors.black,
 
     border: colors.white,
     border1: colors.white,
@@ -123,6 +124,7 @@ export const colorScheme: ColorSchemeMapping = {
     background1: colors.black,
     background2: colors.black,
     background3: colors.black,
+    background4: colors.black,
 
     border: colors.white, // buttons
     border1: colors.white,

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

@@ -21,6 +21,7 @@ export const contextualColors: TeamsContextualColors = {
     200: '#E2E2F6', // 100, light brand14, dark theme brand02
     300: '#BDBDE6', // 200, light brand12, dark theme brand04
     400: '#A6A7DC', // dark theme brand06 (dark06)
+    450: '#9EA2FF',
     500: '#8B8CC7', // light08, dark08
     600: '#6264A7', // 500, siteVariables.brand, siteVariables.brand06, dark theme brand, brand12
     700: '#585A96', // light05
@@ -158,7 +159,7 @@ export const transparentColors: TeamsTransparentColors = {
     600: undefined,
     700: undefined,
     800: 'rgba(27,26,26,0.9)',
-    900: undefined,
+    900: 'rgba(0,0,0,0.8)',
   },
 }
 
@@ -214,6 +215,7 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background1: colors.grey[50],
     background2: colors.grey[100],
     background3: colors.grey[150],
+    background4: colors.grey[100],
 
     border: colors.grey[200], // buttons
     border1: colors.grey[150],
@@ -284,6 +286,7 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background1: colors.brand[100],
     background2: colors.brand[900],
     background3: colors.brand[1000],
+    background4: colors.brand[800],
 
     border: colors.grey[200],
     border1: colors.brand[200],