4.0.10 • Published 1 month ago
@leafygreen-ui/palette v4.0.10
Palette
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/palette
NPM
npm install @leafygreen-ui/palette
This package contains the brand-supported MongoDB UI color palette.
UI Palette
Usage
npm install @leafygreen-ui/palette
import { palette } from '@leafygreen-ui/palette';
/**
* palette = {
* black,
* white,
* gray: {
* dark3,
* dark2,
* dark1,
* base,
* light1,
* light2,
* light3,
* },
* green: {
* dark3,
* dark2,
* dark1,
* base,
* light1,
* light2,
* light3,
* },
* blue: {
* dark3,
* dark2,
* dark1,
* base,
* light1,
* light2,
* light3,
* },
* yellow: {
* dark3,
* dark2,
* base,
* light2,
* light3,
* },
* red: {
* dark3,
* dark2,
* base,
* light1,
* light2,
* light3,
* },
* }
*/
const example = () => (
<span style={{ color: palette.gray.dark1 }}>Hello World</span>
);
@import '<path to node_modules>/@leafygreen-ui/palette/dist/palette.less';
/*
* @palette__white: #ffffff;
* @palette__black: #001E2B;
*
* @palette__gray--dark-3: #21313C;
* @palette__gray--dark-2: #3D4F58;
* @palette__gray--dark-1: #5C6C75;
* @palette__gray--base: #889397;
* @palette__gray--light-1: #C1C7C6;
* @palette__gray--light-2: #E8EDEB;
* @palette__gray--light-3: #F9FBFA;
*
* @palette__green--dark-3: #023430;
* @palette__green--dark-2: #00684A;
* @palette__green--dark-1: #00A35C;
* @palette__green--base: #00ED64;
* @palette__green--light-1: #71F6BA;
* @palette__green--light-2: #C0FAE6;
* @palette__green--light-3: #E3FCF7;
*
* @palette__purple--dark-3: #2D0B59;
* @palette__purple--dark-2: #5E0C9E;
* @palette__purple--base: #B45AF2;
* @palette__purple--light-2: #F1D4FD;
* @palette__purple--light-3: #F9EBFF;
*
* @palette__blue--dark-3: #0C2657;
* @palette__blue--dark-2: #083C90;
* @palette__blue--dark-1: #1254B7;
* @palette__blue--base: #016BF8;
* @palette__blue--light-1: #0498EC;
* @palette__blue--light-2: #C3E7FE;
* @palette__blue--light-3: #E1F7FF;
*
* @palette__yellow--dark-3: #4C2100;
* @palette__yellow--dark-2: #944F01;
* @palette__yellow--base: #FFC010;
* @palette__yellow--light-2: #FFEC9E;
* @palette__yellow--light-3: #FEF7DB;
*
* @palette__red--dark-3: #5B0000;
* @palette__red--dark-2: #970606;
* @palette__red--base: #DB3030;
* @palette__red--light-1: #EF5752;
* @palette__red--light-2: #FFCDC7;
* @palette__red--light-3: #FFEAE5;
*/
4.0.10
1 month ago
4.0.9
1 month ago
4.0.8
6 months ago
5.0.0-alpha.1
10 months ago
5.0.0-alpha.0
10 months ago
4.0.5
10 months ago
4.0.7
9 months ago
4.0.6
9 months ago
4.0.4
1 year ago
4.0.1
1 year ago
4.0.0
1 year ago
4.0.3
1 year ago
4.0.2
1 year ago
3.4.7
1 year ago
3.4.6
1 year ago
3.4.5
1 year ago
3.4.4
2 years ago
3.4.3
2 years ago
3.4.3-test.0
2 years ago
3.4.3-next.0
2 years ago
3.4.3-next.1
2 years ago
3.4.3-next.2
2 years ago
3.4.2
2 years ago
3.4.1
2 years ago
3.4.0
2 years ago
3.3.2
2 years ago
3.3.1
2 years ago
3.3.0
2 years ago
3.2.2
3 years ago
3.2.1
3 years ago
3.2.0
3 years ago
3.1.1
3 years ago
3.1.0
3 years ago
3.0.1
4 years ago
3.0.0
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.1.1
4 years ago
1.1.0
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago