Fix admin SPA gold-fill design-contract violations; bump to 0.2.0:59

The featured-pill on-state and the sidebar upgrade CTA filled with gold, which
the brand contract and the admin-UI pill convention forbid (gold is a marketing
accent, never a button fill). The Featured toggle is now navy-filled with a
cream pip; the upgrade CTA is cream-filled with navy text and aligned to the
8px button radius. CSS / inline-style only in the embedded web/index.html — no
schema, no SDK, no behavior change.
This commit is contained in:
Grant
2026-06-18 08:02:49 -05:00
parent 554f3b2da0
commit 51a88f2a2f
2 changed files with 13 additions and 11 deletions
+10 -10
View File
@@ -415,16 +415,16 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
border:1px solid var(--border-1);
}
.featured-pill-toggle.on {
background:var(--gold-500); color:var(--navy-950);
border-color:var(--gold-500);
box-shadow:0 2px 6px rgba(191,160,104,0.25);
background:var(--navy-800); color:var(--cream-50);
border-color:var(--navy-800);
box-shadow:0 2px 6px rgba(14,31,51,0.18);
}
.featured-pill-toggle.on .state {
background:var(--navy-950); color:var(--gold-500);
border-color:var(--navy-950);
background:var(--cream-50); color:var(--navy-900);
border-color:var(--cream-50);
}
.featured-pill-toggle.on:hover {
background:var(--gold-400);
background:var(--navy-900);
}
/* Tier-card drag affordance — cursor signals draggability on hover,
@@ -534,12 +534,12 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
<div id="tier-banner-msg" style="margin-bottom:8px;"></div>
<a id="tier-banner-cta" target="_blank" rel="noopener" style="
display:inline-block; padding:5px 10px;
background:var(--gold-500); color:var(--navy-950);
background:var(--cream-50); color:var(--navy-900);
font-weight:700; font-size:11px;
border-radius:5px; text-decoration:none;
border-radius:8px; text-decoration:none;
transition:background 120ms;
" onmouseover="this.style.background='var(--gold-400)'"
onmouseout="this.style.background='var(--gold-500)'"></a>
" onmouseover="this.style.background='var(--cream-200)'"
onmouseout="this.style.background='var(--cream-50)'"></a>
</div>
<div class="footer" id="sidebar-footer">
<span class="dot warn"></span>