xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整WACG适配算法。

Browse Source
This commit is contained in:
徐涛 2025-02-07 09:30:39 +08:00
parent f9f855e818
commit fc340f3f74
6 changed files with 105 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
color-module/src/schemes/q_style/color_set.rs
View File

@ -24,29 +24,34 @@ pub struct ColorSet {
fn fit_to_wacg(reference: &Oklch, neutral_swatch: &NeutralSwatch, ratio: f32) -> Oklch {
let reference_luma = map_oklch_to_luma(reference);
let mut new_target = neutral_swatch.get(reference.l);
let factor: f32 = if reference.l <= 0.5 { 0.01 } else { -0.01 };
let match_wacg = |original: &Oklch<f32>, reference: &Luma| {
let luma = map_oklch_to_luma(original);
luma.relative_contrast(*reference)
};
loop {
let mut fit_contrast = (f32::INFINITY, f32::NEG_INFINITY);
let mut closest_contrast = (f32::INFINITY, f32::NEG_INFINITY);
for scan_lightness in (0..=100).map(|x| x as f32 / 100.0) {
let new_target = neutral_swatch.get(scan_lightness);
let contrast_ratio = match_wacg(&new_target, &reference_luma);
if contrast_ratio >= ratio || new_target.l <= 0.0 || new_target.l >= 1.0 {
break;
if (contrast_ratio - ratio).abs() < (closest_contrast.0 - ratio).abs()
&& scan_lightness > closest_contrast.1
{
closest_contrast = (contrast_ratio, scan_lightness);
}
if contrast_ratio >= ratio
&& (contrast_ratio - ratio).abs() < (closest_contrast.0 - ratio).abs()
{
fit_contrast = (contrast_ratio, scan_lightness);
}
new_target = neutral_swatch.get(if new_target.l + factor <= 0.0 {
0.0
} else if new_target.l + factor >= 1.0 {
1.0
} else {
new_target.l + factor
});
}
new_target
neutral_swatch.get(if fit_contrast.0 == f32::INFINITY {
closest_contrast.1
} else {
fit_contrast.1
})
}
impl ColorSet {
@ -84,6 +89,13 @@ impl ColorSet {
fit_to_wacg(&focus, neutral_swatch, 7.0),
fit_to_wacg(&disabled, neutral_swatch, 7.0),
),
WACGSetting::HighContrast => (
fit_to_wacg(&root, neutral_swatch, 21.0),
fit_to_wacg(&hover, neutral_swatch, 21.0),
fit_to_wacg(&active, neutral_swatch, 21.0),
fit_to_wacg(&focus, neutral_swatch, 21.0),
fit_to_wacg(&disabled, neutral_swatch, 21.0),
),
};
Self {

2
color-module/src/schemes/q_style/scheme_setting.rs
View File

@ -139,6 +139,7 @@ pub enum WACGSetting {
Fixed,
AutomaticAA,
AutomaticAAA,
HighContrast,
}
impl WACGSetting {
@ -147,6 +148,7 @@ impl WACGSetting {
WACGSetting::Fixed => "Fixed".to_string(),
WACGSetting::AutomaticAA => "Automatic AA".to_string(),
WACGSetting::AutomaticAAA => "Automatic AAA".to_string(),
WACGSetting::HighContrast => "High Contrast".to_string(),
}
}
}

73
src/color_functions/color_module.d.ts vendored
View File

@ -62,6 +62,7 @@ export enum WACGSetting {
Fixed = 0,
AutomaticAA = 1,
AutomaticAAA = 2,
HighContrast = 3,
}
export class ColorShifting {
free(): void;
@ -181,6 +182,26 @@ export interface InitOutput {
readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_hue: (a: number) => number;
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
readonly __wbg_swatchschemesetting_free: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
readonly __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
readonly __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
readonly color_categories: () => [number, number, number];
readonly search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_r: (a: number) => number;
readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
@ -188,15 +209,6 @@ export interface InitOutput {
readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_b: (a: number) => number;
readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
readonly color_categories: () => [number, number, number];
readonly search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_hsldifference_free: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_hue: (a: number) => number;
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_saturation: (a: number) => number;
readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_lightness: (a: number) => number;
readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
readonly __wbg_colorshifting_free: (a: number, b: number) => void;
readonly __wbg_get_colorshifting_chroma: (a: number) => number;
readonly __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
@ -228,14 +240,23 @@ export interface InitOutput {
readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_lightness: (a: number) => number;
readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_hue: (a: number) => number;
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
readonly __wbg_hsldifference_free: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_hue: (a: number) => number;
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_saturation: (a: number) => number;
readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_lightness: (a: number) => number;
readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
readonly generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_average: (a: number) => number;
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
readonly series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
readonly tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
readonly tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
@ -250,31 +271,11 @@ export interface InitOutput {
readonly represent_hct: (a: number, b: number) => [number, number, number, number];
readonly hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_average: (a: number) => number;
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
readonly __wbg_differ_free: (a: number, b: number) => void;
readonly __wbg_get_differ_delta: (a: number) => number;
readonly __wbg_set_differ_delta: (a: number, b: number) => void;
readonly __wbg_get_differ_percent: (a: number) => number;
readonly __wbg_set_differ_percent: (a: number, b: number) => void;
readonly __wbg_swatchschemesetting_free: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
readonly __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
readonly __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
readonly __wbindgen_malloc: (a: number, b: number) => number;
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
readonly __wbindgen_exn_store: (a: number) => void;

9
src/color_functions/color_module.js
View File

@ -1202,12 +1202,13 @@ export const ColorExpand = Object.freeze({
Square: 6, "6": "Square",
});
/**
* @enum {0 | 1 | 2}
* @enum {0 | 1 | 2 | 3}
*/
export const WACGSetting = Object.freeze({
Fixed: 0, "0": "Fixed",
AutomaticAA: 1, "1": "AutomaticAA",
AutomaticAAA: 2, "2": "AutomaticAAA",
HighContrast: 3, "3": "HighContrast",
});
const ColorShiftingFinalization = (typeof FinalizationRegistry === 'undefined')
@ -1732,7 +1733,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get hover() {
const ret = wasm.__wbg_get_hsldifference_hue(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_r(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**
@ -1747,7 +1748,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get active() {
const ret = wasm.__wbg_get_hsldifference_saturation(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_g(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**
@ -1762,7 +1763,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get focus() {
const ret = wasm.__wbg_get_hsldifference_lightness(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_b(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**

BIN
src/color_functions/color_module_bg.wasm
View File

Binary file not shown.

72
src/color_functions/color_module_bg.wasm.d.ts vendored
View File

@ -38,6 +38,26 @@ export const darken_absolute: (a: number, b: number, c: number) => [number, numb
export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
export const tint: (a: number, b: number, c: number) => [number, number, number, number];
export const shade: (a: number, b: number, c: number) => [number, number, number, number];
export const __wbg_hctdiffference_free: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_hue: (a: number) => number;
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_chroma: (a: number) => number;
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_lightness: (a: number) => number;
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
export const __wbg_swatchschemesetting_free: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
export const __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
export const __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
export const color_categories: () => [number, number, number];
export const search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_rgbdifference_free: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_r: (a: number) => number;
export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
@ -45,15 +65,6 @@ export const __wbg_get_rgbdifference_g: (a: number) => number;
export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_b: (a: number) => number;
export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
export const color_categories: () => [number, number, number];
export const search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_hsldifference_free: (a: number, b: number) => void;
export const __wbg_get_hsldifference_hue: (a: number) => number;
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
export const __wbg_get_hsldifference_saturation: (a: number) => number;
export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
export const __wbg_get_hsldifference_lightness: (a: number) => number;
export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
export const __wbg_colorshifting_free: (a: number, b: number) => void;
export const __wbg_get_colorshifting_chroma: (a: number) => number;
export const __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
@ -85,14 +96,23 @@ export const __wbg_get_oklchdifference_chroma: (a: number) => number;
export const __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_lightness: (a: number) => number;
export const __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
export const __wbg_hctdiffference_free: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_hue: (a: number) => number;
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_chroma: (a: number) => number;
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_lightness: (a: number) => number;
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
export const __wbg_hsldifference_free: (a: number, b: number) => void;
export const __wbg_get_hsldifference_hue: (a: number) => number;
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
export const __wbg_get_hsldifference_saturation: (a: number) => number;
export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
export const __wbg_get_hsldifference_lightness: (a: number) => number;
export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
export const generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
export const __wbg_mixreversing_free: (a: number, b: number) => void;
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_average: (a: number) => number;
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
export const series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
export const tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
export const tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
@ -107,31 +127,11 @@ export const oklch_to_hex: (a: number, b: number, c: number) => [number, number,
export const represent_hct: (a: number, b: number) => [number, number, number, number];
export const hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_mixreversing_free: (a: number, b: number) => void;
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_average: (a: number) => number;
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
export const __wbg_differ_free: (a: number, b: number) => void;
export const __wbg_get_differ_delta: (a: number) => number;
export const __wbg_set_differ_delta: (a: number, b: number) => void;
export const __wbg_get_differ_percent: (a: number) => number;
export const __wbg_set_differ_percent: (a: number, b: number) => void;
export const __wbg_swatchschemesetting_free: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
export const __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
export const __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
export const __wbindgen_malloc: (a: number, b: number) => number;
export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
export const __wbindgen_exn_store: (a: number) => void;