Color

import {
  Button,
  Container,
  Heading,
  Link,
  Logo,
  Section,
  Stack,
  Text,
} from '@jsonresume/ui';

// The three surfaces of a jsonresume.org page, top to bottom: brand
// yellow, light gray, white. Text tokens adapt to each.
export default function ColorSurfaces() {
  return (
    <>
      <Section tone="brand" spacing="sm">
        <Container>
          <Stack direction="row" justify="between" align="center" wrap gap={3}>
            <Logo />
            <Text tone="muted">surface.brand · text.onBrand</Text>
          </Stack>
        </Container>
      </Section>
      <Section tone="subtle" spacing="sm">
        <Container>
          <Stack gap={2}>
            <Heading level={3}>Themes</Heading>
            <Text tone="muted">
              surface.subtle · text.muted for supporting copy
            </Text>
          </Stack>
        </Container>
      </Section>
      <Section spacing="sm">
        <Container>
          <Stack gap={3}>
            <Text>
              surface.page · text.default for reading, and{' '}
              <Link href="#color">text.link</Link> for links.
            </Text>
            <Stack direction="row" gap={2}>
              <Button variant="primary">action.primary</Button>
              <Button>action.neutral</Button>
              <Button variant="ink">action.ink</Button>
            </Stack>
          </Stack>
        </Container>
      </Section>
    </>
  );
}

import {
  Button,
  Container,
  Heading,
  Link,
  Section,
  Stack,
  Text,
} from '@jsonresume/ui';

// Brand-yellow surfaces switch their descendants to ink-on-yellow tokens,
// so headings, muted text and links stay readable in light and dark.
export default function ColorOnBrand() {
  return (
    <Section tone="brand" spacing="md">
      <Container>
        <Stack gap={3}>
          <Heading level={3}>Hosted resumes</Heading>
          <Text tone="muted">
            Muted text on yellow uses a darker gray to keep 4.5:1.
          </Text>
          <Text>
            Links on yellow stay <Link href="#color">link red</Link>.
          </Text>
          <Stack direction="row" gap={2}>
            <Button variant="primary">Get started</Button>
            <Button>Learn more</Button>
          </Stack>
        </Stack>
      </Container>
    </Section>
  );
}

import {
  Badge,
  Button,
  Callout,
  Card,
  CardContent,
  CardTitle,
  Grid,
  Link,
  Stack,
  Text,
} from '@jsonresume/ui';
import * as styles from './light-dark.css';

function Sample() {
  return (
    <div className={styles.panel}>
      <Card>
        <CardContent>
          <CardTitle>Pro</CardTitle>
          <Text tone="muted" size="xs">
            by <Link href="#color">JSON Resume Team</Link>
          </Text>
        </CardContent>
      </Card>
      <Stack direction="row" gap={2} wrap>
        <Button variant="primary">Publish</Button>
        <Button>Preview</Button>
        <Badge tone="success">Valid</Badge>
      </Stack>
      <Callout tone="warning">Deprecated field in use.</Callout>
    </div>
  );
}

// data-theme scopes the dark tokens to a subtree: the same components,
// re-themed with no extra code.
export default function ColorLightDark() {
  return (
    <Grid minColumnWidth="16rem" gap={0} stretch>
      <div data-theme="light">
        <Sample />
      </div>
      <div data-theme="dark">
        <Sample />
      </div>
    </Grid>
  );
}

import { style } from '@vanilla-extract/css';
import { vars } from '@jsonresume/ui/tokens';

// The panel paints its own page surface, so each half shows its theme.
export const panel = style({
  display: 'grid',
  gap: vars.space[4],
  padding: vars.space[5],
  background: vars.color.surface.page,
  color: vars.color.text.default,
});