- 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.
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>
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>
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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>
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>
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>
⌘⇧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>
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>
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>
- /theme adopts the releases/templates structured-border layout: border-x
rails from the header to the viewport bottom replace the floating
preview card; the toolbar separates with a border-t
- setting popovers drop their content padding — sections carry p-4 so
separators run edge to edge
- Font section: base/heading selects share a row with a single grouped
modifier cluster; italic and underline options removed
- five new complete icon sets (Bootstrap, Heroicons, Iconoir, Material
Symbols, Remix), every name validated against the Iconify API; the
material sun needed the colon form to dodge the material-symbols-light
collection prefix collision
- Bootstrap 5 preset built from twbs _variables.scss: real tint/shade
ramps extended to 50/950 stored as canonical oklch, gray-600 secondary,
.375rem radius, Roboto, headings at 500, flat shadows, bi icon set
- Shift+D toggles color mode; the toolbar switch is marked
data-keep-panels so flipping modes no longer dismisses open panels
- orchard preset drops its no-op default radius (broke export round-trip)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Added functionality to display swatch information including hex and RGB equivalents in tooltips.
- Implemented a copy feature for Oklch values, allowing users to easily copy color information.
- Introduced a pinning mechanism for tooltips to improve user interaction and accessibility.
- Updated the theme engine to include new color conversion functions for better color handling.
These enhancements improve the usability and functionality of the Theme Studio, providing users with more control over color palettes.
- Updated padding in the theme component to enhance visual alignment and spacing.
- Removed unnecessary padding on the top while maintaining overall layout integrity.
These changes contribute to a more polished user interface in the theme studio.
- ThemeDoc.font grows tailwind weight-step overrides (normal/medium/
semibold/bold — live variables components dereference, so they restyle
the whole UI), base uppercase/italic/tracking/leading, and a prose
heading treatment (font, weight, italic, underline, case, tracking,
leading) emitted as body and h1–h6 rules; import parses it all back,
round-trip tested
- Preview rides one nuxt-ui-font-prefs channel (state, storage, FOUC
script, plugin restore); Google Fonts links cover both families at
300–800 (also the Comic Neue thinness fix)
- The Font panel becomes a type editor: live specimen atop the fold,
Base and Headings rows with font selects previewing their own faces,
and grouped icon toolbars — face [B I(U)], case [AB], rhythm [↔ ↕] —
with sliders tucked in popovers; Icons fold leads with a 20-icon
spread of the selected set; text size returns to Scale
- Comic Neue joins the font list
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Updated shadow style options to include 'Inherit' and 'flat', improving clarity in shadow management.
- Refined inner shadow handling to streamline options and ensure consistent behavior across components.
- Removed unused local storage references for palette management, simplifying state handling.
- Adjusted UI elements in ThemeStudioControls for better interaction feedback and visual consistency.
These changes improve the overall user experience and maintainability of the theme studio.
- Introduced PaletteEffects to manage lightness, contrast, saturation, and hue shifts independently from base curves.
- Updated ThemeStudioPaletteEditor and related components to support new palette effects, ensuring a more dynamic user experience.
- Improved UI consistency by adjusting button labels and styles across ThemeStudio components.
- Refined color handling in ThemeStudioSliderRow to ensure better contrast and visibility.
- Updated main.css to remove hardcoded background colors, allowing for a more flexible theming approach.
These changes enhance the overall functionality and usability of the theme studio, providing users with more control over their color palettes.
- Delete the dead ThemeStudioBento (the playground grid replaced it)
- ThemeStudioSliderRow absorbs the shade slider and rebuilds on a
horizontal UFormField (real label wiring); chip + mode props turn a
row into a ramp-colored shade slider
- The Style panel's option grids become stock UTabs segmented controls;
the color swatch grid inlines plain UButtons — ThemeStudioPickerButton
goes away
- Import/Export collapse to plain toolbar buttons opening one shared
ThemeStudioShareModal (open + mode models)
- Sections keep their div-trigger collapsible: AccordionTrigger renders
a <button>, and headers carrying pencil/shades/help controls can't
legally nest inside one
14 studio components → 10.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Changed the button variant from 'subtle' to 'ghost' in the ThemeStudioPaletteEditor component to enhance visual distinction and user interaction feedback.
This adjustment contributes to a more intuitive user experience within the theme studio.
- Updated ThemeStudioColorMenu to change the size of color chips from 'xs' to 'sm' for better visibility.
- Removed the ':active' binding from the button in ThemeStudioSection to streamline the component's behavior.
These changes enhance the user interface by ensuring consistent sizing and interaction feedback across components.
- The pickers separate strictly per the module's v4 shade recipes:
primary and semantic aliases offer only chromatic ramps, neutral only
gray ramps — the neutral-as-primary path (picker row, alias redirect,
mirror recipe, FOUC restore, import fold-back) comes out, parked for
v5 where the variant redirect becomes possible
- Fold triggers light up while open (subtle active variant) across
sections, token groups and the modifiers panel; the General panel's
button/card/input default sections start collapsed
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Every settings section folds behind a ghost trigger button with a
LEADING chevron (the disclosure cue that tells folds from selects);
help links and the edit/shades toggles sit beside it as their own
buttons — stopped clicks, with actions forcing a collapsed section
open. Semantic regains its help link, closed by default
- Palette modifiers drop the preset dropdown for an always-there fold:
an eye-labelled strength row plus the photo-editing quartet
(lightness, contrast about the ramp midpoint, saturation as scale
with an additive floor so grays respond, hue), all idempotent from
the fitted base, with a reset beside the trigger
- Swatch clicks always really select: an active custom palette is
cleared (curves, params, remaps) instead of silently reseeding, so
the menu names the choice instead of a stale Custom
- Grid tiles become real UCards, inheriting panel default variants and
style treatments; SIZE_SUPPORT widens to every xs–xl component (tabs,
toggles, sliders, menus, calendar, field/form groups) with a
round-trip test
- Toolbar: history/reset move to the right cluster, fullscreen caps the
row, the color-mode switch caps the left cluster; slider readouts
truncate with a title fallback and shave leading zeros; studio-wide
text-xs/gap alignment; shade-slider fills keep a hairline inset ring
so they never vanish into the panel background
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Primary offers a single full-width Neutral option mapping to the neutral
ALIAS (#6608 semantics): the primary scale mirrors whatever neutral
resolves to, live, with FOUC restore, export recipe and import round-trip
- Drop the docs-only ramps (sand/sage/ash/cocoa/marine) from main.css, the
pickers and the engine; restore tailwind v4's own extra neutrals
(taupe/mauve/mist/olive) — CSS-variable resolved, they're not in the
tailwindcss/colors JS export
- Colors panel: shared ThemeStudioColorSection renders every alias (header
row hosts the edit + adjust-shades toggles), semantic rows sit under one
header, neutral's shade groups fold individually (closed by default)
- Palette modifiers: chroma presets gain a flat offset so gray ramps
respond, plus a Custom mode layering lightness/contrast/saturation/
chroma-offset/hue sliders over the fitted base
- Shade sliders keep a hairline inset ring so fills matching the panel
background stay visible
- Toolbar buttons move to the default size (header picker stays sm);
shared slider rows collapse into ThemeStudioSliderRow
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
History: undo/redo move the baseline synchronously (a second click
inside the debounce window dropped a state and duplicated redo
entries); align() invalidates the stacks when the theme changed while
no watcher was mounted; unmount flushes the pending capture instead of
dropping it.
Fullscreen: Esc leaves defineShortcuts (whose unconditional
preventDefault stopped every Reka layer on the page from closing) for
a plain listener that defers to visible dismissable layers — one press
closes the popover, the next exits. The toolbar reveal is proximity-
driven instead of an invisible click-eating overlay, and pins open
while any of its panels is open (their content portals to body, so
hover/focus-within alone retracted the bar under its own popovers).
Palette: the hue window stretches at seed to cover seam-crossing fits
(grabbing an out-of-window handle snapped the color); pointercancel no
longer throws through releasePointerCapture and strands the dragging
class; generatePalette clamps lightness (gamut clamp only searches
chroma); fitCurve survives empty input.
Engine: import puts style variables it cannot express back into the
token channel instead of silently destroying them (with a regression
test); picking Default on a per-group variant under an app-wide
variant now explodes the app-wide value into the other groups so it
actually wins; shadeSlider tolerates single-mode shade objects;
resetTheme clears the in-memory palette params it already cleared from
storage.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- frameSolids setter migrates the legacy border:'frame' encoding so the
switch can turn off
- resetTheme uses the centralized THEME_STORAGE_KEYS/THEME_STATE_KEYS
- history capture adopts (not parses) an empty baseline; the page clears
its debounce timer on unmount
- fitPalette returns stock curves for unparseable input instead of
crashing fitCurve
- style self-heal retries after a throwing expansion; analytics throttle
state shared across composable instances
- A11y contrast recompute queues one tick at a time; plan doc fences get
language specifiers
Skipped: the export config JSON-to-JS regex (closed vocabulary — no
single quotes can reach it).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A collapsed Shades row after Semantic keeps the advanced per-token
shade sliders one click away without crowding the color pickers; the
standalone Shades popover is gone from the toolbar.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The active preset id persists to localStorage (cleared by every edit
path including primary/neutral swaps, and by resetTheme); the menu
label resolves after mount so hydration matches the server, and falls
back to Custom whenever the theme has changes that no preset explains.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Presets, quick primary/neutral pickers and a light/dark switch from
any page, with Open Theme Studio one click away (hidden on /theme
itself, where the studio already is).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
UChatPrompt autofocuses by default; the prompt sits at the bottom of
the masonry, so opening the grid scrolled straight past everything.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Columns are sampled at i/(n-1) and drawn centered on that plot x, so
the endpoint colors sit directly under the endpoint controls; the
outer columns fill the margins to the canvas edges, overhanging
off-canvas so the blur keeps solid color at the borders.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
24 columns through a horizontal-only feGaussianBlur — the vertical
axis is already a true gradient, so only the column steps needed
smoothing. Edge columns overhang the canvas so the blur has solid
color to sample at the borders. Blend-mode compositing was considered
and rejected: it mixes in sRGB and can't reproduce oklch chroma/hue
response or the gamut clamp.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Each tab plots the curve over the colors it can reach: columns follow
the ramp, rows sweep the edited channel across its window while the
other two channels track the live curves — real engine samples, gamut
clamp included, tiled as one vertical SVG gradient per column (CSS has
no two-axis gradients; blend-mode tricks would mix in sRGB and lie
about oklch). The field bleeds to the canvas edges while its value
mapping stays pinned to the padded plot via userSpaceOnUse gradients.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Updated the popover UI settings in the header component to reduce the viewport and content width from 16rem to 12rem, enhancing the overall layout and usability of the studio menu.
Slurps the playground component family from docs/landing-playground —
26 self-contained, product-like tiles in a responsive masonry — as the
studio's Grid view, replacing the hand-rolled bento. Every tile picks
up the live theme.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The popover body becomes a vertical navigation menu rendered through
the item's content slot — horizontal popover child lists only render
one level, but the vertical orientation collapses Showcase, Community,
Playground and Blog into a Resources group.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Artyom Friedman