feat(web): load Inter for real, calmer sidebar, filled fields, text ladder by Makisuo · Pull Request #354 · MapleTechLabs/hazel

Makisuo · 2026-10-30T23:48:52Z

A first design pass that takes rules from Shinsa's design system and applies them to the kit's primitives.

The font was never Inter

--font-sans started with var(--font-inter), a Next.js leftover that nothing defines, so the app rendered in the system font (SF Pro on Mac, Segoe on Windows) and the Inter it imported was unused. It names "Inter" now, and entry.ts loads 500 and 600 beside 400. This changes text app-wide.

Changes

Tokens (styles.css): a text ladder fg-1…4, mixed from --fg so every gray palette gets its own (fg-4 titles, fg-3 body and rows at rest, fg-2 meta, fg-1 decoration only); alpha washes wash / wash-strong; a field fill field / field-hover; shadow-control (a highlight edge instead of a border); a faux-medium utility (an active label's weight without changing its width). Borders one step lighter (zinc-300 → zinc-200, also in the light gray-palette mapping).
Sidebar: before, the current channel and a hovered one were the same grey block, all in medium. Rows at rest are quieter and normal weight; hover is a wash; the current row is a stronger wash plus faux-medium; unread rows step up to full ink and medium. Every hover: got its active: twin; the unread badge lost transition-all.
Fields (input, textarea, select, date field): filled, not bordered. Focus rings are unchanged.
Buttons: secondary is a fill only; primary and danger get the highlight edge instead of a border.
Menus: the focused item uses the wash; icons draw a step under their text.
Card: no drop shadow; title 16px medium (was 24px semibold). cardTitle is used on 6 screens, which get smaller headings.

Before and after

Rendered by the new bun run gallery (apps/web-foldkit): the kit's real views (sidebar rows, buttons, fields, card, badges, menu) with the app stylesheet in Chromium, light and dark. These are components, not full screens.

Checks

bun run typecheck (web-foldkit) passes.
bun run test (web-foldkit): 158 files, 1510 tests pass.
Not yet looked at in the running app; worth a pass over the channel view and settings pages in both themes.

🤖 Generated with Claude Code

^{Need help on this PR? Tag @codesmith-bot with what you need.}

…adder The font stack named var(--font-inter), which nothing defines since the React app went, so the app rendered in the system font. It names Inter now, and 500 and 600 load beside 400. A first pass of rules taken from Shinsa's design system: - Tokens: fg-1..4 text ladder mixed from --fg (every gray palette gets its own), alpha washes, a field fill, a control highlight, faux-medium. - Sidebar: rows at rest are quieter and normal weight; hover is a wash; the current row a stronger wash plus faux-medium, so hover and current no longer look the same; unread rows step up to full ink. - Fields are filled, not bordered (input, textarea, select, date field). - Buttons: secondary is a fill only; primary and danger get a highlight edge instead of a border. Menus highlight with the wash. - Card: no drop shadow, a 16px medium title. Borders one step lighter. `bun run gallery` renders the kit's real views in Chromium and screenshots them in light and dark, for before and after comparisons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

maple-review-bot · 2026-10-30T23:49:03Z

Maple review

🟢 Confidence 10/10 · safe to merge. Styles only, and the new tokens resolve in both themes; the one convention slip is the gallery fixture's double cast.
_{1 note · tests not needed · risk medium}

Reworks the kit's style modules: Inter actually loads, a fg-1..4 ladder and wash/wash-strong tokens replace ad-hoc grays, controls become filled rather than bordered, and a gallery captures the result. Behaviour stays inside styles and class strings.

--font-sans names "Inter" and entry.ts loads 400/500/600, so text renders Inter app-wide
New fg-1..4, wash, wash-strong, field and shadow-control tokens; fields stop drawing a border
Sidebar rows go normal-weight fg-3, wash hover, wash-strong + faux-medium when current
cardTitle drops to 16px medium, menus focus with the wash, the card loses its shadow

Before merge

Env var · Set VITE_GALLERY_LABEL in every environment, or confirm its default · apps/web-foldkit/src/design.gallery.ts:215

Findings

🔵 Note · F1 · Gallery fixture double-casts to ChannelEntry instead of using branded IDs

convention · apps/web-foldkit/src/design.gallery.ts:63

CLAUDE.md says to always use the @hazel/schema branded IDs and never as any. entry passes a plain string as the member id and hides the mismatch with as unknown as ChannelEntry; when ChannelEntry gains or renames a field the gallery renders wrong values instead of failing bun run typecheck.

Import `ChannelMemberId`, cast `member.id` to it, annotate the arrow's return type as `ChannelEntry`, and drop `as unknown as ChannelEntry`.

🤖 Prompt to fix this finding with an AI agent

Findings from an automated review of commit ae2adb073f2c63f5adafbf5349ad65558905f0ac. Verify each one against the current code before changing anything, fix only those that still apply, and keep each fix to the lines it names.

---

F1 · Note · convention · apps/web-foldkit/src/design.gallery.ts:63
Gallery fixture double-casts to `ChannelEntry` instead of using branded IDs
CLAUDE.md says to always use the `@hazel/schema` branded IDs and never `as any`. `entry` passes a plain string as the member id and hides the mismatch with `as unknown as ChannelEntry`; when `ChannelEntry` gains or renames a field the gallery renders wrong values instead of failing `bun run typecheck`.
Suggested fix: Import `ChannelMemberId`, cast `member.id` to it, annotate the arrow's return type as `ChannelEntry`, and drop `as unknown as ChannelEntry`.

_{ae2adb0 · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

coderabbitai · 2026-10-30T23:49:10Z

Caution

Review failed

The pull request is closed.

Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

maple-review-bot · 2026-10-30T23:51:24Z

Merged with 1 step from "Before merge" still open. If it is done, tick it on the review comment; if not, now is the time.

Env var · Set VITE_GALLERY_LABEL in every environment, or confirm its default

github-actions · 2026-10-31T00:02:45Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	69.24%	20288 / 29298
🔵	Statements	68.73%	23018 / 33488
🔵	Functions	59.11%	8094 / 13693
🔵	Branches	56.44%	9449 / 16739

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
apps/web-foldkit/src/core/components/ui/button.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/card.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/date-field.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/dropdown.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/input.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/menu.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/select.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/components/ui/textarea.styles.ts	100%	100%	100%	100%
apps/web-foldkit/src/core/lib/theme/apply.ts	5.88%	0%	0%	6.97%	61-179
apps/web-foldkit/src/shell/channels-sidebar/items.ts	36.73%	0%	5%	44.73%	28-29, 55-63, 66, 69-70, 73-107, 118-131, 139-150, 154-155, 159-162, 166-175, 178-196, 204-228, 232-252, 255-273, 291-304
apps/web-foldkit/src/shell/channels-sidebar/tree.ts	81.81%	31.25%	60%	93.75%	19-21, 25-38, 163-198, 206-225
apps/web-foldkit/src/ui/sidebar.ts	100%	84.61%	100%	100%

Generated in workflow #1876 for commit ae2adb0 by the Vitest Coverage Report Action

Makisuo merged commit ae2adb0 into main Oct 30, 2026
5 of 6 checks passed

Makisuo deleted the design/shinsa-pass branch October 30, 2026 23:51

Navigation Menu

Repository navigation

feat(web): load Inter for real, calmer sidebar, filled fields, text ladder - #354

feat(web): load Inter for real, calmer sidebar, filled fields, text ladder#354
Makisuo merged 1 commit into
mainfrom
design/shinsa-pass

Makisuo commented Oct 30, 2026 •

edited by blacksmith-sh Bot

Loading

Uh oh!

maple-review-bot Bot commented Oct 30, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 30, 2026 •

edited

Loading

Review failed

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 30, 2026

Uh oh!

github-actions Bot commented Oct 31, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Makisuo commented Oct 30, 2026 • edited by blacksmith-sh Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

The font was never Inter

Changes

Before and after

Checks

Uh oh!

maple-review-bot Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Before merge

Findings

Uh oh!

coderabbitai Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 30, 2026

Uh oh!

github-actions Bot commented Oct 31, 2026

Coverage Report

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Makisuo commented Oct 30, 2026 •

edited by blacksmith-sh Bot

Loading

maple-review-bot Bot commented Oct 30, 2026 •

edited

Loading

coderabbitai Bot commented Oct 30, 2026 •

edited

Loading