style: dark/light theme palette refactor

src/app/dashboard/[projectId]/page.tsx

@@ -46,7 +46,7 @@ export default async function Page({
             height={100}
             src={`https://github.com/${repository.owner.login}.png?size=80`}
             alt={repository.owner.login}
-            className={`mr-2 size-8 bg-gray-300 ${
+            className={`ml-2 size-8 bg-gray-300 ${
               repository.owner.type === "User" ? "rounded-full" : "rounded-md"
             }`}
           />
@@ -59,7 +59,7 @@ export default async function Page({
             projectId={projectId}
             showInPublicProfile={project.showInPublicProfile ?? false}
           />
-          <Badge variant={"outline"}>
+          <Badge variant={"outline"} className="bg-background-elevation-1">
             {repository.private ? "Private" : "Public"}
           </Badge>
         </div>

src/app/globals.css

@@ -4,25 +4,37 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --white: 210 0% 98%;
+    --black: 0 0% 7%;
+    --background: 210 0% 95%;
+    --background-elevation-1: 210 0% 98%;
+    --background-elevation-2: 210 0% 88%;
+    --background-elevation-3: 210 0% 78%;
+    --background-elevation-4: 210 0% 68%;
+    --background-elevation-5: 210 0% 58%;
+    --background-elevation-6: 210 0% 48%;
+    --foreground: 0 0% 7%;
+    --card: 210 0% 98%;
+    --card-foreground: 0 0% 7%;
+    --popover: 210 0% 98%;
+    --popover-foreground: 0 0% 7%;
+    --primary: 217 91% 51%;
+    --primary-foreground: 210 0% 98%;
+    --secondary: 210 0% 98%;
+    --secondary-foreground: 0 0% 7%;
+    --muted: 210 0% 98%;
+    --muted-foreground: 0 0% 7%;
+    --accent: 217 91% 51%;
+    --accent-foreground: 210 0% 98%;
+    --destructive: 356 71% 48%;
+    --destructive-foreground: 210 0% 98%;
+    --warning: 40 100% 30%;
+    --warning-foreground: 210 0% 98%;
+    --confirm: 137 63% 33%;
+    --confirm-foreground: 210 0% 98%;
+    --border: 0 0% 80%;
+    --input: 210 0% 98%;
+    --ring: 217 91% 51%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -32,25 +44,38 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --white: 210 0% 98%;
+    --black: 0 0% 7%;
+    --background: 0 0% 7%;
+    --background-elevation-1: 0 0% 12%;
+    --background-elevation-2: 0 0% 22%;
+    --background-elevation-3: 0 0% 32%;
+    --background-elevation-4: 0 0% 42%;
+    --background-elevation-5: 0 0% 52%;
+    --background-elevation-6: 0 0% 65%;
+    --foreground: 210 0% 98%;
+    --card: 0 0% 12%;
+    --card-foreground: 210 0% 98%;
+    --popover: 0 0% 12%;
+    --popover-foreground: 210 0% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 210 0% 98%;
+    --secondary: 0 0% 22%;
+    --secondary-foreground: 210 0% 98%;
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 27%;
+    --accent: 217 91% 60%;
+    --accent-foreground: 210 0% 98%;
+    --destructive: 2 91% 61%;
+    --destructive-foreground: 0 0% 12%;
+    --warning: 41 72% 48%;
+    --warning-foreground: 210 0% 98%;
+    --confirm: 132 59% 33%;
+    --confirm-foreground: 210 0% 98%;
+    --border: 0 0% 22%;
+    --input: 210 0% 98%;
+    --ring: 217 91% 60%;
+    --radius: 0.5rem;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

src/components/RepoList/FavouriteRepoForm.tsx

@@ -25,7 +25,9 @@ export function FavouriteRepoForm({ projectId: repoId, isFavorite }: Props) {
         value={optimisticIsFavourite ? "true" : "false"}
       />
       <Button size={"icon"} variant={"secondary"}>
-        <Star className={optimisticIsFavourite ? "text-yellow-400" : ""} />
+        <Star
+          className={optimisticIsFavourite ? "fill-warning text-warning" : ""}
+        />
       </Button>
     </form>
   )

src/components/TaskForm/CreateTaskDialog.tsx

@@ -151,7 +151,7 @@ export function CreateTaskDialog({ projectId }: Props) {
   return isDesktop ? (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
+        <Button variant="confirm" size="sm">
           <PlusIcon className="mr-2 size-4" aria-hidden="true" />
           New task
         </Button>
@@ -161,7 +161,7 @@ export function CreateTaskDialog({ projectId }: Props) {
   ) : (
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
-        <Button variant="outline" size="sm">
+        <Button variant="confirm" size="sm">
           <PlusIcon className="mr-2 size-4" aria-hidden="true" />
           New task
         </Button>

src/components/TasksTable/DeleteTaskDialog.tsx

@@ -65,7 +65,7 @@ export function DeleteTasksDialog({
       <Dialog {...props}>
         {showTrigger ? (
           <DialogTrigger asChild>
-            <Button variant="outline" size="sm">
+            <Button variant="destructive" size="sm">
               <TrashIcon className="mr-2 size-4" aria-hidden="true" />
               Delete ({tasks.length})
             </Button>

src/components/TasksTable/TasksTable.tsx

@@ -35,7 +35,7 @@ export function TasksTable({
     {
       label: "Title",
       value: "title",
-      placeholder: "Filter titles...",
+      placeholder: "Search tasks...",
     },
     {
       label: "Status",

src/components/ui/button.tsx

@@ -9,16 +9,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        confirm: "bg-confirm text-confirm-foreground hover:bg-confirm/80",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/80",
         "destructive-link":
           "text-destructive underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        outline: "border bg-background-elevation-1 hover:bg-secondary/80 ",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground border hover:bg-secondary/80",
+        ghost:
+          "text-foreground/50 hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

src/components/ui/card.tsx

@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-background-elevation-6", className)}
     {...props}
   />
 ))

src/components/ui/data-table/data-table-faceted-filter.tsx

@@ -37,7 +37,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
+        <Button variant="outline" className="h-9 border-dashed">
           <PlusCircledIcon className="mr-2 size-4" />
           {title}
           {selectedValues?.size > 0 && (

src/components/ui/data-table/data-table-toolbar.tsx

@@ -59,7 +59,7 @@ export function DataTableToolbar<TData>({
                       .getColumn(String(column.value))
                       ?.setFilterValue(event.target.value)
                   }
-                  className="h-8 w-40 lg:w-64"
+                  className="h-9 w-40 lg:w-64"
                 />
               ),
           )}
@@ -81,7 +81,7 @@ export function DataTableToolbar<TData>({
           <Button
             aria-label="Reset filters"
             variant="ghost"
-            className="h-8 px-2 lg:px-3"
+            className="h-9 px-2 lg:px-3"
             onClick={() => table.resetColumnFilters()}
           >
             Reset
@@ -90,8 +90,8 @@ export function DataTableToolbar<TData>({
         )}
       </div>
       <div className="flex items-center gap-2">
-        {children}
         <DataTableViewOptions table={table} />
+        {children}
       </div>
     </div>
   )

src/components/ui/data-table/data-table-view-options.tsx

@@ -27,7 +27,7 @@ export function DataTableViewOptions<TData>({
           aria-label="Toggle columns"
           variant="outline"
           size="sm"
-          className="ml-auto flex h-8"
+          className="ml-auto flex"
         >
           <MixerHorizontalIcon className="mr-2 size-4" />
           Columns

src/components/ui/data-table/data-table.tsx

@@ -29,7 +29,7 @@ export function DataTable<TData>({
     >
       {children}
       <div className="overflow-hidden rounded-md border">
-        <Table>
+        <Table className="bg-background-elevation-1">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>

src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border bg-background-elevation-1 px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-background-elevation-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border bg-background-elevation-1 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border bg-background-elevation-1 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

tailwind.config.ts

@@ -22,6 +22,14 @@ const config = {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
+        white: "hsl(var(--white))",
+        black: "hsl(var(--black))",
+        "background-elevation-1": "hsl(var(--background-elevation-1))",
+        "background-elevation-2": "hsl(var(--background-elevation-2))",
+        "background-elevation-3": "hsl(var(--background-elevation-3))",
+        "background-elevation-4": "hsl(var(--background-elevation-4))",
+        "background-elevation-5": "hsl(var(--background-elevation-5))",
+        "background-elevation-6": "hsl(var(--background-elevation-6))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
@@ -36,6 +44,14 @@ const config = {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        confirm: {
+          DEFAULT: "hsl(var(--confirm))",
+          foreground: "hsl(var(--confirm-foreground))",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",