386 lines
12 KiB
TypeScript
386 lines
12 KiB
TypeScript
import type { SizingPreset } from "./types";
|
|
|
|
export interface TextSizingValues {
|
|
text2xs: string;
|
|
textXs: string;
|
|
textSm: string;
|
|
textBase: string;
|
|
textLg: string;
|
|
textXl: string;
|
|
text2xl: string;
|
|
text3xl: string;
|
|
text4xl: string;
|
|
text5xl: string;
|
|
text6xl: string;
|
|
text7xl: string;
|
|
text8xl: string;
|
|
text9xl: string;
|
|
}
|
|
|
|
export const textSizingMap: Record<SizingPreset, { desktop: TextSizingValues; mobile: TextSizingValues }> = {
|
|
medium: {
|
|
desktop: {
|
|
text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2vw, 2rem)",
|
|
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
text2xs: "2.5vw",
|
|
textXs: "2.75vw",
|
|
textSm: "3vw",
|
|
textBase: "3.25vw",
|
|
textLg: "3.5vw",
|
|
textXl: "4.25vw",
|
|
text2xl: "5vw",
|
|
text3xl: "6vw",
|
|
text4xl: "7vw",
|
|
text5xl: "7.5vw",
|
|
text6xl: "8.5vw",
|
|
text7xl: "10vw",
|
|
text8xl: "12vw",
|
|
text9xl: "14vw",
|
|
},
|
|
},
|
|
mediumLarge: {
|
|
desktop: {
|
|
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
|
text5xl: "clamp(2.025rem, 2.8875vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.465vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.2vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.725vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7.35vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
text2xs: "2.625vw",
|
|
textXs: "2.8875vw",
|
|
textSm: "3.15vw",
|
|
textBase: "3.4125vw",
|
|
textLg: "3.675vw",
|
|
textXl: "4.4625vw",
|
|
text2xl: "5.25vw",
|
|
text3xl: "6.3vw",
|
|
text4xl: "7.35vw",
|
|
text5xl: "7.875vw",
|
|
text6xl: "8.925vw",
|
|
text7xl: "10.5vw",
|
|
text8xl: "12.6vw",
|
|
text9xl: "14.7vw",
|
|
},
|
|
},
|
|
largeSmall: {
|
|
desktop: {
|
|
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
|
text5xl: "clamp(2.025rem, 3.025vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.63vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.4vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.95vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7.7vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
text2xs: "2.75vw",
|
|
textXs: "3.025vw",
|
|
textSm: "3.3vw",
|
|
textBase: "3.575vw",
|
|
textLg: "3.85vw",
|
|
textXl: "4.675vw",
|
|
text2xl: "5.5vw",
|
|
text3xl: "6.6vw",
|
|
text4xl: "7.7vw",
|
|
text5xl: "8.25vw",
|
|
text6xl: "9.35vw",
|
|
text7xl: "11vw",
|
|
text8xl: "13.2vw",
|
|
text9xl: "15.4vw",
|
|
},
|
|
},
|
|
large: {
|
|
desktop: {
|
|
text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.15vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
|
|
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
text2xs: "2.875vw",
|
|
textXs: "3.1625vw",
|
|
textSm: "3.45vw",
|
|
textBase: "3.7375vw",
|
|
textLg: "4.025vw",
|
|
textXl: "4.8875vw",
|
|
text2xl: "5.75vw",
|
|
text3xl: "6.9vw",
|
|
text4xl: "8.05vw",
|
|
text5xl: "8.625vw",
|
|
text6xl: "9.775vw",
|
|
text7xl: "11.5vw",
|
|
text8xl: "13.8vw",
|
|
text9xl: "16.1vw",
|
|
},
|
|
},
|
|
mediumSizeLargeTitles: {
|
|
desktop: {
|
|
// Medium body text sizes: use medium values
|
|
text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2vw, 2rem)",
|
|
// Large title sizes: use large preset values
|
|
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// Medium body text sizes: use medium values
|
|
text2xs: "2.5vw",
|
|
textXs: "2.75vw",
|
|
textSm: "3vw",
|
|
textBase: "3.25vw",
|
|
textLg: "3.5vw",
|
|
textXl: "4.25vw",
|
|
text2xl: "5vw",
|
|
text3xl: "6vw",
|
|
text4xl: "7vw",
|
|
// Large title sizes: use large preset values
|
|
text5xl: "8.625vw",
|
|
text6xl: "9.775vw",
|
|
text7xl: "11.5vw",
|
|
text8xl: "13.8vw",
|
|
text9xl: "16.1vw",
|
|
},
|
|
},
|
|
largeSizeMediumTitles: {
|
|
desktop: {
|
|
// Large body text sizes: use large values
|
|
text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.15vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
|
|
// Medium title sizes: use medium preset values
|
|
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// Large body text sizes: use large values
|
|
text2xs: "2.875vw",
|
|
textXs: "3.1625vw",
|
|
textSm: "3.45vw",
|
|
textBase: "3.7375vw",
|
|
textLg: "4.025vw",
|
|
textXl: "4.8875vw",
|
|
text2xl: "5.75vw",
|
|
text3xl: "6.9vw",
|
|
text4xl: "8.05vw",
|
|
// Medium title sizes: use medium preset values
|
|
text5xl: "7.5vw",
|
|
text6xl: "8.5vw",
|
|
text7xl: "10vw",
|
|
text8xl: "12vw",
|
|
text9xl: "14vw",
|
|
},
|
|
},
|
|
mediumLargeSizeLargeTitles: {
|
|
desktop: {
|
|
// MediumLarge body text sizes
|
|
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
|
// Large title sizes
|
|
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// MediumLarge body text sizes
|
|
text2xs: "2.625vw",
|
|
textXs: "2.8875vw",
|
|
textSm: "3.15vw",
|
|
textBase: "3.4125vw",
|
|
textLg: "3.675vw",
|
|
textXl: "4.4625vw",
|
|
text2xl: "5.25vw",
|
|
text3xl: "6.3vw",
|
|
text4xl: "7.35vw",
|
|
// Large title sizes
|
|
text5xl: "8.625vw",
|
|
text6xl: "9.775vw",
|
|
text7xl: "11.5vw",
|
|
text8xl: "13.8vw",
|
|
text9xl: "16.1vw",
|
|
},
|
|
},
|
|
largeSmallSizeLargeTitles: {
|
|
desktop: {
|
|
// LargeSmall body text sizes
|
|
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
|
// Large title sizes
|
|
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// LargeSmall body text sizes
|
|
text2xs: "2.75vw",
|
|
textXs: "3.025vw",
|
|
textSm: "3.3vw",
|
|
textBase: "3.575vw",
|
|
textLg: "3.85vw",
|
|
textXl: "4.675vw",
|
|
text2xl: "5.5vw",
|
|
text3xl: "6.6vw",
|
|
text4xl: "7.7vw",
|
|
// Large title sizes
|
|
text5xl: "8.625vw",
|
|
text6xl: "9.775vw",
|
|
text7xl: "11.5vw",
|
|
text8xl: "13.8vw",
|
|
text9xl: "16.1vw",
|
|
},
|
|
},
|
|
mediumLargeSizeMediumTitles: {
|
|
desktop: {
|
|
// MediumLarge body text sizes
|
|
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
|
// Medium title sizes
|
|
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// MediumLarge body text sizes
|
|
text2xs: "2.625vw",
|
|
textXs: "2.8875vw",
|
|
textSm: "3.15vw",
|
|
textBase: "3.4125vw",
|
|
textLg: "3.675vw",
|
|
textXl: "4.4625vw",
|
|
text2xl: "5.25vw",
|
|
text3xl: "6.3vw",
|
|
text4xl: "7.35vw",
|
|
// Medium title sizes
|
|
text5xl: "7.5vw",
|
|
text6xl: "8.5vw",
|
|
text7xl: "10vw",
|
|
text8xl: "12vw",
|
|
text9xl: "14vw",
|
|
},
|
|
},
|
|
largeSmallSizeMediumTitles: {
|
|
desktop: {
|
|
// LargeSmall body text sizes
|
|
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
|
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
|
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
|
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
|
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
|
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
|
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
|
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
|
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
|
// Medium title sizes
|
|
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
|
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
|
text7xl: "clamp(3rem, 4vw, 4rem)",
|
|
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
|
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
|
},
|
|
mobile: {
|
|
// LargeSmall body text sizes
|
|
text2xs: "2.75vw",
|
|
textXs: "3.025vw",
|
|
textSm: "3.3vw",
|
|
textBase: "3.575vw",
|
|
textLg: "3.85vw",
|
|
textXl: "4.675vw",
|
|
text2xl: "5.5vw",
|
|
text3xl: "6.6vw",
|
|
text4xl: "7.7vw",
|
|
// Medium title sizes
|
|
text5xl: "7.5vw",
|
|
text6xl: "8.5vw",
|
|
text7xl: "10vw",
|
|
text8xl: "12vw",
|
|
text9xl: "14vw",
|
|
},
|
|
},
|
|
};
|