@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
170 lines • 7.12 kB
JavaScript
import { getFocusStyle, getGlobalClassNames } from '../../Styling';
import { IsFocusVisibleClassName } from '../../Utilities';
var baseTokens = {
borderRadius: 0,
borderWidth: 0,
minWidth: 100,
minHeight: 32,
lineHeight: 1,
contentPadding: '8px 16px',
textFamily: 'default',
textSize: 14,
iconSize: 14,
iconWeight: 400
};
var circularTokens = function (props, theme) {
return {
borderRadius: '50%',
borderWidth: 1,
minWidth: 32,
minHeight: 32,
contentPadding: '',
borderColorFocused: theme.palette.neutralSecondary,
outlineColor: 'transparent',
contentPaddingFocused: 1,
backgroundClip: 'content-box'
};
};
var enabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackground,
backgroundColorHovered: semanticColors.buttonBackgroundHovered,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
iconColor: semanticColors.buttonText,
iconColorHovered: semanticColors.buttonTextHovered,
iconColorPressed: semanticColors.buttonTextPressed,
color: semanticColors.buttonText,
colorHovered: semanticColors.buttonTextHovered,
colorPressed: semanticColors.buttonTextPressed,
borderColor: semanticColors.buttonBorder,
borderColorHovered: semanticColors.buttonBorder,
borderColorPressed: semanticColors.buttonBorder
};
};
var disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: theme.semanticColors.buttonBackgroundDisabled,
backgroundColorHovered: semanticColors.buttonBackgroundDisabled,
backgroundColorPressed: semanticColors.buttonBackgroundDisabled,
iconColor: semanticColors.buttonTextDisabled,
iconColorHovered: semanticColors.buttonTextDisabled,
iconColorPressed: semanticColors.buttonTextDisabled,
color: semanticColors.buttonTextDisabled,
colorHovered: semanticColors.buttonTextDisabled,
colorPressed: semanticColors.buttonTextDisabled,
borderColor: semanticColors.buttonBorderDisabled,
borderColorHovered: semanticColors.buttonBorderDisabled,
borderColorPressed: semanticColors.buttonBorderDisabled
};
};
var primaryEnabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.primaryButtonBackground,
backgroundColorHovered: semanticColors.primaryButtonBackgroundHovered,
backgroundColorPressed: semanticColors.primaryButtonBackgroundPressed,
color: semanticColors.primaryButtonText,
colorHovered: semanticColors.primaryButtonTextHovered,
colorPressed: semanticColors.primaryButtonTextPressed,
iconColor: semanticColors.primaryButtonText,
iconColorHovered: semanticColors.primaryButtonTextHovered,
iconColorPressed: semanticColors.primaryButtonTextPressed,
borderColor: semanticColors.primaryButtonBorder
};
};
export var ButtonTokens = function (props, theme) { return [
baseTokens,
!props.disabled && enabledTokens,
props.primary && primaryEnabledTokens,
props.circular && circularTokens,
props.disabled && disabledTokens
]; };
export var ButtonStyles = function (props, theme, tokens) {
var className = props.className, circular = props.circular;
var globalClassNames = getGlobalClassNames({
icon: 'ms-Icon'
}, theme, true);
return {
root: [
!circular && getFocusStyle(theme),
theme.fonts.medium,
{
backgroundColor: tokens.backgroundColor,
borderColor: tokens.borderColor,
borderRadius: tokens.borderRadius,
borderStyle: 'solid',
borderWidth: tokens.borderWidth,
boxSizing: 'border-box',
color: tokens.color,
cursor: 'default',
display: 'inline-block',
fontSize: tokens.textSize,
fontWeight: tokens.textWeight,
height: tokens.height,
justifyContent: 'center',
margin: 0,
minWidth: tokens.minWidth,
minHeight: tokens.minHeight,
overflow: 'hidden',
padding: 0,
textDecoration: 'none',
textAlign: 'center',
userSelect: 'none',
verticalAlign: 'baseline',
width: tokens.width,
outlineColor: tokens.outlineColor,
selectors: (_a = {
':hover': {
backgroundColor: tokens.backgroundColorHovered,
color: tokens.colorHovered,
borderColor: tokens.borderColorHovered
},
':hover:active': {
backgroundColor: tokens.backgroundColorPressed,
color: tokens.colorPressed,
borderColor: tokens.borderColorPressed
}
},
_a[":hover ." + globalClassNames.icon] = {
color: tokens.iconColorHovered
},
_a[":hover:active ." + globalClassNames.icon] = {
color: tokens.iconColorPressed
},
// We have this here to establish the focus style of circular Buttons. If we use getFocusStyle to get the focus style, then the
// focus style for circular Buttons becomes busted, and the way to fix it is via the backgroundClip and padding attributes, which
// we don't have access to via getFocusStyle.
_a["." + IsFocusVisibleClassName + " &:focus"] = {
borderColor: tokens.borderColorFocused,
outlineColor: tokens.outlineColor,
backgroundClip: tokens.backgroundClip,
padding: tokens.contentPaddingFocused
},
_a)
},
className
],
stack: {
padding: tokens.contentPadding,
height: '100%'
},
icon: [
{
display: 'flex',
fontSize: tokens.iconSize,
color: tokens.iconColor,
fill: tokens.iconColor,
// tslint:disable-next-line:no-any
fontWeight: tokens.iconWeight
},
globalClassNames.icon
],
content: {
overflow: 'visible'
}
};
var _a;
};
//# sourceMappingURL=Button.styles.js.map