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

Compare commits

base: xt:b124bb4eda840f0b4d418916066fedb460878aa8
Branches Tags
xt:main
xt:wasm-load
...
compare: xt:e9c2d4cb162c42542d6d9a120ceed694826d3b6f
Branches Tags
xt:main
xt:wasm-load

16 Commits
b124bb4eda ... e9c2d4cb16

Author SHA1 Message Date
徐涛
e9c2d4cb16 完成Q Scheme的导出复制功能。 2025-02-07 09:56:40 +08:00
徐涛
2acb69da20 增加pre元素的默认样式。 2025-02-07 09:56:28 +08:00
徐涛
9664983b5c 增加复制文字内容到剪贴板的功能。 2025-02-07 09:56:17 +08:00
徐涛
fc340f3f74 调整WACG适配算法。 2025-02-07 09:30:39 +08:00
徐涛
f9f855e818 调整Q Scheme构造组件对于已记录值的获取和处理。 2025-02-07 09:01:26 +08:00
徐涛
853b9b6b75 调整Q Scheme设置参数的保存类型。 2025-02-07 09:00:53 +08:00
徐涛
41788c4944 改进枚举内容的序列化输出。 2025-02-07 09:00:06 +08:00
徐涛
2bc250fc3d 去掉调试信息，改进结构体序列化方法。 2025-02-07 08:28:50 +08:00
徐涛
7468e28928 调整Q Scheme颜色单元格预览内容格式。 2025-02-07 08:18:21 +08:00
徐涛
ca83ce082b 修改默认导出函数的名称。 2025-02-07 08:14:38 +08:00
徐涛
89b2a2f9d9 增加将Q Scheme配置转换为普通JS对象的方法。 2025-02-07 08:12:45 +08:00
徐涛
74dd9e7354 完成Q Scheme预览功能。 2025-02-07 06:23:43 +08:00
徐涛
592244911f 综合调整Q Scheme的生成算法。 2025-02-07 06:23:16 +08:00
徐涛
08fabb53a2 调整Q Scheme暗色模式前景色和背景色的生成，以及颜色调整系数的使用。 2025-02-06 17:26:45 +08:00
徐涛
0350380df6 Tab增加被动切换标签页的功能。 2025-02-06 16:41:12 +08:00
徐涛
32d8457802 Q Scheme Builder增加用于通知Scheme构建完成的事件。 2025-02-06 14:31:22 +08:00
20 changed files with 936 additions and 603 deletions
Show Stats Expand all files Collapse all files

1
color-module/Cargo.toml
View File

@ -13,6 +13,7 @@ palette = { version = "0.7.6", features = ["serde"] }
serde = { version = "1.0.216", features = ["derive"] }
serde-wasm-bindgen = "0.6.5"
serde_json = "1.0.134"
serde_repr = "0.1.19"
strum = { version = "0.26.3", features = ["derive", "strum_macros"] }
strum_macros = "0.26.4"
thiserror = "2.0.9"

23
color-module/src/schemes/q_style/baseline.rs
View File

