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-amd/version.js CHANGED Viewed

@@ -1,6 +1,6 @@
 define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-button', '0.20.1');
+    set_version_1.setVersion('@fluentui/react-button', '0.20.4');
 });
 //# sourceMappingURL=version.js.map

package/lib-amd/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,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":";;;IAGA,wBAAU,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-commonjs/components/Button/useButtonClasses.js CHANGED Viewed

@@ -98,6 +98,7 @@ exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
                             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',
@@ -107,6 +108,7 @@ exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
                 _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)',
@@ -126,6 +128,7 @@ exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
                     _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))',
@@ -147,6 +150,7 @@ exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
                     _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, ' +
@@ -176,6 +180,7 @@ exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
                     _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-commonjs/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-commonjs/components/SplitButton/useSplitButtonClasses.js CHANGED Viewed

@@ -56,12 +56,14 @@ exports.useSplitButtonClasses = react_theme_provider_1.makeVariantClasses({
                 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-commonjs/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-commonjs/components/ToggleButton/useToggleButtonClasses.js CHANGED Viewed

@@ -15,6 +15,7 @@ exports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({
                     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)',
@@ -29,6 +30,7 @@ exports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({
                         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))',
@@ -44,6 +46,7 @@ exports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({
                         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-commonjs/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-commonjs/version.js CHANGED Viewed

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // 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.
 var set_version_1 = require("@uifabric/set-version");
-set_version_1.setVersion('@fluentui/react-button', '0.20.1');
+set_version_1.setVersion('@fluentui/react-button', '0.20.4');
 //# sourceMappingURL=version.js.map

package/lib-commonjs/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,qDAAmD;AACnD,wBAAU,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,qDAAmD;AACnD,wBAAU,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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "0.20.2",
+  "version": "0.20.5",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -47,24 +47,24 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-compose": "^0.19.16",
+    "@fluentui/react-compose": "^0.19.17",
     "@fluentui/keyboard-key": "^0.2.12",
-    "@fluentui/react-icons": "^0.4.3",
-    "@fluentui/react-shared-contexts": "^0.1.2",
-    "@fluentui/react-theme-provider": "^0.19.2",
-    "@fluentui/theme": "^1.7.5",
-    "@uifabric/react-hooks": "^7.14.1",
+    "@fluentui/react-icons": "^0.4.4",
+    "@fluentui/react-shared-contexts": "^0.1.3",
+    "@fluentui/react-theme-provider": "^0.19.5",
+    "@fluentui/theme": "^1.7.6",
+    "@uifabric/react-hooks": "^7.15.0",
     "@uifabric/set-version": "^7.0.24",
-    "@uifabric/styling": "^7.20.1",
-    "@uifabric/utilities": "^7.34.0",
+    "@uifabric/styling": "^7.21.1",
+    "@uifabric/utilities": "^7.34.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <17.0.0",
-    "@types/react-dom": ">=16.8.0 <17.0.0",
-    "react": ">=16.8.0 <17.0.0",
-    "react-dom": ">=16.8.0 <17.0.0"
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
     "tag": "lts-7"