feat(subscription): unify credit gold across indicators and subscribe buttons (#13763)

## Summary

Credit indicators and subscribe CTAs now share one gold, so the credit
balance, the amounts in pricing and checkout, and the buttons that
upgrade or top up all read as a single system. The subscribe buttons
also drop the old purple gradient for a solid gold that is actually
legible.

## Changes

**What**

- Recolor the credit accent to a single gold value and point every
credit surface at that one token, replacing the scattered amber and gold
used before.
- Repaint the subscribe buttons: they were a multi layer purple gradient
with faint white text (nearly unreadable), and are now a solid gold fill
with dark text. Hover dims slightly instead of shifting the gradient.
- Rename the button `subscribe` variant (it used to be called
`gradient`, which stopped being accurate once it became a flat fill) and
delete the now unused gradient token so there is no dead styling left
behind.
- Swap the credit cost glyphs across pricing tables, subscription
success and preview screens, the free tier quota, the partner node
popover, and both user popovers so they match the recolored token rather
than raw amber.
- Built on top of #13712 

**Breaking**

None. The subscribe buttons keep the same public API (the shared
`SubscribeButton` still exposes a `buttonVariant` prop, now typed
`'default' | 'subscribe'`), and no behavior, routing, or telemetry
changes.

## Testing

This is a token and styling change with no logic, so the meaningful
verification is visual plus the standard gates, not new unit tests (a
test asserting a hex value would just be a change detector).

<img width="507" height="557" alt="image"
src="https://github.com/user-attachments/assets/fed73d12-e3cc-46a6-aae2-db37f24d9bbb"
/>

Author: MaanilVerma

packages/design-system/src/css/style.css

@@ -49,7 +49,7 @@
   --color-gold-500: #fdab34;
   --color-gold-600: #fd9903;
 
-  --color-credit: #fabc25;
+  --color-credit: #ddbd31;
 
   --color-coral-500: #f75951;
   --color-coral-600: #e04e48;
@@ -140,26 +140,6 @@
   --button-surface: var(--color-white);
   --button-surface-contrast: var(--color-black);
 
-  --subscription-button-gradient:
-    linear-gradient(
-      315deg,
-      rgb(105 230 255 / 0.15) 0%,
-      rgb(99 73 233 / 0.5) 100%
-    ),
-    radial-gradient(
-      70.71% 70.71% at 50% 50%,
-      rgb(62 99 222 / 0.15) 0.01%,
-      rgb(66 0 123 / 0.5) 100%
-    ),
-    linear-gradient(
-      92deg,
-      #d000ff 0.38%,
-      #b009fe 37.07%,
-      #3e1ffc 65.17%,
-      #009dff 103.86%
-    ),
-    linear-gradient(var(--color-button-surface, #2d2e32));
-
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
   --code-bg-color: rgb(96 165 250 / 0.2);

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -31,7 +31,7 @@
 
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--component] text-sm text-amber-400" />
+      <i class="icon-[lucide--component] text-sm text-credit" />
       <Skeleton v-if="isLoading" width="4rem" height="1.25rem" class="w-full" />
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance
@@ -48,7 +48,7 @@
       </Button>
       <Button
         v-if="isCloud && isFreeTier"
-        variant="gradient"
+        variant="subscribe"
         size="sm"
         data-testid="upgrade-to-add-credits-button"
         @click="handleUpgradeToAddCredits"
@@ -72,7 +72,7 @@
         :fluid="false"
         :label="$t('subscription.subscribeToComfyCloud')"
         size="sm"
-        button-variant="gradient"
+        button-variant="subscribe"
         @subscribed="handleSubscribed"
       />
     </div>

src/components/topbar/TopbarSubscribeButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-if="isCloud && isFreeTier"
     class="mr-2 shrink-0 whitespace-nowrap"
-    variant="gradient"
+    variant="subscribe"
     size="sm"
     data-testid="topbar-subscribe-button"
     @click="handleClick"

src/components/ui/button/button.variants.ts

@@ -24,8 +24,8 @@ export const buttonVariants = cva({
       base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
       tertiary:
         'bg-tertiary-background text-base-foreground hover:bg-tertiary-background-hover',
-      gradient:
-        'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
+      subscribe:
+        'border-transparent bg-credit text-charcoal-800 hover:opacity-80'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -58,7 +58,7 @@ const variants = [
   'base',
   'tertiary',
   'overlay-white',
-  'gradient'
+  'subscribe'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = [
   'sm',

src/platform/cloud/subscription/components/CreditsTile.vue

@@ -147,7 +147,7 @@
     <div v-if="showActionButton" class="flex flex-col gap-3">
       <Button
         v-if="isFreeTier"
-        variant="gradient"
+        variant="subscribe"
         size="lg"
         class="w-full font-normal"
         @click="handleUpgradeToAddCredits"

src/platform/cloud/subscription/components/FreeTierQuota.vue

@@ -43,7 +43,7 @@ const label = computed(() =>
       v-if="hasInvalidNodes"
       class="flex w-full items-center justify-center gap-2"
     >
-      <i class="icon-[comfy--credits] bg-amber-400" />
+      <i class="icon-[comfy--credits] bg-credit" />
       {{ t('actionbar.freeTierPartner') }}
     </div>
     <div v-else class="flex w-full items-center justify-between">

src/platform/cloud/subscription/components/PricingTable.vue

@@ -123,7 +123,7 @@
               </span>
               <div class="flex flex-row items-center gap-1">
                 <i
-                  class="icon-[comfy--credits] size-4 shrink-0 bg-amber-400"
+                  class="icon-[comfy--credits] size-4 shrink-0 bg-credit"
                   aria-hidden="true"
                 />
                 <span

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -2,7 +2,7 @@
   <Button
     :size
     :disabled="disabled"
-    :variant="buttonVariant === 'gradient' ? 'gradient' : 'primary'"
+    :variant="buttonVariant === 'subscribe' ? 'subscribe' : 'primary'"
     :class="cn('font-bold', fluid && 'w-full')"
     @click="handleSubscribe"
   >
@@ -28,7 +28,7 @@ const {
 } = defineProps<{
   label?: string
   size?: 'sm' | 'lg'
-  buttonVariant?: 'default' | 'gradient'
+  buttonVariant?: 'default' | 'subscribe'
   fluid?: boolean
   disabled?: boolean
 }>()

src/platform/cloud/subscription/components/SubscribeToRun.vue

@@ -5,7 +5,7 @@
       showDelay: 600
     }"
     class="subscribe-to-run-button h-8 gap-1.5 rounded-lg px-4 whitespace-nowrap"
-    variant="gradient"
+    variant="subscribe"
     size="unset"
     data-testid="subscribe-to-run-button"
     @click="handleSubscribeToRun"

src/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -59,7 +59,7 @@
     <!-- Credits Section -->
 
     <div class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--component] text-sm text-amber-400" />
+      <i class="icon-[lucide--component] text-sm text-credit" />
       <Skeleton
         v-if="isLoadingBalance"
         width="4rem"
@@ -82,7 +82,7 @@
       <!-- Upgrade to add credits (free tier) -->
       <Button
         v-if="isActiveSubscription && permissions.canTopUp && isFreeTier"
-        variant="gradient"
+        variant="subscribe"
         size="sm"
         data-testid="upgrade-to-add-credits-button"
         @click="handleUpgradeToAddCredits"
@@ -110,7 +110,7 @@
             : $t('workspaceSwitcher.subscribe')
         "
         size="sm"
-        button-variant="gradient"
+        button-variant="subscribe"
       />
       <Button
         v-if="