Patterns

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { PresetGround } from '@/components/PresetGround'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './dotgrid.module.css'

const presets = ['paper', 'forest', 'amber'] as const

/**
 * The dot grid in --role-tint on a light ground and as the dot field on the
 * forest and amber fields [D177]: display type and one action on the dots,
 * any other text on a solid plate (a paper face, a light island inside a
 * field). On a white figure plate the dots take --role-hairline
 * (patternPlate).
 */
export function PatternDotgrid() {
  return (
    <div className={styles.stack}>
      <div className={styles.row}>
        {presets.map((preset) => (
          <PresetGround
            key={preset}
            preset={preset}
            className={`${styles.field} ${patterns.patternDotgrid}`}
          >
            <p className={styles.display}>Field Notes</p>
            <Button variant="solid" size="sm">
              Explore
            </Button>
            <Ground preset="paper" kind="face" className={styles.plate}>
              {preset}
            </Ground>
          </PresetGround>
        ))}
      </div>
      <Ground
        preset="white"
        kind="face"
        render={<figure />}
        className={`${styles.figure} ${patterns.patternDotgrid} ${patterns.patternPlate}`}
      >
        <figcaption className={styles.plate}>Figure 1. A specimen plate on the hairline grid.</figcaption>
      </Ground>
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './speckle.module.css'

/**
 * The speckle: jittered dots and seed flecks in --role-tint, one mark per
 * 16 px cell. One full-bleed band or one field per page; on a solid field
 * it is tone-on-tone [D177].
 */
export function PatternSpeckle() {
  return (
    <div className={styles.stack}>
      <Ground preset="paper" className={`${styles.band} ${patterns.patternSpeckle}`}>
        <p className={styles.display}>Land for good</p>
        <Button variant="solid">Our Mission</Button>
      </Ground>
      <Ground kind="field" preset="leaf" className={`${styles.band} ${patterns.patternSpeckle}`}>
        <p className={styles.display}>Land for good</p>
        <Button variant="solid">Our Mission</Button>
      </Ground>
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './sunburst.module.css'

/**
 * The sunburst: dotted rays from the band's bottom centre, clipped by its
 * bottom edge, behind the page's one CTA (CTABlock draws it by default).
 */
export function PatternSunburst() {
  return (
    <Ground preset="white" className={`${styles.band} ${patterns.patternSunburst}`}>
      <p className={styles.display}>Find a land trust near you</p>
      <Button variant="solid" size="lg" icon="arrow_forward">
        Find a Land Trust
      </Button>
    </Ground>
  )
}

import { PresetGround } from '@/components/PresetGround'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './grain.module.css'

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

/**
 * Grain, the stipple: light and dark flecks from the scope's grain roles,
 * on the fields and the night band [D177]. Pink shows light flecks only and
 * royal dark flecks only; --primary12 text holds 4.5:1 over every fleck.
 */
export function PatternGrain() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround
          key={preset}
          preset={preset}
          className={`${styles.face} ${patterns.patternGrain}`}
        >
          <p className={styles.head}>Join the Count</p>
          <p className={styles.body}>
            {preset === 'night' ? 'The night band.' : `A ${preset} field.`}
          </p>
        </PresetGround>
      ))}
    </div>
  )
}

import { Button } from '@fairgarden-private/design/components/Button'
import { Ground } from '@fairgarden-private/design/components/Ground'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './awning.module.css'

/**
 * The awning: 24 px stripes of the ground and --role-tint, starting at the
 * content edge. One per page, carrying display type and one action; on a
 * campaign field it is tone-on-tone [D177].
 */
export function PatternAwning() {
  return (
    <div className={styles.stack}>
      <Ground preset="paper" className={`${styles.band} ${patterns.patternAwning}`}>
        <p className={styles.display}>Summer Market</p>
        <Button variant="solid">Get Tickets</Button>
      </Ground>
      <Ground kind="field" preset="clay" className={`${styles.band} ${patterns.patternAwning}`}>
        <p className={styles.display}>Summer Market</p>
        <Button variant="solid">Get Tickets</Button>
      </Ground>
    </div>
  )
}

import { Ground } from '@fairgarden-private/design/components/Ground'
import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './fringe.module.css'

