67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
/* @flow */
|
||
import status from './status.json'
|
||
|
||
// These need to match the names in the Open Color palettes
|
||
const THEME_NAME = 'Status UI'
|
||
const THEME_DARK_NAME = 'Status UI Dark'
|
||
const BRAND_NAME = 'Status Brand'
|
||
|
||
// Name of the group a given palette belong to
|
||
const getGroupName = (name) => {
|
||
if (name === THEME_NAME) return 'theme'
|
||
if (name === THEME_DARK_NAME) return 'themeDark'
|
||
if (name === BRAND_NAME) return 'brand'
|
||
return 'colors'
|
||
}
|
||
|
||
// Resolve a single color
|
||
const resolveColor = (value, palettes) => {
|
||
// already resolved color
|
||
if (!value.startsWith('=')) {
|
||
return value
|
||
}
|
||
|
||
const [paletteName, key] = value.slice(1).split('.')
|
||
const color = palettes[paletteName] && palettes[paletteName][key]
|
||
|
||
if (!color) {
|
||
throw new Error(`resolveColor: ${value} doesn’t seem to exist`)
|
||
}
|
||
|
||
// follow the references until we find one
|
||
if (color.startsWith('=')) {
|
||
return resolveColor(color, palettes)
|
||
}
|
||
return color
|
||
}
|
||
|
||
// Resolve all the colors in a palette
|
||
const resolveColors = (palette, palettes) =>
|
||
Object.entries(palette).reduce((pal, [name, value]) => {
|
||
if (typeof value === 'string') {
|
||
pal[name] = resolveColor(value, palettes)
|
||
}
|
||
return pal
|
||
}, {})
|
||
|
||
// Prepare groups from the palettes: theme, themeDark, brand and colors.
|
||
const groups = (palettes) =>
|
||
Object.entries(palettes).reduce(
|
||
(groups, [paletteName, palette]) => {
|
||
const groupName = getGroupName(paletteName)
|
||
|
||
if (groupName === 'colors') {
|
||
groups.colors[paletteName] = resolveColors(palette, palettes)
|
||
} else {
|
||
groups[groupName] = resolveColors(palette, palettes)
|
||
}
|
||
|
||
return groups
|
||
},
|
||
{ colors: {} }
|
||
)
|
||
|
||
const { themeDark, theme, brand, colors } = groups(status)
|
||
|
||
export { themeDark, theme, brand, colors }
|