add yaml version of color theme schema; minor updates

This commit is contained in:
James Brumond 2022-10-17 23:17:35 -07:00
parent ecdbb9fe2c
commit efa04be599
Signed by: james
GPG Key ID: 24BA25B8B303B023
2 changed files with 437 additions and 244 deletions

View File

@ -1,246 +1,261 @@
{ {
"$schema": "http://json-schema.org/draft-07/schema", "$schema": "http://json-schema.org/draft-07/schema",
"$id": "https://gitea.jbrumond.me/minimal/docs/raw/branch/master/schemas/color-theme.json", "$id": "https://gitea.jbrumond.me/minimal/docs/raw/branch/master/schemas/color-theme.json",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "name": {
"type": "string", "type": "string",
"description": "The name of the color theme as it is displayed in the control panel. Must be unique in any given instance" "description": "The name of the color theme as it is displayed in the control panel. Must be unique in any given instance"
}, },
"colors": { "colors": {
"type": "object", "type": "object",
"description": "Contains the values that will be used to populate the CSS variables controlling the UI theme", "description": "Contains the values that will be used to populate the CSS variables controlling the UI theme",
"properties": { "properties": {
"sun": { "sun": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"moon": { "moon": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_main": { "bg_main": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_light": { "bg_light": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_heavy": { "bg_heavy": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_popup_mask": { "bg_popup_mask": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"line": { "line": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_heading": { "text_heading": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_body": { "text_body": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_light": { "text_light": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_link": { "text_link": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_link_active": { "text_link_active": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_link_visited": { "text_link_visited": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_highlight": { "text_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_text_highlight": { "bg_text_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_selection": { "text_selection": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_text_selection": { "bg_text_selection": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_button_primary": { "bg_button_primary": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_button_primary_hover": { "bg_button_primary_hover": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_button_primary": { "text_button_primary": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_button_secondary": { "bg_button_secondary": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_button_secondary_hover": { "bg_button_secondary_hover": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_button_secondary": { "text_button_secondary": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_error_box": { "bg_error_box": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"border_error_box": { "border_error_box": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_error_box": { "text_error_box": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"bg_input": { "bg_input": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"border_input": { "border_input": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"border_input_invalid": { "border_input_invalid": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"icon_active_indicator": { "icon_active_indicator": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"icon_success_indicator": { "icon_success_indicator": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"icon_failure_indicator": { "icon_failure_indicator": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"icon_warning_indicator": { "icon_warning_indicator": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_axis": { "chart_axis": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_text": { "chart_text": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_guideline": { "chart_guideline": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_0": { "chart_data_0": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_1": { "chart_data_1": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_2": { "chart_data_2": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_3": { "chart_data_3": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_4": { "chart_data_4": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_5": { "chart_data_5": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_6": { "chart_data_6": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_7": { "chart_data_7": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_8": { "chart_data_8": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"chart_data_9": { "chart_data_9": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_normal": { "code_normal": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_shadow": { "code_shadow": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_background": { "code_background": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_selection": { "code_selection": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_comment": { "code_comment": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_punc": { "code_punc": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_operator": { "code_operator": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_const_literal": { "code_const_literal": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_number_literal": { "code_number_literal": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_boolean_literal": { "code_boolean_literal": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_tag": { "code_tag": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_string": { "code_string": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_keyword": { "code_keyword": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_func_name": { "code_func_name": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_class_name": { "code_class_name": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_regex_important": { "code_regex_important": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_variable": { "code_variable": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_builtin": { "code_builtin": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_attr_name": { "code_attr_name": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_gutter_divider": { "code_gutter_divider": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_line_number": { "code_line_number": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"code_line_highlight": { "code_line_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
} }
} }
} }
}, },
"definitions": { "definitions": {
"css_color": { "css_color": {
"description": "A valid CSS color value (see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)", "description": "A valid CSS color value;\nSee https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n",
"oneOf": [ "examples": [
{ "#000",
"type": "string", "#ff0000",
"format": "regex", "#ffccaa88",
"pattern": "^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$", "rgb(10, 70, 130)",
"examples": [ "#000", "#ff0000", "#ffccaa88" ] "rgba(10, 70, 130, 0.5)"
}, ],
{ "oneOf": [
"type": "string", {
"format": "regex", "type": "string",
"pattern": "^(rgb\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*\\))$", "format": "regex",
"examples": [ "rgb(10, 70, 130)" ] "pattern": "^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$",
}, "examples": [
{ "#000",
"type": "string", "#ff0000",
"format": "regex", "#ffccaa88"
"pattern": "^(rgba\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([01]|[01]?\\.[0-9]{1,3})\\s*\\))$", ]
"examples": [ "rgba(10, 70, 130, 0.5)" ] },
} {
] "type": "string",
} "format": "regex",
} "pattern": "^(rgb\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*\\))$",
"examples": [
"rgb(10, 70, 130)"
]
},
{
"type": "string",
"format": "regex",
"pattern": "^(rgba\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([01]|[01]?\\.[0-9]{1,3})\\s*\\))$",
"examples": [
"rgba(10, 70, 130, 0.5)"
]
}
]
}
}
} }

178
schemas/color-theme/v1.yaml Normal file
View File

@ -0,0 +1,178 @@
$schema: http://json-schema.org/draft-07/schema
$id: https://gitea.jbrumond.me/minimal/docs/raw/branch/master/schemas/color-theme.json
type: object
properties:
name:
type: string
description: The name of the color theme as it is displayed in the control
panel. Must be unique in any given instance
colors:
type: object
description: Contains the values that will be used to populate the CSS variables
controlling the UI theme
properties:
sun:
$ref: "#/definitions/css_color"
moon:
$ref: "#/definitions/css_color"
bg_main:
$ref: "#/definitions/css_color"
bg_light:
$ref: "#/definitions/css_color"
bg_heavy:
$ref: "#/definitions/css_color"
bg_popup_mask:
$ref: "#/definitions/css_color"
line:
$ref: "#/definitions/css_color"
text_heading:
$ref: "#/definitions/css_color"
text_body:
$ref: "#/definitions/css_color"
text_light:
$ref: "#/definitions/css_color"
text_link:
$ref: "#/definitions/css_color"
text_link_active:
$ref: "#/definitions/css_color"
text_link_visited:
$ref: "#/definitions/css_color"
text_highlight:
$ref: "#/definitions/css_color"
bg_text_highlight:
$ref: "#/definitions/css_color"
text_selection:
$ref: "#/definitions/css_color"
bg_text_selection:
$ref: "#/definitions/css_color"
bg_button_primary:
$ref: "#/definitions/css_color"
bg_button_primary_hover:
$ref: "#/definitions/css_color"
text_button_primary:
$ref: "#/definitions/css_color"
bg_button_secondary:
$ref: "#/definitions/css_color"
bg_button_secondary_hover:
$ref: "#/definitions/css_color"
text_button_secondary:
$ref: "#/definitions/css_color"
bg_error_box:
$ref: "#/definitions/css_color"
border_error_box:
$ref: "#/definitions/css_color"
text_error_box:
$ref: "#/definitions/css_color"
bg_input:
$ref: "#/definitions/css_color"
border_input:
$ref: "#/definitions/css_color"
border_input_invalid:
$ref: "#/definitions/css_color"
icon_active_indicator:
$ref: "#/definitions/css_color"
icon_success_indicator:
$ref: "#/definitions/css_color"
icon_failure_indicator:
$ref: "#/definitions/css_color"
icon_warning_indicator:
$ref: "#/definitions/css_color"
chart_axis:
$ref: "#/definitions/css_color"
chart_text:
$ref: "#/definitions/css_color"
chart_guideline:
$ref: "#/definitions/css_color"
chart_data_0:
$ref: "#/definitions/css_color"
chart_data_1:
$ref: "#/definitions/css_color"
chart_data_2:
$ref: "#/definitions/css_color"
chart_data_3:
$ref: "#/definitions/css_color"
chart_data_4:
$ref: "#/definitions/css_color"
chart_data_5:
$ref: "#/definitions/css_color"
chart_data_6:
$ref: "#/definitions/css_color"
chart_data_7:
$ref: "#/definitions/css_color"
chart_data_8:
$ref: "#/definitions/css_color"
chart_data_9:
$ref: "#/definitions/css_color"
code_normal:
$ref: "#/definitions/css_color"
code_shadow:
$ref: "#/definitions/css_color"
code_background:
$ref: "#/definitions/css_color"
code_selection:
$ref: "#/definitions/css_color"
code_comment:
$ref: "#/definitions/css_color"
code_punc:
$ref: "#/definitions/css_color"
code_operator:
$ref: "#/definitions/css_color"
code_const_literal:
$ref: "#/definitions/css_color"
code_number_literal:
$ref: "#/definitions/css_color"
code_boolean_literal:
$ref: "#/definitions/css_color"
code_tag:
$ref: "#/definitions/css_color"
code_string:
$ref: "#/definitions/css_color"
code_keyword:
$ref: "#/definitions/css_color"
code_func_name:
$ref: "#/definitions/css_color"
code_class_name:
$ref: "#/definitions/css_color"
code_regex_important:
$ref: "#/definitions/css_color"
code_variable:
$ref: "#/definitions/css_color"
code_builtin:
$ref: "#/definitions/css_color"
code_attr_name:
$ref: "#/definitions/css_color"
code_gutter_divider:
$ref: "#/definitions/css_color"
code_line_number:
$ref: "#/definitions/css_color"
code_line_highlight:
$ref: "#/definitions/css_color"
definitions:
css_color:
description: |
A valid CSS color value;
See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
examples:
- "#000"
- "#ff0000"
- "#ffccaa88"
- rgb(10, 70, 130)
- rgba(10, 70, 130, 0.5)
oneOf:
- type: string
format: regex
pattern: ^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$
examples:
- "#000"
- "#ff0000"
- "#ffccaa88"
- type: string
format: regex
pattern: ^(rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\))$
examples:
- rgb(10, 70, 130)
- type: string
format: regex
pattern: ^(rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([01]|[01]?\.[0-9]{1,3})\s*\))$
examples:
- rgba(10, 70, 130, 0.5)