@fluentui/react-button 0.0.0-nightly-20230808-0415.1 → 0.0.0-nightly-20230810-0415.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.
Files changed (17) hide show
  1. package/CHANGELOG.json +84 -21
  2. package/CHANGELOG.md +30 -13
  3. package/lib/components/Button/useButtonStyles.styles.js +14 -25
  4. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  5. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +1 -1
  6. package/lib/components/SplitButton/useSplitButtonStyles.styles.js +1 -1
  7. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +0 -18
  8. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  9. package/lib-commonjs/components/Button/useButtonStyles.styles.js +31 -89
  10. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  11. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +2 -2
  12. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  13. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +2 -2
  14. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  15. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +0 -54
  16. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  17. package/package.json +11 -11
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js CHANGED
@@ -157,8 +157,6 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
157
157
  m: "(forced-colors: active)"
158
158
  }], ["@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", {
159
159
  m: "(forced-colors: active)"
160
- }], ["@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", {
161
- m: "(forced-colors: active)"
162
160
  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
163
161
  m: "(forced-colors: active)"
164
162
  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
@@ -171,8 +169,6 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
171
169
  m: "(forced-colors: active)"
172
170
  }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
173
171
  m: "(forced-colors: active)"
174
- }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
175
- m: "(forced-colors: active)"
176
172
  }], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
177
173
  m: "(forced-colors: active)"
178
174
  }], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
@@ -183,8 +179,6 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
183
179
  m: "(forced-colors: active)"
184
180
  }], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
185
181
  m: "(forced-colors: active)"
186
- }], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
187
- m: "(forced-colors: active)"
188
182
  }], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
189
183
  m: "(forced-colors: active)"
190
184
  }], ["@media (forced-colors: active){.f1j4zkqc:focus{border-top-width:1px;}}", {
@@ -193,24 +187,18 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
193
187
  m: "(forced-colors: active)"
194
188
  }], ["@media (forced-colors: active){.f4xlnbu:focus{border-bottom-width:1px;}}", {
195
189
  m: "(forced-colors: active)"
196
- }], ["@media (forced-colors: active){.f10xfdm4:focus{border-left-width:1px;}.f1ug3svw:focus{border-right-width:1px;}}", {
197
- m: "(forced-colors: active)"
198
190
  }], ["@media (forced-colors: active){.f1jhcl7q:focus{border-top-style:solid;}}", {
199
191
  m: "(forced-colors: active)"
200
192
  }], ["@media (forced-colors: active){.fokje0w:focus{border-right-style:solid;}.fpctg2v:focus{border-left-style:solid;}}", {
201
193
  m: "(forced-colors: active)"
202
194
  }], ["@media (forced-colors: active){.f1yfuj62:focus{border-bottom-style:solid;}}", {
203
195
  m: "(forced-colors: active)"
204
- }], ["@media (forced-colors: active){.fokje0w:focus{border-right-style:solid;}.fpctg2v:focus{border-left-style:solid;}}", {
205
- m: "(forced-colors: active)"
206
196
  }], ["@media (forced-colors: active){.fk75khc:focus{border-top-color:HighlightText;}}", {
207
197
  m: "(forced-colors: active)"
208
198
  }], ["@media (forced-colors: active){.f16eiqta:focus{border-left-color:HighlightText;}.f90nk7n:focus{border-right-color:HighlightText;}}", {
209
199
  m: "(forced-colors: active)"
210
200
  }], ["@media (forced-colors: active){.fnz8tm1:focus{border-bottom-color:HighlightText;}}", {
211
201
  m: "(forced-colors: active)"
212
- }], ["@media (forced-colors: active){.f16eiqta:focus{border-left-color:HighlightText;}.f90nk7n:focus{border-right-color:HighlightText;}}", {
213
- m: "(forced-colors: active)"
214
202
  }], ["@media (forced-colors: active){.fkom8lu:focus{outline-color:Highlight;}}", {
215
203
  m: "(forced-colors: active)"
216
204
  }]]
@@ -333,8 +321,6 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
333
321
  m: "(forced-colors: active)"
334
322
  }], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
335
323
  m: "(forced-colors: active)"
336
- }], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
337
- m: "(forced-colors: active)"
338
324
  }], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
339
325
  m: "(forced-colors: active)"
340
326
  }], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
@@ -345,8 +331,6 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
345
331
  m: "(forced-colors: active)"
346
332
  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
347
333
  m: "(forced-colors: active)"
348
- }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
349
- m: "(forced-colors: active)"
350
334
  }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
351
335
  m: "(forced-colors: active)"
352
336
  }], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
@@ -355,8 +339,6 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
355
339
  m: "(forced-colors: active)"
356
340
  }], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
357
341
  m: "(forced-colors: active)"
358
- }], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
359
- m: "(forced-colors: active)"
360
342
  }]]
