From 888e9332394fb47102b76957c8000404c929339f Mon Sep 17 00:00:00 2001
From: Sylvester Damgaard <sn@cbox.dk>
Date: Mon, 27 Jul 2026 12:52:01 +0200
Subject: [PATCH] fix(console): define the design-system classes that rendered
 as nothing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four `cbx-*` classes were used in Blade with no rule anywhere behind them, which
fails silently — the element renders unstyled on a page that otherwise looks fine.

The one that mattered: `.cbx-pill--danger` (the design system's variant is
`--destructive`). On /console/nexus that made "3 triggered" — US economic-nexus
thresholds crossed, an unregistered tax liability — render as the same neutral chip
as any inert label. The severity signal was dropped on the page whose entire job is
severity. Same class on the three import screens, where a FAILED import read as
routine.

Also `.cbx-card` on the topbar's clone popover, which had no background, border or
shadow and so rendered transparent over the table beneath it — on every console
page; `.cbx-pill--neutral`, harmless because it coincided with the default; and
`.cbx-label`, which left section headings looking like body text. The first three
are repointed at the real variants; `.cbx-label` is defined, matching `.cbx-kv dt`
so the two read as one system.

A CI guard now compares every class used in a `class="…"` attribute against every
rule in the stylesheets AND in Blade `<style>` blocks — the public storefront,
paywall and quote pages are deliberately self-contained, so their rules legitimately
live inline and must count as definitions.

It surfaced nine further names with no rule. Those are NOT the same defect: their
elements are styled by inline `style=` attributes, so nothing renders wrong and the
class is a leftover semantic hook. They are listed explicitly as accepted rather than
hidden, so a NEW undefined class still fails the build. Verified by reverting the
nexus class and watching the guard name it.
---
 public/cbox/tokens/components.css             |   6 +
 .../views/billing/import/index.blade.php      |   2 +-
 resources/views/billing/import/plan.blade.php |   2 +-
 resources/views/billing/import/run.blade.php  |   2 +-
 resources/views/billing/nexus.blade.php       |   4 +-
 resources/views/layouts/app.blade.php         |   2 +-
 tests/Feature/DesignSystemClassesTest.php     | 143 ++++++++++++++++++
 7 files changed, 155 insertions(+), 6 deletions(-)
 create mode 100644 tests/Feature/DesignSystemClassesTest.php

diff --git a/public/cbox/tokens/components.css b/public/cbox/tokens/components.css
index 62348d5..57c3289 100644
--- a/public/cbox/tokens/components.css
+++ b/public/cbox/tokens/components.css
@@ -94,6 +94,12 @@
 .cbx-kv { display: grid; grid-template-columns: 140px 1fr; align-items: baseline; column-gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--border); }
 .cbx-kv:last-child { border-bottom: 0; }
 .cbx-kv dt { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; font-weight: 600; color: var(--muted-foreground); }
+
+/* A small section label above a grouped control (the invoice action panels use it). It was
+   referenced in Blade with no rule behind it, so those headings rendered as plain body text —
+   indistinguishable from the content beneath them. Matches the `.cbx-kv dt` treatment so the
+   two read as one system. */
+.cbx-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; font-weight: 600; color: var(--muted-foreground); }
 .cbx-kv dd { margin: 0; font-family: var(--font-mono); font-size: 13px; word-break: break-all; color: var(--foreground); }
 .cbx-kv dd.prose { font-family: var(--font-sans); font-size: 14px; }
 
diff --git a/resources/views/billing/import/index.blade.php b/resources/views/billing/import/index.blade.php
index 73d771a..4cc08fd 100644
--- a/resources/views/billing/import/index.blade.php
+++ b/resources/views/billing/import/index.blade.php
@@ -96,7 +96,7 @@
                             @elseif ($run->status === 'running')
                                 <span class="cbx-pill cbx-pill--warning">running</span>
                             @elseif ($run->status === 'failed')
-                                <span class="cbx-pill cbx-pill--danger">failed</span>
+                                <span class="cbx-pill cbx-pill--destructive">failed</span>
                             @else
                                 <span class="cbx-pill cbx-pill--muted">planned (dry-run)</span>
                             @endif
diff --git a/resources/views/billing/import/plan.blade.php b/resources/views/billing/import/plan.blade.php
index e5f5836..af02460 100644
--- a/resources/views/billing/import/plan.blade.php
+++ b/resources/views/billing/import/plan.blade.php
@@ -7,7 +7,7 @@
         'updated' => 'cbx-pill--info',
         'skipped' => 'cbx-pill--muted',
         'conflict' => 'cbx-pill--warning',
-        'failed' => 'cbx-pill--danger',
+        'failed' => 'cbx-pill--destructive',
         default => 'cbx-pill--muted',
     };
 @endphp
