updates to add new chart colors

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;

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 |

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": {

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
 

themes/Minimal Dark/theme.json

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

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_shape_red_fill: "#a64237"
-  chart_data_1: "#85acff"
+  chart_shape_red_line: "#c77366"
-  chart_data_2: "#4dbb70"
+  chart_shape_orange_fill: "#c05f1a"
-  chart_data_3: "#eb4f5e"
+  chart_shape_orange_line: "#d89766"
-  chart_data_4: "#a278ef"
+  chart_shape_yellow_fill: "#716f36"
-  chart_data_5: "#e298f0"
+  chart_shape_yellow_line: "#a09e27"
-  chart_data_6: "#49d9d8"
+  chart_shape_green_fill: "#529151"
-  chart_data_7: "#cab815"
+  chart_shape_green_line: "#9ad89a"
-  chart_data_8: "#52e130"
+  chart_shape_teal_fill: "#0c7c78"
-  chart_data_9: "#ff13b4"
+  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"

themes/Minimal Light/theme.json

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

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_shape_red_fill: "#feaea5"
-  chart_data_1: "#85acff"
+  chart_shape_red_line: "#ff806d"
-  chart_data_2: "#4dbb70"
+  chart_shape_orange_fill: "#fad6bc"
-  chart_data_3: "#eb4f5e"
+  chart_shape_orange_line: "#ffb780"
-  chart_data_4: "#a278ef"
+  chart_shape_yellow_fill: "#ebe99f"
-  chart_data_5: "#e298f0"
+  chart_shape_yellow_line: "#ccc948"
-  chart_data_6: "#49d9d8"
+  chart_shape_green_fill: "#abe0aa"
-  chart_data_7: "#cab815"
+  chart_shape_green_line: "#66cc66"
-  chart_data_8: "#52e130"
+  chart_shape_teal_fill: "#b0ebe9"
-  chart_data_9: "#ff13b4"
+  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"