Theme
The Cherry theme is a TypeScript object that defines various aspects of your project. Whether you're working on media queries, spacing sizes, colors, font sizes, or line heights, the Cherry theme has got you covered. Cherry also offers a Figma plugin to extract design tokens - check out the Figma documentation for details.
Wrap your entire application with CherryThemeProvider to ensure all components have access to the theme:
import { CherryThemeProvider, theme } from "cherry-styled-components";
export default function App({ Component, pageProps }) {
return (
<CherryThemeProvider theme={theme}>
<Component {...pageProps} />
</CherryThemeProvider>
);
}Theme Object
The theme object is type safe and uses TypeScript. It is divided into the following sections:
1. Breakpoints
export const breakpoints: Breakpoints = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1440,
xxxl: 1920,
};
export function mq(minWidth: keyof Breakpoints) {
return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
}2. Spacing
export const spacing: Spacing = {
maxWidth: { xs: "1280px", xxxl: "1440px" },
padding: { xs: "20px", lg: "40px" },
radius: { xs: "6px", lg: "12px", xl: "30px" },
gridGap: { xs: "20px", lg: "40px" },
};3. Colors
export const colors: Colors = {
primaryLight: "#91aec4",
primary: "#4d6f8b",
primaryDark: "#194569",
secondaryLight: "#a4b17b",
secondary: "#5c6e46",
secondaryDark: "#354c2b",
tertiaryLight: "#ebccb9",
tertiary: "#816b5a",
tertiaryDark: "#675445",
grayLight: "#e5e7eb",
gray: "#9ca3af",
grayDark: "#4b5563",
success: "#84cc16",
error: "#ef4444",
warning: "#eab308",
info: "#06b6d4",
dark: "#000000",
light: "#ffffff",
};4. Shadows
export const shadows: Shadows = {
xs: "0px 4px 4px 0px rgba(18,18,18,0.04), 0px 1px 3px 0px rgba(39,41,45,0.02)",
sm: "0px 4px 4px 0px rgba(18,18,18,0.08), 0px 1px 3px 0px rgba(39,41,45,0.04)",
md: "0px 8px 8px 0px rgba(18,18,18,0.16), 0px 2px 3px 0px rgba(39,41,45,0.06)",
lg: "0px 16px 24px 0px rgba(18,18,18,0.20), 0px 2px 3px 0px rgba(39,41,45,0.08)",
xl: "0px 24px 32px 0px rgba(18,18,18,0.24), 0px 2px 3px 0px rgba(39,41,45,0.12)",
};5. Fonts
export const fonts: Fonts = {
text: "Inter",
head: "Inter",
mono: "monospace",
};6. Font Sizes
export const fontSizes: FontSizes = {
hero1: { xs: "72px", lg: "128px" },
hero2: { xs: "60px", lg: "96px" },
hero3: { xs: "36px", lg: "72px" },
h1: { xs: "40px", lg: "60px" },
h2: { xs: "30px", lg: "36px" },
h3: { xs: "28px", lg: "30px" },
h4: { xs: "26px", lg: "24px" },
h5: { xs: "18px", lg: "20px" },
h6: { xs: "16px", lg: "18px" },
text: { xs: "14px", lg: "16px" },
strong: { xs: "14px", lg: "16px" },
small: { xs: "12px", lg: "14px" },
blockquote: { xs: "16px", lg: "18px" },
code: { xs: "14px", lg: "16px" },
buttonSmall: { xs: "14px", lg: "14px" },
button: { xs: "16px", lg: "16px" },
buttonBig: { xs: "18px", lg: "18px" },
inputSmall: { xs: "14px", lg: "14px" },
input: { xs: "16px", lg: "16px" },
inputBig: { xs: "18px", lg: "18px" },
};7. Line Heights
export const lineHeights: LineHeights = {
hero1: { xs: "1.10", lg: "1.10" },
hero2: { xs: "1.10", lg: "1.10" },
hero3: { xs: "1.20", lg: "1.10" },
h1: { xs: "1.50", lg: "1.40" },
h2: { xs: "1.50", lg: "1.50" },
h3: { xs: "1.30", lg: "1.50" },
h4: { xs: "1.30", lg: "1.50" },
h5: { xs: "1.60", lg: "1.50" },
h6: { xs: "1.60", lg: "1.60" },
text: { xs: "1.70", lg: "1.70" },
strong: { xs: "1.70", lg: "1.70" },
small: { xs: "1.70", lg: "1.70" },
blockquote: { xs: "1.70", lg: "1.70" },
code: { xs: "1.70", lg: "1.70" },
buttonSmall: { xs: "1.00", lg: "1.00" },
button: { xs: "1.00", lg: "1.00" },
buttonBig: { xs: "1.00", lg: "1.00" },
inputSmall: { xs: "1.00", lg: "1.00" },
input: { xs: "1.00", lg: "1.00" },
inputBig: { xs: "1.00", lg: "1.00" },
};Extending the Theme
When extending the Cherry theme, adhere to established patterns. Cherry uses the following size patterns: xs, sm, md, lg, xl, xxl, and xxxl. These patterns define not only media queries but also various other sizes.
If you extend the theme, ensure that you add the necessary type definitions to maintain consistency.