@fluentui/react-northstar
Version:
A themable React component library.
76 lines (75 loc) • 3.58 kB
JavaScript
import { pxToRem } from '../../../../utils';
export 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: pxToRem(16),
margin: pxToRem(0),
colorDisabled: siteVars.colorScheme.default.foregroundDisabled,
compactPadding: pxToRem(0),
previewMargin: "0 0 " + pxToRem(10) + " 0",
headerMargin: "0 0 " + pxToRem(10) + " 0",
bodyMargin: "0 0 " + pxToRem(10) + " 0",
footerMargin: "0 0 " + pxToRem(10) + " 0",
fittedPreviewMargin: pxToRem(0),
fittedHeaderMargin: pxToRem(0),
fittedBodyMargin: pxToRem(0),
fittedFooterMargin: pxToRem(0),
previewMarginHorizontal: "0 " + pxToRem(10) + " 0 0",
topControlsTop: pxToRem(10),
topControlsRight: pxToRem(0),
// TODO: update with latest values from design
width: pxToRem(300),
height: '100%',
sizeSmallWidth: pxToRem(200),
sizeSmallHeight: '100%',
sizeSmallPadding: pxToRem(0),
sizeLargeWidth: pxToRem(500),
sizeLargeHeight: '100%',
sizeLargePadding: pxToRem(16),
fluidWidth: '100%',
fluidHeight: '100%',
expandableBoxStartMaxHeight: pxToRem(20),
expandableBoxEndMaxHeight: 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
};
};
//# sourceMappingURL=cardVariables.js.map