@fluentui/react
Version:
Reusable React components for building web experiences.
229 lines • 9.52 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.primaryStyles = exports.standardStyles = void 0;
var splitButtonDividerBaseStyles = function () {
return {
position: 'absolute',
width: 1,
right: 31,
top: 8,
bottom: 8,
};
};
function standardStyles(theme) {
var _a, _b, _c, _d, _e;
var s = theme.semanticColors, p = theme.palette;
var buttonBackground = s.buttonBackground;
var buttonBackgroundPressed = s.buttonBackgroundPressed;
var buttonBackgroundHovered = s.buttonBackgroundHovered;
var buttonBackgroundDisabled = s.buttonBackgroundDisabled;
var buttonText = s.buttonText;
var buttonTextHovered = s.buttonTextHovered;
var buttonTextDisabled = s.buttonTextDisabled;
var buttonTextChecked = s.buttonTextChecked;
var buttonTextCheckedHovered = s.buttonTextCheckedHovered;
return {
root: {
backgroundColor: buttonBackground,
color: buttonText,
},
rootHovered: (_a = {
backgroundColor: buttonBackgroundHovered,
color: buttonTextHovered
},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight',
color: 'Highlight',
},
_a),
rootPressed: {
backgroundColor: buttonBackgroundPressed,
color: buttonTextChecked,
},
rootExpanded: {
backgroundColor: buttonBackgroundPressed,
color: buttonTextChecked,
},
rootChecked: {
backgroundColor: buttonBackgroundPressed,
color: buttonTextChecked,
},
rootCheckedHovered: {
backgroundColor: buttonBackgroundPressed,
color: buttonTextCheckedHovered,
},
rootDisabled: (_b = {
color: buttonTextDisabled,
backgroundColor: buttonBackgroundDisabled
},
_b[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_b),
// Split button styles
splitButtonContainer: (_c = {},
_c[Styling_1.HighContrastSelector] = {
border: 'none',
},
_c),
splitButtonMenuButton: {
color: p.white,
backgroundColor: 'transparent',
':hover': (_d = {
backgroundColor: p.neutralLight
},
_d[Styling_1.HighContrastSelector] = {
color: 'Highlight',
},
_d),
},
splitButtonMenuButtonDisabled: {
backgroundColor: s.buttonBackgroundDisabled,
':hover': {
backgroundColor: s.buttonBackgroundDisabled,
},
},
splitButtonDivider: tslib_1.__assign(tslib_1.__assign({}, splitButtonDividerBaseStyles()), (_e = { backgroundColor: p.neutralTertiaryAlt }, _e[Styling_1.HighContrastSelector] = {
backgroundColor: 'WindowText',
}, _e)),
splitButtonDividerDisabled: {
backgroundColor: theme.palette.neutralTertiaryAlt,
},
splitButtonMenuButtonChecked: {
backgroundColor: p.neutralQuaternaryAlt,
':hover': {
backgroundColor: p.neutralQuaternaryAlt,
},
},
splitButtonMenuButtonExpanded: {
backgroundColor: p.neutralQuaternaryAlt,
':hover': {
backgroundColor: p.neutralQuaternaryAlt,
},
},
splitButtonMenuIcon: {
color: s.buttonText,
},
splitButtonMenuIconDisabled: {
color: s.buttonTextDisabled,
},
};
}
exports.standardStyles = standardStyles;
function primaryStyles(theme) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
var p = theme.palette, s = theme.semanticColors;
return {
root: (_a = {
backgroundColor: s.primaryButtonBackground,
border: "1px solid ".concat(s.primaryButtonBackground),
color: s.primaryButtonText
},
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
':after': {
border: "none",
outlineColor: p.white,
},
},
_a),
rootHovered: (_b = {
backgroundColor: s.primaryButtonBackgroundHovered,
border: "1px solid ".concat(s.primaryButtonBackgroundHovered),
color: s.primaryButtonTextHovered
},
_b[Styling_1.HighContrastSelector] = {
color: 'Window',
backgroundColor: 'Highlight',
borderColor: 'Highlight',
},
_b),
rootPressed: (_c = {
backgroundColor: s.primaryButtonBackgroundPressed,
border: "1px solid ".concat(s.primaryButtonBackgroundPressed),
color: s.primaryButtonTextPressed
},
_c[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_c),
rootExpanded: {
backgroundColor: s.primaryButtonBackgroundPressed,
color: s.primaryButtonTextPressed,
},
rootChecked: {
backgroundColor: s.primaryButtonBackgroundPressed,
color: s.primaryButtonTextPressed,
},
rootCheckedHovered: {
backgroundColor: s.primaryButtonBackgroundPressed,
color: s.primaryButtonTextPressed,
},
rootDisabled: (_d = {
color: s.primaryButtonTextDisabled,
backgroundColor: s.primaryButtonBackgroundDisabled
},
_d[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_d),
// Split button styles
splitButtonContainer: (_e = {},
_e[Styling_1.HighContrastSelector] = {
border: 'none',
},
_e),
splitButtonDivider: tslib_1.__assign(tslib_1.__assign({}, splitButtonDividerBaseStyles()), (_f = { backgroundColor: p.white }, _f[Styling_1.HighContrastSelector] = {
backgroundColor: 'Window',
}, _f)),
splitButtonMenuButton: (_g = {
backgroundColor: s.primaryButtonBackground,
color: s.primaryButtonText
},
_g[Styling_1.HighContrastSelector] = {
backgroundColor: 'Canvas',
},
_g[':hover'] = (_h = {
backgroundColor: s.primaryButtonBackgroundHovered
},
_h[Styling_1.HighContrastSelector] = {
color: 'Highlight',
},
_h),
_g),
splitButtonMenuButtonDisabled: {
backgroundColor: s.primaryButtonBackgroundDisabled,
':hover': {
backgroundColor: s.primaryButtonBackgroundDisabled,
},
},
splitButtonMenuButtonChecked: {
backgroundColor: s.primaryButtonBackgroundPressed,
':hover': {
backgroundColor: s.primaryButtonBackgroundPressed,
},
},
splitButtonMenuButtonExpanded: {
backgroundColor: s.primaryButtonBackgroundPressed,
':hover': {
backgroundColor: s.primaryButtonBackgroundPressed,
},
},
splitButtonMenuIcon: {
color: s.primaryButtonText,
},
splitButtonMenuIconDisabled: (_j = {
color: p.neutralTertiary
},
_j[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_j),
};
}
exports.primaryStyles = primaryStyles;
});
//# sourceMappingURL=ButtonThemes.js.map