import type { TextStyle } from "react-native"; export declare const typeRoles: { readonly display: { readonly fontSize: 56; readonly lineHeight: 56; readonly fontWeight: "500"; readonly letterSpacing: -2.24; }; readonly h1: { readonly fontSize: 44; readonly lineHeight: 46.2; readonly fontWeight: "500"; readonly letterSpacing: -1.32; }; readonly h2: { readonly fontSize: 34; readonly lineHeight: 37.4; readonly fontWeight: "500"; readonly letterSpacing: -0.85; }; readonly h3: { readonly fontSize: 26; readonly lineHeight: 29.9; readonly fontWeight: "500"; readonly letterSpacing: -0.52; }; readonly h4: { readonly fontSize: 21; readonly lineHeight: 25.2; readonly fontWeight: "500"; readonly letterSpacing: -0.31; }; readonly h5: { readonly fontSize: 17; readonly lineHeight: 22.1; readonly fontWeight: "600"; }; readonly subheading: { readonly fontSize: 17; readonly lineHeight: 22.1; readonly fontWeight: "500"; }; readonly lead: { readonly fontSize: 19; readonly lineHeight: 28.5; readonly fontWeight: "400"; }; readonly body: { readonly fontSize: 15; readonly lineHeight: 23.25; readonly fontWeight: "400"; }; readonly label: { readonly fontSize: 13; readonly lineHeight: 16.9; readonly fontWeight: "500"; }; readonly small: { readonly fontSize: 13; readonly lineHeight: 19.5; readonly fontWeight: "400"; }; readonly caption: { readonly fontSize: 12; readonly lineHeight: 17.4; readonly fontWeight: "400"; }; readonly tiny: { readonly fontSize: 11; readonly lineHeight: 15.95; readonly fontWeight: "400"; }; readonly mono: { readonly fontSize: 13; readonly lineHeight: 19.5; readonly fontWeight: "400"; }; readonly eyebrow: { readonly fontSize: 11; readonly lineHeight: 11; readonly fontWeight: "500"; readonly letterSpacing: 1.1; readonly textTransform: "uppercase"; }; readonly tag: { readonly fontSize: 10; readonly lineHeight: 10; readonly fontWeight: "600"; }; readonly statValue: { readonly fontSize: 32; readonly lineHeight: 32; readonly fontWeight: "600"; readonly letterSpacing: -0.64; }; }; export declare const pageRoles: { readonly pageLead: { readonly fontSize: 18; readonly lineHeight: 27.9; readonly fontWeight: "400"; }; readonly sectionLead: { readonly fontSize: 17; readonly lineHeight: 26.35; readonly fontWeight: "400"; }; readonly tagline: { readonly fontSize: 22; readonly lineHeight: 28.6; readonly fontWeight: "400"; readonly letterSpacing: -0.33; }; readonly sectionTitle: { readonly fontSize: 28; readonly lineHeight: 30.8; readonly fontWeight: "500"; readonly letterSpacing: -0.56; }; readonly cardTitle: { readonly fontSize: 22; readonly lineHeight: 25.3; readonly fontWeight: "500"; readonly letterSpacing: -0.44; }; readonly panelTitle: { readonly fontSize: 20; readonly lineHeight: 24; readonly fontWeight: "500"; readonly letterSpacing: -0.4; }; readonly cardBody: { readonly fontSize: 14; readonly lineHeight: 21.7; readonly fontWeight: "400"; }; readonly sectionNote: { readonly fontSize: 14; readonly lineHeight: 21; readonly fontWeight: "400"; }; readonly pageBody: { readonly fontSize: 15; readonly lineHeight: 24; readonly fontWeight: "400"; }; readonly pageNote: { readonly fontSize: 14; readonly lineHeight: 22.4; readonly fontWeight: "400"; }; readonly pageLabel: { readonly fontSize: 11; readonly lineHeight: 11; readonly fontWeight: "500"; readonly letterSpacing: 0.88; readonly textTransform: "uppercase"; }; readonly knobLabel: { readonly fontSize: 12; readonly lineHeight: 12; readonly fontWeight: "500"; }; readonly guideTitle: { readonly fontSize: 16; readonly lineHeight: 20.8; readonly fontWeight: "600"; }; readonly guideBody: { readonly fontSize: 13.5; readonly lineHeight: 21.6; readonly fontWeight: "400"; }; readonly pagerName: { readonly fontSize: 18; readonly lineHeight: 22; readonly fontWeight: "500"; }; readonly specMeta: { readonly fontSize: 12; readonly lineHeight: 18.6; readonly fontWeight: "400"; }; readonly specText: { readonly fontSize: 13; readonly lineHeight: 20.15; readonly fontWeight: "400"; }; readonly pagerLabel: { readonly fontSize: 11; readonly lineHeight: 14; readonly fontWeight: "500"; readonly letterSpacing: 0.88; readonly textTransform: "uppercase"; }; readonly legendLabel: { readonly fontSize: 14; readonly lineHeight: 18; readonly fontWeight: "500"; }; readonly tileCaption: { readonly fontSize: 12; readonly lineHeight: 16; readonly fontWeight: "500"; }; readonly variantTitle: { readonly fontSize: 14; readonly lineHeight: 18.2; readonly fontWeight: "500"; }; readonly linkName: { readonly fontSize: 14; readonly lineHeight: 18; readonly fontWeight: "600"; }; readonly subsectionTitle: { readonly fontSize: 16; readonly lineHeight: 20; readonly fontWeight: "600"; }; readonly cardNote: { readonly fontSize: 12; readonly lineHeight: 19.2; readonly fontWeight: "400"; }; readonly codeLabel: { readonly fontSize: 12; readonly lineHeight: 16; readonly fontWeight: "400"; }; readonly inlineNote: { readonly fontSize: 12; readonly lineHeight: 15; readonly fontWeight: "400"; }; readonly tileTitle: { readonly fontSize: 15; readonly lineHeight: 19.5; readonly fontWeight: "500"; }; readonly gridLabel: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "500"; readonly letterSpacing: 0.8; readonly textTransform: "uppercase"; }; readonly tick: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "500"; }; readonly rowLabel: { readonly fontSize: 11; readonly lineHeight: 11; readonly fontWeight: "500"; readonly letterSpacing: 0.66; readonly textTransform: "uppercase"; }; readonly rowValue: { readonly fontSize: 22; readonly lineHeight: 22; readonly fontWeight: "500"; readonly letterSpacing: -0.44; }; readonly headlineValue: { readonly fontSize: 26; readonly lineHeight: 26; readonly fontWeight: "500"; readonly letterSpacing: -0.52; }; readonly bigNumber: { readonly fontSize: 40; readonly lineHeight: 40; readonly fontWeight: "500"; readonly letterSpacing: -1.2; }; readonly unit: { readonly fontSize: 16; readonly lineHeight: 20; readonly fontWeight: "400"; }; readonly paneTitle: { readonly fontSize: 16; readonly lineHeight: 19.2; readonly fontWeight: "500"; readonly letterSpacing: -0.16; }; readonly sampleLabel: { readonly fontSize: 11; readonly lineHeight: 14; readonly fontWeight: "400"; }; readonly sampleMeta: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "400"; }; readonly base: { readonly fontSize: 14; readonly lineHeight: 18; readonly fontWeight: "400"; }; }; /** A face the kit sets text in: the interface face, the display face and the mono face. */ export type TypeFace = "sans" | "display" | "mono"; /** * The browser's `normal` line per face and whole pixel size: the hand-off sets much of its * text with no ratio (`font:500 11px var(--fm)`), so the line is the face's own, which * only the face decides. Measured in Chromium on the docs' self-hosted variable faces * (Instrument Sans, Bricolage Grotesque, JetBrains Mono; the line box of an inline-block * span set `line-height:normal`), the same at every weight. The Typography `natural` * modifier reads it, so a role takes its face's normal line at its own size. A size off the * table (a fractional size, or one past 28) keeps the role's own line. */ export declare const NORMAL_LINE: Record>>; /** * The hand-off's fluid headlines, which its pages set as `font: 500 clamp(min, N vw, max)/ratio` * with an em tracking: the Library and Specimen hero (`clamp(56px, 7.2vw, 112px)/.94`, * -.045em) and the component page title (`clamp(40px, 5vw, 64px)/1`, -.04em). `vw` is the * share of the window width. Internal, not re-exported; test/v4-type-scale.test.ts reads * each from the hand-off's pages. */ export interface FluidType { min: number; vw: number; max: number; ratio: number; trackingEm: number; fontWeight: "500"; } export declare const fluidRoles: { readonly hero: { readonly min: 56; readonly vw: 0.072; readonly max: 112; readonly ratio: 0.94; readonly trackingEm: -0.045; readonly fontWeight: "500"; }; readonly pageTitle: { readonly min: 40; readonly vw: 0.05; readonly max: 64; readonly ratio: 1; readonly trackingEm: -0.04; readonly fontWeight: "500"; }; }; /** * A fluid role's type at a window `width` (0 for an unknown window, which gives the * minimum). The size is the clamp to a hundredth of a pixel; the line height is * the size times the ratio to a hundredth of a pixel (Android ceils it in physical pixels) and the * tracking the em value at the size. */ export declare function fluidType(spec: FluidType, width: number): TextStyle; export declare const typeScale: { readonly display: { readonly fontSize: 24; readonly lineHeight: 27; readonly fontWeight: "700"; readonly letterSpacing: -0.48; }; readonly statValue: { readonly fontSize: 18; readonly lineHeight: 20; readonly fontWeight: "800"; readonly letterSpacing: -0.36; }; readonly metricValue: { readonly fontSize: 18; readonly lineHeight: 22; readonly fontWeight: "700"; readonly letterSpacing: -0.18; }; readonly dialogTitle: { readonly fontSize: 17; readonly lineHeight: 22; readonly fontWeight: "700"; readonly letterSpacing: -0.17; }; readonly drawerTitle: { readonly fontSize: 16; readonly lineHeight: 20; readonly fontWeight: "700"; }; readonly title: { readonly fontSize: 15; readonly lineHeight: 20; readonly fontWeight: "700"; }; readonly heading: { readonly fontSize: 14; readonly lineHeight: 19; readonly fontWeight: "700"; }; readonly subheading: { readonly fontSize: 13.5; readonly lineHeight: 18; readonly fontWeight: "700"; }; readonly body: { readonly fontSize: 12.5; readonly lineHeight: 19; readonly fontWeight: "500"; }; readonly bodyStrong: { readonly fontSize: 12.5; readonly lineHeight: 19; readonly fontWeight: "700"; }; readonly label: { readonly fontSize: 12; readonly lineHeight: 17; readonly fontWeight: "600"; }; readonly small: { readonly fontSize: 11.5; readonly lineHeight: 17; readonly fontWeight: "600"; }; readonly caption: { readonly fontSize: 11; readonly lineHeight: 15; readonly fontWeight: "600"; }; readonly micro: { readonly fontSize: 10.5; readonly lineHeight: 14; readonly fontWeight: "600"; }; readonly tag: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "700"; }; readonly eyebrow: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "700"; readonly letterSpacing: 1.6; readonly textTransform: "uppercase"; }; readonly eyebrowLg: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "700"; readonly letterSpacing: 1.8; readonly textTransform: "uppercase"; }; readonly stageLabel: { readonly fontSize: 10; readonly lineHeight: 13; readonly fontWeight: "800"; readonly letterSpacing: 1.6; readonly textTransform: "uppercase"; }; readonly featuredTitle: { readonly fontSize: 20; readonly lineHeight: 25; readonly fontWeight: "700"; readonly letterSpacing: -0.2; }; }; //# sourceMappingURL=type-scale.d.ts.map