@dossierhq/design
Version:
The design system for Dossier.
55 lines • 1.38 kB
JavaScript
export const StatusColor = {
draft: 'draft',
published: 'published',
modified: 'modified',
withdrawn: 'withdrawn',
archived: 'archived',
};
const BulmaColor = {
black: 'black',
danger: 'danger',
dark: 'dark',
info: 'info',
light: 'light',
link: 'link',
primary: 'primary',
success: 'success',
warning: 'warning',
white: 'white',
};
export const Color = {
...StatusColor,
...BulmaColor,
};
const statusColorMap = {
draft: 'light',
published: 'success',
modified: 'warning',
withdrawn: 'light',
archived: 'danger',
};
function resolveBulmaColor(color) {
if (!color)
return undefined;
const statusColorValue = statusColorMap[color];
return statusColorValue ?? color;
}
export function toColorClassName(color) {
const colorName = resolveBulmaColor(color);
if (!colorName)
return undefined;
return `is-${colorName}`;
}
export function toTextColorClassName(color) {
const colorName = resolveBulmaColor(color);
if (!colorName)
return undefined;
return `has-text-${colorName}`;
}
export function toBackgroundColorClassName(color, variant) {
const colorName = resolveBulmaColor(color);
if (!colorName)
return undefined;
return `has-background-${colorName}${variant ? `-${variant}` : ''}`;
}
//# sourceMappingURL=Colors.js.map