doc-utils/color-themes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

updates to add new chart colors

Browse Source
This commit is contained in:
James Brumond 2023-05-09 22:24:05 -07:00
parent 7b5ef77dd0
commit e18ec1613d
Signed by: james
GPG Key ID: E8F2FC44BAA3357A
8 changed files with 168 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.ts
View File

@ -53,9 +53,6 @@ export interface ColorTheme {
// todo: clean up, organize, comment this list
colors: {
sun: string;
moon: string;
bg_main: string;
bg_light: string;
bg_heavy: string;

32
readme.md
View File

@ -0,0 +1,32 @@
### Minimal Light / Minimal Dark
#### Chart Colors
| Variable | Light | Dark |
|-----------------------------|---------|---------|
| `chart_shape_red_fill` | #feaea5 | #a64237 |
| `chart_shape_red_line` | #ff806d | #c77366 |
| `chart_shape_orange_fill` | #fad6bc | #c05f1a |
| `chart_shape_orange_line` | #ffb780 | #d89766 |
| `chart_shape_yellow_fill` | #ebe99f | #716f36 |
| `chart_shape_yellow_line` | #ccc948 | #a09e27 |
| `chart_shape_green_fill` | #abe0aa | #529151 |
| `chart_shape_green_line` | #66cc66 | #9ad89a |
| `chart_shape_teal_fill` | #b0ebe9 | #0c7c78 |
| `chart_shape_teal_line` | #66cdcc | #47b8b7 |
| `chart_shape_pink_fill` | #ffcae2 | #b75b8a |
| `chart_shape_pink_line` | #ff99cb | #ffa1c9 |
| `chart_shape_purple_fill` | #e5caff | #6a4e84 |
| `chart_shape_purple_line` | #cc99fe | #b27ee4 |
| `chart_shape_blue_fill` | #b1e2ff | #4a80a0 |
| `chart_shape_blue_line` | #66cbff | #7cb3cf |
| `chart_shape_indigo_fill` | #afcaf9 | #36445c |
| `chart_shape_indigo_line` | #6295ee | #4373c7 |
| `chart_shape_magenta_fill` | #ebb5cd | #953d7b |
| `chart_shape_magenta_line` | #cc6698 | #e454ac |
| `chart_shape_brown_fill` | #e1c3b8 | #915038 |
| `chart_shape_brown_line` | #bf8c71 | #9a715b |

64
schema/v1.json
View File

@ -29,14 +29,6 @@
"type": "object",
"description": "Contains the color values that will be used to populate CSS variables",
"properties": {
"sun": {
"$ref": "#/definitions/css_color",
"description": "The color of the sun icon used to indicate that the light color theme is active. Must have good 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. Must have good contrast against bg_main\n"
},
"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\n"
@ -195,34 +187,70 @@
"chart_guideline": {
"$ref": "#/definitions/css_color"
},
"chart_data_0": {
"chart_shape_red_fill": {
"$ref": "#/definitions/css_color"
},
"chart_data_1": {
"chart_shape_red_line": {
"$ref": "#/definitions/css_color"
},
"chart_data_2": {
"chart_shape_orange_fill": {
"$ref": "#/definitions/css_color"
},
"chart_data_3": {
"chart_shape_orange_line": {
"$ref": "#/definitions/css_color"
},
"chart_data_4": {
"chart_shape_yellow_fill": {
"$ref": "#/definitions/css_color"
},
"chart_data_5": {
"chart_shape_yellow_line": {
"$ref": "#/definitions/css_color"
},
"chart_data_6": {
"chart_shape_green_fill": {
"$ref": "#/definitions/css_color"
},
"chart_data_7": {
"chart_shape_green_line": {
"$ref": "#/definitions/css_color"
},
"chart_data_8": {
"chart_shape_teal_fill": {
"$ref": "#/definitions/css_color"
},
"chart_data_9": {
"chart_shape_teal_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_pink_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_pink_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_purple_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_purple_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_blue_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_blue_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_indigo_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_indigo_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_magenta_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_magenta_line": {
"$ref": "#/definitions/css_color"
},
"chart_shape_brown_fill": {
"$ref": "#/definitions/css_color"
},
"chart_shape_brown_line": {
"$ref": "#/definitions/css_color"
},
"code_normal": {

68
schema/v1.yaml
View File

@ -29,18 +29,6 @@ properties:
type: object
description: Contains the color values that will be used to populate CSS variables
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. 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. Must have
good contrast against bg_main
# Content Background Colors
bg_main:
$ref: "#/definitions/css_color"
@ -229,34 +217,70 @@ properties:
chart_guideline:
$ref: "#/definitions/css_color"
# todo: description
chart_data_0:
chart_shape_red_fill:
$ref: "#/definitions/css_color"
# todo: description
chart_data_1:
chart_shape_red_line:
$ref: "#/definitions/css_color"
# todo: description
chart_data_2:
chart_shape_orange_fill:
$ref: "#/definitions/css_color"
# todo: description
chart_data_3:
chart_shape_orange_line:
$ref: "#/definitions/css_color"
# todo: description
chart_data_4:
chart_shape_yellow_fill:
$ref: "#/definitions/css_color"
# todo: description
chart_data_5:
chart_shape_yellow_line:
$ref: "#/definitions/css_color"
# todo: description
chart_data_6:
chart_shape_green_fill:
$ref: "#/definitions/css_color"
# todo: description
chart_data_7:
chart_shape_green_line:
$ref: "#/definitions/css_color"
# todo: description
chart_data_8:
chart_shape_teal_fill:
$ref: "#/definitions/css_color"
# todo: description
chart_data_9:
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

2
themes/Minimal Dark/theme.json
View File

@ -5,8 +5,6 @@
"dark"
],
"colors": {
"sun": "#ffb685",
"moon": "#85acff",
"bg_main": "#343d46",
"bg_light": "#3f4a53",
"bg_heavy": "#495159",

34
themes/Minimal Dark/theme.yaml
View File

@ -3,8 +3,6 @@ name: Minimal Dark
labels:
- dark
colors:
sun: "#ffb685"
moon: "#85acff"
bg_main: "#343d46"
bg_light: "#3f4a53"
bg_heavy: "#495159"
@ -51,16 +49,28 @@ colors:
chart_axis: "#777777"
chart_text: "#cccccc"
chart_guideline: "#666666"
chart_data_0: "#ffb685"
chart_data_1: "#85acff"
chart_data_2: "#4dbb70"
chart_data_3: "#eb4f5e"
chart_data_4: "#a278ef"
chart_data_5: "#e298f0"
chart_data_6: "#49d9d8"
chart_data_7: "#cab815"
chart_data_8: "#52e130"
chart_data_9: "#ff13b4"
chart_shape_red_fill: "#a64237"
chart_shape_red_line: "#c77366"
chart_shape_orange_fill: "#c05f1a"
chart_shape_orange_line: "#d89766"
chart_shape_yellow_fill: "#716f36"
chart_shape_yellow_line: "#a09e27"
chart_shape_green_fill: "#529151"
chart_shape_green_line: "#9ad89a"
chart_shape_teal_fill: "#0c7c78"
chart_shape_teal_line: "#47b8b7"
chart_shape_pink_fill: "#b75b8a"
chart_shape_pink_line: "#ffa1c9"
chart_shape_purple_fill: "#6a4e84"
chart_shape_purple_line: "#b27ee4"
chart_shape_blue_fill: "#4a80a0"
chart_shape_blue_line: "#7cb3cf"
chart_shape_indigo_fill: "#36445c"
chart_shape_indigo_line: "#4373c7"
chart_shape_magenta_fill: "#953d7b"
chart_shape_magenta_line: "#e454ac"
chart_shape_brown_fill: "#915038"
chart_shape_brown_line: "#9a715b"
code_normal: "#c0c5ce"
code_shadow: transparent
code_background: "#2b303b"

2
themes/Minimal Light/theme.json
View File

@ -5,8 +5,6 @@
"light"
],
"colors": {
"sun": "#ffb685",
"moon": "#85acff",
"bg_main": "#ffffff",
"bg_light": "#fafafb",
"bg_heavy": "#ebf0f5",

34
themes/Minimal Light/theme.yaml
View File

@ -3,8 +3,6 @@ name: Minimal Light
labels:
- light
colors:
sun: "#ffb685"
moon: "#85acff"
bg_main: "#ffffff"
bg_light: "#fafafb"
bg_heavy: "#ebf0f5"
@ -51,16 +49,28 @@ colors:
chart_axis: "#bbbbbb"
chart_text: "#444444"
chart_guideline: "#dddddd"
chart_data_0: "#ffb685"
chart_data_1: "#85acff"
chart_data_2: "#4dbb70"
chart_data_3: "#eb4f5e"
chart_data_4: "#a278ef"
chart_data_5: "#e298f0"
chart_data_6: "#49d9d8"
chart_data_7: "#cab815"
chart_data_8: "#52e130"
chart_data_9: "#ff13b4"
chart_shape_red_fill: "#feaea5"
chart_shape_red_line: "#ff806d"
chart_shape_orange_fill: "#fad6bc"
chart_shape_orange_line: "#ffb780"
chart_shape_yellow_fill: "#ebe99f"
chart_shape_yellow_line: "#ccc948"
chart_shape_green_fill: "#abe0aa"
chart_shape_green_line: "#66cc66"
chart_shape_teal_fill: "#b0ebe9"
chart_shape_teal_line: "#66cdcc"
chart_shape_pink_fill: "#ffcae2"
chart_shape_pink_line: "#ff99cb"
chart_shape_purple_fill: "#e5caff"
chart_shape_purple_line: "#cc99fe"
chart_shape_blue_fill: "#b1e2ff"
chart_shape_blue_line: "#66cbff"
chart_shape_indigo_fill: "#afcaf9"
chart_shape_indigo_line: "#6295ee"
chart_shape_magenta_fill: "#ebb5cd"
chart_shape_magenta_line: "#cc6698"
chart_shape_brown_fill: "#e1c3b8"
chart_shape_brown_line: "#bf8c71"
code_normal: "#4f5b66"
code_shadow: transparent
code_background: "#eff1f5"