feat(core): color a dock-bar entry's badge via a new badgeVariant field

packages/core/src/client/webcomponents/components/dock/DockEntries.vue

@@ -77,6 +77,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
         :is-dimmed="dimInactive && selected ? (selected.id !== dock.id) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
+        :badge-variant="dock.badgeVariant"
         @click="toggleDockEntry(dock)"
       />
     </template>

packages/core/src/client/webcomponents/components/dock/DockEntry.stories.ts

@@ -12,6 +12,7 @@ interface EntryArgs {
   isVertical?: boolean
   isAction?: boolean
   badge?: string
+  badgeVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger'
   tooltip?: boolean
 }
 
@@ -43,6 +44,7 @@ const meta = {
         isVertical: args.isVertical,
         isAction: args.isAction,
         badge: args.badge || undefined,
+        badgeVariant: args.badgeVariant,
         tooltip: args.tooltip,
       }))),
     ),
@@ -67,6 +69,9 @@ export const Action: Story = { args: { isAction: true } }
 /** A count badge in the corner (e.g. pending items). */
 export const WithBadge: Story = { args: { badge: '3' } }
 
+/** A colored badge, e.g. flagging a state that needs attention. */
+export const WithBadgeVariant: Story = { args: { badge: '3', badgeVariant: 'warning' } }
+
 /** Rotated for a left/right edge dock. */
 export const Vertical: Story = { args: { isVertical: true } }
 
@@ -81,6 +86,8 @@ export const States: Story = {
         h(DockEntry, { context: ctx, dock: sample, isDimmed: true }),
         h(DockEntry, { context: ctx, dock: sample, isAction: true }),
         h(DockEntry, { context: ctx, dock: sample, badge: '9+' }),
+        h(DockEntry, { context: ctx, dock: sample, badge: '2', badgeVariant: 'warning' }),
+        h(DockEntry, { context: ctx, dock: sample, badge: '5', badgeVariant: 'success' }),
       ])),
     ),
   }),

packages/core/src/client/webcomponents/components/dock/DockEntry.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { DevToolsDockEntryBase } from '@vitejs/devtools-kit'
+import type { DevToolsDockBadgeVariant, DevToolsDockEntryBase } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener } from '@vueuse/core'
 import { computed, useTemplateRef } from 'vue'
+import { colors } from '../../json-render/components/tokens'
 import { setFloatingTooltip } from '../../state/floating-tooltip'
 import { accentTextStyle } from '../../utils/accent-color'
 import { openDockContextMenu } from './DockContextMenu'
@@ -17,6 +18,7 @@ const props = withDefaults(
     isDimmed?: boolean
     isVertical?: boolean
     badge?: string
+    badgeVariant?: DevToolsDockBadgeVariant
     tooltip?: boolean
     /** A `group` entry's optional `accentColor`, applied while selected/active. */
     accentColor?: string
@@ -29,6 +31,14 @@ const props = withDefaults(
 // Only kicks in while selected — an idle group button keeps its default look.
 const accentStyle = computed(() => (props.isSelected ? accentTextStyle(props.accentColor) : undefined))
 
+/** `undefined` at `'default'`/unset keeps the existing `bg-gray-6 text-white` classes below. `colors[variant].bg`'s alpha is tuned for a tab badge, so it's boosted here for better contrast on the dock bar. */
+const badgeStyle = computed(() => {
+  if (!props.badgeVariant || props.badgeVariant === 'default')
+    return undefined
+  const { bg, fg } = colors[props.badgeVariant]
+  return { backgroundColor: `rgba(from ${bg} r g b / 0.35)`, color: fg }
+})
+
 const button = useTemplateRef<HTMLButtonElement>('button')
 
 function updateTooltip() {
@@ -94,7 +104,12 @@ useEventListener('pointerdown', () => {
       class="flex items-center justify-center p1.5 hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative outline-none"
     >
       <DockIcon :icon="dock.icon" class="w-5 h-5 select-none" />
-      <div v-if="badge" class="absolute top-0.5 right-0 bg-gray-6 text-white text-0.6em px-1 rounded-full shadow">
+      <div
+        v-if="badge"
+        class="absolute top-0.5 right-0 text-0.6em px-1 rounded-full shadow"
+        :class="badgeStyle ? '' : 'bg-gray-6 text-white'"
+        :style="badgeStyle"
+      >
         {{ badge }}
       </div>
     </button>

packages/kit/src/types/docks.ts

@@ -43,8 +43,15 @@ declare module '@devframes/hub/types' {
   interface DevframeDockEntryRegistry {
     'json-render': DevToolsViewJsonRender
   }
+  interface DevframeDockEntryBase {
+    /** Colors {@link DevframeDockEntryBase.badge}. Omitted (or `'default'`) keeps the existing neutral fill. */
+    badgeVariant?: DevToolsDockBadgeVariant
+  }
 }
 
+/** Color for a dock-bar entry's badge — mirrors json-render's `TabDescriptor.badgeVariant`. */
+export type DevToolsDockBadgeVariant = 'default' | 'info' | 'success' | 'warning' | 'danger'
+
 /**
  * A selectable launch root offered by a launcher dock entry.
  *

test/__snapshots__/tsnapi/@vitejs/devtools-kit/index.snapshot.d.ts

@@ -52,6 +52,7 @@ export interface ViteDevToolsNodeContext extends KitNodeContext {
 // #endregion
 
 // #region Types
+export type DevToolsDockBadgeVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
 export type DevToolsDockEntryCategory = DevframeDockEntryCategory;
 export type JsonRenderElement = UIElement;
 export type JsonRenderSpec = DevframeJsonRenderSpec;