Refine design system: CSS tokens, typography & spacing#15
Merged
Conversation
…ss all views Introduces a 4-tier color token system (--fg through --fg-4), 8px spacing scale (--s1-s6), border tokens, and prefers-reduced-motion support. Updates all 13 component files to use tokens instead of hardcoded rgba values. Converts letter-spacing from px to em-based values, bumps minimum font size to 11px, and adds 3-zone CSS grid layout to the page shell with nav active indicator. Closes #14 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a root-level CSS design token set and prefers-reduced-motion rule; converts the app shell to a 3‑zone CSS grid with safe‑area handling; tokenizes colors/spacing across many components; normalizes button semantics; and makes CompletionScreen note-saving conditional with retry/error handling. (30 words) Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📋 Issue PlannerBuilt with CodeRabbit's Coding Plans for faster development and fewer bugs. View plan used: ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/PublicBoard.tsx (1)
63-70:⚠️ Potential issue | 🟠 MajorIncrease header label size to meet minimum readable text requirement.
Line 68 sets
fontSize: "9px", which is below the PR’s minimum text-size target and creates an accessibility regression.Suggested fix
- fontSize: "9px", color: "var(--fg-4)", + fontSize: "11px", color: "var(--fg-4)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/PublicBoard.tsx` around lines 63 - 70, The header grid in the PublicBoard component uses an inline style with fontSize: "9px" which violates the minimum readable text requirement; update the inline style object in the div (the one with gridTemplateColumns and fontFamily) to increase fontSize to the project's minimum (e.g., "12px" or the design token used for header labels) or swap to a responsive CSS variable so the header text meets accessibility targets; ensure you update the fontSize value in that specific div style block so the change applies to the header labels rendered by PublicBoard.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/page.tsx`:
- Around line 243-261: The navigation <button> elements rendering in page.tsx
(the ones using onClick={() => setView(v)} and styling inline) should include an
explicit type attribute to prevent unintended form-submit behavior; update the
button JSX to add type="button" on the buttons that call setView(v) (the
elements referencing view and setView) so their intent is explicit and
future-proofs the component.
In `@src/components/HomeView.tsx`:
- Around line 63-89: The <button> in HomeView.tsx (the element using onBegin and
the mouse/focus handlers) should explicitly include type="button" to avoid
default submit behavior if later placed inside a form; update the JSX for that
button element to add the type attribute while keeping existing props and
handlers (onClick={onBegin}, onMouseEnter, onMouseLeave, onFocus, onBlur).
In `@src/components/PublicBoard.tsx`:
- Around line 52-56: In the PublicBoard component's paragraph style block
replace the pixel letter-spacing with an em value: change letterSpacing: "1px"
to the equivalent em based on the declared fontSize (11px) — e.g. letterSpacing:
"0.09em" (or "0.091em") — so the <p> style uses em units consistently.
---
Outside diff comments:
In `@src/components/PublicBoard.tsx`:
- Around line 63-70: The header grid in the PublicBoard component uses an inline
style with fontSize: "9px" which violates the minimum readable text requirement;
update the inline style object in the div (the one with gridTemplateColumns and
fontFamily) to increase fontSize to the project's minimum (e.g., "12px" or the
design token used for header labels) or swap to a responsive CSS variable so the
header text meets accessibility targets; ensure you update the fontSize value in
that specific div style block so the change applies to the header labels
rendered by PublicBoard.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
…nd 9px font sizes - Add explicit type="button" to nav buttons (page.tsx) and Begin button (HomeView.tsx) - Convert remaining letterSpacing from px to em in PublicBoard, HistoryView, CompletionScreen - Bump 9px font sizes to 11px minimum (PublicBoard header, HistoryView thought timestamps) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/CompletionScreen.tsx (1)
149-154:⚠️ Potential issue | 🟠 MajorHandle note-save failures so UI doesn’t get stuck in
saving.If
onSaveNotethrows,setSaving(false)is skipped and the button can remain disabled indefinitely.Proposed fix
- onClick={async () => { - setSaving(true); - await onSaveNote(note.trim()); - setSaving(false); - setNoteSaved(true); - }} + onClick={async () => { + setSaving(true); + try { + await onSaveNote(note.trim()); + setNoteSaved(true); + } finally { + setSaving(false); + } + }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 149 - 154, The onClick handler sets saving state then awaits onSaveNote but doesn't handle exceptions, so if onSaveNote throws setSaving(false) is never called and the UI stays stuck; wrap the await onSaveNote(note.trim()) in try/catch/finally (or use .catch/.finally) inside the onClick for CompletionScreen so that setSaving(false) always runs in finally, only call setNoteSaved(true) on success, and in the catch branch surface an error (e.g., call a provided error handler or set an error state) to inform the user; reference the onSaveNote function and setSaving/setNoteSaved state setters when making the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/page.tsx`:
- Around line 219-223: The SessionView is being placed into the first grid row
when header/nav are not rendered because the container uses a static
gridTemplateRows ("auto 1fr auto"); update the layout logic in page.tsx to make
grid rows conditional on the view variable so SessionView ends up centered —
e.g., when view === "session" set the container's gridTemplateRows to "1fr" (or
otherwise ensure SessionView gets gridRow: "2" if you keep three rows); modify
the style object where gridTemplateRows is set and adjust the rendering of
SessionView so it uses the computed grid placement (referencing view and
SessionView in page.tsx).
In `@src/components/HomeView.tsx`:
- Around line 83-89: The current onFocus/onBlur handlers in HomeView.tsx apply
an outline for all focus events; update the component to only show the focus
ring for keyboard navigation by removing the inline onFocus/onBlur style changes
and using either a CSS :focus-visible rule for the element or track keyboard vs
mouse interaction (e.g., set a isKeyboardNavigation flag in component state via
onKeyDown and onMouseDown handlers) and conditionally apply the outline style
when isKeyboardNavigation is true; adjust the element’s className or inline
style logic in HomeView to reference that flag or rely on :focus-visible so
mouse clicks won’t trigger the visible outline while keyboard tabbing will.
---
Outside diff comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 149-154: The onClick handler sets saving state then awaits
onSaveNote but doesn't handle exceptions, so if onSaveNote throws
setSaving(false) is never called and the UI stays stuck; wrap the await
onSaveNote(note.trim()) in try/catch/finally (or use .catch/.finally) inside the
onClick for CompletionScreen so that setSaving(false) always runs in finally,
only call setNoteSaved(true) on success, and in the catch branch surface an
error (e.g., call a provided error handler or set an error state) to inform the
user; reference the onSaveNote function and setSaving/setNoteSaved state setters
when making the change.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
src/app/page.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/PublicBoard.tsx
…save - Make grid-template-rows conditional so SessionView gets full 1fr centering - Use :focus-visible check on Begin button so mouse clicks don't show outline - Wrap onSaveNote in try/finally so saving state always resets on error Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/CompletionScreen.tsx (1)
82-83:⚠️ Potential issue | 🟠 MajorNeutral base colors are still hardcoded in tokenized blocks.
rgba(232,228,222,0.02/0.04)remains in Line 82 and Line 136 inside sections otherwise migrated to tokens. This undercuts the design-token rollout and should be replaced with token-backed surface/color values.Also applies to: 136-137
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 82 - 83, In CompletionScreen.tsx replace the hardcoded rgba values used in the style objects (the background: "rgba(232,228,222,0.02/0.04)" and borderLeft: "2px solid rgba(251,191,36,0.15)") with the proper design tokens—use the project’s token-backed surface/color variables (e.g., a subtle surface background token and a token for the warning/accent border color) instead of raw rgba strings; update both occurrences inside the CompletionScreen component’s style blocks so background and borderLeft reference the token names (importing/using the existing token constants or theme object already used elsewhere in this file).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/page.tsx`:
- Around line 233-234: Replace the hardcoded RGBA in the background style in
page.tsx with a tokenized RGB CSS variable: add a --bg-rgb variable (value "26,
24, 22") to :root in globals.css, then update the background assignment in the
component (the background property currently set to "rgba(26,24,22,0.92)") to
use the CSS variable with the 0.92 alpha (i.e., use the var(--bg-rgb) for RGB
and keep alpha 0.92) so the color follows the token strategy while preserving
the backdrop transparency.
- Around line 224-226: Extract the hardcoded mobile nav height into a CSS
variable and use it in the padding expression: add a token like --nav-height
(e.g., in globals.css :root) and replace the literal "96px" in the padding
calculation inside the isMobile branch of the padding assignment in
src/app/page.tsx so the expression becomes something that references
var(--nav-height) (keeping the existing env(safe-area-inset-bottom, 0px)
fallback behavior); update any related docs or comments if needed.
In `@src/components/CompletionScreen.tsx`:
- Line 49: The CompletionScreen component contains inline style objects that use
hardcoded pixel values (12px, 4px, 8px, 10px, 16px, 24px and letterSpacing) —
replace these raw px values with the app's global spacing and typography tokens
(e.g., tokens.space.* or theme.spacing[*] and tokens.letterSpacing.* /
theme.typography.*) so sizing is driven by the spacing scale; update every
inline style in CompletionScreen (look for marginTop, letterSpacing and the
other style properties referenced at the commented lines: 49, 63, 72, 89, 107,
117, 165) to use the appropriate spacing token equivalents and ensure consistent
units (no "px" strings).
- Around line 151-156: The try/finally around onSaveNote in the CompletionScreen
component currently resets saving but swallows rejections; add a catch handler
for the await onSaveNote(note.trim()) to explicitly handle failures (e.g., set
an error state like setSaveError, call setNoteSaved(false), log the error,
and/or show a user-visible message/toast) before the finally block that calls
setSaving(false), so save failures are observable and actionable; update any UI
to display the new save error state and ensure setNoteSaved is only set true on
success.
In `@src/components/HomeView.tsx`:
- Line 106: The FAQ label fontSize in HomeView.tsx is set to "11px" which
violates the requirement of >=12px; update the style where fontSize is defined
(the inline style object on the FAQ label in the HomeView component) to use
"12px" or a relative value that results in >=12px (e.g., "0.75rem" if your base
font meets the threshold), ensuring the change is applied to the exact style
object that currently contains fontSize: "11px".
- Around line 67-81: Replace the hardcoded RGBA background and borderColor
values in the HomeView CTA element with theme tokens: update the inline style
object's background and the onMouseEnter/onMouseLeave handlers to use CSS vars
(e.g., var(--cta-bg), var(--cta-bg-hover), var(--border-cta),
var(--border-cta-hover)) instead of "rgba(...)" and "var(--border-2)"; modify
the style block where the CTA is defined and the onMouseEnter/onMouseLeave
callbacks to set e.currentTarget.style.background and
e.currentTarget.style.borderColor to those token variables so the component
follows the global token theme.
---
Outside diff comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 82-83: In CompletionScreen.tsx replace the hardcoded rgba values
used in the style objects (the background: "rgba(232,228,222,0.02/0.04)" and
borderLeft: "2px solid rgba(251,191,36,0.15)") with the proper design tokens—use
the project’s token-backed surface/color variables (e.g., a subtle surface
background token and a token for the warning/accent border color) instead of raw
rgba strings; update both occurrences inside the CompletionScreen component’s
style blocks so background and borderLeft reference the token names
(importing/using the existing token constants or theme object already used
elsewhere in this file).
…ndler - Add --bg-rgb and --nav-h CSS tokens to globals.css - Use --bg-rgb in mobile nav backdrop, --nav-h in padding calc - Convert CompletionScreen spacing values (12px, 32px, 24px) to token vars - Add catch handler to onSaveNote so errors are logged Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/CompletionScreen.tsx (1)
151-158: 🧹 Nitpick | 🔵 TrivialError handling added but lacks user feedback.
The
try/catch/finallyblock is a good addition that addresses the previous review concern about silent failures. However, users still won't know the save failed — the UI only shows "note saved" on success or nothing on failure.Consider adding visual feedback for failures:
Suggested enhancement
const [note, setNote] = useState(""); const [noteSaved, setNoteSaved] = useState(false); const [saving, setSaving] = useState(false); +const [saveError, setSaveError] = useState(false); ... try { await onSaveNote(note.trim()); setNoteSaved(true); } catch (err) { console.error("Failed to save note:", err); + setSaveError(true); } finally {Then display
saveErrorstate in the UI (e.g., "failed to save" message).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 151 - 158, The try/catch in the save flow (around onSaveNote) suppresses errors from the user; add a saveError state (e.g., saveError / setSaveError) and in the catch block set that state with the error message instead of only console.error, clear saveError on successful save (alongside setNoteSaved(true)), and ensure setSaving(false) remains in the finally; also update the JSX in CompletionScreen to render saveError (a concise "Failed to save note" message or the error text) so users receive visual feedback when onSaveNote fails.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 12-18: The spacing scale comment "/* Spacing scale (8px base) */"
is inconsistent with the CSS variable --s2: 12px; either update the comment to
reflect a mixed/custom scale (e.g., "Spacing scale (8px base with a 12px tight
step)") or change --s2 to 16px to preserve a strict 8px progression; locate and
edit the comment and the --s2 variable in globals.css (variables --s1, --s2,
--s3, etc.) so the comment and values match the chosen convention.
---
Duplicate comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 151-158: The try/catch in the save flow (around onSaveNote)
suppresses errors from the user; add a saveError state (e.g., saveError /
setSaveError) and in the catch block set that state with the error message
instead of only console.error, clear saveError on successful save (alongside
setNoteSaved(true)), and ensure setSaving(false) remains in the finally; also
update the JSX in CompletionScreen to render saveError (a concise "Failed to
save note" message or the error text) so users receive visual feedback when
onSaveNote fails.
Comment on lines
+12
to
+18
| /* Spacing scale (8px base) */ | ||
| --s1: 8px; | ||
| --s2: 12px; | ||
| --s3: 16px; | ||
| --s4: 24px; | ||
| --s5: 32px; | ||
| --s6: 48px; |
There was a problem hiding this comment.
Spacing scale comment is misleading — --s2: 12px breaks the 8px multiple pattern.
The comment states "8px base" but --s2: 12px is not a multiple of 8. Either:
- Update the comment to reflect this is a mixed/custom scale, or
- Change
--s2to16pxif a strict 8px progression is intended (8, 16, 24, 32, 40, 48)
If 12px is intentional for tighter grouping, clarify the comment:
Suggested clarification
- /* Spacing scale (8px base) */
+ /* Spacing scale (8px-based with 12px variant) */
--s1: 8px;
--s2: 12px;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /* Spacing scale (8px base) */ | |
| --s1: 8px; | |
| --s2: 12px; | |
| --s3: 16px; | |
| --s4: 24px; | |
| --s5: 32px; | |
| --s6: 48px; | |
| /* Spacing scale (8px-based with 12px variant) */ | |
| --s1: 8px; | |
| --s2: 12px; | |
| --s3: 16px; | |
| --s4: 24px; | |
| --s5: 32px; | |
| --s6: 48px; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 12 - 18, The spacing scale comment "/*
Spacing scale (8px base) */" is inconsistent with the CSS variable --s2: 12px;
either update the comment to reflect a mixed/custom scale (e.g., "Spacing scale
(8px base with a 12px tight step)") or change --s2 to 16px to preserve a strict
8px progression; locate and edit the comment and the --s2 variable in
globals.css (variables --s1, --s2, --s3, etc.) so the comment and values match
the chosen convention.
Adds error message ("failed to save — tap to retry") and changes the
save button to a red-tinted "retry" state when onSaveNote throws,
addressing CR round 4 nitpick about silent failures.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/components/CompletionScreen.tsx (1)
63-64: 🛠️ Refactor suggestion | 🟠 MajorToken migration is still incomplete in touched styles.
These modified lines still mix raw
px/rgba(...)values with tokens, which weakens the design-system goal and makes global tuning harder.Also applies to: 72-73, 89-90, 98-98, 108-108, 118-118, 151-152, 175-180
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 63 - 64, In CompletionScreen.tsx the inline style objects (e.g., the one setting fontSize, color, letterSpacing, textTransform, marginTop) still use raw "11px" and hardcoded color values; replace those with the appropriate design tokens (e.g., fontSize tokens, spacing tokens for marginTop, and color tokens instead of rgba/hex) so all instances in CompletionScreen.tsx consistently use the design-system tokens; search for other inline style objects in this component (the blocks around the same properties mentioned and the other similar blocks flagged) and swap px/rgba literals for the matching tokens from your theme/token constants.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 148-155: The conditional save error message rendered in
CompletionScreen (the div shown when saveError is truthy) is not exposed to
assistive tech; modify that element to be an accessible live region (e.g., add
aria-live="assertive" and role="alert" or role="status") so screen readers
announce the failure when it appears, and keep the existing styling and text and
reference the saveError conditional and the div inside CompletionScreen when
making the change.
- Around line 158-187: In CompletionScreen, the two <button> elements (the save
button with onClick that calls onSaveNote and the other button around lines
marked 196-206) lack an explicit type attribute so they default to submit and
trigger accidental form submissions; update both button elements to include
type="button" (e.g., add type="button" to the button that sets
saving/setSaveError/onSaveNote and to the second button) to satisfy the lint
rule and prevent unintended submits.
---
Duplicate comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 63-64: In CompletionScreen.tsx the inline style objects (e.g., the
one setting fontSize, color, letterSpacing, textTransform, marginTop) still use
raw "11px" and hardcoded color values; replace those with the appropriate design
tokens (e.g., fontSize tokens, spacing tokens for marginTop, and color tokens
instead of rgba/hex) so all instances in CompletionScreen.tsx consistently use
the design-system tokens; search for other inline style objects in this
component (the blocks around the same properties mentioned and the other similar
blocks flagged) and swap px/rgba literals for the matching tokens from your
theme/token constants.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/CompletionScreen.tsx (1)
196-209:⚠️ Potential issue | 🟡 MinorAdd explicit
type="button"to the Return button.Same issue as the save button—missing explicit type attribute.
🔧 Proposed fix
<button + type="button" onClick={onReturn}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 196 - 209, The Return button JSX in the CompletionScreen component is missing an explicit type, which can cause it to act as a submit button in forms; update the <button> element that uses onReturn (the Return button in CompletionScreen) to include type="button" so it won't trigger form submission—keep all existing props and styles and only add the type attribute.
♻️ Duplicate comments (4)
src/components/HomeView.tsx (2)
104-112:⚠️ Potential issue | 🟡 MinorIncrease FAQ label size to meet the ≥12px requirement.
The FAQ label at line 106 uses
fontSize: "11px", but the PR objective states "labels ≥12px" for accessibility compliance.🔧 Proposed fix
<div style={{ fontFamily: "var(--font-jetbrains), 'JetBrains Mono', monospace", - fontSize: "11px", color: "var(--fg-3)", + fontSize: "12px", color: "var(--fg-3)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "var(--s3)", textAlign: "center", }}> FAQ </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` around lines 104 - 112, The FAQ label in the HomeView component is using fontSize: "11px" which violates the "labels ≥12px" requirement; update the inline style for the FAQ div (the styled block rendering "FAQ" in HomeView) to use at least "12px" (or a compliant rem/em value) for the fontSize property so the label meets accessibility size requirements.
67-67: 🧹 Nitpick | 🔵 TrivialTokenize CTA fill colors instead of hardcoded RGBA values.
The CTA background and hover states still use raw RGBA values (
rgba(232, 228, 222, 0.04)andrgba(232, 228, 222, 0.08)). This breaks the global token migration and makes future theme tuning harder. Consider defining tokens like--surface-ctaand--surface-cta-hover.♻️ Suggested approach
In
globals.css::root { --surface-cta: rgba(232, 228, 222, 0.04); --surface-cta-hover: rgba(232, 228, 222, 0.08); }Then in the component:
- background: "rgba(232, 228, 222, 0.04)", + background: "var(--surface-cta)", ... - e.currentTarget.style.background = "rgba(232, 228, 222, 0.08)"; + e.currentTarget.style.background = "var(--surface-cta-hover)"; ... - e.currentTarget.style.background = "rgba(232, 228, 222, 0.04)"; + e.currentTarget.style.background = "var(--surface-cta)";Also applies to: 76-77, 80-81
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` at line 67, Replace the hardcoded RGBA fills used for the CTA in the HomeView component with theme tokens: add CSS variables (e.g. --surface-cta and --surface-cta-hover) to globals.css with the current RGBA values, then update the HomeView styles (the inline style/background entries and the hover background entries found in the HomeView component) to use var(--surface-cta) and var(--surface-cta-hover) instead of the literal rgba(...) strings so the CTA background and hover states read from the global tokens.src/components/CompletionScreen.tsx (2)
148-156:⚠️ Potential issue | 🟡 MinorAdd accessibility attributes to the error message.
The error message is conditionally rendered but not announced to assistive technology. Screen-reader users may miss save failures.
♿ Proposed fix
{saveError && ( - <div style={{ + <div role="alert" aria-live="assertive" style={{ fontFamily: "var(--font-jetbrains), 'JetBrains Mono', monospace", fontSize: "11px", color: "rgba(239,68,68,0.7)", letterSpacing: "0.09em", }}> failed to save — tap to retry </div> )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 148 - 156, The error message rendered inside CompletionScreen.tsx when saveError is truthy should be made accessible to screen readers: update the conditional error <div> (the element rendering "failed to save — tap to retry") to include accessibility attributes such as role="alert" and aria-live="assertive" (and optionally aria-atomic="true") so the failure is announced immediately; ensure the element remains readable and focusable if needed (e.g., keep the existing styling) so assistive tech receives the notification.
158-189:⚠️ Potential issue | 🟡 MinorAdd explicit
type="button"to the save button.The button lacks an explicit
typeattribute, which defaults tosubmit. This violates the Biomelint/a11y/useButtonTyperule and can cause accidental form submission if the component is ever placed inside a form.🔧 Proposed fix
<button + type="button" onClick={async () => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CompletionScreen.tsx` around lines 158 - 189, The save button currently relies on the default type (submit) which can trigger unintended form submissions; update the button element in CompletionScreen (the JSX block handling onClick that calls onSaveNote, setSaving, setSaveError, setNoteSaved) to include an explicit type="button" attribute so it won’t act as a form submitter when placed inside a form; keep the existing onClick handler and state updates (saving, saveError, note) unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 1-23: Add neutral surface-fill CSS variables to :root (e.g.,
--surface-1, --surface-2, --surface-3 with rgba(var(--bg-rgb), alpha) or
equivalent) and replace the remaining raw base-color rgba(...) usage in
components (specifically references in MindStateBar and BlockTimer) to use these
new tokens; update any places that intentionally need exceptions to still use
explicit rgba but prefer the new tokens for low-emphasis surface fills so no
components retain hardcoded base-color rgba values.
---
Outside diff comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 196-209: The Return button JSX in the CompletionScreen component
is missing an explicit type, which can cause it to act as a submit button in
forms; update the <button> element that uses onReturn (the Return button in
CompletionScreen) to include type="button" so it won't trigger form
submission—keep all existing props and styles and only add the type attribute.
---
Duplicate comments:
In `@src/components/CompletionScreen.tsx`:
- Around line 148-156: The error message rendered inside CompletionScreen.tsx
when saveError is truthy should be made accessible to screen readers: update the
conditional error <div> (the element rendering "failed to save — tap to retry")
to include accessibility attributes such as role="alert" and
aria-live="assertive" (and optionally aria-atomic="true") so the failure is
announced immediately; ensure the element remains readable and focusable if
needed (e.g., keep the existing styling) so assistive tech receives the
notification.
- Around line 158-189: The save button currently relies on the default type
(submit) which can trigger unintended form submissions; update the button
element in CompletionScreen (the JSX block handling onClick that calls
onSaveNote, setSaving, setSaveError, setNoteSaved) to include an explicit
type="button" attribute so it won’t act as a form submitter when placed inside a
form; keep the existing onClick handler and state updates (saving, saveError,
note) unchanged.
In `@src/components/HomeView.tsx`:
- Around line 104-112: The FAQ label in the HomeView component is using
fontSize: "11px" which violates the "labels ≥12px" requirement; update the
inline style for the FAQ div (the styled block rendering "FAQ" in HomeView) to
use at least "12px" (or a compliant rem/em value) for the fontSize property so
the label meets accessibility size requirements.
- Line 67: Replace the hardcoded RGBA fills used for the CTA in the HomeView
component with theme tokens: add CSS variables (e.g. --surface-cta and
--surface-cta-hover) to globals.css with the current RGBA values, then update
the HomeView styles (the inline style/background entries and the hover
background entries found in the HomeView component) to use var(--surface-cta)
and var(--surface-cta-hover) instead of the literal rgba(...) strings so the CTA
background and hover states read from the global tokens.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
Comment on lines
+1
to
+23
| :root { | ||
| /* Color tiers — warm off-white on dark */ | ||
| --fg: rgba(232, 228, 222, 0.92); | ||
| --fg-2: rgba(232, 228, 222, 0.70); | ||
| --fg-3: rgba(232, 228, 222, 0.52); | ||
| --fg-4: rgba(232, 228, 222, 0.28); | ||
|
|
||
| /* Borders */ | ||
| --border-1: rgba(232, 228, 222, 0.08); | ||
| --border-2: rgba(232, 228, 222, 0.18); | ||
|
|
||
| /* Spacing scale (8px base) */ | ||
| --s1: 8px; | ||
| --s2: 12px; | ||
| --s3: 16px; | ||
| --s4: 24px; | ||
| --s5: 32px; | ||
| --s6: 48px; | ||
|
|
||
| /* Surface / layout */ | ||
| --bg-rgb: 26, 24, 22; | ||
| --nav-h: 96px; | ||
| } |
There was a problem hiding this comment.
Add neutral surface-fill tokens to eliminate remaining base-color rgba(...) in components.
The token set is missing low-emphasis surface variables, which leaves raw base-color fills in updated components (e.g., MindStateBar Line 41, BlockTimer Lines 168 and 219). This misses the PR objective/test-plan requirement to remove remaining hardcoded base-color rgba usage outside intentional exceptions.
Proposed token + usage pattern
:root {
/* Color tiers — warm off-white on dark */
--fg: rgba(232, 228, 222, 0.92);
--fg-2: rgba(232, 228, 222, 0.70);
--fg-3: rgba(232, 228, 222, 0.52);
--fg-4: rgba(232, 228, 222, 0.28);
+ /* Neutral surfaces */
+ --surface-1: rgba(232, 228, 222, 0.04);
+ --surface-2: rgba(232, 228, 222, 0.06);
+
/* Borders */
--border-1: rgba(232, 228, 222, 0.08);
--border-2: rgba(232, 228, 222, 0.18);
}- background: "rgba(232, 228, 222, 0.06)",
+ background: "var(--surface-2)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 1 - 23, Add neutral surface-fill CSS
variables to :root (e.g., --surface-1, --surface-2, --surface-3 with
rgba(var(--bg-rgb), alpha) or equivalent) and replace the remaining raw
base-color rgba(...) usage in components (specifically references in
MindStateBar and BlockTimer) to use these new tokens; update any places that
intentionally need exceptions to still use explicit rgba but prefer the new
tokens for low-emphasis surface fills so no components retain hardcoded
base-color rgba values.
- Error message gets role="alert" + aria-live="assertive" for screen readers - Save note and Return buttons get explicit type="button" - Fix misleading "8px base" comment on spacing scale Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ThoughtCapture.tsx (1)
66-75: 🧹 Nitpick | 🔵 TrivialSave button uses hardcoded color instead of CSS variable.
Line 69 uses
color: "#fbbf24"while other elements in this PR now use CSS tokens. For consistency with the design system objective, consider using a token or creating one for accent colors.Additionally, both buttons lack explicit
type="button"attributes, which could cause unintended form submissions if this component is ever wrapped in a form.♻️ Suggested token usage and button type fix
- <button onClick={onCancel} style={{ + <button type="button" onClick={onCancel} style={{ background: "none", border: "none", color: "var(--fg-4)",- <button onClick={handleSave} style={{ + <button type="button" onClick={handleSave} style={{ background: "rgba(251,191,36,0.15)", border: "1px solid rgba(251,191,36,0.3)", - color: "#fbbf24", + color: "var(--fg)", /* or define an --accent token for amber */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ThoughtCapture.tsx` around lines 66 - 75, The save button in ThoughtCapture (the <button> that calls handleSave) uses a hardcoded color "#fbbf24" and the buttons lack explicit type attributes; update the inline style to use the design token (e.g. color: "var(--color-accent)" or the appropriate CSS token used across the PR) instead of the hex literal, and add type="button" to this save button and the other button(s) in ThoughtCapture.tsx to prevent accidental form submission; keep the rest of the inline styles and the handleSave wiring unchanged.
♻️ Duplicate comments (2)
src/components/HomeView.tsx (2)
62-94: 🧹 Nitpick | 🔵 TrivialCTA button:
type="button"and focus-visible logic correctly added, but fill colors remain hardcoded.The
type="button"attribute (line 64) and:focus-visiblecheck (lines 83-87) address previous review comments. However, the base/hover backgrounds still use rawrgba(232, 228, 222, 0.04/0.08)values instead of CSS tokens.While hover/focus exceptions are permitted, the base background (line 67) and the reset values in
onMouseLeave(line 81) should ideally use a token likevar(--surface-cta)for theme consistency. This was flagged in a previous review and remains unaddressed.♻️ Suggested approach
Define in
globals.css::root { --surface-cta: rgba(232, 228, 222, 0.04); }Then update the component:
- background: "rgba(232, 228, 222, 0.04)", + background: "var(--surface-cta)", ... - e.currentTarget.style.background = "rgba(232, 228, 222, 0.04)"; + e.currentTarget.style.background = "var(--surface-cta)";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` around lines 62 - 94, Replace the hardcoded base/background RGBA values in the CTA button with a CSS token and use that token for the reset in the onMouseLeave handler: add a new token (e.g. --surface-cta: rgba(232, 228, 222, 0.04)) to your globals.css :root, then update the inline style for the <button> background (currently "rgba(232, 228, 222, 0.04)") and the onMouseLeave assignment that sets background back to that RGBA to use "var(--surface-cta)" instead; keep the hover/focus inline exceptions as-is and leave onBegin, onMouseEnter, onFocus, onBlur handlers unchanged.
104-112:⚠️ Potential issue | 🟡 MinorFAQ label still uses 11px, which is below the 12px minimum for labels.
The PR objective states "minimum text sizes (no text <11px; labels ≥12px)". Line 106 sets the FAQ label to
11px, which violates the ≥12px requirement for labels. This was flagged in a previous review and marked as addressed, but the current code still shows11px.Suggested fix
- fontSize: "11px", color: "var(--fg-3)", + fontSize: "12px", color: "var(--fg-3)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` around lines 104 - 112, The FAQ label in the HomeView component is using fontSize "11px" which violates the minimum label size; update the style for the div that renders "FAQ" (inside HomeView) to use at least "12px" (e.g., change fontSize from "11px" to "12px" or a CSS variable >=12px) so labels meet the ≥12px requirement while preserving the other style properties.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/components/ThoughtCapture.tsx`:
- Around line 66-75: The save button in ThoughtCapture (the <button> that calls
handleSave) uses a hardcoded color "#fbbf24" and the buttons lack explicit type
attributes; update the inline style to use the design token (e.g. color:
"var(--color-accent)" or the appropriate CSS token used across the PR) instead
of the hex literal, and add type="button" to this save button and the other
button(s) in ThoughtCapture.tsx to prevent accidental form submission; keep the
rest of the inline styles and the handleSave wiring unchanged.
---
Duplicate comments:
In `@src/components/HomeView.tsx`:
- Around line 62-94: Replace the hardcoded base/background RGBA values in the
CTA button with a CSS token and use that token for the reset in the onMouseLeave
handler: add a new token (e.g. --surface-cta: rgba(232, 228, 222, 0.04)) to your
globals.css :root, then update the inline style for the <button> background
(currently "rgba(232, 228, 222, 0.04)") and the onMouseLeave assignment that
sets background back to that RGBA to use "var(--surface-cta)" instead; keep the
hover/focus inline exceptions as-is and leave onBegin, onMouseEnter, onFocus,
onBlur handlers unchanged.
- Around line 104-112: The FAQ label in the HomeView component is using fontSize
"11px" which violates the minimum label size; update the style for the div that
renders "FAQ" (inside HomeView) to use at least "12px" (e.g., change fontSize
from "11px" to "12px" or a CSS variable >=12px) so labels meet the ≥12px
requirement while preserving the other style properties.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
Adds type="button" to every button element across ThoughtCapture, AuthScreen, SettingsView, and SessionView to prevent accidental form submissions. All 15 buttons in the codebase now have explicit type attributes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.tsx (1)
312-327:⚠️ Potential issue | 🟠 MajorError is swallowed, breaking CompletionScreen's retry UI.
The
onSaveNotecallback catches errors and only logs them without re-throwing. SinceCompletionScreenrelies on the promise rejecting to triggersetSaveError(true)and show the "failed to save — tap to retry" UI, save failures will be silently ignored.🐛 Proposed fix: re-throw the error
onSaveNote={async (text: string) => { if (!completionData.sessionId) return; - try { - await fetch("/api/thoughts/batch", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - sessionId: completionData.sessionId, - dayNumber: completionData.dayNumber, - thoughts: [{ timeInSession: -1, text }], - }), - }); - } catch (error) { - console.error("Failed to save note:", error); + const res = await fetch("/api/thoughts/batch", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + sessionId: completionData.sessionId, + dayNumber: completionData.dayNumber, + thoughts: [{ timeInSession: -1, text }], + }), + }); + if (!res.ok) { + throw new Error("Failed to save note"); } }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.tsx` around lines 312 - 327, The onSaveNote callback in the page component swallows errors (it catches and only console.error), preventing CompletionScreen from seeing a rejected promise and setting save error UI; update the onSaveNote handler in src/app/page.tsx (the async onSaveNote function passed to CompletionScreen) to either remove the try/catch so the fetch rejection propagates, or re-throw the caught error after logging (i.e., console.error(...); throw error) so the promise rejects and CompletionScreen can call setSaveError(true) and show the retry UI.
♻️ Duplicate comments (6)
src/components/BlockTimer.tsx (2)
168-168: 🧹 Nitpick | 🔵 TrivialReplace hardcoded block background with surface token.
The block background uses
rgba(232, 228, 222, 0.04). Once surface tokens are defined inglobals.css, usevar(--surface-1)for consistency.Suggested refactor
- background: "rgba(232, 228, 222, 0.04)", + background: "var(--surface-1)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/BlockTimer.tsx` at line 168, Replace the hardcoded background rgba value in the BlockTimer component with the CSS surface token; locate the inline style or style object in BlockTimer.tsx where background: "rgba(232, 228, 222, 0.04)" is set and change it to use the CSS variable var(--surface-1) so the component reads the token (e.g. background: "var(--surface-1)") and relies on globals.css surface tokens for theming consistency.
219-219: 🧹 Nitpick | 🔵 TrivialReplace hardcoded progress bar background with surface token.
Same as above—use
var(--surface-2)once available.Suggested refactor
- background: "rgba(232, 228, 222, 0.06)", + background: "var(--surface-2)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/BlockTimer.tsx` at line 219, In BlockTimer (component BlockTimer or the style block that sets the progress bar background), replace the hardcoded background value "rgba(232, 228, 222, 0.06)" with the surface token var(--surface-2); update the inline style or CSS rule that currently sets background: "rgba(232, 228, 222, 0.06)" to use background: "var(--surface-2)" so the component follows design tokens.src/components/MindStateBar.tsx (1)
41-41: 🧹 Nitpick | 🔵 TrivialReplace hardcoded background with a surface token.
The background still uses a raw
rgba(232, 228, 222, 0.06)value. Once surface tokens are added toglobals.css, this should usevar(--surface-2)or similar to maintain consistency with the token migration.Suggested refactor
- display: "flex", background: "rgba(232, 228, 222, 0.06)", + display: "flex", background: "var(--surface-2)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/MindStateBar.tsx` at line 41, Replace the hardcoded rgba background in the MindStateBar component with the new surface token: change the inline style that contains display: "flex", background: "rgba(232, 228, 222, 0.06)" to use the CSS variable (e.g. var(--surface-2)) so the component (MindStateBar) uses the global surface token defined in globals.css instead of a raw color literal.src/components/HomeView.tsx (1)
67-81: 🧹 Nitpick | 🔵 TrivialTokenize CTA fill colors to complete the token migration.
The CTA background and hover states still use raw
rgba(232, 228, 222, ...)values, which contradicts the PR objective to remove hardcoded base-color rgba except for intentional exceptions. Consider adding surface tokens inglobals.cssand using them here.Suggested refactor
In
globals.css, add surface tokens:/* Borders */ --border-1: rgba(232, 228, 222, 0.08); --border-2: rgba(232, 228, 222, 0.18); + /* Surfaces */ + --surface-cta: rgba(232, 228, 222, 0.04); + --surface-cta-hover: rgba(232, 228, 222, 0.08);Then in
HomeView.tsx:- background: "rgba(232, 228, 222, 0.04)", + background: "var(--surface-cta)", ... - e.currentTarget.style.background = "rgba(232, 228, 222, 0.08)"; + e.currentTarget.style.background = "var(--surface-cta-hover)"; ... - e.currentTarget.style.background = "rgba(232, 228, 222, 0.04)"; + e.currentTarget.style.background = "var(--surface-cta)";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` around lines 67 - 81, The CTA in HomeView.tsx still uses hardcoded rgba values in the inline style and in the onMouseEnter/onMouseLeave handlers; add new CSS tokens (e.g. --surface-cta, --surface-cta-hover or similar) to globals.css and replace the hardcoded "rgba(232, 228, 222, ...)" usages in the HomeView component (initial style object and the onMouseEnter/onMouseLeave handlers) to use those tokens via getComputedStyle or directly with CSS variables (e.currentTarget.style.background = "var(--surface-cta)" / borderColor = "var(--surface-cta-border)" or better convert the inline styles to a CSS class that references the tokens), and ensure hover/background tokens cover both normal and hover alpha variants so no raw rgba remains.src/app/globals.css (2)
1-23: 🛠️ Refactor suggestion | 🟠 MajorAdd surface-fill tokens to complete the token system.
The token set is missing low-emphasis surface variables, leaving raw base-color
rgba(...)values in components (e.g., MindStateBar, BlockTimer, HomeView CTA). This conflicts with the PR objective to remove hardcoded base-color rgba.Proposed additions
/* Borders */ --border-1: rgba(232, 228, 222, 0.08); --border-2: rgba(232, 228, 222, 0.18); + /* Surfaces */ + --surface-1: rgba(232, 228, 222, 0.04); + --surface-2: rgba(232, 228, 222, 0.06); + /* Spacing scale */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 1 - 23, The project is missing low-emphasis surface design tokens in :root, causing components like MindStateBar, BlockTimer and the HomeView CTA to use raw base-color rgba values; add a set of surface-fill variables (e.g., low/medium/high surface or surface-1/2/3) to src/app/globals.css alongside --bg-rgb (so they use the same base RGB with varying alpha levels) and then update those components to reference the new tokens instead of hardcoded rgba(...) values (search for usages in MindStateBar, BlockTimer, and HomeView CTA and replace the raw rgba with the appropriate --surface-* token).
12-18: 🧹 Nitpick | 🔵 TrivialClarify the spacing scale comment to reflect the 12px step.
The comment says "Spacing scale" but
--s2: 12pxis not a multiple of 8. If this is intentional for tighter grouping, update the comment to document the design decision.Suggested clarification
- /* Spacing scale */ + /* Spacing scale (8px base; 12px for tight grouping) */ --s1: 8px; --s2: 12px;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 12 - 18, Update the CSS comment above the spacing variables to explicitly document the sizing rule: note that the scale is primarily an 8px rhythm but includes a 12px value for tighter grouping (e.g., --s1, --s3..--s6 follow 8px increments while --s2 is 12px). Reference the variable names (--s1, --s2, --s3, --s4, --s5, --s6) in the comment so the intent behind the non‑8px --s2 value is clear to future readers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/app/page.tsx`:
- Around line 312-327: The onSaveNote callback in the page component swallows
errors (it catches and only console.error), preventing CompletionScreen from
seeing a rejected promise and setting save error UI; update the onSaveNote
handler in src/app/page.tsx (the async onSaveNote function passed to
CompletionScreen) to either remove the try/catch so the fetch rejection
propagates, or re-throw the caught error after logging (i.e.,
console.error(...); throw error) so the promise rejects and CompletionScreen can
call setSaveError(true) and show the retry UI.
---
Duplicate comments:
In `@src/app/globals.css`:
- Around line 1-23: The project is missing low-emphasis surface design tokens in
:root, causing components like MindStateBar, BlockTimer and the HomeView CTA to
use raw base-color rgba values; add a set of surface-fill variables (e.g.,
low/medium/high surface or surface-1/2/3) to src/app/globals.css alongside
--bg-rgb (so they use the same base RGB with varying alpha levels) and then
update those components to reference the new tokens instead of hardcoded
rgba(...) values (search for usages in MindStateBar, BlockTimer, and HomeView
CTA and replace the raw rgba with the appropriate --surface-* token).
- Around line 12-18: Update the CSS comment above the spacing variables to
explicitly document the sizing rule: note that the scale is primarily an 8px
rhythm but includes a 12px value for tighter grouping (e.g., --s1, --s3..--s6
follow 8px increments while --s2 is 12px). Reference the variable names (--s1,
--s2, --s3, --s4, --s5, --s6) in the comment so the intent behind the non‑8px
--s2 value is clear to future readers.
In `@src/components/BlockTimer.tsx`:
- Line 168: Replace the hardcoded background rgba value in the BlockTimer
component with the CSS surface token; locate the inline style or style object in
BlockTimer.tsx where background: "rgba(232, 228, 222, 0.04)" is set and change
it to use the CSS variable var(--surface-1) so the component reads the token
(e.g. background: "var(--surface-1)") and relies on globals.css surface tokens
for theming consistency.
- Line 219: In BlockTimer (component BlockTimer or the style block that sets the
progress bar background), replace the hardcoded background value "rgba(232, 228,
222, 0.06)" with the surface token var(--surface-2); update the inline style or
CSS rule that currently sets background: "rgba(232, 228, 222, 0.06)" to use
background: "var(--surface-2)" so the component follows design tokens.
In `@src/components/HomeView.tsx`:
- Around line 67-81: The CTA in HomeView.tsx still uses hardcoded rgba values in
the inline style and in the onMouseEnter/onMouseLeave handlers; add new CSS
tokens (e.g. --surface-cta, --surface-cta-hover or similar) to globals.css and
replace the hardcoded "rgba(232, 228, 222, ...)" usages in the HomeView
component (initial style object and the onMouseEnter/onMouseLeave handlers) to
use those tokens via getComputedStyle or directly with CSS variables
(e.currentTarget.style.background = "var(--surface-cta)" / borderColor =
"var(--surface-cta-border)" or better convert the inline styles to a CSS class
that references the tokens), and ensure hover/background tokens cover both
normal and hover alpha variants so no raw rgba remains.
In `@src/components/MindStateBar.tsx`:
- Line 41: Replace the hardcoded rgba background in the MindStateBar component
with the new surface token: change the inline style that contains display:
"flex", background: "rgba(232, 228, 222, 0.06)" to use the CSS variable (e.g.
var(--surface-2)) so the component (MindStateBar) uses the global surface token
defined in globals.css instead of a raw color literal.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/HistoryView.tsx (1)
281-286:⚠️ Potential issue | 🟡 MinorReplace
--fg-5with a defined token in row metadata separators.Lines 282 and 284 use
var(--fg-5)for the separator dots, but the PR establishes a 4-tier foreground system (--fgthrough--fg-4). Use--fg-4for consistency with the design tokens.Suggested fix
- <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span> <span>{entry.clearPercent}%</span> - <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HistoryView.tsx` around lines 281 - 286, In HistoryView component replace the two separator spans that currently use style={{ color: "var(--fg-5)" }} (the span elements rendering "·" between metadata values) with style={{ color: "var(--fg-4)" }} so the row metadata separators use the established 4-tier foreground token (--fg-4) instead of the undefined/removed --fg-5.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/HistoryView.tsx`:
- Around line 281-286: In HistoryView component replace the two separator spans
that currently use style={{ color: "var(--fg-5)" }} (the span elements rendering
"·" between metadata values) with style={{ color: "var(--fg-4)" }} so the row
metadata separators use the established 4-tier foreground token (--fg-4) instead
of the undefined/removed --fg-5.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/components/HistoryView.tsx (1)
281-285:⚠️ Potential issue | 🟠 MajorUse a defined foreground token for meta separators.
Line 282 and Line 284 still reference
var(--fg-5). Replace with a defined foreground token to keep the 4-tier token system consistent.Suggested fix
- <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span> ... - <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HistoryView.tsx` around lines 281 - 285, In HistoryView's JSX where the meta separator spans currently use inline color "var(--fg-5)" (the two span elements that render the middot separators around entry.clearPercent), replace those with the project's defined foreground token for meta/separators (for example var(--fg-4) or the established token used elsewhere) so the component uses the 4-tier token system consistently; update both occurrences in the render of the entry row in the HistoryView component.src/components/HomeView.tsx (1)
49-49:⚠️ Potential issue | 🟠 MajorReplace undefined
--fg-5with a defined foreground token.Line 49 uses
var(--fg-5), but this PR’s foreground tier is--fgthrough--fg-4. Use a defined token to avoid unpredictable rendering.Suggested fix
- lineHeight: 1, color: "var(--fg-5)", + lineHeight: 1, color: "var(--fg)",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HomeView.tsx` at line 49, The inline style in the HomeView component uses an undefined CSS variable "var(--fg-5)" (seen next to lineHeight: 1), causing unpredictable rendering; replace that token with one of the defined foreground tokens (e.g., "var(--fg-4)" or "var(--fg)") in the same style object so the color uses an existing token and renders consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/BlockTimer.tsx`:
- Line 185: The color for the filled label in BlockTimer.tsx is still hardcoded
as "rgba(0,0,0,0.5)"; replace that literal with the appropriate design token (a
CSS variable) instead of a raw RGBA string in the style that uses isFilled (the
color property where isFilled ? "rgba(0,0,0,0.5)" : "var(--fg-4)"). Update the
component to use the chosen token (e.g., var(--<token-name>)) and, if that token
doesn't exist yet, add a new semantic token (with a sensible fallback) to the
theme/token definitions so the variable resolves consistently across themes.
---
Duplicate comments:
In `@src/components/HistoryView.tsx`:
- Around line 281-285: In HistoryView's JSX where the meta separator spans
currently use inline color "var(--fg-5)" (the two span elements that render the
middot separators around entry.clearPercent), replace those with the project's
defined foreground token for meta/separators (for example var(--fg-4) or the
established token used elsewhere) so the component uses the 4-tier token system
consistently; update both occurrences in the render of the entry row in the
HistoryView component.
In `@src/components/HomeView.tsx`:
- Line 49: The inline style in the HomeView component uses an undefined CSS
variable "var(--fg-5)" (seen next to lineHeight: 1), causing unpredictable
rendering; replace that token with one of the defined foreground tokens (e.g.,
"var(--fg-4)" or "var(--fg)") in the same style object so the color uses an
existing token and renders consistently.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
New tokens: --overlay-text, --overlay-bg for dark content on colored surfaces. Replaces hardcoded values in BlockTimer, ThoughtCapture, and AuthScreen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/HistoryView.tsx (1)
282-285:⚠️ Potential issue | 🟡 MinorUse a defined foreground token for the meta separators.
Line 282 and Line 284 still use
var(--fg-5), which is outside the 4-tier foreground token set used across this PR and can resolve inconsistently. Switch both separators to a defined tier (e.g.,var(--fg-4)).Suggested fix
- <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span> @@ - <span style={{ color: "var(--fg-5)" }}>·</span> + <span style={{ color: "var(--fg-4)" }}>·</span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HistoryView.tsx` around lines 282 - 285, The separator spans in HistoryView (the two <span> elements that render · around entry.clearPercent and the thought count) use the non-standard token var(--fg-5); update both to use the defined tier token (e.g., var(--fg-4)) so they follow the 4-tier foreground token set and resolve consistently across the app—locate the spans adjacent to entry.clearPercent and entry.thoughtCount and replace their style color token accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/ThoughtJournal.tsx`:
- Around line 84-90: The "DAY {day}" grouping label in the ThoughtJournal
component currently uses fontSize: "11px" — update the inline style for the div
rendering DAY {day} (inside ThoughtJournal) to fontSize: "12px" (or >= "12px")
so the section/grouping label meets the PR's minimum label size requirement;
keep the other style properties unchanged.
---
Duplicate comments:
In `@src/components/HistoryView.tsx`:
- Around line 282-285: The separator spans in HistoryView (the two <span>
elements that render · around entry.clearPercent and the thought count)
use the non-standard token var(--fg-5); update both to use the defined tier
token (e.g., var(--fg-4)) so they follow the 4-tier foreground token set and
resolve consistently across the app—locate the spans adjacent to
entry.clearPercent and entry.thoughtCount and replace their style color token
accordingly.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
…abel size Replace all --fg-5 uses with --fg-4 for consistency with the 4-tier foreground system. Bump ThoughtJournal DAY label from 11px to 12px to meet minimum readable label size. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/globals.css (1)
80-83: 🧹 Nitpick | 🔵 TrivialUse root tokens for body colors to complete theme centralization.
bodystill hardcodes base color values. Switching to token references will keep future palette updates single-sourced.♻️ Suggested refactor
body { - background: `#1a1816`; - color: `#e8e4de`; + background: rgb(var(--bg-rgb)); + color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 80 - 83, Replace the hardcoded color values in the body rule with the centralized CSS root tokens so the theme is single-sourced; update the body selector in src/app/globals.css (the body { background: ...; color: ...; -webkit-font-smoothing: ... } block) to reference the appropriate :root variables (e.g., --bg-base, --text-base or your project’s token names) instead of literal hex values so future palette changes only require editing the root tokens.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/HistoryView.tsx`:
- Around line 209-212: The trigger element that toggles expand/collapse
(role="button", tabIndex and onClick using setExpandedDay and expandedDay with
entry.day) must include aria-controls pointing to the expandable panel's id, and
the panel element rendered when expanded should have a matching unique id (e.g.,
derived from entry.day or an index) plus region semantics (role="region" and/or
aria-labelledby pointing back to the trigger) so screen readers can associate
the disclosure; also ensure the panel updates aria-hidden or is removed from DOM
when collapsed. Apply this change both to the trigger/panel pair around the
setExpandedDay/expandedDay usage and the other analogous block referenced (lines
289-313) so all disclosure controls are properly linked.
---
Outside diff comments:
In `@src/app/globals.css`:
- Around line 80-83: Replace the hardcoded color values in the body rule with
the centralized CSS root tokens so the theme is single-sourced; update the body
selector in src/app/globals.css (the body { background: ...; color: ...;
-webkit-font-smoothing: ... } block) to reference the appropriate :root
variables (e.g., --bg-base, --text-base or your project’s token names) instead
of literal hex values so future palette changes only require editing the root
tokens.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
Replace hardcoded body background/color with token references. Add aria-controls on day row triggers and id/role/aria-label on the expanded thoughts panel for screen reader accessibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/AuthScreen.tsx (1)
127-150: 🧹 Nitpick | 🔵 TrivialConsider using CSS
:focuspseudo-class instead of inline handlers.The focus/blur border color logic is duplicated across all three inputs. Moving this to CSS would eliminate repetition and simplify the component.
♻️ Optional refactor using CSS
Add a CSS class (e.g., in your globals or a module):
.auth-input { border-color: var(--border-1); transition: border-color 0.3s; } .auth-input:focus { border-color: var(--border-3); }Then apply the class to inputs, removing the
onFocus/onBlurhandlers:<input type="email" value={email} onChange={e => setEmail(e.target.value)} onKeyDown={handleKeyDown} placeholder="email" - style={inputStyle} - onFocus={e => e.currentTarget.style.borderColor = "var(--border-3)"} - onBlur={e => e.currentTarget.style.borderColor = "var(--border-1)"} + className="auth-input" + style={inputStyle} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/AuthScreen.tsx` around lines 127 - 150, The input focus/blur inline handlers in the AuthScreen component are duplicated; remove the onFocus/onBlur attributes from the three inputs (the email/input, the conditional username input using username and setUsername, and the password input using password and setPassword and handleKeyDown) and instead add a CSS rule for a class (e.g., .auth-input with :focus) in your global or module CSS to handle border-color transitions; then apply that class to each input and keep existing props like value, onChange, onKeyDown, placeholder, and style/inputStyle intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/components/AuthScreen.tsx`:
- Around line 127-150: The input focus/blur inline handlers in the AuthScreen
component are duplicated; remove the onFocus/onBlur attributes from the three
inputs (the email/input, the conditional username input using username and
setUsername, and the password input using password and setPassword and
handleKeyDown) and instead add a CSS rule for a class (e.g., .auth-input with
:focus) in your global or module CSS to handle border-color transitions; then
apply that class to each input and keep existing props like value, onChange,
onKeyDown, placeholder, and style/inputStyle intact.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
Owner
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/HistoryView.tsx (1)
211-213:⚠️ Potential issue | 🟠 MajorUse a unique expansion key;
day-only ARIA IDs can collide.Line [212] and Line [292] derive
aria-controls/idfromentry.dayonly. If multiple rows share the same day value, IDs collide and disclosure semantics become ambiguous.🔧 Suggested fix
-const [expandedDay, setExpandedDay] = useState<number | null>(null); +const [expandedRowKey, setExpandedRowKey] = useState<string | null>(null); {history.map((entry, idx) => { + const rowKey = `${entry.day ?? "x"}-${entry.date}-${idx}`; + const isExpanded = expandedRowKey === rowKey; + const rowThoughts = entry.day !== null + ? thoughts.filter(t => t.dayNumber === entry.day) + : []; return ( <div key={`${entry.day}-${idx}`}> <div role="button" tabIndex={0} - aria-expanded={expandedDay === entry.day} - aria-controls={`day-${entry.day}-thoughts`} - onClick={() => setExpandedDay(expandedDay === entry.day ? null : entry.day)} + aria-expanded={isExpanded} + aria-controls={`day-${rowKey}-thoughts`} + onClick={() => setExpandedRowKey(isExpanded ? null : rowKey)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); - setExpandedDay(expandedDay === entry.day ? null : entry.day); + setExpandedRowKey(isExpanded ? null : rowKey); } }} > @@ - {expandedDay === entry.day && dayThoughts.length > 0 && ( + {isExpanded && rowThoughts.length > 0 && ( <div - id={`day-${entry.day}-thoughts`} + id={`day-${rowKey}-thoughts`} role="region"Also applies to: 290-295
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HistoryView.tsx` around lines 211 - 213, The ARIA IDs use entry.day only which can collide when multiple entries share the same day; update the expansion key to be globally unique by incorporating a stable unique identifier (e.g., entry.id or index) into both the aria-controls and the corresponding panel id so the disclosure pairing is unambiguous. Locate the button/trigger that uses expandedDay, entry.day and setExpandedDay and change the id generation logic for aria-controls and the panel id to combine entry.day with a unique symbol (for example `${entry.day}-${entry.id}` or `${entry.day}-${index}`) and ensure the same combined string is used in the panel's id so expandedDay/state logic continues to work with the new composite key.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/HistoryView.tsx`:
- Around line 211-213: The ARIA IDs use entry.day only which can collide when
multiple entries share the same day; update the expansion key to be globally
unique by incorporating a stable unique identifier (e.g., entry.id or index)
into both the aria-controls and the corresponding panel id so the disclosure
pairing is unambiguous. Locate the button/trigger that uses expandedDay,
entry.day and setExpandedDay and change the id generation logic for
aria-controls and the panel id to combine entry.day with a unique symbol (for
example `${entry.day}-${entry.id}` or `${entry.day}-${index}`) and ensure the
same combined string is used in the panel's id so expandedDay/state logic
continues to work with the new composite key.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
src/app/globals.csssrc/app/page.tsxsrc/components/AuthScreen.tsxsrc/components/BlockTimer.tsxsrc/components/CompletionScreen.tsxsrc/components/HistoryView.tsxsrc/components/HomeView.tsxsrc/components/MindStateBar.tsxsrc/components/PublicBoard.tsxsrc/components/SessionView.tsxsrc/components/SettingsView.tsxsrc/components/ThoughtCapture.tsxsrc/components/ThoughtJournal.tsx
This was referenced Apr 24, 2026
Merged
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
1 participant
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
--fgthrough--fg-4), 8px spacing scale (--s1–--s6), and border tokens inglobals.cssprefers-reduced-motionmedia query for accessibilityrgba()values to CSS custom propertiesletter-spacingfrompxtoem-based values throughoutauto 1fr auto)Closes #14
Test plan
--fg,--fg-2,--fg-3,--fg-4,--border-1,--border-2,--s1–--s6) are defined in:rootprefers-reduced-motionmedia query disables animations#e8e4deor rawrgba(232,228,222,...)remain (except hover/focus states that intentionally differ from tokens)letter-spacingvalues useemunits, notpxdisplay: grid; grid-template-rows: auto 1fr auto--border-1, submit uses--border-2npm run buildpasses without errors🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
Bug Fixes
Accessibility