Skip to content

Commit 7cf5ac0

Browse files
bloveclaude
blove
and
claude
authored
refactor(ui,bench,playground): retune @pretable/ui tokens to cool-slate (#18)
* docs(specs): add website phase 1 design spec (cool-slate pivot) * docs(plans): add website phase 1 implementation plan (PR-A + PR-B) * refactor(ui): retune tokens.css to cool-slate with semantic names * refactor(ui): rename var() references in components.css to new token names * refactor(ui): add website to NavPage; replace playground link with brand home * refactor(bench): migrate app.css to new @pretable/ui tokens; add Inter + JetBrains Mono Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(playground): migrate app.css to new @pretable/ui tokens; add Inter + JetBrains Mono Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(playground): rename var() references in pitch-grid.css * refactor(playground): migrate Tailwind classes to new @pretable/ui token names Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(playground): update Nav assertions for post-pivot LINKS (no playground link) * style: apply prettier formatting after Phase 1 PR-A migrations * docs(playground): comment why Nav active='playground' renders no active link --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 35526a3 commit 7cf5ac0

18 files changed

Lines changed: 2923 additions & 186 deletions

‎apps/bench/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
"@emotion/react": "^11.14.0",
2424
"@emotion/styled": "^11.14.1",
2525
"@fontsource-variable/fraunces": "^5.2.9",
26+
"@fontsource-variable/inter": "^5.2.8",
27+
"@fontsource-variable/jetbrains-mono": "^5.2.8",
2628
"@mui/material": "^9.0.0",
2729
"@mui/x-data-grid": "^9.0.2",
2830
"@pretable-internal/bench-runner": "workspace:*",

‎apps/bench/src/app.css‎

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
@import "@fontsource-variable/fraunces/wght.css";
22
@import "@fontsource-variable/fraunces/wght-italic.css";
3+
@import "@fontsource-variable/inter/wght.css";
4+
@import "@fontsource-variable/jetbrains-mono/wght.css";
35
@import "@pretable/ui/tokens.css";
46
@import "@pretable/ui/components.css";
57
@import "tailwindcss";
68

79
@theme inline {
8-
--color-cream: var(--pt-cream);
9-
--color-cream-hi: var(--pt-cream-hi);
10-
--color-cream-rule: var(--pt-cream-rule);
11-
--color-ink: var(--pt-ink);
12-
--color-ink-dim: var(--pt-ink-dim);
13-
--color-ink-softer: var(--pt-ink-softer);
14-
--color-amber-ink: var(--pt-amber-ink);
15-
--color-amber: var(--pt-amber);
16-
--color-amber-soft: var(--pt-amber-soft);
10+
--color-bg-page: var(--pt-bg-page);
11+
--color-bg-card: var(--pt-bg-card);
12+
--color-bg-raised: var(--pt-bg-raised);
13+
--color-rule: var(--pt-rule);
14+
--color-rule-soft: var(--pt-rule-soft);
15+
--color-text-primary: var(--pt-text-primary);
16+
--color-text-secondary: var(--pt-text-secondary);
17+
--color-text-muted: var(--pt-text-muted);
18+
--color-accent: var(--pt-accent);
19+
--color-accent-deep: var(--pt-accent-deep);
20+
--color-accent-soft: var(--pt-accent-soft);
1721
--color-grid-bg: var(--pt-grid-bg);
1822
--color-grid-raised: var(--pt-grid-raised);
1923
--color-grid-rule: var(--pt-grid-rule);
@@ -24,18 +28,9 @@
2428
--color-sev-err: var(--pt-sev-err);
2529
--color-sev-ok: var(--pt-sev-ok);
2630

27-
/* Fraunces is referenced as "Fraunces Variable" to match the family name
28-
@fontsource-variable/fraunces registers, which unlocks the variable
29-
weight axis. Intentionally NOT indirected through --pt-font-serif
30-
(which uses plain "Fraunces" for external consumers without the
31-
fontsource package). Keep literal. */
32-
--font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
33-
--font-sans:
34-
ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
35-
sans-serif;
36-
--font-mono:
37-
ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", "Roboto Mono",
38-
monospace;
31+
--font-display: var(--pt-font-serif);
32+
--font-sans: var(--pt-font-sans);
33+
--font-mono: var(--pt-font-mono);
3934
}
4035

4136
*,
@@ -52,8 +47,8 @@ body {
5247

5348
body {
5449
font-family: var(--font-sans);
55-
color: var(--pt-ink);
56-
background: var(--pt-cream);
50+
color: var(--pt-text-primary);
51+
background: var(--pt-bg-page);
5752
}
5853

5954
.sr-only {
@@ -84,7 +79,7 @@ body {
8479

8580
.eyebrow {
8681
margin: 0 0 12px;
87-
color: var(--pt-amber-ink);
82+
color: var(--pt-accent-deep);
8883
font-family: var(--font-mono);
8984
font-size: 12px;
9085
font-weight: 600;
@@ -98,12 +93,12 @@ body {
9893
font-size: clamp(2.5rem, 5vw, 4.6rem);
9994
letter-spacing: -0.04em;
10095
line-height: 1;
101-
color: var(--pt-ink);
96+
color: var(--pt-text-primary);
10297
}
10398

10499
.hero-copy {
105100
max-width: 620px;
106-
color: var(--pt-ink-dim);
101+
color: var(--pt-text-secondary);
107102
font-family: var(--font-display);
108103
font-size: 1.05rem;
109104
line-height: 1.6;
@@ -118,9 +113,9 @@ body {
118113

119114
.scenario-panel,
120115
.preview-panel {
121-
border: 1px solid var(--pt-cream-rule);
116+
border: 1px solid var(--pt-rule);
122117
border-radius: 8px;
123-
background: var(--pt-cream-hi);
118+
background: var(--pt-bg-card);
124119
padding: 24px;
125120
}
126121

@@ -132,13 +127,13 @@ body {
132127
margin: 0 0 6px;
133128
font-family: var(--font-display);
134129
font-size: 1.45rem;
135-
color: var(--pt-ink);
130+
color: var(--pt-text-primary);
136131
}
137132

138133
.panel-header p,
139134
.scenario-card p,
140135
.status-note {
141-
color: var(--pt-ink-dim);
136+
color: var(--pt-text-secondary);
142137
line-height: 1.5;
143138
}
144139

@@ -151,9 +146,9 @@ body {
151146
}
152147

153148
.scenario-card {
154-
border: 1px solid var(--pt-cream-rule);
149+
border: 1px solid var(--pt-rule);
155150
border-radius: 6px;
156-
background: var(--pt-cream);
151+
background: var(--pt-bg-page);
157152
padding: 16px;
158153
}
159154

@@ -166,8 +161,8 @@ body {
166161

167162
.scenario-id {
168163
border-radius: 3px;
169-
background: var(--pt-amber-soft);
170-
color: var(--pt-amber-ink);
164+
background: var(--pt-accent-soft);
165+
color: var(--pt-accent-deep);
171166
font-family: var(--font-mono);
172167
font-size: 12px;
173168
font-weight: 600;
@@ -176,22 +171,22 @@ body {
176171

177172
.scenario-card strong {
178173
font-size: 1rem;
179-
color: var(--pt-ink);
174+
color: var(--pt-text-primary);
180175
}
181176

182177
.scenario-card p {
183178
margin: 0 0 8px;
184179
}
185180

186181
.scenario-card small {
187-
color: var(--pt-ink-softer);
182+
color: var(--pt-text-muted);
188183
}
189184

190185
.preview-panel section {
191-
border: 1px solid var(--pt-cream-rule);
186+
border: 1px solid var(--pt-rule);
192187
border-radius: 6px;
193188
padding: 18px;
194-
background: var(--pt-cream);
189+
background: var(--pt-bg-page);
195190
}
196191

197192
.active-scenario {
@@ -215,20 +210,20 @@ body {
215210
.run-toolbar button {
216211
border: 0;
217212
border-radius: 2px;
218-
background: var(--pt-ink);
219-
color: var(--pt-cream-hi);
213+
background: var(--pt-text-primary);
214+
color: var(--pt-bg-card);
220215
cursor: pointer;
221216
font: inherit;
222217
font-weight: 600;
223218
padding: 10px 18px;
224219
}
225220

226221
.run-toolbar button:hover {
227-
background: var(--pt-ink-hover, var(--pt-ink));
222+
background: var(--pt-bg-raised);
228223
}
229224

230225
.run-toolbar button:focus-visible {
231-
outline: 2px solid var(--pt-amber-ink);
226+
outline: 2px solid var(--pt-accent-deep);
232227
outline-offset: 2px;
233228
}
234229

@@ -253,9 +248,9 @@ body {
253248
}
254249

255250
.adapter-surface section {
256-
border: 1px solid var(--pt-cream-rule);
251+
border: 1px solid var(--pt-rule);
257252
border-radius: 6px;
258-
background: var(--pt-cream);
253+
background: var(--pt-bg-page);
259254
padding: 18px;
260255
}
261256

@@ -267,7 +262,7 @@ body {
267262
}
268263

269264
.result-grid dt {
270-
color: var(--pt-ink-softer);
265+
color: var(--pt-text-muted);
271266
font-family: var(--font-mono);
272267
font-size: 11px;
273268
letter-spacing: 0.06em;
@@ -277,7 +272,7 @@ body {
277272

278273
.result-grid dd {
279274
margin: 0;
280-
color: var(--pt-ink);
275+
color: var(--pt-text-primary);
281276
font-family: var(--font-mono);
282277
font-size: 13px;
283278
}

‎apps/playground/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,17 @@
1616
"typecheck": "tsc -p tsconfig.json --noEmit"
1717
},
1818
"dependencies": {
19+
"@fontsource-variable/fraunces": "^5.0.0",
20+
"@fontsource-variable/inter": "^5.2.8",
21+
"@fontsource-variable/jetbrains-mono": "^5.2.8",
1922
"@pretable-internal/scenario-data": "workspace:*",
2023
"@pretable/react": "workspace:*",
2124
"@pretable/ui": "workspace:*",
22-
"@fontsource-variable/fraunces": "^5.0.0",
2325
"react": "^19.0.0",
2426
"react-dom": "^19.0.0"
2527
},
2628
"devDependencies": {
27-
"tailwindcss": "^4.0.0",
28-
"@tailwindcss/vite": "^4.0.0"
29+
"@tailwindcss/vite": "^4.0.0",
30+
"tailwindcss": "^4.0.0"
2931
}
3032
}

‎apps/playground/src/__tests__/app.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ afterEach(() => {
99
});
1010

1111
describe("<App />", () => {
12-
test("renders Nav with playground active and version string", () => {
12+
test("renders Nav with primary links and version string", () => {
1313
render(<App />);
1414

1515
// Nav's header landmark.
1616
const header = screen.getByRole("banner");
1717
expect(header).toBeInTheDocument();
1818

19-
// Primary nav links (from @pretable/ui's LINKS: playground/bench/docs/github)
19+
// Primary nav links (post-website-pivot LINKS: pretable/bench/docs/github).
20+
// The "playground" link was retired when @pretable/ui's Nav swapped to a
21+
// website home tab; playground is being retired in Phase 3 of the pivot.
22+
// <Nav active="playground"> still typechecks but no link is highlighted.
2023
const primaryNav = screen.getByRole("navigation", { name: "Primary" });
21-
expect(within(primaryNav).getByText("playground")).toBeInTheDocument();
24+
expect(within(primaryNav).getByText("pretable")).toBeInTheDocument();
2225
expect(within(primaryNav).getByText("bench")).toBeInTheDocument();
23-
24-
// Active link carries "active" on the anchor
25-
const active = within(primaryNav).getByText("playground").closest("a");
26-
expect(active).toHaveClass("active");
26+
expect(within(primaryNav).getByText("docs")).toBeInTheDocument();
2727
});
2828

2929
test("renders Footer with a ci status dot and a version string", () => {

‎apps/playground/src/app.css‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
@import "@fontsource-variable/fraunces/wght.css";
22
@import "@fontsource-variable/fraunces/wght-italic.css";
3+
@import "@fontsource-variable/inter/wght.css";
4+
@import "@fontsource-variable/jetbrains-mono/wght.css";
35
@import "@pretable/ui/tokens.css";
46
@import "@pretable/ui/components.css";
57
@import "tailwindcss";
68

79
@theme inline {
8-
--color-cream: var(--pt-cream);
9-
--color-cream-hi: var(--pt-cream-hi);
10-
--color-cream-rule: var(--pt-cream-rule);
11-
--color-ink: var(--pt-ink);
12-
--color-ink-dim: var(--pt-ink-dim);
13-
--color-ink-softer: var(--pt-ink-softer);
14-
--color-amber-ink: var(--pt-amber-ink);
15-
--color-amber: var(--pt-amber);
16-
--color-amber-soft: var(--pt-amber-soft);
10+
--color-bg-page: var(--pt-bg-page);
11+
--color-bg-card: var(--pt-bg-card);
12+
--color-bg-raised: var(--pt-bg-raised);
13+
--color-rule: var(--pt-rule);
14+
--color-rule-soft: var(--pt-rule-soft);
15+
--color-text-primary: var(--pt-text-primary);
16+
--color-text-secondary: var(--pt-text-secondary);
17+
--color-text-muted: var(--pt-text-muted);
18+
--color-accent: var(--pt-accent);
19+
--color-accent-deep: var(--pt-accent-deep);
20+
--color-accent-soft: var(--pt-accent-soft);
1721
--color-grid-bg: var(--pt-grid-bg);
1822
--color-grid-raised: var(--pt-grid-raised);
1923
--color-grid-rule: var(--pt-grid-rule);
@@ -24,18 +28,9 @@
2428
--color-sev-err: var(--pt-sev-err);
2529
--color-sev-ok: var(--pt-sev-ok);
2630

27-
/* Fraunces is referenced as "Fraunces Variable" to match the family name
28-
@fontsource-variable/fraunces registers, which unlocks the variable
29-
weight axis. Intentionally NOT indirected through --pt-font-serif
30-
(which uses plain "Fraunces" for external consumers without the
31-
fontsource package). Keep literal. */
32-
--font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
33-
--font-sans:
34-
ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
35-
sans-serif;
36-
--font-mono:
37-
ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", "Roboto Mono",
38-
monospace;
31+
--font-display: var(--pt-font-serif);
32+
--font-sans: var(--pt-font-sans);
33+
--font-mono: var(--pt-font-mono);
3934
}
4035

4136
*,
@@ -52,8 +47,8 @@ body {
5247

5348
body {
5449
font-family: var(--font-sans);
55-
color: var(--pt-ink);
56-
background: var(--pt-cream);
50+
color: var(--pt-text-primary);
51+
background: var(--pt-bg-page);
5752
}
5853

5954
.sr-only {

‎apps/playground/src/app.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ const APP_VERSION = import.meta.env.VITE_APP_VERSION as string;
1010
export function App() {
1111
return (
1212
<>
13+
{/* Phase 1 transitional: "playground" is no longer in @pretable/ui's
14+
Nav LINKS array (the home tab is "website" now). active="playground"
15+
still typechecks but renders no active highlight. Phase 3 retires
16+
this app — see docs/superpowers/plans/2026-04-24-website-phase-1.md */}
1317
<Nav active="playground" version={APP_VERSION} />
1418
<main>
1519
<PitchHero />

‎apps/playground/src/copy-command.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ export function CopyCommand({ command, className }: CopyCommandProps) {
1919
};
2020

2121
const classes = [
22-
"inline-flex items-center gap-2 rounded-[2px] border border-ink bg-transparent",
23-
"px-[18px] py-[10px] font-mono text-[13px] text-ink",
24-
"hover:bg-ink hover:text-cream-hi transition-colors",
25-
"focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-ink focus-visible:ring-offset-2 focus-visible:ring-offset-cream",
22+
"inline-flex items-center gap-2 rounded-[2px] border border-text-primary bg-transparent",
23+
"px-[18px] py-[10px] font-mono text-[13px] text-text-primary",
24+
"hover:bg-bg-raised hover:text-bg-card transition-colors",
25+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg-page",
2626
className,
2727
]
2828
.filter(Boolean)

0 commit comments

Comments
 (0)