@fluentui/react-northstar
Version:
A themable React component library.
64 lines (63 loc) • 2.4 kB
JavaScript
import { pxToRem } from '../../../../utils';
export var pillVariables = function pillVariables(siteVars) {
return {
background: siteVars.colorScheme.default.background3,
backgroundHover: siteVars.colorScheme.default.background1,
borderRadius: '9999px',
smallerRoundedBorderRadius: 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: pxToRem(20),
smallerMinWidth: pxToRem(80),
smallerMargin: pxToRem(6) + " " + pxToRem(2),
// Small
smallHeight: pxToRem(24),
smallMinWidth: pxToRem(80),
smallMargin: pxToRem(4),
// Medium (default)
height: pxToRem(32),
minWidth: pxToRem(90),
margin: pxToRem(6) + " " + pxToRem(4),
roundedBorderRadius: siteVars.borderRadiusMedium,
// Content Smaller
contentPaddingSmaller: pxToRem(2) + " " + pxToRem(8),
contentFontSizeSmaller: pxToRem(12),
// Content Small
contentFontSizeSmall: pxToRem(12),
contentPaddingSmall: pxToRem(4) + " " + pxToRem(8),
// Content Medium
contentFontSize: pxToRem(14),
contentPadding: pxToRem(6) + " " + pxToRem(8),
// Action Pill
actionMargin: "0 " + pxToRem(8),
actionWidth: pxToRem(16),
smallOrSmallerActionWidth: pxToRem(12),
// Icon Pill
iconMargin: "0 0 0 " + pxToRem(8),
iconWidth: pxToRem(20),
smallOrSmallerIconWidth: pxToRem(16),
selectedIconColor: siteVars.colorScheme.default.border,
selectedIconCheckColor: siteVars.colorScheme.brand.background2,
selectedImageIconWidth: pxToRem(32),
smallSelectedImageIconWidth: pxToRem(24),
smallerSelectedImageIconWidth: pxToRem(20),
// Image Pill
imageWidth: pxToRem(32),
imageHeight: pxToRem(32),
smallImageWidth: pxToRem(24),
smallImageHeight: pxToRem(24),
smallerImageWidth: pxToRem(20),
smallerImageHeight: pxToRem(20)
};
};
//# sourceMappingURL=pillVariables.js.map