Compare commits
12 Commits
2b9547a7c2
...
6b262f536d
| Author | SHA1 | Date | |
|---|---|---|---|
|
6b262f536d | ||
|
|
6aa3875919 | ||
|
|
0369f238f2 | ||
|
|
c60aefaaff | ||
|
|
7bfe9a7620 | ||
|
|
1b044c66d7 | ||
|
|
e74ffc9721 | ||
|
|
1553c51621 | ||
|
|
14d775e956 | ||
|
|
e2806a0cc5 | ||
|
|
5d3fc2903b | ||
|
|
71feeb4efc |
|
|
@ -2,30 +2,63 @@ use palette::{
|
|||
cam16::{Cam16Jch, Parameters},
|
||||
convert::FromColorUnclamped,
|
||||
luma::Luma,
|
||||
Hsl, IntoColor, IsWithinBounds, Oklab, Oklch, Srgb,
|
||||
Hsl, IntoColor, IsWithinBounds, Lch, Lchuv, Oklab, Oklch, Srgb,
|
||||
};
|
||||
|
||||
#[allow(dead_code)]
|
||||
pub fn map_cam16jch_to_srgb(origin: &Cam16Jch<f32>) -> Srgb {
|
||||
let mut new_original = Cam16Jch::new(origin.lightness, origin.chroma, origin.hue);
|
||||
const FACTOR: f32 = 0.99;
|
||||
let original_xyz = origin.into_xyz(Parameters::default_static_wp(40.0));
|
||||
let mut new_srgb = Srgb::from_color_unclamped(original_xyz);
|
||||
if new_srgb.is_within_bounds() {
|
||||
return new_srgb;
|
||||
}
|
||||
|
||||
let lchuv: Lchuv = Lchuv::from_color_unclamped(original_xyz);
|
||||
let mut c: f32 = lchuv.chroma;
|
||||
let original_c = c;
|
||||
let h = lchuv.hue;
|
||||
let l = lchuv.l;
|
||||
|
||||
loop {
|
||||
let new_srgb =
|
||||
Srgb::from_color_unclamped(new_original.into_xyz(Parameters::default_static_wp(40.0)));
|
||||
if new_srgb.is_within_bounds() {
|
||||
let new_lchuv = Lchuv::new(l, c, h);
|
||||
new_srgb = new_lchuv.into_color();
|
||||
c -= original_c / 1000.0;
|
||||
if c > 0.0 && (new_srgb.is_within_bounds()) {
|
||||
break new_srgb;
|
||||
}
|
||||
new_original = Cam16Jch::new(
|
||||
new_original.lightness,
|
||||
new_original.chroma * FACTOR,
|
||||
new_original.hue,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(dead_code)]
|
||||
pub fn map_cam16jch_to_srgb_hex(origin: &Cam16Jch<f32>) -> String {
|
||||
format!("{:x}", map_cam16jch_to_srgb(origin).into_format::<u8>())
|
||||
}
|
||||
|
||||
pub fn map_lch_to_srgb(origin: &Lch) -> Srgb {
|
||||
let mut new_srgb: Srgb = (*origin).into_color();
|
||||
if new_srgb.is_within_bounds() {
|
||||
return new_srgb;
|
||||
}
|
||||
|
||||
let mut c: f32 = origin.chroma;
|
||||
let original_c = c;
|
||||
let h = origin.hue;
|
||||
let l = origin.l;
|
||||
|
||||
loop {
|
||||
let new_lch = Lch::new(l, c, h);
|
||||
new_srgb = new_lch.into_color();
|
||||
c -= original_c / 1000.0;
|
||||
if c > 0.0 && (new_srgb.is_within_bounds()) {
|
||||
break new_srgb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn map_lch_to_srgb_hex(origin: &Lch) -> String {
|
||||
format!("{:x}", map_lch_to_srgb(origin).into_format::<u8>())
|
||||
}
|
||||
|
||||
pub fn map_hsl_to_srgb(origin: &Hsl) -> Srgb {
|
||||
let mut new_original = Hsl::new(origin.hue, origin.saturation, origin.lightness);
|
||||
const FACTOR: f32 = 0.99;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ use std::collections::HashMap;
|
|||
|
||||
use serde::Serialize;
|
||||
|
||||
use crate::convert::map_cam16jch_to_srgb_hex;
|
||||
use crate::convert::map_lch_to_srgb_hex;
|
||||
|
||||
use super::{color_set::M3ColorSet, surface::M3SurfaceSet, tonal_palette::TonalPalette};
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ pub struct M3BaselineColors {
|
|||
pub outline: String,
|
||||
pub outline_variant: String,
|
||||
pub scrim: String,
|
||||
pub shadown: String,
|
||||
pub shadow: String,
|
||||
pub customs: HashMap<String, M3ColorSet>,
|
||||
dark_set: bool,
|
||||
}
|
||||
|
|
@ -62,10 +62,10 @@ impl M3BaselineColors {
|
|||
tertiary,
|
||||
error,
|
||||
surface,
|
||||
outline: map_cam16jch_to_srgb_hex(&outline),
|
||||
outline_variant: map_cam16jch_to_srgb_hex(&outline_variant),
|
||||
scrim: map_cam16jch_to_srgb_hex(&scrim),
|
||||
shadown: map_cam16jch_to_srgb_hex(&shadow),
|
||||
outline: map_lch_to_srgb_hex(&outline),
|
||||
outline_variant: map_lch_to_srgb_hex(&outline_variant),
|
||||
scrim: map_lch_to_srgb_hex(&scrim),
|
||||
shadow: map_lch_to_srgb_hex(&shadow),
|
||||
customs: HashMap::new(),
|
||||
dark_set,
|
||||
}
|
||||
|
|
@ -95,7 +95,7 @@ impl M3BaselineColors {
|
|||
prefix, self.outline_variant
|
||||
));
|
||||
css_variables.push(format!("--color-{}-scrim: #{};", prefix, self.scrim));
|
||||
css_variables.push(format!("--color-{}-shadow: #{};", prefix, self.shadown));
|
||||
css_variables.push(format!("--color-{}-shadow: #{};", prefix, self.shadow));
|
||||
for (name, color_set) in &self.customs {
|
||||
css_variables.extend(color_set.to_css_variables(prefix, name));
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ impl M3BaselineColors {
|
|||
prefix, self.outline_variant
|
||||
));
|
||||
scss_variables.push(format!("$color-{}-scrim: #{};", prefix, self.scrim));
|
||||
scss_variables.push(format!("$color-{}-shadow: #{};", prefix, self.shadown));
|
||||
scss_variables.push(format!("$color-{}-shadow: #{};", prefix, self.shadow));
|
||||
for (name, color_set) in &self.customs {
|
||||
scss_variables.extend(color_set.to_scss_variables(prefix, name));
|
||||
}
|
||||
|
|
@ -147,7 +147,7 @@ impl M3BaselineColors {
|
|||
prefix, self.outline_variant
|
||||
));
|
||||
js_object_fields.push(format!("{}Scrim: '#{}',", prefix, self.scrim));
|
||||
js_object_fields.push(format!("{}Shadow: '#{}',", prefix, self.shadown));
|
||||
js_object_fields.push(format!("{}Shadow: '#{}',", prefix, self.shadow));
|
||||
for (name, color_set) in &self.customs {
|
||||
js_object_fields.extend(color_set.to_javascript_object_fields(prefix, name));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
use serde::Serialize;
|
||||
|
||||
use crate::convert::map_cam16jch_to_srgb_hex;
|
||||
use crate::convert::map_lch_to_srgb_hex;
|
||||
|
||||
use super::tonal_palette::TonalPalette;
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ pub struct M3ColorSet {
|
|||
pub root: String,
|
||||
pub on_root: String,
|
||||
pub container: String,
|
||||
pub on_conatiner: String,
|
||||
pub on_container: String,
|
||||
pub fixed: String,
|
||||
pub fixed_dim: String,
|
||||
pub on_fixed: String,
|
||||
|
|
@ -30,15 +30,15 @@ impl M3ColorSet {
|
|||
let inverse = palette.tone(80.0);
|
||||
|
||||
Self {
|
||||
root: map_cam16jch_to_srgb_hex(&root),
|
||||
on_root: map_cam16jch_to_srgb_hex(&on_root),
|
||||
container: map_cam16jch_to_srgb_hex(&container),
|
||||
on_conatiner: map_cam16jch_to_srgb_hex(&on_container),
|
||||
fixed: map_cam16jch_to_srgb_hex(&fixed),
|
||||
fixed_dim: map_cam16jch_to_srgb_hex(&fixed_dim),
|
||||
on_fixed: map_cam16jch_to_srgb_hex(&on_fixed),
|
||||
fixed_variant: map_cam16jch_to_srgb_hex(&fixed_variant),
|
||||
inverse: map_cam16jch_to_srgb_hex(&inverse),
|
||||
root: map_lch_to_srgb_hex(&root),
|
||||
on_root: map_lch_to_srgb_hex(&on_root),
|
||||
container: map_lch_to_srgb_hex(&container),
|
||||
on_container: map_lch_to_srgb_hex(&on_container),
|
||||
fixed: map_lch_to_srgb_hex(&fixed),
|
||||
fixed_dim: map_lch_to_srgb_hex(&fixed_dim),
|
||||
on_fixed: map_lch_to_srgb_hex(&on_fixed),
|
||||
fixed_variant: map_lch_to_srgb_hex(&fixed_variant),
|
||||
inverse: map_lch_to_srgb_hex(&inverse),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,15 +54,15 @@ impl M3ColorSet {
|
|||
let inverse = palette.tone(40.0);
|
||||
|
||||
Self {
|
||||
root: map_cam16jch_to_srgb_hex(&root),
|
||||
on_root: map_cam16jch_to_srgb_hex(&on_root),
|
||||
container: map_cam16jch_to_srgb_hex(&container),
|
||||
on_conatiner: map_cam16jch_to_srgb_hex(&on_container),
|
||||
fixed: map_cam16jch_to_srgb_hex(&fixed),
|
||||
fixed_dim: map_cam16jch_to_srgb_hex(&fixed_dim),
|
||||
on_fixed: map_cam16jch_to_srgb_hex(&on_fixed),
|
||||
fixed_variant: map_cam16jch_to_srgb_hex(&fixed_variant),
|
||||
inverse: map_cam16jch_to_srgb_hex(&inverse),
|
||||
root: map_lch_to_srgb_hex(&root),
|
||||
on_root: map_lch_to_srgb_hex(&on_root),
|
||||
container: map_lch_to_srgb_hex(&container),
|
||||
on_container: map_lch_to_srgb_hex(&on_container),
|
||||
fixed: map_lch_to_srgb_hex(&fixed),
|
||||
fixed_dim: map_lch_to_srgb_hex(&fixed_dim),
|
||||
on_fixed: map_lch_to_srgb_hex(&on_fixed),
|
||||
fixed_variant: map_lch_to_srgb_hex(&fixed_variant),
|
||||
inverse: map_lch_to_srgb_hex(&inverse),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ impl M3ColorSet {
|
|||
));
|
||||
variable_lines.push(format!(
|
||||
"--color-{}-on-{}-container: #{};",
|
||||
prefix, name, self.on_conatiner
|
||||
prefix, name, self.on_container
|
||||
));
|
||||
variable_lines.push(format!(
|
||||
"--color-{}-{}-fixed: #{};",
|
||||
|
|
@ -117,7 +117,7 @@ impl M3ColorSet {
|
|||
));
|
||||
variable_lines.push(format!(
|
||||
"$color-{}-on-{}-container: #{};",
|
||||
prefix, name, self.on_conatiner
|
||||
prefix, name, self.on_container
|
||||
));
|
||||
variable_lines.push(format!(
|
||||
"$color-{}-{}-fixed: #{};",
|
||||
|
|
@ -162,7 +162,7 @@ impl M3ColorSet {
|
|||
));
|
||||
variable_lines.push(format!(
|
||||
"{}On{}Container: '#{}',",
|
||||
prefix, name, self.on_conatiner
|
||||
prefix, name, self.on_container
|
||||
));
|
||||
variable_lines.push(format!("{}{}Fixed: '#{}',", prefix, name, self.fixed));
|
||||
variable_lines.push(format!(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
use std::str::FromStr;
|
||||
|
||||
use baseline::M3BaselineColors;
|
||||
use palette::cam16::{Cam16Jch, Parameters};
|
||||
use palette::{IntoColor, Srgb};
|
||||
use palette::{IntoColor, Lch, Srgb};
|
||||
use serde::Serialize;
|
||||
use tonal_palette::TonalPalette;
|
||||
|
||||
use crate::convert::map_cam16jch_to_srgb_hex;
|
||||
use crate::convert::map_lch_to_srgb_hex;
|
||||
use crate::errors;
|
||||
|
||||
use super::SchemeExport;
|
||||
|
|
@ -26,20 +25,14 @@ pub struct MaterialDesign3Scheme {
|
|||
|
||||
impl MaterialDesign3Scheme {
|
||||
pub fn new(source_color: &str, error_color: &str) -> Result<Self, errors::ColorError> {
|
||||
let source = Cam16Jch::from_xyz(
|
||||
Srgb::from_str(source_color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(source_color.to_string()))?
|
||||
.into_format::<f32>()
|
||||
.into_color(),
|
||||
Parameters::default_static_wp(40.0),
|
||||
);
|
||||
let error = Cam16Jch::from_xyz(
|
||||
Srgb::from_str(error_color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(error_color.to_string()))?
|
||||
.into_format::<f32>()
|
||||
.into_color(),
|
||||
Parameters::default_static_wp(40.0),
|
||||
);
|
||||
let source: Lch = Srgb::from_str(source_color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(source_color.to_string()))?
|
||||
.into_format::<f32>()
|
||||
.into_color();
|
||||
let error: Lch = Srgb::from_str(error_color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(error_color.to_string()))?
|
||||
.into_format::<f32>()
|
||||
.into_color();
|
||||
let source_hue = source.hue.into_positive_degrees();
|
||||
let p = TonalPalette::from_hue_and_chroma(source_hue, source.chroma);
|
||||
let s = TonalPalette::from_hue_and_chroma(source_hue, source.chroma / 3.0);
|
||||
|
|
@ -49,8 +42,8 @@ impl MaterialDesign3Scheme {
|
|||
let e = TonalPalette::from_hue_and_chroma(error.hue.into_positive_degrees(), 84.0);
|
||||
|
||||
Ok(Self {
|
||||
white: map_cam16jch_to_srgb_hex(&Cam16Jch::new(100.0, 0.0, 0.0)),
|
||||
black: map_cam16jch_to_srgb_hex(&Cam16Jch::new(0.0, 0.0, 0.0)),
|
||||
white: map_lch_to_srgb_hex(&Lch::new(100.0, 0.0, 0.0)),
|
||||
black: map_lch_to_srgb_hex(&Lch::new(0.0, 0.0, 0.0)),
|
||||
light_baseline: M3BaselineColors::new(&p, &s, &t, &n, &nv, &e, false),
|
||||
dark_baseline: M3BaselineColors::new(&p, &s, &t, &n, &nv, &e, true),
|
||||
})
|
||||
|
|
@ -61,13 +54,10 @@ impl MaterialDesign3Scheme {
|
|||
name: String,
|
||||
color: String,
|
||||
) -> Result<(), errors::ColorError> {
|
||||
let custom_color = Cam16Jch::from_xyz(
|
||||
Srgb::from_str(&color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(color.clone()))?
|
||||
.into_format::<f32>()
|
||||
.into_color(),
|
||||
Parameters::default_static_wp(40.0),
|
||||
);
|
||||
let custom_color: Lch = Srgb::from_str(&color)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(color.clone()))?
|
||||
.into_format::<f32>()
|
||||
.into_color();
|
||||
let hue = custom_color.hue.into_positive_degrees();
|
||||
let palette = TonalPalette::from_hue_and_chroma(hue, custom_color.chroma);
|
||||
self.light_baseline.add_custom_set(name.clone(), &palette);
|
||||
|
|
@ -103,8 +93,8 @@ impl SchemeExport for MaterialDesign3Scheme {
|
|||
let mut js_object = Vec::new();
|
||||
|
||||
js_object.push("const colorScheme = {".to_string());
|
||||
js_object.push(format!(" white: '#{}'", self.white));
|
||||
js_object.push(format!(" black: '#{}'", self.black));
|
||||
js_object.push(format!(" white: '#{}',", self.white));
|
||||
js_object.push(format!(" black: '#{}',", self.black));
|
||||
js_object.push(" light: {".to_string());
|
||||
js_object.extend(
|
||||
self.light_baseline
|
||||
|
|
@ -125,6 +115,6 @@ impl SchemeExport for MaterialDesign3Scheme {
|
|||
js_object.push(" },".to_string());
|
||||
js_object.push("}".to_string());
|
||||
|
||||
js_object.join(",\n")
|
||||
js_object.join("\n")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
use serde::Serialize;
|
||||
|
||||
use crate::convert::map_cam16jch_to_srgb_hex;
|
||||
use crate::convert::map_lch_to_srgb_hex;
|
||||
|
||||
use super::tonal_palette::TonalPalette;
|
||||
|
||||
|
|
@ -36,18 +36,18 @@ impl M3SurfaceSet {
|
|||
let on_inverse = neutral_variant.tone(95.0);
|
||||
|
||||
Self {
|
||||
root: map_cam16jch_to_srgb_hex(&root),
|
||||
dim: map_cam16jch_to_srgb_hex(&dim),
|
||||
bright: map_cam16jch_to_srgb_hex(&bright),
|
||||
container: map_cam16jch_to_srgb_hex(&container),
|
||||
container_lowest: map_cam16jch_to_srgb_hex(&container_lowest),
|
||||
container_low: map_cam16jch_to_srgb_hex(&container_low),
|
||||
container_high: map_cam16jch_to_srgb_hex(&container_high),
|
||||
container_highest: map_cam16jch_to_srgb_hex(&container_highest),
|
||||
on_root: map_cam16jch_to_srgb_hex(&on_root),
|
||||
on_root_variant: map_cam16jch_to_srgb_hex(&on_root_variant),
|
||||
inverse: map_cam16jch_to_srgb_hex(&inverse),
|
||||
on_inverse: map_cam16jch_to_srgb_hex(&on_inverse),
|
||||
root: map_lch_to_srgb_hex(&root),
|
||||
dim: map_lch_to_srgb_hex(&dim),
|
||||
bright: map_lch_to_srgb_hex(&bright),
|
||||
container: map_lch_to_srgb_hex(&container),
|
||||
container_lowest: map_lch_to_srgb_hex(&container_lowest),
|
||||
container_low: map_lch_to_srgb_hex(&container_low),
|
||||
container_high: map_lch_to_srgb_hex(&container_high),
|
||||
container_highest: map_lch_to_srgb_hex(&container_highest),
|
||||
on_root: map_lch_to_srgb_hex(&on_root),
|
||||
on_root_variant: map_lch_to_srgb_hex(&on_root_variant),
|
||||
inverse: map_lch_to_srgb_hex(&inverse),
|
||||
on_inverse: map_lch_to_srgb_hex(&on_inverse),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,18 +66,18 @@ impl M3SurfaceSet {
|
|||
let on_inverse = neutral_variant.tone(20.0);
|
||||
|
||||
Self {
|
||||
root: map_cam16jch_to_srgb_hex(&root),
|
||||
dim: map_cam16jch_to_srgb_hex(&dim),
|
||||
bright: map_cam16jch_to_srgb_hex(&bright),
|
||||
container: map_cam16jch_to_srgb_hex(&container),
|
||||
container_lowest: map_cam16jch_to_srgb_hex(&container_lowest),
|
||||
container_low: map_cam16jch_to_srgb_hex(&container_low),
|
||||
container_high: map_cam16jch_to_srgb_hex(&container_high),
|
||||
container_highest: map_cam16jch_to_srgb_hex(&container_highest),
|
||||
on_root: map_cam16jch_to_srgb_hex(&on_root),
|
||||
on_root_variant: map_cam16jch_to_srgb_hex(&on_root_variant),
|
||||
inverse: map_cam16jch_to_srgb_hex(&inverse),
|
||||
on_inverse: map_cam16jch_to_srgb_hex(&on_inverse),
|
||||
root: map_lch_to_srgb_hex(&root),
|
||||
dim: map_lch_to_srgb_hex(&dim),
|
||||
bright: map_lch_to_srgb_hex(&bright),
|
||||
container: map_lch_to_srgb_hex(&container),
|
||||
container_lowest: map_lch_to_srgb_hex(&container_lowest),
|
||||
container_low: map_lch_to_srgb_hex(&container_low),
|
||||
container_high: map_lch_to_srgb_hex(&container_high),
|
||||
container_highest: map_lch_to_srgb_hex(&container_highest),
|
||||
on_root: map_lch_to_srgb_hex(&on_root),
|
||||
on_root_variant: map_lch_to_srgb_hex(&on_root_variant),
|
||||
inverse: map_lch_to_srgb_hex(&inverse),
|
||||
on_inverse: map_lch_to_srgb_hex(&on_inverse),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
use std::str::FromStr;
|
||||
|
||||
use palette::{
|
||||
cam16::{Cam16Jch, Parameters},
|
||||
IntoColor, Srgb,
|
||||
};
|
||||
use palette::{cam16::Cam16Jch, IntoColor, Lch, Srgb};
|
||||
|
||||
use crate::errors;
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct TonalPalette {
|
||||
pub key_color: Cam16Jch<f32>,
|
||||
pub key_color: Lch,
|
||||
}
|
||||
|
||||
#[inline]
|
||||
|
|
@ -30,7 +27,7 @@ fn find_max_chroma(cache: &mut Vec<(f32, f32)>, hue: f32, tone: f32) -> f32 {
|
|||
chroma
|
||||
}
|
||||
|
||||
fn from_hue_and_chroma(hue: f32, chroma: f32) -> Cam16Jch<f32> {
|
||||
fn from_hue_and_chroma(hue: f32, chroma: f32) -> Lch {
|
||||
let mut max_chroma_cache = Vec::new();
|
||||
let hue = if hue >= 360.0 { hue - 360.0 } else { hue };
|
||||
const PIVOT_TONE: f32 = 50.0;
|
||||
|
|
@ -51,7 +48,7 @@ fn from_hue_and_chroma(hue: f32, chroma: f32) -> Cam16Jch<f32> {
|
|||
upper_tone = mid_tone;
|
||||
} else {
|
||||
if approximately_equal(lower_tone, mid_tone) {
|
||||
return Cam16Jch::new(lower_tone, chroma, hue);
|
||||
return Lch::new(lower_tone, chroma, hue);
|
||||
}
|
||||
lower_tone = mid_tone;
|
||||
}
|
||||
|
|
@ -63,20 +60,17 @@ fn from_hue_and_chroma(hue: f32, chroma: f32) -> Cam16Jch<f32> {
|
|||
}
|
||||
}
|
||||
}
|
||||
Cam16Jch::new(lower_tone, chroma, hue)
|
||||
Lch::new(lower_tone, chroma, hue)
|
||||
}
|
||||
|
||||
impl TryFrom<String> for TonalPalette {
|
||||
type Error = errors::ColorError;
|
||||
|
||||
fn try_from(value: String) -> Result<Self, Self::Error> {
|
||||
let key_color = Cam16Jch::from_xyz(
|
||||
Srgb::from_str(&value)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(value))?
|
||||
.into_format::<f32>()
|
||||
.into_color(),
|
||||
Parameters::default_static_wp(40.0),
|
||||
);
|
||||
let key_color: Lch = Srgb::from_str(&value)
|
||||
.map_err(|_| errors::ColorError::UnrecogniazedRGB(value))?
|
||||
.into_format::<f32>()
|
||||
.into_color();
|
||||
Ok(TonalPalette { key_color })
|
||||
}
|
||||
}
|
||||
|
|
@ -87,8 +81,8 @@ impl TonalPalette {
|
|||
TonalPalette { key_color }
|
||||
}
|
||||
|
||||
pub fn tone(&self, tone: f32) -> Cam16Jch<f32> {
|
||||
let toned_color = Cam16Jch::new(tone, self.key_color.chroma, self.key_color.hue);
|
||||
pub fn tone(&self, tone: f32) -> Lch {
|
||||
let toned_color = Lch::new(tone, self.key_color.chroma, self.key_color.hue);
|
||||
|
||||
toned_color
|
||||
}
|
||||
|
|
|
|||
150
src/color_functions/color_module.d.ts
vendored
150
src/color_functions/color_module.d.ts
vendored
|
|
@ -7,9 +7,6 @@ export function generate_material_design_2_scheme(primary_color: string, seconda
|
|||
export function generate_q_scheme_automatically(primary_color: string, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
|
||||
export function generate_q_scheme_manually(primary_color: string, secondary_color: string | null | undefined, tertiary_color: string | null | undefined, accent_color: string | null | undefined, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
|
||||
export function generate_swatch_scheme(colors: SwatchEntry[], setting: SwatchSchemeSetting): any;
|
||||
export function q_scheme_color_expanding_methods(): any;
|
||||
export function q_scheme_wacg_settings(): any;
|
||||
export function q_scheme_default_settings(): SchemeSetting;
|
||||
export function differ_in_rgb(color: string, other: string): RGBDifference;
|
||||
export function relative_differ_in_rgb(color: string, other: string): RGBDifference;
|
||||
export function differ_in_hsl(color: string, other: string): HSLDifference;
|
||||
|
|
@ -27,6 +24,14 @@ 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 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 swatch_scheme_default_settings(): SwatchSchemeSetting;
|
||||
export function series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
|
||||
export function q_scheme_color_expanding_methods(): any;
|
||||
export function q_scheme_wacg_settings(): any;
|
||||
export function q_scheme_default_settings(): SchemeSetting;
|
||||
export function shift_hue(color: string, degree: number): string;
|
||||
export function analogous_30(color: string): string[];
|
||||
export function analogous_60(color: string): string[];
|
||||
|
|
@ -45,11 +50,6 @@ export function oklch_to_hex(l: number, c: number, h: number): string;
|
|||
export function represent_hct(color: string): Float32Array;
|
||||
export function hct_to_hex(hue: number, chroma: number, tone: number): string;
|
||||
export function wacg_relative_contrast(fg_color: string, bg_color: string): number;
|
||||
export function 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 swatch_scheme_default_settings(): SwatchSchemeSetting;
|
||||
export function series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
|
||||
export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
|
||||
export enum ColorExpand {
|
||||
Complementary = 0,
|
||||
Analogous = 1,
|
||||
|
|
@ -179,6 +179,16 @@ export interface InitOutput {
|
|||
readonly generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
|
||||
readonly generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
|
||||
readonly generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
|
||||
readonly differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
|
|
@ -186,9 +196,49 @@ export interface InitOutput {
|
|||
readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
|
||||
readonly __wbg_get_oklchdifference_lightness: (a: number) => number;
|
||||
readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
|
||||
readonly q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
readonly q_scheme_wacg_settings: () => [number, number, number];
|
||||
readonly q_scheme_default_settings: () => number;
|
||||
readonly lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
|
||||
readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_hue: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
|
||||
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_average: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
|
||||
readonly __wbg_differ_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_differ_delta: (a: number) => number;
|
||||
readonly __wbg_set_differ_delta: (a: number, b: number) => void;
|
||||
readonly __wbg_get_differ_percent: (a: number) => number;
|
||||
readonly __wbg_set_differ_percent: (a: number, b: number) => void;
|
||||
readonly __wbg_hsldifference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_hue: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_saturation: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_lightness: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
|
||||
readonly __wbg_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 generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
|
||||
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;
|
||||
|
|
@ -202,39 +252,20 @@ export interface InitOutput {
|
|||
readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
|
||||
readonly swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
|
||||
readonly swatchschemesetting_toJsValue: (a: number) => [number, number, number];
|
||||
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
|
||||
readonly __wbg_get_mixreversing_average: (a: number) => number;
|
||||
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
|
||||
readonly differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_hue: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
|
||||
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
|
||||
readonly lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
|
||||
readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly __wbg_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 swatchentry_new: (a: number, b: number, c: number, d: number) => number;
|
||||
readonly swatchentry_toJsValue: (a: number) => [number, number, number];
|
||||
readonly swatch_scheme_default_settings: () => 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];
|
||||
readonly q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
readonly q_scheme_wacg_settings: () => [number, number, number];
|
||||
readonly q_scheme_default_settings: () => number;
|
||||
readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
readonly analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
readonly analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
|
|
@ -253,37 +284,6 @@ 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_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_hsldifference_free: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_hue: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_saturation: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
|
||||
readonly __wbg_get_hsldifference_lightness: (a: number) => number;
|
||||
readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
|
||||
readonly __wbg_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_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 swatchentry_new: (a: number, b: number, c: number, d: number) => number;
|
||||
readonly swatchentry_toJsValue: (a: number) => [number, number, number];
|
||||
readonly swatch_scheme_default_settings: () => 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];
|
||||
readonly __wbindgen_malloc: (a: number, b: number) => number;
|
||||
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
|
||||
readonly __wbindgen_exn_store: (a: number) => void;
|
||||
|
|
|
|||
|
|
@ -349,36 +349,6 @@ export function generate_swatch_scheme(colors, setting) {
|
|||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_color_expanding_methods() {
|
||||
const ret = wasm.q_scheme_color_expanding_methods();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_wacg_settings() {
|
||||
const ret = wasm.q_scheme_wacg_settings();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SchemeSetting}
|
||||
*/
|
||||
export function q_scheme_default_settings() {
|
||||
const ret = wasm.q_scheme_default_settings();
|
||||
return SchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {string} other
|
||||
|
|
@ -734,6 +704,129 @@ export function shade(color, percent) {
|
|||
}
|
||||
}
|
||||
|
||||
function getArrayJsValueFromWasm0(ptr, len) {
|
||||
ptr = ptr >>> 0;
|
||||
const mem = getDataViewMemory0();
|
||||
const result = [];
|
||||
for (let i = ptr; i < ptr + 4 * len; i += 4) {
|
||||
result.push(wasm.__wbindgen_export_4.get(mem.getUint32(i, true)));
|
||||
}
|
||||
wasm.__externref_drop_slice(ptr, len);
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* @param {string} reference_color
|
||||
* @param {number} swatch_amount
|
||||
* @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 {SwatchSchemeSetting}
|
||||
*/
|
||||
export function swatch_scheme_default_settings() {
|
||||
const ret = wasm.swatch_scheme_default_settings();
|
||||
return SwatchSchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {number} expand_amount
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.series(ptr0, len0, expand_amount, step);
|
||||
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
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tonal_lighten_series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tonal_lighten_series(ptr0, len0, expand_amount, step);
|
||||
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
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tonal_darken_series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tonal_darken_series(ptr0, len0, expand_amount, step);
|
||||
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 q_scheme_color_expanding_methods() {
|
||||
const ret = wasm.q_scheme_color_expanding_methods();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {any}
|
||||
*/
|
||||
export function q_scheme_wacg_settings() {
|
||||
const ret = wasm.q_scheme_wacg_settings();
|
||||
if (ret[2]) {
|
||||
throw takeFromExternrefTable0(ret[1]);
|
||||
}
|
||||
return takeFromExternrefTable0(ret[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SchemeSetting}
|
||||
*/
|
||||
export function q_scheme_default_settings() {
|
||||
const ret = wasm.q_scheme_default_settings();
|
||||
return SchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {number} degree
|
||||
|
|
@ -760,16 +853,6 @@ export function shift_hue(color, degree) {
|
|||
}
|
||||
}
|
||||
|
||||
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[]}
|
||||
|
|
@ -1114,89 +1197,6 @@ export function wacg_relative_contrast(fg_color, bg_color) {
|
|||
return 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SwatchSchemeSetting}
|
||||
*/
|
||||
export function swatch_scheme_default_settings() {
|
||||
const ret = wasm.swatch_scheme_default_settings();
|
||||
return SwatchSchemeSetting.__wrap(ret);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} color
|
||||
* @param {number} expand_amount
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.series(ptr0, len0, expand_amount, step);
|
||||
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
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tonal_lighten_series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tonal_lighten_series(ptr0, len0, expand_amount, step);
|
||||
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
|
||||
* @param {number} step
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function tonal_darken_series(color, expand_amount, step) {
|
||||
const ptr0 = passStringToWasm0(color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
|
||||
const len0 = WASM_VECTOR_LEN;
|
||||
const ret = wasm.tonal_darken_series(ptr0, len0, expand_amount, step);
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* @enum {0 | 1 | 2 | 3 | 4 | 5 | 6}
|
||||
*/
|
||||
|
|
|
|||
Binary file not shown.
134
src/color_functions/color_module_bg.wasm.d.ts
vendored
134
src/color_functions/color_module_bg.wasm.d.ts
vendored
|
|
@ -32,6 +32,16 @@ export const generate_material_design_2_scheme: (a: number, b: number, c: number
|
|||
export const generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
|
||||
export const generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
|
||||
export const generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
|
||||
export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const __wbg_oklchdifference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_oklchdifference_hue: (a: number) => number;
|
||||
export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
|
||||
|
|
@ -39,9 +49,49 @@ 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 q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
export const q_scheme_wacg_settings: () => [number, number, number];
|
||||
export const q_scheme_default_settings: () => number;
|
||||
export const lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
|
||||
export const tint: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const shade: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const __wbg_hctdiffference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_hue: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_chroma: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_lightness: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
|
||||
export const __wbg_mixreversing_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_average: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
|
||||
export const __wbg_differ_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_differ_delta: (a: number) => number;
|
||||
export const __wbg_set_differ_delta: (a: number, b: number) => void;
|
||||
export const __wbg_get_differ_percent: (a: number) => number;
|
||||
export const __wbg_set_differ_percent: (a: number, b: number) => void;
|
||||
export const __wbg_hsldifference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_hue: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_saturation: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_lightness: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
|
||||
export const __wbg_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 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_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;
|
||||
|
|
@ -55,39 +105,20 @@ export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
|
|||
export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
|
||||
export const swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
|
||||
export const swatchschemesetting_toJsValue: (a: number) => [number, number, number];
|
||||
export const __wbg_mixreversing_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
|
||||
export const __wbg_get_mixreversing_average: (a: number) => number;
|
||||
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
|
||||
export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
|
||||
export const __wbg_hctdiffference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_hue: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_chroma: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
|
||||
export const __wbg_get_hctdiffference_lightness: (a: number) => number;
|
||||
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
|
||||
export const lighten: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
|
||||
export const tint: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const shade: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const __wbg_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 swatchentry_new: (a: number, b: number, c: number, d: number) => number;
|
||||
export const swatchentry_toJsValue: (a: number) => [number, number, number];
|
||||
export const swatch_scheme_default_settings: () => number;
|
||||
export const series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const q_scheme_color_expanding_methods: () => [number, number, number];
|
||||
export const q_scheme_wacg_settings: () => [number, number, number];
|
||||
export const q_scheme_default_settings: () => number;
|
||||
export const shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
|
||||
export const analogous_30: (a: number, b: number) => [number, number, number, number];
|
||||
export const analogous_60: (a: number, b: number) => [number, number, number, number];
|
||||
|
|
@ -106,37 +137,6 @@ 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_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_hsldifference_free: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_hue: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_saturation: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
|
||||
export const __wbg_get_hsldifference_lightness: (a: number) => number;
|
||||
export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
|
||||
export const __wbg_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_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 swatchentry_new: (a: number, b: number, c: number, d: number) => number;
|
||||
export const swatchentry_toJsValue: (a: number) => [number, number, number];
|
||||
export const swatch_scheme_default_settings: () => number;
|
||||
export const series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
|
||||
export const __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;
|
||||
|
|
|
|||
13
src/page-components/scheme/ColorEntry.module.css
Normal file
13
src/page-components/scheme/ColorEntry.module.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@layer components {
|
||||
.delete_btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-yuebai);
|
||||
background-color: oklch(from var(--color-danger) l c h / 0.25);
|
||||
&:hover {
|
||||
background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
|
||||
}
|
||||
&:active {
|
||||
background-color: oklch(from var(--color-danger-active) l c h / 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/page-components/scheme/ColorEntry.tsx
Normal file
38
src/page-components/scheme/ColorEntry.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { isEmpty } from 'lodash-es';
|
||||
import { ActionIcon } from '../../components/ActionIcon';
|
||||
import { FloatColorPicker } from '../../components/FloatcolorPicker';
|
||||
import styles from './colorEntry.module.css';
|
||||
|
||||
export type IdenticalColorEntry = {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
type ColorEntryProps = {
|
||||
entry: IdenticalColorEntry;
|
||||
onDelete?: (index: string) => void;
|
||||
};
|
||||
|
||||
export function ColorEntry({ entry, onDelete }: ColorEntryProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="input_wrapper">
|
||||
<input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
|
||||
</div>
|
||||
<div>
|
||||
<FloatColorPicker
|
||||
name={`color_${entry.id}`}
|
||||
color={isEmpty(entry.color) ? undefined : entry.color}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ActionIcon
|
||||
icon="tabler:trash"
|
||||
extendClassName={styles.delete_btn}
|
||||
onClick={() => onDelete?.(entry.id)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,29 @@
|
|||
export function M2Scheme() {
|
||||
return <div>Material Design 2 Scheme</div>;
|
||||
import { isEqual, isNil } from 'lodash-es';
|
||||
import { useState } from 'react';
|
||||
import { Tab } from '../../components/Tab';
|
||||
import { SchemeExport } from './Export';
|
||||
|
||||
const tabOptions = [
|
||||
{ title: 'Overview', id: 'overview' },
|
||||
{ title: 'Builder', id: 'builder' },
|
||||
{ title: 'Exports', id: 'export' },
|
||||
];
|
||||
|
||||
type M3SchemeProps = {
|
||||
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
|
||||
};
|
||||
|
||||
export function M2Scheme({ scheme }: M3SchemeProps) {
|
||||
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') && <div>Preview</div>}
|
||||
{isEqual(activeTab, 'builder') && <div>Builder</div>}
|
||||
{isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,34 @@
|
|||
export function M3Scheme() {
|
||||
return <div>Material Design 3 Scheme</div>;
|
||||
import { isEqual, isNil } from 'lodash-es';
|
||||
import { useState } from 'react';
|
||||
import { Tab } from '../../components/Tab';
|
||||
import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
|
||||
import { SchemeExport } from './Export';
|
||||
import { M3SchemeBuilder } from './m3-scheme/Builder';
|
||||
import { M3SchemePreview } from './m3-scheme/Preview';
|
||||
|
||||
const tabOptions = [
|
||||
{ title: 'Overview', id: 'overview' },
|
||||
{ title: 'Builder', id: 'builder' },
|
||||
{ title: 'Exports', id: 'export' },
|
||||
];
|
||||
|
||||
type M3SchemeProps = {
|
||||
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
|
||||
};
|
||||
|
||||
export function M3Scheme({ scheme }: M3SchemeProps) {
|
||||
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') && <M3SchemePreview scheme={scheme} />}
|
||||
{isEqual(activeTab, 'builder') && (
|
||||
<M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
|
||||
)}
|
||||
{isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
46
src/page-components/scheme/m3-scheme/Builder.module.css
Normal file
46
src/page-components/scheme/m3-scheme/Builder.module.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@layer pages {
|
||||
.builder_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 200px);
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
.label {
|
||||
max-width: 200px;
|
||||
grid-column: 1;
|
||||
padding-inline-end: var(--spacing-m);
|
||||
text-align: right;
|
||||
}
|
||||
.segment_title {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
}
|
||||
.color_picker_row {
|
||||
grid-column: 2 / span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
.error_msg {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.delete_btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-yuebai);
|
||||
background-color: oklch(from var(--color-danger) l c h / 0.25);
|
||||
&:hover {
|
||||
background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
|
||||
}
|
||||
&:active {
|
||||
background-color: oklch(from var(--color-danger-active) l c h / 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
162
src/page-components/scheme/m3-scheme/Builder.tsx
Normal file
162
src/page-components/scheme/m3-scheme/Builder.tsx
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import { includes, isEmpty, isNil } from 'lodash-es';
|
||||
import { useActionState, useCallback, useMemo, useState } from 'react';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { MaterialDesign3Scheme, MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import { useUpdateScheme } from '../../../stores/schemes';
|
||||
import { mapToObject } from '../../../utls';
|
||||
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
|
||||
import styles from './Builder.module.css';
|
||||
|
||||
type M3SchemeBuilderProps = {
|
||||
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
|
||||
onBuildCompleted?: () => void;
|
||||
};
|
||||
|
||||
export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderProps) {
|
||||
const { colorFn } = useColorFunction();
|
||||
const updateScheme = useUpdateScheme(scheme.id);
|
||||
const originalColors = useMemo(() => {
|
||||
return Object.entries(scheme.schemeStorage.source?.custom_colors ?? {}).map(
|
||||
([name, color], index) => ({ id: `oc_${index}`, name, color } as IdenticalColorEntry),
|
||||
);
|
||||
}, [scheme.schemeStorage.source]);
|
||||
const [newColors, setNewColors] = useState<IdenticalColorEntry[]>([]);
|
||||
const [deleted, setDeleted] = useState<string[]>([]);
|
||||
const addEntryAction = useCallback(() => {
|
||||
setNewColors((prev) => [...prev, { id: `nc_${prev.length}`, name: '', color: '' }]);
|
||||
}, []);
|
||||
const colorKeys = useMemo(
|
||||
() =>
|
||||
[...originalColors, ...newColors]
|
||||
.map((color) => color.id)
|
||||
.filter((c) => !includes(deleted, c)),
|
||||
[originalColors, newColors, deleted],
|
||||
);
|
||||
|
||||
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
|
||||
const errMsg = new Map<string, string>();
|
||||
|
||||
try {
|
||||
const sourceColor = formData.get('source');
|
||||
if (isNil(sourceColor) || isEmpty(sourceColor)) {
|
||||
errMsg.set('source', 'Source color is required');
|
||||
}
|
||||
const errorColor = formData.get('error');
|
||||
if (isNil(errorColor) || isEmpty(errorColor)) {
|
||||
errMsg.set('error', 'Error color is required');
|
||||
}
|
||||
if (!isEmpty(errMsg)) return errMsg;
|
||||
|
||||
const customColors: Record<string, string> = {};
|
||||
for (const key of colorKeys) {
|
||||
const name = formData.get(`name_${key}`) as string;
|
||||
const color = formData.get(`color_${key}`) as string;
|
||||
if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
|
||||
customColors[name] = color;
|
||||
}
|
||||
|
||||
const generatedScheme = colorFn?.generate_material_design_3_scheme(
|
||||
sourceColor,
|
||||
errorColor,
|
||||
customColors,
|
||||
);
|
||||
updateScheme((prev) => {
|
||||
prev.schemeStorage.source = {
|
||||
source: sourceColor as string,
|
||||
error: errorColor as string,
|
||||
custom_colors: customColors,
|
||||
};
|
||||
prev.schemeStorage.scheme = {
|
||||
white: generatedScheme[0].white,
|
||||
black: generatedScheme[0].black,
|
||||
light_baseline: {
|
||||
...generatedScheme[0].light_baseline,
|
||||
customs: mapToObject(generatedScheme[0].light_baseline.customs),
|
||||
},
|
||||
dark_baseline: {
|
||||
...generatedScheme[0].dark_baseline,
|
||||
customs: mapToObject(generatedScheme[0].dark_baseline.customs),
|
||||
},
|
||||
} as MaterialDesign3Scheme;
|
||||
prev.schemeStorage.cssVariables = generatedScheme[1];
|
||||
prev.schemeStorage.scssVariables = generatedScheme[2];
|
||||
prev.schemeStorage.jsVariables = generatedScheme[3];
|
||||
return prev;
|
||||
});
|
||||
|
||||
onBuildCompleted?.();
|
||||
} catch (e) {
|
||||
console.error('[generate m3 scheme]', e);
|
||||
}
|
||||
|
||||
return errMsg;
|
||||
}, new Map<string, string>());
|
||||
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<form action={handleSubmitAction} className={styles.builder_layout}>
|
||||
<h5 className={styles.segment_title}>Required Colors</h5>
|
||||
<label className={styles.label}>Source Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="source"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.source) ||
|
||||
isEmpty(scheme.schemeStorage.source?.source)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source?.source
|
||||
}
|
||||
/>
|
||||
{errMsg.has('source') && <span className={styles.error_msg}>{errMsg.get('source')}</span>}
|
||||
</div>
|
||||
<label className={styles.label}>Error Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="error"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.error) ||
|
||||
isEmpty(scheme.schemeStorage.source.error)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source.error
|
||||
}
|
||||
/>
|
||||
{errMsg.has('error') && <span className={styles.error_msg}>{errMsg.get('error')}</span>}
|
||||
</div>
|
||||
<h5 className={styles.segment_title}>Custom Colors</h5>
|
||||
<label style={{ gridColumn: 1 }}>Name</label>
|
||||
<label>Color</label>
|
||||
<div>
|
||||
<button type="button" className="small" onClick={addEntryAction}>
|
||||
Add Color
|
||||
</button>
|
||||
</div>
|
||||
{originalColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
{newColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<button type="submit" className="primary">
|
||||
Build Scheme
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
89
src/page-components/scheme/m3-scheme/Preview.module.css
Normal file
89
src/page-components/scheme/m3-scheme/Preview.module.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
@layer pages {
|
||||
.preview_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.preview_block {
|
||||
width: inherit;
|
||||
padding: var(--spacing-m) var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-m);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.1em;
|
||||
.main_grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: var(--spacing-m);
|
||||
.main_color_sets {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
.surface_sets {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-xs);
|
||||
.surface_basics {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
.surface_levels {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
.surface_variants {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
.additional_sets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-xs);
|
||||
.constants {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: bold;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
.vertical_set {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.horizontal_set {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
.color_block {
|
||||
padding: var(--spacing-s) var(--spacing-xs);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
272
src/page-components/scheme/m3-scheme/Preview.tsx
Normal file
272
src/page-components/scheme/m3-scheme/Preview.tsx
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import {
|
||||
Baseline,
|
||||
ColorSet,
|
||||
MaterialDesign3SchemeStorage,
|
||||
Surface,
|
||||
} from '../../../material-3-scheme';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import styles from './Preview.module.css';
|
||||
|
||||
type ColorSetProps = {
|
||||
name: string;
|
||||
set: ColorSet;
|
||||
};
|
||||
|
||||
function VerticalColorSet({ name, set }: ColorSetProps) {
|
||||
return (
|
||||
<div className={styles.vertical_set}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${set.root}`, color: `#${set.on_root}` }}>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${set.on_root}`, color: `#${set.root}` }}>
|
||||
On {name}
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${set.container}`,
|
||||
color: `#${set.on_container}`,
|
||||
}}>
|
||||
{name} Container
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${set.on_container}`,
|
||||
color: `#${set.container}`,
|
||||
}}>
|
||||
On {name} Container
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HorizontalColorSet({ name, set }: ColorSetProps) {
|
||||
return (
|
||||
<div className={styles.horizontal_set}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${set.root}`, color: `#${set.on_root}` }}>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${set.on_root}`, color: `#${set.root}` }}>
|
||||
On {name}
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${set.container}`,
|
||||
color: `#${set.on_container}`,
|
||||
}}>
|
||||
{name} Container
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${set.on_container}`,
|
||||
color: `#${set.container}`,
|
||||
}}>
|
||||
On {name} Container
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SurfaceColorSetProps = {
|
||||
surface: Surface;
|
||||
outline: string;
|
||||
outlineVariant: string;
|
||||
};
|
||||
|
||||
function SurfaceColorSet({ surface, outline, outlineVariant }: SurfaceColorSetProps) {
|
||||
return (
|
||||
<div className={styles.surface_sets}>
|
||||
<div className={styles.surface_basics}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.dim}`, color: `#${surface.on_root}` }}>
|
||||
Surface Dim
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.root}`, color: `#${surface.on_root}` }}>
|
||||
Surface
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.bright}`, color: `#${surface.on_root}` }}>
|
||||
Surface Bright
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.surface_levels}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.container_lowest}`, color: `#${surface.on_root}` }}>
|
||||
Surf. Container Lowest
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.container_low}`, color: `#${surface.on_root}` }}>
|
||||
Surf. Container Low
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.container}`, color: `#${surface.on_root}` }}>
|
||||
Surf. Container
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{ backgroundColor: `#${surface.container_high}`, color: `#${surface.on_root}` }}>
|
||||
Surf. Container High
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${surface.container_highest}`,
|
||||
color: `#${surface.on_root}`,
|
||||
}}>
|
||||
Surf. Container Highest
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.surface_variants}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${surface.on_root}`,
|
||||
color: `#${surface.root}`,
|
||||
}}>
|
||||
On Surface
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${surface.on_root_variant}`,
|
||||
color: `#${surface.root}`,
|
||||
}}>
|
||||
On Surface Var.
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${outline}`,
|
||||
color: `#${surface.root}`,
|
||||
}}>
|
||||
Outline
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${outlineVariant}`,
|
||||
color: `#${surface.on_root}`,
|
||||
}}>
|
||||
Outline Variant
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type AdditionalColorSetsProps = {
|
||||
baseline: Baseline;
|
||||
};
|
||||
|
||||
function AdditionalColorSets({ baseline }: AdditionalColorSetsProps) {
|
||||
return (
|
||||
<div className={styles.additional_sets}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.surface.inverse}`,
|
||||
color: `#${baseline.surface.on_inverse}`,
|
||||
}}>
|
||||
Inverse Surface
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.surface.on_inverse}`,
|
||||
color: `#${baseline.surface.inverse}`,
|
||||
}}>
|
||||
Inverse On Surface
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.primary.inverse}`,
|
||||
color: `#${baseline.surface.on_root}`,
|
||||
}}>
|
||||
Inverse Primary
|
||||
</div>
|
||||
<div className={styles.constants}>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.scrim}`,
|
||||
color: `#ffffff`,
|
||||
}}>
|
||||
Scrim
|
||||
</div>
|
||||
<div
|
||||
className={styles.color_block}
|
||||
style={{
|
||||
backgroundColor: `#${baseline.shadow}`,
|
||||
color: `#ffffff`,
|
||||
}}>
|
||||
Shadow
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type PreviewBlockProps = {
|
||||
title: string;
|
||||
baseline: Baseline;
|
||||
};
|
||||
|
||||
function PreviewBlock({ title, baseline }: PreviewBlockProps) {
|
||||
return (
|
||||
<div className={styles.preview_block} style={{ backgroundColor: `#${baseline.surface.root}` }}>
|
||||
<h4 style={{ color: `#${baseline.surface.on_root}` }}>{title}</h4>
|
||||
<div className={styles.main_grid}>
|
||||
<div className={styles.main_color_sets}>
|
||||
<VerticalColorSet name="Primary" set={baseline.primary} />
|
||||
<VerticalColorSet name="Secondary" set={baseline.secondary} />
|
||||
<VerticalColorSet name="Tertiary" set={baseline.tertiary} />
|
||||
</div>
|
||||
<VerticalColorSet name="Error" set={baseline.error} />
|
||||
<SurfaceColorSet
|
||||
surface={baseline.surface}
|
||||
outline={baseline.outline}
|
||||
outlineVariant={baseline.outline_variant}
|
||||
/>
|
||||
<AdditionalColorSets baseline={baseline} />
|
||||
</div>
|
||||
{Object.entries(baseline.customs).map(([name, set], index) => (
|
||||
<HorizontalColorSet key={index} name={name} set={set} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type M3SchemePreviewProps = {
|
||||
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
|
||||
};
|
||||
|
||||
export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<div className={styles.preview_layout}>
|
||||
<PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme?.light_baseline} />
|
||||
<PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme?.dark_baseline} />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,50 +6,15 @@ import {
|
|||
SwatchSchemeSetting,
|
||||
} from '../../../color_functions/color_module';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { ActionIcon } from '../../../components/ActionIcon';
|
||||
import { FloatColorPicker } from '../../../components/FloatColorPicker';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { Switch } from '../../../components/Switch';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import { useUpdateScheme } from '../../../stores/schemes';
|
||||
import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
|
||||
import { mapToObject } from '../../../utls';
|
||||
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
|
||||
import styles from './Builder.module.css';
|
||||
|
||||
type IdenticalColorEntry = {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
type ColorEntryProps = {
|
||||
entry: IdenticalColorEntry;
|
||||
onDelete?: (index: string) => void;
|
||||
};
|
||||
|
||||
function ColorEntry({ entry, onDelete }: ColorEntryProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="input_wrapper">
|
||||
<input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
|
||||
</div>
|
||||
<div>
|
||||
<FloatColorPicker
|
||||
name={`color_${entry.id}`}
|
||||
color={isEmpty(entry.color) ? undefined : entry.color}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ActionIcon
|
||||
icon="tabler:trash"
|
||||
extendClassName={styles.delete_btn}
|
||||
onClick={() => onDelete?.(entry.id)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type SwatchSchemeBuilderProps = {
|
||||
scheme: SchemeContent<SwatchSchemeStorage>;
|
||||
onBuildCompleted?: () => void;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user