color-module/Cargo.toml

@@ -13,7 +13,6 @@ 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"

color-module/src/schemes/q_style/baseline.rs

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

color-module/src/schemes/q_style/color_set.rs

@@ -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 fit_contrast = (f32::INFINITY, f32::NEG_INFINITY);
+    let mut last_contrast_ratio = 0.0;
-    let mut closest_contrast = (f32::INFINITY, f32::NEG_INFINITY);
+    let mut repeat_count = 0;
-    for scan_lightness in (0..=100).map(|x| x as f32 / 100.0) {
+    let mut target_ratio = ratio;
-        let new_target = neutral_swatch.get(scan_lightness);
+    loop {
         let contrast_ratio = match_wacg(&new_target, &reference_luma);
-        if (contrast_ratio - ratio).abs() < (closest_contrast.0 - ratio).abs()
+        if contrast_ratio >= target_ratio {
-            && scan_lightness > closest_contrast.1
+            break;
-        {
-            closest_contrast = (contrast_ratio, scan_lightness);
         }
-        if contrast_ratio >= ratio
+        if (contrast_ratio - last_contrast_ratio).abs() / last_contrast_ratio < 0.001 {
-            && (contrast_ratio - ratio).abs() < (closest_contrast.0 - ratio).abs()
+            repeat_count += 1;
-        {
+            if repeat_count > 20 {
-            fit_contrast = (contrast_ratio, scan_lightness);
+                target_ratio *= 1.0 - 0.01;
+                repeat_count = 0;
+            }
+        } else {
+            repeat_count = 0;
         }
+        last_contrast_ratio = contrast_ratio;
+        new_target = Oklch {
+            l: new_target.l * (1.0 + factor),
+            ..new_target
+        };
     }
 
-    neutral_swatch.get(if fit_contrast.0 == f32::INFINITY {
+    new_target
-        closest_contrast.1
-    } else {
-        fit_contrast.1
-    })
 }
 
 impl ColorSet {
-    pub fn new(
+    pub fn new(color: &Oklch, neutral_swatch: &NeutralSwatch, setting: &SchemeSetting) -> Self {
-        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(foreground_lightness),
+                neutral_swatch.get(root.l),
-                neutral_swatch.get(foreground_lightness),
+                neutral_swatch.get(hover.l),
-                neutral_swatch.get(foreground_lightness),
+                neutral_swatch.get(active.l),
-                neutral_swatch.get(foreground_lightness),
+                neutral_swatch.get(focus.l),
-                neutral_swatch.get(foreground_lightness),
+                neutral_swatch.get(disabled.l),
             ),
             WACGSetting::AutomaticAA => (
                 fit_to_wacg(&root, neutral_swatch, 4.5),
@@ -89,13 +89,6 @@ 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 {

color-module/src/schemes/q_style/mod.rs

@@ -58,8 +58,8 @@ impl QScheme {
                 &(success * setting.dark_convert),
                 &(warning * setting.dark_convert),
                 &(info * setting.dark_convert),
-                &(&background * (setting.dark_convert / 2.0)),
+                &(foreground * setting.dark_convert),
-                &(&foreground * setting.dark_convert),
+                &(background * 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 / 2.0)),
+                &(foreground * setting.dark_convert),
                 &(background * setting.dark_convert),
                 setting.clone(),
             ),

color-module/src/schemes/q_style/scheme_setting.rs

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

src/color_functions/color_module.d.ts

@@ -1,17 +1,5 @@
 /* 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;
@@ -25,6 +13,21 @@ 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;
@@ -32,9 +35,6 @@ 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,12 +62,10 @@ 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;
 }
@@ -116,7 +114,6 @@ 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;
@@ -145,23 +142,6 @@ 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;
@@ -175,13 +155,26 @@ 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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
-  readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly analogous_30: (a: number, b: number) => [number, number, number, number];
-  readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly analogous_60: (a: number, b: number) => [number, number, number, number];
-  readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly complementary: (a: number, b: number) => [number, number, number, number];
-  readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
+  readonly split_complementary: (a: number, b: number) => [number, number, number, number];
-  readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly tetradic: (a: number, b: number) => [number, number, number, number];
-  readonly shade: (a: number, b: number, c: 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 __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;
@@ -189,36 +182,20 @@ 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;
@@ -229,25 +206,11 @@ 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 schemesetting_toJsValue: (a: number) => [number, number, number];
+  readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
-  readonly __wbg_get_schemesetting_hover: (a: 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 __wbg_get_schemesetting_active: (a: 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 __wbg_get_schemesetting_focus: (a: 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 __wbg_oklchdifference_free: (a: number, b: number) => void;
+  readonly generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
-  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;
@@ -257,6 +220,25 @@ 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];
@@ -271,18 +253,31 @@ 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_differ_free: (a: number, b: number) => void;
+  readonly __wbg_hsldifference_free: (a: number, b: number) => void;
-  readonly __wbg_get_differ_delta: (a: number) => number;
+  readonly __wbg_get_hsldifference_hue: (a: number) => number;
-  readonly __wbg_set_differ_delta: (a: number, b: number) => void;
+  readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
-  readonly __wbg_get_differ_percent: (a: number) => number;
+  readonly __wbg_get_hsldifference_saturation: (a: number) => number;
-  readonly __wbg_set_differ_percent: (a: number, b: number) => void;
+  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 __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 __wbindgen_free: (a: number, b: number, c: number) => void;
   readonly __externref_table_dealloc: (a: number) => void;
+  readonly __wbindgen_free: (a: number, b: number, c: number) => void;
   readonly __externref_drop_slice: (a: number, b: number) => void;
   readonly __wbindgen_start: () => void;
 }

src/color_functions/color_module.js

@@ -172,296 +172,6 @@ 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}
  */
@@ -662,6 +372,345 @@ 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
@@ -847,55 +896,6 @@ 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,13 +1202,12 @@ export const ColorExpand = Object.freeze({
     Square: 6, "6": "Square",
 });
 /**
- * @enum {0 | 1 | 2 | 3}
+ * @enum {0 | 1 | 2}
  */
 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')
@@ -1272,16 +1271,6 @@ 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')
@@ -1733,7 +1722,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get hover() {
-        const ret = wasm.__wbg_get_rgbdifference_r(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_hover(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1748,7 +1737,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get active() {
-        const ret = wasm.__wbg_get_rgbdifference_g(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_active(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1763,7 +1752,7 @@ export class SchemeSetting {
      * @returns {ColorShifting}
      */
     get focus() {
-        const ret = wasm.__wbg_get_rgbdifference_b(this.__wbg_ptr);
+        const ret = wasm.__wbg_get_schemesetting_focus(this.__wbg_ptr);
         return ColorShifting.__wrap(ret);
     }
     /**
@@ -1855,16 +1844,6 @@ 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')

src/color_functions/color_module_bg.wasm.d.ts

@@ -1,23 +1,6 @@
 /* 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;
@@ -31,13 +14,26 @@ 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 lighten: (a: number, b: number, c: number) => [number, number, number, number];
+export const shift_hue: (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 analogous_30: (a: number, b: number) => [number, number, number, number];
-export const darken: (a: number, b: number, c: number) => [number, number, number, number];
+export const analogous_60: (a: number, b: number) => [number, number, number, number];
-export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
+export const complementary: (a: number, b: number) => [number, number, number, number];
-export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
+export const split_complementary: (a: number, b: number) => [number, number, number, number];
-export const tint: (a: number, b: number, c: number) => [number, number, number, number];
+export const tetradic: (a: number, b: number) => [number, number, number, number];
-export const shade: (a: number, b: number, c: 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 __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;
@@ -45,36 +41,20 @@ 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;
@@ -85,25 +65,11 @@ 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 schemesetting_toJsValue: (a: number) => [number, number, number];
+export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
-export const __wbg_get_schemesetting_hover: (a: 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 __wbg_get_schemesetting_active: (a: 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 __wbg_get_schemesetting_focus: (a: 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 __wbg_oklchdifference_free: (a: number, b: number) => void;
+export const generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
-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;
@@ -113,6 +79,25 @@ 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];
@@ -127,17 +112,30 @@ 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_differ_free: (a: number, b: number) => void;
+export const __wbg_hsldifference_free: (a: number, b: number) => void;
-export const __wbg_get_differ_delta: (a: number) => number;
+export const __wbg_get_hsldifference_hue: (a: number) => number;
-export const __wbg_set_differ_delta: (a: number, b: number) => void;
+export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
-export const __wbg_get_differ_percent: (a: number) => number;
+export const __wbg_get_hsldifference_saturation: (a: number) => number;
-export const __wbg_set_differ_percent: (a: number, b: number) => void;
+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 __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 __wbindgen_free: (a: number, b: number, c: number) => void;
 export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
 export const __externref_drop_slice: (a: number, b: number) => void;
 export const __wbindgen_start: () => void;

src/component.css

@@ -441,12 +441,4 @@
       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;
-  }
 }

src/components/Tab.tsx

@@ -1,30 +1,20 @@
 import cx from 'clsx';
-import { isEqual, isNil } from 'lodash-es';
+import { isEqual } from 'lodash-es';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, 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 = [], activeTab, onActive }: TabProps) {
+export function Tab({ tabs = [], onActive }: TabProps) {
-  const [active, setActive] = useState(() =>
+  const [active, setActive] = useState(0);
-    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) => (

src/hooks/useCopy.ts

@@ -1,28 +0,0 @@
-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;
-}

src/page-components/scheme/QScheme.tsx

@@ -1,35 +1,3 @@
-import { isEqual, isNil } from 'lodash-es';
+export function QScheme() {
-import { useState } from 'react';
+  return <div>Q Scheme</div>;
-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} />}
-    </>
-  );
 }

src/page-components/scheme/q-scheme/Builder.tsx

@@ -11,52 +11,66 @@ import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { VSegmentedControl } from '../../../components/VSegmentedControl';
 import { SchemeContent } from '../../../models';
-import { QSchemeSetting, QSchemeSource, QSchemeStorage } from '../../../q-scheme';
+import { 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, onBuildCompleted }: QSchemeBuilderProps) {
+export function QSchemeBuilder({ scheme }: 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)
+      if (!scheme.schemeStorage.source?.setting)
-        return new SchemeSetting(
+        return {
-          new ColorShifting(
+          hover: {
-            scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
+            chroma:
-            scheme.schemeStorage.source?.setting?.hover.lightness ?? defaultValues.hover.lightness,
+              scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
-          ),
+            lightness:
-          new ColorShifting(
+              scheme.schemeStorage.source?.setting?.hover.lightness ??
-            scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
+              defaultValues.hover.lightness,
-            scheme.schemeStorage.source?.setting?.active.lightness ??
+          },
+          active: {
+            chroma:
+              scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
+            lightness:
+              scheme.schemeStorage.source?.setting?.active.lightness ??
               defaultValues.active.lightness,
-          ),
+          },
-          new ColorShifting(
+          focus: {
-            scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
+            chroma:
-            scheme.schemeStorage.source?.setting?.focus.lightness ?? defaultValues.focus.lightness,
+              scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
-          ),
+            lightness:
-          new ColorShifting(
+              scheme.schemeStorage.source?.setting?.focus.lightness ??
-            scheme.schemeStorage.source?.setting?.disabled.chroma ?? defaultValues.disabled.chroma,
+              defaultValues.focus.lightness,
-            scheme.schemeStorage.source?.setting?.disabled.lightness ??
+          },
+          disabled: {
+            chroma:
+              scheme.schemeStorage.source?.setting?.disabled.chroma ??
+              defaultValues.disabled.chroma,
+            lightness:
+              scheme.schemeStorage.source?.setting?.disabled.lightness ??
               defaultValues.disabled.lightness,
-          ),
+          },
-          new ColorShifting(
+          dark_convert: {
-            scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
+            chroma:
+              scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
               defaultValues.dark_convert.chroma,
-            scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
+            lightness:
+              scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
               defaultValues.dark_convert.lightness,
-          ),
+          },
-          scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
+          expand_method:
-          scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
+            scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
-        );
+          wacg_follows:
+            scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
+        } as SchemeSetting;
       return defaultValues;
     } catch (e) {
       console.error('[Q scheme builder]', e);
@@ -124,7 +138,6 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: 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),
@@ -137,8 +150,9 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
         info: defaultEmptyFormData(formData, 'info', null),
         foreground: defaultEmptyFormData(formData, 'foreground', null),
         background: defaultEmptyFormData(formData, 'background', null),
-        setting: dumpedSetting,
+        setting: schemeSetting,
       };
+      console.debug('[collected]', source);
       const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
         ? colorFn?.generate_q_scheme_automatically(
             source.primary,
@@ -148,7 +162,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
             source.info,
             source.foreground,
             source.background,
-            schemeSetting,
+            source.setting,
           )
         : colorFn?.generate_q_scheme_manually(
             source.primary,
@@ -161,7 +175,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
             source.info,
             source.foreground,
             source.background,
-            schemeSetting,
+            source.setting,
           );
       updateScheme((prev) => {
         prev.schemeStorage.source = source;
@@ -171,7 +185,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
         prev.schemeStorage.jsVariables = generatedScheme[3];
         return prev;
       });
-      onBuildCompleted?.();
+      console.debug('[generated]', generatedScheme);
     } catch (e) {
       console.error('[build q scheme]', e);
     }

src/page-components/scheme/q-scheme/Export.module.css

@@ -1,16 +0,0 @@
-@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);
-    }
-  }
-}

src/page-components/scheme/q-scheme/Export.tsx

@@ -1,51 +0,0 @@
-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>
-  );
-}

src/page-components/scheme/q-scheme/Preview.module.css

@@ -1,35 +0,0 @@
-@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;
-    }
-  }
-}

src/page-components/scheme/q-scheme/Preview.tsx

@@ -1,100 +0,0 @@
-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>
-  );
-}

src/pages/SchemeDetail.tsx

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

src/q-scheme.ts

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