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

精简色调调色的颜色生成。

Browse Source
This commit is contained in:
徐涛 2025-01-06 15:35:52 +08:00
parent e3b3151bba
commit d4d821c53c
2 changed files with 25 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/page-components/tones/ToneSeries.tsx
View File

@ -1,62 +0,0 @@
import { useMemo } from 'react';
import { useColorFunction } from '../../ColorFunctionContext';
import { FlexColorStand } from '../../components/FlexColorStand';
type ToneSeresProps = {
color?: string;
expand?: number;
step?: number;
valueMode?: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
};
export function LightenSeries({
color = '000000',
expand = 3,
step = 10,
valueMode = 'hex',
}: ToneSeresProps) {
const { colorFn } = useColorFunction();
const colors = useMemo(() => {
try {
const lightenColors = colorFn!.tonal_lighten_series(color, expand, step / 100);
return lightenColors;
} catch (e) {
console.error('[Expand lighten colors]', e);
}
return Array.from({ length: expand }, () => color);
}, [color, expand, step]);
return (
<>
{colors.map((c, index) => (
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={valueMode} />
))}
</>
);
}
export function DarkenSeries({
color = '000000',
expand = 3,
step = 10,
valueMode = 'hex',
}: ToneSeresProps) {
const { colorFn } = useColorFunction();
const colors = useMemo(() => {
try {
const darkenColors = colorFn!.tonal_darken_series(color, expand, step / 100);
return darkenColors;
} catch (e) {
console.error('[Expand darken colors]', e);
}
return Array.from({ length: expand }, () => color);
}, [color, expand, step]);
return (
<>
{colors.map((c, index) => (
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={valueMode} />
))}
</>
);
}

41
src/pages/Tones.tsx
View File

@ -1,21 +1,40 @@
import cx from 'clsx';
import { useAtom } from 'jotai';
import { toInteger } from 'lodash-es';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { useColorFunction } from '../ColorFunctionContext';
import { ColorPicker } from '../components/ColorPicker';
import { FlexColorStand } from '../components/FlexColorStand';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { LabeledPicker } from '../components/LabeledPicker';
import { DarkenSeries, LightenSeries } from '../page-components/tones/ToneSeries';
import { currentPickedColor } from '../stores/colors';
import styles from './Tones.module.css';
export function Tones() {
const { colorFn } = useColorFunction();
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [steps, setSteps] = useState(10);
const [tones, setTones] = useState(3);
const [seedBias, setSeedBias] = useState(0);
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const colors = useMemo(() => {
try {
const lightenColors = colorFn!.tonal_lighten_series(
selectedColor,
tones - seedBias,
steps / 100,
);
const darkenColors = colorFn!.tonal_darken_series(
selectedColor,
tones + seedBias,
steps / 100,
);
return [...darkenColors, selectedColor, ...lightenColors];
} catch (e) {
console.error('[Expand colors]', e);
}
return Array.from({ length: tones * 2 + 1 }, () => selectedColor);
}, [selectedColor, tones, seedBias, steps]);
return (
<div className={cx('workspace', styles.tone_workspace)}>
@ -43,7 +62,7 @@ export function Tones() {
}}
/>
<LabeledPicker
title="Root bias"
title="Basic Bias"
min={-(tones - 1)}
max={tones - 1}
value={seedBias}
@ -77,19 +96,9 @@ export function Tones() {
/>
</div>
<div className={styles.colors_booth}>
<DarkenSeries
color={selectedColor}
expand={tones + seedBias}
step={steps}
valueMode={mode}
/>
<FlexColorStand color={selectedColor} valueMode={mode} />
<LightenSeries
color={selectedColor}
expand={tones - seedBias}
step={steps}
valueMode={mode}
/>
{colors.map((c, index) => (
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
))}
</div>
</div>
</section>