@fluentui/react-button 9.2.0 → 9.2.2

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4HpB;AAEF,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGL,cAAc,EAAE;EAEpC,MAAM;IAAEM,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACN,IAAI,CAACY,SAAS,GAAGhB,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1BO,UAAU,CAACM,IAAI,EACfJ,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACC,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACG,QAAQ,EACtD,CAACA,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACO,oBAAoB,EAClER,KAAK,CAACN,IAAI,CAACY,SAAS,CACrB;EAED,IAAIN,KAAK,CAACL,UAAU,EAAE;IACpBK,KAAK,CAACL,UAAU,CAACW,SAAS,GAAGhB,YAAY,CACvCG,qBAAqB,CAACE,UAAU,EAChCO,WAAW,CAACP,UAAU,EACtBK,KAAK,CAACL,UAAU,CAACW,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACJ,mBAAmB,EAAE;IAC7BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,GAAGhB,YAAY,CAChDG,qBAAqB,CAACG,mBAAmB,EACzCM,WAAW,CAACN,mBAAmB,EAC/BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC","names":["mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","useRootStyles","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabled","disabledFocusable","className","base","disabledHighContrast"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\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\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA8IpB;AAEF,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGL,cAAc,EAAE;EAEpC,MAAM;IAAEM,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACN,IAAI,CAACY,SAAS,GAAGhB,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1BO,UAAU,CAACM,IAAI,EACfJ,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACC,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACG,QAAQ,EACtD,CAACA,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACO,oBAAoB,EAClER,KAAK,CAACN,IAAI,CAACY,SAAS,CACrB;EAED,IAAIN,KAAK,CAACL,UAAU,EAAE;IACpBK,KAAK,CAACL,UAAU,CAACW,SAAS,GAAGhB,YAAY,CACvCG,qBAAqB,CAACE,UAAU,EAChCO,WAAW,CAACP,UAAU,EACtBK,KAAK,CAACL,UAAU,CAACW,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACJ,mBAAmB,EAAE;IAC7BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,GAAGhB,YAAY,CAChDG,qBAAqB,CAACG,mBAAmB,EACzCM,WAAW,CAACN,mBAAmB,EAC/BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC","names":["mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","useRootStyles","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabled","disabledFocusable","className","base","disabledHighContrast"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\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\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -301,10 +301,67 @@ const useIconCheckedStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
 });
+const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
+  base: {
+    Bsw6fvg: "f4lkoma",
+    Bjwas2f: "f1bauw5b",
+    Bn1d65q: ["fbpknfk", "fedl69w"],
+    Bxeuatn: "f15s25nd",
+    n51gp8: ["fedl69w", "fbpknfk"],
+    Bbusuzp: "f1e4kh5",
+    ycbfsm: "fg4l7m0"
+  },
+  disabled: {
+    Bjwas2f: "fg455y9",
+    Bn1d65q: ["f1rvyvqg", "f14g86mu"],
+    Bxeuatn: "f1cwzwz",
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bbusuzp: "f1dcs8yz",
+    G867l3: "fjwq6ea",
+    gdbnj: ["f1lr3nhc", "f1mbxvi6"],
+    mxns5l: "fn5gmvv",
+    o3nasb: ["f1mbxvi6", "f1lr3nhc"]
+  }
+}, {
+  m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fedl69w{border-left-color:ButtonBorder;}.fbpknfk{border-right-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
 export const useToggleButtonStyles_unstable = state => {
   const rootCheckedStyles = useRootCheckedStyles();
   const rootDisabledStyles = useRootDisabledStyles();
   const iconCheckedStyles = useIconCheckedStyles();
+  const primaryHighContrastStyles = usePrimaryHighContrastStyles();
   const {
     appearance,
     checked,
@@ -312,6 +369,8 @@ export const useToggleButtonStyles_unstable = state => {
     disabledFocusable
   } = state;
   state.root.className = mergeClasses(toggleButtonClassNames.root,
+  // Primary high contrast styles
+  appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
   // Checked styles
   checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
   // Disabled styles

package/lib/components/ToggleButton/useToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","useRootDisabledStyles","useIconCheckedStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.border('1px', 'solid', 'HighlightText'),\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"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","names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","useRootDisabledStyles","useIconCheckedStyles","usePrimaryHighContrastStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.border('1px', 'solid', 'HighlightText'),\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}

package/lib-amd/components/Button/useButtonStyles.js

@@ -9,7 +9,10 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
     };
     var iconSpacingVar = '--fui-Button__icon--spacing';
     var buttonSpacingSmall = '3px';
+    var buttonSpacingSmallWithIcon = '1px';
     var buttonSpacingMedium = '5px';
+    var buttonSpacingLarge = '8px';
+    var buttonSpacingLargeWithIcon = '7px';
     var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle', margin: 0, overflow: 'hidden', backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1, border: react_theme_1.tokens.strokeWidthThin + " solid " + react_theme_1.tokens.colorNeutralStroke1, fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': (_a = {
                 backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
                 borderColor: react_theme_1.tokens.colorNeutralStroke1Hover,
@@ -84,7 +87,7 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
                 backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
             },
         },
-        primary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }) }),
+        primary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'Highlight' }, react_1.shorthands.borderColor('HighlightText')), { color: 'HighlightText', forcedColorAdjust: 'none', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight' }) }) }),
         secondary: {
         /* The secondary styles are exactly the same as the base styles. */
         },
@@ -101,11 +104,19 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
         },
         square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
         // Size variations