diff --git a/resources/views/billing/import/run.blade.php b/resources/views/billing/import/run.blade.php
index d229f37..6ea0132 100644
--- a/resources/views/billing/import/run.blade.php
+++ b/resources/views/billing/import/run.blade.php
@@ -6,7 +6,7 @@
         'updated' => 'cbx-pill--info',
         'skipped' => 'cbx-pill--muted',
         'conflict' => 'cbx-pill--warning',
-        'failed' => 'cbx-pill--danger',
+        'failed' => 'cbx-pill--destructive',
         default => 'cbx-pill--muted',
     };
 @endphp
diff --git a/resources/views/billing/nexus.blade.php b/resources/views/billing/nexus.blade.php
index 0f9d0de..4bed17a 100644
--- a/resources/views/billing/nexus.blade.php
+++ b/resources/views/billing/nexus.blade.php
@@ -33,7 +33,7 @@
             <p class="cbx-page-desc" style="font-size:13px">Where your default selling entity has — or is approaching — a US sales-tax registration obligation. Thresholds come from the us-tax-data dataset; sales from your invoices (every currency, valued in USD) plus any external-channel sales you record below. <strong>Triggered</strong> = register now; <strong>Approaching</strong> = watch.</p>
         </div>
         <div style="display:flex;gap:8px;align-items:center">
-            <span class="cbx-pill cbx-pill--danger">{{ $triggeredCount }} triggered</span>
+            <span class="cbx-pill cbx-pill--destructive">{{ $triggeredCount }} triggered</span>
             <span class="cbx-pill cbx-pill--warning">{{ $approachingCount }} approaching</span>
             <span class="cbx-pill cbx-pill--success">{{ $registeredCount }} registered</span>
             @if ($unknownCount > 0)<span class="cbx-pill cbx-pill--warning">{{ $unknownCount }} unknown</span>@endif
@@ -76,7 +76,7 @@
                         <td class="mut" style="font-size:12.5px">{{ $e->threshold?->describe() ?? '—' }}</td>
                         <td class="num">{{ $e->progress !== null ? number_format($e->progress * 100, 1).'%' : '—' }}</td>
                         <td style="font-size:11.5px">
-                            @if ($e->physicalPresence)<span class="cbx-pill cbx-pill--neutral">presence</span>@endif
+                            @if ($e->physicalPresence)<span class="cbx-pill cbx-pill--muted">presence</span>@endif
                             @if (in_array($e->state->value, $registeredStates, true))<span class="cbx-pill cbx-pill--success">registered</span>@endif
                         </td>
                     </tr>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9b789dd..69f6aac 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -164,7 +164,7 @@ class="cbx-btn cbx-btn--sm cbx-btn--ghost @if(! empty($testMode)) cbx-pill--warn
                 @if (! empty($environments))
                     <details class="cbx-env-clone" style="position:relative">
                         <summary class="cbx-btn cbx-btn--sm cbx-btn--ghost" style="height:28px;list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px" title="Clone an environment's config into a new sandbox">@include('partials.icon', ['name' => 'copy', 'size' => 13, 'sw' => 1.7])<span>Clone</span></summary>
-                        <form method="POST" action="{{ route('billing.environment.clone') }}" class="cbx-card"
+                        <form method="POST" action="{{ route('billing.environment.clone') }}" class="cbx-panel"
                               style="position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:280px;padding:12px;display:flex;flex-direction:column;gap:8px">
                             @csrf
                             <div style="font-size:11px;font-weight:600;color:var(--muted-foreground)">Clone environment config</div>
