Ground

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import styles from './page-grounds.module.css'

const pageGrounds = [
  'paper',
  'white',
  'tide',
  'meadow',
  'pollen',
  'apricot',
  'rose',
  'heather',
] as const

const modes = ['light', 'dark'] as const

/**
 * The eight page grounds follow the page mode, painting the same step in
 * both: paper and white, and the six step-3 pastels (a pastel in light
 * mode, a rich near-black in dark mode). Each shows its section head
 * (--role-heading), a body link (--role-accent underline, --role-link-hover
 * on hover) and the amber action.
 *
 * Preview only: each row forces its mode with `data-theme` on a wrapper,
 * which a product sets only on `html`, from the app shell.
 */
export function GroundPageGrounds() {
  return (
    <div className={styles.modes}>
      {modes.map((mode) => (
        <div key={mode} data-theme={mode} className={styles.mode}>
          <p className={styles.modeName}>{mode === 'light' ? 'Light mode' : 'Dark mode'}</p>
          <div className={styles.grid}>
            {pageGrounds.map((preset) => (
              <Ground key={preset} kind="face" preset={preset} className={styles.face}>
                <span className={styles.name}>{preset}</span>
                <Link href="#page-grounds">Field notes</Link>
                <div>
                  <Button variant="solid" size="sm">
                    Join
                  </Button>
                </div>
              </Ground>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import styles from './fields.module.css'

const fields = ['forest', 'royal', 'brick', 'leaf', 'amber', 'clay', 'pink'] as const

/**
 * The seven fields: inset, fixed-mode surfaces with a radius and their own
 * --primary12 edge, never full-bleed. Forest, royal and brick stay dark and
 * leaf, amber, clay and pink stay light in both page modes. The solid
 * fields carry one ink: the action becomes the ink pill and the link hover
 * adds an underline.
 */
export function GroundFields() {
  return (
    <div className={styles.grid}>
      {fields.map((preset) => (
        <Ground key={preset} kind="field" preset={preset} className={styles.field}>
          <span className={styles.name}>{preset}</span>
          <Link href="#fields">Field notes</Link>
          <div>
            <Button variant="solid" size="sm">
              Join
            </Button>
          </div>
        </Ground>
      ))}
    </div>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import styles from './kinds.module.css'

/**
 * The three kinds on one page. A `tide` band holds a white face, which
 * follows the mode with the page and draws a --primary10 edge, and tide's
 * companion field, royal, whose white face is a light island with a
 * --primary12 edge in both modes. The night band, for the footer and the
 * media hero only, draws its --primary12 seam in dark mode.
 */
export function GroundKinds() {
  return (
    <div className={styles.stack}>
      <Ground kind="band" preset="tide" className={styles.band}>
        <p className={styles.head}>Band: tide</p>
        <div className={styles.row}>
          <Ground kind="face" preset="white" className={styles.face}>
            <p className={styles.label}>Face on the page ground</p>
            <Link href="#kinds">Field notes</Link>
          </Ground>
          <Ground kind="field" preset="royal" className={styles.field}>
            <p className={styles.label}>Field: royal, tide&apos;s companion</p>
            <Ground kind="face" preset="white" className={styles.face}>
              <p className={styles.label}>Light island</p>
              <Link href="#kinds">Field notes</Link>
            </Ground>
          </Ground>
        </div>
      </Ground>
      <Ground kind="band" preset="night" className={styles.band}>
        <p className={styles.head}>Band: night</p>
        <Link href="#kinds">Footer and media hero only</Link>
      </Ground>
    </div>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import { Separator } from '@fairgarden-private/design/components/Separator'
import styles from './overrides.module.css'

export function GroundOverrides() {
  return (
    <div className={styles.row}>
      <Ground preset="paper" kind="face" className={styles.face}>
        <span className={styles.head}>Defaults</span>
        <Separator />
        <Link href="#overrides">olive × green</Link>
      </Ground>
      <Ground preset="paper" secondary="indigo" kind="face" className={styles.face}>
        <span className={styles.head}>secondary=&quot;indigo&quot;</span>
        <Separator />
        <Link href="#overrides">olive × indigo</Link>
      </Ground>
      <Ground preset="paper" primary="slate" secondary="amber" kind="face" className={styles.face}>
        <span className={styles.head}>primary=&quot;slate&quot;</span>
        <Separator />
        <Link href="#overrides">slate × amber</Link>
      </Ground>
    </div>
  )
}