diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index 29c35d6..eb797d1 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -7,11 +7,11 @@ import {
   inputWrapperClass,
   iconWrapper,
   leftIconWrapper,
-  rightIconWrapper
+  rightIconWrapper,
+  lightColors
 } from "@hover-design/core";
 import { Flex } from "../Flex";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { lightColors } from "../../styles/tokens";
 
 const Input: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   {
@@ -50,7 +50,7 @@ const Input: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
           }),
           ...style
         }}
-        className={`${inputClass} ${inputThemeClass} ${className || ""}`}
+        className={`${inputClass} ${inputThemeClass} ${className ?? ""}`}
         {...props}
       />
       {Icon && iconPosition === "right" && (
diff --git a/packages/react/src/components/Input/input.types.ts b/packages/react/src/components/Input/input.types.ts
index c65baae..3822a14 100644
--- a/packages/react/src/components/Input/input.types.ts
+++ b/packages/react/src/components/Input/input.types.ts
@@ -7,15 +7,3 @@ export interface InputProps
   iconPosition?: "left" | "right";
   Icon?: React.ReactNode;
 }
-export type IInputTheme = [
-  string,
-  {
-    borderColor: string;
-    padding: {
-      top: string;
-      right: string;
-      bottom: string;
-      left: string;
-    };
-  }
-];
diff --git a/packages/react/src/styles/tokens/breakpoints.ts b/packages/react/src/styles/tokens/breakpoints.ts
deleted file mode 100644
index 14147e9..0000000
--- a/packages/react/src/styles/tokens/breakpoints.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const breakpoints = {
-  tablet: "screen and (min-width: 600px)",
-  laptop: "screen and (min-width: 768px)"
-};
diff --git a/packages/react/src/styles/tokens/colors.ts b/packages/react/src/styles/tokens/colors.ts
deleted file mode 100644
index 6fb143e..0000000
--- a/packages/react/src/styles/tokens/colors.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Tokens } from "@vanilla-extract/css/dist/declarations/src/types";
-
-export const lightColors: IThemeColors = {
-  brand: {
-    100: "hsla(51,10%,91%,1)",
-    200: "hsla(51,33%,91%,1)",
-    300: "hsla(51,76%,91%,1)",
-    400: "hsla(213, 84%, 19%, 1)"
-  },
-  typography: {
-    200: "hsla(0, 0%, 25%,1)",
-    500: "hsla(0, 0%, 10%,1)",
-    900: "hsla(0, 0%, 0%,1)"
-  },
-  success: "hsla(145, 63%, 42%, 1)",
-  warning: "hsla(45, 74%, 56%, 1)",
-  error: "hsla(0, 79%, 63%, 1)"
-};
-
-export interface IThemeColors {
-  [key: string]: string | Tokens;
-  brand: {
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-  };
-  typography: {
-    200: string;
-    500: string;
-    900: string;
-  };
-  success: string;
-  warning: string;
-  error: string;
-}
diff --git a/packages/react/src/styles/tokens/index.ts b/packages/react/src/styles/tokens/index.ts
deleted file mode 100644
index 2e39217..0000000
--- a/packages/react/src/styles/tokens/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./breakpoints";
-export * from "./colors";
-export * from "./typography";
diff --git a/packages/react/src/styles/tokens/typography.ts b/packages/react/src/styles/tokens/typography.ts
deleted file mode 100644
index 97d6e37..0000000
--- a/packages/react/src/styles/tokens/typography.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { modularScale } from "polished";
-
-const baseFontSizeInPx = 16;
-const fontEnlargementScale = 1.3;
-const createScale = (ratio: number, base: number) => (steps: number) =>
-  `${modularScale(steps, base, ratio)}px`;
-
-const fontSizeScale = createScale(fontEnlargementScale, baseFontSizeInPx);
-
-export const fontSizeVars = {
-  "100": fontSizeScale(0),
-  "200": fontSizeScale(1),
-  "300": fontSizeScale(2),
-  "400": fontSizeScale(3),
-  "500": fontSizeScale(4),
-  "600": fontSizeScale(5)
-};
-
-export const fontVars = {
-  primary: "'Poppins', system-ui",
-  secondary: "'Overpass', system-ui"
-};
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 7b99939..8be5d7f 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -19,5 +19,5 @@
     "noEmit": false,
     "jsx": "react-jsx"
   },
-  "include": ["./src"]
+  "include": ["./src", "../core/src/styles/tokens"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59be580..337b0a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -118,6 +118,7 @@ importers:
       '@vanilla-extract/dynamic': ^2.0.2
       '@vanilla-extract/recipes': ^0.2.3
       '@vanilla-extract/sprinkles': ^1.3.3
+      polished: ^4.1.3
       typescript: ^4.3.2
     dependencies:
       '@vanilla-extract/css': 1.11.0
@@ -125,6 +126,7 @@ importers:
       '@vanilla-extract/dynamic': 2.0.3
       '@vanilla-extract/recipes': 0.2.5_sj7ql4kjoy7ivqenazaubmmhp4
       '@vanilla-extract/sprinkles': 1.6.0_sj7ql4kjoy7ivqenazaubmmhp4
+      polished: 4.2.2
     devDependencies:
       '@hover-design/eslint-config': link:../eslint-config
       '@types/node': 17.0.45