Skip to content

Commit 92e8090

Browse files
mxstbrmxstbr
committed
Type theme
1 parent aa7621d commit 92e8090

File tree

4 files changed

+303
-12
lines changed

4 files changed

+303
-12
lines changed

‎packages/core/index.d.ts

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import React from 'react';
2-
export declare const jsx: (type: any, props: any, ...children: any[]) => any;
2+
import { Theme } from './theme';
3+
export declare const jsx: typeof React.createElement;
34
export declare const Context: React.Context<{
4-
__EMOTION_VERSION__: any;
5-
theme: any;
5+
__EMOTION_VERSION__: string;
6+
theme: Theme;
67
}>;
78
export declare const useThemeUI: () => {
8-
__EMOTION_VERSION__: any;
9-
theme: any;
9+
__EMOTION_VERSION__: string;
10+
theme: Theme;
1011
};
1112
export declare const merge: {
1213
(a: any, b: any): unknown;
1314
all(...args: any[]): object;
1415
};
15-
export declare const ThemeProvider: ({ theme, children }: {
16-
theme: any;
16+
export interface ThemeProviderProps {
17+
theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
18+
children?: React.ReactNode;
19+
}
20+
export declare function ThemeProvider({ theme, children }: ThemeProviderProps): React.FunctionComponentElement<{
21+
context: any;
1722
children: any;
18-
}) => any;
23+
}>;

‎packages/core/src/index.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import {
33
ThemeContext as EmotionContext,
44
InterpolationWithTheme,
55
} from '@emotion/core'
6-
import { css, get } from '@theme-ui/css'
6+
import { css } from '@theme-ui/css'
77
import React from 'react'
88
import deepmerge from 'deepmerge'
99
// @ts-ignore
1010
import { version as __EMOTION_VERSION__ } from '@emotion/core/package.json'
11+
import { Theme } from './theme'
1112

1213
const getCSS = props => {
1314
if (!props.sx && !props.css) return undefined
@@ -30,10 +31,13 @@ const parseProps = props => {
3031
return next
3132
}
3233

33-
export const jsx = (type, props, ...children) =>
34+
export const jsx: typeof React.createElement = (type, props, ...children) =>
3435
emotion.apply(undefined, [type, parseProps(props), ...children])
3536

36-
export const Context = React.createContext({
37+
export const Context = React.createContext<{
38+
__EMOTION_VERSION__: string
39+
theme: Theme | null
40+
}>({
3741
__EMOTION_VERSION__,
3842
theme: null,
3943
})
@@ -71,7 +75,12 @@ const BaseProvider = ({ context, children }) =>
7175
})
7276
)
7377