@ -48,16 +48,19 @@ impl Baseline {
let outline_color = neutral_swatch.get(background.l * 0.7);
Self {
primary: ColorSet::new(primary, &neutral_swatch, &setting),
secondary: secondary.map(|color| ColorSet::new(&color, &neutral_swatch, &setting)),
tertiary: tertiary.map(|color| ColorSet::new(&color, &neutral_swatch, &setting)),
accent: accent.map(|color| ColorSet::new(&color, &neutral_swatch, &setting)),
neutral: ColorSet::new(&neutral_color, &neutral_swatch, &setting),
danger: ColorSet::new(danger, &neutral_swatch, &setting),
success: ColorSet::new(success, &neutral_swatch, &setting),
warning: ColorSet::new(warning, &neutral_swatch, &setting),
info: ColorSet::new(info, &neutral_swatch, &setting),
outline: ColorSet::new(&outline_color, &neutral_swatch, &setting),
primary: ColorSet::new(primary, &neutral_swatch, foreground.l, &setting),
secondary: secondary
.map(|color| ColorSet::new(&color, &neutral_swatch, foreground.l, &setting)),
tertiary: tertiary
.map(|color| ColorSet::new(&color, &neutral_swatch, foreground.l, &setting)),
accent: accent
.map(|color| ColorSet::new(&color, &neutral_swatch, foreground.l, &setting)),
neutral: ColorSet::new(&neutral_color, &neutral_swatch, foreground.l, &setting),
danger: ColorSet::new(danger, &neutral_swatch, foreground.l, &setting),
success: ColorSet::new(success, &neutral_swatch, foreground.l, &setting),
warning: ColorSet::new(warning, &neutral_swatch, foreground.l, &setting),
info: ColorSet::new(info, &neutral_swatch, foreground.l, &setting),
outline: ColorSet::new(&outline_color, &neutral_swatch, foreground.l, &setting),
foreground: *foreground,
background: *background,
_neutral_swatch: neutral_swatch,

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

@ -24,43 +24,43 @@ 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)
};
let mut last_contrast_ratio = 0.0;
let mut repeat_count = 0;
let mut target_ratio = ratio;
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 >= target_ratio {
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 - last_contrast_ratio).abs() / last_contrast_ratio < 0.001 {
repeat_count += 1;
if repeat_count > 20 {
target_ratio *= 1.0 - 0.01;
repeat_count = 0;
}
} else {
repeat_count = 0;
if contrast_ratio >= ratio
&& (contrast_ratio - ratio).abs() < (closest_contrast.0 - ratio).abs()
{
fit_contrast = (contrast_ratio, scan_lightness);
}
last_contrast_ratio = contrast_ratio;
new_target = Oklch {
l: new_target.l * (1.0 + factor),
..new_target
};
}
new_target
neutral_swatch.get(if fit_contrast.0 == f32::INFINITY {
closest_contrast.1
} else {
fit_contrast.1
})
}
impl ColorSet {
pub fn new(color: &Oklch, neutral_swatch: &NeutralSwatch, setting: &SchemeSetting) -> Self {
pub fn new(
color: &Oklch,
neutral_swatch: &NeutralSwatch,
foreground_lightness: f32,
setting: &SchemeSetting,
) -> Self {
let root = color.clone();
let hover = color * setting.hover;
let active = color * setting.active;
@ -69,11 +69,11 @@ impl ColorSet {
let (on_root, on_hover, on_active, on_focus, on_disabled) = match setting.wacg_follows {
WACGSetting::Fixed => (
neutral_swatch.get(root.l),
neutral_swatch.get(hover.l),
neutral_swatch.get(active.l),
neutral_swatch.get(focus.l),
neutral_swatch.get(disabled.l),
neutral_swatch.get(foreground_lightness),
neutral_swatch.get(foreground_lightness),
neutral_swatch.get(foreground_lightness),
neutral_swatch.get(foreground_lightness),
neutral_swatch.get(foreground_lightness),
),
WACGSetting::AutomaticAA => (
fit_to_wacg(&root, neutral_swatch, 4.5),
@ -89,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 {

6
color-module/src/schemes/q_style/mod.rs
View File

@ -58,8 +58,8 @@ impl QScheme {
&(success * setting.dark_convert),
&(warning * setting.dark_convert),
&(info * setting.dark_convert),
&(foreground * setting.dark_convert),
&(background * setting.dark_convert),
&(&background * (setting.dark_convert / 2.0)),
&(&foreground * setting.dark_convert),
setting.clone(),
),
})
@ -112,7 +112,7 @@ impl QScheme {
&(success * setting.dark_convert),
&(warning * setting.dark_convert),
&(info * setting.dark_convert),
&(foreground * setting.dark_convert),
&(foreground * (setting.dark_convert / 2.0)),
&(background * setting.dark_convert),
setting.clone(),
),

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

@ -1,10 +1,11 @@
use std::ops::Mul;
use std::ops::{Div, Mul};
use enum_iterator::Sequence;
use palette::Oklch;
use serde::{Deserialize, Serialize};
use serde_repr::{Deserialize_repr, Serialize_repr};
use strum::Display;
use wasm_bindgen::prelude::wasm_bindgen;
use wasm_bindgen::{prelude::wasm_bindgen, JsError, JsValue};
#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
#[wasm_bindgen]
@ -19,6 +20,11 @@ impl ColorShifting {
pub fn new(chroma: f32, lightness: f32) -> Self {
ColorShifting { chroma, lightness }
}
#[wasm_bindgen(js_name = toJsValue)]
pub fn to_js_value(&self) -> Result<JsValue, JsError> {
Ok(serde_wasm_bindgen::to_value(self)?)
}
}
impl Mul<ColorShifting> for Oklch<f32> {
@ -30,13 +36,13 @@ impl Mul<ColorShifting> for Oklch<f32> {
+ if rhs.lightness > 0.0 {
(1.0 - self.l) * rhs.lightness
} else {
self.l * rhs.lightness * -1.0
self.l * rhs.lightness
},
self.chroma
+ if rhs.chroma > 0.0 {
(100.0 - self.chroma) * rhs.chroma
} else {
-(self.chroma * rhs.chroma)
self.chroma * rhs.chroma
},
self.hue,
)
@ -52,19 +58,41 @@ impl Mul<ColorShifting> for &Oklch<f32> {
+ if rhs.lightness > 0.0 {
(1.0 - self.l) * rhs.lightness
} else {
self.l * rhs.lightness * -1.0
self.l * rhs.lightness
},
self.chroma
+ if rhs.chroma > 0.0 {
(100.0 - self.chroma) * rhs.chroma
} else {
-(self.chroma * rhs.chroma)
self.chroma * rhs.chroma
},
self.hue,
)
}
}
impl Div<f32> for ColorShifting {
type Output = ColorShifting;
fn div(self, rhs: f32) -> Self::Output {
ColorShifting {
chroma: self.chroma / rhs,
lightness: self.lightness / rhs,
}
}
}
impl Div<f32> for &ColorShifting {
type Output = ColorShifting;
fn div(self, rhs: f32) -> Self::Output {
ColorShifting {
chroma: self.chroma / rhs,
lightness: self.lightness / rhs,
}
}
}
#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
#[wasm_bindgen]
pub struct SchemeSetting {
@ -77,7 +105,7 @@ pub struct SchemeSetting {
pub wacg_follows: WACGSetting,
}
#[derive(Debug, Clone, Copy, Display, Sequence, Serialize, Deserialize)]
#[derive(Debug, Clone, Copy, Display, Sequence, Serialize_repr, Deserialize_repr)]
#[wasm_bindgen]
#[repr(u8)]
pub enum ColorExpand {
@ -104,13 +132,14 @@ impl ColorExpand {
}
}
#[derive(Debug, Clone, Copy, Display, Sequence, Serialize, Deserialize)]
#[derive(Debug, Clone, Copy, Display, Sequence, Serialize_repr, Deserialize_repr)]
#[wasm_bindgen]
#[repr(u8)]
pub enum WACGSetting {
Fixed,
AutomaticAA,
AutomaticAAA,
HighContrast,
}
impl WACGSetting {
@ -119,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(),
}
}
}
@ -140,7 +170,7 @@ impl Default for SchemeSetting {
},
disabled: ColorShifting {
chroma: -0.9,
lightness: -0.2,
lightness: 0.2,
},
dark_convert: ColorShifting {
chroma: -0.3,
@ -174,4 +204,9 @@ impl SchemeSetting {
wacg_follows,
}
}
#[wasm_bindgen(js_name = toJsValue)]
pub fn to_js_value(&self) -> Result<JsValue, JsError> {
Ok(serde_wasm_bindgen::to_value(self)?)
}
}

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

@ -1,5 +1,17 @@
/* tslint:disable */
/* eslint-disable */
export function generate_material_design_3_scheme(source_color: string, error_color: string, custom_colors: any): any;
export function generate_material_design_2_scheme(primary_color: string, secondary_color: string, error_color: string, custom_colors: any): any;
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 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 q_scheme_color_expanding_methods(): any;
export function q_scheme_wacg_settings(): any;
export function q_scheme_default_settings(): SchemeSetting;
@ -13,21 +25,6 @@ export function differ_in_oklch(color: string, other: string): OklchDifference;
export function relative_differ_in_oklch(color: string, other: string): OklchDifference;
export function tint_scale(basic_color: string, mixed_color: string): MixReversing;
export function shade_scale(basic_color: string, mixed_color: string): MixReversing;
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 generate_palette_from_color(reference_color: string, swatch_amount: number, minimum_lightness: number, maximum_lightness: number, use_reference_color?: boolean | null, reference_color_bias?: number | null): string[];
export function color_categories(): any;
export function search_color_cards(tag: string, category?: string | null): any;
export function generate_material_design_3_scheme(source_color: string, error_color: string, custom_colors: any): any;
export function generate_material_design_2_scheme(primary_color: string, secondary_color: string, error_color: string, custom_colors: any): any;
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 lighten(color: string, percent: number): string;
export function lighten_absolute(color: string, value: number): string;
export function darken(color: string, percent: number): string;
@ -35,6 +32,9 @@ export function darken_absolute(color: string, value: number): string;
export function mix(color1: string, color2: string, percent: number): string;
export function tint(color: string, percent: number): string;
export function shade(color: string, percent: number): string;
export function color_categories(): any;
export function search_color_cards(tag: string, category?: string | null): any;
export function generate_palette_from_color(reference_color: string, swatch_amount: number, minimum_lightness: number, maximum_lightness: number, use_reference_color?: boolean | null, reference_color_bias?: number | null): string[];
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[];
@ -62,10 +62,12 @@ export enum WACGSetting {
Fixed = 0,
AutomaticAA = 1,
AutomaticAAA = 2,
HighContrast = 3,
}
export class ColorShifting {
free(): void;
constructor(chroma: number, lightness: number);
toJsValue(): any;
chroma: number;
lightness: number;
}
@ -114,6 +116,7 @@ export class RGBDifference {
export class SchemeSetting {
free(): void;
constructor(hover: ColorShifting, active: ColorShifting, focus: ColorShifting, disabled: ColorShifting, dark_convert: ColorShifting, expand_method: ColorExpand, wacg_follows: WACGSetting);
toJsValue(): any;
hover: ColorShifting;
active: ColorShifting;
focus: ColorShifting;
@ -142,6 +145,23 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
export interface InitOutput {
readonly memory: WebAssembly.Memory;
readonly __wbg_swatchentry_free: (a: number, b: number) => void;
readonly __wbg_get_swatchentry_name: (a: number) => [number, number];
readonly __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
readonly __wbg_get_swatchentry_color: (a: number) => [number, number];
readonly __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
readonly generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
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 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 q_scheme_color_expanding_methods: () => [number, number, number];
readonly q_scheme_wacg_settings: () => [number, number, number];
readonly q_scheme_default_settings: () => number;
@ -155,26 +175,13 @@ 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 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 __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_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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
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;
@ -182,20 +189,36 @@ export interface InitOutput {
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;
readonly __wbg_get_rgbdifference_g: (a: number) => number;
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 __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;
readonly __wbg_get_colorshifting_lightness: (a: number) => number;
readonly __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
readonly colorshifting_new: (a: number, b: number) => number;
readonly colorshifting_toJsValue: (a: number) => [number, number, number];
readonly __wbg_schemesetting_free: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_hover: (a: number) => number;
readonly __wbg_set_schemesetting_hover: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_active: (a: number) => number;
readonly __wbg_set_schemesetting_active: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_focus: (a: number) => number;
readonly __wbg_set_schemesetting_focus: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_disabled: (a: number) => number;
readonly __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
@ -206,11 +229,25 @@ export interface InitOutput {
readonly __wbg_get_schemesetting_wacg_follows: (a: number) => number;
readonly __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
readonly schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
readonly generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
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 schemesetting_toJsValue: (a: number) => [number, number, number];
readonly __wbg_get_schemesetting_hover: (a: number) => number;
readonly __wbg_get_schemesetting_active: (a: number) => number;
readonly __wbg_get_schemesetting_focus: (a: 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_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;
@ -220,25 +257,6 @@ export interface InitOutput {
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_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;
readonly __wbg_get_rgbdifference_g: (a: number) => number;
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 __wbg_swatchentry_free: (a: number, b: number) => void;
readonly __wbg_get_swatchentry_name: (a: number) => [number, number];
readonly __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
readonly __wbg_get_swatchentry_color: (a: number) => [number, number];
readonly __wbg_set_swatchentry_color: (a: number, b: number, c: 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 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];
@ -253,31 +271,18 @@ 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_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_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 __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 __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;
readonly __externref_table_alloc: () => number;
readonly __wbindgen_export_4: WebAssembly.Table;
readonly __externref_table_dealloc: (a: number) => void;
readonly __wbindgen_free: (a: number, b: number, c: number) => void;
readonly __externref_table_dealloc: (a: number) => void;
readonly __externref_drop_slice: (a: number, b: number) => void;
readonly __wbindgen_start: () => void;
}

707
src/color_functions/color_module.js
View File

@ -172,6 +172,296 @@ function takeFromExternrefTable0(idx) {
wasm.__externref_table_dealloc(idx);
return value;
}
/**
* @param {string} source_color
* @param {string} error_color
* @param {any} custom_colors
* @returns {any}
*/
export function generate_material_design_3_scheme(source_color, error_color, custom_colors) {
const ptr0 = passStringToWasm0(source_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(error_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ret = wasm.generate_material_design_3_scheme(ptr0, len0, ptr1, len1, custom_colors);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} primary_color
* @param {string} secondary_color
* @param {string} error_color
* @param {any} custom_colors
* @returns {any}
*/
export function generate_material_design_2_scheme(primary_color, secondary_color, error_color, custom_colors) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(secondary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ptr2 = passStringToWasm0(error_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len2 = WASM_VECTOR_LEN;
const ret = wasm.generate_material_design_2_scheme(ptr0, len0, ptr1, len1, ptr2, len2, custom_colors);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
function _assertClass(instance, klass) {
if (!(instance instanceof klass)) {
throw new Error(`expected instance of ${klass.name}`);
}
}
/**
* @param {string} primary_color
* @param {string} danger_color
* @param {string} success_color
* @param {string} warning_color
* @param {string} info_color
* @param {string} fg_color
* @param {string} bg_color
* @param {SchemeSetting} setting
* @returns {any}
*/
export function generate_q_scheme_automatically(primary_color, danger_color, success_color, warning_color, info_color, fg_color, bg_color, setting) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(danger_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ptr2 = passStringToWasm0(success_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len2 = WASM_VECTOR_LEN;
const ptr3 = passStringToWasm0(warning_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len3 = WASM_VECTOR_LEN;
const ptr4 = passStringToWasm0(info_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len4 = WASM_VECTOR_LEN;
const ptr5 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len5 = WASM_VECTOR_LEN;
const ptr6 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len6 = WASM_VECTOR_LEN;
_assertClass(setting, SchemeSetting);
var ptr7 = setting.__destroy_into_raw();
const ret = wasm.generate_q_scheme_automatically(ptr0, len0, ptr1, len1, ptr2, len2, ptr3, len3, ptr4, len4, ptr5, len5, ptr6, len6, ptr7);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} primary_color
* @param {string | null | undefined} secondary_color
* @param {string | null | undefined} tertiary_color
* @param {string | null | undefined} accent_color
* @param {string} danger_color
* @param {string} success_color
* @param {string} warning_color
* @param {string} info_color
* @param {string} fg_color
* @param {string} bg_color
* @param {SchemeSetting} setting
* @returns {any}
*/
export function generate_q_scheme_manually(primary_color, secondary_color, tertiary_color, accent_color, danger_color, success_color, warning_color, info_color, fg_color, bg_color, setting) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
var ptr1 = isLikeNone(secondary_color) ? 0 : passStringToWasm0(secondary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len1 = WASM_VECTOR_LEN;
var ptr2 = isLikeNone(tertiary_color) ? 0 : passStringToWasm0(tertiary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len2 = WASM_VECTOR_LEN;
var ptr3 = isLikeNone(accent_color) ? 0 : passStringToWasm0(accent_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len3 = WASM_VECTOR_LEN;
const ptr4 = passStringToWasm0(danger_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len4 = WASM_VECTOR_LEN;
const ptr5 = passStringToWasm0(success_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len5 = WASM_VECTOR_LEN;
const ptr6 = passStringToWasm0(warning_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len6 = WASM_VECTOR_LEN;
const ptr7 = passStringToWasm0(info_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len7 = WASM_VECTOR_LEN;
const ptr8 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len8 = WASM_VECTOR_LEN;
const ptr9 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len9 = WASM_VECTOR_LEN;
_assertClass(setting, SchemeSetting);
var ptr10 = setting.__destroy_into_raw();
const ret = wasm.generate_q_scheme_manually(ptr0, len0, ptr1, len1, ptr2, len2, ptr3, len3, ptr4, len4, ptr5, len5, ptr6, len6, ptr7, len7, ptr8, len8, ptr9, len9, ptr10);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
function passArrayJsValueToWasm0(array, malloc) {
const ptr = malloc(array.length * 4, 4) >>> 0;
for (let i = 0; i < array.length; i++) {
const add = addToExternrefTable0(array[i]);
getDataViewMemory0().setUint32(ptr + 4 * i, add, true);
}
WASM_VECTOR_LEN = array.length;
return ptr;
}
/**
* @param {SwatchEntry[]} colors
* @param {SwatchSchemeSetting} setting
* @returns {any}
*/
export function generate_swatch_scheme(colors, setting) {
const ptr0 = passArrayJsValueToWasm0(colors, wasm.__wbindgen_malloc);
const len0 = WASM_VECTOR_LEN;
_assertClass(setting, SwatchSchemeSetting);
var ptr1 = setting.__destroy_into_raw();
const ret = wasm.generate_swatch_scheme(ptr0, len0, ptr1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @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;
}
/**
* @returns {any}
*/
@ -372,345 +662,6 @@ export function shade_scale(basic_color, mixed_color) {
return MixReversing.__wrap(ret[0]);
}
/**
* @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 _assertClass(instance, klass) {
if (!(instance instanceof klass)) {
throw new Error(`expected instance of ${klass.name}`);
}
}
/**
* @param {string} reference_color
* @param {number} swatch_amount
* @param {number} minimum_lightness
* @param {number} maximum_lightness
* @param {boolean | null} [use_reference_color]
* @param {number | null} [reference_color_bias]
* @returns {string[]}
*/
export function generate_palette_from_color(reference_color, swatch_amount, minimum_lightness, maximum_lightness, use_reference_color, reference_color_bias) {
const ptr0 = passStringToWasm0(reference_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ret = wasm.generate_palette_from_color(ptr0, len0, swatch_amount, minimum_lightness, maximum_lightness, isLikeNone(use_reference_color) ? 0xFFFFFF : use_reference_color ? 1 : 0, isLikeNone(reference_color_bias) ? 0xFFFFFF : reference_color_bias);
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;
}
/**
* @returns {any}
*/
export function color_categories() {
const ret = wasm.color_categories();
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} tag
* @param {string | null} [category]
* @returns {any}
*/
export function search_color_cards(tag, category) {
const ptr0 = passStringToWasm0(tag, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
var ptr1 = isLikeNone(category) ? 0 : passStringToWasm0(category, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len1 = WASM_VECTOR_LEN;
const ret = wasm.search_color_cards(ptr0, len0, ptr1, len1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} source_color
* @param {string} error_color
* @param {any} custom_colors
* @returns {any}
*/
export function generate_material_design_3_scheme(source_color, error_color, custom_colors) {
const ptr0 = passStringToWasm0(source_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(error_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ret = wasm.generate_material_design_3_scheme(ptr0, len0, ptr1, len1, custom_colors);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} primary_color
* @param {string} secondary_color
* @param {string} error_color
* @param {any} custom_colors
* @returns {any}
*/
export function generate_material_design_2_scheme(primary_color, secondary_color, error_color, custom_colors) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(secondary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ptr2 = passStringToWasm0(error_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len2 = WASM_VECTOR_LEN;
const ret = wasm.generate_material_design_2_scheme(ptr0, len0, ptr1, len1, ptr2, len2, custom_colors);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} primary_color
* @param {string} danger_color
* @param {string} success_color
* @param {string} warning_color
* @param {string} info_color
* @param {string} fg_color
* @param {string} bg_color
* @param {SchemeSetting} setting
* @returns {any}
*/
export function generate_q_scheme_automatically(primary_color, danger_color, success_color, warning_color, info_color, fg_color, bg_color, setting) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(danger_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ptr2 = passStringToWasm0(success_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len2 = WASM_VECTOR_LEN;
const ptr3 = passStringToWasm0(warning_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len3 = WASM_VECTOR_LEN;
const ptr4 = passStringToWasm0(info_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len4 = WASM_VECTOR_LEN;
const ptr5 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len5 = WASM_VECTOR_LEN;
const ptr6 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len6 = WASM_VECTOR_LEN;
_assertClass(setting, SchemeSetting);
var ptr7 = setting.__destroy_into_raw();
const ret = wasm.generate_q_scheme_automatically(ptr0, len0, ptr1, len1, ptr2, len2, ptr3, len3, ptr4, len4, ptr5, len5, ptr6, len6, ptr7);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} primary_color
* @param {string | null | undefined} secondary_color
* @param {string | null | undefined} tertiary_color
* @param {string | null | undefined} accent_color
* @param {string} danger_color
* @param {string} success_color
* @param {string} warning_color
* @param {string} info_color
* @param {string} fg_color
* @param {string} bg_color
* @param {SchemeSetting} setting
* @returns {any}
*/
export function generate_q_scheme_manually(primary_color, secondary_color, tertiary_color, accent_color, danger_color, success_color, warning_color, info_color, fg_color, bg_color, setting) {
const ptr0 = passStringToWasm0(primary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
var ptr1 = isLikeNone(secondary_color) ? 0 : passStringToWasm0(secondary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len1 = WASM_VECTOR_LEN;
var ptr2 = isLikeNone(tertiary_color) ? 0 : passStringToWasm0(tertiary_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len2 = WASM_VECTOR_LEN;
var ptr3 = isLikeNone(accent_color) ? 0 : passStringToWasm0(accent_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len3 = WASM_VECTOR_LEN;
const ptr4 = passStringToWasm0(danger_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len4 = WASM_VECTOR_LEN;
const ptr5 = passStringToWasm0(success_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len5 = WASM_VECTOR_LEN;
const ptr6 = passStringToWasm0(warning_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len6 = WASM_VECTOR_LEN;
const ptr7 = passStringToWasm0(info_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len7 = WASM_VECTOR_LEN;
const ptr8 = passStringToWasm0(fg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len8 = WASM_VECTOR_LEN;
const ptr9 = passStringToWasm0(bg_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len9 = WASM_VECTOR_LEN;
_assertClass(setting, SchemeSetting);
var ptr10 = setting.__destroy_into_raw();
const ret = wasm.generate_q_scheme_manually(ptr0, len0, ptr1, len1, ptr2, len2, ptr3, len3, ptr4, len4, ptr5, len5, ptr6, len6, ptr7, len7, ptr8, len8, ptr9, len9, ptr10);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
function passArrayJsValueToWasm0(array, malloc) {
const ptr = malloc(array.length * 4, 4) >>> 0;
for (let i = 0; i < array.length; i++) {
const add = addToExternrefTable0(array[i]);
getDataViewMemory0().setUint32(ptr + 4 * i, add, true);
}
WASM_VECTOR_LEN = array.length;
return ptr;
}
/**
* @param {SwatchEntry[]} colors
* @param {SwatchSchemeSetting} setting
* @returns {any}
*/
export function generate_swatch_scheme(colors, setting) {
const ptr0 = passArrayJsValueToWasm0(colors, wasm.__wbindgen_malloc);
const len0 = WASM_VECTOR_LEN;
_assertClass(setting, SwatchSchemeSetting);
var ptr1 = setting.__destroy_into_raw();
const ret = wasm.generate_swatch_scheme(ptr0, len0, ptr1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} color
* @param {number} percent
@ -896,6 +847,55 @@ export function shade(color, percent) {
}
}
/**
* @returns {any}
*/
export function color_categories() {
const ret = wasm.color_categories();
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} tag
* @param {string | null} [category]
* @returns {any}
*/
export function search_color_cards(tag, category) {
const ptr0 = passStringToWasm0(tag, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
var ptr1 = isLikeNone(category) ? 0 : passStringToWasm0(category, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len1 = WASM_VECTOR_LEN;
const ret = wasm.search_color_cards(ptr0, len0, ptr1, len1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
/**
* @param {string} reference_color
* @param {number} swatch_amount
* @param {number} minimum_lightness
* @param {number} maximum_lightness
* @param {boolean | null} [use_reference_color]
* @param {number | null} [reference_color_bias]
* @returns {string[]}
*/
export function generate_palette_from_color(reference_color, swatch_amount, minimum_lightness, maximum_lightness, use_reference_color, reference_color_bias) {
const ptr0 = passStringToWasm0(reference_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ret = wasm.generate_palette_from_color(ptr0, len0, swatch_amount, minimum_lightness, maximum_lightness, isLikeNone(use_reference_color) ? 0xFFFFFF : use_reference_color ? 1 : 0, isLikeNone(reference_color_bias) ? 0xFFFFFF : reference_color_bias);
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
* @param {number} expand_amount
@ -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')
@ -1271,6 +1272,16 @@ export class ColorShifting {
ColorShiftingFinalization.register(this, this.__wbg_ptr, this);
return this;
}
/**
* @returns {any}
*/
toJsValue() {
const ret = wasm.colorshifting_toJsValue(this.__wbg_ptr);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
}
const DifferFinalization = (typeof FinalizationRegistry === 'undefined')
@ -1722,7 +1733,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get hover() {
const ret = wasm.__wbg_get_schemesetting_hover(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_r(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**
@ -1737,7 +1748,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get active() {
const ret = wasm.__wbg_get_schemesetting_active(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_g(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**
@ -1752,7 +1763,7 @@ export class SchemeSetting {
* @returns {ColorShifting}
*/
get focus() {
const ret = wasm.__wbg_get_schemesetting_focus(this.__wbg_ptr);
const ret = wasm.__wbg_get_rgbdifference_b(this.__wbg_ptr);
return ColorShifting.__wrap(ret);
}
/**
@ -1844,6 +1855,16 @@ export class SchemeSetting {
SchemeSettingFinalization.register(this, this.__wbg_ptr, this);
return this;
}
/**
* @returns {any}
*/
toJsValue() {
const ret = wasm.schemesetting_toJsValue(this.__wbg_ptr);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return takeFromExternrefTable0(ret[0]);
}
}
const SwatchEntryFinalization = (typeof FinalizationRegistry === 'undefined')

BIN
src/color_functions/color_module_bg.wasm
View File

Binary file not shown.

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

@ -1,6 +1,23 @@
/* tslint:disable */
/* eslint-disable */
export const memory: WebAssembly.Memory;
export const __wbg_swatchentry_free: (a: number, b: number) => void;
export const __wbg_get_swatchentry_name: (a: number) => [number, number];
export const __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
export const __wbg_get_swatchentry_color: (a: number) => [number, number];
export const __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
export const generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, 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 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 q_scheme_color_expanding_methods: () => [number, number, number];
export const q_scheme_wacg_settings: () => [number, number, number];
export const q_scheme_default_settings: () => number;
@ -14,26 +31,13 @@ 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 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 __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_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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
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;
@ -41,20 +45,36 @@ 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;
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 __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;
export const __wbg_get_colorshifting_lightness: (a: number) => number;
export const __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
export const colorshifting_new: (a: number, b: number) => number;
export const colorshifting_toJsValue: (a: number) => [number, number, number];
export const __wbg_schemesetting_free: (a: number, b: number) => void;
export const __wbg_get_schemesetting_hover: (a: number) => number;
export const __wbg_set_schemesetting_hover: (a: number, b: number) => void;
export const __wbg_get_schemesetting_active: (a: number) => number;
export const __wbg_set_schemesetting_active: (a: number, b: number) => void;
export const __wbg_get_schemesetting_focus: (a: number) => number;
export const __wbg_set_schemesetting_focus: (a: number, b: number) => void;
export const __wbg_get_schemesetting_disabled: (a: number) => number;
export const __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
@ -65,11 +85,25 @@ export const __wbg_set_schemesetting_expand_method: (a: number, b: number) => vo
export const __wbg_get_schemesetting_wacg_follows: (a: number) => number;
export const __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
export const schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
export const generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, 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 schemesetting_toJsValue: (a: number) => [number, number, number];
export const __wbg_get_schemesetting_hover: (a: number) => number;
export const __wbg_get_schemesetting_active: (a: number) => number;
export const __wbg_get_schemesetting_focus: (a: 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_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;
@ -79,25 +113,6 @@ 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_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;
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 __wbg_swatchentry_free: (a: number, b: number) => void;
export const __wbg_get_swatchentry_name: (a: number) => [number, number];
export const __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
export const __wbg_get_swatchentry_color: (a: number) => [number, number];
export const __wbg_set_swatchentry_color: (a: number, b: number, c: 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 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];
@ -112,30 +127,17 @@ 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_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_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 __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 __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;
export const __externref_table_alloc: () => number;
export const __wbindgen_export_4: WebAssembly.Table;
export const __externref_table_dealloc: (a: number) => void;
export const __wbindgen_free: (a: number, b: number, c: number) => void;
export const __externref_table_dealloc: (a: number) => void;
export const __externref_drop_slice: (a: number, b: number) => void;
export const __wbindgen_start: () => void;

8
src/component.css
View File

@ -441,4 +441,12 @@
background-color: var(--color-info);
}
}
pre {
padding: var(--spacing-xs) var(--spacing-s);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-xxs);
font-size: var(--font-size-xs);
line-height: 1.4em;
}
}

18
src/components/Tab.tsx
View File

@ -1,20 +1,30 @@
import cx from 'clsx';
import { isEqual } from 'lodash-es';
import { useCallback, useState } from 'react';
import { isEqual, isNil } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react';
import styles from './Tab.module.css';
type TabProps = {
tabs: { title: string; id: unknown }[];
activeTab?: unknown;
onActive?: (id: unknown) => void;
};
export function Tab({ tabs = [], onActive }: TabProps) {
const [active, setActive] = useState(0);
export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
const [active, setActive] = useState(() =>
isNil(activeTab) ? 0 : tabs.findIndex((tab) => isEqual(tab.id, activeTab)),
);
const handleActivate = useCallback((index: number) => {
setActive(index);
onActive?.(tabs[index].id);
}, []);
useEffect(() => {
const activeIndex = tabs.findIndex((tab) => isEqual(tab.id, activeTab));
if (!isNil(activeIndex) && !isEqual(activeIndex, -1) && !isEqual(activeIndex, active)) {
setActive(activeIndex);
}
}, [activeTab]);
return (
<div className={styles.tabs_container}>
{tabs.map((tab, index) => (

28
src/hooks/useCopy.ts Normal file
View File

@ -0,0 +1,28 @@
import { isEmpty, isNil } from 'lodash-es';
import { useCallback, useEffect } from 'react';
import { useCopyToClipboard } from 'react-use';
import { NotificationType, useNotification } from '../components/Notifications';
export function useCopy() {
const { showToast } = useNotification();
const [cpState, copyToClipboard] = useCopyToClipboard();
const copyAction = useCallback((content: string) => {
if (isNil(content) || isEmpty(content)) return;
copyToClipboard(content);
}, []);
useEffect(() => {
if (!isNil(cpState.error)) {
showToast(NotificationType.ERROR, 'Failed to copy to clipboard', 'tabler:alert-circle', 3000);
} else if (!isNil(cpState.value)) {
showToast(
NotificationType.SUCCESS,
`Content copied to clipboard.`,
'tabler:circle-check',
3000,
);
}
}, [cpState]);
return copyAction;
}

36
src/page-components/scheme/QScheme.tsx
View File

@ -1,3 +1,35 @@
export function QScheme() {
return <div>Q Scheme</div>;
import { isEqual, isNil } from 'lodash-es';
import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { SchemeContent } from '../../models';
import { QSchemeStorage } from '../../q-scheme';
import { QSchemeBuilder } from './q-scheme/Builder';
import { QSchemeExport } from './q-scheme/Export';
import { QSchemePreview } from './q-scheme/Preview';
const tabOptions = [
{ title: 'Overview', id: 'overview' },
{ title: 'Builder', id: 'builder' },
{ title: 'Exports', id: 'export' },
];
type QSchemeProps = {
scheme: SchemeContent<QSchemeStorage>;
};
export function QScheme({ scheme }: QSchemeProps) {
const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
);
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
{isEqual(activeTab, 'overview') && <QSchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
)}
{isEqual(activeTab, 'export') && <QSchemeExport scheme={scheme} />}
</>
);
}

80
src/page-components/scheme/q-scheme/Builder.tsx
View File

@ -11,66 +11,52 @@ import { FloatColorPicker } from '../../../components/FloatcolorPicker';
import { ScrollArea } from '../../../components/ScrollArea';
import { VSegmentedControl } from '../../../components/VSegmentedControl';
import { SchemeContent } from '../../../models';
import { QSchemeSource, QSchemeStorage } from '../../../q-scheme';
import { QSchemeSetting, QSchemeSource, QSchemeStorage } from '../../../q-scheme';
import { useUpdateScheme } from '../../../stores/schemes';
import { defaultEmptyFormData } from '../../../utls';
import styles from './Builder.module.css';
type QSchemeBuilderProps = {
scheme: SchemeContent<QSchemeStorage>;
onBuildCompleted?: () => void;
};
export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps) {
const { colorFn } = useColorFunction();
const updateScheme = useUpdateScheme(scheme.id);
const defaultSetting = useMemo(() => {
try {
if (!colorFn) throw 'Web Assembly functions is not available';
const defaultValues = colorFn.q_scheme_default_settings();
if (!scheme.schemeStorage.source?.setting)
return {
hover: {
chroma:
scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
lightness:
scheme.schemeStorage.source?.setting?.hover.lightness ??
defaultValues.hover.lightness,
},
active: {
chroma:
scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
lightness:
scheme.schemeStorage.source?.setting?.active.lightness ??
if (scheme.schemeStorage.source?.setting)
return new SchemeSetting(
new ColorShifting(
scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
scheme.schemeStorage.source?.setting?.hover.lightness ?? defaultValues.hover.lightness,
),
new ColorShifting(
scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
scheme.schemeStorage.source?.setting?.active.lightness ??
defaultValues.active.lightness,
},
focus: {
chroma:
scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
lightness:
scheme.schemeStorage.source?.setting?.focus.lightness ??
defaultValues.focus.lightness,
},
disabled: {
chroma:
scheme.schemeStorage.source?.setting?.disabled.chroma ??
defaultValues.disabled.chroma,
lightness:
scheme.schemeStorage.source?.setting?.disabled.lightness ??
),
new ColorShifting(
scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
scheme.schemeStorage.source?.setting?.focus.lightness ?? defaultValues.focus.lightness,
),
new ColorShifting(
scheme.schemeStorage.source?.setting?.disabled.chroma ?? defaultValues.disabled.chroma,
scheme.schemeStorage.source?.setting?.disabled.lightness ??
defaultValues.disabled.lightness,
},
dark_convert: {
chroma:
scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
),
new ColorShifting(
scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
defaultValues.dark_convert.chroma,
lightness:
scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
defaultValues.dark_convert.lightness,
},
expand_method:
scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
wacg_follows:
scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
} as SchemeSetting;
),
scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
);
return defaultValues;
} catch (e) {
console.error('[Q scheme builder]', e);
@ -138,6 +124,7 @@ export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
Number(formData.get('expanding')) as ColorExpand,
Number(formData.get('wacg')) as WACGSetting,
);
const dumpedSetting = schemeSetting.toJsValue() as QSchemeSetting;
const source: QSchemeSource = {
primary: defaultEmptyFormData(formData, 'primary', null),
@ -150,9 +137,8 @@ export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
info: defaultEmptyFormData(formData, 'info', null),
foreground: defaultEmptyFormData(formData, 'foreground', null),
background: defaultEmptyFormData(formData, 'background', null),
setting: schemeSetting,
setting: dumpedSetting,
};
console.debug('[collected]', source);
const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
? colorFn?.generate_q_scheme_automatically(
source.primary,
@ -162,7 +148,7 @@ export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
source.info,
source.foreground,
source.background,
source.setting,
schemeSetting,
)
: colorFn?.generate_q_scheme_manually(
source.primary,
@ -175,7 +161,7 @@ export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
source.info,
source.foreground,
source.background,
source.setting,
schemeSetting,
);
updateScheme((prev) => {
prev.schemeStorage.source = source;
@ -185,7 +171,7 @@ export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
prev.schemeStorage.jsVariables = generatedScheme[3];
return prev;
});
console.debug('[generated]', generatedScheme);
onBuildCompleted?.();
} catch (e) {
console.error('[build q scheme]', e);
}

16
src/page-components/scheme/q-scheme/Export.module.css Normal file
View File

@ -0,0 +1,16 @@
@layer pages {
.export_layout {
padding: var(--spacing-s) var(--spacing-m);
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--spacing-s);
.tools {
display: flex;
flex-direction: row;
align-items: center;
font-size: var(--font-size-s);
}
}
}

51
src/page-components/scheme/q-scheme/Export.tsx Normal file
View File

@ -0,0 +1,51 @@
import { useMemo, useState } from 'react';
import { HSegmentedControl } from '../../../components/HSegmentedControl';
import { Labeled } from '../../../components/Labeled';
import { ScrollArea } from '../../../components/ScrollArea';
import { useCopy } from '../../../hooks/useCopy';
import { Option, SchemeContent } from '../../../models';
import { QSchemeStorage } from '../../../q-scheme';
import styles from './Export.module.css';
const exportOptions: Option[] = [
{ label: 'CSS', value: 'css' },
{ label: 'SCSS', value: 'scss' },
{ label: 'Javascript Object', value: 'js_object' },
];
type QSchemeExportProps = {
scheme: SchemeContent<QSchemeStorage>;
};
export function QSchemeExport({ scheme }: QSchemeExportProps) {
const [activeExport, setActiveExport] = useState<Option['value']>(exportOptions[0].value);
const exportContent = useMemo(() => {
switch (activeExport) {
case 'css':
return scheme.schemeStorage.cssVariables;
case 'scss':
return scheme.schemeStorage.scssVariables;
case 'js_object':
return scheme.schemeStorage.jsVariables;
}
}, [scheme, activeExport]);
const copyToClipboard = useCopy();
return (
<ScrollArea enableY>
<div className={styles.export_layout}>
<div className={styles.tools}>
<Labeled label="Export Options" inline>
<HSegmentedControl
options={exportOptions}
value={activeExport}
onChange={setActiveExport}
/>
</Labeled>
<button onClick={() => copyToClipboard(exportContent)}>Copy</button>
</div>
<pre>{exportContent}</pre>
</div>
</ScrollArea>
);
}

35
src/page-components/scheme/q-scheme/Preview.module.css Normal file
View File

@ -0,0 +1,35 @@
@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-xl) var(--spacing-m);
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--spacing-xs);
h2 {
font-size: var(--font-size-xl);
font-weight: bold;
line-height: 1.7em;
}
}
.preview_cell {
padding: var(--spacing-xs) var(--spacing-s);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xxs);
font-size: var(--font-size-s);
line-height: 1.5em;
.wacg {
font-size: var(--font-size-xxs);
line-height: 1em;
}
}
}

100
src/page-components/scheme/q-scheme/Preview.tsx Normal file
View File

@ -0,0 +1,100 @@
import { ReactNode, useMemo } from 'react';
import { useColorFunction } from '../../../ColorFunctionContext';
import { ScrollArea } from '../../../components/ScrollArea';
import { SchemeContent } from '../../../models';
import { Baseline, ColorSet, QSchemeStorage } from '../../../q-scheme';
import styles from './Preview.module.css';
type PreviewCellProps = {
bg: string;
fg: string;
children: ReactNode;
};
function PreviewCell({ bg, fg, children }: PreviewCellProps) {
const { colorFn } = useColorFunction();
const wacgRatio = useMemo(() => {
try {
if (!colorFn) return null;
return colorFn.wacg_relative_contrast(fg, bg);
} catch (e) {
console.error('[Error on calc WACG Ratio]', e);
}
return null;
}, [bg, fg]);
return (
<div className={styles.preview_cell} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
<span>{children}</span>
{wacgRatio && <span className={styles.wacg}>WACG {wacgRatio?.toFixed(2)}</span>}
</div>
);
}
type PreviewCellSetProps = {
colorSet: ColorSet;
name: string;
};
function PreviewCellSetGroup({ colorSet, name }: PreviewCellSetProps) {
return (
<>
<PreviewCell bg={colorSet.root} fg={colorSet.onRoot}>
{name}
</PreviewCell>
<PreviewCell bg={colorSet.hover} fg={colorSet.onHover}>
{name} Hover
</PreviewCell>
<PreviewCell bg={colorSet.active} fg={colorSet.onActive}>
{name} Active
</PreviewCell>
<PreviewCell bg={colorSet.focus} fg={colorSet.onFocus}>
{name} Focus
</PreviewCell>
<PreviewCell bg={colorSet.disabled} fg={colorSet.onDisabled}>
{name} Disabled
</PreviewCell>
</>
);
}
type PreviewBlockProps = {
baseline: Baseline;
title: string;
};
function PreviewBlock({ baseline, title }: PreviewBlockProps) {
return (
<div className={styles.preview_block} style={{ backgroundColor: `#${baseline.background}` }}>
<h2 style={{ color: `#${baseline.foreground}`, gridColumn: '1 / span 5' }}>{title}</h2>
<PreviewCellSetGroup colorSet={baseline.primary} name="Primary" />
{baseline.secondary && <PreviewCellSetGroup colorSet={baseline.secondary} name="Secondary" />}
{baseline.tertiary && <PreviewCellSetGroup colorSet={baseline.tertiary} name="Tertiary" />}
{baseline.accent && <PreviewCellSetGroup colorSet={baseline.accent} name="Accent" />}
<PreviewCellSetGroup colorSet={baseline.neutral} name="Neutral" />
<PreviewCellSetGroup colorSet={baseline.danger} name="Danger" />
<PreviewCellSetGroup colorSet={baseline.warning} name="Warning" />
<PreviewCellSetGroup colorSet={baseline.success} name="Success" />
<PreviewCellSetGroup colorSet={baseline.info} name="Info" />
</div>
);
}
type PreviewProps = {
scheme: SchemeContent<QSchemeStorage>;
};
export function QSchemePreview({ scheme }: PreviewProps) {
return (
<ScrollArea enableY>
<div className={styles.preview_layout}>
{scheme.schemeStorage.scheme?.light && (
<PreviewBlock baseline={scheme.schemeStorage.scheme.light} title="Light Scheme" />
)}
{scheme.schemeStorage.scheme?.dark && (
<PreviewBlock baseline={scheme.schemeStorage.scheme.dark} title="Dark Scheme" />
)}
</div>
</ScrollArea>
);
}

2
src/pages/SchemeDetail.tsx
View File

@ -40,7 +40,7 @@ export function SchemeDetail() {
const schemeContent = useMemo(() => {
switch (scheme?.type) {
case 'q_scheme':
return <QScheme />;
return <QScheme scheme={scheme} />;
case 'swatch_scheme':
return <SwatchScheme />;
case 'material_2':

11
src/q-scheme.ts
View File

@ -1,5 +1,4 @@
import { SchemeSetting } from './color_functions/color_module';
import { ColorShifting } from './models';
export type ColorSet = {
root: string;
@ -35,13 +34,7 @@ export type QScheme = {
};
export type QSchemeSetting = {
hover: ColorShifting;
acitve: ColorShifting;
focus: ColorShifting;
disabled: ColorShifting;
dark_convert: ColorShifting;
expand_method: string;
wacg_follows: string;
[P in keyof SchemeSetting]: SchemeSetting[P];
};
export type QSchemeSource = {
@ -55,7 +48,7 @@ export type QSchemeSource = {
info: string | null;
foreground: string | null;
background: strin | nullg;
setting: SchemeSetting | null;
setting: QSchemeSetting | null;
};
export type QSchemeStorage = {