-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
MantineTheme.ts
119 lines (106 loc) · 3.89 KB
/
MantineTheme.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import type { CSSProperties } from 'react';
import type { MantineSizes, MantineSize, MantineNumberSize } from './MantineSize';
import type { DeepPartial } from './DeepPartial';
import type { MantineThemeColors } from './MantineColor';
import type { MantineGradient } from './MantineGradient';
import type { VariantInput, VariantOutput } from '../functions/fns/variant/variant';
import type { ColorScheme } from './ColorScheme';
import type { CSSObject } from '../../tss';
export type LoaderType = 'bars' | 'oval' | 'dots';
export type MantineThemeOther = Record<string, any>;
export type MantineThemeComponents = Record<string, ThemeComponent>;
export interface HeadingStyle {
fontSize: CSSProperties['fontSize'];
fontWeight: CSSProperties['fontWeight'];
lineHeight: CSSProperties['lineHeight'];
}
type Shade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
export interface MantinePrimaryShade {
light: Shade;
dark: Shade;
}
interface MantineFocusRingStyles {
styles(theme: MantineThemeBase): CSSObject;
resetStyles(theme: MantineThemeBase): CSSObject;
inputStyles(theme: MantineThemeBase): CSSObject;
}
interface MantineThemeFunctions {
fontStyles(): any;
focusStyles(selector?: string): any;
cover(offset?: number | string): any;
themeColor(
color: string,
shade?: number,
primaryFallback?: boolean,
useSplittedShade?: boolean
): string;
rgba(color: string, alpha: number): string;
size(props: { size: string | number; sizes: Record<string, any> }): any;
linearGradient(deg: number, ...colors: string[]): string;
radialGradient(...colors: string[]): string;
gradient(gradient?: MantineGradient): string;
smallerThan(breakpoint: MantineNumberSize): string;
largerThan(breakpoint: MantineNumberSize): string;
lighten(color: string, alpha: number): string;
darken(color: string, alpha: number): string;
radius(size?: MantineNumberSize | (string & {})): string | number;
variant(payload: VariantInput): VariantOutput;
primaryShade(colorScheme?: ColorScheme): Shade;
hover(hoverStyle: CSSObject): any;
primaryColor(colorScheme?: ColorScheme): string;
placeholderStyles(): any;
}
export interface MantineTheme {
dir: 'ltr' | 'rtl';
primaryShade: Shade | MantinePrimaryShade;
focusRing: 'auto' | 'always' | 'never';
defaultRadius: MantineNumberSize | (string & {});
loader: LoaderType;
dateFormat: string;
colorScheme: ColorScheme;
white: string;
black: string;
colors: MantineThemeColors;
fontFamily: CSSProperties['fontFamily'];
lineHeight: CSSProperties['lineHeight'];
transitionTimingFunction: CSSProperties['transitionTimingFunction'];
fontFamilyMonospace: CSSProperties['fontFamily'];
primaryColor: keyof MantineThemeColors;
respectReducedMotion: boolean;
cursorType: 'default' | 'pointer';
defaultGradient: MantineGradient;
fontSizes: MantineSizes;
radius: MantineSizes;
spacing: MantineSizes;
breakpoints: MantineSizes;
shadows: Record<MantineSize, string>;
headings: {
fontFamily: CSSProperties['fontFamily'];
fontWeight: CSSProperties['fontWeight'];
sizes: {
h1: HeadingStyle;
h2: HeadingStyle;
h3: HeadingStyle;
h4: HeadingStyle;
h5: HeadingStyle;
h6: HeadingStyle;
};
};
fn: MantineThemeFunctions;
other: MantineThemeOther;
activeStyles: CSSObject;
datesLocale: string;
components: MantineThemeComponents;
globalStyles: (theme: MantineTheme) => CSSObject;
focusRingStyles: MantineFocusRingStyles;
}
interface ThemeComponent {
defaultProps?: Record<string, any> | ((theme: MantineTheme) => Record<string, any>);
classNames?: Record<string, string>;
styles?:
| Record<string, CSSObject>
| ((theme: MantineTheme, params: any) => Record<string, CSSObject>);
}
export type MantineThemeBase = Omit<MantineTheme, 'fn'>;
export type MantineThemeOverride = DeepPartial<Omit<MantineThemeBase, 'other' | 'components'>> &
Partial<Pick<MantineThemeBase, 'other' | 'components'>>;