Design improvements

resources/css/app.css

@@ -42,6 +42,9 @@ @theme inline {
     --color-success: var(--success);
     --color-success-foreground: var(--success-foreground);
 
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -136,6 +139,8 @@ :root {
     --destructive-foreground: hsl(0 0% 98%);
     --success: var(--color-lime-400);
     --success-foreground: var(--color-foreground);
+    --warning: var(--color-amber-300);
+    --warning-foreground: var(--color-amber-900);
     --border: hsl(0 0% 92.8%);
     --input: var(--color-zinc-100);
     --ring: hsl(0 0% 3.9%);
@@ -158,7 +163,7 @@ :root {
     --status-draft: var(--color-gray-100);
     --status-sent: var(--color-sky-400);
     --status-paid: var(--color-lime-500);
-    --status-due: var(--color-amber-300);
+    --status-due: var(--color-warning);
     --status-reminded: var(--color-destructive);
     --scrollbar-thumb: --alpha(black / 20%);
     --scrollbar-track: transparent;
@@ -168,22 +173,24 @@ .dark {
     --background: var(--color-neutral-800);
     --foreground: var(--color-neutral-300);
     --card: var(--color-neutral-800);
-    --card-foreground: hsl(0 0% 98%);
+    --card-foreground: var(--color-neutral-300);
     /* --popover: hsl(0 0% 3.9%); */
     --popover: var(--color-neutral-900);
-    --popover-foreground: hsl(0 0% 98%);
+    --popover-foreground: var(--color-neutral-300);
     --primary: var(--color-orange-300);
     --primary-foreground: var(--color-orange-400);
     --secondary: hsl(0 0% 14.9%);
-    --secondary-foreground: hsl(0 0% 98%);
+    --secondary-foreground: var(--color-neutral-300);
     --muted: var(--color-neutral-700);
-    --muted-foreground: var(--color-neutral-400);
+    --muted-foreground: var(--color-neutral-500);
     --accent: oklch(25% 0 0);
-    --accent-foreground: hsl(0 0% 98%);
+    --accent-foreground: var(--color-neutral-300);
     --destructive: var(--color-red-600);
     --destructive-foreground: var(--color-red-200);
     --success: var(--color-lime-900);
     --success-foreground: var(--color-lime-400);
+    --warning: var(--color-amber-900);
+    --warning-foreground: var(--color-amber-400);
     --border: var(--color-neutral-700);
     --input: var(--color-neutral-700);
     --ring: var(--color-neutral-500);
@@ -205,7 +212,7 @@ .dark {
     --status-draft: var(--color-zinc-500);
     --status-sent: var(--color-sky-700);
     --status-paid: var(--color-lime-700);
-    --status-due: var(--color-amber-900);
+    --status-due: var(--color-warning);
     --status-reminded: var(--color-destructive-foreground);
     --scrollbar-thumb: --alpha(white / 35%);
 }