@fluentui/react-button 9.1.9 → 9.1.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/CHANGELOG.json +61 -1
  2. package/CHANGELOG.md +25 -2
  3. package/lib/components/Button/useButtonStyles.js +17 -168
  4. package/lib/components/Button/useButtonStyles.js.map +1 -1
  5. package/lib-amd/components/Button/useButtonStyles.js +80 -51
  6. package/lib-amd/components/Button/useButtonStyles.js.map +1 -1
  7. package/lib-commonjs/components/Button/useButtonStyles.js +16 -167
  8. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  9. package/package.json +5 -5
package/lib-amd/components/Button/useButtonStyles.js CHANGED
@@ -10,34 +10,70 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
10
10
  var iconSpacingVar = '--fui-Button__icon--spacing';
11
11
  var buttonSpacingSmall = '3px';
12
12
  var buttonSpacingMedium = '5px';
13
- var useRootStyles = react_1.makeStyles({
14
- // Base styles
15
- base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle' }, react_1.shorthands.margin(0)), react_1.shorthands.overflow('hidden')), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1 }), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), (_a = { color: react_theme_1.tokens.colorNeutralForeground1Hover, cursor: 'pointer' }, _a["& ." + react_icons_1.iconFilledClassName] = {
13
+ var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle', margin: 0, overflow: 'hidden', backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1, border: react_theme_1.tokens.strokeWidthThin + " solid " + react_theme_1.tokens.colorNeutralStroke1, fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': (_a = {
14
+ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
15
+ borderColor: react_theme_1.tokens.colorNeutralStroke1Hover,
16
+ color: react_theme_1.tokens.colorNeutralForeground1Hover,
17
+ cursor: 'pointer'
18
+ },
19
+ _a["& ." + react_icons_1.iconFilledClassName] = {
16
20
  display: 'inline',
17
- }, _a["& ." + react_icons_1.iconRegularClassName] = {
21
+ },
22
+ _a["& ." + react_icons_1.iconRegularClassName] = {
18
23
  display: 'none',
19
- }, _a)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), (_b = { color: react_theme_1.tokens.colorNeutralForeground1Pressed, outlineStyle: 'none' }, _b["& ." + react_icons_1.iconFilledClassName] = {
24
+ },
25
+ _a), ':hover:active': (_b = {
26
+ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
27
+ borderColor: react_theme_1.tokens.colorNeutralStroke1Pressed,
28
+ color: react_theme_1.tokens.colorNeutralForeground1Pressed,
29
+ outlineStyle: 'none'
30
+ },
31
+ _b["& ." + react_icons_1.iconFilledClassName] = {
20
32
  display: 'inline',
21
- }, _b["& ." + react_icons_1.iconRegularClassName] = {
33
+ },
34
+ _b["& ." + react_icons_1.iconRegularClassName] = {
22
35
  display: 'none',
23
- }, _b)) }),
24
- // Transition styles
25
- transition: {
26
- transitionDuration: react_theme_1.tokens.durationFaster,
27
- transitionProperty: 'background, border, color',
28
- transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
29
- '@media screen and (prefers-reduced-motion: reduce)': {
30
- transitionDuration: '0.01ms',
31
36
  },
32
- },
37
+ _b), padding: buttonSpacingMedium + " " + react_theme_1.tokens.spacingHorizontalM, minWidth: '96px', borderRadius: react_theme_1.tokens.borderRadiusMedium, fontSize: react_theme_1.tokens.fontSizeBase300, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase300,
38
+ // Transition styles
39
+ transitionDuration: react_theme_1.tokens.durationFaster, transitionProperty: 'background, border, color', transitionTimingFunction: react_theme_1.tokens.curveEasyEase, '@media screen and (prefers-reduced-motion: reduce)': {
40
+ transitionDuration: '0.01ms',
41
+ },
33
42
  // High contrast styles
