Styleguide
Table of Contents
Always start with the styleguide first
If you can't find what you need in here, then add what you need in the src/theme folder and ensure it works with the rest of the project.
Headings (h1-h6)
Headings (h1-h6) should use the Chakra UI Heading component as seen below, with the size controlled by the size prop. h1-h6 should **ONLY** be used for semantics and not for size/style to properly separate content from presentation.as="h*" determines which heading HTML element is used but should **NOT** be used for styling, use size="***" or other props on the Chakra React element.
<Heading
as="h1"
size="3xl"
variant="h1"
>
(3xl = 60px) h1 heading element
</Heading>
The size prop controls font size and the variant is used for any other style changes (see src/theme/headingStyles.ts)
(3xl = 60px) h1 heading element
(3xl = 60px) h6 heading element (semantics example)
(2xl = 48px) h2 heading element
(2xl = 48px) h3 heading element
(xl = 36px) h4 heading element
(lg = 30px) h5 heading element
(md = 20px) h6 heading element
Palette
To use colors in Chakra just pass in the color variable name as a prop to the Chakra element:
<Box
background="lightPeach"
color="black"
height="3rem"
width="5rem"
>
Example
</Box>As always add/alter colors in the src/theme/colors.ts files
Light Gray
lightGrayMedium Gray
mediumGray.500Dark Gray
darkGrayBlack
blackPencil Blue
pencilBlue.500Dark Blue
darkBlueLight Peach
lightPeach.500Peach
peachButtons
Below is the default Button component. Buttons can be styled like other Chaka UI components, with one exception. Buttons have a colorScheme prop that takes a given named color and produces a set of different colors to handle other states (like :hover, :active, etc.)
The default button uses colorScheme="mediumGray".
See https://chakra-ui.com/docs/components/button for more info on Chakra UI buttons
<Button>
Button
</Button>
This is equivalent to:
<Button
colorScheme="mediumGray"
size="md"
>
Button
</Button>
Click on a button below to see its code.
<Button>
Button
</Button>
<Button colorScheme="lightPeach">
Button
</Button>
<Button colorScheme="pencilBlue">
Button
</Button>
<Button variant="ghost">
Button
</Button>
Links styled to look like Buttons.
Always remember when adding target="_blank" to also add rel="noopener noreferrer" for security.
<Button
as="a"
colorScheme="pencilBlue"
href="https://www.google.com"
rel="noopener noreferrer"
target="_blank"
>
Contact the Artist
</Button>
Links
For internal links to other parts of the Armadillo website, use the Chakra UI Link component withGatsbyLink passed in as the underlying component, as shown below.
<Link as={GatsbyLink} to="/styleguide">
Link to styleguide
</Link><Link as={GatsbyLink} to="/styleguide" variant="onDarkBg">
Link on dark background
</Link><Link
href="https://example.com"
isExternal
>
External link to example.com
</Link>
<Link
href="https://example.com"
isExternal
variant="onDarkBg"
>
External link to example.com
</Link>
For links styled to look like buttons, see above.
Text
*** TODO ***
