diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx index 033feed226f4c9..04f5d24878ccf7 100644 --- a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx @@ -8,7 +8,7 @@ import Screener, { Steps } from 'screener-storybook/src/screener'; const useStyles = makeStyles({ box: { ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1), - ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBlueBorder2), + ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2), backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground1, @@ -20,7 +20,7 @@ const useStyles = makeStyles({ container: { ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1), - ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBlueBorder2), + ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2), ...shorthands.margin('5px'), ...shorthands.padding('5px'), diff --git a/change/@fluentui-react-theme-5e458883-a508-46fb-ae22-cb2c2e6614f1.json b/change/@fluentui-react-theme-5e458883-a508-46fb-ae22-cb2c2e6614f1.json new file mode 100644 index 00000000000000..3199f3f8b6d016 --- /dev/null +++ b/change/@fluentui-react-theme-5e458883-a508-46fb-ae22-cb2c2e6614f1.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "BREAKING: reduce shared colors", + "packageName": "@fluentui/react-theme", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx b/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx index c4e94a3bd1ccc2..4109f067d92db2 100644 --- a/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx +++ b/packages/react-components/react-combobox/src/stories/ComboboxAppearance.stories.tsx @@ -20,13 +20,13 @@ const useStyles = makeStyles({ }, // filledLighter and filledDarker appearances depend on particular background colors filledLighter: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, }, filledDarker: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, diff --git a/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx b/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx index 0ac34dde68a3b2..5fd5e34d574999 100644 --- a/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx +++ b/packages/react-components/react-input/src/stories/InputAppearance.stories.tsx @@ -18,13 +18,13 @@ const useStyles = makeStyles({ ...shorthands.padding(tokens.spacingHorizontalMNudge), }, filledLighter: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, }, filledDarker: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, diff --git a/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx b/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx index f03095b7ee9e2c..33bc19a3d7bebd 100644 --- a/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx +++ b/packages/react-components/react-select/src/stories/SelectAppearance.stories.tsx @@ -19,13 +19,13 @@ const useStyles = makeStyles({ }, filledLighter: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, }, filledDarker: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, diff --git a/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx b/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx index 3dd25128377a88..f206e419fc248f 100644 --- a/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx +++ b/packages/react-components/react-spinbutton/src/stories/SpinButtonAppearance.stories.tsx @@ -20,13 +20,13 @@ const useStyles = makeStyles({ }, filledLighter: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, }, filledDarker: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, diff --git a/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx index 251c321fd39da5..c8e28fb167f990 100644 --- a/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx +++ b/packages/react-components/react-textarea/src/stories/TextareaAppearance.stories.tsx @@ -23,13 +23,13 @@ const useStyles = makeStyles({ }, }, filledLighter: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, }, filledDarker: { - backgroundColor: tokens.colorPaletteDarkBlueForeground1, + backgroundColor: tokens.colorPaletteBerryForeground1, '> label': { color: tokens.colorNeutralForegroundInverted, }, diff --git a/packages/react-components/react-theme/etc/react-theme.api.md b/packages/react-components/react-theme/etc/react-theme.api.md index c96aa8b2d08830..bd9f29b1f2dd75 100644 --- a/packages/react-components/react-theme/etc/react-theme.api.md +++ b/packages/react-components/react-theme/etc/react-theme.api.md @@ -21,151 +21,109 @@ export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 12 export type BrandVariants = Record; // @public (undocumented) -export type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder1' | 'colorPaletteAnchorBorder2'; +export type ColorPaletteAnchor = 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive'; // @public (undocumented) -export type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder1' | 'colorPaletteBeigeBorder2'; +export type ColorPaletteBeige = 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeBorderActive'; // @public (undocumented) export type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2'; // @public (undocumented) -export type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder1' | 'colorPaletteBlueBorder2'; +export type ColorPaletteBlue = 'colorPaletteBlueBackground2' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueBorderActive'; // @public (undocumented) -export type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder1' | 'colorPaletteBrassBorder2'; +export type ColorPaletteBrass = 'colorPaletteBrassBackground2' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassBorderActive'; // @public (undocumented) -export type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder1' | 'colorPaletteBronzeBorder2'; +export type ColorPaletteBrown = 'colorPaletteBrownBackground2' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownBorderActive'; // @public (undocumented) -export type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder1' | 'colorPaletteBrownBorder2'; +export type ColorPaletteCornflower = 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerBorderActive'; // @public (undocumented) -export type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder1' | 'colorPaletteBurgundyBorder2'; +export type ColorPaletteCranberry = 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryBorderActive'; // @public (undocumented) -export type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder1' | 'colorPaletteCharcoalBorder2'; - -// @public (undocumented) -export type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder1' | 'colorPaletteCornflowerBorder2'; - -// @public (undocumented) -export type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder1' | 'colorPaletteCranberryBorder2'; - -// @public (undocumented) -export type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder1' | 'colorPaletteCyanBorder2'; - -// @public (undocumented) -export type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder1' | 'colorPaletteDarkBlueBorder2'; - -// @public (undocumented) -export type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder1' | 'colorPaletteDarkBrownBorder2'; - -// @public (undocumented) -export type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder1' | 'colorPaletteDarkGreenBorder2'; +export type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenBorderActive'; // @public (undocumented) export type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2'; // @public (undocumented) -export type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder1' | 'colorPaletteDarkPurpleBorder2'; - -// @public (undocumented) -export type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder1' | 'colorPaletteDarkRedBorder2'; +export type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedBorderActive'; // @public (undocumented) -export type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder1' | 'colorPaletteDarkTealBorder2'; +export type ColorPaletteForest = 'colorPaletteForestBackground2' | 'colorPaletteForestForeground2' | 'colorPaletteForestBorderActive'; // @public (undocumented) -export type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder1' | 'colorPaletteForestBorder2'; +export type ColorPaletteGold = 'colorPaletteGoldBackground2' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldBorderActive'; // @public (undocumented) -export type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder1' | 'colorPaletteGoldBorder2'; - -// @public (undocumented) -export type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder1' | 'colorPaletteGrapeBorder2'; +export type ColorPaletteGrape = 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeBorderActive'; // @public (undocumented) export type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2'; // @public (undocumented) -export type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder1' | 'colorPaletteHotPinkBorder2'; - -// @public (undocumented) -export type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder1' | 'colorPaletteLavenderBorder2'; - -// @public (undocumented) -export type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder1' | 'colorPaletteLightBlueBorder2'; +export type ColorPaletteLavender = 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderBorderActive'; // @public (undocumented) export type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2'; // @public (undocumented) -export type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder1' | 'colorPaletteLightTealBorder2'; - -// @public (undocumented) -export type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder1' | 'colorPaletteLilacBorder2'; +export type ColorPaletteLightTeal = 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealBorderActive'; // @public (undocumented) -export type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder1' | 'colorPaletteLimeBorder2'; +export type ColorPaletteLilac = 'colorPaletteLilacBackground2' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacBorderActive'; // @public (undocumented) -export type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder1' | 'colorPaletteMagentaBorder2'; +export type ColorPaletteMagenta = 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaBorderActive'; // @public (undocumented) export type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2'; // @public (undocumented) -export type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder1' | 'colorPaletteMinkBorder2'; - -// @public (undocumented) -export type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder1' | 'colorPaletteNavyBorder2'; +export type ColorPaletteMink = 'colorPaletteMinkBackground2' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkBorderActive'; // @public (undocumented) -export type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder1' | 'colorPaletteOrangeBorder2'; +export type ColorPaletteNavy = 'colorPaletteNavyBackground2' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyBorderActive'; // @public (undocumented) -export type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder1' | 'colorPaletteOrchidBorder2'; +export type ColorPalettePeach = 'colorPalettePeachBackground2' | 'colorPalettePeachForeground2' | 'colorPalettePeachBorderActive'; // @public (undocumented) -export type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder1' | 'colorPalettePeachBorder2'; +export type ColorPalettePink = 'colorPalettePinkBackground2' | 'colorPalettePinkForeground2' | 'colorPalettePinkBorderActive'; // @public (undocumented) -export type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder1' | 'colorPalettePinkBorder2'; +export type ColorPalettePlatinum = 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumBorderActive'; // @public (undocumented) -export type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder1' | 'colorPalettePlatinumBorder2'; +export type ColorPalettePlum = 'colorPalettePlumBackground2' | 'colorPalettePlumForeground2' | 'colorPalettePlumBorderActive'; // @public (undocumented) -export type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder1' | 'colorPalettePlumBorder2'; +export type ColorPalettePumpkin = 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinBorderActive'; // @public (undocumented) -export type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder1' | 'colorPalettePumpkinBorder2'; - -// @public (undocumented) -export type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder1' | 'colorPalettePurpleBorder2'; +export type ColorPalettePurple = 'colorPalettePurpleBackground2' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleBorderActive'; // @public (undocumented) export type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2'; // @public (undocumented) -export type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder1' | 'colorPaletteRoyalBlueBorder2'; - -// @public (undocumented) -export type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder1' | 'colorPaletteSeafoamBorder2'; +export type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueBorderActive'; // @public (undocumented) -export type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder1' | 'colorPaletteSilverBorder2'; +export type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamBorderActive'; // @public (undocumented) -export type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder1' | 'colorPaletteSteelBorder2'; +export type ColorPaletteSteel = 'colorPaletteSteelBackground2' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelBorderActive'; // @public (undocumented) -export type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder1' | 'colorPaletteTealBorder2'; +export type ColorPaletteTeal = 'colorPaletteTealBackground2' | 'colorPaletteTealForeground2' | 'colorPaletteTealBorderActive'; // @public (undocumented) -export type ColorPaletteTokens = Record; +export type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens; // @public (undocumented) export type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2'; diff --git a/packages/react-components/react-theme/src/alias/darkColorPalette.ts b/packages/react-components/react-theme/src/alias/darkColorPalette.ts index 00d15d31425052..f23a9165a5463b 100644 --- a/packages/react-components/react-theme/src/alias/darkColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/darkColorPalette.ts @@ -1,21 +1,36 @@ -import { sharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors } from '../types'; +import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; +import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -export const colorPaletteTokens: ColorPaletteTokens = (Object.keys(sharedColors) as Array< - keyof GlobalSharedColors +const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< + keyof Pick >).reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { - [`colorPalette${color}Background1`]: sharedColors[sharedColor].shade40, - [`colorPalette${color}Background2`]: sharedColors[sharedColor].shade30, - [`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Foreground1`]: sharedColors[sharedColor].tint30, - [`colorPalette${color}Foreground2`]: sharedColors[sharedColor].tint40, - [`colorPalette${color}Foreground3`]: sharedColors[sharedColor].tint20, - [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30, - [`colorPalette${color}Border1`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20, + [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40, + [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30, + [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30, + [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40, + [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20, + [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30, + [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20, }; return { ...acc, ...sharedColorTokens }; -}, {} as ColorPaletteTokens); +}, {} as StatusColorPaletteTokens); + +const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< + keyof Pick +>).reduce((acc, sharedColor) => { + const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); + const sharedColorTokens = { + [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30, + [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40, + [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30, + }; + + return { ...acc, ...sharedColorTokens }; +}, {} as PersonaColorPaletteTokens); + +export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; diff --git a/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts b/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts index 59c549a7a1fa1c..7d81e0a4aa6a61 100644 --- a/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/highContrastColorPalette.ts @@ -1,8 +1,16 @@ -import { hcHighlight, white, black, sharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors } from '../types'; +import { + statusSharedColors, + personaSharedColors, + hcHighlight, + white, + black, + StatusSharedColors, + PersonaSharedColors, +} from '../global/colors'; +import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -export const colorPaletteTokens: ColorPaletteTokens = (Object.keys(sharedColors) as Array< - keyof GlobalSharedColors +const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< + keyof Pick >).reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { @@ -18,4 +26,19 @@ export const colorPaletteTokens: ColorPaletteTokens = (Object.keys(sharedColors) }; return { ...acc, ...sharedColorTokens }; -}, {} as ColorPaletteTokens); +}, {} as StatusColorPaletteTokens); + +const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< + keyof Pick +>).reduce((acc, sharedColor) => { + const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); + const sharedColorTokens = { + [`colorPalette${color}Background2`]: black, + [`colorPalette${color}Foreground2`]: white, + [`colorPalette${color}BorderActive`]: hcHighlight, + }; + + return { ...acc, ...sharedColorTokens }; +}, {} as PersonaColorPaletteTokens); + +export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; diff --git a/packages/react-components/react-theme/src/alias/lightColorPalette.ts b/packages/react-components/react-theme/src/alias/lightColorPalette.ts index 97629c7b5c5a81..da084ce605da0c 100644 --- a/packages/react-components/react-theme/src/alias/lightColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/lightColorPalette.ts @@ -1,21 +1,36 @@ -import { sharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors } from '../types'; +import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; +import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -export const colorPaletteTokens: ColorPaletteTokens = (Object.keys(sharedColors) as Array< - keyof GlobalSharedColors +const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< + keyof Pick >).reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { - [`colorPalette${color}Background1`]: sharedColors[sharedColor].tint60, - [`colorPalette${color}Background2`]: sharedColors[sharedColor].tint40, - [`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Foreground1`]: sharedColors[sharedColor].shade10, - [`colorPalette${color}Foreground2`]: sharedColors[sharedColor].shade30, - [`colorPalette${color}Foreground3`]: sharedColors[sharedColor].primary, - [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Border1`]: sharedColors[sharedColor].tint40, - [`colorPalette${color}Border2`]: sharedColors[sharedColor].primary, + [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].tint60, + [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].tint40, + [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].shade10, + [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].shade30, + [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].tint40, + [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].primary, }; return { ...acc, ...sharedColorTokens }; -}, {} as ColorPaletteTokens); +}, {} as StatusColorPaletteTokens); + +const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< + keyof Pick +>).reduce((acc, sharedColor) => { + const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); + const sharedColorTokens = { + [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].tint40, + [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].shade30, + [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].primary, + }; + + return { ...acc, ...sharedColorTokens }; +}, {} as PersonaColorPaletteTokens); + +export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts b/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts index 00d15d31425052..f23a9165a5463b 100644 --- a/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts +++ b/packages/react-components/react-theme/src/alias/teamsDarkColorPalette.ts @@ -1,21 +1,36 @@ -import { sharedColors } from '../global/colors'; -import { ColorPaletteTokens, GlobalSharedColors } from '../types'; +import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors'; +import { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types'; -export const colorPaletteTokens: ColorPaletteTokens = (Object.keys(sharedColors) as Array< - keyof GlobalSharedColors +const statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array< + keyof Pick >).reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { - [`colorPalette${color}Background1`]: sharedColors[sharedColor].shade40, - [`colorPalette${color}Background2`]: sharedColors[sharedColor].shade30, - [`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Foreground1`]: sharedColors[sharedColor].tint30, - [`colorPalette${color}Foreground2`]: sharedColors[sharedColor].tint40, - [`colorPalette${color}Foreground3`]: sharedColors[sharedColor].tint20, - [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30, - [`colorPalette${color}Border1`]: sharedColors[sharedColor].primary, - [`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20, + [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40, + [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30, + [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30, + [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40, + [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20, + [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30, + [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary, + [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20, }; return { ...acc, ...sharedColorTokens }; -}, {} as ColorPaletteTokens); +}, {} as StatusColorPaletteTokens); + +const personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array< + keyof Pick +>).reduce((acc, sharedColor) => { + const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); + const sharedColorTokens = { + [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30, + [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40, + [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30, + }; + + return { ...acc, ...sharedColorTokens }; +}, {} as PersonaColorPaletteTokens); + +export const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; diff --git a/packages/react-components/react-theme/src/global/colors.ts b/packages/react-components/react-theme/src/global/colors.ts index a1c5d895123f07..5152a32bb4b0a1 100644 --- a/packages/react-components/react-theme/src/global/colors.ts +++ b/packages/react-components/react-theme/src/global/colors.ts @@ -848,54 +848,94 @@ const charcoal: ColorVariants = { tint60: '#f7f7f7', }; -export const sharedColors: GlobalSharedColors = { - darkRed, - burgundy, - cranberry, +export type StatusSharedColors = 'red' | 'green' | 'darkOrange' | 'yellow' | 'berry' | 'lightGreen' | 'marigold'; + +export const statusSharedColors: Pick = { red, + green, darkOrange, - bronze, + 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, - orange, peach, - marigold, - yellow, gold, brass, brown, - darkBrown, - lime, forest, seafoam, - lightGreen, - green, darkGreen, lightTeal, teal, - darkTeal, - cyan, steel, - lightBlue, blue, royalBlue, - darkBlue, cornflower, navy, lavender, purple, - darkPurple, - orchid, grape, - berry, lilac, pink, - hotPink, magenta, plum, beige, mink, - silver, 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/index.ts b/packages/react-components/react-theme/src/index.ts index e53cf670bcd505..63ce55b2c1f19a 100644 --- a/packages/react-components/react-theme/src/index.ts +++ b/packages/react-components/react-theme/src/index.ts @@ -23,54 +23,40 @@ export type { FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, - ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, - ColorPaletteBronze, ColorPalettePumpkin, - ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, - ColorPaletteDarkBrown, - ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, - ColorPaletteLightGreen, ColorPaletteGreen, + ColorPaletteLightGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, - ColorPaletteDarkTeal, - ColorPaletteCyan, ColorPaletteSteel, - ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, - ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, - ColorPaletteDarkPurple, - ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, - ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, - ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, - ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, diff --git a/packages/react-components/react-theme/src/themes/ThemeColors.stories.tsx b/packages/react-components/react-theme/src/themes/ThemeColors.stories.tsx index 03126d99c7a8d0..368aae14954a7e 100644 --- a/packages/react-components/react-theme/src/themes/ThemeColors.stories.tsx +++ b/packages/react-components/react-theme/src/themes/ThemeColors.stories.tsx @@ -16,55 +16,42 @@ export default { }; const colorPalette = { - DarkRed: `colorPaletteDarkRed`, - Burgundy: 'colorPaletteBurgundy', - Cranberry: 'colorPaletteCranberry', Red: 'colorPaletteRed', + Green: 'colorPaletteGreen', + LightGreen: 'colorPaletteLightGreen', DarkOrange: 'colorPaletteDarkOrange', - Bronze: 'colorPaletteBronze', - Pumpkin: 'colorPalettePumpkin', - Orange: 'colorPaletteOrange', - Peach: 'colorPalettePeach', Marigold: 'colorPaletteMarigold', Yellow: 'colorPaletteYellow', + Berry: 'colorPaletteBerry', + + DarkRed: `colorPaletteDarkRed`, + Cranberry: 'colorPaletteCranberry', + Pumpkin: 'colorPalettePumpkin', + Peach: 'colorPalettePeach', Gold: 'colorPaletteGold', Brass: 'colorPaletteBrass', Brown: 'colorPaletteBrown', - DarkBrown: 'colorPaletteDarkBrown', - Lime: 'colorPaletteLime', Forest: 'colorPaletteForest', Seafoam: 'colorPaletteSeafoam', - LightGreen: 'colorPaletteLightGreen', - Green: 'colorPaletteGreen', DarkGreen: 'colorPaletteDarkGreen', LightTeal: 'colorPaletteLightTeal', Teal: 'colorPaletteTeal', - DarkTeal: 'colorPaletteDarkTeal', - Cyan: 'colorPaletteCyan', Steel: 'colorPaletteSteel', - LightBlue: 'colorPaletteLightBlue', Blue: 'colorPaletteBlue', RoyalBlue: 'colorPaletteRoyalBlue', - DarkBlue: 'colorPaletteDarkBlue', Cornflower: 'colorPaletteCornflower', Navy: 'colorPaletteNavy', Lavender: 'colorPaletteLavender', Purple: 'colorPalettePurple', - DarkPurple: 'colorPaletteDarkPurple', - Orchid: 'colorPaletteOrchid', Grape: 'colorPaletteGrape', - Berry: 'colorPaletteBerry', Lilac: 'colorPaletteLilac', Pink: 'colorPalettePink', - HotPink: 'colorPaletteHotPink', Magenta: 'colorPaletteMagenta', Plum: 'colorPalettePlum', Beige: 'colorPaletteBeige', Mink: 'colorPaletteMink', - Silver: 'colorPaletteSilver', Platinum: 'colorPalettePlatinum', Anchor: 'colorPaletteAnchor', - Charcoal: 'colorPaletteCharcoal', } as const; type GlobalSharedColors = keyof typeof colorPalette; @@ -143,7 +130,7 @@ export const Colors = () => { setColor={setColor} setPreviewColor={setPreviewColor} style={{ - background: theme.light[`colorPalette${colorName}Background3` as keyof Theme], + background: theme.light[`colorPalette${colorName}BorderActive` as keyof Theme], }} /> ))} diff --git a/packages/react-components/react-theme/src/tokens.ts b/packages/react-components/react-theme/src/tokens.ts index b81f6464872544..0a54f61fc9620c 100644 --- a/packages/react-components/react-theme/src/tokens.ts +++ b/packages/react-components/react-theme/src/tokens.ts @@ -146,27 +146,50 @@ export const tokens: Record = { colorBrandShadowKey: 'var(--colorBrandShadowKey)', // Color palette tokens - // Color palette anchor tokens - colorPaletteAnchorBackground1: 'var(--colorPaletteAnchorBackground1)', - colorPaletteAnchorBackground2: 'var(--colorPaletteAnchorBackground2)', - colorPaletteAnchorBackground3: 'var(--colorPaletteAnchorBackground3)', - colorPaletteAnchorBorderActive: 'var(--colorPaletteAnchorBorderActive)', - colorPaletteAnchorBorder1: 'var(--colorPaletteAnchorBorder1)', - colorPaletteAnchorBorder2: 'var(--colorPaletteAnchorBorder2)', - colorPaletteAnchorForeground1: 'var(--colorPaletteAnchorForeground1)', - colorPaletteAnchorForeground2: 'var(--colorPaletteAnchorForeground2)', - colorPaletteAnchorForeground3: 'var(--colorPaletteAnchorForeground3)', - // Color palette beige tokens - colorPaletteBeigeBackground1: 'var(--colorPaletteBeigeBackground1)', - colorPaletteBeigeBackground2: 'var(--colorPaletteBeigeBackground2)', - colorPaletteBeigeBackground3: 'var(--colorPaletteBeigeBackground3)', - colorPaletteBeigeBorderActive: 'var(--colorPaletteBeigeBorderActive)', - colorPaletteBeigeBorder1: 'var(--colorPaletteBeigeBorder1)', - colorPaletteBeigeBorder2: 'var(--colorPaletteBeigeBorder2)', - colorPaletteBeigeForeground1: 'var(--colorPaletteBeigeForeground1)', - colorPaletteBeigeForeground2: 'var(--colorPaletteBeigeForeground2)', - colorPaletteBeigeForeground3: 'var(--colorPaletteBeigeForeground3)', + // Color palette red tokens + colorPaletteRedBackground1: 'var(--colorPaletteRedBackground1)', + colorPaletteRedBackground2: 'var(--colorPaletteRedBackground2)', + colorPaletteRedBackground3: 'var(--colorPaletteRedBackground3)', + colorPaletteRedBorderActive: 'var(--colorPaletteRedBorderActive)', + colorPaletteRedBorder1: 'var(--colorPaletteRedBorder1)', + colorPaletteRedBorder2: 'var(--colorPaletteRedBorder2)', + colorPaletteRedForeground1: 'var(--colorPaletteRedForeground1)', + colorPaletteRedForeground2: 'var(--colorPaletteRedForeground2)', + colorPaletteRedForeground3: 'var(--colorPaletteRedForeground3)', + + // Color palette green tokens + colorPaletteGreenBackground1: 'var(--colorPaletteGreenBackground1)', + colorPaletteGreenBackground2: 'var(--colorPaletteGreenBackground2)', + colorPaletteGreenBackground3: 'var(--colorPaletteGreenBackground3)', + colorPaletteGreenBorderActive: 'var(--colorPaletteGreenBorderActive)', + colorPaletteGreenBorder1: 'var(--colorPaletteGreenBorder1)', + colorPaletteGreenBorder2: 'var(--colorPaletteGreenBorder2)', + colorPaletteGreenForeground1: 'var(--colorPaletteGreenForeground1)', + colorPaletteGreenForeground2: 'var(--colorPaletteGreenForeground2)', + colorPaletteGreenForeground3: 'var(--colorPaletteGreenForeground3)', + + // Color palette dark orange tokens + colorPaletteDarkOrangeBackground1: 'var(--colorPaletteDarkOrangeBackground1)', + colorPaletteDarkOrangeBackground2: 'var(--colorPaletteDarkOrangeBackground2)', + colorPaletteDarkOrangeBackground3: 'var(--colorPaletteDarkOrangeBackground3)', + colorPaletteDarkOrangeBorderActive: 'var(--colorPaletteDarkOrangeBorderActive)', + colorPaletteDarkOrangeBorder1: 'var(--colorPaletteDarkOrangeBorder1)', + colorPaletteDarkOrangeBorder2: 'var(--colorPaletteDarkOrangeBorder2)', + colorPaletteDarkOrangeForeground1: 'var(--colorPaletteDarkOrangeForeground1)', + colorPaletteDarkOrangeForeground2: 'var(--colorPaletteDarkOrangeForeground2)', + colorPaletteDarkOrangeForeground3: 'var(--colorPaletteDarkOrangeForeground3)', + + // Color palette yellow tokens + colorPaletteYellowBackground1: 'var(--colorPaletteYellowBackground1)', + colorPaletteYellowBackground2: 'var(--colorPaletteYellowBackground2)', + colorPaletteYellowBackground3: 'var(--colorPaletteYellowBackground3)', + colorPaletteYellowBorderActive: 'var(--colorPaletteYellowBorderActive)', + colorPaletteYellowBorder1: 'var(--colorPaletteYellowBorder1)', + colorPaletteYellowBorder2: 'var(--colorPaletteYellowBorder2)', + colorPaletteYellowForeground1: 'var(--colorPaletteYellowForeground1)', + colorPaletteYellowForeground2: 'var(--colorPaletteYellowForeground2)', + colorPaletteYellowForeground3: 'var(--colorPaletteYellowForeground3)', // Color palette berry tokens colorPaletteBerryBackground1: 'var(--colorPaletteBerryBackground1)', @@ -179,511 +202,167 @@ export const tokens: Record = { colorPaletteBerryForeground2: 'var(--colorPaletteBerryForeground2)', colorPaletteBerryForeground3: 'var(--colorPaletteBerryForeground3)', + // Color palette marigold tokens + colorPaletteMarigoldBackground1: 'var(--colorPaletteMarigoldBackground1)', + colorPaletteMarigoldBackground2: 'var(--colorPaletteMarigoldBackground2)', + colorPaletteMarigoldBackground3: 'var(--colorPaletteMarigoldBackground3)', + colorPaletteMarigoldBorderActive: 'var(--colorPaletteMarigoldBorderActive)', + colorPaletteMarigoldBorder1: 'var(--colorPaletteMarigoldBorder1)', + colorPaletteMarigoldBorder2: 'var(--colorPaletteMarigoldBorder2)', + colorPaletteMarigoldForeground1: 'var(--colorPaletteMarigoldForeground1)', + colorPaletteMarigoldForeground2: 'var(--colorPaletteMarigoldForeground2)', + colorPaletteMarigoldForeground3: 'var(--colorPaletteMarigoldForeground3)', + + // Color palette light green tokens + colorPaletteLightGreenBackground1: 'var(--colorPaletteLightGreenBackground1)', + colorPaletteLightGreenBackground2: 'var(--colorPaletteLightGreenBackground2)', + colorPaletteLightGreenBackground3: 'var(--colorPaletteLightGreenBackground3)', + colorPaletteLightGreenBorderActive: 'var(--colorPaletteLightGreenBorderActive)', + colorPaletteLightGreenBorder1: 'var(--colorPaletteLightGreenBorder1)', + colorPaletteLightGreenBorder2: 'var(--colorPaletteLightGreenBorder2)', + colorPaletteLightGreenForeground1: 'var(--colorPaletteLightGreenForeground1)', + colorPaletteLightGreenForeground2: 'var(--colorPaletteLightGreenForeground2)', + colorPaletteLightGreenForeground3: 'var(--colorPaletteLightGreenForeground3)', + + // Color palette anchor tokens + colorPaletteAnchorBackground2: 'var(--colorPaletteAnchorBackground2)', + colorPaletteAnchorBorderActive: 'var(--colorPaletteAnchorBorderActive)', + colorPaletteAnchorForeground2: 'var(--colorPaletteAnchorForeground2)', + + // Color palette beige tokens + colorPaletteBeigeBackground2: 'var(--colorPaletteBeigeBackground2)', + colorPaletteBeigeBorderActive: 'var(--colorPaletteBeigeBorderActive)', + colorPaletteBeigeForeground2: 'var(--colorPaletteBeigeForeground2)', + // Color palette blue tokens - colorPaletteBlueBackground1: 'var(--colorPaletteBlueBackground1)', colorPaletteBlueBackground2: 'var(--colorPaletteBlueBackground2)', - colorPaletteBlueBackground3: 'var(--colorPaletteBlueBackground3)', colorPaletteBlueBorderActive: 'var(--colorPaletteBlueBorderActive)', - colorPaletteBlueBorder1: 'var(--colorPaletteBlueBorder1)', - colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)', - colorPaletteBlueForeground1: 'var(--colorPaletteBlueForeground1)', colorPaletteBlueForeground2: 'var(--colorPaletteBlueForeground2)', - colorPaletteBlueForeground3: 'var(--colorPaletteBlueForeground3)', // Color palette brass tokens - colorPaletteBrassBackground1: 'var(--colorPaletteBrassBackground1)', colorPaletteBrassBackground2: 'var(--colorPaletteBrassBackground2)', - colorPaletteBrassBackground3: 'var(--colorPaletteBrassBackground3)', colorPaletteBrassBorderActive: 'var(--colorPaletteBrassBorderActive)', - colorPaletteBrassBorder1: 'var(--colorPaletteBrassBorder1)', - colorPaletteBrassBorder2: 'var(--colorPaletteBrassBorder2)', - colorPaletteBrassForeground1: 'var(--colorPaletteBrassForeground1)', colorPaletteBrassForeground2: 'var(--colorPaletteBrassForeground2)', - colorPaletteBrassForeground3: 'var(--colorPaletteBrassForeground3)', - - // Color palette bronze tokens - colorPaletteBronzeBackground1: 'var(--colorPaletteBronzeBackground1)', - colorPaletteBronzeBackground2: 'var(--colorPaletteBronzeBackground2)', - colorPaletteBronzeBackground3: 'var(--colorPaletteBronzeBackground3)', - colorPaletteBronzeBorderActive: 'var(--colorPaletteBronzeBorderActive)', - colorPaletteBronzeBorder1: 'var(--colorPaletteBronzeBorder1)', - colorPaletteBronzeBorder2: 'var(--colorPaletteBronzeBorder2)', - colorPaletteBronzeForeground1: 'var(--colorPaletteBronzeForeground1)', - colorPaletteBronzeForeground2: 'var(--colorPaletteBronzeForeground2)', - colorPaletteBronzeForeground3: 'var(--colorPaletteBronzeForeground3)', // Color palette brown tokens - colorPaletteBrownBackground1: 'var(--colorPaletteBrownBackground1)', colorPaletteBrownBackground2: 'var(--colorPaletteBrownBackground2)', - colorPaletteBrownBackground3: 'var(--colorPaletteBrownBackground3)', colorPaletteBrownBorderActive: 'var(--colorPaletteBrownBorderActive)', - colorPaletteBrownBorder1: 'var(--colorPaletteBrownBorder1)', - colorPaletteBrownBorder2: 'var(--colorPaletteBrownBorder2)', - colorPaletteBrownForeground1: 'var(--colorPaletteBrownForeground1)', colorPaletteBrownForeground2: 'var(--colorPaletteBrownForeground2)', - colorPaletteBrownForeground3: 'var(--colorPaletteBrownForeground3)', - - // Color palette burgundy tokens - colorPaletteBurgundyBackground1: 'var(--colorPaletteBurgundyBackground1)', - colorPaletteBurgundyBackground2: 'var(--colorPaletteBurgundyBackground2)', - colorPaletteBurgundyBackground3: 'var(--colorPaletteBurgundyBackground3)', - colorPaletteBurgundyBorderActive: 'var(--colorPaletteBurgundyBorderActive)', - colorPaletteBurgundyBorder1: 'var(--colorPaletteBurgundyBorder1)', - colorPaletteBurgundyBorder2: 'var(--colorPaletteBurgundyBorder2)', - colorPaletteBurgundyForeground1: 'var(--colorPaletteBurgundyForeground1)', - colorPaletteBurgundyForeground2: 'var(--colorPaletteBurgundyForeground2)', - colorPaletteBurgundyForeground3: 'var(--colorPaletteBurgundyForeground3)', - - // Color palette charcoal tokens - colorPaletteCharcoalBackground1: 'var(--colorPaletteCharcoalBackground1)', - colorPaletteCharcoalBackground2: 'var(--colorPaletteCharcoalBackground2)', - colorPaletteCharcoalBackground3: 'var(--colorPaletteCharcoalBackground3)', - colorPaletteCharcoalBorderActive: 'var(--colorPaletteCharcoalBorderActive)', - colorPaletteCharcoalBorder1: 'var(--colorPaletteCharcoalBorder1)', - colorPaletteCharcoalBorder2: 'var(--colorPaletteCharcoalBorder2)', - colorPaletteCharcoalForeground1: 'var(--colorPaletteCharcoalForeground1)', - colorPaletteCharcoalForeground2: 'var(--colorPaletteCharcoalForeground2)', - colorPaletteCharcoalForeground3: 'var(--colorPaletteCharcoalForeground3)', // Color palette cornflower tokens - colorPaletteCornflowerBackground1: 'var(--colorPaletteCornflowerBackground1)', colorPaletteCornflowerBackground2: 'var(--colorPaletteCornflowerBackground2)', - colorPaletteCornflowerBackground3: 'var(--colorPaletteCornflowerBackground3)', colorPaletteCornflowerBorderActive: 'var(--colorPaletteCornflowerBorderActive)', - colorPaletteCornflowerBorder1: 'var(--colorPaletteCornflowerBorder1)', - colorPaletteCornflowerBorder2: 'var(--colorPaletteCornflowerBorder2)', - colorPaletteCornflowerForeground1: 'var(--colorPaletteCornflowerForeground1)', colorPaletteCornflowerForeground2: 'var(--colorPaletteCornflowerForeground2)', - colorPaletteCornflowerForeground3: 'var(--colorPaletteCornflowerForeground3)', // Color palette cranberry tokens - colorPaletteCranberryBackground1: 'var(--colorPaletteCranberryBackground1)', colorPaletteCranberryBackground2: 'var(--colorPaletteCranberryBackground2)', - colorPaletteCranberryBackground3: 'var(--colorPaletteCranberryBackground3)', colorPaletteCranberryBorderActive: 'var(--colorPaletteCranberryBorderActive)', - colorPaletteCranberryBorder1: 'var(--colorPaletteCranberryBorder1)', - colorPaletteCranberryBorder2: 'var(--colorPaletteCranberryBorder2)', - colorPaletteCranberryForeground1: 'var(--colorPaletteCranberryForeground1)', colorPaletteCranberryForeground2: 'var(--colorPaletteCranberryForeground2)', - colorPaletteCranberryForeground3: 'var(--colorPaletteCranberryForeground3)', - - // Color palette cyan tokens - colorPaletteCyanBackground1: 'var(--colorPaletteCyanBackground1)', - colorPaletteCyanBackground2: 'var(--colorPaletteCyanBackground2)', - colorPaletteCyanBackground3: 'var(--colorPaletteCyanBackground3)', - colorPaletteCyanBorderActive: 'var(--colorPaletteCyanBorderActive)', - colorPaletteCyanBorder1: 'var(--colorPaletteCyanBorder1)', - colorPaletteCyanBorder2: 'var(--colorPaletteCyanBorder2)', - colorPaletteCyanForeground1: 'var(--colorPaletteCyanForeground1)', - colorPaletteCyanForeground2: 'var(--colorPaletteCyanForeground2)', - colorPaletteCyanForeground3: 'var(--colorPaletteCyanForeground3)', - - // Color palette dark blue tokens - colorPaletteDarkBlueBackground1: 'var(--colorPaletteDarkBlueBackground1)', - colorPaletteDarkBlueBackground2: 'var(--colorPaletteDarkBlueBackground2)', - colorPaletteDarkBlueBackground3: 'var(--colorPaletteDarkBlueBackground3)', - colorPaletteDarkBlueBorderActive: 'var(--colorPaletteDarkBlueBorderActive)', - colorPaletteDarkBlueBorder1: 'var(--colorPaletteDarkBlueBorder1)', - colorPaletteDarkBlueBorder2: 'var(--colorPaletteDarkBlueBorder2)', - colorPaletteDarkBlueForeground1: 'var(--colorPaletteDarkBlueForeground1)', - colorPaletteDarkBlueForeground2: 'var(--colorPaletteDarkBlueForeground2)', - colorPaletteDarkBlueForeground3: 'var(--colorPaletteDarkBlueForeground3)', - - // Color palette dark brown tokens - colorPaletteDarkBrownBackground1: 'var(--colorPaletteDarkBrownBackground1)', - colorPaletteDarkBrownBackground2: 'var(--colorPaletteDarkBrownBackground2)', - colorPaletteDarkBrownBackground3: 'var(--colorPaletteDarkBrownBackground3)', - colorPaletteDarkBrownBorderActive: 'var(--colorPaletteDarkBrownBorderActive)', - colorPaletteDarkBrownBorder1: 'var(--colorPaletteDarkBrownBorder1)', - colorPaletteDarkBrownBorder2: 'var(--colorPaletteDarkBrownBorder2)', - colorPaletteDarkBrownForeground1: 'var(--colorPaletteDarkBrownForeground1)', - colorPaletteDarkBrownForeground2: 'var(--colorPaletteDarkBrownForeground2)', - colorPaletteDarkBrownForeground3: 'var(--colorPaletteDarkBrownForeground3)', // Color palette dark green tokens - colorPaletteDarkGreenBackground1: 'var(--colorPaletteDarkGreenBackground1)', colorPaletteDarkGreenBackground2: 'var(--colorPaletteDarkGreenBackground2)', - colorPaletteDarkGreenBackground3: 'var(--colorPaletteDarkGreenBackground3)', colorPaletteDarkGreenBorderActive: 'var(--colorPaletteDarkGreenBorderActive)', - colorPaletteDarkGreenBorder1: 'var(--colorPaletteDarkGreenBorder1)', - colorPaletteDarkGreenBorder2: 'var(--colorPaletteDarkGreenBorder2)', - colorPaletteDarkGreenForeground1: 'var(--colorPaletteDarkGreenForeground1)', colorPaletteDarkGreenForeground2: 'var(--colorPaletteDarkGreenForeground2)', - colorPaletteDarkGreenForeground3: 'var(--colorPaletteDarkGreenForeground3)', - - // Color palette dark orange tokens - colorPaletteDarkOrangeBackground1: 'var(--colorPaletteDarkOrangeBackground1)', - colorPaletteDarkOrangeBackground2: 'var(--colorPaletteDarkOrangeBackground2)', - colorPaletteDarkOrangeBackground3: 'var(--colorPaletteDarkOrangeBackground3)', - colorPaletteDarkOrangeBorderActive: 'var(--colorPaletteDarkOrangeBorderActive)', - colorPaletteDarkOrangeBorder1: 'var(--colorPaletteDarkOrangeBorder1)', - colorPaletteDarkOrangeBorder2: 'var(--colorPaletteDarkOrangeBorder2)', - colorPaletteDarkOrangeForeground1: 'var(--colorPaletteDarkOrangeForeground1)', - colorPaletteDarkOrangeForeground2: 'var(--colorPaletteDarkOrangeForeground2)', - colorPaletteDarkOrangeForeground3: 'var(--colorPaletteDarkOrangeForeground3)', - - // Color palette dark purple tokens - colorPaletteDarkPurpleBackground1: 'var(--colorPaletteDarkPurpleBackground1)', - colorPaletteDarkPurpleBackground2: 'var(--colorPaletteDarkPurpleBackground2)', - colorPaletteDarkPurpleBackground3: 'var(--colorPaletteDarkPurpleBackground3)', - colorPaletteDarkPurpleBorderActive: 'var(--colorPaletteDarkPurpleBorderActive)', - colorPaletteDarkPurpleBorder1: 'var(--colorPaletteDarkPurpleBorder1)', - colorPaletteDarkPurpleBorder2: 'var(--colorPaletteDarkPurpleBorder2)', - colorPaletteDarkPurpleForeground1: 'var(--colorPaletteDarkPurpleForeground1)', - colorPaletteDarkPurpleForeground2: 'var(--colorPaletteDarkPurpleForeground2)', - colorPaletteDarkPurpleForeground3: 'var(--colorPaletteDarkPurpleForeground3)', // Color palette dark red tokens - colorPaletteDarkRedBackground1: 'var(--colorPaletteDarkRedBackground1)', colorPaletteDarkRedBackground2: 'var(--colorPaletteDarkRedBackground2)', - colorPaletteDarkRedBackground3: 'var(--colorPaletteDarkRedBackground3)', colorPaletteDarkRedBorderActive: 'var(--colorPaletteDarkRedBorderActive)', - colorPaletteDarkRedBorder1: 'var(--colorPaletteDarkRedBorder1)', - colorPaletteDarkRedBorder2: 'var(--colorPaletteDarkRedBorder2)', - colorPaletteDarkRedForeground1: 'var(--colorPaletteDarkRedForeground1)', colorPaletteDarkRedForeground2: 'var(--colorPaletteDarkRedForeground2)', - colorPaletteDarkRedForeground3: 'var(--colorPaletteDarkRedForeground3)', - - // Color palette dark teal tokens - colorPaletteDarkTealBackground1: 'var(--colorPaletteDarkTealBackground1)', - colorPaletteDarkTealBackground2: 'var(--colorPaletteDarkTealBackground2)', - colorPaletteDarkTealBackground3: 'var(--colorPaletteDarkTealBackground3)', - colorPaletteDarkTealBorderActive: 'var(--colorPaletteDarkTealBorderActive)', - colorPaletteDarkTealBorder1: 'var(--colorPaletteDarkTealBorder1)', - colorPaletteDarkTealBorder2: 'var(--colorPaletteDarkTealBorder2)', - colorPaletteDarkTealForeground1: 'var(--colorPaletteDarkTealForeground1)', - colorPaletteDarkTealForeground2: 'var(--colorPaletteDarkTealForeground2)', - colorPaletteDarkTealForeground3: 'var(--colorPaletteDarkTealForeground3)', // Color palette forest tokens - colorPaletteForestBackground1: 'var(--colorPaletteForestBackground1)', colorPaletteForestBackground2: 'var(--colorPaletteForestBackground2)', - colorPaletteForestBackground3: 'var(--colorPaletteForestBackground3)', colorPaletteForestBorderActive: 'var(--colorPaletteForestBorderActive)', - colorPaletteForestBorder1: 'var(--colorPaletteForestBorder1)', - colorPaletteForestBorder2: 'var(--colorPaletteForestBorder2)', - colorPaletteForestForeground1: 'var(--colorPaletteForestForeground1)', colorPaletteForestForeground2: 'var(--colorPaletteForestForeground2)', - colorPaletteForestForeground3: 'var(--colorPaletteForestForeground3)', // Color palette gold tokens - colorPaletteGoldBackground1: 'var(--colorPaletteGoldBackground1)', colorPaletteGoldBackground2: 'var(--colorPaletteGoldBackground2)', - colorPaletteGoldBackground3: 'var(--colorPaletteGoldBackground3)', colorPaletteGoldBorderActive: 'var(--colorPaletteGoldBorderActive)', - colorPaletteGoldBorder1: 'var(--colorPaletteGoldBorder1)', - colorPaletteGoldBorder2: 'var(--colorPaletteGoldBorder2)', - colorPaletteGoldForeground1: 'var(--colorPaletteGoldForeground1)', colorPaletteGoldForeground2: 'var(--colorPaletteGoldForeground2)', - colorPaletteGoldForeground3: 'var(--colorPaletteGoldForeground3)', // Color palette grape tokens - colorPaletteGrapeBackground1: 'var(--colorPaletteGrapeBackground1)', colorPaletteGrapeBackground2: 'var(--colorPaletteGrapeBackground2)', - colorPaletteGrapeBackground3: 'var(--colorPaletteGrapeBackground3)', colorPaletteGrapeBorderActive: 'var(--colorPaletteGrapeBorderActive)', - colorPaletteGrapeBorder1: 'var(--colorPaletteGrapeBorder1)', - colorPaletteGrapeBorder2: 'var(--colorPaletteGrapeBorder2)', - colorPaletteGrapeForeground1: 'var(--colorPaletteGrapeForeground1)', colorPaletteGrapeForeground2: 'var(--colorPaletteGrapeForeground2)', - colorPaletteGrapeForeground3: 'var(--colorPaletteGrapeForeground3)', - - // Color palette green tokens - colorPaletteGreenBackground1: 'var(--colorPaletteGreenBackground1)', - colorPaletteGreenBackground2: 'var(--colorPaletteGreenBackground2)', - colorPaletteGreenBackground3: 'var(--colorPaletteGreenBackground3)', - colorPaletteGreenBorderActive: 'var(--colorPaletteGreenBorderActive)', - colorPaletteGreenBorder1: 'var(--colorPaletteGreenBorder1)', - colorPaletteGreenBorder2: 'var(--colorPaletteGreenBorder2)', - colorPaletteGreenForeground1: 'var(--colorPaletteGreenForeground1)', - colorPaletteGreenForeground2: 'var(--colorPaletteGreenForeground2)', - colorPaletteGreenForeground3: 'var(--colorPaletteGreenForeground3)', - - // Color palette hot pink tokens - colorPaletteHotPinkBackground1: 'var(--colorPaletteHotPinkBackground1)', - colorPaletteHotPinkBackground2: 'var(--colorPaletteHotPinkBackground2)', - colorPaletteHotPinkBackground3: 'var(--colorPaletteHotPinkBackground3)', - colorPaletteHotPinkBorderActive: 'var(--colorPaletteHotPinkBorderActive)', - colorPaletteHotPinkBorder1: 'var(--colorPaletteHotPinkBorder1)', - colorPaletteHotPinkBorder2: 'var(--colorPaletteHotPinkBorder2)', - colorPaletteHotPinkForeground1: 'var(--colorPaletteHotPinkForeground1)', - colorPaletteHotPinkForeground2: 'var(--colorPaletteHotPinkForeground2)', - colorPaletteHotPinkForeground3: 'var(--colorPaletteHotPinkForeground3)', // Color palette lavender tokens - colorPaletteLavenderBackground1: 'var(--colorPaletteLavenderBackground1)', colorPaletteLavenderBackground2: 'var(--colorPaletteLavenderBackground2)', - colorPaletteLavenderBackground3: 'var(--colorPaletteLavenderBackground3)', colorPaletteLavenderBorderActive: 'var(--colorPaletteLavenderBorderActive)', - colorPaletteLavenderBorder1: 'var(--colorPaletteLavenderBorder1)', - colorPaletteLavenderBorder2: 'var(--colorPaletteLavenderBorder2)', - colorPaletteLavenderForeground1: 'var(--colorPaletteLavenderForeground1)', colorPaletteLavenderForeground2: 'var(--colorPaletteLavenderForeground2)', - colorPaletteLavenderForeground3: 'var(--colorPaletteLavenderForeground3)', - - // Color palette light blue tokens - colorPaletteLightBlueBackground1: 'var(--colorPaletteLightBlueBackground1)', - colorPaletteLightBlueBackground2: 'var(--colorPaletteLightBlueBackground2)', - colorPaletteLightBlueBackground3: 'var(--colorPaletteLightBlueBackground3)', - colorPaletteLightBlueBorderActive: 'var(--colorPaletteLightBlueBorderActive)', - colorPaletteLightBlueBorder1: 'var(--colorPaletteLightBlueBorder1)', - colorPaletteLightBlueBorder2: 'var(--colorPaletteLightBlueBorder2)', - colorPaletteLightBlueForeground1: 'var(--colorPaletteLightBlueForeground1)', - colorPaletteLightBlueForeground2: 'var(--colorPaletteLightBlueForeground2)', - colorPaletteLightBlueForeground3: 'var(--colorPaletteLightBlueForeground3)', - - // Color palette light green tokens - colorPaletteLightGreenBackground1: 'var(--colorPaletteLightGreenBackground1)', - colorPaletteLightGreenBackground2: 'var(--colorPaletteLightGreenBackground2)', - colorPaletteLightGreenBackground3: 'var(--colorPaletteLightGreenBackground3)', - colorPaletteLightGreenBorderActive: 'var(--colorPaletteLightGreenBorderActive)', - colorPaletteLightGreenBorder1: 'var(--colorPaletteLightGreenBorder1)', - colorPaletteLightGreenBorder2: 'var(--colorPaletteLightGreenBorder2)', - colorPaletteLightGreenForeground1: 'var(--colorPaletteLightGreenForeground1)', - colorPaletteLightGreenForeground2: 'var(--colorPaletteLightGreenForeground2)', - colorPaletteLightGreenForeground3: 'var(--colorPaletteLightGreenForeground3)', // Color palette light teal tokens - colorPaletteLightTealBackground1: 'var(--colorPaletteLightTealBackground1)', colorPaletteLightTealBackground2: 'var(--colorPaletteLightTealBackground2)', - colorPaletteLightTealBackground3: 'var(--colorPaletteLightTealBackground3)', colorPaletteLightTealBorderActive: 'var(--colorPaletteLightTealBorderActive)', - colorPaletteLightTealBorder1: 'var(--colorPaletteLightTealBorder1)', - colorPaletteLightTealBorder2: 'var(--colorPaletteLightTealBorder2)', - colorPaletteLightTealForeground1: 'var(--colorPaletteLightTealForeground1)', colorPaletteLightTealForeground2: 'var(--colorPaletteLightTealForeground2)', - colorPaletteLightTealForeground3: 'var(--colorPaletteLightTealForeground3)', // Color palette lilac tokens - colorPaletteLilacBackground1: 'var(--colorPaletteLilacBackground1)', colorPaletteLilacBackground2: 'var(--colorPaletteLilacBackground2)', - colorPaletteLilacBackground3: 'var(--colorPaletteLilacBackground3)', colorPaletteLilacBorderActive: 'var(--colorPaletteLilacBorderActive)', - colorPaletteLilacBorder1: 'var(--colorPaletteLilacBorder1)', - colorPaletteLilacBorder2: 'var(--colorPaletteLilacBorder2)', - colorPaletteLilacForeground1: 'var(--colorPaletteLilacForeground1)', colorPaletteLilacForeground2: 'var(--colorPaletteLilacForeground2)', - colorPaletteLilacForeground3: 'var(--colorPaletteLilacForeground3)', - - // Color palette lime tokens - colorPaletteLimeBackground1: 'var(--colorPaletteLimeBackground1)', - colorPaletteLimeBackground2: 'var(--colorPaletteLimeBackground2)', - colorPaletteLimeBackground3: 'var(--colorPaletteLimeBackground3)', - colorPaletteLimeBorderActive: 'var(--colorPaletteLimeBorderActive)', - colorPaletteLimeBorder1: 'var(--colorPaletteLimeBorder1)', - colorPaletteLimeBorder2: 'var(--colorPaletteLimeBorder2)', - colorPaletteLimeForeground1: 'var(--colorPaletteLimeForeground1)', - colorPaletteLimeForeground2: 'var(--colorPaletteLimeForeground2)', - colorPaletteLimeForeground3: 'var(--colorPaletteLimeForeground3)', // Color palette magenta tokens - colorPaletteMagentaBackground1: 'var(--colorPaletteMagentaBackground1)', colorPaletteMagentaBackground2: 'var(--colorPaletteMagentaBackground2)', - colorPaletteMagentaBackground3: 'var(--colorPaletteMagentaBackground3)', colorPaletteMagentaBorderActive: 'var(--colorPaletteMagentaBorderActive)', - colorPaletteMagentaBorder1: 'var(--colorPaletteMagentaBorder1)', - colorPaletteMagentaBorder2: 'var(--colorPaletteMagentaBorder2)', - colorPaletteMagentaForeground1: 'var(--colorPaletteMagentaForeground1)', colorPaletteMagentaForeground2: 'var(--colorPaletteMagentaForeground2)', - colorPaletteMagentaForeground3: 'var(--colorPaletteMagentaForeground3)', - - // Color palette marigold tokens - colorPaletteMarigoldBackground1: 'var(--colorPaletteMarigoldBackground1)', - colorPaletteMarigoldBackground2: 'var(--colorPaletteMarigoldBackground2)', - colorPaletteMarigoldBackground3: 'var(--colorPaletteMarigoldBackground3)', - colorPaletteMarigoldBorderActive: 'var(--colorPaletteMarigoldBorderActive)', - colorPaletteMarigoldBorder1: 'var(--colorPaletteMarigoldBorder1)', - colorPaletteMarigoldBorder2: 'var(--colorPaletteMarigoldBorder2)', - colorPaletteMarigoldForeground1: 'var(--colorPaletteMarigoldForeground1)', - colorPaletteMarigoldForeground2: 'var(--colorPaletteMarigoldForeground2)', - colorPaletteMarigoldForeground3: 'var(--colorPaletteMarigoldForeground3)', // Color palette mink tokens - colorPaletteMinkBackground1: 'var(--colorPaletteMinkBackground1)', colorPaletteMinkBackground2: 'var(--colorPaletteMinkBackground2)', - colorPaletteMinkBackground3: 'var(--colorPaletteMinkBackground3)', colorPaletteMinkBorderActive: 'var(--colorPaletteMinkBorderActive)', - colorPaletteMinkBorder1: 'var(--colorPaletteMinkBorder1)', - colorPaletteMinkBorder2: 'var(--colorPaletteMinkBorder2)', - colorPaletteMinkForeground1: 'var(--colorPaletteMinkForeground1)', colorPaletteMinkForeground2: 'var(--colorPaletteMinkForeground2)', - colorPaletteMinkForeground3: 'var(--colorPaletteMinkForeground3)', // Color palette navy tokens - colorPaletteNavyBackground1: 'var(--colorPaletteNavyBackground1)', colorPaletteNavyBackground2: 'var(--colorPaletteNavyBackground2)', - colorPaletteNavyBackground3: 'var(--colorPaletteNavyBackground3)', colorPaletteNavyBorderActive: 'var(--colorPaletteNavyBorderActive)', - colorPaletteNavyBorder1: 'var(--colorPaletteNavyBorder1)', - colorPaletteNavyBorder2: 'var(--colorPaletteNavyBorder2)', - colorPaletteNavyForeground1: 'var(--colorPaletteNavyForeground1)', colorPaletteNavyForeground2: 'var(--colorPaletteNavyForeground2)', - colorPaletteNavyForeground3: 'var(--colorPaletteNavyForeground3)', - - // Color palette orange tokens - colorPaletteOrangeBackground1: 'var(--colorPaletteOrangeBackground1)', - colorPaletteOrangeBackground2: 'var(--colorPaletteOrangeBackground2)', - colorPaletteOrangeBackground3: 'var(--colorPaletteOrangeBackground3)', - colorPaletteOrangeBorderActive: 'var(--colorPaletteOrangeBorderActive)', - colorPaletteOrangeBorder1: 'var(--colorPaletteOrangeBorder1)', - colorPaletteOrangeBorder2: 'var(--colorPaletteOrangeBorder2)', - colorPaletteOrangeForeground1: 'var(--colorPaletteOrangeForeground1)', - colorPaletteOrangeForeground2: 'var(--colorPaletteOrangeForeground2)', - colorPaletteOrangeForeground3: 'var(--colorPaletteOrangeForeground3)', - - // Color palette orchid tokens - colorPaletteOrchidBackground1: 'var(--colorPaletteOrchidBackground1)', - colorPaletteOrchidBackground2: 'var(--colorPaletteOrchidBackground2)', - colorPaletteOrchidBackground3: 'var(--colorPaletteOrchidBackground3)', - colorPaletteOrchidBorderActive: 'var(--colorPaletteOrchidBorderActive)', - colorPaletteOrchidBorder1: 'var(--colorPaletteOrchidBorder1)', - colorPaletteOrchidBorder2: 'var(--colorPaletteOrchidBorder2)', - colorPaletteOrchidForeground1: 'var(--colorPaletteOrchidForeground1)', - colorPaletteOrchidForeground2: 'var(--colorPaletteOrchidForeground2)', - colorPaletteOrchidForeground3: 'var(--colorPaletteOrchidForeground3)', // Color palette peach tokens - colorPalettePeachBackground1: 'var(--colorPalettePeachBackground1)', colorPalettePeachBackground2: 'var(--colorPalettePeachBackground2)', - colorPalettePeachBackground3: 'var(--colorPalettePeachBackground3)', colorPalettePeachBorderActive: 'var(--colorPalettePeachBorderActive)', - colorPalettePeachBorder1: 'var(--colorPalettePeachBorder1)', - colorPalettePeachBorder2: 'var(--colorPalettePeachBorder2)', - colorPalettePeachForeground1: 'var(--colorPalettePeachForeground1)', colorPalettePeachForeground2: 'var(--colorPalettePeachForeground2)', - colorPalettePeachForeground3: 'var(--colorPalettePeachForeground3)', // Color palette pink tokens - colorPalettePinkBackground1: 'var(--colorPalettePinkBackground1)', colorPalettePinkBackground2: 'var(--colorPalettePinkBackground2)', - colorPalettePinkBackground3: 'var(--colorPalettePinkBackground3)', colorPalettePinkBorderActive: 'var(--colorPalettePinkBorderActive)', - colorPalettePinkBorder1: 'var(--colorPalettePinkBorder1)', - colorPalettePinkBorder2: 'var(--colorPalettePinkBorder2)', - colorPalettePinkForeground1: 'var(--colorPalettePinkForeground1)', colorPalettePinkForeground2: 'var(--colorPalettePinkForeground2)', - colorPalettePinkForeground3: 'var(--colorPalettePinkForeground3)', // Color palette platinum tokens - colorPalettePlatinumBackground1: 'var(--colorPalettePlatinumBackground1)', colorPalettePlatinumBackground2: 'var(--colorPalettePlatinumBackground2)', - colorPalettePlatinumBackground3: 'var(--colorPalettePlatinumBackground3)', colorPalettePlatinumBorderActive: 'var(--colorPalettePlatinumBorderActive)', - colorPalettePlatinumBorder1: 'var(--colorPalettePlatinumBorder1)', - colorPalettePlatinumBorder2: 'var(--colorPalettePlatinumBorder2)', - colorPalettePlatinumForeground1: 'var(--colorPalettePlatinumForeground1)', colorPalettePlatinumForeground2: 'var(--colorPalettePlatinumForeground2)', - colorPalettePlatinumForeground3: 'var(--colorPalettePlatinumForeground3)', // Color palette plum tokens - colorPalettePlumBackground1: 'var(--colorPalettePlumBackground1)', colorPalettePlumBackground2: 'var(--colorPalettePlumBackground2)', - colorPalettePlumBackground3: 'var(--colorPalettePlumBackground3)', colorPalettePlumBorderActive: 'var(--colorPalettePlumBorderActive)', - colorPalettePlumBorder1: 'var(--colorPalettePlumBorder1)', - colorPalettePlumBorder2: 'var(--colorPalettePlumBorder2)', - colorPalettePlumForeground1: 'var(--colorPalettePlumForeground1)', colorPalettePlumForeground2: 'var(--colorPalettePlumForeground2)', - colorPalettePlumForeground3: 'var(--colorPalettePlumForeground3)', // Color palette pumpkin tokens - colorPalettePumpkinBackground1: 'var(--colorPalettePumpkinBackground1)', colorPalettePumpkinBackground2: 'var(--colorPalettePumpkinBackground2)', - colorPalettePumpkinBackground3: 'var(--colorPalettePumpkinBackground3)', colorPalettePumpkinBorderActive: 'var(--colorPalettePumpkinBorderActive)', - colorPalettePumpkinBorder1: 'var(--colorPalettePumpkinBorder1)', - colorPalettePumpkinBorder2: 'var(--colorPalettePumpkinBorder2)', - colorPalettePumpkinForeground1: 'var(--colorPalettePumpkinForeground1)', colorPalettePumpkinForeground2: 'var(--colorPalettePumpkinForeground2)', - colorPalettePumpkinForeground3: 'var(--colorPalettePumpkinForeground3)', // Color palette purple tokens - colorPalettePurpleBackground1: 'var(--colorPalettePurpleBackground1)', colorPalettePurpleBackground2: 'var(--colorPalettePurpleBackground2)', - colorPalettePurpleBackground3: 'var(--colorPalettePurpleBackground3)', colorPalettePurpleBorderActive: 'var(--colorPalettePurpleBorderActive)', - colorPalettePurpleBorder1: 'var(--colorPalettePurpleBorder1)', - colorPalettePurpleBorder2: 'var(--colorPalettePurpleBorder2)', - colorPalettePurpleForeground1: 'var(--colorPalettePurpleForeground1)', colorPalettePurpleForeground2: 'var(--colorPalettePurpleForeground2)', - colorPalettePurpleForeground3: 'var(--colorPalettePurpleForeground3)', - - // Color palette red tokens - colorPaletteRedBackground1: 'var(--colorPaletteRedBackground1)', - colorPaletteRedBackground2: 'var(--colorPaletteRedBackground2)', - colorPaletteRedBackground3: 'var(--colorPaletteRedBackground3)', - colorPaletteRedBorderActive: 'var(--colorPaletteRedBorderActive)', - colorPaletteRedBorder1: 'var(--colorPaletteRedBorder1)', - colorPaletteRedBorder2: 'var(--colorPaletteRedBorder2)', - colorPaletteRedForeground1: 'var(--colorPaletteRedForeground1)', - colorPaletteRedForeground2: 'var(--colorPaletteRedForeground2)', - colorPaletteRedForeground3: 'var(--colorPaletteRedForeground3)', // Color palette royal blue tokens - colorPaletteRoyalBlueBackground1: 'var(--colorPaletteRoyalBlueBackground1)', colorPaletteRoyalBlueBackground2: 'var(--colorPaletteRoyalBlueBackground2)', - colorPaletteRoyalBlueBackground3: 'var(--colorPaletteRoyalBlueBackground3)', colorPaletteRoyalBlueBorderActive: 'var(--colorPaletteRoyalBlueBorderActive)', - colorPaletteRoyalBlueBorder1: 'var(--colorPaletteRoyalBlueBorder1)', - colorPaletteRoyalBlueBorder2: 'var(--colorPaletteRoyalBlueBorder2)', - colorPaletteRoyalBlueForeground1: 'var(--colorPaletteRoyalBlueForeground1)', colorPaletteRoyalBlueForeground2: 'var(--colorPaletteRoyalBlueForeground2)', - colorPaletteRoyalBlueForeground3: 'var(--colorPaletteRoyalBlueForeground3)', // Color palette seafoam tokens - colorPaletteSeafoamBackground1: 'var(--colorPaletteSeafoamBackground1)', colorPaletteSeafoamBackground2: 'var(--colorPaletteSeafoamBackground2)', - colorPaletteSeafoamBackground3: 'var(--colorPaletteSeafoamBackground3)', colorPaletteSeafoamBorderActive: 'var(--colorPaletteSeafoamBorderActive)', - colorPaletteSeafoamBorder1: 'var(--colorPaletteSeafoamBorder1)', - colorPaletteSeafoamBorder2: 'var(--colorPaletteSeafoamBorder2)', - colorPaletteSeafoamForeground1: 'var(--colorPaletteSeafoamForeground1)', colorPaletteSeafoamForeground2: 'var(--colorPaletteSeafoamForeground2)', - colorPaletteSeafoamForeground3: 'var(--colorPaletteSeafoamForeground3)', - - // Color palette silver tokens - colorPaletteSilverBackground1: 'var(--colorPaletteSilverBackground1)', - colorPaletteSilverBackground2: 'var(--colorPaletteSilverBackground2)', - colorPaletteSilverBackground3: 'var(--colorPaletteSilverBackground3)', - colorPaletteSilverBorderActive: 'var(--colorPaletteSilverBorderActive)', - colorPaletteSilverBorder1: 'var(--colorPaletteSilverBorder1)', - colorPaletteSilverBorder2: 'var(--colorPaletteSilverBorder2)', - colorPaletteSilverForeground1: 'var(--colorPaletteSilverForeground1)', - colorPaletteSilverForeground2: 'var(--colorPaletteSilverForeground2)', - colorPaletteSilverForeground3: 'var(--colorPaletteSilverForeground3)', // Color palette steel tokens - colorPaletteSteelBackground1: 'var(--colorPaletteSteelBackground1)', colorPaletteSteelBackground2: 'var(--colorPaletteSteelBackground2)', - colorPaletteSteelBackground3: 'var(--colorPaletteSteelBackground3)', colorPaletteSteelBorderActive: 'var(--colorPaletteSteelBorderActive)', - colorPaletteSteelBorder1: 'var(--colorPaletteSteelBorder1)', - colorPaletteSteelBorder2: 'var(--colorPaletteSteelBorder2)', - colorPaletteSteelForeground1: 'var(--colorPaletteSteelForeground1)', colorPaletteSteelForeground2: 'var(--colorPaletteSteelForeground2)', - colorPaletteSteelForeground3: 'var(--colorPaletteSteelForeground3)', // Color palette teal tokens - colorPaletteTealBackground1: 'var(--colorPaletteTealBackground1)', colorPaletteTealBackground2: 'var(--colorPaletteTealBackground2)', - colorPaletteTealBackground3: 'var(--colorPaletteTealBackground3)', colorPaletteTealBorderActive: 'var(--colorPaletteTealBorderActive)', - colorPaletteTealBorder1: 'var(--colorPaletteTealBorder1)', - colorPaletteTealBorder2: 'var(--colorPaletteTealBorder2)', - colorPaletteTealForeground1: 'var(--colorPaletteTealForeground1)', colorPaletteTealForeground2: 'var(--colorPaletteTealForeground2)', - colorPaletteTealForeground3: 'var(--colorPaletteTealForeground3)', - - // Color palette yellow tokens - colorPaletteYellowBackground1: 'var(--colorPaletteYellowBackground1)', - colorPaletteYellowBackground2: 'var(--colorPaletteYellowBackground2)', - colorPaletteYellowBackground3: 'var(--colorPaletteYellowBackground3)', - colorPaletteYellowBorderActive: 'var(--colorPaletteYellowBorderActive)', - colorPaletteYellowBorder1: 'var(--colorPaletteYellowBorder1)', - colorPaletteYellowBorder2: 'var(--colorPaletteYellowBorder2)', - colorPaletteYellowForeground1: 'var(--colorPaletteYellowForeground1)', - colorPaletteYellowForeground2: 'var(--colorPaletteYellowForeground2)', - colorPaletteYellowForeground3: 'var(--colorPaletteYellowForeground3)', // Border radius tokens borderRadiusNone: 'var(--borderRadiusNone)', diff --git a/packages/react-components/react-theme/src/types.ts b/packages/react-components/react-theme/src/types.ts index d65f7927a5cd25..73a6b59e82e349 100644 --- a/packages/react-components/react-theme/src/types.ts +++ b/packages/react-components/react-theme/src/types.ts @@ -146,39 +146,6 @@ export type ColorTokens = { colorBrandShadowKey: string; }; -export type ColorPaletteDarkRed = - | 'colorPaletteDarkRedBackground1' - | 'colorPaletteDarkRedBackground2' - | 'colorPaletteDarkRedBackground3' - | 'colorPaletteDarkRedForeground1' - | 'colorPaletteDarkRedForeground2' - | 'colorPaletteDarkRedForeground3' - | 'colorPaletteDarkRedBorderActive' - | 'colorPaletteDarkRedBorder1' - | 'colorPaletteDarkRedBorder2'; - -export type ColorPaletteBurgundy = - | 'colorPaletteBurgundyBackground1' - | 'colorPaletteBurgundyBackground2' - | 'colorPaletteBurgundyBackground3' - | 'colorPaletteBurgundyForeground1' - | 'colorPaletteBurgundyForeground2' - | 'colorPaletteBurgundyForeground3' - | 'colorPaletteBurgundyBorderActive' - | 'colorPaletteBurgundyBorder1' - | 'colorPaletteBurgundyBorder2'; - -export type ColorPaletteCranberry = - | 'colorPaletteCranberryBackground1' - | 'colorPaletteCranberryBackground2' - | 'colorPaletteCranberryBackground3' - | 'colorPaletteCranberryForeground1' - | 'colorPaletteCranberryForeground2' - | 'colorPaletteCranberryForeground3' - | 'colorPaletteCranberryBorderActive' - | 'colorPaletteCranberryBorder1' - | 'colorPaletteCranberryBorder2'; - export type ColorPaletteRed = | 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' @@ -190,6 +157,17 @@ export type ColorPaletteRed = | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2'; +export type ColorPaletteGreen = + | 'colorPaletteGreenBackground1' + | 'colorPaletteGreenBackground2' + | 'colorPaletteGreenBackground3' + | 'colorPaletteGreenForeground1' + | 'colorPaletteGreenForeground2' + | 'colorPaletteGreenForeground3' + | 'colorPaletteGreenBorderActive' + | 'colorPaletteGreenBorder1' + | 'colorPaletteGreenBorder2'; + export type ColorPaletteDarkOrange = | 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' @@ -201,49 +179,27 @@ export type ColorPaletteDarkOrange = | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2'; -export type ColorPaletteBronze = - | 'colorPaletteBronzeBackground1' - | 'colorPaletteBronzeBackground2' - | 'colorPaletteBronzeBackground3' - | 'colorPaletteBronzeForeground1' - | 'colorPaletteBronzeForeground2' - | 'colorPaletteBronzeForeground3' - | 'colorPaletteBronzeBorderActive' - | 'colorPaletteBronzeBorder1' - | 'colorPaletteBronzeBorder2'; - -export type ColorPalettePumpkin = - | 'colorPalettePumpkinBackground1' - | 'colorPalettePumpkinBackground2' - | 'colorPalettePumpkinBackground3' - | 'colorPalettePumpkinForeground1' - | 'colorPalettePumpkinForeground2' - | 'colorPalettePumpkinForeground3' - | 'colorPalettePumpkinBorderActive' - | 'colorPalettePumpkinBorder1' - | 'colorPalettePumpkinBorder2'; - -export type ColorPaletteOrange = - | 'colorPaletteOrangeBackground1' - | 'colorPaletteOrangeBackground2' - | 'colorPaletteOrangeBackground3' - | 'colorPaletteOrangeForeground1' - | 'colorPaletteOrangeForeground2' - | 'colorPaletteOrangeForeground3' - | 'colorPaletteOrangeBorderActive' - | 'colorPaletteOrangeBorder1' - | 'colorPaletteOrangeBorder2'; +export type ColorPaletteYellow = + | 'colorPaletteYellowBackground1' + | 'colorPaletteYellowBackground2' + | 'colorPaletteYellowBackground3' + | 'colorPaletteYellowForeground1' + | 'colorPaletteYellowForeground2' + | 'colorPaletteYellowForeground3' + | 'colorPaletteYellowBorderActive' + | 'colorPaletteYellowBorder1' + | 'colorPaletteYellowBorder2'; -export type ColorPalettePeach = - | 'colorPalettePeachBackground1' - | 'colorPalettePeachBackground2' - | 'colorPalettePeachBackground3' - | 'colorPalettePeachForeground1' - | 'colorPalettePeachForeground2' - | 'colorPalettePeachForeground3' - | 'colorPalettePeachBorderActive' - | 'colorPalettePeachBorder1' - | 'colorPalettePeachBorder2'; +export type ColorPaletteBerry = + | 'colorPaletteBerryBackground1' + | 'colorPaletteBerryBackground2' + | 'colorPaletteBerryBackground3' + | 'colorPaletteBerryForeground1' + | 'colorPaletteBerryForeground2' + | 'colorPaletteBerryForeground3' + | 'colorPaletteBerryBorderActive' + | 'colorPaletteBerryBorder1' + | 'colorPaletteBerryBorder2'; export type ColorPaletteMarigold = | 'colorPaletteMarigoldBackground1' @@ -256,488 +212,202 @@ export type ColorPaletteMarigold = | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2'; -export type ColorPaletteYellow = - | 'colorPaletteYellowBackground1' - | 'colorPaletteYellowBackground2' - | 'colorPaletteYellowBackground3' - | 'colorPaletteYellowForeground1' - | 'colorPaletteYellowForeground2' - | 'colorPaletteYellowForeground3' - | 'colorPaletteYellowBorderActive' - | 'colorPaletteYellowBorder1' - | 'colorPaletteYellowBorder2'; +export type ColorPaletteLightGreen = + | 'colorPaletteLightGreenBackground1' + | 'colorPaletteLightGreenBackground2' + | 'colorPaletteLightGreenBackground3' + | 'colorPaletteLightGreenForeground1' + | 'colorPaletteLightGreenForeground2' + | 'colorPaletteLightGreenForeground3' + | 'colorPaletteLightGreenBorderActive' + | 'colorPaletteLightGreenBorder1' + | 'colorPaletteLightGreenBorder2'; + +export type ColorPaletteDarkRed = + | 'colorPaletteDarkRedBackground2' + | 'colorPaletteDarkRedForeground2' + | 'colorPaletteDarkRedBorderActive'; + +export type ColorPaletteCranberry = + | 'colorPaletteCranberryBackground2' + | 'colorPaletteCranberryForeground2' + | 'colorPaletteCranberryBorderActive'; + +export type ColorPalettePumpkin = + | 'colorPalettePumpkinBackground2' + | 'colorPalettePumpkinForeground2' + | 'colorPalettePumpkinBorderActive'; + +export type ColorPalettePeach = + | 'colorPalettePeachBackground2' + | 'colorPalettePeachForeground2' + | 'colorPalettePeachBorderActive'; export type ColorPaletteGold = - | 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' - | 'colorPaletteGoldBackground3' - | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' - | 'colorPaletteGoldForeground3' - | 'colorPaletteGoldBorderActive' - | 'colorPaletteGoldBorder1' - | 'colorPaletteGoldBorder2'; + | 'colorPaletteGoldBorderActive'; export type ColorPaletteBrass = - | 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' - | 'colorPaletteBrassBackground3' - | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' - | 'colorPaletteBrassForeground3' - | 'colorPaletteBrassBorderActive' - | 'colorPaletteBrassBorder1' - | 'colorPaletteBrassBorder2'; + | 'colorPaletteBrassBorderActive'; export type ColorPaletteBrown = - | 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' - | 'colorPaletteBrownBackground3' - | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' - | 'colorPaletteBrownForeground3' - | 'colorPaletteBrownBorderActive' - | 'colorPaletteBrownBorder1' - | 'colorPaletteBrownBorder2'; - -export type ColorPaletteDarkBrown = - | 'colorPaletteDarkBrownBackground1' - | 'colorPaletteDarkBrownBackground2' - | 'colorPaletteDarkBrownBackground3' - | 'colorPaletteDarkBrownForeground1' - | 'colorPaletteDarkBrownForeground2' - | 'colorPaletteDarkBrownForeground3' - | 'colorPaletteDarkBrownBorderActive' - | 'colorPaletteDarkBrownBorder1' - | 'colorPaletteDarkBrownBorder2'; - -export type ColorPaletteLime = - | 'colorPaletteLimeBackground1' - | 'colorPaletteLimeBackground2' - | 'colorPaletteLimeBackground3' - | 'colorPaletteLimeForeground1' - | 'colorPaletteLimeForeground2' - | 'colorPaletteLimeForeground3' - | 'colorPaletteLimeBorderActive' - | 'colorPaletteLimeBorder1' - | 'colorPaletteLimeBorder2'; + | 'colorPaletteBrownBorderActive'; export type ColorPaletteForest = - | 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' - | 'colorPaletteForestBackground3' - | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' - | 'colorPaletteForestForeground3' - | 'colorPaletteForestBorderActive' - | 'colorPaletteForestBorder1' - | 'colorPaletteForestBorder2'; + | 'colorPaletteForestBorderActive'; export type ColorPaletteSeafoam = - | 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' - | 'colorPaletteSeafoamBackground3' - | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' - | 'colorPaletteSeafoamForeground3' - | 'colorPaletteSeafoamBorderActive' - | 'colorPaletteSeafoamBorder1' - | 'colorPaletteSeafoamBorder2'; - -export type ColorPaletteLightGreen = - | 'colorPaletteLightGreenBackground1' - | 'colorPaletteLightGreenBackground2' - | 'colorPaletteLightGreenBackground3' - | 'colorPaletteLightGreenForeground1' - | 'colorPaletteLightGreenForeground2' - | 'colorPaletteLightGreenForeground3' - | 'colorPaletteLightGreenBorderActive' - | 'colorPaletteLightGreenBorder1' - | 'colorPaletteLightGreenBorder2'; - -export type ColorPaletteGreen = - | 'colorPaletteGreenBackground1' - | 'colorPaletteGreenBackground2' - | 'colorPaletteGreenBackground3' - | 'colorPaletteGreenForeground1' - | 'colorPaletteGreenForeground2' - | 'colorPaletteGreenForeground3' - | 'colorPaletteGreenBorderActive' - | 'colorPaletteGreenBorder1' - | 'colorPaletteGreenBorder2'; + | 'colorPaletteSeafoamBorderActive'; export type ColorPaletteDarkGreen = - | 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' - | 'colorPaletteDarkGreenBackground3' - | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' - | 'colorPaletteDarkGreenForeground3' - | 'colorPaletteDarkGreenBorderActive' - | 'colorPaletteDarkGreenBorder1' - | 'colorPaletteDarkGreenBorder2'; + | 'colorPaletteDarkGreenBorderActive'; export type ColorPaletteLightTeal = - | 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' - | 'colorPaletteLightTealBackground3' - | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' - | 'colorPaletteLightTealForeground3' - | 'colorPaletteLightTealBorderActive' - | 'colorPaletteLightTealBorder1' - | 'colorPaletteLightTealBorder2'; + | 'colorPaletteLightTealBorderActive'; export type ColorPaletteTeal = - | 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' - | 'colorPaletteTealBackground3' - | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' - | 'colorPaletteTealForeground3' - | 'colorPaletteTealBorderActive' - | 'colorPaletteTealBorder1' - | 'colorPaletteTealBorder2'; - -export type ColorPaletteDarkTeal = - | 'colorPaletteDarkTealBackground1' - | 'colorPaletteDarkTealBackground2' - | 'colorPaletteDarkTealBackground3' - | 'colorPaletteDarkTealForeground1' - | 'colorPaletteDarkTealForeground2' - | 'colorPaletteDarkTealForeground3' - | 'colorPaletteDarkTealBorderActive' - | 'colorPaletteDarkTealBorder1' - | 'colorPaletteDarkTealBorder2'; - -export type ColorPaletteCyan = - | 'colorPaletteCyanBackground1' - | 'colorPaletteCyanBackground2' - | 'colorPaletteCyanBackground3' - | 'colorPaletteCyanForeground1' - | 'colorPaletteCyanForeground2' - | 'colorPaletteCyanForeground3' - | 'colorPaletteCyanBorderActive' - | 'colorPaletteCyanBorder1' - | 'colorPaletteCyanBorder2'; + | 'colorPaletteTealBorderActive'; export type ColorPaletteSteel = - | 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' - | 'colorPaletteSteelBackground3' - | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' - | 'colorPaletteSteelForeground3' - | 'colorPaletteSteelBorderActive' - | 'colorPaletteSteelBorder1' - | 'colorPaletteSteelBorder2'; - -export type ColorPaletteLightBlue = - | 'colorPaletteLightBlueBackground1' - | 'colorPaletteLightBlueBackground2' - | 'colorPaletteLightBlueBackground3' - | 'colorPaletteLightBlueForeground1' - | 'colorPaletteLightBlueForeground2' - | 'colorPaletteLightBlueForeground3' - | 'colorPaletteLightBlueBorderActive' - | 'colorPaletteLightBlueBorder1' - | 'colorPaletteLightBlueBorder2'; + | 'colorPaletteSteelBorderActive'; export type ColorPaletteBlue = - | 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' - | 'colorPaletteBlueBackground3' - | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' - | 'colorPaletteBlueForeground3' - | 'colorPaletteBlueBorderActive' - | 'colorPaletteBlueBorder1' - | 'colorPaletteBlueBorder2'; + | 'colorPaletteBlueBorderActive'; export type ColorPaletteRoyalBlue = - | 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' - | 'colorPaletteRoyalBlueBackground3' - | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' - | 'colorPaletteRoyalBlueForeground3' - | 'colorPaletteRoyalBlueBorderActive' - | 'colorPaletteRoyalBlueBorder1' - | 'colorPaletteRoyalBlueBorder2'; - -export type ColorPaletteDarkBlue = - | 'colorPaletteDarkBlueBackground1' - | 'colorPaletteDarkBlueBackground2' - | 'colorPaletteDarkBlueBackground3' - | 'colorPaletteDarkBlueForeground1' - | 'colorPaletteDarkBlueForeground2' - | 'colorPaletteDarkBlueForeground3' - | 'colorPaletteDarkBlueBorderActive' - | 'colorPaletteDarkBlueBorder1' - | 'colorPaletteDarkBlueBorder2'; + | 'colorPaletteRoyalBlueBorderActive'; export type ColorPaletteCornflower = - | 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' - | 'colorPaletteCornflowerBackground3' - | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' - | 'colorPaletteCornflowerForeground3' - | 'colorPaletteCornflowerBorderActive' - | 'colorPaletteCornflowerBorder1' - | 'colorPaletteCornflowerBorder2'; + | 'colorPaletteCornflowerBorderActive'; export type ColorPaletteNavy = - | 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' - | 'colorPaletteNavyBackground3' - | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' - | 'colorPaletteNavyForeground3' - | 'colorPaletteNavyBorderActive' - | 'colorPaletteNavyBorder1' - | 'colorPaletteNavyBorder2'; + | 'colorPaletteNavyBorderActive'; export type ColorPaletteLavender = - | 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' - | 'colorPaletteLavenderBackground3' - | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' - | 'colorPaletteLavenderForeground3' - | 'colorPaletteLavenderBorderActive' - | 'colorPaletteLavenderBorder1' - | 'colorPaletteLavenderBorder2'; + | 'colorPaletteLavenderBorderActive'; export type ColorPalettePurple = - | 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' - | 'colorPalettePurpleBackground3' - | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' - | 'colorPalettePurpleForeground3' - | 'colorPalettePurpleBorderActive' - | 'colorPalettePurpleBorder1' - | 'colorPalettePurpleBorder2'; - -export type ColorPaletteDarkPurple = - | 'colorPaletteDarkPurpleBackground1' - | 'colorPaletteDarkPurpleBackground2' - | 'colorPaletteDarkPurpleBackground3' - | 'colorPaletteDarkPurpleForeground1' - | 'colorPaletteDarkPurpleForeground2' - | 'colorPaletteDarkPurpleForeground3' - | 'colorPaletteDarkPurpleBorderActive' - | 'colorPaletteDarkPurpleBorder1' - | 'colorPaletteDarkPurpleBorder2'; - -export type ColorPaletteOrchid = - | 'colorPaletteOrchidBackground1' - | 'colorPaletteOrchidBackground2' - | 'colorPaletteOrchidBackground3' - | 'colorPaletteOrchidForeground1' - | 'colorPaletteOrchidForeground2' - | 'colorPaletteOrchidForeground3' - | 'colorPaletteOrchidBorderActive' - | 'colorPaletteOrchidBorder1' - | 'colorPaletteOrchidBorder2'; + | 'colorPalettePurpleBorderActive'; export type ColorPaletteGrape = - | 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' - | 'colorPaletteGrapeBackground3' - | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' - | 'colorPaletteGrapeForeground3' - | 'colorPaletteGrapeBorderActive' - | 'colorPaletteGrapeBorder1' - | 'colorPaletteGrapeBorder2'; - -export type ColorPaletteBerry = - | 'colorPaletteBerryBackground1' - | 'colorPaletteBerryBackground2' - | 'colorPaletteBerryBackground3' - | 'colorPaletteBerryForeground1' - | 'colorPaletteBerryForeground2' - | 'colorPaletteBerryForeground3' - | 'colorPaletteBerryBorderActive' - | 'colorPaletteBerryBorder1' - | 'colorPaletteBerryBorder2'; + | 'colorPaletteGrapeBorderActive'; export type ColorPaletteLilac = - | 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' - | 'colorPaletteLilacBackground3' - | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' - | 'colorPaletteLilacForeground3' - | 'colorPaletteLilacBorderActive' - | 'colorPaletteLilacBorder1' - | 'colorPaletteLilacBorder2'; + | 'colorPaletteLilacBorderActive'; export type ColorPalettePink = - | 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' - | 'colorPalettePinkBackground3' - | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' - | 'colorPalettePinkForeground3' - | 'colorPalettePinkBorderActive' - | 'colorPalettePinkBorder1' - | 'colorPalettePinkBorder2'; - -export type ColorPaletteHotPink = - | 'colorPaletteHotPinkBackground1' - | 'colorPaletteHotPinkBackground2' - | 'colorPaletteHotPinkBackground3' - | 'colorPaletteHotPinkForeground1' - | 'colorPaletteHotPinkForeground2' - | 'colorPaletteHotPinkForeground3' - | 'colorPaletteHotPinkBorderActive' - | 'colorPaletteHotPinkBorder1' - | 'colorPaletteHotPinkBorder2'; + | 'colorPalettePinkBorderActive'; export type ColorPaletteMagenta = - | 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' - | 'colorPaletteMagentaBackground3' - | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' - | 'colorPaletteMagentaForeground3' - | 'colorPaletteMagentaBorderActive' - | 'colorPaletteMagentaBorder1' - | 'colorPaletteMagentaBorder2'; + | 'colorPaletteMagentaBorderActive'; export type ColorPalettePlum = - | 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' - | 'colorPalettePlumBackground3' - | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' - | 'colorPalettePlumForeground3' - | 'colorPalettePlumBorderActive' - | 'colorPalettePlumBorder1' - | 'colorPalettePlumBorder2'; + | 'colorPalettePlumBorderActive'; export type ColorPaletteBeige = - | 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' - | 'colorPaletteBeigeBackground3' - | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' - | 'colorPaletteBeigeForeground3' - | 'colorPaletteBeigeBorderActive' - | 'colorPaletteBeigeBorder1' - | 'colorPaletteBeigeBorder2'; + | 'colorPaletteBeigeBorderActive'; export type ColorPaletteMink = - | 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' - | 'colorPaletteMinkBackground3' - | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' - | 'colorPaletteMinkForeground3' - | 'colorPaletteMinkBorderActive' - | 'colorPaletteMinkBorder1' - | 'colorPaletteMinkBorder2'; - -export type ColorPaletteSilver = - | 'colorPaletteSilverBackground1' - | 'colorPaletteSilverBackground2' - | 'colorPaletteSilverBackground3' - | 'colorPaletteSilverForeground1' - | 'colorPaletteSilverForeground2' - | 'colorPaletteSilverForeground3' - | 'colorPaletteSilverBorderActive' - | 'colorPaletteSilverBorder1' - | 'colorPaletteSilverBorder2'; + | 'colorPaletteMinkBorderActive'; export type ColorPalettePlatinum = - | 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' - | 'colorPalettePlatinumBackground3' - | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' - | 'colorPalettePlatinumForeground3' - | 'colorPalettePlatinumBorderActive' - | 'colorPalettePlatinumBorder1' - | 'colorPalettePlatinumBorder2'; + | 'colorPalettePlatinumBorderActive'; export type ColorPaletteAnchor = - | 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' - | 'colorPaletteAnchorBackground3' - | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' - | 'colorPaletteAnchorForeground3' - | 'colorPaletteAnchorBorderActive' - | 'colorPaletteAnchorBorder1' - | 'colorPaletteAnchorBorder2'; - -export type ColorPaletteCharcoal = - | 'colorPaletteCharcoalBackground1' - | 'colorPaletteCharcoalBackground2' - | 'colorPaletteCharcoalBackground3' - | 'colorPaletteCharcoalForeground1' - | 'colorPaletteCharcoalForeground2' - | 'colorPaletteCharcoalForeground3' - | 'colorPaletteCharcoalBorderActive' - | 'colorPaletteCharcoalBorder1' - | 'colorPaletteCharcoalBorder2'; - -export type ColorPaletteTokens = Record< - | ColorPaletteDarkRed - | ColorPaletteBurgundy - | ColorPaletteCranberry + | 'colorPaletteAnchorBorderActive'; + +export type StatusColorPaletteTokens = Record< | ColorPaletteRed + | ColorPaletteGreen | ColorPaletteDarkOrange - | ColorPaletteBronze + | ColorPaletteYellow + | ColorPaletteBerry + | ColorPaletteMarigold + | ColorPaletteLightGreen, + string +>; + +export type PersonaColorPaletteTokens = Record< + | ColorPaletteDarkRed + | ColorPaletteCranberry | ColorPalettePumpkin - | ColorPaletteOrange | ColorPalettePeach - | ColorPaletteMarigold - | ColorPaletteYellow | ColorPaletteGold | ColorPaletteBrass | ColorPaletteBrown - | ColorPaletteDarkBrown - | ColorPaletteLime | ColorPaletteForest | ColorPaletteSeafoam - | ColorPaletteLightGreen - | ColorPaletteGreen | ColorPaletteDarkGreen | ColorPaletteLightTeal | ColorPaletteTeal - | ColorPaletteDarkTeal - | ColorPaletteCyan | ColorPaletteSteel - | ColorPaletteLightBlue | ColorPaletteBlue | ColorPaletteRoyalBlue - | ColorPaletteDarkBlue | ColorPaletteCornflower | ColorPaletteNavy | ColorPaletteLavender | ColorPalettePurple - | ColorPaletteDarkPurple - | ColorPaletteOrchid | ColorPaletteGrape - | ColorPaletteBerry | ColorPaletteLilac | ColorPalettePink - | ColorPaletteHotPink | ColorPaletteMagenta | ColorPalettePlum | ColorPaletteBeige | ColorPaletteMink - | ColorPaletteSilver | ColorPalettePlatinum - | ColorPaletteAnchor - | ColorPaletteCharcoal, + | ColorPaletteAnchor, string >; +export type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens; + /** * Possible color variant values */ @@ -765,21 +435,16 @@ export type BrandVariants = Record; */ export type GlobalSharedColors = { darkRed: ColorVariants; - burgundy: ColorVariants; cranberry: ColorVariants; red: ColorVariants; darkOrange: ColorVariants; - bronze: ColorVariants; pumpkin: ColorVariants; - orange: ColorVariants; peach: ColorVariants; marigold: ColorVariants; yellow: ColorVariants; gold: ColorVariants; brass: ColorVariants; brown: ColorVariants; - darkBrown: ColorVariants; - lime: ColorVariants; forest: ColorVariants; seafoam: ColorVariants; lightGreen: ColorVariants; @@ -787,32 +452,23 @@ export type GlobalSharedColors = { darkGreen: ColorVariants; lightTeal: ColorVariants; teal: ColorVariants; - darkTeal: ColorVariants; - cyan: ColorVariants; steel: ColorVariants; - lightBlue: ColorVariants; blue: ColorVariants; royalBlue: ColorVariants; - darkBlue: ColorVariants; cornflower: ColorVariants; navy: ColorVariants; lavender: ColorVariants; purple: ColorVariants; - darkPurple: ColorVariants; - orchid: ColorVariants; grape: ColorVariants; berry: ColorVariants; lilac: ColorVariants; pink: ColorVariants; - hotPink: ColorVariants; magenta: ColorVariants; plum: ColorVariants; beige: ColorVariants; mink: ColorVariants; - silver: ColorVariants; platinum: ColorVariants; anchor: ColorVariants; - charcoal: ColorVariants; }; export type FontSizeTokens = {