@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
319 lines • 15.4 kB
JavaScript
define(["require", "exports", "office-ui-fabric-react/lib/components/Stack/StackUtils", "../../Styling", "../../Utilities"], function (require, exports, StackUtils_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable deprecation/deprecation */
/** @deprecated */
exports.baseTokens = function (props, theme) {
var effects = theme.effects;
return {
borderRadius: effects.roundedCorner2,
borderStyle: 'solid',
borderStyleFocused: 'solid',
borderWidth: 1,
childrenGap: 8,
contentPadding: '0px 20px',
cursor: 'pointer',
iconSize: 16,
iconWeight: 400,
lineHeight: 1,
minHeight: 32,
minWidth: 100,
textFamily: 'inherit',
textSize: 14,
textWeight: Styling_1.FontWeights.semibold,
};
};
/** @deprecated */
exports.hrefTokens = {
contentPadding: '8px 16px',
};
/** @deprecated */
exports.circularTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundClipFocused: 'content-box',
borderColorFocused: semanticColors.focusBorder,
borderRadius: '50%',
borderStyleFocused: 'double',
borderWidthFocused: 3,
contentPadding: 0,
contentPaddingFocused: 1,
minHeight: 32,
minWidth: 32,
outlineColor: 'transparent',
};
};
/** @deprecated */
exports.enabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackground,
backgroundColorHovered: semanticColors.buttonBackgroundHovered,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
borderColor: semanticColors.buttonBorder,
borderColorHovered: semanticColors.buttonBorder,
borderColorPressed: semanticColors.buttonBorder,
highContrastBorderColorHovered: 'Highlight',
highContrastBorderColorPressed: 'Highlight',
color: semanticColors.buttonText,
colorHovered: semanticColors.buttonTextHovered,
colorPressed: semanticColors.buttonTextPressed,
highContrastColorHovered: 'Highlight',
highContrastColorPressed: 'Highlight',
iconColor: semanticColors.buttonText,
iconColorHovered: semanticColors.buttonTextHovered,
iconColorPressed: semanticColors.buttonTextPressed,
highContrastIconColorHovered: 'Highlight',
highContrastIconColorPressed: 'Highlight',
};
};
/** @deprecated */
exports.disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackgroundDisabled,
backgroundColorHovered: semanticColors.buttonBackgroundDisabled,
backgroundColorPressed: semanticColors.buttonBackgroundDisabled,
highContrastBackgroundColor: 'Window',
highContrastBackgroundColorHovered: 'Window',
highContrastBackgroundColorPressed: 'Window',
borderColor: semanticColors.buttonBorderDisabled,
borderColorHovered: semanticColors.buttonBorderDisabled,
borderColorPressed: semanticColors.buttonBorderDisabled,
highContrastBorderColor: 'GrayText',
highContrastBorderColorHovered: 'GrayText',
highContrastBorderColorPressed: 'GrayText',
color: semanticColors.buttonTextDisabled,
colorHovered: semanticColors.buttonTextDisabled,
colorPressed: semanticColors.buttonTextDisabled,
highContrastColor: 'GrayText',
highContrastColorHovered: 'GrayText',
highContrastColorPressed: 'GrayText',
cursor: 'default',
iconColor: semanticColors.buttonTextDisabled,
iconColorHovered: semanticColors.buttonTextDisabled,
iconColorPressed: semanticColors.buttonTextDisabled,
highContrastIconColor: 'GrayText',
highContrastIconColorHovered: 'GrayText',
highContrastIconColorPressed: 'GrayText',
};
};
/** @deprecated */
exports.primaryEnabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.primaryButtonBackground,
backgroundColorHovered: semanticColors.primaryButtonBackgroundHovered,
backgroundColorPressed: semanticColors.primaryButtonBackgroundPressed,
highContrastBackgroundColor: 'WindowText',
highContrastBackgroundColorHovered: 'Highlight',
highContrastBackgroundColorPressed: 'Highlight',
borderWidth: 0,
color: semanticColors.primaryButtonText,
colorHovered: semanticColors.primaryButtonTextHovered,
colorPressed: semanticColors.primaryButtonTextPressed,
highContrastColor: 'Window',
highContrastColorHovered: 'Window',
highContrastColorPressed: 'Window',
iconColor: semanticColors.primaryButtonText,
iconColorHovered: semanticColors.primaryButtonTextHovered,
iconColorPressed: semanticColors.primaryButtonTextPressed,
highContrastIconColor: 'Window',
highContrastIconColorHovered: 'Window',
highContrastIconColorPressed: 'Window',
msHighContrastAdjust: 'none',
outlineColor: 'transparent',
};
};
/** @deprecated */
exports.primaryCircularTokens = {
borderStyleFocused: 'solid',
borderWidthFocused: 1,
};
/** @deprecated */
exports.checkedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackgroundChecked,
backgroundColorHovered: semanticColors.buttonBackgroundCheckedHovered,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
color: semanticColors.buttonTextChecked,
colorHovered: semanticColors.buttonTextCheckedHovered,
colorPressed: semanticColors.buttonTextPressed,
iconColor: semanticColors.buttonTextChecked,
iconColorHovered: semanticColors.buttonTextCheckedHovered,
iconColorPressed: semanticColors.buttonTextPressed,
};
};
/** @deprecated */
exports.primaryCheckedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.primaryButtonBackgroundPressed,
backgroundColorHovered: semanticColors.primaryButtonBackgroundHovered,
backgroundColorPressed: semanticColors.primaryButtonBackgroundPressed,
color: semanticColors.primaryButtonTextPressed,
colorHovered: semanticColors.primaryButtonTextHovered,
colorPressed: semanticColors.primaryButtonTextPressed,
iconColor: semanticColors.primaryButtonTextPressed,
iconColorHovered: semanticColors.primaryButtonTextHovered,
iconColorPressed: semanticColors.primaryButtonTextPressed,
};
};
/** @deprecated */
exports.ButtonTokens = function (props, theme) { return [
exports.baseTokens,
!!props.href && exports.hrefTokens,
!props.disabled && exports.enabledTokens,
props.primary && exports.primaryEnabledTokens,
props.circular && exports.circularTokens,
props.circular && props.primary && exports.primaryCircularTokens,
props.checked && exports.checkedTokens,
props.checked && props.primary && exports.primaryCheckedTokens,
props.disabled && exports.disabledTokens,
]; };
var GlobalClassNames = {
msButton: 'ms-Button',
msButtonIcon: 'ms-Button-icon',
};
/** @deprecated */
exports.ButtonStyles = function (props, theme, tokens) {
var _a, _b, _c, _d, _e, _f, _g;
var className = props.className, circular = props.circular;
var _h = StackUtils_1.parseGap(tokens.childrenGap, theme), rowGap = _h.rowGap, columnGap = _h.columnGap;
var globalClassNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
globalClassNames.msButton,
!circular && Styling_1.getFocusStyle(theme, { inset: 1, outlineColor: tokens.outlineColor }),
circular && {
selectors: (_a = {},
_a["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
borderWidth: 1,
},
_a),
},
theme.fonts.medium,
{
alignItems: 'center',
backgroundColor: tokens.backgroundColor,
borderColor: tokens.borderColor,
borderRadius: tokens.borderRadius,
borderStyle: tokens.borderStyle,
borderWidth: tokens.borderWidth,
boxSizing: 'border-box',
color: tokens.color,
cursor: tokens.cursor,
display: 'inline-flex',
flexDirection: 'row',
fontSize: tokens.textSize,
fontWeight: tokens.textWeight,
height: tokens.height,
justifyContent: 'center',
margin: 0,
minWidth: tokens.minWidth,
minHeight: tokens.minHeight,
outlineColor: tokens.outlineColor,
overflow: 'hidden',
padding: tokens.contentPadding,
textAlign: 'center',
textDecoration: 'none',
userSelect: 'none',
verticalAlign: 'baseline',
width: tokens.width,
selectors: (_b = {
'> *': {
marginLeft: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
textOverflow: 'ellipsis',
},
'> *:not(:first-child)': {
marginLeft: "" + columnGap.value + columnGap.unit,
}
},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColor,
borderColor: tokens.highContrastBorderColor,
borderWidth: 1,
color: tokens.highContrastColor,
MsHighContrastAdjust: tokens.msHighContrastAdjust,
},
_b[':hover'] = {
backgroundColor: tokens.backgroundColorHovered,
borderColor: tokens.borderColorHovered,
color: tokens.colorHovered,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorHovered,
borderColor: tokens.highContrastBorderColorHovered,
color: tokens.highContrastColorHovered,
},
_c),
},
_b[':active'] = {
backgroundColor: tokens.backgroundColorPressed,
borderColor: tokens.borderColorPressed,
color: tokens.colorPressed,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorPressed,
borderColor: tokens.highContrastBorderColorPressed,
color: tokens.highContrastColorPressed,
},
_d),
},
_b[":hover ." + globalClassNames.msButtonIcon] = {
color: tokens.iconColorHovered,
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
color: tokens.highContrastIconColorHovered,
},
_e),
},
_b[":active ." + globalClassNames.msButtonIcon] = {
color: tokens.iconColorPressed,
selectors: (_f = {},
_f[Styling_1.HighContrastSelector] = {
color: tokens.highContrastIconColorPressed,
},
_f),
},
// 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.
_b["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
backgroundClip: tokens.backgroundClipFocused,
borderColor: tokens.borderColorFocused,
borderStyle: tokens.borderStyleFocused,
borderWidth: tokens.borderWidthFocused,
outlineColor: tokens.outlineColor,
padding: tokens.contentPaddingFocused,
},
_b),
},
className,
],
icon: [
globalClassNames.msButtonIcon,
{
color: tokens.iconColor,
display: 'flex',
fill: tokens.iconColor,
fontSize: tokens.iconSize,
fontWeight: tokens.iconWeight,
selectors: (_g = {},
_g[Styling_1.HighContrastSelector] = {
color: tokens.highContrastIconColor,
},
_g),
},
],
content: {
fontFamily: tokens.textFamily,
fontSize: tokens.textSize,
fontWeight: tokens.textWeight,
overflow: 'visible',
},
};
};
});
//# sourceMappingURL=Button.styles.js.map