Development environment setup - #4
Merged
Merged
Conversation
Co-authored-by: Floris <floris@xylex.group>
Co-authored-by: Floris <floris@xylex.group>
- Initialize shadcn/ui (base-nova style) with Tailwind v4 support - Install Card, Badge, Button, Separator, ScrollArea, Select, Tabs, Tooltip - Restyle homepage with shadcn Card components and Lucide icons - Restyle demo index, contacts, and drilldown pages with shadcn primitives - Redesign resource-forms-runtime with shadcn Cards, Badges, Separators - Custom dark theme with blue accent (oklch 250 hue) for primary/ring - Add Geist font via next/font/google - Update cn() to use twMerge for proper Tailwind class merging Co-authored-by: Floris <floris@xylex.group>
- Ran: bunx --bun shadcn@latest init --preset a5OQAS --base base --template next --monorepo - Purple primary color (oklch hue ~293) from the preset - Updated CSS variables in demo app's tailwind.css - Removed stale root components.json Co-authored-by: Floris <floris@xylex.group>
- Add Tailwind v4 breakpoints (sm/md/lg/xl/2xl) to @theme inline - Add @source directives for proper class scanning in Tailwind v4 - Remove tailwind.config.ts (v3 compat mode was breaking responsive utilities) - Fix Card component: add explicit border, shadow, and increased padding - Homepage: 3-column grid with proper gap, card hover states - Forms runtime: 3-column layout (sidebar + form + analysis panels) - All pages: increased padding (px-6/px-8, py-12), better spacing - Form selector buttons: visible borders on selected/hover states - Code blocks: styled with bg-muted and rounded corners Co-authored-by: Floris <floris@xylex.group>
- Replace all oklch dark theme values with hex colors for guaranteed rendering - Background #09090b, Card #18181b, Border #3f3f46, Muted #27272a - Primary violet #a78bfa with matching ring color - Rewrite Card component with inline style border for guaranteed visibility - Simplify Card to remove size prop, increase default padding (p-6) - Increase radius to 0.625rem for rounder corners Co-authored-by: Floris <floris@xylex.group>
…mponents - Add next-themes with ThemeProvider and ThemeToggle (sun/moon icon, top-right) - Replace Input with shadcn base-ui Input (accepts label/size props for compat) - Replace Label with shadcn Label - Replace Textarea with shadcn Textarea - Update NumberField to use CSS variables (border-input, bg-transparent) - Update AddressCountrySelect to use CSS variables and shadcn Label - Update NativeSelect to use CSS variables - Remove hardcoded dark class from html; next-themes manages it - All form inputs now respond to dark/light mode Co-authored-by: Floris <floris@xylex.group>
- Remove all hardcoded slate-* and hex colors from components - CalendarInputForm labels: text-slate-200 → text-foreground - UserId avatar: bg-slate-700 → bg-muted, text-slate-100 → text-muted-foreground - CardSelect buttons: added h-auto p-4 gap-1 for breathing room - Card component: gap-6, shadow-sm, all border-border tokens - Homepage: px-8 py-24, space-y-14, gap-6 between cards - Demo page: space-y-12 py-14, gap-6 - Contacts/drilldown pages: space-y-10 py-14 lg:px-10 - Forms runtime: space-y-10 px-6 py-14 lg:px-10, gap-8 grid, space-y-3 form items - All pages use only CSS variable tokens (bg-card, border-border, text-foreground, etc.) - Zero hardcoded colors in any page or form component Co-authored-by: Floris <floris@xylex.group>
Co-authored-by: Floris <floris@xylex.group>
|
Cursor Agent can help with this pull request. Just |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implement a comprehensive shadcn/ui styling overhaul for the demo app, including dark/light mode and improved layout.
The previous styling iterations faced issues with Tailwind v4 breakpoint generation, hardcoded colors, and insufficient spacing, leading to a visually unappealing and inconsistent UI. This PR addresses these by correctly configuring Tailwind, using semantic CSS tokens exclusively, and refining component and page layouts for better aesthetics and user experience.