Palette

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/palette

NPM

npm install @leafygreen-ui/palette

This package contains the colors for the following palettes

• UI: MongoDB-branded, general-use UI palette.
• Chart (coming soon): Color palette for accessible charting colors.
• Syntax (coming soon): Color palette for accessible syntax-highlighting themes.

UI Palette

Usage

npm install @leafygreen-ui/palette

import { uiColors } from '@leafygreen-ui/palette';

/**
 * uiColors = {
 * 	 black,
 *   white,
 *   focus,
 *   gray: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   green: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light2,
 *     light3,
 *   },
 *   blue: {
 *     dark3,
 *     dark2,
 *     base,
 *     light2,
 *     light3,
 *   },
 *   yellow: {
 *     dark3,
 *     dark2,
 *     base,
 *     light2,
 *     light3,
 *   },
 *   red: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light2,
 *     light3,
 *   },
 * }
 */

const example = () => (
  <span style={{ color: uiColors.gray.dark1 }}>Hello World</span>
);

@import '<path to node_modules>/@leafygreen-ui/palette/dist/ui-colors.less';