@fluentui/react-spinbutton 9.1.6 → 9.1.7

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.
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-input"], function (require, exports, tslib_1, react_1, react_theme_1, react_input_1) {
1
+ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
2
2
  "use strict";
3
3
  var _a, _b, _c, _d, _e, _f, _g, _h;
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
@@ -12,50 +12,117 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
12
12
  var spinButtonExtraClassNames = {
13
13
  buttonActive: 'fui-SpinButton__button_active',
14
14
  };
15
+ var fieldHeights = {
16
+ small: '24px',
17
+ medium: '32px',
18
+ };
19
+ var useRootClassName = react_1.makeResetStyles({
20
+ display: 'inline-grid',
21
+ gridTemplateColumns: "1fr 24px",
22
+ gridTemplateRows: '1fr 1fr',
23
+ columnGap: react_theme_1.tokens.spacingHorizontalXS,
24
+ rowGap: 0,
25
+ position: 'relative',
26
+ isolation: 'isolate',
27
+ backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
28
+ minHeight: fieldHeights.medium,
29
+ padding: "0 0 0 " + react_theme_1.tokens.spacingHorizontalMNudge,
30
+ borderRadius: react_theme_1.tokens.borderRadiusMedium,
31
+ // Apply border styles on the ::before pseudo element.
32
+ // We cannot use ::after since that is used for selection.
33
+ // Using the pseudo element allows us to place the border
34
+ // above content in the component which ensures the buttons
35
+ // line up visually with the border as expected. Without this
36
+ // there is a bit of a gap which can become very noticeable
37
+ // at high zoom or when OS zoom levels are not divisible by 2
38
+ // (e.g., 150% on Windows in Firefox)
39
+ // This is most noticeable on the "outline" appearance which is
40
+ // also the default so it feels worth the extra ceremony to get right.
41
+ '::before': {
42
+ content: '""',
43
+ boxSizing: 'border-box',
44
+ position: 'absolute',
45
+ top: 0,
46
+ right: 0,
47
+ bottom: 0,
48
+ left: 0,
49
+ pointerEvents: 'none',
50
+ zIndex: 10,
51
+ border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1,
52
+ borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
53
+ borderRadius: react_theme_1.tokens.borderRadiusMedium,
54
+ },
55
+ '::after': {
56
+ boxSizing: 'border-box',
57
+ content: '""',
58
+ position: 'absolute',
59
+ right: 0,
60
+ bottom: 0,
61
+ left: 0,
62
+ zIndex: 20,
63
+ // Maintaining the correct corner radius:
64
+ // Use the whole border-radius as the height and only put radii on the bottom corners.
65
+ // (Otherwise the radius would be automatically reduced to fit available space.)
66
+ // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
67
+ height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")",
68
+ borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
69
+ borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
70
+ // Flat 2px border:
71
+ // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
72
+ // (This could be done without trimming using `background: linear-gradient(...)`, but using
73
+ // borderBottom makes it easier for people to override the color if needed.)
74
+ borderBottom: "2px solid " + react_theme_1.tokens.colorCompoundBrandStroke,
75
+ clipPath: 'inset(calc(100% - 2px) 0 0 0)',
76
+ // Animation for focus OUT
77
+ transform: 'scaleX(0)',
78
+ transitionProperty: 'transform',
79
+ transitionDuration: react_theme_1.tokens.durationUltraFast,
80
+ transitionDelay: react_theme_1.tokens.curveAccelerateMid,
81
+ '@media screen and (prefers-reduced-motion: reduce)': {
82
+ transitionDuration: '0.01ms',
83
+ transitionDelay: '0.01ms',
84
+ },
85
+ },
86
+ ':focus-within::after': {
87
+ // Animation for focus IN
88
+ transform: 'scaleX(1)',
89
+ transitionProperty: 'transform',
90
+ transitionDuration: react_theme_1.tokens.durationNormal,
91
+ transitionDelay: react_theme_1.tokens.curveDecelerateMid,
92
+ '@media screen and (prefers-reduced-motion: reduce)': {
93
+ transitionDuration: '0.01ms',
94
+ transitionDelay: '0.01ms',
95
+ },
96
+ },
97
+ ':focus-within:active::after': {
98
+ // This is if the user clicks the field again while it's already focused
99
+ borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
100
+ },
101
+ ':focus-within': {
102
+ outline: '2px solid transparent',
103
+ },
104
+ });
15
105
  var useRootStyles = react_1.makeStyles({
16
- base: tslib_1.__assign(tslib_1.__assign({ display: 'inline-grid', gridTemplateColumns: "1fr 24px", gridTemplateRows: '1fr 1fr', columnGap: react_theme_1.tokens.spacingHorizontalXS, rowGap: 0, paddingRight: 0, position: 'relative' }, react_1.shorthands.border('0')), { isolation: 'isolate',
17
- // Apply border styles on the ::before pseudo element.
18
- // We cannot use ::after since react-input uses that
19
- // for the selector styles.
20
- // Using the pseudo element allows us to place the border
21
- // above content in the component which ensures the buttons
22
- // line up visually with the border as expected. Without this
23
- // there is a bit of a gap which can become very noticeable
24
- // at high zoom or when OS zoom levels are not divisible by 2
25
- // (e.g., 150% on Windows in Firefox)
26
- // This is most noticeable on the "outline" appearance which is
27
- // also the default so it feels worth the extra ceremony to get right.
28
- '::before': tslib_1.__assign(tslib_1.__assign({ content: '""', boxSizing: 'border-box', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { pointerEvents: 'none', zIndex: 10 }), '::after': {
29
- right: 0,
30
- bottom: 0,
31
- left: 0,
32
- zIndex: 20,
33
- } }),
34
- small: {
35
- paddingLeft: react_theme_1.tokens.spacingHorizontalS,
106
+ small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_theme_1.typographyStyles.caption1), { paddingLeft: react_theme_1.tokens.spacingHorizontalS }),
107
+ medium: {
108
+ // set by useRootClassName
36
109
  },
37
- // intentionally empty
38
- medium: {},
39
110
  outline: {
40
- '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
111
+ // set by useRootClassName
41
112
  },
42
113
  outlineInteractive: {
43
- ':hover': {
44
- '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
45
- },
114
+ ':hover::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
46
115
  // DO NOT add a space between the selectors! It changes the behavior of make-styles.
47
116
  ':active,:focus-within': {
48
117
  '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
49
118
  },
50
119
  },
51
120
  underline: {
52
- '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(0)), react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)),
121
+ '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderWidth(0, 0, '1px', 0)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
53
122
  },
54
123
  underlineInteractive: {
55
- ':hover': {
56
- '::before': {
57
- borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
58
- },
124
+ ':hover::before': {
125
+ borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
59
126
  },
60
127
  // DO NOT add a space between the selectors! It changes the behavior of make-styles.
61
128
  ':active,:focus-within': {
@@ -63,10 +130,17 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
63
130
  borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
64
131
  },
65
132
  },
133
+ '::after': react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone), // remove rounded corners from focus underline
66
134
  },
67
135
  filled: {
68
136
  '::before': tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
69
137
  },
138
+ 'filled-darker': {
139
+ backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
140
+ },
141
+ 'filled-lighter': {
142
+ backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
143
+ },
70
144
  filledInteractive: {
71
145
  // DO NOT add a space between the selectors! It changes the behavior of make-styles.
72
146
  ':hover,:focus-within': {
@@ -79,53 +153,104 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
79
153
  },
80
154
  },
81
155
  disabled: {
156
+ cursor: 'not-allowed',
157
+ backgroundColor: react_theme_1.tokens.colorTransparentBackground,
82
158
  '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
83
159
  },
84
160
  });
