27 lines
801 B
TypeScript
27 lines
801 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface SurfaceProps {
|
|
/** Warm paper, the base surface for the whole site, or the rare night surface. */
|
|
tone?: 'paper' | 'night';
|
|
children?: ReactNode;
|
|
}
|
|
|
|
/** The root of every screen: sets the paper or night ground and the base type. */
|
|
export function Surface({ tone = 'paper', children }: SurfaceProps) {
|
|
return (
|
|
<div
|
|
className={tone === 'night' ? 'night' : undefined}
|
|
style={{
|
|
fontFamily: 'var(--font-sans)',
|
|
fontSize: 'var(--step-body)',
|
|
lineHeight: 'var(--leading-body)',
|
|
fontWeight: 'var(--weight-regular)',
|
|
background: tone === 'night' ? undefined : 'var(--paper)',
|
|
color: tone === 'night' ? undefined : 'var(--ink)',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|