@fluentui/react-northstar
Version:
A themable React component library.
73 lines (71 loc) • 4.02 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.dropdownVariables = void 0;
var _utils = require("../../../../utils");
var dropdownVariables = function dropdownVariables(siteVars) {
return {
backgroundColor: siteVars.colorScheme.default.background2,
backgroundColorHover: siteVars.colorScheme.default.backgroundHover3,
invertedBackgroundColor: siteVars.colorScheme.default.background,
invertedBackgroundColorHover: siteVars.colorScheme.default.backgroundHover4,
borderColor: 'transparent',
borderColorHover: 'transparent',
borderColorFocus: siteVars.colorScheme.brand.borderFocus1,
borderError: siteVars.colorScheme.red.background,
borderWidth: '0px',
openBorderColorHover: undefined,
containerBorderRadius: siteVars.borderRadiusMedium,
disabledColor: siteVars.colorScheme.default.foregroundDisabled,
openAboveContainerBorderRadius: "0 0 " + siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium,
openBelowContainerBorderRadius: siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium + " 0 0",
searchBorderBottomWidth: (0, _utils.pxToRem)(2),
color: siteVars.colorScheme.default.foreground1,
comboboxPaddingButton: "0 " + (0, _utils.pxToRem)(12),
comboboxFlexBasis: (0, _utils.pxToRem)(50),
aboveListBorderRadius: siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium + " 0 0",
belowListBorderRadius: "0 0 " + siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium,
listBackgroundColor: siteVars.colorScheme.default.background,
listBorderColor: 'transparent',
listBorderWidth: (0, _utils.pxToRem)(1),
listPadding: (0, _utils.pxToRem)(8) + " 0 " + (0, _utils.pxToRem)(6),
listBoxShadow: siteVars.shadow16,
listMaxHeight: (0, _utils.pxToRem)(296),
listItemFocusBorderWidth: (0, _utils.pxToRem)(1),
listItemBackgroundColor: 'transparent',
listItemBackgroundColorActive: siteVars.colorScheme.default.backgroundActive,
listItemBackgroundColorHover: siteVars.colorScheme.default.backgroundHover,
listItemColorActive: siteVars.colorScheme.default.backgroundFocus3,
listItemColorHover: siteVars.colorScheme.default.foregroundHover,
listItemSelectedColor: siteVars.colorScheme.default.foreground,
listItemSelectedFontWeight: siteVars.fontWeightSemibold,
// TODO: prod app uses 17.5px here, it should be 16px per the design guide!
listItemHeaderLineHeight: siteVars.lineHeightSmall,
listItemContentLineHeight: siteVars.lineHeightSmall,
selectedItemBackgroundColor: siteVars.colorScheme.default.background,
selectedItemBackgroundColorHover: siteVars.colorScheme.brand.backgroundHover2,
selectedItemBorder: 'none',
selectedItemColor: siteVars.colorScheme.default.foreground,
selectedItemColorHover: siteVars.colorScheme.default.foregroundHover,
selectedItemIconColor: siteVars.colorScheme.default.foreground1,
selectedItemIconColorHover: siteVars.colorScheme.brand.foregroundHover,
selectedItemsMaxWidth: (0, _utils.pxToRem)(140),
selectedItemColorFocus: siteVars.bodyColor,
selectedItemsMaxHeight: (0, _utils.pxToRem)(82),
toggleIndicatorSize: (0, _utils.pxToRem)(32),
triggerButtonColorFocusActive: undefined,
triggerButtonColorHover: siteVars.bodyColor,
width: (0, _utils.pxToRem)(356),
overlayZIndex: siteVars.zIndexes.overlay,
// disabled state
disabledBorderColorHover: 'transparent',
disabledTriggerColorHover: siteVars.colorScheme.brand.foregroundDisabled,
disabledBackgroundColorHover: siteVars.colorScheme.brand.backgroundDisabled,
// these should only apply when there is content in the image/media slot:
listItemHeaderFontSize: siteVars.fontSizes.medium,
listItemHeaderColor: siteVars.colorScheme.default.foreground1,
listItemContentFontSize: siteVars.fontSizes.small,
listItemContentColor: siteVars.colorScheme.default.foreground2
};
};
exports.dropdownVariables = dropdownVariables;
//# sourceMappingURL=dropdownVariables.js.map