361
343
  });
362
344
  export const useToggleButtonStyles_unstable = state => {
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"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';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\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 ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\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 ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\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});\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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance , checked , disabled , disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent && iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"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';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\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 ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\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 ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\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});\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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance , checked , disabled , disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent && iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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"}
package/lib-commonjs/components/Button/useButtonStyles.styles.js CHANGED
@@ -23,30 +23,26 @@ const buttonSpacingSmallWithIcon = '1px';
23
23
  const buttonSpacingMedium = '5px';
24
24
  const buttonSpacingLarge = '8px';
25
25
  const buttonSpacingLargeWithIcon = '7px';
26
- const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("ri7kuyr", "rto22aj", [
27
- ".ri7kuyr{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}",
28
- ".ri7kuyr:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}",
29
- ".ri7kuyr:hover .fui-Icon-filled{display:inline;}",
30
- ".ri7kuyr:hover .fui-Icon-regular{display:none;}",
31
- ".ri7kuyr:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}",
32
- ".ri7kuyr:hover:active .fui-Icon-filled{display:inline;}",
33
- ".ri7kuyr:hover:active .fui-Icon-regular{display:none;}",
34
- "@media screen and (prefers-reduced-motion: reduce){.ri7kuyr{transition-duration:0.01ms;}}",
35
- "@media (forced-colors: active){.ri7kuyr:focus{border-color:ButtonText;}.ri7kuyr:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.ri7kuyr:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}",
36
- ".ri7kuyr[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}",
37
- ".rto22aj{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}",
38
- ".rto22aj:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}",
39
- ".rto22aj:hover .fui-Icon-filled{display:inline;}",
40
- ".rto22aj:hover .fui-Icon-regular{display:none;}",
41
- ".rto22aj:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}",
42
- ".rto22aj:hover:active .fui-Icon-filled{display:inline;}",
43
- ".rto22aj:hover:active .fui-Icon-regular{display:none;}",
44
- "@media screen and (prefers-reduced-motion: reduce){.rto22aj{transition-duration:0.01ms;}}",
45
- "@media (forced-colors: active){.rto22aj:focus{border-color:ButtonText;}.rto22aj:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.rto22aj:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}",
46
- ".rto22aj[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}"
47
- ]);
26
+ const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rlr4yyk", "r1hbzg6e", {
27
+ r: [
28
+ ".rlr4yyk{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}",
29
+ ".rlr4yyk:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}",
30
+ ".rlr4yyk:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}",
31
+ ".rlr4yyk[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}",
32
+ ".r1hbzg6e{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}",
33
+ ".r1hbzg6e:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}",
34
+ ".r1hbzg6e:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}",
35
+ ".r1hbzg6e[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}"
36
+ ],
37
+ s: [
38
+ "@media screen and (prefers-reduced-motion: reduce){.rlr4yyk{transition-duration:0.01ms;}}",
39
+ "@media (forced-colors: active){.rlr4yyk:focus{border-color:ButtonText;}.rlr4yyk:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.rlr4yyk:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}",
40
+ "@media screen and (prefers-reduced-motion: reduce){.r1hbzg6e{transition-duration:0.01ms;}}",
41
+ "@media (forced-colors: active){.r1hbzg6e:focus{border-color:ButtonText;}.r1hbzg6e:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.r1hbzg6e:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}"
42
+ ]
43
+ });
48
44
  const useIconBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rywnvv2", null, [
49
- ".rywnvv2{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"
45
+ ".rywnvv2{align-items:center;display:inline-flex;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"
50
46
  ]);
51
47
  const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
52
48
  outline: {
@@ -155,6 +151,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
155
151
  "fr80ssc"
156
152
  ],
157
153
  Bi91k9c: "fnwyq0v",
154
+ Bk3fhr4: "ft1hn21",
155
+ Bmfj8id: "fuxngvv",
158
156
  Bbdnnc7: "fy5bs14",
159
157
  iro3zm: "fsv2rcd",
160
158
  b661bw: "f1h0usnq",
@@ -168,6 +166,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
168
166
  "fs4ktlq"
169
167
  ],
170
168
  B2d53fq: "f1omzyqd",
169
+ em6i61: "f1dfjoow",
170
+ vm6p8p: "f1j98vj9",
171
171
  x3br3k: "fj8yq94",
172
172
  ze5xyy: "fqyhrn0",
173
173
  Bx3q9su: "f8yb84k",
@@ -199,6 +199,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
199
199
  "fr80ssc"
200
200
  ],
201
201
  Bi91k9c: "f139oj5f",
202
+ Bk3fhr4: "ft1hn21",
203
+ Bmfj8id: "fuxngvv",
202
204
  iro3zm: "fwiml72",
203
205
  b661bw: "f1h0usnq",
