0.1.9

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+.tsbuildinfo

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;
@@ -112,16 +109,28 @@ export interface ColorTheme {
 		chart_axis: string;
 		chart_text: string;
 		chart_guideline: string;
-		chart_data_0: string;
+		chart_shape_red_fill: string;
-		chart_data_1: string;
+		chart_shape_red_line: string;
-		chart_data_2: string;
+		chart_shape_orange_fill: string;
-		chart_data_3: string;
+		chart_shape_orange_line: string;
-		chart_data_4: string;
+		chart_shape_yellow_fill: string;
-		chart_data_5: string;
+		chart_shape_yellow_line: string;
-		chart_data_6: string;
+		chart_shape_green_fill: string;
-		chart_data_7: string;
+		chart_shape_green_line: string;
-		chart_data_8: string;
+		chart_shape_teal_fill: string;
-		chart_data_9: string;
+		chart_shape_teal_line: string;
+		chart_shape_pink_fill: string;
+		chart_shape_pink_line: string;
+		chart_shape_purple_fill: string;
+		chart_shape_purple_line: string;
+		chart_shape_blue_fill: string;
+		chart_shape_blue_line: string;
+		chart_shape_indigo_fill: string;
+		chart_shape_indigo_line: string;
+		chart_shape_magenta_fill: string;
+		chart_shape_magenta_line: string;
+		chart_shape_brown_fill: string;
+		chart_shape_brown_line: string;
 		
 		code_normal: string;
 		code_shadow: string;

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@doc-utils/color-themes",
-	"version": "0.1.3",
+	"version": "0.1.9",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@doc-utils/color-themes",
-			"version": "0.1.3",
+			"version": "0.1.9",
 			"devDependencies": {
 				"@types/node": "^18.16.3",
 				"typescript": "^5.0.4"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@doc-utils/color-themes",
-	"version": "0.1.3",
+	"version": "0.1.9",
 	"publishConfig": {
 		"registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
 	},
@@ -8,7 +8,7 @@
 		"tsc": "tsc",
 		"clean": "rm -rf ./index.js ./index.js.map ./index.d.ts ./.tsbuildinfo"
 	},
-	"main": "./index.ts",
+	"main": "./index.js",
 	"devDependencies": {
 		"@types/node": "^18.16.3",
 		"typescript": "^5.0.4"

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",
@@ -53,16 +51,28 @@
     "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": "#b15819",
-    "chart_data_3": "#eb4f5e",
+    "chart_shape_orange_line": "#d89766",
-    "chart_data_4": "#a278ef",
+    "chart_shape_yellow_fill": "#7a7722",
-    "chart_data_5": "#e298f0",
+    "chart_shape_yellow_line": "#fffd76",
-    "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 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: "#b15819"
-  chart_data_3: "#eb4f5e"
+  chart_shape_orange_line: "#d89766"
-  chart_data_4: "#a278ef"
+  chart_shape_yellow_fill: "#7a7722"
-  chart_data_5: "#e298f0"
+  chart_shape_yellow_line: "#fffd76"
-  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",
@@ -53,16 +51,28 @@
     "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": "#fffec6",
-    "chart_data_5": "#e298f0",
+    "chart_shape_yellow_line": "#e1dc18",
-    "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",

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: "#fffec6"
-  chart_data_5: "#e298f0"
+  chart_shape_yellow_line: "#e1dc18"
-  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"