add light/system theme

Author: alindt

src/app/(dashboard)/dns/settings/page.tsx

@@ -128,7 +128,7 @@ const SettingDisabledManagementGroups = ({
       </div>
       <div
         className={
-          "flex justify-end bg-nb-gray-900/20 border-t border-nb-gray-900 px-8 py-5"
+          "flex justify-end bg-gray-50 dark:bg-nb-gray-900/20 border-t border-gray-200 dark:border-nb-gray-900 px-8 py-5"
         }
       >
         <Button

src/app/(dashboard)/network/page.tsx

@@ -89,7 +89,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
               />
               <button
                 className={
-                  "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                  "flex items-center gap-2 interactive-cell"
                 }
                 onClick={() => setNetworkModal(true)}
               >

src/app/(dashboard)/peer/page.tsx

@@ -179,7 +179,7 @@ function PeerOverview() {
                       <ModalTrigger>
                         <div
                           className={
-                            "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                            "flex items-center gap-2 interactive-cell"
                           }
                         >
                           <PencilIcon size={16} />
@@ -241,10 +241,10 @@ function PeerOverview() {
                 {isOwnerOrAdmin && !!peer?.user_id && (
                   <div
                     className={cn(
-                      "border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
+                      "border border-gray-200 dark:border-nb-gray-900 border-t-0 rounded-b-md bg-gray-50 dark:bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
                       !loginExpiration
                         ? "opacity-50 pointer-events-none"
-                        : "bg-nb-gray-930/80",
+                        : "bg-subtle-emphasis",
                     )}
                   >
                     <PeerExpirationToggle
@@ -548,7 +548,7 @@ function EditNameModal({ onSuccess, peer, initialName }: Readonly<ModalProps>) {
               If the domain name already exists, we add an increment number
               suffix to it.
             </HelpText>
-            <div className={"text-netbird text-sm break-all whitespace-normal"}>
+            <div className={"text-highlight text-sm break-all whitespace-normal"}>
               {domainNamePreview}
             </div>
           </Card>

src/app/(dashboard)/settings/page.tsx

@@ -59,7 +59,7 @@ export default function NetBirdSettings() {
           </VerticalTabs.Trigger>
         </VerticalTabs.List>
         <RestrictedAccess page={"Settings"}>
-          <div className={"border-l border-nb-gray-930 w-full"}>
+          <div className={"border-l border-gray-200 dark:border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}

src/app/(dashboard)/team/user/page.tsx

@@ -143,7 +143,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             <div className={"flex items-center gap-3"}>
               <div
                 className={
-                  "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+                  "w-10 h-10 rounded-full relative flex items-center justify-center text-gray-700 dark:text-white uppercase text-md font-medium bg-gray-200 dark:bg-nb-gray-900"
                 }
                 style={
                   user.is_service_user

src/app/globals.css

@@ -2,7 +2,43 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .interactive-cell {
+    @apply dark:text-neutral-300 text-neutral-500 py-2 px-3 rounded-md;
+    @apply transition-all hover:bg-gray-300 hover:text-neutral-800 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 cursor-pointer;
+  }
 
+  .table-row-hoverable {
+    @apply transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-940 cursor-pointer;
+  }
+
+  /* Semantic Text Classes */
+  .text-primary {
+    @apply text-gray-700 dark:text-nb-gray-100;
+  }
+
+  .text-muted {
+    @apply text-neutral-500 dark:text-neutral-400;
+  }
+
+  .text-highlight {
+    @apply text-netbird;
+  }
+
+  /* Semantic Border Class */
+  .border-default {
+    @apply border-neutral-200 dark:border-nb-gray-700;
+  }
+
+  /* Semantic Background Class */
+  .bg-subtle-emphasis {
+    @apply bg-gray-100 dark:bg-nb-gray-930/80;
+  }
+
+  .bg-default {
+    @apply bg-white dark:bg-nb-gray-950;
+  }
+}
 
 h1 {
     @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;

src/assets/netbird-full-light.svg

@@ -40,7 +40,7 @@ export const OIDCError = () => {
     >
       <div
         className={
-          "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
+          "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
         }
       >
         <NetBirdIcon size={23} />

src/auth/OIDCError.tsx

@@ -26,7 +26,7 @@ export const SessionLost = () => {
     >
       <div
         className={
-          "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
+          "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
         }
       >
         <NetBirdIcon size={20} />

src/auth/SessionLost.tsx

@@ -16,34 +16,34 @@ const variants = cva("", {
       blue: [
         "bg-sky-100 border-sky-500 text-sky-800 border border-transparent",
       ],
-      blueDark: ["bg-sky-900 border-sky-500 text-white border"],
-      "blue-darker": ["bg-sky-900 border-sky-500 text-white border"],
-      red: ["bg-red-950/40 border-red-500 border text-red-500"],
-      purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
-      yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
-      gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
+      blueDark: ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
+      "blue-darker": ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
+      red: ["bg-red-100 border-red-400 text-red-600 border dark:bg-red-950/40 dark:border-red-500 dark:text-red-500"],
+      purple: ["bg-purple-100 border-purple-400 text-purple-600 border dark:bg-purple-950/50 dark:border-purple-500 dark:text-purple-500"],
+      yellow: ["bg-yellow-100 border-yellow-400 text-yellow-600 border dark:bg-yellow-950 dark:border-yellow-500 dark:text-yellow-400"],
+      gray: ["bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-930/60 dark:border-nb-gray-800/40 dark:text-nb-gray-300"],
       grayer: [
-        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+        "bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-900/40 dark:border-nb-gray-800/40 dark:text-nb-gray-300",
       ],
       "gray-ghost": [
-        "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
+        "bg-gray-50 border-gray-200 text-gray-500 border dark:bg-nb-gray-900 dark:border-nb-gray-800 dark:text-nb-gray-300 dark:border-nb-gray-800/50",
       ],
-      green: ["bg-green-950 border-green-500 border text-green-400"],
-      netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
+      green: ["bg-green-100 border-green-400 text-green-600 border dark:bg-green-950 dark:border-green-500 dark:text-green-400"],
+      netbird: ["bg-netbird-100 border-netbird-400 text-netbird-600 border dark:bg-netbird-950 dark:border-netbird-500 dark:text-netbird-500"],
     },
     hover: {
       none: [],
-      blue: ["hover:bg-sky-200"],
-      purple: ["hover:bg-purple-950/40"],
-      yellow: ["hover:bg-yellow-950/40"],
-      blueDark: ["hover:bg-sky-800"],
-      "blue-darker": ["hover:bg-sky-800"],
-      red: ["hover:bg-red-950/40"],
-      gray: ["hover:bg-nb-gray-900"],
-      grayer: ["hover:bg-nb-gray-900"],
-      "gray-ghost": ["hover:bg-nb-gray-900"],
-      green: ["hover:bg-green-950/50"],
-      netbird: ["hover:bg-netbird-950/50"],
+      blue: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      purple: ["hover:bg-purple-200 dark:hover:bg-purple-950/40"],
+      yellow: ["hover:bg-yellow-200 dark:hover:bg-yellow-950/40"],
+      blueDark: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      "blue-darker": ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      red: ["hover:bg-red-200 dark:hover:bg-red-950/40"],
+      gray: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
+      grayer: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
+      "gray-ghost": ["hover:bg-gray-100 dark:hover:bg-nb-gray-900"],
+      green: ["hover:bg-green-200 dark:hover:bg-green-950/50"],
+      netbird: ["hover:bg-netbird-200 dark:hover:bg-netbird-950/50"],
     },
   },
 });