-        small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), { minWidth: '64px' }), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
+        small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minWidth: '64px' }, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
+        smallWithIcon: {
+            paddingBottom: buttonSpacingSmallWithIcon,
+            paddingTop: buttonSpacingSmallWithIcon,
+        },
         medium: {
         /* defined in base styles */
         },
-        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalL)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minWidth: '96px' }, react_1.shorthands.padding(buttonSpacingLarge, react_theme_1.tokens.spacingHorizontalL)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+        largeWithIcon: {
+            paddingBottom: buttonSpacingLargeWithIcon,
+            paddingTop: buttonSpacingLargeWithIcon,
+        },
     });
     var useRootDisabledStyles = react_1.makeStyles({
         // Base styles
@@ -120,7 +131,7 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
             }, _g)) }),
         // High contrast styles
         highContrast: {
-            '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
+            '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
         },
         // Appearance variations
         outline: {
@@ -157,9 +168,9 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
     });
     var useRootIconOnlyStyles = react_1.makeStyles({
         // Size variations
-        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '28px', maxWidth: '28px' }),
-        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '32px', maxWidth: '32px' }),
-        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalSNudge)), { minWidth: '40px', maxWidth: '40px' }),
+        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmallWithIcon)), { minWidth: '24px', maxWidth: '24px' }),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingMedium)), { minWidth: '32px', maxWidth: '32px' }),
+        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingLargeWithIcon)), { minWidth: '40px', maxWidth: '40px' }),
     });
     var useIconStyles = react_1.makeStyles({
         // Size variations
@@ -196,8 +207,8 @@ define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react
         var rootFocusStyles = useRootFocusStyles();
         var rootIconOnlyStyles = useRootIconOnlyStyles();
         var iconStyles = useIconStyles();
-        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
-        state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], 
+        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, icon = state.icon, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
+        state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], 
         // Disabled styles
         (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], 
         // Focus styles

package/lib-amd/components/Button/useButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  textDecorationLine: 'none',\n  verticalAlign: 'middle',\n\n  margin: 0,\n  overflow: 'hidden',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n  fontFamily: tokens.fontFamilyBase,\n  outlineStyle: 'none',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground1Hover,\n\n    cursor: 'pointer',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground1Pressed,\n\n    outlineStyle: 'none',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n  minWidth: '96px',\n  borderRadius: tokens.borderRadiusMedium,\n\n  fontSize: tokens.fontSizeBase300,\n  fontWeight: tokens.fontWeightSemibold,\n  lineHeight: tokens.lineHeightBase300,\n\n  // Transition styles\n\n  transitionDuration: tokens.durationFaster,\n  transitionProperty: 'background, border, color',\n  transitionTimingFunction: tokens.curveEasyEase,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    ':focus': {\n      borderColor: 'ButtonText',\n    },\n\n    ':hover': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n\n    ':hover:active': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  // Focus styles\n\n  ...createCustomFocusIndicatorStyle({\n    borderColor: tokens.colorTransparentStroke,\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  fontSize: '20px',\n  height: '20px',\n  width: '20px',\n\n  [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),\n\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n    rootBaseClassName,\n\n    appearance && rootStyles[appearance],\n\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconBaseClassName,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  textDecorationLine: 'none',\n  verticalAlign: 'middle',\n\n  margin: 0,\n  overflow: 'hidden',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n  fontFamily: tokens.fontFamilyBase,\n  outlineStyle: 'none',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground1Hover,\n\n    cursor: 'pointer',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground1Pressed,\n\n    outlineStyle: 'none',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n  minWidth: '96px',\n  borderRadius: tokens.borderRadiusMedium,\n\n  fontSize: tokens.fontSizeBase300,\n  fontWeight: tokens.fontWeightSemibold,\n  lineHeight: tokens.lineHeightBase300,\n\n  // Transition styles\n\n  transitionDuration: tokens.durationFaster,\n  transitionProperty: 'background, border, color',\n  transitionTimingFunction: tokens.curveEasyEase,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    ':focus': {\n      borderColor: 'ButtonText',\n    },\n\n    ':hover': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n\n    ':hover:active': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  // Focus styles\n\n  ...createCustomFocusIndicatorStyle({\n    borderColor: tokens.colorTransparentStroke,\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  fontSize: '20px',\n  height: '20px',\n  width: '20px',\n\n  [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('HighlightText'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    minWidth: '64px',\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  smallWithIcon: {\n    paddingBottom: buttonSpacingSmallWithIcon,\n    paddingTop: buttonSpacingSmallWithIcon,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    minWidth: '96px',\n    ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  largeWithIcon: {\n    paddingBottom: buttonSpacingLargeWithIcon,\n    paddingTop: buttonSpacingLargeWithIcon,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(buttonSpacingLargeWithIcon),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n    rootBaseClassName,\n\n    appearance && rootStyles[appearance],\n\n    rootStyles[size],\n    icon && size === 'small' && rootStyles.smallWithIcon,\n    icon && size === 'large' && rootStyles.largeWithIcon,\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconBaseClassName,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,6 +1,6 @@
 define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react", "../Button/useButtonStyles"], function (require, exports, tslib_1, react_theme_1, react_1, useButtonStyles_1) {
     "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = void 0;
     exports.compoundButtonClassNames = {
@@ -61,77 +61,82 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
                     color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
                 },
                 _h),
