chore: Industrial Calm palette + 6 new component sections in wireframe kit#29
Merged
phuongnse merged 8 commits intoMay 16, 2026
Merged
Conversation
…wireframe kit - Update login.excalidraw to Industrial Calm colors (sage green, amber clay, warm off-white bg — replaces old blue #1971c2 scheme) - Regenerate login.svg - Add arrow() primitive builder to generate-template.mjs - Add 6 new sections to _template component kit: S13 Dropdown & Context Menu, S14 Drag & Drop / Sortable + Kanban, S15 Workflow Canvas (nodes, arrows, selected state), S16 Builder Layout (toolbar + component panel + canvas + properties), S17 Execution Timeline, S18 Utilities (tooltip, accordion, stepper, tag input) - Regenerate _template.excalidraw (578 elements) and _template.svg Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
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:
📝 WalkthroughWalkthroughThe PR restyles the login wireframe to a new sage/amber/moss palette and updates the template generator: adds an arrow primitive, replaces the global color palette, retints components and the App Shell, adds many new themed section builders, and expands the generated template composition. ChangesWireframe Design System Theme Refresh
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
S19 Date & Time Picker — calendar with today/selected states, time spinner, date range with highlight band S20 Editable Table / Data Grid — bulk action bar, inline cell editing with cursor, row checkboxes S21 Command Palette — ⌘K overlay with scrim, fuzzy search, grouped results, keyboard hints S22 File Upload — default + drag-over zone states, file list with progress bar and error state S23 Notifications & Activity Feed — bell dropdown with unread dots, activity timeline with avatars S24 Permission Matrix — role × permission checkbox grid grouped by feature area Template now has 24 sections / 1038 elements. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@docs/wireframes/generate-template.mjs`:
- Around line 53-83: The Excalidraw canvas background is still hardcoded to
"`#ffffff`"; update the assignment to appState.viewBackgroundColor (in
generate-template.mjs) to use the theme palette constant (e.g., C.gray100)
instead of the literal "`#ffffff`" so the generated template matches the warm
neutral palette; locate the code that sets appState.viewBackgroundColor and
replace the literal with the C.gray100 (or another appropriate C.* value) and
ensure any exported template or serialization uses that updated appState value.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5fb04ac2-7b4e-4a39-91c6-3c67caca83ac
⛔ Files ignored due to path filters (1)
docs/wireframes/_template.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
docs/wireframes/_template.excalidrawdocs/wireframes/generate-template.mjs
Comment on lines
53
to
83
| const C = { | ||
| primary: '#1971c2', | ||
| primaryDark: '#1864ab', | ||
| danger: '#e03131', | ||
| dangerDark: '#c92a2a', | ||
| success: '#2f9e44', | ||
| warning: '#e67700', | ||
| gray900: '#212529', | ||
| gray700: '#495057', | ||
| gray500: '#adb5bd', | ||
| gray300: '#dee2e6', | ||
| gray100: '#f8f9fa', | ||
| gray50: '#f1f3f5', | ||
| white: '#ffffff', | ||
| // semantic backgrounds | ||
| infoBg: '#e7f5ff', | ||
| successBg: '#ebfbee', | ||
| warningBg: '#fff9db', | ||
| dangerBg: '#fff5f5', | ||
| // borders | ||
| infoBorder: '#74c0fc', | ||
| successBorder: '#8ce99a', | ||
| warningBorder: '#ffd43b', | ||
| dangerBorder: '#ffa8a8', | ||
| // — Industrial Calm — | ||
| // Primary: sage green (nav, icons, subtle highlights) | ||
| // Accent: amber clay (CTA buttons, key actions) | ||
| primary: '#667A6E', // sage green | ||
| primaryDark: '#4F5F57', // sage dark | ||
| accent: '#C58B55', // amber clay | ||
| accentDark: '#A8743E', // amber clay dark | ||
| danger: '#9E4A44', // muted brick | ||
| dangerDark: '#7D3A35', | ||
| success: '#4D6B44', // moss green | ||
| warning: '#B5763D', // amber clay (earthy) | ||
| // Neutrals — warm, not blue-cast | ||
| gray900: '#2B2F33', // near-black warm charcoal | ||
| gray700: '#4A5058', | ||
| gray500: '#8A9099', | ||
| gray300: '#D9D7D1', // warm border | ||
| gray100: '#F4F3EF', // warm off-white (page bg) | ||
| gray50: '#F9F8F5', | ||
| white: '#FFFFFF', // surface (cards, panels) | ||
| // Semantic backgrounds — earthy tones, low saturation | ||
| infoBg: '#EDF0EE', // sage tint | ||
| successBg: '#EBF0E9', // moss tint | ||
| warningBg: '#F6EEE4', // clay tint | ||
| dangerBg: '#F3ECEA', // brick tint | ||
| // Borders | ||
| infoBorder: '#A8BAB1', // sage muted | ||
| successBorder:'#7FA676', // moss muted | ||
| warningBorder:'#C9975E', // clay muted | ||
| dangerBorder: '#C08078', // brick muted | ||
| }; |
There was a problem hiding this comment.
Theme rollout is incomplete without updating the Excalidraw canvas background.
The palette was migrated to warm neutrals, but appState.viewBackgroundColor is still #ffffff (Line 1290). This can make the generated template canvas look off-theme.
Suggested fix
-const output = JSON.stringify({ type: 'excalidraw', version: 2, source: 'https://excalidraw.com', elements, appState: { gridSize: 8, viewBackgroundColor: '`#ffffff`' }, files: {} }, null, 2);
+const output = JSON.stringify({ type: 'excalidraw', version: 2, source: 'https://excalidraw.com', elements, appState: { gridSize: 8, viewBackgroundColor: C.gray100 }, files: {} }, null, 2);🤖 Prompt for 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.
In `@docs/wireframes/generate-template.mjs` around lines 53 - 83, The Excalidraw
canvas background is still hardcoded to "`#ffffff`"; update the assignment to
appState.viewBackgroundColor (in generate-template.mjs) to use the theme palette
constant (e.g., C.gray100) instead of the literal "`#ffffff`" so the generated
template matches the warm neutral palette; locate the code that sets
appState.viewBackgroundColor and replace the literal with the C.gray100 (or
another appropriate C.* value) and ensure any exported template or serialization
uses that updated appState value.
7 sections had sub-labels at y0+46 with content rects starting at y0+48, causing the label text to be partially or fully hidden behind solid backgrounds. Changed yC from y0+48 to y0+68 for S13, S14, S18, S19, S21, S22, S23 to match the convention used by other sections with sub-labels (S05, S06, S09, S10). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ructure template TOC - Add buildRichTextEditor (S07): toolbar with B/I/U/H1/H2/list/link/variable, email template content, word count footer - Add buildCodeEditor (S08): dark JSON editor panel + HTTP request configurator with method/URL/tabs - Add buildColorIconPicker (S24): 6×4 swatch grid + hex input + icon search/categories/grid - Renumber all 27 sectionHeader() calls to match new logical grouping - Reorder compose array into 6 labelled groups with inline S-number comments - Add 27-section TOC to top-level JSDoc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sections added: - S13 Empty States: 4-state pattern (list, no results, feed, error) with icon + message + CTA - S14 Skeleton Loaders: table rows, card, and form panel shimmer patterns - S17 Tabs: underline default, pill/segment, and badge-count variants - S23 Tooltip & Popover: dark/light tooltip, config popover, destructive confirm popover - S32 Field Type Picker: 15 field types in a 5-col grid (Axis DataModeling pattern) - S33 Relation / Lookup Field: view chips, lookup popup, multi-relation table cell Also: - Renumber all sections to S01-S33 reflecting new group placement - Switch _template.excalidraw to compact JSON to stay under Kroki.io 1 MB limit - Add CLAUDE.md rules for template builder pattern, ID prefix uniqueness, yC offset convention, section numbering, and TOC maintenance Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…on label collision - S14 Skeleton Loaders: shrink colDefs [32,170,94,72,48] → [24,100,62,46,20] so bars stay within the 300px table boundary - S27 Utilities: push stepper start from yC+186 → yC+220 so it clears the accordion bottom (yC+200) and stops overlapping - S34 Relation: remove 'Account' label at yC-18 which collided with the 'Field (view mode)' sub-label 4px above it feat: add S21 Side Sheet / Drawer section Full-height slide-in panel: dimmed app context, header + 4-field scrollable body + sticky footer (Save / Cancel / Delete) + resize handle on left edge. Renumber S21-S33 → S22-S34 to accommodate new section. Update TOC and CLAUDE.md current-structure note (33 → 34 sections). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Form control default: white bg + gray300 border (was gray100 bg = looked disabled) - Form control disabled: gray100 bg + gray300 border (clearly recessed/inactive) - All col-2 form inputs: white bg + gray300 border (consistent with states col) - Primary badge: solid sage fill + white text (was infoBg tint = low visual weight) - Skeleton loader bars: gray300 fill throughout (was gray100 on white = invisible) - Card image placeholder, secondary text bars, button skeleton fill - Form panel input bars (previously used isLabel split that left inputs invisible) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
S10 Table and S11 Editable Table used Success (moss green tint) for Active status badges, which contradicts S09 where the Primary badge is explicitly labeled "Active" (solid sage fill, white text). Active = record is enabled/live → Primary badge style Complete/Success = operation result → Success badge style Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This was referenced May 16, 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
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
login.excalidraw— recolored to Industrial Calm palette: sage green logo/links, amber clay CTA button, warm off-white page bg, earthy borders. Replaces generic blue (#1971c2).generate-template.mjs— addedarrow()primitive + 6 new sections covering all major UI patterns for a workflow SaaS:Test plan
docs/wireframes/_template.svgin browser — verify 18 sections render correctly with Industrial Calm colorsdocs/wireframes/E02-identity-access/login.svg— verify sage/amber clay palette (no blue).\docs\scripts\generate-wireframes.ps1— all files should regenerate with exit 0🤖 Generated with Claude Code
Summary by CodeRabbit
Style
New Features
Documentation