111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
import cx from 'clsx';
|
|
import { useAtom } from 'jotai';
|
|
import { toInteger } from 'lodash-es';
|
|
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 { ScrollArea } from '../components/ScrollArea';
|
|
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)}>
|
|
<header>
|
|
<h3>Color Tones</h3>
|
|
<p>By regularly changing the color tone to generate a series of light and dark colors.</p>
|
|
</header>
|
|
<ScrollArea enableY>
|
|
<section className={styles.explore_section}>
|
|
<aside className={styles.function_side}>
|
|
<div>
|
|
<h5>Basic color</h5>
|
|
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
|
|
</div>
|
|
<div>
|
|
<h5>Series Setting</h5>
|
|
<LabeledPicker
|
|
title="Expand Tones"
|
|
min={1}
|
|
max={5}
|
|
step={1}
|
|
value={tones}
|
|
onChange={(value) => {
|
|
setTones(toInteger(value));
|
|
setSeedBias(0);
|
|
}}
|
|
/>
|
|
<LabeledPicker
|
|
title="Basic Bias"
|
|
min={-(tones - 1)}
|
|
max={tones - 1}
|
|
value={seedBias}
|
|
onChange={(value) => setSeedBias(toInteger(value))}
|
|
/>
|
|
<LabeledPicker
|
|
title="Tone Step"
|
|
min={10}
|
|
max={25}
|
|
step={1}
|
|
unit="%"
|
|
value={steps}
|
|
onChange={setSteps}
|
|
/>
|
|
</div>
|
|
</aside>
|
|
<div className={styles.tones_content}>
|
|
<h5>Color Tones</h5>
|
|
<div className={styles.colors_booth}>
|
|
{colors.map((c, index) => (
|
|
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
|
|
))}
|
|
</div>
|
|
<div className={styles.color_value_mode}>
|
|
<label>Copy color value in</label>
|
|
<HSegmentedControl
|
|
options={[
|
|
{ label: 'HEX', value: 'hex' },
|
|
{ label: 'RGB', value: 'rgb' },
|
|
{ label: 'HSL', value: 'hsl' },
|
|
{ label: 'LAB', value: 'lab' },
|
|
{ label: 'OKLCH', value: 'oklch' },
|
|
]}
|
|
valu={mode}
|
|
onChange={setMode}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|