@fluentui/react-northstar
Version:
A themable React component library.
74 lines (72 loc) • 3.49 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.alertVariables = void 0;
var _utils = require("../../../../utils");
var alertVariables = function alertVariables(siteVars) {
var minHeight = (0, _utils.pxToRem)(28);
return {
borderStyle: 'solid',
borderWidth: '1px',
borderRadius: siteVars.borderRadiusMedium,
backgroundColor: siteVars.colorScheme.default.background4,
borderColor: siteVars.colorScheme.default.border2,
color: siteVars.colorScheme.default.foreground1,
fontWeight: siteVars.fontWeightRegular,
minHeight: minHeight,
padding: "0 " + (0, _utils.pxToRem)(16),
actionsMargin: (0, _utils.pxToRem)(5),
hoverBorderColor: undefined,
hoverBackgroundColor: undefined,
focusBackgroundColor: undefined,
dismissActionHoverBorderRadius: undefined,
dismissActionHoverBorderWidth: undefined,
dismissActionHoverInnerBorderColor: undefined,
dismissActionHoverOuterBorderColor: undefined,
dismissActionHoverZIndex: undefined,
dismissActionSize: minHeight,
dismissActionColor: undefined,
dismissiblePadding: "0 0 0 " + (0, _utils.pxToRem)(16),
dangerColor: siteVars.colorScheme.red.foreground,
dangerBackgroundColor: siteVars.colorScheme.red.background1,
dangerBorderColor: siteVars.colorScheme.red.border,
oof: false,
oofColor: siteVars.colorScheme.pink.foreground,
oofBackgroundColor: siteVars.colorScheme.pink.background,
oofBorderColor: siteVars.colorScheme.pink.border,
successColor: siteVars.colorScheme.green.foreground,
successBackgroundColor: siteVars.colorScheme.green.background2,
successBorderColor: siteVars.colorScheme.green.border,
urgent: false,
urgentColor: siteVars.colorScheme.red.foreground1,
urgentBackgroundColor: siteVars.colorScheme.red.background3,
urgentBorderColor: siteVars.colorScheme.red.background3,
warningColor: siteVars.colorScheme.yellow.foreground4,
warningBackgroundColor: siteVars.colorScheme.yellow.background3,
warningBorderColor: siteVars.colorScheme.yellow.border,
headerFontWeight: siteVars.fontWeightSemibold,
headerMargin: "0 " + (0, _utils.pxToRem)(10) + " 0 0",
iconMargin: "0 " + (0, _utils.pxToRem)(10) + " 0 0",
iconSize: (0, _utils.pxToRem)(16),
dismissActionBackgroundColor: 'transparent',
dismissActionBorderRadius: siteVars.borderRadiusMedium,
dismissActionBorderColor: 'transparent',
dismissActionColorHover: siteVars.colorScheme.brand.foregroundHover,
dismissActionBackgroundColorHover: siteVars.colorScheme.default.backgroundHover2,
dismissActionBorderColorHover: siteVars.colorScheme.default.borderHover,
dismissActionContentFontWeight: siteVars.fontWeightSemibold,
dismissActionBackgroundColorFocus: undefined,
dismissActionBorderColorFocus: undefined,
dismissActionColorFocus: undefined,
dismissActionColorDisabled: siteVars.colorScheme.brand.foregroundDisabled,
dismissActionBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled,
dismissActionBorderColorDisabled: 'transparent',
dismissActionIndicatorSize: (0, _utils.pxToRem)(16),
focusBorderRadius: siteVars.borderRadiusMedium,
focusBorderWidth: siteVars.borderWidth,
focusInnerBorderColor: siteVars.focusInnerBorderColor,
focusOuterBorderColor: siteVars.focusOuterBorderColor,
focusBorderZIndex: siteVars.zIndexes.foreground
};
};
exports.alertVariables = alertVariables;
//# sourceMappingURL=alertVariables.js.map