Merge pull request #6 from ChrisUser/feature/better-colors

Upgrade dependencies, improved color palettes

package.json

@@ -32,40 +32,40 @@
   "homepage": "http://ChrisUser.github.io/react-usage-bar",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-viewport": "^6.4.22",
-    "@storybook/react": "^6.4.22",
+    "@babel/core": "^7.18.2",
+    "@storybook/addon-a11y": "^6.5.8",
+    "@storybook/addon-docs": "^6.5.8",
+    "@storybook/addon-viewport": "^6.5.8",
+    "@storybook/react": "^6.5.8",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.1",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.2.5",
-    "esbuild": "^0.14.38",
-    "jest": "^27.5.1",
-    "postcss": "^8.4.12",
+    "esbuild": "^0.14.43",
+    "jest": "^28.1.1",
+    "postcss": "^8.4.14",
     "prettier-standard": "^16.3.0",
-    "react": "^18.0.0",
+    "react": "^18.1.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^18.0.0",
-    "rollup": "^2.70.2",
+    "react-dom": "^18.1.0",
+    "rollup": "^2.75.6",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.2",
-    "semantic-release": "^19.0.2",
+    "rollup-plugin-typescript2": "^0.32.1",
+    "semantic-release": "^19.0.3",
     "standard": "^17.0.0",
     "standard-prettier": "^1.0.1",
-    "ts-jest": "^27.1.4",
-    "ts-loader": "^9.2.8",
-    "typescript": "^4.6.3"
+    "ts-jest": "^28.0.4",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
     "react": "^17",

src/UsageBar.tsx

@@ -17,28 +17,28 @@ interface Props {
 }
 
 const lightColors: string[] = [
-  "#F72585",
-  "#B5179E",
-  "#7209B7",
-  "#480CA8",
-  "#4361EE",
-  "#009688",
-  "#FB8500",
-  "#1B4332",
-  "#795548",
-  "#DC2F02",
+  "#F72585", // Flickr Pink
+  "#B5179E", // Byzantine (Purple)
+  "#7C0FC4", // French Violet
+  "#4900BD", // Medium Blue
+  "#3053F1", // Blue RYB
+  "#009688", // Pine Green
+  "#DF9541", // Carrot Orange
+  "#008049", // Sea Green
+  "#80452E", // Bole (Light brown)
+  "#D32A00", // Rosso Corsa (Red)
 ]
 const darkColors: string[] = [
-  "#4CC9F0",
-  "#FFB703",
-  "#74C69D",
-  "#FEE440",
-  "#00F5D4",
-  "#F15BB5",
-  "#BD96EE",
-  "#FF85A1",
-  "#4AD66D",
-  "#BEBFC4",
+  "#4BBCDF", // Cyan Process
+  "#E8BB4A", // Maximum Yellow Red
+  "#9A32DF", // Purple X 11
+  "#E76AA2", // China Pink
+  "#4361EE", // Ultramarine Blue
+  "#439990", // Viridian Green
+  "#B583F1", // Lavender Floral
+  "#EC8C1D", // Carrot Orange
+  "#47CE69", // Emerald
+  "#989BAC", // Manatee (Blue/Gray)
 ]
 
 const getPercentageValue = (value: number, total: number): string =>