Add typography preview and improve color swatches in admin UI - #147
Merged
Conversation
#123 — remove .visually-hidden from docs; sr-only is the single canonical name (architecture.md table + demo heading updated). #137 — version-sync.js now also syncs the plugin header "Version:" comment and SLASHED_BRICKS_VERSION constant alongside CSS_REF, so a single release bump keeps all three in lockstep. #139 — fix demo layout: top-level .sf-section elements inside #main were missing padding-inline, causing Macros and later sections to bleed to screen edges on mobile. Added scoped rule `#main > .sf-section { padding-inline: var(--sf-space-l); border-top: … }`. #140 — BemBadge: replace <button> with <span role="button"> so the element carries no button box-model (no min-height), preventing structure-panel row resize in Bricks. CSS updated accordingly. #144 — add TypographyPreview component: fluid-type scale visual preview with a viewport scrubber (320–1440 px). Each size step is rendered at the interpolated clamp() size in real time. Wired into TypographyTab below the Font Size Scale section. #145 — fix LivePreview grey swatches: inlineStyle now falls back to meta.defaults.colors.*_hex_hints when no override is stored, so swatches show real colors on first load. Added dark-mode preview section using brand_dark_hex_hints / status_dark_hex_hints as defaults when no explicit dark overrides are set. https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
|
Warning Review limit reached
More reviews will be available in 46 minutes and 23 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR restructures the admin token editor's UI by consolidating multiple separate tabs into a unified "misc" tab with collapsible advanced sections, introduces interactive typography and spacing scale previews, refactors the backend tab registry to support the new organization, and removes obsolete ChangesAdmin Token Editor and UI Consolidation
Documentation and Asset Updates
Possibly related PRs
🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Tab registry: consolidate contrast/radius/shadows/motion/zindex into a single 'misc' (Miscellaneous) tab. Add get_misc_sections() so the REST API continues to accept individual section slugs for save/reset. is_token_tab() now accepts both the top-level tab slugs and the misc sub-section slugs. Token defaults: add glow_color (empty = auto = var(--sf-color-primary)) to the shadows section defaults. CSS generator: emit --sf-shadow-glow-color when glow_color override is set, wiring the admin field through to the framework token. https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
AdvancedSection: new shared collapsible component (Svelte 5 snippets). MiscTab: consolidates Radius + Shadows + Motion + Z-Index + Contrast into a single tab. Basic section has the 4 most-touched knobs (radius scale, shadow strength, motion scale, focus ring) with inline live previews for radius (scaled squares) and shadows (approximated box-shadows). Advanced section has glow color, duration values, z-index layers, and contrast fine-tuning. ColorTab: status colors + dark overrides moved to AdvancedSection; brand light colors remain always-visible. TypographyTab: mono/display/humanist/geometric/slab families and scale multipliers moved to AdvancedSection; body/heading + all size steps (text + display) stay basic. TypographyPreview updated to show Text Scale and Display Scale as two distinct visual groups. SpacingTab: 5 alias fields moved to AdvancedSection; Space Scale stays basic. New SpacingPreview shows fluid spacing bars (2xs–4xl) with a 320–1440 px viewport slider. SaveBar: save() and reset() now iterate MISC_SECTIONS when the active tab is 'misc', keeping each sub-section's REST endpoint intact. App: removed 5 individual tab components, wired MiscTab. https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
- Remove unused vwPercent derived in SpacingPreview and TypographyPreview - Remove unused stepNames derived in TypographyPreview - Remove clampFormula computation from stepAt (never rendered) - Use RADIUS_BASES[i] === 9999 instead of r === 9999 * radiusScale to avoid NaN px border-radius when radius_scale is non-numeric https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@integrations/bricks/admin-app/src/components/AdvancedSection.svelte`:
- Around line 7-13: The toggle button (advanced-section__toggle) never exposes
the disclosure state; update the button to include aria-expanded="{open}" and
add aria-controls pointing to an id on the collapsible region, and give the body
div (advanced-section__body) a unique id (e.g., src-generated or a passed prop)
so aria-controls references it; keep the existing open binding and children()
render but ensure the body id is stable/unique and used by aria-controls to
satisfy the disclosure pattern.
In `@integrations/bricks/admin-app/src/components/MiscTab.svelte`:
- Around line 180-187: The Glow Color TextField in MiscTab.svelte (TextField
with fieldKey "glow_color") is not seeded from meta.defaults, causing it to
render blank after load/reset; update the component props so its default value
comes from the theme metadata (e.g., meta.defaults.shadows.glow_color or
equivalent) instead of an empty string, ensuring it uses the same source as the
other shadow fields and preserves the backend default when rendering/resetting.
In `@integrations/bricks/admin-app/src/components/SaveBar.svelte`:
- Around line 35-40: The loop under ui.activeTab === 'misc' that calls
api.saveSection for each entry in MISC_SECTIONS must not mutate tokens mid-loop;
instead batch or gather results first (e.g., map to promises and use
Promise.allSettled) so you can detect per-section failures, then either (A) only
commit tokens[section] updates if all sections succeeded to preserve atomicity
from the UI, or (B) commit successful section updates but surface a per-section
error summary to the user so they know which sections failed; apply the same
change for the other occurrence at lines 74-78. Ensure references:
MISC_SECTIONS, api.saveSection, tokens, and ui.activeTab are used to locate the
code to change.
In `@integrations/bricks/admin-app/src/components/SpacingPreview.svelte`:
- Around line 57-68: The range input in SpacingPreview.svelte (the element with
class "spacing-preview__slider" and bind:value={vw}) lacks an accessible name;
add one by either adding a visible <label> tied to the input (using for/id) or
adding an aria-label (e.g., aria-label="Preview viewport width") to the input
element so assistive tech can announce what the slider controls.
- Around line 14-18: The slider has a dead zone because VW_MIN is 375 while the
control range starts at 320 and vw is initialized to 1440; fix by making VW_MIN
match the rendered slider lower bound (set VW_MIN to 320) or initialize vw to
VW_MIN so interpolation starts immediately, and then update all usages that
perform viewport interpolation or clamping (references: VW_MIN, VW_MAX, vw and
any interpolation/scale logic in the blocks around the other occurrences) to
rely on the corrected VW_MIN/VW_MAX so there is no initial non-responsive
travel.
In `@integrations/bricks/admin-app/src/components/TypographyPreview.svelte`:
- Around line 18-20: The preview's viewport bounds (VW_MIN, VW_MAX) must match
the CSS generator's build_clamp() (22.5rem→95rem = 360px→1520px): update VW_MIN
and VW_MAX in TypographyPreview.svelte to 360 and 1520 respectively (keep
BASE_PX=16), and also update the other duplicated viewport constants/uses in
this component (the blocks around the other occurrences currently at 48-60 and
186-197) and any slider min/max values so the live rem/px readout and slider
range match build_clamp() exactly.
- Around line 186-197: The range input with class "typo-preview__slider" (bound
to {vw}) has no accessible name; add one by either adding a visible <label>
associated with the input or adding an aria-label/aria-labelledby attribute
(e.g., aria-label="Preview viewport width" or aria-labelledby referencing a
nearby span) so assistive tech can announce the control; update the input
element in TypographyPreview.svelte to include the chosen accessible name and
ensure any visible label uses for/id or aria-labelledby matches the input.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 58a8b3ee-6411-4326-8440-59efb162a516
📒 Files selected for processing (20)
docs/architecture.mddocs/demo.htmlintegrations/bricks/admin-app/src/App.svelteintegrations/bricks/admin-app/src/components/AdvancedSection.svelteintegrations/bricks/admin-app/src/components/ColorTab.svelteintegrations/bricks/admin-app/src/components/LivePreview.svelteintegrations/bricks/admin-app/src/components/MiscTab.svelteintegrations/bricks/admin-app/src/components/SaveBar.svelteintegrations/bricks/admin-app/src/components/SpacingPreview.svelteintegrations/bricks/admin-app/src/components/SpacingTab.svelteintegrations/bricks/admin-app/src/components/TypographyPreview.svelteintegrations/bricks/admin-app/src/components/TypographyTab.svelteintegrations/bricks/assets/admin-app/app.cssintegrations/bricks/assets/admin-app/app.jsintegrations/bricks/editor-app/src/components/BemBadge.svelteintegrations/bricks/editor-app/src/styles/panel.cssintegrations/bricks/includes/class-css-generator.phpintegrations/bricks/includes/class-tab-registry.phpintegrations/bricks/includes/class-token-defaults.phpscripts/version-sync.js
AdvancedSection: add aria-expanded + aria-controls/id disclosure pattern MiscTab: seed glow_color default from shadowDefaults instead of hardcoded '' SaveBar: replace sequential misc loops with Promise.allSettled — runs all 5 section saves/resets in parallel, commits successful updates, and surfaces a named list of any failed sections instead of stopping mid-loop SpacingPreview: start slider at VW_MIN (375px) to eliminate dead zone; add aria-label to range input TypographyPreview: align VW_MIN/VW_MAX with build_clamp() constants (360px/1520px = 22.5rem/95rem); drive slider bounds from those constants; add aria-label to range input https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
8 tasks
This was referenced Jun 25, 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
2 participants
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
This PR enhances the Bricks admin app with a live typography scale preview component and improves the color preview to show dark mode variants and status colors. It also includes accessibility improvements and version sync updates.
Key Changes
New Features
Improvements
meta.defaults.colorshex hints when no user override is set, fixing the grey-swatch bug where colors wouldn't display until explicitly configured.<button>to<span role="button">to prevent unintended box-model sizing that was resizing Bricks' structure-panel rows. Maintains full keyboard and click activation.slashed-bricks.php.Documentation & Styling
docs/demo.htmlwith improved section styling and removed redundant.visually-hiddenreference.docs/architecture.mdto reflect current accessibility utilities.Implementation Details
https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY
Summary by CodeRabbit
Release Notes
New Features
Documentation