@fluentui/react-northstar
Version:
A themable React component library.
41 lines (40 loc) • 1.58 kB
JavaScript
import { pxToRem } from '../../../../utils';
export var skeletonVariables = function skeletonVariables(siteVariables) {
return {
lineBackground: siteVariables.colorScheme.default.foreground6,
shapeBackground: siteVariables.colorScheme.default.foreground6,
animationBackground: siteVariables.colorScheme.default.foreground6,
animationBackgroundSecondary: siteVariables.colorScheme.default.foreground6,
lineMargin: "0 0 " + pxToRem(2) + " 0",
shapeMargin: "0 0 " + pxToRem(2) + " 0",
// Skeleton Button
buttonHeight: pxToRem(32),
buttonWidth: pxToRem(96),
buttonSmallHeight: pxToRem(24),
buttonSmallWidth: pxToRem(72),
buttonBackground: siteVariables.colorScheme.default.foreground6,
buttonCircularBorderRadius: pxToRem(999),
// Skeleton Text
textBackground: siteVariables.colorScheme.default.foreground6,
textWidth: '100%',
textSmallerHeight: pxToRem(14),
textSmallHeight: pxToRem(16),
textMediumHeight: pxToRem(19),
textLargeHeight: pxToRem(24),
textLargerHeight: pxToRem(32),
// Skeleton Input
inputHeight: pxToRem(32),
inputWidth: pxToRem(154),
inputBackground: siteVariables.colorScheme.default.foreground6,
// Skeleton Avatar
avatarBackground: siteVariables.colorScheme.default.foreground6,
avatarSmallest: pxToRem(20),
avatarSmaller: pxToRem(24),
avatarSmall: pxToRem(28),
avatarMedium: pxToRem(32),
avatarLarge: pxToRem(44),
avatarLarger: pxToRem(64),
avatarLargest: pxToRem(96)
};
};
//# sourceMappingURL=skeletonVariables.js.map