@fluentui/react-button 9.2.1 → 9.2.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +25 -4
- package/CHANGELOG.md +15 -5
- package/lib/components/Button/useButtonStyles.js +70 -3
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +4 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +11 -2
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +59 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-amd/components/Button/useButtonStyles.js +2 -2
- package/lib-amd/components/Button/useButtonStyles.js.map +1 -1
- package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js +42 -37
- package/lib-amd/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-amd/components/SplitButton/useSplitButtonStyles.js +50 -35
- package/lib-amd/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-amd/components/ToggleButton/useToggleButtonStyles.js +13 -0
- package/lib-amd/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.js +70 -3
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +4 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +11 -2
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +59 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":";;;;;IASa,QAAA,sBAAsB,GAAgC;QACjE,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,wBAAwB;KAC/B,CAAC;IAEF,IAAM,oBAAoB,GAAG,kBAAU,CAAC;QACtC,cAAc;QACd,IAAI,wEACF,eAAe,EAAE,oBAAM,CAAC,+BAA+B,IACpD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mBAAmB,CAAC,KACrD,KAAK,EAAE,oBAAM,CAAC,+BAA+B,KAE1C,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,eAAe,CAAC,gBAEhD,QAAM,iCAAqB,IAAG;YAC7B,OAAO,EAAE,QAAQ;SAClB,KACA,QAAM,kCAAsB,IAAG;YAC9B,OAAO,EAAE,MAAM;SAChB,EAED,YAAQ,uCACN,eAAe,EAAE,oBAAM,CAAC,4BAA4B,IACjD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,wBAAwB,CAAC,KAC1D,KAAK,EAAE,oBAAM,CAAC,4BAA4B,KAG5C,mBAAe,uCACb,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,KAC5D,KAAK,EAAE,oBAAM,CAAC,8BAA8B,SAE/C;QAED,uBAAuB;QACvB,YAAY,EAAE;YACZ,gCAAgC,sCAC9B,eAAe,EAAE,WAAW,IACzB,kBAAU,CAAC,WAAW,CAAC,WAAW,CAAC,KACtC,KAAK,EAAE,eAAe,EACtB,iBAAiB,EAAE,MAAM,EAEzB,QAAQ,sCACN,eAAe,EAAE,eAAe,IAC7B,kBAAU,CAAC,WAAW,CAAC,WAAW,CAAC,KACtC,KAAK,EAAE,WAAW,KAGpB,eAAe,sCACb,eAAe,EAAE,eAAe,IAC7B,kBAAU,CAAC,WAAW,CAAC,WAAW,CAAC,KACtC,KAAK,EAAE,WAAW,KAGpB,QAAQ,wCACH,kBAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,eAAe,CAAC,KACrD,YAAY,EAAE,WAAW,MAE5B;SACF;QAED,wBAAwB;QACxB,OAAO,wEACL,eAAe,EAAE,oBAAM,CAAC,kCAAkC,IACvD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mBAAmB,CAAC,GAClD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,kBAAkB,CAAC,KAEpD,QAAQ,EAAE;gBACR,eAAe,EAAE,oBAAM,CAAC,+BAA+B;aACxD,EAED,eAAe,EAAE;gBACf,eAAe,EAAE,oBAAM,CAAC,iCAAiC;aAC1D,KAEE,+CAA+B,sBAC7B,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mBAAmB,CAAC,EACrD,CACH;QACD,OAAO,sCACL,eAAe,EAAE,oBAAM,CAAC,4BAA4B,IACjD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,6BAA6B,EAE3C,QAAQ,sCACN,eAAe,EAAE,oBAAM,CAAC,yBAAyB,IAC9C,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,6BAA6B,KAG7C,eAAe,sCACb,eAAe,EAAE,oBAAM,CAAC,2BAA2B,IAChD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,6BAA6B,MAE9C;QACD,SAAS,EAAE;QACT,mEAAmE;SACpE;QACD,MAAM,sCACJ,eAAe,EAAE,oBAAM,CAAC,6BAA6B,IAClD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,+BAA+B,EAE7C,QAAQ,sCACN,eAAe,EAAE,oBAAM,CAAC,0BAA0B,IAC/C,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,4BAA4B,KAG5C,eAAe,sCACb,eAAe,EAAE,oBAAM,CAAC,4BAA4B,IACjD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,8BAA8B,MAE/C;QACD,WAAW,sCACT,eAAe,EAAE,oBAAM,CAAC,kCAAkC,IACvD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,oCAAoC,EAElD,QAAQ,sCACN,eAAe,EAAE,oBAAM,CAAC,+BAA+B,IACpD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,iCAAiC,KAGjD,eAAe,sCACb,eAAe,EAAE,oBAAM,CAAC,iCAAiC,IACtD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,KAAK,EAAE,oBAAM,CAAC,mCAAmC,MAEpD;KACF,CAAC,CAAC;IAEH,IAAM,qBAAqB,GAAG,kBAAU,CAAC;QACvC,cAAc;QACd,IAAI,sCACF,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,KAC5D,KAAK,EAAE,oBAAM,CAAC,8BAA8B,EAE5C,QAAQ,sCACN,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,KAC5D,KAAK,EAAE,oBAAM,CAAC,8BAA8B,KAG9C,eAAe,sCACb,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,KAC5D,KAAK,EAAE,oBAAM,CAAC,8BAA8B,MAE/C;QAED,wBAAwB;QACxB,OAAO,EAAE;QACP,eAAe;SAChB;QACD,OAAO,wCACF,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KAExC,QAAQ,uBACH,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,GAG1C,eAAe,uBACV,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,IAE3C;QACD,SAAS,EAAE;QACT,mEAAmE;SACpE;QACD,MAAM,sCACJ,eAAe,EAAE,oBAAM,CAAC,0BAA0B,IAC/C,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KAExC,QAAQ,qBACN,eAAe,EAAE,oBAAM,CAAC,+BAA+B,IACpD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,GAG1C,eAAe,qBACb,eAAe,EAAE,oBAAM,CAAC,iCAAiC,IACtD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,IAE3C;QACD,WAAW,sCACT,eAAe,EAAE,oBAAM,CAAC,0BAA0B,IAC/C,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KAExC,QAAQ,qBACN,eAAe,EAAE,oBAAM,CAAC,+BAA+B,IACpD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,GAG1C,eAAe,qBACb,eAAe,EAAE,oBAAM,CAAC,iCAAiC,IACtD,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,IAE3C;KACF,CAAC,CAAC;IAEH,IAAM,oBAAoB,GAAG,kBAAU,CAAC;QACtC,wBAAwB;QACxB,mBAAmB,EAAE;YACnB,KAAK,EAAE,oBAAM,CAAC,oCAAoC;SACnD;KACF,CAAC,CAAC;IAEI,IAAM,8BAA8B,GAAG,UAAC,KAAwB;QACrE,IAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;QACjD,IAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QACnD,IAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;QAEzC,IAAA,UAAU,GAA2C,KAAK,WAAhD,EAAE,OAAO,GAAkC,KAAK,QAAvC,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,iBAAiB,GAAK,KAAK,kBAAV,CAAW;QAEnE,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,8BAAsB,CAAC,IAAI;QAE3B,iBAAiB;QACjB,OAAO,IAAI,iBAAiB,CAAC,IAAI,EACjC,OAAO,IAAI,iBAAiB,CAAC,YAAY,EACzC,UAAU,IAAI,OAAO,IAAI,iBAAiB,CAAC,UAAU,CAAC;QAEtD,kBAAkB;QAClB,CAAC,QAAQ,IAAI,iBAAiB,CAAC,IAAI,kBAAkB,CAAC,IAAI,EAC1D,UAAU,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CAAC,IAAI,kBAAkB,CAAC,UAAU,CAAC;QAE/E,2BAA2B;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,8BAAsB,CAAC,IAAI,EAC3B,CAAC,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,aAAa,CAAC,IAAI,iBAAiB,CAAC,mBAAmB,EAClG,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;SACH;QAED,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlCW,QAAA,8BAA8B,kCAkCzC","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"]}
|
|
1
|
+
{"version":3,"file":"useToggleButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.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, 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"]}
|
|
@@ -44,7 +44,26 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
44
44
|
Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
|
|
45
45
|
B9zn80p: "f16h9ulv",
|
|
46
46
|
Bpld233: ["fx2bmrt", "fs4ktlq"],
|
|
47
|
-
B2d53fq: "f1d6v5y2"
|
|
47
|
+
B2d53fq: "f1d6v5y2",
|
|
48
|
+
Bsw6fvg: "f1rirnrt",
|
|
49
|
+
Bjwas2f: "f1uu00uk",
|
|
50
|
+
Bn1d65q: ["fkvaka8", "f9a0qzu"],
|
|
51
|
+
Bxeuatn: "f1ux7til",
|
|
52
|
+
n51gp8: ["f9a0qzu", "fkvaka8"],
|
|
53
|
+
Bbusuzp: "f1lkg8j3",
|
|
54
|
+
ycbfsm: "fkc42ay",
|
|
55
|
+
Bqrx1nm: "fq7113v",
|
|
56
|
+
pgvf35: "ff1wgvm",
|
|
57
|
+
Bh7lczh: ["fiob0tu", "f1x4h75k"],
|
|
58
|
+
dpv3f4: "f1j6scgf",
|
|
59
|
+
Bpnjhaq: ["f1x4h75k", "fiob0tu"],
|
|
60
|
+
ze5xyy: "f4xjyn1",
|
|
61
|
+
g2kj27: "fbgcvur",
|
|
62
|
+
Bf756sw: "f1ks1yx8",
|
|
63
|
+
Bow2dr7: ["f1o6qegi", "fmxjhhp"],
|
|
64
|
+
Bvhedfk: "fcnxywj",
|
|
65
|
+
Gye4lf: ["fmxjhhp", "f1o6qegi"],
|
|
66
|
+
pc6evw: "f9ddjv3"
|
|
48
67
|
},
|
|
49
68
|
secondary: {},
|
|
50
69
|
subtle: {
|
|
@@ -141,7 +160,46 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
141
160
|
}
|
|
142
161
|
}, {
|
|
143
162
|
d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fh7ncta{min-width:64px;}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", ".fp9bwmr{padding-top:8px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f150uoa4{padding-bottom:8px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
|
|
144
|
-
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"]
|
|
163
|
+
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
164
|
+
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
165
|
+
m: "(forced-colors: active)"
|
|
166
|
+
}], ["@media (forced-colors: active){.f1uu00uk{border-top-color:HighlightText;}}", {
|
|
167
|
+
m: "(forced-colors: active)"
|
|
168
|
+
}], ["@media (forced-colors: active){.fkvaka8{border-right-color:HighlightText;}.f9a0qzu{border-left-color:HighlightText;}}", {
|
|
169
|
+
m: "(forced-colors: active)"
|
|
170
|
+
}], ["@media (forced-colors: active){.f1ux7til{border-bottom-color:HighlightText;}}", {
|
|
171
|
+
m: "(forced-colors: active)"
|
|
172
|
+
}], ["@media (forced-colors: active){.f9a0qzu{border-left-color:HighlightText;}.fkvaka8{border-right-color:HighlightText;}}", {
|
|
173
|
+
m: "(forced-colors: active)"
|
|
174
|
+
}], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
|
|
175
|
+
m: "(forced-colors: active)"
|
|
176
|
+
}], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
|
|
177
|
+
m: "(forced-colors: active)"
|
|
178
|
+
}], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
|
|
179
|
+
m: "(forced-colors: active)"
|
|
180
|
+
}], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
|
|
181
|
+
m: "(forced-colors: active)"
|
|
182
|
+
}], ["@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", {
|
|
183
|
+
m: "(forced-colors: active)"
|
|
184
|
+
}], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
|
|
185
|
+
m: "(forced-colors: active)"
|
|
186
|
+
}], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
|
|
187
|
+
m: "(forced-colors: active)"
|
|
188
|
+
}], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
|
|
189
|
+
m: "(forced-colors: active)"
|
|
190
|
+
}], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
|
|
191
|
+
m: "(forced-colors: active)"
|
|
192
|
+
}], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
|
|
193
|
+
m: "(forced-colors: active)"
|
|
194
|
+
}], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
|
|
195
|
+
m: "(forced-colors: active)"
|
|
196
|
+
}], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
|
|
197
|
+
m: "(forced-colors: active)"
|
|
198
|
+
}], ["@media (forced-colors: active){.fmxjhhp:hover:active{border-left-color:Highlight;}.f1o6qegi:hover:active{border-right-color:Highlight;}}", {
|
|
199
|
+
m: "(forced-colors: active)"
|
|
200
|
+
}], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
|
|
201
|
+
m: "(forced-colors: active)"
|
|
202
|
+
}]]
|
|
145
203
|
});
|
|
146
204
|
const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
147
205
|
base: {
|
|
@@ -172,6 +230,7 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
|
172
230
|
vm6p8p: "f1q1lw4e"
|
|
173
231
|
},
|
|
174
232
|
highContrast: {
|
|
233
|
+
Bsw6fvg: "f4lkoma",
|
|
175
234
|
Bjwas2f: "fg455y9",
|
|
176
235
|
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
|
|
177
236
|
Bxeuatn: "f1cwzwz",
|
|
@@ -181,11 +240,13 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
|
181
240
|
gdbnj: ["f1lr3nhc", "f1mbxvi6"],
|
|
182
241
|
mxns5l: "fn5gmvv",
|
|
183
242
|
o3nasb: ["f1mbxvi6", "f1lr3nhc"],
|
|
243
|
+
Bqrx1nm: "f1vmkb5g",
|
|
184
244
|
pgvf35: "f53ppgq",
|
|
185
245
|
Bh7lczh: ["f1663y11", "f80fkiy"],
|
|
186
246
|
dpv3f4: "f18v5270",
|
|
187
247
|
Bpnjhaq: ["f80fkiy", "f1663y11"],
|
|
188
248
|
ze5xyy: "f1kc2mi9",
|
|
249
|
+
g2kj27: "f1y0svfh",
|
|
189
250
|
Bf756sw: "fihuait",
|
|
190
251
|
Bow2dr7: ["fnxhupq", "fyd6l6x"],
|
|
191
252
|
Bvhedfk: "fx507ft",
|
|
@@ -249,7 +310,9 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
|
249
310
|
}, {
|
|
250
311
|
d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
|
|
251
312
|
h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}"],
|
|
252
|
-
m: [["@media (forced-colors: active){.
|
|
313
|
+
m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
|
|
314
|
+
m: "(forced-colors: active)"
|
|
315
|
+
}], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
|
|
253
316
|
m: "(forced-colors: active)"
|
|
254
317
|
}], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
|
|
255
318
|
m: "(forced-colors: active)"
|
|
@@ -267,6 +330,8 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
|
267
330
|
m: "(forced-colors: active)"
|
|
268
331
|
}], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
|
|
269
332
|
m: "(forced-colors: active)"
|
|
333
|
+
}], ["@media (forced-colors: active){.f1vmkb5g:hover{background-color:ButtonFace;}}", {
|
|
334
|
+
m: "(forced-colors: active)"
|
|
270
335
|
}], ["@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", {
|
|
271
336
|
m: "(forced-colors: active)"
|
|
272
337
|
}], ["@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", {
|
|
@@ -277,6 +342,8 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
|
|
|
277
342
|
m: "(forced-colors: active)"
|
|
278
343
|
}], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
|
|
279
344
|
m: "(forced-colors: active)"
|
|
345
|
+
}], ["@media (forced-colors: active){.f1y0svfh:hover:active{background-color:ButtonFace;}}", {
|
|
346
|
+
m: "(forced-colors: active)"
|
|
280
347
|
}], ["@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", {
|
|
281
348
|
m: "(forced-colors: active)"
|
|
282
349
|
}], ["@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","react_1","useIconBaseClassName","useRootStyles","useRootDisabledStyles","useRootFocusStyles","useRootIconOnlyStyles","useIconStyles","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","smallWithIcon","largeWithIcon","base","highContrast","primary","children","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"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 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 ...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(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"]}
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;CACP;AAED,MAAMC,cAAc,GAAG,6BAA6B;AAEpD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AACxC,MAAMC,mBAAmB,GAAG,KAAK;AACjC,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AAExC,MAAMC,oBAAoB,gBAAGC,qBAAe,m+IAoG1C;AAEF,MAAMC,oBAAoB,gBAAGD,qBAAe,waAU1C;AAEF,MAAME,aAAa,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA0I9B;AAEF,MAAMG,qBAAqB,gBAAGH,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAuHtC;AAEF,MAAMI,kBAAkB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EA4BnC;AAEF,MAAMK,qBAAqB,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoBtC;AAEF,MAAMM,aAAa,gBAAGN,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA2B9B;AAEK,MAAMO,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGV,oBAAoB,EAAE;EAChD,MAAMW,iBAAiB,GAAGT,oBAAoB,EAAE;EAEhD,MAAMU,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,kBAAkB,GAAGT,qBAAqB,EAAE;EAClD,MAAMU,eAAe,GAAGT,kBAAkB,EAAE;EAC5C,MAAMU,kBAAkB,GAAGT,qBAAqB,EAAE;EAClD,MAAMU,UAAU,GAAGT,aAAa,EAAE;EAElC,MAAM;IAAEU,UAAU;IAAEC,QAAQ;IAAEC,iBAAiB;IAAE1B,IAAI;IAAE2B,QAAQ;IAAEC,YAAY;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGd,KAAK;EAEpGA,KAAK,CAACjB,IAAI,CAACgC,SAAS,GAAGvB,oBAAY,CACjCV,wBAAgB,CAACC,IAAI,EACrBkB,iBAAiB,EAEjBO,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAEpCL,UAAU,CAACW,IAAI,CAAC,EAChB9B,IAAI,IAAI8B,IAAI,KAAK,OAAO,IAAIX,UAAU,CAACa,aAAa,EACpDhC,IAAI,IAAI8B,IAAI,KAAK,OAAO,IAAIX,UAAU,CAACc,aAAa,EACpDd,UAAU,CAACU,KAAK,CAAC;EAEjB;EACA,CAACJ,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAACc,IAAI,EAC1D,CAACT,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAACe,YAAY,EAClEX,UAAU,KAAKC,QAAQ,IAAIC,iBAAiB,CAAC,IAAIN,kBAAkB,CAACI,UAAU,CAAC;EAE/E;EACAA,UAAU,KAAK,SAAS,IAAIH,eAAe,CAACe,OAAO,EACnDf,eAAe,CAACS,IAAI,CAAC,EACrBT,eAAe,CAACQ,KAAK,CAAC;EAEtB;EACAF,QAAQ,IAAIL,kBAAkB,CAACQ,IAAI,CAAC;EAEpC;EACAd,KAAK,CAACjB,IAAI,CAACgC,SAAS,CACrB;EAED,IAAIf,KAAK,CAAChB,IAAI,EAAE;IACdgB,KAAK,CAAChB,IAAI,CAAC+B,SAAS,GAAGvB,oBAAY,CACjCV,wBAAgB,CAACE,IAAI,EACrBkB,iBAAiB,EACjBF,KAAK,CAACjB,IAAI,CAACsC,QAAQ,KAAKC,SAAS,IAAItB,KAAK,CAACjB,IAAI,CAACsC,QAAQ,KAAK,IAAI,IAAId,UAAU,CAACK,YAAY,CAAC,EAC7FL,UAAU,CAACO,IAAI,CAAC,EAChBd,KAAK,CAAChB,IAAI,CAAC+B,SAAS,CACrB;;EAGH,OAAOf,KAAK;AACd,CAAC;AAnDYlB,gCAAwB","names":["exports","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","react_1","useIconBaseClassName","useRootStyles","useRootDisabledStyles","useRootFocusStyles","useRootIconOnlyStyles","useIconStyles","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","smallWithIcon","largeWithIcon","base","highContrast","primary","children","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"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"]}
|
|
@@ -28,7 +28,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
28
28
|
primary: {
|
|
29
29
|
J657lq: "foe7gw6",
|
|
30
30
|
Jlnjib: "fvxlz81",
|
|
31
|
-
Bc29nj9: "f1c2mdy"
|
|
31
|
+
Bc29nj9: "f1c2mdy",
|
|
32
|
+
B8ia98v: "f1r39r2s"
|
|
32
33
|
},
|
|
33
34
|
secondary: {},
|
|
34
35
|
subtle: {
|
|
@@ -82,6 +83,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
82
83
|
m: "(forced-colors: active)"
|
|
83
84
|
}], ["@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
|
|
84
85
|
m: "(forced-colors: active)"
|
|
86
|
+
}], ["@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
|
|
87
|
+
m: "(forced-colors: active)"
|
|
85
88
|
}], ["@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
|
|
86
89
|
m: "(forced-colors: active)"
|
|
87
90
|
}], ["@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","icon","contentContainer","secondaryContent","useRootStyles","react_1","useRootIconOnlyStyles","useIconStyles","useContentContainerStyles","useSecondaryContentStyles","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","size","className","base","highContrast","disabledHighContrast","children","undefined","useButtonStyles_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"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"]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","icon","contentContainer","secondaryContent","useRootStyles","react_1","useRootIconOnlyStyles","useIconStyles","useContentContainerStyles","useSecondaryContentStyles","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","size","className","base","highContrast","disabledHighContrast","children","undefined","useButtonStyles_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"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"]}
|
|
@@ -48,7 +48,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
48
48
|
primary: {
|
|
49
49
|
B1l9wao: ["f117mkrt", "f6ic349"],
|
|
50
50
|
lcnrd8: ["f10mpf6u", "f1bt8jlh"],
|
|
51
|
-
Brbpp8k: ["f1c28ih9", "fku5vw4"]
|
|
51
|
+
Brbpp8k: ["f1c28ih9", "fku5vw4"],
|
|
52
|
+
Bcsxniv: ["ff0tx2l", "fnrj3rw"],
|
|
53
|
+
tl7e51: ["f3jppgx", "f1m2s8ie"],
|
|
54
|
+
mba178: ["f96h41g", "fdxf0pi"]
|
|
52
55
|
},
|
|
53
56
|
secondary: {},
|
|
54
57
|
subtle: {
|
|
@@ -77,7 +80,13 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
77
80
|
}, {
|
|
78
81
|
d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f117mkrt .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f6ic349 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fbw67pg .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1);}", ".fcas6k2 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
79
82
|
h: [".f10mpf6u:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1bt8jlh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1c28ih9:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fku5vw4:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xppm0p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Pressed);}", ".fkfp127:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
80
|
-
m: [["@media (forced-colors: active){.
|
|
83
|
+
m: [["@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}", {
|
|
84
|
+
m: "(forced-colors: active)"
|
|
85
|
+
}], ["@media (forced-colors: active){.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
|
|
86
|
+
m: "(forced-colors: active)"
|
|
87
|
+
}], ["@media (forced-colors: active){.f96h41g:hover:active .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fdxf0pi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
|
|
88
|
+
m: "(forced-colors: active)"
|
|
89
|
+
}], ["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
|
|
81
90
|
m: "(forced-colors: active)"
|
|
82
91
|
}], ["@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
|
|
83
92
|
m: "(forced-colors: active)"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAW/B;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;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,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAW/B;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;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,EA8I9B;AAEK,MAAME,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGN,cAAc,EAAE;EAEpC,MAAM;IAAEO,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACP,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,6BAAqB,CAACC,IAAI,EAC1BQ,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,CAACP,IAAI,CAACa,SAAS,CACrB;EAED,IAAIN,KAAK,CAACN,UAAU,EAAE;IACpBM,KAAK,CAACN,UAAU,CAACY,SAAS,GAAGT,oBAAY,CACvCL,6BAAqB,CAACE,UAAU,EAChCQ,WAAW,CAACR,UAAU,EACtBM,KAAK,CAACN,UAAU,CAACY,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACL,mBAAmB,EAAE;IAC7BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,GAAGT,oBAAY,CAChDL,6BAAqB,CAACG,mBAAmB,EACzCO,WAAW,CAACP,mBAAmB,EAC/BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC;AAhCYR,qCAA6B","names":["exports","root","menuButton","primaryActionButton","useFocusStyles","react_1","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"]}
|
|
@@ -307,10 +307,67 @@ const useIconCheckedStyles = /*#__PURE__*/react_1.__styles({
|
|
|
307
307
|
}, {
|
|
308
308
|
d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
|
|
309
309
|
});
|
|
310
|
+
const usePrimaryHighContrastStyles = /*#__PURE__*/react_1.__styles({
|
|
311
|
+
base: {
|
|
312
|
+
Bsw6fvg: "f4lkoma",
|
|
313
|
+
Bjwas2f: "f1bauw5b",
|
|
314
|
+
Bn1d65q: ["fbpknfk", "fedl69w"],
|
|
315
|
+
Bxeuatn: "f15s25nd",
|
|
316
|
+
n51gp8: ["fedl69w", "fbpknfk"],
|
|
317
|
+
Bbusuzp: "f1e4kh5",
|
|
318
|
+
ycbfsm: "fg4l7m0"
|
|
319
|
+
},
|
|
320
|
+
disabled: {
|
|
321
|
+
Bjwas2f: "fg455y9",
|
|
322
|
+
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
|
|
323
|
+
Bxeuatn: "f1cwzwz",
|
|
324
|
+
n51gp8: ["f14g86mu", "f1rvyvqg"],
|
|
325
|
+
Bbusuzp: "f1dcs8yz",
|
|
326
|
+
G867l3: "fjwq6ea",
|
|
327
|
+
gdbnj: ["f1lr3nhc", "f1mbxvi6"],
|
|
328
|
+
mxns5l: "fn5gmvv",
|
|
329
|
+
o3nasb: ["f1mbxvi6", "f1lr3nhc"]
|
|
330
|
+
}
|
|
331
|
+
}, {
|
|
332
|
+
m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
|
|
333
|
+
m: "(forced-colors: active)"
|
|
334
|
+
}], ["@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}", {
|
|
335
|
+
m: "(forced-colors: active)"
|
|
336
|
+
}], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
|
|
337
|
+
m: "(forced-colors: active)"
|
|
338
|
+
}], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
|
|
339
|
+
m: "(forced-colors: active)"
|
|
340
|
+
}], ["@media (forced-colors: active){.fedl69w{border-left-color:ButtonBorder;}.fbpknfk{border-right-color:ButtonBorder;}}", {
|
|
341
|
+
m: "(forced-colors: active)"
|
|
342
|
+
}], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
|
|
343
|
+
m: "(forced-colors: active)"
|
|
344
|
+
}], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
|
|
345
|
+
m: "(forced-colors: active)"
|
|
346
|
+
}], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
|
|
347
|
+
m: "(forced-colors: active)"
|
|
348
|
+
}], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
|
|
349
|
+
m: "(forced-colors: active)"
|
|
350
|
+
}], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
|
|
351
|
+
m: "(forced-colors: active)"
|
|
352
|
+
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
|
|
353
|
+
m: "(forced-colors: active)"
|
|
354
|
+
}], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
355
|
+
m: "(forced-colors: active)"
|
|
356
|
+
}], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
|
|
357
|
+
m: "(forced-colors: active)"
|
|
358
|
+
}], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
|
|
359
|
+
m: "(forced-colors: active)"
|
|
360
|
+
}], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
|
|
361
|
+
m: "(forced-colors: active)"
|
|
362
|
+
}], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
|
|
363
|
+
m: "(forced-colors: active)"
|
|
364
|
+
}]]
|
|
365
|
+
});
|
|
310
366
|
const useToggleButtonStyles_unstable = state => {
|
|
311
367
|
const rootCheckedStyles = useRootCheckedStyles();
|
|
312
368
|
const rootDisabledStyles = useRootDisabledStyles();
|
|
313
369
|
const iconCheckedStyles = useIconCheckedStyles();
|
|
370
|
+
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
|
|
314
371
|
const {
|
|
315
372
|
appearance,
|
|
316
373
|
checked,
|
|
@@ -318,6 +375,8 @@ const useToggleButtonStyles_unstable = state => {
|
|
|
318
375
|
disabledFocusable
|
|
319
376
|
} = state;
|
|
320
377
|
state.root.className = react_1.mergeClasses(exports.toggleButtonClassNames.root,
|
|
378
|
+
// Primary high contrast styles
|
|
379
|
+
appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
|
|
321
380
|
// Checked styles
|
|
322
381
|
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
|
|
323
382
|
// Disabled styles
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","icon","useRootCheckedStyles","react_1","useRootDisabledStyles","useIconCheckedStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent","useButtonStyles_1"],"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"]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","icon","useRootCheckedStyles","react_1","useRootDisabledStyles","useIconCheckedStyles","usePrimaryHighContrastStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent","useButtonStyles_1"],"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"]}
|