diff --git a/change/@fluentui-react-theme-54c0704a-5974-4449-b128-7629e3c0566b.json b/change/@fluentui-react-theme-54c0704a-5974-4449-b128-7629e3c0566b.json new file mode 100644 index 00000000000000..a5fbbdc37f21d9 --- /dev/null +++ b/change/@fluentui-react-theme-54c0704a-5974-4449-b128-7629e3c0566b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: Refactor global shared color tokens", + "packageName": "@fluentui/react-theme", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-theme/src/alias/darkColorPalette.ts b/packages/react-components/react-theme/src/alias/darkColorPalette.ts index f23a9165a5463b..7bd6cf3eef945d 100644 --- a/packages/react-components/react-theme/src/alias/darkColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/darkColorPalette.ts @@ -1,9 +1,8 @@ -import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusSharedColors, personaSharedColors } from '../global/colorPalette'; +import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; +import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40, @@ -20,9 +19,7 @@ const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< return { ...acc, ...sharedColorTokens }; }, {} as StatusColorPaletteTokens); -const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30, diff --git a/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts b/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts index 7d81e0a4aa6a61..96d114ee267e2a 100644 --- a/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts @@ -1,17 +1,8 @@ -import { - statusSharedColors, - personaSharedColors, - hcHighlight, - white, - black, - StatusSharedColors, - PersonaSharedColors, -} from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { hcHighlight, white, black } from '../global/colors'; +import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; +import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: white, @@ -28,9 +19,7 @@ const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< return { ...acc, ...sharedColorTokens }; }, {} as StatusColorPaletteTokens); -const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: black, diff --git a/packages/react-components/react-theme/src/alias/lightColorPalette.ts b/packages/react-components/react-theme/src/alias/lightColorPalette.ts index da084ce605da0c..7340316089e9e1 100644 --- a/packages/react-components/react-theme/src/alias/lightColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/lightColorPalette.ts @@ -1,9 +1,8 @@ -import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusSharedColors, personaSharedColors } from '../global/colorPalette'; +import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; +import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].tint60, @@ -20,9 +19,7 @@ const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< return { ...acc, ...sharedColorTokens }; }, {} as StatusColorPaletteTokens); -const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].tint40, diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts b/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts index f23a9165a5463b..7bd6cf3eef945d 100644 --- a/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts @@ -1,9 +1,8 @@ -import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; +import { statusSharedColors, personaSharedColors } from '../global/colorPalette'; +import { statusSharedColorNames, personaSharedColorNames } from '../sharedColorNames'; +import { ColorPaletteTokens, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40, @@ -20,9 +19,7 @@ const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< return { ...acc, ...sharedColorTokens }; }, {} as StatusColorPaletteTokens); -const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< - keyof Pick ->).reduce((acc, sharedColor) => { +const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30, diff --git a/packages/react-components/react-theme/src/global/colorPalette.ts b/packages/react-components/react-theme/src/global/colorPalette.ts new file mode 100644 index 00000000000000..641df5f085d89b --- /dev/null +++ b/packages/react-components/react-theme/src/global/colorPalette.ts @@ -0,0 +1,79 @@ +import { + red, + green, + darkOrange, + yellow, + berry, + lightGreen, + marigold, + darkRed, + cranberry, + pumpkin, + peach, + gold, + brass, + brown, + forest, + seafoam, + darkGreen, + lightTeal, + teal, + steel, + blue, + royalBlue, + cornflower, + navy, + lavender, + purple, + grape, + lilac, + pink, + magenta, + plum, + beige, + mink, + platinum, + anchor, +} from './colors'; +import { PersonaSharedColors, StatusSharedColors } from '../types'; + +export const statusSharedColors: StatusSharedColors = { + red, + green, + darkOrange, + yellow, + berry, + lightGreen, + marigold, +}; + +export const personaSharedColors: PersonaSharedColors = { + darkRed, + cranberry, + pumpkin, + peach, + gold, + brass, + brown, + forest, + seafoam, + darkGreen, + lightTeal, + teal, + steel, + blue, + royalBlue, + cornflower, + navy, + lavender, + purple, + grape, + lilac, + pink, + magenta, + plum, + beige, + mink, + platinum, + anchor, +}; diff --git a/packages/react-components/react-theme/src/global/colors.ts b/packages/react-components/react-theme/src/global/colors.ts index 5152a32bb4b0a1..208c14354cd60e 100644 --- a/packages/react-components/react-theme/src/global/colors.ts +++ b/packages/react-components/react-theme/src/global/colors.ts @@ -1,4 +1,4 @@ -import type { GlobalSharedColors, ColorVariants, Greys, AlphaColors } from '../types'; +import type { ColorVariants, Greys, AlphaColors } from '../types'; export const grey: Record = { '0': '#000000', @@ -113,7 +113,7 @@ export const hcButtonText = '#000000'; export const hcButtonFace = '#ffffff'; -const darkRed: ColorVariants = { +export const darkRed: ColorVariants = { shade50: '#130204', shade40: '#230308', shade30: '#420610', @@ -128,7 +128,7 @@ const darkRed: ColorVariants = { tint60: '#f9f0f2', }; -const burgundy: ColorVariants = { +export const burgundy: ColorVariants = { shade50: '#1a0607', shade40: '#310b0d', shade30: '#5c1519', @@ -143,7 +143,7 @@ const burgundy: ColorVariants = { tint60: '#fbf4f4', }; -const cranberry: ColorVariants = { +export const cranberry: ColorVariants = { shade50: '#200205', shade40: '#3b0509', shade30: '#6e0811', @@ -158,7 +158,7 @@ const cranberry: ColorVariants = { tint60: '#fdf3f4', }; -const red: ColorVariants = { +export const red: ColorVariants = { shade50: '#210809', shade40: '#3f1011', shade30: '#751d1f', @@ -173,7 +173,7 @@ const red: ColorVariants = { tint60: '#fdf6f6', }; -const darkOrange: ColorVariants = { +export const darkOrange: ColorVariants = { shade50: '#230900', shade40: '#411200', shade30: '#7a2101', @@ -188,7 +188,7 @@ const darkOrange: ColorVariants = { tint60: '#fdf6f3', }; -const bronze: ColorVariants = { +export const bronze: ColorVariants = { shade50: '#1b0a01', shade40: '#321303', shade30: '#5e2405', @@ -203,7 +203,7 @@ const bronze: ColorVariants = { tint60: '#fbf5f2', }; -const pumpkin: ColorVariants = { +export const pumpkin: ColorVariants = { shade50: '#200d03', shade40: '#3d1805', shade30: '#712d09', @@ -218,7 +218,7 @@ const pumpkin: ColorVariants = { tint60: '#fdf7f4', }; -const orange: ColorVariants = { +export const orange: ColorVariants = { shade50: '#271002', shade40: '#4a1e04', shade30: '#8a3707', @@ -233,7 +233,7 @@ const orange: ColorVariants = { tint60: '#fff9f5', }; -const peach: ColorVariants = { +export const peach: ColorVariants = { shade50: '#291600', shade40: '#4d2a00', shade30: '#8f4e00', @@ -248,7 +248,7 @@ const peach: ColorVariants = { tint60: '#fffaf5', }; -const marigold: ColorVariants = { +export const marigold: ColorVariants = { shade50: '#251a00', shade40: '#463100', shade30: '#835b00', @@ -263,7 +263,7 @@ const marigold: ColorVariants = { tint60: '#fefbf4', }; -const yellow: ColorVariants = { +export const yellow: ColorVariants = { primary: '#fde300', shade10: '#e4cc00', shade20: '#c0ad00', @@ -278,7 +278,7 @@ const yellow: ColorVariants = { tint60: '#fffef5', }; -const gold: ColorVariants = { +export const gold: ColorVariants = { shade50: '#1f1900', shade40: '#3a2f00', shade30: '#6c5700', @@ -293,7 +293,7 @@ const gold: ColorVariants = { tint60: '#fdfbf2', }; -const brass: ColorVariants = { +export const brass: ColorVariants = { shade50: '#181202', shade40: '#2e2103', shade30: '#553e06', @@ -308,7 +308,7 @@ const brass: ColorVariants = { tint60: '#fbf8f2', }; -const brown: ColorVariants = { +export const brown: ColorVariants = { shade50: '#170e07', shade40: '#2b1a0e', shade30: '#50301a', @@ -323,7 +323,7 @@ const brown: ColorVariants = { tint60: '#faf7f4', }; -const darkBrown: ColorVariants = { +export const darkBrown: ColorVariants = { shade50: '#0c0704', shade40: '#170c08', shade30: '#2b1710', @@ -338,7 +338,7 @@ const darkBrown: ColorVariants = { tint60: '#f8f3f2', }; -const lime: ColorVariants = { +export const lime: ColorVariants = { shade50: '#121b06', shade40: '#23330b', shade30: '#405f14', @@ -353,7 +353,7 @@ const lime: ColorVariants = { tint60: '#f8fcf4', }; -const forest: ColorVariants = { +export const forest: ColorVariants = { shade50: '#0c1501', shade40: '#162702', shade30: '#294903', @@ -368,7 +368,7 @@ const forest: ColorVariants = { tint60: '#f6faf0', }; -const seafoam: ColorVariants = { +export const seafoam: ColorVariants = { shade50: '#002111', shade40: '#003d20', shade30: '#00723b', @@ -383,7 +383,7 @@ const seafoam: ColorVariants = { tint60: '#f3fdf8', }; -const lightGreen: ColorVariants = { +export const lightGreen: ColorVariants = { shade50: '#031a02', shade40: '#063004', shade30: '#0b5a08', @@ -398,7 +398,7 @@ const lightGreen: ColorVariants = { tint60: '#f2fbf2', }; -const green: ColorVariants = { +export const green: ColorVariants = { shade50: '#031403', shade40: '#052505', shade30: '#094509', @@ -413,7 +413,7 @@ const green: ColorVariants = { tint60: '#f1faf1', }; -const darkGreen: ColorVariants = { +export const darkGreen: ColorVariants = { shade50: '#021102', shade40: '#032003', shade30: '#063b06', @@ -428,7 +428,7 @@ const darkGreen: ColorVariants = { tint60: '#f0f9f0', }; -const lightTeal: ColorVariants = { +export const lightTeal: ColorVariants = { shade50: '#001d1f', shade40: '#00373a', shade30: '#00666d', @@ -443,7 +443,7 @@ const lightTeal: ColorVariants = { tint60: '#f2fcfd', }; -const teal: ColorVariants = { +export const teal: ColorVariants = { shade50: '#001516', shade40: '#012728', shade30: '#02494c', @@ -458,7 +458,7 @@ const teal: ColorVariants = { tint60: '#f0fafa', }; -const darkTeal: ColorVariants = { +export const darkTeal: ColorVariants = { shade50: '#001010', shade40: '#001f1f', shade30: '#003939', @@ -473,7 +473,7 @@ const darkTeal: ColorVariants = { tint60: '#eff9f9', }; -const cyan: ColorVariants = { +export const cyan: ColorVariants = { shade50: '#00181e', shade40: '#002e38', shade30: '#005669', @@ -488,7 +488,7 @@ const cyan: ColorVariants = { tint60: '#f2fafc', }; -const steel: ColorVariants = { +export const steel: ColorVariants = { shade50: '#000f12', shade40: '#001b22', shade30: '#00333f', @@ -503,7 +503,7 @@ const steel: ColorVariants = { tint60: '#eff7f9', }; -const lightBlue: ColorVariants = { +export const lightBlue: ColorVariants = { shade50: '#091823', shade40: '#112d42', shade30: '#20547c', @@ -518,7 +518,7 @@ const lightBlue: ColorVariants = { tint60: '#f6fafe', }; -const blue: ColorVariants = { +export const blue: ColorVariants = { shade50: '#001322', shade40: '#002440', shade30: '#004377', @@ -533,7 +533,7 @@ const blue: ColorVariants = { tint60: '#f3f9fd', }; -const royalBlue: ColorVariants = { +export const royalBlue: ColorVariants = { shade50: '#000c16', shade40: '#00172a', shade30: '#002c4e', @@ -548,7 +548,7 @@ const royalBlue: ColorVariants = { tint60: '#f0f6fa', }; -const darkBlue: ColorVariants = { +export const darkBlue: ColorVariants = { shade50: '#000910', shade40: '#00111f', shade30: '#002039', @@ -563,7 +563,7 @@ const darkBlue: ColorVariants = { tint60: '#eff4f9', }; -const cornflower: ColorVariants = { +export const cornflower: ColorVariants = { shade50: '#0d1126', shade40: '#182047', shade30: '#2c3c85', @@ -578,7 +578,7 @@ const cornflower: ColorVariants = { tint60: '#f7f9fe', }; -const navy: ColorVariants = { +export const navy: ColorVariants = { shade50: '#00061d', shade40: '#000c36', shade30: '#001665', @@ -593,7 +593,7 @@ const navy: ColorVariants = { tint60: '#f2f4fc', }; -const lavender: ColorVariants = { +export const lavender: ColorVariants = { shade50: '#120f25', shade40: '#221d46', shade30: '#3f3682', @@ -608,7 +608,7 @@ const lavender: ColorVariants = { tint60: '#f9f8fe', }; -const purple: ColorVariants = { +export const purple: ColorVariants = { shade50: '#0f0717', shade40: '#1c0e2b', shade30: '#341a51', @@ -623,7 +623,7 @@ const purple: ColorVariants = { tint60: '#f7f4fb', }; -const darkPurple: ColorVariants = { +export const darkPurple: ColorVariants = { shade50: '#0a0411', shade40: '#130820', shade30: '#240f3c', @@ -638,7 +638,7 @@ const darkPurple: ColorVariants = { tint60: '#f5f2f9', }; -const orchid: ColorVariants = { +export const orchid: ColorVariants = { shade50: '#16101d', shade40: '#281e37', shade30: '#4c3867', @@ -653,7 +653,7 @@ const orchid: ColorVariants = { tint60: '#f9f8fc', }; -const grape: ColorVariants = { +export const grape: ColorVariants = { shade50: '#160418', shade40: '#29072e', shade30: '#4c0d55', @@ -668,7 +668,7 @@ const grape: ColorVariants = { tint60: '#faf2fb', }; -const berry: ColorVariants = { +export const berry: ColorVariants = { shade50: '#1f091d', shade40: '#3a1136', shade30: '#6d2064', @@ -683,7 +683,7 @@ const berry: ColorVariants = { tint60: '#fdf5fc', }; -const lilac: ColorVariants = { +export const lilac: ColorVariants = { shade50: '#1c0b1f', shade40: '#35153a', shade30: '#63276d', @@ -698,7 +698,7 @@ const lilac: ColorVariants = { tint60: '#fcf6fd', }; -const pink: ColorVariants = { +export const pink: ColorVariants = { shade50: '#24091b', shade40: '#441232', shade30: '#80215d', @@ -713,7 +713,7 @@ const pink: ColorVariants = { tint60: '#fef6fb', }; -const hotPink: ColorVariants = { +export const hotPink: ColorVariants = { shade50: '#240016', shade40: '#44002a', shade30: '#7f004e', @@ -728,7 +728,7 @@ const hotPink: ColorVariants = { tint60: '#fef4fa', }; -const magenta: ColorVariants = { +export const magenta: ColorVariants = { shade50: '#1f0013', shade40: '#390024', shade30: '#6b0043', @@ -743,7 +743,7 @@ const magenta: ColorVariants = { tint60: '#fcf2f9', }; -const plum: ColorVariants = { +export const plum: ColorVariants = { shade50: '#13000c', shade40: '#240017', shade30: '#43002b', @@ -758,7 +758,7 @@ const plum: ColorVariants = { tint60: '#faf0f6', }; -const beige: ColorVariants = { +export const beige: ColorVariants = { shade50: '#141313', shade40: '#252323', shade30: '#444241', @@ -773,7 +773,7 @@ const beige: ColorVariants = { tint60: '#faf9f9', }; -const mink: ColorVariants = { +export const mink: ColorVariants = { shade50: '#0f0e0e', shade40: '#1c1b1a', shade30: '#343231', @@ -788,7 +788,7 @@ const mink: ColorVariants = { tint60: '#f8f8f8', }; -const silver: ColorVariants = { +export const silver: ColorVariants = { shade50: '#151818', shade40: '#282d2e', shade30: '#4a5356', @@ -803,7 +803,7 @@ const silver: ColorVariants = { tint60: '#fafbfb', }; -const platinum: ColorVariants = { +export const platinum: ColorVariants = { shade50: '#111314', shade40: '#1f2426', shade30: '#3b4447', @@ -818,7 +818,7 @@ const platinum: ColorVariants = { tint60: '#f8f9fa', }; -const anchor: ColorVariants = { +export const anchor: ColorVariants = { shade50: '#090a0b', shade40: '#111315', shade30: '#202427', @@ -833,7 +833,7 @@ const anchor: ColorVariants = { tint60: '#f6f7f8', }; -const charcoal: ColorVariants = { +export const charcoal: ColorVariants = { shade50: '#090909', shade40: '#111111', shade30: '#202020', @@ -847,95 +847,3 @@ const charcoal: ColorVariants = { tint50: '#dfdfdf', tint60: '#f7f7f7', }; - -export type StatusSharedColors = 'red' | 'green' | 'darkOrange' | 'yellow' | 'berry' | 'lightGreen' | 'marigold'; - -export const statusSharedColors: Pick = { - red, - green, - darkOrange, - yellow, - berry, - lightGreen, - marigold, -}; - -export type PersonaSharedColors = - | 'darkRed' - | 'cranberry' - | 'pumpkin' - | 'peach' - | 'gold' - | 'brass' - | 'brown' - | 'forest' - | 'seafoam' - | 'darkGreen' - | 'lightTeal' - | 'teal' - | 'steel' - | 'blue' - | 'royalBlue' - | 'cornflower' - | 'navy' - | 'lavender' - | 'purple' - | 'grape' - | 'lilac' - | 'pink' - | 'magenta' - | 'plum' - | 'beige' - | 'mink' - | 'platinum' - | 'anchor'; - -export const personaSharedColors: Pick = { - darkRed, - cranberry, - pumpkin, - peach, - gold, - brass, - brown, - forest, - seafoam, - darkGreen, - lightTeal, - teal, - steel, - blue, - royalBlue, - cornflower, - navy, - lavender, - purple, - grape, - lilac, - pink, - magenta, - plum, - beige, - mink, - platinum, - anchor, -}; - -// These shared colors are currently not used in themes -// Not exported from the package, we can consider removing them -export const unusedSharedColors = { - burgundy, - bronze, - orange, - darkBrown, - lime, - darkTeal, - cyan, - lightBlue, - darkBlue, - darkPurple, - orchid, - hotPink, - silver, - charcoal, -}; diff --git a/packages/react-components/react-theme/src/sharedColorNames.ts b/packages/react-components/react-theme/src/sharedColorNames.ts new file mode 100644 index 00000000000000..7cc61154fa5b9b --- /dev/null +++ b/packages/react-components/react-theme/src/sharedColorNames.ts @@ -0,0 +1,60 @@ +/* Names of colors used in shared color palette alias tokens for status. */ +export const statusSharedColorNames = [ + 'red', + 'green', + 'darkOrange', + 'yellow', + 'berry', + 'lightGreen', + 'marigold', +] as const; + +/* Names of colors used in shared color palette alias tokens for persona. */ +export const personaSharedColorNames = [ + 'darkRed', + 'cranberry', + 'pumpkin', + 'peach', + 'gold', + 'brass', + 'brown', + 'forest', + 'seafoam', + 'darkGreen', + 'lightTeal', + 'teal', + 'steel', + 'blue', + 'royalBlue', + 'cornflower', + 'navy', + 'lavender', + 'purple', + 'grape', + 'lilac', + 'pink', + 'magenta', + 'plum', + 'beige', + 'mink', + 'platinum', + 'anchor', +] as const; + +/* Names of colors not used in alias tokens but produced by token pipeline as global color tokens. */ +export const unusedSharedColorNames = [ + 'burgundy', + 'bronze', + 'orange', + 'darkBrown', + 'lime', + 'darkTeal', + 'cyan', + 'lightBlue', + 'darkBlue', + 'darkPurple', + 'orchid', + 'hotPink', + 'silver', + 'charcoal', +] as const; diff --git a/packages/react-components/react-theme/src/types.ts b/packages/react-components/react-theme/src/types.ts index a0067c4721a3e0..2c1c9955ddb54a 100644 --- a/packages/react-components/react-theme/src/types.ts +++ b/packages/react-components/react-theme/src/types.ts @@ -1,3 +1,5 @@ +import { statusSharedColorNames, personaSharedColorNames, unusedSharedColorNames } from './sharedColorNames'; + /** * Design tokens for alias colors */ @@ -432,46 +434,13 @@ export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 12 export type BrandVariants = Record; -/** - * All the global shared colors and their shade/tint variants - */ -export type GlobalSharedColors = { - darkRed: ColorVariants; - cranberry: ColorVariants; - red: ColorVariants; - darkOrange: ColorVariants; - pumpkin: ColorVariants; - peach: ColorVariants; - marigold: ColorVariants; - yellow: ColorVariants; - gold: ColorVariants; - brass: ColorVariants; - brown: ColorVariants; - forest: ColorVariants; - seafoam: ColorVariants; - lightGreen: ColorVariants; - green: ColorVariants; - darkGreen: ColorVariants; - lightTeal: ColorVariants; - teal: ColorVariants; - steel: ColorVariants; - blue: ColorVariants; - royalBlue: ColorVariants; - cornflower: ColorVariants; - navy: ColorVariants; - lavender: ColorVariants; - purple: ColorVariants; - grape: ColorVariants; - berry: ColorVariants; - lilac: ColorVariants; - pink: ColorVariants; - magenta: ColorVariants; - plum: ColorVariants; - beige: ColorVariants; - mink: ColorVariants; - platinum: ColorVariants; - anchor: ColorVariants; -}; +type StatusSharedColorNames = typeof statusSharedColorNames[number]; +type PersonaSharedColorNames = typeof personaSharedColorNames[number]; +type UnusedSharedColorNames = typeof unusedSharedColorNames[number]; + +export type StatusSharedColors = Record; +export type PersonaSharedColors = Record; +export type UnusedSharedColors = Record; export type FontSizeTokens = { fontSizeBase100: string;