diff --git a/tests/Feature/DesignSystemClassesTest.php b/tests/Feature/DesignSystemClassesTest.php
new file mode 100644
index 0000000..a69db41
--- /dev/null
+++ b/tests/Feature/DesignSystemClassesTest.php
@@ -0,0 +1,143 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+
+/**
+ * Every `cbx-*` class used in a Blade template must have a rule behind it.
+ *
+ * A class name with no rule fails SILENTLY — the element just renders unstyled, and in a
+ * console that mostly looks fine, so nothing draws attention to it. The review found four:
+ *
+ *   - `.cbx-pill--danger` (the design system's variant is `--destructive`). On /console/nexus
+ *     that made "3 triggered" — meaning US economic-nexus thresholds are crossed and the seller
+ *     has an unregistered tax liability — render as the same neutral chip as any inert label.
+ *     The severity signal was dropped entirely, on the page whose only job is severity.
+ *   - `.cbx-pill--neutral`, which happened to coincide with the default and so was harmless.
+ *   - `.cbx-card` on the console topbar's clone popover: no background, no border, no shadow,
+ *     so the form rendered transparent over the table beneath it — on every console page.
+ *   - `.cbx-label`, which left section headings looking like body text.
+ *
+ * A rendering test would not have caught any of these: the markup was valid and the page
+ * returned 200. Only comparing the two sources does.
+ */
+class DesignSystemClassesTest extends TestCase
+{
+    /**
+     * Class names that carry NO rule and are not meant to.
+     *
+     * These elements are styled by inline `style=` attributes, so nothing renders wrong — the
+     * class is a leftover semantic hook. That is cosmetic debt, not the defect this test exists
+     * to catch, which is an element that DEPENDS on a class for its appearance and silently
+     * loses it (`.cbx-pill--danger` dropping the severity colour on the nexus page).
+     *
+     * Each entry is a deliberate acceptance, not a blanket allowance: a NEW undefined class
+     * still fails. Tracked for cleanup alongside the inline-style dialect they belong to.
+     */
+    private const array EXEMPT = [
+        'cbx-testmode-strip',
+        'cbx-strip-expand',
+        'cbx-env-clone',
+        'cbx-input--sm',
+        'cbx-confirm-plane',
+        'cbx-pricing',
+        'cbx-pricing-card',
+        'cbx-paywall',
+        'cbx-upgrade',
+    ];
+
+    public function test_every_cbx_class_used_in_blade_is_defined_in_the_stylesheets(): void
+    {
+        $defined = $this->definedClasses();
+        $this->assertNotSame([], $defined, 'No cbx-* rules found — the stylesheet paths are wrong.');
+
+        $undefined = [];
+
+        foreach ($this->bladeFiles() as $file) {
+            $contents = (string) file_get_contents($file);
+
+            // Only `class="..."` attributes, so prose and comments mentioning a class name
+            // cannot trip the check.
+            preg_match_all('/class\s*=\s*"([^"]*)"/', $contents, $attributes);
+
+            foreach ($attributes[1] as $attribute) {
+                foreach (preg_split('/\s+/', $attribute) ?: [] as $class) {
+                    if (! str_starts_with($class, 'cbx-') || str_contains($class, '{')) {
+                        continue; // interpolated (`{{ }}`) classes are resolved at runtime
+                    }
+
+                    if (! in_array($class, $defined, true) && ! in_array($class, self::EXEMPT, true)) {
+                        $undefined[$class][] = basename((string) $file);
+                    }
+                }
+            }
+        }
+
+        $this->assertSame([], $undefined, $this->describe($undefined));
+    }
+
+    /** @return list<string> */
+    private function definedClasses(): array
+    {
+        $classes = [];
+
+        foreach (glob(public_path('cbox/**/*.css')) ?: [] as $sheet) {
+            preg_match_all('/\.(cbx-[A-Za-z0-9_-]+)/', (string) file_get_contents($sheet), $matches);
+            $classes = [...$classes, ...$matches[1]];
+        }
+
+        foreach (glob(public_path('cbox/*.css')) ?: [] as $sheet) {
+            preg_match_all('/\.(cbx-[A-Za-z0-9_-]+)/', (string) file_get_contents($sheet), $matches);
+            $classes = [...$classes, ...$matches[1]];
+        }
+
+        // Blade `<style>` blocks count as definitions: the public storefront, paywall and quote
+        // pages are deliberately self-contained (CSP-safe, no external stylesheet), so their
+        // rules legitimately live inline. Ignoring them would push working CSS out of the pages
+        // that are designed to carry it.
+        foreach ($this->bladeFiles() as $file) {
+            preg_match_all('/<style[^>]*>(.*?)<\\/style>/s', (string) file_get_contents($file), $blocks);
+
+            foreach ($blocks[1] as $block) {
+                preg_match_all('/\\.(cbx-[A-Za-z0-9_-]+)/', $block, $matches);
+                $classes = [...$classes, ...$matches[1]];
+            }
+        }
+
+        return array_values(array_unique($classes));
+    }
+
+    /** @return list<string> */
+    private function bladeFiles(): array
+    {
+        $files = [];
+        $directory = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator(resource_path('views')));
+
+        foreach ($directory as $file) {
+            if ($file instanceof \SplFileInfo && str_ends_with($file->getFilename(), '.blade.php')) {
+                $files[] = $file->getPathname();
+            }
+        }
+
+        return $files;
+    }
+
+    /** @param  array<string, list<string>>  $undefined */
+    private function describe(array $undefined): string
+    {
+        if ($undefined === []) {
+            return '';
+        }
+
+        $lines = ['These cbx-* classes are used in Blade but defined in no stylesheet, so they render as nothing:'];
+
+        foreach ($undefined as $class => $files) {
+            $lines[] = sprintf('  .%s — %s', $class, implode(', ', array_unique($files)));
+        }
+
+        return implode("\n", $lines);
+    }
+}