161
+ var useInputClassName = react_1.makeResetStyles({
162
+ gridColumnStart: '1',
163
+ gridColumnEnd: '2',
164
+ gridRowStart: '1',
165
+ gridRowEnd: '3',
166
+ outlineStyle: 'none',
167
+ border: '0',
168
+ padding: '0',
169
+ color: react_theme_1.tokens.colorNeutralForeground1,
170
+ // Use literal "transparent" (not from the theme) to always let the color from the root show through
171
+ backgroundColor: 'transparent',
172
+ fontFamily: 'inherit',
173
+ fontSize: 'inherit',
174
+ fontWeight: 'inherit',
175
+ lineHeight: 'inherit',
176
+ '::placeholder': {
177
+ color: react_theme_1.tokens.colorNeutralForeground4,
178
+ opacity: 1, // browser style override
179
+ },
180
+ });
85
181
  var useInputStyles = react_1.makeStyles({
86
- base: tslib_1.__assign({ gridColumnStart: '1', gridColumnEnd: '2', gridRowStart: '1', gridRowEnd: '3', outlineStyle: 'none' }, react_1.shorthands.padding(0)),
182
+ disabled: {
183
+ color: react_theme_1.tokens.colorNeutralForegroundDisabled,
184
+ cursor: 'not-allowed',
185
+ backgroundColor: react_theme_1.tokens.colorTransparentBackground,
186
+ '::placeholder': {
187
+ color: react_theme_1.tokens.colorNeutralForegroundDisabled,
188
+ },
189
+ },
190
+ });
191
+ var useBaseButtonClassName = react_1.makeResetStyles({
192
+ display: 'inline-flex',
193
+ width: '24px',
194
+ alignItems: 'center',
195
+ justifyContent: 'center',
196
+ border: '0',
197
+ position: 'absolute',
198
+ outlineStyle: 'none',
199
+ height: '16px',
200
+ // Use literal "transparent" (not from the theme) to always let the color from the root show through
201
+ backgroundColor: 'transparent',
202
+ color: react_theme_1.tokens.colorNeutralForeground3,
203
+ // common button layout
204
+ gridColumnStart: '2',
205
+ borderRadius: '0',
206
+ padding: '0 5px 0 5px',
207
+ ':active': {
208
+ outlineStyle: 'none',
209
+ },
210
+ ':enabled': (_a = {
211
+ ':hover': {
212
+ cursor: 'pointer',
213
+ color: react_theme_1.tokens.colorNeutralForeground3Hover,
214
+ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
215
+ },
216
+ ':active': {
217
+ color: react_theme_1.tokens.colorNeutralForeground3Pressed,
218
+ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
219
+ }
220
+ },
221
+ _a["&." + spinButtonExtraClassNames.buttonActive] = {
222
+ color: react_theme_1.tokens.colorNeutralForeground3Pressed,
223
+ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
224
+ },
225
+ _a),
226
+ ':disabled': {
227
+ cursor: 'not-allowed',
228
+ color: react_theme_1.tokens.colorNeutralForegroundDisabled,
229
+ },
87
230
  });
