Skip to content

Commit f9c8e88

Browse files
snissnsnissn
committed
feat(ui-template): apply tokenhost light branding to generated apps
1 parent ad20684 commit f9c8e88

6 files changed

Lines changed: 89 additions & 56 deletions

File tree

‎packages/templates/next-export-ui/app/globals.css‎

Lines changed: 72 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
:root {
2-
--th-bg: #06122b;
3-
--th-bg-alt: #0a1f45;
4-
--th-panel: #0f2958cc;
5-
--th-panel-strong: #103062;
6-
--th-border: #7eb8ff55;
7-
--th-text: #f3f8ff;
8-
--th-muted: #b6caea;
9-
--th-primary: #4cb1f7;
10-
--th-primary-strong: #1e8fe0;
2+
--th-bg: #ffffff;
3+
--th-bg-alt: #eef4ff;
4+
--th-panel: #eff5ff;
5+
--th-panel-strong: #e3edff;
6+
--th-border: #bed4ff;
7+
--th-text: #0a255f;
8+
--th-muted: #486ca6;
9+
--th-primary: #0f56e0;
10+
--th-primary-strong: #0943b8;
1111
--th-accent: #ffc700;
12-
--th-success: #12c26d;
13-
--th-danger: #ff5f63;
12+
--th-success: #09995a;
13+
--th-danger: #c52f44;
1414
--th-radius-sm: 10px;
1515
--th-radius-md: 14px;
1616
--th-radius-lg: 20px;
@@ -34,11 +34,11 @@ html, body {
3434

3535
body {
3636
margin: 0;
37-
background: radial-gradient(circle at 8% 0%, #255bb688, transparent 42%),
38-
radial-gradient(circle at 88% 0%, #50b9fa66, transparent 36%),
39-
linear-gradient(155deg, var(--th-bg) 20%, var(--th-bg-alt) 100%);
37+
background: var(--th-bg);
4038
color: var(--th-text);
4139
font-family: var(--th-font-body);
40+
position: relative;
41+
overflow-x: hidden;
4242
}
4343

4444
a {
@@ -51,15 +51,26 @@ a {
5151
margin: 0 auto;
5252
padding: var(--th-space-lg) var(--th-space-md) 64px;
5353
position: relative;
54+
z-index: 1;
55+
min-height: 100vh;
56+
display: flex;
57+
flex-direction: column;
5458
}
5559

56-
.heroGlow {
60+
.topBackground {
5761
position: absolute;
58-
inset: 0;
59-
pointer-events: none;
60-
background:
61-
radial-gradient(760px 140px at 70% 0%, #4cb1f740, transparent 70%),
62-
radial-gradient(600px 120px at 20% 4%, #ffc70040, transparent 68%);
62+
z-index: -1;
63+
top: -30vw;
64+
left: -10vh;
65+
width: 150vw;
66+
min-width: 600px;
67+
max-width: 150vw;
68+
display: inline-block;
69+
height: 200vh;
70+
background-image: url('/static/media/Token%20BIG-01.cfe69f33.png');
71+
background-position: 0 0;
72+
background-size: contain;
73+
background-repeat: no-repeat;
6374
}
6475

6576
.nav {
@@ -69,24 +80,29 @@ a {
6980
gap: var(--th-space-sm);
7081
padding: var(--th-space-md);
7182
border: 1px solid var(--th-border);
72-
background: linear-gradient(120deg, #102d5f 0%, #113c78 100%);
83+
background: linear-gradient(180deg, #fcfeff 0%, #f3f8ff 100%);
7384
border-radius: var(--th-radius-lg);
74-
backdrop-filter: blur(8px);
75-
box-shadow: 0 18px 50px #0000002f;
85+
box-shadow: 0 12px 28px #1345ac1a;
7686
}
7787

7888
.brand {
7989
display: flex;
80-
align-items: baseline;
81-
gap: var(--th-space-sm);
90+
align-items: center;
91+
gap: 12px;
92+
}
93+
94+
.brandWordmark {
95+
display: block;
96+
width: min(320px, 56vw);
97+
height: auto;
8298
}
8399

84100
.brand h1 {
85-
font-size: 28px;
101+
font-size: 24px;
86102
font-family: var(--th-font-display);
87103
letter-spacing: 0.02em;
88104
margin: 0;
89-
color: #ffffff;
105+
color: #0a43d8;
90106
}
91107

92108
.badge {
@@ -96,23 +112,24 @@ a {
96112
padding: 4px 8px;
97113
border: 1px dashed var(--th-border);
98114
border-radius: 999px;
99-
background: #0e245280;
115+
background: #ffffff;
100116
}
101117

102118
.grid {
103119
display: grid;
104120
grid-template-columns: repeat(12, 1fr);
105121
gap: var(--th-space-sm);
106122
margin-top: var(--th-space-md);
123+
margin-bottom: var(--th-space-lg);
107124
}
108125

109126
.card {
110127
grid-column: span 12;
111128
border: 1px solid var(--th-border);
112-
background: linear-gradient(180deg, #0f2958cf, #0d234bd4);
129+
background: linear-gradient(180deg, #fdfefe 0%, #f4f8ff 100%);
113130
border-radius: var(--th-radius-lg);
114131
padding: var(--th-space-md);
115-
box-shadow: 0 8px 32px #02122f4d;
132+
box-shadow: 0 8px 24px #1345ac1a;
116133
}
117134

118135
@media (min-width: 820px) {
@@ -151,8 +168,8 @@ a {
151168
justify-content: center;
152169
gap: 8px;
153170
border: 1px solid var(--th-border);
154-
background: #15407f;
155-
color: var(--th-text);
171+
background: #0f56e0;
172+
color: #ffffff;
156173
padding: 10px 12px;
157174
border-radius: var(--th-radius-md);
158175
cursor: pointer;
@@ -161,22 +178,23 @@ a {
161178
}
162179

163180
.btn:hover {
164-
background: #1a4f9d;
181+
background: #0943b8;
165182
}
166183

167184
.btn:active {
168185
transform: translateY(1px);
169186
}
170187

171188
.btn.primary {
172-
border-color: #8fd4ff;
189+
border-color: #0f56e0;
173190
background: linear-gradient(120deg, var(--th-primary), var(--th-primary-strong));
174-
color: #001d42;
191+
color: #ffffff;
175192
}
176193

177194
.btn.danger {
178-
border-color: #ff8f91;
179-
background: #70212b;
195+
border-color: #c52f44;
196+
background: #c52f44;
197+
color: #ffffff;
180198
}
181199

182200
.kv {
@@ -201,7 +219,7 @@ a {
201219
width: 100%;
202220
border: 1px solid var(--th-border);
203221
border-radius: var(--th-radius-md);
204-
background: #071b3f;
222+
background: #ffffff;
205223
color: var(--th-text);
206224
padding: 10px 12px;
207225
}
@@ -219,7 +237,7 @@ a {
219237
font-size: 12px;
220238
white-space: pre-wrap;
221239
word-break: break-word;
222-
background: #071b3f;
240+
background: #ffffff;
223241
border: 1px solid var(--th-border);
224242
border-radius: var(--th-radius-md);
225243
padding: 12px;
@@ -229,26 +247,38 @@ a {
229247
margin-top: var(--th-space-sm);
230248
padding: var(--th-space-sm) var(--th-space-md);
231249
border-radius: var(--th-radius-md);
232-
background: linear-gradient(90deg, #74202588, #4e182188);
233-
border: 1px solid #ff8f91;
250+
background: #fff1f4;
251+
border: 1px solid #f2adbb;
234252
display: flex;
235253
gap: var(--th-space-sm);
236254
align-items: center;
237255
justify-content: space-between;
238256
font-size: 14px;
239257
}
240258

259+
.siteFooter {
260+
margin-top: auto;
261+
border-top: 1px solid var(--th-border);
262+
padding-top: var(--th-space-md);
263+
color: var(--th-muted);
264+
font-size: 13px;
265+
text-align: center;
266+
}
267+
241268
@media (max-width: 820px) {
242269
.networkAlert {
243270
flex-direction: column;
244271
align-items: flex-start;
245272
}
246273
.brand h1 {
247-
font-size: 22px;
274+
font-size: 20px;
248275
}
249276
.displayTitle {
250277
font-size: 30px;
251278
}
279+
.brandWordmark {
280+
width: min(240px, 62vw);
281+
}
252282
.row {
253283
flex-direction: column;
254284
align-items: flex-start;

‎packages/templates/next-export-ui/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ export default function RootLayout(props: { children: React.ReactNode }) {
1818
return (
1919
<html lang="en">
2020
<body style={themeVars}>
21+
<div className="topBackground" aria-hidden="true" />
2122
<div className="container">
22-
<div className="heroGlow" />
2323
<div className="nav">
2424
<div className="brand">
25+
<img className="brandWordmark" src="/static/media/Wordmark.svg" alt="Token Host" />
2526
<h1>{ths.app.name}</h1>
2627
<span className="badge">{ths.schemaVersion}</span>
2728
</div>
@@ -32,6 +33,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
3233
</div>
3334
<NetworkStatus />
3435
{props.children}
36+
<footer className="siteFooter">Powered by Token Host</footer>
3537
</div>
3638
</body>
3739
</html>

‎packages/templates/next-export-ui/public/static/media/Token BIG-01.cfe69f33.png‎

217 KB
Loading

‎packages/templates/next-export-ui/public/static/media/Wordmark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/templates/next-export-ui/src/components/RecordCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ export default function RecordCard(props: { collection: ThsCollection; record: a
3939
<h2>
4040
<span className="badge">#{String(id)}</span>{' '}
4141
{df ? formatNumeric(titleVal, df.type, (df as any).decimals) : '(record)'}
42-
{isDeleted ? <span className="badge" style={{ marginLeft: 8, color: 'var(--danger)' }}>deleted</span> : null}
42+
{isDeleted ? <span className="badge" style={{ marginLeft: 8, color: 'var(--th-danger)' }}>deleted</span> : null}
4343
</h2>
44-
<div className="muted" style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>
44+
<div className="muted" style={{ fontFamily: 'var(--th-font-mono)', fontSize: 12 }}>
4545
owner: {owner ? shortAddress(String(owner)) : '—'} · createdBy: {createdBy ? shortAddress(String(createdBy)) : '—'}
4646
</div>
4747
</div>

‎packages/templates/next-export-ui/src/theme/tokens.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
22
"colors": {
3-
"bg": "#06122b",
4-
"bgAlt": "#0a1f45",
5-
"panel": "#0f2958cc",
6-
"panelStrong": "#103062",
7-
"border": "#7eb8ff55",
8-
"text": "#f3f8ff",
9-
"muted": "#b6caea",
10-
"primary": "#4cb1f7",
11-
"primaryStrong": "#1e8fe0",
3+
"bg": "#ffffff",
4+
"bgAlt": "#eef4ff",
5+
"panel": "#f4f8ff",
6+
"panelStrong": "#eaf2ff",
7+
"border": "#c9dbff",
8+
"text": "#0a255f",
9+
"muted": "#486ca6",
10+
"primary": "#0f56e0",
11+
"primaryStrong": "#0943b8",
1212
"accent": "#ffc700",
13-
"success": "#12c26d",
14-
"danger": "#ff5f63"
13+
"success": "#09995a",
14+
"danger": "#c52f44"
1515
},
1616
"radius": {
1717
"sm": "10px",

0 commit comments

Comments
 (0)