@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
199 lines • 8.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../../Styling");
/* eslint-disable deprecation/deprecation */
var baseTokens = function (props, theme) {
var effects = theme.effects, semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackground,
backgroundColorHovered: semanticColors.buttonBackgroundHovered,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
borderColor: semanticColors.buttonBorder,
borderColorHovered: semanticColors.buttonBorder,
borderColorPressed: semanticColors.buttonBorder,
borderRadius: effects.roundedCorner2,
borderWidth: 1,
color: semanticColors.buttonText,
contentPadding: '0px 19px',
dividerColor: semanticColors.menuDivider,
highContrastDividerColor: 'Window',
minHeight: 35,
minWidth: 0,
secondaryPadding: '0px 10px',
};
};
var primaryTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.primaryButtonBackground,
backgroundColorHovered: semanticColors.primaryButtonBackgroundHovered,
backgroundColorPressed: semanticColors.primaryButtonBackgroundPressed,
borderWidth: 0,
color: semanticColors.primaryButtonText,
dividerColor: semanticColors.primaryButtonText,
highContrastBackgroundColor: 'WindowText',
highContrastBackgroundColorHovered: 'Highlight',
highContrastBackgroundColorPressed: 'Highlight',
highContrastColor: 'Window',
highContrastDividerColor: 'WindowText',
};
};
var disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackgroundDisabled,
backgroundColorHovered: semanticColors.buttonBackgroundDisabled,
backgroundColorPressed: semanticColors.buttonBackgroundDisabled,
borderColor: semanticColors.buttonBorderDisabled,
borderColorHovered: semanticColors.buttonBorderDisabled,
borderColorPressed: semanticColors.buttonBorderDisabled,
color: semanticColors.disabledText,
dividerColor: semanticColors.menuDivider,
highContrastBackgroundColor: 'Window',
highContrastBackgroundColorHovered: 'Window',
highContrastBackgroundColorPressed: 'Window',
highContrastBorderColor: 'GrayText',
highContrastColor: 'GrayText',
highContrastDividerColor: 'GrayText',
};
};
/** @deprecated */
exports.SplitButtonTokens = function (props, theme) { return [
baseTokens,
props.primary && primaryTokens,
props.disabled && disabledTokens,
]; };
var GlobalClassNames = {
msSplitButton: 'ms-SplitButton',
};
/** @deprecated */
exports.SplitButtonStyles = function (props, theme, tokens) {
var _a, _b, _c, _d, _e;
var semanticColors = theme.semanticColors;
var globalClassNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
globalClassNames.msSplitButton,
{
borderRadius: tokens.borderRadius,
boxSizing: 'border-box',
display: 'inline-flex',
flexDirection: 'row',
justifyContent: 'stretch',
zIndex: 1,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'transparent',
},
_a[':hover'] = {
borderColor: props.primaryActionDisabled ? 'transparent' : tokens.borderColorHovered,
},
_a[':active'] = {
borderColor: props.primaryActionDisabled ? 'transparent' : tokens.borderColorPressed,
},
_a),
},
],
button: {
borderBottomLeftRadius: tokens.borderRadius,
borderBottomRightRadius: '0px',
borderTopLeftRadius: tokens.borderRadius,
borderTopRightRadius: '0px',
borderBottomWidth: tokens.borderWidth,
borderLeftWidth: tokens.borderWidth,
borderRightWidth: 0,
borderTopWidth: tokens.borderWidth,
minHeight: tokens.minHeight,
minWidth: tokens.minWidth,
selectors: {
'+ *': {
backgroundColor: props.primaryActionDisabled
? semanticColors.buttonBackgroundDisabled
: tokens.backgroundColor,
},
':hover': {
borderColor: props.primaryActionDisabled ? 'transparent' : tokens.borderColorHovered,
selectors: {
'+ *': {
backgroundColor: props.primaryActionDisabled
? semanticColors.buttonBackgroundDisabled
: tokens.backgroundColorHovered,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorHovered,
},
_b),
},
},
},
':active': {
borderColor: props.primaryActionDisabled ? 'transparent' : tokens.borderColorPressed,
selectors: {
'+ *': {
backgroundColor: props.primaryActionDisabled
? semanticColors.buttonBackgroundDisabled
: tokens.backgroundColorPressed,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorPressed,
},
_c),
},
},
},
},
},
splitDividerContainer: {
borderBottomColor: tokens.borderColor,
borderTopColor: tokens.borderColor,
borderStyle: 'solid',
borderBottomWidth: props.primaryActionDisabled ? 0 : tokens.borderWidth,
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopWidth: props.primaryActionDisabled ? 0 : tokens.borderWidth,
boxSizing: 'border-box',
display: 'inline-flex',
flexDirection: 'column',
height: 'auto',
width: 'auto',
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastDividerColor,
borderColor: tokens.highContrastBorderColor,
},
_d[':hover'] = {
borderColor: tokens.borderColorHovered,
},
_d[':active'] = {
borderColor: tokens.borderColorPressed,
},
_d),
},
splitDivider: {
backgroundColor: props.primaryActionDisabled ? semanticColors.menuDivider : tokens.dividerColor,
display: 'inline-block',
height: '100%',
margin: '7px 0px',
width: '1px',
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastDividerColor,
},
_e),
},
menuButton: {
borderBottomLeftRadius: '0px',
borderBottomRightRadius: tokens.borderRadius,
borderTopLeftRadius: '0px',
borderTopRightRadius: tokens.borderRadius,
borderStyle: 'solid',
borderBottomWidth: tokens.borderWidth,
borderLeftWidth: 0,
borderRightWidth: tokens.borderWidth,
borderTopWidth: tokens.borderWidth,
boxSizing: 'border-box',
height: '100%',
},
};
};
//# sourceMappingURL=SplitButton.styles.js.map