From da1be650eae0a5dd761f2c3c7c2a23146a925d12 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 15 Jul 2026 15:49:15 +0100
Subject: [PATCH] Portal Billing: use design tokens for colours (#6996)

# Description of Changes

Swaps off-palette hard-coded blues/cyans on the usage & billing page for
shared design tokens, so button and meter colours match the rest of the
portal in both themes.

Part of a portal (processor) UI-consistency pass, split into small
focused PRs.

## Before / after
<img width="2816" height="1000" alt="after-billing-free"
src="https://github.com/user-attachments/assets/1f6acad3-56a1-47a8-b5f5-8cc25565492b"
/>
<img width="2816" height="2048" alt="after-billing-subscribed-dark"
src="https://github.com/user-attachments/assets/35a75057-bdf5-4143-bdfa-4dbe94b5429e"
/>
<img width="2816" height="2048" alt="after-billing-subscribed-light"
src="https://github.com/user-attachments/assets/f9e7eab8-7d01-4d29-b842-b5d38adf7780"
/>
<img width="2816" height="1000" alt="before-billing-free"
src="https://github.com/user-attachments/assets/c7e5eca6-a57a-4959-9781-fd664dbca576"
/>
<img width="2816" height="2004" alt="before-billing-subscribed-dark"
src="https://github.com/user-attachments/assets/d7fc08be-7b91-4803-bd50-3301b886e1c0"
/>
<img width="2816" height="2004" alt="before-billing-subscribed-light"
src="https://github.com/user-attachments/assets/ff430ec1-c3bb-4517-b6b5-2150c566eca4"
/>


---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have run `task check` to verify linters, typechecks, and tests
pass
- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing)
for more details.
---
 .../components/billing/EnterpriseUpsell.tsx   |  6 +-
 .../src/portal/components/billing/billing.css | 96 ++++++++++---------
 2 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx b/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx
index 3e6a9859dd..161b3bea72 100644
--- a/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx
+++ b/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx
@@ -35,7 +35,11 @@ export function EnterpriseUpsell({ bare = false }: Props) {
             )}
           </p>
         </div>
-        <Button size="sm" onClick={() => setActiveView("procurement")}>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => setActiveView("procurement")}
+        >
           {t("portal.billing.enterpriseUpsell.cta", "Explore Enterprise")}
         </Button>
       </div>
diff --git a/frontend/editor/src/portal/components/billing/billing.css b/frontend/editor/src/portal/components/billing/billing.css
index 1809a4f80c..423e917c94 100644
--- a/frontend/editor/src/portal/components/billing/billing.css
+++ b/frontend/editor/src/portal/components/billing/billing.css
@@ -119,7 +119,7 @@
 /* Free grant still offsetting spend — reads as a positive credit note, pulled up
    under the "PDFs processed" line. */
 .portal-billing__free-remaining {
-  color: var(--color-green-600, var(--color-green));
+  color: var(--color-green);
   margin-top: -0.5rem;
 }
 
@@ -171,7 +171,7 @@
 }
 
 .portal-billing__error {
-  color: var(--color-red, #b91c1c);
+  color: var(--color-red, var(--color-red-dark));
   font-size: 0.875rem;
   margin: 0.5rem 0;
 }
@@ -228,11 +228,7 @@
 
 .portal-billing__meter-fill {
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    var(--color-blue, #0a8bff),
-    var(--color-purple, #8b5cf6)
-  );
+  background: linear-gradient(90deg, var(--color-blue), var(--color-purple));
   border-radius: 999px;
   transition: width 200ms ease;
 }
@@ -308,28 +304,28 @@
   border-radius: 999px;
 }
 .payg-status[data-state="FULL"] {
-  background: #dcfce7;
-  color: #15803d;
+  background: var(--color-green-light);
+  color: var(--color-green-dark);
 }
 .payg-status[data-state="FULL"] .payg-status__dot {
-  background: #22c55e;
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+  background: var(--color-green);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-green) 18%, transparent);
 }
 .payg-status[data-state="WARNED"] {
-  background: #fef3c7;
-  color: #a16207;
+  background: var(--color-amber-light);
+  color: var(--color-amber-dark);
 }
 .payg-status[data-state="WARNED"] .payg-status__dot {
-  background: #eab308;
-  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
+  background: var(--color-amber);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 20%, transparent);
 }
 .payg-status[data-state="DEGRADED"] {
-  background: #fee2e2;
-  color: #b91c1c;
+  background: var(--color-red-light);
+  color: var(--color-red-dark);
 }
 .payg-status[data-state="DEGRADED"] .payg-status__dot {
-  background: #ef4444;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+  background: var(--color-red);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red) 20%, transparent);
 }
 
 /* Segmented usage bar */
