@fluentui/react-northstar
Version:
A themable React component library.
69 lines (67 loc) • 2.94 kB
JavaScript
;
exports.__esModule = true;
exports.pillVariables = void 0;
var _utils = require("../../../../utils");
var pillVariables = function pillVariables(siteVars) {
return {
background: siteVars.colorScheme.default.background3,
backgroundHover: siteVars.colorScheme.default.background1,
borderRadius: '9999px',
smallerRoundedBorderRadius: (0, _utils.pxToRem)(2),
// Disabled
disabledBackground: siteVars.colorScheme.default.backgroundDisabled,
disabledColor: siteVars.colorScheme.default.foregroundDisabled,
// Inverted
invertedBackground: siteVars.colorScheme.default.background,
// Outline
outlineBackground: 'transparent',
// TODO: The design spec maps to Neutral Stroke 1 that is equivalent to gre[440]
// but we don't have this token
outlineBorderColor: siteVars.colorScheme.default.borderActive4,
outlineDisabledborder: siteVars.colorScheme.default.borderDisabled,
// Smaller
smallerHeight: (0, _utils.pxToRem)(20),
smallerMinWidth: (0, _utils.pxToRem)(80),
smallerMargin: (0, _utils.pxToRem)(6) + " " + (0, _utils.pxToRem)(2),
// Small
smallHeight: (0, _utils.pxToRem)(24),
smallMinWidth: (0, _utils.pxToRem)(80),
smallMargin: (0, _utils.pxToRem)(4),
// Medium (default)
height: (0, _utils.pxToRem)(32),
minWidth: (0, _utils.pxToRem)(90),
margin: (0, _utils.pxToRem)(6) + " " + (0, _utils.pxToRem)(4),
roundedBorderRadius: siteVars.borderRadiusMedium,
// Content Smaller
contentPaddingSmaller: (0, _utils.pxToRem)(2) + " " + (0, _utils.pxToRem)(8),
contentFontSizeSmaller: (0, _utils.pxToRem)(12),
// Content Small
contentFontSizeSmall: (0, _utils.pxToRem)(12),
contentPaddingSmall: (0, _utils.pxToRem)(4) + " " + (0, _utils.pxToRem)(8),
// Content Medium
contentFontSize: (0, _utils.pxToRem)(14),
contentPadding: (0, _utils.pxToRem)(6) + " " + (0, _utils.pxToRem)(8),
// Action Pill
actionMargin: "0 " + (0, _utils.pxToRem)(8),
actionWidth: (0, _utils.pxToRem)(16),
smallOrSmallerActionWidth: (0, _utils.pxToRem)(12),
// Icon Pill
iconMargin: "0 0 0 " + (0, _utils.pxToRem)(8),
iconWidth: (0, _utils.pxToRem)(20),
smallOrSmallerIconWidth: (0, _utils.pxToRem)(16),
selectedIconColor: siteVars.colorScheme.default.border,
selectedIconCheckColor: siteVars.colorScheme.brand.background2,
selectedImageIconWidth: (0, _utils.pxToRem)(32),
smallSelectedImageIconWidth: (0, _utils.pxToRem)(24),
smallerSelectedImageIconWidth: (0, _utils.pxToRem)(20),
// Image Pill
imageWidth: (0, _utils.pxToRem)(32),
imageHeight: (0, _utils.pxToRem)(32),
smallImageWidth: (0, _utils.pxToRem)(24),
smallImageHeight: (0, _utils.pxToRem)(24),
smallerImageWidth: (0, _utils.pxToRem)(20),
smallerImageHeight: (0, _utils.pxToRem)(20)
};
};
exports.pillVariables = pillVariables;
//# sourceMappingURL=pillVariables.js.map