Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(Architecture Prototype): Extended tokens on each component #31330

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

(Architecture Prototype): Extended tokens on each component #31330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18790f1
base structure for button tokens
brandonthomas Apr 29, 2024
6cd9ff5
Add W11 button press state colors && W11 switch hover state colors
EdDaWord May 6, 2024
5860f7a
Fix diff for building staging link
EdDaWord May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions packages/react-components/react-button/src/components/Button/Button.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { tokens } from '@fluentui/react-theme';
Copy link
Collaborator

@fabricteam fabricteam May 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

Combobox Converged 3 screenshots
Image Name Diff(in Pixels) Image Type
Combobox Converged.With placeholder.default.chromium.png 16 Changed
Combobox Converged.With placeholder.focused.chromium.png 16 Changed
Combobox Converged.With placeholder.hover.chromium.png 16 Changed
Dialog 1 screenshots
Image Name Diff(in Pixels) Image Type
Dialog.Integration Combobox Inline.chromium.png 52 Changed
Field 1 screenshots
Image Name Diff(in Pixels) Image Type
Field.Combobox+horizontal.default.chromium.png 109 Changed
ToggleButton Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
ToggleButton Converged.Checked.pressed.chromium.png 238 Changed
ToggleButton Converged.Transparent Checked.default.chromium.png 67 Changed
ToggleButton Converged.Subtle Checked.pressed.chromium.png 238 Changed
ToggleButton Converged.Subtle Checked.hover.chromium.png 265 Changed
ToggleButton Converged.Transparent Checked.pressed.chromium.png 223 Changed
ToggleButton Converged.Transparent Checked.hover.chromium.png 210 Changed

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots

Accordion 3 screenshots
Image Name Diff(in Pixels) Image Type
Accordion.Size - RTL.normal.chromium.png 2 Changed
Accordion.Size - Dark Mode.normal.chromium.png 2 Changed
Accordion.Size.normal.chromium.png 2 Changed
Avatar 5 screenshots
Image Name Diff(in Pixels) Image Type
Avatar.Active.normal.chromium.png 5 Changed
Avatar.Active Appearance - Dark Mode.normal.chromium.png 2 Changed
Avatar.Active Appearance.normal.chromium.png 10 Changed
Avatar.Color - RTL.normal.chromium.png 1 Changed
Avatar.Color.normal.chromium.png 1 Changed
Badge 6 screenshots
Image Name Diff(in Pixels) Image Type
Badge.Appearance.normal.chromium.png 1 Changed
Badge.Appearance - Dark Mode.normal.chromium.png 15 Changed
Badge.Default.normal.chromium.png 1 Changed
Badge.Size.normal.chromium.png 6 Changed
Badge.Shape.normal.chromium.png 1 Changed
Badge.Color.normal.chromium.png 1 Changed
Button 15 screenshots
Image Name Diff(in Pixels) Image Type
Button.Large Icon Only - Dark Mode.pressed.chromium.png 5 Changed
Button.Large Icon Only - Dark Mode.hover.chromium.png 3 Changed
Button.Large Icon Only - Dark Mode.default.chromium.png 4 Changed
Button.Large With Icon - Dark Mode.pressed.chromium.png 5 Changed
Button.Large Icon Only.pressed.chromium.png 3 Changed
Button.Large With Icon - Dark Mode.default.chromium.png 4 Changed
Button.Large Icon Only.hover.chromium.png 4 Changed
Button.Large With Icon.default.chromium.png 5 Changed
Button.Large With Icon - RTL.pressed.chromium.png 3 Changed
Button.Large With Icon - RTL.default.chromium.png 5 Changed
Button.Large With Icon - Dark Mode.hover.chromium.png 3 Changed
Button.Large Icon Only.default.chromium.png 5 Changed
Button.Large With Icon.hover.chromium.png 4 Changed
Button.Large With Icon.pressed.chromium.png 3 Changed
Button.Large With Icon - RTL.hover.chromium.png 4 Changed
Divider 3 screenshots
Image Name Diff(in Pixels) Image Type
Divider.With Svg - RTL.normal.chromium.png 3 Changed
Divider.With Svg.normal.chromium.png 3 Changed
Divider.Vertical With Svg.normal.chromium.png 4 Changed
MenuList 16 screenshots
Image Name Diff(in Pixels) Image Type
MenuList.Checkbox With Icons.normal.chromium.png 4 Changed
MenuList.Checkbox - RTL.2nd selected.chromium.png 1 Changed
MenuList.Checkbox With Icons.2nd selected.chromium.png 5 Changed
MenuList.Checkbox With Icons - RTL.normal.chromium.png 4 Changed
MenuList.Radio With Icons - RTL.1st selected.chromium.png 4 Changed
MenuList.Radio With Icons - RTL.2nd selected.chromium.png 4 Changed
MenuList.Radio With Icons.normal.chromium.png 4 Changed
MenuList.With Icons.normal.chromium.png 4 Changed
MenuList.Radio With Icons.2nd selected.chromium.png 4 Changed
MenuList.Checkbox With Icons - RTL.2nd selected.chromium.png 5 Changed
MenuList.Checkbox With Icons - RTL.1st selected.chromium.png 4 Changed
MenuList.With Icons.hover menuitem.chromium.png 3 Changed
MenuList.Checkbox With Icons.1st selected.chromium.png 4 Changed
MenuList.Radio With Icons - RTL.normal.chromium.png 4 Changed
MenuList.Radio With Icons.1st selected.chromium.png 4 Changed
MenuList.Checkbox.2nd selected.chromium.png 1 Changed
Slider 2 screenshots
Image Name Diff(in Pixels) Image Type
Slider.Size Small.normal.chromium.png 1 Changed
Slider.Size Small.rightArrow.chromium.png 1 Changed
Switch 2 screenshots
Image Name Diff(in Pixels) Image Type
Switch.Checked - RTL.hover.chromium.png 1 Changed
Switch.Checked.hover.chromium.png 1 Changed
Text 1 screenshots
Image Name Diff(in Pixels) Image Type
Text.Block.normal.chromium.png 995 Changed
TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
TextInput.Size Large.normal.chromium.png 2 Changed


