Stitches: Themed Variants

stack.ts

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>
>(
  (acc, cv) => ({
    ...acc,
    [cv]: { $$stackGap: `$space$${cv}` },
  }),
  {} as any
);

/**
 * Stack
 */
export const stack = css({
  display: "flex",
  listStyleType: "none",
  paddingLeft: 0,
  "> * + *": {
    marginTop: "$$stackGap",
  },
  variants: {
    gap,
  },
  defaultVariants: {
    gap: 4,
  },
});

What is TCSS?

What is TCSS?

Just updated to make this gist a little more self-contained – hope it helps

Ah ha! That's what I kinda figured that type was. I appreciate the clarification.