adds hydration functions

packages/core/engine/generator.ts

@@ -1,5 +1,5 @@
 import { colord, Colord } from 'colord'
-import { UmbraAdjusted } from './types'
+import { UmbraAdjusted, UmbraInput } from './types'
 import { pickContrast, colorMix } from './primitives/color'
 import { normalizeRange, nextAccent, getStrings } from './primitives/utils'
 
@@ -29,18 +29,23 @@ function getRange({ from, to, range }: GetRange) {
   })
 }
 
-function accentRange(adjusted: UmbraAdjusted, range: (number | string)[], color?: string) {
+function accentRange(
+  input: UmbraInput,
+  adjusted: UmbraAdjusted,
+  range: (number | string)[],
+  color?: string
+) {
   const { background, foreground } = adjusted
   if (!color) return getRange({ from: background, to: foreground, range })
 
-  const defaultRange = adjusted.input.settings.shades || []
+  const defaultRange = input.settings.shades || []
   const shades = getRange({ from: background, to: foreground, range: defaultRange })
   const normalizedRange = normalizeRange({ range: range, shades, color: colord(color) })
   return getRange({ from: background, to: foreground, range: normalizedRange })
 }
 
-function accents(adjusted: UmbraAdjusted) {
-  const defaultShades = rangeValues(adjusted, adjusted.input.settings)
+function accents(input: UmbraInput, adjusted: UmbraAdjusted) {
+  const defaultShades = rangeValues(adjusted, input.settings)
   return adjusted.accents.map((accent) => {
     const plainColor = typeof accent === 'string' ? accent : accent.color
     const plainRange = typeof accent === 'string' ? defaultShades : rangeValues(adjusted, accent)
@@ -54,7 +59,7 @@ function accents(adjusted: UmbraAdjusted) {
       name: name ? name : `accent`,
       background: fallback,
       foreground: pickContrast(fallback, adjusted),
-      shades: accentRange(adjusted, range, plainColor)
+      shades: accentRange(input, adjusted, range, plainColor)
     }
   })
 }
@@ -71,9 +76,9 @@ function rangeValues(adjusted: UmbraAdjusted, scheme?: RangeValues) {
   return background.isDark() ? shades : tints
 }
 
-function base(adjusted: UmbraAdjusted) {
+function base(input: UmbraInput, adjusted: UmbraAdjusted) {
   const { background, foreground } = adjusted
-  const range = rangeValues(adjusted, adjusted.input.settings)
+  const range = rangeValues(adjusted, input.settings)
   return {
     name: 'base',
     background,
@@ -82,11 +87,10 @@ function base(adjusted: UmbraAdjusted) {
   }
 }
 
-export function umbraGenerate(adjusted: UmbraAdjusted) {
-  const input = adjusted.input
+export function umbraGenerate(input: UmbraInput, adjusted: UmbraAdjusted) {
   return {
     input,
     adjusted,
-    generated: [base(adjusted), ...accents(adjusted)]
+    generated: [base(input, adjusted), ...accents(input, adjusted)]
   }
 }

packages/core/engine/hydration.ts

@@ -0,0 +1,43 @@
+import { colord } from 'colord'
+import type { UmbraInput, Accent } from './types'
+
+interface HydrateProps {
+  input: UmbraInput
+  adjusted: {
+    background: string
+    foreground: string
+    accents: (Accent | string)[]
+  }
+  generated: {
+    name: string
+    background: string
+    foreground: string
+    shades: string[]
+  }[]
+}
+
+export function dehydrateOutput(output: any) {
+  return JSON.stringify(output)
+}
+
+function rehydrateColord(color: string) {
+  const parsed = JSON.parse(color)
+  return colord(`rgb(${parsed.r}, ${parsed.g}, ${parsed.b})`)
+}
+
+export function hydrateOutput({ input, adjusted, generated }: HydrateProps) {
+  return {
+    input,
+    adjusted: {
+      background: rehydrateColord(adjusted.background),
+      foreground: rehydrateColord(adjusted.foreground),
+      accents: adjusted.accents
+    },
+    generated: generated.map((gen) => ({
+      name: gen.name,
+      background: rehydrateColord(gen.background),
+      foreground: rehydrateColord(gen.foreground),
+      shades: gen.shades.map(rehydrateColord)
+    }))
+  }
+}

packages/core/engine/index.ts

@@ -29,11 +29,11 @@ export function umbraHydrate(output: UmbraOutput) {
   }
 
   return {
-    output,
     apply,
     isDark: () => isDark(input),
     format: (formater?: Formater) => format({ output, formater }),
-    inverse: () => umbra(inverse(input).scheme, input.settings)
+    inverse: () => umbra(inverse(input).scheme, input.settings),
+    output
   }
 }
 
@@ -46,21 +46,19 @@ export function umbra(scheme = defaultScheme, passedSettings = settings) {
     }
   }
 
-  const readability = input.settings.readability || 4
-  const accents = scheme.accents || []
+  const accents = scheme.accents
   const background = colord(scheme.background)
   const foreground = getReadable({
+    readability: input.settings.readability || 4,
     foreground: colord(scheme.foreground),
+    background
+  })
+
+  const generated = umbraGenerate(input, {
     background,
-    readability
+    foreground,
+    accents
   })
 
-  return umbraHydrate(
-    umbraGenerate({
-      input,
-      background,
-      foreground,
-      accents
-    })
-  )
+  return umbraHydrate(generated)
 }

packages/core/engine/types/index.ts

@@ -20,7 +20,7 @@ export interface UmbraOutput {
   generated: RawRange[]
 }
 
-interface Accent {
+export interface Accent {
   name?: string
   color?: string
   shades?: (number | string)[]
@@ -46,6 +46,12 @@ export interface UmbraAdjusted {
   background: Colord
   foreground: Colord
   accents: (Accent | string)[]
+}
+
+export interface DehydratedAdjusted {
+  background: string
+  foreground: string
+  accents: (Accent | string)[]
   input: UmbraInput
 }
 

packages/core/index.ts

@@ -21,6 +21,7 @@ import type {
   FormatedRange
 } from './engine/types'
 import { inverse, isDark, findContrast } from './engine/primitives/scheme'
+import { dehydrateOutput, hydrateOutput } from './engine/hydration'
 
 export {
   umbra,
@@ -36,7 +37,9 @@ export {
   format,
   hexFormat,
   rgbStrippedFormat,
-  hslFormat
+  hslFormat,
+  dehydrateOutput,
+  hydrateOutput
 }
 
 export type {

packages/playground/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { colord } from 'colord'
 import { umbra } from '@umbrajs/core'
 import UmbraRange from './components/UmbraRange.vue'
 import LabelsGroups from './components/ToneLabels.vue'
@@ -60,7 +61,22 @@ const t = ref(theme)
 
 const output = t.value.apply({ alias: true })
 
-console.log('rex: ', theme)
+const color = colord('#ff0157')
+const stringifiedColor = JSON.parse(JSON.stringify(color))
+const rehydrated = rehydrate(stringifiedColor.parsed)
+
+function rehydrate(stringed: { r: number; g: number; b: number; a: number }) {
+  const rgba = `rgb(${stringed.r}, ${stringed.g}, ${stringed.b})`
+  return colord(rgba)
+}
+
+const rehydratedColor = colord(rehydrated)
+
+console.log('rex: ', {
+  color,
+  stringifiedColor,
+  rehydrated
+})
 
 function inverse() {
   const inv = t.value.inverse()