feat: add warning color variable

keeep-app · Feb 17, 2024 · 5dd61d0 · 5dd61d0
1 parent ab4560a
commit 5dd61d0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/apps/web/app/[locale]/(app)/dashboard/[organization]/[list]/import-contacts.tsx b/apps/web/app/[locale]/(app)/dashboard/[organization]/[list]/import-contacts.tsx
@@ -150,8 +150,7 @@ export const ImportContactsModal = ({
                 <p>Drag 'n' drop a .csv file here, or click to select files</p>
               )}
             </div>
-
-            <Alert>
+            <Alert variant="warning">
               <ExclamationTriangleIcon className="h-4 w-4" />
               <AlertTitle>Heads up!</AlertTitle>
               <AlertDescription>

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -28,6 +28,9 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
+    --warning: 38 92% 50%;
+    --warning-foreground: 48 96% 89%;
+
     --border: 220 1% 95%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
@@ -60,6 +63,9 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
 
+    --warning: 48 96% 89%;
+    --warning-foreground: 38 92% 50%;
+
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;

diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
@@ -11,6 +11,8 @@ const alertVariants = cva(
         default: 'bg-background text-foreground',
         destructive:
           'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        warning:
+          'border-warning/50 text-warning dark:border-warning [&>svg]:text-warning',
       },
     },
     defaultVariants: {

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
@@ -53,6 +53,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',