62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { isArray } from 'lodash-es';
|
|
import { ColorStand } from '../../components/ColorStand';
|
|
import { SchemeSet } from '../../stores/schemes';
|
|
import styles from './SchemeContent.module.css';
|
|
|
|
type ColorSeriesProps = {
|
|
title: string;
|
|
series: SchemeSet['lightScheme' | 'darkScheme']['primary'];
|
|
simpleSeries?: boolean;
|
|
};
|
|
|
|
function ColorSeries({ title, series, simpleSeries = false }: ColorSeriesProps) {
|
|
return (
|
|
<div className={styles.series_row}>
|
|
<h4>{title}</h4>
|
|
<ul>
|
|
<ColorStand title="Normal" color={series?.normal} />
|
|
{simpleSeries ? (
|
|
<>
|
|
<ColorStand title="Lightness" color={series?.lighten} />
|
|
<ColorStand title="Darkness" color={series?.darken} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<ColorStand title="Hover" color={series?.hover} />
|
|
<ColorStand title="Active" color={series?.active} />
|
|
<ColorStand title="Focus" color={series?.focus} />
|
|
<ColorStand title="Disabled" color={series?.disabled} />
|
|
</>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type SchemeContentProps = {
|
|
scheme: SchemeSet['lightScheme' | 'darkScheme'];
|
|
};
|
|
|
|
export function SchemeContent({ scheme }: SchemeContentProps) {
|
|
return (
|
|
<div className={styles.scheme_content}>
|
|
<ColorSeries title="Foreground Series" series={scheme.foreground} simpleSeries />
|
|
<ColorSeries title="Background Series" series={scheme.background} simpleSeries />
|
|
<ColorSeries title="Primary Series" series={scheme.primary} />
|
|
{isArray(scheme.secondary) ? (
|
|
scheme.secondary.map((cSet, index) => (
|
|
<ColorSeries title={`Secondary Series ${index + 1}`} series={cSet} />
|
|
))
|
|
) : (
|
|
<ColorSeries title="Secondary Series" series={scheme.secondary} />
|
|
)}
|
|
<ColorSeries title="Accent Series" series={scheme.accent} />
|
|
<ColorSeries title="Neutral Serias" series={scheme.neutral} />
|
|
<ColorSeries title="Success Series" series={scheme.success} />
|
|
<ColorSeries title="Danger Series" series={scheme.danger} />
|
|
<ColorSeries title="Warn Series" series={scheme.warning} />
|
|
<ColorSeries title="Info Series" series={scheme.info} />
|
|
</div>
|
|
);
|
|
}
|