types are working

examples/styled-components/index.tsx

@@ -17,25 +17,9 @@ import {
   shouldForwardProp,
 } from 'system-props';
 import styled, { ThemeProvider } from 'styled-components';
+import { theme } from './theme';
 import * as CSS from 'csstype';
 
-const theme = {
-  breakpoints: ['42em', '52em', '60em'],
-  space: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '28px', '32px'],
-  colors: {
-    gray: {
-      10: '#333',
-      20: '#666',
-      30: '#999',
-    },
-    blue: {
-      10: 'skyblue',
-      20: 'teal',
-      30: 'blue',
-    },
-  },
-} as const;
-
 const system = createSystem();
 
 interface BoxProps extends SystemProps, PseudoProps<SystemProps> {
@@ -65,7 +49,7 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <Box
         color="$blue.10"
-        bg={(t: typeof theme) => t.colors.gray[10]}
+        bg={(theme) => theme.colors.yellow}
         padding="$2 $8"
         border="1px solid rgba(0, 0, 0, 0.1)"
         mb="$6"

examples/styled-components/theme.ts

@@ -0,0 +1,49 @@
+import { Theme, StrictTheme } from 'system-props';
+
+interface AppTheme extends StrictTheme {
+  colors: {
+    gray10: string;
+    gray20: string;
+    gray30: string;
+    blue10: string;
+    blue20: string;
+    blue30: string;
+  };
+  space: {
+    $0: string;
+    $1: string;
+    $3: string;
+    $4: string;
+  };
+  breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+  };
+}
+
+declare module 'system-props' {
+  export interface Theme extends AppTheme {}
+}
+
+export const theme: Theme = {
+  colors: {
+    gray10: '#333',
+    gray20: '#666',
+    gray30: '#999',
+    blue10: 'skyblue',
+    blue20: 'teal',
+    blue30: 'blue',
+  },
+  space: {
+    $0: '0px',
+    $1: '4px',
+    $3: '8px',
+    $4: '12px',
+  },
+  breakpoints: {
+    small: '42em',
+    medium: '52em',
+    large: '60em',
+  },
+};

src/core/createSystem.ts

