refactor: fixes tokens and input component

packages/core/package.json

@@ -37,7 +37,8 @@
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.3",
-    "@vanilla-extract/sprinkles": "^1.3.3"
+    "@vanilla-extract/sprinkles": "^1.3.3",
+    "polished": "^4.1.3"
   },
   "devDependencies": {
     "@hover-design/eslint-config": "*",

packages/core/src/components/Input/index.ts

@@ -1 +1,2 @@
-export * from './input.styles.css';
+export * from "./input.styles.css";
+export * from "./input.styles.types";

packages/core/src/components/Input/input.styles.css.ts

@@ -1,7 +1,7 @@
 import { createTheme, style } from "@vanilla-extract/css";
 
 import { lightColors } from "../../styles/tokens";
-import { IInputTheme } from "./input.types";
+import { IInputTheme } from "./input.styles.types";
 
 export const inputWrapperClass = style({
   position: "relative",

packages/core/src/components/Input/input.styles.types.ts

@@ -0,0 +1,12 @@
+export type IInputTheme = [
+  string,
+  {
+    borderColor: string;
+    padding: {
+      top: string;
+      right: string;
+      bottom: string;
+      left: string;
+    };
+  }
+];

packages/core/src/index.ts

@@ -28,3 +28,5 @@ export * from "./components/TextArea";
 export * from "./components/Tooltip";
 export * from "./components/UnstyledButton";
 export * from "./components/reset";
+
+export * from "./styles/tokens";

packages/core/src/styles/tokens/breakpoints.ts

@@ -0,0 +1,4 @@
+export const breakpoints = {
+  tablet: "screen and (min-width: 600px)",
+  laptop: "screen and (min-width: 768px)"
+};

packages/core/src/styles/tokens/colors.ts

@@ -0,0 +1,36 @@
+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;
+}

packages/core/src/styles/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from "./breakpoints";
+export * from "./colors";
+export * from "./typography";

packages/core/src/styles/tokens/typography.ts

@@ -0,0 +1,22 @@
+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"
+};