基本完成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