@fluentui/react-button 0.0.0-nightly-20240822-1237.1 → 0.0.0-nightly-20240823-1802.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 -33
- package/lib/components/Button/useButtonStyles.styles.js +79 -79
- package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +40 -40
- package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.styles.js +19 -19
- package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.styles.js +14 -14
- package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +45 -45
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.styles.js +130 -120
- package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +64 -55
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +34 -30
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +48 -42
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +80 -74
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/package.json +10 -10
|
@@ -49,13 +49,13 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
49
49
|
"f1efpmoh",
|
|
50
50
|
"f130t4y6"
|
|
51
51
|
],
|
|
52
|
-
sj55zd: "
|
|
52
|
+
sj55zd: "f1finf92"
|
|
53
53
|
},
|
|
54
54
|
primary: {
|
|
55
|
-
De3pzq: "
|
|
55
|
+
De3pzq: "f12rqg2x"
|
|
56
56
|
},
|
|
57
57
|
secondary: {
|
|
58
|
-
De3pzq: "
|
|
58
|
+
De3pzq: "fycfq0p",
|
|
59
59
|
g2u3we: "f1ly1fcm",
|
|
60
60
|
h3c5rm: [
|
|
61
61
|
"fi8bssc",
|
|
@@ -66,15 +66,15 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
66
66
|
"fj6btzu",
|
|
67
67
|
"fi8bssc"
|
|
68
68
|
],
|
|
69
|
-
sj55zd: "
|
|
69
|
+
sj55zd: "f1fndet9"
|
|
70
70
|
},
|
|
71
71
|
subtle: {
|
|
72
|
-
De3pzq: "
|
|
73
|
-
sj55zd: "
|
|
72
|
+
De3pzq: "fqsphwg",
|
|
73
|
+
sj55zd: "f1azrvd3"
|
|
74
74
|
},
|
|
75
75
|
transparent: {
|
|
76
|
-
De3pzq: "
|
|
77
|
-
sj55zd: "
|
|
76
|
+
De3pzq: "fn0l55a",
|
|
77
|
+
sj55zd: "f161y6v8"
|
|
78
78
|
}
|
|
79
79
|
}, {
|
|
80
80
|
d: [
|
|
@@ -88,36 +88,39 @@ const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
88
88
|
".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
|
|
89
89
|
".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
|
|
90
90
|
".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
|
|
91
|
-
".
|
|
92
|
-
".
|
|
93
|
-
".
|
|
94
|
-
".
|
|
95
|
-
".
|
|
96
|
-
".
|
|
97
|
-
".
|
|
91
|
+
".f1finf92{color:var(--61, var(--62, var(--colorNeutralForeground1Selected)));}",
|
|
92
|
+
".f12rqg2x{background-color:var(--63, var(--64, var(--colorBrandBackgroundSelected)));}",
|
|
93
|
+
".fycfq0p{background-color:var(--65, var(--66, var(--colorNeutralBackground1Selected)));}",
|
|
94
|
+
".f1fndet9{color:var(--67, var(--68, var(--colorNeutralForeground1Selected)));}",
|
|
95
|
+
".fqsphwg{background-color:var(--69, var(--70, var(--colorSubtleBackgroundSelected)));}",
|
|
96
|
+
".f1azrvd3{color:var(--71, var(--72, var(--colorNeutralForeground2Selected)));}",
|
|
97
|
+
".fn0l55a{background-color:var(--73, var(--74, var(--colorTransparentBackgroundSelected)));}",
|
|
98
|
+
".f161y6v8{color:var(--75, var(--76, var(--colorNeutralForeground2BrandSelected)));}"
|
|
98
99
|
]
|
|
99
100
|
});
|
|
100
101
|
const useIconExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
101
102
|
outline: {
|
|
102
|
-
sj55zd: "
|
|
103
|
+
sj55zd: "ftk8xbm"
|
|
103
104
|
},
|
|
104
105
|
primary: {},
|
|
105
106
|
secondary: {
|
|
106
|
-
sj55zd: "
|
|
107
|
+
sj55zd: "fgnw87d"
|
|
107
108
|
},
|
|
108
109
|
subtle: {
|
|
109
|
-
sj55zd: "
|
|
110
|
+
sj55zd: "fvqox4k"
|
|
110
111
|
},
|
|
111
112
|
transparent: {
|
|
112
|
-
sj55zd: "
|
|
113
|
+
sj55zd: "fg854at"
|
|
113
114
|
},
|
|
114
115
|
highContrast: {
|
|
115
116
|
ze5xyy: "fqyhrn0"
|
|
116
117
|
}
|
|
117
118
|
}, {
|
|
118
119
|
d: [
|
|
119
|
-
".
|
|
120
|
-
".
|
|
120
|
+
".ftk8xbm{color:var(--77, var(--78, var(--colorNeutralForeground1Selected)));}",
|
|
121
|
+
".fgnw87d{color:var(--79, var(--80, var(--colorNeutralForeground1Selected)));}",
|
|
122
|
+
".fvqox4k{color:var(--81, var(--82, var(--colorNeutralForeground2BrandSelected)));}",
|
|
123
|
+
".fg854at{color:var(--83, var(--84, var(--colorNeutralForeground2BrandSelected)));}"
|
|
121
124
|
],
|
|
122
125
|
m: [
|
|
123
126
|
[
|
|
@@ -135,25 +138,25 @@ const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
135
138
|
small: {
|
|
136
139
|
Be2twd7: "f1ugzwwg",
|
|
137
140
|
Bqenvij: "fvblgha",
|
|
138
|
-
Bg96gwp: "
|
|
141
|
+
Bg96gwp: "f1icsd6r",
|
|
139
142
|
a9b677: "frx94fk"
|
|
140
143
|
},
|
|
141
144
|
medium: {
|
|
142
145
|
Be2twd7: "f1ugzwwg",
|
|
143
146
|
Bqenvij: "fvblgha",
|
|
144
|
-
Bg96gwp: "
|
|
147
|
+
Bg96gwp: "f1ug5xja",
|
|
145
148
|
a9b677: "frx94fk"
|
|
146
149
|
},
|
|
147
150
|
large: {
|
|
148
151
|
Be2twd7: "f4ybsrx",
|
|
149
152
|
Bqenvij: "fd461yt",
|
|
150
|
-
Bg96gwp: "
|
|
153
|
+
Bg96gwp: "fgxsxhu",
|
|
151
154
|
a9b677: "fjw5fx7"
|
|
152
155
|
},
|
|
153
156
|
notIconOnly: {
|
|
154
157
|
Frg6f3: [
|
|
155
|
-
"
|
|
156
|
-
"
|
|
158
|
+
"f1en42g9",
|
|
159
|
+
"fesyhy"
|
|
157
160
|
]
|
|
158
161
|
}
|
|
159
162
|
}, {
|
|
@@ -161,14 +164,15 @@ const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
161
164
|
".fez10in{line-height:0;}",
|
|
162
165
|
".f1ugzwwg{font-size:12px;}",
|
|
163
166
|
".fvblgha{height:12px;}",
|
|
164
|
-
".
|
|
167
|
+
".f1icsd6r{line-height:var(--85, var(--86, var(--lineHeightBase200)));}",
|
|
165
168
|
".frx94fk{width:12px;}",
|
|
169
|
+
".f1ug5xja{line-height:var(--87, var(--88, var(--lineHeightBase200)));}",
|
|
166
170
|
".f4ybsrx{font-size:16px;}",
|
|
167
171
|
".fd461yt{height:16px;}",
|
|
168
|
-
".
|
|
172
|
+
".fgxsxhu{line-height:var(--89, var(--90, var(--lineHeightBase400)));}",
|
|
169
173
|
".fjw5fx7{width:16px;}",
|
|
170
|
-
".
|
|
171
|
-
".
|
|
174
|
+
".f1en42g9{margin-left:var(--91, var(--92, var(--spacingHorizontalXS)));}",
|
|
175
|
+
".fesyhy{margin-right:var(--91, var(--92, var(--spacingHorizontalXS)));}"
|
|
172
176
|
]
|
|
173
177
|
});
|
|
174
178
|
const useMenuButtonStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected
|
|
1
|
+
{"version":3,"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: `var(--61, var(--62, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n backgroundColor: `var(--63, var(--64, ${tokens.colorBrandBackgroundSelected}))`\n },\n secondary: {\n backgroundColor: `var(--65, var(--66, ${tokens.colorNeutralBackground1Selected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: `var(--67, var(--68, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n backgroundColor: `var(--69, var(--70, ${tokens.colorSubtleBackgroundSelected}))`,\n color: `var(--71, var(--72, ${tokens.colorNeutralForeground2Selected}))`\n },\n transparent: {\n backgroundColor: `var(--73, var(--74, ${tokens.colorTransparentBackgroundSelected}))`,\n color: `var(--75, var(--76, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n});\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: `var(--77, var(--78, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n },\n secondary: {\n color: `var(--79, var(--80, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n color: `var(--81, var(--82, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n transparent: {\n color: `var(--83, var(--84, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Canvas'\n }\n }\n }\n});\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0\n },\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: `var(--85, var(--86, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: `var(--87, var(--88, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: `var(--89, var(--90, ${tokens.lineHeightBase400}))`,\n width: '16px'\n },\n // Not-icon only\n notIconOnly: {\n marginLeft: `var(--91, var(--92, ${tokens.spacingHorizontalXS}))`\n }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n }\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n }\n useButtonStyles_unstable({\n ...state,\n iconPosition: 'before'\n });\n return state;\n};\n"],"names":["menuButtonClassNames","useMenuButtonStyles_unstable","root","icon","menuIcon","useRootExpandedStyles","__styles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -88,16 +88,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
88
88
|
outline: {},
|
|
89
89
|
primary: {
|
|
90
90
|
B1l9wao: [
|
|
91
|
-
"
|
|
92
|
-
"
|
|
91
|
+
"ftvqy83",
|
|
92
|
+
"fnfyj41"
|
|
93
93
|
],
|
|
94
94
|
lcnrd8: [
|
|
95
|
-
"
|
|
96
|
-
"
|
|
95
|
+
"f9xh180",
|
|
96
|
+
"f1w8ntad"
|
|
97
97
|
],
|
|
98
98
|
Brbpp8k: [
|
|
99
|
-
"
|
|
100
|
-
"
|
|
99
|
+
"fxn1fl2",
|
|
100
|
+
"fgyet80"
|
|
101
101
|
],
|
|
102
102
|
Bcsxniv: [
|
|
103
103
|
"ff0tx2l",
|
|
@@ -115,30 +115,30 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
115
115
|
secondary: {},
|
|
116
116
|
subtle: {
|
|
117
117
|
B1l9wao: [
|
|
118
|
-
"
|
|
119
|
-
"
|
|
118
|
+
"f1yo4dgb",
|
|
119
|
+
"ff6yatw"
|
|
120
120
|
],
|
|
121
121
|
lcnrd8: [
|
|
122
|
-
"
|
|
123
|
-
"
|
|
122
|
+
"f1afbnnz",
|
|
123
|
+
"f9myr3o"
|
|
124
124
|
],
|
|
125
125
|
Brbpp8k: [
|
|
126
|
-
"
|
|
127
|
-
"
|
|
126
|
+
"fbqtpi2",
|
|
127
|
+
"f1njbwn0"
|
|
128
128
|
]
|
|
129
129
|
},
|
|
130
130
|
transparent: {
|
|
131
131
|
B1l9wao: [
|
|
132
|
-
"
|
|
133
|
-
"
|
|
132
|
+
"f1ebgnyd",
|
|
133
|
+
"f8coqc"
|
|
134
134
|
],
|
|
135
135
|
lcnrd8: [
|
|
136
|
-
"
|
|
137
|
-
"
|
|
136
|
+
"f152rz25",
|
|
137
|
+
"f1fm6l08"
|
|
138
138
|
],
|
|
139
139
|
Brbpp8k: [
|
|
140
|
-
"
|
|
141
|
-
"
|
|
140
|
+
"fx9f09k",
|
|
141
|
+
"fsc52d9"
|
|
142
142
|
]
|
|
143
143
|
},
|
|
144
144
|
circular: {},
|
|
@@ -146,16 +146,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
146
146
|
square: {},
|
|
147
147
|
disabled: {
|
|
148
148
|
B1l9wao: [
|
|
149
|
-
"
|
|
150
|
-
"
|
|
149
|
+
"f1t6iz8f",
|
|
150
|
+
"fe4c7e8"
|
|
151
151
|
],
|
|
152
152
|
lcnrd8: [
|
|
153
|
-
"
|
|
154
|
-
"
|
|
153
|
+
"fs0yi99",
|
|
154
|
+
"f13k3mky"
|
|
155
155
|
],
|
|
156
156
|
Brbpp8k: [
|
|
157
|
-
"
|
|
158
|
-
"
|
|
157
|
+
"fb9uzha",
|
|
158
|
+
"f472bms"
|
|
159
159
|
]
|
|
160
160
|
},
|
|
161
161
|
disabledHighContrast: {
|
|
@@ -189,26 +189,32 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
189
189
|
".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}",
|
|
190
190
|
".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}",
|
|
191
191
|
".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}",
|
|
192
|
-
".
|
|
193
|
-
".
|
|
194
|
-
".
|
|
195
|
-
".
|
|
196
|
-
".
|
|
197
|
-
".
|
|
192
|
+
".ftvqy83 .fui-SplitButton__primaryActionButton{border-right-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}",
|
|
193
|
+
".fnfyj41 .fui-SplitButton__primaryActionButton{border-left-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}",
|
|
194
|
+
".f1yo4dgb .fui-SplitButton__primaryActionButton{border-right-color:var(--99, var(--100, var(--colorNeutralStroke1)));}",
|
|
195
|
+
".ff6yatw .fui-SplitButton__primaryActionButton{border-left-color:var(--99, var(--100, var(--colorNeutralStroke1)));}",
|
|
196
|
+
".f1ebgnyd .fui-SplitButton__primaryActionButton{border-right-color:var(--105, var(--106, var(--colorNeutralStroke1)));}",
|
|
197
|
+
".f8coqc .fui-SplitButton__primaryActionButton{border-left-color:var(--105, var(--106, var(--colorNeutralStroke1)));}",
|
|
198
|
+
".f1t6iz8f .fui-SplitButton__primaryActionButton{border-right-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}",
|
|
199
|
+
".fe4c7e8 .fui-SplitButton__primaryActionButton{border-left-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}"
|
|
198
200
|
],
|
|
199
201
|
h: [
|
|
200
|
-
".
|
|
201
|
-
".
|
|
202
|
-
".
|
|
203
|
-
".
|
|
204
|
-
".
|
|
205
|
-
".
|
|
206
|
-
".
|
|
207
|
-
".
|
|
208
|
-
".
|
|
209
|
-
".
|
|
210
|
-
".
|
|
211
|
-
".
|
|
202
|
+
".f9xh180:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}",
|
|
203
|
+
".f1w8ntad:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}",
|
|
204
|
+
".fxn1fl2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}",
|
|
205
|
+
".fgyet80:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}",
|
|
206
|
+
".f1afbnnz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}",
|
|
207
|
+
".f9myr3o:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}",
|
|
208
|
+
".fbqtpi2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}",
|
|
209
|
+
".f1njbwn0:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}",
|
|
210
|
+
".f152rz25:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}",
|
|
211
|
+
".f1fm6l08:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}",
|
|
212
|
+
".fx9f09k:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}",
|
|
213
|
+
".fsc52d9:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}",
|
|
214
|
+
".fs0yi99:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}",
|
|
215
|
+
".f13k3mky:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}",
|
|
216
|
+
".fb9uzha:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}",
|
|
217
|
+
".f472bms:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}"
|
|
212
218
|
],
|
|
213
219
|
m: [
|
|
214
220
|
[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand
|
|
1
|
+
{"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--93, var(--94, ${tokens.colorNeutralStrokeOnBrand}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--95, var(--96, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--97, var(--98, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--99, var(--100, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--101, var(--102, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--103, var(--104, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--105, var(--106, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--107, var(--108, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--109, var(--110, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--111, var(--112, ${tokens.colorNeutralStrokeDisabled}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--113, var(--114, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--115, var(--116, ${tokens.colorNeutralStrokeDisabled}))`\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["splitButtonClassNames","useSplitButtonStyles_unstable","root","menuButton","primaryActionButton","useFocusStyles","__styles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|