refactor(ui): teams

assets/scss/styles.scss

@@ -118,7 +118,7 @@ a {
   }
 
   .popover-theme {
-    @apply bg-primary;
+    @apply bg-popover;
     @apply text-secondary;
     @apply p-2;
     @apply shadow-lg;
@@ -126,19 +126,19 @@ a {
   }
 
   &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
-    @apply border-t-primary;
+    @apply border-t-popover;
   }
 
   &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
-    @apply border-b-primary;
+    @apply border-b-popover;
   }
 
   &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
-    @apply border-l-primary;
+    @apply border-l-popover;
   }
 
   &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
-    @apply border-r-primary;
+    @apply border-r-popover;
   }
 }
 

assets/scss/themes.scss

@@ -27,6 +27,8 @@
   --error-color: theme("colors.dark.800");
   // Tooltip color
   --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.true-gray.800");
   // Editor theme
   --editor-theme: "merbivore_soft";
 }
@@ -54,6 +56,8 @@
   --error-color: theme("colors.blue-gray.700");
   // Tooltip color
   --tooltip-color: theme("colors.blue-gray.800");
+  // Popover color
+  --popover-color: theme("colors.white");
   // Editor theme
   --editor-theme: "textmate";
 }
@@ -81,6 +85,8 @@
   --error-color: theme("colors.dark.800");
   // Tooltip color
   --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.dark.700");
   // Editor theme
   --editor-theme: "twilight";
 }