diff --git a/schemas/color-theme/v1.json b/schemas/color-theme/v1.json index c9b8109..c01942f 100644 --- a/schemas/color-theme/v1.json +++ b/schemas/color-theme/v1.json @@ -1,6 +1,6 @@ { "$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/v1.json", "type": "object", "properties": { "name": { @@ -13,21 +13,23 @@ "properties": { "sun": { "$ref": "#/definitions/css_color", - "description": "The color of the sun icon used to indicate that the light color theme is active" + "description": "The color of the sun icon used to indicate that the light color theme is active. Must have\ngood contrast against bg_main\n" }, "moon": { "$ref": "#/definitions/css_color", - "description": "The color of the moon icon used to indicate that the dark color theme is active" + "description": "The color of the moon icon used to indicate that the dark color theme is active. Must have\ngood contrast against bg_main\n" }, "bg_main": { "$ref": "#/definitions/css_color", - "description": "The primary background color applied to the page as a whole" + "description": "The primary background color applied to the page as a whole. Must have good contrast against\nthe main copy text colors text_heading, text_body, text_light, text_link, text_link_active,\nand text_link_visited\n" }, "bg_light": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "A lighter background color applied to content panels; Should have a relatively low contrast against\nthe bg_main color, providing only a light accent. Must have good contrast against the main copy text\ncolors text_heading, text_body, text_light, text_link, text_link_active, and text_link_visited\n" }, "bg_heavy": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "A heavier background color applied to content panels; Should have a relatively higher contrast against\nthe bg_main color, directing attention to what is \"important\" or \"primary\" content inside of it. Must\nhave good contrast against the main copy text colors text_heading, text_body, text_light, text_link,\ntext_link_active, and text_link_visited\n" }, "bg_popup_mask": { "$ref": "#/definitions/css_color" @@ -59,34 +61,44 @@ "description": "The color of hyperlinks that have been previously visited" }, "text_highlight": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The color of text highlighted using the text tag (or by using ==text==\nin markdown)\n" }, "bg_text_highlight": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of text highlighted using the text tag (or by using\n==text== in markdown)\n" }, "text_selection": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The color of text that has been selected by the user" }, "bg_text_selection": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of text that has been selected by the user" }, "bg_button_primary": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of \"primary\" buttons (typically major, positive actions, like \"save\"\nor \"publish\")\n" }, "bg_button_primary_hover": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of \"primary\" buttons (typically major, positive actions, like \"save\"\nor \"publish\") while the user is hovering over them\n" }, "text_button_primary": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The text color of \"primary\" buttons (typically major, positive actions, like \"save\" or \"publish\")\n" }, "bg_button_secondary": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of \"secondary\" buttons (typically safe, unimpactful, or backward moving\nactions, like \"cancel\" or \"preview\")\n" }, "bg_button_secondary_hover": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The background color of \"secondary\" buttons (typically safe, unimpactful, or backward moving\nactions, like \"cancel\" or \"preview\") while the user is hovering over them\n" }, "text_button_secondary": { - "$ref": "#/definitions/css_color" + "$ref": "#/definitions/css_color", + "description": "The text color of \"secondary\" buttons (typically safe, unimpactful, or backward moving actions,\nlike \"cancel\" or \"preview\")\n" }, "bg_error_box": { "$ref": "#/definitions/css_color" diff --git a/schemas/color-theme/v1.yaml b/schemas/color-theme/v1.yaml index 171323e..8f25df7 100644 --- a/schemas/color-theme/v1.yaml +++ b/schemas/color-theme/v1.yaml @@ -1,5 +1,5 @@ $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/v1.json type: object properties: name: @@ -16,25 +16,43 @@ properties: # Theme Picker Icon Colors sun: $ref: "#/definitions/css_color" - description: The color of the sun icon used to indicate that the light color theme is active + description: | + The color of the sun icon used to indicate that the light color theme is active. Must have + good contrast against bg_main moon: $ref: "#/definitions/css_color" - description: The color of the moon icon used to indicate that the dark color theme is active + description: | + The color of the moon icon used to indicate that the dark color theme is active. Must have + good contrast against bg_main # Content Background Colors bg_main: $ref: "#/definitions/css_color" - description: The primary background color applied to the page as a whole + description: | + The primary background color applied to the page as a whole. Must have good contrast against + the main copy text colors text_heading, text_body, text_light, text_link, text_link_active, + and text_link_visited bg_light: $ref: "#/definitions/css_color" + description: | + A lighter background color applied to content panels; Should have a relatively low contrast against + the bg_main color, providing only a light accent. Must have good contrast against the main copy text + colors text_heading, text_body, text_light, text_link, text_link_active, and text_link_visited bg_heavy: $ref: "#/definitions/css_color" + description: | + A heavier background color applied to content panels; Should have a relatively higher contrast against + the bg_main color, directing attention to what is "important" or "primary" content inside of it. Must + have good contrast against the main copy text colors text_heading, text_body, text_light, text_link, + text_link_active, and text_link_visited bg_popup_mask: $ref: "#/definitions/css_color" + # todo: description # line: $ref: "#/definitions/css_color" + # todo: description # Main Content Text Colors text_heading: @@ -45,6 +63,7 @@ properties: description: The color of main / normal body copy text text_light: $ref: "#/definitions/css_color" + # todo: description text_link: $ref: "#/definitions/css_color" description: The default color of hyperlinks @@ -58,128 +77,198 @@ properties: # Text Highlighted with text_highlight: $ref: "#/definitions/css_color" + description: | + The color of text highlighted using the text tag (or by using ==text== + in markdown) bg_text_highlight: $ref: "#/definitions/css_color" + description: | + The background color of text highlighted using the text tag (or by using + ==text== in markdown) # User-Selected Text text_selection: $ref: "#/definitions/css_color" + description: The color of text that has been selected by the user bg_text_selection: $ref: "#/definitions/css_color" + description: The background color of text that has been selected by the user # Buttons bg_button_primary: $ref: "#/definitions/css_color" + description: | + The background color of "primary" buttons (typically major, positive actions, like "save" + or "publish") bg_button_primary_hover: $ref: "#/definitions/css_color" + description: | + The background color of "primary" buttons (typically major, positive actions, like "save" + or "publish") while the user is hovering over them text_button_primary: $ref: "#/definitions/css_color" + description: | + The text color of "primary" buttons (typically major, positive actions, like "save" or "publish") bg_button_secondary: $ref: "#/definitions/css_color" + description: | + The background color of "secondary" buttons (typically safe, unimpactful, or backward moving + actions, like "cancel" or "preview") bg_button_secondary_hover: $ref: "#/definitions/css_color" + description: | + The background color of "secondary" buttons (typically safe, unimpactful, or backward moving + actions, like "cancel" or "preview") while the user is hovering over them text_button_secondary: $ref: "#/definitions/css_color" + description: | + The text color of "secondary" buttons (typically safe, unimpactful, or backward moving actions, + like "cancel" or "preview") # Error Boxes / Alerts bg_error_box: $ref: "#/definitions/css_color" + # todo: description border_error_box: $ref: "#/definitions/css_color" + # todo: description text_error_box: $ref: "#/definitions/css_color" + # todo: description # Inputs / Forms bg_input: $ref: "#/definitions/css_color" + # todo: description border_input: $ref: "#/definitions/css_color" + # todo: description border_input_invalid: $ref: "#/definitions/css_color" + # todo: description # Activity / Result Indicators icon_active_indicator: $ref: "#/definitions/css_color" + # todo: description icon_success_indicator: $ref: "#/definitions/css_color" + # todo: description icon_failure_indicator: $ref: "#/definitions/css_color" + # todo: description icon_warning_indicator: $ref: "#/definitions/css_color" + # todo: description # Charts chart_axis: $ref: "#/definitions/css_color" + # todo: description chart_text: $ref: "#/definitions/css_color" + # todo: description chart_guideline: $ref: "#/definitions/css_color" + # todo: description chart_data_0: $ref: "#/definitions/css_color" + # todo: description chart_data_1: $ref: "#/definitions/css_color" + # todo: description chart_data_2: $ref: "#/definitions/css_color" + # todo: description chart_data_3: $ref: "#/definitions/css_color" + # todo: description chart_data_4: $ref: "#/definitions/css_color" + # todo: description chart_data_5: $ref: "#/definitions/css_color" + # todo: description chart_data_6: $ref: "#/definitions/css_color" + # todo: description chart_data_7: $ref: "#/definitions/css_color" + # todo: description chart_data_8: $ref: "#/definitions/css_color" + # todo: description chart_data_9: $ref: "#/definitions/css_color" + # todo: description # Pre-Formatted / Syntax Highlighted Code Blocks code_normal: $ref: "#/definitions/css_color" + # todo: description code_shadow: $ref: "#/definitions/css_color" + # todo: description code_background: $ref: "#/definitions/css_color" + # todo: description code_selection: $ref: "#/definitions/css_color" + # todo: description code_comment: $ref: "#/definitions/css_color" + # todo: description code_punc: $ref: "#/definitions/css_color" + # todo: description code_operator: $ref: "#/definitions/css_color" + # todo: description code_const_literal: $ref: "#/definitions/css_color" + # todo: description code_number_literal: $ref: "#/definitions/css_color" + # todo: description code_boolean_literal: $ref: "#/definitions/css_color" + # todo: description code_tag: $ref: "#/definitions/css_color" + # todo: description code_string: $ref: "#/definitions/css_color" + # todo: description code_keyword: $ref: "#/definitions/css_color" + # todo: description code_func_name: $ref: "#/definitions/css_color" + # todo: description code_class_name: $ref: "#/definitions/css_color" + # todo: description code_regex_important: $ref: "#/definitions/css_color" + # todo: description code_variable: $ref: "#/definitions/css_color" + # todo: description code_builtin: $ref: "#/definitions/css_color" + # todo: description code_attr_name: $ref: "#/definitions/css_color" + # todo: description code_gutter_divider: $ref: "#/definitions/css_color" + # todo: description code_line_number: $ref: "#/definitions/css_color" + # todo: description code_line_highlight: $ref: "#/definitions/css_color" + # todo: description definitions: css_color: oneOf: @@ -203,6 +292,7 @@ definitions: 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) + # todo: other color function formats, like hsl # transparent - type: string const: transparent