From 6cd9ff5d8ec7700e84253c7e08413ceaa3ac5590 Mon Sep 17 00:00:00 2001 From: EdDaWord Date: Mon, 6 May 2024 12:00:17 -0700 Subject: [PATCH] Add W11 button press state colors && W11 switch hover state colors add all button appearnce variants Fix mistake on transparent variant color Remove testing Fix error Add Selected Button Semantic Tokens Forgot to add the files Add Switch Indicator semantic tokens Add Semantic tokens for Switch Border Color Add Switch BorderColor semantic tokens Add combobox semantic tokens Finish semantic tokens for Combobox Colors --- .../src/components/Button/Button.tokens.ts | 120 +++++++++--- .../Button/useButtonStyles.styles.ts | 68 +++---- .../ToggleButton/ToggleButton.tokens.ts | 37 ++++ .../useToggleButtonStyles.styles.ts | 64 ++++--- .../Button/ButtonAppearance.stories.tsx | 96 ++++++++-- .../stories/Button/ButtonShape.stories.tsx | 15 +- .../ToggleButtonAppearance.stories.tsx | 102 +++++++--- .../components/Combobox/Combobox.tokens.ts | 37 ++++ .../Combobox/useComboboxStyles.styles.ts | 37 ++-- .../Combobox/ComboboxAppearance.stories.tsx | 181 +++++++++++++----- .../src/components/Switch/Switch.tokens.ts | 43 +++++ .../Switch/useSwitchStyles.styles.ts | 27 +-- .../stories/Switch/SwitchChecked.stories.tsx | 33 +++- packages/tokens/src/types.ts | 4 +- 14 files changed, 644 insertions(+), 220 deletions(-) create mode 100644 packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tokens.ts create mode 100644 packages/react-components/react-combobox/src/components/Combobox/Combobox.tokens.ts create mode 100644 packages/react-components/react-switch/src/components/Switch/Switch.tokens.ts diff --git a/packages/react-components/react-button/src/components/Button/Button.tokens.ts b/packages/react-components/react-button/src/components/Button/Button.tokens.ts index a91e96d7dac6e..7de7dcc1346c3 100644 --- a/packages/react-components/react-button/src/components/Button/Button.tokens.ts +++ b/packages/react-components/react-button/src/components/Button/Button.tokens.ts @@ -1,37 +1,109 @@ import { tokens } from '@fluentui/react-theme'; export const buttonGroupTokens = { - // colors - buttonBackgroundColorRest: `var(--buttonBackgroundColorRest,${tokens.colorNeutralBackground1})`, - buttonBackgroundColorHover: `var(--buttonBackgroundColorHover,${tokens.colorNeutralBackground1Hover})`, - buttonBackgroundColorPressed: `var(--buttonBackgroundColorPressed,${tokens.colorNeutralBackground1Pressed})`, + // Default + buttonBorderRadius: `var(--buttonBorderRadius, ${tokens.borderRadiusMedium})`, + buttonFontFamily: `var(--buttonFontFamily,${tokens.fontFamilyBase})`, - buttonForegroundColorRest: `var(--buttonForegroundColorRest,${tokens.colorNeutralForeground1})`, - buttonForegroundColorHover: `var(--buttonForegroundColorHover,${tokens.colorNeutralForeground1Hover})`, - buttonForegroundColorPressed: `var(--buttonForegroundColorPressed,${tokens.colorNeutralForeground1Pressed})`, + // Secondary + buttonSecondaryBackgroundColorRest: `var(--buttonBackgroundColorRest,${tokens.colorNeutralBackground1})`, + buttonSecondaryBorderColorRest: `var(--buttonBorderColorRest,${tokens.colorNeutralStroke1})`, + buttonSecondaryForegroundColorRest: `var(--buttonForegroundColorRest,${tokens.colorNeutralForeground1})`, - buttonBorderColorRest: `var(--buttonBorderColorRest,${tokens.colorNeutralStroke1})`, - buttonBorderColorHover: `var(--buttonBorderColorHover,${tokens.colorNeutralStroke1Hover})`, - buttonBorderColorPressed: `var(--buttonBorderColorPressed,${tokens.colorNeutralStroke1Pressed})`, + buttonSecondaryBackgroundColorHover: `var(--buttonBackgroundColorHover,${tokens.colorNeutralBackground1Hover})`, + buttonSecondaryBorderColorHover: `var(--buttonBorderColorHover,${tokens.colorNeutralStroke1Hover})`, + buttonSecondaryForegroundColorHover: `var(--buttonForegroundColorHover,${tokens.colorNeutralForeground1Hover})`, - // typography - buttonFontFamily: `var(--buttonFontFamily,${tokens.fontFamilyBase})`, + buttonSecondaryBackgroundColorPressed: `var(--buttonBackgroundColorPressed,${tokens.colorNeutralBackground1Pressed})`, + buttonSecondaryBorderColorPressed: `var(--buttonBorderColorPressed,${tokens.colorNeutralStroke1Pressed})`, + buttonSecondaryForegroundColorPressed: `var(--buttonForegroundColorPressed,${tokens.colorNeutralForeground1Pressed})`, + + // Primary + buttonPrimaryBackgroundColorRest: `var(--buttonPrimaryBackgroundColorRest,${tokens.colorBrandBackground})`, + buttonPrimaryForegroundColorRest: `var(--buttonPrimaryForegroundColorRest,${tokens.colorNeutralForegroundOnBrand})`, + + buttonPrimaryBackgroundColorHover: `var(--buttonPrimaryBackgroundColorHover,${tokens.colorBrandBackgroundHover})`, + buttonPrimaryForegroundColorHover: `var(--buttonPrimaryForegroundColorHover,${tokens.colorNeutralForegroundOnBrand})`, + + buttonPrimaryBackgroundColorPressed: `var(--buttonPrimaryBackgroundColorPressed,${tokens.colorBrandBackgroundPressed})`, + buttonPrimaryForegroundColorPressed: `var(--buttonPrimaryForegroundColorPressed,${tokens.colorNeutralForegroundOnBrand})`, + + // Outline + buttonOutlineBackgroundColorRest: `var(--buttonOutlineBackgroundColorRest,${tokens.colorTransparentBackgroundRest})`, + buttonOutlineBackgroundColorHover: `var(--buttonOutlineBackgroundColorHover,${tokens.colorTransparentBackgroundRest})`, + buttonOutlineBackgroundColorPressed: `var(--buttonOutlineBackgroundColorPressed,${tokens.colorTransparentBackgroundRest})`, + + // Subtle + buttonSubtleBackgroundColorRest: `var(--buttonSubtleBackgroundColorRest,${tokens.colorSubtleBackground})`, + buttonSubtleForegroundColorRest: `var(--buttonSubtleForegroundColorRest,${tokens.colorNeutralForeground2})`, + + buttonSubtleBackgroundColorHover: `var(--buttonSubtleBackgroundColorHover,${tokens.colorSubtleBackgroundHover})`, + buttonSubtleForegroundColorHover: `var(--buttonSubtleForegroundColorHover,${tokens.colorNeutralForeground2Hover})`, + + buttonSubtleBackgroundColorPressed: `var(--buttonSubtleBackgroundColorPressed,${tokens.colorSubtleBackgroundPressed})`, + buttonSubtleForegroundColorPressed: `var(--buttonSubtleForegroundColorPressed,${tokens.colorNeutralForeground2Pressed})`, + + // Transparent + buttonTransparentBackgroundColorRest: `var(--buttonTransparentBackgroundColorRest,${tokens.colorTransparentBackground})`, + buttonTransparentForegroundColorRest: `var(--buttonTransparentForegroundColorRest,${tokens.colorNeutralForeground2})`, + + buttonTransparentBackgroundColorHover: `var(--buttonTransparentBackgroundColorHover,${tokens.colorTransparentBackgroundHover})`, + buttonTransparentForegroundColorHover: `var(--buttonTransparentForegroundColorHover,${tokens.colorNeutralForeground2BrandHover})`, + + buttonTransparentBackgroundColorPressed: `var(--buttonTransparentBackgroundColorPressed,${tokens.colorTransparentBackgroundPressed})`, + buttonTransparentForegroundColorPressed: `var(--buttonTransparentForegroundColorPressed,${tokens.colorNeutralForeground2BrandPressed})`, }; export const buttonTokens = { - // colors - ctrlButtonBackgroundColorRest: `var(--ctrlButtonBackgroundColorRest,${buttonGroupTokens.buttonBackgroundColorRest})`, - ctrlButtonBackgroundColorHover: `var(--ctrlButtonBackgroundColorHover,${buttonGroupTokens.buttonBackgroundColorHover})`, - ctrlButtonBackgroundColorPressed: `var(--ctrlButtonBackgroundColorPressed,${buttonGroupTokens.buttonBackgroundColorPressed})`, + // Default + ctrlButtonBorderRadius: `var(--ctrlButtonBorderRadius, ${buttonGroupTokens.buttonBorderRadius})`, + ctrlButtonFontFamily: `var(--ctrlButtonFontFamily,${buttonGroupTokens.buttonFontFamily})`, - ctrlButtonForegroundColorRest: `var(--ctrlButtonForegroundColorRest,${buttonGroupTokens.buttonForegroundColorRest})`, - ctrlButtonForegroundColorHover: `var(--ctrlButtonForegroundColorHover,${buttonGroupTokens.buttonForegroundColorHover})`, - ctrlButtonForegroundColorPressed: `var(--ctrlButtonForegroundColorPressed,${buttonGroupTokens.buttonForegroundColorPressed})`, + // Secondary + ctrlButtonSecondaryBackgroundColorRest: `var(--ctrlButtonSecondaryBackgroundColorRest,${buttonGroupTokens.buttonSecondaryBackgroundColorRest})`, + ctrlButtonSecondaryBorderColorRest: `var(--ctrlButtonSecondaryBorderColorRest,${buttonGroupTokens.buttonSecondaryBorderColorRest})`, + ctrlButtonSecondaryForegroundColorRest: `var(--ctrlButtonSecondaryForegroundColorRest,${buttonGroupTokens.buttonSecondaryForegroundColorRest})`, - ctrlButtonBorderColorRest: `var(--ctrlButtonBorderColorRest,${buttonGroupTokens.buttonBorderColorRest})`, - ctrlButtonBorderColorHover: `var(--ctrlButtonBorderColorHover,${buttonGroupTokens.buttonBorderColorHover})`, - ctrlButtonBorderColorPressed: `var(--ctrlButtonBorderColorPressed,${buttonGroupTokens.buttonBorderColorPressed})`, + ctrlButtonSecondaryBackgroundColorHover: `var(--ctrlButtonSecondaryBackgroundColorHover,${buttonGroupTokens.buttonSecondaryBackgroundColorHover})`, + ctrlButtonSecondaryBorderColorHover: `var(--ctrlButtonSecondaryBorderColorHover,${buttonGroupTokens.buttonSecondaryBorderColorHover})`, + ctrlButtonSecondaryForegroundColorHover: `var(--ctrlButtonSecondaryForegroundColorHover,${buttonGroupTokens.buttonSecondaryForegroundColorHover})`, - // typography - ctrlButtonFontFamily: `var(--ctrlButtonFontFamily,${buttonGroupTokens.buttonFontFamily})`, + ctrlButtonSecondaryBackgroundColorPressed: `var(--ctrlButtonSecondaryBackgroundColorPressed,${buttonGroupTokens.buttonSecondaryBackgroundColorPressed})`, + ctrlButtonSecondaryBorderColorPressed: `var(--ctrlButtonSecondaryBorderColorPressed,${buttonGroupTokens.buttonSecondaryBorderColorPressed})`, + ctrlButtonSecondaryForegroundColorPressed: `var(--ctrlButtonSecondaryForegroundColorPressed,${buttonGroupTokens.buttonSecondaryForegroundColorPressed})`, + + // Primary + ctrlButtonPrimaryBackgroundColorRest: `var(--ctrlButtonPrimaryBackgroundColorRest,${buttonGroupTokens.buttonPrimaryBackgroundColorRest})`, + ctrlButtonPrimaryForegroundColorRest: `var(--ctrlButtonPrimaryForegroundColorRest,${buttonGroupTokens.buttonPrimaryForegroundColorRest})`, + + ctrlButtonPrimaryBackgroundColorHover: `var(--ctrlButtonPrimaryBackgroundColorHover,${buttonGroupTokens.buttonPrimaryBackgroundColorHover})`, + ctrlButtonPrimaryForegroundColorHover: `var(--ctrlButtonPrimaryForegroundColorHover,${buttonGroupTokens.buttonPrimaryForegroundColorHover})`, + + ctrlButtonPrimaryBackgroundColorPressed: `var(--ctrlButtonPrimaryBackgroundColorPressed,${buttonGroupTokens.buttonPrimaryBackgroundColorPressed})`, + ctrlButtonPrimaryForegroundColorPressed: `var(--ctrlButtonPrimaryForegroundColorPressed,${buttonGroupTokens.buttonPrimaryForegroundColorPressed})`, + + // Outline + ctrlButtonOutlineBackgroundColorRest: `var(--ctrlButtonOutlineBackgroundColorRest,${buttonGroupTokens.buttonOutlineBackgroundColorRest})`, + ctrlButtonOutlineBackgroundColorHover: `var(--ctrlButtonOutlineBackgroundColorHover,${buttonGroupTokens.buttonOutlineBackgroundColorHover})`, + ctrlButtonOutlineBackgroundColorPressed: `var(--ctrlButtonOutlineBackgroundColorPressed,${buttonGroupTokens.buttonOutlineBackgroundColorPressed})`, + + // Subtle + ctrlButtonSubtleBackgroundColorRest: `var(--ctrlButtonSubtleBackgroundColorRest,${buttonGroupTokens.buttonSubtleBackgroundColorRest})`, + ctrlButtonSubtleForegroundColorRest: `var(--ctrlButtonSubtleForegroundColorRest,${buttonGroupTokens.buttonSubtleForegroundColorRest})`, + + ctrlButtonSubtleBackgroundColorHover: `var(--ctrlButtonSubtleBackgroundColorHover,${buttonGroupTokens.buttonSubtleBackgroundColorHover})`, + ctrlButtonSubtleForegroundColorHover: `var(--ctrlButtonSubtleForegroundColorHover,${buttonGroupTokens.buttonSubtleForegroundColorHover})`, + + ctrlButtonSubtleBackgroundColorPressed: `var(--ctrlButtonSubtleBackgroundColorPressed,${buttonGroupTokens.buttonSubtleBackgroundColorPressed})`, + ctrlButtonSubtleForegroundColorPressed: `var(--ctrlButtonSubtleForegroundColorPressed,${buttonGroupTokens.buttonSubtleForegroundColorPressed})`, + + // Transparent + ctrlButtonTransparentBackgroundColorRest: `var(--ctrlButtonTransparentBackgroundColorRest,${buttonGroupTokens.buttonTransparentBackgroundColorRest})`, + ctrlButtonTransparentForegroundColorRest: `var(--ctrlButtonTransparentForegroundColorRest,${buttonGroupTokens.buttonTransparentForegroundColorRest})`, + + ctrlButtonTransparentBackgroundColorHover: `var(--ctrlButtonTransparentBackgroundColorHover,${buttonGroupTokens.buttonTransparentBackgroundColorHover})`, + ctrlButtonTransparentForegroundColorHover: `var(--ctrlButtonTransparentForegroundColorHover,${buttonGroupTokens.buttonTransparentForegroundColorHover})`, + + ctrlButtonTransparentBackgroundColorPressed: `var(--ctrlButtonTransparentBackgroundColorPressed,${buttonGroupTokens.buttonTransparentBackgroundColorPressed})`, + ctrlButtonTransparentForegroundColorPressed: `var(--ctrlButtonTransparentForegroundColorPressed,${buttonGroupTokens.buttonTransparentForegroundColorPressed})`, }; diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index 699da266b8ba7..554bd2456e5d9 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -36,32 +36,32 @@ const useRootBaseClassName = makeResetStyles({ margin: 0, overflow: 'hidden', - backgroundColor: buttonTokens.ctrlButtonBackgroundColorRest, - color: buttonTokens.ctrlButtonForegroundColorRest, - border: `${tokens.strokeWidthThin} solid ${buttonTokens.ctrlButtonBorderColorRest}`, + backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorRest, + color: buttonTokens.ctrlButtonSecondaryForegroundColorRest, + border: `${tokens.strokeWidthThin} solid ${buttonTokens.ctrlButtonSecondaryBorderColorRest}`, fontFamily: buttonTokens.ctrlButtonFontFamily, outlineStyle: 'none', ':hover': { - backgroundColor: buttonTokens.ctrlButtonBackgroundColorHover, - borderColor: buttonTokens.ctrlButtonBorderColorHover, - color: buttonTokens.ctrlButtonForegroundColorHover, + backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorHover, + borderColor: buttonTokens.ctrlButtonSecondaryBorderColorHover, + color: buttonTokens.ctrlButtonSecondaryForegroundColorHover, cursor: 'pointer', }, ':hover:active': { - backgroundColor: buttonTokens.ctrlButtonBackgroundColorPressed, - borderColor: buttonTokens.ctrlButtonBorderColorPressed, - color: buttonTokens.ctrlButtonForegroundColorPressed, + backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorPressed, + borderColor: buttonTokens.ctrlButtonSecondaryBorderColorPressed, + color: buttonTokens.ctrlButtonSecondaryForegroundColorPressed, outlineStyle: 'none', }, padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`, minWidth: '96px', - borderRadius: tokens.borderRadiusMedium, + borderRadius: buttonTokens.ctrlButtonBorderRadius, fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightSemibold, @@ -103,7 +103,7 @@ const useRootBaseClassName = makeResetStyles({ ...createCustomFocusIndicatorStyle({ borderColor: tokens.colorStrokeFocus2, - borderRadius: tokens.borderRadiusMedium, + borderRadius: buttonTokens.ctrlButtonBorderRadius, borderWidth: '1px', outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`, boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} @@ -137,31 +137,31 @@ const useIconBaseClassName = makeResetStyles({ const useRootStyles = makeStyles({ // Appearance variations outline: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: buttonTokens.ctrlButtonOutlineBackgroundColorRest, ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonOutlineBackgroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonOutlineBackgroundColorPressed, }, }, primary: { - backgroundColor: tokens.colorBrandBackground, + backgroundColor: buttonTokens.ctrlButtonPrimaryBackgroundColorRest, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: buttonTokens.ctrlButtonPrimaryForegroundColorRest, ':hover': { - backgroundColor: tokens.colorBrandBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonPrimaryBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: buttonTokens.ctrlButtonPrimaryForegroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorBrandBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonPrimaryBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: buttonTokens.ctrlButtonPrimaryForegroundColorPressed, }, '@media (forced-colors: active)': { @@ -187,14 +187,14 @@ const useRootStyles = makeStyles({ /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: tokens.colorSubtleBackground, + backgroundColor: buttonTokens.ctrlButtonSubtleBackgroundColorRest, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2, + color: buttonTokens.ctrlButtonSubtleForegroundColorRest, ':hover': { - backgroundColor: tokens.colorSubtleBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonSubtleBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Hover, + color: buttonTokens.ctrlButtonSubtleForegroundColorHover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -207,9 +207,9 @@ const useRootStyles = makeStyles({ }, ':hover:active': { - backgroundColor: tokens.colorSubtleBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonSubtleBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Pressed, + color: buttonTokens.ctrlButtonSubtleForegroundColorPressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -239,14 +239,14 @@ const useRootStyles = makeStyles({ }, }, transparent: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: buttonTokens.ctrlButtonTransparentBackgroundColorRest, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2, + color: buttonTokens.ctrlButtonTransparentForegroundColorRest, ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonTransparentBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandHover, + color: buttonTokens.ctrlButtonTransparentForegroundColorHover, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -256,9 +256,9 @@ const useRootStyles = makeStyles({ }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonTransparentBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandPressed, + color: buttonTokens.ctrlButtonTransparentForegroundColorPressed, [`& .${iconFilledClassName}`]: { display: 'inline', }, @@ -295,7 +295,7 @@ const useRootStyles = makeStyles({ minWidth: '64px', ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS), - ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.borderRadius(buttonTokens.ctrlButtonBorderRadius), fontSize: tokens.fontSizeBase200, fontWeight: tokens.fontWeightRegular, @@ -312,7 +312,7 @@ const useRootStyles = makeStyles({ minWidth: '96px', ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL), - ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.borderRadius(buttonTokens.ctrlButtonBorderRadius), fontSize: tokens.fontSizeBase400, fontWeight: tokens.fontWeightSemibold, diff --git a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tokens.ts b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tokens.ts new file mode 100644 index 0000000000000..794ffd2548efb --- /dev/null +++ b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tokens.ts @@ -0,0 +1,37 @@ +import { tokens } from '@fluentui/react-theme'; + +export const toggleButtonGroupTokens = { + buttonSecondaryBackgroundColorSelected: `var(--buttonSecondaryBackgroundColorSelected, ${tokens.colorNeutralBackground1Selected})`, + buttonSecondaryBorderColorSelected: `var(--buttonSecondaryBorderColorSelected, ${tokens.colorNeutralStroke1})`, + buttonSecondaryForegroundColorSelected: `var(--buttonSecondaryForegroundColorSelected, ${tokens.colorNeutralForeground1Selected})`, + + buttonOutlineBackgroundColorSelected: `var(--buttonOutlineBackgroundColorSelected, ${tokens.colorTransparentBackgroundSelected})`, + buttonOutlineBorderColorSelected: `var(--buttonOutlineBorderColorSelected, ${tokens.colorNeutralStroke1})`, + + buttonPrimaryBackgroundColorSelected: `var(--buttonPrimaryBackgroundColorSelected, ${tokens.colorBrandBackgroundSelected})`, + buttonPrimaryForegroundColorSelected: `var(--buttonPrimaryForegroundColorSelected, ${tokens.colorNeutralForegroundOnBrand})`, + + buttonSubtleBackgroundColorSelected: `var(--buttonSubtleBackgroundColorSelected, ${tokens.colorSubtleBackgroundSelected})`, + buttonSubtleForegroundColorSelected: `var(--buttonSubtleForegroundColorSelected, ${tokens.colorNeutralForeground2Selected})`, + + buttonTransparentBackgroundColorSelected: `var(--buttonTransparentBackgroundColorSelected, ${tokens.colorTransparentBackgroundSelected})`, + buttonTransparentForegroundColorSelected: `var(--buttonTransparentForegroundColorSelected, ${tokens.colorNeutralForeground2Selected})`, +}; + +export const toggleButtonTokens = { + ctrlButtonSecondaryBackgroundColorSelected: `var(--ctrlButtonSecondaryBackgroundColorSelected, ${toggleButtonGroupTokens.buttonSecondaryBackgroundColorSelected})`, + ctrlButtonSecondaryBorderColorSelected: `var(--ctrlButtonSecondaryBorderColorSelected, ${toggleButtonGroupTokens.buttonSecondaryBorderColorSelected})`, + ctrlButtonSecondaryForegroundColorSelected: `var(--ctrlButtonSecondaryForegroundColorSelected, ${toggleButtonGroupTokens.buttonSecondaryForegroundColorSelected})`, + + ctrlButtonOutlineBackgroundColorSelected: `var(--ctrlButtonOutlineBackgroundColorSelected, ${toggleButtonGroupTokens.buttonOutlineBackgroundColorSelected})`, + ctrlButtonOutlineBorderColorSelected: `var(--ctrlButtonOutlineBorderColorSelected, ${toggleButtonGroupTokens.buttonOutlineBorderColorSelected})`, + + ctrlButtonPrimaryBackgroundColorSelected: `var(--ctrlButtonPrimaryBackgroundColorSelected, ${toggleButtonGroupTokens.buttonPrimaryBackgroundColorSelected})`, + ctrlButtonPrimaryForegroundColorSelected: `var(--ctrlButtonPrimaryForegroundColorSelected, ${toggleButtonGroupTokens.buttonPrimaryForegroundColorSelected})`, + + ctrlButtonSubtleBackgroundColorSelected: `var(--ctrlButtonSubtleBackgroundColorSelected, ${toggleButtonGroupTokens.buttonSubtleBackgroundColorSelected})`, + ctrlButtonSubtleForegroundColorSelected: `var(--ctrlButtonSubtleForegroundColorSelected, ${toggleButtonGroupTokens.buttonSubtleForegroundColorSelected})`, + + ctrlButtonTransparentBackgroundColorSelected: `var(--ctrlButtonTransparentBackgroundColorSelected, ${toggleButtonGroupTokens.buttonTransparentBackgroundColorSelected})`, + ctrlButtonTransparentForegroundColorSelected: `var(--ctrlButtonTransparentForegroundColorSelected, ${toggleButtonGroupTokens.buttonTransparentForegroundColorSelected})`, +}; diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts index d0802761e514a..3a79c4ba4c7d2 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -3,6 +3,8 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; +import { buttonTokens } from '../Button/Button.tokens'; +import { toggleButtonTokens } from './ToggleButton.tokens'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots } from '../Button/Button.types'; import type { ToggleButtonState } from './ToggleButton.types'; @@ -15,9 +17,9 @@ export const toggleButtonClassNames: SlotClassNames = { const useRootCheckedStyles = makeStyles({ // Base styles base: { - backgroundColor: tokens.colorNeutralBackground1Selected, - ...shorthands.borderColor(tokens.colorNeutralStroke1), - color: tokens.colorNeutralForeground1Selected, + backgroundColor: toggleButtonTokens.ctrlButtonSecondaryBackgroundColorSelected, + ...shorthands.borderColor(toggleButtonTokens.ctrlButtonSecondaryBorderColorSelected), + color: toggleButtonTokens.ctrlButtonSecondaryForegroundColorSelected, ...shorthands.borderWidth(tokens.strokeWidthThin), @@ -29,15 +31,15 @@ const useRootCheckedStyles = makeStyles({ }, ':hover': { - backgroundColor: tokens.colorNeutralBackground1Hover, - ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), - color: tokens.colorNeutralForeground1Hover, + backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorHover, + ...shorthands.borderColor(buttonTokens.ctrlButtonSecondaryBorderColorHover), + color: buttonTokens.ctrlButtonSecondaryForegroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorNeutralBackground1Pressed, - ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), - color: tokens.colorNeutralForeground1Pressed, + backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorPressed, + ...shorthands.borderColor(buttonTokens.ctrlButtonSecondaryBorderColorPressed), + color: buttonTokens.ctrlButtonSecondaryBackgroundColorPressed, }, }, @@ -70,16 +72,16 @@ const useRootCheckedStyles = makeStyles({ // Appearance variations outline: { - backgroundColor: tokens.colorTransparentBackgroundSelected, - ...shorthands.borderColor(tokens.colorNeutralStroke1), + backgroundColor: toggleButtonTokens.ctrlButtonOutlineBackgroundColorSelected, + ...shorthands.borderColor(toggleButtonTokens.ctrlButtonOutlineBorderColorSelected), ...shorthands.borderWidth(tokens.strokeWidthThicker), ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonOutlineBackgroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonOutlineBackgroundColorPressed, }, ...createCustomFocusIndicatorStyle({ @@ -87,57 +89,57 @@ const useRootCheckedStyles = makeStyles({ }), }, primary: { - backgroundColor: tokens.colorBrandBackgroundSelected, + backgroundColor: toggleButtonTokens.ctrlButtonPrimaryBackgroundColorSelected, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: toggleButtonTokens.ctrlButtonPrimaryForegroundColorSelected, ':hover': { - backgroundColor: tokens.colorBrandBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonPrimaryBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: buttonTokens.ctrlButtonPrimaryForegroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorBrandBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonPrimaryBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForegroundOnBrand, + color: buttonTokens.ctrlButtonPrimaryForegroundColorPressed, }, }, secondary: { /* The secondary styles are exactly the same as the base styles. */ }, subtle: { - backgroundColor: tokens.colorSubtleBackgroundSelected, + backgroundColor: toggleButtonTokens.ctrlButtonSubtleBackgroundColorSelected, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Selected, + color: toggleButtonTokens.ctrlButtonSubtleForegroundColorSelected, ':hover': { - backgroundColor: tokens.colorSubtleBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonSubtleBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Hover, + color: buttonTokens.ctrlButtonSubtleBackgroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorSubtleBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonSubtleBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2Pressed, + color: buttonTokens.ctrlButtonSubtleBackgroundColorPressed, }, }, transparent: { - backgroundColor: tokens.colorTransparentBackgroundSelected, + backgroundColor: toggleButtonTokens.ctrlButtonTransparentBackgroundColorSelected, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandSelected, + color: toggleButtonTokens.ctrlButtonTransparentForegroundColorSelected, ':hover': { - backgroundColor: tokens.colorTransparentBackgroundHover, + backgroundColor: buttonTokens.ctrlButtonTransparentBackgroundColorHover, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandHover, + color: buttonTokens.ctrlButtonTransparentBackgroundColorHover, }, ':hover:active': { - backgroundColor: tokens.colorTransparentBackgroundPressed, + backgroundColor: buttonTokens.ctrlButtonTransparentBackgroundColorPressed, ...shorthands.borderColor('transparent'), - color: tokens.colorNeutralForeground2BrandPressed, + color: buttonTokens.ctrlButtonTransparentBackgroundColorPressed, }, }, }); diff --git a/packages/react-components/react-button/stories/Button/ButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/Button/ButtonAppearance.stories.tsx index fc384f9e0a59e..b3fcb8a8692c6 100644 --- a/packages/react-components/react-button/stories/Button/ButtonAppearance.stories.tsx +++ b/packages/react-components/react-button/stories/Button/ButtonAppearance.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, Button } from '@fluentui/react-components'; +import { makeStyles, Button, webLightTheme, Theme, FluentProvider } from '@fluentui/react-components'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -11,25 +11,89 @@ const useStyles = makeStyles({ }, }); +const customSemanticTokensTheme: Theme = { + ...webLightTheme, + ctrlButtonPrimaryBackgroundColorRest: '#005FB8', + ctrlButtonPrimaryForegroundColorRest: '#FFFFFF', + + ctrlButtonPrimaryBackgroundColorHover: 'rgba(0, 95, 184, 0.90)', + ctrlButtonPrimaryForegroundColorHover: '#FFFFFF', + + ctrlButtonPrimaryBackgroundColorPressed: '#327EC5', + ctrlButtonPrimaryForegroundColorPressed: '#C1D8EE', + + ctrlButtonSecondaryBackgroundColorRest: '#FDFDFD', + ctrlButtonSecondaryBorderColorRest: '#EBEBEB', + ctrlButtonSecondaryForegroundColorRest: '#1A1A1A', + + ctrlButtonSecondaryBackgroundColorHover: '#F9F9F9', + ctrlButtonSecondaryBorderColorHover: '#EBEBEB', + ctrlButtonSecondaryForegroundColorHover: '#1A1A1A', + + ctrlButtonSecondaryBackgroundColorPressed: '#F9F9F9', + ctrlButtonSecondaryBorderColorPressed: '#EBEBEB', + ctrlButtonSecondaryForegroundColorPressed: '#626262', + + ctrlButtonOutlineBackgroundColorRest: 'blue', + ctrlButtonOutlineBackgroundColorHover: 'darkblue', + ctrlButtonOutlineBackgroundColorPressed: 'cyan', + + ctrlButtonSubtleBackgroundColorRest: 'red', + ctrlButtonSubtleForegroundColorRest: 'white', + + ctrlButtonSubtleBackgroundColorHover: 'crimson', + ctrlButtonSubtleForegroundColorHover: 'black', + + ctrlButtonSubtleBackgroundColorPressed: 'brown', + ctrlButtonSubtleForegroundColorPressed: 'yellow', + + ctrlButtonTransparentBackgroundColorRest: 'green', + ctrlButtonTransparentForegroundColorRest: 'black', + + ctrlButtonTransparentBackgroundColorHover: 'lime', + ctrlButtonTransparentForegroundColorHover: 'black', + + ctrlButtonTransparentBackgroundColorPressed: 'olive', + ctrlButtonTransparentForegroundColorPressed: 'black', +}; + export const Appearance = () => { const styles = useStyles(); return ( -
- - - - - -
+ <> +
+ + + + + +
+ + + + + + + + + ); }; diff --git a/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx b/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx index 899e2d989f1db..4f326aeecdcbf 100644 --- a/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx +++ b/packages/react-components/react-button/stories/Button/ButtonShape.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, Button } from '@fluentui/react-components'; +import { makeStyles, Button, webLightTheme, Theme, FluentProvider } from '@fluentui/react-components'; const useStyles = makeStyles({ wrapper: { @@ -9,20 +9,25 @@ const useStyles = makeStyles({ }, }); +const customSemanticTokensTheme: Theme = { + ...webLightTheme, + ctrlButtonBorderRadius: '8px', +}; + export const Shape = () => { const styles = useStyles(); return ( <>
- +
-
- + + -
+ ); }; diff --git a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx index 45ee2fcc38e02..5b67af7eb5ec3 100644 --- a/packages/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx +++ b/packages/react-components/react-button/stories/ToggleButton/ToggleButtonAppearance.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, ToggleButton } from '@fluentui/react-components'; +import { makeStyles, ToggleButton, webLightTheme, Theme, FluentProvider } from '@fluentui/react-components'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -12,6 +12,25 @@ const useStyles = makeStyles({ }, }); +const customSemanticTokensTheme: Theme = { + ...webLightTheme, + ctrlButtonSecondaryBackgroundColorSelected: 'green', + ctrlButtonSecondaryBorderColorSelected: 'blue', + ctrlButtonSecondaryForegroundColorSelected: 'red', + + ctrlButtonOutlineBackgroundColorSelected: 'yellow', + ctrlButtonOutlineBorderColorSelected: 'purple', + + ctrlButtonPrimaryBackgroundColorSelected: 'orange', + ctrlButtonPrimaryForegroundColorSelected: 'pink', + + ctrlButtonSubtleBackgroundColorSelected: 'cyan', + ctrlButtonSubtleForegroundColorSelected: 'magenta', + + ctrlButtonTransparentBackgroundColorSelected: 'lime', + ctrlButtonTransparentForegroundColorSelected: 'teal', +}; + export const Appearance = () => { const [checked1, setChecked1] = React.useState(false); const [checked2, setChecked2] = React.useState(false); @@ -32,32 +51,61 @@ export const Appearance = () => { ); return ( -
- : } - onClick={() => toggleChecked(1)} - > - Default - - : } - onClick={() => toggleChecked(2)} - > - Primary - - } onClick={() => toggleChecked(3)}> - Outline - - }> - Subtle - - }> - Transparent - -
+ <> +
+ : } + onClick={() => toggleChecked(1)} + > + Default + + : } + onClick={() => toggleChecked(2)} + > + Primary + + } onClick={() => toggleChecked(3)}> + Outline + + }> + Subtle + + }> + Transparent + +
+ + + : } + onClick={() => toggleChecked(1)} + > + Default + + : } + onClick={() => toggleChecked(2)} + > + Primary + + } onClick={() => toggleChecked(3)}> + Outline + + }> + Subtle + + }> + Transparent + + + ); }; diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tokens.ts b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tokens.ts new file mode 100644 index 0000000000000..b85bdedc7365f --- /dev/null +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tokens.ts @@ -0,0 +1,37 @@ +import { tokens } from '@fluentui/react-theme'; + +export const comboboxGroupTokens = { + comboboxBorderRadius: `var(--comboboxBorderRadius, ${tokens.borderRadiusMedium})`, + comboboxForegroundColor: `var(--comboboxForegroundColor, ${tokens.colorNeutralForeground1})`, + comboboxPlaceholderForegroundColor: `var(--comboboxPlaceholderForegroundColor, ${tokens.colorNeutralForeground2})`, + + comboboxBottomBorderColorRest: `var(--comboboxBottomBorderColorRest, ${tokens.colorCompoundBrandStroke})`, + comboboxBottomBorderColorPressed: `var(--comboboxBottomBorderColorPressed, ${tokens.colorCompoundBrandStrokePressed})`, + + comboboxOutlineBackgroundColorRest: `var(--comboboxOutlineBackgroundColorRest, ${tokens.colorNeutralBackground1})`, + comboboxOutlineBorderColorRest: `var(--comboboxOutlineBorderColorRest, ${tokens.colorNeutralStroke1})`, + comboboxOutlineBorderColorHover: `var(--comboboxOutlineBorderColorHover, ${tokens.colorNeutralStroke1Hover})`, + comboboxOutlineBorderColorPressed: `var(--comboboxOutlineBorderColorPressed, ${tokens.colorNeutralStroke1Pressed})`, + comboboxOutlineBottomBorderColor: `var(--comboboxOutlineBottomBorderColor, ${tokens.colorNeutralStrokeAccessible})`, + + comboboxUnderlineBackgroundColor: `var(--comboboxUnderlineBackgroundColor, ${tokens.colorTransparentBackground})`, + comboboxUnderlineBottomBorderColor: `var(--comboboxUnderlineBottomBorderColor, ${tokens.colorNeutralStrokeAccessible})`, +}; + +export const comboboxTokens = { + ctrlComboboxBorderRadius: `var(--ctrlComboboxBorderRadius,${comboboxGroupTokens.comboboxBorderRadius})`, + ctrlComboboxForegroundColor: `var(--ctrlComboboxForegroundColor,${comboboxGroupTokens.comboboxForegroundColor})`, + ctrlComboboxPlaceholderForegroundColor: `var(--ctrlComboboxPlaceholderForegroundColor,${comboboxGroupTokens.comboboxPlaceholderForegroundColor})`, + + ctrlComboboxBottomBorderColorRest: `var(--ctrlComboboxBottomBorderColorRest,${comboboxGroupTokens.comboboxBottomBorderColorRest})`, + ctrlComboboxBottomBorderColorPressed: `var(--ctrlComboboxBottomBorderColorPressed,${comboboxGroupTokens.comboboxBottomBorderColorPressed})`, + + ctrlComboboxOutlineBackgroundColorRest: `var(--ctrlComboboxOutlineBackgroundColorRest,${comboboxGroupTokens.comboboxOutlineBackgroundColorRest})`, + ctrlComboboxOutlineBorderColorRest: `var(--ctrlComboboxOutlineBorderColorRest,${comboboxGroupTokens.comboboxOutlineBorderColorRest})`, + ctrlComboboxOutlineBorderColorHover: `var(--ctrlComboboxOutlineBorderColorHover, ${comboboxGroupTokens.comboboxOutlineBorderColorHover})`, + ctrlComboboxOutlineBorderColorPressed: `var(--ctrlComboboxOutlineBorderColorPressed, ${comboboxGroupTokens.comboboxOutlineBorderColorPressed})`, + ctrlComboboxOutlineBottomBorderColor: `var(--ctrlComboboxOutlineBottomBorderColor, ${comboboxGroupTokens.comboboxOutlineBottomBorderColor})`, + + ctrlComboboxUnderlineBackgroundColor: `var(--ctrlComboboxUnderlineBackgroundColor, ${comboboxGroupTokens.comboboxUnderlineBackgroundColor})`, + ctrlComboboxUnderlineBottomBorderColor: `var(--ctrlComboboxUnderlineBottomBorderColor, ${comboboxGroupTokens.comboboxUnderlineBottomBorderColor})`, +}; diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts index f5545ad359335..c29de465b99cc 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts +++ b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts @@ -2,6 +2,7 @@ import { tokens, typographyStyles } from '@fluentui/react-theme'; import { SlotClassNames } from '@fluentui/react-utilities'; import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { iconSizes } from '../../utils/internalTokens'; +import { comboboxTokens } from './Combobox.tokens'; import type { ComboboxSlots, ComboboxState } from './Combobox.types'; export const comboboxClassNames: SlotClassNames = { @@ -25,7 +26,7 @@ const fieldHeights = { const useStyles = makeStyles({ root: { alignItems: 'center', - ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.borderRadius(comboboxTokens.ctrlComboboxBorderRadius), boxSizing: 'border-box', columnGap: tokens.spacingHorizontalXXS, display: 'inline-grid', @@ -49,10 +50,10 @@ const useStyles = makeStyles({ left: '-1px', bottom: '-1px', right: '-1px', - height: `max(2px, ${tokens.borderRadiusMedium})`, - borderBottomLeftRadius: tokens.borderRadiusMedium, - borderBottomRightRadius: tokens.borderRadiusMedium, - ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke), + height: `max(2px, ${comboboxTokens.ctrlComboboxBorderRadius})`, + borderBottomLeftRadius: comboboxTokens.ctrlComboboxBorderRadius, + borderBottomRightRadius: comboboxTokens.ctrlComboboxBorderRadius, + ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', comboboxTokens.ctrlComboboxBottomBorderColorRest), clipPath: 'inset(calc(100% - 2px) 0 0 0)', transform: 'scaleX(0)', transitionProperty: 'transform', @@ -76,13 +77,13 @@ const useStyles = makeStyles({ }, }, ':focus-within:active::after': { - borderBottomColor: tokens.colorCompoundBrandStrokePressed, + borderBottomColor: comboboxTokens.ctrlComboboxBottomBorderColorPressed, }, }, listbox: { boxShadow: `${tokens.shadow16}`, - ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.borderRadius(comboboxTokens.ctrlComboboxBorderRadius), maxHeight: '80vh', boxSizing: 'border-box', }, @@ -114,25 +115,25 @@ const useStyles = makeStyles({ // appearance variants outline: { - backgroundColor: tokens.colorNeutralBackground1, - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), - borderBottomColor: tokens.colorNeutralStrokeAccessible, + backgroundColor: comboboxTokens.ctrlComboboxOutlineBackgroundColorRest, + ...shorthands.border(tokens.strokeWidthThin, 'solid', comboboxTokens.ctrlComboboxOutlineBorderColorRest), + borderBottomColor: comboboxTokens.ctrlComboboxOutlineBottomBorderColor, }, outlineInteractive: { '&:hover': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Hover), - borderBottomColor: tokens.colorNeutralStrokeAccessible, + ...shorthands.borderColor(comboboxTokens.ctrlComboboxOutlineBorderColorHover), + borderBottomColor: comboboxTokens.ctrlComboboxOutlineBottomBorderColor, }, '&:active': { - ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed), - borderBottomColor: tokens.colorNeutralStrokeAccessible, + ...shorthands.borderColor(comboboxTokens.ctrlComboboxOutlineBorderColorPressed), + borderBottomColor: comboboxTokens.ctrlComboboxOutlineBottomBorderColor, }, }, underline: { - backgroundColor: tokens.colorTransparentBackground, - ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible), + backgroundColor: comboboxTokens.ctrlComboboxUnderlineBackgroundColor, + ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', comboboxTokens.ctrlComboboxUnderlineBottomBorderColor), ...shorthands.borderRadius(0), }, 'filled-lighter': { @@ -169,7 +170,7 @@ const useInputStyles = makeStyles({ alignSelf: 'stretch', backgroundColor: tokens.colorTransparentBackground, ...shorthands.border('0'), - color: tokens.colorNeutralForeground1, + color: comboboxTokens.ctrlComboboxForegroundColor, fontFamily: tokens.fontFamilyBase, '&:focus': { @@ -177,7 +178,7 @@ const useInputStyles = makeStyles({ }, '&::placeholder': { - color: tokens.colorNeutralForeground4, + color: comboboxTokens.ctrlComboboxPlaceholderForegroundColor, opacity: 1, }, }, diff --git a/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx index 48ed0bb2c1a42..6aeede87e6f8f 100644 --- a/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx +++ b/packages/react-components/react-combobox/stories/Combobox/ComboboxAppearance.stories.tsx @@ -1,7 +1,36 @@ import * as React from 'react'; -import { Combobox, makeStyles, Option, shorthands, tokens, useId } from '@fluentui/react-components'; +import { + Combobox, + makeStyles, + Option, + shorthands, + tokens, + useId, + webLightTheme, + Theme, + FluentProvider, +} from '@fluentui/react-components'; import type { ComboboxProps } from '@fluentui/react-components'; +const customTheme: Theme = { + ...webLightTheme, + ctrlComboboxBorderRadius: '10px', + comboboxForegroundColor: 'white', + comboboxPlaceholderForegroundColor: 'teal', + + ctrlComboboxBottomBorderColorRest: 'red', + ctrlComboboxBottomBorderColorPressed: 'green', + + ctrlComboboxOutlineBackgroundColorRest: 'yellow', + ctrlComboboxOutlineBorderColorRest: 'purple', + ctrlComboboxOutlineBorderColorHover: 'orange', + ctrlComboboxOutlineBottomBorderColor: 'blue', + ctrlComboBoxOutlineBottomBorderColor: 'violet', + + ctrlComboboxUnderlineBackgroundColor: 'cyan', + ctrlComboboxUnderlineBottomBorderColor: 'magenta', +}; + const useStyles = makeStyles({ root: { // Stack the label above the field with a gap @@ -39,58 +68,112 @@ export const Appearance = (props: Partial) => { const styles = useStyles(); return ( -
-
- - - - - - -
+ <> +
+
+ + + + + + +
-
- - - - - - -
+
+ + + + + + +
-
- - - - - - -
+
+ + + + + + +
-
- - - - - - +
+ + + + + + +
-
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ + ); }; diff --git a/packages/react-components/react-switch/src/components/Switch/Switch.tokens.ts b/packages/react-components/react-switch/src/components/Switch/Switch.tokens.ts new file mode 100644 index 0000000000000..210c8bda29245 --- /dev/null +++ b/packages/react-components/react-switch/src/components/Switch/Switch.tokens.ts @@ -0,0 +1,43 @@ +import { tokens } from '@fluentui/react-theme'; + +export const switchGroupTokens = { + switchBorderColorRest: `var(--switchBorderColorRest,${tokens.colorNeutralStrokeAccessible})`, + switchBorderColorHover: `var(--switchBorderColorHover,${tokens.colorNeutralStrokeAccessibleHover})`, + switchBorderColorPressed: `var(--switchBorderColorPressed,${tokens.colorNeutralStrokeAccessiblePressed})`, + + switchBorderColorCheckedRest: `var(--switchBorderColorCheckedRest,${tokens.colorTransparentStroke})`, + switchBorderColorCheckedHover: `var(--switchBorderColorCheckedHover,${tokens.colorTransparentStrokeInteractive})`, + switchBorderColorCheckedPressed: `var(--switchBorderColorCheckedPressed,${tokens.colorTransparentStrokeInteractive})`, + + switchIndicatorForegroundColorRest: `var(--switchIndicatorForegroundColorRest,${tokens.colorNeutralStrokeAccessible})`, + switchIndicatorForegroundColorHover: `var(--switchIndicatorForegroundColorHover,${tokens.colorNeutralStrokeAccessibleHover})`, + switchIndicatorForegroundColorPressed: `var(--switchIndicatorForegroundColorPressed,${tokens.colorNeutralStrokeAccessiblePressed})`, + + switchIndicatorForegroundColorCheckedRest: `var(--switchIndicatorForegroundColorCheckedRest,${tokens.colorNeutralForegroundInverted})`, + switchIndicatorBackgroundColorCheckedRest: `var(--switchIndicatorBackgroundColorCheckedRest,${tokens.colorCompoundBrandBackground})`, + + switchIndicatorBackgroundColorCheckedHover: `var(--switchIndicatorBackgroundColorCheckedHover,${tokens.colorCompoundBrandBackgroundHover})`, + + switchIndicatorBackgroundColorCheckedPressed: `var(--switchIndicatorBackgroundColorCheckedPressed,${tokens.colorCompoundBrandBackgroundPressed})`, +}; + +export const switchTokens = { + ctrlSwitchBorderColorRest: `var(--ctrlSwitchBorderColorRest,${switchGroupTokens.switchBorderColorRest})`, + ctrlSwitchBorderColorHover: `var(--ctrlSwitchBorderColorHover,${switchGroupTokens.switchBorderColorHover})`, + ctrlSwitchBorderColorPressed: `var(--ctrlSwitchBorderColorPressed,${switchGroupTokens.switchBorderColorPressed})`, + + ctrlSwitchBorderColorCheckedRest: `var(--ctrlSwitchBorderColorCheckedRest,${switchGroupTokens.switchBorderColorCheckedRest})`, + ctrlSwitchBorderColorCheckedHover: `var(--ctrlSwitchBorderColorCheckedHover,${switchGroupTokens.switchBorderColorCheckedHover})`, + ctrlSwitchBorderColorCheckedPressed: `var(--ctrlSwitchBorderColorCheckedPressed,${switchGroupTokens.switchBorderColorCheckedPressed})`, + + ctrlSwitchIndicatorForegroundColorRest: `var(--ctrlSwitchIndicatorForegroundColorRest,${switchGroupTokens.switchIndicatorForegroundColorRest})`, + ctrlSwitchIndicatorForegroundColorHover: `var(--ctrlSwitchIndicatorForegroundColorHover,${switchGroupTokens.switchIndicatorForegroundColorHover})`, + ctrlSwitchIndicatorForegroundColorPressed: `var(--ctrlSwitchIndicatorForegroundColorPressed,${switchGroupTokens.switchIndicatorForegroundColorPressed})`, + + ctrlSwitchIndicatorForegroundColorCheckedRest: `var(--ctrlSwitchIndicatorForegroundColorCheckedRest,${switchGroupTokens.switchIndicatorForegroundColorCheckedRest})`, + ctrlSwitchIndicatorBackgroundColorCheckedRest: `var(--ctrlSwitchIndicatorBackgroundColorCheckedRest,${switchGroupTokens.switchIndicatorBackgroundColorCheckedRest})`, + + ctrlSwitchIndicatorBackgroundColorCheckedHover: `var(--ctrlSwitchIndicatorBackgroundColorCheckedHover,${switchGroupTokens.switchIndicatorBackgroundColorCheckedHover})`, + + ctrlSwitchIndicatorBackgroundColorCheckedPressed: `var(--ctrlSwitchIndicatorBackgroundColorCheckedPressed,${switchGroupTokens.switchIndicatorBackgroundColorCheckedPressed})`, +}; diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts index 3f6d09ce28e21..af6124c255d19 100644 --- a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts +++ b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts @@ -3,6 +3,7 @@ import { tokens } from '@fluentui/react-theme'; import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SwitchSlots, SwitchState } from './Switch.types'; +import { switchTokens } from './Switch.tokens'; export const switchClassNames: SlotClassNames = { root: 'fui-Switch', @@ -112,8 +113,8 @@ const useInputBaseClassName = makeResetStyles({ // Enabled and unchecked ':enabled:not(:checked)': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessible, - borderColor: tokens.colorNeutralStrokeAccessible, + color: switchTokens.ctrlSwitchIndicatorForegroundColorRest, + borderColor: switchTokens.ctrlSwitchBorderColorRest, }, [`& ~ .${switchClassNames.label}`]: { @@ -122,15 +123,15 @@ const useInputBaseClassName = makeResetStyles({ ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessibleHover, - borderColor: tokens.colorNeutralStrokeAccessibleHover, + color: switchTokens.ctrlSwitchIndicatorForegroundColorHover, + borderColor: switchTokens.ctrlSwitchBorderColorHover, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - color: tokens.colorNeutralStrokeAccessiblePressed, - borderColor: tokens.colorNeutralStrokeAccessiblePressed, + color: switchTokens.ctrlSwitchIndicatorForegroundColorPressed, + borderColor: switchTokens.ctrlSwitchBorderColorPressed, }, }, }, @@ -138,22 +139,22 @@ const useInputBaseClassName = makeResetStyles({ // Enabled and checked ':enabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackground, - color: tokens.colorNeutralForegroundInverted, - borderColor: tokens.colorTransparentStroke, + backgroundColor: switchTokens.ctrlSwitchIndicatorBackgroundColorCheckedRest, + color: switchTokens.ctrlSwitchIndicatorForegroundColorCheckedRest, + borderColor: switchTokens.ctrlSwitchBorderColorCheckedRest, }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundHover, - borderColor: tokens.colorTransparentStrokeInteractive, + backgroundColor: switchTokens.ctrlSwitchIndicatorBackgroundColorCheckedHover, + borderColor: switchTokens.ctrlSwitchBorderColorCheckedHover, }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundPressed, - borderColor: tokens.colorTransparentStrokeInteractive, + backgroundColor: switchTokens.ctrlSwitchIndicatorBackgroundColorCheckedPressed, + borderColor: switchTokens.ctrlSwitchBorderColorCheckedPressed, }, }, }, diff --git a/packages/react-components/react-switch/stories/Switch/SwitchChecked.stories.tsx b/packages/react-components/react-switch/stories/Switch/SwitchChecked.stories.tsx index 9d664973437af..6dcef41d3318e 100644 --- a/packages/react-components/react-switch/stories/Switch/SwitchChecked.stories.tsx +++ b/packages/react-components/react-switch/stories/Switch/SwitchChecked.stories.tsx @@ -1,5 +1,27 @@ import * as React from 'react'; -import { Switch } from '@fluentui/react-components'; +import { Switch, webLightTheme, Theme, FluentProvider } from '@fluentui/react-components'; + +const customTheme: Theme = { + ...webLightTheme, + ctrlSwitchBorderColorRest: 'red', + ctrlSwitchBorderColorHover: 'green', + ctrlSwitchBorderColorPressed: 'teal', + + ctrlSwitchBorderColorCheckedRest: 'blue', + ctrlSwitchBorderColorCheckedHover: 'purple', + ctrlSwitchBorderColorCheckedPressed: 'orange', + + ctrlSwitchIndicatorForegroundColorRest: 'cyan', + ctrlSwitchIndicatorForegroundColorHover: 'yellow', + ctrlSwitchIndicatorForegroundColorPressed: 'magenta', + + ctrlSwitchIndicatorForegroundColorCheckedRest: 'red', + ctrlSwitchIndicatorBackgroundColorCheckedRest: 'blue', + + ctrlSwitchIndicatorBackgroundColorCheckedHover: 'green', + + ctrlSwitchIndicatorBackgroundColorCheckedPressed: 'pink', +}; export const Checked = () => { const [checked, setChecked] = React.useState(true); @@ -10,7 +32,14 @@ export const Checked = () => { [setChecked], ); - return ; + return ( + <> + + + + + + ); }; Checked.parameters = { diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 611aae44abe2e..6cc016c5ee047 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -774,6 +774,8 @@ export type Theme = FontSizeTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & - ButtonTokens; + ButtonTokens & + SwitchTokens & + ComboboxTokens; export type PartialTheme = Partial;