Stitches CSS

July 17, 2022 . Developer Environment

Radix UI is the layer that provides the unstyled accessible customizable components.

Can be used by anyone who is using React, as it is only supported in React as of now.

Radix is the base of the design system and Stitches is the styling solution.

Stitches is a css and js library and has near zero runtime. Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.

import { createCss } from "@stitches/react";

const { styled, theme } = createCss({
  theme: {
    colors: {
      gray400: "gainsboro",
      gray500: "lightgray",
      purple400: "blueviolet",
      purple500: "darkviolet",
      red400: "tomato",
      red500: "#cc0000",

      primary: "$purple400",
      primaryDark: "$purple500"
    },
    space: {
      1: "10px",
      2: "20px"
    },
    fontSizes: {}
  },
  utils: {
    px: (config) => (value) => ({
      paddingLeft: value,
      paddingRight: value
    })
  },
  conditions: {
    bp1: "@media (min-width: 400px)"
  }
});

const Box = styled("div");

const Button = styled("button", {
  // mini reset
  appearance: "none",
  border: "none",
  backgroundColor: "transparent",
  lineHeight: 1,
  borderRadius: "99999px",
  px: "$1",

  variants: {
    size: {
      1: {
        fontSize: "13px",
        height: "25px"
      },
      2: {
        fontSize: "15px",
        height: "35px"
      }
    },
    variant: {
      gray: {
        backgroundColor: "$gray400",
        "&:hover": {
          backgroundColor: "$gray500"
        }
      },
      primary: {
        backgroundColor: "$primary",
        color: "white",
        "&:hover": {
          backgroundColor: "$primaryDark"
        }
      }
    },
    outlined: {
      true: {
        $$shadowColor: "transparent",
        backgroundColor: "transparent",
        boxShadow: "0 0 0 1px $$shadowColor"
      }
    }
  },

  defaultVariants: {
    variant: "gray",
    size: 1
  },

  compoundVariants: [
    {
      variant: "gray",
      outlined: true,
      css: {
        $$shadowColor: "$colors$gray400"
      }
    },
    {
      variant: "primary",
      outlined: true,
      css: {
        $$shadowColor: "$colors$primary",
        color: "$primary",
        "&:hover": {
          color: "white"
        }
      }
    }
  ]
});

const newTheme = theme({
  colors: {
    primary: "$red400",
    primaryDark: "$red500"
  }
});

export default function App() {
  return (
    <Box
    // Uncomment to activate newTheme
    // className={newTheme}
    >
      <Box css=>
        <Button>Button</Button>
        <Button variant="gray">Gray Button</Button>
        <Button variant="primary">Primary Button</Button>
        <Button variant="gray" outlined>
          Outlined Gray Button
        </Button>
        <Button variant="primary" outlined>
          Outlined Primary Button
        </Button>
        <Button variant="primary" outlined size=>
          Responsive Primary Button
        </Button>
      </Box>
    </Box>
  );
}

Button Screenshot