From b2ba2b70d097dcae40396836e8e459a0e5dc6c42 Mon Sep 17 00:00:00 2001 From: "Samuel M. Bednarz" Date: Tue, 9 Jan 2024 17:03:54 +0100 Subject: [PATCH] new default settings object --- packages/core/engine/index.ts | 33 ++++++++++++++--------- packages/core/engine/primitives/format.ts | 5 +++- packages/core/package.json | 2 +- packages/playground/src/App.vue | 20 +++++++++----- 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/packages/core/engine/index.ts b/packages/core/engine/index.ts index c409227..2534a4b 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 { 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 } } } diff --git a/packages/core/engine/primitives/format.ts b/packages/core/engine/primitives/format.ts index f57954d..d5a3fcc 100644 --- a/packages/core/engine/primitives/format.ts +++ b/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, diff --git a/packages/core/package.json b/packages/core/package.json index b6d2de3..93028ea 100644 --- a/packages/core/package.json +++ b/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", "repository": { diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index 9c202d5..dd61dad 100644 --- a/packages/playground/src/App.vue +++ b/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 }