+            _f['@media (forced-colors: active)'] = (_j = {},
+                _j["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: 'HighlightText',
+                },
+                _j),
             _f),
         secondary: {
         /* The secondary styles are exactly the same as the base styles. */
         },
-        subtle: (_j = {},
-            _j["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+        subtle: (_k = {},
+            _k["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                 color: react_theme_1.tokens.colorNeutralForeground2,
             },
-            _j[':hover'] = (_k = {},
-                _k["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+            _k[':hover'] = (_l = {},
+                _l["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: react_theme_1.tokens.colorNeutralForeground2Hover,
                 },
-                _k),
-            _j[':hover:active'] = (_l = {},
-                _l["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                _l),
+            _k[':hover:active'] = (_m = {},
+                _m["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: react_theme_1.tokens.colorNeutralForeground2Pressed,
                 },
-                _l),
-            _j),
-        transparent: (_m = {},
-            _m["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                _m),
+            _k),
+        transparent: (_o = {},
+            _o["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                 color: react_theme_1.tokens.colorNeutralForeground2,
             },
-            _m[':hover'] = (_o = {},
-                _o["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+            _o[':hover'] = (_p = {},
+                _p["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
                 },
-                _o),
-            _m[':hover:active'] = (_p = {},
-                _p["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                _p),
+            _o[':hover:active'] = (_q = {},
+                _q["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
                 },
-                _p),
-            _m),
+                _q),
+            _o),
         // Size variations
         small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalS, react_theme_1.tokens.spacingHorizontalS, react_theme_1.tokens.spacingHorizontalMNudge, react_theme_1.tokens.spacingHorizontalS)), { fontSize: react_theme_1.tokens.fontSizeBase300, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
         medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('14px', react_theme_1.tokens.spacingHorizontalM, react_theme_1.tokens.spacingHorizontalL, react_theme_1.tokens.spacingHorizontalM)), { fontSize: react_theme_1.tokens.fontSizeBase300, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
         large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('18px', react_theme_1.tokens.spacingHorizontalL, react_theme_1.tokens.spacingHorizontalXL, react_theme_1.tokens.spacingHorizontalL)), { fontSize: react_theme_1.tokens.fontSizeBase400, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
         // Disabled styles
-        disabled: (_q = {},
-            _q["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+        disabled: (_r = {},
+            _r["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                 color: react_theme_1.tokens.colorNeutralForegroundDisabled,
             },
-            _q[':hover'] = (_r = {},
-                _r["& ." + exports.compoundButtonClassNames.secondaryContent] = {
-                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-                },
-                _r),
-            _q[':hover:active'] = (_s = {},
+            _r[':hover'] = (_s = {},
                 _s["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: react_theme_1.tokens.colorNeutralForegroundDisabled,
                 },
                 _s),
-            _q),
+            _r[':hover:active'] = (_t = {},
+                _t["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                },
+                _t),
+            _r),
         // Disabled high contrast styles
         disabledHighContrast: {
-            '@media (forced-colors: active)': (_t = {},
-                _t["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+            '@media (forced-colors: active)': (_u = {},
+                _u["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                     color: 'GrayText',
                 },
-                _t[':hover'] = (_u = {},
-                    _u["& ." + exports.compoundButtonClassNames.secondaryContent] = {
-                        color: 'GrayText',
-                    },
-                    _u),
-                _t[':hover:active'] = (_v = {},
+                _u[':hover'] = (_v = {},
                     _v["& ." + exports.compoundButtonClassNames.secondaryContent] = {
                         color: 'GrayText',
                     },
                     _v),
-                _t),
+                _u[':hover:active'] = (_w = {},
+                    _w["& ." + exports.compoundButtonClassNames.secondaryContent] = {
+                        color: 'GrayText',
+                    },
+                    _w),
+                _u),
         },
     });
     var useRootIconOnlyStyles = react_1.makeStyles({

package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCompoundButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useCompoundButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}