implement: add text color

public/pint-css.css

@@ -464,10 +464,10 @@ html, body {
     stroke: var(--color-calendar-graph-day-L4-bg) !important;
 }
 
-a,p {
+/* a,p {
     color: var(--color-scale-gray-1) !important;
 }
 
 span {
     color: var(--color-scale-gray-0) !important;
-}
+} */

src/components/popup/QuickChange.tsx

@@ -7,7 +7,7 @@ import Preview from "../global/Preview";
 import CardTitle from "../global/CardTitle";
 import { pintSet, pintSetNoReload, updateMultiple, pintGetUpdate } from "../../methods/helper";
 import * as quickScheme from "../../methods/quickScheme";
-import { bgGen, generateAccent, updateViaQuickScheme, } from "../../methods/schemeGen";
+import { bgGen, generateAccent, updateText, updateViaQuickScheme, } from "../../methods/schemeGen";
 import { bgcolor } from "@mui/system";
 
 var defaultValue = "#c0ffee" 
@@ -26,10 +26,12 @@ export default function QuickChange() {
     pintGetUpdate("__color_btn_primary_active_bg", setActiveButton)
     pintGetUpdate("__color_btn_primary_focus_bg", setClickedButton)
     pintGetUpdate("__color_btn_primary_disabled_bg", setDisabledButton)
+    pintGetUpdate("__color_scale_gray_1", setTextColor)
   }) 
 
   const [bgColor, setBgColor] = react.useState(`${defaultValue}`);
   const [color, setColor] = react.useState(`${defaultValue}`);
+  const [textColor, setTextColor] = react.useState(`${defaultValue}`);
 
   // l1-l4 and other used shit
   const [l1, setL1] = react.useState(`${defaultValue}`);
@@ -53,6 +55,11 @@ export default function QuickChange() {
     bgGen(color);
   }
 
+  function paintText() {
+    updateText(color);
+    setTextColor(color);
+  }
+
   return (
     <div className="pint flex flex-row  mb-2 mt-1 mx-2">
       <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
@@ -103,13 +110,13 @@ export default function QuickChange() {
             id="textColorHex"
             label="text color"
             disabled={true}
-            value={bgColor}
+            value={textColor}
             variant="outlined"
             size="small"
           />
           <button
             className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
-            onClick={paintBg}
+            onClick={paintText}
           >
             <IoIosBrush className="text-xl p-0 text-white" />
           </button>

src/methods/quickScheme.js

@@ -8,7 +8,7 @@ export var ScaleBlack = [
   "__color_shadow_large",
   "__color_shadow_extra_large",
   "__color_scale_black",
-  ];
+];
 
 export var BG9 = [
   "__color_page_header_bg",
@@ -66,32 +66,32 @@ export var BG6 = [
 ];
 
 export var BG5 = [
-"__color_prettylights_syntax_sublimelinter_gutter_mark",
-"__color_select_menu_backdrop_border",
-"__color_ans_Iblack",
-"__color_switch_knob_checked_disabled_bg",
-"__color_primer_fg_disabled",
-"__color_scale_gray_5",
-]
+  "__color_prettylights_syntax_sublimelinter_gutter_mark",
+  "__color_select_menu_backdrop_border",
+  "__color_ans_Iblack",
+  "__color_switch_knob_checked_disabled_bg",
+  "__color_primer_fg_disabled",
+  "__color_scale_gray_5",
+];
 
 export var BG4 = [
-"__color_codemirror_guttermarker_subtle_text",
-"__color_checks_input_placeholder_text",
-"__color_checks_line_num_text",
-"__color_checks_line_timestamp_text",
-"__color_checks_logline_num_text",
-"__color_checks_logline_error_num_text",
-"__color_checks_ans_Igray",
-"__color_ans_Iblack_bright",
-"__color_ans_Igray",
-"__color_btn_active_border",
-"__color_underlinenav_icon",
-"__color_switch_track_border",
-"__color_fg_subtle",
-"__color_neutral_emphasis_plus",
-"__color_neutral_emphasis",
-"__color_scale_gray_4",
-]
+  "__color_codemirror_guttermarker_subtle_text",
+  "__color_checks_input_placeholder_text",
+  "__color_checks_line_num_text",
+  "__color_checks_line_timestamp_text",
+  "__color_checks_logline_num_text",
+  "__color_checks_logline_error_num_text",
+  "__color_checks_ans_Igray",
+  "__color_ans_Iblack_bright",
+  "__color_ans_Igray",
+  "__color_btn_active_border",
+  "__color_underlinenav_icon",
+  "__color_switch_track_border",
+  "__color_fg_subtle",
+  "__color_neutral_emphasis_plus",
+  "__color_neutral_emphasis",
+  "__color_scale_gray_4",
+];
 
 export var BG3 = [
   "__color_diff_blob_expander_icon",
@@ -115,14 +115,14 @@ export var BG3 = [
   "__color_btn_focus_border",
   "__color_fg_muted",
   "__color_scale_gray_3",
-]
+];
 
 export var BG2 = [
   "__color_checks_ans_Iwhite",
   "__color_checks_ans_Iwhite_bright",
   "__color_ans_Iwhite",
   "__color_scale_gray_2",
-]
+];
 
 export var BG1 = [
   "__color_diff_blob_addition_num_text",
@@ -146,14 +146,14 @@ export var BG1 = [
   "__color_btn_text",
   "__color_fg_default",
   "__color_scale_gray_1",
-]
+];
 
 export var BG0 = [
   "__color_prettylights_syntax_invalid_illegal_text",
   "__color_prettylights_syntax_carriage_return_text",
   "__color_header_logo",
   "__color_scale_gray_0",
-]
+];
 
 // possibly text color/icon?
 
@@ -168,13 +168,20 @@ export var ScaleWhite = [
   "__color_btn_danger_selected_text",
   "__color_fg_on_emphasis",
   "__color_scale_white",
-]
+];
 
 // text color
 
 export var TextColor = [
   "__color_scale_coral_9",
-]
+  "__color_primer_fg_disabled",
+  "__color_fg_subtle",
+  "__color_fg_muted",
+  "__color_diff_blob_addition_fg",
+  "__color_diff_blob_deletion_fg",
+  "__color_fg_default",
+  "__color_fg_on_emphasis",
+];
 
 // accents
 

src/methods/schemeGen.js

@@ -92,6 +92,11 @@ export function bgGen(color) {
   chrome.tabs.reload();
 }
 
+export function updateText(color) {
+  updateMultiple(qs.TextColor, color);
+  chrome.tabs.reload();
+}
+
 export function accentGen(color)  {
 
 }