diff --git a/packages/core/engine/defaults.ts b/packages/core/engine/defaults.ts index 0f18d84..9dfaf3f 100644 --- a/packages/core/engine/defaults.ts +++ b/packages/core/engine/defaults.ts @@ -1,8 +1,9 @@ import { UmbraInput, UmbraSettings } from './types' export const defaultSettings: UmbraSettings = { - readability: 10, + power: 0.15, iterations: 15, + readability: 70, insertion: 9, shades: [5, 5, 5, 5, 15, 10, 10, 25, 30, 25, 25, 25], tints: [5, 10, 10, 10, 15, 15, 25, 15, 15, 15, 15, 25] diff --git a/packages/core/engine/index.ts b/packages/core/engine/index.ts index 2534a4b..6af708c 100644 --- a/packages/core/engine/index.ts +++ b/packages/core/engine/index.ts @@ -74,6 +74,8 @@ function umbraAdjust(scheme = defaultScheme) { const background = colord(scheme.background) const foreground = getReadable({ readability: scheme.settings?.readability || 4, + iterations: scheme.settings?.iterations || 15, + power: scheme.settings?.power || 15, foreground: colord(scheme.foreground), background }) diff --git a/packages/core/engine/primitives/color.ts b/packages/core/engine/primitives/color.ts index c745f3c..c7a2036 100644 --- a/packages/core/engine/primitives/color.ts +++ b/packages/core/engine/primitives/color.ts @@ -11,12 +11,14 @@ type ColorRawRange = { background: string | Colord readability?: number iterations?: number + power?: number } interface IncreaseContrastUntil { color: Colord contrast?: Colord iterations?: number + power?: number condition: (newColor: Colord, iterations?: number) => boolean } @@ -28,7 +30,8 @@ interface MoveAwayFrom { const stored = { readability: defaultSettings.readability || 11, - iterations: defaultSettings.iterations || 15 + iterations: defaultSettings.iterations || 15, + power: defaultSettings.power || 15 } function apcaContrast(fg: string | Colord, bg: string | Colord) { @@ -41,15 +44,22 @@ export const getReadability = (fg: string | Colord, bg: string | Colord) => { return apcaContrast(fg, bg) } -export const getReadable = ({ foreground, background, readability, iterations }: ColorRawRange) => { +export const getReadable = ({ + foreground, + background, + readability, + iterations, + power +}: ColorRawRange) => { const color = colord(foreground) const contrast = colord(background) return increaseContrastUntil({ color, contrast, iterations: iterations || stored.iterations, + power: power || stored.power, condition: (c) => { - const current = Math.abs(getReadability(c, background)) + const current = Math.abs(getReadability(c, contrast)) return current > (readability || stored.readability) } }) @@ -59,14 +69,15 @@ export function increaseContrastUntil({ color, contrast, condition, - iterations = 15 + iterations = 15, + power = 15 }: IncreaseContrastUntil) { let newColor = color let count = 0 while (!condition(newColor, count) && count < iterations) { count += 1 newColor = increaseContrast({ - val: iterations, + val: power, color: newColor, contrast }) diff --git a/packages/core/engine/types/index.ts b/packages/core/engine/types/index.ts index 7dffc39..fc66b71 100644 --- a/packages/core/engine/types/index.ts +++ b/packages/core/engine/types/index.ts @@ -42,8 +42,9 @@ export interface UmbraAdjusted { } export interface UmbraSettings { - readability?: number + power?: number iterations?: number + readability?: number insertion?: number aliases?: Alias | true shades?: (number | string)[] diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index dd61dad..e404934 100644 --- a/packages/playground/src/App.vue +++ b/packages/playground/src/App.vue @@ -49,19 +49,11 @@ const accent3 = { color: '#e5484d' } -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({ + background: '#000000', + foreground: '#ffffff', + accents: [royal, accent, radixRed, radixYellow, radixBlue, accent3, radixRed, success, brown] +}).apply({}) // const theme = umbra({ // foreground: '#ffffff',