@@ -347,13 +343,13 @@
   transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .payg-bar__fill[data-state="FULL"] {
-  background: linear-gradient(90deg, #0a8bff, #38bdf8);
+  background: var(--color-blue);
 }
 .payg-bar__fill[data-state="WARNED"] {
-  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+  background: var(--color-amber);
 }
 .payg-bar__fill[data-state="DEGRADED"] {
-  background: linear-gradient(90deg, #dc2626, #f87171);
+  background: var(--color-red);
 }
 
 /* ── Plan card (free state) ─────────────────────────────────────────────── */
@@ -394,7 +390,7 @@
 
 .portal-billing__plan-features li::before {
   content: "✓";
-  color: var(--color-green, #10b981);
+  color: var(--color-green);
   position: absolute;
   left: 0;
   font-weight: 600;
@@ -457,15 +453,15 @@
 }
 
 .portal-billing__breakdown-fill--blue {
-  background: #0a8bff;
+  background: var(--color-blue);
 }
 
 .portal-billing__breakdown-fill--purple {
-  background: #8b5cf6;
+  background: var(--color-purple);
 }
 
 .portal-billing__breakdown-fill--teal {
-  background: #06b6d4;
+  background: var(--color-cat-extraction);
 }
 
 /* ── Cap control ────────────────────────────────────────────────────────── */
@@ -570,10 +566,10 @@
    Same class names + structure so the visual is identical to the SaaS Plan
    page; when the shared-component move lands, these dedupe to one stylesheet. */
 .scc {
-  --scc-accent: #0a8bff;
-  --scc-accent-text: #0a8bff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.12);
-  --scc-accent-border: rgba(10, 139, 255, 0.25);
+  --scc-accent: var(--color-blue);
+  --scc-accent-text: var(--color-blue);
+  --scc-accent-soft: color-mix(in srgb, var(--color-blue) 12%, transparent);
+  --scc-accent-border: color-mix(in srgb, var(--color-blue) 25%, transparent);
   --scc-chip-bg: var(--color-bg-muted, #f8fafc);
   --scc-chip-border: var(--color-border, #e2e8f0);
   --scc-text-primary: var(--color-text-1, #0f172a);
@@ -585,11 +581,11 @@
   gap: 14px;
   margin-top: 0.75rem;
 }
-[data-mantine-color-scheme="dark"] .scc {
-  --scc-accent-text: #66b8ff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.16);
-  --scc-chip-bg: #272d35;
-  --scc-chip-border: #3d444e;
+[data-theme="dark"] .scc {
+  --scc-accent-text: var(--color-blue);
+  --scc-accent-soft: color-mix(in srgb, var(--color-blue) 16%, transparent);
+  --scc-chip-bg: var(--color-bg-muted);
+  --scc-chip-border: var(--color-border);
 }
 
 .scc-row {
@@ -736,9 +732,9 @@
   white-space: nowrap;
 }
 .portal-billing__role-pill[data-leader="true"] {
-  background: rgba(10, 139, 255, 0.12);
-  color: #0a8bff;
-  border: 1px solid rgba(10, 139, 255, 0.25);
+  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
+  color: var(--color-blue);
+  border: 1px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
 }
 .portal-billing__role-pill[data-leader="false"] {
   background: var(--color-bg-muted);
@@ -768,10 +764,10 @@
   margin-bottom: 8px;
 }
 .portal-billing__planhead-lbl--free {
-  color: #10b981;
+  color: var(--color-green);
 }
 .portal-billing__planhead-lbl--meter {
-  color: #0a8bff;
+  color: var(--color-blue);
 }
 .portal-billing__planhead-title {
   margin: 0;
@@ -839,7 +835,7 @@
 
 .portal-billing__invoice-link:focus-visible {
   outline: none;
-  border-color: var(--color-blue, #0a8bff);
+  border-color: var(--color-blue);
   background: var(--color-bg-muted, #f1f5f9);
 }
 
@@ -953,6 +949,12 @@
   align-items: flex-start;
   gap: 1rem;
 }
+/* Keep the CTA on one line at its natural width — in the narrow subscribed
+   column it was shrinking and clipping its label. */
+.portal-billing__enterprise-head > .sui-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 /* Bare variant — embeds in another card's column without its own surface. */
 .portal-billing__enterprise-bare {
   display: block;
@@ -988,13 +990,13 @@
   height: 100%;
 }
 .portal-billing__segbar-seg--blue {
-  background: #0a8bff;
+  background: var(--color-blue);
 }
 .portal-billing__segbar-seg--purple {
-  background: #8b5cf6;
+  background: var(--color-purple);
 }
 .portal-billing__segbar-seg--teal {
-  background: #06b6d4;
+  background: var(--color-cat-extraction);
 }
 .portal-billing__seglegend {
   display: flex;
@@ -1016,13 +1018,13 @@
   flex-shrink: 0;
 }
 .portal-billing__dot--blue {
-  background: #0a8bff;
+  background: var(--color-blue);
 }
 .portal-billing__dot--purple {
-  background: #8b5cf6;
+  background: var(--color-purple);
 }
 .portal-billing__dot--teal {
-  background: #06b6d4;
+  background: var(--color-cat-extraction);
 }
 .portal-billing__seglegend-label {
   font-weight: 600;