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

A themable React component library.

"use strict";

exports.__esModule = true;
exports.red = exports.colorScheme = exports.categoryColorScheme = exports.accessibleYellow = exports.accessibleGreen = exports.accessibleCyan = void 0;
var _siteVariables = require("../teams/siteVariables");
var _colors = require("../teams/colors");
var accessibleYellow = '#ffff00';
exports.accessibleYellow = accessibleYellow;
var accessibleGreen = '#3ff23f'; // always disabled color in high contrast
exports.accessibleGreen = accessibleGreen;
var accessibleCyan = '#1aebff';
exports.accessibleCyan = accessibleCyan;
var red = '#f00';

// COLOR SCHEME
exports.red = red;
var createColorScheme = function createColorScheme(customValues) {
  if (customValues === void 0) {
    customValues = {};
  }
  return Object.assign({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.black,
    background: _siteVariables.colors.black,
    background1: _siteVariables.colors.white,
    border: _siteVariables.colors.white,
    shadow: _siteVariables.colors.white,
    foregroundHover: accessibleYellow,
    backgroundHover: _siteVariables.colors.black,
    borderHover: accessibleCyan,
    shadowHover: accessibleCyan,
    foregroundActive: accessibleCyan,
    backgroundActive: _siteVariables.colors.black,
    borderActive: accessibleCyan,
    shadowActive: accessibleCyan,
    foregroundFocus: _siteVariables.colors.black,
    backgroundFocus: accessibleCyan,
    borderFocus: _siteVariables.colors.white,
    shadowFocus: _siteVariables.colors.white,
    foregroundPressed: _siteVariables.colors.black,
    backgroundPressed: accessibleCyan,
    borderPressed: _siteVariables.colors.white,
    shadowPressed: _siteVariables.colors.white,
    foregroundDisabled: _siteVariables.colors.black,
    backgroundDisabled: accessibleGreen,
    borderDisabled: _siteVariables.colors.black,
    shadowDisabled: _siteVariables.colors.black
  }, customValues);
};
var colorScheme = {
  default: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.white,
    foreground2: _siteVariables.colors.white,
    foreground3: _siteVariables.colors.white,
    foreground4: _siteVariables.colors.black,
    foreground5: _siteVariables.colors.grey[600],
    foreground6: _siteVariables.colors.grey[750],
    foreground7: _siteVariables.colors.black,
    foreground8: _siteVariables.colors.black,
    foreground9: _siteVariables.colors.white,
    background: _siteVariables.colors.black,
    background1: _siteVariables.colors.black,
    background2: _siteVariables.colors.black,
    background3: _siteVariables.colors.black,
    background4: _siteVariables.colors.black,
    background5: accessibleYellow,
    background6: _siteVariables.colors.black,
    border: _siteVariables.colors.white,
    border1: _siteVariables.colors.white,
    border2: _siteVariables.colors.white,
    border3: _siteVariables.colors.white,
    borderTransparent: _siteVariables.colors.white,
    borderTransparentActive: accessibleCyan,
    shadow: _siteVariables.colors.black,
    // opacity 25%
    shadowHover: _siteVariables.colors.black,
    // opacity 25%

    foregroundHover: _siteVariables.colors.black,
    foregroundHover1: _siteVariables.colors.black,
    foregroundHover2: accessibleCyan,
    backgroundHover: accessibleCyan,
    backgroundHover1: accessibleCyan,
    backgroundHover2: accessibleCyan,
    backgroundHover3: _siteVariables.colors.black,
    backgroundHover4: accessibleCyan,
    borderHover: accessibleCyan,
    foregroundPressed: _siteVariables.colors.black,
    backgroundPressed: accessibleCyan,
    backgroundPressed3: accessibleCyan,
    borderPressed: accessibleCyan,
    foregroundActive: accessibleCyan,
    foregroundActive1: _siteVariables.colors.black,
    backgroundActive: _siteVariables.colors.black,
    backgroundActive1: accessibleCyan,
    backgroundActive2: accessibleCyan,
    borderActive: accessibleCyan,
    // buttons
    borderActive1: accessibleCyan,
    borderActive2: accessibleCyan,
    borderActive3: accessibleCyan,
    borderActive4: accessibleCyan,
    foregroundFocus: _siteVariables.colors.black,
    foregroundFocus1: _siteVariables.colors.black,
    foregroundFocus2: _siteVariables.colors.black,
    foregroundFocus3: _siteVariables.colors.black,
    backgroundFocus: accessibleCyan,
    backgroundFocus1: accessibleCyan,
    backgroundFocus2: accessibleCyan,
    backgroundFocus3: accessibleCyan,
    borderFocusWithin: _siteVariables.colors.black,
    borderFocus: accessibleCyan,
    foregroundDisabled1: accessibleGreen,
    foregroundDisabled: _siteVariables.colors.black,
    backgroundDisabled: accessibleGreen,
    backgroundDisabled1: _siteVariables.colors.black,
    backgroundDisabled2: accessibleGreen,
    backgroundDisabled3: accessibleGreen,
    borderDisabled: accessibleGreen
  }),
  brand: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: accessibleYellow,
    foreground2: accessibleYellow,
    foreground3: accessibleYellow,
    foreground4: _siteVariables.colors.black,
    foreground5: _siteVariables.colors.black,
    background: _siteVariables.colors.white,
    background1: _siteVariables.colors.black,
    background2: _siteVariables.colors.black,
    background3: _siteVariables.colors.black,
    background4: _siteVariables.colors.black,
    background5: _siteVariables.colors.white,
    background6: _siteVariables.colors.white,
    border: _siteVariables.colors.white,
    // buttons
    border1: _siteVariables.colors.white,
    border2: _siteVariables.colors.white,
    shadow: _siteVariables.colors.black,
    // opacity 25%
    shadowHover: _siteVariables.colors.black,
    foregroundHover: _siteVariables.colors.black,
    foregroundHover1: _siteVariables.colors.black,
    foregroundHover2: _siteVariables.colors.black,
    borderHover: accessibleCyan,
    backgroundHover: accessibleCyan,
    backgroundHover1: accessibleCyan,
    backgroundHover2: accessibleYellow,
    backgroundHover3: _siteVariables.colors.black,
    foregroundPressed: _siteVariables.colors.black,
    foregroundPressed1: _siteVariables.colors.black,
    backgroundPressed: accessibleCyan,
    backgroundPressed1: accessibleCyan,
    backgroundPressed2: _siteVariables.colors.black,
    borderPressed: accessibleCyan,
    foregroundActive: accessibleCyan,
    foregroundActive1: _siteVariables.colors.black,
    foregroundActive2: accessibleCyan,
    backgroundActive: _siteVariables.colors.black,
    backgroundActive1: accessibleCyan,
    borderActive: accessibleCyan,
    // buttons
    borderActive1: accessibleCyan,
    borderActive2: accessibleCyan,
    foregroundFocus: _siteVariables.colors.black,
    foregroundFocus1: _siteVariables.colors.black,
    foregroundFocus2: _siteVariables.colors.black,
    foregroundFocus3: _siteVariables.colors.black,
    foregroundFocus4: _siteVariables.colors.black,
    backgroundFocus: accessibleCyan,
    backgroundFocus1: accessibleCyan,
    backgroundFocus2: accessibleCyan,
    backgroundFocus3: accessibleCyan,
    borderFocus: accessibleCyan,
    borderFocusWithin: _siteVariables.colors.black,
    borderFocus1: accessibleCyan,
    foregroundDisabled: _siteVariables.colors.black,
    foregroundDisabled1: accessibleGreen,
    backgroundDisabled: accessibleGreen,
    backgroundDisabled1: _siteVariables.colors.black,
    borderDisabled: accessibleGreen
  }),
  black: createColorScheme(),
  white: createColorScheme(),
  grey: createColorScheme(),
  green: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.black,
    foreground2: _siteVariables.colors.white,
    foreground3: _siteVariables.colors.black,
    background: _siteVariables.colors.white,
    background1: _siteVariables.colors.white,
    background2: _siteVariables.colors.black,
    border: _siteVariables.colors.white,
    border1: _siteVariables.colors.white,
    shadow: undefined,
    foregroundHover: undefined,
    backgroundHover: undefined,
    borderHover: undefined,
    shadowHover: undefined,
    foregroundActive: undefined,
    backgroundActive: undefined,
    borderActive: undefined,
    shadowActive: undefined,
    foregroundFocus: undefined,
    backgroundFocus: undefined,
    borderFocus: undefined,
    shadowFocus: undefined,
    foregroundPressed: undefined,
    backgroundPressed: undefined,
    borderPressed: undefined,
    shadowPressed: undefined,
    foregroundDisabled: undefined,
    backgroundDisabled: undefined,
    borderDisabled: undefined,
    shadowDisabled: undefined
  }),
  orange: (0, _colors.createColorScheme)({
    foreground: accessibleYellow,
    foreground1: accessibleYellow,
    foreground2: _siteVariables.colors.black,
    background: accessibleYellow,
    background1: _siteVariables.colors.white,
    border: accessibleCyan
  }),
  pink: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.white,
    background: _siteVariables.colors.black,
    border: _siteVariables.colors.white
  }),
  red: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.black,
    foreground2: _siteVariables.colors.black,
    background: _siteVariables.colors.white,
    background1: _siteVariables.colors.black,
    background2: _siteVariables.colors.black,
    background3: accessibleYellow,
    border: _siteVariables.colors.white,
    border1: _siteVariables.colors.white,
    foregroundHover: _siteVariables.colors.black,
    backgroundHover: accessibleCyan,
    backgroundHover1: accessibleCyan,
    foregroundPressed: _siteVariables.colors.black,
    backgroundPressed: accessibleCyan
  }),
  yellow: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.black,
    foreground2: _siteVariables.colors.black,
    foreground3: _siteVariables.colors.black,
    foreground4: _siteVariables.colors.white,
    background: _siteVariables.colors.white,
    background1: 'transparent',
    background2: _siteVariables.colors.white,
    background3: _siteVariables.colors.black,
    border: _siteVariables.colors.white,
    border1: _siteVariables.colors.white
  }),
  silver: (0, _colors.createColorScheme)({
    foreground: _siteVariables.colors.white,
    foreground1: _siteVariables.colors.white,
    foregroundHover: _siteVariables.colors.black,
    foregroundPressed: _siteVariables.colors.black,
    background: _siteVariables.colors.black,
    border: _siteVariables.colors.white,
    backgroundHover: accessibleCyan,
    borderHover: _siteVariables.colors.white,
    backgroundPressed: accessibleCyan,
    borderPressed: _siteVariables.colors.white,
    foregroundDisabled: accessibleGreen,
    backgroundDisabled: _siteVariables.colors.black,
    borderDisabled: accessibleGreen
  }),
  onyx: (0, _colors.createColorScheme)({
    background: _siteVariables.colors.black,
    background1: _siteVariables.colors.black,
    background2: _siteVariables.colors.white,
    background3: _siteVariables.colors.white,
    backgroundHover: accessibleCyan,
    backgroundPressed: accessibleCyan,
    border: _siteVariables.colors.white,
    border1: _siteVariables.colors.white,
    border2: _siteVariables.colors.white
  }),
  amethyst: (0, _colors.createColorScheme)({
    background: _siteVariables.colors.silver[900],
    backgroundHover: accessibleCyan,
    backgroundHover1: accessibleCyan,
    backgroundActive: accessibleCyan
  })
};
exports.colorScheme = colorScheme;
var createCategoryColorScheme = function createCategoryColorScheme(customValues) {
  if (customValues === void 0) {
    customValues = {};
  }
  return Object.assign({
    foreground: _siteVariables.colors.black,
    foreground1: accessibleYellow,
    background: accessibleYellow,
    borderActive: accessibleCyan
  }, customValues);
};
var categoryColorScheme = {
  redDark: createCategoryColorScheme(),
  red: createCategoryColorScheme(),
  orangeDark: createCategoryColorScheme(),
  orange: createCategoryColorScheme(),
  orangeLight: createCategoryColorScheme(),
  yellowDark: createCategoryColorScheme(),
  yellow: createCategoryColorScheme(),
  brown: createCategoryColorScheme(),
  oliveDark: createCategoryColorScheme(),
  olive: createCategoryColorScheme(),
  greenDark: createCategoryColorScheme(),
  green: createCategoryColorScheme(),
  tealDark: createCategoryColorScheme(),
  teal: createCategoryColorScheme(),
  tealLight: createCategoryColorScheme(),
  blueDark: createCategoryColorScheme(),
  blue: createCategoryColorScheme(),
  purpleDark: createCategoryColorScheme(),
  purple: createCategoryColorScheme(),
  maroon: createCategoryColorScheme(),
  pink: createCategoryColorScheme(),
  smokeDark: createCategoryColorScheme(),
  smokeLight: createCategoryColorScheme(),
  steelDark: createCategoryColorScheme(),
  steelLight: createCategoryColorScheme(),
  neon: createCategoryColorScheme(),
  formatting: {
    foreground1: undefined,
    background1: undefined,
    foreground2: undefined,
    background2: undefined,
    foreground3: undefined,
    background3: undefined,
    foreground4: undefined,
    background4: undefined,
    foreground5: undefined,
    background5: undefined,
    foreground6: undefined,
    background6: undefined,
    foreground7: undefined,
    background7: undefined,
    foreground8: undefined,
    background8: undefined
  }
};
exports.categoryColorScheme = categoryColorScheme;
//# sourceMappingURL=colors.js.map