build a basic ts module

index.ts

@@ -0,0 +1,137 @@
+
+export const schema = {
+	get v1() {
+		return structuredClone(require('./schema/v1.json'));
+	}
+};
+
+export function load_theme(name: string) {
+	if (name.includes('/')) {
+		return null;
+	}
+
+	return structuredClone(require(`./themes/${name}/theme.json`));
+}
+
+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;
+	};
+}