Cleans up some type definitions

Author: eluciano11

theme/colors.ts

@@ -1,29 +1,29 @@
-import { ColorStates } from "./constants";
+import { States, Variants } from "./constants";
 import { palette } from "./palette";
 
-interface ColorPalette extends ColorStates {
-  default: string;
-  hover: string;
-  pressed: string;
+interface ColorPalette {
+  [States.default]: string;
+  [States.hover]: string;
+  [States.pressed]: string;
 }
 
-interface BackgroundPalette extends ColorStates {
-  default: string;
-  hover: string;
-  disabled: string;
+interface BackgroundPalette {
+  [States.default]: string;
+  [States.hover]: string;
+  [States.disabled]: string;
 }
 
-interface TextPalette extends ColorStates {
-  primary: string;
-  secondary: string;
-  disabled: string;
-  pressed: string;
+interface TextPalette {
+  [Variants.primary]: string;
+  [Variants.secondary]: string;
+  [States.disabled]: string;
+  [States.pressed]: string;
 }
 
 interface Colors {
   brand: string;
-  primary: ColorPalette;
-  secondary: ColorPalette;
+  [Variants.primary]: ColorPalette;
+  [Variants.secondary]: ColorPalette;
   success: string;
   warning: string;
   danger: string;

theme/constants.ts

@@ -1,7 +1,8 @@
-interface ColorStates {
-  hover?: string;
-  pressed?: string;
-  disabled?: string;
+enum States {
+  default = "default",
+  hover = "hover",
+  pressed = "pressed",
+  disabled = "disabled"
 }
 
 enum Sizes {
@@ -25,4 +26,4 @@ enum Variants {
   inverse = "inverse"
 }
 
-export { ColorStates, Sizes, Headers, Variants };
+export { States, Sizes, Headers, Variants };

theme/index.ts

@@ -1,5 +1,5 @@
-import { Sizes, Variants, Headers } from "./constants";
+import { States, Sizes, Variants, Headers } from "./constants";
 import { palette } from "./palette";
 import { Theme } from "./theme";
 
-export { Theme, Sizes, Variants, Headers, palette };
+export { Theme, States, Sizes, Variants, Headers, palette };

theme/shadows.ts

@@ -1,6 +1,8 @@
+import { States } from "./constants";
+
 interface Shadows {
-  default: string;
-  hover: string;
+  [States.default]: string;
+  [States.hover]: string;
 }
 
 const SHADOW_DEFAULT = "0px 1px 3px rgba(0, 0, 0, 0.07)";

theme/units.ts

@@ -1,4 +1,4 @@
-const space: number[] = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100];
-const radii: number[] = [6];
+const space = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100];
+const radii = [6];
 
 export { space, radii };