react-uzprogers-textstyle
Version:
Reusable text style components for React projects, with built-in support for Tailwind and design tokens.
68 lines (67 loc) • 2.46 kB
JavaScript
export const styleMap = {
display: {
large: {
mobile: "text-[48px] leading-[48px] font-bold",
tablet: "md:text-[72px] md:leading-[80px] font-bold",
web: "lg:text-[96px] lg:leading-[106px] font-bold",
},
medium: {
mobile: "text-[32px] leading-[36px] font-bold",
tablet: "md:text-[56px] md:leading-[62px] font-bold",
web: "lg:text-[72px] lg:leading-[80px] font-bold",
},
},
heading: {
large: {
mobile: "text-[24px] leading-[32px] font-bold",
tablet: "md:text-[30px] md:leading-[40px] font-bold",
web: "lg:text-[36px] lg:leading-[44px] font-bold",
},
medium: {
mobile: "text-[16px] leading-[18px] font-semibold",
tablet: "md:text-[16px] md:leading-[20px] font-semibold",
web: "lg:text-[18px] lg:leading-[20px] font-semibold",
},
small: {
mobile: "text-[14px] leading-[18px] font-semibold",
tablet: "md:text-[16px] md:leading-[18px] font-semibold",
web: "lg:text-[16px] lg:leading-[28px] font-semibold",
},
},
body: {
large: {
mobile: "text-[16px] leading-[24px]",
tablet: "md:text-[18px] md:leading-[28px]",
web: "lg:text-[18px] lg:leading-[28px]",
},
medium: {
mobile: "text-[14px] leading-[20px]",
tablet: "md:text-[16px] md:leading-[24px]",
web: "lg:text-[16px] lg:leading-[24px]",
},
small: {
mobile: "text-[12px] leading-[16px] font-semibold",
tablet: "md:text-[14px] md:leading-[20px] font-semibold",
web: "lg:text-[14px] lg:leading-[20px] font-semibold",
},
},
button: {
medium: {
mobile: "text-[16px] leading-[20px]",
tablet: "md:text-[16px] md:leading-[20px]",
web: "lg:text-[16px] lg:leading-[20px]",
},
small: {
mobile: "text-[12px] leading-[14px] font-semibold",
tablet: "md:text-[14px] md:leading-[16px] font-semibold",
web: "lg:text-[14px] lg:leading-[16px] font-semibold",
},
},
caption: {
medium: {
mobile: "text-[10px] leading-[14px]",
tablet: "md:text-[14px] md:leading-[16px]",
web: "lg:text-[14px] lg:leading-[16px]",
},
},
};