Compare commits
3 Commits
6b262f536d
...
2c47369772
| Author | SHA1 | Date | |
|---|---|---|---|
|
2c47369772 | ||
|
|
2f51a80c91 | ||
|
|
546ca97b10 |
|
|
@ -45,18 +45,8 @@ impl M2BaselineColors {
|
|||
None,
|
||||
)?,
|
||||
error: M2ColorSet::from_swatch(&error_swatch, &neutral_swatch, dark_baseline, None)?,
|
||||
background: M2ColorSet::from_swatch(
|
||||
&neutral_swatch,
|
||||
&neutral_swatch,
|
||||
dark_baseline,
|
||||
None,
|
||||
)?,
|
||||
surface: M2ColorSet::from_swatch(
|
||||
&neutral_swatch,
|
||||
&neutral_swatch,
|
||||
dark_baseline,
|
||||
None,
|
||||
)?,
|
||||
background: M2ColorSet::surface(&neutral_swatch, dark_baseline)?,
|
||||
surface: M2ColorSet::surface(&neutral_swatch, dark_baseline)?,
|
||||
shadow: map_hsl_to_srgb_hex(&neutral_swatch.tone(SwatchIndex::SI900)),
|
||||
custom_colors: HashMap::new(),
|
||||
neutral_swatch,
|
||||
|
|
|
|||
|
|
@ -48,6 +48,27 @@ impl M2ColorSet {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn surface(neutral: &M2Swatch, dark: bool) -> Result<Self, errors::ColorError> {
|
||||
let root_color_index = if dark {
|
||||
super::swatch::SwatchIndex::SI900
|
||||
} else {
|
||||
super::swatch::SwatchIndex::SI50
|
||||
};
|
||||
if dark {
|
||||
Ok(Self {
|
||||
root: map_hsl_to_srgb_hex(&neutral.desaturated_tone(root_color_index)),
|
||||
variant: map_hsl_to_srgb_hex(&neutral.desaturated_tone(root_color_index + 2)),
|
||||
on: map_hsl_to_srgb_hex(&neutral.tone(super::swatch::SwatchIndex::SI50)),
|
||||
})
|
||||
} else {
|
||||
Ok(Self {
|
||||
root: map_hsl_to_srgb_hex(&neutral.tone(root_color_index)),
|
||||
variant: map_hsl_to_srgb_hex(&neutral.tone(root_color_index - 2)),
|
||||
on: map_hsl_to_srgb_hex(&neutral.tone(super::swatch::SwatchIndex::SI900)),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn to_css_variable(&self, prefix: &str, name: &str) -> Vec<String> {
|
||||
let mut variable_lines = Vec::new();
|
||||
|
||||
|
|
|
|||
154
src/color_functions/color_module.d.ts
vendored
154
src/color_functions/color_module.d.ts
vendored
|
|
@ -7,6 +7,27 @@ export function generate_material_design_2_scheme(primary_color: string, seconda
|
|||
export function generate_q_scheme_automatically(primary_color: string, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
|
||||
export function generate_q_scheme_manually(primary_color: string, secondary_color: string | null | undefined, tertiary_color: string | null | undefined, accent_color: string | null | undefined, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
|
||||
export function generate_swatch_scheme(colors: SwatchEntry[], setting: SwatchSchemeSetting): any;
|
||||
export function q_scheme_color_expanding_methods(): any;
|
||||
export function q_scheme_wacg_settings(): any;
|
||||
export function q_scheme_default_settings(): SchemeSetting;
|
||||
export function shift_hue(color: string, degree: number): string;
|
||||
export function analogous_30(color: string): string[];
|
||||
export function analogous_60(color: string): string[];
|
||||
export function complementary(color: string): string;
|
||||
export function split_complementary(color: string): string[];
|
||||
export function tetradic(color: string): string[];
|
||||
export function triadic(color: string): string[];
|
||||
export function represent_rgb(color: string): Uint8Array;
|
||||
export function rgb_to_hex(r: number, g: number, b: number): string;
|
||||
export function represent_hsl(color: string): Float32Array;
|
||||
export function hsl_to_hex(h: number, s: number, l: number): string;
|
||||
export function represent_lab(color: string): Float32Array;
|
||||
export function lab_to_hex(l: number, a: number, b: number): string;
|
||||
export function represent_oklch(color: string): Float32Array;
|
||||
export function oklch_to_hex(l: number, c: number, h: number): string;
|
||||
export function represent_hct(color: string): Float32Array;
|
||||
export function hct_to_hex(hue: number, chroma: number, tone: number): string;
|
||||
export function wacg_relative_contrast(fg_color: string, bg_color: string): number;
|
||||
export function differ_in_rgb(color: string, other: string): RGBDifference;
|
||||
export function relative_differ_in_rgb(color: string, other: string): RGBDifference;
|
||||
export function differ_in_hsl(color: string, other: string): HSLDifference;
|
||||
|
|
@ -29,27 +50,6 @@ export function swatch_scheme_default_settings(): SwatchSchemeSetting;
|
|||
export function series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
|
||||
export function q_scheme_color_expanding_methods(): any;
|
||||
export function q_scheme_wacg_settings(): any;
|
||||
export function q_scheme_default_settings(): SchemeSetting;
|
||||
export function shift_hue(color: string, degree: number): string;
|
||||
export function analogous_30(color: string): string[];
|
||||
export function analogous_60(color: string): string[];
|
||||
export function complementary(color: string): string;
|
||||
export function split_complementary(color: string): string[];
|
||||
export function tetradic(color: string): string[];
|
||||
export function triadic(color: string): string[];
|
||||
export function represent_rgb(color: string): Uint8Array;
|
||||
export function rgb_to_hex(r: number, g: number, b: number): string;
|
||||
export function represent_hsl(color: string): Float32Array;
|
||||
export function hsl_to_hex(h: number, s: number, l: number): string;
|
||||
export function represent_lab(color: string): Float32Array;
|
||||
export function lab_to_hex(l: number, a: number, b: number): string;
|
||||
export function represent_oklch(color: string): Float32Array;
|
||||
export function oklch_to_hex(l: number, c: number, h: number): string;
|
||||
export function represent_hct(color: string): Float32Array;
|
||||
export function hct_to_hex(hue: number, chroma: number, tone: number): string;
|
||||
export function wacg_relative_contrast(fg_color: string, bg_color: string): number;
|
||||
export enum ColorExpand {
|
||||
Complementary = 0,
|
||||
Analogous = 1,
|
||||
|
|
@ -179,6 +179,55 @@ export interface InitOutput {
|
|||
readonly generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
|
||||
readonly generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
|
||||
readonly generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
|
||||
readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_chroma: (a: number) => number;
|
||||
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_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 q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
readonly q_scheme_wacg_settings: () => [number, number, number];
|
||||
readonly q_scheme_default_settings: () => number;
|
||||
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 shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
readonly analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
readonly complementary: (a: number, b: number) => [number, number, number, number];
|
||||
readonly split_complementary: (a: number, b: number) => [number, number, number, number];
|
||||
readonly tetradic: (a: number, b: number) => [number, number, number, number];
|
||||
readonly triadic: (a: number, b: number) => [number, number, number, number];
|
||||
readonly represent_rgb: (a: number, b: number) => [number, number, number, number];
|
||||
readonly rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_hsl: (a: number, b: number) => [number, number, number, number];
|
||||
readonly hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_lab: (a: number, b: number) => [number, number, number, number];
|
||||
readonly lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_oklch: (a: number, b: number) => [number, number, number, number];
|
||||
readonly oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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_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 differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
|
|
@ -189,41 +238,6 @@ export interface InitOutput {
|
|||
readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_chroma: (a: number) => number;
|
||||
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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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_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_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;
|
||||
|
|
@ -231,6 +245,13 @@ export interface InitOutput {
|
|||
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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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_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;
|
||||
|
|
@ -263,27 +284,6 @@ export interface InitOutput {
|
|||
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];
|
||||
readonly q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
readonly q_scheme_wacg_settings: () => [number, number, number];
|
||||
readonly q_scheme_default_settings: () => number;
|
||||
readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
readonly analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
readonly complementary: (a: number, b: number) => [number, number, number, number];
|
||||
readonly split_complementary: (a: number, b: number) => [number, number, number, number];
|
||||
readonly tetradic: (a: number, b: number) => [number, number, number, number];
|
||||
readonly triadic: (a: number, b: number) => [number, number, number, number];
|
||||
readonly represent_rgb: (a: number, b: number) => [number, number, number, number];
|
||||
readonly rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_hsl: (a: number, b: number) => [number, number, number, number];
|
||||
readonly hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_lab: (a: number, b: number) => [number, number, number, number];
|
||||
readonly lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly represent_oklch: (a: number, b: number) => [number, number, number, number];
|
||||
readonly oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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 __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;
|
||||
|
|
|
|||
|
|
@ -349,6 +349,416 @@ export function generate_swatch_scheme(colors, setting) {
|
|||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_color_expanding_methods() {
|
||||
const ret = wasm.q_scheme_color_expanding_methods();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_wacg_settings() {
|
||||
const ret = wasm.q_scheme_wacg_settings();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SchemeSetting}
|
||||
*/
|
||||
export function q_scheme_default_settings() {
|
||||
const ret = wasm.q_scheme_default_settings();
|
||||
return SchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {number} degree
|
||||
* @returns {string}
|
||||
*/
|
||||
export function shift_hue(color, degree) {
|
||||
let deferred3_0;
|
||||
let deferred3_1;
|
||||
try {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.shift_hue(ptr0, len0, degree);
|
||||
var ptr2 = ret[0];
|
||||
var len2 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr2 = 0; len2 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred3_0 = ptr2;
|
||||
deferred3_1 = len2;
|
||||
return getStringFromWasm0(ptr2, len2);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function getArrayJsValueFromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
const mem = getDataViewMemory0();
|
||||
const result = [];
|
||||
for (let i = ptr; i < ptr + 4 * len; i += 4) {
|
||||
result.push(wasm.__wbindgen_export_4.get(mem.getUint32(i, true)));
|
||||
}
|
||||
wasm.__externref_drop_slice(ptr, len);
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function analogous_30(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.analogous_30(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function analogous_60(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.analogous_60(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string}
|
||||
*/
|
||||
export function complementary(color) {
|
||||
let deferred3_0;
|
||||
let deferred3_1;
|
||||
try {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.complementary(ptr0, len0);
|
||||
var ptr2 = ret[0];
|
||||
var len2 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr2 = 0; len2 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred3_0 = ptr2;
|
||||
deferred3_1 = len2;
|
||||
return getStringFromWasm0(ptr2, len2);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function split_complementary(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.split_complementary(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tetradic(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tetradic(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function triadic(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.triadic(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
function getArrayU8FromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
|
||||
}
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
export function represent_rgb(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_rgb(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} r
|
||||
* @param {number} g
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
export function rgb_to_hex(r, g, b) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.rgb_to_hex(r, g, b);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
let cachedFloat32ArrayMemory0 = null;
|
||||
|
||||
function getFloat32ArrayMemory0() {
|
||||
if (cachedFloat32ArrayMemory0 === null || cachedFloat32ArrayMemory0.byteLength === 0) {
|
||||
cachedFloat32ArrayMemory0 = new Float32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachedFloat32ArrayMemory0;
|
||||
}
|
||||
|
||||
function getArrayF32FromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
return getFloat32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len);
|
||||
}
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_hsl(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_hsl(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} h
|
||||
* @param {number} s
|
||||
* @param {number} l
|
||||
* @returns {string}
|
||||
*/
|
||||
export function hsl_to_hex(h, s, l) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.hsl_to_hex(h, s, l);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_lab(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_lab(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} l
|
||||
* @param {number} a
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
export function lab_to_hex(l, a, b) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.lab_to_hex(l, a, b);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_oklch(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_oklch(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} l
|
||||
* @param {number} c
|
||||
* @param {number} h
|
||||
* @returns {string}
|
||||
*/
|
||||
export function oklch_to_hex(l, c, h) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.oklch_to_hex(l, c, h);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_hct(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_hct(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} hue
|
||||
* @param {number} chroma
|
||||
* @param {number} tone
|
||||
* @returns {string}
|
||||
*/
|
||||
export function hct_to_hex(hue, chroma, tone) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.hct_to_hex(hue, chroma, tone);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} fg_color
|
||||
* @param {string} bg_color
|
||||
* @returns {number}
|
||||
*/
|
||||
export function wacg_relative_contrast(fg_color, bg_color) {
|
||||
const ptr0 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ptr1 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len1 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.wacg_relative_contrast(ptr0, len0, ptr1, len1);
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return ret[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {string} other
|
||||
|
|
@ -704,16 +1114,6 @@ export function shade(color, percent) {
|
|||
}
|
||||
}
|
||||
|
||||
function getArrayJsValueFromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
const mem = getDataViewMemory0();
|
||||
const result = [];
|
||||
for (let i = ptr; i < ptr + 4 * len; i += 4) {
|
||||
result.push(wasm.__wbindgen_export_4.get(mem.getUint32(i, true)));
|
||||
}
|
||||
wasm.__externref_drop_slice(ptr, len);
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* @param {string} reference_color
|
||||
* @param {number} swatch_amount
|
||||
|
|
@ -797,406 +1197,6 @@ export function tonal_darken_series(color, expand_amount, step) {
|
|||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_color_expanding_methods() {
|
||||
const ret = wasm.q_scheme_color_expanding_methods();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_wacg_settings() {
|
||||
const ret = wasm.q_scheme_wacg_settings();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SchemeSetting}
|
||||
*/
|
||||
export function q_scheme_default_settings() {
|
||||
const ret = wasm.q_scheme_default_settings();
|
||||
return SchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {number} degree
|
||||
* @returns {string}
|
||||
*/
|
||||
export function shift_hue(color, degree) {
|
||||
let deferred3_0;
|
||||
let deferred3_1;
|
||||
try {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.shift_hue(ptr0, len0, degree);
|
||||
var ptr2 = ret[0];
|
||||
var len2 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr2 = 0; len2 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred3_0 = ptr2;
|
||||
deferred3_1 = len2;
|
||||
return getStringFromWasm0(ptr2, len2);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function analogous_30(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.analogous_30(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function analogous_60(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.analogous_60(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string}
|
||||
*/
|
||||
export function complementary(color) {
|
||||
let deferred3_0;
|
||||
let deferred3_1;
|
||||
try {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.complementary(ptr0, len0);
|
||||
var ptr2 = ret[0];
|
||||
var len2 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr2 = 0; len2 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred3_0 = ptr2;
|
||||
deferred3_1 = len2;
|
||||
return getStringFromWasm0(ptr2, len2);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function split_complementary(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.split_complementary(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tetradic(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tetradic(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function triadic(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.triadic(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayJsValueFromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
function getArrayU8FromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
|
||||
}
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
export function represent_rgb(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_rgb(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} r
|
||||
* @param {number} g
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
export function rgb_to_hex(r, g, b) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.rgb_to_hex(r, g, b);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
let cachedFloat32ArrayMemory0 = null;
|
||||
|
||||
function getFloat32ArrayMemory0() {
|
||||
if (cachedFloat32ArrayMemory0 === null || cachedFloat32ArrayMemory0.byteLength === 0) {
|
||||
cachedFloat32ArrayMemory0 = new Float32Array(wasm.memory.buffer);
|
||||
}
|
||||
return cachedFloat32ArrayMemory0;
|
||||
}
|
||||
|
||||
function getArrayF32FromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
return getFloat32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len);
|
||||
}
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_hsl(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_hsl(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} h
|
||||
* @param {number} s
|
||||
* @param {number} l
|
||||
* @returns {string}
|
||||
*/
|
||||
export function hsl_to_hex(h, s, l) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.hsl_to_hex(h, s, l);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_lab(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_lab(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} l
|
||||
* @param {number} a
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
export function lab_to_hex(l, a, b) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.lab_to_hex(l, a, b);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_oklch(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_oklch(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} l
|
||||
* @param {number} c
|
||||
* @param {number} h
|
||||
* @returns {string}
|
||||
*/
|
||||
export function oklch_to_hex(l, c, h) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.oklch_to_hex(l, c, h);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @returns {Float32Array}
|
||||
*/
|
||||
export function represent_hct(color) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.represent_hct(ptr0, len0);
|
||||
if (ret[3]) {
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
var v2 = getArrayF32FromWasm0(ret[0], ret[1]).slice();
|
||||
wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
|
||||
return v2;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} hue
|
||||
* @param {number} chroma
|
||||
* @param {number} tone
|
||||
* @returns {string}
|
||||
*/
|
||||
export function hct_to_hex(hue, chroma, tone) {
|
||||
let deferred2_0;
|
||||
let deferred2_1;
|
||||
try {
|
||||
const ret = wasm.hct_to_hex(hue, chroma, tone);
|
||||
var ptr1 = ret[0];
|
||||
var len1 = ret[1];
|
||||
if (ret[3]) {
|
||||
ptr1 = 0; len1 = 0;
|
||||
throw takeFromExternrefTable0(ret[2]);
|
||||
}
|
||||
deferred2_0 = ptr1;
|
||||
deferred2_1 = len1;
|
||||
return getStringFromWasm0(ptr1, len1);
|
||||
} finally {
|
||||
wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} fg_color
|
||||
* @param {string} bg_color
|
||||
* @returns {number}
|
||||
*/
|
||||
export function wacg_relative_contrast(fg_color, bg_color) {
|
||||
const ptr0 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ptr1 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len1 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.wacg_relative_contrast(ptr0, len0, ptr1, len1);
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return ret[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* @enum {0 | 1 | 2 | 3 | 4 | 5 | 6}
|
||||
*/
|
||||
|
|
|
|||
Binary file not shown.
112
src/color_functions/color_module_bg.wasm.d.ts
vendored
112
src/color_functions/color_module_bg.wasm.d.ts
vendored
|
|
@ -32,6 +32,55 @@ export const generate_material_design_2_scheme: (a: number, b: number, c: number
|
|||
export const generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
|
||||
export const generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
|
||||
export const generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
|
||||
export const __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
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_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 q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
export const q_scheme_wacg_settings: () => [number, number, number];
|
||||
export const q_scheme_default_settings: () => number;
|
||||
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 shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
export const analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
export const complementary: (a: number, b: number) => [number, number, number, number];
|
||||
export const split_complementary: (a: number, b: number) => [number, number, number, number];
|
||||
export const tetradic: (a: number, b: number) => [number, number, number, number];
|
||||
export const triadic: (a: number, b: number) => [number, number, number, number];
|
||||
export const represent_rgb: (a: number, b: number) => [number, number, number, number];
|
||||
export const rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_hsl: (a: number, b: number) => [number, number, number, number];
|
||||
export const hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_lab: (a: number, b: number) => [number, number, number, number];
|
||||
export const lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_oklch: (a: number, b: number) => [number, number, number, number];
|
||||
export const oklch_to_hex: (a: number, b: number, c: number) => [number, 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_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 differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
|
|
@ -42,41 +91,6 @@ export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [n
|
|||
export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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_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_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;
|
||||
|
|
@ -84,6 +98,13 @@ 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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
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_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;
|
||||
|
|
@ -116,27 +137,6 @@ export const swatch_scheme_default_settings: () => number;
|
|||
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];
|
||||
export const q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
export const q_scheme_wacg_settings: () => [number, number, number];
|
||||
export const q_scheme_default_settings: () => number;
|
||||
export const shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
export const analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
export const complementary: (a: number, b: number) => [number, number, number, number];
|
||||
export const split_complementary: (a: number, b: number) => [number, number, number, number];
|
||||
export const tetradic: (a: number, b: number) => [number, number, number, number];
|
||||
export const triadic: (a: number, b: number) => [number, number, number, number];
|
||||
export const represent_rgb: (a: number, b: number) => [number, number, number, number];
|
||||
export const rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_hsl: (a: number, b: number) => [number, number, number, number];
|
||||
export const hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_lab: (a: number, b: number) => [number, number, number, number];
|
||||
export const lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const represent_oklch: (a: number, b: number) => [number, number, number, number];
|
||||
export const oklch_to_hex: (a: number, b: number, c: number) => [number, 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 __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;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import { isEqual, isNil } from 'lodash-es';
|
|||
import { useState } from 'react';
|
||||
import { Tab } from '../../components/Tab';
|
||||
import { SchemeExport } from './Export';
|
||||
import { M2SchemeBuilder } from './m2-scheme/Builder';
|
||||
import { M2SchemePreview } from './m2-scheme/Preview';
|
||||
|
||||
const tabOptions = [
|
||||
{ title: 'Overview', id: 'overview' },
|
||||
|
|
@ -21,8 +23,10 @@ export function M2Scheme({ scheme }: M3SchemeProps) {
|
|||
return (
|
||||
<>
|
||||
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
|
||||
{isEqual(activeTab, 'overview') && <div>Preview</div>}
|
||||
{isEqual(activeTab, 'builder') && <div>Builder</div>}
|
||||
{isEqual(activeTab, 'overview') && <M2SchemePreview scheme={scheme} />}
|
||||
{isEqual(activeTab, 'builder') && (
|
||||
<M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />
|
||||
)}
|
||||
{isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
46
src/page-components/scheme/m2-scheme/Builder.module.css
Normal file
46
src/page-components/scheme/m2-scheme/Builder.module.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@layer pages {
|
||||
.builder_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 200px);
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
.label {
|
||||
max-width: 200px;
|
||||
grid-column: 1;
|
||||
padding-inline-end: var(--spacing-m);
|
||||
text-align: right;
|
||||
}
|
||||
.segment_title {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
}
|
||||
.color_picker_row {
|
||||
grid-column: 2 / span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
.error_msg {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.delete_btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-yuebai);
|
||||
background-color: oklch(from var(--color-danger) l c h / 0.25);
|
||||
&:hover {
|
||||
background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
|
||||
}
|
||||
&:active {
|
||||
background-color: oklch(from var(--color-danger-active) l c h / 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
175
src/page-components/scheme/m2-scheme/Builder.tsx
Normal file
175
src/page-components/scheme/m2-scheme/Builder.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import { includes, isEmpty, isNil, merge } from 'lodash-es';
|
||||
import { useActionState, useCallback, useMemo, useState } from 'react';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { MaterialDesign2SchemeStorage } from '../../../material-2-scheme';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import { useUpdateScheme } from '../../../stores/schemes';
|
||||
import { mapToObject } from '../../../utls';
|
||||
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
|
||||
import styles from './Builder.module.css';
|
||||
|
||||
type M2SchemeBuilderProps = {
|
||||
scheme: SchemeContent<MaterialDesign2SchemeStorage>;
|
||||
onBuildComplete?: () => void;
|
||||
};
|
||||
|
||||
export function M2SchemeBuilder({ scheme, onBuildComplete }: M2SchemeBuilderProps) {
|
||||
const { colorFn } = useColorFunction();
|
||||
const updateScheme = useUpdateScheme(scheme.id);
|
||||
const originalColors = useMemo(() => {
|
||||
return Object.entries(scheme.schemeStorage.source?.custom_colors ?? {}).map(
|
||||
([name, color], index) => ({ id: `oc_${index}`, name, color } as IdenticalColorEntry),
|
||||
);
|
||||
}, [scheme.schemeStorage.source]);
|
||||
const [newColors, setNewColors] = useState<IdenticalColorEntry[]>([]);
|
||||
const [deleted, setDeleted] = useState<string[]>([]);
|
||||
const addEntryAction = useCallback(() => {
|
||||
setNewColors((prev) => [...prev, { id: `nc_${prev.length}`, name: '', color: '' }]);
|
||||
}, []);
|
||||
const colorKeys = useMemo(
|
||||
() =>
|
||||
[...originalColors, ...newColors]
|
||||
.map((color) => color.id)
|
||||
.filter((c) => !includes(deleted, c)),
|
||||
[originalColors, newColors, deleted],
|
||||
);
|
||||
|
||||
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
|
||||
const errMsg = new Map<string, string>();
|
||||
try {
|
||||
const primaryColor = formData.get('primary');
|
||||
if (isNil(primaryColor) || isEmpty(primaryColor)) {
|
||||
errMsg.set('primary', 'Primary color is required');
|
||||
}
|
||||
const secondaryColor = formData.get('secondary');
|
||||
if (isNil(secondaryColor) || isEmpty(secondaryColor)) {
|
||||
errMsg.set('secondary', 'Secondary color is required');
|
||||
}
|
||||
const errorColor = formData.get('error');
|
||||
if (isNil(errorColor) || isEmpty(errorColor)) {
|
||||
errMsg.set('error', 'Error color is required');
|
||||
}
|
||||
if (!isEmpty(errMsg)) return errMsg;
|
||||
|
||||
const customColors: Record<string, string> = {};
|
||||
for (const key of colorKeys) {
|
||||
const name = formData.get(`name_${key}`) as string;
|
||||
const color = formData.get(`color_${key}`) as string;
|
||||
if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
|
||||
customColors[name] = color;
|
||||
}
|
||||
const generatedScheme = colorFn?.generate_material_design_2_scheme(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
errorColor,
|
||||
customColors,
|
||||
);
|
||||
updateScheme((prev) => {
|
||||
prev.schemeStorage.source = {
|
||||
primary: primaryColor,
|
||||
secondary: secondaryColor,
|
||||
error: errorColor,
|
||||
custom_colors: customColors,
|
||||
};
|
||||
prev.schemeStorage.scheme = merge(generatedScheme[0], {
|
||||
light: { custom_colors: mapToObject(generatedScheme[0].light.custom_colors) },
|
||||
dark: { custom_colors: mapToObject(generatedScheme[0].dark.custom_colors) },
|
||||
});
|
||||
prev.schemeStorage.cssVariables = generatedScheme[1];
|
||||
prev.schemeStorage.scssVariables = generatedScheme[2];
|
||||
prev.schemeStorage.jsVariables = generatedScheme[3];
|
||||
return prev;
|
||||
});
|
||||
|
||||
onBuildComplete?.();
|
||||
} catch (e) {
|
||||
console.error('[generate m2 scheme]', e);
|
||||
}
|
||||
|
||||
return errMsg;
|
||||
}, new Map<string, string>());
|
||||
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<form action={handleSubmitAction} className={styles.builder_layout}>
|
||||
<h5 className={styles.segment_title}>Required Colors</h5>
|
||||
<label className={styles.label}>Primary Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="primary"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.primary) ||
|
||||
isEmpty(scheme.schemeStorage.source?.primary)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source.primary
|
||||
}
|
||||
/>
|
||||
{errMsg.get('primary') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('primary')}</span>
|
||||
)}
|
||||
</div>
|
||||
<label className={styles.label}>Secondary Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="secondary"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.secondary) ||
|
||||
isEmpty(scheme.schemeStorage.source.secondary)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source.secondary
|
||||
}
|
||||
/>
|
||||
{errMsg.get('secondary') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('secondary')}</span>
|
||||
)}
|
||||
</div>
|
||||
<label className={styles.label}>Error Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="error"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.error) ||
|
||||
isEmpty(scheme.schemeStorage.source.error)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source.error
|
||||
}
|
||||
/>
|
||||
{errMsg.get('error') && <span className={styles.error_msg}>{errMsg.get('error')}</span>}
|
||||
</div>
|
||||
<h5 className={styles.segment_title}>Custom Colors</h5>
|
||||
<label style={{ gridColumn: 1 }}>Name</label>
|
||||
<label>Color</label>
|
||||
<div>
|
||||
<button type="button" className="small" onClick={addEntryAction}>
|
||||
Add Color
|
||||
</button>
|
||||
</div>
|
||||
{originalColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
{newColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<button type="submit" className="primary">
|
||||
Build Scheme
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
41
src/page-components/scheme/m2-scheme/Preview.module.css
Normal file
41
src/page-components/scheme/m2-scheme/Preview.module.css
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@layer pages {
|
||||
.preview_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.preview_block {
|
||||
width: inherit;
|
||||
padding: var(--spacing-m) var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.1em;
|
||||
h4 {
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: bold;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
.horizontal_set {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
.color_block {
|
||||
padding: var(--spacing-s) var(--spacing-xs);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
.wacg {
|
||||
font-size: var(--font-size-xxs);
|
||||
}
|
||||
}
|
||||
}
|
||||
94
src/page-components/scheme/m2-scheme/Preview.tsx
Normal file
94
src/page-components/scheme/m2-scheme/Preview.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { Baseline, ColorSet, MaterialDesign2SchemeStorage } from '../../../material-2-scheme';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import styles from './Preview.module.css';
|
||||
|
||||
type M2SchemeFunctionColorProps = {
|
||||
title: string;
|
||||
color: ColorSet;
|
||||
};
|
||||
|
||||
function M2SchemeFunctionColor({ title, color }: M2SchemeFunctionColorProps) {
|
||||
const { colorFn } = useColorFunction();
|
||||
const rootWacgRatio = useMemo(() => {
|
||||
try {
|
||||
return colorFn?.wacg_relative_contrast(color.on, color.root) ?? null;
|
||||
} catch (e) {
|
||||
console.error('[calc root wacg]', e);
|
||||
}
|
||||
return null;
|
||||
}, [colorFn, color.on, color.root]);
|
||||
const variantWacgRatio = useMemo(() => {
|
||||
try {
|
||||
return colorFn?.wacg_relative_contrast(color.on, color.variant) ?? null;
|
||||
} catch (e) {
|
||||
console.error('[calc variant wacg]', e);
|
||||
}
|
||||
return null;
|
||||
}, [colorFn, color.on, color.variant]);
|
||||
|
||||
return (
|
||||
<div className={styles.horizontal_set}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${color.root}`, color: `#${color.on}` }}>
|
||||
<span>{title}</span>
|
||||
<span className={styles.wacg}>WACG: {rootWacgRatio?.toFixed(2)}</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${color.variant}`, color: `#${color.on}` }}>
|
||||
<span>{title} Variant</span>
|
||||
<span className={styles.wacg}>WACG: {variantWacgRatio?.toFixed(2)}</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${color.on}`, color: `#${color.root}` }}>
|
||||
On {title}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type PreviewBlockProps = {
|
||||
title: string;
|
||||
baseline: Baseline;
|
||||
};
|
||||
|
||||
function PreviewBlock({ title, baseline }: PreviewBlockProps) {
|
||||
return (
|
||||
<div
|
||||
className={styles.preview_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.background.root}`,
|
||||
color: `#${baseline.background.on}`,
|
||||
}}>
|
||||
<h4>{title} Scheme</h4>
|
||||
<M2SchemeFunctionColor title="Primary" color={baseline.primary} />
|
||||
<M2SchemeFunctionColor title="Secondary" color={baseline.secondary} />
|
||||
<M2SchemeFunctionColor title="Error" color={baseline.error} />
|
||||
<M2SchemeFunctionColor title="Background" color={baseline.background} />
|
||||
<M2SchemeFunctionColor title="Surface" color={baseline.surface} />
|
||||
{Object.entries(baseline.custom_colors).map(([name, set], index) => (
|
||||
<M2SchemeFunctionColor key={index} title={name} color={set} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type M2SchemePreviewProps = {
|
||||
scheme: SchemeContent<MaterialDesign2SchemeStorage>;
|
||||
};
|
||||
|
||||
export function M2SchemePreview({ scheme }: M2SchemePreviewProps) {
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<div className={styles.preview_layout}>
|
||||
<PreviewBlock title="Light" baseline={scheme.schemeStorage.scheme?.light} />
|
||||
<PreviewBlock title="Dark" baseline={scheme.schemeStorage.scheme?.dark} />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user