diff --git a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx index da4f7399c7f86..ec5903ebd4eef 100644 --- a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx +++ b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx @@ -54,12 +54,16 @@ storiesOf('ThemeProvider', module) Customized styles )) - .addStory('Use tokens on new button', () => ( + .addStory('Use variants on new button', () => ( void; diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md index 54fc18c70dc83..7fc8932a7e832 100644 --- a/packages/react-button/etc/react-button.api.md +++ b/packages/react-button/etc/react-button.api.md @@ -1,286 +1,306 @@ -## API Report File for "@fluentui/react-button" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { BaseSlots } from '@fluentui/react-compose'; -import { ColorTokenSet } from '@fluentui/theme'; -import { ComponentProps } from '@fluentui/react-compose/lib/next/index'; -import * as React from 'react'; -import { RecursivePartial } from '@fluentui/theme'; -import { ShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { SizeValue } from '@fluentui/theme'; -import { SlotProps } from '@fluentui/react-compose'; - -// @public -export const Button: React.ForwardRefExoticComponent & React.RefAttributes>; - -// @public (undocumented) -export type ButtonProps = ComponentProps & React.HTMLAttributes & { - icon?: ShorthandProps; - loader?: ShorthandProps; - content?: ShorthandProps; - href?: string; - target?: string; - circular?: boolean; - disabled?: boolean; - fluid?: boolean; - iconOnly?: boolean; - iconPosition?: 'before' | 'after'; - inverted?: boolean; - loading?: boolean; - primary?: boolean; - secondary?: boolean; - ghost?: boolean; - size?: SizeValue; - tokens?: RecursivePartial; -}; - -// @public -export const buttonShorthandProps: string[]; - -// @public (undocumented) -export type ButtonSlotProps = SlotProps>; - -// @public (undocumented) -export interface ButtonSlots extends BaseSlots { - // (undocumented) - icon: React.ElementType; - // (undocumented) - loader: React.ElementType; -} - -// @public (undocumented) -export interface ButtonState extends ButtonProps { - // (undocumented) - buttonRef?: React.RefObject; -} - -// @public (undocumented) -export type ButtonTokenSet = ColorTokenSet & { - paddingLeft: string; - paddingRight: string; - paddingTop: string; - paddingBottom: string; - margin: string; - height: string; - minWidth: string; - maxWidth: string; - minHeight: string; - contentGap: string; - iconSize: string; - borderRadius: string; - borderTopLeftRadius: string; - borderTopRightRadius: string; - borderBottomLeftRadius: string; - borderBottomRightRadius: string; - borderWidth: string; - boxShadow: string; - width: string; - size: { - smallest: string; - smaller: string; - small: string; - regular: string; - large: string; - larger: string; - largest: string; - }; - transform: string; - transition: string; - fontFamily: string; - fontSize: string; - fontWeight: string; - pressed: { - transform: string; - transition: string; - }; -}; - -// @public (undocumented) -export interface CheckedState { - // (undocumented) - 'aria-checked'?: React.AriaAttributes['aria-pressed']; - // (undocumented) - 'aria-pressed'?: React.AriaAttributes['aria-pressed']; - // (undocumented) - checked?: boolean; - // (undocumented) - defaultChecked?: boolean; - // (undocumented) - onClick?: React.DOMAttributes['onClick']; - // (undocumented) - role?: string; -} - -// @public -export const CompoundButton: React.ForwardRefExoticComponent & React.RefAttributes>; - -// @public (undocumented) -export interface CompoundButtonProps extends ButtonProps { - contentContainer?: ShorthandProps; - secondaryContent?: ShorthandProps; -} - -// @public -export const compoundButtonShorthandProps: string[]; - -// @public (undocumented) -export type CompoundButtonSlotProps = SlotProps>; - -// @public (undocumented) -export interface CompoundButtonSlots extends ButtonSlots { - // (undocumented) - contentContainer?: React.ElementType; - // (undocumented) - secondaryContent?: React.ElementType; -} - -// @public (undocumented) -export interface CompoundButtonState extends CompoundButtonProps { -} - -// @public (undocumented) -export type ExpandedState = { - ref?: React.Ref; - expanded?: boolean; - defaultExpanded?: boolean; - onClick?: (ev: React.MouseEvent) => void; - onMenuDismiss?: () => void; - onKeyDown?: (ev: React.KeyboardEvent) => void; - 'aria-expanded'?: boolean; - 'aria-haspopup'?: boolean; - menu: { - target?: React.Ref; - onDismiss?: () => void; - }; -}; - -// @public (undocumented) -export const MenuButton: React.ForwardRefExoticComponent & React.RefAttributes>; - -// @public (undocumented) -export type MenuButtonProps = Omit & { - menu?: ShorthandProps; - menuIcon?: ShorthandProps; - defaultExpanded?: boolean; - expanded?: boolean; - onMenuDismiss?: () => void; -}; - -// @public (undocumented) -export const menuButtonShorthandProps: string[]; - -// @public (undocumented) -export interface MenuButtonState extends MenuButtonProps, Omit { - // (undocumented) - menu: ExpandedState['menu']; -} - -// @public (undocumented) -export type MenuButtonTokens = ButtonTokenSet; - -// @public (undocumented) -export const SplitButton: React.ForwardRefExoticComponent & React.RefAttributes>; - -// @public (undocumented) -export interface SplitButtonProps extends ButtonProps, MenuButtonProps { - button?: ShorthandProps; - divider?: ShorthandProps; - menuButton?: ShorthandProps; -} - -// @public (undocumented) -export const splitButtonShorthandProps: string[]; - -// @public (undocumented) -export interface SplitButtonState extends Omit, MenuButtonState { - // (undocumented) - menuButtonRef?: React.RefObject; -} - -// @public (undocumented) -export type SplitButtonTokens = MenuButtonTokens; - -// @public -export const ToggleButton: React.ForwardRefExoticComponent & React.RefAttributes>; - -// @public (undocumented) -export interface ToggleButtonProps extends ButtonProps { - checked?: boolean; - defaultChecked?: boolean; -} - -// @public (undocumented) -export type ToggleButtonSlotProps = SlotProps>; - -// @public (undocumented) -export interface ToggleButtonSlots extends ButtonSlots { -} - -// @public (undocumented) -export interface ToggleButtonState extends ToggleButtonProps { -} - -// @public -export const useButton: (props: ButtonProps, ref: React.Ref, defaultProps?: ButtonProps | undefined) => { - state: Record; - render: (state: import("./Button.types").ButtonState) => JSX.Element; -}; - -// @public (undocumented) -export const useButtonClasses: (state: ButtonState, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; - -// @public -export const useButtonState: (draftState: ButtonState) => void; - -// @public -export const useChecked: (draftState: TDraftState) => void; - -// @public -export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref, defaultProps?: CompoundButtonProps | undefined) => { - state: Record; - render: (state: import("./CompoundButton.types").CompoundButtonState) => JSX.Element; -}; - -// @public (undocumented) -export const useCompoundButtonClasses: (state: CompoundButtonState, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; - -// @public (undocumented) -export const useExpanded: (draftState: TDraftState) => void; - -// @public -export const useMenuButton: (props: MenuButtonProps, ref: React.Ref, defaultProps?: MenuButtonProps | undefined) => { - state: MenuButtonState; - render: (state: MenuButtonState) => JSX.Element; -}; - -// @public (undocumented) -export const useMenuButtonClasses: (state: {}, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; - -// @public (undocumented) -export const useMenuButtonState: (state: MenuButtonState) => void; - -// @public -export const useSplitButton: (props: SplitButtonProps, ref: React.Ref, defaultProps?: SplitButtonProps | undefined) => { - state: SplitButtonState; - render: (state: SplitButtonState) => JSX.Element; -}; - -// @public (undocumented) -export const useSplitButtonClasses: (state: {}, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; - -// @public (undocumented) -export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref, defaultProps?: ToggleButtonProps | undefined) => { - state: Record; - render: (state: import("../Button").ButtonState) => JSX.Element; -}; - -// @public (undocumented) -export const useToggleButtonClasses: (state: {}, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; - - -// (No @packageDocumentation comment for this package) - -``` +## API Report File for "@fluentui/react-button" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { ColorTokens } from '@fluentui/theme'; +import { ComponentProps } from '@fluentui/react-compose/lib/next/index'; +import { FontTokens } from '@fluentui/theme'; +import * as React from 'react'; +import { RecursivePartial } from '@fluentui/theme'; +import { ShorthandProps } from '@fluentui/react-compose/lib/next/index'; +import { SizeValue } from '@fluentui/theme'; +import { Theme } from '@fluentui/react-theme-provider'; + +// @public +export const Button: React.ForwardRefExoticComponent & React.RefAttributes>; + +// @public (undocumented) +export type ButtonProps = ComponentProps & React.HTMLAttributes & { + icon?: ShorthandProps; + loader?: ShorthandProps; + content?: ShorthandProps; + href?: string; + target?: string; + circular?: boolean; + disabled?: boolean; + fluid?: boolean; + iconOnly?: boolean; + iconPosition?: 'before' | 'after'; + inverted?: boolean; + variant?: string; + loading?: boolean; + primary?: boolean; + secondary?: boolean; + ghost?: boolean; + size?: SizeValue; + tokens?: RecursivePartial; +}; + +// @public +export const buttonShorthandProps: string[]; + +// @public (undocumented) +export const ButtonSizeVariants: { + size_smallest: { + height: string; + minHeight: string; + }; + size_smaller: { + height: string; + minHeight: string; + }; + size_small: { + height: string; + minHeight: string; + }; + size_large: { + height: string; + minHeight: string; + }; + size_larger: { + height: string; + minHeight: string; + }; + size_largest: { + height: string; + minHeight: string; + }; +}; + +// @public (undocumented) +export interface ButtonState extends ButtonProps { + // (undocumented) + buttonRef?: React.RefObject; +} + +// @public (undocumented) +export type ButtonTokens = ColorTokens & FontTokens & { + paddingLeft?: string; + paddingRight?: string; + paddingTop?: string; + paddingBottom?: string; + margin?: string; + height?: string; + minWidth?: string; + maxWidth?: string; + minHeight?: string; + contentGap?: string; + iconSize?: string; + borderRadius?: string; + borderTopLeftRadius?: string; + borderTopRightRadius?: string; + borderBottomLeftRadius?: string; + borderBottomRightRadius?: string; + borderWidth?: string; + boxShadow?: string; + width?: string; + transform?: string; + transition?: string; + size?: { + smallest?: string; + smaller?: string; + small?: string; + regular?: string; + large?: string; + larger?: string; + largest?: string; + }; + pressed?: { + transform?: string; + transition?: string; + }; +}; + +// @public (undocumented) +export type ButtonVariants = { + base?: TTokens; + primary?: TTokens; + iconOnly?: TTokens; + circular?: TTokens; + fluid?: TTokens; +}; + +// @public (undocumented) +export interface CheckedState { + // (undocumented) + 'aria-checked'?: React.AriaAttributes['aria-pressed']; + // (undocumented) + 'aria-pressed'?: React.AriaAttributes['aria-pressed']; + // (undocumented) + checked?: boolean; + // (undocumented) + defaultChecked?: boolean; + // (undocumented) + onClick?: React.DOMAttributes['onClick']; + // (undocumented) + role?: string; +} + +// @public +export const CompoundButton: React.ForwardRefExoticComponent & React.RefAttributes>; + +// @public (undocumented) +export interface CompoundButtonProps extends ButtonProps { + contentContainer?: ShorthandProps; + secondaryContent?: ShorthandProps; +} + +// @public +export const compoundButtonShorthandProps: string[]; + +// @public (undocumented) +export interface CompoundButtonState extends CompoundButtonProps { +} + +// @public (undocumented) +export type CompoundButtonTokens = ButtonTokens & { + secondaryContentColor: string; + secondaryContentFontSize: string; + secondaryContentFontWeight: string; + secondaryContentGap: string; +}; + +// @public (undocumented) +export type CompoundButtonVariants = ButtonVariants; + +// @public (undocumented) +export type ExpandedState = { + ref?: React.Ref; + expanded?: boolean; + defaultExpanded?: boolean; + onClick?: (ev: React.MouseEvent) => void; + onMenuDismiss?: () => void; + onKeyDown?: (ev: React.KeyboardEvent) => void; + 'aria-expanded'?: boolean; + 'aria-haspopup'?: boolean; + menu: { + target?: React.Ref; + onDismiss?: () => void; + }; +}; + +// @public (undocumented) +export const MenuButton: React.ForwardRefExoticComponent & React.RefAttributes>; + +// @public (undocumented) +export type MenuButtonProps = Omit & { + menu?: ShorthandProps; + menuIcon?: ShorthandProps; + defaultExpanded?: boolean; + expanded?: boolean; + onMenuDismiss?: () => void; +}; + +// @public (undocumented) +export const menuButtonShorthandProps: string[]; + +// @public (undocumented) +export interface MenuButtonState extends MenuButtonProps, Omit { + // (undocumented) + menu: ExpandedState['menu']; +} + +// @public (undocumented) +export type MenuButtonTokens = ButtonTokens; + +// @public (undocumented) +export const SplitButton: React.ForwardRefExoticComponent & React.RefAttributes>; + +// @public (undocumented) +export interface SplitButtonProps extends ButtonProps, MenuButtonProps { + button?: ShorthandProps; + divider?: ShorthandProps; + menuButton?: ShorthandProps; +} + +// @public (undocumented) +export const splitButtonShorthandProps: string[]; + +// @public (undocumented) +export interface SplitButtonState extends Omit, MenuButtonState { + // (undocumented) + menuButtonRef?: React.RefObject; +} + +// @public (undocumented) +export type SplitButtonTokens = MenuButtonTokens; + +// @public +export const ToggleButton: React.ForwardRefExoticComponent & React.RefAttributes>; + +// @public (undocumented) +export interface ToggleButtonProps extends ButtonProps { + checked?: boolean; + defaultChecked?: boolean; +} + +// @public (undocumented) +export interface ToggleButtonState extends ToggleButtonProps { +} + +// @public +export const useButton: (props: ButtonProps, ref: React.Ref, defaultProps?: ButtonProps | undefined) => { + state: Record; + render: (state: import("./Button.types").ButtonState) => JSX.Element; +}; + +// @public (undocumented) +export const useButtonClasses: (state: ButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; + +// @public +export const useButtonState: (draftState: ButtonState) => void; + +// @public +export const useChecked: (draftState: TDraftState) => void; + +// @public (undocumented) +export const useClasses: (state: CompoundButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; + +// @public +export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref, defaultProps?: CompoundButtonProps | undefined) => { + state: Record; + render: (state: import("./CompoundButton.types").CompoundButtonState) => JSX.Element; +}; + +// @public (undocumented) +export const useCompoundButtonClasses: (state: CompoundButtonState) => void; + +// @public (undocumented) +export const useExpanded: (draftState: TDraftState) => void; + +// @public +export const useMenuButton: (props: MenuButtonProps, ref: React.Ref, defaultProps?: MenuButtonProps | undefined) => { + state: MenuButtonState; + render: (state: MenuButtonState) => JSX.Element; +}; + +// @public (undocumented) +export const useMenuButtonClasses: (state: {}, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; + +// @public (undocumented) +export const useMenuButtonState: (state: MenuButtonState) => void; + +// @public +export const useSplitButton: (props: SplitButtonProps, ref: React.Ref, defaultProps?: SplitButtonProps | undefined) => { + state: SplitButtonState; + render: (state: SplitButtonState) => JSX.Element; +}; + +// @public (undocumented) +export const useSplitButtonClasses: (state: {}, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; + +// @public (undocumented) +export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref, defaultProps?: ToggleButtonProps | undefined) => { + state: Record; + render: (state: import("../Button").ButtonState) => JSX.Element; +}; + +// @public (undocumented) +export const useToggleButtonClasses: (state: ToggleButtonState, theme?: import("@fluentui/react-theme-provider").Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void; + + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx index db6f8faf16972..002d5ffbaf05f 100644 --- a/packages/react-button/src/components/Button/Button.test.tsx +++ b/packages/react-button/src/components/Button/Button.test.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import { Button } from './Button'; +import { Button as BaseButton } from './Button'; import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { isConformant } from '../../common/isConformant'; +import { withThemeProvider } from '@fluentui/react-theme-provider'; -import { MergeStylesProvider } from '@fluentui/react-theme-provider'; -import { ButtonProps } from './Button.types'; +/** Use a ThemeProvider wrapper around the component to ensure styles show up in snapshots. */ +const Button = withThemeProvider(BaseButton); -/** Use merge-styles provider to ensure styles show up in snapshots. */ -const ButtonWrapper = React.forwardRef((props, ref) => ( - - ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders anchor when href prop is provided', () => { - const component = renderer.create(Default button); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -47,7 +42,7 @@ describe('Button', () => { it('can be focused', () => { const rootRef = React.createRef(); - wrapper = mount(Focus me); + wrapper = mount(); expect(typeof rootRef.current).toEqual('object'); expect(document.activeElement).not.toEqual(rootRef.current); diff --git a/packages/react-button/src/components/Button/Button.tsx b/packages/react-button/src/components/Button/Button.tsx index 395f675413156..7faa1e4da95e9 100644 --- a/packages/react-button/src/components/Button/Button.tsx +++ b/packages/react-button/src/components/Button/Button.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { useButton } from './useButton'; import { ButtonProps } from './Button.types'; -import { useFocusRects } from '@uifabric/utilities'; import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useButtonClasses } from './useButtonClasses'; @@ -12,7 +11,6 @@ export const Button = React.forwardRef((props, ref) => const { render, state } = useButton(props, ref); useButtonClasses(state); - useFocusRects(state.ref); useInlineTokens(state, '--button'); return render(state); diff --git a/packages/react-button/src/components/Button/Button.types.ts b/packages/react-button/src/components/Button/Button.types.ts index f0bcd461658eb..8f7f737c1848e 100644 --- a/packages/react-button/src/components/Button/Button.types.ts +++ b/packages/react-button/src/components/Button/Button.types.ts @@ -1,7 +1,6 @@ import * as React from 'react'; -import { BaseSlots, SlotProps } from '@fluentui/react-compose'; import { ComponentProps, ShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { ColorTokenSet, RecursivePartial, SizeValue } from '@fluentui/theme'; +import { ColorTokens, RecursivePartial, SizeValue, FontTokens } from '@fluentui/theme'; export type ButtonProps = ComponentProps & React.HTMLAttributes & { @@ -54,6 +53,9 @@ export type ButtonProps = ComponentProps & /** A button that inherits its background and has a subtle appearance. */ inverted?: boolean; + /** Opt in to a named variant which can be supplied by a theme. */ + variant?: string; + /** A button can show a loading indicator. */ loading?: boolean; @@ -87,61 +89,59 @@ export type ButtonProps = ComponentProps & /** A button can be formatted to show only text in order to indicate a less-pronounced action. */ // text?: boolean; - tokens?: RecursivePartial; + tokens?: RecursivePartial; }; export interface ButtonState extends ButtonProps { buttonRef?: React.RefObject; } -export interface ButtonSlots extends BaseSlots { - icon: React.ElementType; - loader: React.ElementType; -} - -export type ButtonSlotProps = SlotProps>; - -export type ButtonTokenSet = ColorTokenSet & { - /* sizing */ - paddingLeft: string; - paddingRight: string; - paddingTop: string; - paddingBottom: string; - margin: string; - height: string; - minWidth: string; - maxWidth: string; - minHeight: string; - contentGap: string; - iconSize: string; - borderRadius: string; - borderTopLeftRadius: string; - borderTopRightRadius: string; - borderBottomLeftRadius: string; - borderBottomRightRadius: string; - borderWidth: string; - boxShadow: string; - width: string; - - size: { - smallest: string; - smaller: string; - small: string; - regular: string; - large: string; - larger: string; - largest: string; +export type ButtonTokens = ColorTokens & + FontTokens & { + /* sizing */ + paddingLeft?: string; + paddingRight?: string; + paddingTop?: string; + paddingBottom?: string; + margin?: string; + height?: string; + minWidth?: string; + maxWidth?: string; + minHeight?: string; + contentGap?: string; + iconSize?: string; + borderRadius?: string; + borderTopLeftRadius?: string; + borderTopRightRadius?: string; + borderBottomLeftRadius?: string; + borderBottomRightRadius?: string; + borderWidth?: string; + boxShadow?: string; + width?: string; + + transform?: string; + transition?: string; + + size?: { + smallest?: string; + smaller?: string; + small?: string; + regular?: string; + large?: string; + larger?: string; + largest?: string; + }; + + pressed?: { + transform?: string; + transition?: string; + }; }; - transform: string; - transition: string; - - fontFamily: string; - fontSize: string; - fontWeight: string; - - pressed: { - transform: string; - transition: string; - }; +export type ButtonVariants = { + base?: TTokens; + primary?: TTokens; + iconOnly?: TTokens; + circular?: TTokens; + fluid?: TTokens; }; diff --git a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap index 6fb110b5ade43..89030d9436c64 100644 --- a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -1,221 +1,419 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Button renders a default state 1`] = ` - + + Default button + + + `; exports[`Button renders anchor when href prop is provided 1`] = ` - *:not(:first-child) { - margin-left: var(--button-contentGap); - } - &:hover { - background: var(--button-hovered-background, var(--button-background)); - border-color: var(--button-hovered-borderColor, var(--button-borderColor)); - box-shadow: var(--button-hovered-boxShadow, var(--button-boxShadow)); - color: var(--button-hovered-contentColor, var(--button-contentColor)); - } - &:hover .ms-Button-icon { - color: var(--button-hovered-iconColor, var(--button-iconColor)); + --body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + --body-fontSize: 14px; + --body-fontWeight: 400; + --body-mozOsxFontSmoothing: grayscale; + --body-webkitFontSmoothing: antialiased; + --color-body-background: #ffffff; + --color-body-contentColor: #323130; + --color-brand-background: #0078d4; + --color-brand-borderColor: transparent; + --color-brand-checked-background: #005a9e; + --color-brand-checked-contentColor: #ffffff; + --color-brand-checkedHovered-background: #005a9e; + --color-brand-checkedHovered-contentColor: #ffffff; + --color-brand-contentColor: #ffffff; + --color-brand-disabled-background: #f3f2f1; + --color-brand-disabled-borderColor: var(--color-brand-disabled-background); + --color-brand-disabled-contentColor: #a19f9d; + --color-brand-disabled-dividerColor: #c8c6c4; + --color-brand-disabled-iconColor: var(--color-brand-disabled-contentColor); + --color-brand-disabled-secondaryContentColor: var(--color-brand-disabled-contentColor); + --color-brand-dividerColor: #ffffff; + --color-brand-focused-background: var(--color-brand-background); + --color-brand-focused-borderColor: var(--color-brand-borderColor); + --color-brand-focused-contentColor: var(--color-brand-contentColor); + --color-brand-focused-iconColor: var(--color-brand-iconColor); + --color-brand-focused-secondaryContentColor: var(--color-brand-focused-contentColor); + --color-brand-hovered-background: #106ebe; + --color-brand-hovered-borderColor: var(--color-brand-borderColor); + --color-brand-hovered-contentColor: #ffffff; + --color-brand-hovered-secondaryContentColor: #ffffff; + --color-brand-iconColor: #ffffff; + --color-brand-pressed-background: #005a9e; + --color-brand-pressed-borderColor: var(--color-brand-borderColor); + --color-brand-pressed-contentColor: #ffffff; + --color-brand-pressed-iconColor: var(--color-brand-iconColor); + --color-brand-pressed-secondaryContentColor: #ffffff; + --color-brand-secondaryContentColor: #ffffff; } - &:active { - background: var(--button-pressed-background, var(--button-hovered-background)); - border-color: var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor))); - box-shadow: var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow))); - color: var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor))); - transform: var(--button-pressed-transform); - transition: var(--button-pressed-transition); - } - &:active .ms-Button-icon { - color: var(--button-pressed-iconColor, var(--button-iconColor)); - } - &[aria-disabled=true] { - background-color: var(--button-disabled-background); - border-color: var(--button-disabled-borderColor); - box-shadow: var(--button-disabled-boxShadow); - color: var(--button-disabled-contentColor); - opacity: var(--button-disabled-opacity); - pointer-events: none; - } - &[aria-disabled=true] .ms-Button-icon { - color: var(--button-disabled-iconColor); + { + -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); + -webkit-font-smoothing: var(--body-webkitFontSmoothing); + background: var(--color-body-background); + color: var(--color-body-contentColor); + font-family: var(--body-fontFamily); + font-size: var(--body-fontSize); + font-weight: var(--body-fontWeight); } - href="https://www.bing.com" - role="button" > - *:not(:first-child) { + margin-left: var(--button-contentGap); + } + &:hover { + background: var(--button-hovered-background, var(--button-background)); + border-color: var(--button-hovered-borderColor, var(--button-borderColor)); + box-shadow: var(--button-hovered-boxShadow, var(--button-boxShadow)); + color: var(--button-hovered-contentColor, var(--button-contentColor)); + } + &:hover .ms-Button-icon { + color: var(--button-hovered-iconColor, var(--button-iconColor)); + } + &:active { + background: var(--button-pressed-background, var(--button-hovered-background)); + border-color: var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor))); + box-shadow: var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow))); + color: var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor))); + transform: var(--button-pressed-transform); + transition: var(--button-pressed-transition); + } + &:active .ms-Button-icon { + color: var(--button-pressed-iconColor, var(--button-iconColor)); + } + &[aria-disabled=true] { + background-color: var(--button-disabled-background); + border-color: var(--button-disabled-borderColor); + box-shadow: var(--button-disabled-boxShadow); + color: var(--button-disabled-contentColor); + opacity: var(--button-disabled-opacity); + pointer-events: none; + } + &[aria-disabled=true] .ms-Button-icon { + color: var(--button-disabled-iconColor); + } + href="https://www.bing.com" + role="button" > - Default button - - + + Default button + + + `; diff --git a/packages/react-button/src/components/Button/useButtonClasses.ts b/packages/react-button/src/components/Button/useButtonClasses.ts index 60ca38e4bbac3..152c054bdf912 100644 --- a/packages/react-button/src/components/Button/useButtonClasses.ts +++ b/packages/react-button/src/components/Button/useButtonClasses.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { makeClasses } from '@fluentui/react-theme-provider'; +import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider'; import { ButtonState } from './Button.types'; const GlobalClassNames = { @@ -7,236 +7,342 @@ const GlobalClassNames = { icon: 'ms-Button-icon', }; -export const useButtonClasses = makeClasses({ - root: [ - GlobalClassNames.root, - { - cursor: 'pointer', - alignItems: 'center', - borderStyle: 'solid', - display: 'inline-flex', - justifyContent: 'center', - outline: 'none', - position: 'relative', - userSelect: 'none', - boxSizing: 'border-box', - verticalAlign: 'middle', - textDecoration: 'none', - background: 'var(--button-background, white)', - color: 'var(--button-contentColor)', - - borderColor: 'var(--button-borderColor)', - borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))', - borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))', - borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))', - borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))', - borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))', - borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))', - borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))', - borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))', - boxShadow: 'var(--button-boxShadow)', - - width: 'var(--button-width)', - maxWidth: 'var(--button-maxWidth)', - minWidth: 'var(--button-minWidth)', - height: 'var(--button-height)', - minHeight: 'var(--button-minHeight)', - - paddingLeft: 'var(--button-paddingLeft)', - paddingRight: 'var(--button-paddingRight)', - paddingTop: 'var(--button-paddingTop)', - paddingBottom: 'var(--button-paddingBottom)', - - transition: 'var(--button-transition)', - whiteSpace: 'var(--button-whiteSpace)', - - fontFamily: 'var(--button-fontFamily)', - fontSize: 'var(--button-fontSize)', - fontWeight: 'var(--button-fontWeight)', - WebkitFontSmoothing: 'antialiased', - MozOsxFontSmoothing: 'grayscale', - - ':global(.ms-Fabric--isFocusVisible) &:focus::after': { - content: '""', - position: 'absolute', - left: -1, - right: -1, - top: -1, - bottom: -1, - borderWidth: 'var(--button-focusWidth, 1.6px)', +export const ButtonSizeVariants = { + size_smallest: { + height: 'var(--button-size-smallest)', + minHeight: 'var(--button-size-smallest)', + }, + + size_smaller: { + height: 'var(--button-size-smaller)', + minHeight: 'var(--button-size-smaller)', + }, + + size_small: { + height: 'var(--button-size-small)', + minHeight: 'var(--button-size-small)', + }, + + size_large: { + height: 'var(--button-size-large)', + minHeight: 'var(--button-size-large)', + }, + + size_larger: { + height: 'var(--button-size-larger)', + minHeight: 'var(--button-size-larger)', + }, + + size_largest: { + height: 'var(--button-size-largest)', + minHeight: 'var(--button-size-largest)', + }, +}; + +export const useButtonClasses = makeVariantClasses({ + name: 'Button', + prefix: '--button', + + styles: { + root: [ + GlobalClassNames.root, + { + cursor: 'pointer', + alignItems: 'center', borderStyle: 'solid', - borderColor: 'var(--button-focusColor, black)', + display: 'inline-flex', + justifyContent: 'center', + outline: 'none', + position: 'relative', + userSelect: 'none', + boxSizing: 'border-box', + verticalAlign: 'middle', + textDecoration: 'none', + background: 'var(--button-background)', + color: 'var(--button-contentColor)', + + borderColor: 'var(--button-borderColor)', borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))', borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))', borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))', borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))', - boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset', - zIndex: 1, - }, + borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))', + borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))', + borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))', + borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))', + boxShadow: 'var(--button-boxShadow)', + + width: 'var(--button-width)', + maxWidth: 'var(--button-maxWidth)', + minWidth: 'var(--button-minWidth)', + height: 'var(--button-height)', + minHeight: 'var(--button-minHeight)', + + paddingLeft: 'var(--button-paddingLeft)', + paddingRight: 'var(--button-paddingRight)', + paddingTop: 'var(--button-paddingTop)', + paddingBottom: 'var(--button-paddingBottom)', + + transition: 'var(--button-transition)', + whiteSpace: 'var(--button-whiteSpace)', + + fontFamily: 'var(--button-fontFamily)', + fontSize: 'var(--button-fontSize)', + fontWeight: 'var(--button-fontWeight)', + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + + ':global(.ms-Fabric--isFocusVisible) &:focus::after': { + content: '""', + position: 'absolute', + left: -1, + right: -1, + top: -1, + bottom: -1, + borderWidth: 'var(--button-focusWidth, 2px)', + borderStyle: 'solid', + borderColor: 'var(--button-focusColor, black)', + borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))', + borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))', + borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))', + borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))', + boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset', + zIndex: 1, + }, - ['& > *:not(:first-child)']: { - marginLeft: 'var(--button-contentGap)', - }, + ['& > *:not(:first-child)']: { + marginLeft: 'var(--button-contentGap)', + }, - '&:hover': { - background: 'var(--button-hovered-background, var(--button-background))', - color: 'var(--button-hovered-contentColor, var(--button-contentColor))', - borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))', - boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))', + '&:hover': { + background: 'var(--button-hovered-background, var(--button-background))', + color: 'var(--button-hovered-contentColor, var(--button-contentColor))', + borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))', + boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))', - '.ms-Button-icon': { - color: 'var(--button-hovered-iconColor, var(--button-iconColor))', + '.ms-Button-icon': { + color: 'var(--button-hovered-iconColor, var(--button-iconColor))', + }, }, - }, - '&:active': { - background: 'var(--button-pressed-background, var(--button-hovered-background))', - color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))', - borderColor: 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))', - boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))', + '&:active': { + background: 'var(--button-pressed-background, var(--button-hovered-background))', + color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))', + borderColor: + 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))', + boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))', - transform: 'var(--button-pressed-transform)', - transition: 'var(--button-pressed-transition)', + transform: 'var(--button-pressed-transform)', + transition: 'var(--button-pressed-transition)', - '.ms-Button-icon': { - color: 'var(--button-pressed-iconColor, var(--button-iconColor))', + '.ms-Button-icon': { + color: 'var(--button-pressed-iconColor, var(--button-iconColor))', + }, }, - }, - '&[aria-disabled=true]': { - pointerEvents: 'none', - opacity: 'var(--button-disabled-opacity)', - backgroundColor: 'var(--button-disabled-background)', - color: 'var(--button-disabled-contentColor)', - borderColor: 'var(--button-disabled-borderColor)', - boxShadow: 'var(--button-disabled-boxShadow)', - - '.ms-Button-icon': { - color: 'var(--button-disabled-iconColor)', + '&[aria-disabled=true]': { + pointerEvents: 'none', + opacity: 'var(--button-disabled-opacity)', + backgroundColor: 'var(--button-disabled-background)', + color: 'var(--button-disabled-contentColor)', + borderColor: 'var(--button-disabled-borderColor)', + boxShadow: 'var(--button-disabled-boxShadow)', + + '.ms-Button-icon': { + color: 'var(--button-disabled-iconColor)', + }, }, }, - }, - ], - - icon: [ - GlobalClassNames.icon, - { - color: 'var(--button-iconColor)', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 'var(--button-iconSize)', - height: 'var(--button-iconSize)', - fontSize: 'var(--button-iconSize, inherit)', - fontWeight: 'normal', + ], + + icon: [ + GlobalClassNames.icon, + { + color: 'var(--button-iconColor)', + display: 'flex', + flexShrink: 0, + alignItems: 'center', + justifyContent: 'center', + width: 'var(--button-iconSize)', + height: 'var(--button-iconSize)', + fontSize: 'var(--button-iconSize, inherit)', + fontWeight: 'normal', + lineHeight: '1', + }, + ], + + content: { lineHeight: '1', }, - ], - - content: { - lineHeight: '1', }, - _primary: { - '--button-background': 'var(--color-brand-background)', - '--button-borderColor': 'var(--color-brand-borderColor)', - '--button-contentColor': 'var(--color-brand-contentColor)', - '--button-iconColor': 'var(--color-brand-iconColor)', - - '--button-hovered-background': 'var(--color-brand-hovered-background)', - '--button-hovered-borderColor': 'var(--color-brand-hovered-borderColor)', - '--button-hovered-contentColor': 'var(--color-brand-hovered-contentColor)', - '--button-hovered-iconColor': 'var(--color-brand-hovered-iconColor)', - - '--button-focused-background': 'var(--color-brand-focused-background)', - '--button-focused-borderColor': 'var(--color-brand-focused-borderColor)', - '--button-focused-contentColor': 'var(--color-brand-focused-contentColor)', - '--button-focused-iconColor': 'var(--color-brand-focused-iconColor)', - - '--button-pressed-background': 'var(--color-brand-pressed-background)', - '--button-pressed-borderColor': 'var(--color-brand-pressed-borderColor)', - '--button-pressed-contentColor': 'var(--color-brand-pressed-contentColor)', - '--button-pressed-iconColor': 'var(--color-brand-pressed-iconColor)', - - '--button-disabled-background': 'var(--color-brand-disabled-background)', - '--button-disabled-borderColor': 'var(--color-brand-disabled-borderColor)', - '--button-disabled-contentColor': 'var(--color-brand-disabled-contentColor)', - '--button-disabled-iconColor': 'var(--color-brand-disabled-iconColor)', - }, + variants: (theme: Theme) => { + const { fonts, effects, palette, semanticColors } = theme; + + return { + root: { + size: { + smallest: '24px', + smaller: '24px', + small: '24px', + regular: '32px', + large: '40px', + larger: '48px', + largest: '64px', + }, - _ghost: { - '--button-fontWeight': 'var(--ghost-fontWeight)', - '--button-background': 'var(--ghost-background)', - '--button-borderColor': 'var(--ghost-borderColor)', - '--button-contentColor': 'var(--ghost-contentColor)', - '--button-iconColor': 'var(--ghost-iconColor)', - - '--button-disabled-background': 'var(--ghost-disabled-background)', - '--button-disabled-borderColor': 'var(--ghost-disabled-borderColor)', - '--button-disabled-contentColor': 'var(--ghost-disabled-contentColor)', - '--button-disabled-iconColor': 'var(--ghost-disabled-iconColor)', - - '--button-focused-background': 'var(--ghost-focused-background)', - '--button-focused-borderColor': 'var(--ghost-focused-borderColor)', - '--button-focused-contentColor': 'var(--ghost-focused-contentColor)', - '--button-focused-iconColor': 'var(--ghost-focused-iconColor)', - - '--button-hovered-background': 'var(--ghost-hovered-background)', - '--button-hovered-borderColor': 'var(--ghost-hovered-borderColor)', - '--button-hovered-contentColor': 'var(--ghost-hovered-contentColor)', - '--button-hovered-iconColor': 'var(--ghost-hovered-iconColor)', - - '--button-pressed-background': 'var(--ghost-pressed-background)', - '--button-pressed-borderColor': 'var(--ghost-pressed-borderColor)', - '--button-pressed-contentColor': 'var(--ghost-pressed-contentColor)', - '--button-pressed-iconColor': 'var(--ghost-pressed-iconColor', - }, + // Sizing tokens + iconSize: fonts?.mediumPlus?.fontSize, + borderWidth: '1px', + boxShadow: 'none', + borderRadius: effects?.roundedCorner2, + paddingLeft: '20px', + paddingRight: '20px', + paddingTop: '0', + paddingBottom: '0', + margin: '0', + width: 'auto', + minWidth: '96px', + maxWidth: '280px', + minHeight: 'var(--button-size-regular)', + contentGap: '8px', + + // Font tokens + fontWeight: '600', + fontSize: fonts?.medium?.fontSize, + fontFamily: fonts?.medium?.fontFamily, + secondaryContentFontSize: fonts?.small.fontSize, + + // Color tokens + focusColor: palette?.black, + focusInnerColor: palette?.white, + background: semanticColors?.buttonBackground, + borderColor: semanticColors?.buttonBorder, + contentColor: semanticColors?.buttonText, + iconColor: 'inherit', + secondaryContentColor: palette?.neutralSecondary, + + hovered: { + background: semanticColors?.buttonBackgroundHovered, + contentColor: semanticColors?.buttonTextHovered, + secondaryContentColor: palette?.neutralDark, + }, - _iconOnly: { - '--button-minHeight': 'var(--button-minHeight)', - '--button-width': 'var(--button-height, var(--button-minHeight))', - '--button-paddingTop': 0, - '--button-paddingLeft': 0, - '--button-paddingBottom': 0, - '--button-paddingRight': 0, - }, + pressed: { + background: semanticColors?.buttonBackgroundPressed, + contentColor: semanticColors?.buttonTextPressed, + secondaryContentColor: semanticColors?.buttonTextPressed, + }, - _circular: { - '--button-borderRadius': '50000px', - }, + checked: { + background: semanticColors?.buttonBackgroundPressed, + contentColor: semanticColors?.buttonTextChecked, + }, - _fluid: { - '--button-width': '100%', - '--button-maxWidth': '100%', - }, + checkedHovered: { + background: semanticColors?.buttonBackgroundPressed, + contentColor: semanticColors?.buttonTextCheckedHovered, + }, - _size_smallest: { - '--button-height': 'var(--button-size-smallest)', - '--button-minHeight': 'var(--button-size-smallest)', - }, + disabled: { + background: semanticColors?.buttonBackgroundDisabled, + borderColor: semanticColors?.buttonBorderDisabled, + contentColor: semanticColors?.buttonTextDisabled, + secondaryContentColor: semanticColors?.buttonTextDisabled, + }, + }, - _size_smaller: { - '--button-height': 'var(--button-size-smaller)', - '--button-minHeight': 'var(--button-size-smaller)', - }, + circular: { + borderRadius: '50000px', + }, - _size_small: { - '--button-height': 'var(--button-size-small)', - '--button-minHeight': 'var(--button-size-small)', - }, + fluid: { + width: '100%', + maxWidth: 'none', + }, - _size_large: { - '--button-height': 'var(--button-size-large)', - '--button-minHeight': 'var(--button-size-large)', - }, + iconOnly: { + minWidth: 'var(--button-height)', + width: 'var(--button-height, var(--button-minHeight))', + paddingTop: '0', + paddingBottom: '0', + paddingLeft: '0', + paddingRight: '0', + }, - _size_larger: { - '--button-height': 'var(--button-size-larger)', - '--button-minHeight': 'var(--button-size-larger)', - }, + primary: { + background: 'var(--color-brand-background)', + borderColor: 'var(--color-brand-borderColor)', + contentColor: 'var(--color-brand-contentColor)', + iconColor: 'inherit', + + hovered: { + background: 'var(--color-brand-hovered-background)', + borderColor: 'var(--color-brand-hovered-borderColor)', + contentColor: 'var(--color-brand-hovered-contentColor)', + }, + + pressed: { + background: 'var(--color-brand-pressed-background)', + borderColor: 'var(--color-brand-pressed-borderColor)', + contentColor: 'var(--color-brand-pressed-contentColor)', + }, + }, + + // TODO: no references to palette. + ghost: { + background: 'transparent', + borderColor: 'transparent', + contentColor: palette?.neutralPrimary, + fontWeight: 'normal', + iconColor: palette?.themeDarkAlt, + menuIconColor: palette?.neutralSecondary, + secondaryContentColor: palette?.neutralPrimary, + + checked: { + background: palette?.neutralLight, + contentColor: palette?.black, + iconColor: palette?.themeDarker, + }, + + checkedHovered: { + background: palette?.neutralQuaternaryAlt, + contentColor: palette?.themePrimary, + iconColor: palette?.themePrimary, + }, + + disabled: { + background: semanticColors?.disabledBackground, + contentColor: palette?.neutralTertiary, + iconColor: 'inherit', + secondaryContentColor: palette?.neutralTertiary, + }, - _size_largest: { - '--button-height': 'var(--button-size-largest)', - '--button-minHeight': 'var(--button-size-largest)', + expanded: { + contentColor: palette?.themePrimary, + }, + + focused: { + contentColor: palette?.neutralPrimary, + iconColor: palette?.themeDarkAlt, + secondaryContentColor: palette?.neutralPrimary, + }, + + hovered: { + background: palette?.neutralLighter, + contentColor: palette?.themePrimary, + iconColor: palette?.themePrimary, + secondaryContentColor: palette?.neutralPrimary, + }, + + pressed: { + background: palette?.neutralLight, + contentColor: palette?.black, + iconColor: palette?.themeDarker, + secondaryContentColor: palette?.black, + }, + }, + ...ButtonSizeVariants, + }; }, }); diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.tsx index f033e7c24835d..bb23b67a326b8 100644 --- a/packages/react-button/src/components/CompoundButton/CompoundButton.tsx +++ b/packages/react-button/src/components/CompoundButton/CompoundButton.tsx @@ -1,17 +1,16 @@ import * as React from 'react'; import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useFocusRects } from '@uifabric/utilities'; -import { useButtonClasses } from '../Button/useButtonClasses'; import { CompoundButtonProps } from './CompoundButton.types'; import { useCompoundButton } from './useCompoundButton'; import { useCompoundButtonClasses } from './useCompoundButtonClasses'; + /** * Define a styled Button, using the `useCompoundButton` hook. */ export const CompoundButton = React.forwardRef((props, ref) => { const { render, state } = useCompoundButton(props, ref); - useButtonClasses(state); useCompoundButtonClasses(state); useFocusRects(state.ref); useInlineTokens(state, '--button'); diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.types.ts b/packages/react-button/src/components/CompoundButton/CompoundButton.types.ts index 0cb886d63be88..dc3c616d4dcda 100644 --- a/packages/react-button/src/components/CompoundButton/CompoundButton.types.ts +++ b/packages/react-button/src/components/CompoundButton/CompoundButton.types.ts @@ -1,7 +1,5 @@ -import * as React from 'react'; -import { SlotProps } from '@fluentui/react-compose'; import { ShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { ButtonProps, ButtonSlots } from '../Button/Button.types'; +import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types'; export interface CompoundButtonProps extends ButtonProps { /** @@ -17,13 +15,11 @@ export interface CompoundButtonProps extends ButtonProps { export interface CompoundButtonState extends CompoundButtonProps {} -export interface CompoundButtonSlots extends ButtonSlots { - secondaryContent?: React.ElementType; - contentContainer?: React.ElementType; -} +export type CompoundButtonTokens = ButtonTokens & { + secondaryContentColor: string; + secondaryContentFontSize: string; + secondaryContentFontWeight: string; + secondaryContentGap: string; +}; -export type CompoundButtonSlotProps = SlotProps< - CompoundButtonSlots, - CompoundButtonProps, - React.ButtonHTMLAttributes ->; +export type CompoundButtonVariants = ButtonVariants; diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonClasses.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonClasses.ts index 1d6b8d622032b..5b65f0bdaf6d4 100644 --- a/packages/react-button/src/components/CompoundButton/useCompoundButtonClasses.ts +++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonClasses.ts @@ -1,86 +1,120 @@ -import { makeClasses } from '@fluentui/react-theme-provider'; +import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider'; import { CompoundButtonState } from './CompoundButton.types'; +import { useButtonClasses } from '../Button/useButtonClasses'; const GlobalClassNames = { - root: 'ms-Button', - contentContainer: 'ms-Button-contentContainer', - secondaryContent: 'ms-Button-secondaryContent', + root: 'ms-CompoundButton', + contentContainer: 'ms-CompoundButton-contentContainer', + secondaryContent: 'ms-CompoundButton-secondaryContent', }; -export const useCompoundButtonClasses = makeClasses({ - root: [ - GlobalClassNames.root, - { - '--button-height': 'auto', +export const useClasses = makeVariantClasses({ + name: 'CompoundButton', + prefix: '--button', + styles: { + root: [ + GlobalClassNames.root, + { + alignItems: 'flex-start', + }, + ], - '--button-maxWidth': '280px', - '--button-minWidth': '72px', - '--button-paddingBottom': '16px', - '--button-paddingLeft': '12px', - '--button-paddingRight': '12px', - '--button-paddingTop': '16px', - '--button-iconSize': '28px', + contentContainer: [ + GlobalClassNames.contentContainer, + { + display: 'flex', + flexDirection: 'column', + textAlign: 'left', + }, + ], - alignItems: 'flex-start', + secondaryContent: [ + GlobalClassNames.secondaryContent, + { + color: 'var(--button-secondaryContentColor, var(--button-contentColor))', + fontSize: 'var(--button-secondaryContentFontSize)', + fontWeight: 'var(--button-secondaryContentFontWeight)', + lineHeight: '100%', + marginTop: 'var(--button-secondaryContentGap)', - '&:hover': { - '--button-secondaryContentColor': 'var(--button-hovered-secondaryContentColor)', - }, + [`.${GlobalClassNames.root}:hover &`]: { + color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))', + }, - '&:active': { - '--button-secondaryContentColor': 'var(--button-pressed-secondaryContentColor)', + [`.${GlobalClassNames.root}:active &`]: { + color: + 'var(--button-pressed-secondaryContentColor, ' + + 'var(--button-hovered-secondaryContentColor, ' + + 'var(--button-secondaryContentColor)))', + }, + + [`.${GlobalClassNames.root}[aria-disabled="true"] &`]: { + color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))', + }, }, - }, - ], - - contentContainer: [ - GlobalClassNames.contentContainer, - { - display: 'flex', - flexDirection: 'column', - textAlign: 'left', - }, - ], - - secondaryContent: [ - GlobalClassNames.secondaryContent, - { - color: 'var(--button-secondaryContentColor)', - fontSize: 'var(--button-secondaryContentFontSize)', - fontWeight: 'var(--button-secondaryContentFontWeight)', - lineHeight: '100%', - - '&:not(:first-child)': { - marginTop: 'var(--button-secondaryContentMarginTop)', + ], + }, + + variants: (theme: Theme) => { + const { palette, semanticColors } = theme; + + return { + root: { + height: 'auto', + maxWidth: '280px', + minWidth: '72px', + paddingBottom: '16px', + paddingLeft: '12px', + paddingRight: '12px', + paddingTop: '16px', + iconSize: '28px', + secondaryContentColor: palette.neutralSecondary, + secondaryContentGap: '4px', + secondaryContentFontWeight: 'normal', + + hovered: { + secondaryContentColor: palette.neutralDark, + }, + + pressed: { + secondaryContentColor: semanticColors.buttonTextPressed, + }, + + disabled: { + secondaryContentColor: 'var(--button-disabled-contentColor)', + }, }, - }, - ], - _iconOnly: { - '--button-minHeight': 'var(--button-size-regular)', - '--button-padding': 0, - '--button-width': 'var(--button-minHeight)', - }, + iconOnly: { + minHeight: 'var(--button-size-regular)', + width: 'var(--button-minHeight)', + minWidth: 0, + paddingBottom: 0, + paddingTop: 0, + paddingLeft: 0, + paddingRight: 0, + }, - _ghost: { - '--button-secondaryContentColor': 'var(--ghost-secondaryContentColor)', - '--button-focused-secondaryContentColor': 'var(--ghost-focused-secondaryContentColor)', - '--button-hovered-secondaryContentColor': 'var(--ghost-hovered-secondaryContentColor)', - '--button-pressed-secondaryContentColor': 'var(--ghost-pressed-secondaryContentColor)', - }, + primary: { + secondaryContentColor: 'var(--color-brand-secondaryContentColor)', - _primary: { - '--button-secondaryContentColor': 'var(--color-brand-secondaryContentColor)', - '--button-focused-secondaryContentColor': 'var(--color-brand-focused-secondaryContentColor)', - '--button-hovered-secondaryContentColor': 'var(--color-brand-hovered-secondaryContentColor)', - '--button-pressed-secondaryContentColor': 'var(--color-brand-pressed-secondaryContentColor)', - }, + focused: { + secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)', + }, - _disabled: { - '--button-secondaryContentColor': 'var(--button-disabled-secondaryContentColor)', - }, + hovered: { + secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)', + }, - _fluid: { - '--button-maxWidth': '100%', + pressed: { + secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)', + }, + }, + }; }, }); + +export const useCompoundButtonClasses = (state: CompoundButtonState) => { + useButtonClasses(state); + useClasses(state); +}; diff --git a/packages/react-button/src/components/MenuButton/MenuButton.tsx b/packages/react-button/src/components/MenuButton/MenuButton.tsx index ba9a9ba9d2db1..732d4df8c6d8c 100644 --- a/packages/react-button/src/components/MenuButton/MenuButton.tsx +++ b/packages/react-button/src/components/MenuButton/MenuButton.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { ChevronDownIcon } from '@fluentui/react-icons'; import { useInlineTokens } from '@fluentui/react-theme-provider'; -import { useFocusRects } from '@uifabric/utilities'; import { useMenuButton } from './useMenuButton'; import { MenuButtonProps } from './MenuButton.types'; import { useButtonClasses } from '../Button/index'; @@ -15,8 +14,6 @@ export const MenuButton = React.forwardRef((props, useButtonClasses(state); useMenuButtonClasses(state); - useFocusRects(state.ref); - // TODO remove any /** * Type 'MenuButtonState' has no properties in common with type '{ diff --git a/packages/react-button/src/components/MenuButton/MenuButton.types.ts b/packages/react-button/src/components/MenuButton/MenuButton.types.ts index d746d2f6f4cc5..6d5543002b17c 100644 --- a/packages/react-button/src/components/MenuButton/MenuButton.types.ts +++ b/packages/react-button/src/components/MenuButton/MenuButton.types.ts @@ -1,5 +1,5 @@ import { ShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { ButtonProps, ButtonState, ButtonTokenSet } from '../Button/Button.types'; +import { ButtonProps, ButtonState, ButtonTokens } from '../Button/Button.types'; import { ExpandedState } from './useExpanded'; export type MenuButtonProps = Omit & { @@ -37,4 +37,4 @@ export interface MenuButtonState extends MenuButtonProps, Omit .ms-Button-menuIcon + *': { - marginLeft: 0, +export const useMenuButtonClasses = makeVariantClasses({ + name: 'MenuButton', + prefix: '--button', + styles: { + root: [ + GlobalClassNames.root, + { + // This seems like a bad selector. + '& > .ms-Button-menuIcon + *': { + marginLeft: 0, + }, + + '& .ms-layer': { + position: 'absolute', + }, + + [`&:hover .${GlobalClassNames.menuIcon}`]: { + color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))', + }, + + [`&:active .${GlobalClassNames.menuIcon}`]: { + color: + 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))', + }, }, + ], - '& .ms-layer': { - position: 'absolute', - }, - - [`&:hover .${GlobalClassNames.menuIcon}`]: { - color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))', - }, + menuIcon: [ + GlobalClassNames.menuIcon, + { + color: 'var(--button-menuIconColor)', + fontSize: 'var(--button-menuIconSize)', - [`&:active .${GlobalClassNames.menuIcon}`]: { - color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))', + [`.${GlobalClassNames._disabled} &`]: { + color: 'var(--button-disabled-menuIconColor)', + }, }, - }, - ], + ], - menuIcon: [ - GlobalClassNames.menuIcon, - { - color: 'var(--button-menuIconColor)', - fontSize: 'var(--button-menuIconSize)', + _disabled: [GlobalClassNames._disabled], + }, - [`.${GlobalClassNames._disabled} &`]: { - color: 'var(--button-disabled-menuIconColor)', - }, - }, - ], - - _disabled: [GlobalClassNames._disabled], - - _ghost: [ - GlobalClassNames._ghost, - { - '--button-menuIconColor': 'var(--body-menuIconColor)', - }, - ], - - _expanded: [ - GlobalClassNames._expanded, - { - [`.${GlobalClassNames}&`]: { - '--button-contentColor': 'var(--ghost-expanded-contentColor)', - }, + variants: { + root: { + menuIconSize: '12px', + menuIconColor: 'var(--body-menuIconColor)', }, - ], + }, }); diff --git a/packages/react-button/src/components/SplitButton/SplitButton.tsx b/packages/react-button/src/components/SplitButton/SplitButton.tsx index 152d6b61d5d65..48cc8efb2495e 100644 --- a/packages/react-button/src/components/SplitButton/SplitButton.tsx +++ b/packages/react-button/src/components/SplitButton/SplitButton.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { ChevronDownIcon } from '@fluentui/react-icons'; import { useInlineTokens } from '@fluentui/react-theme-provider'; -import { useFocusRects } from '@uifabric/utilities'; import { SplitButtonProps } from './SplitButton.types'; import { useSplitButton } from './useSplitButton'; import { useSplitButtonClasses } from './useSplitButtonClasses'; @@ -15,7 +14,6 @@ export const SplitButton = React.forwardRef((prop }); useSplitButtonClasses(state); - useFocusRects(state.ref); // TODO remove any /** diff --git a/packages/react-button/src/components/SplitButton/useSplitButton.ts b/packages/react-button/src/components/SplitButton/useSplitButton.ts index a406cdf4d220c..637d6b9c7eaae 100644 --- a/packages/react-button/src/components/SplitButton/useSplitButton.ts +++ b/packages/react-button/src/components/SplitButton/useSplitButton.ts @@ -44,6 +44,8 @@ export const useSplitButton = ( style, fluid, size, + primary, + 'aria-disabled': disabledOrLoading, button: { as: 'span', diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonClasses.tsx b/packages/react-button/src/components/SplitButton/useSplitButtonClasses.tsx index 21aab6942202e..b4bc8c7d39ea0 100644 --- a/packages/react-button/src/components/SplitButton/useSplitButtonClasses.tsx +++ b/packages/react-button/src/components/SplitButton/useSplitButtonClasses.tsx @@ -1,61 +1,112 @@ -import { makeClasses } from '@fluentui/react-theme-provider'; +import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider'; +import { ButtonSizeVariants } from '../Button/index'; const GlobalClassNames = { + root: 'ms-SplitButton', button: 'ms-SplitButton-button', menuButton: 'ms-SplitButton-menuButton', }; const menuButtonWidth = '32px'; -export const useSplitButtonClasses = makeClasses({ - root: { - display: 'inline-flex', - justifyContent: 'stretch', - position: 'relative', +export const useSplitButtonClasses = makeVariantClasses({ + name: 'SplitButton', + prefix: '--button', - [`.${GlobalClassNames.menuButton}`]: { - '--button-width': menuButtonWidth, - }, - }, + styles: { + root: [ + GlobalClassNames.root, + { + display: 'inline-flex', + justifyContent: 'stretch', + position: 'relative', + + // Forward the menuIconSize to a variable which can be consumed by the child menu button. + '--button-splitMenuIconSize': 'var(--button-menuIconSize)', + }, + ], + + button: [ + GlobalClassNames.button, + { + '--button-borderRightWidth': 0, + '--button-borderTopRightRadius': 0, + '--button-borderBottomRightRadius': 0, + }, + ], + + menuButton: [ + GlobalClassNames.menuButton, + { + // Scope the override to a child component, increase specificity. + [`.${GlobalClassNames.root} &`]: { + width: menuButtonWidth, + minWidth: menuButtonWidth, + '--button-borderLeftWidth': 0, + '--button-borderTopLeftRadius': 0, + '--button-borderBottomLeftRadius': 0, + '--button-iconSize': 'var(--button-splitMenuIconSize)', + }, + }, + ], + + divider: { + width: 'var(--button-dividerThickness)', + backgroundColor: 'var(--button-dividerColor)', + position: 'absolute', + right: menuButtonWidth, + top: 'calc(100% - var(--button-dividerLength, 100% + 8px))', + bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))', - button: [ - GlobalClassNames.button, - { - '--button-borderRightWidth': 0, - '--button-borderTopRightRadius': 0, - '--button-borderBottomRightRadius': 0, + [`.${GlobalClassNames.root}[aria-disabled="true"] &`]: { + backgroundColor: 'var(--button-disabled-dividerColor)', + }, }, - ], - - menuButton: [ - GlobalClassNames.menuButton, - { - '--button-borderLeftWidth': 0, - '--button-borderTopLeftRadius': 0, - '--button-borderBottomLeftRadius': 0, - '--button-iconSize': 'var(--button-menuIconSize)', + + _fluid: { + width: '100%', + maxWidth: '100%', + + [`.${GlobalClassNames.button}`]: { + flexGrow: 1, + maxWidth: '100%', + }, + + [`.${GlobalClassNames.menuButton}`]: { + width: menuButtonWidth, + }, }, - ], - - divider: { - width: 'var(--button-dividerThickness)', - backgroundColor: 'var(--button-dividerColor)', - position: 'absolute', - right: menuButtonWidth, - top: 'calc(100% - var(--button-dividerLength, 100% + 8px))', - bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))', }, + variants: (theme: Theme) => { + const { palette, semanticColors } = theme; - _fluid: { - width: '100%', - maxWidth: '100%', + return { + root: { + size: { + smallest: '24px', + smaller: '24px', + small: '24px', + regular: '32px', + large: '40px', + larger: '48px', + largest: '64px', + }, + dividerThickness: '1px', + dividerColor: palette?.neutralTertiaryAlt, + disabled: { + dividerColor: semanticColors.disabledText, + }, + menuIconSize: '12px', + }, - [`.${GlobalClassNames.button}`]: { - flexGrow: 1, - }, + primary: { + dividerColor: palette.white, - [`.${GlobalClassNames.menuButton}`]: { - width: menuButtonWidth, - }, + disabled: { + dividerColor: semanticColors.disabledText, + }, + }, + ...ButtonSizeVariants, + }; }, }); diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.tsx index ce1f95110b91a..f6ebe85df1d97 100644 --- a/packages/react-button/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/react-button/src/components/ToggleButton/ToggleButton.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { ToggleButtonProps } from './ToggleButton.types'; import { useToggleButton } from './useToggleButton'; -import { useFocusRects } from '@uifabric/utilities'; import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useButtonClasses } from '../Button/useButtonClasses'; import { useToggleButtonClasses } from './useToggleButtonClasses'; @@ -14,7 +13,6 @@ export const ToggleButton = React.forwardRef((pr useButtonClasses(state); useToggleButtonClasses(state); - useFocusRects(state.ref); useInlineTokens(state, '--button'); return render(state); diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts b/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts index 53c3e4e84d3a6..66817627adae9 100644 --- a/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts +++ b/packages/react-button/src/components/ToggleButton/ToggleButton.types.ts @@ -1,6 +1,4 @@ -import * as React from 'react'; -import { SlotProps } from '@fluentui/react-compose'; -import { ButtonProps, ButtonSlots } from '../Button/Button.types'; +import { ButtonProps } from '../Button/Button.types'; export interface ToggleButtonProps extends ButtonProps { /** @@ -19,11 +17,3 @@ export interface ToggleButtonProps extends ButtonProps { } export interface ToggleButtonState extends ToggleButtonProps {} - -export interface ToggleButtonSlots extends ButtonSlots {} - -export type ToggleButtonSlotProps = SlotProps< - ToggleButtonSlots, - ToggleButtonProps, - React.ButtonHTMLAttributes ->; diff --git a/packages/react-button/src/components/ToggleButton/useToggleButtonClasses.tsx b/packages/react-button/src/components/ToggleButton/useToggleButtonClasses.tsx index 30a0e7fe75f2f..c92e06d8aa005 100644 --- a/packages/react-button/src/components/ToggleButton/useToggleButtonClasses.tsx +++ b/packages/react-button/src/components/ToggleButton/useToggleButtonClasses.tsx @@ -1,37 +1,57 @@ -import { makeClasses } from '@fluentui/react-theme-provider'; +import { makeVariantClasses } from '@fluentui/react-theme-provider'; +import { ToggleButtonState } from './ToggleButton.types'; -export const useToggleButtonClasses = makeClasses({ - // When checked is applied, apply the right tokens to the right css properties. - _checked: { - background: 'var(--button-checked-background)', - color: 'var(--button-checked-contentColor)', +export const useToggleButtonClasses = makeVariantClasses({ + name: 'ToggleButton', + prefix: '--button', - ':hover': { - background: 'var(--button-checkedHovered-background)', - color: 'var(--button-checkedHovered-contentColor)', - }, + styles: { + // When checked is applied, apply the right tokens to the right css properties. + _checked: { + background: 'var(--button-checked-background)', + color: 'var(--button-checked-contentColor)', + + ':hover': { + background: 'var(--button-checkedHovered-background)', + color: 'var(--button-checkedHovered-contentColor)', + }, - ':active': { - background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))', - color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))', + ':active': { + background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))', + color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))', + }, }, }, - _primary: { - '--button-checked-background': 'var(--color-brand-checked-background)', - '--button-checked-contentColor': 'var(--color-brand-checked-contentColor)', - '--button-checkedHovered-background': 'var(--color-brand-checkedHovered-background)', - '--button-checkedHovered-contentColor': 'var(--color-brand-checkedHovered-contentColor)', - '--button-checkedPressed-background': 'var(--color-brand-checkedPressed-background)', - '--button-checkedPressed-contentColor': 'var(--color-brand-checkedPressed-contentColor)', - }, + variants: { + primary: { + checked: { + background: 'var(--color-brand-checked-background)', + contentColor: 'var(--color-brand-checked-contentColor)', + }, + checkedHovered: { + background: 'var(--color-brand-checkedHovered-background)', + contentColor: 'var(--color-brand-checkedHovered-contentColor)', + }, + checkedPressed: { + background: 'var(--color-brand-checkedPressed-background)', + contentColor: 'var(--color-brand-checkedPressed-contentColor)', + }, + }, - _ghost: { - '--button-checked-background': 'var(--ghost-checked-background)', - '--button-checked-contentColor': 'var(--ghost-checked-contentColor)', - '--button-checkedHovered-background': 'var(--ghost-checkedHovered-background)', - '--button-checkedHovered-contentColor': 'var(--ghost-checkedHovered-contentColor)', - '--button-checkedPressed-background': 'var(--ghost-checkedPressed-background)', - '--button-checkedPressed-contentColor': 'var(--ghost-checkedPressed-contentColor)', + ghost: { + checked: { + background: 'var(--ghost-checked-background)', + contentColor: 'var(--ghost-checked-contentColor)', + }, + checkedHovered: { + background: 'var(--ghost-checkedHovered-background)', + contentColor: 'var(--ghost-checkedHovered-contentColor)', + }, + checkedPressed: { + background: 'var(--ghost-checkedPressed-background)', + contentColor: 'var(--ghost-checkedPressed-contentColor)', + }, + }, }, }); diff --git a/packages/react-examples/src/react-button/utils/Button.stories.scss b/packages/react-examples/src/react-button/Button.stories.scss similarity index 100% rename from packages/react-examples/src/react-button/utils/Button.stories.scss rename to packages/react-examples/src/react-button/Button.stories.scss diff --git a/packages/react-examples/src/react-button/Button/Button.stories.tsx b/packages/react-examples/src/react-button/Button/Button.stories.tsx index 449b0eb1d433c..4258a0575c9fd 100644 --- a/packages/react-examples/src/react-button/Button/Button.stories.tsx +++ b/packages/react-examples/src/react-button/Button/Button.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { Button, ButtonProps } from '@fluentui/react-button'; -import * as classes from '../utils/Button.stories.scss'; +import { Button, ButtonProps, ButtonTokens, ButtonVariants } from '@fluentui/react-button'; +import { PartialTheme, ThemeProvider } from '@fluentui/react-theme-provider'; +import * as classes from '../Button.stories.scss'; /** * Temporary Stack until there's one in its own package. @@ -17,15 +18,15 @@ const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => { // eslint-disable-next-line jsx-a11y/heading-has-content -- content passed via children const Text = (props: React.PropsWithChildren<{}>) =>

; -const ButtonVariants = (props: ButtonProps) => ( +const ButtonExamples = (props: ButtonProps) => ( - - - - - ); -}; - -export const ButtonCss = () => ( +export const Buttons = () => ( A button comes in default and `primary` flavors. - + A button can appear round using the `circular` prop. - + A button can fill the width of its container using the `fluid` prop. - - - - - - - - + A button can contain only an icon using the `iconOnly` prop. - + A button can be both `circular` and `iconOnly`. - + An icon button can format its Icon to appear before or after its content. - - + + A button can show a loading indicator using the `loading` prop. - + A button can be sized. - - - - - - + + + + + + ); -export const ButtonTokens = () => ( - - A button can be colored using inline tokens. - - - - - + + + + + +); - hovered: { - background: 'rgb(30, 215, 96) none repeat scroll 0% 0% / auto padding-box border-box', - contentColor: 'rgb(255, 255, 255)', - borderColor: 'rgb(255, 255, 255)', - }, +const theme: PartialTheme = { + components: { + Button: { + variants: { + github: githubTokens, + amazon: amazonTokens, + netflix: netflixTokens, + spotifyPrimary: spotifyPrimaryTokens, + spotifySecondary: spotifyTokens, + } as ButtonVariants, + }, + }, +}; - pressed: { - transform: 'none', - background: '#1aa34a', - contentColor: 'rgb(255, 255, 255)', - borderColor: 'rgb(255, 255, 255)', - }, - }} - > - Spotify: GET PREMIUM - - - - A tokenized button can be customized for any size or padding. - - - +export const ButtonsWithVariants = () => ( + + + A button can be styled using theme variants. + + + + + + + - + ); diff --git a/packages/react-examples/src/react-button/Button/Converged.stories.tsx b/packages/react-examples/src/react-button/Button/Converged.stories.tsx index 4c727e16f46b6..bb32e638d2585 100644 --- a/packages/react-examples/src/react-button/Button/Converged.stories.tsx +++ b/packages/react-examples/src/react-button/Button/Converged.stories.tsx @@ -5,40 +5,32 @@ import { ThemeProvider } from '@fluentui/react-theme-provider'; import { mergeThemes, PartialTheme } from '@fluentui/theme'; import { Stack, Text, ColorPicker, IColor } from 'office-ui-fabric-react'; -const paletteAccent = 'var(--palette-accent)'; -const paletteSoftest = 'var(--palette-softest)'; -const paletteStrongest = 'var(--palette-strongest)'; - -const getThemes = (accent: string) => { +const getThemes = (brand: string) => { const lightTheme = mergeThemes({ tokens: { - palette: { - accent: accent, - softest: 'white', - strongest: 'black', - }, - - body: { - background: 'white', - contentColor: 'black', - }, - - accent: { - background: paletteAccent, - contentColor: paletteSoftest, - - hovered: { - background: paletteAccent, - contentColor: paletteSoftest, + color: { + body: { + background: 'white', + contentColor: 'black', }, - pressed: { - background: paletteAccent, - contentColor: paletteSoftest, + + brand: { + background: brand, + contentColor: 'var(--color-body-contentColor)', + + hovered: { + background: brand, + contentColor: 'var(--color-body-contentColor)', + }, + pressed: { + background: brand, + contentColor: 'var(--color-body-contentColor)', + }, }, - }, - button: { - background: '#ddd', + button: { + background: '#ddd', + }, }, }, stylesheets: [], @@ -46,33 +38,26 @@ const getThemes = (accent: string) => { const darkTheme = mergeThemes(lightTheme, { tokens: { - palette: { - softest: 'black', - strongest: 'white', - }, - - body: { - background: '#333', - contentColor: paletteStrongest, - }, + color: { + body: { + background: '#333', + contentColor: 'white', + }, - button: { - background: 'transparent', - contentColor: paletteStrongest, + button: { + background: 'transparent', - hovered: { - background: '#555', - contentColor: paletteStrongest, + hovered: { + background: '#555', + }, }, - }, - accent: { - background: 'blue', - contentColor: paletteStrongest, + brand: { + background: brand, - hovered: { - background: '#555', - contentColor: paletteStrongest, + hovered: { + background: '#555', + }, }, }, }, @@ -103,7 +88,7 @@ export const ThemeExample = () => { return ( - Accent color + brand color diff --git a/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx b/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx index cc705eb14a64b..a49e51d4e2c02 100644 --- a/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx +++ b/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { CompoundButton, CompoundButtonProps } from '@fluentui/react-button'; -import * as classes from '../utils/Button.stories.scss'; +import * as classes from '../Button.stories.scss'; /** * Temporary Stack until there's one in its own package. @@ -17,82 +17,63 @@ const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => { // eslint-disable-next-line jsx-a11y/heading-has-content -- content passed via children const Text = (props: React.PropsWithChildren<{}>) =>

; -const CompoundButtonVariants = (props: CompoundButtonProps) => ( +const CompoundButtonExamples = (props: CompoundButtonProps) => ( Hello, world - + Hello, world - + Hello, world - + Hello, world - + Hello, world - + Hello, world ); -export const CompoundButtonCss = () => ( +export const CompoundButtons = () => ( A CompoundButton comes in default and `primary` flavors. - + A CompoundButton can appear round using the `circular` prop. - + A CompoundButton can fill the width of its container using the `fluid` prop. - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - + A CompoundButton can contain only an icon using the `iconOnly` prop. - + A CompoundButton can be both `circular` and `iconOnly`. - + An icon CompoundButton can format its Icon to appear before or after its content. - - + + A CompoundButton can show a loading indicator using the `loading` prop. - + A CompoundButton can be sized. - - - - - - + + + + + + ); diff --git a/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx b/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx index 2ad8c2d884e5a..db6b7fc14f3ff 100644 --- a/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx +++ b/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { MenuButton, MenuButtonProps } from '@fluentui/react-button'; import { ContextualMenu, IContextualMenuProps, Stack, Text } from 'office-ui-fabric-react'; -import * as classes from '../utils/Button.stories.scss'; +import * as classes from '../Button.stories.scss'; const menuProps = { items: [ @@ -20,15 +20,15 @@ const Menu = (defaultSlotType: string, props: IContextualMenuProps) => { return ; }; -const MenuButtonVariants = (props: MenuButtonProps) => ( +const MenuButtonExamples = (props: MenuButtonProps) => (
Hello, world - + Hello, world - + Hello, world @@ -43,53 +43,36 @@ const MenuButtonVariants = (props: MenuButtonProps) => (
); -export const MenuButtonCss = () => ( +export const MenuButtons = () => ( A button comes in default and `primary` flavors. - + A button can appear round using the `circular` prop. - + A button can fill the width of its container using the `fluid` prop.
- - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - +
A button can contain only an icon using the `iconOnly` prop. - + A button can be both `circular` and `iconOnly`. - + A button can show a loading indicator using the `loading` prop. - + A button can be sized.
- - - - - - + + + + + +
); diff --git a/packages/react-examples/src/react-button/SplitButton/SplitButton.stories.tsx b/packages/react-examples/src/react-button/SplitButton/SplitButton.stories.tsx index fb70346ea0169..fc24b3dbeebda 100644 --- a/packages/react-examples/src/react-button/SplitButton/SplitButton.stories.tsx +++ b/packages/react-examples/src/react-button/SplitButton/SplitButton.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { SplitButton, SplitButtonProps } from '@fluentui/react-button'; import { Stack, Text } from 'office-ui-fabric-react'; -import * as classes from '../utils/Button.stories.scss'; +import * as classes from '../Button.stories.scss'; const menuProps = { items: [ @@ -16,15 +16,15 @@ const menuProps = { ], }; -const SplitButtonVariants = (props: SplitButtonProps) => ( +const SplitButtonExamples = (props: SplitButtonProps) => (
Hello, world - + Hello, world - + Hello, world @@ -39,53 +39,34 @@ const SplitButtonVariants = (props: SplitButtonProps) => (
); -export const SplitButtonCss = () => ( +export const SplitButtons = () => ( A split button comes in default and `primary` variant. - + A split button can appear round using the `circular` prop. - + A split button can fill the width of its container using the `fluid` prop. -
- - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - -
+ A split button can contain only an icon using the `iconOnly` prop. - + A split button can be both `circular` and `iconOnly`. - + A split button can show a loading indicator using the `loading` prop. - + A split button can be sized.
- - - - - - + + + + + +
); diff --git a/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx b/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx index eeded2dc6954b..2e834849cabde 100644 --- a/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx +++ b/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { ToggleButton, ToggleButtonProps } from '@fluentui/react-button'; import { Stack, Text } from 'office-ui-fabric-react'; -import * as classes from '../utils/Button.stories.scss'; +import * as classes from '../Button.stories.scss'; -const ToggleButtonVariants = (props: ToggleButtonProps) => ( +const ToggleButtonExamples = (props: ToggleButtonProps) => (
Hello, world - + Hello, world - + Hello, world @@ -26,59 +26,42 @@ const ToggleButtonVariants = (props: ToggleButtonProps) => (
); -export const ToggleButtonCss = () => ( +export const ToggleButtons = () => ( A button comes in default and `primary` flavors. - + A button can appear round using the `circular` prop. - + A button can fill the width of its container using the `fluid` prop.
- - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - - - Hello, world - +
A button can contain only an icon using the `iconOnly` prop. - + A button can be both `circular` and `iconOnly`. - + An icon button can format its Icon to appear before or after its content.
- - + +
A button can show a loading indicator using the `loading` prop. - + A button can be sized.
- - - - - - + + + + + +
); diff --git a/packages/react-theme-provider/etc/react-theme-provider.api.md b/packages/react-theme-provider/etc/react-theme-provider.api.md index d2ea9c664dfab..a6459b008ea87 100644 --- a/packages/react-theme-provider/etc/react-theme-provider.api.md +++ b/packages/react-theme-provider/etc/react-theme-provider.api.md @@ -6,6 +6,7 @@ import { ColorTokenSet } from '@fluentui/theme'; import { ComponentProps } from '@fluentui/react-compose/lib/next/index'; +import { ICustomizerContext } from '@uifabric/utilities'; import { IFontFace } from '@uifabric/merge-styles'; import { IKeyframes } from '@uifabric/merge-styles'; import { IRawFontStyle } from '@uifabric/merge-styles'; @@ -16,6 +17,7 @@ import { PartialTheme } from '@fluentui/theme'; import * as React from 'react'; import { Theme } from '@fluentui/theme'; import { TokenSetType } from '@fluentui/theme'; +import { Variants } from '@fluentui/theme'; // @public export const createDefaultTheme: () => Theme; @@ -50,6 +52,17 @@ export function makeStyles(options: MakeVariantClassesOptions) => (state: TState, theme?: Theme | undefined, renderer?: import(".").StyleRenderer | undefined) => void; + +// @public +export type MakeVariantClassesOptions = { + name?: string; + prefix?: string; + styles?: Record | ((theme: Theme) => Record); + variants?: Variants | ((theme: Theme) => Variants); +}; + // @public (undocumented) export const MergeStylesProvider: ({ children }: { children?: React.ReactNode; @@ -90,7 +103,7 @@ export const StyleRendererContext: React.Context; // @public (undocumented) export type StyleRendererOptions = { - rtl: boolean; + rtl?: boolean; targetWindow: Window | undefined; }; @@ -116,10 +129,11 @@ export interface ThemeProviderProps extends ComponentProps, React.HTMLAttributes // @public export type ThemeProviderState = Omit & { theme: Theme; + customizerContext: ICustomizerContext; }; // @public (undocumented) -export const tokensToStyleObject: (tokens?: TokenSetType | undefined, prefix?: string | undefined, style?: React.CSSProperties | undefined) => React.CSSProperties; +export const tokensToStyleObject: (tokens?: React.CSSProperties | TokenSetType | undefined, prefix?: string | undefined, style?: React.CSSProperties | undefined) => React.CSSProperties; // @public export const useInlineTokens: (draftState: { @@ -145,6 +159,9 @@ export function useThemeProviderClasses(state: ThemeProviderState): void; // @public (undocumented) export const useThemeProviderState: (draftState: ThemeProviderState) => void; +// @public (undocumented) +export const withThemeProvider: (Component: React.FunctionComponent) => React.ForwardRefExoticComponent & React.RefAttributes>; + // (No @packageDocumentation comment for this package) diff --git a/packages/react-theme-provider/src/ThemeProvider.test.tsx b/packages/react-theme-provider/src/ThemeProvider.test.tsx index 964e4127303be..c853ea1e3f15a 100644 --- a/packages/react-theme-provider/src/ThemeProvider.test.tsx +++ b/packages/react-theme-provider/src/ThemeProvider.test.tsx @@ -7,6 +7,7 @@ import { mount } from 'enzyme'; import { mergeThemes } from '@fluentui/theme'; import { createDefaultTheme } from './createDefaultTheme'; import { Stylesheet } from '@uifabric/merge-styles'; +import { getTokens } from './getTokens'; const lightTheme = mergeThemes({ stylesheets: [], @@ -90,7 +91,10 @@ describe('ThemeProvider', () => { , ); - const expectedTheme = mergeThemes(createDefaultTheme(), lightTheme); + const expectedTheme: Theme = mergeThemes(createDefaultTheme(), lightTheme); + expectedTheme.tokens = getTokens(expectedTheme); + expectedTheme.id = '0-0'; + expect(resolvedTheme).toEqual(expectedTheme); }); diff --git a/packages/react-theme-provider/src/ThemeProvider.tsx b/packages/react-theme-provider/src/ThemeProvider.tsx index a6a1abdb3b951..d5378898ce446 100644 --- a/packages/react-theme-provider/src/ThemeProvider.tsx +++ b/packages/react-theme-provider/src/ThemeProvider.tsx @@ -24,6 +24,7 @@ export const ThemeProvider = React.forwardRef & { theme: Theme; + + customizerContext: ICustomizerContext; }; diff --git a/packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap b/packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap index 23efa4836d573..d28e1c88e081f 100644 --- a/packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap +++ b/packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap @@ -10,146 +10,6 @@ exports[`ThemeProvider can apply body theme to body 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: black; --color-body-contentColor: white; --color-brand-background: #0078d4; @@ -182,42 +42,6 @@ exports[`ThemeProvider can apply body theme to body 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); @@ -241,146 +65,6 @@ exports[`ThemeProvider can apply body theme to body 2`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: black; --color-body-contentColor: white; --color-brand-background: #0078d4; @@ -413,42 +97,6 @@ exports[`ThemeProvider can apply body theme to body 2`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } > app @@ -465,146 +113,6 @@ exports[`ThemeProvider can apply body theme to none 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: black; --color-body-contentColor: white; --color-brand-background: #0078d4; @@ -637,42 +145,6 @@ exports[`ThemeProvider can apply body theme to none 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } > app @@ -689,146 +161,6 @@ exports[`ThemeProvider can handle a partial theme 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: #ffffff; --color-body-contentColor: #323130; --color-brand-background: #0078d4; @@ -862,42 +194,6 @@ exports[`ThemeProvider can handle a partial theme 1`] = ` --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; --foo-background: red; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); @@ -923,146 +219,6 @@ exports[`ThemeProvider renders a div 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: #ffffff; --color-body-contentColor: #323130; --color-brand-background: #0078d4; @@ -1095,42 +251,6 @@ exports[`ThemeProvider renders a div 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); @@ -1156,146 +276,6 @@ exports[`ThemeProvider renders a div with styling 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: white; --color-body-contentColor: black; --color-brand-background: #0078d4; @@ -1328,42 +308,6 @@ exports[`ThemeProvider renders a div with styling 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); @@ -1389,146 +333,6 @@ exports[`ThemeProvider renders nested themes 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: white; --color-body-contentColor: black; --color-brand-background: #0078d4; @@ -1561,42 +365,6 @@ exports[`ThemeProvider renders nested themes 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); @@ -1620,146 +388,6 @@ exports[`ThemeProvider renders nested themes 1`] = ` --body-fontWeight: 400; --body-mozOsxFontSmoothing: grayscale; --body-webkitFontSmoothing: antialiased; - --button-background: #ffffff; - --button-borderColor: #8a8886; - --button-borderRadius: 2px; - --button-borderWidth: 1px; - --button-checked-background: #edebe9; - --button-checked-contentColor: #201f1e; - --button-checkedHovered-background: #edebe9; - --button-checkedHovered-contentColor: #000000; - --button-contentColor: #323130; - --button-contentGap: 8px; - --button-disabled-background: #f3f2f1; - --button-disabled-borderColor: #f3f2f1; - --button-disabled-contentColor: #a19f9d; - --button-disabled-iconColor: var(--button-disabled-contentColor); - --button-disabled-secondaryContentColor: #a19f9d; - --button-dividerColor: #c8c6c4; - --button-dividerThickness: var(--button-borderWidth); - --button-focusColor: #000000; - --button-focusInnerColor: #ffffff; - --button-focusWidth: 2px; - --button-focused-background: var(--button-background); - --button-focused-borderColor: var(--button-borderColor); - --button-focused-contentColor: var(--button-contentColor); - --button-focused-iconColor: var(--button-iconColor); - --button-focused-menuIconColor: var(--button-menuIconColor); - --button-focused-secondaryContentColor: var(--button-focused-contentColor); - --button-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - --button-fontSize: 14px; - --button-fontWeight: 600; - --button-height: var(--button-size-regular); - --button-hovered-background: #f3f2f1; - --button-hovered-borderColor: #8a8886; - --button-hovered-contentColor: #201f1e; - --button-hovered-iconColor: var(--button-iconColor); - --button-hovered-menuIconColor: var(--button-menuIconColor); - --button-hovered-secondaryContentColor: #201f1e; - --button-iconColor: inherit; - --button-iconSize: 16px; - --button-innerFocusWidth: 2px; - --button-menuIconColor: inherit; - --button-menuIconSize: 12px; - --button-minHeight: var(--button-size-regular); - --button-paddingBottom: 0; - --button-paddingLeft: 20px; - --button-paddingRight: 20px; - --button-paddingTop: 0; - --button-pressed-background: #edebe9; - --button-pressed-borderColor: #8a8886; - --button-pressed-contentColor: #201f1e; - --button-pressed-iconColor: var(--button-iconColor); - --button-pressed-menuIconColor: var(--button-menuIconColor); - --button-pressed-secondaryContentColor: #201f1e; - --button-secondaryContentColor: #605e5c; - --button-secondaryContentFontSize: 12px; - --button-secondaryContentFontWeight: normal; - --button-secondaryContentMarginTop: 5px; - --button-size-large: 40px; - --button-size-larger: 48px; - --button-size-largest: 64px; - --button-size-regular: 32px; - --button-size-small: 24px; - --button-size-smaller: 24px; - --button-size-smallest: 24px; - --card-backgroundColor: #ffffff; - --card-borderColor: transparent; - --card-borderRadius: var(--card-size-medium-borderRadius); - --card-borderWidth: 1px; - --card-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-backgroundColor: #ffffff; - --card-clickable-borderColor: transparent; - --card-clickable-borderWidth: 1px; - --card-clickable-boxShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1); - --card-clickable-hovered-backgroundColor: #fafafa; - --card-clickable-hovered-borderColor: var(--card-clickable-borderColor); - --card-clickable-hovered-borderWidth: var(--card-clickable-borderWidth); - --card-clickable-hovered-boxShadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1); - --card-clickable-pressed-backgroundColor: #f5f5f5; - --card-clickable-pressed-borderColor: var(--card-clickable-borderColor); - --card-clickable-pressed-borderWidth: 2px; - --card-clickable-pressed-boxShadow: var(--card-clickable-boxShadow); - --card-compact-padding: 0; - --card-disabled-backgroundColor: #f0f0f0; - --card-disabled-borderColor: var(--card-borderColor); - --card-disabled-borderWidth: var(--card-borderWidth); - --card-disabled-boxShadow: 0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1); - --card-fluid-height: 100%; - --card-fluid-width: 100%; - --card-height: var(--card-size-medium-height); - --card-hovered-backgroundColor: var(--card-backgroundColor); - --card-hovered-borderColor: var(--card-borderColor); - --card-hovered-borderWidth: var(--card-borderWidth); - --card-hovered-boxShadow: var(--card-boxShadow); - --card-margin: var(--card-size-medium-margin); - --card-minHeight: 32px; - --card-minWidth: 100px; - --card-padding: var(--card-size-medium-padding); - --card-pressed-backgroundColor: var(--card-backgroundColor); - --card-pressed-borderColor: var(--card-borderColor); - --card-pressed-borderWidth: var(--card-borderWidth); - --card-pressed-boxShadow: var(--card-boxShadow); - --card-selected-backgroundColor: #fafafa; - --card-selected-borderColor: var(--card-borderColor); - --card-selected-borderWidth: var(--card-borderWidth); - --card-selected-boxShadow: var(--card-boxShadow); - --card-size-large-borderRadius: 6px; - --card-size-large-height: auto; - --card-size-large-margin: 0; - --card-size-large-padding: 16px; - --card-size-large-width: auto; - --card-size-larger-borderRadius: 6px; - --card-size-larger-height: auto; - --card-size-larger-margin: 0; - --card-size-larger-padding: 16px; - --card-size-larger-width: auto; - --card-size-largest-borderRadius: 6px; - --card-size-largest-height: auto; - --card-size-largest-margin: 0; - --card-size-largest-padding: 16px; - --card-size-largest-width: auto; - --card-size-medium-borderRadius: 4px; - --card-size-medium-height: auto; - --card-size-medium-margin: 0; - --card-size-medium-padding: 16px; - --card-size-medium-width: auto; - --card-size-small-borderRadius: 4px; - --card-size-small-height: auto; - --card-size-small-margin: 0; - --card-size-small-padding: 8px; - --card-size-small-width: auto; - --card-size-smaller-borderRadius: 4px; - --card-size-smaller-height: auto; - --card-size-smaller-margin: 0; - --card-size-smaller-padding: 8px; - --card-size-smaller-width: auto; - --card-size-smallest-borderRadius: 4px; - --card-size-smallest-height: auto; - --card-size-smallest-margin: 0; - --card-size-smallest-padding: 8px; - --card-size-smallest-width: auto; - --card-width: var(--card-size-medium-width); --color-body-background: black; --color-body-contentColor: white; --color-brand-background: #0078d4; @@ -1792,42 +420,6 @@ exports[`ThemeProvider renders nested themes 1`] = ` --color-brand-pressed-iconColor: var(--color-brand-iconColor); --color-brand-pressed-secondaryContentColor: #ffffff; --color-brand-secondaryContentColor: #ffffff; - --ghost-background: transparent; - --ghost-borderColor: transparent; - --ghost-checked-background: #edebe9; - --ghost-checked-borderColor: var(--ghost-borderColor); - --ghost-checked-contentColor: #000000; - --ghost-checked-iconColor: #004578; - --ghost-checkedHovered-background: #e1dfdd; - --ghost-checkedHovered-borderColor: var(--ghost-borderColor); - --ghost-checkedHovered-contentColor: #0078d4; - --ghost-checkedHovered-iconColor: #0078d4; - --ghost-contentColor: #323130; - --ghost-disabled-background: #f3f2f1; - --ghost-disabled-borderColor: var(--ghost-borderColor); - --ghost-disabled-contentColor: #a19f9d; - --ghost-disabled-iconColor: inherit; - --ghost-disabled-secondaryContentColor: #a19f9d; - --ghost-expanded-contentColor: #0078d4; - --ghost-focused-background: var(--ghost-background); - --ghost-focused-borderColor: var(--ghost-borderColor); - --ghost-focused-contentColor: #323130; - --ghost-focused-iconColor: #106ebe; - --ghost-focused-secondaryContentColor: #323130; - --ghost-fontWeight: normal; - --ghost-hovered-background: #f3f2f1; - --ghost-hovered-borderColor: var(--ghost-borderColor); - --ghost-hovered-contentColor: #0078d4; - --ghost-hovered-iconColor: #0078d4; - --ghost-hovered-secondaryContentColor: #0078d4; - --ghost-iconColor: #106ebe; - --ghost-menuIconColor: #605e5c; - --ghost-pressed-background: #edebe9; - --ghost-pressed-borderColor: var(--ghost-borderColor); - --ghost-pressed-contentColor: #000000; - --ghost-pressed-iconColor: #004578; - --ghost-pressed-secondaryContentColor: #000000; - --ghost-secondaryContentColor: #323130; } { -moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing); diff --git a/packages/react-theme-provider/src/getTokens.ts b/packages/react-theme-provider/src/getTokens.ts index 2a565be40bde4..3ba3bcf3aee36 100644 --- a/packages/react-theme-provider/src/getTokens.ts +++ b/packages/react-theme-provider/src/getTokens.ts @@ -5,8 +5,8 @@ import { merge } from '@uifabric/utilities'; * Get tokens from theme object. */ export function getTokens(theme: Theme): Tokens { - const { tokens } = theme; - const { fonts, effects, palette, semanticColors } = theme; + const { tokens, fonts } = theme; + const { palette, semanticColors } = theme; const preparedTokens: Tokens = merge( { @@ -76,286 +76,8 @@ export function getTokens(theme: Theme): Tokens { mozOsxFontSmoothing: fonts.medium.MozOsxFontSmoothing, webkitFontSmoothing: fonts.medium.WebkitFontSmoothing, }, - - // TODO: This will be moved out as a button variant. - ghost: { - contentColor: palette.neutralPrimary, - iconColor: palette.themeDarkAlt, - menuIconColor: palette.neutralSecondary, - secondaryContentColor: palette.neutralPrimary, - fontWeight: 'normal', - background: 'transparent', - borderColor: 'transparent', - - checked: { - background: palette.neutralLight, - contentColor: palette.black, - iconColor: palette.themeDarker, - borderColor: 'var(--ghost-borderColor)', - }, - - checkedHovered: { - background: palette.neutralQuaternaryAlt, - contentColor: palette.themePrimary, - iconColor: palette.themePrimary, - borderColor: 'var(--ghost-borderColor)', - }, - - disabled: { - contentColor: palette.neutralTertiary, - iconColor: 'inherit', - background: semanticColors.disabledBackground, - borderColor: 'var(--ghost-borderColor)', - secondaryContentColor: palette.neutralTertiary, - }, - - expanded: { - contentColor: palette.themePrimary, - }, - - focused: { - contentColor: palette.neutralPrimary, - iconColor: palette.themeDarkAlt, - secondaryContentColor: palette.neutralPrimary, - background: 'var(--ghost-background)', - borderColor: 'var(--ghost-borderColor)', - }, - - hovered: { - background: palette.neutralLighter, - contentColor: palette.themePrimary, - iconColor: palette.themePrimary, - secondaryContentColor: palette.themePrimary, - borderColor: 'var(--ghost-borderColor)', - }, - - pressed: { - background: palette.neutralLight, - contentColor: palette.black, - iconColor: palette.themeDarker, - secondaryContentColor: palette.black, - borderColor: 'var(--ghost-borderColor)', - }, - }, - - // TODO: This will be moved out as a button variant. - button: { - fontWeight: '600', - fontSize: fonts.medium.fontSize, - fontFamily: fonts.medium.fontFamily, - iconSize: fonts.mediumPlus.fontSize, - borderRadius: effects.roundedCorner2, - focusColor: palette.black, - focusInnerColor: palette.white, - - background: semanticColors.buttonBackground, - borderColor: semanticColors.buttonBorder, - contentColor: semanticColors.buttonText, - dividerColor: palette.neutralTertiaryAlt, - - secondaryContentColor: palette.neutralSecondary, - secondaryContentFontSize: fonts.small.fontSize, - - paddingLeft: '20px', - paddingRight: '20px', - paddingTop: '0', - paddingBottom: '0', - height: 'var(--button-size-regular)', - minHeight: 'var(--button-size-regular)', - contentGap: '8px', - borderWidth: '1px', - focusWidth: '2px', - innerFocusWidth: '2px', - iconColor: 'inherit', - menuIconColor: 'inherit', - menuIconSize: '12px', - dividerThickness: 'var(--button-borderWidth)', - secondaryContentFontWeight: 'normal', - secondaryContentMarginTop: '5px', - - size: { - // smallest size supported by default theme is 24px. - smallest: '24px', - smaller: '24px', - small: '24px', - regular: '32px', - large: '40px', - larger: '48px', - largest: '64px', - }, - - hovered: { - background: semanticColors.buttonBackgroundHovered, - borderColor: semanticColors.buttonBorder, - contentColor: semanticColors.buttonTextHovered, - secondaryContentColor: palette.neutralDark, - iconColor: 'var(--button-iconColor)', - menuIconColor: 'var(--button-menuIconColor)', - }, - - pressed: { - background: semanticColors.buttonBackgroundPressed, - borderColor: semanticColors.buttonBorder, - contentColor: semanticColors.buttonTextPressed, - secondaryContentColor: semanticColors.buttonTextPressed, - iconColor: 'var(--button-iconColor)', - menuIconColor: 'var(--button-menuIconColor)', - }, - - focused: { - background: 'var(--button-background)', - borderColor: 'var(--button-borderColor)', - contentColor: 'var(--button-contentColor)', - iconColor: 'var(--button-iconColor)', - menuIconColor: 'var(--button-menuIconColor)', - secondaryContentColor: 'var(--button-focused-contentColor)', - }, - - checked: { - background: semanticColors.buttonBackgroundPressed, - contentColor: semanticColors.buttonTextChecked, - }, - - checkedHovered: { - background: semanticColors.buttonBackgroundPressed, - contentColor: semanticColors.buttonTextCheckedHovered, - }, - - disabled: { - background: semanticColors.buttonBackgroundDisabled, - borderColor: semanticColors.buttonBorderDisabled, - contentColor: semanticColors.buttonTextDisabled, - secondaryContentColor: semanticColors.buttonTextDisabled, - iconColor: 'var(--button-disabled-contentColor)', - }, - }, - - // TODO: This will be moved out as a card variant. - card: { - size: { - smallest: { - borderRadius: '4px', - height: 'auto', - margin: 0, - padding: '8px', - width: 'auto', - }, - smaller: { - borderRadius: '4px', - height: 'auto', - margin: 0, - padding: '8px', - width: 'auto', - }, - small: { - borderRadius: '4px', - height: 'auto', - margin: 0, - padding: '8px', - width: 'auto', - }, - medium: { - borderRadius: '4px', - height: 'auto', - margin: 0, - padding: '16px', - width: 'auto', - }, - large: { - borderRadius: '6px', - height: 'auto', - margin: 0, - padding: '16px', - width: 'auto', - }, - larger: { - borderRadius: '6px', - height: 'auto', - margin: 0, - padding: '16px', - width: 'auto', - }, - largest: { - borderRadius: '6px', - height: 'auto', - margin: 0, - padding: '16px', - width: 'auto', - }, - }, - - backgroundColor: '#ffffff', - borderColor: 'transparent', - borderWidth: '1px', - boxShadow: '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1)', - minHeight: '32px', - minWidth: '100px', - - borderRadius: 'var(--card-size-medium-borderRadius)', - height: 'var(--card-size-medium-height)', - margin: 'var(--card-size-medium-margin)', - padding: 'var(--card-size-medium-padding)', - width: 'var(--card-size-medium-width)', - - hovered: { - backgroundColor: 'var(--card-backgroundColor)', - borderColor: 'var(--card-borderColor)', - borderWidth: 'var(--card-borderWidth)', - boxShadow: 'var(--card-boxShadow)', - }, - - pressed: { - backgroundColor: 'var(--card-backgroundColor)', - borderColor: 'var(--card-borderColor)', - borderWidth: 'var(--card-borderWidth)', - boxShadow: 'var(--card-boxShadow)', - }, - - selected: { - backgroundColor: '#fafafa', - borderColor: 'var(--card-borderColor)', - borderWidth: 'var(--card-borderWidth)', - boxShadow: 'var(--card-boxShadow)', - }, - - disabled: { - backgroundColor: '#f0f0f0', - borderColor: 'var(--card-borderColor)', - borderWidth: 'var(--card-borderWidth)', - boxShadow: '0 0.8px 1.8px 0 rgba(0, 0, 0, 0.1)', - }, - - clickable: { - backgroundColor: '#ffffff', - borderColor: 'transparent', - borderWidth: '1px', - boxShadow: '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.1)', - - hovered: { - backgroundColor: '#fafafa', - borderColor: 'var(--card-clickable-borderColor)', - borderWidth: 'var(--card-clickable-borderWidth)', - boxShadow: '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.1)', - }, - - pressed: { - backgroundColor: '#f5f5f5', - borderColor: 'var(--card-clickable-borderColor)', - borderWidth: '2px', - boxShadow: 'var(--card-clickable-boxShadow)', - }, - }, - - compact: { - padding: 0, - }, - - fluid: { - height: '100%', - width: '100%', - }, - }, }, + tokens, ); diff --git a/packages/react-theme-provider/src/index.ts b/packages/react-theme-provider/src/index.ts index 518f6f89f75d9..94cc33f400da6 100644 --- a/packages/react-theme-provider/src/index.ts +++ b/packages/react-theme-provider/src/index.ts @@ -5,6 +5,7 @@ export * from './ThemeProvider.types'; export * from './useThemeProviderClasses'; export * from './useThemeProvider'; export * from './useThemeProviderState'; +export * from './withThemeProvider'; export { useTheme } from './useTheme'; export { ThemeContext } from './ThemeContext'; @@ -14,6 +15,7 @@ export * from './tokensToStyleObject'; export * from './useInlineTokens'; export { createDefaultTheme } from './createDefaultTheme'; export * from './themes/index'; +export * from './makeVariantClasses'; export * from './makeStyles'; export * from './makeClasses'; export { IStyle, IRawStyle, IRawFontStyle, IStyleFunctionOrObject } from '@uifabric/merge-styles'; diff --git a/packages/react-theme-provider/src/makeClasses.ts b/packages/react-theme-provider/src/makeClasses.ts index 283f92ffab28a..07c082d90e63d 100644 --- a/packages/react-theme-provider/src/makeClasses.ts +++ b/packages/react-theme-provider/src/makeClasses.ts @@ -60,15 +60,20 @@ export const makeClasses = ( break; case 2: + const modifierName = parts[1]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any - if ((state as any)[parts[1]]) { + if ((state as any)[modifierName] || (state as any).variant === modifierName) { _setClass(state, value); } break; case 3: + const enumName = parts[1]; + const enumValue = parts[2]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any - if ((state as any)[parts[1]] === parts[2]) { + if ((state as any)[enumName] === enumValue) { _setClass(state, value); } break; diff --git a/packages/react-theme-provider/src/makeStyles.ts b/packages/react-theme-provider/src/makeStyles.ts index 3a888bcf810d8..44e3600672065 100644 --- a/packages/react-theme-provider/src/makeStyles.ts +++ b/packages/react-theme-provider/src/makeStyles.ts @@ -52,10 +52,11 @@ export function makeStyles( return (theme?: Theme, renderer?: StyleRenderer) => { const win = useWindow(); + const contextualTheme = useTheme(); + const contextualRenderer = useStyleRenderer(); - // Expected: theme and renderer are either always provided or never. - theme = theme || useTheme() || {}; - renderer = (renderer || useStyleRenderer()) as StyleRenderer; + theme = theme || contextualTheme || {}; + renderer = (renderer || contextualRenderer) as StyleRenderer; const id = renderer.getId(); const isStyleFunction = typeof styleOrFunction === 'function'; diff --git a/packages/react-theme-provider/src/makeVariantClasses.test.tsx b/packages/react-theme-provider/src/makeVariantClasses.test.tsx new file mode 100644 index 0000000000000..c777767e79970 --- /dev/null +++ b/packages/react-theme-provider/src/makeVariantClasses.test.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import { makeVariantClasses } from './makeVariantClasses'; +import { Stylesheet, InjectionMode } from '@uifabric/merge-styles'; +import { ReactWrapper } from 'enzyme'; +import { MergeStylesProvider } from './styleRenderers/mergeStylesRenderer'; +import { ThemeContext } from './ThemeContext'; +import { safeMount } from '@uifabric/test-utilities'; +import { Theme } from './types'; + +describe('makeVariantClasses', () => { + const _stylesheet: Stylesheet = Stylesheet.getInstance(); + + _stylesheet.setConfig({ injectionMode: InjectionMode.none }); + + beforeEach(() => { + _stylesheet.reset(); + }); + + const useClasses = makeVariantClasses({ + name: 'Foo', + prefix: '--foo', + variants: { + root: { + background: 'red', + }, + primary: { + background: 'green', + }, + }, + }); + + const Foo = (props: { className?: string; primary?: boolean }) => { + const state = { ...props }; + + useClasses(state); + + return