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

fix(macOS Button): Use Fluent 2 alias tokens #3778

Merged
merged 9 commits into from
Oct 17, 2024
Merged

fix(macOS Button): Use Fluent 2 alias tokens #3778

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d5ba2b7
fix(macOS Button): Use Fluent 2 alias tokens
Saadnajmi Oct 7, 2024
f645f4e
Exhaustive color pass
Saadnajmi Oct 8, 2024
8bcdd7f
Update comments, add subtle disabled
Saadnajmi Oct 8, 2024
113cd80
Update with Github issue references
Saadnajmi Oct 9, 2024
79e524b
Fixup Sidebar in hC
Saadnajmi Oct 9, 2024
2d4a44a
Change files
Saadnajmi Oct 9, 2024
ebe5fb1
Update SubtleButton for HIgh Contrast
Saadnajmi Oct 15, 2024
df79591
Lint fix
Saadnajmi Oct 16, 2024
4509157
fix prettier
Saadnajmi Oct 16, 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
105 changes: 56 additions & 49 deletions packages/components/Button/src/ButtonColorTokens.macos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,94 +3,101 @@ import type { TokenSettings } from '@fluentui-react-native/use-styling';

import type { ButtonTokens } from './Button.types';

// Github #X: We should be using the `hover` tokens for the hover states, but they currently set a
// different color from rest. macOS by default doesn't have many hover states on it's controls. Address
Saadnajmi marked this conversation as resolved.
Show resolved Hide resolved
// this discrepancy in the token packages, and then update these definitions as appropriate.

// Github #X2: The macOS brand ramps from the token package use blue from Fluent V1, instead of communication blue.
rurikoaraki marked this conversation as resolved.
Show resolved Hide resolved
// Update the packages to use the newly defiened Fluent 2 brand ramp.

export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
({
backgroundColor: t.colors.defaultBackground,
color: t.colors.defaultContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultContent,
backgroundColor: t.colors.neutralBackground2,
color: t.colors.neutralForeground2,
borderColor: t.colors.neutralStroke2,
iconColor: t.colors.neutralForeground3,
disabled: {
backgroundColor: t.colors.defaultDisabledBackground,
color: t.colors.defaultDisabledContent,
borderColor: t.colors.defaultDisabledBorder,
iconColor: t.colors.defaultDisabledIcon,
backgroundColor: t.colors.neutralBackground2,
color: t.colors.neutralForegroundDisabled,
borderColor: t.colors.neutralStrokeDisabled,
iconColor: t.colors.neutralForeground3,
},
hovered: {
backgroundColor: t.colors.defaultBackground,
color: t.colors.defaultContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultHoveredIcon,
backgroundColor: t.colors.neutralBackground2,
color: t.colors.neutralForeground2,
borderColor: t.colors.neutralStroke2,
iconColor: t.colors.neutralForeground3,
},
pressed: {
backgroundColor: t.colors.defaultPressedBackground,
color: t.colors.defaultPressedContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultPressedIcon,
backgroundColor: t.colors.neutralBackground2Pressed,
color: t.colors.neutralForeground2,
borderColor: t.colors.neutralStroke2,
iconColor: t.colors.neutralForeground3,
},
focused: {
backgroundColor: t.colors.defaultFocusedBackground,
color: t.colors.defaultFocusedContent,
borderColor: t.colors.defaultFocusedBorder,
icon: t.colors.defaultFocusedIcon,
backgroundColor: t.colors.neutralBackground2,
color: t.colors.neutralForeground2,
borderColor: t.colors.neutralStroke2,
icon: t.colors.neutralForeground3,
},
primary: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnBrand,
borderColor: t.colors.brandStroke1,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.neutralForegroundOnBrand,
disabled: {
backgroundColor: t.colors.neutralBackgroundDisabled,
color: t.colors.neutralForegroundDisabled,
borderColor: t.colors.neutralStrokeDisabled,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.neutralForegroundDisabled,
},
hovered: {
backgroundColor: t.colors.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.brandBackgroundHover,
iconColor: t.colors.neutralForegroundOnBrandHover,
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnBrand,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.neutralForegroundOnBrand,
},
pressed: {
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnBrandPressed,
borderColor: t.colors.brandBackgroundPressed,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.neutralForegroundOnBrandPressed,
},
focused: {
backgroundColor: t.colors.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.strokeFocus2,
iconColor: t.colors.neutralForegroundOnBrandHover,
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnBrand,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.neutralForegroundOnBrand,
},
},
subtle: {
backgroundColor: t.colors.ghostBackground,
color: t.colors.ghostContent,
borderColor: t.colors.ghostBorder,
iconColor: t.colors.ghostIcon,
backgroundColor: t.colors.subtleBackground,
color: t.colors.brandForeground1,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.brandForeground1,
disabled: {
color: t.colors.ghostDisabledContent,
borderColor: t.colors.ghostDisabledBorder,
color: t.colors.brandForeground1Disabled,
borderColor: t.colors.transparentStrokeDisabled,
backgroundColor: t.colors.ghostDisabledBackground,
iconColor: t.colors.ghostDisabledIcon,
},
hovered: {
backgroundColor: t.colors.ghostHoveredBackground,
color: t.colors.ghostHoveredContent,
borderColor: t.colors.ghostHoveredBorder,
iconColor: t.colors.ghostHoveredIcon,
backgroundColor: t.colors.subtleBackgroundHover,
color: t.colors.brandForeground1Hover,
borderColor: t.colors.transparentStroke,
iconColor: t.colors.brandForeground1,
},
pressed: {
backgroundColor: t.colors.ghostPressedBackground,
borderColor: t.colors.ghostPressedBorder,
color: t.colors.ghostPressedContent,
icon: t.colors.ghostPressedIcon,
backgroundColor: t.colors.subtleBackgroundPressed,
borderColor: t.colors.transparentStroke,
color: t.colors.brandForeground1Pressed,
icon: t.colors.brandForeground1Pressed,
},
focused: {
borderColor: t.colors.ghostFocusedBorder,
backgroundColor: t.colors.ghostFocusedBackground,
color: t.colors.ghostFocusedContent,
icon: t.colors.ghostFocusedIcon,
borderColor: t.colors.subtleBackground,
backgroundColor: t.colors.brandForeground1,
color: t.colors.transparentStroke,
icon: t.colors.brandForeground1,
},
},
} as ButtonTokens);
Loading