@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
116 lines • 5.45 kB
JavaScript
define(["require", "exports", "../../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable deprecation/deprecation */
var baseTokens = function (props, theme) {
return {
menuIconSize: 12,
minWidth: 0,
};
};
var expandedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColorExpanded: semanticColors.buttonBackgroundPressed,
backgroundColorExpandedHovered: semanticColors.buttonBackgroundPressed,
backgroundColorExpandedPressed: semanticColors.buttonBackgroundPressed,
borderColor: semanticColors.buttonBorder,
borderColorHovered: semanticColors.buttonBorder,
borderColorPressed: semanticColors.buttonBorder,
color: semanticColors.buttonTextPressed,
colorHovered: semanticColors.buttonTextPressed,
colorPressed: semanticColors.buttonTextPressed,
highContrastColor: 'Highlight',
highContrastColorHovered: 'Highlight',
highContrastColorPressed: 'Highlight',
highContrastBorderColor: 'Highlight',
highContrastBorderColorHovered: 'Highlight',
highContrastBorderColorPressed: 'Highlight',
};
};
var primaryExpandedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColorExpanded: semanticColors.primaryButtonBackgroundPressed,
backgroundColorExpandedHovered: semanticColors.primaryButtonBackgroundPressed,
backgroundColorExpandedPressed: semanticColors.primaryButtonBackgroundPressed,
highContrastBackgroundColor: 'Highlight',
highContrastBackgroundColorHovered: 'Highlight',
highContrastBackgroundColorPressed: 'Highlight',
color: semanticColors.primaryButtonTextPressed,
colorHovered: semanticColors.primaryButtonTextPressed,
colorPressed: semanticColors.primaryButtonTextPressed,
highContrastColor: 'Window',
highContrastColorHovered: 'Window',
highContrastColorPressed: 'Window',
};
};
/** @deprecated */
exports.MenuButtonTokens = function (props, theme) { return [
baseTokens,
props.expanded && expandedTokens,
props.primary && props.expanded && primaryExpandedTokens,
]; };
var GlobalClassNames = {
msMenuButton: 'ms-MenuButton',
};
/** @deprecated */
exports.MenuButtonStyles = function (props, theme, tokens) {
var _a, _b, _c;
var className = props.className;
var globalClassNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: {
display: 'inline-flex',
},
button: [
globalClassNames.msMenuButton,
{
backgroundColor: props.expanded ? tokens.backgroundColorExpanded : tokens.backgroundColor,
borderColor: tokens.borderColor,
color: tokens.color,
minWidth: tokens.minWidth,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColor,
color: tokens.highContrastColor,
borderColor: tokens.highContrastBorderColor,
},
_a[':hover'] = {
backgroundColor: props.expanded ? tokens.backgroundColorExpandedHovered : tokens.backgroundColorHovered,
color: tokens.colorHovered,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorHovered,
color: tokens.highContrastColorHovered,
borderColor: tokens.highContrastBorderColorHovered,
},
_b),
},
_a[':hover:active'] = {
backgroundColor: props.expanded ? tokens.backgroundColorExpandedPressed : tokens.backgroundColorPressed,
color: tokens.colorPressed,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorPressed,
color: tokens.highContrastColorPressed,
borderColor: tokens.highContrastBorderColorPressed,
},
_c),
},
_a),
},
className,
],
menuArea: {
height: 'auto',
width: 'auto',
},
menuIcon: {
fontSize: tokens.menuIconSize,
paddingTop: '5px',
},
};
};
});
//# sourceMappingURL=MenuButton.styles.js.map