Add new brand ramp version (#34900)

jurokapsiar · Juraj Kapsiar · web-flow · commit c847809beaf4 · 2025-07-29T18:30:25.000+02:00
Co-authored-by: Juraj Kapsiar &lt;jukapsia@microsoft.com&gt;
diff --git a/change/@fluentui-react-storybook-addon-084656a9-1807-4af9-9820-099a20805ae8.json b/change/@fluentui-react-storybook-addon-084656a9-1807-4af9-9820-099a20805ae8.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add new brand ramp version",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "jukapsia@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-theme-aabb8f36-945f-4148-aeb2-1493597ffea1.json b/change/@fluentui-react-theme-aabb8f36-945f-4148-aeb2-1493597ffea1.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add new brand ramp version",
+  "packageName": "@fluentui/react-theme",
+  "email": "jukapsia@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-tokens-f47775ed-31db-4203-82f1-24e7a651c297.json b/change/@fluentui-tokens-f47775ed-31db-4203-82f1-24e7a651c297.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Brand ramp update",
+  "packageName": "@fluentui/tokens",
+  "email": "jukapsia@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
@@ -72,6 +72,12 @@ export const themes: readonly [{
 }, {
     readonly id: "teams-dark";
     readonly label: "Teams Dark";
+}, {
+    readonly id: "teams-light-v21";
+    readonly label: "Teams Light V2.1";
+}, {
+    readonly id: "teams-dark-v21";
+    readonly label: "Teams Dark V2.1";
 }, {
     readonly id: "teams-high-contrast";
     readonly label: "Teams High Contrast";
diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
@@ -4,8 +4,10 @@ import { FluentProvider } from '@fluentui/react-provider';
 import {
   Theme,
   teamsDarkTheme,
+  teamsDarkV21Theme,
   teamsHighContrastTheme,
   teamsLightTheme,
+  teamsLightV21Theme,
   webDarkTheme,
   webLightTheme,
 } from '@fluentui/react-theme';
@@ -20,6 +22,8 @@ const themes: Record<ThemeIds, Theme> = {
   'teams-light': teamsLightTheme,
   'teams-dark': teamsDarkTheme,
   'teams-high-contrast': teamsHighContrastTheme,
+  'teams-light-v21': teamsLightV21Theme,
+  'teams-dark-v21': teamsDarkV21Theme,
 } as const;
 
 const findTheme = (themeId?: ThemeIds) => {
diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts
@@ -3,6 +3,8 @@ export const themes = [
   { id: 'web-dark', label: 'Web Dark' },
   { id: 'teams-light', label: 'Teams Light' },
   { id: 'teams-dark', label: 'Teams Dark' },
+  { id: 'teams-light-v21', label: 'Teams Light V2.1' },
+  { id: 'teams-dark-v21', label: 'Teams Dark V2.1' },
   { id: 'teams-high-contrast', label: 'Teams High Contrast' },
 ] as const;
 
diff --git a/packages/react-components/react-theme/library/etc/react-theme.api.md b/packages/react-components/react-theme/library/etc/react-theme.api.md
@@ -61,8 +61,10 @@ import { ShadowTokens } from '@fluentui/tokens';
 import { SpacingTokens } from '@fluentui/tokens';
 import { StrokeWidthTokens } from '@fluentui/tokens';
 import { teamsDarkTheme } from '@fluentui/tokens';
+import { teamsDarkV21Theme } from '@fluentui/tokens';
 import { teamsHighContrastTheme } from '@fluentui/tokens';
 import { teamsLightTheme } from '@fluentui/tokens';
+import { teamsLightV21Theme } from '@fluentui/tokens';
 import { Theme } from '@fluentui/tokens';
 import { themeToTokensObject } from '@fluentui/tokens';
 import { tokens } from '@fluentui/tokens';
@@ -187,10 +189,14 @@ export { StrokeWidthTokens }
 
 export { teamsDarkTheme }
 
+export { teamsDarkV21Theme }
+
 export { teamsHighContrastTheme }
 
 export { teamsLightTheme }
 
+export { teamsLightV21Theme }
+
 export { Theme }
 
 export { themeToTokensObject }
diff --git a/packages/react-components/react-theme/library/src/index.ts b/packages/react-components/react-theme/library/src/index.ts
@@ -1,7 +1,9 @@
 export {
   teamsDarkTheme,
+  teamsDarkV21Theme,
   teamsHighContrastTheme,
   teamsLightTheme,
+  teamsLightV21Theme,
   webDarkTheme,
   webLightTheme,
   createDarkTheme,
diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md
@@ -442,12 +442,18 @@ export type StrokeWidthTokens = {
 // @public (undocumented)
 export const teamsDarkTheme: Theme;
 
+// @public (undocumented)
+export const teamsDarkV21Theme: Theme;
+
 // @public (undocumented)
 export const teamsHighContrastTheme: Theme;
 
 // @public (undocumented)
 export const teamsLightTheme: Theme;
 
+// @public (undocumented)
+export const teamsLightV21Theme: Theme;
+
 // @public (undocumented)
 export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & ZIndexTokens;
 
diff --git a/packages/tokens/src/global/brandColors.ts b/packages/tokens/src/global/brandColors.ts
@@ -56,3 +56,22 @@ export const brandOffice: BrandVariants = {
   150: `#f4beaa`,
   160: `#f9dcd1`,
 };
+
+export const brandTeamsV21: BrandVariants = {
+  10: `#29274f`,
+  20: `#2f2a5e`,
+  30: `#352e70`,
+  40: `#3b3185`,
+  50: `#44359e`,
+  60: `#4d3aba`,
+  70: `#5a40db`,
+  80: `#654cf5`,
+  90: `#7769fa`,
+  100: `#887dff`,
+  110: `#9791ff`,
+  120: `#aba8ff`,
+  130: `#bab8ff`,
+  140: `#c8c7ff`,
+  150: `#dcdbff`,
+  160: `#e8e8ff`,
+};
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
@@ -1,4 +1,12 @@
-export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes';
+export {
+  teamsDarkTheme,
+  teamsDarkV21Theme,
+  teamsHighContrastTheme,
+  teamsLightTheme,
+  teamsLightV21Theme,
+  webDarkTheme,
+  webLightTheme,
+} from './themes';
 export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils';
 
 export { themeToTokensObject } from './themeToTokensObject';
diff --git a/packages/tokens/src/themes/index.ts b/packages/tokens/src/themes/index.ts
@@ -1,2 +1,8 @@
-export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme } from './teams/index';
+export {
+  teamsDarkTheme,
+  teamsDarkV21Theme,
+  teamsHighContrastTheme,
+  teamsLightTheme,
+  teamsLightV21Theme,
+} from './teams/index';
 export { webDarkTheme, webLightTheme } from './web/index';
diff --git a/packages/tokens/src/themes/teams/darkTheme.ts b/packages/tokens/src/themes/teams/darkTheme.ts
@@ -1,9 +1,14 @@
 import { createTeamsDarkTheme } from '../../utils/createTeamsDarkTheme';
-import { brandTeams } from '../../global/brandColors';
+import { brandTeams, brandTeamsV21 } from '../../global/brandColors';
 import type { Theme } from '../../types';
 import { fontFamilies } from '../../alias/teamsFontFamilies';
 
 export const teamsDarkTheme: Theme = {
   ...createTeamsDarkTheme(brandTeams),
   ...fontFamilies,
 };
+
+export const teamsDarkV21Theme: Theme = {
+  ...createTeamsDarkTheme(brandTeamsV21),
+  ...fontFamilies,
+};
diff --git a/packages/tokens/src/themes/teams/index.ts b/packages/tokens/src/themes/teams/index.ts
@@ -1,3 +1,3 @@
-export { teamsLightTheme } from './lightTheme';
-export { teamsDarkTheme } from './darkTheme';
+export { teamsLightTheme, teamsLightV21Theme } from './lightTheme';
+export { teamsDarkTheme, teamsDarkV21Theme } from './darkTheme';
 export { teamsHighContrastTheme } from './highContrastTheme';
diff --git a/packages/tokens/src/themes/teams/lightTheme.ts b/packages/tokens/src/themes/teams/lightTheme.ts
@@ -1,9 +1,14 @@
 import { createLightTheme } from '../../utils/createLightTheme';
-import { brandTeams } from '../../global/brandColors';
+import { brandTeams, brandTeamsV21 } from '../../global/brandColors';
 import type { Theme } from '../../types';
 import { fontFamilies } from '../../alias/teamsFontFamilies';
 
 export const teamsLightTheme: Theme = {
   ...createLightTheme(brandTeams),
   ...fontFamilies,
 };
+
+export const teamsLightV21Theme: Theme = {
+  ...createLightTheme(brandTeamsV21),
+  ...fontFamilies,
+};
