Lago/power-apps-codeapps-blog-part2
Private
Public Access
1
0
Fork 0
Code Activity

feat: Fluent UI Outlook Lite + connections mockup

Browse Source
This commit is contained in:
Lago
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

496
node_modules/@fluentui/react-button/lib-commonjs/components/Button/useButtonStyles.styles.raw.js generated vendored Normal file
View File

@@ -0,0 +1,496 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
buttonClassNames: function() {
return buttonClassNames;
},
useButtonStyles_unstable: function() {
return useButtonStyles_unstable;
}
});
const _reacticons = require("@fluentui/react-icons");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const buttonClassNames = {
root: 'fui-Button',
icon: 'fui-Button__icon'
};
const iconSpacingVar = '--fui-Button__icon--spacing';
const buttonSpacingSmall = '3px';
const buttonSpacingSmallWithIcon = '1px';
const buttonSpacingMedium = '5px';
const buttonSpacingLarge = '8px';
const buttonSpacingLargeWithIcon = '7px';
/* Firefox has box shadow sizing issue at some zoom levels
* this will ensure the inset boxShadow is always uniform
* without affecting other browser platforms
*/ const boxShadowStrokeWidthThinMoz = `calc(${_reacttheme.tokens.strokeWidthThin} + 0.25px)`;
const useRootBaseClassName = (0, _react.makeResetStyles)({
alignItems: 'center',
boxSizing: 'border-box',
display: 'inline-flex',
justifyContent: 'center',
textDecorationLine: 'none',
verticalAlign: 'middle',
margin: 0,
overflow: 'hidden',
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
fontFamily: _reacttheme.tokens.fontFamilyBase,
outlineStyle: 'none',
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
borderColor: _reacttheme.tokens.colorNeutralStroke1Hover,
color: _reacttheme.tokens.colorNeutralForeground1Hover,
cursor: 'pointer'
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
borderColor: _reacttheme.tokens.colorNeutralStroke1Pressed,
color: _reacttheme.tokens.colorNeutralForeground1Pressed,
outlineStyle: 'none'
},
padding: `${buttonSpacingMedium} ${_reacttheme.tokens.spacingHorizontalM}`,
minWidth: '96px',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
fontSize: _reacttheme.tokens.fontSizeBase300,
fontWeight: _reacttheme.tokens.fontWeightSemibold,
lineHeight: _reacttheme.tokens.lineHeightBase300,
// Transition styles
transitionDuration: _reacttheme.tokens.durationFaster,
transitionProperty: 'background, border, color',
transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms'
},
// High contrast styles
'@media (forced-colors: active)': {
':focus': {
borderColor: 'ButtonText'
},
':hover': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
forcedColorAdjust: 'none'
},
':hover:active,:active:focus-visible': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
forcedColorAdjust: 'none'
}
},
// Focus styles
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderColor: _reacttheme.tokens.colorStrokeFocus2,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
borderWidth: '1px',
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorTransparentStroke}`,
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2}
inset
`,
zIndex: 1
}),
// BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
'@supports (-moz-appearance:button)': {
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2}
inset
`
})
}
});
const useIconBaseClassName = (0, _react.makeResetStyles)({
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'center',
fontSize: '20px',
height: '20px',
width: '20px',
[iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
});
const useRootStyles = (0, _react.makeStyles)({
// Appearance variations
outline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
}
},
primary: {
backgroundColor: _reacttheme.tokens.colorBrandBackground,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
':hover': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
'@media (forced-colors: active)': {
backgroundColor: 'Highlight',
..._react.shorthands.borderColor('HighlightText'),
color: 'HighlightText',
forcedColorAdjust: 'none',
':hover': {
backgroundColor: 'HighlightText',
..._react.shorthands.borderColor('Highlight'),
color: 'Highlight'
},
':hover:active,:active:focus-visible': {
backgroundColor: 'HighlightText',
..._react.shorthands.borderColor('Highlight'),
color: 'Highlight'
}
}
},
secondary: {},
subtle: {
backgroundColor: _reacttheme.tokens.colorSubtleBackground,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2,
':hover': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2Hover,
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
},
[`& .${buttonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForeground2BrandHover
}
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2Pressed,
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
},
[`& .${buttonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
}
},
'@media (forced-colors: active)': {
':hover': {
color: 'Highlight',
[`& .${buttonClassNames.icon}`]: {
color: 'Highlight'
}
},
':hover:active,:active:focus-visible': {
color: 'Highlight',
[`& .${buttonClassNames.icon}`]: {
color: 'Highlight'
}
}
}
},
transparent: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2BrandHover,
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
}
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed,
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
}
},
'@media (forced-colors: active)': {
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
color: 'Highlight'
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
color: 'Highlight'
}
}
},
// Shape variations
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular
},
rounded: {},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone
},
// Size variations
small: {
minWidth: '64px',
padding: `${buttonSpacingSmall} ${_reacttheme.tokens.spacingHorizontalS}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
fontSize: _reacttheme.tokens.fontSizeBase200,
fontWeight: _reacttheme.tokens.fontWeightRegular,
lineHeight: _reacttheme.tokens.lineHeightBase200
},
smallWithIcon: {
paddingBottom: buttonSpacingSmallWithIcon,
paddingTop: buttonSpacingSmallWithIcon
},
medium: {},
large: {
minWidth: '96px',
padding: `${buttonSpacingLarge} ${_reacttheme.tokens.spacingHorizontalL}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
fontSize: _reacttheme.tokens.fontSizeBase400,
fontWeight: _reacttheme.tokens.fontWeightSemibold,
lineHeight: _reacttheme.tokens.lineHeightBase400
},
largeWithIcon: {
paddingBottom: buttonSpacingLargeWithIcon,
paddingTop: buttonSpacingLargeWithIcon
}
});
const useRootDisabledStyles = (0, _react.makeStyles)({
// Base styles
base: {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
[`& .${buttonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'none'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'inline'
},
[`& .${buttonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'none'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'inline'
},
[`& .${buttonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
}
},
// High contrast styles
highContrast: {
'@media (forced-colors: active)': {
backgroundColor: 'ButtonFace',
..._react.shorthands.borderColor('GrayText'),
color: 'GrayText',
[`& .${buttonClassNames.icon}`]: {
color: 'GrayText'
},
':focus': {
..._react.shorthands.borderColor('GrayText')
},
':hover': {
backgroundColor: 'ButtonFace',
..._react.shorthands.borderColor('GrayText'),
color: 'GrayText',
[`& .${buttonClassNames.icon}`]: {
color: 'GrayText'
}
},
':hover:active,:active:focus-visible': {
backgroundColor: 'ButtonFace',
..._react.shorthands.borderColor('GrayText'),
color: 'GrayText',
[`& .${buttonClassNames.icon}`]: {
color: 'GrayText'
}
}
}
},
// Appearance variations
outline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground
}
},
primary: {
..._react.shorthands.borderColor('transparent'),
':hover': {
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
..._react.shorthands.borderColor('transparent')
}
},
secondary: {},
subtle: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent'),
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent')
}
},
transparent: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent'),
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent')
}
}
});
const useRootFocusStyles = (0, _react.makeStyles)({
// Shape variations
circular: (0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
}),
rounded: {},
square: (0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
}),
// Primary styles
primary: {
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2),
boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset, 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
':hover': {
boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset`,
..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2)
}
}),
// BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
'@supports (-moz-appearance:button)': {
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset, 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
':hover': {
boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset`
}
})
}
},
// Size variations
small: (0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusSmall
}),
medium: {},
large: (0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusLarge
})
});
const useRootIconOnlyStyles = (0, _react.makeStyles)({
// Size variations
small: {
padding: buttonSpacingSmallWithIcon,
minWidth: '24px',
maxWidth: '24px'
},
medium: {
padding: buttonSpacingMedium,
minWidth: '32px',
maxWidth: '32px'
},
large: {
padding: buttonSpacingLargeWithIcon,
minWidth: '40px',
maxWidth: '40px'
}
});
const useIconStyles = (0, _react.makeStyles)({
// Size variations
small: {
fontSize: '20px',
height: '20px',
width: '20px',
[iconSpacingVar]: _reacttheme.tokens.spacingHorizontalXS
},
medium: {},
large: {
fontSize: '24px',
height: '24px',
width: '24px',
[iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
},
// Icon position variations
before: {
marginRight: `var(${iconSpacingVar})`
},
after: {
marginLeft: `var(${iconSpacingVar})`
}
});
const useButtonStyles_unstable = (state)=>{
'use no memo';
const rootBaseClassName = useRootBaseClassName();
const iconBaseClassName = useIconBaseClassName();
const rootStyles = useRootStyles();
const rootDisabledStyles = useRootDisabledStyles();
const rootFocusStyles = useRootFocusStyles();
const rootIconOnlyStyles = useRootIconOnlyStyles();
const iconStyles = useIconStyles();
const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
state.root.className = (0, _react.mergeClasses)(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], iconOnly && rootIconOnlyStyles[size], state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
}
return state;
};