diff --git a/packages/core/engine/defaults.ts b/packages/core/engine/defaults.ts index 3d7caf3..0f18d84 100644 --- a/packages/core/engine/defaults.ts +++ b/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 } diff --git a/packages/core/engine/index.ts b/packages/core/engine/index.ts index 578cec0..9814590 100644 --- a/packages/core/engine/index.ts +++ b/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({ diff --git a/packages/core/engine/primitives/scheme.ts b/packages/core/engine/primitives/scheme.ts index 370a0bd..788994d 100644 --- a/packages/core/engine/primitives/scheme.ts +++ b/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 } } diff --git a/packages/core/engine/types/index.ts b/packages/core/engine/types/index.ts index 9e50465..54a48c5 100644 --- a/packages/core/engine/types/index.ts +++ b/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 { diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index 847bd1f..632a29a 100644 --- a/packages/playground/src/App.vue +++ b/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 }