fix inversion

packages/core/engine/defaults.ts

@@ -12,5 +12,6 @@ export const defaultScheme: UmbraInput = {
   background: '#090233',
   foreground: '#ff5555',
   accents: ['#5200ff'],
-  settings: defaultSettings
+  settings: defaultSettings,
+  inversed: undefined
 }

packages/core/engine/index.ts

@@ -1,6 +1,6 @@
 import { colord } from 'colord'
 import { defaultSettings, defaultScheme } from './defaults'
-import type { UmbraSettings, UmbraInput, UmbraRange } from './types'
+import type { UmbraInput, UmbraRange } from './types'
 
 import { format, Formater, UmbraOutputs, AttachProps } from './primitives/format'
 import { inverse, isDark } from './primitives/scheme'
@@ -28,30 +28,45 @@ export interface Umbra {
   inverse: () => Umbra
 }
 
-export function umbra(scheme = defaultScheme, inversedScheme?: UmbraInput) {
-  const input = umbraInput(scheme)
-  const adjustment = umbraAdjust(input.settings, scheme)
+export function umbra(scheme = defaultScheme) {
+  const input = insertFallbacks(scheme)
+  const adjustment = umbraAdjust(input)
   return umbraHydrate({
     input,
     output: umbraGenerate(input, adjustment),
-    inversed: umbraInput(inversedScheme)
+    inversed: scheme.inversed ? insertFallbacks(scheme.inversed) : undefined
   })
 }
 
-function umbraInput(scheme = defaultScheme) {
-  return {
-    ...scheme,
+function insertFallbacks(scheme = defaultScheme): UmbraInput {
+  const settingsFallback = {
     settings: {
       ...defaultSettings,
       ...scheme.settings
+    },
+    inversed: {
+      ...defaultSettings,
+      ...scheme.settings,
+      ...scheme.inversed?.settings
     }
   }
+
+  const inversed = scheme.inversed && {
+    ...scheme.inversed,
+    settings: settingsFallback.inversed
+  }
+
+  return {
+    ...scheme,
+    settings: settingsFallback.settings,
+    inversed: inversed
+  }
 }
 
-function umbraAdjust(settings: UmbraSettings, scheme = defaultScheme) {
+function umbraAdjust(scheme = defaultScheme) {
   const background = colord(scheme.background)
   const foreground = getReadable({
-    readability: settings.readability || 4,
+    readability: scheme.settings?.readability || 4,
     foreground: colord(scheme.foreground),
     background
   })
@@ -87,7 +102,7 @@ export function umbraHydrate({
     output,
     isDark: () => isDark(input),
     format: (formater?: Formater) => format({ output, formater, input }),
-    inverse: () => umbra(inverse(input, inversed), input),
+    inverse: () => umbra(inverse(input, inversed)),
     apply: ({ alias, formater, target }: ApplyProps) => {
       const formated = format({ output, formater, input })
       return formated.attach({

packages/core/engine/primitives/scheme.ts

@@ -49,10 +49,15 @@ function inverseValidator(theme: UmbraInput) {
 }
 
 export const inverse = (theme: UmbraInput, inversed?: UmbraInput) => {
-  if (inversed) return inversed
+  if (inversed)
+    return {
+      ...inversed,
+      inversed: theme
+    }
   return {
     ...theme,
-    ...inverseValidator(theme)
+    ...inverseValidator(theme),
+    inversed: theme
   }
 }
 

packages/core/engine/types/index.ts

@@ -32,6 +32,7 @@ export interface UmbraInput {
   foreground: string
   accents: (Accent | string)[]
   settings?: UmbraSettings
+  inversed?: UmbraInput
 }
 
 export interface UmbraAdjusted {

packages/playground/src/App.vue

@@ -49,16 +49,21 @@ const accent3 = {
   color: '#e5484d'
 }
 
-const theme2 = umbra({
-  background: '#000000',
-  foreground: '#ffffff',
-  accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown]
-})
+// const theme2 = umbra({
+//   background: '#000000',
+//   foreground: '#ffffff',
+//   accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown]
+// })
 
 const theme = umbra({
   foreground: '#ffffff',
   background: '#000000',
-  accents: ['#ff88ff']
+  accents: ['#ff88ff'],
+  inversed: {
+    foreground: '#002200',
+    background: '#ffffff',
+    accents: ['#872455']
+  }
 }).apply({
   alias: true
 })
@@ -68,6 +73,7 @@ const formated = ref(theme.formated)
 
 function inverse() {
   const newTheme = umbra(t.value).inverse().apply({ target: 'body' })
+  console.log(t.value.accents[0], newTheme.input)
   t.value = newTheme.input
 }