new default settings object

packages/core/engine/index.ts

@@ -1,6 +1,6 @@
 import { colord } from 'colord'
 import { defaultSettings, defaultScheme } from './defaults'
-import type { UmbraInput, UmbraRange } from './types'
+import type { UmbraInput, UmbraRange, UmbraSettings } from './types'
 
 import { format, Formater, UmbraOutputs, AttachProps } from './primitives/format'
 import { inverse, isDark } from './primitives/scheme'
@@ -28,24 +28,31 @@ export interface Umbra {
   inverse: () => Umbra
 }
 
-export function umbra(scheme = defaultScheme) {
-  const input = insertFallbacks(scheme)
+interface DefaultSettings extends UmbraSettings {
+  callback?: (props: UmbraOutputs) => void
+}
+
+export function umbra(scheme = defaultScheme, settings?: DefaultSettings): Umbra {
+  const input = insertFallbacks(scheme, settings)
   const adjustment = umbraAdjust(input)
   return umbraHydrate({
     input,
     output: umbraGenerate(input, adjustment),
-    inversed: scheme.inversed ? insertFallbacks(scheme.inversed) : undefined
+    inversed: scheme.inversed ? insertFallbacks(scheme.inversed, settings) : undefined,
+    callback: settings?.callback
   })
 }
 
-function insertFallbacks(scheme = defaultScheme): UmbraInput {
+function insertFallbacks(scheme = defaultScheme, passedDefault?: DefaultSettings): UmbraInput {
   const settingsFallback = {
     settings: {
       ...defaultSettings,
+      ...passedDefault,
       ...scheme.settings
     },
     inversed: {
       ...defaultSettings,
+      ...passedDefault,
       ...scheme.settings,
       ...scheme.inversed?.settings
     }
@@ -91,25 +98,27 @@ function getTarget(target?: string | HTMLElement | null) {
 export function umbraHydrate({
   input,
   output,
-  inversed
+  inversed,
+  callback
 }: {
   input: UmbraInput
   output: UmbraRange[]
   inversed?: UmbraInput
+  callback?: (props: any) => void
 }) {
   return {
     input,
     output,
     isDark: () => isDark(input),
-    format: (formater?: Formater) => format({ output, formater, input }),
+    format: (formater?: Formater) => format({ output, formater, input, callback }),
     inverse: () => umbra(inverse(input, inversed)),
     apply: (props?: ApplyProps) => {
-      const { alias, formater, target } = props || {}
+      const { alias, formater } = props || {}
+      const target = getTarget(props?.target)
       const formated = format({ output, formater, input })
-      return formated.attach({
-        alias,
-        target: getTarget(target)
-      })
+      const outputs = formated.attach({ alias, target })
+      callback && callback(outputs)
+      return outputs
     }
   }
 }

packages/core/engine/primitives/format.ts

@@ -10,6 +10,7 @@ interface FormatProps {
   output: UmbraRange[]
   formater?: Formater
   target?: HTMLElement | null | string
+  callback?: (outputs: UmbraOutputs) => void
 }
 
 export interface UmbraOutputs {
@@ -32,7 +33,8 @@ export interface AttachProps {
 export const format = ({
   input,
   output = umbra().output,
-  formater = defaultFormater
+  formater = defaultFormater,
+  callback
 }: FormatProps) => {
   let existingAccents = 0
   function getName(name: string) {
@@ -68,6 +70,7 @@ export const format = ({
     ...outputs,
     attach: ({ target, alias }: AttachProps) => {
       if (!document) return outputs
+      callback && callback(outputs)
       return attach({
         outputs,
         alias,

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbrajs/core",
-  "version": "0.0.445",
+  "version": "0.0.447",
   "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,19 @@ const accent3 = {
   color: '#e5484d'
 }
 
-const theme = umbra({
-  background: '#000000',
-  foreground: '#ffffff',
-  accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown]
-}).apply({ alias: true })
+const theme = umbra(
+  {
+    background: '#ffffff',
+    foreground: '#ffffff',
+    accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown],
+    settings: {
+      readability: 2
+    }
+  }
+  // {
+  //   readability: 90
+  // }
+).apply({ alias: true })
 
 // const theme = umbra({
 //   foreground: '#ffffff',
@@ -70,7 +78,7 @@ const t = ref(theme.input)
 const formated = ref(theme.formated)
 
 function inverse() {
-  const newTheme = umbra(t.value).inverse().apply()
+  const newTheme = umbra(t.value).inverse().apply({})
   t.value = newTheme.input
 }