Expand the theme editor color system

[GregorGabric]

Summary

• replace palette-name selection with exact brand colors and guided page-background treatments for light and dark appearances
• auto-generate the neutral system by default, with a manual neutral override when needed
• generate Radix-style 12-step opaque and alpha accent/gray scales, Display P3 overrides, and solid panel/control/accent surface tokens
• redesign the editor around full-width 12-step accent and neutral scales, grouped by their UI roles
• render palette ramps with crisp structural borders, keep both header grids on the swatches inner border box, and show exact-color tooltips on hover and keyboard focus
• keep Light/Dark, brand, neutral, background, radius, and export controls in one compact studio surface
• replace the unrestricted background picker with visual Neutral, Pure, Brand tint, and advanced Custom options
• remove decorative selection and status checkmarks; use a neutral 2px selected boundary and text-only contrast score
• preserve the selected-border treatment with an inset second stroke so changing background options never changes their box geometry
• derive each preset from the generated neutral/accent ramps so page, panel, and control surfaces stay coherent
• separate neutral interaction colors from the brand ramp so hover and selected states no longer turn blue
• isolate every semantic and primitive token inside the preview so Light and Dark work independently of the docs theme
• keep portaled color pickers, selects, menus, popovers, and mobile modals inside the selected preview appearance
• use solid panel surfaces, quieter brand atmosphere, and flatter elevation in dark mode
• turn the preview into a responsive SaaS workspace with desktop navigation, workspace context, project tabs, release metrics, priority work, launch health, and risk states
• add dedicated Overview, Tasks, and Activity views with a five-row release table, ownership and due dates, recent team activity, and the next launch checkpoint
• make task completion update the completion metric, open-task count, progress bar, task label, and status badge together
• add a compact task form that inserts a new priority item while keeping the showcase capped at three rows
• build that form from the DS TextField, DatePicker, and ChoiceBox, and carry the selected due date and priority into the new task row
• add project actions for completing all visible work and resetting the preview
• keep shared Menu rows and their popover surface concentric at every theme radius, while preserving consumer popover classes and placement
• let mobile users reveal the third task on demand while keeping the default showcase compact
• announce state changes through a polite live region and preserve keyboard/focus behavior through the existing React Aria components
• move the showcase interactions into one reducer and split the surface into focused components
• make the mobile DatePicker fit at 320px without clipping its controls or inheriting documentation table styles
• replace the loud contrast badge with a quiet inline status control while keeping the full WCAG/APCA report on demand
• end the Theme page after the editor instead of rendering setup copy and automatic docs footer cards
• reserve toasts for invisible clipboard results and errors; downloads, imports, and reset rely on their visible native/UI feedback
• apply the selected appearance directly to the component specimen canvas below the palette
• add live WCAG 2.x contrast gates with APCA guidance for the main semantic text pairs
• export the same primitives, semantic values, radii, and appearance values to CSS and Figma DTCG JSON
• migrate version-1 and version-2 project theme manifests into the version-3 surface model without losing their saved backgrounds
• make the shared color picker hex field editable
• remove the misleading translucent-panel option and explanatory UI copy

Screenshots

Simplified editor feedback

Compact contrast inspector	Mobile editor

Shared menu geometry

Scheduling controls

DS DatePicker and ChoiceBox	Mobile calendar at 320px

Real-world application preview

Project workspace overview	Responsive mobile workspace

Palette inspection

Theme controls

Validation

• pnpm check
• pnpm --filter preskok theme:check
• NEXT_PUBLIC_APP_URL=http://localhost:4002 pnpm --filter preskok build
• npx react-doctor@latest --verbose --scope changed — 83/100; only the two pre-existing palette lookup warnings remain
• npx react-doctor@latest design --verbose --scope changed — no findings
• Next.js runtime checks reported no compilation, configuration, or session errors
• verified the Theme page no longer renders the removed headings or automatic previous/next footer links
• verified selected background options in light and dark use a 2px neutral boundary with no check glyph; unselected hover stays transparent and strengthens only the border
• measured a 0px selection delta for the option, preview tile, and label in x, y, width, and height
• verified palette outer and cell borders, measured all 12 numbered dividers against the accent swatch boundaries at a maximum 0px delta, and checked exact-color tooltips in light and dark, keyboard focus, and the 390px no-overflow fallback
• verified Reset and file downloads produce no toast, Copy CSS confirms success, and invalid/copy failures retain error feedback
• verified the shared Menu at zero, default, and 1.5rem radii plus desktop/mobile density and nested submenu placement
• production /theme geometry at 1.5rem: 18px item radius + 5px inset = 23px menu radius
• keyboard interaction pass for switching Overview, Tasks, and Activity with arrow keys; completing/reopening tasks; adding a dated task; selecting priority; completing all tasks; and resetting the preview
• reduced-motion check confirmed contextual icons fall back to an opacity-only transition
• responsive pass at 1440 × 1000, 390 × 844, and 320px with no page or preview overflow, no clipped controls, and compact mobile metric labels
• verified the production /theme route, task metadata, and nested overlays in both light and dark preview modes

Stack

This PR is intentionally based on #38, which introduces the underlying code-to-Figma theme bridge.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview	Aug 19, 2026 4:41pm