Colors

modular color palette for LP Mission Control

Glossary

• Installation
• Configuration
• How-To

Installation

  npm install lp_colors

Configuration

Colors.js comes preloaded with default color values. You can override any of these values by using colors.config in your root directory

Your colors.config file should look similar to this:

LP_COLORS_PRIMARY=#011c56
LP_COLORS_SECONDARY=#3ABEA8
LP_COLORS_ACCENT=#55acee
LP_COLORS_BLACK=#000
LP_COLORS_WHITE=#fff
LP_COLORS_LIGHT_GRAY=#ddd
LP_COLORS_DARK_GRAY=#808080
LP_COLORS_ERROR=#b30000
LP_COLORS_TRANSPARENT=rgba(0,0,0,0)

Extending the Color Palette

You can define any additional colors you'd like in colors.config. Just make sure the color is name-spaced with LP_COLORS_

These names will be stripped of LP_COLORS_ and then lowercase'd.

For example:

LP_COLORS_SUCCESS=#b32200

Becomes:

success=#b32200

How-To

The Colors component returns an object of color codes.

You can import the whole color object

  import Colors from 'lp_colors';

  const MyComponent = () => {
    <View style={{ color: Colors.primary }}/>
  }

Or, you can decouple the import statement for less overhead

  import { primary } from 'lp_colors';

  const MyComponent = () => {
    <View style={{ color: primary }}/>
  }