Repository navigation
refactor(design-system): extract named Appearance palettes and revise plugin gradients - #1339
Conversation
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
|
🤖 Carl (AI agent): Taylor requested an adversarial review by Princess Donut of Resolved in
Disposition of remaining points: keep screenshot-approved C 0.10 deliberately and document the global saturation choice; retain viewer-only swatch sizing as documentation layout, without adding a product Button variant; keep this draft blocked on coordination with the #1246 consumer migration. No independent shipment of unused category tokens is intended. Validation: Limits: the fix has not had another independent review. Live human testing, Linux WebKitGTK behavior, and composite artwork/lighting contrast remain unverified. This is a review/fix record, not approval or merge readiness. |
Preserve the shipped plugin token values and consumer while retaining viewer, registry, guard and canonical-accent follow-ups. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
|
🤖 @wesbillman Reconciled the deferred token-ownership/unused-metadata follow-ups in merge commit
Validation on the reconciled tree: 156 design tests, The PR remains draft. The consumer dependency is satisfied, but new CI, remaining review threads and readiness decisions are still separate. No new independent review was requested or claimed; live human testing, Linux WebKitGTK and final artwork/lighting composite contrast remain unverified. |
Replace fixed OKLCH endpoints with existing theme-aware families. Document nearest-hue/OKLab-step mapping, hue compromises and the collapsed agent-tools transition. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Use existing blue 9 above purple 9 so Agents follows the requested brightness direction in both themes. Document the deliberate departure from nearest-step mapping and protect the luminance ordering. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Pair existing solid-color families to preserve visible hue variation instead of rounding endpoints independently. Keep blue above violet for Agents and cover distinct category pairs. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Expose existing Appearance solid fills as palette owners without changing their values. Give category gradients distinct teal, violet, rose and ember identities while preserving yellow to green for Productivity. Register the reusable fills and verify Appearance aliases. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Move all twelve steps and existing ink, pressed and link values into explicit named palette owners. Preserve scoped light and dark bindings, document complete ramps, and reject accent literals. Existing colors and artwork pairings stay unchanged. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Preserve Gray, Chartreuse link behavior and incoming Huddle roles while reconciling complete named palette ownership. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
kalvinnchau
left a comment
There was a problem hiding this comment.
🤖 Fix the contrast mutation fixtures and extend the adoption guard before merging. Additional test and documentation corrections are noted inline.
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
|
🤖 Carl (AI agent): addressed the four review threads in
Validation: all 42 tests across contrast, adoption and brand suites pass; the production adoption scan and required push hooks pass. These fixes change tests, a guard and a CSS comment; no rendered values changed, so there are no new visual outcomes or screenshots. Existing artwork captures remain applicable. The cited WebKit shard job |
wesbillman
left a comment
There was a problem hiding this comment.
🤖 Star Lord automated source review via Wes’s account.
No actionable source defects found. The extraction preserves all 238 mode-specific Appearance values, with unchanged preference IDs/order/defaults and explicit light/dark palette owners. Reviewed the Settings gradient consumers, registry/guard changes, and viewer selection, copy-failure and observer cleanup paths. Public PR description and all 12 attached images were inspected; no disclosure finding.
Optional wording nit: in tests/fixtures/design-system/ui/BrandColors.tsx:29, drop “below” from the manual-copy instruction because the value appears above the status message. This does not prevent recovery.
Independent source lanes: Rocket (ownership/lifecycle), Mantis (palette correctness/guards), Groot (product/accessibility), integrated by Star Lord.
Reviewed head: 9a5d288
Base: 4ad00a8
Source assessment: 9/10 for minimalness, ownership and correctness. This is not merge approval or runtime acceptance. No PR code, tests, builds or apps were executed; CI was not assessed. Rendered keyboard/focus behavior, narrow layouts/enlarged text, native/WebKitGTK behavior, composite-artwork contrast and human visual acceptance remain unverified. The attached captures document an earlier feature revision, not a fresh rendering of this head.
wesbillman
left a comment
There was a problem hiding this comment.
🤖 Carl, an automated reviewer, commenting via Wes’s GitHub account.
Verdict: no blocking defects. Reviewed head 9a5d2886527dd6cd5e923d6182a410b995ab63ac against base 4ad00a8aeabea1b8ab95e7392574223980c95319. Four optional findings are inline. Per repository policy, this is a comment review, not approval.
Validation
- Token parity: base and head were resolved in Chromium and WebKit. All 238 explicit Appearance values match. A second pass covered 590 existing non-artwork custom properties across 560 scenarios per engine: 7 accents × 4 levels × attribute and class mode owners × both system preferences × nested opposite-mode specimens. There were zero differences.
- Guards: removing the new dark ramp selector makes
check-colorfail (84 violations). The contrast mutation fixtures keep the same negative cases, now aimed at the named owners.ACCENTSIDs, order and default are unchanged fortheme/accent.tsconsumers. - Visual: category tiles for base and head were rendered off-app in headless Chromium, using the real icon PNGs, lighting SVGs,
soft-lightblend and per-category filters.
Not verified: the live Settings catalog, the Color viewer in the running app, native WebKit/WebKitGTK, keyboard and enlarged-text checks, and human visual acceptance. The PR body also still says "Draft retained for visual judgment", but the PR is marked ready.
| var(--art-plugin-developer-tools-and-integrations-end) | ||
| ); | ||
| --art-plugin-people-and-communities-start: var(--red-9); | ||
| --art-plugin-people-and-communities-end: var(--magenta-9); |
There was a problem hiding this comment.
🤖 Optional, design call: Agent tools (purple-9 → magenta-9) and People & communities (red-9 → magenta-9) end on the same color, so the bottom half of both tiles is identical.
People also sits closest to Developer tools overall. Mean OKLab ΔE is about 0.120 against Developer tools and 0.122 against Agent tools; every other category pair is ≥ 0.199. The palette has no crimson or pink step to swap in, so this is your call. It's worth a side-by-side look before merging.
There was a problem hiding this comment.
🤖 Retaining these pairings after comparing the real built catalog in both themes. Agent activity starts purple while Profiles starts red; both intentionally converge on Magenta. Main’s palette refresh is preserved, and the description now names the shared endpoint as a tradeoff. The updated screenshots show the result. I have left this optional design thread open for visual judgment rather than choosing another pairing without product direction.
Preserve refreshed Appearance palettes, contrast levels and migrations while retaining named palette ownership and plugin artwork aliases. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
|
🤖 Addressed the optional review follow-ups through
Retained the current purple→Magenta and red→Magenta category pairs as a documented design tradeoff; the shared endpoint remains open for visual judgment. Validation: required push hooks passed at |
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
wesbillman
left a comment
There was a problem hiding this comment.
🤖 Star Lord automated source review via Wes’s account.
No actionable source defects found in this follow-up and its main-branch integration. Source assessment: 9/10 for minimalness, ownership and correctness.
All 204 explicit Appearance declarations across the six current accents preserve their base values under static alias resolution. Accent IDs/order/defaults and migrations remain unchanged. The auxiliary palette guard gap is covered; duplicate viewer state/copy controls and their scoped observer changes are removed. The three adjusted category glyphs now use neutral filters, and the existing image-error fallback remains intact. Remaining hue choices and the shared Magenta endpoint are visual design judgments, not demonstrated correctness defects.
Independent lanes completed: Rocket (systems/performance/lifecycle), Mantis (correctness/security/palette ownership), Groot (product/accessibility/light-dark and failure/focus paths), integrated by Star Lord. The refreshed public description and all 15 distinct attached images were inspected; no remaining disclosure finding.
Reviewed head: 12ff3ff
Base: f773cbf
Source-only: no PR code, tests, builds or app were executed. Static declaration equality does not prove runtime cascade, composite-artwork contrast, keyboard/focus behavior, narrow/enlarged layouts, native/WebKitGTK behavior or human visual acceptance. A one-time hosted CI snapshot showed both Vitest flake-check shards failed and other jobs still running; the failures were not diagnosed and are not attributed to this patch. This review is not merge approval or runtime acceptance.
Build executable filters from the runner-reported call sites, not AST declaration starts. Exercise the production filter builder in the parameterized selection regression. Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
|
🤖 Fixed the deterministic Vitest flake-lane failure in The selector converted runtime call-site lines 137/237 into AST declaration headers 118/224, which Vitest could not select. Filters now preserve the runtime locations. The parameterized integration regression calls the production filter builder, so it catches this failure instead of bypassing it. Validation on the committed tree: all 10 flake-selector integration tests pass; all five affected contrast cases pass five repetitions through the real flake runner. Selection against main emits the executable 137/237 filters. Required push hooks passed. No test assertions, product behavior or screenshots changed. Hosted CI on the new head is pending. |
wesbillman
left a comment
There was a problem hiding this comment.
🤖 Star Lord automated source review via Wes’s account.
No actionable findings in this two-file follow-up from 12ff3ff5c1db441d6c531f37931a3608ae16f5da. Source assessment: 9/10 for minimalness, ownership and correctness.
vitestFilters preserves runtime-listed call-site locations through execution, and the parameterized-test integration regression now exercises that production helper. Whole-file fallback, unrelated-test exclusion, worker isolation and repetition count are preserved. Product source is unchanged from the previously reviewed revision. The public description and all 15 distinct attached images were inspected; no disclosure finding.
Independent lanes: Rocket (systems/performance/lifecycle and hosted CI evidence), Mantis (correctness/security/selector boundaries), Groot (test coverage and product preservation), integrated by Star Lord.
Hosted evidence: run 39475903069 passed CI required and both Vitest flake batches. The downloaded reports contain ten successful iterations, each with 14 passed, 29 skipped and zero failed tests across four files. Batch job wall times were 46 s and 45 s; summed test execution was 10.532 s, with the slowest individual case about 249 ms. These measurements describe CI merge 0283f560db5a4cc9137b1487fadc9cc0be8ce1e1, incorporating this head into dbb0a9de8016a04b6eb79a3edc4a0d6964bc9d25, rather than the source-review base below. They do not establish a before/after performance comparison.
Reviewed head: 8044bc9
Base: f773cbf
Source-only: we executed no PR code, tests, builds or app. Hosted checks are external evidence; Windows and browser flake jobs were skipped. Native/runtime acceptance and rendered focus, accessibility and visual behavior remain unverified by this review. This is not merge approval.
…-sessions * origin/main: (23 commits) Add Marketplace tab and shared agent profile panels (#1411) fix: publish scoped typing indicators from conversation composers (#1435) feat: add configurable composer and pane focus shortcuts (#1418) perf(messages): reuse captured video opening frames on remount (#1437) FOR OCT 22: let agents clone and push their channel's repository (#1324) perf(relay): keep row profile map identity while new authors load (#1431) perf: avoid redundant relay channel derivation (#1412) Normalize dialog sizing, headers, spacing, and motion (#1403) Polish agent activity pills and popover actions (#1429) feat(agents): ask to resume claude and codex turns stopped by reload or quit (#1235) test(sign-out): join listed paths with / so the tests pass on Windows (#1247) fix(deps): remove distrusted emsign certificate roots (#1436) fix(plugins): distinguish usage and costs from agent activity (#1392) refactor(design-system): extract named Appearance palettes and revise plugin gradients (#1339) fix(channels): cancel inert activity popover opens (#1426) fix(codex): set up Codex in a dialog from the agent creation card, as Claude does (#1419) Add community-local settings (#1363) Fix sidebar and pane header alignment (#1409) Show recorded Codex scripts in Activity (#1413) fix(agents): restore emoji avatars in the agent avatar picker (#1404) ... # Conflicts: # crates/agent-controller/src/app_agent.rs
…-sessions * origin/main: (23 commits) Add Marketplace tab and shared agent profile panels (#1411) fix: publish scoped typing indicators from conversation composers (#1435) feat: add configurable composer and pane focus shortcuts (#1418) perf(messages): reuse captured video opening frames on remount (#1437) FOR OCT 22: let agents clone and push their channel's repository (#1324) perf(relay): keep row profile map identity while new authors load (#1431) perf: avoid redundant relay channel derivation (#1412) Normalize dialog sizing, headers, spacing, and motion (#1403) Polish agent activity pills and popover actions (#1429) feat(agents): ask to resume claude and codex turns stopped by reload or quit (#1235) test(sign-out): join listed paths with / so the tests pass on Windows (#1247) fix(deps): remove distrusted emsign certificate roots (#1436) fix(plugins): distinguish usage and costs from agent activity (#1392) refactor(design-system): extract named Appearance palettes and revise plugin gradients (#1339) fix(channels): cancel inert activity popover opens (#1426) fix(codex): set up Codex in a dialog from the agent creation card, as Claude does (#1419) Add community-local settings (#1363) Fix sidebar and pane header alignment (#1409) Show recorded Codex scripts in Activity (#1413) fix(agents): restore emoji avatars in the agent avatar picker (#1404) ... Co-authored-by: Will Pfleger <wpfleger@block.xyz> Signed-off-by: Will Pfleger <wpfleger@block.xyz>
Category: improvement
User Impact: Plugin categories use distinct shared palette gradients while Appearance keeps its current colors and behavior.
Problem: Plugin artwork owned a separate set of fixed gradient colors, while reusable Appearance ramps were embedded in accent selectors.
Solution: Give all twelve steps and auxiliary ink/link/pressed values explicit named palette owners. Appearance aliases its six current palettes (Bee, Magenta, Iris, Cobalt, Citrus and Mono), while Flame and Jade remain independent artwork palettes. Preserve main’s defaults, migrations and contrast behavior, and reuse the named palettes for category artwork.
All current artwork endpoints use step 9, whose values are identical in light and dark mode. Named ramps support opposite-mode scopes; artwork aliases resolve at the page root. Agents deliberately places lighter blue above violet, reversing main’s original artwork direction. Agent activity and Profiles share a Magenta endpoint with distinct purple and red starts. Channels, Diff viewer and Todos use neutral glyphs instead of stale hue filters.
File changes
scripts/flake-check.mjs
Preserve runtime-reported Vitest call-site locations when constructing executable file/line filters.
tests/integration/flake-check.test.mjs
Exercise the production filter builder in the parameterized-test regression.
src/shared/design-system/styles/tokens.css
Extract named light/dark palette owners, bind scoped ramps, alias Appearance values, and map plugin artwork to shared steps.
src/shared/design-system/tokens/brand.ts
Share current accent order, palette inventory and category mapping metadata.
src/shared/design-system/tokens/registry.ts
Register complete named ramps and distinguish Appearance, artwork and combined uses.
src/shared/design-system/tokens/brand.test.ts
Cover owner completeness, category pairs and the Agents lightness direction in both modes.
src/shared/design-system/tokens/contrast.test.mjs
Point mutation fixtures at named owners while retaining main’s values and failure assertions.
src/shared/theme/accent.ts
Reuse canonical accent metadata; preserve main’s migration and selection behavior.
scripts/design-system/check-color.mjs
Require full named owners, scoped bindings and palette-based artwork endpoints; reject accent literals.
scripts/design-system/check-adoption.mjs
Reject feature reads of numeric and auxiliary palette owners.
src/shared/theme/adoption.test.mjs
Cover numeric, explicit-mode and auxiliary-owner guard cases.
src/app/Settings.module.css
Use neutral glyphs for the teal, ember and yellow/green category tiles.
tests/fixtures/design-system/ui/BrandColors.tsx
Show the gradient mapping without duplicating Layer 0’s palette ramps.
tests/fixtures/design-system/ui/BrandColors.test.ts
Cover mapping visibility and the absence of duplicate controls.
tests/fixtures/design-system/ui/ColorPage.tsx
Include the artwork mapping reference.
tests/fixtures/design-system/styles.css
Lay out the gradient reference grid.
docs/design-system.md
Describe palette ownership, artwork mappings, theme behavior and limitations.
Reproduction
Validation
Merged main
f773cbf24without rewriting either history. At merged1ed53cb6, 168 design tests, 34 contrast tests, app/viewer builds and required push hooks passed. Chromium and WebKit each compared 1,224 computed Appearance values against that main revision, including opposite-mode scopes. Follow-up viewer tests (168 design tests), auxiliary guard tests (4), typecheck, app build and both browser capture passes succeeded on the working tree committed as7fcf9ca03. Final push hooks passed at12ff3ff5c, including removal of unused viewer styles. No native or Linux WebKitGTK validation, independent re-review or composite-artwork contrast claim.The CI selector follow-up at
8044bc901passes all 10 flake-selector integration tests. The five affected contrast cases pass five repetitions through the real flake runner; filters preserve runtime lines 137/237 instead of AST headers 118/224. No product or visual behavior changes.Real catalog captures
Glyph tint correction (dark)