From 37e40bccee3d6b11c468648fb7d10bbc55d69a62 Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Tue, 12 Nov 2024 11:38:00 -0500
Subject: [PATCH] Restore missing new project color tokens (#774)

---
 .../ProjectsTab/Create/ChooseMethod.tsx       |  4 +-
 .../src/routes/projects/ProjectsTab/index.tsx |  2 +-
 packages/ui/tailwind.config.ts                | 38 +++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/studio/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx b/apps/studio/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx
index c58dc1373..7590ae5e2 100644
--- a/apps/studio/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx
+++ b/apps/studio/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx
@@ -1,6 +1,6 @@
-import { Icons } from '@onlook/ui/icons';
-import { Card } from '@onlook/ui/card';
 import { CreateMethod } from '@/routes/projects/helpers';
+import { Card } from '@onlook/ui/card';
+import { Icons } from '@onlook/ui/icons';
 
 export const ChooseMethod = ({
     setCreateMethod,
diff --git a/apps/studio/src/routes/projects/ProjectsTab/index.tsx b/apps/studio/src/routes/projects/ProjectsTab/index.tsx
index be7bc82a5..a81d81c6d 100644
--- a/apps/studio/src/routes/projects/ProjectsTab/index.tsx
+++ b/apps/studio/src/routes/projects/ProjectsTab/index.tsx
@@ -1,6 +1,6 @@
 import { useProjectsManager } from '@/components/Context';
-import { observer } from 'mobx-react-lite';
 import type { CreateMethod } from '@/routes/projects/helpers';
+import { observer } from 'mobx-react-lite';
 import { ChooseMethod } from './Create/ChooseMethod';
 import SelectProject from './Select';
 
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index f6fa4eb4a..17e33f3c6 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -83,6 +83,44 @@ const config = {
                     DEFAULT: 'hsl(var(--accent))',
                     foreground: 'hsl(var(--accent-foreground))',
                 },
+                np: {
+                    primary: {
+                        card: {
+                            background: {
+                                DEFAULT: 'var(--np-primary-card-background)',
+                                hover: 'var(--np-primary-card-background-hover)',
+                            },
+                            border: {
+                                DEFAULT: 'var(--np-primary-card-border)',
+                                hover: 'var(--np-primary-card-border-hover)',
+                            },
+                            text: 'var(--np-primary-card-text)',
+                            subtext: 'var(--np-primary-card-subtext)',
+                        },
+                        icon: {
+                            background: 'var(--np-primary-icon-background)',
+                            shape: 'var(--np-primary-icon-shape)',
+                        },
+                    },
+                    secondary: {
+                        card: {
+                            background: {
+                                DEFAULT: 'var(--np-secondary-card-background)',
+                                hover: 'var(--np-secondary-card-background-hover)',
+                            },
+                            border: {
+                                DEFAULT: 'var(--np-secondary-card-border)',
+                                hover: 'var(--np-secondary-card-border-hover)',
+                            },
+                            text: 'var(--np-secondary-card-text)',
+                            subtext: 'var(--np-secondary-card-subtext)',
+                        },
+                        icon: {
+                            background: 'var(--np-secondary-icon-background)',
+                            shape: 'var(--np-secondary-icon-shape)',
+                        },
+                    },
+                },
                 input: 'hsl(var(--input))',
                 ring: 'hsl(var(--ring))',
                 ...colors,