Phase B: Consolidate shared helpers and fix theming violations - #708
Merged
Conversation
- Convert 44 px → rem (except borders/shadows in comments) - Convert 7 background: → background-color: - Used by geo-point and geo-search-point fields - Clears 162 violations Refs: CS-12775 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Staging Submissions PreviewThis PR's content is pushed to the staging submissions realm: https://realms-staging.stack.cards/submissions/ Changed folders:
Updated at 2026-09-04 07:28:08 UTC for commit |
lucaslyl
changed the title
…amples Create a reusable CardDef that wraps CodeSnippet for consistent code example display across field Specs. Provides Edit, Embedded, and Atom presentations to support flexible rendering in different contexts. This foundation enables field Specs to reference shared example instances instead of duplicating code-snippet styling and markup. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Audio field presentation variants (trim-editor, mini-player, album-cover-player, playlist-row, volume-control, waveform-player, waveform-visualizer, base-audio-player) remain in components/ as edit/embedded/atom presentation components for the AudioField. These are presentation variants controlled by the field's variant/presentation configuration, not utility helpers. They stay in components/ for clear structural organization. Note: pret-ui-theming violations (hex colors, background: shorthand) in these components will be addressed in Phase E (theming audit). Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
lucaslyl
force-pushed
the
cs-12775-phase-b-consolidate-shared-helpers
branch
from
September 4, 2026 05:52
cb8ecf6 to
6a97601
Compare
Remove unnecessary SpecExampleSnippet CardDef. The existing code-snippet.gts component is already clean (no px, no hex fallbacks) and shared by all 14 field Specs — no additional wrapper needed. Consolidation achieved by: existing code-snippet.gts is already a shared, portable component used consistently across all field Specs. Theming violations in Specs themselves will be addressed in Phase E. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Replace hardcoded hex colors (#ebeaed, #e2e2e2, #646464) in 6 Spec files with theme tokens (var(--boxel-200), var(--boxel-100), var(--boxel-dark)) to comply with pret-ui-theming Rule 6 (no bare hex colors). Affected Specs: - audio-field-spec.gts - geo-point-spec.gts - geo-search-point-spec.gts - quantity-field-spec.gts - rating-field-spec.gts - recurring-pattern-field-spec.gts Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Create shared components/spec-container.gts and components/spec-example-card.gts to eliminate duplicate .container/.fields-configuration-card style blocks that were repeated within each Spec file (Isolated + Edit) AND across all 6 Spec files. Updated Specs: audio-field-spec, geo-point-spec, geo-search-point-spec, quantity-field-spec, rating-field-spec, recurring-pattern-field-spec All 6 Specs now import and use SpecContainer/SpecExampleCard instead of inline <article class='container'>/<article class='fields-configuration-card'> with duplicated <style scoped> blocks. Verified: prettier clean, tag balance verified (open/close counts match). Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
…ntainer Rename spec-container.gts/spec-example-card.gts to more accurate names and reduce duplication further by reusing CardContainer instead of reinventing border/background/border-radius (per pret-ui-theming Rule 4: don't restate CardContainer's defaults): - components/field-usage-example-container.gts (was spec-container.gts) Page-level wrapper for a field's usage-example Spec page. Comment explains why it exists: avoid duplicating this block twice per Spec (Isolated+Edit) and across all 6 Specs; centralizes future token/theming changes. - components/field-example.gts (was spec-example-card.gts) Wraps CardContainer (@displayBoundaries) instead of manually defining border/border-radius/background-color -- only adds the flex layout this card needs on top of CardContainer's existing theming. Updated all 6 Specs (audio, geo-point, geo-search-point, quantity, rating, recurring-pattern) to use the renamed components. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- map-render.gts: convert background shorthand to background-image for the gradient, map a handful of chrome hex colors to boxel tokens, and comment the remaining data-driven hex colors (marker categories, open/closed status) as special-use since no matching token exists yet. - Rename field-usage-example-container -> field-showcase and field-example -> field-showcase-card, with --field-showcase-* CSS vars, for clearer naming.
Unused: code-snippet.gts defines its own independent --field-header-bg/--field-bg/--field-fg/--field-border and never reads these.
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The changes are straightforward refactors and theming/style-token adjustments with no functional regressions evident from the updated code paths.
Pull request overview
Completes “Phase B” of the Master Catalog Refactor by consolidating repeated Spec-only layout/styling into shared components and continuing the “pret-ui-theming” cleanup work (px→rem and background shorthand removal) in map-render.gts.
Changes:
- Replaced duplicated per-Spec wrapper and example-card markup/styles with shared
FieldShowcaseandFieldShowcaseCardcomponents across 6 field Specs. - Added new shared components
components/field-showcase.gtsandcomponents/field-showcase-card.gts(the latter wrappingCardContainer). - Continued theming-violation fixes in
components/map-render.gts(px→rem,background:→background-color:/background-image:, and mapped some UI chrome colors to theme tokens).
File summaries
| File | Description |
|---|---|
| fields/recurring-pattern/Spec/recurring-pattern-field-spec.gts | Swaps duplicated container/example card markup & scoped CSS for shared FieldShowcase components. |
| fields/rating/Spec/rating-field-spec.gts | Same Spec wrapper/card consolidation via FieldShowcase + FieldShowcaseCard. |
| fields/quantity/Spec/quantity-field-spec.gts | Same Spec wrapper/card consolidation via FieldShowcase + FieldShowcaseCard. |
| fields/geo-search-point/Spec/geo-search-point-spec.gts | Same Spec wrapper/card consolidation for multiple examples in the Spec. |
| fields/geo-point/Spec/geo-point-spec.gts | Same Spec wrapper/card consolidation for multiple examples in the Spec. |
| fields/audio/Spec/audio-field-spec.gts | Same Spec wrapper/card consolidation for multiple examples in the Spec. |
| components/map-render.gts | Converts additional measurements to rem, replaces background shorthands, and updates select colors to theme tokens. |
| components/field-showcase.gts | New shared Spec “page-level” wrapper component holding the background/padding/min-height rules. |
| components/field-showcase-card.gts | New shared Spec “example card” wrapper using CardContainer and applying consistent layout spacing. |
Review details
- Files reviewed: 9/9 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
richardhjtan
approved these changes
Sep 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete Phase B of the Master Catalog Refactor:
Fixes: CS-12775
Part 1: Fix map-render.gts theming violations ✅
Part 2: Extract hex colors from Spec style definitions ✅
Part 3: Consolidate duplicate Spec container styles ✅
components/field-showcase.gts(page-level wrapper) +components/field-showcase-card.gtsfield-showcase-card.gtsreusesCardContainer(@displayBoundaries) instead of reinventing border/background/radius — per pret-ui-theming Rule 4 ("don't restate CardContainer's defaults")--field-showcase-*Part 4: Close out remaining map-render.gts theming violations ✅
background: linear-gradient(...)→background-image:(Rule 5)Full theming compliance (all 7 pret-ui-theming rules, every presentation format) lands in Phase E (CS-12778), run against the new pretui theme contract — this PR covers Phase B's helper-consolidation scope only.
Part of: CS-12782 Master Catalog Refactor
Test plan
🤖 Generated with Claude Code