Skip to content

Commit 16c33c1

Browse files
bloveclaude
blove
and
claude
authored
refactor: liberate @pretable/ui name (theming PR 1 of 5) (#46)
* docs(specs): pretable theming architecture (v0.0.1) Design for the public @pretable/ui theming package. Two prebuilt themes (Excel default, Material 3 light+dark), three density tiers (compact / standard / spacious), single --pretable-* CSS variable namespace, [data-theme="dark"] + [data-density] attribute selectors, opt-in Tailwind v4 bridge. Internal-only @pretable/ui contents (Receipt, Callout, CodeBlock + cool- slate brand tokens) move into apps/website/app/components and apps/website/app/styles. Nav and Footer are duplicated into both apps/website and apps/bench. The freed @pretable/ui name takes the new public theming package. Decomposed into 4 small PRs: package skeleton + themes; engine bridge + styles.ts skin strip; apps/website migration; apps/bench migration. Pre-1.0 phase indefinitely — 0.0.x patches with no formal stability contract. Token contract smoke test covers most regressions; visual regression deferred until a stable reference scene exists. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * docs(specs): split theming PR-1 into name-liberation + package-creation The 4-PR decomposition had a name-collision bug: PR 1 created the new @pretable/ui package while the old @pretable/ui still occupied the name in pnpm workspace. Two workspace packages can't share a name. Correct sequencing: 5 PRs. PR 1 liberates the name (relocate components, delete old package). PR 2 creates the new theming package. PR 3 the engine bridge (now fully independent). PR 4 wires apps/website. PR 5 wires apps/bench. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * docs(plans): liberate @pretable/ui name (PR 1 of theming plan) 11-task plan covering: - Verify clean baseline - Copy tokens.css and slimmed marketing-components.css into apps/website and apps/bench - Copy Nav.tsx and Footer.tsx (with their tests) into both apps; rename to capitalized filenames - Update import statements in apps/website (layout.tsx, RouteAwareNav.tsx, globals.css) and apps/bench (app.tsx, app.css) - Drop @pretable/ui workspace dep from both apps and prepare:deps - Delete packages/ui/ directory - Final verification (test, typecheck, build, visual sanity) Receipt, Callout, and CodeBlock from the old @pretable/ui are not moved — confirmed by grep audit, no consumers in any source file. Preserved in git history for any future revival. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * refactor(website): inline Nav and Footer (drop @pretable/ui import) Move Nav and Footer components plus cool-slate-tokens.css and marketing-components.css (slim, nav+footer rules only) into apps/website/app/. Update layout.tsx, RouteAwareNav.tsx, and globals.css to import from local paths. Receipt, Callout, and CodeBlock from the old @pretable/ui are not moved — they have no consumers. Also stages copies of Nav, Footer, and CSS into apps/bench (wired up in the next commit). Part 1 of liberating the @pretable/ui name (PR 1 of theming plan). Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * refactor(bench): inline Nav and Footer (drop @pretable/ui import) Wire bench's app.tsx and app.css to consume the locally-duplicated Nav, Footer, and CSS from earlier in this PR. Part 2 of liberating the @pretable/ui name (PR 1 of theming plan). Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * refactor(apps): drop @pretable/ui workspace dependency Both apps now import Nav, Footer, and CSS from local paths. The @pretable/ui workspace dep is no longer needed and the prepare:deps script no longer triggers its build. The package itself is deleted in the next commit. Part 3 of liberating the @pretable/ui name (PR 1 of theming plan). Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * chore(packages/ui): delete — name freed for new theming package The marketing components (Nav, Footer) and cool-slate CSS that previously lived here have been relocated into apps/website and apps/bench. Receipt, Callout, and CodeBlock had no consumers and are dropped (preserved in git history for any future revival). Frees the @pretable/ui package name for the new public theming package created in PR 2 of the theming plan. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> * docs(website): refresh README tokens section after package deletion The README is "living documentation" of the visual system. After commit 1b563e0 deleted packages/ui, the Tokens section's references to @pretable/ui import paths and packages/ui/src/tokens.css became stale. Update to point at app/styles/cool-slate-tokens.css and note that the @pretable/ui name is reserved for an upcoming public theming package with a distinct --pretable-* namespace. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4 (1M context) <noreply@anthropic.com>
1 parent c0af7c4 commit 16c33c1

38 files changed

Lines changed: 2395 additions & 559 deletions

‎apps/bench/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"prepare:deps": "pnpm --filter @pretable-internal/scenario-data build && pnpm --filter @pretable-internal/bench-runner build && pnpm --filter @pretable-internal/stream-adapter build && pnpm --filter @pretable/react build && pnpm --filter @pretable/ui build",
7+
"prepare:deps": "pnpm --filter @pretable-internal/scenario-data build && pnpm --filter @pretable-internal/bench-runner build && pnpm --filter @pretable-internal/stream-adapter build && pnpm --filter @pretable/react build",
88
"predev": "pnpm run prepare:deps",
99
"dev": "vite",
1010
"prebuild": "pnpm run prepare:deps",
@@ -31,7 +31,6 @@
3131
"@pretable-internal/scenario-data": "workspace:*",
3232
"@pretable-internal/stream-adapter": "workspace:*",
3333
"@pretable/react": "workspace:*",
34-
"@pretable/ui": "workspace:*",
3534
"@tanstack/react-virtual": "^3.13.23",
3635
"ag-grid-community": "^35.2.1",
3736
"ag-grid-react": "^35.2.1",

‎apps/bench/src/app.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@import "@fontsource-variable/fraunces/wght-italic.css";
33
@import "@fontsource-variable/inter/wght.css";
44
@import "@fontsource-variable/jetbrains-mono/wght.css";
5-
@import "@pretable/ui/tokens.css";
6-
@import "@pretable/ui/components.css";
5+
@import "./styles/cool-slate-tokens.css";
6+
@import "./styles/marketing-components.css";
77
@import "tailwindcss";
88

99
@theme inline {

‎apps/bench/src/app.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Footer, Nav } from "@pretable/ui";
1+
import { Footer } from "./components/Footer";
2+
import { Nav } from "./components/Nav";
23

34
import { BenchApp } from "./bench-app";
45
import { detectBrowserVersion } from "./bench-runtime";

packages/ui/src/footer.tsx renamed to apps/bench/src/components/Footer.tsx

File renamed without changes.

packages/ui/src/nav.tsx renamed to apps/bench/src/components/Nav.tsx

File renamed without changes.

packages/ui/src/__tests__/footer.test.tsx renamed to apps/bench/src/components/__tests__/Footer.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import "@testing-library/jest-dom/vitest";
22
import { render, screen } from "@testing-library/react";
33
import { describe, expect, it } from "vitest";
44

5-
import { Footer } from "../footer";
5+
import { Footer } from "../Footer";
66

77
describe("Footer", () => {
88
it("renders wordmark, version, and copyright in the left cell", () => {

packages/ui/src/__tests__/nav.test.tsx renamed to apps/bench/src/components/__tests__/Nav.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import "@testing-library/jest-dom/vitest";
22
import { fireEvent, render, screen } from "@testing-library/react";
33
import { describe, expect, it, vi } from "vitest";
44

5-
import { Nav } from "../nav";
5+
import { Nav } from "../Nav";
66

77
describe("Nav", () => {
88
it("renders the wordmark as 'pretable.' with an amber period span", () => {

packages/ui/src/tokens.css renamed to apps/bench/src/styles/cool-slate-tokens.css

File renamed without changes.

packages/ui/src/components.css renamed to apps/bench/src/styles/marketing-components.css

Lines changed: 5 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,8 @@
1-
/* ------------------------------------------------------------- */
2-
/* Receipt — inline numeric tag in body copy */
3-
/* ------------------------------------------------------------- */
4-
.pt-receipt {
5-
display: inline-block;
6-
padding: 2px 7px;
7-
margin: 0 1px;
8-
border-radius: 3px;
9-
background: var(--pt-text-primary);
10-
color: var(--pt-bg-page);
11-
font-family: var(--pt-font-mono);
12-
font-size: 0.88em;
13-
letter-spacing: 0.01em;
14-
vertical-align: 2px;
15-
white-space: nowrap;
16-
}
17-
18-
/* ------------------------------------------------------------- */
19-
/* Callout — cream-hi panel with accented left border */
20-
/* ------------------------------------------------------------- */
21-
.pt-callout {
22-
background: var(--pt-bg-card);
23-
border-left: 3px solid var(--pt-accent-deep);
24-
border-radius: 0 6px 6px 0;
25-
padding: 14px 18px;
26-
margin: 22px 0;
27-
max-width: 720px;
28-
font-family: var(--pt-font-sans);
29-
font-size: 14px;
30-
line-height: 1.55;
31-
color: var(--pt-text-secondary);
32-
}
33-
.pt-callout-warn {
34-
border-left-color: var(--pt-sev-warn);
35-
}
36-
.pt-callout-tag {
37-
display: block;
38-
margin-bottom: 5px;
39-
color: var(--pt-text-primary);
40-
font-family: var(--pt-font-mono);
41-
font-size: 10.5px;
42-
font-weight: 700;
43-
letter-spacing: 0.12em;
44-
text-transform: uppercase;
45-
}
46-
.pt-callout-warn .pt-callout-tag {
47-
color: var(--pt-accent-deep);
48-
}
49-
.pt-callout-body {
50-
display: block;
51-
}
52-
53-
/* ------------------------------------------------------------- */
54-
/* CodeBlock — terminal surface with tabs + copy */
55-
/* ------------------------------------------------------------- */
56-
.pt-code-block {
57-
max-width: var(--pt-code-max);
58-
margin: 18px 0 22px;
59-
background: var(--pt-grid-bg);
60-
color: var(--pt-grid-text);
61-
border: 1px solid var(--pt-grid-rule);
62-
border-radius: 8px;
63-
overflow: hidden;
64-
font-family: var(--pt-font-mono);
65-
font-size: 13px;
66-
line-height: 1.62;
67-
}
68-
.pt-code-head {
69-
display: flex;
70-
justify-content: space-between;
71-
align-items: center;
72-
background: var(--pt-grid-raised);
73-
border-bottom: 1px solid var(--pt-grid-rule);
74-
padding: 0 6px 0 0;
75-
}
76-
.pt-code-tabs {
77-
display: flex;
78-
}
79-
.pt-code-tab {
80-
padding: 9px 14px;
81-
font-family: var(--pt-font-mono);
82-
font-size: 11px;
83-
letter-spacing: 0.04em;
84-
color: var(--pt-grid-dim);
85-
background: transparent;
86-
border: 0;
87-
border-right: 1px solid var(--pt-grid-rule);
88-
cursor: pointer;
89-
}
90-
.pt-code-tab.active {
91-
color: var(--pt-accent);
92-
background: var(--pt-grid-bg);
93-
}
94-
.pt-code-copy {
95-
font-family: var(--pt-font-mono);
96-
font-size: 10.5px;
97-
color: var(--pt-grid-dim);
98-
background: transparent;
99-
border: 1px solid var(--pt-grid-rule);
100-
border-radius: 3px;
101-
padding: 4px 9px;
102-
margin: 6px 10px;
103-
cursor: pointer;
104-
}
105-
.pt-code-copy:hover {
106-
color: var(--pt-accent);
107-
}
108-
.pt-code-body {
109-
padding: 16px 20px;
110-
margin: 0;
111-
overflow-x: auto;
112-
white-space: pre;
113-
}
114-
/* Syntax highlighting classes — consumers apply these to spans inside the body. */
115-
.pt-code-key {
116-
color: var(--pt-code-key);
117-
}
118-
.pt-code-str {
119-
color: var(--pt-code-str);
120-
}
121-
.pt-code-fn {
122-
color: var(--pt-code-fn);
123-
}
124-
.pt-code-com {
125-
color: var(--pt-code-com);
126-
font-style: italic;
127-
}
128-
.pt-code-prop {
129-
color: var(--pt-code-prop);
130-
}
131-
1+
/**
2+
* Marketing components — Nav + Footer styling.
3+
* Slimmed from the original @pretable/ui/components.css. Receipt, Callout,
4+
* and CodeBlock rules removed (those components are no longer used).
5+
*/
1326
/* ------------------------------------------------------------- */
1337
/* Nav — 60px sticky header, shared across all surfaces */
1348
/* ------------------------------------------------------------- */

‎apps/website/README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ This README is **living documentation** of the visual system as it exists today.
66

77
## Tokens
88

9-
The website's color and typography tokens live in `@pretable/ui`. `app/globals.css` imports them (excerpt):
9+
The website's color and typography tokens live locally in `app/styles/cool-slate-tokens.css` (`--pt-*` namespace). They were originally housed in a now-deleted `@pretable/ui` package; that package name is reserved for the upcoming public theming package (see `docs/superpowers/specs/2026-05-01-pretable-theming-architecture-design.md`), which writes a different `--pretable-*` namespace. The two namespaces are intentionally distinct and don't collide.
10+
11+
`app/globals.css` imports the tokens (excerpt):
1012

1113
```css
12-
@import "@pretable/ui/tokens.css";
13-
@import "@pretable/ui/components.css";
14+
@import "./styles/cool-slate-tokens.css";
15+
@import "./styles/marketing-components.css";
1416
```
1517

16-
(See `app/globals.css` for the full top-of-file import block — fonts, Tailwind, then the tokens above.)
18+
(See `app/globals.css` for the full top-of-file import block — fonts, then the tokens above, then Tailwind.)
1719

18-
The Tailwind theme block in `globals.css` exposes them as `--color-*` shortcuts (e.g., `bg-bg-page`, `text-text-primary`, `text-accent`). For the canonical token list and values, read `packages/ui/src/tokens.css`. Don't restate values here — pointer-only.
20+
The Tailwind theme block in `globals.css` exposes them as `--color-*` shortcuts (e.g., `bg-bg-page`, `text-text-primary`, `text-accent`). For the canonical token list and values, read `app/styles/cool-slate-tokens.css`. Don't restate values here — pointer-only.
1921

2022
Token groups in active use on the website:
2123

0 commit comments

Comments
 (0)