Блог

Я хочу разделить код на более читаемые и более мелкие компоненты. Поэтому для этого я хочу экспортировать fontSizes объект и импортировать его в темы const (themes.js). Как я могу этого достичь?

Вот мой код:

 // typography.ts
export const fontSizes = {
    fontSizes: {
        display: "60px",
        headLineOne: "48px",
        headLineTwo: "36px",
        headLineThree: "30px",
        headLineFour: "24px",
        headLineFive: "20px",
        captionCaps: "16px",
        caption: "12px",
        bodyLarge: "20px",
        bodyMedium: "16px",
        bodySmall: "14px",
        bodyArticle: "16px",
    },
    
    fonts: {
        header: "Montserrat", 
        body: "Montserrat"
    }
};

// theme.js
const theme: DefaultTheme = {
    colors: {
        primary_first_accent: '#4a0e88',
        primary_second_accent: '#FFC542',
    },
    
    // so in the end I want to add it in here
    fonts: {
        heading: "Steelfish, sans-serif",
        body: '"font-family: proxima_nova,"Helvetica Neue",Helvetica,Arial,sans-serif;'
    },
    
    breakpoints: [200, 640, 768, 1024, 1440]
};