Skip to content

Commit 3d4b6c5

Browse files
waleedlatif1waleedlatif1
committed
chore(charts): restyle the landing page on the emcn light tokens
Replaces the hand-picked palette with the values from the `:root, .light` block in apps/sim/app/_styles/globals.css -- surfaces, text ramp, border, --brand-agent for links, --radius, the type scale, and the --font-body and --font-mono stacks. Both font stacks are system fonts in the design system, so the page matches the app exactly without loading a webfont. Inter is deliberately not used: it is scoped to the Chat surface, not the app-wide default. Light only, and color-scheme is pinned to light rather than left to follow the OS -- there is no theme switcher on this page to honour a preference with, and half-implementing one would render form controls against the wrong ground. Tokens are inlined because gh-pages cannot import the app stylesheet; the comment in the file records where they came from.
1 parent dfeefb5 commit 3d4b6c5

1 file changed

Lines changed: 122 additions & 46 deletions

File tree

‎index.html‎

Lines changed: 122 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,81 +5,157 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Sim Helm charts</title>
77
<meta name="description" content="Helm chart repository for Sim, the open-source AI workspace where teams build, deploy, and manage AI agents.">
8+
<link rel="icon" href="https://raw.githubusercontent.com/simstudioai/sim/main/apps/sim/public/logo/primary/primary.svg">
89
<style>
10+
/*
11+
* Tokens copied from apps/sim/app/_styles/globals.css (the `:root, .light`
12+
* block). This page is served from the gh-pages branch and cannot import the
13+
* app's stylesheet, so the values are inlined. Light mode only, deliberately:
14+
* there is no theme switcher here to honour a preference with.
15+
*/
916
:root {
10-
color-scheme: light dark;
11-
--bg: #ffffff;
12-
--fg: #18181b;
13-
--muted: #52525b;
14-
--line: #e4e4e7;
15-
--code-bg: #f4f4f5;
16-
--link: #2563eb;
17-
}
18-
@media (prefers-color-scheme: dark) {
19-
:root {
20-
--bg: #0a0a0b;
21-
--fg: #fafafa;
22-
--muted: #a1a1aa;
23-
--line: #27272a;
24-
--code-bg: #18181b;
25-
--link: #60a5fa;
26-
}
17+
color-scheme: light;
18+
19+
--bg: #fefefe;
20+
--surface-2: #ffffff;
21+
--surface-3: #f7f7f7;
22+
--surface-5: #f3f3f3;
23+
24+
--text-primary: #1a1a1a;
25+
--text-secondary: #525252;
26+
--text-body: #434343;
27+
--text-muted: #7a7a7a;
28+
29+
--border: #d8d8d8;
30+
--brand-agent: #6f3dfa;
31+
32+
--radius: 0.5rem;
33+
--radius-sm: calc(var(--radius) - 4px);
34+
35+
--text-caption: 12px;
36+
--text-small: 13px;
37+
--text-base: 15px;
38+
39+
--font-body:
40+
ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial,
41+
sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
42+
--font-mono:
43+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
44+
monospace;
2745
}
46+
2847
* { box-sizing: border-box; }
48+
2949
body {
3050
margin: 0;
31-
padding: 3rem 1.25rem 5rem;
51+
padding: 4rem 1.25rem 6rem;
3252
background: var(--bg);
33-
color: var(--fg);
34-
font: 15px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
53+
color: var(--text-body);
54+
font-family: var(--font-body);
55+
font-size: var(--text-base);
56+
line-height: 1.6;
3557
-webkit-font-smoothing: antialiased;
58+
-moz-osx-font-smoothing: grayscale;
59+
}
60+
61+
main { max-width: 44rem; margin: 0 auto; }
62+
63+
h1 {
64+
margin: 0 0 0.5rem;
65+
color: var(--text-primary);
66+
font-size: 1.5rem;
67+
font-weight: 600;
68+
letter-spacing: -0.018em;
3669
}
37-
main { max-width: 42rem; margin: 0 auto; }
38-
h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 .4rem; }
39-
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2.5rem 0 .75rem; font-weight: 600; }
40-
p { margin: 0 0 1rem; color: var(--muted); }
41-
a { color: var(--link); text-decoration: none; }
42-
a:hover { text-decoration: underline; }
70+
71+
h2 {
72+
margin: 2.75rem 0 0.75rem;
73+
color: var(--text-secondary);
74+
font-size: var(--text-caption);
75+
font-weight: 600;
76+
text-transform: uppercase;
77+
letter-spacing: 0.06em;
78+
}
79+
80+
p { margin: 0 0 1rem; }
81+
82+
a { color: var(--brand-agent); text-decoration: none; }
83+
a:hover { text-decoration: underline; text-underline-offset: 2px; }
84+
85+
.lede { color: var(--text-secondary); }
86+
4387
pre {
44-
background: var(--code-bg);
45-
border: 1px solid var(--line);
46-
border-radius: 8px;
47-
padding: .85rem 1rem;
48-
overflow-x: auto;
4988
margin: 0 0 1rem;
89+
padding: 0.875rem 1rem;
90+
background: var(--surface-3);
91+
border: 1px solid var(--border);
92+
border-radius: var(--radius);
93+
overflow-x: auto;
94+
}
95+
96+
code {
97+
font-family: var(--font-mono);
98+
font-size: var(--text-small);
99+
line-height: 1.65;
50100
}
51-
code { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
52-
p code { background: var(--code-bg); border-radius: 4px; padding: .1rem .35rem; }
53-
ul { padding-left: 1.1rem; margin: 0; color: var(--muted); }
54-
li { margin-bottom: .35rem; }
55-
footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
101+
102+
p code, li code {
103+
padding: 0.1rem 0.35rem;
104+
background: var(--surface-5);
105+
border-radius: var(--radius-sm);
106+
font-size: var(--text-caption);
107+
}
108+
109+
ul { margin: 0; padding-left: 1.1rem; }
110+
li { margin-bottom: 0.4rem; }
111+
112+
.note {
113+
padding: 0.875rem 1rem;
114+
background: var(--surface-2);
115+
border: 1px solid var(--border);
116+
border-radius: var(--radius);
117+
color: var(--text-secondary);
118+
font-size: var(--text-small);
119+
}
120+
.note :last-child { margin-bottom: 0; }
121+
122+
footer {
123+
margin-top: 3.5rem;
124+
padding-top: 1.25rem;
125+
border-top: 1px solid var(--border);
126+
color: var(--text-muted);
127+
font-size: var(--text-small);
128+
}
129+
footer a { color: var(--text-muted); }
56130
</style>
57131
</head>
58132
<body>
59133
<main>
60134
<h1>Sim Helm charts</h1>
61-
<p>
135+
<p class="lede">
62136
Chart repository for <a href="https://sim.ai">Sim</a> — the open-source AI
63137
workspace where teams build, deploy, and manage AI agents.
64138
</p>
65139

66-
<h2>OCI registry (recommended)</h2>
67-
<p>Signed and carries build provenance. Requires Helm 3.8 or newer.</p>
140+
<h2>OCI registry</h2>
141+
<p>The recommended path. Signed with Sigstore and carrying build provenance. Requires Helm 3.8 or newer.</p>
68142
<pre><code>helm install sim oci://ghcr.io/simstudioai/charts/sim \
69143
--version &lt;version&gt; --namespace sim --create-namespace</code></pre>
70144

71145
<h2>Helm repository</h2>
72-
<p>For clusters and tooling that expect <code>helm repo add</code>.</p>
146+
<p>The same chart, for clusters and tooling that expect <code>helm repo add</code>.</p>
73147
<pre><code>helm repo add sim https://charts.sim.ai
74148
helm repo update
75149
helm install sim sim/sim --version &lt;version&gt; --namespace sim --create-namespace</code></pre>
76150

77-
<p>
78-
Always pass <code>--version</code>. Without it Helm resolves the newest
79-
published chart at install time, so the same command produces different
80-
deployments on different days. List what is available with
81-
<code>helm search repo sim/sim --versions</code>.
82-
</p>
151+
<div class="note">
152+
<p>
153+
Always pass <code>--version</code>. Without it Helm resolves the newest
154+
published chart at install time, so the same command produces different
155+
deployments on different days. List what is available with
156+
<code>helm search repo sim/sim --versions</code>.
157+
</p>
158+
</div>
83159

84160
<h2>Documentation</h2>
85161
<ul>

0 commit comments

Comments
 (0)