chore: update more color

packages/applet/src/components/state/RootStateViewer.vue

@@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
         />
         <!-- placeholder -->
         <span v-else pl5 />
-        <span font-state-field text-3.5>
+        <span font-state-field text-3.5 text-hex-a3a3a3>
           {{ key }}
         </span>
       </div>

packages/applet/src/components/state/StateFieldViewer.vue

@@ -38,7 +38,7 @@ const stateFormatClass = computed(() => {
   if (type.value === 'custom')
     return `${(props.data.value as InspectorCustomState)._custom?.type ?? 'string'}-custom-state`
   else
-    return ``
+    return 'unknown-state-type'
 })
 
 const fieldsCount = computed(() => {
@@ -199,12 +199,12 @@ async function submitDrafting() {
       />
       <!-- placeholder -->
       <span v-else pl5 />
-      <span op70 class="whitespace-nowrap">
+      <span whitespace-nowrap text-purple-700 op70 dark:text-purple-300>
         {{ normalizedDisplayedKey }}
       </span>
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" class="mr-1" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-      <span :class="stateFormatClass" class="flex whitespace-nowrap">
+      <span :class="stateFormatClass" class="flex whitespace-nowrap dark:text-#bdc6cf">
         <span class="flex" v-html="normalizedDisplayedValue" />
       </span>
       <StateFieldEditor
@@ -231,6 +231,17 @@ async function submitDrafting() {
   </div>
 </template>
 
+<style lang="scss">
+// Maybe related https://github.com/vuejs/core/issues/12241
+// Let's leave it global for now, until it's fixed
+// This will compiled to `.dark[v-xxx] selectors` if using scoped
+.function-custom-state {
+  & > span {
+    --at-apply: 'dark:text-#997fff!';
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 // string
 :deep(.string-custom-state) {

packages/applet/src/components/tree/TreeViewer.vue

@@ -57,7 +57,7 @@ function select(id: string) {
       <span v-else pl5 />
       <span font-state-field text-3.5>
         <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
-        <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
+        <span class="ws-nowrap text-green-500 dark:text-green-600 group-hover:text-white [.active_&]:text-white!">{{ normalizeLabel(item) }}</span>
         <!-- @vue-expect-error skip type check -->
         <span
           v-if="(item.renderKey === 0 || !!item.renderKey) && item.renderKey !== UNDEFINED"

packages/applet/src/modules/components/components/RenderCode.vue

@@ -13,7 +13,7 @@ function close() {
 </script>
 
 <template>
-  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
+  <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#212427">
     <div class="h-12 w-full flex items-center justify-between p-2">
       <span class="font-500">Render Code</span>
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />

packages/applet/src/modules/components/index.vue

@@ -342,7 +342,7 @@ function toggleApp(id: string) {
             <!-- component name -->
             <span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-3.5">
               <span class="text-gray-400 dark:text-gray-600">&lt;</span>
-              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
+              <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap text-green-500 dark:text-green-600 [.active_&]:(text-white!)">{{ activeTreeNode.name }}</span>
               <span class="text-gray-400 dark:text-gray-600">&gt;</span>
             </span>
 

packages/applet/uno.config.ts

@@ -47,7 +47,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
     // selective list
     'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',
 
-    'code-block': 'dark:bg-[#121212] bg-white',
+    'code-block': 'dark:bg-#212427 bg-white',
 
     // state
     'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',

packages/client/src/assets/styles/main.css

@@ -68,7 +68,7 @@ body::-webkit-scrollbar {
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
-  --uno: 'border-white dark:border-hex-121212';
+  --uno: 'border-white dark:border-#212427';
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,

packages/client/uno.config.ts

@@ -61,11 +61,11 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'x-divider': 'h-1px w-full bg-gray/15',
 
     // glass
-    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#121212]/90',
+    'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#212427/90',
     'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
     // code
-    'code-block': 'dark:bg-[#121212] bg-white',
+    'code-block': 'dark:bg-#212427 bg-white',
 
     // panel grids
     'panel-grids': 'panel-grids-light dark:panel-grids-dark',

packages/ui/src/components/CodeBlock.vue

@@ -68,6 +68,10 @@ const rendered = computed(() => {
         }
       }
     }
+    span {
+      --at-apply: '$ui-bg-base!';
+    }
+    --at-apply: '$ui-bg-base!';
   }
   pre {
     &:focus-visible {

packages/ui/src/composables/shiki.ts

@@ -48,6 +48,10 @@ export function renderCodeHighlight(code: string, lang: BuiltinLanguage | 'text'
         dark: 'vitesse-dark',
         light: 'vitesse-light',
       },
+      colorReplacements: {
+        // vitesse-dark bg color
+        '#121212': 'transparent',
+      },
     }),
     supported: true,
   }