settings

packages/core/engine/index.ts

@@ -22,7 +22,7 @@ interface Format extends UmbraOutputs {
 export interface Umbra {
   output: UmbraRange[]
   input: UmbraInput
-  apply: (props: ApplyProps) => UmbraOutputs
+  apply: (props?: ApplyProps) => UmbraOutputs
   format: (formater?: Formater) => Format
   isDark: () => boolean
   inverse: () => Umbra
@@ -38,10 +38,9 @@ export function umbra(scheme = defaultScheme, settings?: DefaultSettings): Umbra
   const adjustment = umbraAdjust(input)
   return umbraHydrate({
     input,
+    settings,
     output: umbraGenerate(input, adjustment),
-    inversed: scheme.inversed ? insertFallbacks(scheme.inversed, settings) : undefined,
-    callback: settings?.callback,
-    defaultFormater: settings?.formater
+    inversed: scheme.inversed ? insertFallbacks(scheme.inversed, settings) : undefined
   })
 }
 
@@ -103,32 +102,30 @@ export function umbraHydrate({
   input,
   output,
   inversed,
-  callback,
-  defaultFormater
+  settings
 }: {
   input: UmbraInput
   output: UmbraRange[]
   inversed?: UmbraInput
-  callback?: (props: UmbraOutputs) => void
-  defaultFormater?: Formater
+  settings?: DefaultSettings
 }) {
   function getFormat(passedFormater?: Formater) {
-    const formater = passedFormater || defaultFormater
-    return format({ output, formater, input, callback })
+    const formater = passedFormater || settings?.formater
+    return format({ output, formater, input, callback: settings?.callback })
   }
 
   return {
     input,
     output,
     isDark: () => isDark(input),
     format: (formater?: Formater) => getFormat(formater),
-    inverse: () => umbra(inverse(input, inversed)) as Umbra,
+    inverse: () => umbra(inverse(input, inversed), settings) as Umbra,
     apply: (props?: ApplyProps) => {
       const { alias, formater } = props || {}
       const target = getTarget(props?.target)
       const formated = getFormat(formater)
       const outputs = formated.attach({ alias, target })
-      callback && callback(outputs)
+      settings?.callback && settings.callback(outputs)
       return outputs
     }
   }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbrajs/core",
-  "version": "0.0.45",
+  "version": "0.0.453",
   "description": "Umbra is a theme managment library that allows you to create semantic color themes that are easy to dynamically customize, change retroactively and scale progressively",
   "author": "Samuel M. Bednarz<https://github.com/CarelessCourage>",
   "repository": {

packages/playground/src/App.vue

@@ -49,11 +49,20 @@ const accent3 = {
   color: '#e5484d'
 }
 
-const theme = umbra({
-  background: '#000000',
-  foreground: '#ffffff',
-  accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown]
-}).apply({})
+const theme = umbra(
+  {
+    background: '#000000',
+    foreground: '#ffffff',
+    accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown]
+  },
+  {
+    formater: (color) => {
+      return color.toHslString()
+    }
+  }
+)
+  .inverse()
+  .apply({})
 
 // const theme = umbra({
 //   foreground: '#ffffff',