Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-05 21:20:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Backport] update subscription panel for new designs (#6397)

Browse Source 
## Summary
Backport of PR #6378 to `rh-test` branch.

## Changes
- Extract credit calculations into useSubscriptionCredits composable
- Extract action handlers into useSubscriptionActions composable
- Add comprehensive component and unit tests
- Update subscription panel layout to match Figma design exactly
- Add proper design tokens for modal card surfaces
- Update terminology from "API Nodes" to "Partner Nodes"
- Make credit breakdown dynamic with real API data
- Add proper loading states and error handling
- Remove unused tailwindcss eslint dependencies

## Conflicts Resolved
- Resolved merge conflicts in `packages/design-system/src/css/style.css`
related to button surface CSS variables

## Test plan
- Existing tests pass
- New tests for subscription composables and components

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6397-Backport-update-subscription-panel-for-new-designs-29c6d73d3650812aaa12ff242fd5e078)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
This commit is contained in:
Christian Byrne
2025-10-30 22:11:13 -07:00
committed by GitHub
parent 5fa4dcdc67
commit daa9aff1f3
11 changed files with 857 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/design-system/src/css/style.css
View File

@@ -126,6 +126,11 @@
--content-hover-bg: #adadad;
--content-hover-fg: #000;
--button-surface: var(--color-white);
--button-surface-contrast: var(--color-black);
--modal-card-button-surface: var(--color-smoke-300);
/* Code styling colors for help menu*/
--code-text-color: rgb(0 122 255 / 1);
--code-bg-color: rgb(96 165 250 / 0.2);
@@ -168,6 +173,15 @@
.dark-theme {
--accent-primary: var(--color-pure-white);
--backdrop: var(--color-neutral-900);
--button-surface: var(--color-charcoal-600);
--button-surface-contrast: var(--color-white);
--button-hover-surface: var(--color-charcoal-600);
--button-active-surface: var(--color-charcoal-600);
--button-icon: var(--color-smoke-800);
--modal-card-button-surface: var(--color-charcoal-300);
--dialog-surface: var(--color-neutral-700);
--node-component-border: var(--color-stone-200);
--node-component-border-error: var(--color-danger-100);
@@ -196,6 +210,12 @@
@theme inline {
--color-backdrop: var(--backdrop);
--color-button-active-surface: var(--button-active-surface);
--color-button-hover-surface: var(--button-hover-surface);
--color-button-icon: var(--button-icon);
--color-button-surface: var(--button-surface);
--color-button-surface-contrast: var(--button-surface-contrast);
--color-modal-card-button-surface: var(--modal-card-button-surface);
--color-dialog-surface: var(--dialog-surface);
--color-node-component-border: var(--node-component-border);
--color-node-component-executing: var(--node-component-executing);