419 lines
14 KiB
YAML
419 lines
14 KiB
YAML
$schema: http://json-schema.org/draft-07/schema
|
|
$id: https://gitea.jbrumond.me/minimal/docs/raw/branch/master/json-schema/color-theme/v1.json
|
|
type: object
|
|
title: Color Theme
|
|
properties:
|
|
name:
|
|
type: string
|
|
description: >
|
|
The name of the color theme as it should be displayed to a user
|
|
labels:
|
|
type: array
|
|
description: >
|
|
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
|
|
items:
|
|
type: string
|
|
enum:
|
|
- light
|
|
- dark
|
|
- high_contrast
|
|
- low_contrast
|
|
- monochrome
|
|
- greyscale
|
|
- protanopia_safe
|
|
- deuteranopia_safe
|
|
- tritanopia_safe
|
|
colors:
|
|
type: object
|
|
description: Contains the color values that will be used to populate CSS variables
|
|
properties:
|
|
# Content Background Colors
|
|
bg_main:
|
|
$ref: "#/definitions/css_color"
|
|
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
|
|
line_safe:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
line_warn:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
line_danger:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
|
|
# Main Content Text Colors
|
|
text_heading:
|
|
$ref: "#/definitions/css_color"
|
|
description: The color of heading text
|
|
text_body:
|
|
$ref: "#/definitions/css_color"
|
|
description: The color of main / normal body copy text
|
|
text_light:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
text_safe:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
text_warn:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
text_danger:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
text_link:
|
|
$ref: "#/definitions/css_color"
|
|
description: The default color of hyperlinks
|
|
text_link_active:
|
|
$ref: "#/definitions/css_color"
|
|
description: The color of hyperlinks that are currently active / selected
|
|
text_link_visited:
|
|
$ref: "#/definitions/css_color"
|
|
description: The color of hyperlinks that have been previously visited
|
|
|
|
# QR Codes
|
|
bg_qrcode:
|
|
$ref: "#/definitions/css_color"
|
|
description: >
|
|
The background color (i.e. typically white) of rendered QR codes
|
|
stroke_qrcode:
|
|
$ref: "#/definitions/css_color"
|
|
description: >
|
|
The stroke color (i.e. typically black) of rendered QR codes
|
|
|
|
# Text Highlighted with <mark>
|
|
text_highlight:
|
|
$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:
|
|
$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
|
|
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
|
|
|
|
# Semantic Accent Colors
|
|
accent_info:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
accent_highlight:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
accent_warning:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
accent_problem:
|
|
$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_shape_red_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_red_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_orange_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_orange_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_yellow_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_yellow_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_green_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_green_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_teal_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_teal_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_pink_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_pink_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_purple_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_purple_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_blue_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_blue_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_indigo_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_indigo_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_magenta_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_magenta_line:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_brown_fill:
|
|
$ref: "#/definitions/css_color"
|
|
# todo: description
|
|
chart_shape_brown_line:
|
|
$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:
|
|
# Hex Colors
|
|
- type: string
|
|
format: regex
|
|
pattern: ^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$
|
|
examples:
|
|
- "#000"
|
|
- "#ff0000"
|
|
- "#ffccaa88"
|
|
# RGB Colors
|
|
- 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)
|
|
# RGBA Colors
|
|
- 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)
|
|
# todo: other color function formats, like hsl
|
|
# transparent
|
|
- type: string
|
|
const: transparent
|
|
# currentcolor
|
|
- type: string
|
|
const: currentcolor
|
|
# Named Colors: CSS Level 1
|
|
- type: string
|
|
enum:
|
|
- black
|
|
- silver
|
|
- gray
|
|
- white
|
|
- maroon
|
|
- red
|
|
- purple
|
|
- fuchsia
|
|
- green
|
|
- lime
|
|
- olive
|
|
- yellow
|
|
- navy
|
|
- blue
|
|
- teal
|
|
- aqua
|
|
# Named Colors: CSS Level 2
|
|
- type: string
|
|
enum:
|
|
- orange
|
|
# Named Colors: CSS Level 3
|
|
- type: string
|
|
enum:
|
|
- aliceblue
|
|
- antiquewhite
|
|
# todo: fill in the rest of level3 colors...
|
|
# see: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
|
|
# Named Colors: CSS Level 4
|
|
- type: string
|
|
enum:
|
|
- rebeccapurple
|