@fluentui/react-northstar
Version:
A themable React component library.
98 lines (96 loc) • 4.76 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.menuVariables = exports.menuColorAreas = void 0;
var _utils = require("../../../../utils");
var _colorUtils = require("../../../colorUtils");
var menuColorAreas = (0, _utils.stringLiteralsArray)('border', 'borderActive', 'foregroundActive', 'foregroundFocus', 'foregroundHover', 'backgroundHover', 'backgroundActive', 'backgroundFocus', 'foregroundDisabled');
exports.menuColorAreas = menuColorAreas;
var menuVariables = function menuVariables(siteVars) {
return {
colorScheme: (0, _colorUtils.pickValuesFromColorScheme)((0, _colorUtils.extendColorScheme)(siteVars.colorScheme, {
default: {
borderActive: siteVars.colorScheme.default.border2,
backgroundActive: siteVars.colorScheme.default.backgroundActive2,
backgroundFocus: siteVars.colorScheme.default.backgroundFocus1,
foregroundDisabled: siteVars.colorScheme.default.foregroundDisabled1
},
brand: {
foregroundHover: siteVars.colors.white,
backgroundHover: siteVars.colors.brand[300],
foregroundActive: siteVars.colors.white,
borderActive: siteVars.colors.brand[600],
backgroundActive: siteVars.colors.brand[500],
// it's 600 in the color scheme
foregroundFocus: siteVars.colors.white,
backgroundFocus: siteVars.colors.brand[300],
foregroundDisabled: siteVars.colorScheme.brand.foregroundDisabled1
}
}), menuColorAreas),
color: siteVars.colors.grey[500],
colorActive: siteVars.colors.black,
colorFocus: undefined,
colorHover: 'inherit',
colorDisabled: undefined,
borderColor: undefined,
borderColorHover: undefined,
borderColorActive: undefined,
borderColorFocus: siteVars.colors.white,
outlineColorFocus: siteVars.colors.black,
backgroundColor: undefined,
backgroundColorFocus: undefined,
backgroundColorHover: undefined,
backgroundColorActive: undefined,
iconSize: (0, _utils.pxToRem)(16),
iconOnlyBorderRadius: siteVars.borderRadiusMedium,
iconOnlyColorActive: siteVars.colors.brand[600],
iconOnlyColorFocus: siteVars.colors.brand[600],
iconOnlyWrapperBackgroundColorFocus: undefined,
activeIconOnlyWrapperBackgroundColor: undefined,
iconOnlyBackgroundColorHover: undefined,
iconOnlyColorHover: siteVars.colors.brand[600],
underlinedBorderColor: siteVars.colors.grey[200],
lineHeightBase: siteVars.lineHeightMedium,
horizontalPadding: (0, _utils.pxToRem)(14) + " " + (0, _utils.pxToRem)(18),
verticalBackgroundColor: siteVars.colorScheme.default.background,
verticalItemPadding: (0, _utils.pxToRem)(7) + " " + (0, _utils.pxToRem)(12),
verticalBoxShadow: siteVars.shadow16,
verticalDividerMargin: (0, _utils.pxToRem)(8) + " 0",
verticalItemBorderWidth: (0, _utils.pxToRem)(2),
verticalItemBorderColor: 'transparent',
verticalPointingBorderColor: siteVars.colorScheme.brand.borderActive,
verticalBorderColor: siteVars.colorScheme.default.borderTransparent,
activeUnderlinedColor: undefined,
activeUnderlinedPrimaryColor: siteVars.colors.brand[600],
activeUnderlinedBorderBottomColor: siteVars.colors.black,
activeUnderlinedWrapperColor: undefined,
pointingIndicatorBackgroundColor: siteVars.colors.brand[600],
underlinedBottomBorderWidth: (0, _utils.pxToRem)(2),
underlinedColorHover: 'inherit',
primaryBorderColor: siteVars.colorScheme.default.border2,
primaryWrapperColorFocus: siteVars.colors.black,
primaryWrapperColor: siteVars.colors.black,
primaryWrapperBackgroundColorFocus: siteVars.colors.brand[500],
underlinedWrapperColorHover: siteVars.colors.black,
underlinedWrapperBackgroundHover: 'transparent',
dividerHeight: (0, _utils.pxToRem)(1),
borderWidth: (0, _utils.pxToRem)(1),
menuZIndex: siteVars.zIndexes.overlay,
beakZIndex: siteVars.zIndexes.menuItem,
wrapperColorActive: siteVars.colors.grey[500],
wrapperColorFocus: siteVars.colors.grey[500],
wrapperColorHover: undefined,
primaryWrapperColorHover: siteVars.colors.black,
wrapperBackgroundColorFocus: siteVars.colors.grey[150],
activeWrapperBackgroundColorHover: undefined,
indicatorColor: siteVars.colors.grey[500],
activeIndicatorColor: siteVars.colors.grey[750],
activePrimaryIndicatorColor: siteVars.colors.grey[750],
activePrimaryVerticalIndicatorColor: siteVars.colors.black,
primaryIndicatorColorHover: siteVars.colors.black,
indicatorColorHover: siteVars.colors.grey[500],
subMenuBorderColor: siteVars.colorScheme.default.borderTransparent,
subMenuIconColor: siteVars.colorScheme.brand.foregroundHover
};
};
exports.menuVariables = menuVariables;
//# sourceMappingURL=menuVariables.js.map