joe-bell

import type * as Stitches from '@stitches/react';
import { css, config } from "./stitches.config";

type TCSS = Stitches.CSS<typeof config>;

const { space } = config.theme;
type TSpaceKey = keyof typeof space; 

const gap = (Object.keys(space) as Array<TSpaceKey>).reduce<
  Record<TSpaceKey, TCSS>

joe-bell

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

joe-bell

const heading = ["font-inter", "font-bold"];

const config = {
  // Components
  "c.heading": heading,
  "c.h1": [...heading, "text-5xl"],
  "c.h2": [...heading, "text-4xl"],
  "c.h3": [...heading, "text-3xl"],
  "c.container": ["block", "mx-auto", "max-w-5xl", "px-4"],
  // Utilities

joe-bell

/**
 * Conditional Modifiers
 *
 * For example, here's a basic component with a "spaced" modifier:
 *
 *   <div class="foo foo--spaced">
 *     <p class="foo__child">
 *       Hello
 *     </p>
 *     <p class="foo__child">

joe-bell

Keybase proof

I hereby claim:

• I am joe-bell on github.
• I am joebell (https://keybase.io/joebell) on keybase.
• I have a public key whose fingerprint is 32E7 474A 3FE2 0421 50A2 05B5 F23B 86E5 5CF8 793C

To claim this, I am signing this object: