Skip to content

Commit

Permalink
fix inversion
Browse files Browse the repository at this point in the history
  • Loading branch information
CarelessCourage committed Jan 8, 2024
1 parent 7d2eff0 commit c41d45f
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 20 deletions.
3 changes: 2 additions & 1 deletion packages/core/engine/defaults.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ export const defaultScheme: UmbraInput = {
background: '#090233',
foreground: '#ff5555',
accents: ['#5200ff'],
settings: defaultSettings
settings: defaultSettings,
inversed: undefined
}
37 changes: 26 additions & 11 deletions packages/core/engine/index.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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
})
Expand Down Expand Up @@ -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({
Expand Down
9 changes: 7 additions & 2 deletions packages/core/engine/primitives/scheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/core/engine/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface UmbraInput {
foreground: string
accents: (Accent | string)[]
settings?: UmbraSettings
inversed?: UmbraInput
}

export interface UmbraAdjusted {
Expand Down
18 changes: 12 additions & 6 deletions packages/playground/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand All @@ -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
}
Expand Down

0 comments on commit c41d45f

Please sign in to comment.