/**
 * The hatched fringe: jittered 1.5 px ticks hanging from the night band's
 * top edge, in its --primary12. A shaped edge sits only on a seam that tone
 * separates, so it shows in light mode only; in dark mode, print and forced
 * colors the band draws its straight seam rule instead [D179].
 */
export function PatternFringe() {
  return (
    <div className={styles.stack}>
      <Ground preset="paper" className={styles.band}>
        <p className={styles.body}>The page band above the seam.</p>
      </Ground>
      <Ground preset="night" className={`${styles.band} ${patterns.ornamentFringe}`}>
        <p className={styles.display}>Field Notes</p>
      </Ground>
    </div>
  )
}

import patterns from '@fairgarden-private/design/utils/pattern.module.css'
import styles from './semantic.module.css'

const fills = [
  { className: patterns.patternHatch, name: 'patternHatch', note: '45°; series 2' },
  { className: patterns.patternHatch0, name: 'patternHatch0', note: '0°; series 4' },
  {
    className: `${patterns.patternHatchCrossed} ${patterns.patternInkSecondary}`,
    name: 'patternHatchCrossed',
    note: 'Crossed, secondary ink; series 5',
  },
  { className: patterns.patternHatch135, name: 'patternHatch135', note: '135°; projected or partial' },
  { className: patterns.patternDotscreen, name: 'patternDotscreen', note: '1.25 px at 6 px' },
  {
    className: `${patterns.patternDotscreenPitch2} ${patterns.patternInkSecondary}`,
    name: 'patternDotscreenPitch2',
    note: '1.25 px at 5 px, secondary ink; series 3',
  },
  { className: patterns.patternDotscreenPitch3, name: 'patternDotscreenPitch3', note: '1.25 px at 4 px' },
  { className: patterns.patternDotscreenHeavy, name: 'patternDotscreenHeavy', note: '2 px at 4 px' },
]

/**
 * Semantic fills as legend swatches: each has a 1 px --primary12 outline
 * and prints black through print-color-adjust: exact. Charts draw the same
 * geometry as SVG patterns in their own defs.
 */
export function PatternSemantic() {
  return (
    <ul className={styles.legend}>
      {fills.map(({ className, name, note }) => (
        <li key={name} className={styles.item}>
          <span className={`${styles.swatch} ${className}`} aria-hidden="true" />
          <span className={styles.text}>
            <code className={styles.name}>{name}</code>
            <span className={styles.note}>{note}</span>
          </span>
        </li>
      ))}
    </ul>
  )
}

import {
  Marker,
  MarkerIndex,
  MarkerRank,
  OrnamentBlob,
  OrnamentTrail,
} from '@fairgarden-private/design/utils/Ornament'
import styles from './ornaments.module.css'

/** The trail (short tail and entry), the marker set (trail, timeline, index and rank) and the blob mount. */
export function PatternOrnaments() {
  return (
    <div className={styles.stack}>
      <div className={styles.row}>
        <OrnamentTrail />
        <div className={styles.entry}>
          <OrnamentTrail shape="entry" />
          <span className={styles.label}>Get outside</span>
        </div>
      </div>
      <div className={styles.row}>
        <span className={styles.set}>
          <Marker kind="origin" />
          <Marker kind="waypoint" />
          <Marker kind="terminal" angle={0} />
          <span className={styles.name}>On a trail</span>
        </span>
        <span className={styles.set}>
          <Marker kind="origin" size="timeline" />
          <Marker kind="waypoint" size="timeline" />
          <Marker kind="current" size="timeline" />
          <Marker kind="terminal" size="timeline" />
          <span className={styles.name}>On a timeline</span>
        </span>
        <span className={styles.set}>
          <MarkerIndex value={1} />
          <MarkerIndex value={2} />
          <MarkerIndex value={12} />
          <span className={styles.name}>Index</span>
        </span>
        <span className={styles.set}>
          <MarkerRank value={1} />
          <MarkerRank value={2} />
          <MarkerRank value={10} />
          <span className={styles.name}>Rank</span>
        </span>
      </div>
      <div className={styles.row}>
        <OrnamentBlob>
          <span className={styles.numeral}>40</span>
        </OrnamentBlob>
        <span className={styles.name}>Blob mount with a stat numeral</span>
      </div>
    </div>
  )
}