Add InteractiveRow WithButton story, SectionHeader pattern, and new primitives#6
Open
zoeforfun wants to merge 11 commits into
Open
Add InteractiveRow WithButton story, SectionHeader pattern, and new primitives#6zoeforfun wants to merge 11 commits into
zoeforfun wants to merge 11 commits into
Conversation
added 10 commits
March 31, 2026 17:56
Align the token package with the authoritative design system in apps/demo/src/index.css. Key changes: Colors: - Swap primary (near-black) and accent (teal) roles to match brand intent - Add info + info-subtle functional color (#2657bb) - Add link functional color (#1F68FE) - Correct success color to #00A365 - Consolidate danger → error (#f8672f), remove all danger references - Add border variants (subtle, strong, hover, card) - Add text levels (heading, tertiary, placeholder, disabled) - Add dark surface tokens (dark-bg, dark-surface, dark-surface-hover, dark-border) - Add accent variants (accent-subtle, accent-glow) Shadows: - Add semantic shadows: shadow-rest, shadow-card, shadow-dropdown, shadow-focus - Extend scale shadows with shadow-lg and shadow-xl Radius: - Simplify to 6 levels (sm/md/lg/xl/2xl/pill), remove unused xs and 3xl Typography & Spacing: - Add font-sans, font-mono, font-heading tokens - Define full spacing scale (0.5 through 24) Surfaces: - Add surface-0 through surface-4 (remove unused surface-5) Infrastructure: - Update generate-styles.mjs with direct-value mapping support for non-HSL tokens - Update token-data.ts with new TypeScript types and exports - Extend Storybook token studio with display sections for all new categories - Update Storybook theme and token controls to match new design system Made-with: Cursor
Auto-format tokens.stories.tsx (JSX multi-line props, trailing commas) and token-data.ts with biome. Also includes index.css refactor to import shared tokens from @nexu-design/tokens instead of duplicating. Made-with: Cursor
Migrate reusable components and tokens from apps/demo index.css into the shared packages so consumers get them out of the box: New primitives: - StatusDot – semantic status indicator (success/warning/error/info/neutral) with size and pulse variants - TextLink – styled anchor with default and muted variants, icon support - Prose – markdown/rich-text container with default and compact sizes Token additions (packages/tokens): - Semantic shadows: --shadow-refine, --shadow-elevated, --shadow-overlay - Toggle color: --color-toggle-on (#007AFF) - Six core keyframe animations (fade-in, scale-in, fade-in-up, page-enter, breathe, float) Component refinements aligned with nexu demo specs: - Card: rounded-xl, hover lift effect, new static variant, muted text sizing - Alert: flex layout for icon-text alignment, smaller description text - Accordion: added horizontal padding (px-4) - Avatar: nexu logo as default fallback - Combobox: gray hover instead of accent, selected state styling, compact search - ConversationMessage: user bubble uses light gray instead of accent, lighter shadow - Badge/Button stories: added WithIcons and Disabled showcases - Collapsible story: tighter spacing and smaller content text All changes include tests (14 new, 100 total passing) and Storybook stories. Made-with: Cursor
- ConversationMessage: update bubble styles (user=gray bg, assistant=white+border), right-align user meta, add multi-turn/long-message/system stories, use Avatar component, add a11y test coverage - Button: reduce gap to 1.5, change ghost hover from accent to gray - Table/DataTable: soften borders to border-subtle, align padding, refine header colors - DetailPanel: soften borders, use bg-surface-0, use Badge component in story - Dialog: soften border, use bg-surface-0, upgrade shadow to lg, align description tokens - DropdownMenu: soften borders, gray hover states, align all colors to token system - EntityCard: add EntityCardMediaImage and EntityCardMediaFallback sub-components, built-in white bg + border on media container, add 37 skill-icon SVGs from digital repo - All navigation text links: add ArrowUpRight icon (size-3) Made-with: Cursor
- Add MonoDigits utility for selective mono font on numeric characters - Apply MonoDigits to pricing-card, stat-card, stats-bar values - Fix Feishu logo SVG and add WeChat platform logo - Refine Switch component with macOS style (2 sizes, link blue color) - Align Textarea invalid focus state with Input component - Optimize Table styles: font sizes, transitions, density, design tokens - Refine Select focus/hover to match Input conventions - Improve Sonner toast visuals: subtle colors, icon alignment - Remove redundant badge "brand" variant (merged into "accent") - Update Sidebar story to match Nexu app layout - Add Tabs WithCount story variant - Remove unused stories: SplitView, StatCard, StatsBar, Stepper - Move ActivityBar to Reserved category - Fix mono font token usage across prose, file-editor, stepper - Various Storybook demo refinements (icons, labels, scroll-area, etc.) Made-with: Cursor
…hy tokens - Fix accessibility: add aria-controls/aria-labelledby to Accordion and Collapsible, add aria-current to Stepper, aria-hidden to Spinner/Input icons, remove improper tabIndex from Progress, add displayName to DropdownMenu wrappers - Unify visual styles: align Dialog/Sheet title/description/surface/blur, Combobox bg and focus ring to match Select, Tooltip use token colors, DetailPanel and DropdownMenu icon sizes to 16px - Add typography token system: 9-step font size scale (10px–30px), 4 font weights, 6 semantic text style compositions, override Tailwind defaults in @theme inline with paired line-heights - Migrate all components from scattered text-[Npx] to token utilities - Add z-index layer tokens (base/raised/dropdown/modal/toast/tooltip) - Remove application-specific patterns: WorkspaceShell, FileEditor, FileTree, InspectorPanel, SectionHeader, SettingsSection - Remove redundant Scenario stories from Storybook - Update Token Studio with font size, font weight, text style, and z-index visualization sections Made-with: Cursor
Resolve conflicts from PR #4 (token sync) merge into main. Keep HEAD (PR branch) additions: typography tokens, z-index layers, semantic shadows, keyframe animations, and text style compositions. Made-with: Cursor
- Remove orphan <<<<<<< HEAD markers from styles.css, token-source.json, tokens.stories.tsx - Move Digits @font-face declarations from demo to tokens/styles.css so all consumers (including Storybook) get tabular-digit rendering - Copy JetBrains Mono woff2 files to Storybook public/fonts - Update typography token descriptions with full font stack details Made-with: Cursor
- progress.tsx: suppress useFocusableInteractive (progressbar is passive) - entity-card.tsx: make alt prop required for useAltText - entity-card.test.tsx: replace non-null assertions with explicit checks - badge/text-link stories: fix import ordering - prose.stories.tsx: suppress noDangerouslySetInnerHtml (intentional) - mono-digits.tsx: suppress noArrayIndexKey (positional split fragments) Made-with: Cursor
- Add SectionHeader, FilterPills, NavItem primitives and SkillMarketplaceCard pattern to ui-web - Add dedicated Storybook stories for each new component - Add InteractiveRow WithButton story variant with real platform logos - Consolidate demo page imports to use SectionHeader from ui-web instead of local copy - Replace deprecated Badge variant "brand" with "accent" across demo pages Made-with: Cursor
Deploying nexu-design with
|
| Latest commit: |
ac5e17e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d3d2328a.nexu-design.pages.dev |
| Branch Preview URL: | https://feat-interactive-row-with-bu.nexu-design.pages.dev |
Made-with: Cursor
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
SectionHeaderpattern to@nexu-design/ui-weband migrate all demo pages to use it from the library instead of a local copyFilterPills,NavItemprimitives andSkillMarketplaceCardpattern with dedicated Storybook storiesWithButtonstory variant forInteractiveRowshowcasing reward-row pattern with real platform logos (GitHub, Xiaohongshu, Calendar)@nexu-design/ui-webimports across demo pagesbrandwithaccentTest plan
pnpm --filter @nexu-design/ui-web typecheckpassespnpm --filter @nexu-design/ui-web test— 50 files, 94 tests passpnpm --filter @nexu-design/storybook typecheckpassespnpm format:checkpassesMade with Cursor