Repository navigation
feat(docs): syntax highlighting palette for code samples - #246
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
4061b37 to
c509974
Compare
d515f1a to
b02327a
Compare
c509974 to
d031ce6
Compare
b02327a to
3e00226
Compare
pbroom
left a comment
pbroom
left a comment
There was a problem hiding this comment.
Reviewed the full incremental PR and its corrections at 3e002262154e09706505b57bf4389f457ff335b3. Syntax palette reviewed; all36 emitted syntax contrast combinations pass. No remaining actionable findings in the reviewed scope.
Independent correction re-reviews and stack preservation verification passed. At the integrated tip, lint, full build/DTS, 2,208 tests, formatting, strict agent checks and 14 built-site Chrome tests passed. All recorded actionable review threads are addressed. Hosted CI is being verified separately; this review does not authorize merge or release.
3e00226 to
8c6ff55
Compare
d031ce6 to
bcfcfe9
Compare
pbroom
left a comment
pbroom
left a comment
There was a problem hiding this comment.
Final re-review at 8c6ff553c5d215e53a3d08d66d18f2b775b57634: Syntax palette reviewed; all36 emitted syntax contrast combinations pass. The hosted dependency-test follow-up is included; no remaining actionable findings in scope.
All 12 final stack heads now pass CI, including Node 20/22 and the plane benchmark. Final local lint, build/DTS, 2,209 tests, formatting and strict agent checks pass. The 14 built-site browser checks passed on unchanged application code; the follow-up changes only the regression test and archive lesson. Vercel previews are tracked separately while pending.
bcfcfe9 to
d0baac5
Compare
8c6ff55 to
b2f627d
Compare
Give code tokens hue (keyword, function, type, constant, string) generated with color-kit, with sRGB fallbacks and P3 overrides, and hold each role to 4.5:1 on the code background in both themes. API signatures share the palette. Co-Authored-By: Claude Opus 5.5 <[email protected]>
b2f627d to
654ae90
Compare
|
Deployment failed for project color-kit with the following error: Learn More: https://vercel.com/pbrooms-projects?upgradeToPro=build-rate-limit |
…247) ## Stack Context First of three PRs that cut `color-kit/react` down to state utilities and performance primitives (#247 → #248 → #249). This one sits on #246 (`docs/syntax-colors`) and is additive: the new hooks land next to the existing components, which now delegate to them. ## What? New headless hooks. They own no DOM and take one plane, `ColorPlaneSpec = { color, axes? }`, where `axes` is the driver's `ColorAreaAxes`. - **`useColorPlaneRenderer(plane, options)`** is the `ColorPlane` rasterizer reshaped into a hook. - It keeps the WebGL path, the CPU fallback, the context-loss / restore handling and GPU cleanup on unmount. - It keeps the render-key dedupe (moving along an axis channel does not repaint), the DPR × `resolutionScale` × quality-scaled backing store, and rAF + `ResizeObserver` redraws. - It returns a stable callback `ref`, a `canvasKey` and the active `renderer`. The caller must use `canvasKey` as the canvas `key`: a canvas is locked to its first context kind, so the GPU ↔ CPU swap needs a fresh element. The hook warns once if the key is dropped. - **Geometry hooks** return memoized points plus `toSvgPath` / `toSvgCompoundPath` data for a `0 0 100 100` viewBox. They keep the layers' sync-at-rest / worker-while-dragging behaviour. - `useGamutBoundary` and `useChromaBand`. `useChromaBand` takes core's `ChromaBandMode`: `'clamped'` / `'proportional'`. - `useContrastRegion` returns `path` (contours) and `fillPath` (closed fill polygons). It keeps frozen drag sampling, the stable-fill fallback, the boundary snapping and closure, and `onMetrics`. Its non-rendering geometry moved out of `contrast-region-layer.tsx` into `contrast-region-geometry.ts`. - `useFallbackPoints` returns the sRGB and Display P3 fallback points. - **`useAdaptiveQuality(profile)`** is `ColorArea`'s frame-cost quality controller, extracted. - `ColorPlane` and `ColorArea` now run on `useColorPlaneRenderer` and `useAdaptiveQuality`, so the existing component tests cover the hooks too. - New tests: `use-color-plane-renderer.test.tsx` and `plane-geometry-hooks.test.tsx` (39 cases). They port the WebGL lifecycle, CPU fallback and edge-behaviour cases, and the contrast fill-side, APCA polarity, sampling and worker-metrics cases. - A changeset (`'color-kit': minor`) for the new hooks. ## Why? Approved API reduction: `color-kit/react` keeps state and perf primitives, and UI components go. Landing the hooks first keeps every step green and lets #249 delete the components without losing the renderer or the overlay math. ## Validation - `pnpm lint`, `pnpm build` (including DTS and the docs build), `pnpm test` (core 921, driver 157, react 256, docs 938), `pnpm format:check`, `pnpm agents:check:strict`, `pnpm check:preprod` and `pnpm --filter @color-kit/docs typecheck` all pass. - `eval-dependencies.test.ts` passes locally on macOS. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
1 participant
Stack Context
Part of the docs overhaul stack (S1–S5). This PR sits on #245 and replaces the gray-only syntax styling with a hue palette.
What?
src/styles/tokens.ts: keyword (330°), function (255°), type (195°), constant (55°) and string (145°). Each theme uses one lightness and chroma: L 0.5 / C 0.16 in light, L 0.8 / C 0.12 in dark.tokens.csslike the accent: sRGB fallbacks come fromtoSrgbGamut, and adisplay-p3override applies when a role falls outside sRGB.token-typescope, so types and functions read differently.tokens.test.tsnow holds every syntax role to 4.5:1 contrast on--code-bgin both themes.Why?
Review feedback: code samples should have real syntax highlighting. Swatch chips still mark color literals as data.
Validation
pnpm lint,pnpm build,pnpm test(docs 844, core 904, driver 150, react 217),pnpm format:checkandpnpm agents:check:strictall pass. The docs typecheck also passes.distfound token colors in all 826<pre>blocks./start,/api/core/toCssand/guides/react.🤖 Generated with Claude Code