npm - @fluentui/react-button - Versions diffs - 0.20.2 → 0.20.5 - Mend

@fluentui/react-button 0.20.2 → 0.20.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/lib/components/Button/useButtonClasses.js CHANGED Viewed

@@ -96,6 +96,7 @@ export var useButtonClasses = makeVariantClasses({
                             boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',
                             zIndex: 1
                         },
+                        // eslint-disable-next-line deprecation/deprecation
                         _b[EdgeChromiumHighContrastSelector] = {
                             borderColor: 'var(--button-highContrast-focusColor)',
                             boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',
@@ -105,6 +106,7 @@ export var useButtonClasses = makeVariantClasses({
                 _a['& > *:not(:first-child)'] = {
                     marginLeft: 'var(--button-contentGap)',
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _a[EdgeChromiumHighContrastSelector] = (_c = {
                         forcedColorAdjust: 'var(--button-forcedColorAdjust)',
                         background: 'var(--button-highContrast-background)',
@@ -124,6 +126,7 @@ export var useButtonClasses = makeVariantClasses({
                     _d["." + GlobalClassNames.icon] = {
                         color: 'var(--button-hovered-iconColor, var(--button-iconColor))',
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _d[EdgeChromiumHighContrastSelector] = (_e = {
                             background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',
                             borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',
@@ -145,6 +148,7 @@ export var useButtonClasses = makeVariantClasses({
                     _f["." + GlobalClassNames.icon] = {
                         color: 'var(--button-pressed-iconColor, var(--button-iconColor))',
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _f[EdgeChromiumHighContrastSelector] = (_g = {
                             background: 'var(--button-highContrast-pressed-background, ' +
                                 'var(--button-highContrast-hovered-background, ' +
@@ -174,6 +178,7 @@ export var useButtonClasses = makeVariantClasses({
                     _h["." + GlobalClassNames.icon] = {
                         color: 'var(--button-disabled-iconColor)',
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _h[EdgeChromiumHighContrastSelector] = (_j = {
                             background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',
                             borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',

package/lib/components/Button/useButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button',\n icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n size_smallest: {\n height: 'var(--button-size-smallest)',\n minHeight: 'var(--button-size-smallest)',\n },\n\n size_smaller: {\n height: 'var(--button-size-smaller)',\n minHeight: 'var(--button-size-smaller)',\n },\n\n size_small: {\n height: 'var(--button-size-small)',\n minHeight: 'var(--button-size-small)',\n },\n\n size_large: {\n height: 'var(--button-size-large)',\n minHeight: 'var(--button-size-large)',\n },\n\n size_larger: {\n height: 'var(--button-size-larger)',\n minHeight: 'var(--button-size-larger)',\n },\n\n size_largest: {\n height: 'var(--button-size-largest)',\n minHeight: 'var(--button-size-largest)',\n },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n name: 'Button',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n cursor: 'pointer',\n alignItems: 'center',\n borderStyle: 'solid',\n display: 'inline-flex',\n justifyContent: 'center',\n outline: 'none',\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n textDecoration: 'none',\n background: 'var(--button-background)',\n color: 'var(--button-contentColor)',\n\n borderColor: 'var(--button-borderColor)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n boxShadow: 'var(--button-boxShadow)',\n\n width: 'var(--button-width)',\n maxWidth: 'var(--button-maxWidth)',\n minWidth: 'var(--button-minWidth)',\n height: 'var(--button-height)',\n minHeight: 'var(--button-minHeight)',\n\n paddingLeft: 'var(--button-paddingLeft)',\n paddingRight: 'var(--button-paddingRight)',\n paddingTop: 'var(--button-paddingTop)',\n paddingBottom: 'var(--button-paddingBottom)',\n\n transition: 'var(--button-transition)',\n whiteSpace: 'var(--button-whiteSpace)',\n\n fontFamily: 'var(--button-fontFamily)',\n fontSize: 'var(--button-fontSize)',\n fontWeight: 'var(--button-fontWeight)',\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n\n ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n content: '\"\"',\n position: 'absolute',\n left: -1,\n right: -1,\n top: -1,\n bottom: -1,\n borderWidth: 'var(--button-focusWidth, 2px)',\n borderStyle: 'solid',\n borderColor: 'var(--button-focusColor, black)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n zIndex: 1,\n\n [EdgeChromiumHighContrastSelector]: {\n borderColor: 'var(--button-highContrast-focusColor)',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n },\n },\n\n ['& > :not(:first-child)']: {\n marginLeft: 'var(--button-contentGap)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n background: 'var(--button-highContrast-background)',\n borderColor: 'var(--button-highContrast-borderColor)',\n color: 'var(--button-highContrast-contentColor)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-iconColor)',\n },\n },\n\n '&:hover': {\n background: 'var(--button-hovered-background, var(--button-background))',\n color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n\n '&:active': {\n background: 'var(--button-pressed-background, var(--button-hovered-background))',\n color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n borderColor:\n 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n transform: 'var(--button-pressed-transform)',\n transition: 'var(--button-pressed-transition)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-pressed-background, ' +\n 'var(--button-highContrast-hovered-background, ' +\n 'var(--button-highContrast-background)))',\n borderColor:\n 'var(--button-highContrast-pressed-borderColor, ' +\n 'var(--button-highContrast-hovered-borderColor, ' +\n 'var(--button-highContrast-borderColor)))',\n color:\n 'var(--button-highContrast-pressed-contentColor, ' +\n 'var(--button-highContrast-hovered-contentColor, ' +\n 'var(--button-highContarst-contentColor)))',\n [`.${GlobalClassNames.icon}`]: {\n color:\n 'var(--button-highContrast-pressed-iconColor, ' +\n 'var(--button-highContrast-hovered-iconColor, ' +\n 'var(--button-highContrast-iconColor)))',\n },\n },\n },\n\n '&[aria-disabled=true]': {\n pointerEvents: 'none',\n opacity: 'var(--button-disabled-opacity)',\n backgroundColor: 'var(--button-disabled-background)',\n color: 'var(--button-disabled-contentColor)',\n borderColor: 'var(--button-disabled-borderColor)',\n boxShadow: 'var(--button-disabled-boxShadow)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-disabled-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n },\n ],\n\n icon: [\n GlobalClassNames.icon,\n {\n color: 'var(--button-iconColor)',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n width: 'var(--button-iconSize)',\n height: 'var(--button-iconSize)',\n fontSize: 'var(--button-iconSize, inherit)',\n fontWeight: 'normal',\n lineHeight: '1',\n },\n ],\n\n content: {\n lineHeight: '1',\n },\n },\n\n variants: (theme: Theme): ButtonVariants => {\n const { fonts, effects, palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n\n // Sizing tokens\n iconSize: fonts?.mediumPlus?.fontSize as string,\n borderWidth: '1px',\n boxShadow: 'none',\n borderRadius: effects?.roundedCorner2,\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '0',\n paddingBottom: '0',\n margin: '0',\n width: 'auto',\n minWidth: '96px',\n maxWidth: '280px',\n minHeight: 'var(--button-size-regular)',\n contentGap: '8px',\n\n // Font tokens\n fontWeight: '600',\n fontSize: fonts?.medium?.fontSize as string,\n fontFamily: fonts?.medium?.fontFamily,\n\n // Color tokens\n focusColor: palette?.black,\n focusInnerColor: palette?.white,\n background: semanticColors?.buttonBackground,\n borderColor: semanticColors?.buttonBorder,\n contentColor: semanticColors?.buttonText,\n iconColor: 'inherit',\n\n hovered: {\n background: semanticColors?.buttonBackgroundHovered,\n contentColor: semanticColors?.buttonTextHovered,\n },\n\n pressed: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextPressed,\n },\n\n disabled: {\n background: semanticColors?.buttonBackgroundDisabled,\n borderColor: semanticColors?.buttonBorderDisabled,\n contentColor: semanticColors?.buttonTextDisabled,\n },\n\n highContrast: {\n borderColor: 'WindowText',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n borderColor: 'Highlight',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n borderColor: 'Highlight',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n circular: {\n borderRadius: '50000px',\n },\n\n block: {\n width: '100%',\n maxWidth: 'none',\n },\n\n iconOnly: {\n minWidth: 'var(--button-height)',\n width: 'var(--button-height, var(--button-minHeight))',\n paddingTop: '0',\n paddingBottom: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n background: 'var(--color-brand-background)',\n borderColor: 'var(--color-brand-borderColor)',\n contentColor: 'var(--color-brand-contentColor)',\n iconColor: 'inherit',\n forcedColorAdjust: 'none',\n\n hovered: {\n background: 'var(--color-brand-hovered-background)',\n borderColor: 'var(--color-brand-hovered-borderColor)',\n contentColor: 'var(--color-brand-hovered-contentColor)',\n },\n\n pressed: {\n background: 'var(--color-brand-pressed-background)',\n borderColor: 'var(--color-brand-pressed-borderColor)',\n contentColor: 'var(--color-brand-pressed-contentColor)',\n },\n\n highContrast: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n focusColor: 'WindowText',\n focusInnerColor: 'Window',\n iconColor: 'Window',\n\n hovered: {\n background: 'Highlight',\n borderColor: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n pressed: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n ghost: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n forcedColorAdjust: 'none',\n\n disabled: {\n background: semanticColors?.disabledBackground,\n contentColor: palette?.neutralTertiary,\n iconColor: 'inherit',\n },\n\n expanded: {\n contentColor: palette?.themePrimary,\n },\n\n focused: {\n contentColor: palette?.neutralPrimary,\n iconColor: palette?.themeDarkAlt,\n },\n\n hovered: {\n background: palette?.neutralLighter,\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: palette?.neutralLight,\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n\n highContrast: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n transparent: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n\n disabled: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette.neutralTertiary,\n iconColor: 'inherit',\n },\n\n hovered: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button',\n icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n size_smallest: {\n height: 'var(--button-size-smallest)',\n minHeight: 'var(--button-size-smallest)',\n },\n\n size_smaller: {\n height: 'var(--button-size-smaller)',\n minHeight: 'var(--button-size-smaller)',\n },\n\n size_small: {\n height: 'var(--button-size-small)',\n minHeight: 'var(--button-size-small)',\n },\n\n size_large: {\n height: 'var(--button-size-large)',\n minHeight: 'var(--button-size-large)',\n },\n\n size_larger: {\n height: 'var(--button-size-larger)',\n minHeight: 'var(--button-size-larger)',\n },\n\n size_largest: {\n height: 'var(--button-size-largest)',\n minHeight: 'var(--button-size-largest)',\n },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n name: 'Button',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n cursor: 'pointer',\n alignItems: 'center',\n borderStyle: 'solid',\n display: 'inline-flex',\n justifyContent: 'center',\n outline: 'none',\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n textDecoration: 'none',\n background: 'var(--button-background)',\n color: 'var(--button-contentColor)',\n\n borderColor: 'var(--button-borderColor)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n boxShadow: 'var(--button-boxShadow)',\n\n width: 'var(--button-width)',\n maxWidth: 'var(--button-maxWidth)',\n minWidth: 'var(--button-minWidth)',\n height: 'var(--button-height)',\n minHeight: 'var(--button-minHeight)',\n\n paddingLeft: 'var(--button-paddingLeft)',\n paddingRight: 'var(--button-paddingRight)',\n paddingTop: 'var(--button-paddingTop)',\n paddingBottom: 'var(--button-paddingBottom)',\n\n transition: 'var(--button-transition)',\n whiteSpace: 'var(--button-whiteSpace)',\n\n fontFamily: 'var(--button-fontFamily)',\n fontSize: 'var(--button-fontSize)',\n fontWeight: 'var(--button-fontWeight)',\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n\n ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n content: '\"\"',\n position: 'absolute',\n left: -1,\n right: -1,\n top: -1,\n bottom: -1,\n borderWidth: 'var(--button-focusWidth, 2px)',\n borderStyle: 'solid',\n borderColor: 'var(--button-focusColor, black)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n zIndex: 1,\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n borderColor: 'var(--button-highContrast-focusColor)',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n },\n },\n\n ['& > :not(:first-child)']: {\n marginLeft: 'var(--button-contentGap)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n background: 'var(--button-highContrast-background)',\n borderColor: 'var(--button-highContrast-borderColor)',\n color: 'var(--button-highContrast-contentColor)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-iconColor)',\n },\n },\n\n '&:hover': {\n background: 'var(--button-hovered-background, var(--button-background))',\n color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n\n '&:active': {\n background: 'var(--button-pressed-background, var(--button-hovered-background))',\n color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n borderColor:\n 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n transform: 'var(--button-pressed-transform)',\n transition: 'var(--button-pressed-transition)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-pressed-background, ' +\n 'var(--button-highContrast-hovered-background, ' +\n 'var(--button-highContrast-background)))',\n borderColor:\n 'var(--button-highContrast-pressed-borderColor, ' +\n 'var(--button-highContrast-hovered-borderColor, ' +\n 'var(--button-highContrast-borderColor)))',\n color:\n 'var(--button-highContrast-pressed-contentColor, ' +\n 'var(--button-highContrast-hovered-contentColor, ' +\n 'var(--button-highContarst-contentColor)))',\n [`.${GlobalClassNames.icon}`]: {\n color:\n 'var(--button-highContrast-pressed-iconColor, ' +\n 'var(--button-highContrast-hovered-iconColor, ' +\n 'var(--button-highContrast-iconColor)))',\n },\n },\n },\n\n '&[aria-disabled=true]': {\n pointerEvents: 'none',\n opacity: 'var(--button-disabled-opacity)',\n backgroundColor: 'var(--button-disabled-background)',\n color: 'var(--button-disabled-contentColor)',\n borderColor: 'var(--button-disabled-borderColor)',\n boxShadow: 'var(--button-disabled-boxShadow)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-disabled-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n },\n ],\n\n icon: [\n GlobalClassNames.icon,\n {\n color: 'var(--button-iconColor)',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n width: 'var(--button-iconSize)',\n height: 'var(--button-iconSize)',\n fontSize: 'var(--button-iconSize, inherit)',\n fontWeight: 'normal',\n lineHeight: '1',\n },\n ],\n\n content: {\n lineHeight: '1',\n },\n },\n\n variants: (theme: Theme): ButtonVariants => {\n const { fonts, effects, palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n\n // Sizing tokens\n iconSize: fonts?.mediumPlus?.fontSize as string,\n borderWidth: '1px',\n boxShadow: 'none',\n borderRadius: effects?.roundedCorner2,\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '0',\n paddingBottom: '0',\n margin: '0',\n width: 'auto',\n minWidth: '96px',\n maxWidth: '280px',\n minHeight: 'var(--button-size-regular)',\n contentGap: '8px',\n\n // Font tokens\n fontWeight: '600',\n fontSize: fonts?.medium?.fontSize as string,\n fontFamily: fonts?.medium?.fontFamily,\n\n // Color tokens\n focusColor: palette?.black,\n focusInnerColor: palette?.white,\n background: semanticColors?.buttonBackground,\n borderColor: semanticColors?.buttonBorder,\n contentColor: semanticColors?.buttonText,\n iconColor: 'inherit',\n\n hovered: {\n background: semanticColors?.buttonBackgroundHovered,\n contentColor: semanticColors?.buttonTextHovered,\n },\n\n pressed: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextPressed,\n },\n\n disabled: {\n background: semanticColors?.buttonBackgroundDisabled,\n borderColor: semanticColors?.buttonBorderDisabled,\n contentColor: semanticColors?.buttonTextDisabled,\n },\n\n highContrast: {\n borderColor: 'WindowText',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n borderColor: 'Highlight',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n borderColor: 'Highlight',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n circular: {\n borderRadius: '50000px',\n },\n\n block: {\n width: '100%',\n maxWidth: 'none',\n },\n\n iconOnly: {\n minWidth: 'var(--button-height)',\n width: 'var(--button-height, var(--button-minHeight))',\n paddingTop: '0',\n paddingBottom: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n background: 'var(--color-brand-background)',\n borderColor: 'var(--color-brand-borderColor)',\n contentColor: 'var(--color-brand-contentColor)',\n iconColor: 'inherit',\n forcedColorAdjust: 'none',\n\n hovered: {\n background: 'var(--color-brand-hovered-background)',\n borderColor: 'var(--color-brand-hovered-borderColor)',\n contentColor: 'var(--color-brand-hovered-contentColor)',\n },\n\n pressed: {\n background: 'var(--color-brand-pressed-background)',\n borderColor: 'var(--color-brand-pressed-borderColor)',\n contentColor: 'var(--color-brand-pressed-contentColor)',\n },\n\n highContrast: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n focusColor: 'WindowText',\n focusInnerColor: 'Window',\n iconColor: 'Window',\n\n hovered: {\n background: 'Highlight',\n borderColor: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n pressed: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n ghost: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n forcedColorAdjust: 'none',\n\n disabled: {\n background: semanticColors?.disabledBackground,\n contentColor: palette?.neutralTertiary,\n iconColor: 'inherit',\n },\n\n expanded: {\n contentColor: palette?.themePrimary,\n },\n\n focused: {\n contentColor: palette?.neutralPrimary,\n iconColor: palette?.themeDarkAlt,\n },\n\n hovered: {\n background: palette?.neutralLighter,\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: palette?.neutralLight,\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n\n highContrast: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n transparent: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n\n disabled: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette.neutralTertiary,\n iconColor: 'inherit',\n },\n\n hovered: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}

package/lib/components/SplitButton/useSplitButtonClasses.js CHANGED Viewed

@@ -54,12 +54,14 @@ export var useSplitButtonClasses = makeVariantClasses({
                 top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',
                 bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'
             },
+            // eslint-disable-next-line deprecation/deprecation
             _b[EdgeChromiumHighContrastSelector] = {
                 backgroundColor: 'var(--button-highContrast-dividerColor)',
             },
             _b["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = (_c = {
                     backgroundColor: 'var(--button-disabled-dividerColor)'
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _c[EdgeChromiumHighContrastSelector] = {
                     backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',
                 },

package/lib/components/SplitButton/useSplitButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}

package/lib/components/ToggleButton/useToggleButtonClasses.js CHANGED Viewed

@@ -13,6 +13,7 @@ export var useToggleButtonClasses = makeVariantClasses({
                     color: 'var(--button-checked-iconColor)',
                 }
             },
+            // eslint-disable-next-line deprecation/deprecation
             _a[EdgeChromiumHighContrastSelector] = {
                 background: 'var(--button-highContrast-checked-background)',
                 color: 'var(--button-highContrast-checked-contentColor)',
@@ -27,6 +28,7 @@ export var useToggleButtonClasses = makeVariantClasses({
                         color: 'var(--button-checkedHovered-iconColor)',
                     }
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _b[EdgeChromiumHighContrastSelector] = {
                     background: 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',
                     color: 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',
@@ -42,6 +44,7 @@ export var useToggleButtonClasses = makeVariantClasses({
                         color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',
                     }
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _c[EdgeChromiumHighContrastSelector] = {
                     background: 'var(--button-highContrast-checkedPressed-background, ' +
                         'var(--button-highContrast-checkedHovered-background, ' +

package/lib/components/ToggleButton/useToggleButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useToggleButtonClasses.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { ToggleButtonState, ToggleButtonVariants } from './ToggleButton.types';\n\nexport const useToggleButtonClasses = makeVariantClasses<ToggleButtonState, ToggleButtonVariants>({\n name: 'ToggleButton',\n prefix: '--button',\n\n styles: {\n // When checked is applied, apply the right tokens to the right css properties.\n _checked: {\n background: 'var(--button-checked-background)',\n color: 'var(--button-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checked-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-checked-background)',\n color: 'var(--button-highContrast-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checked-iconColor)',\n },\n },\n\n ':hover': {\n background: 'var(--button-checkedHovered-background)',\n color: 'var(--button-checkedHovered-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checkedHovered-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n color:\n 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n },\n },\n },\n\n ':active': {\n background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedPressed-background, ' +\n 'var(--button-highContrast-checkedHovered-background, ' +\n 'var(--button-highContrast-checked-background)))',\n color:\n 'var(--button-highContrast-checked--pressed-contentColor, ' +\n 'var(--button-highContrast-checked--hovered-contentColor, ' +\n 'var(--button-highContrast-checked-contentColor)))',\n '.ms-Button-icon': {\n color:\n 'var(--button-highContrast-checkedPressed-iconColor, ' +\n 'var(--button-highContrast-checkedHovered-iconColor, ' +\n '--button-highContrast-checked-iconColor)))',\n },\n },\n },\n },\n },\n\n variants: (theme: Theme): ToggleButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n checked: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextChecked,\n },\n\n checkedHovered: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextCheckedHovered,\n },\n\n highContrast: {\n checked: {\n background: 'Window',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n },\n },\n\n primary: {\n checked: {\n background: 'var(--color-brand-checked-background)',\n contentColor: 'var(--color-brand-checked-contentColor)',\n },\n\n checkedHovered: {\n background: 'var(--color-brand-checkedHovered-background)',\n contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n },\n\n checkedPressed: {\n background: 'var(--color-brand-checkedPressed-background)',\n contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n },\n\n highContrast: {\n checked: {\n background: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n },\n },\n\n ghost: {\n checked: {\n background: palette?.neutralLight,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n\n checkedHovered: {\n background: palette?.neutralQuaternaryAlt,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n },\n\n transparent: {\n checked: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n checkedHovered: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useToggleButtonClasses.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { ToggleButtonState, ToggleButtonVariants } from './ToggleButton.types';\n\nexport const useToggleButtonClasses = makeVariantClasses<ToggleButtonState, ToggleButtonVariants>({\n name: 'ToggleButton',\n prefix: '--button',\n\n styles: {\n // When checked is applied, apply the right tokens to the right css properties.\n _checked: {\n background: 'var(--button-checked-background)',\n color: 'var(--button-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checked-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-checked-background)',\n color: 'var(--button-highContrast-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checked-iconColor)',\n },\n },\n\n ':hover': {\n background: 'var(--button-checkedHovered-background)',\n color: 'var(--button-checkedHovered-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checkedHovered-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n color:\n 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n },\n },\n },\n\n ':active': {\n background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedPressed-background, ' +\n 'var(--button-highContrast-checkedHovered-background, ' +\n 'var(--button-highContrast-checked-background)))',\n color:\n 'var(--button-highContrast-checked--pressed-contentColor, ' +\n 'var(--button-highContrast-checked--hovered-contentColor, ' +\n 'var(--button-highContrast-checked-contentColor)))',\n '.ms-Button-icon': {\n color:\n 'var(--button-highContrast-checkedPressed-iconColor, ' +\n 'var(--button-highContrast-checkedHovered-iconColor, ' +\n '--button-highContrast-checked-iconColor)))',\n },\n },\n },\n },\n },\n\n variants: (theme: Theme): ToggleButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n checked: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextChecked,\n },\n\n checkedHovered: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextCheckedHovered,\n },\n\n highContrast: {\n checked: {\n background: 'Window',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n },\n },\n\n primary: {\n checked: {\n background: 'var(--color-brand-checked-background)',\n contentColor: 'var(--color-brand-checked-contentColor)',\n },\n\n checkedHovered: {\n background: 'var(--color-brand-checkedHovered-background)',\n contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n },\n\n checkedPressed: {\n background: 'var(--color-brand-checkedPressed-background)',\n contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n },\n\n highContrast: {\n checked: {\n background: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n },\n },\n\n ghost: {\n checked: {\n background: palette?.neutralLight,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n\n checkedHovered: {\n background: palette?.neutralQuaternaryAlt,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n },\n\n transparent: {\n checked: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n checkedHovered: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n };\n },\n});\n"]}

package/lib/version.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 import { setVersion } from '@uifabric/set-version';
-setVersion('@fluentui/react-button', '0.20.1');
+setVersion('@fluentui/react-button', '0.20.4');
 //# sourceMappingURL=version.js.map

package/lib/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@uifabric/set-version';\nsetVersion('@fluentui/react-button', '0.20.1');"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@uifabric/set-version';\nsetVersion('@fluentui/react-button', '0.20.4');"]}

package/lib-amd/components/Button/useButtonClasses.js CHANGED Viewed

@@ -95,6 +95,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                                 boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',
                                 zIndex: 1
                             },
+                            // eslint-disable-next-line deprecation/deprecation
                             _b[styling_1.EdgeChromiumHighContrastSelector] = {
                                 borderColor: 'var(--button-highContrast-focusColor)',
                                 boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',
@@ -104,6 +105,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                     _a['& > *:not(:first-child)'] = {
                         marginLeft: 'var(--button-contentGap)',
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _a[styling_1.EdgeChromiumHighContrastSelector] = (_c = {
                             forcedColorAdjust: 'var(--button-forcedColorAdjust)',
                             background: 'var(--button-highContrast-background)',
@@ -123,6 +125,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                         _d["." + GlobalClassNames.icon] = {
                             color: 'var(--button-hovered-iconColor, var(--button-iconColor))',
                         },
+                        // eslint-disable-next-line deprecation/deprecation
                         _d[styling_1.EdgeChromiumHighContrastSelector] = (_e = {
                                 background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',
                                 borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',
@@ -144,6 +147,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                         _f["." + GlobalClassNames.icon] = {
                             color: 'var(--button-pressed-iconColor, var(--button-iconColor))',
                         },
+                        // eslint-disable-next-line deprecation/deprecation
                         _f[styling_1.EdgeChromiumHighContrastSelector] = (_g = {
                                 background: 'var(--button-highContrast-pressed-background, ' +
                                     'var(--button-highContrast-hovered-background, ' +
@@ -173,6 +177,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                         _h["." + GlobalClassNames.icon] = {
                             color: 'var(--button-disabled-iconColor)',
                         },
+                        // eslint-disable-next-line deprecation/deprecation
                         _h[styling_1.EdgeChromiumHighContrastSelector] = (_j = {
                                 background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',
                                 borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',

package/lib-amd/components/Button/useButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button',\n icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n size_smallest: {\n height: 'var(--button-size-smallest)',\n minHeight: 'var(--button-size-smallest)',\n },\n\n size_smaller: {\n height: 'var(--button-size-smaller)',\n minHeight: 'var(--button-size-smaller)',\n },\n\n size_small: {\n height: 'var(--button-size-small)',\n minHeight: 'var(--button-size-small)',\n },\n\n size_large: {\n height: 'var(--button-size-large)',\n minHeight: 'var(--button-size-large)',\n },\n\n size_larger: {\n height: 'var(--button-size-larger)',\n minHeight: 'var(--button-size-larger)',\n },\n\n size_largest: {\n height: 'var(--button-size-largest)',\n minHeight: 'var(--button-size-largest)',\n },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n name: 'Button',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n cursor: 'pointer',\n alignItems: 'center',\n borderStyle: 'solid',\n display: 'inline-flex',\n justifyContent: 'center',\n outline: 'none',\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n textDecoration: 'none',\n background: 'var(--button-background)',\n color: 'var(--button-contentColor)',\n\n borderColor: 'var(--button-borderColor)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n boxShadow: 'var(--button-boxShadow)',\n\n width: 'var(--button-width)',\n maxWidth: 'var(--button-maxWidth)',\n minWidth: 'var(--button-minWidth)',\n height: 'var(--button-height)',\n minHeight: 'var(--button-minHeight)',\n\n paddingLeft: 'var(--button-paddingLeft)',\n paddingRight: 'var(--button-paddingRight)',\n paddingTop: 'var(--button-paddingTop)',\n paddingBottom: 'var(--button-paddingBottom)',\n\n transition: 'var(--button-transition)',\n whiteSpace: 'var(--button-whiteSpace)',\n\n fontFamily: 'var(--button-fontFamily)',\n fontSize: 'var(--button-fontSize)',\n fontWeight: 'var(--button-fontWeight)',\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n\n ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n content: '\"\"',\n position: 'absolute',\n left: -1,\n right: -1,\n top: -1,\n bottom: -1,\n borderWidth: 'var(--button-focusWidth, 2px)',\n borderStyle: 'solid',\n borderColor: 'var(--button-focusColor, black)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n zIndex: 1,\n\n [EdgeChromiumHighContrastSelector]: {\n borderColor: 'var(--button-highContrast-focusColor)',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n },\n },\n\n ['& > :not(:first-child)']: {\n marginLeft: 'var(--button-contentGap)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n background: 'var(--button-highContrast-background)',\n borderColor: 'var(--button-highContrast-borderColor)',\n color: 'var(--button-highContrast-contentColor)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-iconColor)',\n },\n },\n\n '&:hover': {\n background: 'var(--button-hovered-background, var(--button-background))',\n color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n\n '&:active': {\n background: 'var(--button-pressed-background, var(--button-hovered-background))',\n color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n borderColor:\n 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n transform: 'var(--button-pressed-transform)',\n transition: 'var(--button-pressed-transition)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-pressed-background, ' +\n 'var(--button-highContrast-hovered-background, ' +\n 'var(--button-highContrast-background)))',\n borderColor:\n 'var(--button-highContrast-pressed-borderColor, ' +\n 'var(--button-highContrast-hovered-borderColor, ' +\n 'var(--button-highContrast-borderColor)))',\n color:\n 'var(--button-highContrast-pressed-contentColor, ' +\n 'var(--button-highContrast-hovered-contentColor, ' +\n 'var(--button-highContarst-contentColor)))',\n [`.${GlobalClassNames.icon}`]: {\n color:\n 'var(--button-highContrast-pressed-iconColor, ' +\n 'var(--button-highContrast-hovered-iconColor, ' +\n 'var(--button-highContrast-iconColor)))',\n },\n },\n },\n\n '&[aria-disabled=true]': {\n pointerEvents: 'none',\n opacity: 'var(--button-disabled-opacity)',\n backgroundColor: 'var(--button-disabled-background)',\n color: 'var(--button-disabled-contentColor)',\n borderColor: 'var(--button-disabled-borderColor)',\n boxShadow: 'var(--button-disabled-boxShadow)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-disabled-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n },\n ],\n\n icon: [\n GlobalClassNames.icon,\n {\n color: 'var(--button-iconColor)',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n width: 'var(--button-iconSize)',\n height: 'var(--button-iconSize)',\n fontSize: 'var(--button-iconSize, inherit)',\n fontWeight: 'normal',\n lineHeight: '1',\n },\n ],\n\n content: {\n lineHeight: '1',\n },\n },\n\n variants: (theme: Theme): ButtonVariants => {\n const { fonts, effects, palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n\n // Sizing tokens\n iconSize: fonts?.mediumPlus?.fontSize as string,\n borderWidth: '1px',\n boxShadow: 'none',\n borderRadius: effects?.roundedCorner2,\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '0',\n paddingBottom: '0',\n margin: '0',\n width: 'auto',\n minWidth: '96px',\n maxWidth: '280px',\n minHeight: 'var(--button-size-regular)',\n contentGap: '8px',\n\n // Font tokens\n fontWeight: '600',\n fontSize: fonts?.medium?.fontSize as string,\n fontFamily: fonts?.medium?.fontFamily,\n\n // Color tokens\n focusColor: palette?.black,\n focusInnerColor: palette?.white,\n background: semanticColors?.buttonBackground,\n borderColor: semanticColors?.buttonBorder,\n contentColor: semanticColors?.buttonText,\n iconColor: 'inherit',\n\n hovered: {\n background: semanticColors?.buttonBackgroundHovered,\n contentColor: semanticColors?.buttonTextHovered,\n },\n\n pressed: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextPressed,\n },\n\n disabled: {\n background: semanticColors?.buttonBackgroundDisabled,\n borderColor: semanticColors?.buttonBorderDisabled,\n contentColor: semanticColors?.buttonTextDisabled,\n },\n\n highContrast: {\n borderColor: 'WindowText',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n borderColor: 'Highlight',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n borderColor: 'Highlight',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n circular: {\n borderRadius: '50000px',\n },\n\n block: {\n width: '100%',\n maxWidth: 'none',\n },\n\n iconOnly: {\n minWidth: 'var(--button-height)',\n width: 'var(--button-height, var(--button-minHeight))',\n paddingTop: '0',\n paddingBottom: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n background: 'var(--color-brand-background)',\n borderColor: 'var(--color-brand-borderColor)',\n contentColor: 'var(--color-brand-contentColor)',\n iconColor: 'inherit',\n forcedColorAdjust: 'none',\n\n hovered: {\n background: 'var(--color-brand-hovered-background)',\n borderColor: 'var(--color-brand-hovered-borderColor)',\n contentColor: 'var(--color-brand-hovered-contentColor)',\n },\n\n pressed: {\n background: 'var(--color-brand-pressed-background)',\n borderColor: 'var(--color-brand-pressed-borderColor)',\n contentColor: 'var(--color-brand-pressed-contentColor)',\n },\n\n highContrast: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n focusColor: 'WindowText',\n focusInnerColor: 'Window',\n iconColor: 'Window',\n\n hovered: {\n background: 'Highlight',\n borderColor: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n pressed: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n ghost: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n forcedColorAdjust: 'none',\n\n disabled: {\n background: semanticColors?.disabledBackground,\n contentColor: palette?.neutralTertiary,\n iconColor: 'inherit',\n },\n\n expanded: {\n contentColor: palette?.themePrimary,\n },\n\n focused: {\n contentColor: palette?.neutralPrimary,\n iconColor: palette?.themeDarkAlt,\n },\n\n hovered: {\n background: palette?.neutralLighter,\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: palette?.neutralLight,\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n\n highContrast: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n transparent: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n\n disabled: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette.neutralTertiary,\n iconColor: 'inherit',\n },\n\n hovered: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button',\n icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n size_smallest: {\n height: 'var(--button-size-smallest)',\n minHeight: 'var(--button-size-smallest)',\n },\n\n size_smaller: {\n height: 'var(--button-size-smaller)',\n minHeight: 'var(--button-size-smaller)',\n },\n\n size_small: {\n height: 'var(--button-size-small)',\n minHeight: 'var(--button-size-small)',\n },\n\n size_large: {\n height: 'var(--button-size-large)',\n minHeight: 'var(--button-size-large)',\n },\n\n size_larger: {\n height: 'var(--button-size-larger)',\n minHeight: 'var(--button-size-larger)',\n },\n\n size_largest: {\n height: 'var(--button-size-largest)',\n minHeight: 'var(--button-size-largest)',\n },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n name: 'Button',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n cursor: 'pointer',\n alignItems: 'center',\n borderStyle: 'solid',\n display: 'inline-flex',\n justifyContent: 'center',\n outline: 'none',\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n textDecoration: 'none',\n background: 'var(--button-background)',\n color: 'var(--button-contentColor)',\n\n borderColor: 'var(--button-borderColor)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n boxShadow: 'var(--button-boxShadow)',\n\n width: 'var(--button-width)',\n maxWidth: 'var(--button-maxWidth)',\n minWidth: 'var(--button-minWidth)',\n height: 'var(--button-height)',\n minHeight: 'var(--button-minHeight)',\n\n paddingLeft: 'var(--button-paddingLeft)',\n paddingRight: 'var(--button-paddingRight)',\n paddingTop: 'var(--button-paddingTop)',\n paddingBottom: 'var(--button-paddingBottom)',\n\n transition: 'var(--button-transition)',\n whiteSpace: 'var(--button-whiteSpace)',\n\n fontFamily: 'var(--button-fontFamily)',\n fontSize: 'var(--button-fontSize)',\n fontWeight: 'var(--button-fontWeight)',\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n\n ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n content: '\"\"',\n position: 'absolute',\n left: -1,\n right: -1,\n top: -1,\n bottom: -1,\n borderWidth: 'var(--button-focusWidth, 2px)',\n borderStyle: 'solid',\n borderColor: 'var(--button-focusColor, black)',\n borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n zIndex: 1,\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n borderColor: 'var(--button-highContrast-focusColor)',\n boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n },\n },\n\n ['& > :not(:first-child)']: {\n marginLeft: 'var(--button-contentGap)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n background: 'var(--button-highContrast-background)',\n borderColor: 'var(--button-highContrast-borderColor)',\n color: 'var(--button-highContrast-contentColor)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-iconColor)',\n },\n },\n\n '&:hover': {\n background: 'var(--button-hovered-background, var(--button-background))',\n color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n\n '&:active': {\n background: 'var(--button-pressed-background, var(--button-hovered-background))',\n color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n borderColor:\n 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n transform: 'var(--button-pressed-transform)',\n transition: 'var(--button-pressed-transition)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-pressed-background, ' +\n 'var(--button-highContrast-hovered-background, ' +\n 'var(--button-highContrast-background)))',\n borderColor:\n 'var(--button-highContrast-pressed-borderColor, ' +\n 'var(--button-highContrast-hovered-borderColor, ' +\n 'var(--button-highContrast-borderColor)))',\n color:\n 'var(--button-highContrast-pressed-contentColor, ' +\n 'var(--button-highContrast-hovered-contentColor, ' +\n 'var(--button-highContarst-contentColor)))',\n [`.${GlobalClassNames.icon}`]: {\n color:\n 'var(--button-highContrast-pressed-iconColor, ' +\n 'var(--button-highContrast-hovered-iconColor, ' +\n 'var(--button-highContrast-iconColor)))',\n },\n },\n },\n\n '&[aria-disabled=true]': {\n pointerEvents: 'none',\n opacity: 'var(--button-disabled-opacity)',\n backgroundColor: 'var(--button-disabled-background)',\n color: 'var(--button-disabled-contentColor)',\n borderColor: 'var(--button-disabled-borderColor)',\n boxShadow: 'var(--button-disabled-boxShadow)',\n\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-disabled-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n [`.${GlobalClassNames.icon}`]: {\n color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n },\n },\n },\n },\n ],\n\n icon: [\n GlobalClassNames.icon,\n {\n color: 'var(--button-iconColor)',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n width: 'var(--button-iconSize)',\n height: 'var(--button-iconSize)',\n fontSize: 'var(--button-iconSize, inherit)',\n fontWeight: 'normal',\n lineHeight: '1',\n },\n ],\n\n content: {\n lineHeight: '1',\n },\n },\n\n variants: (theme: Theme): ButtonVariants => {\n const { fonts, effects, palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n\n // Sizing tokens\n iconSize: fonts?.mediumPlus?.fontSize as string,\n borderWidth: '1px',\n boxShadow: 'none',\n borderRadius: effects?.roundedCorner2,\n paddingLeft: '20px',\n paddingRight: '20px',\n paddingTop: '0',\n paddingBottom: '0',\n margin: '0',\n width: 'auto',\n minWidth: '96px',\n maxWidth: '280px',\n minHeight: 'var(--button-size-regular)',\n contentGap: '8px',\n\n // Font tokens\n fontWeight: '600',\n fontSize: fonts?.medium?.fontSize as string,\n fontFamily: fonts?.medium?.fontFamily,\n\n // Color tokens\n focusColor: palette?.black,\n focusInnerColor: palette?.white,\n background: semanticColors?.buttonBackground,\n borderColor: semanticColors?.buttonBorder,\n contentColor: semanticColors?.buttonText,\n iconColor: 'inherit',\n\n hovered: {\n background: semanticColors?.buttonBackgroundHovered,\n contentColor: semanticColors?.buttonTextHovered,\n },\n\n pressed: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextPressed,\n },\n\n disabled: {\n background: semanticColors?.buttonBackgroundDisabled,\n borderColor: semanticColors?.buttonBorderDisabled,\n contentColor: semanticColors?.buttonTextDisabled,\n },\n\n highContrast: {\n borderColor: 'WindowText',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n borderColor: 'Highlight',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n borderColor: 'Highlight',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n circular: {\n borderRadius: '50000px',\n },\n\n block: {\n width: '100%',\n maxWidth: 'none',\n },\n\n iconOnly: {\n minWidth: 'var(--button-height)',\n width: 'var(--button-height, var(--button-minHeight))',\n paddingTop: '0',\n paddingBottom: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n background: 'var(--color-brand-background)',\n borderColor: 'var(--color-brand-borderColor)',\n contentColor: 'var(--color-brand-contentColor)',\n iconColor: 'inherit',\n forcedColorAdjust: 'none',\n\n hovered: {\n background: 'var(--color-brand-hovered-background)',\n borderColor: 'var(--color-brand-hovered-borderColor)',\n contentColor: 'var(--color-brand-hovered-contentColor)',\n },\n\n pressed: {\n background: 'var(--color-brand-pressed-background)',\n borderColor: 'var(--color-brand-pressed-borderColor)',\n contentColor: 'var(--color-brand-pressed-contentColor)',\n },\n\n highContrast: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n focusColor: 'WindowText',\n focusInnerColor: 'Window',\n iconColor: 'Window',\n\n hovered: {\n background: 'Highlight',\n borderColor: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n pressed: {\n background: 'WindowText',\n borderColor: 'WindowText',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'GrayText',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n ghost: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n forcedColorAdjust: 'none',\n\n disabled: {\n background: semanticColors?.disabledBackground,\n contentColor: palette?.neutralTertiary,\n iconColor: 'inherit',\n },\n\n expanded: {\n contentColor: palette?.themePrimary,\n },\n\n focused: {\n contentColor: palette?.neutralPrimary,\n iconColor: palette?.themeDarkAlt,\n },\n\n hovered: {\n background: palette?.neutralLighter,\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: palette?.neutralLight,\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n\n highContrast: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'WindowText',\n iconColor: 'WindowText',\n\n hovered: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n pressed: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n\n disabled: {\n background: 'Window',\n borderColor: 'transparent',\n contentColor: 'GrayText',\n iconColor: 'GrayText',\n },\n },\n },\n\n // TODO: no references to palette.\n transparent: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette?.neutralPrimary,\n fontWeight: 'normal',\n iconColor: palette?.themeDarkAlt,\n\n disabled: {\n background: 'transparent',\n borderColor: 'transparent',\n contentColor: palette.neutralTertiary,\n iconColor: 'inherit',\n },\n\n hovered: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n pressed: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}

package/lib-amd/components/SplitButton/useSplitButtonClasses.js CHANGED Viewed

@@ -53,12 +53,14 @@ define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@uifab
                     top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',
                     bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _b[styling_1.EdgeChromiumHighContrastSelector] = {
                     backgroundColor: 'var(--button-highContrast-dividerColor)',
                 },
                 _b["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = (_c = {
                         backgroundColor: 'var(--button-disabled-dividerColor)'
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _c[styling_1.EdgeChromiumHighContrastSelector] = {
                         backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',
                     },

package/lib-amd/components/SplitButton/useSplitButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}

package/lib-amd/components/ToggleButton/useToggleButtonClasses.js CHANGED Viewed

@@ -14,6 +14,7 @@ define(["require", "exports", "@uifabric/styling", "@fluentui/react-theme-provid
                         color: 'var(--button-checked-iconColor)',
                     }
                 },
+                // eslint-disable-next-line deprecation/deprecation
                 _a[styling_1.EdgeChromiumHighContrastSelector] = {
                     background: 'var(--button-highContrast-checked-background)',
                     color: 'var(--button-highContrast-checked-contentColor)',
@@ -28,6 +29,7 @@ define(["require", "exports", "@uifabric/styling", "@fluentui/react-theme-provid
                             color: 'var(--button-checkedHovered-iconColor)',
                         }
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _b[styling_1.EdgeChromiumHighContrastSelector] = {
                         background: 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',
                         color: 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',
@@ -43,6 +45,7 @@ define(["require", "exports", "@uifabric/styling", "@fluentui/react-theme-provid
                             color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',
                         }
                     },
+                    // eslint-disable-next-line deprecation/deprecation
                     _c[styling_1.EdgeChromiumHighContrastSelector] = {
                         background: 'var(--button-highContrast-checkedPressed-background, ' +
                             'var(--button-highContrast-checkedHovered-background, ' +

package/lib-amd/components/ToggleButton/useToggleButtonClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useToggleButtonClasses.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { ToggleButtonState, ToggleButtonVariants } from './ToggleButton.types';\n\nexport const useToggleButtonClasses = makeVariantClasses<ToggleButtonState, ToggleButtonVariants>({\n name: 'ToggleButton',\n prefix: '--button',\n\n styles: {\n // When checked is applied, apply the right tokens to the right css properties.\n _checked: {\n background: 'var(--button-checked-background)',\n color: 'var(--button-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checked-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-checked-background)',\n color: 'var(--button-highContrast-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checked-iconColor)',\n },\n },\n\n ':hover': {\n background: 'var(--button-checkedHovered-background)',\n color: 'var(--button-checkedHovered-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checkedHovered-iconColor)',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n color:\n 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n },\n },\n },\n\n ':active': {\n background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n },\n\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedPressed-background, ' +\n 'var(--button-highContrast-checkedHovered-background, ' +\n 'var(--button-highContrast-checked-background)))',\n color:\n 'var(--button-highContrast-checked--pressed-contentColor, ' +\n 'var(--button-highContrast-checked--hovered-contentColor, ' +\n 'var(--button-highContrast-checked-contentColor)))',\n '.ms-Button-icon': {\n color:\n 'var(--button-highContrast-checkedPressed-iconColor, ' +\n 'var(--button-highContrast-checkedHovered-iconColor, ' +\n '--button-highContrast-checked-iconColor)))',\n },\n },\n },\n },\n },\n\n variants: (theme: Theme): ToggleButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n checked: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextChecked,\n },\n\n checkedHovered: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextCheckedHovered,\n },\n\n highContrast: {\n checked: {\n background: 'Window',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n },\n },\n\n primary: {\n checked: {\n background: 'var(--color-brand-checked-background)',\n contentColor: 'var(--color-brand-checked-contentColor)',\n },\n\n checkedHovered: {\n background: 'var(--color-brand-checkedHovered-background)',\n contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n },\n\n checkedPressed: {\n background: 'var(--color-brand-checkedPressed-background)',\n contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n },\n\n highContrast: {\n checked: {\n background: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n },\n },\n\n ghost: {\n checked: {\n background: palette?.neutralLight,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n\n checkedHovered: {\n background: palette?.neutralQuaternaryAlt,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n },\n\n transparent: {\n checked: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n checkedHovered: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n };\n },\n});\n"]}
1	+ {"version":3,"file":"useToggleButtonClasses.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EdgeChromiumHighContrastSelector } from '@uifabric/styling';\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { ToggleButtonState, ToggleButtonVariants } from './ToggleButton.types';\n\nexport const useToggleButtonClasses = makeVariantClasses<ToggleButtonState, ToggleButtonVariants>({\n name: 'ToggleButton',\n prefix: '--button',\n\n styles: {\n // When checked is applied, apply the right tokens to the right css properties.\n _checked: {\n background: 'var(--button-checked-background)',\n color: 'var(--button-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checked-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background: 'var(--button-highContrast-checked-background)',\n color: 'var(--button-highContrast-checked-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checked-iconColor)',\n },\n },\n\n ':hover': {\n background: 'var(--button-checkedHovered-background)',\n color: 'var(--button-checkedHovered-contentColor)',\n '.ms-Button-icon': {\n color: 'var(--button-checkedHovered-iconColor)',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n color:\n 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n },\n },\n },\n\n ':active': {\n background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n '.ms-Button-icon': {\n color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n },\n\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n background:\n 'var(--button-highContrast-checkedPressed-background, ' +\n 'var(--button-highContrast-checkedHovered-background, ' +\n 'var(--button-highContrast-checked-background)))',\n color:\n 'var(--button-highContrast-checked--pressed-contentColor, ' +\n 'var(--button-highContrast-checked--hovered-contentColor, ' +\n 'var(--button-highContrast-checked-contentColor)))',\n '.ms-Button-icon': {\n color:\n 'var(--button-highContrast-checkedPressed-iconColor, ' +\n 'var(--button-highContrast-checkedHovered-iconColor, ' +\n '--button-highContrast-checked-iconColor)))',\n },\n },\n },\n },\n },\n\n variants: (theme: Theme): ToggleButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n checked: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextChecked,\n },\n\n checkedHovered: {\n background: semanticColors?.buttonBackgroundPressed,\n contentColor: semanticColors?.buttonTextCheckedHovered,\n },\n\n highContrast: {\n checked: {\n background: 'Window',\n contentColor: 'Highlight',\n iconColor: 'Highlight',\n },\n },\n },\n\n primary: {\n checked: {\n background: 'var(--color-brand-checked-background)',\n contentColor: 'var(--color-brand-checked-contentColor)',\n },\n\n checkedHovered: {\n background: 'var(--color-brand-checkedHovered-background)',\n contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n },\n\n checkedPressed: {\n background: 'var(--color-brand-checkedPressed-background)',\n contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n },\n\n highContrast: {\n checked: {\n background: 'Highlight',\n contentColor: 'Window',\n iconColor: 'Window',\n },\n },\n },\n\n ghost: {\n checked: {\n background: palette?.neutralLight,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n\n checkedHovered: {\n background: palette?.neutralQuaternaryAlt,\n contentColor: palette?.neutralDark,\n iconColor: palette?.themeDark,\n },\n },\n\n transparent: {\n checked: {\n background: 'transparent',\n contentColor: palette?.themePrimary,\n iconColor: palette?.themePrimary,\n },\n\n checkedHovered: {\n background: 'transparent',\n contentColor: palette?.black,\n iconColor: palette?.themeDarker,\n },\n },\n };\n },\n});\n"]}