基本完成M3 Scheme的预览页面。
This commit is contained in:
徐涛
parent
1553c51621
commit
e74ffc9721
88
src/page-components/scheme/m3-scheme/Preview.module.css
Normal file
88
src/page-components/scheme/m3-scheme/Preview.module.css
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
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.surface}`,
|
||||||
|
}}>
|
||||||
|
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.outlineVariant}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user