export const buttonGroupTokens = {
// Default
buttonBorderRadius: `var(--buttonBorderRadius, ${tokens.borderRadiusMedium})`,
buttonFontFamily: `var(--buttonFontFamily,${tokens.fontFamilyBase})`,

// Secondary
buttonSecondaryBackgroundColorRest: `var(--buttonBackgroundColorRest,${tokens.colorNeutralBackground1})`,
buttonSecondaryBorderColorRest: `var(--buttonBorderColorRest,${tokens.colorNeutralStroke1})`,
buttonSecondaryForegroundColorRest: `var(--buttonForegroundColorRest,${tokens.colorNeutralForeground1})`,

buttonSecondaryBackgroundColorHover: `var(--buttonBackgroundColorHover,${tokens.colorNeutralBackground1Hover})`,
buttonSecondaryBorderColorHover: `var(--buttonBorderColorHover,${tokens.colorNeutralStroke1Hover})`,
buttonSecondaryForegroundColorHover: `var(--buttonForegroundColorHover,${tokens.colorNeutralForeground1Hover})`,

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.colorTransparentBackground})`,
buttonOutlineBackgroundColorHover: `var(--buttonOutlineBackgroundColorHover,${tokens.colorTransparentBackgroundHover})`,
buttonOutlineBackgroundColorPressed: `var(--buttonOutlineBackgroundColorPressed,${tokens.colorTransparentBackgroundPressed})`,

// 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 = {
// Default
ctrlButtonBorderRadius: `var(--ctrlButtonBorderRadius, ${buttonGroupTokens.buttonBorderRadius})`,
ctrlButtonFontFamily: `var(--ctrlButtonFontFamily,${buttonGroupTokens.buttonFontFamily})`,

// Secondary
ctrlButtonSecondaryBackgroundColorRest: `var(--ctrlButtonSecondaryBackgroundColorRest,${buttonGroupTokens.buttonSecondaryBackgroundColorRest})`,
ctrlButtonSecondaryBorderColorRest: `var(--ctrlButtonSecondaryBorderColorRest,${buttonGroupTokens.buttonSecondaryBorderColorRest})`,
ctrlButtonSecondaryForegroundColorRest: `var(--ctrlButtonSecondaryForegroundColorRest,${buttonGroupTokens.buttonSecondaryForegroundColorRest})`,

ctrlButtonSecondaryBackgroundColorHover: `var(--ctrlButtonSecondaryBackgroundColorHover,${buttonGroupTokens.buttonSecondaryBackgroundColorHover})`,
ctrlButtonSecondaryBorderColorHover: `var(--ctrlButtonSecondaryBorderColorHover,${buttonGroupTokens.buttonSecondaryBorderColorHover})`,
ctrlButtonSecondaryForegroundColorHover: `var(--ctrlButtonSecondaryForegroundColorHover,${buttonGroupTokens.buttonSecondaryForegroundColorHover})`,

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})`,
};
71 changes: 36 additions & 35 deletions packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { tokens } from '@fluentui/react-theme';
import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { ButtonSlots, ButtonState } from './Button.types';
import { buttonTokens } from './Button.tokens';

export const buttonClassNames: SlotClassNames<ButtonSlots> = {
root: 'fui-Button',
Expand Down Expand Up @@ -35,32 +36,32 @@ const useRootBaseClassName = makeResetStyles({
margin: 0,
overflow: 'hidden',

backgroundColor: tokens.colorNeutralBackground1,
color: tokens.colorNeutralForeground1,
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorRest,
color: buttonTokens.ctrlButtonSecondaryForegroundColorRest,
border: `${tokens.strokeWidthThin} solid ${buttonTokens.ctrlButtonSecondaryBorderColorRest}`,

fontFamily: tokens.fontFamilyBase,
fontFamily: buttonTokens.ctrlButtonFontFamily,
outlineStyle: 'none',

':hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
borderColor: tokens.colorNeutralStroke1Hover,
color: tokens.colorNeutralForeground1Hover,
backgroundColor: buttonTokens.ctrlButtonSecondaryBackgroundColorHover,
borderColor: buttonTokens.ctrlButtonSecondaryBorderColorHover,
color: buttonTokens.ctrlButtonSecondaryForegroundColorHover,

cursor: 'pointer',
},

':hover:active': {
backgroundColor: tokens.colorNeutralBackground1Pressed,
borderColor: tokens.colorNeutralStroke1Pressed,
color: tokens.colorNeutralForeground1Pressed,
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,
Expand Down Expand Up @@ -102,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}
Expand Down Expand Up @@ -136,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)': {
Expand All @@ -186,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',
},
Expand All @@ -206,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',
},
Expand Down Expand Up @@ -238,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',
},
Expand All @@ -255,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',
},
Expand Down Expand Up @@ -294,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,
Expand All @@ -311,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,
Expand Down
37 changes: 37 additions & 0 deletions packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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})`,
};
Loading
Loading