UNPKG

2.46 kBTypeScriptView Raw
1import * as React from 'react';
2import * as CSS from 'csstype';
3import { Palette } from './createPalette';
4
5export type Variant =
6 | 'h1'
7 | 'h2'
8 | 'h3'
9 | 'h4'
10 | 'h5'
11 | 'h6'
12 | 'subtitle1'
13 | 'subtitle2'
14 | 'body1'
15 | 'body2'
16 | 'caption'
17 | 'button'
18 | 'overline';
19
20export interface FontStyle {
21 fontFamily: React.CSSProperties['fontFamily'];
22 fontSize: number;
23 fontWeightLight: React.CSSProperties['fontWeight'];
24 fontWeightRegular: React.CSSProperties['fontWeight'];
25 fontWeightMedium: React.CSSProperties['fontWeight'];
26 fontWeightBold: React.CSSProperties['fontWeight'];
27 htmlFontSize: number;
28}
29
30export type NormalCssProperties = CSS.Properties<number | string>;
31export type Fontface = CSS.AtRule.FontFace & { fallbacks?: CSS.AtRule.FontFace[] };
32
33/**
34 * Allows the user to augment the properties available
35 */
36export interface BaseCSSProperties extends NormalCssProperties {
37 '@font-face'?: Fontface | Fontface[];
38}
39
40export interface CSSProperties extends BaseCSSProperties {
41 // Allow pseudo selectors and media queries
42 // `unknown` is used since TS does not allow assigning an interface without
43 // an index signature to one with an index signature. This is to allow type safe
44 // module augmentation.
45 // Technically we want any key not typed in `BaseCSSProperties` to be of type
46 // `CSSProperties` but this doesn't work. The index signature needs to cover
47 // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
48 // but this would not allow assigning React.CSSProperties to CSSProperties
49 [k: string]: unknown | CSSProperties;
50}
51
52export interface FontStyleOptions extends Partial<FontStyle> {
53 allVariants?: React.CSSProperties;
54}
55
56// TODO: which one should actually be allowed to be subject to module augmentation?
57// current type vs interface decision is kept for historical reasons until we
58// made a decision
59export type TypographyStyle = CSSProperties;
60export interface TypographyStyleOptions extends TypographyStyle {}
61
62export interface TypographyUtils {
63 pxToRem: (px: number) => string;
64}
65
66export interface Typography extends Record<Variant, TypographyStyle>, FontStyle, TypographyUtils {}
67
68export interface TypographyOptions
69 extends Partial<Record<Variant, TypographyStyleOptions> & FontStyleOptions> {}
70
71export default function createTypography(
72 palette: Palette,
73 typography: TypographyOptions | ((palette: Palette) => TypographyOptions),
74): Typography;