@fluentui/react-northstar/dist/es/themes/teams/siteVariables.js

A themable React component library.

import { pxToRem } from '../../utils';
import { colors } from './colors';

//
// COLORS
//
export { categoryColors, categoryColorScheme } from './categoryColors';
export { colors, contextualColors, naturalColors, primitiveColors, colorScheme, transparentColors } from './colors';

//
// BORDER STYLES
//
export var borderWidth = '1px';
export var borderRadiusSmall = '2px'; // input focus states
export var borderRadiusMedium = '4px'; // default border radius
export var borderRadiusXLarge = '8px'; // X Large Border Radius
export var focusInnerBorderColor = colors.white;
export var focusOuterBorderColor = colors.black;

//
// SHADOW LEVELS
//
export var shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .1)';
export var shadowLevel2 = '0 .4rem .7rem -.1rem rgba(0, 0, 0, .1)';
export var shadowLevel3 = '0 .8rem 1rem -.2rem rgba(0, 0, 0, .1)';
export var shadowLevel4 = '0 1.6rem 1.8rem -.4rem rgba(0, 0, 0, .1)';
export var shadowLevel1Dark = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)';
export var shadow2 = '0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14)';
export var shadow4 = '0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14)';
export var shadow8 = '0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14)';
export var shadow16 = '0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14)';
export var shadow28 = '0 0 8px rgba(0, 0, 0, .20), 0 14px 28px rgba(0, 0, 0, .24)';
export var shadow64 = '0 0 8px rgba(0, 0, 0, .20), 0 32px 64px rgba(0, 0, 0, .24)';

//
// FONT SIZES
//
export var fontSizes = {
  smaller: pxToRem(10),
  small: pxToRem(12),
  medium: pxToRem(14),
  large: pxToRem(18),
  larger: pxToRem(24),
  largest: pxToRem(28)
};

//
// FONT WEIGHTS
//
export var fontWeightLight = 200;
export var fontWeightSemilight = 300;
export var fontWeightRegular = 400;
export var fontWeightSemibold = 600;
export var fontWeightBold = 700;

//
// LINE HEIGHTS
//
export var lineHeightDefault = 1;
export var lineHeightSmaller = 1.2;
export var lineHeightSmall = 1.3333;
export var lineHeightMedium = 1.4286;
export var lineHeightLarge = 1.3333;
export var lineHeightLarger = 1.3333;
export var lineHeightLargest = 1.3333;

//
// Z-INDEX
// Used to maintain proper stack order of components
//
export 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
//
export var bodyPadding = 0;
export var bodyMargin = 0;
export var bodyFontFamily = '"Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif';
export var bodyFontSize = fontSizes.medium;
export var bodyBackground = colors.white;
export var bodyColor = colors.grey[750];
export var bodyLineHeight = lineHeightMedium;
//# sourceMappingURL=siteVariables.js.map