88
231
  var useButtonStyles = react_1.makeStyles({
89
- base: tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', width: '24px', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.border(0)), { position: 'absolute', outlineStyle: 'none', height: '100%', ':enabled:hover': {
90
- cursor: 'pointer',
91
- }, ':active': {
92
- outlineStyle: 'none',
93
- }, ':disabled': {
94
- cursor: 'not-allowed',
95
- } }),
96
- incrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '1', gridRowEnd: '2' }, react_1.shorthands.borderRadius(0, react_theme_1.tokens.borderRadiusMedium, 0, 0)),
232
+ increment: {
233
+ gridRowStart: '1',
234
+ borderTopRightRadius: react_theme_1.tokens.borderRadiusMedium,
235
+ paddingTop: '4px',
236
+ paddingBottom: '1px',
237
+ },
238
+ decrement: {
239
+ gridRowStart: '2',
240
+ borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
241
+ paddingTop: '1px',
242
+ paddingBottom: '4px',
243
+ },
97
244
  // Padding values numbers don't align with design specs
98
245
  // but visually the padding aligns.
99
246
  // The icons are set in a 16x16px square but the artwork is inset from that
100
247
  // so these padding values are computed by hand.
101
248
  // Additionally the design uses fractional values so these are
102
249
  // rounded to the nearest integer.
