@fluentui/react-northstar
Version:
A themable React component library.
144 lines (135 loc) • 5.76 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.zIndexes = exports.transparentColors = exports.shadowLevel4 = exports.shadowLevel3 = exports.shadowLevel2 = exports.shadowLevel1Dark = exports.shadowLevel1 = exports.shadow8 = exports.shadow64 = exports.shadow4 = exports.shadow28 = exports.shadow2 = exports.shadow16 = exports.primitiveColors = exports.naturalColors = exports.lineHeightSmaller = exports.lineHeightSmall = exports.lineHeightMedium = exports.lineHeightLargest = exports.lineHeightLarger = exports.lineHeightLarge = exports.lineHeightDefault = exports.fontWeightSemilight = exports.fontWeightSemibold = exports.fontWeightRegular = exports.fontWeightLight = exports.fontWeightBold = exports.fontSizes = exports.focusOuterBorderColor = exports.focusInnerBorderColor = exports.contextualColors = exports.colorScheme = exports.categoryColors = exports.categoryColorScheme = exports.borderWidth = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusMedium = exports.bodyPadding = exports.bodyMargin = exports.bodyLineHeight = exports.bodyFontSize = exports.bodyFontFamily = exports.bodyColor = exports.bodyBackground = void 0;
var _utils = require("../../utils");
var _colors = require("./colors");
exports.colors = _colors.colors;
exports.contextualColors = _colors.contextualColors;
exports.naturalColors = _colors.naturalColors;
exports.primitiveColors = _colors.primitiveColors;
exports.colorScheme = _colors.colorScheme;
exports.transparentColors = _colors.transparentColors;
var _categoryColors = require("./categoryColors");
exports.categoryColors = _categoryColors.categoryColors;
exports.categoryColorScheme = _categoryColors.categoryColorScheme;
//
// COLORS
//
//
// BORDER STYLES
//
var borderWidth = '1px';
exports.borderWidth = borderWidth;
var borderRadiusSmall = '2px'; // input focus states
exports.borderRadiusSmall = borderRadiusSmall;
var borderRadiusMedium = '4px'; // default border radius
exports.borderRadiusMedium = borderRadiusMedium;
var borderRadiusXLarge = '8px'; // X Large Border Radius
exports.borderRadiusXLarge = borderRadiusXLarge;
var focusInnerBorderColor = _colors.colors.white;
exports.focusInnerBorderColor = focusInnerBorderColor;
var focusOuterBorderColor = _colors.colors.black;
//
// SHADOW LEVELS
//
exports.focusOuterBorderColor = focusOuterBorderColor;
var shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .1)';
exports.shadowLevel1 = shadowLevel1;
var shadowLevel2 = '0 .4rem .7rem -.1rem rgba(0, 0, 0, .1)';
exports.shadowLevel2 = shadowLevel2;
var shadowLevel3 = '0 .8rem 1rem -.2rem rgba(0, 0, 0, .1)';
exports.shadowLevel3 = shadowLevel3;
var shadowLevel4 = '0 1.6rem 1.8rem -.4rem rgba(0, 0, 0, .1)';
exports.shadowLevel4 = shadowLevel4;
var shadowLevel1Dark = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)';
exports.shadowLevel1Dark = shadowLevel1Dark;
var shadow2 = '0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14)';
exports.shadow2 = shadow2;
var shadow4 = '0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14)';
exports.shadow4 = shadow4;
var shadow8 = '0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14)';
exports.shadow8 = shadow8;
var shadow16 = '0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14)';
exports.shadow16 = shadow16;
var shadow28 = '0 0 8px rgba(0, 0, 0, .20), 0 14px 28px rgba(0, 0, 0, .24)';
exports.shadow28 = shadow28;
var shadow64 = '0 0 8px rgba(0, 0, 0, .20), 0 32px 64px rgba(0, 0, 0, .24)';
//
// FONT SIZES
//
exports.shadow64 = shadow64;
var fontSizes = {
smaller: (0, _utils.pxToRem)(10),
small: (0, _utils.pxToRem)(12),
medium: (0, _utils.pxToRem)(14),
large: (0, _utils.pxToRem)(18),
larger: (0, _utils.pxToRem)(24),
largest: (0, _utils.pxToRem)(28)
};
//
// FONT WEIGHTS
//
exports.fontSizes = fontSizes;
var fontWeightLight = 200;
exports.fontWeightLight = fontWeightLight;
var fontWeightSemilight = 300;
exports.fontWeightSemilight = fontWeightSemilight;
var fontWeightRegular = 400;
exports.fontWeightRegular = fontWeightRegular;
var fontWeightSemibold = 600;
exports.fontWeightSemibold = fontWeightSemibold;
var fontWeightBold = 700;
//
// LINE HEIGHTS
//
exports.fontWeightBold = fontWeightBold;
var lineHeightDefault = 1;
exports.lineHeightDefault = lineHeightDefault;
var lineHeightSmaller = 1.2;
exports.lineHeightSmaller = lineHeightSmaller;
var lineHeightSmall = 1.3333;
exports.lineHeightSmall = lineHeightSmall;
var lineHeightMedium = 1.4286;
exports.lineHeightMedium = lineHeightMedium;
var lineHeightLarge = 1.3333;
exports.lineHeightLarge = lineHeightLarge;
var lineHeightLarger = 1.3333;
exports.lineHeightLarger = lineHeightLarger;
var lineHeightLargest = 1.3333;
//
// Z-INDEX
// Used to maintain proper stack order of components
//
exports.lineHeightLargest = lineHeightLargest;
var zIndexes = {
background: 0,
// Default value
foreground: 1,
// Put a component in front
menuItem: 2,
// Currently used only for menu item beak element
overlay: 1000,
// Dialog/popup/menu overlays
overlayPriority: 1001,
// for nested overlays, like tooltip in dialog.
debug: 999999999 // for debug purposes
};
//
// SEMANTIC ASSIGNMENTS
//
exports.zIndexes = zIndexes;
var bodyPadding = 0;
exports.bodyPadding = bodyPadding;
var bodyMargin = 0;
exports.bodyMargin = bodyMargin;
var bodyFontFamily = '"Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif';
exports.bodyFontFamily = bodyFontFamily;
var bodyFontSize = fontSizes.medium;
exports.bodyFontSize = bodyFontSize;
var bodyBackground = _colors.colors.white;
exports.bodyBackground = bodyBackground;
var bodyColor = _colors.colors.grey[750];
exports.bodyColor = bodyColor;
var bodyLineHeight = lineHeightMedium;
exports.bodyLineHeight = bodyLineHeight;
//# sourceMappingURL=siteVariables.js.map