Skip to content

Commit a29a37f

Browse files
snissnsnissn
committed
studio: restyle UI to match tokenhost web visual direction
1 parent d874d26 commit a29a37f

1 file changed

Lines changed: 32 additions & 20 deletions

File tree

‎packages/cli/src/index.ts‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -374,39 +374,51 @@ function renderStudioHtml(): string {
374374
<style>
375375
:root { color-scheme: light; ${cssVars}; --ok:var(--th-success); --err:var(--th-danger); --warn:var(--th-accent); }
376376
* { box-sizing: border-box; }
377-
body { margin:0; font-family: var(--th-font-body); background: radial-gradient(circle at 8% 0%, #255bb688, transparent 42%), radial-gradient(circle at 88% 0%, #50b9fa66, transparent 36%), linear-gradient(155deg, var(--th-bg) 20%, var(--th-bg-alt) 100%); color: var(--th-text); }
378-
.wrap { max-width: 1400px; margin: 0 auto; padding: 20px; }
377+
body { margin:0; font-family: var(--th-font-body); background: radial-gradient(circle at 18% 24%, #f1f6ff 0, #f1f6ff 44%, transparent 44%), radial-gradient(circle at 18% 24%, #f7faff 0, #f7faff 52%, transparent 52%), linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); color: #021a4d; }
378+
.wrap { max-width: 1400px; margin: 0 auto; padding: 28px 24px 40px; position: relative; }
379+
.hero { margin-bottom: 18px; }
380+
.brandMark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
381+
.brandRing { width: 42px; height: 42px; border-radius: 50%; border: 5px solid #0a4df0; border-right-color: transparent; transform: rotate(-20deg); }
382+
.brandWord { font-family: var(--th-font-display); font-size: 52px; font-weight: 900; letter-spacing: .01em; color: #031f63; line-height: 1; }
383+
.heroTitle { margin: 0; font-size: 34px; font-family: var(--th-font-display); font-weight: 800; color: #0a43d8; letter-spacing: .01em; }
384+
.heroSub { margin-top: 6px; color: #375b9d; font-size: 15px; max-width: 900px; }
379385
.row { display:grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
380-
.panel { background: linear-gradient(180deg, #0f2958cf, #0d234bd4); border:1px solid var(--th-border); border-radius: var(--th-radius-lg); padding: var(--th-space-md); box-shadow: 0 8px 32px #02122f4d; }
381-
.title { margin:0 0 10px 0; font-size: 22px; font-family: var(--th-font-display); font-weight: 700; }
382-
.muted { color: var(--th-muted); font-size: 13px; }
383-
textarea { width:100%; min-height: 120px; border-radius: var(--th-radius-sm); border:1px solid var(--th-border); background: #071b3f; color: var(--th-text); padding: 10px; font-family: var(--th-font-mono); font-size: 13px; line-height: 1.35; }
384-
input[type=text], input[type=number], select { width: 100%; border-radius: var(--th-radius-sm); border:1px solid var(--th-border); background:#071b3f; color:var(--th-text); padding: 8px; }
385-
label { display: block; font-size: 12px; color: var(--th-muted); margin-bottom: 4px; }
386+
.panel { background: #ffffff; border:1px solid #d7e4ff; border-radius: var(--th-radius-lg); padding: var(--th-space-md); box-shadow: 0 8px 24px #1345ac1a; }
387+
.title { margin:0 0 10px 0; font-size: 28px; font-family: var(--th-font-display); font-weight: 800; color: #0a43d8; letter-spacing: .01em; }
388+
.muted { color: #4e6ea7; font-size: 13px; }
389+
textarea { width:100%; min-height: 120px; border-radius: var(--th-radius-sm); border:1px solid #c9dbff; background: #f8fbff; color: #0a255f; padding: 10px; font-family: var(--th-font-mono); font-size: 13px; line-height: 1.35; }
390+
input[type=text], input[type=number], select { width: 100%; border-radius: var(--th-radius-sm); border:1px solid #c9dbff; background:#f8fbff; color:#0a255f; padding: 8px; }
391+
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus { outline: 2px solid #7fb5ff; outline-offset: 0; border-color: #7fb5ff; }
392+
label { display: block; font-size: 12px; color: #46689f; margin-bottom: 4px; font-weight: 600; }
386393
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
387394
.grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
388-
.card { border:1px solid var(--th-border); border-radius: var(--th-radius-sm); padding: 8px; margin-top: 8px; background: #0a2a5888; }
389-
.sectionTitle { font-size: 14px; font-weight: 700; margin-top: 10px; }
395+
.card { border:1px solid #d7e4ff; border-radius: var(--th-radius-sm); padding: 8px; margin-top: 8px; background: #ffffff; }
396+
.sectionTitle { font-size: 14px; font-weight: 800; margin-top: 10px; color: #0b3bb6; }
390397
.stack { display:flex; flex-direction:column; gap:8px; }
391398
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
392399
.configList { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
393-
.configRow { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; border:1px solid var(--th-border); border-radius: var(--th-radius-sm); padding:8px; background: #0a2a5888; }
400+
.configRow { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; border:1px solid #d7e4ff; border-radius: var(--th-radius-sm); padding:8px; background: #ffffff; }
394401
.configPath { font-family: var(--th-font-mono); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
395-
button { border:1px solid var(--th-border); color:var(--th-text); background:#15407f; border-radius: var(--th-radius-sm); padding:8px 10px; cursor:pointer; transition: transform var(--th-motion-fast) ease, background var(--th-motion-base) ease; font-weight: 600; }
396-
button:hover { background:#1a4f9d; }
402+
button { border:1px solid #0f56e0; color:#ffffff; background:#0f56e0; border-radius: var(--th-radius-sm); padding:8px 10px; cursor:pointer; transition: transform var(--th-motion-fast) ease, background var(--th-motion-base) ease; font-weight: 700; }
403+
button:hover { background:#0943b8; }
404+
button:active { transform: translateY(1px); }
397405
.pill { display:inline-block; padding: 2px 8px; border-radius:999px; font-size: 12px; border:1px solid transparent; }
398-
.ok { color:#d8ffe9; background: color-mix(in srgb, var(--th-success) 24%, transparent); border-color: color-mix(in srgb, var(--th-success) 45%, transparent);}
399-
.err { color:#ffd6d6; background: color-mix(in srgb, var(--th-danger) 24%, transparent); border-color: color-mix(in srgb, var(--th-danger) 45%, transparent);}
400-
.warn { color:#fff6d5; background: color-mix(in srgb, var(--th-accent) 24%, transparent); border-color: color-mix(in srgb, var(--th-accent) 45%, transparent);}
406+
.ok { color:#03552e; background: #d9f8e8; border-color: #97e0bc;}
407+
.err { color:#8a1a1d; background: #ffdfe0; border-color: #f2a3a6;}
408+
.warn { color:#6b5300; background: #fff2c8; border-color: #f2d266;}
401409
ul { margin: 8px 0 0 18px; padding:0; }
402410
li { margin: 2px 0; }
403-
pre { white-space: pre-wrap; word-break: break-word; background:#071b3f; border:1px solid var(--th-border); border-radius: var(--th-radius-sm); padding: 10px; max-height: 280px; overflow:auto; }
411+
pre { white-space: pre-wrap; word-break: break-word; background:#f8fbff; border:1px solid #c9dbff; border-radius: var(--th-radius-sm); padding: 10px; max-height: 280px; overflow:auto; color: #0a255f; }
412+
@media (max-width: 980px) { .row { grid-template-columns: 1fr; } .grid3 { grid-template-columns: 1fr; } .brandWord { font-size: 40px; } .heroTitle { font-size: 28px; } }
404413
</style>
405414
</head>
406415
<body>
407416
<div class="wrap">
408-
<h1 style="margin:0 0 8px 0;">Token Host Studio (Local)</h1>
409-
<div class="muted" style="margin-bottom:14px;">Edit THS JSON, validate/lint in real-time, save/load files, and preview routes + contract surface.</div>
417+
<header class="hero">
418+
<div class="brandMark"><span class="brandRing"></span><span class="brandWord">token host</span></div>
419+
<h1 class="heroTitle">Token Host Studio</h1>
420+
<div class="heroSub">Edit THS JSON, validate/lint in real-time, save/load files, and preview routes + contract surface.</div>
421+
</header>
410422
<section class="panel" style="margin-bottom:14px;">
411423
<h2 class="title">Config Manager</h2>
412424
<div class="grid3">
@@ -696,7 +708,7 @@ function renderStudioHtml(): string {
696708
function renderForm() {
697709
ensureState();
698710
const c = state.collections[selectedCollectionIndex] || makeCollection();
699-
const collectionsNav = state.collections.map((col, i) => '<button data-action=\"pick-collection\" data-ci=\"' + i + '\" ' + (i === selectedCollectionIndex ? 'style=\"outline:2px solid #fff;\"' : '') + '>' + esc(col.name || ('Collection ' + (i + 1))) + '</button> <button data-action=\"del-collection\" data-ci=\"' + i + '\">x</button>').join(' ');
711+
const collectionsNav = state.collections.map((col, i) => '<button data-action=\"pick-collection\" data-ci=\"' + i + '\" ' + (i === selectedCollectionIndex ? 'style=\"outline:2px solid #0d5bff;\"' : '') + '>' + esc(col.name || ('Collection ' + (i + 1))) + '</button> <button data-action=\"del-collection\" data-ci=\"' + i + '\">x</button>').join(' ');
700712
formRootEl.innerHTML =
701713
'<div class=\"card\"><div class=\"sectionTitle\">Document</div><div class=\"grid2\">' +
702714
'<div><label>thsVersion</label><input type=\"text\" data-bind=\"thsVersion\" value=\"' + esc(state.thsVersion) + '\"></div>' +

0 commit comments

Comments
 (0)