refactor(ui): migrate from DaisyUI to Nuxt UI only#262
Open
RedStar071 wants to merge 6 commits into
Open
Conversation
Codecov Report❌ Patch coverage is Additional details and impacted files@@ 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
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
This comment has been minimized.
This comment has been minimized.
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>
…roved readability
4152278 to
2ef958d
Compare
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
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.
🔗 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 liketext-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:
@pluginthemes inmain.csswith WolfStar@themescales and--wolfstar-surface-*/--ui-*mappingsapp/themes/*overrides (button, badge, avatar, tabs, link, skeleton)text-default,bg-muted,border-accented, etc.)OtherAppsto useUButton/UBadgeinstead of rawbtn/badgeclassesColorModeButtonto cycle light → dark → midnight with view transitionsFeatureShowcasewithUTooltipdaisyuidependency 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/midnightapp/assets/css/utilities.css:btn-glowandcard-glassnow use--ui-*variables;--radius-wolfstar-boxreplaces DaisyUI radiusComponents
ColorModeButton.vue: 3-way theme cycle (light/dark/midnight), handlespreference: "system"Cleanup
app/themes/{button,badge,avatar,tabs,link,skeleton}.tsapp/app.config.ts: explicitui.colorsmapping to custom scalesAGENTS.md,README.md, Storybook docs,.storybook/theme.ts, MCP configsTesting performed
pnpm lint:fixpnpm test:unit(including design token guardrails)pnpm build— prerender step requires site URL in this environmentpnpm test:nuxt— requires Playwright browser in CI/localReviewer notes
--discord-surfaceNeed help on this PR? Tag
/codesmithwith 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-*orbtn-class, and the new--wolfstar-surface-*/--ui-*mapping covers all three themes. TheColorModeButtoncycle logic is correct and fully tested. The only issues found are a missing midnight hover-shadow selector inhover-liftand stale DaisyUI references in two explicitly-unused component files.app/assets/css/utilities.css(hover-liftmidnight shadow) and the twodiscord/*.unused.vuefiles with leftover DaisyUI token references.Reviews (4): Last reviewed commit: "style(css): enhance prose utility with a..." | Re-trigger Greptile