live previewing, full test palette

README.md

@@ -12,6 +12,11 @@ bun install
 bun run index.js
 ```
 
+## To Live Preview
+```bash
+while sleep 1 ; do find . -name '*.ts' | entr bun index.ts ; done
+```
+
 ## To Run Tests
 
 ```bash

index.ts

@@ -1,13 +1,20 @@
-import { Chalk } from 'chalk'
+import chalk from 'chalk'
-import colors from './src/palette'
+import colors, { pit, text, darkTeal, darkOrange, lightOrange, darkPurple } from './src/palette'
 import Color from './src/helpers/color'
 
-const chalk = new Chalk({ level: 3 })
-
 function log(color: Color) {
   console.log(
-    chalk.hex(color.toHex()).underline('Hello, world!')
+    chalk.hex(color.toHex()).bold('■ T'),
+    chalk.hex(text.toHex()).bold(color.name)
   )
 }
 
 colors.forEach(log)
+console.log(
+  chalk
+    .bgHex(pit.toHex())
+    .hex(text.toHex())
+    .visible(
+      `${chalk.hex(darkTeal.toHex()).visible('const')} ${chalk.hex(darkOrange.toHex()).visible('myFunc')} ${chalk.hex(lightOrange.toHex()).visible('=')} (isAwesome: boolean) => return 'yep'`
+    )
+)

src/helpers/math.ts

@@ -0,0 +1,6 @@
+const maxDegrees = 360
+export function absDegrees(degrees: number): number {
+  if (degrees > maxDegrees) return absDegrees(degrees - maxDegrees)
+  if (degrees < 0) return absDegrees(degrees * -1)
+  return degrees
+}

src/palette.ts

@@ -1,32 +1,154 @@
 import Color from './helpers/color'
+import { absDegrees } from './helpers/math'
 
-const bg = new Color('Background', {
+// Lightness 0-100
-  l: 0.2,
+const lightnessLevels = {
-  c: 0.02,
+  pit: 20,
-  h: 300,
+  depths: 27,
+  stope: 34,
+  window: 82,
+  mouth: 92,
+}
+
+// Chrome 0-32
+const chromaLevels = {
+  surface: 3,
+  color: 12,
+}
+
+// Degrees 0-360
+const hueLevels = {
+  cave: 350,
+  orange: 45,
+  teal: 180,
+}
+const hueOffset = 45
+
+export const pit = new Color('Pit', {
+  l: lightnessLevels.pit,
+  c: chromaLevels.surface,
+  h: hueLevels.cave,
 })
 
-const fg = new Color('Foreground', {
+export const depths = new Color('Depths', {
-  l: 0.3,
+  l: lightnessLevels.depths,
-  c: 0.02,
+  c: chromaLevels.surface,
-  h: 300,
+  h: hueLevels.cave,
 })
 
-const darkRed = new Color('Dark Red', {
+export const stope = new Color('Stope', {
-  l: 0.8,
+  l: lightnessLevels.stope,
-  c: 0.1,
+  c: chromaLevels.surface,
-  h: 0,
+  h: hueLevels.cave,
 })
 
-const lightRed = new Color('Light Red', {
+export const text = new Color('Text', {
-  l: 0.9,
+  l: lightnessLevels.mouth,
-  c: 0.1,
+  c: chromaLevels.surface,
-  h: 0,
+  h: hueLevels.cave,
+})
+
+export const darkRed = new Color('Dark Red', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  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', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  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', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  h: absDegrees(hueLevels.orange + hueOffset),
+})
+
+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', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  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', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  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', {
+  l: lightnessLevels.window,
+  c: chromaLevels.color,
+  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', {
+  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,
+  h: absDegrees(hueLevels.teal + (hueOffset * 3)),
 })
 
 export default [
-  bg,
+  pit,
-  fg,
+  depths,
+  stope,
+  text,
   darkRed,
-  lightRed
+  lightRed,
+  darkOrange,
+  lightOrange,
+  darkYellow,
+  LightYellow,
+  darkGreen,
+  lightGreen,
+  darkTeal,
+  lightTeal,
+  darkBlue,
+  lightBlue,
+  darkPurple,
+  lightPurple,
 ]

tests/helpers/math.test.ts

@@ -0,0 +1,66 @@
+import { expect, test } from 'bun:test'
+import { absDegrees } from '../../src/helpers/math'
+
+test('degrees: 0 is valid', () => {
+  expect(
+    absDegrees(0)
+  ).toBe(0)
+})
+
+test('degrees: if <= 360 return same number', () => {
+  expect(
+    absDegrees(1)
+  ).toBe(1)
+
+  expect(
+    absDegrees(180)
+  ).toBe(180)
+
+  expect(
+    absDegrees(359)
+  ).toBe(359)
+
+  expect(
+    absDegrees(360)
+  ).toBe(360)
+})
+
+test('degrees: if > 360 return equivilent degree within 360', () => {
+  expect(
+    absDegrees(361)
+  ).toBe(1)
+
+  expect(
+    absDegrees(540)
+  ).toBe(180)
+
+  expect(
+    absDegrees(719)
+  ).toBe(359)
+
+  expect(
+    absDegrees(720)
+  ).toBe(360)
+})
+
+test('degrees: if < 0 return equivilent degree within 360', () => {
+  expect(
+    absDegrees(-361)
+  ).toBe(1)
+
+  expect(
+    absDegrees(-180)
+  ).toBe(180)
+
+  expect(
+    absDegrees(-540)
+  ).toBe(180)
+
+  expect(
+    absDegrees(-719)
+  ).toBe(359)
+
+  expect(
+    absDegrees(-720)
+  ).toBe(360)
+})