@fluentui/react-northstar
Version:
A themable React component library.
68 lines (67 loc) • 3.76 kB
JavaScript
import { pxToRem } from '../../../../utils';
export 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: pxToRem(2),
color: siteVars.colorScheme.default.foreground1,
comboboxPaddingButton: "0 " + pxToRem(12),
comboboxFlexBasis: pxToRem(50),
aboveListBorderRadius: siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium + " 0 0",
belowListBorderRadius: "0 0 " + siteVars.borderRadiusMedium + " " + siteVars.borderRadiusMedium,
listBackgroundColor: siteVars.colorScheme.default.background,
listBorderColor: 'transparent',
listBorderWidth: pxToRem(1),
listPadding: pxToRem(8) + " 0 " + pxToRem(6),
listBoxShadow: siteVars.shadow16,
listMaxHeight: pxToRem(296),
listItemFocusBorderWidth: 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: pxToRem(140),
selectedItemColorFocus: siteVars.bodyColor,
selectedItemsMaxHeight: pxToRem(82),
toggleIndicatorSize: pxToRem(32),
triggerButtonColorFocusActive: undefined,
triggerButtonColorHover: siteVars.bodyColor,
width: 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
};
};
//# sourceMappingURL=dropdownVariables.js.map