adds dye to monorepo and distringusehs between scheme and input

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "dev": "cd packages/playground && pnpm run dev",
     "docs": "cd packages/docs && pnpm run dev",
+    "dye": "cd packages/dye && pnpm run dev",
     "build": "cd packages/core && tsc && vite build && copy package.json dist && copy README.md dist",
     "publish": "cd packages/core/dist && npm publish",
     "tree": "tree -I 'node_modules|dist'"

packages/core/engine/defaults.ts

@@ -1,4 +1,4 @@
-import { UmbraInput, UmbraSettings } from './types'
+import { UmbraScheme, UmbraSettings } from './types'
 
 export const defaultSettings: UmbraSettings = {
   power: 0.15,
@@ -9,7 +9,7 @@ export const defaultSettings: UmbraSettings = {
   tints: [5, 10, 10, 10, 15, 15, 25, 15, 15, 15, 15, 25]
 }
 
-export const defaultScheme: UmbraInput = {
+export const defaultScheme: UmbraScheme = {
   background: '#090233',
   foreground: '#ff5555',
   accents: ['#5200ff'],

packages/core/engine/generator.ts

@@ -1,5 +1,5 @@
 import { colord, Colord } from 'colord'
-import { UmbraAdjusted, UmbraInput, Accent } from './types'
+import { UmbraAdjusted, UmbraScheme, Accent } from './types'
 import { pickContrast, colorMix } from './primitives/color'
 import { insertColorIntoRange, nextAccent, getStrings } from './primitives/utils'
 
@@ -30,7 +30,7 @@ function getRange({ from, to, range }: GetRange) {
 }
 
 interface RangeProps {
-  input: UmbraInput
+  input: UmbraScheme
   adjusted: UmbraAdjusted
   range: (number | string)[]
   color?: string
@@ -57,7 +57,7 @@ function replaceAtIndex(array: (number | string)[], index: number, value: string
   return newArray
 }
 
-function putAccentInRange(adjusted: UmbraAdjusted, accent: Accent | string, input: UmbraInput) {
+function putAccentInRange(adjusted: UmbraAdjusted, accent: Accent | string, input: UmbraScheme) {
   const isString = typeof accent === 'string'
   const color = isString ? accent : accent.color
   const insertion = input.settings?.insertion
@@ -70,7 +70,7 @@ function putAccentInRange(adjusted: UmbraAdjusted, accent: Accent | string, inpu
   return range
 }
 
-function accents(input: UmbraInput, adjusted: UmbraAdjusted) {
+function accents(input: UmbraScheme, adjusted: UmbraAdjusted) {
   const { background, foreground } = adjusted
   return adjusted.accents.map((accent) => {
     const isString = typeof accent === 'string'
@@ -97,7 +97,7 @@ function rangeValues(adjusted: UmbraAdjusted, scheme?: RangeValues) {
   return adjusted.background.isDark() ? scheme?.shades : scheme?.tints
 }
 
-function base(input: UmbraInput, adjusted: UmbraAdjusted) {
+function base(input: UmbraScheme, adjusted: UmbraAdjusted) {
   const { background, foreground } = adjusted
   const range = rangeValues(adjusted, input.settings) || []
   return {
@@ -108,6 +108,6 @@ function base(input: UmbraInput, adjusted: UmbraAdjusted) {
   }
 }
 
-export function umbraGenerate(input: UmbraInput, adjusted: UmbraAdjusted) {
+export function umbraGenerate(input: UmbraScheme, adjusted: UmbraAdjusted) {
   return [base(input, adjusted), ...accents(input, adjusted)]
 }

packages/core/engine/index.ts

@@ -1,6 +1,6 @@
 import { colord } from 'colord'
 import { defaultSettings, defaultScheme } from './defaults'
-import type { UmbraInput, UmbraRange, UmbraSettings } from './types'
+import type { UmbraInput, UmbraScheme, UmbraRange, UmbraSettings } from './types'
 
 import { format, Formater, UmbraOutputs, AttachProps } from './primitives/format'
 import { inverse, isDark } from './primitives/scheme'
@@ -33,7 +33,7 @@ interface DefaultSettings extends UmbraSettings {
   formater?: Formater
 }
 
-export function umbra(scheme = defaultScheme, settings?: DefaultSettings): Umbra {
+export function umbra(scheme: UmbraInput = defaultScheme, settings?: DefaultSettings): Umbra {
   const input = insertFallbacks(scheme, settings)
   const adjustment = umbraAdjust(input)
   return umbraHydrate({
@@ -44,7 +44,10 @@ export function umbra(scheme = defaultScheme, settings?: DefaultSettings): Umbra
   })
 }
 
-function insertFallbacks(scheme = defaultScheme, passedDefault?: DefaultSettings): UmbraInput {
+function insertFallbacks(
+  scheme: UmbraInput = defaultScheme,
+  passedDefault?: DefaultSettings
+): UmbraScheme {
   const settingsFallback = {
     settings: {
       ...defaultSettings,
@@ -65,6 +68,7 @@ function insertFallbacks(scheme = defaultScheme, passedDefault?: DefaultSettings
   }
 
   return {
+    ...defaultScheme,
     ...scheme,
     settings: settingsFallback.settings,
     inversed: inversed
@@ -104,9 +108,9 @@ export function umbraHydrate({
   inversed,
   settings
 }: {
-  input: UmbraInput
+  input: UmbraScheme
   output: UmbraRange[]
-  inversed?: UmbraInput
+  inversed?: UmbraScheme
   settings?: DefaultSettings
 }) {
   function getFormat(passedFormater?: Formater) {

packages/core/engine/primitives/scheme.ts

@@ -1,8 +1,8 @@
 import { colord, Colord } from 'colord'
-import type { UmbraInput, UmbraAdjusted } from '../types'
+import type { UmbraScheme, UmbraAdjusted } from '../types'
 import { increaseContrastUntil, getReadability, getReadable, mostReadable } from './color'
 
-function inverseValidator(theme: UmbraInput) {
+function inverseValidator(theme: UmbraScheme) {
   const fgDark = colord(theme.foreground).isDark()
   const bgDark = colord(theme.background).isDark()
 
@@ -48,7 +48,7 @@ function inverseValidator(theme: UmbraInput) {
   }
 }
 
-export const inverse = (theme: UmbraInput, inversed?: UmbraInput) => {
+export const inverse = (theme: UmbraScheme, inversed?: UmbraScheme) => {
   if (inversed)
     return {
       ...inversed,
@@ -61,7 +61,7 @@ export const inverse = (theme: UmbraInput, inversed?: UmbraInput) => {
   }
 }
 
-export const isDark = (theme: UmbraInput) => {
+export const isDark = (theme: UmbraScheme) => {
   return colord(theme.background).isDark()
 }
 

packages/core/engine/primitives/utils.ts

@@ -1,5 +1,5 @@
 import { colord, Colord } from 'colord'
-import { UmbraInput, UmbraSettings } from '../types'
+import { UmbraScheme, UmbraSettings } from '../types'
 import { getReadability } from './color'
 import { defaultSettings } from '../defaults'
 
@@ -17,7 +17,7 @@ function randomHex() {
   return `#${Math.floor(Math.random() * 16777215).toString(16)}`
 }
 
-export function randomScheme(randomSettings: RandomSettings = { amount: 1 }): UmbraInput {
+export function randomScheme(randomSettings: RandomSettings = { amount: 1 }): UmbraScheme {
   return {
     background: randomHex(),
     foreground: randomHex(),

packages/core/engine/types/index.ts

@@ -28,10 +28,18 @@ export interface Accent {
 }
 
 export interface UmbraInput {
+  background?: string
+  foreground?: string
+  accents?: (Accent | string)[]
+  settings?: UmbraSettings
+  inversed?: UmbraInput
+}
+
+export interface UmbraScheme {
   background: string
   foreground: string
   accents: (Accent | string)[]
-  settings?: UmbraSettings
+  settings: UmbraSettings
   inversed?: UmbraInput
 }
 

packages/dye/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

packages/dye/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/dye/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

packages/dye/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/dye/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@umbrajs/dye",
+  "private": false,
+  "version": "0.0.6996",
+  "description": "Color picker in a Vue component",
+  "author": "Samuel M. Bednarz<https://github.com/CarelessCourage>",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "color",
+    "picker"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MyriadJS/dye"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/dye.umd.cjs",
+  "module": "./dist/dye.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dye.js",
+      "require": "./dist/dye.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "types": "vue-tsc ",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@umbrajs/core": "link:../core",
+    "@vueuse/components": "^10.1.2",
+    "@vueuse/core": "^10.1.2",
+    "nearest-color": "^0.4.4",
+    "tinycolor2": "^1.6.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.2.1",
+    "@types/tinycolor2": "^1.4.3",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.56.2",
+    "typescript": "^4.9.3",
+    "vite": "^4.3.8",
+    "vite-plugin-dts": "^2.3.0",
+    "vue-tsc": "^1.0.11"
+  }
+}

packages/dye/src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import DyePicker from './components/DyePicker.vue'
+</script>
+
+<template>
+  <div class="pickers">
+    <DyePicker default="#36576a"/>
+    <DyePicker default="#214761"/>
+    <DyePicker default="#682d63"/>
+  </div>
+</template>
+
+<style lang="scss">
+.pickers {
+  display: flex;
+  gap: 15px;
+  padding: 15px;
+}
+</style>