204
206
  Bk6r4ia: [
@@ -211,6 +213,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
211
213
  "fs4ktlq"
212
214
  ],
213
215
  B2d53fq: "f1fg1p5m",
216
+ em6i61: "f1dfjoow",
217
+ vm6p8p: "f1j98vj9",
214
218
  Bqrx1nm: "fwa4z56",
215
219
  pgvf35: "fe5wyld",
216
220
  Bh7lczh: [
@@ -411,9 +415,13 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
411
415
  ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}",
412
416
  ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
413
417
  ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
418
+ ".ft1hn21:hover .fui-Icon-filled{display:inline;}",
419
+ ".fuxngvv:hover .fui-Icon-regular{display:none;}",
414
420
  ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}",
415
421
  ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}",
416
422
  ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}",
423
+ ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}",
424
+ ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}",
417
425
  ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}",
418
426
  ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}",
419
427
  ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"
@@ -443,12 +451,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
443
451
  m: "(forced-colors: active)"
444
452
  }
445
453
  ],
446
- [
447
- "@media (forced-colors: active){.f9a0qzu{border-left-color:HighlightText;}.fkvaka8{border-right-color:HighlightText;}}",
448
- {
449
- m: "(forced-colors: active)"
450
- }
451
- ],
452
454
  [
453
455
  "@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
454
456
  {
@@ -485,12 +487,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
485
487
  m: "(forced-colors: active)"
486
488
  }
487
489
  ],
488
- [
489
- "@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}",
490
- {
491
- m: "(forced-colors: active)"
492
- }
493
- ],
494
490
  [
495
491
  "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}",
496
492
  {
@@ -521,12 +517,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
521
517
  m: "(forced-colors: active)"
522
518
  }
523
519
  ],
524
- [
525
- "@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}",
526
- {
527
- m: "(forced-colors: active)"
528
- }
529
- ],
530
520
  [
531
521
  "@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}",
532
522
  {
@@ -581,18 +571,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
581
571
  m: "(forced-colors: active)"
582
572
  }
583
573
  ],
584
- [
585
- "@media (forced-colors: active){.f9dg1pr:hover{border-left-color:transparent;}.ffrv2ww:hover{border-right-color:transparent;}}",
586
- {
587
- m: "(forced-colors: active)"
588
- }
589
- ],
590
- [
591
- "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}",
592
- {
593
- m: "(forced-colors: active)"
594
- }
595
- ],
596
574
  [
597
575
  "@media (forced-colors: active){.f19ot1t3:hover:active{background-color:var(--colorTransparentBackgroundHover);}}",
598
576
  {
@@ -616,18 +594,6 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
616
594
  {
617
595
  m: "(forced-colors: active)"
618
596
  }
619
- ],
620
- [
621
- "@media (forced-colors: active){.f11cxmw1:hover:active{border-left-color:transparent;}.f1yrt24w:hover:active{border-right-color:transparent;}}",
622
- {
623
- m: "(forced-colors: active)"
624
- }
625
- ],
626
- [
627
- "@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}",
628
- {
629
- m: "(forced-colors: active)"
630
- }
631
597
  ]
632
598
  ]
633
599
  });
@@ -903,12 +869,6 @@ const useRootDisabledStyles = /*#__PURE__*/ (0, _react["__styles"])({
903
869
  m: "(forced-colors: active)"
904
870
  }
905
871
  ],
906
- [
907
- "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}",
908
- {
909
- m: "(forced-colors: active)"
910
- }
911
- ],
912
872
  [
913
873
  "@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
914
874
  {
@@ -933,12 +893,6 @@ const useRootDisabledStyles = /*#__PURE__*/ (0, _react["__styles"])({
933
893
  m: "(forced-colors: active)"
934
894
  }
935
895
  ],
936
- [
937
- "@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}",
938
- {
939
- m: "(forced-colors: active)"
940
- }
941
- ],
942
896
  [
943
897
  "@media (forced-colors: active){.f1vmkb5g:hover{background-color:ButtonFace;}}",
944
898
  {
@@ -963,12 +917,6 @@ const useRootDisabledStyles = /*#__PURE__*/ (0, _react["__styles"])({
963
917
  m: "(forced-colors: active)"
964
918
  }
965
919
  ],
966
- [
967
- "@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}",
968
- {
969
- m: "(forced-colors: active)"
970
- }
971
- ],
972
920
  [
973
921
  "@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}",
974
922
  {
@@ -999,12 +947,6 @@ const useRootDisabledStyles = /*#__PURE__*/ (0, _react["__styles"])({
999
947
  m: "(forced-colors: active)"
1000
948
  }
1001
949
  ],
1002
- [
1003
- "@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}",
1004
- {
1005
- m: "(forced-colors: active)"
1006
- }
1007
- ],
1008
950
  [
1009
951
  "@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}",
1010
952
  {