color-themes/index.ts

159 lines
3.7 KiB
TypeScript

export const schema = {
get v1() {
return structuredClone(require('./schema/v1.json'));
}
};
export function load_theme(name: string) {
if (name.includes('/')) {
return null;
}
const theme = require(`./themes/${name}/theme.json`);
validate_theme(theme);
return structuredClone(theme);
}
export function validate_theme(theme: unknown) : asserts theme is ColorTheme {
// todo: validate
}
export const themes = [
'Minimal Dark',
'Minimal Light',
];
export type ColorThemeLabel
= 'light'
| 'dark'
| 'high_contrast'
| 'low_contrast'
| 'monochrome'
| 'greyscale'
| 'protanopia_safe'
| 'deuteranopia_safe'
| 'tritanopia_safe'
;
export interface ColorTheme {
$schema: '';
/** The name of the color theme as it should be displayed to a user */
name: string;
/**
* The labels field allows for categorizing color themes into high-level groupings
* like "light", "dark", or "high_contrast". This is purely meta-information that is
* intended to be used by applications to display color theme options with groupings
* or other indicators to the user in configuration interfaces
*/
labels?: ColorThemeLabel[];
// todo: clean up, organize, comment this list
colors: {
bg_main: string;
bg_light: string;
bg_heavy: string;
bg_popup_mask: string;
line: string;
line_safe: string;
line_warn: string;
line_danger: string;
text_heading: string;
text_body: string;
text_light: string;
text_safe: string;
text_warn: string;
text_danger: string;
text_link: string;
text_link_active: string;
text_link_visited: string;
bg_qrcode: string;
stroke_qrcode: string;
text_highlight: string;
bg_text_highlight: string;
text_selection: string;
bg_text_selection: string;
bg_button_primary: string;
bg_button_primary_hover: string;
text_button_primary: string;
bg_button_secondary: string;
bg_button_secondary_hover: string;
text_button_secondary: string;
bg_error_box: string;
border_error_box: string;
text_error_box: string;
bg_input: string;
border_input: string;
border_input_invalid: string;
icon_active_indicator: string;
icon_success_indicator: string;
icon_failure_indicator: string;
icon_warning_indicator: string;
accent_info: string;
accent_highlight: string;
accent_warning: string;
accent_problem: string;
chart_axis: string;
chart_text: string;
chart_guideline: string;
chart_shape_red_fill: string;
chart_shape_red_line: string;
chart_shape_orange_fill: string;
chart_shape_orange_line: string;
chart_shape_yellow_fill: string;
chart_shape_yellow_line: string;
chart_shape_green_fill: string;
chart_shape_green_line: string;
chart_shape_teal_fill: string;
chart_shape_teal_line: string;
chart_shape_pink_fill: string;
chart_shape_pink_line: string;
chart_shape_purple_fill: string;
chart_shape_purple_line: string;
chart_shape_blue_fill: string;
chart_shape_blue_line: string;
chart_shape_indigo_fill: string;
chart_shape_indigo_line: string;
chart_shape_magenta_fill: string;
chart_shape_magenta_line: string;
chart_shape_brown_fill: string;
chart_shape_brown_line: string;
code_normal: string;
code_shadow: string;
code_background: string;
code_selection: string;
code_comment: string;
code_punc: string;
code_operator: string;
code_const_literal: string;
code_number_literal: string;
code_boolean_literal: string;
code_tag: string;
code_string: string;
code_keyword: string;
code_func_name: string;
code_class_name: string;
code_regex_important: string;
code_variable: string;
code_builtin: string;
code_attr_name: string;
code_gutter_divider: string;
code_line_number: string;
code_line_highlight: string;
};
}