From c6843be648e908611c0a15d0ef5dbc359f44091c Mon Sep 17 00:00:00 2001 From: fuwaa Date: Fri, 22 Jul 2022 13:46:27 +0800 Subject: [PATCH] chore: add scales and groups --- public/Initial.js | 1 + public/background.js | 1 + public/pint-css.css | 1 + src/methods/colorGroups.js | 1 + src/methods/colorScales.js | 127 ++++++++++++++++++++++++++++++++++++ src/methods/opacityGroup.js | 67 +++++++++++++++++++ src/methods/schemeGen.js | 25 +++---- 7 files changed, 212 insertions(+), 11 deletions(-) create mode 100644 src/methods/colorScales.js create mode 100644 src/methods/opacityGroup.js diff --git a/public/Initial.js b/public/Initial.js index a2b8307..f044280 100644 --- a/public/Initial.js +++ b/public/Initial.js @@ -452,6 +452,7 @@ defaultColorScheme = { __color_calendar_graph_day_L2_border: "rgba(255, 255, 255, 0.05)", __color_calendar_graph_day_L3_border: "rgba(255, 255, 255, 0.05)", __color_calendar_graph_day_L4_border: "rgba(255, 255, 255, 0.05)", + __color_text_disabled: "#6e7681", }; colorSettings = Object.keys(defaultColorScheme); diff --git a/public/background.js b/public/background.js index 507d613..e518df7 100644 --- a/public/background.js +++ b/public/background.js @@ -450,6 +450,7 @@ defaultColorScheme = { __color_underlinenav_border_hover: "rgba(110, 118, 129, 0.4)", __color_underlinenav_icon: "#6e7681", __color_workflow_card_header_shadow: "rgba(27, 31, 35, 0.04)", + __color_text_disabled: "#6e7681", }; initialSettings = Object.keys(defaultColorScheme); diff --git a/public/pint-css.css b/public/pint-css.css index de0d195..84a9421 100644 --- a/public/pint-css.css +++ b/public/pint-css.css @@ -450,6 +450,7 @@ --color-calendar-graph-day-L2-border: initial !important; --color-calendar-graph-day-L3-border: initial !important; --color-calendar-graph-day-L4-border: initial !important; + --color-text-disabled: initial !important; } html, diff --git a/src/methods/colorGroups.js b/src/methods/colorGroups.js index 363eccc..2e846a8 100644 --- a/src/methods/colorGroups.js +++ b/src/methods/colorGroups.js @@ -350,6 +350,7 @@ export var cg46_6e7681 = [ "__color_scale_gray_4", "__color_switch_track_border", "__color_underlinenav_icon", + "__color_text_disabled", ]; // color group: 46 | default color: #6e768100 diff --git a/src/methods/colorScales.js b/src/methods/colorScales.js new file mode 100644 index 0000000..d89163f --- /dev/null +++ b/src/methods/colorScales.js @@ -0,0 +1,127 @@ +export var black = ["cg3_010409"]; + +export var white = ["cg106_ffffff"]; + +export var gray = [ + "cg8_0d1117", + "cg13_161b22", + "cg17_21262d", + "cg22_30363d", + "cg32_484f58", + "cg46_6e7681", + "cg55_8b949e", + "cg64_b1bac4", + "cg71_c9d1d9", + "cg84_f0f6fc", +]; + +export var blue = [ + "cg6_051d4d", + "cg7_0c2d6b", + "cg9_0d419d", + "cg12_1158c7", + "cg16_1f6feb", + "cg24_388bfd", + "cg38_58a6ff", + "cg49_79c0ff", + "cg61_a5d6ff", + "cg72_cae8ff", +]; + +export var green = [ + "cg5_04260f", + "cg4_033a16", + "cg11_0f5323", + "cg14_196c2e", + "cg18_238636", + "cg21_2ea043", + "cg29_3fb950", + "cg36_56d364", + "cg51_7ee787", + "cg63_aff5b4", +]; + +export var yellow = [ + "cg23_341a00", + "cg34_4b2900", + "cg44_693e00", + "cg52_845306", + "cg59_9e6a03", + "cg67_bb8009", + "cg74_d29922", + "cg80_e3b341", + "cg85_f2cc60", + "cg90_f8e3a1", +]; + +export var orange = [ + "cg28_3d1300", + "cg39_5a1e02", + "cg47_762d0a", + "cg57_9b4215", + "cg69_bd561d", + "cg78_db6d28", + "cg83_f0883e", + "cg97_ffa657", + "cg101_ffc680", + "cg105_ffdfb6", +]; + +export var red = [ + "cg33_490202", + "cg43_67060c", + "cg56_8e1519", + "cg66_b62324", + "cg76_da3633", + "cg89_f85149", + "cg93_ff7b72", + "cg95_ffa198", + "cg99_ffc1ba", + "cg103_ffdcd7", +]; + +export var purple = [ + "cg20_271052", + "cg27_3c1e70", + "cg35_553098", + "cg45_6e40c9", + "cg54_8957e5", + "cg60_a371f7", + "cg68_bc8cff", + "cg75_d2a8ff", + "cg79_e2c5ff", + "cg82_eddeff", +]; + +export var pink = [ + "cg30_42062a", + "cg40_5e103e", + "cg50_7d2457", + "cg58_9e3670", + "cg70_bf4b8a", + "cg77_db61a2", + "cg87_f778ba", + "cg94_ff9bce", + "cg98_ffbedd", + "cg102_ffdaec", +]; + +export var coral = [ + "cg31_460701", + "cg42_640D04", + "cg53_872012", + "cg62_AC3220", + "cg73_CF462D", + "cg81_EA6045", + "cg88_F78166", + "cg96_FFA28B", + "cg100_FFC2B2", + "cg105_ffdfb6", +]; + +export var calendar = [ + "cg26_39d353", + "cg19_26a641", + "cg2_006d32", + "cg10_0e4429", +]; diff --git a/src/methods/opacityGroup.js b/src/methods/opacityGroup.js new file mode 100644 index 0000000..e89c219 --- /dev/null +++ b/src/methods/opacityGroup.js @@ -0,0 +1,67 @@ +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", +]; diff --git a/src/methods/schemeGen.js b/src/methods/schemeGen.js index f75a71d..2e0252c 100644 --- a/src/methods/schemeGen.js +++ b/src/methods/schemeGen.js @@ -1,6 +1,9 @@ /*global chrome*/ +import chroma from "chroma-js"; + import { pintSetNoReload, updateMultiple } from "./helper.js"; import * as qs from "./quickScheme.js"; +import * as settings from "./colorGroups.js"; // function to convert hex to rgb export function hexToRgb(hex) { @@ -81,17 +84,17 @@ export function updateViaQuickScheme(color) { } export function bgGen(color) { - updateMultiple(qs.BG9, color); - updateMultiple(qs.ScaleBlack, generateAccent(color, 10)); - updateMultiple(qs.BG8, generateAccent(color, -10)); - updateMultiple(qs.BG7, generateAccent(color, -20)); - updateMultiple(qs.BG6, generateAccent(color, -30)); - updateMultiple(qs.BG5, generateAccent(color, -50)); - updateMultiple(qs.BG4, generateAccent(color, -70)); - updateMultiple(qs.BG3, generateAccent(color, -90)); - updateMultiple(qs.BG2, generateAccent(color, -110)); - updateMultiple(qs.BG1, generateAccent("#ffffff", 0)); - updateMultiple(qs.BG0, generateAccent(color, -130)); + updateMultiple(settings.cg3_010409, chroma(color).darken().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.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()); + updateMultiple(settings.cg55_8b949e, chroma(color).brighten(1.8).hex()); + 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()); chrome.tabs.reload(); }