ryanamay/pint
1
0
Fork 0
mirror of https://github.com/ryanamay/pint.git synced 2024-09-20 01:50:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement: add text color

Browse source
This commit is contained in:
fuwaa 2022-07-12 12:30:40 +08:00
parent 264d3aa6da
commit 3551bb013f
No known key found for this signature in database
GPG key ID: 2E4F5DC11DE1D654
4 changed files with 125 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/pint-css.css
View file

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

13
src/components/popup/QuickChange.tsx
View file

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

209
src/methods/quickScheme.js
View file

@ -1,14 +1,14 @@
// background // background
export var ScaleBlack = [ export var ScaleBlack = [
"__color_checks_bg", "__color_checks_bg",
"__color_switch_track_bg", "__color_switch_track_bg",
"__color_canvas_inset", "__color_canvas_inset",
"__color_shadow_medium", "__color_shadow_medium",
"__color_shadow_large", "__color_shadow_large",
"__color_shadow_extra_large", "__color_shadow_extra_large",
"__color_scale_black", "__color_scale_black",
]; ];
export var BG9 = [ export var BG9 = [
"__color_page_header_bg", "__color_page_header_bg",
@ -66,115 +66,122 @@ export var BG6 = [
]; ];
export var BG5 = [ export var BG5 = [
"__color_prettylights_syntax_sublimelinter_gutter_mark", "__color_prettylights_syntax_sublimelinter_gutter_mark",
"__color_select_menu_backdrop_border", "__color_select_menu_backdrop_border",
"__color_ans_Iblack", "__color_ans_Iblack",
"__color_switch_knob_checked_disabled_bg", "__color_switch_knob_checked_disabled_bg",
"__color_primer_fg_disabled", "__color_primer_fg_disabled",
"__color_scale_gray_5", "__color_scale_gray_5",
] ];
export var BG4 = [ export var BG4 = [
"__color_codemirror_guttermarker_subtle_text", "__color_codemirror_guttermarker_subtle_text",
"__color_checks_input_placeholder_text", "__color_checks_input_placeholder_text",
"__color_checks_line_num_text", "__color_checks_line_num_text",
"__color_checks_line_timestamp_text", "__color_checks_line_timestamp_text",
"__color_checks_logline_num_text", "__color_checks_logline_num_text",
"__color_checks_logline_error_num_text", "__color_checks_logline_error_num_text",
"__color_checks_ans_Igray", "__color_checks_ans_Igray",
"__color_ans_Iblack_bright", "__color_ans_Iblack_bright",
"__color_ans_Igray", "__color_ans_Igray",
"__color_btn_active_border", "__color_btn_active_border",
"__color_underlinenav_icon", "__color_underlinenav_icon",
"__color_switch_track_border", "__color_switch_track_border",
"__color_fg_subtle", "__color_fg_subtle",
"__color_neutral_emphasis_plus", "__color_neutral_emphasis_plus",
"__color_neutral_emphasis", "__color_neutral_emphasis",
"__color_scale_gray_4", "__color_scale_gray_4",
] ];
export var BG3 = [ export var BG3 = [
"__color_diff_blob_expander_icon", "__color_diff_blob_expander_icon",
"__color_prettylights_syntax_comment", "__color_prettylights_syntax_comment",
"__color_prettylights_syntax_brackethighlighter_angle", "__color_prettylights_syntax_brackethighlighter_angle",
"__color_codemirror_linenumber_text", "__color_codemirror_linenumber_text",
"__color_codemirror_syntax_comment", "__color_codemirror_syntax_comment",
"__color_checks_text_secondary", "__color_checks_text_secondary",
"__color_checks_btn_icon", "__color_checks_btn_icon",
"__color_checks_input_text", "__color_checks_input_text",
"__color_checks_donut_neutral", "__color_checks_donut_neutral",
"__color_checks_header_label_text", "__color_checks_header_label_text",
"__color_checks_header_icon", "__color_checks_header_icon",
"__color_checks_line_text", "__color_checks_line_text",
"__color_checks_gate_text", "__color_checks_gate_text",
"__color_checks_logline_text", "__color_checks_logline_text",
"__color_checks_logline_error_text", "__color_checks_logline_error_text",
"__color_checks_logline_warning_text", "__color_checks_logline_warning_text",
"__color_header_divider", "__color_header_divider",
"__color_btn_hover_border", "__color_btn_hover_border",
"__color_btn_focus_border", "__color_btn_focus_border",
"__color_fg_muted", "__color_fg_muted",
"__color_scale_gray_3", "__color_scale_gray_3",
] ];
export var BG2 = [ export var BG2 = [
"__color_checks_ans_Iwhite", "__color_checks_ans_Iwhite",
"__color_checks_ans_Iwhite_bright", "__color_checks_ans_Iwhite_bright",
"__color_ans_Iwhite", "__color_ans_Iwhite",
"__color_scale_gray_2", "__color_scale_gray_2",
] ];
export var BG1 = [ export var BG1 = [
"__color_diff_blob_addition_num_text", "__color_diff_blob_addition_num_text",
"__color_diff_blob_addition_fg", "__color_diff_blob_addition_fg",
"__color_diff_blob_deletion_num_text", "__color_diff_blob_deletion_num_text",
"__color_diff_blob_deletion_fg", "__color_diff_blob_deletion_fg",
"__color_prettylights_syntax_storage_modifier_import", "__color_prettylights_syntax_storage_modifier_import",
"__color_prettylights_syntax_markup_italic", "__color_prettylights_syntax_markup_italic",
"__color_prettylights_syntax_markup_bold", "__color_prettylights_syntax_markup_bold",
"__color_prettylights_syntax_markup_ignored_text", "__color_prettylights_syntax_markup_ignored_text",
"__color_codemirror_text", "__color_codemirror_text",
"__color_codemirror_cursor", "__color_codemirror_cursor",
"__color_codemirror_matchingbracket_text", "__color_codemirror_matchingbracket_text",
"__color_checks_text_primary", "__color_checks_text_primary",
"__color_checks_btn_hover_icon", "__color_checks_btn_hover_icon",
"__color_checks_input_focus_text", "__color_checks_input_focus_text",
"__color_checks_dropdown_text", "__color_checks_dropdown_text",
"__color_checks_dropdown_hover_text", "__color_checks_dropdown_hover_text",
"__color_checks_dropdown_btn_hover_text", "__color_checks_dropdown_btn_hover_text",
"__color_checks_header_label_open_text", "__color_checks_header_label_open_text",
"__color_btn_text", "__color_btn_text",
"__color_fg_default", "__color_fg_default",
"__color_scale_gray_1", "__color_scale_gray_1",
] ];
export var BG0 = [ export var BG0 = [
"__color_prettylights_syntax_invalid_illegal_text", "__color_prettylights_syntax_invalid_illegal_text",
"__color_prettylights_syntax_carriage_return_text", "__color_prettylights_syntax_carriage_return_text",
"__color_header_logo", "__color_header_logo",
"__color_scale_gray_0", "__color_scale_gray_0",
] ];
// possibly text color/icon? // possibly text color/icon?
export var ScaleWhite = [ export var ScaleWhite = [
"__color_checks_line_dt_fm_text", "__color_checks_line_dt_fm_text",
"__color_ans_Iwhite_bright", "__color_ans_Iwhite_bright",
"__color_btn_primary_text", "__color_btn_primary_text",
"__color_btn_primary_icon", "__color_btn_primary_icon",
"__color_btn_outline_selected_text", "__color_btn_outline_selected_text",
"__color_btn_danger_hover_text", "__color_btn_danger_hover_text",
"__color_btn_danger_hover_icon", "__color_btn_danger_hover_icon",
"__color_btn_danger_selected_text", "__color_btn_danger_selected_text",
"__color_fg_on_emphasis", "__color_fg_on_emphasis",
"__color_scale_white", "__color_scale_white",
] ];
// text color // text color
export var TextColor = [ export var TextColor = [
"__color_scale_coral_9", "__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 // accents
@ -220,7 +227,7 @@ export var TextColor = [
// __color_btn_outline_selected_bg // __color_btn_outline_selected_bg
// __color_scale_blue_7 // __color_scale_blue_7
// // blue 8 // // blue 8
// __color_select_menu_tap_focus_bg // __color_select_menu_tap_focus_bg
// __color_primer_shadow_focus // __color_primer_shadow_focus
// __color_scale_blue_8 // __color_scale_blue_8
@ -232,4 +239,4 @@ export var TextColor = [
// __color_ans_Ired // __color_ans_Ired
// __color_codemirror_syntax_keyword // __color_codemirror_syntax_keyword
// __color_codemirror_syntax_storage // __color_codemirror_syntax_storage
// __color_prettylights_syntax_keyword // __color_prettylights_syntax_keyword

5
src/methods/schemeGen.js
View file

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