npm - @fluentui/react-button - Versions diffs - 9.6.12 → 9.7.1 - Mend

@fluentui/react-button 9.6.12 → 9.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/lib/components/Button/useButtonStyles.styles.raw.js CHANGED Viewed

@@ -37,7 +37,7 @@ const useRootBaseClassName = makeResetStyles({
         color: tokens.colorNeutralForeground1Hover,
         cursor: 'pointer'
     },
-    ':hover:active': {
+    ':hover:active,:active:focus-visible': {
         backgroundColor: tokens.colorNeutralBackground1Pressed,
         borderColor: tokens.colorNeutralStroke1Pressed,
         color: tokens.colorNeutralForeground1Pressed,
@@ -67,7 +67,7 @@ const useRootBaseClassName = makeResetStyles({
             color: 'Highlight',
             forcedColorAdjust: 'none'
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: 'HighlightText',
             borderColor: 'Highlight',
             color: 'Highlight',
@@ -110,7 +110,7 @@ const useRootStyles = makeStyles({
         ':hover': {
             backgroundColor: tokens.colorTransparentBackgroundHover
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackgroundPressed
         }
     },
@@ -123,7 +123,7 @@ const useRootStyles = makeStyles({
             ...shorthands.borderColor('transparent'),
             color: tokens.colorNeutralForegroundOnBrand
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorBrandBackgroundPressed,
             ...shorthands.borderColor('transparent'),
             color: tokens.colorNeutralForegroundOnBrand
@@ -138,7 +138,7 @@ const useRootStyles = makeStyles({
                 ...shorthands.borderColor('Highlight'),
                 color: 'Highlight'
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 backgroundColor: 'HighlightText',
                 ...shorthands.borderColor('Highlight'),
                 color: 'Highlight'
@@ -165,7 +165,7 @@ const useRootStyles = makeStyles({
                 color: tokens.colorNeutralForeground2BrandHover
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorSubtleBackgroundPressed,
             ...shorthands.borderColor('transparent'),
             color: tokens.colorNeutralForeground2Pressed,
@@ -186,7 +186,7 @@ const useRootStyles = makeStyles({
                     color: 'Highlight'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 color: 'Highlight',
                 [`& .${buttonClassNames.icon}`]: {
                     color: 'Highlight'
@@ -209,7 +209,7 @@ const useRootStyles = makeStyles({
                 display: 'none'
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackgroundPressed,
             ...shorthands.borderColor('transparent'),
             color: tokens.colorNeutralForeground2BrandPressed,
@@ -225,7 +225,7 @@ const useRootStyles = makeStyles({
                 backgroundColor: tokens.colorTransparentBackground,
                 color: 'Highlight'
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 backgroundColor: tokens.colorTransparentBackground,
                 color: 'Highlight'
             }
@@ -293,7 +293,7 @@ const useRootDisabledStyles = makeStyles({
                 color: tokens.colorNeutralForegroundDisabled
             }
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorNeutralBackgroundDisabled,
             ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
             color: tokens.colorNeutralForegroundDisabled,
@@ -329,7 +329,7 @@ const useRootDisabledStyles = makeStyles({
                     color: 'GrayText'
                 }
             },
-            ':hover:active': {
+            ':hover:active,:active:focus-visible': {
                 backgroundColor: 'ButtonFace',
                 ...shorthands.borderColor('GrayText'),
                 color: 'GrayText',
@@ -345,7 +345,7 @@ const useRootDisabledStyles = makeStyles({
         ':hover': {
             backgroundColor: tokens.colorTransparentBackground
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackground
         }
     },
@@ -354,7 +354,7 @@ const useRootDisabledStyles = makeStyles({
         ':hover': {
             ...shorthands.borderColor('transparent')
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             ...shorthands.borderColor('transparent')
         }
     },
@@ -367,7 +367,7 @@ const useRootDisabledStyles = makeStyles({
             backgroundColor: tokens.colorTransparentBackground,
             ...shorthands.borderColor('transparent')
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackground,
             ...shorthands.borderColor('transparent')
         }
@@ -379,7 +379,7 @@ const useRootDisabledStyles = makeStyles({
             backgroundColor: tokens.colorTransparentBackground,
             ...shorthands.borderColor('transparent')
         },
-        ':hover:active': {
+        ':hover:active,:active:focus-visible': {
             backgroundColor: tokens.colorTransparentBackground,
             ...shorthands.borderColor('transparent')
         }

package/lib/components/Button/useButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Button/useButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n /\nconst boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\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\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\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.colorStrokeFocus2,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n inset\n `,\n zIndex: 1,\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n inset\n `,\n }),\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 [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\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 [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n ':hover:active': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\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 [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n },\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations /\n },\n square: { borderRadius: tokens.borderRadiusNone },\n\n // Size variations\n small: {\n minWidth: '64px',\n padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n borderRadius: tokens.borderRadiusMedium,\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 padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n 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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\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 [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\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({ borderRadius: tokens.borderRadiusCircular }),\n rounded: {\n / The rounded styles are exactly the same as the base styles. /\n },\n square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n\n // Primary styles\n primary: {\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n },\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,\n },\n }),\n },\n },\n\n // Size variations\n small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }),\n medium: {\n / defined in base styles /\n },\n large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: buttonSpacingSmallWithIcon,\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n padding: buttonSpacingMedium,\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n 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 'use no memo';\n\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 && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","makeStyles","makeResetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","margin","overflow","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","border","colorNeutralStroke1","fontFamily","fontFamilyBase","outlineStyle","colorNeutralBackground1Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground1Hover","cursor","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","padding","spacingHorizontalM","minWidth","borderRadius","borderRadiusMedium","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase300","transitionDuration","durationFaster","transitionProperty","transitionTimingFunction","curveEasyEase","forcedColorAdjust","colorStrokeFocus2","borderWidth","outline","strokeWidthThick","colorTransparentStroke","boxShadow","zIndex","useIconBaseClassName","height","width","spacingHorizontalSNudge","useRootStyles","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackground","colorNeutralForeground2","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorNeutralForeground2BrandPressed","transparent","circular","borderRadiusCircular","rounded","square","borderRadiusNone","small","spacingHorizontalS","fontSizeBase200","fontWeightRegular","lineHeightBase200","smallWithIcon","paddingBottom","paddingTop","medium","large","spacingHorizontalL","fontSizeBase400","lineHeightBase400","largeWithIcon","useRootDisabledStyles","base","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","highContrast","useRootFocusStyles","shadow2","borderRadiusSmall","borderRadiusLarge","useRootIconOnlyStyles","maxWidth","useIconStyles","spacingHorizontalXS","before","marginRight","after","marginLeft","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Button/useButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n /\nconst boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\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\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\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,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorStrokeFocus2,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n inset\n `,\n zIndex: 1,\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n inset\n `,\n }),\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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 [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n ':hover:active,:active:focus-visible': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\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 [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n },\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations /\n },\n square: { borderRadius: tokens.borderRadiusNone },\n\n // Size variations\n small: {\n minWidth: '64px',\n padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n borderRadius: tokens.borderRadiusMedium,\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 padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n 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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\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 [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\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 [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\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,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n rounded: {\n / The rounded styles are exactly the same as the base styles. /\n },\n square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n\n // Primary styles\n primary: {\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n },\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,\n },\n }),\n },\n },\n\n // Size variations\n small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }),\n medium: {\n / defined in base styles /\n },\n large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: buttonSpacingSmallWithIcon,\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n padding: buttonSpacingMedium,\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n 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 'use no memo';\n\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 && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","makeStyles","makeResetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","margin","overflow","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","border","colorNeutralStroke1","fontFamily","fontFamilyBase","outlineStyle","colorNeutralBackground1Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground1Hover","cursor","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","padding","spacingHorizontalM","minWidth","borderRadius","borderRadiusMedium","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase300","transitionDuration","durationFaster","transitionProperty","transitionTimingFunction","curveEasyEase","forcedColorAdjust","colorStrokeFocus2","borderWidth","outline","strokeWidthThick","colorTransparentStroke","boxShadow","zIndex","useIconBaseClassName","height","width","spacingHorizontalSNudge","useRootStyles","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackground","colorNeutralForeground2","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorNeutralForeground2BrandPressed","transparent","circular","borderRadiusCircular","rounded","square","borderRadiusNone","small","spacingHorizontalS","fontSizeBase200","fontWeightRegular","lineHeightBase200","smallWithIcon","paddingBottom","paddingTop","medium","large","spacingHorizontalL","fontSizeBase400","lineHeightBase400","largeWithIcon","useRootDisabledStyles","base","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","highContrast","useRootFocusStyles","shadow2","borderRadiusSmall","borderRadiusLarge","useRootIconOnlyStyles","maxWidth","useIconStyles","spacingHorizontalXS","before","marginRight","after","marginLeft","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"mappings":"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"}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js ADDED Viewed

@@ -0,0 +1,49 @@
+'use client';
+// Re-export the same slot class names mapping used by the griffel styles file
+export const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = [
+        compoundButtonClassNames.root,
+        // Appearance
+        appearance && `${compoundButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${compoundButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${compoundButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${compoundButtonClassNames.root}--disabled`,
+        disabledFocusable && `${compoundButtonClassNames.root}--disabledFocusable`,
+        // Icon styles
+        icon && iconPosition === 'before' && `${compoundButtonClassNames.root}--iconBefore`,
+        icon && iconPosition === 'after' && `${compoundButtonClassNames.root}--iconAfter`,
+        icon && iconOnly && `${compoundButtonClassNames.root}--iconOnly`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            compoundButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    state.contentContainer.className = [
+        compoundButtonClassNames.contentContainer,
+        state.contentContainer.className
+    ].filter(Boolean).join(' ');
+    if (state.secondaryContent) {
+        state.secondaryContent.className = [
+            compoundButtonClassNames.secondaryContent,
+            state.secondaryContent.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n// Re-export the same slot class names mapping used by the griffel styles file\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\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n 'use no memo';\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = [\n compoundButtonClassNames.root,\n\n // Appearance\n appearance && `${compoundButtonClassNames.root}--${appearance}`,\n\n // Size\n size && `${compoundButtonClassNames.root}--${size}`,\n\n // Shape\n shape && `${compoundButtonClassNames.root}--${shape}`,\n\n // Disabled styles\n disabled && `${compoundButtonClassNames.root}--disabled`,\n disabledFocusable && `${compoundButtonClassNames.root}--disabledFocusable`,\n\n // Icon styles\n icon && iconPosition === 'before' && `${compoundButtonClassNames.root}--iconBefore`,\n icon && iconPosition === 'after' && `${compoundButtonClassNames.root}--iconAfter`,\n icon && iconOnly && `${compoundButtonClassNames.root}--iconOnly`,\n\n // User provided class name\n state.root.className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (state.icon) {\n state.icon.className = [compoundButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n }\n\n state.contentContainer.className = [compoundButtonClassNames.contentContainer, state.contentContainer.className]\n .filter(Boolean)\n .join(' ');\n\n if (state.secondaryContent) {\n state.secondaryContent.className = [compoundButtonClassNames.secondaryContent, state.secondaryContent.className]\n .filter(Boolean)\n .join(' ');\n }\n\n return state;\n};\n"],"names":["compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useCompoundButtonStyles_unstable","state","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","filter","Boolean","join"],"mappings":"AAAA;AAKA,8EAA8E;AAC9E,OAAO,MAAMA,2BAAgE;IAC3EC,MAAM;IACNC,MAAM;IACNC,kBAAkB;IAClBC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEP,IAAI,EAAEQ,QAAQ,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGP;IAE/FA,MAAML,IAAI,CAACa,SAAS,GAAG;QACrBd,yBAAyBC,IAAI;QAE7B,aAAa;QACbM,cAAc,GAAGP,yBAAyBC,IAAI,CAAC,EAAE,EAAEM,YAAY;QAE/D,OAAO;QACPM,QAAQ,GAAGb,yBAAyBC,IAAI,CAAC,EAAE,EAAEY,MAAM;QAEnD,QAAQ;QACRD,SAAS,GAAGZ,yBAAyBC,IAAI,CAAC,EAAE,EAAEW,OAAO;QAErD,kBAAkB;QAClBJ,YAAY,GAAGR,yBAAyBC,IAAI,CAAC,UAAU,CAAC;QACxDQ,qBAAqB,GAAGT,yBAAyBC,IAAI,CAAC,mBAAmB,CAAC;QAE1E,cAAc;QACdC,QAAQS,iBAAiB,YAAY,GAAGX,yBAAyBC,IAAI,CAAC,YAAY,CAAC;QACnFC,QAAQS,iBAAiB,WAAW,GAAGX,yBAAyBC,IAAI,CAAC,WAAW,CAAC;QACjFC,QAAQQ,YAAY,GAAGV,yBAAyBC,IAAI,CAAC,UAAU,CAAC;QAEhE,2BAA2B;QAC3BK,MAAML,IAAI,CAACa,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMJ,IAAI,EAAE;QACdI,MAAMJ,IAAI,CAACY,SAAS,GAAG;YAACd,yBAAyBE,IAAI;YAAEI,MAAMJ,IAAI,CAACY,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IACpG;IAEAX,MAAMH,gBAAgB,CAACW,SAAS,GAAG;QAACd,yBAAyBG,gBAAgB;QAAEG,MAAMH,gBAAgB,CAACW,SAAS;KAAC,CAC7GC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACU,SAAS,GAAG;YAACd,yBAAyBI,gBAAgB;YAAEE,MAAMF,gBAAgB,CAACU,SAAS;SAAC,CAC7GC,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js CHANGED Viewed

@@ -14,31 +14,31 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bqenvij: "f11ysow2",
     J657lq: "f1um431h",
     Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3"
+    Bo7webf: "frw79jk"
   },
   highContrast: {
     m3fafd: "ffcivv0",
-    qt6rog: "f15bgwjp"
+    pus4l6: "f1wchxtt"
   },
   outline: {},
   primary: {
     J657lq: "foe7gw6",
     Jlnjib: "fvxlz81",
-    Bc29nj9: "f1c2mdy",
+    Bo7webf: "f16twlsn",
     D126e9: "fsglouz"
   },
   secondary: {},
   subtle: {
     J657lq: "f1um431h",
     Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3",
+    Bo7webf: "frw79jk",
     m3fafd: "f13lnigs",
-    qt6rog: "f1cd0ylq"
+    pus4l6: "f1ba77l5"
   },
   transparent: {
     J657lq: "f1um431h",
     Jlnjib: "f1wn9xqz",
-    Bc29nj9: "f1a8q4d0"
+    Bo7webf: "f1juxwb4"
   },
   small: {
     Byoj8tv: 0,
@@ -70,12 +70,12 @@ const useRootStyles = /*#__PURE__*/__styles({
   disabled: {
     J657lq: "f1rlv8bf",
     Jlnjib: "fd1dbtm",
-    Bc29nj9: "f1vqmdmi"
+    Bo7webf: "f1x3eb98"
   },
   disabledHighContrast: {
     D126e9: "fbqh1p7",
     m3fafd: "fu2tbix",
-    qt6rog: "fiix86o"
+    pus4l6: "f1g2tosm"
   }
 }, {
   d: [".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", [".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}", {
@@ -85,22 +85,22 @@ const useRootStyles = /*#__PURE__*/__styles({
   }], [".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}", {
     p: -1
   }], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".frw79jk:hover:active .fui-CompoundButton__secondaryContent,.frw79jk:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f16twlsn:hover:active .fui-CompoundButton__secondaryContent,.f16twlsn:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1juxwb4:hover:active .fui-CompoundButton__secondaryContent,.f1juxwb4:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1x3eb98:hover:active .fui-CompoundButton__secondaryContent,.f1x3eb98:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
   m: [["@media (forced-colors: active){.ffcivv0:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f15bgwjp:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f1wchxtt:hover:active .fui-CompoundButton__secondaryContent,.f1wchxtt:active:focus-visible .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fsglouz .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f13lnigs:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1cd0ylq:hover:active .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
+  }], ["@media (forced-colors: active){.f1ba77l5:hover:active .fui-CompoundButton__secondaryContent,.f1ba77l5:active:focus-visible .fui-CompoundButton__secondaryContent{color:Canvas;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fbqh1p7 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fu2tbix:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fiix86o:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
+  }], ["@media (forced-colors: active){.f1g2tosm:hover:active .fui-CompoundButton__secondaryContent,.f1g2tosm:active:focus-visible .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }]]
 });

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","m3fafd","qt6rog","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\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 ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n }\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText'\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n },\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400\n },\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n }\n }\n }\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n maxWidth: '48px',\n minWidth: '48px'\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n maxWidth: '52px',\n minWidth: '52px'\n },\n large: {\n padding: tokens.spacingHorizontalS,\n maxWidth: '56px',\n minWidth: '56px'\n }\n});\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px'\n },\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM\n },\n after: {\n marginLeft: tokens.spacingHorizontalM\n }\n});\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left'\n }\n});\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n if (state.icon) {\n state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\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 ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n }\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText'\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n },\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400\n },\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n }\n }\n }\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n maxWidth: '48px',\n minWidth: '48px'\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n maxWidth: '52px',\n minWidth: '52px'\n },\n large: {\n padding: tokens.spacingHorizontalS,\n maxWidth: '56px',\n minWidth: '56px'\n }\n});\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px'\n },\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM\n },\n after: {\n marginLeft: tokens.spacingHorizontalM\n }\n});\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left'\n }\n});\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n (disabled \|\| disabledFocusable) && rootStyles.disabled, (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n if (state.icon) {\n state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js ADDED Viewed

@@ -0,0 +1,49 @@
+'use client';
+// Re-export the same slot class names mapping used by the griffel styles file
+export const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */ export const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = [
+        compoundButtonClassNames.root,
+        // Appearance
+        appearance && `${compoundButtonClassNames.root}--${appearance}`,
+        // Size
+        size && `${compoundButtonClassNames.root}--${size}`,
+        // Shape
+        shape && `${compoundButtonClassNames.root}--${shape}`,
+        // Disabled styles
+        disabled && `${compoundButtonClassNames.root}--disabled`,
+        disabledFocusable && `${compoundButtonClassNames.root}--disabledFocusable`,
+        // Icon styles
+        icon && iconPosition === 'before' && `${compoundButtonClassNames.root}--iconBefore`,
+        icon && iconPosition === 'after' && `${compoundButtonClassNames.root}--iconAfter`,
+        icon && iconOnly && `${compoundButtonClassNames.root}--iconOnly`,
+        // User provided class name
+        state.root.className
+    ].filter(Boolean).join(' ');
+    if (state.icon) {
+        state.icon.className = [
+            compoundButtonClassNames.icon,
+            state.icon.className
+        ].filter(Boolean).join(' ');
+    }
+    state.contentContainer.className = [
+        compoundButtonClassNames.contentContainer,
+        state.contentContainer.className
+    ].filter(Boolean).join(' ');
+    if (state.secondaryContent) {
+        state.secondaryContent.className = [
+            compoundButtonClassNames.secondaryContent,
+            state.secondaryContent.className
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map ADDED Viewed

@@ -0,0 +1 @@