Project Initialization

packages/ui-common/src/theme/colors.ts

@@ -0,0 +1,24 @@
+export const colors = {
+  primary: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    900: '#1e3a8a',
+  },
+  neutral: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    400: '#9ca3af',
+    600: '#4b5563',
+    900: '#111827',
+  },
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#dc2626',
+  info: '#0ea5e9',
+} as const;
+
+export type Colors = typeof colors;

packages/ui-common/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './typography';

packages/ui-common/src/theme/typography.ts

@@ -0,0 +1,28 @@
+export const typography = {
+  fontFamily: {
+    sans: '"Inter", "Segoe UI", sans-serif',
+    mono: '"Fira Code", "Menlo", monospace',
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+} as const;
+
+export type Typography = typeof typography;