welcome-ui/dist/types/theme/typography.d.ts

Customizable design system with react • styled-components • styled-system and ariakit.

import { CSSObject } from '@xstyled/styled-components';
import { ThemeProps, ThemeValues } from '.';
export type ThemeFontSizes = {
    [key: number]: string;
    h0: string;
    h1: string;
    h2: string;
    h3: string;
    h4: string;
    h5: string;
    h6: string;
    lg: string;
    md: string;
    sm: string;
    'subtitle-md': string;
    'subtitle-sm': string;
    xs: string;
};
export declare const getFontSizes: (unit: string, theme: ThemeValues) => ThemeFontSizes;
export type ThemeLineHeights = {
    [key: number]: number | string;
    h0: number | string;
    h1: number | string;
    h2: number | string;
    h3: number | string;
    h4: number | string;
    h5: number | string;
    h6: number | string;
    html: number | string;
    lg: number | string;
    md: number | string;
    sm: number | string;
    'subtitle-md': number | string;
    'subtitle-sm': number | string;
    xs: number | string;
};
export declare const getLineHeights: ({ defaultLineHeight, toRem, }: {
    defaultLineHeight: number;
    toRem: (value: number) => string;
}) => ThemeLineHeights;
export type ThemeFontWeights = {
    [key: string]: number;
    bold: number;
    medium: number;
    regular: number;
};
export declare const fontWeights: ThemeFontWeights;
export type ThemeLetterSpacings = {
    [key: string]: string;
    h0: string;
    h1: string;
    h2: string;
    h3: string;
    h4: string;
    h5: string;
    h6: string;
    html: string;
    lg: string;
    md: string;
    sm: string;
    'subtitle-md': string;
    'subtitle-sm': string;
    xs: string;
};
export declare const getLetterSpacings: ({ defaultLetterSpacing, toRem, }: {
    defaultLetterSpacing: string;
    toRem: (value: number) => string;
}) => ThemeLetterSpacings;
export type ThemeTextsFontWeights = {
    [key: string]: number;
    h0: number;
    h1: number;
    h2: number;
    h3: number;
    h4: number;
    h5: number;
    h6: number;
    lg: number;
    md: number;
    sm: number;
    'subtitle-md': number;
    'subtitle-sm': number;
    xs: number;
};
export declare const getTextsFontWeights: (theme: ThemeValues) => ThemeTextsFontWeights;
export type ThemeTextsFontFamily = {
    [key: string]: string;
    h0: string;
    h1: string;
    h2: string;
    h3: string;
    h4: string;
    h5: string;
    h6: string;
    'subtitle-md': string;
    'subtitle-sm': string;
};
export declare const getTextsFontFamily: (theme: ThemeValues) => ThemeTextsFontFamily;
export type ThemeTextsTextTransform = {
    [key: string]: string;
    'subtitle-md': string;
    'subtitle-sm': string;
};
export declare const getTextsTextTransform: () => ThemeTextsTextTransform;
export type ThemeTextsFontColors = {
    [key: number]: string;
    h0: string;
    h1: string;
    h2: string;
    h3: string;
    h4: string;
    h5: string;
    h6: string;
};
export declare const getTextFontColors: (theme: ThemeValues) => ThemeTextsFontColors;
export type ThemeTexts = {
    [key: string]: Partial<{
        color: CSSObject['color'];
        fontFamily: CSSObject['fontFamily'];
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        letterSpacing: CSSObject['letterSpacing'];
        lineHeight: CSSObject['lineHeight'];
        textTransform: CSSObject['textTransform'];
    }>;
};
export declare const getTexts: (theme: ThemeValues) => ThemeTexts;
export type ThemeFonts = {
    headings: string;
    icons: string;
    texts: string;
};
export declare const getFonts: (defaultFontFamily: ThemeProps["defaultFontFamily"], headingFontFamily: ThemeProps["headingFontFamily"], iconFontFamily: ThemeProps["iconFontFamily"]) => ThemeFonts;