74-
export const ThemeProvider = ({ theme, children }) => {
78+
export interface ThemeProviderProps {
79+
theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
80+
children?: React.ReactNode
81+
}
82+
83+
export function ThemeProvider({ theme, children }: ThemeProviderProps) {
7584
const outer = useThemeUI()
7685

7786
if (process.env.NODE_ENV !== 'production') {

‎packages/core/src/theme.d.ts

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import * as CSS from 'csstype'
2+
import { SystemStyleObject } from '@styled-system/css'
3+
import { Theme as StyledSystemTheme } from 'styled-system'
4+
5+
/**
6+
* The `sx` prop accepts a `SxStyleProp` object and properties that are part of
7+
* the `Theme` will be transformed to their corresponding values. Other valid
8+
* CSS properties are also allowed.
9+
*/
10+
export type SxStyleProp = SystemStyleObject
11+
12+
export interface SxProps {
13+
/**
14+
* The sx prop lets you style elements inline, using values from your
15+
* theme. To use the sx prop, add the custom pragma as a comment to the
16+
* top of your module and import the jsx function.
17+
*
18+
* ```ts
19+
* // @jsx jsx
20+
*
21+
* import { jsx } from 'theme-ui'
22+
* ```
23+
*/
24+
sx?: SxStyleProp
25+
}
26+
27+
export interface IntrinsicSxElements {
28+
p: JSX.IntrinsicElements['p'] & SxProps
29+
b: JSX.IntrinsicElements['b'] & SxProps
30+
i: JSX.IntrinsicElements['i'] & SxProps
31+
a: JSX.IntrinsicElements['a'] & SxProps
32+
h1: JSX.IntrinsicElements['h1'] & SxProps
33+
h2: JSX.IntrinsicElements['h2'] & SxProps
34+
h3: JSX.IntrinsicElements['h3'] & SxProps
35+
h4: JSX.IntrinsicElements['h4'] & SxProps
36+
h5: JSX.IntrinsicElements['h5'] & SxProps
37+
h6: JSX.IntrinsicElements['h6'] & SxProps
38+
img: JSX.IntrinsicElements['img'] & SxProps
39+
pre: JSX.IntrinsicElements['pre'] & SxProps
40+
code: JSX.IntrinsicElements['code'] & SxProps
41+
ol: JSX.IntrinsicElements['ol'] & SxProps
42+
ul: JSX.IntrinsicElements['ul'] & SxProps
43+
li: JSX.IntrinsicElements['li'] & SxProps
44+
blockquote: JSX.IntrinsicElements['blockquote'] & SxProps
45+
hr: JSX.IntrinsicElements['hr'] & SxProps
46+
table: JSX.IntrinsicElements['table'] & SxProps
47+
tr: JSX.IntrinsicElements['tr'] & SxProps
48+
th: JSX.IntrinsicElements['th'] & SxProps
49+
td: JSX.IntrinsicElements['td'] & SxProps
50+
em: JSX.IntrinsicElements['em'] & SxProps
51+
strong: JSX.IntrinsicElements['strong'] & SxProps
52+
div: JSX.IntrinsicElements['div'] & SxProps
53+
delete: JSX.IntrinsicElements['div'] & SxProps
54+
inlineCode: JSX.IntrinsicElements['div'] & SxProps
55+
thematicBreak: JSX.IntrinsicElements['div'] & SxProps
56+
root: JSX.IntrinsicElements['div'] & SxProps
57+
}
58+
type ObjectOrArray<T> = T[] | { [K: string]: T | ObjectOrArray<T> }
59+
type StyledTags = keyof IntrinsicSxElements
60+
61+
/**
62+
* To use Theme UI color modes, color scales should include at least a text
63+
* and background color. These values are used in the ColorMode component to
64+
* set body foreground and background colors. Color modes should be defined as
65+
* nested objects within a theme.colors.modes object. Each key in this object
66+
* should correspond to a color mode name, where the name can be anything, but
67+
* typically light and dark are used for applications with a dark mode. The
68+
* initialColorModeName key is required to enable color modes and will be used as
69+
* the name for the root color palette.
70+
*/
71+
export type ColorMode = {
72+
[k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
73+
} & {
74+
/**
75+
* Body background color
76+
*/
77+
background: CSS.ColorProperty
78+
79+
/**
80+
* Body foreground color
81+
*/
82+
text: CSS.ColorProperty
83+
84+
/**
85+
* Primary brand color for links, buttons, etc.
86+
*/
87+
primary?: CSS.ColorProperty
88+
89+
/**
90+
* A secondary brand color for alternative styling
91+
*/
92+
secondary?: CSS.ColorProperty
93+
94+
/**
95+
* A faint color for backgrounds, borders, and accents that do not require
96+
* high contrast with the background color
97+
*/
98+
muted?: CSS.ColorProperty
99+
100+
/**
101+
* A contrast color for emphasizing UI
102+
*/
103+
accent?: CSS.ColorProperty
104+
}
105+
106+
export interface Theme extends Omit<StyledSystemTheme, 'colors'> {
107+
/**
108+
* Enable/disable custom CSS properties/variables if lower browser
109+
* support is required (for eg. IE 11).
110+
*
111+
* References: https://theme-ui.com/color-modes/#turn-off-custom-properties
112+
*/
113+
useCustomProperties?: boolean
114+
115+
/**
116+
* Provide a value here to enable color modes
117+
*/
118+
initialColorModeName?: string
119+
120+
/**
121+
* Define the colors that are available through this theme
122+
*/
123+
colors?: ColorMode & {
124+
/**
125+
* Nested color modes can provide overrides when used in conjunction with
126+
* `Theme.initialColorModeName and `useColorMode()`
127+
*/
128+
modes?: {
129+
[k: string]: ColorMode
130+
}
131+
}
132+
133+
/**
134+
* Styles for elements rendered in MDX can be added to the theme.styles
135+
* object. This is the primary, low-level way to control typographic and
136+
* other styles in markdown content. Styles within this object are processed
137+
* with @styled-system/css and have access to base theme values like colors,
138+
* fonts, etc.
139+
*/
140+
styles?: {
141+
[P in StyledTags]?: SystemStyleObject
142+
}
143+
}

‎packages/core/theme.d.ts

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/// <reference types="react" />
2+
import * as CSS from 'csstype';
3+
import { SystemStyleObject } from '@styled-system/css';
4+
import { Theme as StyledSystemTheme } from 'styled-system';
5+
/**
6+
* The `sx` prop accepts a `SxStyleProp` object and properties that are part of
7+
* the `Theme` will be transformed to their corresponding values. Other valid
8+
* CSS properties are also allowed.
9+
*/
10+
export declare type SxStyleProp = SystemStyleObject;
11+
export interface SxProps {
12+
/**
13+
* The sx prop lets you style elements inline, using values from your
14+
* theme. To use the sx prop, add the custom pragma as a comment to the
15+
* top of your module and import the jsx function.
16+
*
17+
* ```ts
18+
* // @jsx jsx
19+
*
20+
* import { jsx } from 'theme-ui'
21+
* ```
22+
*/
23+
sx?: SxStyleProp;
24+
}
25+
export interface IntrinsicSxElements {
26+
p: JSX.IntrinsicElements['p'] & SxProps;
27+
b: JSX.IntrinsicElements['b'] & SxProps;
28+
i: JSX.IntrinsicElements['i'] & SxProps;
29+
a: JSX.IntrinsicElements['a'] & SxProps;
30+
h1: JSX.IntrinsicElements['h1'] & SxProps;
31+
h2: JSX.IntrinsicElements['h2'] & SxProps;
32+
h3: JSX.IntrinsicElements['h3'] & SxProps;
33+
h4: JSX.IntrinsicElements['h4'] & SxProps;
34+
h5: JSX.IntrinsicElements['h5'] & SxProps;
35+
h6: JSX.IntrinsicElements['h6'] & SxProps;
36+
img: JSX.IntrinsicElements['img'] & SxProps;
37+
pre: JSX.IntrinsicElements['pre'] & SxProps;
38+
code: JSX.IntrinsicElements['code'] & SxProps;
39+
ol: JSX.IntrinsicElements['ol'] & SxProps;
40+
ul: JSX.IntrinsicElements['ul'] & SxProps;
41+
li: JSX.IntrinsicElements['li'] & SxProps;
42+
blockquote: JSX.IntrinsicElements['blockquote'] & SxProps;
43+
hr: JSX.IntrinsicElements['hr'] & SxProps;
44+
table: JSX.IntrinsicElements['table'] & SxProps;
45+
tr: JSX.IntrinsicElements['tr'] & SxProps;
46+
th: JSX.IntrinsicElements['th'] & SxProps;
47+
td: JSX.IntrinsicElements['td'] & SxProps;
48+
em: JSX.IntrinsicElements['em'] & SxProps;
49+
strong: JSX.IntrinsicElements['strong'] & SxProps;
50+
div: JSX.IntrinsicElements['div'] & SxProps;
51+
delete: JSX.IntrinsicElements['div'] & SxProps;
52+
inlineCode: JSX.IntrinsicElements['div'] & SxProps;
53+
thematicBreak: JSX.IntrinsicElements['div'] & SxProps;
54+
root: JSX.IntrinsicElements['div'] & SxProps;
55+
}
56+
declare type ObjectOrArray<T> = T[] | {
57+
[K: string]: T | ObjectOrArray<T>;
58+
};
59+
declare type StyledTags = keyof IntrinsicSxElements;
60+
/**
61+
* To use Theme UI color modes, color scales should include at least a text
62+
* and background color. These values are used in the ColorMode component to
63+
* set body foreground and background colors. Color modes should be defined as
64+
* nested objects within a theme.colors.modes object. Each key in this object
65+
* should correspond to a color mode name, where the name can be anything, but
66+
* typically light and dark are used for applications with a dark mode. The
67+
* initialColorModeName key is required to enable color modes and will be used as
68+
* the name for the root color palette.
69+
*/
70+
export declare type ColorMode = {
71+
[k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>;
72+
} & {
73+
/**
74+
* Body background color
75+
*/
76+
background: CSS.ColorProperty;
77+
/**
78+
* Body foreground color
79+
*/
80+
text: CSS.ColorProperty;
81+
/**
82+
* Primary brand color for links, buttons, etc.
83+
*/
84+
primary?: CSS.ColorProperty;
85+
/**
86+
* A secondary brand color for alternative styling
87+
*/
88+
secondary?: CSS.ColorProperty;
89+
/**
90+
* A faint color for backgrounds, borders, and accents that do not require
91+
* high contrast with the background color
92+
*/
93+
muted?: CSS.ColorProperty;
94+
/**
95+
* A contrast color for emphasizing UI
96+
*/
97+
accent?: CSS.ColorProperty;
98+
};
99+
export interface Theme extends Omit<StyledSystemTheme, 'colors'> {
100+
/**
101+
* Enable/disable custom CSS properties/variables if lower browser
102+
* support is required (for eg. IE 11).
103+
*
104+
* References: https://theme-ui.com/color-modes/#turn-off-custom-properties
105+
*/
106+
useCustomProperties?: boolean;
107+
/**
108+
* Provide a value here to enable color modes
109+
*/
110+
initialColorModeName?: string;
111+
/**
112+
* Define the colors that are available through this theme
113+
*/
114+
colors?: ColorMode & {
115+
/**
116+
* Nested color modes can provide overrides when used in conjunction with
117+
* `Theme.initialColorModeName and `useColorMode()`
118+
*/
119+
modes?: {
120+
[k: string]: ColorMode;
121+
};
122+
};
123+
/**
124+
* Styles for elements rendered in MDX can be added to the theme.styles
125+
* object. This is the primary, low-level way to control typographic and
126+
* other styles in markdown content. Styles within this object are processed
127+
* with @styled-system/css and have access to base theme values like colors,
128+
* fonts, etc.
129+
*/
130+
styles?: {
131+
[P in StyledTags]?: SystemStyleObject;
132+
};
133+
}
134+
export {};

0 commit comments

Comments
 (0)