Merge pull request #22 from fuwaa/dev

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <excludedPredefinedLibrary name="HTML" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/pint.iml" filepath="$PROJECT_DIR$/.idea/pint.iml" />
+    </modules>
+  </component>
+</project>

.idea/pint.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pint",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.3",

src/components/options/ChangeCard.tsx

@@ -2,7 +2,10 @@ import react from "react";
 import "../../assets/styles/App.css";
 import { IoIosBrush } from "react-icons/io";
 import CardTitle from "../global/CardTitle";
-import { pintSetNoReload, pintGetUpdate } from "../../methods/helper";
+import {
+  pintSetNoReload,
+  pintGetUpdate,
+} from "../../methods/helpers/storageHelper";
 
 var defaultValue = "#c0ffee";
 

src/components/popup/QuickChange.tsx

@@ -4,7 +4,7 @@ import { HexColorPicker, HexColorInput } from "react-colorful";
 import { TextField } from "@mui/material";
 import { IoIosBrush } from "react-icons/io";
 import CardTitle from "../global/CardTitle";
-import { pintGetUpdate } from "../../methods/helper";
+import { pintGetUpdate } from "../../methods/helpers/storageHelper";
 import {
   bgGen,
   generateAccent,

src/methods/config/colorGroups.js

@@ -1,7 +1,7 @@
 // Generated using cgGen
 
 // color group: 1 | default color: #00000000
-export var cg1_00000000 = [
+export var cg1_000000 = [
   "__color_action_list_item_default_active_border",
   "__color_action_list_item_default_hover_border",
   "__color_counter_border",

src/methods/helpers/opacityHelper.js

@@ -0,0 +1,155 @@
+import chroma from "chroma-js";
+
+import * as settings from "../config/colorGroups.js";
+
+import { pintGetUpdate, updateMultiple } from "./storageHelper.js";
+
+// may god have mercy if you are working with this spaghetti code.
+// can someone please help me find a way of implementing this better because
+// this looks like shit. it's like this because of the goddamn chrome extension
+// limitation PLEASE FILE AN ISSUE OR PR IF YOU HAVE A WAY TO MAKE THIS HANDLE
+// BETTER BECAUSE GOD I AM DYING LOOKING AND MAINTAINING THIS SPAGHETTI CODE
+
+function setCG1(value) {
+  updateMultiple(settings.cg1a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG3(value) {
+  updateMultiple(settings.cg3a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg3a_cc, chroma(value).alpha(0.8).hex());
+}
+
+function setCG8(value) {
+  updateMultiple(settings.cg8a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg8a_f2, chroma(value).alpha(0.95).hex());
+}
+
+function setCG13(value) {
+  updateMultiple(settings.cg13a_00, chroma(value).alpha(0).hex());
+}
+
+function setCG15(value) {
+  updateMultiple(settings.cg15a_0f, chroma(value).alpha(0.06).hex());
+}
+
+function setCG16(value) {
+  updateMultiple(settings.cg16a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg16a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg16a_59, chroma(value).alpha(0.35).hex());
+  updateMultiple(settings.cg16a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg16a_a5, chroma(value).alpha(0.65).hex());
+}
+
+function setCG18(value) {
+  updateMultiple(settings.cg18a_99, chroma(value).alpha(0.6).hex());
+}
+
+function setCG21(value) {
+  updateMultiple(settings.cg21a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg21a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG22(value) {
+  updateMultiple(settings.cg22a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG24(value) {
+  updateMultiple(settings.cg24a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg24a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG29(value) {
+  updateMultiple(settings.cg29a_4d, chroma(value).alpha(0.16).hex());
+}
+
+function setCG38(value) {
+  updateMultiple(settings.cg38a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG46(value) {
+  updateMultiple(settings.cg46a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg46a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg46a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG60(value) {
+  updateMultiple(settings.cg60a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg60a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG64(value) {
+  updateMultiple(settings.cg64a_14, chroma(value).alpha(0.08).hex());
+  updateMultiple(settings.cg64a_1e, chroma(value).alpha(0.12).hex());
+  updateMultiple(settings.cg64a_33, chroma(value).alpha(0.2).hex());
+}
+
+function setCG67(value) {
+  updateMultiple(settings.cg67a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg67a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG74(value) {
+  updateMultiple(settings.cg74a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG76(value) {
+  updateMultiple(settings.cg76a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg76a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG77(value) {
+  updateMultiple(settings.cg77a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg77a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG78(value) {
+  updateMultiple(settings.cg78a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg78a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG84(value) {
+  updateMultiple(settings.cg84a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG89(value) {
+  updateMultiple(settings.cg89a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg89a_28, chroma(value).alpha(0.16).hex());
+  updateMultiple(settings.cg89a_3d, chroma(value).alpha(0.24).hex());
+  updateMultiple(settings.cg89a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg89a_66, chroma(value).alpha(0.4).hex());
+  updateMultiple(settings.cg89a_7f, chroma(value).alpha(0.5).hex());
+}
+
+function setCG106(value) {
+  updateMultiple(settings.cg106a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg106a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg106a_33, chroma(value).alpha(0.2).hex());
+  updateMultiple(settings.cg106a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg106a_b2, chroma(value).alpha(0.7).hex());
+}
+
+export function updateOpacity() {
+  pintGetUpdate(settings.cg1_000000[0], setCG1);
+  pintGetUpdate(settings.cg3_010409[0], setCG3);
+  pintGetUpdate(settings.cg8_0d1117[0], setCG8);
+  pintGetUpdate(settings.cg13_161b22[0], setCG13);
+  pintGetUpdate(settings.cg15_1b1f230a[0], setCG15);
+  pintGetUpdate(settings.cg16_1f6feb[0], setCG16);
+  pintGetUpdate(settings.cg18_238636[0], setCG18);
+  pintGetUpdate(settings.cg21_2ea043[0], setCG21);
+  pintGetUpdate(settings.cg22_30363d[0], setCG22);
+  pintGetUpdate(settings.cg24_388bfd[0], setCG24);
+  pintGetUpdate(settings.cg29_3fb950[0], setCG29);
+  pintGetUpdate(settings.cg38_58a6ff[0], setCG38);
+  pintGetUpdate(settings.cg46_6e7681[0], setCG46);
+  pintGetUpdate(settings.cg60_a371f7[0], setCG60);
+  pintGetUpdate(settings.cg64_b1bac4[0], setCG64);
+  pintGetUpdate(settings.cg67_bb8009[0], setCG67);
+  pintGetUpdate(settings.cg74_d29922[0], setCG74);
+  pintGetUpdate(settings.cg76_da3633[0], setCG76);
+  pintGetUpdate(settings.cg77_db61a2[0], setCG77);
+  pintGetUpdate(settings.cg78_db6d28[0], setCG78);
+  pintGetUpdate(settings.cg84_f0f6fc[0], setCG84);
+  pintGetUpdate(settings.cg89_f85149[0], setCG89);
+  pintGetUpdate(settings.cg106_ffffff[0], setCG106);
+}

src/methods/helpers/scaleHelper.js

@@ -0,0 +1,155 @@
+import chroma from "chroma-js";
+
+import * as settings from "../config/colorGroups.js";
+
+import { pintGetUpdate, updateMultiple } from "./storageHelper.js";
+
+// may god have mercy if you are working with this spaghetti code.
+// can someone please help me find a way of implementing this better because
+// this looks like shit. it's like this because of the goddamn chrome extension
+// limitation PLEASE FILE AN ISSUE OR PR IF YOU HAVE A WAY TO MAKE THIS HANDLE
+// BETTER BECAUSE GOD I AM DYING LOOKING AND MAINTAINING THIS SPAGHETTI CODE
+
+function setCG1(value) {
+  updateMultiple(settings.cg1a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG3(value) {
+  updateMultiple(settings.cg3a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg3a_cc, chroma(value).alpha(0.8).hex());
+}
+
+function setCG8(value) {
+  updateMultiple(settings.cg8a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg8a_f2, chroma(value).alpha(0.95).hex());
+}
+
+function setCG13(value) {
+  updateMultiple(settings.cg13a_00, chroma(value).alpha(0).hex());
+}
+
+function setCG15(value) {
+  updateMultiple(settings.cg15a_0f, chroma(value).alpha(0.06).hex());
+}
+
+function setCG16(value) {
+  updateMultiple(settings.cg16a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg16a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg16a_59, chroma(value).alpha(0.35).hex());
+  updateMultiple(settings.cg16a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg16a_a5, chroma(value).alpha(0.65).hex());
+}
+
+function setCG18(value) {
+  updateMultiple(settings.cg18a_99, chroma(value).alpha(0.6).hex());
+}
+
+function setCG21(value) {
+  updateMultiple(settings.cg21a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg21a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG22(value) {
+  updateMultiple(settings.cg22a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG24(value) {
+  updateMultiple(settings.cg24a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg24a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG29(value) {
+  updateMultiple(settings.cg29a_4d, chroma(value).alpha(0.16).hex());
+}
+
+function setCG38(value) {
+  updateMultiple(settings.cg38a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG46(value) {
+  updateMultiple(settings.cg46a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg46a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg46a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG60(value) {
+  updateMultiple(settings.cg60a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg60a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG64(value) {
+  updateMultiple(settings.cg64a_14, chroma(value).alpha(0.08).hex());
+  updateMultiple(settings.cg64a_1e, chroma(value).alpha(0.12).hex());
+  updateMultiple(settings.cg64a_33, chroma(value).alpha(0.2).hex());
+}
+
+function setCG67(value) {
+  updateMultiple(settings.cg67a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg67a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG74(value) {
+  updateMultiple(settings.cg74a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG76(value) {
+  updateMultiple(settings.cg76a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg76a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG77(value) {
+  updateMultiple(settings.cg77a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg77a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG78(value) {
+  updateMultiple(settings.cg78a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg78a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG84(value) {
+  updateMultiple(settings.cg84a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG89(value) {
+  updateMultiple(settings.cg89a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg89a_28, chroma(value).alpha(0.16).hex());
+  updateMultiple(settings.cg89a_3d, chroma(value).alpha(0.24).hex());
+  updateMultiple(settings.cg89a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg89a_66, chroma(value).alpha(0.4).hex());
+  updateMultiple(settings.cg89a_7f, chroma(value).alpha(0.5).hex());
+}
+
+function setCG106(value) {
+  updateMultiple(settings.cg106a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg106a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg106a_33, chroma(value).alpha(0.2).hex());
+  updateMultiple(settings.cg106a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg106a_b2, chroma(value).alpha(0.7).hex());
+}
+
+export function updateOpacity() {
+  pintGetUpdate(settings.cg1_000000[0], setCG1);
+  pintGetUpdate(settings.cg3_010409[0], setCG3);
+  pintGetUpdate(settings.cg8_0d1117[0], setCG8);
+  pintGetUpdate(settings.cg13_161b22[0], setCG13);
+  pintGetUpdate(settings.cg15_1b1f230a[0], setCG15);
+  pintGetUpdate(settings.cg16_1f6feb[0], setCG16);
+  pintGetUpdate(settings.cg18_238636[0], setCG18);
+  pintGetUpdate(settings.cg21_2ea043[0], setCG21);
+  pintGetUpdate(settings.cg22_30363d[0], setCG22);
+  pintGetUpdate(settings.cg24_388bfd[0], setCG24);
+  pintGetUpdate(settings.cg29_3fb950[0], setCG29);
+  pintGetUpdate(settings.cg38_58a6ff[0], setCG38);
+  pintGetUpdate(settings.cg46_6e7681[0], setCG46);
+  pintGetUpdate(settings.cg60_a371f7[0], setCG60);
+  pintGetUpdate(settings.cg64_b1bac4[0], setCG64);
+  pintGetUpdate(settings.cg67_bb8009[0], setCG67);
+  pintGetUpdate(settings.cg74_d29922[0], setCG74);
+  pintGetUpdate(settings.cg76_da3633[0], setCG76);
+  pintGetUpdate(settings.cg77_db61a2[0], setCG77);
+  pintGetUpdate(settings.cg78_db6d28[0], setCG78);
+  pintGetUpdate(settings.cg84_f0f6fc[0], setCG84);
+  pintGetUpdate(settings.cg89_f85149[0], setCG89);
+  pintGetUpdate(settings.cg106_ffffff[0], setCG106);
+}

src/methods/opacityGroup.js

@@ -1,67 +0,0 @@
-export var cg1 = ["cg1_00000000", "cg1a_19"];
-
-export var cg3 = ["cg3_010409", "cg3a_4c", "cg3a_cc"];
-
-export var cg8 = ["cg8_0d1117", "cg8a_00", "cg8a_f2"];
-
-export var cg13 = ["cg13_161b22", "cg13a_00"];
-
-export var cg15 = ["cg15_1b1f230a", "cg15a_0f"];
-
-export var cg16 = [
-  "cg16_1f6feb",
-  "cg16a_0c",
-  "cg16a_19",
-  "cg16a_59",
-  "cg16a_7f",
-  "cg16a_a5",
-];
-
-export var cg18 = ["cg18_238636", "cg18a_99"];
-
-export var cg21 = ["cg21_2ea043", "cg21a_26", "cg21a_66"];
-
-export var cg22 = ["cg22_30363d", "cg22a_7a", "cg22a_80"];
-
-export var cg24 = ["cg24_388bfd", "cg24a_26", "cg24a_66"];
-
-export var cg29 = ["cg29_3fb950", "cg29a_4d"];
-
-export var cg38 = ["cg38_58a6ff", "cg38a_80"];
-
-export var cg46 = ["cg46_6e7681", "cg46a_00", "cg46a_19", "cg46a_66"];
-
-export var cg60 = ["cg60_a371f7", "cg60a_26", "cg60a_66"];
-
-export var cg64 = ["cg64_b1bac4", "cg64a_14", "cg64a_1e", "cg64a_33"];
-
-export var cg67 = ["cg67_bb8009", "cg67a_26", "cg67a_66"];
-
-export var cg74 = ["cg74_d29922", "cg74a_66"];
-
-export var cg76 = ["cg76_da3633", "cg76a_0c", "cg76a_19"];
-
-export var cg77 = ["cg77_db61a2", "cg77a_26", "cg77a_66"];
-
-export var cg78 = ["cg78_db6d28", "cg78a_26", "cg78a_66"];
-
-export var cg84 = ["cg84_f0f6fc", "cg84a_19"];
-
-export var cg89 = [
-  "cg89_f85149",
-  "cg89a_26",
-  "cg89a_28",
-  "cg89a_3d",
-  "cg89a_4c",
-  "cg89a_66",
-  "cg89a_7f",
-];
-
-export var cg106 = [
-  "cg106_ffffff",
-  "cg106a_0c",
-  "cg106a_19",
-  "cg106a_33",
-  "cg106a_7f",
-  "cg106a_b2",
-];

src/methods/schemeGen.js

@@ -1,8 +1,9 @@
 /*global chrome*/
 import chroma from "chroma-js";
 
-import * as settings from "./colorGroups.js";
-import { pintSetNoReload, updateMultiple } from "./helper.js";
+import * as settings from "./config/colorGroups.js";
+import { updateOpacity } from "./helpers/opacityHelper.js";
+import { pintSetNoReload, updateMultiple } from "./helpers/storageHelper.js";
 import * as qs from "./quickScheme.js";
 
 // function to convert hex to rgb
@@ -84,10 +85,10 @@ export function updateViaQuickScheme(color) {
 }
 
 export function bgGen(color) {
-  updateMultiple(settings.cg3_010409, chroma(color).darken().hex());
+  updateMultiple(settings.cg3_010409, chroma(color).darken(0.1).hex());
   updateMultiple(settings.cg8_0d1117, chroma(color).hex());
   updateMultiple(settings.cg13_161b22, chroma(color).brighten(0.3).hex());
-  updateMultiple(settings.cg18_238636, chroma(color).brighten(0.6).hex());
+  updateMultiple(settings.cg17_21262d, chroma(color).brighten(0.6).hex());
   updateMultiple(settings.cg22_30363d, chroma(color).brighten(0.9).hex());
   updateMultiple(settings.cg32_484f58, chroma(color).brighten(1.2).hex());
   updateMultiple(settings.cg46_6e7681, chroma(color).brighten(1.5).hex());
@@ -95,6 +96,8 @@ export function bgGen(color) {
   updateMultiple(settings.cg64_b1bac4, chroma(color).brighten(2.1).hex());
   updateMultiple(settings.cg71_c9d1d9, chroma(color).brighten(2.4).hex());
   updateMultiple(settings.cg84_f0f6fc, chroma(color).brighten(2.7).hex());
+  updateMultiple(settings.cg106_ffffff, chroma(color).brighten(3.0).hex());
+  updateOpacity();
   chrome.tabs.reload();
 }
 

src/views/Options.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import "../assets/styles/App.css";
 import Header from "../components/options/Header";
 import QuickSettings from "../components/popup/QuickSettings";
-import "../methods/settings.js";
-import { settings } from "../methods/settings";
+import "../methods/config/settings.js";
+import { settings } from "../methods/config/settings";
 import ChangeCard from "../components/options/ChangeCard";
 import react from "react";
 import { RgbaColorPicker } from "react-colorful";