@fluentui/react-northstar
Version:
A themable React component library.
81 lines (79 loc) • 3.94 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.cardVariables = void 0;
var _utils = require("../../../../utils");
var cardVariables = function cardVariables(siteVars) {
return {
backgroundColor: siteVars.colorScheme.default.background1,
backgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled1,
backgroundColorFocus: siteVars.colorScheme.default.backgroundFocus1,
backgroundColorHover: siteVars.colorScheme.default.backgroundHover1,
backgroundColorPressed: siteVars.colorScheme.default.backgroundPressed,
ghostBackgroundColor: 'none',
ghostBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled,
ghostBackgroundColorFocus: 'none',
ghostBackgroundColorHover: siteVars.colorScheme.default.backgroundHover,
ghostBackgroundColorPressed: siteVars.colorScheme.default.backgroundPressed,
invertedBackgroundColor: siteVars.colorScheme.default.background2,
invertedBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled2,
invertedBackgroundColorFocus: siteVars.colorScheme.default.background2,
invertedBackgroundColorHover: siteVars.colorScheme.default.backgroundHover2,
invertedBackgroundColorPressed: siteVars.colorScheme.default.backgroundPressed,
borderStyle: 'solid',
borderColor: 'transparent',
borderColorDisabled: 'transparent',
borderColorHover: 'transparent',
borderColorPressed: 'transparent',
borderWidth: siteVars.borderWidth,
borderRadius: siteVars.borderRadiusMedium,
boxShadow: 'none',
boxShadowDisabled: 'none',
boxShadowHover: 'none',
boxShadowFocus: 'none',
boxShadowPressed: 'none',
elevatedBoxShadow: siteVars.shadowLevel1,
elevatedBoxShadowDisabled: siteVars.shadowLevel1,
elevatedBoxShadowHover: siteVars.shadowLevel3,
elevatedBoxShadowFocus: siteVars.shadowLevel1,
elevatedBoxShadowPressed: siteVars.shadowLevel1,
padding: (0, _utils.pxToRem)(16),
margin: (0, _utils.pxToRem)(0),
colorDisabled: siteVars.colorScheme.default.foregroundDisabled,
compactPadding: (0, _utils.pxToRem)(0),
previewMargin: "0 0 " + (0, _utils.pxToRem)(10) + " 0",
headerMargin: "0 0 " + (0, _utils.pxToRem)(10) + " 0",
bodyMargin: "0 0 " + (0, _utils.pxToRem)(10) + " 0",
footerMargin: "0 0 " + (0, _utils.pxToRem)(10) + " 0",
fittedPreviewMargin: (0, _utils.pxToRem)(0),
fittedHeaderMargin: (0, _utils.pxToRem)(0),
fittedBodyMargin: (0, _utils.pxToRem)(0),
fittedFooterMargin: (0, _utils.pxToRem)(0),
previewMarginHorizontal: "0 " + (0, _utils.pxToRem)(10) + " 0 0",
topControlsTop: (0, _utils.pxToRem)(10),
topControlsRight: (0, _utils.pxToRem)(0),
// TODO: update with latest values from design
width: (0, _utils.pxToRem)(300),
height: '100%',
sizeSmallWidth: (0, _utils.pxToRem)(200),
sizeSmallHeight: '100%',
sizeSmallPadding: (0, _utils.pxToRem)(0),
sizeLargeWidth: (0, _utils.pxToRem)(500),
sizeLargeHeight: '100%',
sizeLargePadding: (0, _utils.pxToRem)(16),
fluidWidth: '100%',
fluidHeight: '100%',
expandableBoxStartMaxHeight: (0, _utils.pxToRem)(20),
expandableBoxEndMaxHeight: (0, _utils.pxToRem)(500),
expandableBoxShrinkTransition: 'max-height 0.5s ease-in',
expandableBoxExpandTransition: 'max-height 1s ease-in',
selectedBackgroundColor: siteVars.colorScheme.default.backgroundFocus3,
selectedBorderColor: siteVars.colorScheme.default.borderActive,
selectedBoxShadow: siteVars.shadowLevel4,
selectedBackgroundColorDisabled: siteVars.colorScheme.default.backgroundDisabled3,
selectedBackgroundColorFocus: siteVars.colorScheme.default.backgroundFocus3,
selectedBackgroundColorHover: siteVars.colorScheme.default.backgroundHover3,
selectedBackgroundColorPressed: siteVars.colorScheme.default.backgroundPressed3
};
};
exports.cardVariables = cardVariables;
//# sourceMappingURL=cardVariables.js.map