Skip to content

Commit d7631d4

Browse files
GeoffCoxMSFTGeoffCoxMSFT
authored
Update fluent 2 theme to reconcile with v9 (#26331)
* Update fluent 2 theme to reconcile with v9 * yarn change
1 parent 980e243 commit d7631d4

4 files changed

Lines changed: 95 additions & 46 deletions

File tree

‎change/@fluentui-fluent2-theme-8de94a1d-8f86-46ae-9a71-92747400ae1f.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Updated theme colors to match Fluent2",
4+
"packageName": "@fluentui/fluent2-theme",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/fluent2-theme/src/fluent2SharedColors.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { IPalette } from '@fluentui/react';
2+
3+
/**
4+
* Shared colors from the Fluent 2 global palettes mapped to the v8 shared colors.
5+
* The mappings are based on closest color match available as semantic name.
6+
*/
7+
export const fluent2SharedColors: Partial<IPalette> = {
8+
yellowDark: '#d39300', // sharedColors.marigold.shade10
9+
yellow: '#fde300', // sharedColors.yellow.primary
10+
yellowLight: '#fef7b2', // sharedColors.yellow.tint40
11+
orange: '#f7630c', // sharedColors.orange.primary
12+
orangeLight: '#f98845', // sharedColors.orange.tint20
13+
orangeLighter: '#fdcfb4', // sharedColors.orange.tint40
14+
redDark: '#750b1c', // sharedColors.darkRed.primary
15+
red: '#d13438', // sharedColors.red.primary
16+
magentaDark: '#6b0043', // sharedColors.magenta.shade30
17+
magenta: '#bf0077', // sharedColors.magenta.primary
18+
magentaLight: '#d957a8', // sharedColors.magenta.tint30
19+
purpleDark: '#401b6c', // sharedColors.darkPurple.primary
20+
purple: '#5c2e91', // sharedColors.purple.primary
21+
purpleLight: '#c6b1de', // sharedColors.purple.tint40
22+
blueDark: '#003966', // sharedColors.darkBlue.primary
23+
blueMid: '#004e8c', // sharedColors.royalBlue.primary
24+
blue: '#0078d4', // sharedColors.blue.primary
25+
blueLight: '#3a96dd', // sharedColors.lightBlue.primary
26+
tealDark: '#006666', // sharedColors.darkTeal.primary
27+
teal: '#038387', // sharedColors.teal.primary
28+
tealLight: '#00b7c3', // sharedColors.lightTeal.primary
29+
greenDark: '#0b6a0b', // sharedColors.darkGreen.primary
30+
green: '#107c10', // sharedColors.green.primary
31+
greenLight: '#13a10e', // sharedColors.lightGreen.primary
32+
};

‎packages/fluent2-theme/src/fluent2WebDarkTheme.ts‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { IPalette, ISemanticColors, ITheme } from '@fluentui/react';
22
import { createTheme } from '@fluentui/react';
33
import { IExtendedEffects } from './types';
44
import { fluent2ComponentStyles } from './fluent2ComponentStyles';
5+
import { fluent2SharedColors } from './fluent2SharedColors';
56

67
const fluent2ForV8DarkEffects: IExtendedEffects = {
78
elevation4: '0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
@@ -16,29 +17,37 @@ const fluent2ForV8DarkEffects: IExtendedEffects = {
1617
};
1718

1819
const fluent2ForV8DarkPalette: Partial<IPalette> = {
19-
accent: '#2886de',
20+
// properties are ordered here as in IPalette.ts
21+
22+
themeDarker: '#62abf5',
23+
themeDark: '#479ef5',
24+
themeDarkAlt: '#479ef5',
2025
themePrimary: '#2886de',
21-
themeLighterAlt: '#0A2E4A',
22-
themeLighter: '#0c3b5e',
23-
themeLight: '#0e4775',
24-
themeTertiary: '#0f548c',
2526
themeSecondary: '#2886de',
26-
themeDarkAlt: '#479ef5',
27-
themeDark: '#479ef5',
28-
themeDarker: '#62abf5',
29-
neutralLighterAlt: '#1a1a1a',
30-
neutralLighter: '#242424',
31-
neutralLight: '#292929',
32-
neutralQuaternaryAlt: '#2e2e2e',
33-
neutralQuaternary: '#3d3d3d',
34-
neutralTertiaryAlt: '#424242',
35-
neutralTertiary: '#707070',
36-
neutralSecondary: '#d1d1d1',
37-
neutralPrimaryAlt: '#d6d6d6',
38-
neutralPrimary: '#f5f5f5',
39-
neutralDark: '#fafafa',
27+
themeTertiary: '#0f548c',
28+
themeLight: '#0e4775',
29+
themeLighter: '#0c3b5e',
30+
themeLighterAlt: '#0A2E4A',
31+
4032
black: '#ffffff', // Note white and black are inverted in this theme
33+
blackTranslucent40: 'rgba(255 ,255 ,255 ,0.4)',
34+
neutralDark: '#fafafa',
35+
neutralPrimary: '#f5f5f5',
36+
neutralPrimaryAlt: '#d6d6d6',
37+
neutralSecondary: '#d1d1d1',
38+
neutralSecondaryAlt: '#8a8886',
39+
neutralTertiary: '#707070',
40+
neutralTertiaryAlt: '#424242',
41+
neutralQuaternary: '#3d3d3d',
42+
neutralQuaternaryAlt: '#2e2e2e',
43+
neutralLight: '#292929',
44+
neutralLighter: '#242424',
45+
neutralLighterAlt: '#1a1a1a',
46+
accent: '#2886de',
4147
white: '#141414',
48+
whiteTranslucent40: 'rgba(0, 0, 0, 0.4)',
49+
50+
...fluent2SharedColors,
4251
};
4352

4453
const p = fluent2ForV8DarkPalette;

‎packages/fluent2-theme/src/fluent2WebLightTheme.ts‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createTheme } from '@fluentui/react';
33
import { IExtendedEffects } from './types';
44

55
import { fluent2ComponentStyles } from './fluent2ComponentStyles';
6+
import { fluent2SharedColors } from './fluent2SharedColors';
67

78
const fluent2ForV8DLightEffects: IExtendedEffects = {
89
elevation4: '0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
@@ -22,38 +23,38 @@ const grey26 = '#424242';
2223
const grey74 = '#BDBDBD';
2324

2425
const fluent2LightPalette: Partial<IPalette> = {
25-
accent: '#0f6cbd',
26+
// properties are ordered here as in IPalette.ts
27+
28+
themeDarker: '#0c3b5e',
29+
themeDark: '#0f548c',
30+
themeDarkAlt: '#115ea3',
2631
themePrimary: '#0f6cbd',
27-
themeLighterAlt: '#ebf3fc',
28-
themeLighter: '#cfe4fa',
29-
themeLight: '#b4d6fa',
30-
themeTertiary: '#77b7f7',
3132
themeSecondary: '#2886de', // Required by Fabric palette, only used in ShimmerWave
32-
themeDarkAlt: '#115ea3',
33-
themeDark: '#0f548c',
34-
themeDarker: '#0c3b5e',
35-
neutralLighterAlt: '#fafafa',
36-
neutralLighter: '#f5f5f5',
37-
neutralLight: '#ebebeb',
38-
neutralQuaternaryAlt: '#e0e0e0',
39-
neutralQuaternary: '#d1d1d1',
40-
neutralTertiaryAlt: '#c7c7c7',
41-
neutralTertiary: '#9e9e9e',
42-
neutralSecondary: '#5c5c5c',
43-
neutralPrimaryAlt: '#383838',
44-
neutralPrimary: '#242424',
45-
neutralDark: '#141414',
33+
themeTertiary: '#77b7f7',
34+
themeLight: '#b4d6fa',
35+
themeLighter: '#cfe4fa',
36+
themeLighterAlt: '#ebf3fc',
37+
4638
black: '#000000',
39+
blackTranslucent40: 'rgba(0, 0, 0, 0.4)',
40+
neutralDark: '#141414',
41+
neutralPrimary: '#242424',
42+
neutralPrimaryAlt: '#383838',
43+
neutralSecondary: '#5c5c5c',
44+
neutralSecondaryAlt: '#8a8886',
45+
neutralTertiary: '#9e9e9e',
46+
neutralTertiaryAlt: '#c7c7c7',
47+
neutralQuaternary: '#d1d1d1',
48+
neutralQuaternaryAlt: '#e0e0e0',
49+
neutralLight: '#ebebeb',
50+
neutralLighter: '#f5f5f5',
51+
neutralLighterAlt: '#fafafa',
52+
53+
accent: '#0f6cbd',
4754
white: '#FFFFFF',
55+
whiteTranslucent40: 'rgba(255 ,255 ,255 ,0.4)',
4856

49-
yellowDark: '#835C00',
50-
yellow: '#F2E384',
51-
yellowLight: '#FBF6D9',
52-
orange: '#A33D2A',
53-
orangeLight: '#CC4A31',
54-
orangeLighter: '#EDC2A7',
55-
redDark: '#8E192E',
56-
red: '#C4314B',
57+
...fluent2SharedColors,
5758
};
5859

5960
const p = fluent2LightPalette;

0 commit comments

Comments
 (0)