@@ -41,6 +41,7 @@ export const createParser = (
   const parse: Parser = (props: Props) => {
     let styles: Record<string, any> = {};
     let shouldSort = false;
+    // @ts-ignore
     const isCacheDisabled = Boolean(props.theme?.disableSystemPropsCache);
 
     const parseEntry = (obj: SomeObject, key: string) => {

src/index.ts

@@ -1,8 +1,14 @@
 export { betterGet as get } from './core/get';
 export { createSystem } from './core/createSystem';
-export { ResponsiveProp } from '@/types';
 
 export * from './props';
 export * from './pseudos';
 export * from './propNames';
 export * from './shouldForwardProp';
+export {
+  ResponsiveProp,
+  Theme,
+  LooseTheme,
+  StrictTheme,
+  ColorProps,
+} from './types';

src/more-types.ts

@@ -1,47 +1,82 @@
 import { Theme, ResponsiveProp } from './types';
 import { ColorProps } from './props/color';
 import { SpaceProps } from './props/space';
+import { LayoutProps } from './props/layout';
+
+interface LooseTheme {
+  [x: string]: any;
+}
+
+// interface LocalTheme extends LooseTheme {
+//   colors: {
+//     blue100: string;
+//     blue200: string;
+//     blue300: string;
+//     blue400: string;
+//     blue500: string;
+//     blue600: string;
+//     blue700: string;
+//     blue800: string;
+//     blue900: string;
+//     reds: [string, string, string];
+//   };
+//   space: [number, number, number, number];
+// }
 
 interface LocalTheme extends Theme {
   colors: {
-    blue100: 'blue';
-    blue200: 'blue';
-    blue300: 'blue';
-    blue400: 'blue';
-    blue500: 'blue';
-    blue600: 'blue';
-    blue700: 'blue';
-    blue800: 'blue';
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    red100: string;
+    red200: string;
   };
   space: {
-    250: '2px';
-    500: '4px';
-    1000: '8px';
-  };
-  breakpoints: {
-    320: '320px';
-    640: '640px';
+    0: string;
+    1: string;
+    2: string;
   };
 }
 
+// const theme: LocalTheme = {
+//   colors: {
+//     blue100: 'blue',
+//     blue200: 'blue',
+//     blue300: 'blue',
+//     blue400: 'blue',
+//     blue500: 'blue',
+//     blue600: 'blue',
+//     blue700: 'blue',
+//     blue800: 'blue',
+//     blue900: 'blue',
+//     reds: ['one', 'two', 'three'],
+//   },
+//   space: [0, 4, 8, 12],
+// };
+
 type NewColorProps = {
-  [K in keyof ColorProps]?:
-    | ResponsiveProp<keyof LocalTheme['colors']>
-    | ColorProps[K];
+  [K in keyof ColorProps]?: LocalTheme extends Theme
+    ? ResponsiveProp<keyof LocalTheme['colors']>
+    : ColorProps[K];
 };
 
 type NewSpaceProps = {
-  [K in keyof SpaceProps]?: SpaceProps[K] | keyof LocalTheme['space'];
+  [K in keyof SpaceProps]?: LocalTheme extends Theme
+    ? ResponsiveProp<keyof LocalTheme['space']>
+    : SpaceProps[K];
 };
 
 interface Props extends NewSpaceProps, NewColorProps {}
 
-const foo: Props = {
-  px: (theme) => theme.colors.blue100,
-  backgroundColor: {
-    320: 'blue100',
-    640: 'blue200',
-  },
-  bg: ['blue100', 'blue200', 'blue900'],
-  mx: 1000,
+const bar: Props = {
+  bg: 'red100',
+  color: 'red100',
+  fill: 'blue100',
+  margin: 1,
 };

src/props/color/index.ts

@@ -1,4 +1,10 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
+import {
+  PropConfigCollection,
+  ResponsiveProp,
+  Theme,
+  ResponsiveObjectValue,
+  ResponsiveArrayValue,
+} from '@/types';
 import * as CSS from 'csstype';
 
 const config: PropConfigCollection = {
@@ -22,13 +28,25 @@ const config: PropConfigCollection = {
 };
 config.bg = config.backgroundColor;
 
-export interface ColorProps {
-  color?: ResponsiveProp<CSS.Property.Color>;
-  backgroundColor?: ResponsiveProp<CSS.Property.Color>;
-  bg?: ResponsiveProp<CSS.Property.Color>;
-  fill?: ResponsiveProp<CSS.Property.Color>;
-  stroke?: ResponsiveProp<CSS.Property.Color>;
-  opacity?: ResponsiveProp<CSS.Property.Opacity>;
-}
+type Colors<T extends Theme> = keyof T['colors'];
+
+export type BaseColorProps = {
+  color?: CSS.Property.Color;
+  backgroundColor?: CSS.Property.BackgroundColor;
+  bg?: CSS.Property.BackgroundColor;
+  fill?: CSS.Property.Fill;
+  stroke?: CSS.Property.Stroke;
+};
+
+// export type BaseColorProps<T extends Theme> = {
+//   [K in keyof One]?: ResponsiveProp<keyof T['colors']>;
+//   // [K in keyof CoreColorProps]?: Theme extends StrictTheme
+//   //   ? keyof Theme['colors']
+//   //   : CoreColorProps[K];
+// } & { opacity?: ResponsiveProp<CSS.Property.Opacity> };
+
+// export interface BaseColorProps {
+//   color?: keyof Theme['colors'];
+// }
 
 export const color = config;

src/props/index.ts

@@ -1,6 +1,5 @@
 import { BackgroundProps } from './background';
 import { BorderProps } from './border';
-import { ColorProps } from './color';
 import { FlexboxProps } from './flexbox';
 import { GridProps } from './grid';
 import { LayoutProps } from './layout';
@@ -24,7 +23,6 @@ export { layout as styledSystemLayout } from './styled-system-layout';
 export interface SystemProps
   extends BackgroundProps,
     BorderProps,
-    ColorProps,
     FlexboxProps,
     GridProps,
     LayoutProps,

src/props/space/index.ts

@@ -1,5 +1,11 @@
 import { betterGet } from '@/core/get';
-import { PropConfigCollection, Transform, ResponsiveProp } from '@/types';
+import {
+  PropConfigCollection,
+  Transform,
+  ResponsiveProp,
+  Theme,
+  StrictTheme,
+} from '@/types';
 import { positiveOrNegative } from '../positiveOrNegative';
 import { Property } from 'csstype';
 
@@ -217,4 +223,17 @@ export interface MarginProps {
   my?: ResponsiveProp<Property.MarginTop>;
 }
 
-export interface SpaceProps extends MarginProps, PaddingProps {}
+// export interface SpaceProps extends MarginProps, PaddingProps {}
+
+type MorePadding = {
+  [K in keyof PaddingProps]?: Theme extends StrictTheme
+    ? ResponsiveProp<keyof Theme['space']>
+    : PaddingProps[K];
+};
+type MoreMargin = {
+  [K in keyof MarginProps]?: Theme extends StrictTheme
+    ? ResponsiveProp<keyof Theme['space']>
+    : MarginProps[K];
+};
+
+export type SpaceProps = MorePadding & MoreMargin;