theme.css.tsx

The theme.css.tsx is where you'll define all the colours, typography, breakpoints, subthemes, spacing and 12-column grid configuration — as well as any frontend or admin specific global styles.

Let's dive in.

Initialization#

export const {
  css,
  styled,
  createTheme,
  keyframes,
  globalCss,
  typeVariants,
  config,
  responsiveTokens,
  originalConfig,
  breakpoints,
  getCssText,
} = createStitches({
  ...
})

The createStiches function initializes the design system variables and helpers. The exported constants will be used throughout your application — some explicitly and some automatically.

Many of the exports are detailed in stitches API documentation.

Briefly,:

• css — a utlity function to create CSS rules (rarely used).
• styled — a function for creating styled components.
• createTheme — a function for creating a sub-theme, using colours. This is used further down in the file. You typically wont' call it outside of this file.
• keyframes — a function for creating CSS keyframe animations (à la @keyframes).
• globalCss — a function for creating global CSS rules. You'll see this further down in the file. You typically wont' call it outside of this file.
• typeVariants (custom) — a dictionary of typographic styles defined in your theme. This is useful for iterating over typography, and is used by the default Typography, Paragraph and Heading components which expose a variant prop.
• config — the theme object itself, which can be referenced throughout your project where necessary (rarely used).
• responsiveTokens (custom) — a dictionary of responsive tokens, which usually just means spacing tokens.
• breakpoints (custom) — An array of breakpoint objects, which contain the min and max sizes of each breakpoint. Useful if you need to access the exact boundary sizes of your breakpoints.
• getCssText — Required for serverless SSR.