Olian04 / Pelle

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`),
});

WIP

Dev resources:

• Maybe reimplement meterial ui palette logic using color.js (currently no typescript support)
• Test tool for different auto palettes: https://www.sessions.edu/color-calculator/
• Procedural color generation: https://sighack.com/post/procedural-color-algorithms-color-variations