cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
34 lines (33 loc) • 1.55 kB
JavaScript
"use client";
"use client";
import { mq } from "./theme.js";
import { css } from "styled-components";
//#region src/lib/utils/typography.tsx
var createTypographyStyle = (key) => (theme) => css([
`font-size:`,
`;line-height:`,
`;`,
`{font-size:`,
`;line-height:`,
`;}`
], theme.fontSizes[key].xs, theme.lineHeights[key].xs, mq("lg"), theme.fontSizes[key].lg, theme.lineHeights[key].lg);
var styledHero1 = createTypographyStyle("hero1");
var styledHero2 = createTypographyStyle("hero2");
var styledHero3 = createTypographyStyle("hero3");
var styledH1 = createTypographyStyle("h1");
var styledH2 = createTypographyStyle("h2");
var styledH3 = createTypographyStyle("h3");
var styledH4 = createTypographyStyle("h4");
var styledH5 = createTypographyStyle("h5");
var styledH6 = createTypographyStyle("h6");
var styledText = createTypographyStyle("text");
var styledStrong = createTypographyStyle("strong");
var styledSmall = createTypographyStyle("small");
var styledBlockquote = createTypographyStyle("blockquote");
var styledCode = createTypographyStyle("code");
var styledButton = createTypographyStyle("button");
var styledButtonBig = createTypographyStyle("buttonBig");
var styledInput = createTypographyStyle("input");
var styledInputBig = createTypographyStyle("inputBig");
//#endregion
export { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText };