@fluentui/react
Version:
Reusable React components for building web experiences.
191 lines • 7.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var tslib_1 = require("tslib");
var Styling_1 = require("../../../Styling");
var Utilities_1 = require("../../../Utilities");
var BaseButton_styles_1 = require("../BaseButton.styles");
var SplitButton_styles_1 = require("../SplitButton/SplitButton.styles");
var BaseButton_classNames_1 = require("../BaseButton.classNames");
exports.getStyles = (0, Utilities_1.memoizeFunction)(function (theme, customStyles, focusInset, focusColor) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var baseButtonStyles = (0, BaseButton_styles_1.getStyles)(theme);
var baseSplitButtonStyles = (0, SplitButton_styles_1.getStyles)(theme);
var p = theme.palette, semanticColors = theme.semanticColors;
var commandButtonHighContrastFocus = {
left: 4,
top: 4,
bottom: 4,
right: 4,
border: 'none',
};
var commandButtonStyles = {
root: [
(0, Styling_1.getFocusStyle)(theme, {
inset: 2,
highContrastStyle: commandButtonHighContrastFocus,
borderColor: 'transparent',
}),
theme.fonts.medium,
(_a = {
minWidth: '40px',
backgroundColor: p.white,
color: p.neutralPrimary,
padding: '0 4px',
border: 'none',
borderRadius: 0
},
_a[Styling_1.HighContrastSelector] = {
border: 'none',
},
_a),
],
rootHovered: (_b = {
backgroundColor: p.neutralLighter,
color: p.neutralDark
},
_b[Styling_1.HighContrastSelector] = {
color: 'Highlight',
},
_b[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.themeDarkAlt,
},
_b[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonMenuIcon)] = {
color: p.neutralPrimary,
},
_b),
rootPressed: (_c = {
backgroundColor: p.neutralLight,
color: p.neutralDark
},
_c[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.themeDark,
},
_c[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonMenuIcon)] = {
color: p.neutralPrimary,
},
_c),
rootChecked: (_d = {
backgroundColor: p.neutralLight,
color: p.neutralDark
},
_d[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.themeDark,
},
_d[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonMenuIcon)] = {
color: p.neutralPrimary,
},
_d),
rootCheckedHovered: (_e = {
backgroundColor: p.neutralQuaternaryAlt
},
_e[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.themeDark,
},
_e[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonMenuIcon)] = {
color: p.neutralPrimary,
},
_e),
rootExpanded: (_f = {
backgroundColor: p.neutralLight,
color: p.neutralDark
},
_f[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.themeDark,
},
_f[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonMenuIcon)] = {
color: p.neutralPrimary,
},
_f),
rootExpandedHovered: {
backgroundColor: p.neutralQuaternaryAlt,
},
rootDisabled: (_g = {
backgroundColor: p.white
},
_g[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = (_h = {
color: semanticColors.disabledBodySubtext
},
_h[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_h),
_g[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText', backgroundColor: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_g),
// Split button styles
splitButtonContainer: (_j = {
height: '100%'
},
_j[Styling_1.HighContrastSelector] = {
border: 'none',
},
_j),
splitButtonDividerDisabled: (_k = {},
_k[Styling_1.HighContrastSelector] = {
backgroundColor: 'Window',
},
_k),
splitButtonDivider: {
backgroundColor: p.neutralTertiaryAlt,
},
splitButtonMenuButton: {
backgroundColor: p.white,
border: 'none',
borderTopRightRadius: '0',
borderBottomRightRadius: '0',
color: p.neutralSecondary,
':hover': (_l = {
backgroundColor: p.neutralLighter,
color: p.neutralDark
},
_l[Styling_1.HighContrastSelector] = {
color: 'Highlight',
},
_l[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.neutralPrimary,
},
_l),
':active': (_m = {
backgroundColor: p.neutralLight
},
_m[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: p.neutralPrimary,
},
_m),
},
splitButtonMenuButtonDisabled: (_o = {
backgroundColor: p.white
},
_o[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText', border: 'none', backgroundColor: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_o),
splitButtonMenuButtonChecked: {
backgroundColor: p.neutralLight,
color: p.neutralDark,
':hover': {
backgroundColor: p.neutralQuaternaryAlt,
},
},
splitButtonMenuButtonExpanded: {
backgroundColor: p.neutralLight,
color: p.black,
':hover': {
backgroundColor: p.neutralQuaternaryAlt,
},
},
splitButtonMenuIcon: {
color: p.neutralPrimary,
},
splitButtonMenuIconDisabled: {
color: p.neutralTertiary,
},
label: {
fontWeight: 'normal', // theme.fontWeights.semibold,
},
icon: {
color: p.themePrimary,
},
menuIcon: {
color: p.neutralSecondary,
},
};
return (0, Styling_1.concatStyleSets)(baseButtonStyles, baseSplitButtonStyles, commandButtonStyles, customStyles);
});
//# sourceMappingURL=CommandBarButton.styles.js.map