color pallete class, converter, tests

This commit is contained in:
Ava Gaiety W 2025-09-16 21:26:19 -06:00
commit d5aff726c3
11 changed files with 451 additions and 0 deletions

175
.gitignore vendored Normal file
View file

@ -0,0 +1,175 @@
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# Logs
logs
_.log
npm-debug.log_
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Caches
.cache
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
# Runtime data
pids
_.pid
_.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# IntelliJ based IDEs
.idea
# Finder (MacOS) folder config
.DS_Store

2
.mise.toml Normal file
View file

@ -0,0 +1,2 @@
[tools]
bun = "latest"

15
README.md Normal file
View file

@ -0,0 +1,15 @@
# verdigris
To install dependencies:
```bash
bun install
```
To run:
```bash
bun run index.js
```
This project was created using `bun init` in bun v1.1.13. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

BIN
bun.lockb Executable file

Binary file not shown.

13
index.ts Normal file
View file

@ -0,0 +1,13 @@
import { Chalk } from 'chalk'
import colors 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!')
)
}
colors.forEach(log)

27
jsconfig.json Normal file
View file

@ -0,0 +1,27 @@
{
"compilerOptions": {
// Enable latest features
"lib": ["ESNext", "DOM"],
"target": "ESNext",
"module": "ESNext",
"moduleDetection": "force",
"jsx": "react-jsx",
"allowJs": true,
// Bundler mode
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
// Best practices
"strict": true,
"skipLibCheck": true,
"noFallthroughCasesInSwitch": true,
// Some stricter flags (disabled by default)
"noUnusedLocals": false,
"noUnusedParameters": false,
"noPropertyAccessFromIndexSignature": false
}
}

13
package.json Normal file
View file

@ -0,0 +1,13 @@
{
"name": "verdigris",
"module": "index.js",
"type": "module",
"devDependencies": {
"@types/bun": "latest",
"chalk": "^5.6.2",
"color-convert": "^3.1.2"
},
"peerDependencies": {
"typescript": "^5.0.0"
}
}

75
src/helpers/color.ts Normal file
View file

@ -0,0 +1,75 @@
import convert from 'color-convert'
export interface OklchInterface {
l: number,
c: number,
h: number,
}
export default class {
constructor(name: string, { l, c, h }: OklchInterface) {
name = name.trim()
if (this._isNameValid(name)) this.#name = name
if (this._isLValid(l)) this.#l = l
if (this._isCValid(c)) this.#c = c
if (this._isHValid(h)) this.#h = h
}
#name: string = ''
#l: number = 0
#c: number = 0
#h: number = 0
get name() { return this.#name }
set name(value: string) {
value = value.trim();
if (this._isNameValid(value)) this.#name = value
}
_isNameValid(value: string): boolean {
if (value === '') throw 'name may not be empty'
return true
}
get l() { return this.#l }
set l(value: number) {
if (this._isLValid(value)) this.#l = value
}
_isLValid(value: number): boolean {
if (value < 0) throw 'l must be above 0'
if (value > 100) throw 'l may not be over 100'
return true
}
get c() { return this.#c }
set c(value: number) {
if (this._isCValid(value)) this.#c = value
}
_isCValid(value: number): boolean {
if (value < 0) throw 'c must be above 0'
if (value > 32) throw 'c may not be over 32'
return true
}
get h() { return this.#h }
set h(value: number) {
if (this._isHValid(value)) this.#h = value
}
_isHValid(value: number): boolean {
if (value < 0) throw 'h must be above 0'
if (value > 360) throw 'h may not be over 360'
return true
}
asOklch(): OklchInterface {
return {
l: this.#l,
c: this.#c,
h: this.#h
}
}
toHex(): string {
return `#${convert.oklch.hex(this.#l, this.#c, this.#h)}`
}
}

13
src/palette.toml Normal file
View file

@ -0,0 +1,13 @@
name = "verdigris"
version = "0.0.1"
[author]
name = "Gaiety"
email = "ava+verdigris@gaiety.me"
[colors]
[colors.bg]
l = 0.2
c = 0.02
h =

32
src/palette.ts Normal file
View file

@ -0,0 +1,32 @@
import Color from './helpers/color'
const bg = new Color('Background', {
l: 0.2,
c: 0.02,
h: 300,
})
const fg = new Color('Foreground', {
l: 0.3,
c: 0.02,
h: 300,
})
const darkRed = new Color('Dark Red', {
l: 0.8,
c: 0.1,
h: 0,
})
const lightRed = new Color('Light Red', {
l: 0.9,
c: 0.1,
h: 0,
})
export default [
bg,
fg,
darkRed,
lightRed
]

View file

@ -0,0 +1,86 @@
import { expect, test } from 'bun:test'
import Color from '../../src/helpers/color'
test('throws if given an empty name', () => {
expect(
() => new Color('', { l: 0, c: 0, h: 0 }))
.toThrow(
new Error('name may not be empty')
)
})
test('can get name', () => {
const color = new Color('foo', { l: 0, c: 0, h: 0 })
expect(color.name).toBe('foo')
})
test('can get Oklch values', () => {
const color = new Color('foo', { l: 1, c: 2, h: 3 })
expect(color.l).toBe(1)
expect(color.c).toBe(2)
expect(color.h).toBe(3)
})
test('throws if l under range', () => {
expect(
() => new Color('foo', { l: -1, c: 0, h: 0 }))
.toThrow(
new Error('l must be above 0')
)
})
test('throws if l above range', () => {
expect(
() => new Color('foo', { l: 101, c: 0, h: 0 }))
.toThrow(
new Error('l may not be over 100')
)
})
test('throws if c under range', () => {
expect(
() => new Color('foo', { l: 0, c: -1, h: 0 }))
.toThrow(
new Error('c must be above 0')
)
})
test('throws if c above range', () => {
expect(
() => new Color('foo', { l: 0, c: 33, h: 0 }))
.toThrow(
new Error('c may not be over 32')
)
})
test('throws if h under range', () => {
expect(
() => new Color('foo', { l: 0, c: 0, h: -1 }))
.toThrow(
new Error('h must be above 0')
)
})
test('throws if h above range', () => {
expect(
() => new Color('foo', { l: 0, c: 0, h: 361 }))
.toThrow(
new Error('h may not be over 360')
)
})
test('can get Oklch object with values', () => {
const color = new Color('foo', { l: 0, c: 0, h: 0 })
expect(color.asOklch()).toEqual({ l: 0, c: 0, h: 0 })
})
test('can convert to expected hex values', () => {
const black = new Color('foo', { l: 0, c: 0, h: 0 })
expect(black.toHex()).toBe('#000000')
const yellow = new Color('foo', { l: 100, c: 32, h: 110 })
expect(yellow.toHex()).toBe('#FFFF00')
const white = new Color('foo', { l: 100, c: 0, h: 0 })
expect(white.toHex()).toBe('#FFFFFF')
})