types: make theme types more strict

packages/theme/src/theme/index.ts

@@ -1,22 +1,28 @@
 import { getColors, SchemeColors } from "./colorscheme";
-import { getVariants } from "./variants";
+import { variants } from "./variants";
 import { FontConfig, getFontConfig } from "./font";
 import { TransformerFactory, Transformers } from "./transformer";
 import { ThemeConfig } from "./types";
 
 export type Theme = {
   breakpoints: string[];
-  space: number[];
-  sizes: Record<string, string | number>;
-  radii: Record<string, number>;
-  shadows: Record<string, string>;
+  space: number[] & { small?: number };
+  sizes: { full: "100%"; half: "50%" };
+  radii: {
+    none: number;
+    default: number;
+    dialog: number;
+    small: number;
+  };
+  shadows: { menu: string };
   colors: SchemeColors;
   iconSizes: {
     small: number;
     medium: number;
     big: number;
   };
-} & FontConfig;
+} & FontConfig &
+  typeof variants;
 
 class ThemeFactory {
   transform(type: Transformers, theme: any) {
@@ -30,6 +36,8 @@ class ThemeFactory {
       space: [0, 5, 10, 15, 20, 25, 30, 35],
       sizes: { full: "100%", half: "50%" },
       radii: { none: 0, default: 5, dialog: 10, small: 2.5 },
+      iconSizes: { big: 18, medium: 16, small: 14 },
+      colors: getColors(config.theme, config.accent),
       shadows:
         config.theme === "dark"
           ? {
@@ -38,12 +46,10 @@ class ThemeFactory {
           : {
               menu: "0px 0px 10px 0px #00000022",
             },
-      iconSizes: { big: 18, medium: 16, small: 14 },
-      colors: getColors(config.theme, config.accent),
       ...getFontConfig(config.scale),
-      ...getVariants(),
+      ...variants,
     };
-    (theme.space as any).small = 3;
+    theme.space.small = 3;
     return theme;
   }
 }

packages/theme/src/theme/variants/button.ts

@@ -1,21 +1,4 @@
 import { SxStyleProp } from "rebass";
-import { Variants } from ".";
-
-export function getButtonVariants(): Variants {
-  return {
-    default: defaultVariant,
-    primary,
-    secondary,
-    tertiary,
-    list,
-    anchor,
-    tool,
-    icon,
-    dialog,
-    statusitem: statusItem,
-    menuitem: menuItem,
-  };
-}
 
 const defaultVariant: SxStyleProp = {
   bg: "transparent",
@@ -155,3 +138,17 @@ const menuItem: SxStyleProp = {
     backgroundColor: "border",
   },
 };
+
+export const buttonVariants = {
+  default: defaultVariant,
+  primary,
+  secondary,
+  tertiary,
+  list,
+  anchor,
+  tool,
+  icon,
+  dialog,
+  statusitem: statusItem,
+  menuitem: menuItem,
+};

packages/theme/src/theme/variants/flex.ts

@@ -1,9 +1,22 @@
 import { SxStyleProp } from "rebass";
-import { Variants } from ".";
 
 type FlexDirection = "row" | "column";
-export function createFlexVariants(direction: FlexDirection): Variants {
-  const variants: Variants = {
+export type FlexVariants<T extends FlexDirection> = T extends "row"
+  ? {
+      rowCenter: SxStyleProp;
+      rowFill: SxStyleProp;
+      rowCenterFill: SxStyleProp;
+    }
+  : {
+      columnCenter: SxStyleProp;
+      columnFill: SxStyleProp;
+      columnCenterFill: SxStyleProp;
+    };
+
+export function createFlexVariants<T extends FlexDirection>(
+  direction: T
+): FlexVariants<T> {
+  const variants = {
     Center: createCenterVariant(direction),
     Fill: createFillVariant(direction),
     CenterFill: createCenterFillVariant(direction),
@@ -12,7 +25,7 @@ export function createFlexVariants(direction: FlexDirection): Variants {
     Object.entries(variants).map(([key, value]) => {
       return [`${direction}${key}`, value];
     })
-  );
+  ) as FlexVariants<T>;
 }
 
 function createCenterVariant(direction: FlexDirection): SxStyleProp {

packages/theme/src/theme/variants/index.ts

@@ -1,19 +1,14 @@
-import { getButtonVariants } from "./button";
-import { getInputVariants } from "./input";
-import { getTextVariants } from "./text";
+import { buttonVariants } from "./button";
+import { inputVariants } from "./input";
+import { textVariants } from "./text";
 import { createFlexVariants } from "./flex";
-import { SxProps, SxStyleProp } from "rebass";
 
-export function getVariants() {
-  return {
-    buttons: getButtonVariants(),
-    forms: getInputVariants(),
-    text: getTextVariants(),
-    variants: {
-      ...createFlexVariants("row"),
-      ...createFlexVariants("column"),
-    },
-  };
-}
-
-export type Variants = Record<string, SxStyleProp>;
+export const variants = {
+  buttons: buttonVariants,
+  forms: inputVariants,
+  text: textVariants,
+  variants: {
+    ...createFlexVariants("row"),
+    ...createFlexVariants("column"),
+  },
+};

packages/theme/src/theme/variants/input.ts

@@ -1,14 +1,4 @@
-import { InputProps } from "@rebass/forms";
-import { SxProps, SxStyleProp } from "rebass";
-import { Variants } from ".";
-
-export function getInputVariants(): Variants {
-  return {
-    input: defaultVariant,
-    error,
-    clean,
-  };
-}
+import { SxStyleProp } from "rebass";
 
 const defaultVariant: SxStyleProp = {
   borderRadius: "default",
@@ -51,3 +41,9 @@ const error: SxStyleProp = {
     boxShadow: "0px 0px 0px 1px var(--error) inset",
   },
 };
+
+export const inputVariants = {
+  input: defaultVariant,
+  error,
+  clean,
+};

packages/theme/src/theme/variants/text.ts

@@ -1,17 +1,4 @@
 import { SxStyleProp } from "rebass";
-import { Variants } from ".";
-
-export function getTextVariants(): Variants {
-  return {
-    default: defaultVariant,
-    heading,
-    title,
-    subtitle,
-    body,
-    subBody,
-    error,
-  };
-}
 
 const defaultVariant: SxStyleProp = {
   color: "text",
@@ -50,3 +37,13 @@ const error: SxStyleProp = {
   fontSize: "subBody",
   color: "error",
 };
+
+export const textVariants = {
+  default: defaultVariant,
+  heading,
+  title,
+  subtitle,
+  body,
+  subBody,
+  error,
+};