minimal/docs
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

more descriptions and comments in color theme schema

Browse Source
This commit is contained in:
James Brumond 2022-10-22 13:06:10 -07:00
parent 3450dfab32
commit 70e7c06eba
Signed by: james
GPG Key ID: 24BA25B8B303B023
2 changed files with 122 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
schemas/color-theme/v1.json
View File

@ -1,6 +1,6 @@
{ {
"$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/v1.json",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "name": {
@ -13,21 +13,23 @@
"properties": { "properties": {
"sun": { "sun": {
"$ref": "#/definitions/css_color", "$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": { "moon": {
"$ref": "#/definitions/css_color", "$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": { "bg_main": {
"$ref": "#/definitions/css_color", "$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": { "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": { "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": { "bg_popup_mask": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
@ -59,34 +61,44 @@
"description": "The color of hyperlinks that have been previously visited" "description": "The color of hyperlinks that have been previously visited"
}, },
"text_highlight": { "text_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The color of text highlighted using the <mark>text</mark> tag (or by using ==text==\nin markdown)\n"
}, },
"bg_text_highlight": { "bg_text_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The background color of text highlighted using the <mark>text</mark> tag (or by using\n==text== in markdown)\n"
}, },
"text_selection": { "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": { "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": { "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": { "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": { "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": { "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": { "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": { "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": { "bg_error_box": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"

98
schemas/color-theme/v1.yaml
View File

@ -1,5 +1,5 @@
$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/v1.json
type: object type: object
properties: properties:
name: name:
@ -16,25 +16,43 @@ properties:
# Theme Picker Icon Colors # Theme Picker Icon Colors
sun: sun:
$ref: "#/definitions/css_color" $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: moon:
$ref: "#/definitions/css_color" $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 # Content Background Colors
bg_main: bg_main:
$ref: "#/definitions/css_color" $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: 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
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: 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
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: bg_popup_mask:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# #
line: line:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# Main Content Text Colors # Main Content Text Colors
text_heading: text_heading:
@ -45,6 +63,7 @@ properties:
description: The color of main / normal body copy text description: The color of main / normal body copy text
text_light: text_light:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
text_link: text_link:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The default color of hyperlinks description: The default color of hyperlinks
@ -58,128 +77,198 @@ properties:
# Text Highlighted with <mark> # Text Highlighted with <mark>
text_highlight: text_highlight:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: |
The color of text highlighted using the <mark>text</mark> tag (or by using ==text==
in markdown)
bg_text_highlight: bg_text_highlight:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: |
The background color of text highlighted using the <mark>text</mark> tag (or by using
==text== in markdown)
# User-Selected Text # User-Selected Text
text_selection: 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: bg_text_selection:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The background color of text that has been selected by the user
# Buttons # Buttons
bg_button_primary: bg_button_primary:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: |
The background color of "primary" buttons (typically major, positive actions, like "save"
or "publish")
bg_button_primary_hover: 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"
or "publish") while the user is hovering over them
text_button_primary: 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")
bg_button_secondary: bg_button_secondary:
$ref: "#/definitions/css_color" $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: 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
actions, like "cancel" or "preview") while the user is hovering over them
text_button_secondary: 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,
like "cancel" or "preview")
# Error Boxes / Alerts # Error Boxes / Alerts
bg_error_box: bg_error_box:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
border_error_box: border_error_box:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
text_error_box: text_error_box:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# Inputs / Forms # Inputs / Forms
bg_input: bg_input:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
border_input: border_input:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
border_input_invalid: border_input_invalid:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# Activity / Result Indicators # Activity / Result Indicators
icon_active_indicator: icon_active_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
icon_success_indicator: icon_success_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
icon_failure_indicator: icon_failure_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
icon_warning_indicator: icon_warning_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# Charts # Charts
chart_axis: chart_axis:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_text: chart_text:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_guideline: chart_guideline:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_0: chart_data_0:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_1: chart_data_1:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_2: chart_data_2:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_3: chart_data_3:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_4: chart_data_4:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_5: chart_data_5:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_6: chart_data_6:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_7: chart_data_7:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_8: chart_data_8:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
chart_data_9: chart_data_9:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
# Pre-Formatted / Syntax Highlighted Code Blocks # Pre-Formatted / Syntax Highlighted Code Blocks
code_normal: code_normal:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_shadow: code_shadow:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_background: code_background:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_selection: code_selection:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_comment: code_comment:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_punc: code_punc:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_operator: code_operator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_const_literal: code_const_literal:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_number_literal: code_number_literal:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_boolean_literal: code_boolean_literal:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_tag: code_tag:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_string: code_string:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_keyword: code_keyword:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_func_name: code_func_name:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_class_name: code_class_name:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_regex_important: code_regex_important:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_variable: code_variable:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_builtin: code_builtin:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_attr_name: code_attr_name:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_gutter_divider: code_gutter_divider:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_line_number: code_line_number:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
code_line_highlight: code_line_highlight:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# todo: description
definitions: definitions:
css_color: css_color:
oneOf: 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*\))$ 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: examples:
- rgba(10, 70, 130, 0.5) - rgba(10, 70, 130, 0.5)
# todo: other color function formats, like hsl
# transparent # transparent
- type: string - type: string
const: transparent const: transparent