refactor(design): name fixed status and preview color shortcuts

Author: SaKaNa-Y

design/uno.config.ts

@@ -66,6 +66,10 @@ export function createDesignConfig(options: CreateDesignConfigOptions = {}) {
       colors: { devframe: resolvePrimary('#3a6a45') },
     },
     shortcuts: {
+      /** Fixed semantic colors stay independent of the panel's primary accent. */
+      'color-status-positive': 'color-devframe-600 dark:color-devframe-300',
+      'color-preview-accent': 'color-devframe-600 dark:color-devframe-300',
+      'bg-preview-accent': 'bg-devframe',
       /** Fixed navbar height, shared by every surface's top nav. */
       'h-nav': 'h-10',
       /** Named z-index layers, shared across every surface. */

plugins/git/app/components/ui/status-mark.tsx

@@ -20,8 +20,8 @@ const STATUS_COLOR: Record<FileStatusCode, string> = {
   'added': 'text-success',
   'deleted': 'text-error',
   'modified': 'text-warning',
-  'renamed': 'color-devframe-600 dark:color-devframe-300',
-  'copied': 'color-devframe-600 dark:color-devframe-300',
+  'renamed': 'color-status-positive',
+  'copied': 'color-status-positive',
   'type-changed': 'text-warning',
   'unmerged': 'text-error',
   'unknown': 'color-muted',

plugins/og/app/app/app.vue

@@ -49,7 +49,7 @@ onMounted(() => viewer.inspect())
       <div v-else class="grid min-h-full gap4 p4 xl:grid-cols-[minmax(0,1fr)_minmax(28rem,0.85fr)]">
         <div class="min-w-0 flex flex-col gap4">
           <div class="flex flex-wrap items-center gap-2 color-muted text-xs">
-            <span class="i-ph-check-circle-duotone color-devframe-600 dark:color-devframe-300" />
+            <span class="i-ph-check-circle-duotone color-status-positive" />
             <a :href="viewer.snapshot.value.url" target="_blank" rel="noreferrer" class="min-w-0 truncate font-mono hover:color-active" :title="viewer.snapshot.value.url">
               {{ viewer.snapshot.value.url }}
             </a>

plugins/og/app/app/components/previews/TelegramPreview.vue

@@ -11,12 +11,12 @@ const time = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-di
 
 <template>
   <article class="w-full max-w-105 border border-base rounded-4 rounded-bl-sm bg-base p3 shadow-sm">
-    <a :href="card.url" target="_blank" rel="noreferrer" class="block truncate color-devframe-600 dark:color-devframe-300 text-sm underline">{{ card.url }}</a>
+    <a :href="card.url" target="_blank" rel="noreferrer" class="block truncate color-preview-accent text-sm underline">{{ card.url }}</a>
     <div class="mt2 grid grid-cols-[2px_1fr] gap-2">
-      <div class="rounded bg-devframe op70" />
+      <div class="rounded bg-preview-accent op70" />
       <div class="min-w-0">
         <PreviewImage :src="card.image" :alt="card.imageAlt" class="mb2 aspect-1.91/1 w-full rounded" />
-        <div class="color-devframe-600 dark:color-devframe-300 text-sm font-semibold">
+        <div class="color-preview-accent text-sm font-semibold">
           {{ card.hostname }}
         </div>
         <h3 class="my1 text-sm font-semibold">