103
- incrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')),
104
- incrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('4px', '5px', '1px', '5px')),
105
- decrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '2', gridRowEnd: '3' }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, 0)),
106
- decrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')),
107
- decrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('1px', '5px', '4px', '5px')),
250
+ incrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')), { height: '12px' }),
251
+ decrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')), { height: '12px' }),
108
252
  outline: {
109
- backgroundColor: 'transparent',
110
- color: react_theme_1.tokens.colorNeutralForeground3,
111
- ':enabled': (_a = {
112
- ':hover': {
113
- color: react_theme_1.tokens.colorNeutralForeground3Hover,
114
- backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
115
- },
116
- ':active': {
117
- color: react_theme_1.tokens.colorNeutralForeground3Pressed,
118
- backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
119
- }
120
- },
121
- _a["&." + spinButtonExtraClassNames.buttonActive] = {
122
- color: react_theme_1.tokens.colorNeutralForeground3Pressed,
123
- backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
124
- },
125
- _a),
126
- ':disabled': {
127
- color: react_theme_1.tokens.colorNeutralForegroundDisabled,
128
- },
253
+ // set by useButtonClassName
129
254
  },
130
255
  underline: {
131
256
  backgroundColor: 'transparent',
@@ -284,27 +409,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
284
409
  var buttonStyles = useButtonStyles();
285
410
  var buttonDisabledStyles = useButtonDisabledStyles();
286
411
  var inputStyles = useInputStyles();
287
- // Grab the root className here so we can be sure to merge is last
288
- var rootClassName = state.root.className;
289
- state.root.className = undefined;
290
- // Reuse react-input's styles without re-using the Input component.
291
- react_input_1.useInputStyles_unstable({
292
- size: size,
293
- appearance: appearance,
294
- input: state.input,
295
- root: state.root,
296
- components: {
297
- root: 'span',
298
- input: 'input',
299
- contentBefore: 'span',
300
- contentAfter: 'span',
301
- },
302
- });
303
- state.root.className = react_1.mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
304
- exports.spinButtonClassNames.root, rootStyles.base, rootStyles[size], appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, rootClassName);
305
- state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
306
- state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
307
- state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
412
+ state.root.className = react_1.mergeClasses(exports.spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
413
+ state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
414
+ state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
415
+ state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
308
416
  return state;
309
417
  };
310
418
  exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;
@@ -1 +1 @@
1
- {"version":3,"file":"useSpinButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n small: {\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n // intentionally empty\n medium: {},\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n rootStyles[size],\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"]}
1
+ {"version":3,"file":"useSpinButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n\n backgroundColor: tokens.colorNeutralBackground1,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: tokens.borderRadiusMedium,\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since that is used for selection.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n zIndex: 10,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusMedium,\n },\n\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n medium: {\n // set by useRootClassName\n },\n\n outline: {\n // set by useRootClassName\n },\n\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n },\n },\n\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n border: '0',\n padding: '0',\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n});\n\nconst useInputStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '16px',\n\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: tokens.borderRadiusMedium,\n paddingTop: '4px',\n paddingBottom: '1px',\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: tokens.borderRadiusMedium,\n paddingTop: '1px',\n paddingBottom: '4px',\n },\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n height: '12px',\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n height: '12px',\n },\n\n outline: {\n // set by useButtonClassName\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n spinButtonClassNames.root,\n useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.increment,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.incrementButtonSmall,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.decrement,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.decrementButtonSmall,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(\n spinButtonClassNames.input,\n useInputClassName(),\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"]}