-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
14 changed files
with
644 additions
and
220 deletions.
There are no files selected for viewing
120 changes: 96 additions & 24 deletions
120
packages/react-components/react-button/src/components/Button/Button.tokens.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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})`, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.