From e18ec1613d8dd1cb706379dd1e14397536b9508b Mon Sep 17 00:00:00 2001 From: James Brumond Date: Tue, 9 May 2023 22:24:05 -0700 Subject: [PATCH] updates to add new chart colors --- index.ts | 3 -- readme.md | 32 ++++++++++++++++ schema/v1.json | 64 ++++++++++++++++++++++--------- schema/v1.yaml | 68 ++++++++++++++++++++++----------- themes/Minimal Dark/theme.json | 2 - themes/Minimal Dark/theme.yaml | 34 +++++++++++------ themes/Minimal Light/theme.json | 2 - themes/Minimal Light/theme.yaml | 34 +++++++++++------ 8 files changed, 168 insertions(+), 71 deletions(-) diff --git a/index.ts b/index.ts index 49ef922..1c662e9 100644 --- a/index.ts +++ b/index.ts @@ -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; diff --git a/readme.md b/readme.md index e69de29..ee6abaa 100644 --- a/readme.md +++ b/readme.md @@ -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 | diff --git a/schema/v1.json b/schema/v1.json index b46c318..d3f668f 100644 --- a/schema/v1.json +++ b/schema/v1.json @@ -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": { diff --git a/schema/v1.yaml b/schema/v1.yaml index 4f1d51f..0f070ae 100644 --- a/schema/v1.yaml +++ b/schema/v1.yaml @@ -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 diff --git a/themes/Minimal Dark/theme.json b/themes/Minimal Dark/theme.json index e6b369f..3aa5ac0 100644 --- a/themes/Minimal Dark/theme.json +++ b/themes/Minimal Dark/theme.json @@ -5,8 +5,6 @@ "dark" ], "colors": { - "sun": "#ffb685", - "moon": "#85acff", "bg_main": "#343d46", "bg_light": "#3f4a53", "bg_heavy": "#495159", diff --git a/themes/Minimal Dark/theme.yaml b/themes/Minimal Dark/theme.yaml index dd5e7b3..3a617b9 100644 --- a/themes/Minimal Dark/theme.yaml +++ b/themes/Minimal Dark/theme.yaml @@ -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" diff --git a/themes/Minimal Light/theme.json b/themes/Minimal Light/theme.json index 4d3cfdb..baa0e58 100644 --- a/themes/Minimal Light/theme.json +++ b/themes/Minimal Light/theme.json @@ -5,8 +5,6 @@ "light" ], "colors": { - "sun": "#ffb685", - "moon": "#85acff", "bg_main": "#ffffff", "bg_light": "#fafafb", "bg_heavy": "#ebf0f5", diff --git a/themes/Minimal Light/theme.yaml b/themes/Minimal Light/theme.yaml index b4b6560..83a2080 100644 --- a/themes/Minimal Light/theme.yaml +++ b/themes/Minimal Light/theme.yaml @@ -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"