Refined token usage to remove redundant sizing and refactored tokens#7591
Open
Refined token usage to remove redundant sizing and refactored tokens#7591
Conversation
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughGlobal theme tokens, fonts, and utilities were restructured (rem-based tokens, WOFF2 variable fonts, new gradients/file-input utilities). Many components and docs had CSS utility class and variant renames/reformats (radii, padding, sizes, borders); Avatar stopped applying inline width/height. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (2)
packages/eclipse/src/styles/globals.css (2)
39-45:looseandloosercurrently collapse to the same value.Line [39]-Line [40] and Line [44]-Line [45] both resolve to
3rem. If intentional, a short comment helps; otherwise one tier can be dropped to keep the token scale meaningful.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/globals.css` around lines 39 - 45, The CSS token scale defines --spacing-padding-block-container-loose and --spacing-padding-block-container-looser (and similarly --spacing-padding-inline-container-loose and --spacing-padding-inline-container-looser) both as 3rem so the two tiers collapse; either remove the redundant “looser” tier or change its value to a distinct step (e.g., larger than loose) to preserve meaningful scale, or add an inline comment next to the variables explaining the duplication is intentional; update the declarations for --spacing-padding-block-container-loose, --spacing-padding-block-container-looser, --spacing-padding-inline-container-loose, and --spacing-padding-inline-container-looser accordingly.
388-390: Use an explicit disabled selector for file button styles for clarity and correctness.The current approach mixes disabled-state utilities on a pseudo-element selector, which can be confusing and doesn't properly target the file button's disabled state. In Tailwind v4, the correct pattern is to use
disabled:file:*stacked variants (e.g.disabled:file:bg-...) when styling within the pseudo-element, or—more clearly—separate the disabled styles into their own selector rule.Recommended selector structure
input[type="file"]::file-selector-button { - `@apply` font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 disabled:bg-background-neutral-weak text-foreground-neutral disabled:text-foreground-neutral-weaker; + `@apply` font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 text-foreground-neutral; +} + +input[type="file"]:disabled::file-selector-button { + `@apply` bg-background-neutral-weak text-foreground-neutral-weaker cursor-not-allowed; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/globals.css` around lines 388 - 390, The pseudo-element rule input[type="file"]::file-selector-button mixes disabled utilities; split the disabled styles into an explicit disabled selector so the disabled state targets the button correctly. Remove disabled:* utilities from input[type="file"]::file-selector-button and add a separate rule for input[type="file"]:disabled::file-selector-button that `@apply`'s the disabled background/text classes (the same utilities currently suffixed with disabled:), or alternatively convert to Tailwind stacked variants like disabled:file:bg-... if you prefer stacked variants; update the rules around input[type="file"]::file-selector-button and input[type="file"]:disabled::file-selector-button accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/eclipse/src/components/action.tsx`:
- Around line 27-33: The navigation menu still passes size="nav" but the Action
component's size map no longer defines "nav" (only
"lg","2xl","3xl","4xl","5xl"), so either change the callsite in
navigation-menu.tsx to use an existing size (e.g., replace size="nav" with
size="2xl" or "lg" depending on desired visuals) or restore a "nav" alias in the
Action size mapping (add a "nav": "size-2xl p-2" or whatever mapping matches
your design) so the prop is valid; update the single callsite to match or re-add
the "nav" key in the size map in action.tsx to resolve the TypeScript/runtime
error.
In `@packages/eclipse/src/components/button.tsx`:
- Line 16: The `success` variant's class string in the Button component
incorrectly uses the error focus ring token; update the `success` variant (the
object key `success` in components/button.tsx) to replace
`focus-visible:ring-stroke-error` with the correct success token (e.g.,
`focus-visible:ring-stroke-success`) so the focus ring matches the success
state.
In `@packages/eclipse/src/components/input.tsx`:
- Line 17: The "2xl" entry in the size-to-class mapping does not override the
component's fixed base height (set in the base classes), so size="2xl" still
renders with h-9; update the size mapping for "2xl" to include an explicit
height class (e.g., h-12 or whatever matches lg/xl scale) and/or remove/adjust
the fixed base height in the shared base class so the "2xl" mapping (in the size
map for the Input component) can take effect; locate the size map key "2xl" and
the shared base class (the base height set around line 24) in the Input
component (components/input.tsx) and ensure the "2xl" string includes the
correct h-* class to override the base.
In `@packages/eclipse/src/components/tooltip.tsx`:
- Line 27: The tooltip content class uses the wrong backdrop token
"backdrop-blur-low" which doesn't exist; update the class string in
packages/eclipse/src/components/tooltip.tsx by replacing "backdrop-blur-low"
with the actual theme utility "blur-background-low" (or alternatively use
"backdrop-blur-[var(--blur-background-low)]" if you prefer the backdrop-
prefix), ensuring the class containing "z-50 ... text-white animate-in ..." now
references the correct token.
In `@packages/eclipse/src/styles/fonts.css`:
- Line 7: In packages/eclipse/src/styles/fonts.css update each invalid
font-weight range in the `@font-face` blocks (currently written as "200 .. 900")
to the CSS Fonts Level 4 compliant space-separated form "200 900" (apply the
same change to all occurrences of the dot-separated range in that file so
browsers correctly interpret weight ranges).
In `@packages/eclipse/src/styles/globals.css`:
- Around line 73-77: The CSS custom properties --font-sans-display, --font-sans,
and --font-mono use unquoted named font-family tokens causing stylelint
value-keyword-case failures; update those variable values to quote each named
font family (e.g., "Inter", "Roboto", "Mona Sans Mono") so every non-generic
font-name is wrapped in quotes while leaving generic families (sans-serif,
monospace) unquoted to preserve behavior; modify the declarations for
--font-sans-display, --font-sans, and --font-mono in globals.css accordingly.
- Around line 376-389: The Biome CSS linter fails on Tailwind `@apply` in
packages/eclipse/src/styles/globals.css (see selectors input[type="file"],
input[type="file"]:valid, input[type="file"]:invalid, and
input[type="file"]::file-selector-button); to fix, update the Biome
configuration to exclude this file from CSS linting by adding an ignore/exclude
pattern for packages/eclipse/src/styles/globals.css in biome.json so the
Tailwind `@apply` directives are not parsed by Biome, or alternatively convert
those `@apply` usages in the listed selectors into equivalent plain CSS properties
if you prefer to keep the file linted.
- Around line 72-79: The Statistic component is using a non-existent CSS class
"font-family-display" in packages/eclipse/src/components/statistic.tsx causing
the display font not to apply; fix by either updating the className in
statistic.tsx to the existing token-based class (e.g., "font-sans-display") or
add a back-compat alias in globals.css that maps the old class to the declared
token (--font-sans-display) so both "font-family-display" and
"font-sans-display" will work; locate and change the className in statistic.tsx
or add the alias rule alongside the existing --font-sans-display token in
globals.css and ensure the Tailwind config is updated if you use utility
classes.
---
Nitpick comments:
In `@packages/eclipse/src/styles/globals.css`:
- Around line 39-45: The CSS token scale defines
--spacing-padding-block-container-loose and
--spacing-padding-block-container-looser (and similarly
--spacing-padding-inline-container-loose and
--spacing-padding-inline-container-looser) both as 3rem so the two tiers
collapse; either remove the redundant “looser” tier or change its value to a
distinct step (e.g., larger than loose) to preserve meaningful scale, or add an
inline comment next to the variables explaining the duplication is intentional;
update the declarations for --spacing-padding-block-container-loose,
--spacing-padding-block-container-looser,
--spacing-padding-inline-container-loose, and
--spacing-padding-inline-container-looser accordingly.
- Around line 388-390: The pseudo-element rule
input[type="file"]::file-selector-button mixes disabled utilities; split the
disabled styles into an explicit disabled selector so the disabled state targets
the button correctly. Remove disabled:* utilities from
input[type="file"]::file-selector-button and add a separate rule for
input[type="file"]:disabled::file-selector-button that `@apply`'s the disabled
background/text classes (the same utilities currently suffixed with disabled:),
or alternatively convert to Tailwind stacked variants like disabled:file:bg-...
if you prefer stacked variants; update the rules around
input[type="file"]::file-selector-button and
input[type="file"]:disabled::file-selector-button accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 07e0b75f-bb1c-476c-86ec-269d817e7e6e
⛔ Files ignored due to path filters (10)
packages/eclipse/src/static/fonts/MonaSans-Bold.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-Medium.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-Regular.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-SemiBold.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/mona-sans-italic-variable.woff2is excluded by!**/*.woff2packages/eclipse/src/static/fonts/mona-sans-mono-variable.woff2is excluded by!**/*.woff2packages/eclipse/src/static/fonts/mona-sans-variable.woff2is excluded by!**/*.woff2packages/eclipse/src/static/fonts/monaspace_neon_var.woffis excluded by!**/*.woffpackages/eclipse/src/static/fonts/monaspace_neon_var.woff2is excluded by!**/*.woff2
📒 Files selected for processing (14)
packages/eclipse/GETTING_STARTED.mdpackages/eclipse/src/components/action.tsxpackages/eclipse/src/components/avatar.tsxpackages/eclipse/src/components/badge.tsxpackages/eclipse/src/components/banner.tsxpackages/eclipse/src/components/button.tsxpackages/eclipse/src/components/card.tsxpackages/eclipse/src/components/checkbox.tsxpackages/eclipse/src/components/input.tsxpackages/eclipse/src/components/label.tsxpackages/eclipse/src/components/statistic.tsxpackages/eclipse/src/components/tooltip.tsxpackages/eclipse/src/styles/fonts.csspackages/eclipse/src/styles/globals.css
Comment on lines
+376
to
+389
| input[type="file"]:valid { | ||
| @apply text-foreground-neutral; | ||
| } | ||
|
|
||
| .text-lg { | ||
| font-size: 18px; | ||
| line-height: 28px; | ||
| } | ||
| input[type="file"]:invalid { | ||
| @apply text-foreground-error; | ||
| } | ||
|
|
||
| .text-xl { | ||
| font-size: 20px; | ||
| line-height: 28px; | ||
| } | ||
| input[type="file"] { | ||
| @apply font-normal cursor-pointer text-foreground-neutral-weak disabled:text-foreground-neutral-weaker p-0 border-0; | ||
| } | ||
|
|
||
| .text-2xl { | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| .bg-background-neutral-reverse { | ||
| background-color: var(--color-background-neutral-reverse); | ||
| } | ||
| .bg-background-ppg-strong { | ||
| background-color: var(--color-background-ppg-strong); | ||
| } | ||
| .bg-background-ppg { | ||
| background-color: var(--color-background-ppg); | ||
| } | ||
| .bg-background-ppg-reverse-strong { | ||
| background-color: var(--color-background-ppg-reverse-strong); | ||
| } | ||
| .bg-background-ppg-reverse { | ||
| background-color: var(--color-background-ppg-reverse); | ||
| } | ||
| .bg-background-orm-strong { | ||
| background-color: var(--color-background-orm-strong); | ||
| } | ||
| .bg-background-orm { | ||
| background-color: var(--color-background-orm); | ||
| } | ||
| .bg-background-orm-reverse-strong { | ||
| background-color: var(--color-background-orm-reverse-strong); | ||
| } | ||
| .bg-background-orm-reverse { | ||
| background-color: var(--color-background-orm-reverse); | ||
| } | ||
| .bg-background-error-strong { | ||
| background-color: var(--color-background-error-strong); | ||
| } | ||
| .bg-background-error { | ||
| background-color: var(--color-background-error); | ||
| } | ||
| .bg-background-error-reverse-strong { | ||
| background-color: var(--color-background-error-reverse-strong); | ||
| } | ||
| .bg-background-error-reverse { | ||
| background-color: var(--color-background-error-reverse); | ||
| } | ||
| .bg-background-success-strong { | ||
| background-color: var(--color-background-success-strong); | ||
| } | ||
| .bg-background-success { | ||
| background-color: var(--color-background-success); | ||
| } | ||
| .bg-background-success-reverse-strong { | ||
| background-color: var(--color-background-success-reverse-strong); | ||
| } | ||
| .bg-background-success-reverse { | ||
| background-color: var(--color-background-success-reverse); | ||
| } | ||
| .bg-background-warning-strong { | ||
| background-color: var(--color-background-warning-strong); | ||
| } | ||
| .bg-background-warning { | ||
| background-color: var(--color-background-warning); | ||
| } | ||
| .bg-background-warning-reverse-strong { | ||
| background-color: var(--color-background-warning-reverse-strong); | ||
| } | ||
| .bg-background-warning-reverse { | ||
| background-color: var(--color-background-warning-reverse); | ||
| } | ||
| .bg-background-cyan-strong { | ||
| background-color: var(--color-background-cyan-strong); | ||
| } | ||
| .bg-background-cyan { | ||
| background-color: var(--color-background-cyan); | ||
| } | ||
| .bg-background-fuchsia-strong { | ||
| background-color: var(--color-background-fuchsia-strong); | ||
| } | ||
| .bg-background-fuchsia { | ||
| background-color: var(--color-background-fuchsia); | ||
| } | ||
| .bg-background-lime-strong { | ||
| background-color: var(--color-background-lime-strong); | ||
| } | ||
| .bg-background-lime { | ||
| background-color: var(--color-background-lime); | ||
| } | ||
| .bg-background-pink-strong { | ||
| background-color: var(--color-background-pink-strong); | ||
| } | ||
| .bg-background-pink { | ||
| background-color: var(--color-background-pink); | ||
| } | ||
| .bg-background-purple-strong { | ||
| background-color: var(--color-background-purple-strong); | ||
| } | ||
| .bg-background-purple { | ||
| background-color: var(--color-background-purple); | ||
| } | ||
| .bg-background-sky-strong { | ||
| background-color: var(--color-background-sky-strong); | ||
| } | ||
| .bg-background-sky { | ||
| background-color: var(--color-background-sky); | ||
| } | ||
| .bg-background-violet-strong { | ||
| background-color: var(--color-background-violet-strong); | ||
| } | ||
| .bg-background-violet { | ||
| background-color: var(--color-background-violet); | ||
| } | ||
| .bg-background-yellow-strong { | ||
| background-color: var(--color-background-yellow-strong); | ||
| } | ||
| .bg-background-yellow { | ||
| background-color: var(--color-background-yellow); | ||
| } | ||
|
|
||
| /* Hover background color utilities */ | ||
| .hover\:bg-background-neutral-strong:hover { | ||
| background-color: var(--color-background-neutral-strong); | ||
| } | ||
| .hover\:bg-background-neutral-reverse-strong:hover { | ||
| background-color: var(--color-background-neutral-reverse-strong); | ||
| } | ||
| .hover\:bg-background-ppg-reverse-strong:hover { | ||
| background-color: var(--color-background-ppg-reverse-strong); | ||
| } | ||
| .hover\:bg-background-orm-reverse-strong:hover { | ||
| background-color: var(--color-background-orm-reverse-strong); | ||
| } | ||
| .hover\:bg-background-error-reverse-strong:hover { | ||
| background-color: var(--color-background-error-reverse-strong); | ||
| } | ||
|
|
||
| /* Foreground/text color utilities */ | ||
| .text-foreground-neutral { | ||
| color: var(--color-foreground-neutral); | ||
| } | ||
| .text-foreground-neutral-weak { | ||
| color: var(--color-foreground-neutral-weak); | ||
| } | ||
| .text-foreground-neutral-weaker { | ||
| color: var(--color-foreground-neutral-weaker); | ||
| } | ||
| .text-foreground-neutral-reverse { | ||
| color: var(--color-foreground-neutral-reverse); | ||
| } | ||
| .text-foreground-neutral-reverse-weak { | ||
| color: var(--color-foreground-neutral-reverse-weak); | ||
| } | ||
| .text-foreground-ppg-strong { | ||
| color: var(--color-foreground-ppg-strong); | ||
| } | ||
| .text-foreground-ppg { | ||
| color: var(--color-foreground-ppg); | ||
| } | ||
| .text-foreground-ppg-weak { | ||
| color: var(--color-foreground-ppg-weak); | ||
| } | ||
| .text-foreground-ppg-reverse { | ||
| color: var(--color-foreground-ppg-reverse); | ||
| } | ||
| .text-foreground-ppg-reverse-weak { | ||
| color: var(--color-foreground-ppg-reverse-weak); | ||
| } | ||
| .text-foreground-orm-strong { | ||
| color: var(--color-foreground-orm-strong); | ||
| } | ||
| .text-foreground-orm { | ||
| color: var(--color-foreground-orm); | ||
| } | ||
| .text-foreground-orm-weak { | ||
| color: var(--color-foreground-orm-weak); | ||
| } | ||
| .text-foreground-orm-reverse { | ||
| color: var(--color-foreground-orm-reverse); | ||
| } | ||
| .text-foreground-orm-reverse-weak { | ||
| color: var(--color-foreground-orm-reverse-weak); | ||
| } | ||
| .text-foreground-error-strong { | ||
| color: var(--color-foreground-error-strong); | ||
| } | ||
| .text-foreground-error { | ||
| color: var(--color-foreground-error); | ||
| } | ||
| .text-foreground-error-weak { | ||
| color: var(--color-foreground-error-weak); | ||
| } | ||
| .text-foreground-error-reverse { | ||
| color: var(--color-foreground-error-reverse); | ||
| } | ||
| .text-foreground-error-reverse-weak { | ||
| color: var(--color-foreground-error-reverse-weak); | ||
| } | ||
| .text-foreground-success-strong { | ||
| color: var(--color-foreground-success-strong); | ||
| } | ||
| .text-foreground-success { | ||
| color: var(--color-foreground-success); | ||
| } | ||
| .text-foreground-success-weak { | ||
| color: var(--color-foreground-success-weak); | ||
| } | ||
| .text-foreground-success-reverse { | ||
| color: var(--color-foreground-success-reverse); | ||
| } | ||
| .text-foreground-success-reverse-weak { | ||
| color: var(--color-foreground-success-reverse-weak); | ||
| } | ||
| .text-foreground-warning-strong { | ||
| color: var(--color-foreground-warning-strong); | ||
| } | ||
| .text-foreground-warning { | ||
| color: var(--color-foreground-warning); | ||
| } | ||
| .text-foreground-warning-weak { | ||
| color: var(--color-foreground-warning-weak); | ||
| } | ||
| .text-foreground-warning-reverse { | ||
| color: var(--color-foreground-warning-reverse); | ||
| } | ||
| .text-foreground-warning-reverse-weak { | ||
| color: var(--color-foreground-warning-reverse-weak); | ||
| } | ||
|
|
||
| /* Border/stroke color utilities */ | ||
| .border-stroke-neutral-stronger { | ||
| border-color: var(--color-stroke-neutral-stronger); | ||
| } | ||
| .border-stroke-neutral-strong { | ||
| border-color: var(--color-stroke-neutral-strong); | ||
| } | ||
| .border-stroke-neutral { | ||
| border-color: var(--color-stroke-neutral); | ||
| } | ||
| .border-stroke-neutral-weak { | ||
| border-color: var(--color-stroke-neutral-weak); | ||
| } | ||
| .border-stroke-ppg { | ||
| border-color: var(--color-stroke-ppg); | ||
| } | ||
| .border-stroke-orm { | ||
| border-color: var(--color-stroke-orm); | ||
| } | ||
| .border-stroke-error { | ||
| border-color: var(--color-stroke-error); | ||
| } | ||
| .border-stroke-success { | ||
| border-color: var(--color-stroke-success); | ||
| } | ||
| .border-stroke-warning { | ||
| border-color: var(--color-stroke-warning); | ||
| } | ||
|
|
||
| /* Padding utilities for accordion */ | ||
| .pl-10 { | ||
| padding-left: 40px; | ||
| } | ||
| .shadow-box { | ||
| box-shadow: | ||
| 0 8px 8px -8px rgba(0, 0, 0, 0.04), | ||
| 0 2px 2px 0 rgba(0, 0, 0, 0.04); | ||
| } | ||
| /* File input button styles */ | ||
| input[type="file"]:valid { | ||
| @apply text-foreground-neutral; | ||
| } | ||
| input[type="file"]:invalid { | ||
| @apply text-foreground-error; | ||
| } | ||
| input[type="file"] { | ||
| @apply font-normal cursor-pointer text-foreground-neutral-weak disabled:text-foreground-neutral-weaker p-0!; | ||
| border: none !important; | ||
| } | ||
| input[type="file"]::file-selector-button { | ||
| @apply font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 disabled:bg-background-neutral-weak text-foreground-neutral disabled:text-foreground-neutral-weaker; | ||
| } | ||
| .padding-btn-lg[type="file"]::file-selector-button { | ||
| padding: 4px 8px; | ||
| } | ||
| .padding-btn-xl[type="file"]::file-selector-button { | ||
| padding: 6px 10px; | ||
| } | ||
| .padding-btn-2xl[type="file"]::file-selector-button { | ||
| padding: 8px 12px; | ||
| } | ||
| .tooltip { | ||
| background: rgba(0, 0, 0, 0.5); | ||
| /* blur-background-low */ | ||
| backdrop-filter: blur(8px); | ||
| } | ||
| } | ||
| input[type="file"]::file-selector-button { | ||
| @apply font-medium cursor-pointer rounded-square bg-background-neutral py-1 px-2 disabled:bg-background-neutral-weak text-foreground-neutral disabled:text-foreground-neutral-weaker; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Biome config files =="
find . -maxdepth 3 -type f \( -name 'biome.json*' -o -name 'biome.*.json*' \) 2>/dev/null || echo "No biome config found in top levels"
echo ""
echo "== Checking for biome in root and common directories =="
ls -la biome.* 2>/dev/null | head -20 || echo "No biome files in root"
echo ""
echo "== CSS file location and line count =="
if [ -f "packages/eclipse/src/styles/globals.css" ]; then
wc -l "packages/eclipse/src/styles/globals.css"
echo ""
echo "== Content around lines 376-389 =="
sed -n '370,395p' "packages/eclipse/src/styles/globals.css"
else
echo "File not found at expected location"
fd 'globals.css' 2>/dev/null | head -5
fiRepository: prisma/web
Length of output: 1016
🏁 Script executed:
#!/bin/bash
echo "== Searching for `@apply` directives in CSS files =="
rg -n --type=css '@apply' . 2>/dev/null | head -30
echo ""
echo "== Tailwind config files =="
fd -HI '(tailwind|postcss)\.config\.(js|ts|mjs|cjs)' 2>/dev/null | head -10Repository: prisma/web
Length of output: 1482
🏁 Script executed:
#!/bin/bash
echo "== All JSON/JSONC files that might be Biome config =="
find . -maxdepth 2 -type f \( -name '*.json' -o -name '*.jsonc' \) | grep -E '(biome|config)' | head -20Repository: prisma/web
Length of output: 136
🏁 Script executed:
cat ./biome.jsonRepository: prisma/web
Length of output: 1828
🏁 Script executed:
#!/bin/bash
echo "== Checking if packages/eclipse/src/styles/globals.css is ignored by Biome =="
# Check for ignore patterns in biome.json
rg -A5 -B5 'ignore|exclude|include' ./biome.json || echo "No ignore/exclude patterns found in basic search"
echo ""
echo "== PostCSS config for packages/eclipse =="
if [ -f "packages/eclipse/postcss.config.mjs" ]; then
cat packages/eclipse/postcss.config.mjs
fiRepository: prisma/web
Length of output: 293
🏁 Script executed:
#!/bin/bash
echo "== Tailwind config for packages/eclipse =="
fd 'tailwind\.config\.(js|ts|mjs|cjs)' packages/eclipse/ 2>/dev/null | head -5
echo ""
echo "== Checking package.json for packages/eclipse dependencies =="
if [ -f "packages/eclipse/package.json" ]; then
jq '.devDependencies, .dependencies | select(. != null) | keys[]' packages/eclipse/package.json | grep -E '(tailwind|postcss|biome)' || echo "Filtered output"
fiRepository: prisma/web
Length of output: 213
Biome CSS linter cannot parse Tailwind @apply directives—this will block CI.
Lines 377, 381, 385, and 389 use @apply, a Tailwind extension that Biome's standard CSS parser doesn't recognize. Biome's CSS linter is enabled globally in biome.json with no file-specific overrides, so these lines will fail validation in CI.
Options:
- Add an ignore pattern to
biome.jsonto excludepackages/eclipse/src/styles/globals.cssfrom CSS linting. - Move the
@applydeclarations to plain CSS properties or use Tailwind's@layerdirective to work within standard CSS. - Configure Biome's CSS parser to handle PostCSS/Tailwind syntax if supported in your version.
🧰 Tools
🪛 Biome (2.4.4)
[error] 377-377: Tailwind-specific syntax is disabled.
(parse)
[error] 381-381: Tailwind-specific syntax is disabled.
(parse)
[error] 385-385: Tailwind-specific syntax is disabled.
(parse)
[error] 389-389: Tailwind-specific syntax is disabled.
(parse)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/eclipse/src/styles/globals.css` around lines 376 - 389, The Biome
CSS linter fails on Tailwind `@apply` in packages/eclipse/src/styles/globals.css
(see selectors input[type="file"], input[type="file"]:valid,
input[type="file"]:invalid, and input[type="file"]::file-selector-button); to
fix, update the Biome configuration to exclude this file from CSS linting by
adding an ignore/exclude pattern for packages/eclipse/src/styles/globals.css in
biome.json so the Tailwind `@apply` directives are not parsed by Biome, or
alternatively convert those `@apply` usages in the listed selectors into
equivalent plain CSS properties if you prefer to keep the file linted.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/eclipse/GETTING_STARTED.md`:
- Line 203: The documentation examples still use the deprecated radius token
name "rounded-high" (e.g., the element with className "p-6 bg-background-error
rounded-high border border-stroke-error"); update those occurrences to the new
token "rounded-square-high" everywhere in the GETTING_STARTED.md examples
(including the other similar examples that reference rounded-high) so the
semantic examples match the renamed token.
In `@packages/eclipse/src/styles/globals.css`:
- Line 53: The CSS variable --font-mono is inconsistent with the JS token export
typography.fontFamily.monospace; update the globals.css value for --font-mono to
match the exported token (typography.fontFamily.monospace) so consumers get the
same monospace font from CSS vars and JS tokens, or alternatively update the
tokens/index.ts export to match the intended CSS value—ensure you change either
the CSS var (--font-mono) or the exported symbol
(typography.fontFamily.monospace) so both strings are identical.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e17f24bd-5359-44d5-be51-74b832a2171b
📒 Files selected for processing (6)
apps/docs/src/components/eclipse-showcase.tsxapps/eclipse/content/design-system/index.mdxapps/eclipse/src/components/eclipse-showcase.tsxpackages/eclipse/GETTING_STARTED.mdpackages/eclipse/TOKENS.mdpackages/eclipse/src/styles/globals.css
💤 Files with no reviewable changes (1)
- packages/eclipse/TOKENS.md
✅ Files skipped from review due to trivial changes (2)
- apps/eclipse/src/components/eclipse-showcase.tsx
- apps/docs/src/components/eclipse-showcase.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/components/eclipse-showcase.tsx (1)
190-200:⚠️ Potential issue | 🟡 MinorUpdate the border radius token at line 190 to match the new naming convention.
rounded-lowshould berounded-square-lowto align with the token rename migration and maintain consistency with the adjacent radius tokens (rounded-square,rounded-square-high) shown in the same section.Suggested patch
- <div className="px-6 py-4 bg-background-orm rounded-low border border-stroke-orm"> + <div className="px-6 py-4 bg-background-orm rounded-square-low border border-stroke-orm">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/docs/src/components/eclipse-showcase.tsx` around lines 190 - 200, Replace the outdated border-radius token `rounded-low` with the new token `rounded-square-low` in the JSX element that renders the radius example (the div using className with "px-6 py-4 bg-background-orm rounded-low border border-stroke-orm") so it matches the neighboring tokens `rounded-square` and `rounded-square-high` and follows the new naming convention.
♻️ Duplicate comments (2)
apps/eclipse/src/components/eclipse-showcase.tsx (1)
190-200:⚠️ Potential issue | 🟡 MinorSame radius token gap exists here (
rounded-lownot migrated).This file has the same incomplete rename in the Border Radius example;
rounded-lowshould be updated torounded-square-lowfor consistency with the new token namespace.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/eclipse/src/components/eclipse-showcase.tsx` around lines 190 - 200, Update the incomplete radius token rename in the Border Radius example by replacing the remaining "rounded-low" class with the new token name "rounded-square-low" so it matches the other migrated tokens; locate the div that contains <span>Low (3px)</span> (in the Eclipse showcase component) and change its className from "px-6 py-4 bg-background-orm rounded-low border border-stroke-orm" to use "rounded-square-low" instead.packages/eclipse/src/styles/globals.css (1)
352-365:⚠️ Potential issue | 🟠 Major
@applyin file-input rules is still failing Biome parsing (CI risk).Biome reports parse errors on these
@applylines, so this remains a lint blocker. Please either exclude this file from Biome CSS parsing or replace these@applyusages with equivalent plain CSS declarations.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/globals.css` around lines 352 - 365, Biome is failing to parse the `@apply` statements in the file-input rules, causing CI lint errors; either remove this file from Biome CSS parsing or replace each `@apply` usage in the selectors input[type="file"], input[type="file"]:valid, input[type="file"]:invalid and input[type="file"]::file-selector-button with equivalent plain CSS properties (expand the utility classes used in those `@apply` lines into their concrete CSS declarations) so the stylesheet no longer contains `@apply` statements that Biome can't parse. Ensure you update the Biome config if choosing to exclude the file or fully expand all `@apply` instances in the mentioned selectors to resolve the lint failure.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/navigation-menu.tsx`:
- Around line 68-70: In the NavigationMenu component update the tailwind/class
strings so the undefined tokens are replaced: change "shadow-drop-high" to the
defined "shadow-box-high" and replace any use of "rounded-high" with
"rounded-square-high" (the two class strings inside the array where mobileOpen
is used) to avoid silent styling regressions; ensure both occurrences in the
element class list that includes "transition-navbar max-w-7xl w-full mx-auto
py-3 px-6 ... shadow-drop-high bg-background-neutral-weaker rounded-square-high
..." and the mobile override branch that contains "py-7 px-10 rounded-none
md:py-3! md:px-6! md:rounded-high" are updated accordingly.
---
Outside diff comments:
In `@apps/docs/src/components/eclipse-showcase.tsx`:
- Around line 190-200: Replace the outdated border-radius token `rounded-low`
with the new token `rounded-square-low` in the JSX element that renders the
radius example (the div using className with "px-6 py-4 bg-background-orm
rounded-low border border-stroke-orm") so it matches the neighboring tokens
`rounded-square` and `rounded-square-high` and follows the new naming
convention.
---
Duplicate comments:
In `@apps/eclipse/src/components/eclipse-showcase.tsx`:
- Around line 190-200: Update the incomplete radius token rename in the Border
Radius example by replacing the remaining "rounded-low" class with the new token
name "rounded-square-low" so it matches the other migrated tokens; locate the
div that contains <span>Low (3px)</span> (in the Eclipse showcase component) and
change its className from "px-6 py-4 bg-background-orm rounded-low border
border-stroke-orm" to use "rounded-square-low" instead.
In `@packages/eclipse/src/styles/globals.css`:
- Around line 352-365: Biome is failing to parse the `@apply` statements in the
file-input rules, causing CI lint errors; either remove this file from Biome CSS
parsing or replace each `@apply` usage in the selectors input[type="file"],
input[type="file"]:valid, input[type="file"]:invalid and
input[type="file"]::file-selector-button with equivalent plain CSS properties
(expand the utility classes used in those `@apply` lines into their concrete CSS
declarations) so the stylesheet no longer contains `@apply` statements that Biome
can't parse. Ensure you update the Biome config if choosing to exclude the file
or fully expand all `@apply` instances in the mentioned selectors to resolve the
lint failure.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d6b314e6-0c38-4823-abd0-88b5d7d73875
📒 Files selected for processing (9)
apps/docs/src/components/eclipse-showcase.tsxapps/eclipse/src/components/eclipse-showcase.tsxpackages/eclipse/GETTING_STARTED.mdpackages/eclipse/src/components/input.tsxpackages/eclipse/src/components/statistic.tsxpackages/eclipse/src/styles/fonts.csspackages/eclipse/src/styles/globals.csspackages/eclipse/src/tokens/index.tspackages/ui/src/components/navigation-menu.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/eclipse/src/components/statistic.tsx
- packages/eclipse/GETTING_STARTED.md
- packages/eclipse/src/styles/fonts.css
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/eclipse/GETTING_STARTED.md (1)
236-283:⚠️ Potential issue | 🟠 MajorThe documented Card API doesn't match the actual implementation.
This example shows a Card component with CVA-based
variantandpaddingprops, usingrounded-square-highas the base radius. However, the actual Card implementation inpackages/eclipse/src/components/card.tsxhas a different API:Documented example shows:
- Props:
variant(default, elevated) andpadding(sm, md, lg)- Base class:
rounded-square-high- Configurable padding:
p-4,p-6,p-12Actual implementation has:
- Props: only
active(boolean)- Base class:
rounded-square- Fixed padding:
p-4only- No CVA variant system
This discrepancy will mislead developers who follow this example expecting the Card component to accept
variantandpaddingprops.Recommendation
Either:
- Update the example to use a different component name (e.g.,
CustomCard) to clarify this is a custom implementation pattern, not the actual Eclipse Card component API, or- Update the actual Card component implementation to match this documented API
As per context from
packages/eclipse/src/components/card.tsx: The actual Card component usesrounded-square, has fixedp-4padding, accepts only anactiveprop, and does not use CVA for variants.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/GETTING_STARTED.md` around lines 236 - 283, The documented Card example conflicts with the real Card component API (real Card only has active, rounded-square, p-4), so update the docs to present this as a custom example: rename the example component and exports from Card to CustomCard (update Card.displayName -> CustomCard), clarify in the surrounding text that this is a pattern for creating a custom component, and keep the cva usage and cardVariants/CustomCard props (variant, padding) intact so readers won’t expect the actual Card implementation to accept those props; alternatively, if you choose to change the implementation instead, update the component named Card in the source to implement cardVariants, accept VariantProps (variant, padding) and use rounded-square-high and p-4|p-6|p-12 as in the example (ensure export and Card.displayName remain consistent).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/eclipse/TOKENS.md`:
- Around line 239-244: The exported border radius token names in
packages/eclipse/src/tokens/index.ts (e.g., borderRadius.low and
borderRadius.high) do not match the documented token names in TOKENS.md
(rounded-square-low and rounded-square-high); update the TypeScript exports in
the tokens index so the borderRadius object uses the documented keys (e.g.,
square-low / square-high or rounded-square-low / rounded-square-high to match
the doc) and update any re-exports that reference borderRadius.low/high to the
new keys, or alternatively update TOKENS.md to reflect the existing export
names—ensure the symbols borderRadius, borderRadius.low, and borderRadius.high
(or their new names) are consistent between code and documentation.
- Around line 248-252: The exported blur token names in the tokens index are
wrong: replace the TypeScript export keys `"background-low"`, `background`, and
`"background-high"` in the tokens index (the exports around the blur token
block) with the documented and CSS names `blur-low`, `blur`, and `blur-high` so
they match TOKENS.md and globals.css; update any related export object
keys/aliases in the same file (tokens index) to use these exact identifiers so
autocompletion and component usages like `backdrop-blur-low` resolve correctly.
---
Outside diff comments:
In `@packages/eclipse/GETTING_STARTED.md`:
- Around line 236-283: The documented Card example conflicts with the real Card
component API (real Card only has active, rounded-square, p-4), so update the
docs to present this as a custom example: rename the example component and
exports from Card to CustomCard (update Card.displayName -> CustomCard), clarify
in the surrounding text that this is a pattern for creating a custom component,
and keep the cva usage and cardVariants/CustomCard props (variant, padding)
intact so readers won’t expect the actual Card implementation to accept those
props; alternatively, if you choose to change the implementation instead, update
the component named Card in the source to implement cardVariants, accept
VariantProps (variant, padding) and use rounded-square-high and p-4|p-6|p-12 as
in the example (ensure export and Card.displayName remain consistent).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e3603df0-8008-46de-9933-81e01f6efc5c
📒 Files selected for processing (7)
apps/eclipse/content/design-system/atoms/input.mdxapps/eclipse/content/design-system/index.mdxpackages/eclipse/GETTING_STARTED.mdpackages/eclipse/TOKENS.mdpackages/eclipse/src/tokens/index.tspackages/ui/src/components/navigation-menu.tsxpackages/ui/src/components/web-navigation.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/eclipse/content/design-system/atoms/input.mdx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/eclipse/content/design-system/index.mdx
- packages/eclipse/src/tokens/index.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/eclipse/src/styles/globals.css`:
- Around line 328-333: The CSS custom properties --font-weight-normal,
--font-weight-medium, --font-weight-semibold, --font-weight-bold, and
--font-weight-ultra-bold declared under the .dark selector are unused; either
remove these unused variables or integrate them into the design system so they
are applied. To fix, either delete those --font-weight-* declarations from .dark
in packages/eclipse/src/styles/globals.css, or move/duplicate them into the
theme generation (e.g., the `@theme` block or wherever font-weight tokens are
defined) and ensure components reference those variables (or corresponding
utility classes) so the dark-mode weights are actually consumed. Ensure
references to .dark and the variable names above are updated accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: cad180d4-9cb3-4dc1-9e7b-3543f675cc5f
📒 Files selected for processing (4)
packages/eclipse/TOKENS.mdpackages/eclipse/src/components/tooltip.tsxpackages/eclipse/src/styles/globals.csspackages/eclipse/src/tokens/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/eclipse/src/components/tooltip.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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
2 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.
Remove redundant hand-written CSS utilities — Tailwind v4 auto-generates bg-, text-, border-, and hover: utilities from @theme --color-* variables, so the
manual declarations in @layer utilities were unnecessary
Test plan
Summary by CodeRabbit