@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
129 lines • 5.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var StackUtils_1 = require("office-ui-fabric-react/lib-commonjs/components/Stack/StackUtils");
var Styling_1 = require("../../../Styling");
/* eslint-disable deprecation/deprecation */
/** @deprecated */
exports.baseTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.bodyBackground,
backgroundColorHovered: semanticColors.bodyStandoutBackground,
backgroundColorPressed: semanticColors.bodyStandoutBackground,
borderColor: semanticColors.variantBorder,
borderColorHovered: semanticColors.variantBorderHovered,
borderColorPressed: semanticColors.variantBorderHovered,
borderStyle: 'solid',
color: semanticColors.bodyText,
colorHovered: semanticColors.buttonTextChecked,
colorPressed: semanticColors.buttonTextChecked,
};
};
/** @deprecated */
exports.disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.disabledBackground,
backgroundColorHovered: semanticColors.disabledBackground,
backgroundColorPressed: semanticColors.disabledBackground,
borderColor: semanticColors.variantBorder,
borderColorHovered: semanticColors.variantBorder,
borderColorPressed: semanticColors.variantBorder,
color: semanticColors.disabledBodyText,
colorHovered: semanticColors.disabledBodyText,
colorPressed: semanticColors.disabledBodyText,
};
};
/** @deprecated */
exports.ActionableTokens = function (props, theme) { return [
exports.baseTokens,
props.disabled && exports.disabledTokens,
]; };
var GlobalClassNames = {
msActionable: 'ms-Actionable',
};
/** @deprecated */
exports.ActionableStyles = function (props, theme, tokens) {
var _a, _b, _c;
var className = props.className;
var _d = StackUtils_1.parseGap(tokens.childrenGap, theme), rowGap = _d.rowGap, columnGap = _d.columnGap;
var globalClassNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
globalClassNames.msActionable,
Styling_1.getFocusStyle(theme, { inset: 1, outlineColor: tokens.outlineColor }),
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: (_a = {
'> *': {
marginLeft: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
textOverflow: 'ellipsis',
},
'> *:not(:first-child)': {
marginLeft: "" + columnGap.value + columnGap.unit,
}
},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColor,
borderColor: tokens.highContrastBorderColor,
borderWidth: 1,
color: tokens.highContrastColor,
MsHighContrastAdjust: tokens.msHighContrastAdjust,
},
_a[':hover'] = {
backgroundColor: tokens.backgroundColorHovered,
borderColor: tokens.borderColorHovered,
color: tokens.colorHovered,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorHovered,
borderColor: tokens.highContrastBorderColorHovered,
color: tokens.highContrastColorHovered,
},
_b),
},
_a[':active'] = {
backgroundColor: tokens.backgroundColorPressed,
borderColor: tokens.borderColorPressed,
color: tokens.colorPressed,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.highContrastBackgroundColorPressed,
borderColor: tokens.highContrastBorderColorPressed,
color: tokens.highContrastColorPressed,
},
_c),
},
_a),
},
className,
],
};
};
//# sourceMappingURL=Actionable.styles.js.map