docs(theme): exploring a full theme customizer#6675
Open
mikenewbon wants to merge 149 commits into
Open
Conversation
Plan for the Nuxt UI theme customizer: standalone /theme page in the main header nav, ThemeDoc + provenance resolver engine, OKLCH palette curve editor, inheritance drill-down, presets + shuffle, minimal CSS/app.config exports, bento + template previews, and a phased roadmap with upstream core-gap PRs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Standalone /theme page in the main header nav: Essentials controls (primary, neutral, radius, font, icons, color mode) sharing state with the existing popover via useTheme, a live component bento preview, seeded-taste shuffle, minimal-diff export panel (main.css + app.config), and an Open Theme Studio link in the popover. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Pure theme-engine module (ThemeDoc schema, provenance resolver, minimal CSS/app.config export generators) with unit tests; useTheme now snapshots its state as a ThemeDoc and delegates exports to the engine. New useThemeStudio composable applies docs through the sanitized applyThemeSettings path, powering a Presets menu (Nuxt UI, Shadcn, Anthropic, Spotify) and a doc-based shuffle in the studio toolbar. Also fixes the theme-color computed crashing on custom neutral palettes (undefined tailwind lookup aborted the whole unhead flush, so injected palette styles never rendered). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Dependency-free sRGB<->OKLCH math (gamut clamping, WCAG contrast) and a parametric ramp generator: anchor hex pinned exactly at shade 500 with adjustable light/dark endpoints, vibrance, chroma spread and hue drift. Inline editors under the Primary/Neutral pickers live-apply the generated ramp through the doc path with a WCAG badge and swatch preview; curve params persist across reloads and exports stay minimal (unreferenced palettes are now filtered out of the doc). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Opening the editor no longer hijacks the theme (preview only until a user edit or explicit 'Use this palette'). With a custom palette active, the standard swatches re-anchor the custom ramp to the chosen palette instead of being dead ends, and an always-visible ✕ on the trigger row drops the custom palette entirely. Adds parseCssColor (hex/oklch/rgb) so anchors can seed from tailwind JS values or the docs' CSS-only palettes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The base lightness curve was taken from tailwind's gray scale, so color ramps came out far too dark at the 800-950 end (dL up to -0.17) and the too-light wings gamut-clamped their chroma away. Rebased the curve on tailwind's color ramps, widened the chroma bell, gave neutrals their own deeper dark end, and widened the extreme-anchor guard so near-black anchors still produce distinct shades. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces the hex-anchor abstraction: a palette is now three transition curves (lightness, chroma, hue) edited in a devtools-easing-style square with draggable endpoint Ys and free handles, one tab per channel. Any existing palette (tailwind or the docs' CSS-only neutrals) is reverse-fitted into curves via coordinate-descent so editing always starts from the real thing — swatch clicks while a custom palette is active refit to the chosen palette, resetting the scales. Custom neutrals also re-route the hardcoded white tokens (light --ui-bg / --ui-text-inverted, dark --ui-text-highlighted) through the ramp so a tinted neutral finally reaches the app background in light mode; the remaps are cleaned up on removal. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Curve edits now apply on a 60ms throttle (leading + trailing) instead of a trailing debounce, so the whole page restyles during the drag. A temporary html class enables short background/color/border transitions (excluding the curve editor itself) so throttle ticks glide instead of stepping, and the analytics event is rate-limited to one per burst. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ition Light-mode --ui-bg now follows the neutral ramp app-wide (main.css + docs render baseline) instead of hardcoded white, so tinted neutrals show without editing anything. The engine gains LIBRARY_TOKEN_DEFAULTS — the stock @nuxt/ui token values — and export diffing compares against those rather than the docs baseline, so themes that rely on the ramp-following background still export it for stock installs. Drag transition matched to the 60ms apply throttle (was 150ms lagging behind the pointer). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…line The :root baseline rule shared specificity with the library's .dark override and won on cascade order, painting dark mode with the light 50. Scope it with :root:not(.dark). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds a style axis to the studio modeled on Shadcn Studio's configurator: Shadows (none/soft/hard offset) and Borders (thin/bold), expanded into static per-component class bundles over the app.config ui path — the stopgap for the missing --ui-shadow/--ui-border-width core tokens. Hard shadows use --ui-border-inverted so they stay black-on-light and white-on-dark, with the classic press-down hover on buttons. Ships a Neo-brutalist preset (hard shadows, bold borders, radius 0, yellow primary, black borders via token remaps) and teaches shuffle to occasionally roll style treatments. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
outline/subtle variants take their rings from theme compoundVariants, which render after slot-base classes — so the bold bundle's width AND inverted color were both dropped there (visible as 1px primary/error/ success rings in dark mode). The bundle now also ships extension compoundVariants for those variants on button/badge/alert, which append after the theme's and win the merge; inputs keep the slot-level override that already worked. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Bold now only thickens borders that already exist, keeping each element's own ring color — ghost/solid/soft variants no longer gain frames they never had. Hard shadows switch from --ui-border-inverted (white in dark mode, reading as a glow) to a new --ui-shadow-color variable: near-black over light surfaces, pure black in dark, defined in the docs CSS and emitted by generateCSS whenever the hard treatment is active so exports stand alone. Ghost/link buttons cast no shadow. The uniform outlined-everything look moves into the Neo-brutalist preset itself (per-mode border token remaps plus explicit component frames on solid/outline/subtle/soft, ghost stays flat). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… palette Border and shadow colors become first-class settings: Borders gain a Frame option (outlines solid/soft surfaces too; ghost/link stay flat) plus a color select (inverted/black/white/primary/neutral), Shadows gain graded colors (black/dark/medium gray/inverted/primary — pure black disappears against dark surfaces, which also made the previous defaults invisible in dark mode). Colors ride two CSS variables so every combination is a variable swap over static class bundles; all ring overrides move to extension compoundVariants after discovering card and input rings live at variant level and silently beat slot overrides. Studio CSS baselines are now :where()-wrapped — unlayered rules beat the library's @layer theme but zero specificity lets user theme overrides win regardless of load order (previously --ui-shadow-color choices and preset --ui-bg overrides lost the cascade to main.css). The Neo-brutalist preset adopts the reference palette (#FF3333/#FF6666 custom red ramp, yellow secondary, pure white/black surfaces) and is now pure configuration. The preview becomes a masonry column layout with five new tiles: Table, Stats, Chat, Team, Notifications. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Presets grow to nine with Art Deco (gilded amber lines via primary border color), Marshmallow (pastel pink on mauve), Ghibli (custom moss ramp on sun-warmed amber paper) and Marvel (comic red/blue with black frames and hard shadows) — translated from shadcn studio's registry values into ThemeDoc form, each composing the new style axes rather than bespoke component hacks. The sidebar gets compact: primary/neutral collapse into popover swatch rows with live color dots, radius becomes a slider, everything fits without scrolling. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces the fixed dark/medium gray options (clustered at the dark end) with a 'Neutral shade' mode: two sliders choose any of the 11 neutral ramp shades independently for light and dark mode, with live swatches. Two single sliders rather than one dual-thumb range because the two values are independent and may cross — a range slider enforces ordering. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…e style offsets Border color gains the same per-mode neutral-shade slider pair as shadows, and a new Background section drives --ui-bg per mode the same way (a token shorthand on the style axis until a full tokens editor exists). The palette editor's trigger moves into the section header as a Custom button, and 'Use this palette' is replaced by a style-offset dropdown (Fitted/Pastel/Muted/Vivid/Dazzling) applying taste transforms from the fitted base so repeated picks never compound. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Page layout: the toolbar spans full width with the sidebar toggle next to the title (badge now 'Concept'), and the settings panel sits under the toolbar row. Every sidebar section collapses via its header. Fixes the preset regression: setStyle only removes the tokens the previous style emitted instead of blanket-clearing shared variable names, so a preset's --ui-bg survives style clicks; and applyDoc now derives bgShade from preset tokens where they are neutral-ramp refs, so the background sliders reflect the preset instead of stale defaults. Also restores the neutral palette editor's lost open binding. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The Background pattern generalizes into a whitelist-driven tokenShades map: Inverted, Highlighted, Muted and Dimmed each get their own collapsible section with per-mode neutral-shade sliders (Background open by default, the rest collapsed). Presets hydrate all of them via the same token parser, and the legacy bgShade field folds in for persisted sessions. Pastel offset redefined per feedback: compress the lightness range from both ends (light end down, dark end up) while RAISING chroma — candy pastels instead of washed-out tints. Vivid/dazzling rebalanced, and the lightness remap preserves the fitted curve's shape. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Correctness:
- Style class bundles move to their own channel (nuxt-ui-style-ui) and
compose with preset/AI overrides via class-concatenating mergeUi —
restyling can no longer destroy a preset's or the AI's component
overrides, and doc components + style expansion now merge identically
in live apply and exports (spread was dropping one side).
- resetTheme() clears ALL studio state (style prefs, style bundle,
palette params/prev, active preset) so the popover and chat reset
buttons no longer leave orphaned styles that resurrect on the next
click or leak invisible bundles into exports.
- tokenShades are per-mode optional: hydrating a dark-only preset token
no longer invents a light override that leaks into exports untouched.
- currentDoc references palettes by the alias's current value, so a
custom ramp shadowing a default name ('green') still exports.
- applyThemeSettings guards the neutral alias against the SANITIZED
palette set (a rejected palette could previously still be selected,
bricking every neutral token), and takes a track option so slider
drags stop emitting ~16 analytics events per second.
- Removing a custom palette restores the palette that preceded it
instead of the hardcoded default; neutral remaps skip tokens the
shade sliders own (no more two-writer flip-flops on --ui-bg).
- Palette editor: style offset resets to Fitted on reseed, watchIgnorable
scopes seed suppression to its own writes, self-applies no longer
round-trip through the echo watcher; theme-color meta follows the
neutral-50 baseline in light mode.
Perf: shade-only style edits skip the 7-component teardown/re-merge.
Cleanup: shared ThemeStudioShadeSlider component, SHADES/defaults single
sources, shared parseUiColorRef, token-keyed sections, dead exports and
never-shipped legacy paths (bgShade, anchor/vibrance) deleted, FOUC
plugin restores the style bundle with the same merge as the live path.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New settings: - Defaults section: app-wide default variant and size, expanded into per-component defaultVariants (the runtime channel Nuxt UI already honors) only where the component supports the value — form fields have no solid variant and keep their own default. - Shadow geometry sliders (offset X/Y, blur, spread) driving CSS variables referenced by one static class shape, plus an opacity slider folded into the shadow color via color-mix with per-treatment fallbacks (solid for custom, 25% for soft). 'Hard' renamed 'Custom'. - Soft shadows now respect the color/shade options — tailwind's stock shadow color is hardcoded black, and the bare shadow-(--var) form parses as a shadow SIZE var; shadow-(color:--var) disambiguates. - Sidebar groups (Colors/Style/Tokens/General) become a UAccordion with leading chevrons, built-in separators and unpadded panels; the shade option in both color selects is now labeled 'Custom…'. Fixes: - Studio prefs and palette params are restored on load again — the useState conversion (for popover-reset clearing) lost the client restore that useLocalStorage had provided; the FOUC plugin now rehydrates both keys. The persisted style class bundle also self-heals when the generator changes, so stale expanded classes can't outlive their source. - Layout: toolbar returns beside the sidebar atop the preview column (with the sidebar toggle and Concept badge kept). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…tion headers Color mode moves out of the accordion to UTabs pinned at the top of the sidebar. Group panels are a single-open UAccordion (one section of the studio in focus at a time), and the sub-section collapsibles become ghost buttons with leading rotating chevrons. Shade options in the color selects read 'Custom…'. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
track() accepts primitive property values only; the style object now carries nested geometry/token maps. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Author
|
Planned next (roadmap for this concept):
Demo videos coming soon. |
commit: |
Bugs:
- bootstrap ramps: all six 950 stops were copies of the 50 stop (regex
slip during hex→oklch conversion); real shade-color(90%) values restored
- bootstrap palettes renamed bs-* — plain blue/gray shadowed the tailwind
ramps app-wide (header preset apply recolored every text-blue-* in docs)
and broke curve-editor seeding; light secondary now the true $gray-600
- shuffle() now applies the neutral white-literal remaps selectPalette
uses — a shuffled tinted neutral exported a white-background theme
- resetTheme takes { track: false } so preset/import/shuffle/undo no
longer pollute the Theme Reset analytics metric
- import: legacy ring-N scrubber gated on detection (ate user classes on
config-only pastes; broke width-1 frame round-trips); non-custom-property
declarations and nested at-rule blocks now land in `skipped` instead of
importing as tokens; parseColor rejects truncated/alpha hex that fed NaN
through the curve fitter
- ai.post.ts advertised sand/sage/ash neutrals that don't exist
- heading line-height defaults unified on 1.25 (slider claimed 1.5 while
the page rendered ~1.25); AI ui.icons payloads skipped on the live path
- pinned swatch state reset on palette switch; curve editor drags only on
the primary button; swatch details are a popover (keyboard-reachable
copy/pin, pin survives outside clicks); Shift+D → ⌘⇧L (Notion
convention, WCAG 2.1.4-safe); keep-panels scoped behind a prop so the
header preset menu keeps stock modal dismiss
- Custom shadow opens seeded to the stock shadow-lg look (y6 blur12 @10%)
Bloat & noise:
- ThemeStudioControls: dead hydrationKey remount machinery removed;
typography rows and shadow sections deduped through config arrays
(~170 lines); five dead utility classes; orphaned docblocks rehomed
- 16 no-op preset token lines deleted; new tests forbid tokens equal to
library defaults and 950 stops lighter than 50
- keepPanels shared from utils/theme.ts; plugin imports the storage-key
constants; black-as-primary FOUC script gets tagPriority
- THEME_STUDIO_PLAN.md removed from the PR
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
macOS ships its Search-with-Google Service on ⌘⇧L, so pages never receive that chord (verified with a capture listener — Meta and Shift arrive, L never does). Bare Shift+D is a screen-reader landmark key. ⌘⇧D is a modifier chord pages can intercept (VS Code web proves it) and only shadows Chrome's non-reserved bookmark-all-tabs. The new import spec used property access on an untyped slots object — the root vue-tsc pass in CI rejects it; compare with toEqual instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
⌘⇧D fires Chrome's bookmark-all-tabs at the NSMenu level where pages can't block it. Control chords have no macOS menu bindings. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
10% read as broken on the tinted page — shadow-lg is two stacked 10% layers, so one layer needs ~20% to match. Leaving Custom clears the seeded geometry/opacity/color so stale values can't pin the next visit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Author
|
@benjamincanac Ok i'm hands off (this time for real for real), goodluck! |
CSS columns out, UScrollArea lanes in: tiles virtualize with per-item measurement, lane count follows the container width (fullscreen-aware, not viewport breakpoints), and the per-breakpoint tile reveal folds into the lane count. The scroll area owns its own scrolling; the tile card drops its masonry-era break-inside/mb classes since the virtualizer positions and gaps items itself. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- presets: UListbox rows with descriptions and a mode-aware theme chip — the doc's neutral ramp as the surface (50→200 light, 900→800 dark) under its own icon in the doc's primary - fonts: each family renders itself over a live specimen line - icon sets: every row previews a strip of its own glyphs - color grid chips: single dots become 400→600 ramp pills - toolbar color mode: UTabs one size below the app-wide default so it tracks the size setting without outgrowing the buttons Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Updated ThemeStudioColorMenu to adjust the size of the color indicator. - Enhanced ThemeStudioControls with default values for font and heading options, and improved variant item handling. - Modified ThemeStudioPaletteEditor to refine swatch interaction and tooltip behavior. - Improved ThemeStudioPresetMenu to include icon samples and adjust layout for better readability. - Adjusted ThemeStudioSliderRow for consistent styling and updated slider color settings. These changes enhance the overall user experience and visual consistency across the theme studio components.
…tyling updates - Added default value support for sliders in ThemeStudioColorSection and ThemeStudioControls to improve user experience. - Updated color properties in ThemeStudioControls to use 'primary' instead of 'neutral' for better visual consistency. - Enhanced ThemeStudioSliderRow to display a "Default" label when the slider is at its default value, improving clarity for users. - Adjusted theme.vue to refine the listbox styling for a more polished appearance. These changes collectively enhance the usability and visual coherence of the theme studio components.
…eatures - Added an "Un-contributors" section in PlaygroundContributors.vue to highlight contributors. - Improved ThemeStudioPaletteEditor.vue with refined swatch interaction and tooltip behavior, including new escape handling for pinned swatches. - Introduced a dice-rolling animation in ThemeStudioPresetMenu.vue, enhancing the random theme selection experience with visual feedback. These updates collectively improve user engagement and interaction within the theme studio and playground components.
…visibility - Added a descriptive subtitle "Making a mess." under the "Un-contributors" section to provide context and improve user understanding of the contributors' role. - Wrapped the "Un-contributors" title and subtitle in a div for better layout management. These changes aim to enhance the clarity and presentation of contributor information in the Playground component.
- Introduced a reset feature in ThemeStudioColorSection and ThemeStudioSection, allowing users to reset sections to their preset values. - Added dirty state tracking for each section in ThemeStudioControls, improving user feedback on unsaved changes. - Updated ThemeStudioShareModal to clear the active preset upon import, ensuring accurate dirty state tracking. - Created a new sections utility in theme-engine to manage section-specific logic, including dirty checks and merging functionality. These enhancements improve the usability and interactivity of the theme studio, providing users with better control over their theme settings.
…anagement - Integrated a reset feature that allows users to revert to the baseline preset or reset the theme when changes are detected. - Enhanced user feedback with computed properties for dirty state tracking and dynamic reset labels. - Updated the reset button to reflect the current state and improve accessibility. These changes enhance the usability of the theme management interface, providing users with better control over their theme settings.
…o components - Added a reset feature to ThemeStudioColorSection, ThemeStudioControls, and ThemeStudioSliderRow, allowing users to revert to baseline preset values. - Introduced computed properties for tracking dirty states, improving user feedback on unsaved changes. - Updated slider components to include reset buttons, enhancing accessibility and user control over theme settings. - Refactored theme management logic to utilize canonical token shades for more accurate resets. These improvements collectively enhance the usability and interactivity of the theme studio, providing users with better control over their theme settings.
…ladder deriveStyle rides canonicalTokenShades; unused resolveToken(s)/createThemeDoc/ extends/curve/meta removed; SHADE_LADDER adds literal white/black slider ends with honest resting defaults; shadow color select's Default merges into a tagged Neutral shade, normalized in section fingerprints. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… controls ThemeStudioControls becomes a dispatcher over Colors/General/Style files; the tagged-(Default) select and popover-listbox picker extract into ThemeStudioDefaultSelect and ThemeStudioListPicker; sections self-serve dirty/reset via a section-key prop; border and inner-shadow defaults get honest names (Per element / Inherit shadow). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…tbox view switcher Four new single-file template replicas, dashboard grows Inbox/Customers/ Settings sub-pages, the header view switcher trades UTabs for a described listbox, and the playground easter egg retires. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…th new features and content - Added a help button to ThemeStudioSection for improved user guidance. - Updated experience and testimonial sections in ThemeStudioViewPortfolio with new content and refined descriptions. - Enhanced FAQ content for clarity and engagement, reflecting a more conversational tone. These changes aim to improve user experience and provide clearer information within the theme studio components.
Contributor
Author
|
Ok maybe just tell me when you're working on it, I cant be trusted not to fiddle. |
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
3 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.
This is a concept/prototype, not a finished feature — opening early for direction feedback. I'll add demo videos tomorrow.
What it is: a standalone
/themepage (header nav) that turns the existing popover into a full theme studio. Everything is a view over one idea: a theme is a sparse set of overrides on the chain Tailwind palette → aliases → semantic tokens → component variants — so exports stay minimal by construction (only what you changed, split correctly betweenmain.cssandapp.config.ts).Features:
--ui-shadow*/--ui-border-widthtokensThinking: the theming primitives in v4 are already excellent — this makes them visible and manipulable, Blender-style, without inventing a parallel system. Along the way it surfaces concrete core gaps worth discussing for v5: semantic shadow/border tokens, a runtime global
defaultVariants.variant, and whether light--ui-bgshould follow the neutral ramp.Known prototype limitations: engine tests sit in the library test tree; style class bundles restore post-hydration (brief restyle on reload); palette fitting is ~13ms/click;
docs:scope only — zero library code touched.Built with Fable 🧵