playing with colors
This commit is contained in:
parent
ab60e53cac
commit
aef0a1c1ce
2 changed files with 42 additions and 90 deletions
112
src/palette.ts
112
src/palette.ts
|
@ -3,26 +3,27 @@ import { absDegrees } from './helpers/math'
|
|||
|
||||
// Lightness 0-100
|
||||
const lightnessLevels = {
|
||||
pit: 20,
|
||||
depths: 27,
|
||||
stope: 34,
|
||||
window: 82,
|
||||
mouth: 92,
|
||||
pit: 10,
|
||||
depths: 30,
|
||||
stope: 50,
|
||||
window: 80,
|
||||
mouth: 90,
|
||||
}
|
||||
|
||||
// Chrome 0-32
|
||||
const chromaLevels = {
|
||||
surface: 3,
|
||||
color: 12,
|
||||
surface: 3.5,
|
||||
colorSecondary: 7,
|
||||
colorPrimary: 14,
|
||||
}
|
||||
|
||||
// Degrees 0-360
|
||||
const hueLevels = {
|
||||
cave: 350,
|
||||
cave: 225,
|
||||
orange: 45,
|
||||
teal: 180,
|
||||
}
|
||||
const hueOffset = 45
|
||||
const hueOffset = 45 / 2
|
||||
|
||||
export const pit = new Color('Pit', {
|
||||
l: lightnessLevels.pit,
|
||||
|
@ -48,87 +49,45 @@ export const text = new Color('Text', {
|
|||
h: hueLevels.cave,
|
||||
})
|
||||
|
||||
export const darkRed = new Color('Dark Red', {
|
||||
export const red = new Color('Red', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorSecondary,
|
||||
h: absDegrees(hueLevels.orange - hueOffset),
|
||||
})
|
||||
|
||||
export const lightRed = new Color('Light Red', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.orange - hueOffset),
|
||||
})
|
||||
|
||||
export const darkOrange = new Color('Dark Orange', {
|
||||
export const orange = new Color('Orange', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorPrimary,
|
||||
h: hueLevels.orange,
|
||||
})
|
||||
|
||||
export const lightOrange = new Color('Light Orange', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: hueLevels.orange,
|
||||
})
|
||||
|
||||
export const darkYellow = new Color('Dark Yellow', {
|
||||
export const yellow = new Color('Yellow', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.orange + hueOffset),
|
||||
c: chromaLevels.colorSecondary,
|
||||
h: absDegrees(hueLevels.orange + (hueOffset / 2)),
|
||||
})
|
||||
|
||||
export const LightYellow = new Color('Light Yellow', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.orange + hueOffset),
|
||||
})
|
||||
|
||||
export const darkGreen = new Color('Dark Green', {
|
||||
export const green = new Color('Green', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorSecondary,
|
||||
h: absDegrees(hueLevels.teal - hueOffset),
|
||||
})
|
||||
|
||||
export const lightGreen = new Color('Light Green', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.teal - hueOffset),
|
||||
})
|
||||
|
||||
export const darkTeal = new Color('Dark Teal', {
|
||||
export const teal = new Color('Teal', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorPrimary,
|
||||
h: hueLevels.teal,
|
||||
})
|
||||
|
||||
export const lightTeal = new Color('Light Teal', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: hueLevels.teal,
|
||||
})
|
||||
|
||||
export const darkBlue = new Color('Dark Blue', {
|
||||
export const blue = new Color('Blue', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorSecondary,
|
||||
h: absDegrees(hueLevels.teal + (hueOffset * 2)),
|
||||
})
|
||||
|
||||
export const lightBlue = new Color('Light Blue', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.teal + (hueOffset * 2)),
|
||||
})
|
||||
|
||||
export const darkPurple = new Color('Dark Purple', {
|
||||
export const purple = new Color('Purple', {
|
||||
l: lightnessLevels.window,
|
||||
c: chromaLevels.color,
|
||||
h: absDegrees(hueLevels.teal + (hueOffset * 3)),
|
||||
})
|
||||
|
||||
export const lightPurple = new Color('Light Purple', {
|
||||
l: lightnessLevels.mouth,
|
||||
c: chromaLevels.color,
|
||||
c: chromaLevels.colorSecondary,
|
||||
h: absDegrees(hueLevels.teal + (hueOffset * 3)),
|
||||
})
|
||||
|
||||
|
@ -137,18 +96,11 @@ export default [
|
|||
depths,
|
||||
stope,
|
||||
text,
|
||||
darkRed,
|
||||
lightRed,
|
||||
darkOrange,
|
||||
lightOrange,
|
||||
darkYellow,
|
||||
LightYellow,
|
||||
darkGreen,
|
||||
lightGreen,
|
||||
darkTeal,
|
||||
lightTeal,
|
||||
darkBlue,
|
||||
lightBlue,
|
||||
darkPurple,
|
||||
lightPurple,
|
||||
red,
|
||||
orange,
|
||||
yellow,
|
||||
green,
|
||||
teal,
|
||||
blue,
|
||||
purple,
|
||||
]
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
import chalk from 'chalk'
|
||||
import { pit, text, darkTeal, darkOrange, lightOrange, darkPurple, lightPurple, darkBlue, darkGreen, stope } from '../palette'
|
||||
import { pit, depths, stope, text, teal, orange, purple, blue, green, yellow } from '../palette'
|
||||
|
||||
const bg = chalk.bgHex(pit.toHex()).hex(text.toHex())
|
||||
const chalkDefinition = chalk.hex(darkTeal.toHex())
|
||||
const chalkVariable = chalk.hex(darkOrange.toHex())
|
||||
const chalkAssignments = chalk.hex(lightOrange.toHex())
|
||||
const chalkParenthesis = chalk.hex(darkPurple.toHex())
|
||||
const chalkParameter = chalk.hex(lightPurple.toHex())
|
||||
const chalkType = chalk.hex(darkBlue.toHex())
|
||||
const chalkReturn = chalk.hex(darkGreen.toHex())
|
||||
const chalkComment = chalk.italic.hex(stope.toHex())
|
||||
const chalkDefinition = chalk.hex(teal.toHex())
|
||||
const chalkVariable = chalk.hex(orange.toHex())
|
||||
const chalkAssignments = chalk.hex(purple.toHex())
|
||||
const chalkParenthesis = chalk.hex(stope.toHex())
|
||||
const chalkParameter = chalk.hex(yellow.toHex())
|
||||
const chalkType = chalk.hex(blue.toHex())
|
||||
const chalkReturn = chalk.hex(green.toHex())
|
||||
const chalkComment = chalk.italic.hex(depths.toHex())
|
||||
|
||||
export default () => {
|
||||
console.log(
|
||||
|
@ -18,7 +18,7 @@ ${chalkDefinition('const')}
|
|||
${chalkVariable('myFunc')}
|
||||
${chalkAssignments('=')}
|
||||
${chalkParenthesis('\(')}
|
||||
${chalkParameter('isAwesome')}
|
||||
${chalkParameter('isAwesome?')}
|
||||
:
|
||||
${chalkType('boolean')}
|
||||
${chalkParenthesis('\)')}
|
||||
|
|
Loading…
Add table
Reference in a new issue