From fa0cabbda91c9da68265b65e0483c9bd1954eb72 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 25 May 2023 13:07:11 -0700 Subject: [PATCH 1/6] feat(tokens): Add status color tokens --- .../sass/colorPaletteTokens.scss | 33 +++++++++++++ packages/tokens/etc/tokens.api.md | 2 +- .../tokens/src/alias/lightColorPalette.ts | 28 ++++++++++- packages/tokens/src/global/colorPalette.ts | 9 +++- packages/tokens/src/sharedColorNames.ts | 3 ++ packages/tokens/src/statusColorMapping.ts | 7 +++ packages/tokens/src/tokens.ts | 36 ++++++++++++++ packages/tokens/src/types.ts | 48 ++++++++++++++++++- packages/tokens/src/utils/createDarkTheme.ts | 2 + .../src/utils/createHighContrastTheme.ts | 2 + packages/tokens/src/utils/createLightTheme.ts | 3 +- .../tokens/src/utils/createTeamsDarkTheme.ts | 2 + 12 files changed, 169 insertions(+), 6 deletions(-) create mode 100644 packages/tokens/src/statusColorMapping.ts diff --git a/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss index bf9c765576929..dc949536257dc 100644 --- a/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss @@ -182,3 +182,36 @@ $colorPalettePlatinumBorderActive: var(--colorPalettePlatinumBorderActive); $colorPaletteAnchorBackground2: var(--colorPaletteAnchorBackground2); $colorPaletteAnchorForeground2: var(--colorPaletteAnchorForeground2); $colorPaletteAnchorBorderActive: var(--colorPaletteAnchorBorderActive); + +$colorStatusSuccessBackground1: var(--colorStatusSuccessBackground1); +$colorStatusSuccessBackground2: var(--colorStatusSuccessBackground2); +$colorStatusSuccessBackground3: var(--colorStatusSuccessBackground3); +$colorStatusSuccessForeground1: var(--colorStatusSuccessForeground1); +$colorStatusSuccessForeground2: var(--colorStatusSuccessForeground2); +$colorStatusSuccessForeground3: var(--colorStatusSuccessForeground3); +$colorStatusSuccessForegroundInverted: var(--colorStatusSuccessForegroundInverted); +$colorStatusSuccessBorderActive: var(--colorStatusSuccessBorderActive); +$colorStatusSuccessBorder1: var(--colorStatusSuccessBorder1); +$colorStatusSuccessBorder2: var(--colorStatusSuccessBorder2); + +$colorStatusWarningBackground1: var(--colorStatusWarningBackground1); +$colorStatusWarningBackground2: var(--colorStatusWarningBackground2); +$colorStatusWarningBackground3: var(--colorStatusWarningBackground3); +$colorStatusWarningForeground1: var(--colorStatusWarningForeground1); +$colorStatusWarningForeground2: var(--colorStatusWarningForeground2); +$colorStatusWarningForeground3: var(--colorStatusWarningForeground3); +$colorStatusWarningForegroundInverted: var(--colorStatusWarningForegroundInverted); +$colorStatusWarningBorderActive: var(--colorStatusWarningBorderActive); +$colorStatusWarningBorder1: var(--colorStatusWarningBorder1); +$colorStatusWarningBorder2: var(--colorStatusWarningBorder2); + +$colorStatusDangerBackground1: var(--colorStatusDangerBackground1); +$colorStatusDangerBackground2: var(--colorStatusDangerBackground2); +$colorStatusDangerBackground3: var(--colorStatusDangerBackground3); +$colorStatusDangerForeground1: var(--colorStatusDangerForeground1); +$colorStatusDangerForeground2: var(--colorStatusDangerForeground2); +$colorStatusDangerForeground3: var(--colorStatusDangerForeground3); +$colorStatusDangerForegroundInverted: var(--colorStatusDangerForegroundInverted); +$colorStatusDangerBorderActive: var(--colorStatusDangerBorderActive); +$colorStatusDangerBorder1: var(--colorStatusDangerBorder1); +$colorStatusDangerBorder2: var(--colorStatusDangerBorder2); diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index fc0282dee28a7..a5d889d6ef9b4 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -439,7 +439,7 @@ export const teamsHighContrastTheme: Theme; export const teamsLightTheme: Theme; // @public (undocumented) -export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; +export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens; // @public export function themeToTokensObject(theme: TTheme): Record; diff --git a/packages/tokens/src/alias/lightColorPalette.ts b/packages/tokens/src/alias/lightColorPalette.ts index 2837f77299859..63cc13c2ba6a9 100644 --- a/packages/tokens/src/alias/lightColorPalette.ts +++ b/packages/tokens/src/alias/lightColorPalette.ts @@ -1,6 +1,7 @@ -import { statusSharedColors, personaSharedColors } from '../global/colorPalette'; +import { statusSharedColors, personaSharedColors, mappedStatusColors } from '../global/colorPalette'; import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; -import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { ColorPaletteTokens, ColorStatusTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusColorMapping } from '../statusColorMapping'; const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); @@ -38,3 +39,26 @@ const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedCol }, {} as PersonaColorPaletteTokens); export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; + +export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMapping).reduce( + (acc, [statusColor, sharedColor]) => { + const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1); + + // TODO: double check the mapping with design + const statusColorTokens = { + [`colorStatus${color}Background1`]: mappedStatusColors[sharedColor].tint60, + [`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].tint40, + [`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].shade10, + [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].shade30, + [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint20, + [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].tint40, + [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].primary, + }; + + return Object.assign(acc, statusColorTokens); + }, + {} as ColorStatusTokens, +); diff --git a/packages/tokens/src/global/colorPalette.ts b/packages/tokens/src/global/colorPalette.ts index 641df5f085d89..1c32efe5f57a6 100644 --- a/packages/tokens/src/global/colorPalette.ts +++ b/packages/tokens/src/global/colorPalette.ts @@ -34,8 +34,9 @@ import { mink, platinum, anchor, + orange, } from './colors'; -import { PersonaSharedColors, StatusSharedColors } from '../types'; +import { MappedStatusColors, PersonaSharedColors, StatusSharedColors } from '../types'; export const statusSharedColors: StatusSharedColors = { red, @@ -77,3 +78,9 @@ export const personaSharedColors: PersonaSharedColors = { platinum, anchor, }; + +export const mappedStatusColors: MappedStatusColors = { + red, + green, + orange, +}; diff --git a/packages/tokens/src/sharedColorNames.ts b/packages/tokens/src/sharedColorNames.ts index 7cc61154fa5b9..5deef06601234 100644 --- a/packages/tokens/src/sharedColorNames.ts +++ b/packages/tokens/src/sharedColorNames.ts @@ -41,6 +41,9 @@ export const personaSharedColorNames = [ 'anchor', ] as const; +/* List of global colors which semantic alias status tokens map to */ +export const mappedStatusColorNames = ['red', 'green', 'orange'] as const; + /* Names of colors not used in alias tokens but produced by token pipeline as global color tokens. */ export const unusedSharedColorNames = [ 'burgundy', diff --git a/packages/tokens/src/statusColorMapping.ts b/packages/tokens/src/statusColorMapping.ts new file mode 100644 index 0000000000000..61d5eeaf8aade --- /dev/null +++ b/packages/tokens/src/statusColorMapping.ts @@ -0,0 +1,7 @@ +import { MappedStatusColorNames } from './types'; + +export const statusColorMapping: Record = { + success: 'green', + warning: 'orange', + danger: 'red', +}; diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 79a4f0823b1aa..7b71666106783 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -382,6 +382,42 @@ export const tokens: Record = { colorPaletteTealBorderActive: 'var(--colorPaletteTealBorderActive)', colorPaletteTealForeground2: 'var(--colorPaletteTealForeground2)', + // Color status success tokens + colorStatusSuccessBackground1: 'var(--colorStatusSuccessBackground1)', + colorStatusSuccessBackground2: 'var(--colorStatusSuccessBackground2)', + colorStatusSuccessBackground3: 'var(--colorStatusSuccessBackground3)', + colorStatusSuccessForeground1: 'var(--colorStatusSuccessForeground1)', + colorStatusSuccessForeground2: 'var(--colorStatusSuccessForeground2)', + colorStatusSuccessForeground3: 'var(--colorStatusSuccessForeground3)', + colorStatusSuccessForegroundInverted: 'var(--colorStatusSuccessForegroundInverted)', + colorStatusSuccessBorderActive: 'var(--colorStatusSuccessBorderActive)', + colorStatusSuccessBorder1: 'var(--colorStatusSuccessBorder1)', + colorStatusSuccessBorder2: 'var(--colorStatusSuccessBorder2)', + + // Color status warning tokens + colorStatusWarningBackground1: 'var(--colorStatusWarningBackground1)', + colorStatusWarningBackground2: 'var(--colorStatusWarningBackground2)', + colorStatusWarningBackground3: 'var(--colorStatusWarningBackground3)', + colorStatusWarningForeground1: 'var(--colorStatusWarningForeground1)', + colorStatusWarningForeground2: 'var(--colorStatusWarningForeground2)', + colorStatusWarningForeground3: 'var(--colorStatusWarningForeground3)', + colorStatusWarningForegroundInverted: 'var(--colorStatusWarningForegroundInverted)', + colorStatusWarningBorderActive: 'var(--colorStatusWarningBorderActive)', + colorStatusWarningBorder1: 'var(--colorStatusWarningBorder1)', + colorStatusWarningBorder2: 'var(--colorStatusWarningBorder2)', + + // Color status danger tokens + colorStatusDangerBackground1: 'var(--colorStatusDangerBackground1)', + colorStatusDangerBackground2: 'var(--colorStatusDangerBackground2)', + colorStatusDangerBackground3: 'var(--colorStatusDangerBackground3)', + colorStatusDangerForeground1: 'var(--colorStatusDangerForeground1)', + colorStatusDangerForeground2: 'var(--colorStatusDangerForeground2)', + colorStatusDangerForeground3: 'var(--colorStatusDangerForeground3)', + colorStatusDangerForegroundInverted: 'var(--colorStatusDangerForegroundInverted)', + colorStatusDangerBorderActive: 'var(--colorStatusDangerBorderActive)', + colorStatusDangerBorder1: 'var(--colorStatusDangerBorder1)', + colorStatusDangerBorder2: 'var(--colorStatusDangerBorder2)', + // Border radius tokens borderRadiusNone: 'var(--borderRadiusNone)', borderRadiusSmall: 'var(--borderRadiusSmall)', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 9f07e8e9d1528..c9e0ee3cf0080 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -1,4 +1,9 @@ -import { statusSharedColorNames, personaSharedColorNames, unusedSharedColorNames } from './sharedColorNames'; +import { + statusSharedColorNames, + personaSharedColorNames, + unusedSharedColorNames, + mappedStatusColorNames, +} from './sharedColorNames'; /** * Design tokens for alias colors @@ -163,6 +168,42 @@ export type ColorTokens = { colorBrandShadowKey: string; }; +export type ColorStatusSuccess = + | 'colorStatusSuccessBackground1' + | 'colorStatusSuccessBackground2' + | 'colorStatusSuccessBackground3' + | 'colorStatusSuccessForeground1' + | 'colorStatusSuccessForeground2' + | 'colorStatusSuccessForeground3' + | 'colorStatusSuccessForegroundInverted' + | 'colorStatusSuccessBorderActive' + | 'colorStatusSuccessBorder1' + | 'colorStatusSuccessBorder2'; + +export type ColorStatusWarning = + | 'colorStatusWarningBackground1' + | 'colorStatusWarningBackground2' + | 'colorStatusWarningBackground3' + | 'colorStatusWarningForeground1' + | 'colorStatusWarningForeground2' + | 'colorStatusWarningForeground3' + | 'colorStatusWarningForegroundInverted' + | 'colorStatusWarningBorderActive' + | 'colorStatusWarningBorder1' + | 'colorStatusWarningBorder2'; + +export type ColorStatusDanger = + | 'colorStatusDangerBackground1' + | 'colorStatusDangerBackground2' + | 'colorStatusDangerBackground3' + | 'colorStatusDangerForeground1' + | 'colorStatusDangerForeground2' + | 'colorStatusDangerForeground3' + | 'colorStatusDangerForegroundInverted' + | 'colorStatusDangerBorderActive' + | 'colorStatusDangerBorder1' + | 'colorStatusDangerBorder2'; + export type ColorPaletteRed = | 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' @@ -383,6 +424,8 @@ export type ColorPaletteAnchor = | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive'; +export type ColorStatusTokens = Record; + export type StatusColorPaletteTokens = Record< | ColorPaletteRed | ColorPaletteGreen @@ -452,10 +495,12 @@ export type BrandVariants = Record; type StatusSharedColorNames = (typeof statusSharedColorNames)[number]; type PersonaSharedColorNames = (typeof personaSharedColorNames)[number]; +export type MappedStatusColorNames = (typeof mappedStatusColorNames)[number]; type UnusedSharedColorNames = (typeof unusedSharedColorNames)[number]; export type StatusSharedColors = Record; export type PersonaSharedColors = Record; +export type MappedStatusColors = Record; export type UnusedSharedColors = Record; export type FontSizeTokens = { @@ -715,6 +760,7 @@ export type Theme = FontSizeTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & + ColorStatusTokens & ColorTokens; export type PartialTheme = Partial; diff --git a/packages/tokens/src/utils/createDarkTheme.ts b/packages/tokens/src/utils/createDarkTheme.ts index 0cd54630111cb..c13b03c0b3fdb 100644 --- a/packages/tokens/src/utils/createDarkTheme.ts +++ b/packages/tokens/src/utils/createDarkTheme.ts @@ -7,6 +7,7 @@ import type { BrandVariants, Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; +import { ColorStatusTokens } from '../types'; export const createDarkTheme: (brand: BrandVariants) => Theme = brand => { const colorTokens = generateColorTokens(brand); @@ -25,6 +26,7 @@ export const createDarkTheme: (brand: BrandVariants) => Theme = brand => { ...colorTokens, ...colorPaletteTokens, + ...({} as ColorStatusTokens), // FIXME ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), diff --git a/packages/tokens/src/utils/createHighContrastTheme.ts b/packages/tokens/src/utils/createHighContrastTheme.ts index cc5383a267409..e586118e686b1 100644 --- a/packages/tokens/src/utils/createHighContrastTheme.ts +++ b/packages/tokens/src/utils/createHighContrastTheme.ts @@ -7,6 +7,7 @@ import type { Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; +import { ColorStatusTokens } from '../types'; export const createHighContrastTheme = (): Theme => { const colorTokens = generateColorTokens(); @@ -25,6 +26,7 @@ export const createHighContrastTheme = (): Theme => { ...colorTokens, ...colorPaletteTokens, + ...({} as ColorStatusTokens), // FIXME ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), diff --git a/packages/tokens/src/utils/createLightTheme.ts b/packages/tokens/src/utils/createLightTheme.ts index a5587671cc776..863e9aae1d7c0 100644 --- a/packages/tokens/src/utils/createLightTheme.ts +++ b/packages/tokens/src/utils/createLightTheme.ts @@ -1,4 +1,4 @@ -import { colorPaletteTokens } from '../alias/lightColorPalette'; +import { colorPaletteTokens, colorStatusTokens } from '../alias/lightColorPalette'; import { generateColorTokens } from '../alias/lightColor'; import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; @@ -25,6 +25,7 @@ export const createLightTheme: (brand: BrandVariants) => Theme = brand => { ...colorTokens, ...colorPaletteTokens, + ...colorStatusTokens, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), diff --git a/packages/tokens/src/utils/createTeamsDarkTheme.ts b/packages/tokens/src/utils/createTeamsDarkTheme.ts index 047d298160e26..723b956a6547e 100644 --- a/packages/tokens/src/utils/createTeamsDarkTheme.ts +++ b/packages/tokens/src/utils/createTeamsDarkTheme.ts @@ -7,6 +7,7 @@ import type { BrandVariants, Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; +import { ColorStatusTokens } from '../types'; export const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => { const colorTokens = generateColorTokens(brand); @@ -25,6 +26,7 @@ export const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => { ...colorTokens, ...colorPaletteTokens, + ...({} as ColorStatusTokens), // FIXME ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), From e058fcc63480825f05a5f3c70a7f58af6f1d4fe3 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 25 May 2023 13:15:04 -0700 Subject: [PATCH 2/6] change files --- ...ct-theme-sass-e2d8f9af-d82d-46c9-aa2e-c2a282d629fb.json | 7 +++++++ ...uentui-tokens-3fab400b-e938-422a-8e03-d509bfd2c4dc.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-theme-sass-e2d8f9af-d82d-46c9-aa2e-c2a282d629fb.json create mode 100644 change/@fluentui-tokens-3fab400b-e938-422a-8e03-d509bfd2c4dc.json diff --git a/change/@fluentui-react-theme-sass-e2d8f9af-d82d-46c9-aa2e-c2a282d629fb.json b/change/@fluentui-react-theme-sass-e2d8f9af-d82d-46c9-aa2e-c2a282d629fb.json new file mode 100644 index 0000000000000..3e41f4762eda3 --- /dev/null +++ b/change/@fluentui-react-theme-sass-e2d8f9af-d82d-46c9-aa2e-c2a282d629fb.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat(tokens): add status color tokens", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-tokens-3fab400b-e938-422a-8e03-d509bfd2c4dc.json b/change/@fluentui-tokens-3fab400b-e938-422a-8e03-d509bfd2c4dc.json new file mode 100644 index 0000000000000..bb09b8755af68 --- /dev/null +++ b/change/@fluentui-tokens-3fab400b-e938-422a-8e03-d509bfd2c4dc.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: add status color tokens", + "packageName": "@fluentui/tokens", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} From 690110e21a593518be1ba46f57ca91c76138fee3 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 25 May 2023 13:57:20 -0700 Subject: [PATCH 3/6] bump target in perf-test-react-components to support Object.entries() --- apps/perf-test-react-components/tsconfig.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/perf-test-react-components/tsconfig.json b/apps/perf-test-react-components/tsconfig.json index 33ae901fce3cd..df942496ceb3b 100644 --- a/apps/perf-test-react-components/tsconfig.json +++ b/apps/perf-test-react-components/tsconfig.json @@ -1,13 +1,13 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { - "target": "es5", + "target": "ES2019", "outDir": "lib", "module": "commonjs", "jsx": "react", "experimentalDecorators": true, "preserveConstEnums": true, - "lib": ["ES2015", "DOM"], + "lib": ["ES2019", "DOM"], "types": ["webpack-env"] }, "include": ["src"] From 967d8e6e4eb6a830a96ad4655d27d9d17e3a1bdf Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 25 May 2023 17:18:33 -0700 Subject: [PATCH 4/6] add status tokens to dark and HC --- packages/tokens/src/alias/darkColorPalette.ts | 28 +++++++++++++++++-- .../src/alias/highContrastColorPalette.ts | 26 ++++++++++++++++- packages/tokens/src/utils/createDarkTheme.ts | 5 ++-- .../src/utils/createHighContrastTheme.ts | 5 ++-- .../tokens/src/utils/createTeamsDarkTheme.ts | 5 ++-- 5 files changed, 57 insertions(+), 12 deletions(-) diff --git a/packages/tokens/src/alias/darkColorPalette.ts b/packages/tokens/src/alias/darkColorPalette.ts index 250fe93a4c410..619ffbec67306 100644 --- a/packages/tokens/src/alias/darkColorPalette.ts +++ b/packages/tokens/src/alias/darkColorPalette.ts @@ -1,8 +1,9 @@ /* color palette used in both darkTheme and teamsDarkTheme */ -import { statusSharedColors, personaSharedColors } from '../global/colorPalette'; +import { statusSharedColors, personaSharedColors, mappedStatusColors } from '../global/colorPalette'; import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; -import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { ColorPaletteTokens, ColorStatusTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusColorMapping } from '../statusColorMapping'; const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); @@ -49,3 +50,26 @@ personaColorPaletteTokens.colorPaletteDarkRedBackground2 = personaSharedColors.d personaColorPaletteTokens.colorPalettePlumBackground2 = personaSharedColors.plum.shade20; export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; + +export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMapping).reduce( + (acc, [statusColor, sharedColor]) => { + const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1); + + // TODO: double check the mapping with design - see the one-off patches above + const statusColorTokens = { + [`colorStatus${color}Background1`]: mappedStatusColors[sharedColor].shade40, + [`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].shade30, + [`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].tint30, + [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].tint40, + [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].tint20, + [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].tint30, + [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].tint20, + }; + + return Object.assign(acc, statusColorTokens); + }, + {} as ColorStatusTokens, +); diff --git a/packages/tokens/src/alias/highContrastColorPalette.ts b/packages/tokens/src/alias/highContrastColorPalette.ts index 51b30ba0f1835..2b1c499d30b0e 100644 --- a/packages/tokens/src/alias/highContrastColorPalette.ts +++ b/packages/tokens/src/alias/highContrastColorPalette.ts @@ -1,6 +1,7 @@ import { hcHighlight, hcCanvas, hcCanvasText } from '../global/colors'; import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; -import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { ColorPaletteTokens, ColorStatusTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusColorMapping } from '../statusColorMapping'; const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); @@ -36,3 +37,26 @@ const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedCol }, {} as PersonaColorPaletteTokens); export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; + +export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMapping).reduce( + (acc, [statusColor, sharedColor]) => { + const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1); + + // TODO: double check the mapping with design + const statusColorTokens = { + [`colorStatus${color}Background1`]: hcCanvas, + [`colorStatus${color}Background2`]: hcCanvas, + [`colorStatus${color}Background3`]: hcCanvasText, + [`colorStatus${color}Foreground1`]: hcCanvasText, + [`colorStatus${color}Foreground2`]: hcCanvasText, + [`colorStatus${color}Foreground3`]: hcCanvasText, + [`colorStatus${color}BorderActive`]: hcHighlight, + [`colorStatus${color}ForegroundInverted`]: hcCanvasText, + [`colorStatus${color}Border1`]: hcCanvasText, + [`colorStatus${color}Border2`]: hcCanvasText, + }; + + return Object.assign(acc, statusColorTokens); + }, + {} as ColorStatusTokens, +); diff --git a/packages/tokens/src/utils/createDarkTheme.ts b/packages/tokens/src/utils/createDarkTheme.ts index c13b03c0b3fdb..06266dd5e9f78 100644 --- a/packages/tokens/src/utils/createDarkTheme.ts +++ b/packages/tokens/src/utils/createDarkTheme.ts @@ -1,4 +1,4 @@ -import { colorPaletteTokens } from '../alias/darkColorPalette'; +import { colorPaletteTokens, colorStatusTokens } from '../alias/darkColorPalette'; import { generateColorTokens } from '../alias/darkColor'; import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; @@ -7,7 +7,6 @@ import type { BrandVariants, Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; -import { ColorStatusTokens } from '../types'; export const createDarkTheme: (brand: BrandVariants) => Theme = brand => { const colorTokens = generateColorTokens(brand); @@ -26,7 +25,7 @@ export const createDarkTheme: (brand: BrandVariants) => Theme = brand => { ...colorTokens, ...colorPaletteTokens, - ...({} as ColorStatusTokens), // FIXME + ...colorStatusTokens, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), diff --git a/packages/tokens/src/utils/createHighContrastTheme.ts b/packages/tokens/src/utils/createHighContrastTheme.ts index e586118e686b1..4d8359324b795 100644 --- a/packages/tokens/src/utils/createHighContrastTheme.ts +++ b/packages/tokens/src/utils/createHighContrastTheme.ts @@ -1,4 +1,4 @@ -import { colorPaletteTokens } from '../alias/highContrastColorPalette'; +import { colorPaletteTokens, colorStatusTokens } from '../alias/highContrastColorPalette'; import { generateColorTokens } from '../alias/highContrastColor'; import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; @@ -7,7 +7,6 @@ import type { Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; -import { ColorStatusTokens } from '../types'; export const createHighContrastTheme = (): Theme => { const colorTokens = generateColorTokens(); @@ -26,7 +25,7 @@ export const createHighContrastTheme = (): Theme => { ...colorTokens, ...colorPaletteTokens, - ...({} as ColorStatusTokens), // FIXME + ...colorStatusTokens, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), diff --git a/packages/tokens/src/utils/createTeamsDarkTheme.ts b/packages/tokens/src/utils/createTeamsDarkTheme.ts index 723b956a6547e..f5cee744cf6aa 100644 --- a/packages/tokens/src/utils/createTeamsDarkTheme.ts +++ b/packages/tokens/src/utils/createTeamsDarkTheme.ts @@ -1,4 +1,4 @@ -import { colorPaletteTokens } from '../alias/darkColorPalette'; +import { colorPaletteTokens, colorStatusTokens } from '../alias/darkColorPalette'; import { generateColorTokens } from '../alias/teamsDarkColor'; import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; @@ -7,7 +7,6 @@ import type { BrandVariants, Theme } from '../types'; import { durations } from '../global/durations'; import { curves } from '../global/curves'; import { horizontalSpacings, verticalSpacings } from '../global/spacings'; -import { ColorStatusTokens } from '../types'; export const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => { const colorTokens = generateColorTokens(brand); @@ -26,7 +25,7 @@ export const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => { ...colorTokens, ...colorPaletteTokens, - ...({} as ColorStatusTokens), // FIXME + ...colorStatusTokens, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'), From 97c7f8dfd41ee484321323ea18aaf67d16da4c1f Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 14 Jun 2023 13:05:30 -0700 Subject: [PATCH 5/6] map danger to cranberry --- packages/tokens/src/global/colorPalette.ts | 2 +- packages/tokens/src/sharedColorNames.ts | 2 +- packages/tokens/src/statusColorMapping.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tokens/src/global/colorPalette.ts b/packages/tokens/src/global/colorPalette.ts index 1c32efe5f57a6..733e4e54311a2 100644 --- a/packages/tokens/src/global/colorPalette.ts +++ b/packages/tokens/src/global/colorPalette.ts @@ -80,7 +80,7 @@ export const personaSharedColors: PersonaSharedColors = { }; export const mappedStatusColors: MappedStatusColors = { - red, + cranberry, green, orange, }; diff --git a/packages/tokens/src/sharedColorNames.ts b/packages/tokens/src/sharedColorNames.ts index 5deef06601234..105ec32904057 100644 --- a/packages/tokens/src/sharedColorNames.ts +++ b/packages/tokens/src/sharedColorNames.ts @@ -42,7 +42,7 @@ export const personaSharedColorNames = [ ] as const; /* List of global colors which semantic alias status tokens map to */ -export const mappedStatusColorNames = ['red', 'green', 'orange'] as const; +export const mappedStatusColorNames = ['cranberry', 'green', 'orange'] as const; /* Names of colors not used in alias tokens but produced by token pipeline as global color tokens. */ export const unusedSharedColorNames = [ diff --git a/packages/tokens/src/statusColorMapping.ts b/packages/tokens/src/statusColorMapping.ts index 61d5eeaf8aade..71db850ef3881 100644 --- a/packages/tokens/src/statusColorMapping.ts +++ b/packages/tokens/src/statusColorMapping.ts @@ -3,5 +3,5 @@ import { MappedStatusColorNames } from './types'; export const statusColorMapping: Record = { success: 'green', warning: 'orange', - danger: 'red', + danger: 'cranberry', }; From 771f04064ac2a5d3ca2e3cf1d5a0adc158ae7d72 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 24 Jul 2023 11:11:07 -0700 Subject: [PATCH 6/6] add one-off overrides to match the latest design spec --- packages/tokens/src/alias/darkColorPalette.ts | 9 ++++++++- packages/tokens/src/alias/lightColorPalette.ts | 7 ++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/tokens/src/alias/darkColorPalette.ts b/packages/tokens/src/alias/darkColorPalette.ts index 619ffbec67306..026cd20994212 100644 --- a/packages/tokens/src/alias/darkColorPalette.ts +++ b/packages/tokens/src/alias/darkColorPalette.ts @@ -64,7 +64,7 @@ export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMa [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].tint40, [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].tint20, [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].tint30, - [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].primary, + [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].shade10, [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].tint20, }; @@ -73,3 +73,10 @@ export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMa }, {} as ColorStatusTokens, ); + +// one-off overrides for colorStatus tokens +colorStatusTokens.colorStatusDangerForeground3 = mappedStatusColors[statusColorMapping.danger].tint30; +colorStatusTokens.colorStatusDangerBorder2 = mappedStatusColors[statusColorMapping.danger].tint30; +colorStatusTokens.colorStatusSuccessForeground3 = mappedStatusColors[statusColorMapping.success].tint40; +colorStatusTokens.colorStatusSuccessBorder2 = mappedStatusColors[statusColorMapping.success].tint40; +colorStatusTokens.colorStatusWarningForegroundInverted = mappedStatusColors[statusColorMapping.warning].shade20; diff --git a/packages/tokens/src/alias/lightColorPalette.ts b/packages/tokens/src/alias/lightColorPalette.ts index 63cc13c2ba6a9..b592de8c3d1dc 100644 --- a/packages/tokens/src/alias/lightColorPalette.ts +++ b/packages/tokens/src/alias/lightColorPalette.ts @@ -52,7 +52,7 @@ export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMa [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].shade10, [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].shade30, [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].primary, - [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint20, + [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint30, [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].tint40, [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].primary, @@ -62,3 +62,8 @@ export const colorStatusTokens: ColorStatusTokens = Object.entries(statusColorMa }, {} as ColorStatusTokens, ); + +// one-off overrides for colorStatus tokens +colorStatusTokens.colorStatusWarningForeground1 = mappedStatusColors[statusColorMapping.warning].shade20; +colorStatusTokens.colorStatusWarningForeground3 = mappedStatusColors[statusColorMapping.warning].shade20; +colorStatusTokens.colorStatusWarningBorder2 = mappedStatusColors[statusColorMapping.warning].shade20;