@fluentui/react-button 0.0.0-nightly-20240730-0407.1 → 0.0.0-nightly-20240816-2133.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.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: "fayvfdb"
|
|
53
53
|
},
|
|
54
54
|
primary: {
|
|
55
|
-
De3pzq: "
|
|
55
|
+
De3pzq: "fdxujar"
|
|
56
56
|
},
|
|
57
57
|
secondary: {
|
|
58
|
-
De3pzq: "
|
|
58
|
+
De3pzq: "f1nuz927",
|
|
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: "f17l1jdj"
|
|
70
70
|
},
|
|
71
71
|
subtle: {
|
|
72
|
-
De3pzq: "
|
|
73
|
-
sj55zd: "
|
|
72
|
+
De3pzq: "fz894wi",
|
|
73
|
+
sj55zd: "f1jcitqj"
|
|
74
74
|
},
|
|
75
75
|
transparent: {
|
|
76
|
-
De3pzq: "
|
|
77
|
-
sj55zd: "
|
|
76
|
+
De3pzq: "f97oqex",
|
|
77
|
+
sj55zd: "f4qlxbq"
|
|
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
|
+
".fayvfdb{color:var(--ctrl-token-MenuButton-61, var(--semantic-token-MenuButton-62, var(--colorNeutralForeground1Selected)));}",
|
|
92
|
+
".fdxujar{background-color:var(--ctrl-token-MenuButton-63, var(--semantic-token-MenuButton-64, var(--colorBrandBackgroundSelected)));}",
|
|
93
|
+
".f1nuz927{background-color:var(--ctrl-token-MenuButton-65, var(--semantic-token-MenuButton-66, var(--colorNeutralBackground1Selected)));}",
|
|
94
|
+
".f17l1jdj{color:var(--ctrl-token-MenuButton-67, var(--semantic-token-MenuButton-68, var(--colorNeutralForeground1Selected)));}",
|
|
95
|
+
".fz894wi{background-color:var(--ctrl-token-MenuButton-69, var(--semantic-token-MenuButton-70, var(--colorSubtleBackgroundSelected)));}",
|
|
96
|
+
".f1jcitqj{color:var(--ctrl-token-MenuButton-71, var(--semantic-token-MenuButton-72, var(--colorNeutralForeground2Selected)));}",
|
|
97
|
+
".f97oqex{background-color:var(--ctrl-token-MenuButton-73, var(--semantic-token-MenuButton-74, var(--colorTransparentBackgroundSelected)));}",
|
|
98
|
+
".f4qlxbq{color:var(--ctrl-token-MenuButton-75, var(--semantic-token-MenuButton-76, var(--colorNeutralForeground2BrandSelected)));}"
|
|
98
99
|
]
|
|
99
100
|
});
|
|
100
101
|
const useIconExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
101
102
|
outline: {
|
|
102
|
-
sj55zd: "
|
|
103
|
+
sj55zd: "f17qtati"
|
|
103
104
|
},
|
|
104
105
|
primary: {},
|
|
105
106
|
secondary: {
|
|
106
|
-
sj55zd: "
|
|
107
|
+
sj55zd: "f15anx2e"
|
|
107
108
|
},
|
|
108
109
|
subtle: {
|
|
109
|
-
sj55zd: "
|
|
110
|
+
sj55zd: "fqg5xc"
|
|
110
111
|
},
|
|
111
112
|
transparent: {
|
|
112
|
-
sj55zd: "
|
|
113
|
+
sj55zd: "f15zfei2"
|
|
113
114
|
},
|
|
114
115
|
highContrast: {
|
|
115
116
|
ze5xyy: "fqyhrn0"
|
|
116
117
|
}
|
|
117
118
|
}, {
|
|
118
119
|
d: [
|
|
119
|
-
".
|
|
120
|
-
".
|
|
120
|
+
".f17qtati{color:var(--ctrl-token-MenuButton-77, var(--semantic-token-MenuButton-78, var(--colorNeutralForeground1Selected)));}",
|
|
121
|
+
".f15anx2e{color:var(--ctrl-token-MenuButton-79, var(--semantic-token-MenuButton-80, var(--colorNeutralForeground1Selected)));}",
|
|
122
|
+
".fqg5xc{color:var(--ctrl-token-MenuButton-81, var(--semantic-token-MenuButton-82, var(--colorNeutralForeground2BrandSelected)));}",
|
|
123
|
+
".f15zfei2{color:var(--ctrl-token-MenuButton-83, var(--semantic-token-MenuButton-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: "f1qvz09l",
|
|
139
142
|
a9b677: "frx94fk"
|
|
140
143
|
},
|
|
141
144
|
medium: {
|
|
142
145
|
Be2twd7: "f1ugzwwg",
|
|
143
146
|
Bqenvij: "fvblgha",
|
|
144
|
-
Bg96gwp: "
|
|
147
|
+
Bg96gwp: "fbr3bm5",
|
|
145
148
|
a9b677: "frx94fk"
|
|
146
149
|
},
|
|
147
150
|
large: {
|
|
148
151
|
Be2twd7: "f4ybsrx",
|
|
149
152
|
Bqenvij: "fd461yt",
|
|
150
|
-
Bg96gwp: "
|
|
153
|
+
Bg96gwp: "ft0ajt3",
|
|
151
154
|
a9b677: "fjw5fx7"
|
|
152
155
|
},
|
|
153
156
|
notIconOnly: {
|
|
154
157
|
Frg6f3: [
|
|
155
|
-
"
|
|
156
|
-
"
|
|
158
|
+
"f11x6m6q",
|
|
159
|
+
"fr8gt1"
|
|
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
|
+
".f1qvz09l{line-height:var(--ctrl-token-MenuButton-85, var(--semantic-token-MenuButton-86, var(--lineHeightBase200)));}",
|
|
165
168
|
".frx94fk{width:12px;}",
|
|
169
|
+
".fbr3bm5{line-height:var(--ctrl-token-MenuButton-87, var(--semantic-token-MenuButton-88, var(--lineHeightBase200)));}",
|
|
166
170
|
".f4ybsrx{font-size:16px;}",
|
|
167
171
|
".fd461yt{height:16px;}",
|
|
168
|
-
".
|
|
172
|
+
".ft0ajt3{line-height:var(--ctrl-token-MenuButton-89, var(--semantic-token-MenuButton-90, var(--lineHeightBase400)));}",
|
|
169
173
|
".fjw5fx7{width:16px;}",
|
|
170
|
-
".
|
|
171
|
-
".
|
|
174
|
+
".f11x6m6q{margin-left:var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-92, var(--spacingHorizontalXS)));}",
|
|
175
|
+
".fr8gt1{margin-right:var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-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(--ctrl-token-MenuButton-61, var(--semantic-token-MenuButton-62, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n backgroundColor: `var(--ctrl-token-MenuButton-63, var(--semantic-token-MenuButton-64, ${tokens.colorBrandBackgroundSelected}))`\n },\n secondary: {\n backgroundColor: `var(--ctrl-token-MenuButton-65, var(--semantic-token-MenuButton-66, ${tokens.colorNeutralBackground1Selected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: `var(--ctrl-token-MenuButton-67, var(--semantic-token-MenuButton-68, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n backgroundColor: `var(--ctrl-token-MenuButton-69, var(--semantic-token-MenuButton-70, ${tokens.colorSubtleBackgroundSelected}))`,\n color: `var(--ctrl-token-MenuButton-71, var(--semantic-token-MenuButton-72, ${tokens.colorNeutralForeground2Selected}))`\n },\n transparent: {\n backgroundColor: `var(--ctrl-token-MenuButton-73, var(--semantic-token-MenuButton-74, ${tokens.colorTransparentBackgroundSelected}))`,\n color: `var(--ctrl-token-MenuButton-75, var(--semantic-token-MenuButton-76, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n});\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: `var(--ctrl-token-MenuButton-77, var(--semantic-token-MenuButton-78, ${tokens.colorNeutralForeground1Selected}))`\n },\n primary: {\n },\n secondary: {\n color: `var(--ctrl-token-MenuButton-79, var(--semantic-token-MenuButton-80, ${tokens.colorNeutralForeground1Selected}))`\n },\n subtle: {\n color: `var(--ctrl-token-MenuButton-81, var(--semantic-token-MenuButton-82, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n transparent: {\n color: `var(--ctrl-token-MenuButton-83, var(--semantic-token-MenuButton-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(--ctrl-token-MenuButton-85, var(--semantic-token-MenuButton-86, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: `var(--ctrl-token-MenuButton-87, var(--semantic-token-MenuButton-88, ${tokens.lineHeightBase200}))`,\n width: '12px'\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: `var(--ctrl-token-MenuButton-89, var(--semantic-token-MenuButton-90, ${tokens.lineHeightBase400}))`,\n width: '16px'\n },\n // Not-icon only\n notIconOnly: {\n marginLeft: `var(--ctrl-token-MenuButton-91, var(--semantic-token-MenuButton-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
|
+
"f8iww82",
|
|
92
|
+
"fp1eu0m"
|
|
93
93
|
],
|
|
94
94
|
lcnrd8: [
|
|
95
|
-
"
|
|
96
|
-
"
|
|
95
|
+
"fuizv1t",
|
|
96
|
+
"f19kwtzy"
|
|
97
97
|
],
|
|
98
98
|
Brbpp8k: [
|
|
99
|
-
"
|
|
100
|
-
"
|
|
99
|
+
"f12aeckf",
|
|
100
|
+
"f1pqs2oh"
|
|
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
|
+
"f90ssbj",
|
|
119
|
+
"f171kakz"
|
|
120
120
|
],
|
|
121
121
|
lcnrd8: [
|
|
122
|
-
"
|
|
123
|
-
"
|
|
122
|
+
"f1qfbe7",
|
|
123
|
+
"f1w6ad1x"
|
|
124
124
|
],
|
|
125
125
|
Brbpp8k: [
|
|
126
|
-
"
|
|
127
|
-
"
|
|
126
|
+
"f1ut8iav",
|
|
127
|
+
"f1l02e3d"
|
|
128
128
|
]
|
|
129
129
|
},
|
|
130
130
|
transparent: {
|
|
131
131
|
B1l9wao: [
|
|
132
|
-
"
|
|
133
|
-
"
|
|
132
|
+
"f1fctejb",
|
|
133
|
+
"fetekt1"
|
|
134
134
|
],
|
|
135
135
|
lcnrd8: [
|
|
136
|
-
"
|
|
137
|
-
"
|
|
136
|
+
"f189lcxo",
|
|
137
|
+
"fjbrolj"
|
|
138
138
|
],
|
|
139
139
|
Brbpp8k: [
|
|
140
|
-
"
|
|
141
|
-
"
|
|
140
|
+
"f1aediod",
|
|
141
|
+
"f10cqcnz"
|
|
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
|
+
"fegwyvo",
|
|
150
|
+
"fmvcv9w"
|
|
151
151
|
],
|
|
152
152
|
lcnrd8: [
|
|
153
|
-
"
|
|
154
|
-
"
|
|
153
|
+
"f1ohjkvm",
|
|
154
|
+
"f13os6i2"
|
|
155
155
|
],
|
|
156
156
|
Brbpp8k: [
|
|
157
|
-
"
|
|
158
|
-
"
|
|
157
|
+
"fli1pn0",
|
|
158
|
+
"fsdmtgg"
|
|
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
|
+
".f8iww82 .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}",
|
|
193
|
+
".fp1eu0m .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}",
|
|
194
|
+
".f90ssbj .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}",
|
|
195
|
+
".f171kakz .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}",
|
|
196
|
+
".f1fctejb .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}",
|
|
197
|
+
".fetekt1 .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}",
|
|
198
|
+
".fegwyvo .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}",
|
|
199
|
+
".fmvcv9w .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}"
|
|
198
200
|
],
|
|
199
201
|
h: [
|
|
200
|
-
".
|
|
201
|
-
".
|
|
202
|
-
".
|
|
203
|
-
".
|
|
204
|
-
".
|
|
205
|
-
".
|
|
206
|
-
".
|
|
207
|
-
".
|
|
208
|
-
".
|
|
209
|
-
".
|
|
210
|
-
".
|
|
211
|
-
".
|
|
202
|
+
".fuizv1t:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}",
|
|
203
|
+
".f19kwtzy:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}",
|
|
204
|
+
".f12aeckf:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}",
|
|
205
|
+
".f1pqs2oh:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}",
|
|
206
|
+
".f1qfbe7:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}",
|
|
207
|
+
".f1w6ad1x:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}",
|
|
208
|
+
".f1ut8iav:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}",
|
|
209
|
+
".f1l02e3d:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}",
|
|
210
|
+
".f189lcxo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}",
|
|
211
|
+
".fjbrolj:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}",
|
|
212
|
+
".f1aediod:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}",
|
|
213
|
+
".f10cqcnz:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}",
|
|
214
|
+
".f1ohjkvm:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}",
|
|
215
|
+
".f13os6i2:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}",
|
|
216
|
+
".fli1pn0:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, var(--colorNeutralStrokeDisabled)));}",
|
|
217
|
+
".fsdmtgg:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-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\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 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: tokens.colorNeutralStroke1\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 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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"}
|
|
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(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, ${tokens.colorNeutralStrokeOnBrand}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-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(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-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(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, ${tokens.colorNeutralStrokeDisabled}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-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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"}
|