Theme and color system

'use client';
import { useMemo, useState } from 'react';
import { createBrandTheme, semanticColorRoles, type SemanticColorRole } from '@fayegram-ai/faye-ui/theme/brand';
import { compileThemeCSS, extendTheme } from '@fayegram-ai/faye-ui/theme';
import { auditThemeContrast } from '@fayegram-ai/faye-ui/theme/audit';
import { ThemeScope } from '@fayegram-ai/faye-ui/provider/provider';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { TextField } from '@fayegram-ai/faye-ui/controls/text-field';
import { Slider } from '@fayegram-ai/faye-ui/controls/slider';
import { Text, Heading } from '@fayegram-ai/faye-ui/core/text';
import { Grid, Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Dialog } from '@fayegram-ai/faye-ui/overlays/dialog';
import { Section, Result } from '../example';
import { Choice } from '../choice';
const initialSeeds: Record<SemanticColorRole, string> = { accent: '#5264aa', secondary: '#7255a3', danger: '#ad353a', success: '#35764f', warning: '#94671c', info: '#326894' };
/** Authoring/compiler code is deliberately confined to this developer-tool example. */
export default function Theming() {
    const [seeds, setSeeds] = useState(initialSeeds);
    const [radius, setRadius] = useState(5);
    const [applied, setApplied] = useState({ seeds: initialSeeds, radius: 5 });
    const [contrast, setContrast] = useState('normal');
    const [font, setFont] = useState('system-ui, sans-serif');
    const theme = useMemo(() => extendTheme(createBrandTheme({ id: 'docs-custom', ...applied.seeds, radius: `${applied.radius}px` }), {
        axes: { contrast: { default: 'normal', values: { normal: {}, high: { 'border.width': { $type: 'length', $value: '3px' } } } } }
    }), [applied]);
    const css = useMemo(() => compileThemeCSS(theme), [theme]);
    const audit = useMemo(() => auditThemeContrast(theme), [theme]);
    return <Section title="Six palettes, semantic typography, and named theme axes" note="Apply builds complete palettes. The report covers declared opaque color pairs, not browser layout, custom backdrops or an accessibility certification.">
        <style>{css}</style>
        <form onSubmit={event => { event.preventDefault(); setApplied({ seeds: { ...seeds }, radius }); }}>
            <Stack gap="3"><div className="docs-example-controls">{semanticColorRoles.map(role => <label className="docs-color-field" key={role}>{role}<input type="color" aria-label={`${role === 'accent' ? 'Accent' : role} seed`} value={seeds[role]} onChange={event => setSeeds(previous => ({ ...previous, [role]: event.target.value }))}/></label>)}</div>
                <div className="docs-example-controls"><div className="docs-choice-field"><span>Control radius · {radius}px</span><Slider.Root value={radius} onValueChange={value => { if (typeof value === 'number') setRadius(value); }} min={0} max={12} step={1}><Slider.Control><Slider.Track><Slider.Indicator/><Slider.Thumb aria-label="Control radius"/></Slider.Track></Slider.Control></Slider.Root></div><Button type="submit">Apply palettes</Button></div>
            </Stack>
        </form>
        <div className="docs-example-controls"><Choice label="Theme contrast axis" value={contrast} onValueChange={setContrast} options={[{value:'normal',label:'Normal'},{value:'high',label:'High'}]}/><Choice label="Theme font family" value={font} onValueChange={setFont} options={[{value:'system-ui, sans-serif',label:'System sans'},{value:'monospace',label:'Monospace'}]}/></div>
        <Result>{audit.passed} declared color pairs passed; {audit.failed} failed; {audit.unresolved} unresolved. Contexts include both schemes, both densities, and the contrast axis.</Result>
        <Grid columns={{ base: 1, md: 2 }} gap="4">{(['light', 'dark'] as const).map(scheme => <ThemeScope key={scheme} themeId={theme.id} scheme={scheme} density="comfortable" axes={{ contrast }} variables={{ '--faye-ui-font-body': font }} data-testid={`custom-${scheme}`} style={{ background: 'var(--faye-ui-color-surface)', color: 'var(--faye-ui-color-text)', padding: 'var(--faye-ui-space-4)' }}>
            <Stack gap="4"><Heading level={4} variant="heading-4">{scheme} palette</Heading><Text data-testid="semantic-body" variant="body">This role derives its family from the same theme scope.</Text><TextField label={`${scheme} input`} placeholder="Type here"/>
                <div className="docs-theme-palettes">{semanticColorRoles.map(role => <div className="docs-theme-palette-row" key={role}><Text variant="label" tone={role}>{role}</Text><Inline wrap><Button tone={role} variant="solid">{role === 'accent' ? 'Primary' : `${role} solid`}</Button><Button tone={role} variant="soft">Soft {role}</Button><Button tone={role}>Outline {role}</Button></Inline></div>)}</div>
                <Dialog.Root><Dialog.Trigger render={<Button />}>Themed overlay</Dialog.Trigger><Dialog.Portal><Dialog.Backdrop /><Dialog.Popup><Dialog.Header><Dialog.Title>Custom theme in a portal</Dialog.Title><Dialog.Description>Scheme, axis selection and declared font variables travel together.</Dialog.Description></Dialog.Header><Dialog.Actions><Dialog.Close render={<Button />}>Done</Dialog.Close></Dialog.Actions></Dialog.Popup></Dialog.Portal></Dialog.Root>
            </Stack>
        </ThemeScope>)}</Grid>
    </Section>;
}