Skip to content

Commit fd8ec49

Browse files
jfuchsjfuchs
committed
better sx typing exploration
1 parent 1e5ac40 commit fd8ec49

File tree

3 files changed

+186
-2
lines changed

3 files changed

+186
-2
lines changed

‎src/__tests__/Theme.types.test.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {SystemStyleObject} from '@styled-system/css'
2+
import {get} from '../constants'
3+
import {SxProp} from '../sx'
4+
import {Theme} from '../ThemeProvider'
5+
6+
export function sandbox(): SxProp {
7+
return {
8+
sx: {
9+
color: 'fg.default'
10+
}
11+
}
12+
}

‎src/sx.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
import css, {SystemStyleObject} from '@styled-system/css'
1+
import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
2+
import {ThemeColorPaths, ThemeShadowPaths} from './theme'
3+
import {ColorProps, ShadowProps} from 'styled-system'
4+
5+
export type BetterCssProperties = {
6+
[K in keyof SystemCssProperties]: K extends keyof ColorProps
7+
? ThemeColorPaths | SystemCssProperties[K]
8+
: K extends keyof ShadowProps
9+
? ThemeShadowPaths | SystemCssProperties[K]
10+
: SystemCssProperties[K]
11+
}
12+
13+
export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
214

315
export interface SxProp {
4-
sx?: SystemStyleObject
16+
sx?: BetterSystemStyleObject
517
}
618

719
const sx = (props: SxProp) => css(props.sx)

‎src/theme.ts

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,163 @@
11
import {theme} from './theme-preval'
22

33
export default theme
4+
5+
export interface Theme {}
6+
7+
export type ThemeColorPaths =
8+
| 'fg.default'
9+
| 'fg.muted'
10+
| 'fg.subtle'
11+
| 'fg.onEmphasis'
12+
| 'canvas.default'
13+
| 'canvas.overlay'
14+
| 'canvas.inset'
15+
| 'canvas.subtle'
16+
| 'border.default'
17+
| 'border.muted'
18+
| 'border.subtle'
19+
| 'neutral.emphasisPlus'
20+
| 'neutral.emphasis'
21+
| 'neutral.muted'
22+
| 'neutral.subtle'
23+
| 'accent.fg'
24+
| 'accent.emphasis'
25+
| 'accent.muted'
26+
| 'accent.subtle'
27+
| 'success.fg'
28+
| 'success.emphasis'
29+
| 'success.muted'
30+
| 'success.subtle'
31+
| 'attention.fg'
32+
| 'attention.emphasis'
33+
| 'attention.muted'
34+
| 'attention.subtle'
35+
| 'severe.fg'
36+
| 'severe.emphasis'
37+
| 'severe.muted'
38+
| 'severe.subtle'
39+
| 'danger.fg'
40+
| 'danger.emphasis'
41+
| 'danger.muted'
42+
| 'danger.subtle'
43+
| 'done.fg'
44+
| 'done.emphasis'
45+
| 'done.muted'
46+
| 'done.subtle'
47+
| 'sponsors.fg'
48+
| 'sponsors.emphasis'
49+
| 'sponsors.muted'
50+
| 'sponsors.subtle'
51+
| 'primer.fg.disabled'
52+
| 'primer.canvas.backdrop'
53+
| 'primer.canvas.sticky'
54+
| 'primer.border.active'
55+
| 'primer.border.contrast'
56+
57+
export type ThemeShadowPaths =
58+
| 'shadow.small'
59+
| 'shadow.medium'
60+
| 'shadow.large'
61+
| 'shadow.extraLarge'
62+
| 'primer.shadow.highlight'
63+
| 'primer.shadow.inset'
64+
| 'primer.shadow.focus'
65+
66+
// typecheck our theme instance:
67+
// theme as Theme
68+
69+
// type ThemeColors = {
70+
// fg: {
71+
// default: 'XXXXXXXXXXX',
72+
// muted: 'XXXXXXXXXXX',
73+
// subtle: 'XXXXXXXXXXX',
74+
// onEmphasis: 'XXXXXXXXXXX'
75+
// },
76+
// canvas: {
77+
// default: 'XXXXXXXXXXX',
78+
// overlay: 'XXXXXXXXXXX',
79+
// inset: 'XXXXXXXXXXX',
80+
// subtle: 'XXXXXXXXXXX'
81+
// },
82+
// border: {
83+
// default: 'XXXXXXXXXXX',
84+
// muted: 'XXXXXXXXXXX',
85+
// subtle: 'XXXXXXXXXXX'
86+
// },
87+
// shadow: {
88+
// small: 'XXXXXXXXXXX',
89+
// medium: 'XXXXXXXXXXX',
90+
// large: 'XXXXXXXXXXX',
91+
// extraLarge: 'XXXXXXXXXXX'
92+
// },
93+
94+
// // Roles
95+
// neutral: {
96+
// emphasisPlus: string,
97+
// emphasis: string,
98+
// muted: string,
99+
// subtle: string
100+
// },
101+
// accent: {
102+
// fg: string,
103+
// emphasis: string,
104+
// muted: string,
105+
// subtle: string
106+
// },
107+
// success: {
108+
// fg: string,
109+
// emphasis: string,
110+
// muted: string,
111+
// subtle: string
112+
// },
113+
// attention: {
114+
// fg: string,
115+
// emphasis: string,
116+
// muted: string,
117+
// subtle: string
118+
// },
119+
// severe: {
120+
// fg: string,
121+
// emphasis: string,
122+
// muted: string,
123+
// subtle: string
124+
// },
125+
// danger: {
126+
// fg: string,
127+
// emphasis: string,
128+
// muted: string,
129+
// subtle: string
130+
// },
131+
// done: {
132+
// fg: string,
133+
// emphasis: string,
134+
// muted: string,
135+
// subtle: string
136+
// },
137+
// sponsors: {
138+
// fg: string,
139+
// emphasis: string,
140+
// muted: string,
141+
// subtle: string
142+
// },
143+
144+
// // Only meant for Primer components
145+
// primer: {
146+
// fg: {
147+
// disabled: string
148+
// },
149+
// canvas: {
150+
// backdrop: string,
151+
// sticky: string
152+
// },
153+
// border: {
154+
// active: string,
155+
// contrast: string
156+
// },
157+
// shadow: {
158+
// highlight: string,
159+
// inset: string,
160+
// focus: string
161+
// }
162+
// }
163+
// }

0 commit comments

Comments
 (0)