145 lines
3.1 KiB
TypeScript
145 lines
3.1 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 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: {
|
|
sun: string;
|
|
moon: string;
|
|
|
|
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_data_0: string;
|
|
chart_data_1: string;
|
|
chart_data_2: string;
|
|
chart_data_3: string;
|
|
chart_data_4: string;
|
|
chart_data_5: string;
|
|
chart_data_6: string;
|
|
chart_data_7: string;
|
|
chart_data_8: string;
|
|
chart_data_9: 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;
|
|
};
|
|
}
|