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.9 kB
TypeScript
export declare const styleMap: {
readonly display: {
readonly large: {
readonly mobile: "text-[48px] leading-[48px] font-bold";
readonly tablet: "md:text-[72px] md:leading-[80px] font-bold";
readonly web: "lg:text-[96px] lg:leading-[106px] font-bold";
};
readonly medium: {
readonly mobile: "text-[32px] leading-[36px] font-bold";
readonly tablet: "md:text-[56px] md:leading-[62px] font-bold";
readonly web: "lg:text-[72px] lg:leading-[80px] font-bold";
};
};
readonly heading: {
readonly large: {
readonly mobile: "text-[24px] leading-[32px] font-bold";
readonly tablet: "md:text-[30px] md:leading-[40px] font-bold";
readonly web: "lg:text-[36px] lg:leading-[44px] font-bold";
};
readonly medium: {
readonly mobile: "text-[16px] leading-[18px] font-semibold";
readonly tablet: "md:text-[16px] md:leading-[20px] font-semibold";
readonly web: "lg:text-[18px] lg:leading-[20px] font-semibold";
};
readonly small: {
readonly mobile: "text-[14px] leading-[18px] font-semibold";
readonly tablet: "md:text-[16px] md:leading-[18px] font-semibold";
readonly web: "lg:text-[16px] lg:leading-[28px] font-semibold";
};
};
readonly body: {
readonly large: {
readonly mobile: "text-[16px] leading-[24px]";
readonly tablet: "md:text-[18px] md:leading-[28px]";
readonly web: "lg:text-[18px] lg:leading-[28px]";
};
readonly medium: {
readonly mobile: "text-[14px] leading-[20px]";
readonly tablet: "md:text-[16px] md:leading-[24px]";
readonly web: "lg:text-[16px] lg:leading-[24px]";
};
readonly small: {
readonly mobile: "text-[12px] leading-[16px] font-semibold";
readonly tablet: "md:text-[14px] md:leading-[20px] font-semibold";
readonly web: "lg:text-[14px] lg:leading-[20px] font-semibold";
};
};
readonly button: {
readonly medium: {
readonly mobile: "text-[16px] leading-[20px]";
readonly tablet: "md:text-[16px] md:leading-[20px]";
readonly web: "lg:text-[16px] lg:leading-[20px]";
};
readonly small: {
readonly mobile: "text-[12px] leading-[14px] font-semibold";
readonly tablet: "md:text-[14px] md:leading-[16px] font-semibold";
readonly web: "lg:text-[14px] lg:leading-[16px] font-semibold";
};
};
readonly caption: {
readonly medium: {
readonly mobile: "text-[10px] leading-[14px]";
readonly tablet: "md:text-[14px] md:leading-[16px]";
readonly web: "lg:text-[14px] lg:leading-[16px]";
};
};
};