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

Compare commits

base: xt:wasm-load
Branches Tags
xt:main xt:wasm-load
..
compare: xt:31cedd25477b2ca131d989228ca359192120e20f
Branches Tags
xt:main xt:wasm-load

4 Commits
wasm-load ... 31cedd2547

Author SHA1 Message Date
徐涛
31cedd2547 修正生成的CSS Variables引导符号错误问题。 2025-02-10 22:27:22 +08:00
徐涛
7f6c217d7e 优化色卡界面加载色卡颜色种类的处理过程。 2025-02-10 22:00:00 +08:00
徐涛
ccedaa62a6 调整Vite配置，方便开发服务器正常加载WASM。 2025-02-10 21:52:06 +08:00
徐涛
128eeb24ac 调整WASM加载。 2025-02-10 21:51:40 +08:00
4 changed files with 33 additions and 26 deletions
Expand all files Collapse all files

48
color-module/src/schemes/material_design_3/surface.rs
View File

@@ -84,43 +84,43 @@ impl M3SurfaceSet {
pub fn to_css_variables(&self, prefix: &str) -> Vec<String> {
let mut css_variables = Vec::new();
css_variables.push(format!("--color-{}-surface: ${};", prefix, self.root));
css_variables.push(format!("--color-{}-surface-dim: ${};", prefix, self.dim));
css_variables.push(format!("--color-{}-surface: #{};", prefix, self.root));
css_variables.push(format!("--color-{}-surface-dim: #{};", prefix, self.dim));
css_variables.push(format!(
"--color-{}-surface-bright: ${};",
"--color-{}-surface-bright: #{};",
prefix, self.bright
));
css_variables.push(format!(
"--color-{}-surface-container: ${};",
"--color-{}-surface-container: #{};",
prefix, self.container
));
css_variables.push(format!(
"--color-{}-surface-container-lowest: ${};",
"--color-{}-surface-container-lowest: #{};",
prefix, self.container_lowest
));
css_variables.push(format!(
"--color-{}-surface-container-low: ${};",
"--color-{}-surface-container-low: #{};",
prefix, self.container_low
));
css_variables.push(format!(
"--color-{}-surface-container-high: ${};",
"--color-{}-surface-container-high: #{};",
prefix, self.container_high
));
css_variables.push(format!(
"--color-{}-surface-container-highest: ${};",
"--color-{}-surface-container-highest: #{};",
prefix, self.container_highest
));
css_variables.push(format!("--color-{}-on-surface: ${};", prefix, self.on_root));
css_variables.push(format!("--color-{}-on-surface: #{};", prefix, self.on_root));
css_variables.push(format!(
"--color-{}-on-surface-variant: ${};",
"--color-{}-on-surface-variant: #{};",
prefix, self.on_root_variant
));
css_variables.push(format!(
"--color-{}-inverse-surface: ${};",
"--color-{}-inverse-surface: #{};",
prefix, self.inverse
));
css_variables.push(format!(
"--color-{}-inverse-on-surface: ${};",
"--color-{}-inverse-on-surface: #{};",
prefix, self.on_inverse
));
@@ -130,43 +130,43 @@ impl M3SurfaceSet {
pub fn to_scss_variables(&self, prefix: &str) -> Vec<String> {
let mut scss_variables = Vec::new();
scss_variables.push(format!("$color-{}-surface: ${};", prefix, self.root));
scss_variables.push(format!("$color-{}-surface-dim: ${};", prefix, self.dim));
scss_variables.push(format!("$color-{}-surface: #{};", prefix, self.root));
scss_variables.push(format!("$color-{}-surface-dim: #{};", prefix, self.dim));
scss_variables.push(format!(
"$color-{}-surface-bright: ${};",
"$color-{}-surface-bright: #{};",
prefix, self.bright
));
scss_variables.push(format!(
"$color-{}-surface-container: ${};",
"$color-{}-surface-container: #{};",
prefix, self.container
));
scss_variables.push(format!(
"$color-{}-surface-container-lowest: ${};",
"$color-{}-surface-container-lowest: #{};",
prefix, self.container_lowest
));
scss_variables.push(format!(
"$color-{}-surface-container-low: ${};",
"$color-{}-surface-container-low: #{};",
prefix, self.container_low
));
scss_variables.push(format!(
"$color-{}-surface-container-high: ${};",
"$color-{}-surface-container-high: #{};",
prefix, self.container_high
));
scss_variables.push(format!(
"$color-{}-surface-container-highest: ${};",
"$color-{}-surface-container-highest: #{};",
prefix, self.container_highest
));
scss_variables.push(format!("$color-{}-on-surface: ${};", prefix, self.on_root));
scss_variables.push(format!("$color-{}-on-surface: #{};", prefix, self.on_root));
scss_variables.push(format!(
"$color-{}-on-surface-variant: ${};",
"$color-{}-on-surface-variant: #{};",
prefix, self.on_root_variant
));
scss_variables.push(format!(
"$color-{}-inverse-surface: ${};",
"$color-{}-inverse-surface: #{};",
prefix, self.inverse
));
scss_variables.push(format!(
"$color-{}-inverse-on-surface: ${};",
"$color-{}-inverse-on-surface: #{};",
prefix, self.on_inverse
));

1
src/ColorFunctionContext.tsx
View File

@@ -42,7 +42,6 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) {
try {
await init();
setWasmInstance(funcs);
console.debug('[Load WASM]', 'Loaded');
} catch (e) {
console.error('[Load WASM]', e);
setError(e);

7
src/pages/CardsDetail.tsx
View File

@@ -6,6 +6,7 @@ import { HSegmentedControl } from '../components/HSegmentedControl';
import { ScrollArea } from '../components/ScrollArea';
import { ColorDescription } from '../models';
import { ColorCard } from '../page-components/cards-detail/ColorCard';
import { mapToObject } from '../utls';
import styles from './CardsDetail.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
@@ -20,7 +21,11 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
return [];
}
try {
const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
const embededCategories = colorFn.color_categories().map(mapToObject) as {
label: string;
value: string;
}[];
console.debug('[Fetch color categories]', embededCategories);
return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
} catch (e) {
console.error('[Fetch color categories]', e);

3
vite.config.ts
View File

@@ -10,4 +10,7 @@ export default defineConfig({
cssModules: true,
},
},
optimizeDeps: {
exclude: ['color-module'],
},
});