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)/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 text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
                           }
                         >
                           <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-gray-100 dark:bg-nb-gray-930/80",
                     )}
                   >
                     <PeerExpirationToggle

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/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"],
     },
   },
 });

src/components/Badge.tsx

@@ -63,7 +63,7 @@ export const buttonVariants = cva(
           "dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
         ],
         "danger-outline": [
-          "", // TODO - add danger button styles for light mode
+          "bg-transparent focus:ring-red-400/20 hover:bg-red-50 text-red-500 border-red-500",
           "enabled:dark:focus:ring-red-800/20 enabled:dark:focus:bg-red-950/40 enabled:hover:dark:bg-red-950/50 enabled:dark:hover:border-red-800/50 dark:bg-transparent dark:text-red-500",
           "",
         ],
@@ -72,7 +72,7 @@ export const buttonVariants = cva(
           "dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-zinc-800/50 dark:hover:border-nb-gray-800/50",
         ],
         danger: [
-          "", // TODO - add danger button styles for light mode
+          "bg-red-600 text-white hover:bg-red-700 focus:ring-red-400/50",
           "dark:focus:ring-red-700/20 dark:focus:bg-red-700 hover:dark:bg-red-700 dark:hover:border-red-800/50 dark:bg-red-600 dark:text-red-100",
         ],
       },

src/components/Button.tsx

@@ -13,7 +13,7 @@ function Card({ children, className, ...props }: Props) {
     <div
       {...props}
       className={cn(
-        "bg-nb-gray-940 rounded-md border border-nb-gray-900 w-1/2 overflow-hidden",
+        "bg-white dark:bg-nb-gray-940 rounded-md border border-gray-200 dark:border-nb-gray-900 w-1/2 overflow-hidden",
         className,
       )}
     >
@@ -48,7 +48,7 @@ function CardListItem({
   return (
     <li
       className={cn(
-        "flex justify-between px-4 border-b border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
+        "flex justify-between px-4 border-b border-gray-200 dark:border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
         className,
       )}
     >
@@ -95,8 +95,8 @@ const CardTextItem = ({
   return (
     <div
       className={cn(
-        "text-right text-nb-gray-400 text-sm flex items-center gap-2",
-        copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
+        "text-right text-gray-500 dark:text-nb-gray-400 text-sm flex items-center gap-2",
+        copy && "cursor-pointer hover:text-gray-700 dark:hover:text-nb-gray-300 transition-all",
       )}
       onClick={() =>
         copy &&