Organize colors

src/room/GroupCallInspector.module.css

@@ -1,5 +1,5 @@
 .inspector {
-  background-color: var(--bgColor2);
+  background-color: var(--system);
 }
 
 .scrollContainer {
@@ -20,6 +20,6 @@
 
 .sequenceDiagramViewer :global(.messageText) {
   font-size: 12px;
-  fill: var(--textColor1) !important;
-  stroke: var(--textColor1) !important;
+  fill: var(--primary-content) !important;
+  stroke: var(--primary-content) !important;
 }

src/room/PTTButton.module.css

@@ -4,8 +4,8 @@
   max-height: 232px;
   max-width: 232px;
   border-radius: 116px;
-  color: ##fff;
-  border: 6px solid #0dbd8b;
+  color: var(--primary-content);
+  border: 6px solid var(--accent);
   background-color: #21262c;
   position: relative;
   padding: 0;
@@ -13,11 +13,11 @@
 }
 
 .talking {
-  background-color: #0dbd8b;
+  background-color: var(--accent);
   cursor: unset;
 }
 
 .error {
-  background-color: #ff5b55;
-  border-color: #ff5b55;
+  background-color: var(--alert);
+  border-color: var(--alert);
 }

src/room/PTTButton.tsx

@@ -143,7 +143,7 @@ export const PTTButton: React.FC<Props> = ({
   });
   const shadowColor = showTalkOverError
     ? "var(--alert-20)"
-    : "var(--primaryColor-20)";
+    : "var(--accent-20)";
 
   return (
     <animated.button

src/room/PTTCallView.module.css

@@ -31,7 +31,7 @@
 }
 
 .participants > p {
-  color: #a9b2bc;
+  color: var(--secondary-content);
   margin-bottom: 8px;
 }