Stitches Theme
Font Sizes
The font sizes defined in the stitches theme.
Space
This is the unit that is used per default for margins, padding and gaps.
Size
This is the unit that is used per default for height and width.
Colors
The color palette used in the theme.
Base Components
<Section>
<Container>
<Text> </Text>
</Container>
</Section>The Section component facilitates spacing and vertical padding, Container holds the content within an appropriate width and horizontal padding.
Adding pieces of text should occur through the Text component.Text aims to implement a universal convention for adding text content with ideally no or minimal custom styling needed.
Section
Custom section component, that facilitates spacing and vertical padding for consistency in layout.
This is a preview of the section component.
This is a preview of the section component.
Container
Custom container component, that facilitates spacing and horizontal padding for consistency in layout.
Text
Custom text component, that aims to implement a universal convention for adding text content with ideally no or minimal custom styling needed.
Line height
Tight
Primary
Loose
Color
Primary
Black
White
Gray
DarkBlue
DarkGray
Font Weight
Normal
Medium
SemiBold
Bold
Bolder
Font Size
Font sizes are based on the theme's font sizes, which are set in the stitches.config.ts file and are used as tokens throughout the project. The font size can be set through the fontSize prop, which accepts a number from 0 to 9.<Text fontSize="4">Lorem ipsum dolor sit amet.</Text>
Type
By default Text is a span tag, but any valid HTML tag can be passed via the as prop. The ability to pass any HTML tag through as and a separate look through the type prop creates a nice convention where an element can be styled independently from its HTML tag. This is useful as identical semantic structures may require different looks depending on their purpose.You can add a heading like this:<Text as="h1" type="h2"> Lorem ipsum </Text>Notice how the as and type props can be used in different combinations without having styles derive from the HTML tag itself.Or a paragraph like this:
<Text as="p">Lorem ipsum dolor sit amet.</Text>
h1Larger:
The quick brown fox jumps over the lazy dogh1:
The quick brown fox jumps over the lazy dogh2:
The quick brown fox jumps over the lazy dogFlex
The Flex component can be used to position content in a more flexible way. It has variants like direction, align and justify that can be used to position content for convenience.
<Flex direction="column" align="center" justify="center" gap="1" wrap="wrap"> <Text> </Text> </Flex>The gap prop can be used to add space between the children of the Flex component. The values 1 through 9 correspond to the space values in the theme.
I am a Flex container
with align center and justify center
and gap of 3
Grid
Grid custom component uses the properties of grid display as variants to adjust the layout of the children in a more structured way.
<Grid columns="3" flow="row" align="center" justify="center" gap="1"> <Text> </Text> <Text> </Text> <Text> </Text> </Grid>The columns prop can be used to specify the number of columns in the grid. The flow prop can be used to specify the direction of the grid. The align and justify props can be used to position the children of the grid. The gap prop can be used to add space between the children of the grid. Gap can also be specified as gapX for horizontal gap and gapY for vertical gap. The values 1 through 9 correspond to the space values in the theme.