34
- highContrast: {
35
- '@media (forced-colors: active)': {
36
- ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('ButtonText')),
37
- ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
38
- ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
43
+ '@media (forced-colors: active)': {
44
+ ':focus': {
45
+ borderColor: 'ButtonText',
46
+ },
47
+ ':hover': {
48
+ backgroundColor: 'HighlightText',
49
+ borderColor: 'Highlight',
50
+ color: 'Highlight',
51
+ forcedColorAdjust: 'none',
39
52
  },
53
+ ':hover:active': {
54
+ backgroundColor: 'HighlightText',
55
+ borderColor: 'Highlight',
56
+ color: 'Highlight',
57
+ forcedColorAdjust: 'none',
58
+ },
59
+ } }, react_tabster_1.createCustomFocusIndicatorStyle({
60
+ borderColor: react_theme_1.tokens.colorTransparentStroke,
61
+ borderRadius: react_theme_1.tokens.borderRadiusMedium,
62
+ outline: react_theme_1.tokens.strokeWidthThick + " solid " + react_theme_1.tokens.colorTransparentStroke,
63
+ boxShadow: "\n " + react_theme_1.tokens.shadow4 + ",\n 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 + "\n ",
64
+ zIndex: 1,
65
+ })));
66
+ var useIconBaseClassName = react_1.makeResetStyles((_c = {
67
+ alignItems: 'center',
68
+ display: 'inline-flex',
69
+ justifyContent: 'center',
70
+ fontSize: '20px',
71
+ height: '20px',
72
+ width: '20px'
40
73
  },
74
+ _c[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
75
+ _c));
76
+ var useRootStyles = react_1.makeStyles({
41
77
  // Appearance variations
42
78
  outline: {
43
79
  backgroundColor: react_theme_1.tokens.colorTransparentBackground,
@@ -52,11 +88,11 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
52
88
  secondary: {
53
89
  /* The secondary styles are exactly the same as the base styles. */
54
90
  },
55
- subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover }, react_1.shorthands.borderColor('transparent')), (_c = { color: react_theme_1.tokens.colorNeutralForeground2Hover }, _c["& ." + exports.buttonClassNames.icon] = {
91
+ subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover }, react_1.shorthands.borderColor('transparent')), (_d = { color: react_theme_1.tokens.colorNeutralForeground2Hover }, _d["& ." + exports.buttonClassNames.icon] = {
56
92
  color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
57
- }, _c)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed }, react_1.shorthands.borderColor('transparent')), (_d = { color: react_theme_1.tokens.colorNeutralForeground2Pressed }, _d["& ." + exports.buttonClassNames.icon] = {
93
+ }, _d)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed }, react_1.shorthands.borderColor('transparent')), (_e = { color: react_theme_1.tokens.colorNeutralForeground2Pressed }, _e["& ." + exports.buttonClassNames.icon] = {
58
94
  color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
59
- }, _d)) }),
95
+ }, _e)) }),
60
96
  transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandHover }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandPressed }) }),
61
97
  // Shape variations
62
98
  circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
@@ -66,20 +102,22 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
66
102
  square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
67
103
  // Size variations
68
104
  small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), { minWidth: '64px' }), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
69
- medium: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingMedium, react_theme_1.tokens.spacingHorizontalM)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase300, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
105
+ medium: {
106
+ /* defined in base styles */
107
+ },
70
108
  large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalL)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
71
109
  });
72
110
  var useRootDisabledStyles = react_1.makeStyles({
73
111
  // Base styles
74
- base: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_e = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _e["& ." + react_icons_1.iconFilledClassName] = {
112
+ base: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_f = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _f["& ." + react_icons_1.iconFilledClassName] = {
75
113
  display: 'none',
76
- }, _e["& ." + react_icons_1.iconRegularClassName] = {
114
+ }, _f["& ." + react_icons_1.iconRegularClassName] = {
77
115
  display: 'inline',
78
- }, _e)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_f = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _f["& ." + react_icons_1.iconFilledClassName] = {
116
+ }, _f)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_g = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _g["& ." + react_icons_1.iconFilledClassName] = {
79
117
  display: 'none',
80
- }, _f["& ." + react_icons_1.iconRegularClassName] = {
118
+ }, _g["& ." + react_icons_1.iconRegularClassName] = {
81
119
  display: 'inline',
82
- }, _f)) }),
120
+ }, _g)) }),
83
121
  // High contrast styles
