Using Stitches

This guide walks through the basics of using Stitches with ADS. It is not a substitute for the Stitches documentation itself.

This document is only meant to be a TL;DR explanation for some of the key features of Stitches that ADS is relying on. We still recommend you read through the Stitches documentation. The ADS Stitches Tokens can be found in the tokens and color sections.

#Using the `css` prop

One of the primary ways to style components using Stitches is to use the css prop. This is only valid on components that have been created using Stitches. It may go without saying that all ADS components were created with Stitches and therefore accept the css prop. However, for all the non-layout components we restrict which CSS properties are passed through. For all the layout components, there are no restrictions.


I'm a box

#Using the `styled` function

There may be situations where you may not be able to use the css prop or one of the layout components. In that case, you can create new Stitches components on top of the ADS Stitches theme.

let InlineAlert = styled('div', {
  bg: '$gray100',
  p: '$2',

  variants: {
    type: {
      caution: {
        backgroundColor: '$orange100',

        code: {
          backgroundColor: '$orange200',
        },
      },
    },
  },
})


Default
👋 Hello

#Variants

You may have noticed in the code above the use of the Stitches variants API. Many of the new ADS components rely heavily on this feature. It is a key pillar of Stitches and allows you to built robust and flexible components with little code. If you are using the styled function to create new components, we highly recommend using the variants API alongside it.

#Dark mode

The last item to highlight from Stitches is the ease of creating separate themes. ADS has only two themes: default (light mode) and dark mode. You can create dark mode at any point in your component tree by wrapping it in a container with the dark theme class. Reminder that ADS components don't allow className as a prop, so you'll have to use a plain HTML element for this.

import { darkTheme } from '@wpmedia/ads-system'
;<div className={darkTheme}>Hello darkness my old friend</div>

This pattern used on the website to allow the code blocks to toggle between light and dark modes.

#Using the css prop

#Using the styled function

#Variants

#Dark mode

#Using the `css` prop

#Using the `styled` function