EthanThatOneKid
Global.css: Generate global.css from style-guide.json
What's your idea?
Goal
Create a custom JSON object to define our acmcsuf.com style guide. The primary purpose of the style guide JSON is to generate our /static/global.css.
This style guide JSON file could be multi-purposed.
Background
Our current global.css feels unmaintainable for its lack of consistency and structure. It makes sense to audit/refactor our global.css styles as part of resolving this issue.
Implementation
Our style guide JSON may look something like the following TypeScript type.
export interface StyleGuide {
palette: {
light: string;
dark: string;
gray: string;
blue: string;
bluer: string;
emerald: string;
yellow: string;
pink: string;
red: string;
sky: string;
};
branding: {
[className: string]: keyof StyleGuide['palette'];
};
/** TODO: a mechanism for swapping values of branding variables under light/dark theme */
swaps: {};
}
This style guide JSON file could be multi-purposed.
The style guide JSON could be used to render a pretty HTML page representation of our global.css for convenience, https://acmcsuf.com/style, which allows visitors to copy the colors we use for our branding.
