start adding specific descriptions to each color theme color

This commit is contained in:
James Brumond 2022-10-19 20:11:10 -07:00
parent 50a2a0c858
commit 3450dfab32
Signed by: james
GPG Key ID: 24BA25B8B303B023
2 changed files with 47 additions and 12 deletions

View File

@ -12,13 +12,16 @@
"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",
"description": "The color of the sun icon used to indicate that the light color theme is active"
}, },
"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"
}, },
"bg_main": { "bg_main": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The primary background color applied to the page as a whole"
}, },
"bg_light": { "bg_light": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
@ -33,22 +36,27 @@
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_heading": { "text_heading": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The color of heading text"
}, },
"text_body": { "text_body": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The color of main / normal body copy text"
}, },
"text_light": { "text_light": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
}, },
"text_link": { "text_link": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The default color of hyperlinks"
}, },
"text_link_active": { "text_link_active": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The color of hyperlinks that are currently active / selected"
}, },
"text_link_visited": { "text_link_visited": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color",
"description": "The color of hyperlinks that have been previously visited"
}, },
"text_highlight": { "text_highlight": {
"$ref": "#/definitions/css_color" "$ref": "#/definitions/css_color"
@ -220,7 +228,6 @@
}, },
"definitions": { "definitions": {
"css_color": { "css_color": {
"description": "A valid CSS color value;\nSee https://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n",
"oneOf": [ "oneOf": [
{ {
"type": "string", "type": "string",

View File

@ -13,40 +13,61 @@ properties:
description: Contains the values that will be used to populate the CSS variables description: Contains the values that will be used to populate the CSS variables
controlling the UI theme controlling the UI theme
properties: properties:
# 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
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
# 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
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"
# Main Content Text Colors
text_heading: text_heading:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The color of heading text
text_body: text_body:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The color of main / normal body copy text
text_light: text_light:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
text_link: text_link:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The default color of hyperlinks
text_link_active: text_link_active:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The color of hyperlinks that are currently active / selected
text_link_visited: text_link_visited:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
description: The color of hyperlinks that have been previously visited
# Text Highlighted with <mark>
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"
# User-Selected Text
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"
# Buttons
bg_button_primary: bg_button_primary:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
bg_button_primary_hover: bg_button_primary_hover:
@ -59,18 +80,24 @@ properties:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
text_button_secondary: text_button_secondary:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# Error Boxes / Alerts
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"
# Inputs / Forms
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"
# Activity / Result Indicators
icon_active_indicator: icon_active_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
icon_success_indicator: icon_success_indicator:
@ -79,6 +106,8 @@ properties:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
icon_warning_indicator: icon_warning_indicator:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# Charts
chart_axis: chart_axis:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
chart_text: chart_text:
@ -105,6 +134,8 @@ properties:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
chart_data_9: chart_data_9:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
# Pre-Formatted / Syntax Highlighted Code Blocks
code_normal: code_normal:
$ref: "#/definitions/css_color" $ref: "#/definitions/css_color"
code_shadow: code_shadow:
@ -151,9 +182,6 @@ properties:
$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
oneOf: oneOf:
# Hex Colors # Hex Colors
- type: string - type: string