pelle
v0.8.0
Published
A theme palette heavily inspired by the theme palette provided by material ui.
Downloads
5
Readme
Pelle
Heavily inspired by the theme palette provided by material ui.
Installation
NPM:
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