vfdp-ui-framework v0.0.1-security

Installation

Yarn

yarn add vfdp-ui-framework

NPM

npm install vfdp-ui-framework

This package contains the brand-supported UI color palette.

UI Palette

Usage

npm install vfdp-ui-framework

import { palette } from 'vfdp-ui-framework';

/**
 * 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>/vfdp-ui-framework/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;
*/

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Building docs

(This project's readme.md is generated by verb, please don't edit the readme directly. Any changes to the readme must be made in the .verb.md readme template.)

To generate the readme, run the following command:

$ npm install -g verbose/verb#dev verb-generate-readme && verb

Running tests

Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:

$ npm install && npm test

Credits

all the people that helped and helping.

License

MIT