refactor(ui): extract canonical eyebrow label component

apps/extension/src/lib/core/types/score.ts

@@ -75,15 +75,3 @@ export function scoreToGrade(score: number): Grade {
   }
   return 'F';
 }
-
-/**
- * Grade to color mapping for UI display.
- * Matches the existing design tokens.
- */
-export const GRADE_COLORS: Record<Grade, { text: string; bg: string }> = {
-  A: { text: 'text-accent-emerald', bg: 'bg-accent-emerald/15' },
-  B: { text: 'text-accent-blue', bg: 'bg-accent-blue/15' },
-  C: { text: 'text-accent-amber', bg: 'bg-accent-amber/15' },
-  D: { text: 'text-text-subtle', bg: 'bg-subtle-gray' },
-  F: { text: 'text-text-subtle', bg: 'bg-subtle-gray' },
-};

apps/extension/src/ui/atoms/ConnectionIndicator.svelte

@@ -114,7 +114,7 @@
         <span class="relative inline-flex h-2 w-2 rounded-full {statusConfig.color}"></span>
       </span>
       <Icon name={statusConfig.icon} size={12} />
-      <span class="text-micro font-medium uppercase tracking-wider">{statusConfig.label}</span>
+      <span class="eyebrow eyebrow--inherit">{statusConfig.label}</span>
     </button>
 
     {#if showDetails}

apps/extension/src/ui/design-tokens.css

@@ -5,17 +5,6 @@
 
 @import '@pulse/ui/app.css';
 
-/* ================================================
- * Compatibility aliases for existing extension UI classes
- * These stay local to the extension until all references are migrated.
- * ================================================ */
-
-@theme {
-  --color-accent-blue: #0b64e9;
-  --color-accent-emerald: #0b64e9;
-  --color-accent-red: #f24149;
-}
-
 /* ================================================
  * Base Styles (extension-specific)
  * ================================================ */
@@ -66,58 +55,6 @@ textarea:focus-visible,
   overflow-x: hidden;
 }
 
-/* ================================================
- * Card Container
- * ================================================ */
-
-.card {
-  background: var(--color-surface-white);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  padding: var(--spacing-16);
-}
-
-/* ================================================
- * Status Tags
- * ================================================ */
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  padding: var(--spacing-4) var(--spacing-8);
-  border-radius: var(--radius-md);
-  font-family: var(--font-system);
-  font-size: var(--text-meta);
-  font-weight: 400;
-  line-height: var(--text-meta--line-height);
-}
-
-.tag--red {
-  background: var(--color-status-red);
-  color: #ffffff;
-}
-.tag--orange {
-  background: var(--color-status-orange);
-  color: #ffffff;
-}
-.tag--yellow {
-  background: var(--color-status-yellow);
-  color: #ffffff;
-}
-.tag--violet {
-  background: var(--color-status-violet);
-  color: #ffffff;
-}
-.tag--blue {
-  background: var(--color-blueprint-blue);
-  color: #ffffff;
-}
-.tag--gray {
-  background: var(--color-subtle-gray);
-  color: var(--color-text-secondary);
-}
-
 /* ================================================
  * Extension shell utilities — Analytical Blueprint
  * ================================================ */

apps/extension/src/ui/molecules/AlertBuilderCard.svelte

@@ -218,9 +218,7 @@
 <section class="section-card rounded-xl p-5">
   <div class="flex items-start justify-between gap-4">
     <div class="min-w-0">
-      <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-        Alerte prioritaire
-      </p>
+      <p class="eyebrow eyebrow--strong">Alerte prioritaire</p>
       <h3 class="mt-1 text-body-lg font-semibold text-text-primary">
         Définir ce qui mérite une action
       </h3>
@@ -314,7 +312,7 @@
 
     <div class="grid grid-cols-2 gap-2">
       <label class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-        <span class="block text-micro uppercase tracking-[0.13em] text-text-muted">TJM min</span>
+        <span class="block eyebrow">TJM min</span>
         <input
           type="number"
           min="0"
@@ -324,9 +322,7 @@
         />
       </label>
       <label class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-        <span class="block text-micro uppercase tracking-[0.13em] text-text-muted">
-          Max résultats
-        </span>
+        <span class="block eyebrow">Max résultats</span>
         <input
           type="number"
           min="1"
@@ -412,19 +408,19 @@
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.totalMissions}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Locales</p>
+        <p class="mt-0.5 eyebrow">Locales</p>
       </div>
       <div class="rounded-md bg-surface-white px-2 py-2">
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.matchingCount}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Éligibles</p>
+        <p class="mt-0.5 eyebrow">Éligibles</p>
       </div>
       <div class="rounded-md bg-surface-white px-2 py-2">
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.notifyCount}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Notifiées</p>
+        <p class="mt-0.5 eyebrow">Notifiées</p>
       </div>
     </div>
     {#if alertPreview.seenCount > 0}