84
122
  highContrast: {
85
123
  '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
@@ -102,7 +140,6 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
102
140
  transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
103
141
  });
104
142
  var useRootFocusStyles = react_1.makeStyles({
105
- base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)), { outlineColor: react_theme_1.tokens.colorTransparentStroke, outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineStyle: 'solid', boxShadow: "\n " + react_theme_1.tokens.shadow4 + ",\n 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 + "\n ", zIndex: 1 })),
106
143
  // Shape variations
107
144
  circular: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular))),
108
145
  rounded: {
@@ -113,7 +150,9 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
113
150
  primary: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralForegroundOnBrand)), { boxShadow: react_theme_1.tokens.shadow2 + ", 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 })),
114
151
  // Size variations
115
152
  small: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall))),
116
- medium: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium))),
153
+ medium: {
154
+ /* defined in base styles */
155
+ },
117
156
  large: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge))),
118
157
  });
119
158
  var useRootIconOnlyStyles = react_1.makeStyles({
@@ -123,27 +162,17 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
123
162
  large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalSNudge)), { minWidth: '40px', maxWidth: '40px' }),
124
163
  });
125
164
  var useIconStyles = react_1.makeStyles({
126
- // Base styles
127
- base: {
128
- alignItems: 'center',
129
- display: 'inline-flex',
130
- justifyContent: 'center',
131
- },
132
165
  // Size variations
133
- small: (_g = {
134
- fontSize: '20px',
135
- height: '20px',
136
- width: '20px'
137
- },
138
- _g[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalXS,
139
- _g),
140
- medium: (_h = {
166
+ small: (_h = {
141
167
  fontSize: '20px',
142
168
  height: '20px',
143
169
  width: '20px'
144
170
  },
145
- _h[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
171
+ _h[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalXS,
146
172
  _h),
173
+ medium: {
174
+ /* defined in base styles */
175
+ },
147
176
  large: (_j = {
148
177
  fontSize: '24px',
149
178
  height: '24px',
@@ -160,25 +189,25 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
160
189
  },
161
190
  });
162
191
  var useButtonStyles_unstable = function (state) {
192
+ var rootBaseClassName = useRootBaseClassName();
193
+ var iconBaseClassName = useIconBaseClassName();
163
194
  var rootStyles = useRootStyles();
164
195
  var rootDisabledStyles = useRootDisabledStyles();
165
196
  var rootFocusStyles = useRootFocusStyles();
166
197
  var rootIconOnlyStyles = useRootIconOnlyStyles();
167
198
  var iconStyles = useIconStyles();
168
199
  var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
169
- state.root.className = react_1.mergeClasses(exports.buttonClassNames.root,
170
- // Root styles
171
- rootStyles.base, rootStyles.transition, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape],
200
+ state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape],
172
201
  // Disabled styles
173
202
  (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
174
203
  // Focus styles
175
- rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape],
204
+ appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape],
176
205
  // Icon-only styles
177
206
  iconOnly && rootIconOnlyStyles[size],
178
207
  // User provided class name
179
208
  state.root.className);
180
209
  if (state.icon) {
181
- state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
210
+ state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconBaseClassName, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
182
211
  }
183
212
  return state;
184
213
  };
package/lib-amd/components/Button/useButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n ...shorthands.overflow('hidden'),\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n },\n\n // Transition styles\n transition: {\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':focus': {\n ...shorthands.borderColor('ButtonText'),\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n minWidth: '64px',\n\n ...shorthands.borderRadius(buttonSpacingSmall),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium, tokens.spacingHorizontalM),\n\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),\n\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n outlineColor: tokens.colorTransparentStroke,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.transition,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n minWidth: '64px',\n\n ...shorthands.borderRadius(buttonSpacingSmall),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),\n\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: {\n /* defined in base styles */\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}