mirror of https://github.com/mashirozx/sakura.git
40 lines
959 B
TypeScript
40 lines
959 B
TypeScript
import { cloneDeep } from 'lodash'
|
|
import chroma from 'chroma-js'
|
|
|
|
export interface Scheme {
|
|
// base
|
|
primary: string
|
|
secondary: string
|
|
background: string
|
|
surface: string
|
|
error: string
|
|
// text color of a * background
|
|
'on-primary': string
|
|
'on-secondary': string
|
|
'on-background': string
|
|
'on-surface': string
|
|
'on-error': string
|
|
// modifier
|
|
'primary-lighter-25'?: string
|
|
'primary-darker-10'?: string
|
|
}
|
|
|
|
/**
|
|
* @param scheme
|
|
* @returns CSS variables object using directly in :style
|
|
*/
|
|
export default function (scheme: Scheme) {
|
|
const modifier = {
|
|
'primary-lighter-25': chroma(scheme.primary).brighten(2.5).hex(),
|
|
'primary-darker-10': chroma(scheme.primary).darken(1).hex(),
|
|
}
|
|
const _scheme = cloneDeep(Object.assign(scheme, modifier))
|
|
|
|
const colors: { [key: string]: string } = {}
|
|
Object.keys(scheme).forEach(
|
|
(key) => (colors[`--mdc-theme-${key}`] = _scheme[key as keyof typeof scheme])
|
|
)
|
|
|
|
return colors
|
|
}
|