Pelle NPM | npm.io

Available types

Pelle

Heavily inspired by the theme palette provided by material ui.

Installation

NPM:

npm install pelle

import { Palette } from 'pelle';
import * as Color from 'pelle/color';
import * as Util from 'pelle/util';

CDN:

<script src="https://cdn.jsdelivr.net/npm/pelle/cdn/pelle.js"></script>
<script>
  const { Palette, Util, Color } = pelle;
</script>

Usage

import { Palette } from 'pelle';

const palette = Palette({
  primary: '#5865f2',
});

palette.primary.main  // #5865f2
palette.primary.light // Slightly lighter than #5865f2
palette.primary.dark  // Slightly darker than #5865f2
palette.primary.text  // Either white or black, for best readability

Color Helpers

import { Palette } from 'pelle';
import { green, red, blue, grey } from 'pelle/color';

const palette = Palette({
  primary: '#5865f2',
  highlight: {
    success: green[200],
    error: red[200],
    log: blue[400],
    info: grey[10],
  },
});

Util Functions

import { Palette } from 'pelle';
import { darken, lighten, emphasize } from 'pelle/util';

const palette = Palette({
  primary: '#5865f2',
  secondary: darken(`#66ffff`),
  tertiary: darken(`#ff4`),
  extra: emphasize(`#55ddff`),
});