Merge pull request #8 from landbot-org/create-theme

Add theming

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "test": "jest",
     "test-storybook": "test-storybook",
-    "lint": "./node_modules/.bin/eslint --ext=.tsx,.ts  src",
+    "lint": "eslint --ext=.tsx,.ts  src",
     "clean": "npx rimraf ./dist",
     "build": "npm run clean && npm run build:prod",
     "build:prod": "rollup -c",

src/shared/palette.ts

@@ -0,0 +1,83 @@
+export const NEUTRAL = {
+  main: '#6D7280',
+  50: '#F9FAFB',
+  100: '#F3F4F6',
+  200: '#E5E7EB',
+  300: '#D2D5DA',
+  400: '#9CA3AF',
+  600: '#4B5563',
+  700: '#374151',
+  800: '#1F2937',
+  900: '#111827',
+};
+
+export const BLUE = {
+  main: '#33405E',
+  50: '#F7FAFF',
+  100: '#F0F5FF',
+  200: '#E0EBFF',
+  300: '#C4CFF4',
+  400: '#AAB5DA',
+  500: '#606C8D',
+  600: '#4B5676',
+  800: '#1D2B47',
+  900: '#051832',
+};
+
+export const PINK = {
+  main: '#D7376B',
+  200: '#FBB0B2',
+  300: '#F28C9A',
+  400: '#E76683',
+  600: '#B82865',
+  700: '#9A1B5E',
+};
+
+export const TEAL = {
+  main: '#4fccc2',
+  200: '#C1EDEA',
+  400: '#95E0DA',
+  600: '#407F8B',
+  700: '#395C72',
+};
+
+export const PURPLE = {
+  main: '#6361f0',
+  200: '#DDDDFF',
+  300: '#C8C8FA',
+  400: '#A1A0F6',
+  600: '#5557C4',
+  700: '#464D98',
+};
+
+export const ORANGE = {
+  main: '#F58B0B',
+  200: '#FCC76B',
+  400: '#F9B96D',
+  600: '#B05305',
+  700: '#8E3C03',
+};
+
+export const SUCCESS = {
+  dark: '#3B730E',
+  main: '#5E981B',
+  light: '#F0FBD2',
+};
+
+export const INFO = {
+  dark: '#3230AC',
+  main: '#6361F0',
+  light: '#E0DFFE',
+};
+
+export const WARNING = {
+  dark: '#B58816',
+  main: '#FCCC2D',
+  light: '#FEF9D40',
+};
+
+export const ERROR = {
+  dark: '#BE0A19',
+  main: '#DD0E0E',
+  light: '#FFC799',
+};

src/shared/theme.ts

@@ -0,0 +1,23 @@
+import { Theme } from './theme.types';
+import { BLUE, ERROR, INFO, NEUTRAL, ORANGE, PINK, PURPLE, SUCCESS, TEAL, WARNING } from './palette';
+
+export const theme: Theme = {
+  base_spacing: 8,
+  palette: {
+    neutral: NEUTRAL,
+    blue: BLUE,
+    pink: PINK,
+    teal: TEAL,
+    purple: PURPLE,
+    orange: ORANGE,
+    success: SUCCESS,
+    info: INFO,
+    warning: WARNING,
+    error: ERROR,
+  },
+  typography: {
+    font: {
+      primary: '\'DM Sans\', sans-serif',
+    },
+  },
+};

src/shared/theme.types.ts

@@ -0,0 +1,84 @@
+export interface Theme {
+  base_spacing: 8;
+  palette: {
+    neutral: {
+      main: string;
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    blue: {
+      main: string;
+      50: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      800: string;
+      900: string;
+    };
+    pink: {
+      main: string;
+      200: string;
+      300: string;
+      400: string;
+      600: string;
+      700: string;
+    };
+    teal: {
+      main: string;
+      200: string;
+      400: string;
+      600: string;
+      700: string;
+    };
+    purple: {
+      main: string;
+      200: string;
+      300: string;
+      400: string;
+      600: string;
+      700: string;
+    };
+    orange: {
+      main: string;
+      200: string;
+      400: string;
+      600: string;
+      700: string;
+    };
+    success: {
+      dark: string;
+      main: string;
+      light: string;
+    };
+    info: {
+      dark: string;
+      main: string;
+      light: string;
+    };
+    warning: {
+      dark: string;
+      main: string;
+      light: string;
+    };
+    error: {
+      dark: string;
+      main: string;
+      light: string;
+    };
+  };
+  typography: {
+    font: {
+      primary: string;
+    };
+  };
+}