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/widget/layout/BaseModalLayout.vue

@@ -133,7 +133,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
   'base-widget-layout',
   'rounded-2xl overflow-hidden relative',
-  'bg-gray-50 dark-theme:bg-gray-800'
+  'bg-gray-50 dark-theme:bg-smoke-800'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -150,7 +150,7 @@ const closeButtonClasses = cn(
 
 const mainContainerClasses = cn(
   'flex-1 flex',
-  'bg-gray-100 dark-theme:bg-neutral-900'
+  'bg-smoke-100 dark-theme:bg-neutral-900'
 )
 
 const headerClasses = cn(

src/components/widget/nav/NavItem.vue

@@ -3,8 +3,8 @@
     class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
     :class="
       active
-        ? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
-        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
+        ? 'bg-smoke-400 dark-theme:bg-charcoal-300 text-neutral'
+        : 'text-neutral hover:bg-smoke-100 dark-theme:hover:bg-charcoal-300'
     "
     role="button"
     @click="onClick"