feat: add Luma visual style support#1745
Conversation
Ports the Luma style ("Fluid, luminous, and glassy") from upstream
shadcn/ui v4.1.2 to shadcn-vue. Adds style-luma.css with Vue-specific
adaptations, CLI class transform mappings, style/preset registrations,
and corresponding test coverage.
📝 WalkthroughWalkthroughA new visual style called "luma" is being introduced across the v4 application and CLI tools, including CSS styling definitions, registry configuration entries, preset definitions, style transformation mappings, and corresponding test coverage for both the application and CLI packages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/cli/src/registry/config.ts (1)
14-17: Update the JSDoc comment to include all visual styles.The comment on line 16 lists
(vega, nova, maia, lyra, mira)but doesn't include the newly addedluma. Consider updating this to reflect all current visual styles for maintainability.📝 Suggested comment update
/** * Resolves the registry style to use for fetching components. - * Visual styles (vega, nova, maia, lyra, mira) are mapped to new-york-v4. + * Visual styles (vega, nova, maia, lyra, mira, luma) are mapped to new-york-v4. * The original style is preserved in config for applying transformations. */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/cli/src/registry/config.ts` around lines 14 - 17, Update the JSDoc on the registry style resolver to list all visual styles including the newly added "luma" so the comment matches current behavior; edit the comment block above the resolver (the JSDoc that mentions visual styles such as vega, nova, maia, lyra, mira) to include "luma" alongside those names and ensure it still explains that these visual styles map to new-york-v4 and the original style is preserved in config.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/v4/registry/styles/style-luma.css`:
- Around line 1322-1324: Replace the invalid Tailwind utility before:-z-1 inside
the .cn-menu-translucent rule with a valid arbitrary z-index value (e.g.,
before:z-[-1]) so the pseudo-element gets z-index: -1; update the class
definition where before:-z-1 appears to use before:z-[-1] (or another supported
arbitrary value) to restore the translucent layer stacking.
---
Nitpick comments:
In `@packages/cli/src/registry/config.ts`:
- Around line 14-17: Update the JSDoc on the registry style resolver to list all
visual styles including the newly added "luma" so the comment matches current
behavior; edit the comment block above the resolver (the JSDoc that mentions
visual styles such as vega, nova, maia, lyra, mira) to include "luma" alongside
those names and ensure it still explains that these visual styles map to
new-york-v4 and the original style is preserved in config.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 71d37935-dff6-4e9a-8b4b-4ad297ff4929
📒 Files selected for processing (10)
apps/v4/assets/css/main.cssapps/v4/registry/config.tsapps/v4/registry/styles.tsapps/v4/registry/styles/style-luma.csspackages/cli/src/registry/config.tspackages/cli/src/registry/constants.tspackages/cli/src/utils/transformers/transform-style.tspackages/cli/test/utils/registry-api.test.tspackages/cli/test/utils/registry-config.test.tspackages/cli/test/utils/transform-style.test.ts
| .cn-menu-translucent { | ||
| @apply animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether z-index "1" is configured and whether the repo uses alternate negative z-index syntax.
echo "== Tailwind dependency versions =="
rg -n --iglob 'package.json' '"tailwindcss"\s*:'
echo
echo "== Tailwind config zIndex definitions =="
fd -i 'tailwind.config.*' | xargs -r rg -n 'zIndex|z-index' -C3
echo
echo "== Existing negative z-index class patterns in repo =="
rg -n --iglob '*.{css,ts,js,mjs,cjs,vue}' '(-z-1|z-\[-1\]|-z-\[1\])' -C2Repository: unovue/shadcn-vue
Length of output: 4872
🏁 Script executed:
# Check Tailwind 4.1.17 documentation/behavior for z-index scale
# First, verify if there's a custom tailwind config extending zIndex
find . -name 'tailwind.config.*' -o -name 'tailwind.ts' | head -20Repository: unovue/shadcn-vue
Length of output: 340
🌐 Web query:
Tailwind CSS 4.1.17 z-index default scale and negative z-index utilities support
💡 Result:
In Tailwind CSS 4.1.17, the default z-index scale consists of z-0 (0), z-10 (10), z-20 (20), z-30 (30), z-40 (40), z-50 (50), and z-auto (auto). Negative z-index utilities are fully supported using the syntax -z-{value}, such as -z-10 for z-index: -10, -z-20 for -20, up to -z-50 for -50. This applies to positioned elements (relative, absolute, fixed, or sticky) and works consistently across v4.x versions, including minor releases like 4.1.17 which contain no z-index changes per changelog.
Citations:
- 1: https://tailwindcss.com/docs/z-index
- 2: https://frontend-hero.com/tailwind-z-index-scale
- 3: https://tailwindcss.com/docs/z-index?ad=semD&am=broad&an=msn_s&askid=f1026835-4cd0-4613-baa8-da828eb0dd2e-0-ab_msb&l=sem&o=29626&q=css+z-index+-1&qsrc=999
- 4: https://collected.press/github/tailwindlabs/tailwindcss@4827c465b887b04d6f42483480dc56c56604b65e/CHANGELOG.md
- 5: https://v3.tailwindcss.com/docs/z-index
- 6: https://tailwindcss.com/docs/theme
- 7: Negative z-index tailwindlabs/tailwindcss#329
🏁 Script executed:
# Check if apps/v4 has a tailwind config with custom zIndex
find apps/v4 -name 'tailwind.config.*' -type fRepository: unovue/shadcn-vue
Length of output: 43
🏁 Script executed:
# Check for existing arbitrary value syntax patterns in style-luma.css and other CSS files
rg 'z-\[' apps/v4/registry/styles/ -nRepository: unovue/shadcn-vue
Length of output: 43
🏁 Script executed:
# Check if arbitrary value syntax is used elsewhere in the CSS files
rg '@apply.*\[' apps/v4/registry/styles/style-luma.css -n | head -20Repository: unovue/shadcn-vue
Length of output: 5771
Tailwind utility before:-z-1 at line 1323 is invalid and will be silently ignored.
The z-index scale in Tailwind 4.1.17 only includes 0, 10, 20, 30, 40, 50, and auto—-z-1 is not supported. The pseudo-element's stacking context will fall back to z-index: auto, breaking the translucent layer effect. Use the arbitrary value syntax instead:
Fix
- `@apply` animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!;
+ `@apply` animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:z-[-1] before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .cn-menu-translucent { | |
| @apply animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!; | |
| } | |
| .cn-menu-translucent { | |
| `@apply` animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:z-[-1] before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/v4/registry/styles/style-luma.css` around lines 1322 - 1324, Replace the
invalid Tailwind utility before:-z-1 inside the .cn-menu-translucent rule with a
valid arbitrary z-index value (e.g., before:z-[-1]) so the pseudo-element gets
z-index: -1; update the class definition where before:-z-1 appears to use
before:z-[-1] (or another supported arbitrary value) to restore the translucent
layer stacking.
|
Closing in favor of a new PR with additional fixes for the CLI resolver and style transform. |
1 participant
Summary
style-luma.css(1325 lines) adapted from the upstream React implementation with Vue-specific syntax adjustments (ring-[3px],data-[inset], selector patterns, etc.)rounded-sm→rounded-xl,rounded-md→rounded-2xl,rounded-lg/rounded-xl→rounded-3xl)Changes
apps/v4/registry/styles/style-luma.css— full component stylingconstants.ts(STYLES + PRESETS),config.ts(VISUAL_STYLES),transform-style.ts(class mappings)styles.ts(metadata + icon),config.ts(preset),main.css(import + custom variant)registry-api,registry-config, andtransform-styletestsTest plan
pnpm test)Summary by CodeRabbit