Plastic Design System

Layout

Box

Stack

Inline

Space

Center

Row

Levee

Card

useTheme

Lets you consume the theme from within JS. Very useful for SVG or integrating with libraries that take styles as props, like react-day-picker and react-select.

const SvgComponent = () => {
  const { c, s } = useTheme()

  return (
    <svg
      width={s.xxxl}
      height={s.xxxl}
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <path
          d="M10 2 0 7.455l10 5.454 8.182-4.464v6.281H20V7.455L10 2Zm0 12.726-6.364-3.471v3.636L10 18.364l6.364-3.473v-3.636L10 14.726Z"
        />
      </defs>
      <use fill={c.red500} />
    </svg>
  )
}