feat: distinguish pro plan badges

Co-authored-by: Codex <noreply@openai.com>

frontend/src/styles/tokens.css

@@ -20,6 +20,10 @@
   --cp-text-muted: #94a3b8;
   --cp-accent-primary: #2563eb;
   --cp-reasoning: #8b5cf6;
+  --cp-plan-pro-bg: #ede9fe;
+  --cp-plan-pro-text: #5b21b6;
+  --cp-plan-prolite-bg: #f5f3ff;
+  --cp-plan-prolite-text: #7c3aed;
 
   --cp-default-bg-hover: #f1f5f9;
   --cp-default-bg-active: #e9eef5;
@@ -120,6 +124,10 @@ html[data-theme='dark'] {
   --cp-text-muted: #64748b;
   --cp-accent-primary: #6ea8ff;
   --cp-reasoning: #a78bfa;
+  --cp-plan-pro-bg: #35136f;
+  --cp-plan-pro-text: #ddd6fe;
+  --cp-plan-prolite-bg: #24143e;
+  --cp-plan-prolite-text: #c4b5fd;
 
   --cp-default-bg-hover: #1b2a40;
   --cp-default-bg-active: #23354f;

frontend/src/views/accounts/components/AccountPlanBadge.vue

@@ -12,13 +12,18 @@ const props = withDefaults(
   },
 )
 
-const palettes = [
+const fallbackPalettes = [
   'bg-(--cp-info-bg) text-(--cp-info-text) shadow-(--cp-shadow-input)',
   'bg-(--cp-success-bg) text-(--cp-success-text) shadow-(--cp-shadow-input)',
   'bg-(--cp-normal-bg) text-(--cp-normal-text) shadow-(--cp-shadow-input)',
   'bg-(--cp-warning-bg) text-(--cp-warning-text) shadow-(--cp-shadow-input)',
 ]
 
+const usageTierPalettes: Record<string, string> = {
+  pro: 'bg-(--cp-plan-pro-bg) text-(--cp-plan-pro-text) shadow-(--cp-shadow-input)',
+  prolite: 'bg-(--cp-plan-prolite-bg) text-(--cp-plan-prolite-text) shadow-(--cp-shadow-input)',
+}
+
 const label = computed(() => props.planType?.trim() || 'Free')
 
 const sizeClass = computed(() =>
@@ -29,11 +34,15 @@ const sizeClass = computed(() =>
 
 const paletteClass = computed(() => {
   const key = label.value.toLowerCase()
+  const usageTierPalette = usageTierPalettes[key]
+  if (usageTierPalette)
+    return usageTierPalette
+
   let hash = 0
   for (const char of key) {
     hash += char.charCodeAt(0)
   }
-  return palettes[hash % palettes.length]
+  return fallbackPalettes[hash % fallbackPalettes.length]
 })
 </script>