Skip to content

Commit

Permalink
insertion algo and reorganize accent
Browse files Browse the repository at this point in the history
CarelessCourage committed Jan 7, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 1d03979 commit e0bf82f
Showing 5 changed files with 61 additions and 43 deletions.
1 change: 1 addition & 0 deletions packages/core/engine/defaults.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import { UmbraScheme, UmbraSettings } from './types'
export const defaultSettings: UmbraSettings = {
readability: 10,
iterations: 15,
insertion: 10,
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]
}
85 changes: 51 additions & 34 deletions packages/core/engine/generator.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { colord, Colord } from 'colord'
import { UmbraAdjusted, UmbraInput } from './types'
import { UmbraAdjusted, UmbraInput, Accent } from './types'
import { pickContrast, colorMix } from './primitives/color'
import { normalizeRange, nextAccent, getStrings } from './primitives/utils'
import { defaultSettings } from './defaults'
import { insertColorIntoRange, nextAccent, getStrings } from './primitives/utils'

interface GetRange {
from: Colord
@@ -30,40 +29,61 @@ function getRange({ from, to, range }: GetRange) {
})
}

function accentRange(
input: UmbraInput,
adjusted: UmbraAdjusted,
passedRange: (number | string)[],
interface RangeProps {
input: UmbraInput
adjusted: UmbraAdjusted
range: (number | string)[]
color?: string
) {
const { background, foreground } = adjusted
const settingsRange = background.isDark() ? defaultSettings.shades : defaultSettings.tints
const range = passedRange.length > 0 ? passedRange : settingsRange || []
}

function autoPlacedRange({ input, adjusted, range, color }: RangeProps) {
if (!color) return range
const baseRange = getRange({
from: adjusted.background,
to: adjusted.foreground,
range: rangeValues(adjusted, input.settings) || []
})
return insertColorIntoRange({ range, shades: baseRange, color: colord(color) })
}

function accentColor(fallback: Colord, accent?: string, range?: (number | string)[]) {
const plainColor2 = accent ? accent : range ? getStrings(range)[0] : undefined
return plainColor2 ? colord(plainColor2) : fallback
}

function replaceAtIndex(array: (number | string)[], index: number, value: string) {
const newArray = array.slice()
newArray[index] = value
return newArray
}

function putAccentInRange(adjusted: UmbraAdjusted, accent: Accent | string, input: UmbraInput) {
const isString = typeof accent === 'string'
const color = isString ? accent : accent.color
const insertion = input.settings.insertion

if (!color) return getRange({ from: background, to: foreground, range })
const fallback = rangeValues(adjusted, input.settings) || []
const range = isString ? fallback : rangeValues(adjusted, accent) || fallback

const defaultRange = input.settings.shades || []
const shades = getRange({ from: background, to: foreground, range: defaultRange })
const normalizedRange = normalizeRange({ range: range, shades, color: colord(color) })
return getRange({ from: background, to: foreground, range: normalizedRange })
if (insertion && color) return replaceAtIndex(range, insertion, color)
if (!insertion && color) return autoPlacedRange({ input, adjusted, range, color })
return range
}

function accents(input: UmbraInput, adjusted: UmbraAdjusted) {
const defaultShades = rangeValues(adjusted, input.settings)
const { background, foreground } = adjusted
return adjusted.accents.map((accent) => {
const plainColor = typeof accent === 'string' ? accent : accent.color
const plainRange = typeof accent === 'string' ? defaultShades : rangeValues(adjusted, accent)
const color = plainColor ? plainColor : plainRange ? getStrings(plainRange)[0] : undefined
const range = plainRange ? plainRange : defaultShades
const name = typeof accent === 'string' ? undefined : accent.name

const c = color ? colord(color) : undefined
const fallback = c ? c : adjusted.foreground
const isString = typeof accent === 'string'

const name = isString ? undefined : accent.name
const color = isString ? accent : accent.color
const range = putAccentInRange(adjusted, accent, input)

return {
name: name ? name : `accent`,
background: fallback,
foreground: pickContrast(fallback, adjusted),
range: accentRange(input, adjusted, range, plainColor)
name: name || `accent`,
background: accentColor(adjusted.foreground, color, range),
foreground: pickContrast(background, adjusted),
range: getRange({ from: background, to: foreground, range })
}
})
}
@@ -74,15 +94,12 @@ interface RangeValues {
}

function rangeValues(adjusted: UmbraAdjusted, scheme?: RangeValues) {
const { background } = adjusted
const shades = scheme?.shades || []
const tints = scheme?.tints || shades
return background.isDark() ? shades : tints
return adjusted.background.isDark() ? scheme?.shades : scheme?.tints
}

function base(input: UmbraInput, adjusted: UmbraAdjusted) {
const { background, foreground } = adjusted
const range = rangeValues(adjusted, input.settings)
const range = rangeValues(adjusted, input.settings) || []
return {
name: 'base',
background,
2 changes: 1 addition & 1 deletion packages/core/engine/primitives/utils.ts
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ function getReadable(shade: Colord, color: Colord, index: number) {
return { readability, index }
}

export function normalizeRange({ range, shades, color }: NewRange) {
export function insertColorIntoRange({ range, shades, color }: NewRange) {
const leastReadable = shades
.map((shade, index) => getReadable(shade, color, index))
.reduce((a, b) => (a.readability < b.readability ? a : b))
1 change: 1 addition & 0 deletions packages/core/engine/types/index.ts
Original file line number Diff line number Diff line change
@@ -55,6 +55,7 @@ export interface DehydratedAdjusted {
export interface UmbraSettings {
readability?: number
iterations?: number
insertion?: number
aliases?: Alias | true
shades?: (number | string)[]
tints?: (number | string)[]
15 changes: 7 additions & 8 deletions packages/playground/src/App.vue
Original file line number Diff line number Diff line change
@@ -28,30 +28,29 @@ const radixYellow = {
const success = {
name: 'success',
shades: [25, 25, 25, 25, 25, '#4caf50', 25, 25, 25, 25, 25, 25]
color: '#4caf50'
}
const royal = {
name: 'royal',
shades: [25, 25, 25, 25, 25, '#a94d94', 35, 25, 25, 25, 25, 25]
color: '#4d4da9'
}
const brown = {
name: 'brown',
shades: [25, 25, 25, 25, 25, '#87533e', 25, 25, 25, 25, 25, 25]
color: '#87533e'
}
const something = {
shades: [10, 15, 25, 35, 35, '#4f0820', 15, 15, 15, 15, 15, 25]
shades: [5, 5, 5, 5, 15, 10, 10, 25, '#e5484d', 25, 25, 25]
}
const accent = {
shades: [10, 10, 25, 25, 25, 25, 25, 25, '#ff0157', 10, 25, 25]
color: '#ff0157'
}
const accent2 = {
color: '#ff0157',
shades: [10, 10, 25, 25, 25, 25, 25, 25, 25, 10, 25, 25]
color: '#ff0157'
}
const accent3 = {
@@ -62,6 +61,7 @@ const theme = umbra({
background: '#000000',
foreground: '#ffffff',
accents: [
royal,
radixRed,
radixYellow,
radixBlue,
@@ -70,7 +70,6 @@ const theme = umbra({
accent3,
radixRed,
success,
royal,
brown,
something
]

0 comments on commit e0bf82f

Please sign in to comment.