Style: Token renaming and style organization (#6337)

## Summary

Align color names and organize style.css some more

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6337-Style-Token-renaming-and-style-organization-29a6d73d365081b69f25ce1298c67fdc)
by [Unito](https://www.unito.io)

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -50,7 +50,7 @@
                 <div class="font-semibold">
                   {{ data.params?.api_name || 'API' }}
                 </div>
-                <div class="text-sm text-gray-400">
+                <div class="text-sm text-smoke-400">
                   {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
                 </div>
               </div>

src/components/dialog/content/setting/UserPanel.vue

@@ -78,7 +78,7 @@
 
       <!-- Login Section -->
       <div v-else class="flex flex-col gap-4">
-        <p class="text-gray-600">
+        <p class="text-smoke-600">
           {{ $t('auth.login.title') }}
         </p>