Skip to content

refactor(ui): migrate from DaisyUI to Nuxt UI only#262

Open
RedStar071 wants to merge 6 commits into
mainfrom
refactor/nuxt-ui-only-migration
Open

refactor(ui): migrate from DaisyUI to Nuxt UI only#262
RedStar071 wants to merge 6 commits into
mainfrom
refactor/nuxt-ui-only-migration

Conversation

@RedStar071

@RedStar071 RedStar071 commented Jul 2, 2026

Copy link
Copy Markdown
Member

🔗 Linked issue

#XXXX

🧭 Context

The dashboard previously used a hybrid stack: Nuxt UI for components and DaisyUI for theme tokens, component class overrides (btn, badge, tab, etc.), and utility classes like text-base-content / bg-base-200. This added two overlapping styling systems and made theme maintenance harder.

This PR removes DaisyUI entirely and standardizes on Nuxt UI v4 semantic tokens while preserving WolfStar visual parity across light, dark, and midnight themes.

High-level summary:

  • Replaced DaisyUI @plugin themes in main.css with WolfStar @theme scales and --wolfstar-surface-* / --ui-* mappings
  • Removed DaisyUI-based app/themes/* overrides (button, badge, avatar, tabs, link, skeleton)
  • Migrated ~40 Vue files from DaisyUI utility classes to Nuxt UI semantic classes (text-default, bg-muted, border-accented, etc.)
  • Updated marketing CTAs and OtherApps to use UButton / UBadge instead of raw btn / badge classes
  • Extended ColorModeButton to cycle light → dark → midnight with view transitions
  • Replaced DaisyUI tooltips in FeatureShowcase with UTooltip
  • Removed daisyui dependency and updated docs, Storybook, and MCP config

📚 Description

CSS / tokens

  • app/assets/css/main.css: WolfStar oklch color scales, --wolfstar-surface-* per theme, --ui-* overrides for light/dark/midnight
  • app/assets/css/utilities.css: btn-glow and card-glass now use --ui-* variables; --radius-wolfstar-box replaces DaisyUI radius

Components

  • ColorModeButton.vue: 3-way theme cycle (light/dark/midnight), handles preference: "system"
  • Template migrations across profile, dashboard, marketing pages, guild settings, and Discord mockups

Cleanup

  • Deleted app/themes/{button,badge,avatar,tabs,link,skeleton}.ts
  • app/app.config.ts: explicit ui.colors mapping to custom scales
  • Updated AGENTS.md, README.md, Storybook docs, .storybook/theme.ts, MCP configs

Testing performed

  • pnpm lint:fix
  • pnpm test:unit (including design token guardrails)
  • Vite/CSS compilation succeeds
  • pnpm build — prerender step requires site URL in this environment
  • pnpm test:nuxt — requires Playwright browser in CI/local
  • Manual visual check of light / dark / midnight on profile, dashboard, wolfstar marketing

Reviewer notes

  • Visual regression risk is highest on buttons, badges, tabs, and navigation menu — please spot-check all three themes
  • Discord components retain brand-specific colors via scoped CSS vars and --discord-surface

View with Codesmith
Need help on this PR? Tag /codesmith with what you need. Autofix is enabled.

Confidence Score: 5/5

The migration is mechanically consistent across all changed files and the new color token architecture is well-structured; safe to merge with a spot-check of all three themes.

The DaisyUI removal is thorough — no live component retains a base-* or btn- class, and the new --wolfstar-surface-* / --ui-* mapping covers all three themes. The ColorModeButton cycle logic is correct and fully tested. The only issues found are a missing midnight hover-shadow selector in hover-lift and stale DaisyUI references in two explicitly-unused component files.

app/assets/css/utilities.css (hover-lift midnight shadow) and the two discord/*.unused.vue files with leftover DaisyUI token references.

Reviews (4): Last reviewed commit: "style(css): enhance prose utility with a..." | Re-trigger Greptile

@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 61.36364% with 17 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.63%. Comparing base (e1d28af) to head (2ef958d).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/pages/(marketing)/wolfstar/index.vue 16.66% 3 Missing and 2 partials ⚠️
app/components/ColorModeButton.vue 80.00% 2 Missing and 1 partial ⚠️
app/components/pwa/InstallPrompt.vue 0.00% 1 Missing and 2 partials ⚠️
app/components/OtherApps.vue 0.00% 2 Missing ⚠️
app/components/guild/settings/filter/Links.vue 33.33% 0 Missing and 2 partials ⚠️
app/components/guild/settings/filter/Word.vue 33.33% 0 Missing and 2 partials ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #262      +/-   ##
==========================================
- Coverage   69.68%   69.63%   -0.06%     
==========================================
  Files         136      133       -3     
  Lines        3002     3013      +11     
  Branches      648      650       +2     
==========================================
+ Hits         2092     2098       +6     
- Misses        456      461       +5     
  Partials      454      454              
Flag Coverage Δ
component 60.26% <61.36%> (-0.04%) ⬇️
unit 69.54% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
app/components/ActivitySection.vue 83.33% <100.00%> (ø)
app/components/BuildEnvironment.vue 100.00% <ø> (ø)
app/components/app/Footer.vue 100.00% <100.00%> (ø)
app/components/app/Header.vue 90.00% <ø> (ø)
app/components/discord/embed.vue 100.00% <ø> (ø)
app/components/discord/invite.vue 75.00% <100.00%> (ø)
app/components/discord/message.vue 100.00% <ø> (ø)
app/components/guild/SettingsSection.vue 100.00% <ø> (ø)
app/components/guild/settings/DisabledCommands.vue 56.00% <100.00%> (-0.58%) ⬇️
app/components/guild/settings/Events.vue 86.04% <100.00%> (ø)
... and 11 more
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@codspeed-hq

codspeed-hq Bot commented Jul 2, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 44 untouched benchmarks


Comparing refactor/nuxt-ui-only-migration (2ef958d) with main (e1d28af)

Open in CodSpeed

@blacksmith-sh

This comment has been minimized.

Comment thread app/assets/css/utilities.css
Comment thread app/components/ColorModeButton.vue
RedStar071 and others added 6 commits July 5, 2026 12:50
Remove the DaisyUI dependency and theme plugins while preserving WolfStar
visual parity across light, dark, and midnight themes via Nuxt UI tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
The theme swap now cycles light -> dark -> midnight, so clicking from
the 'dark' starting preference advances to 'midnight', not 'light'.
Update the four post-swap assertions to match the new three-theme
cycle; the startViewTransition behavioral assertions are unchanged.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
Describe the forthcoming action instead of the current state so the
label follows the standard toggle-button pattern and no longer leaks
the internal 'system' preference string to screen reader users.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
Match main.css's [data-theme="x"], .x pairing for the dark/midnight
overrides in card-glass, glass-overlay, and hover-lift. Nuxt UI's
color-mode config sets both dataValue: "theme" and classSuffix: "",
so this is defensive alignment with the token file rather than a
behavior change.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
@blacksmith-sh blacksmith-sh Bot force-pushed the refactor/nuxt-ui-only-migration branch from 4152278 to 2ef958d Compare July 5, 2026 13:12
@RedStar071 RedStar071 added this to the v3 milestone Jul 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant