@fluentui/react-northstar/dist/commonjs/themes/teams-dark/colors.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.colorScheme = exports.categoryColorScheme = void 0;
var _siteVariables = require("../teams/siteVariables");
var _colors = require("../teams/colors");
var colorScheme = {
  default: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.grey[250],
    foreground2: _siteVariables.colors.grey[300],
    foreground3: _siteVariables.colors.white,
    foreground4: _siteVariables.colors.white,
    foreground5: _siteVariables.colors.grey[450],
    foreground6: _siteVariables.colors.grey[550],
    foreground7: _siteVariables.colors.white,
    foreground8: _siteVariables.colors.grey[200],
    foreground9: _siteVariables.colors.grey[340],
    background: _siteVariables.colors.grey[650],
    background1: _siteVariables.colors.grey[700],
    background2: _siteVariables.colors.grey[800],
    background3: _siteVariables.colors.grey[550],
    background4: _siteVariables.colors.grey[600],
    background5: _siteVariables.colors.grey[250],
    background6: _siteVariables.colors.grey[500],
    border: _siteVariables.colors.grey[450],
    // buttons
    border1: _siteVariables.colors.grey[850],
    border2: _siteVariables.colors.grey[900],
    border3: _siteVariables.colors.grey[650],
    borderTransparent: 'transparent',
    borderTransparentActive: 'transparent',
    shadow: _siteVariables.colors.black,
    // opacity 25%
    shadowHover: _siteVariables.colors.black,
    // opacity 25%

    foregroundHover: _siteVariables.colors.white,
    foregroundHover1: _siteVariables.colors.white,
    foregroundHover2: _siteVariables.colors.white,
    backgroundHover: _siteVariables.colors.grey[550],
    backgroundHover1: _siteVariables.colors.grey[550],
    backgroundHover2: 'transparent',
    backgroundHover3: _siteVariables.colors.grey[850],
    backgroundHover4: _siteVariables.colors.grey[600],
    borderHover: _siteVariables.colors.grey[400],
    foregroundPressed: _siteVariables.colors.white,
    backgroundPressed: _siteVariables.colors.grey[500],
    backgroundPressed3: _siteVariables.colors.grey[450],
    borderPressed: _siteVariables.colors.grey[400],
    foregroundActive: _siteVariables.colors.white,
    foregroundActive1: _siteVariables.colors.white,
    backgroundActive: _siteVariables.colors.grey[800],
    backgroundActive1: _siteVariables.colors.grey[500],
    backgroundActive2: _siteVariables.colors.grey[600],
    borderActive: _siteVariables.colors.grey[450],
    // buttons
    borderActive1: _siteVariables.colors.grey[850],
    borderActive2: _siteVariables.colors.grey[900],
    borderActive3: _siteVariables.colors.grey[650],
    borderActive4: _siteVariables.colors.grey[440],
    foregroundFocus: _siteVariables.colors.white,
    foregroundFocus1: _siteVariables.colors.grey[250],
    foregroundFocus2: _siteVariables.colors.grey[300],
    foregroundFocus3: _siteVariables.colors.white,
    backgroundFocus: _siteVariables.colors.grey[650],
    backgroundFocus1: _siteVariables.colors.grey[700],
    backgroundFocus2: _siteVariables.colors.grey[800],
    backgroundFocus3: _siteVariables.colors.grey[550],
    borderFocusWithin: _siteVariables.colors.black,
    borderFocus: _siteVariables.colors.white,
    foregroundDisabled1: _siteVariables.colors.grey[450],
    foregroundDisabled: _siteVariables.colors.grey[450],
    backgroundDisabled: _siteVariables.colors.grey[550],
    backgroundDisabled1: _siteVariables.colors.grey[550],
    backgroundDisabled2: _siteVariables.colors.grey[650],
    backgroundDisabled3: _siteVariables.colors.grey[850],
    borderDisabled: _siteVariables.colors.grey[550]
  }),
  brand: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.brand[400],
    foreground1: _siteVariables.colors.brand[400],
    foreground2: _siteVariables.colors.brand[400],
    foreground3: _siteVariables.colors.brand[200],
    foreground4: _siteVariables.colors.white,
    foreground5: _siteVariables.colors.grey[750],
    background: _siteVariables.colors.brand[600],
    background1: _siteVariables.colors.brand[900],
    background2: _siteVariables.colors.brand[900],
    background3: _siteVariables.colors.brand[1000],
    background4: _siteVariables.colors.grey[650],
    background5: _siteVariables.colors.brand[900],
    background6: _siteVariables.colors.brand[450],
    border: _siteVariables.colors.grey[450],
    border1: _siteVariables.colors.brand[800],
    border2: _siteVariables.colors.brand[800],
    shadow: _siteVariables.colors.black,
    // opacity 25%
    shadowHover: _siteVariables.colors.black,
    foregroundHover: _siteVariables.colors.brand[400],
    foregroundHover1: _siteVariables.colors.white,
    foregroundHover2: _siteVariables.colors.brand[200],
    borderHover: _siteVariables.colors.brand[600],
    backgroundHover: _siteVariables.colors.brand[500],
    backgroundHover1: _siteVariables.colors.brand[900],
    backgroundHover2: _siteVariables.colors.brand[900],
    backgroundHover3: _siteVariables.colors.brand[900],
    foregroundPressed: _siteVariables.colors.brand[200],
    foregroundPressed1: _siteVariables.colors.white,
    backgroundPressed: _siteVariables.colors.brand[700],
    backgroundPressed1: _siteVariables.colors.brand[800],
    backgroundPressed2: _siteVariables.colors.brand[800],
    borderPressed: _siteVariables.colors.brand[800],
    foregroundActive: _siteVariables.colors.brand[400],
    foregroundActive1: _siteVariables.colors.brand[400],
    foregroundActive2: _siteVariables.colors.brand[200],
    backgroundActive: _siteVariables.colors.brand[400],
    backgroundActive1: _siteVariables.colors.brand[400],
    // active border no change (just copied)
    borderActive: _siteVariables.colors.grey[450],
    // buttons
    borderActive1: _siteVariables.colors.brand[800],
    borderActive2: _siteVariables.colors.brand[800],
    foregroundFocus: _siteVariables.colors.brand[400],
    foregroundFocus1: _siteVariables.colors.brand[400],
    foregroundFocus2: _siteVariables.colors.brand[400],
    foregroundFocus3: _siteVariables.colors.brand[200],
    foregroundFocus4: _siteVariables.colors.white,
    backgroundFocus: _siteVariables.colors.brand[600],
    backgroundFocus1: _siteVariables.colors.brand[900],
    backgroundFocus2: _siteVariables.colors.brand[900],
    backgroundFocus3: _siteVariables.colors.brand[1000],
    borderFocus: _siteVariables.colors.white,
    borderFocusWithin: _siteVariables.colors.black,
    borderFocus1: _siteVariables.colors.brand[400],
    // only input

    foregroundDisabled1: _siteVariables.colors.grey[450],
    foregroundDisabled: _siteVariables.colors.grey[450],
    backgroundDisabled1: _siteVariables.colors.grey[550],
    backgroundDisabled: _siteVariables.colors.grey[550],
    backgroundDisabled2: _siteVariables.colors.grey[650],
    borderDisabled: _siteVariables.colors.grey[550]
  }),
  black: {
    foreground: _siteVariables.colors.black,
    foreground1: _siteVariables.colors.grey[750],
    background: _siteVariables.colors.white,
    background1: _siteVariables.colors.white,
    border: _siteVariables.colors.black,
    shadow: _siteVariables.colors.black,
    foregroundHover: _siteVariables.colors.white,
    backgroundHover: _siteVariables.colors.black,
    borderHover: _siteVariables.colors.black,
    shadowHover: _siteVariables.colors.black,
    foregroundActive: _siteVariables.colors.white,
    backgroundActive: _siteVariables.colors.black,
    borderActive: _siteVariables.colors.black,
    shadowActive: _siteVariables.colors.black,
    foregroundFocus: _siteVariables.colors.white,
    backgroundFocus: _siteVariables.colors.black,
    borderFocus: _siteVariables.colors.black,
    shadowFocus: _siteVariables.colors.black,
    foregroundPressed: _siteVariables.colors.white,
    backgroundPressed: _siteVariables.colors.black,
    borderPressed: _siteVariables.colors.black,
    shadowPressed: _siteVariables.colors.black,
    foregroundDisabled: _siteVariables.colors.white,
    backgroundDisabled: _siteVariables.colors.black,
    borderDisabled: _siteVariables.colors.black,
    shadowDisabled: _siteVariables.colors.black
  },
  white: {
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.white,
    background: _siteVariables.colors.black,
    background1: _siteVariables.colors.grey[700],
    border: _siteVariables.colors.white,
    shadow: _siteVariables.colors.white,
    foregroundHover: _siteVariables.colors.black,
    backgroundHover: _siteVariables.colors.white,
    borderHover: _siteVariables.colors.white,
    shadowHover: _siteVariables.colors.white,
    foregroundActive: _siteVariables.colors.black,
    backgroundActive: _siteVariables.colors.white,
    borderActive: _siteVariables.colors.white,
    shadowActive: _siteVariables.colors.white,
    foregroundFocus: _siteVariables.colors.black,
    backgroundFocus: _siteVariables.colors.white,
    borderFocus: _siteVariables.colors.white,
    shadowFocus: _siteVariables.colors.white,
    foregroundPressed: _siteVariables.colors.black,
    backgroundPressed: _siteVariables.colors.white,
    borderPressed: _siteVariables.colors.white,
    shadowPressed: _siteVariables.colors.white,
    foregroundDisabled: _siteVariables.colors.black,
    backgroundDisabled: _siteVariables.colors.white,
    borderDisabled: _siteVariables.colors.white,
    shadowDisabled: _siteVariables.colors.white
  },
  green: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.green[200],
    foreground1: _siteVariables.colors.grey[800],
    foreground2: _siteVariables.colors.green[200],
    foreground3: _siteVariables.colors.green[750],
    background: _siteVariables.colors.green[200],
    background1: _siteVariables.colors.green[200],
    background2: _siteVariables.colors.green[800],
    border: _siteVariables.colors.green[900],
    border1: _siteVariables.colors.green[200]
  }),
  orange: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.orange[300],
    foreground1: _siteVariables.colors.orange[300],
    foreground2: _siteVariables.colors.grey[750],
    background: _siteVariables.colors.orange[300],
    background1: _siteVariables.colors.orange[300],
    border: _siteVariables.colors.grey[400]
  }),
  pink: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.pink[200],
    foreground1: _siteVariables.colors.pink[400],
    background: _siteVariables.colors.pink[800],
    border: _siteVariables.colors.pink[900]
  }),
  red: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.red[200],
    foreground1: _siteVariables.colors.white,
    foreground2: _siteVariables.colors.grey[800],
    background: _siteVariables.colors.red[300],
    background1: _siteVariables.colors.red[800],
    background2: _siteVariables.colors.ruby[500],
    background3: _siteVariables.colors.red[400],
    border: _siteVariables.colors.red[900],
    border1: _siteVariables.colors.red[200],
    foregroundHover: _siteVariables.colors.white,
    backgroundHover: _siteVariables.colors.ruby[600],
    backgroundHover1: _siteVariables.colors.red[400],
    foregroundPressed: _siteVariables.colors.white,
    backgroundPressed: _siteVariables.colors.ruby[700]
  }),
  yellow: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.yellow[300],
    foreground1: _siteVariables.colors.grey[800],
    foreground2: _siteVariables.colors.grey[800],
    foreground3: _siteVariables.colors.grey[750],
    foreground4: _siteVariables.colors.yellow[200],
    background: _siteVariables.colors.yellow[400],
    background1: _siteVariables.colors.grey[450],
    background2: _siteVariables.colors.yellow[500],
    background3: _siteVariables.colors.yellow[800],
    border: _siteVariables.colors.yellow[900],
    border1: _siteVariables.colors.yellow[200]
  }),
  silver: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.silver[200],
    foregroundHover: _siteVariables.colors.white,
    foregroundPressed: _siteVariables.colors.white,
    border: _siteVariables.colors.silver[600],
    background: 'transparent',
    backgroundHover: _siteVariables.colors.silver[800],
    borderHover: _siteVariables.colors.silver[600],
    backgroundPressed: _siteVariables.colors.silver[700],
    borderPressed: _siteVariables.colors.silver[600],
    foregroundDisabled: _siteVariables.colors.silver[600],
    backgroundDisabled: _siteVariables.colors.silver[900]
  }),
  onyx: (0, _colors.createColorScheme)({
    background: _siteVariables.colors.onyx[500],
    background1: _siteVariables.colors.onyx[100],
    background2: _siteVariables.colors.onyx[500],
    background3: _siteVariables.colors.onyx[700],
    backgroundHover: _siteVariables.colors.onyx[900],
    backgroundPressed: _siteVariables.colors.onyx[900],
    border: _siteVariables.colors.onyx[800],
    border1: 'transparent',
    border2: _siteVariables.colors.silver[400]
  }),
  amethyst: (0, _colors.createColorScheme)({
    background: _siteVariables.colors.onyx[200],
    backgroundHover: _siteVariables.colors.amethyst[700],
    backgroundHover1: _siteVariables.colors.grey[750],
    backgroundActive: _siteVariables.colors.amethyst[700]
  })
};
exports.colorScheme = colorScheme;
colorScheme.grey = colorScheme.default;
var createCategoryColorScheme = function createCategoryColorScheme(color, customValues) {
  if (customValues === void 0) {
    customValues = {};
  }
  return Object.assign({
    foreground: _siteVariables.categoryColors[color][250],
    foreground1: _siteVariables.categoryColors[color][550],
    background: _siteVariables.categoryColors[color][800],
    borderActive: _siteVariables.categoryColors[color][350]
  }, customValues);
};
var categoryColorScheme = {
  redDark: createCategoryColorScheme('redDark'),
  red: createCategoryColorScheme('red'),
  orangeDark: createCategoryColorScheme('orangeDark'),
  orange: createCategoryColorScheme('orange'),
  orangeLight: createCategoryColorScheme('orangeLight'),
  yellowDark: createCategoryColorScheme('yellowDark'),
  yellow: createCategoryColorScheme('yellow'),
  brown: createCategoryColorScheme('brown'),
  oliveDark: createCategoryColorScheme('oliveDark'),
  olive: createCategoryColorScheme('olive'),
  greenDark: createCategoryColorScheme('greenDark'),
  green: createCategoryColorScheme('green'),
  tealDark: createCategoryColorScheme('tealDark'),
  teal: createCategoryColorScheme('teal'),
  tealLight: createCategoryColorScheme('tealLight'),
  blueDark: createCategoryColorScheme('blueDark'),
  blue: createCategoryColorScheme('blue'),
  purpleDark: createCategoryColorScheme('purpleDark'),
  purple: createCategoryColorScheme('purple'),
  maroon: createCategoryColorScheme('maroon'),
  pink: createCategoryColorScheme('pink'),
  smokeDark: createCategoryColorScheme('smokeDark'),
  smokeLight: createCategoryColorScheme('smokeLight'),
  steelDark: createCategoryColorScheme('steelDark'),
  steelLight: createCategoryColorScheme('steelLight'),
  neon: createCategoryColorScheme('neon'),
  formatting: {
    foreground1: _siteVariables.categoryColors.red[250],
    background1: _siteVariables.categoryColors.red[700],
    foreground2: _siteVariables.categoryColors.orangeDark[350],
    background2: _siteVariables.categoryColors.orange[700],
    foreground3: _siteVariables.categoryColors.yellow[250],
    background3: _siteVariables.categoryColors.yellow[800],
    foreground4: _siteVariables.categoryColors.neon[150],
    background4: _siteVariables.categoryColors.neon[800],
    foreground5: _siteVariables.categoryColors.green[250],
    background5: _siteVariables.categoryColors.green[700],
    foreground6: _siteVariables.categoryColors.tealLight[250],
    background6: _siteVariables.categoryColors.tealLight[700],
    foreground7: _siteVariables.categoryColors.blueDark[250],
    background7: _siteVariables.categoryColors.blueDark[450],
    foreground8: _siteVariables.categoryColors.maroon[350],
    background8: _siteVariables.categoryColors.maroon[800]
  }
};
exports.categoryColorScheme = categoryColorScheme;
//# sourceMappingURL=colors.js.map