feat: add color palette to theming

landbot-org · Oct 25, 2022 · 5faeef9 · 5faeef9
1 parent ee68701
commit 5faeef9
Show file tree

Hide file tree

Showing 14 changed files with 191 additions and 279 deletions.
diff --git a/package.json b/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",

diff --git a/src/Theming/colorDefinitions/blue.ts b/src/Theming/colorDefinitions/blue.ts
diff --git a/src/Theming/colorDefinitions/green.ts b/src/Theming/colorDefinitions/green.ts
diff --git a/src/Theming/colorDefinitions/index.ts b/src/Theming/colorDefinitions/index.ts
diff --git a/src/Theming/colorDefinitions/neutrals.ts b/src/Theming/colorDefinitions/neutrals.ts
diff --git a/src/Theming/colorDefinitions/orange.ts b/src/Theming/colorDefinitions/orange.ts
diff --git a/src/Theming/colorDefinitions/pink.ts b/src/Theming/colorDefinitions/pink.ts
diff --git a/src/Theming/colorDefinitions/purple.ts b/src/Theming/colorDefinitions/purple.ts
diff --git a/src/Theming/colorDefinitions/status.ts b/src/Theming/colorDefinitions/status.ts
diff --git a/src/Theming/theme.tsx b/src/Theming/theme.tsx
diff --git a/src/shared/palette.ts b/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',
+};
diff --git a/src/shared/theme.ts b/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',
+    },
+  },
+};