@fluentui/react-button 0.0.0-nightly-20250702-0405.1 → 0.0.0-nightly-20250703-1103.1
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.
- package/CHANGELOG.md +13 -13
- package/lib/components/Button/useButtonStyles.styles.raw.js +488 -0
- package/lib/components/Button/useButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +241 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js +112 -0
- package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js +158 -0
- package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +226 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js +495 -0
- package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +253 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js +129 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js +174 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js +237 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -0
- package/package.json +10 -10
@@ -0,0 +1,237 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
toggleButtonClassNames: function() {
|
13
|
+
return toggleButtonClassNames;
|
14
|
+
},
|
15
|
+
useToggleButtonStyles_unstable: function() {
|
16
|
+
return useToggleButtonStyles_unstable;
|
17
|
+
}
|
18
|
+
});
|
19
|
+
const _reacticons = require("@fluentui/react-icons");
|
20
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
21
|
+
const _reacttheme = require("@fluentui/react-theme");
|
22
|
+
const _react = require("@griffel/react");
|
23
|
+
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
|
24
|
+
const toggleButtonClassNames = {
|
25
|
+
root: 'fui-ToggleButton',
|
26
|
+
icon: 'fui-ToggleButton__icon'
|
27
|
+
};
|
28
|
+
const useRootCheckedStyles = (0, _react.makeStyles)({
|
29
|
+
// Base styles
|
30
|
+
base: {
|
31
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
|
32
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
33
|
+
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
34
|
+
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin),
|
35
|
+
[`& .${_reacticons.iconFilledClassName}`]: {
|
36
|
+
display: 'inline'
|
37
|
+
},
|
38
|
+
[`& .${_reacticons.iconRegularClassName}`]: {
|
39
|
+
display: 'none'
|
40
|
+
},
|
41
|
+
':hover': {
|
42
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
43
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
|
44
|
+
color: _reacttheme.tokens.colorNeutralForeground1Hover
|
45
|
+
},
|
46
|
+
':hover:active': {
|
47
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
|
48
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
|
49
|
+
color: _reacttheme.tokens.colorNeutralForeground1Pressed
|
50
|
+
}
|
51
|
+
},
|
52
|
+
// High contrast styles
|
53
|
+
highContrast: {
|
54
|
+
'@media (forced-colors: active)': {
|
55
|
+
backgroundColor: 'Highlight',
|
56
|
+
..._react.shorthands.borderColor('Highlight'),
|
57
|
+
color: 'HighlightText',
|
58
|
+
forcedColorAdjust: 'none',
|
59
|
+
':hover': {
|
60
|
+
backgroundColor: 'HighlightText',
|
61
|
+
..._react.shorthands.borderColor('Highlight'),
|
62
|
+
color: 'Highlight'
|
63
|
+
},
|
64
|
+
':hover:active': {
|
65
|
+
backgroundColor: 'HighlightText',
|
66
|
+
..._react.shorthands.borderColor('Highlight'),
|
67
|
+
color: 'Highlight'
|
68
|
+
},
|
69
|
+
':focus': {
|
70
|
+
border: '1px solid HighlightText',
|
71
|
+
outlineColor: 'Highlight'
|
72
|
+
}
|
73
|
+
}
|
74
|
+
},
|
75
|
+
// Appearance variations
|
76
|
+
outline: {
|
77
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
78
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
79
|
+
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
|
80
|
+
':hover': {
|
81
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
|
82
|
+
},
|
83
|
+
':hover:active': {
|
84
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
|
85
|
+
},
|
86
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
87
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
|
88
|
+
})
|
89
|
+
},
|
90
|
+
primary: {
|
91
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected,
|
92
|
+
..._react.shorthands.borderColor('transparent'),
|
93
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
|
94
|
+
':hover': {
|
95
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
|
96
|
+
..._react.shorthands.borderColor('transparent'),
|
97
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
98
|
+
},
|
99
|
+
':hover:active': {
|
100
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
|
101
|
+
..._react.shorthands.borderColor('transparent'),
|
102
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
103
|
+
}
|
104
|
+
},
|
105
|
+
secondary: {},
|
106
|
+
subtle: {
|
107
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
|
108
|
+
..._react.shorthands.borderColor('transparent'),
|
109
|
+
color: _reacttheme.tokens.colorNeutralForeground2Selected,
|
110
|
+
':hover': {
|
111
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
|
112
|
+
..._react.shorthands.borderColor('transparent'),
|
113
|
+
color: _reacttheme.tokens.colorNeutralForeground2Hover
|
114
|
+
},
|
115
|
+
':hover:active': {
|
116
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
|
117
|
+
..._react.shorthands.borderColor('transparent'),
|
118
|
+
color: _reacttheme.tokens.colorNeutralForeground2Pressed
|
119
|
+
}
|
120
|
+
},
|
121
|
+
transparent: {
|
122
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
123
|
+
..._react.shorthands.borderColor('transparent'),
|
124
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected,
|
125
|
+
':hover': {
|
126
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
127
|
+
..._react.shorthands.borderColor('transparent'),
|
128
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandHover
|
129
|
+
},
|
130
|
+
':hover:active': {
|
131
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
132
|
+
..._react.shorthands.borderColor('transparent'),
|
133
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
|
134
|
+
}
|
135
|
+
}
|
136
|
+
});
|
137
|
+
const useRootDisabledStyles = (0, _react.makeStyles)({
|
138
|
+
// Base styles
|
139
|
+
base: {
|
140
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
141
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
142
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
143
|
+
':hover': {
|
144
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
145
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
146
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
147
|
+
},
|
148
|
+
':hover:active': {
|
149
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
150
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
151
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
152
|
+
}
|
153
|
+
},
|
154
|
+
// Appearance variations
|
155
|
+
outline: {},
|
156
|
+
primary: {
|
157
|
+
..._react.shorthands.borderColor('transparent'),
|
158
|
+
':hover': {
|
159
|
+
..._react.shorthands.borderColor('transparent')
|
160
|
+
},
|
161
|
+
':hover:active': {
|
162
|
+
..._react.shorthands.borderColor('transparent')
|
163
|
+
}
|
164
|
+
},
|
165
|
+
secondary: {},
|
166
|
+
subtle: {
|
167
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
168
|
+
..._react.shorthands.borderColor('transparent'),
|
169
|
+
':hover': {
|
170
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
171
|
+
..._react.shorthands.borderColor('transparent')
|
172
|
+
},
|
173
|
+
':hover:active': {
|
174
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
175
|
+
..._react.shorthands.borderColor('transparent')
|
176
|
+
}
|
177
|
+
},
|
178
|
+
transparent: {
|
179
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
180
|
+
..._react.shorthands.borderColor('transparent'),
|
181
|
+
':hover': {
|
182
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
183
|
+
..._react.shorthands.borderColor('transparent')
|
184
|
+
},
|
185
|
+
':hover:active': {
|
186
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
187
|
+
..._react.shorthands.borderColor('transparent')
|
188
|
+
}
|
189
|
+
}
|
190
|
+
});
|
191
|
+
const useIconCheckedStyles = (0, _react.makeStyles)({
|
192
|
+
// Appearance variations
|
193
|
+
subtleOrTransparent: {
|
194
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
195
|
+
},
|
196
|
+
// High contrast styles
|
197
|
+
highContrast: {
|
198
|
+
'@media (forced-colors: active)': {
|
199
|
+
forcedColorAdjust: 'auto'
|
200
|
+
}
|
201
|
+
}
|
202
|
+
});
|
203
|
+
const usePrimaryHighContrastStyles = (0, _react.makeStyles)({
|
204
|
+
// Do not use primary variant high contrast styles for toggle buttons
|
205
|
+
// otherwise there isn't enough difference between on/off states
|
206
|
+
base: {
|
207
|
+
'@media (forced-colors: active)': {
|
208
|
+
backgroundColor: 'ButtonFace',
|
209
|
+
..._react.shorthands.borderColor('ButtonBorder'),
|
210
|
+
color: 'ButtonText',
|
211
|
+
forcedColorAdjust: 'auto'
|
212
|
+
}
|
213
|
+
},
|
214
|
+
disabled: {
|
215
|
+
'@media (forced-colors: active)': {
|
216
|
+
..._react.shorthands.borderColor('GrayText'),
|
217
|
+
color: 'GrayText',
|
218
|
+
':focus': {
|
219
|
+
..._react.shorthands.borderColor('GrayText')
|
220
|
+
}
|
221
|
+
}
|
222
|
+
}
|
223
|
+
});
|
224
|
+
const useToggleButtonStyles_unstable = (state)=>{
|
225
|
+
'use no memo';
|
226
|
+
const rootCheckedStyles = useRootCheckedStyles();
|
227
|
+
const rootDisabledStyles = useRootDisabledStyles();
|
228
|
+
const iconCheckedStyles = useIconCheckedStyles();
|
229
|
+
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
|
230
|
+
const { appearance, checked, disabled, disabledFocusable } = state;
|
231
|
+
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
|
232
|
+
if (state.icon) {
|
233
|
+
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
234
|
+
}
|
235
|
+
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
|
236
|
+
return state;
|
237
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\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.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\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\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\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.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["toggleButtonClassNames","useToggleButtonStyles_unstable","root","icon","useRootCheckedStyles","makeStyles","base","backgroundColor","tokens","colorNeutralBackground1Selected","shorthands","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","iconFilledClassName","display","iconRegularClassName","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","createCustomFocusIndicatorStyle","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className","mergeClasses","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-button",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20250703-1103.1",
|
4
4
|
"description": "Fluent UI React Button component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -14,19 +14,19 @@
|
|
14
14
|
"devDependencies": {
|
15
15
|
"@fluentui/a11y-testing": "*",
|
16
16
|
"@fluentui/eslint-plugin": "*",
|
17
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
18
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
17
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20250703-1103.1",
|
18
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250703-1103.1",
|
19
19
|
"@fluentui/scripts-api-extractor": "*"
|
20
20
|
},
|
21
21
|
"dependencies": {
|
22
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
23
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
22
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20250703-1103.1",
|
23
|
+
"@fluentui/react-aria": "0.0.0-nightly-20250703-1103.1",
|
24
24
|
"@fluentui/react-icons": "^2.0.245",
|
25
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
26
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
27
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
28
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
29
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
25
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250703-1103.1",
|
26
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250703-1103.1",
|
27
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20250703-1103.1",
|
28
|
+
"@fluentui/react-theme": "0.0.0-nightly-20250703-1103.1",
|
29
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20250703-1103.1",
|
30
30
|
"@griffel/react": "^1.5.22",
|
31
31
|
"@swc/helpers": "^0.5.1"
|
32
32
|
},
|