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>
);
}The theme object is type safe and uses TypeScript. It is divided into the following sections:
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)`;
}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" },
};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",
};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)",
};export const fonts: Fonts = {
text: "Inter",
head: "Inter",
mono: "monospace",
};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" },
};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" },
};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.