refactor(ui): better color names

tailwind.config.js

@@ -22,16 +22,15 @@ export default {
     },
     extend: {
       colors: {
-        bgColor: "var(--bg-color)",
-        bgLightColor: "var(--bg-light-color)",
-        bgDarkColor: "var(--bg-dark-color)",
-        fgColor: "var(--fg-color)",
-        fgLightColor: "var(--fg-light-color)",
-        brdColor: "var(--brd-color)",
-        errColor: "var(--err-color)",
-        acColor: "var(--ac-color)",
-        actColor: "var(--act-color)",
-        ttColor: "var(--tt-color)",
+        primary: "var(--primary-color)",
+        primaryLight: "var(--primary-light-color)",
+        primaryDark: "var(--primary-dark-color)",
+        secondary: "var(--secondary-color)",
+        secondaryLight: "var(--secondary-light-color)",
+        accent: "var(--accent-color)",
+        divider: "var(--divider-color)",
+        error: "var(--error-color)",
+        tooltip: "var(--tooltip-color)",
         blue: colors.blue,
         green: colors.green,
         teal: colors.teal,