Skip to content

feat: DR-6919 Statistic component #7553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlagn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: DR-6919 Statistic component #7553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/eclipse/content/design-system/molecules/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"tabs",
"typetable",
"table",
"statistic",
"steps"
]
}
252 changes: 252 additions & 0 deletions apps/eclipse/content/design-system/molecules/statistic.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
---
title: Statistic
description: A component for displaying key metrics and statistics with optional badges and measurement units.
---

import Statistic from "@prisma-docs/eclipse/components/statistic";

### Usage

**Basic Statistic**

```tsx
import Statistic from "@prisma-docs/eclipse/components/statistic";

export function BasicStat() {
return <Statistic title="Total Users" value={1234} />;
}
```

**Live Example:**

<div className="my-4">
<Statistic title="Total Users" value={1234} />
</div>

**With Measurement Unit**

```tsx
import Statistic from "@prisma-docs/eclipse/components/statistic";

export function StatWithMeasure() {
return <Statistic title="Response Time" value={42} measure="ms" />;
}
```

**Live Example:**

<div className="my-4">
<Statistic title="Response Time" value={42} measure="ms" />
</div>

**With Badge**

```tsx
import Statistic from "@prisma-docs/eclipse/components/statistic";

export function StatWithBadge() {
return (
<Statistic
title="API Status"
value="99.9"
measure="%"
badge="Live"
badgeColor="success"
/>
);
}
```

**Live Example:**

<div className="my-4">
<Statistic
title="API Status"
value="99.9"
measure="%"
badge="Live"
badgeColor="success"
/>
</div>

**Multiple Statistics Grid**

```tsx
import Statistic from "@prisma-docs/eclipse/components/statistic";

export function StatsGrid() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
<Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
<Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
</div>
);
}
```

**Live Example:**

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
<Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
<Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
<Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
</div>

**Different Badge Colors**

```tsx
import Statistic from "@prisma-docs/eclipse/components/statistic";

export function ColoredBadges() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
<Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
<Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
<Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
</div>
);
}
```

**Live Example:**

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
<Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
<Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
<Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
</div>

### Statistic Props

- `title` - The label for the statistic (default: `"Statistic"`)
- `value` - The numeric or string value to display (default: `0`)
- `measure` - The unit of measurement (e.g., "ms", "%", "GB") (optional)
- `badge` - Badge content to display next to the title (optional)
- `badgeColor` - The color variant for the badge: `"neutral"`, `"ppg"`, `"orm"`, `"error"`, `"success"`, `"warning"` (default: `"ppg"`)

### Features

- ✅ Large, bold typography for values
- ✅ Optional measurement units
- ✅ Integrated badge support with color variants
- ✅ Dashed border design for visual emphasis
- ✅ Responsive and flexible layout
- ✅ Eclipse design system tokens
- ✅ Supports both numeric and string values
Comment on lines +133 to +138
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

"Dashed border design" feature doesn't exist in the component.

Line 135 lists ✅ Dashed border design for visual emphasis as a feature. The actual Statistic component (statistic.tsx) has no border styling whatsoever — no border-*, border-dashed, or rounded-* classes. This appears to be a leftover from an earlier design iteration.

🔧 Proposed fix 
-  - ✅ Dashed border design for visual emphasis
📝 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.

Suggested change
- ✅ Optional measurement units
- ✅ Integrated badge support with color variants
- ✅ Dashed border design for visual emphasis
- ✅ Responsive and flexible layout
- ✅ Eclipse design system tokens
- ✅ Supports both numeric and string values
- ✅ Optional measurement units
- ✅ Integrated badge support with color variants
- ✅ Responsive and flexible layout
- ✅ Eclipse design system tokens
- ✅ Supports both numeric and string values
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 133
- 138, The MDX checklist incorrectly claims a "Dashed border design" feature
that doesn't exist; remove the "✅ Dashed border design for visual emphasis" line
from apps/eclipse/content/design-system/molecules/statistic.mdx, or if the
dashed border is intended, add appropriate border classes (e.g., border,
border-dashed, rounded-*) to the Statistic component in statistic.tsx (the
Statistic component) and update its docs to reflect the new prop/styling—pick
one action and apply it so the docs and the Statistic implementation stay in
sync.


### Best Practices

- Use **concise titles** that clearly describe what the statistic represents
- Use **badges** to provide context like status, trends, or time periods
- Keep **values** short and readable (use abbreviated formats like "1.2M" for large numbers)
- Use **measurement units** consistently across related statistics
- Group related statistics in a grid layout for easy comparison
- Choose **badge colors** that match the semantic meaning:
- `success` - Positive metrics, goals achieved
- `warning` - Metrics requiring attention
- `error` - Critical issues or problems
- `ppg` - Prisma Pulse/Accelerate specific metrics
- `orm` - Prisma ORM specific metrics
- `neutral` - General information

### Common Use Cases

**Performance Metrics**
```tsx
<Statistic title="Response Time" value={42} measure="ms" badge="Fast" badgeColor="success" />
<Statistic title="Throughput" value="1.2K" measure="req/s" badge="Peak" badgeColor="ppg" />
```

**Database Statistics**
```tsx
<Statistic title="Total Records" value="2.4M" badge="Growing" badgeColor="neutral" />
<Statistic title="Query Speed" value={15} measure="ms" badge="Optimized" badgeColor="success" />
```

**Usage Analytics**
```tsx
<Statistic title="Active Users" value={1247} badge="Online" badgeColor="success" />
<Statistic title="Daily Queries" value="45.2K" badge="Today" badgeColor="ppg" />
```

**Health Monitoring**
```tsx
<Statistic title="Uptime" value={99.99} measure="%" badge="Healthy" badgeColor="success" />
<Statistic title="Error Rate" value={0.01} measure="%" badge="Low" badgeColor="warning" />
```

**Resource Usage**
```tsx
<Statistic title="Memory Usage" value={67} measure="%" badge="Normal" badgeColor="neutral" />
<Statistic title="CPU Load" value={23} measure="%" badge="Low" badgeColor="success" />
```

### Typography & Spacing

The Statistic component uses:
- **Title**: Uppercase, extra-small font (text-xs), gray-400 color
- **Value**: Extra-large, bold font (text-4xl font-black)
- **Measure**: Large font (text-lg), gray-500 color
- **Spacing**: 6px horizontal, 5px vertical padding
- **Border**: 2px dashed purple-400 border with rounded corners

### Layout Tips

**Single Column (Mobile)**
```tsx
<div className="space-y-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
</div>
```

**Two Column Grid**
```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
<Statistic title="Metric 4" value={400} />
</div>
```

**Three Column Grid**
```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
</div>
```

**Four Column Grid**
```tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
<Statistic title="Metric 4" value={400} />
</div>
Comment on lines +205 to +232
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Hyphenate the compound-adjective section headings.

Static analysis flags "Two Column Grid", "Three Column Grid", and "Four Column Grid" as needing hyphens when used as compound adjectives modifying a noun.

🔧 Proposed fix 
-**Two Column Grid**
+**Two-Column Grid**
 ...
-**Three Column Grid**
+**Three-Column Grid**
 ...
-**Four Column Grid**
+**Four-Column Grid**
📝 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.

Suggested change
**Two Column Grid**
```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
<Statistic title="Metric 4" value={400} />
</div>
```
**Three Column Grid**
```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
</div>
```
**Four Column Grid**
```tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<Statistic title="Metric 1" value={100} />
<Statistic title="Metric 2" value={200} />
<Statistic title="Metric 3" value={300} />
<Statistic title="Metric 4" value={400} />
</div>
**Two-Column Grid**
🧰 Tools
🪛 LanguageTool

[grammar] ~206-~206: Use a hyphen to join words.
Context: ...tric 2" value={200} /> **Two Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

[grammar] ~216-~216: Use a hyphen to join words.
Context: ...ic 4" value={400} /> **Three Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

[grammar] ~225-~225: Use a hyphen to join words.
Context: ...ric 3" value={300} /> **Four Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 205
- 232, Update the three section headings that are compound adjectives by adding
hyphens: change the strings "Two Column Grid", "Three Column Grid", and "Four
Column Grid" to "Two-Column Grid", "Three-Column Grid", and "Four-Column Grid"
respectively in the statistic.mdx file so static analysis no longer flags them.

```

### Accessibility

- Clear visual hierarchy with distinct typography sizes
- High contrast text colors for readability
- Semantic HTML structure
- Badge colors provide both visual and textual information
- Responsive design works across all screen sizes
- Title text is uppercase with tracking for improved legibility

### Design Tokens

The component uses Eclipse design tokens:
- Border: `border-purple-400` with `border-2 border-dashed`
- Radius: `rounded-lg`
- Title: `text-xs font-semibold tracking-widest text-gray-400 uppercase`
- Value: `text-4xl font-black text-gray-900`
- Measure: `text-lg text-gray-500`
- Spacing: `px-6 py-5`
Comment on lines +187 to +252
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Typography & Spacing and Design Tokens sections don't match the actual component.

These sections describe a component that was never shipped. The actual statistic.tsx is simpler — no border, no padding, and different font sizes. Key mismatches:

Doc says Actual
text-xs (title) text-2xs
text-4xl font-black (value) text-2xl font-bold
text-lg (measure) text-sm
px-6 py-5 spacing no padding
border-2 border-dashed border-purple-400 rounded-lg no border
tracking-widest tracking-[1.1px]
text-gray-400 / text-gray-500 / text-gray-900 Eclipse tokens (text-foreground-neutral-weak, etc.)

Consumers who rely on the Design Tokens section to customise or override the component will be working from incorrect information.

🧰 Tools
🪛 LanguageTool

[grammar] ~206-~206: Use a hyphen to join words.
Context: ...tric 2" value={200} /> **Two Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

[grammar] ~216-~216: Use a hyphen to join words.
Context: ...ic 4" value={400} /> **Three Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

[grammar] ~225-~225: Use a hyphen to join words.
Context: ...ric 3" value={300} /> **Four Column Grid**tsx <div className="gri...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 187
- 252, The Typography & Spacing and Design Tokens sections in statistic.mdx are
inconsistent with the shipped Statistic component; update the MDX to reflect the
actual classes used in the implementation (check the Statistic React component
in statistic.tsx) — change Title to text-2xs with tracking-[1.1px] and the
appropriate Eclipse token (e.g., text-foreground-neutral-weak), Value to
text-2xl font-bold with its token, Measure to text-sm with its token, remove any
px-6 py-5 and border-2 border-dashed rounded-lg entries (document "no padding"
and "no border"), and replace the doc color names (text-gray-*) with the actual
token names used by the component so consumers can rely on correct tokens and
sizes.

1 change: 1 addition & 0 deletions packages/eclipse/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"./tokens": "./src/tokens/index.ts",
"./tokens/*": "./src/tokens/*",
"./styles/*": "./src/styles/*",
"./fonts/*": "./src/static/fonts/*",
"./postcss.config": "./postcss.config.mjs"
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion packages/eclipse/src/components/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface BadgeProps
/**
* The label text to display inside the badge
*/
label: string;
label: any;
}
Comment on lines 38 to 42
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Replace any with React.ReactNode for label.

Using any bypasses TypeScript entirely — at this call site the label renders inside a <span>, so React.ReactNode is the accurate, safe type. The JSDoc comment still says "label text", which is now doubly misleading.

🔧 Proposed fix 
  /**
-  * The label text to display inside the badge
+  * The content to display inside the badge
   */
-  label: any;
+  label: React.ReactNode;
📝 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.

Suggested change
/**
* The label text to display inside the badge
*/
label: string;
label: any;
}
/**
* The content to display inside the badge
*/
label: React.ReactNode;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/components/badge.tsx` around lines 38 - 42, The prop
type for label is currently declared as any; change it to React.ReactNode in the
badge props interface so the label can accept text, elements, or fragments
safely (replace the type for the label property from any to React.ReactNode).
Update the JSDoc above label (and any description that says "label text") to
reflect that it can be any renderable React node. Ensure you import React types
if needed (e.g., add React import or use the global JSX namespace) and keep the
prop name label in the Badge component signature unchanged.


/**
Expand Down
37 changes: 37 additions & 0 deletions packages/eclipse/src/components/statistic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Badge } from "./badge";

interface StatisticProps {
title?: string;
value?: string | number;
measure?: string;
badge?: React.ReactNode;
badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
}
Comment on lines +1 to +9
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Missing React import — React.ReactNode will fail TypeScript compilation.

React is not in scope. React.ReactNode on line 7 references the React namespace, which is not automatically available even with the new JSX transform (it only removes the JSX runtime import, not the namespace). Every other component in this package (e.g., badge.tsx) explicitly imports React. This will cause a Cannot find name 'React' compile error.

🐛 Proposed fix 
+import * as React from "react";
 import { Badge } from "./badge";

Alternatively, import only the type you need:

+import type { ReactNode } from "react";
 import { Badge } from "./badge";

 interface StatisticProps {
   ...
-  badge?: React.ReactNode;
+  badge?: ReactNode;
   ...
 }
📝 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.

Suggested change
import { Badge } from "./badge";
interface StatisticProps {
title?: string;
value?: string | number;
measure?: string;
badge?: React.ReactNode;
badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
}
import * as React from "react";
import { Badge } from "./badge";
interface StatisticProps {
title?: string;
value?: string | number;
measure?: string;
badge?: React.ReactNode;
badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
}
Suggested change
import { Badge } from "./badge";
interface StatisticProps {
title?: string;
value?: string | number;
measure?: string;
badge?: React.ReactNode;
badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
}
import type { ReactNode } from "react";
import { Badge } from "./badge";
interface StatisticProps {
title?: string;
value?: string | number;
measure?: string;
badge?: ReactNode;
badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/components/statistic.tsx` around lines 1 - 9, The file
uses React.ReactNode in the StatisticProps interface but never imports React,
causing a TypeScript error; add an import for React (or import the React type
only) at the top of the component file so the React namespace is in scope;
update the imports in packages/eclipse/src/components/statistic.tsx so the
StatisticProps interface (which references React.ReactNode) compiles correctly
(mirror how other components like badge.tsx import React).


export default function Statistic({
title = "Statistic",
value = 0,
measure = "",
badge = null,
badgeColor = "ppg",
}: StatisticProps) {
return (
<div className="relative">
{/* Title + Badge */}
<div className="flex items-center gap-3 mb-2">
<span className="text-2xs font-semibold text-foreground-neutral-weak uppercase tracking-[1.1px]">
{title}
</span>
{badge && <Badge color={badgeColor} label={badge} />}
</div>

{/* Value + Measure */}
<div className="flex items-baseline gap-2 leading-8">
<span className="text-2xl font-bold text-foreground-neutral font-mona-sans">
{value}
</span>
<span className="text-sm text-foreground-neutral-weak">{measure}</span>
</div>
</div>
);
}
Binary file added packages/eclipse/src/static/fonts/MonaSans-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/eclipse/src/static/fonts/MonaSans-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/eclipse/src/static/fonts/MonaSans-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
41 changes: 41 additions & 0 deletions packages/eclipse/src/styles/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/* Mona Sans Font Faces */

@font-face {
font-family: "Mona Sans";
src: url("../static/fonts/MonaSans-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Mona Sans";
src: url("../static/fonts/MonaSans-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Mona Sans";
src: url("../static/fonts/MonaSans-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Mona Sans";
src: url("../static/fonts/MonaSans-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Mona Sans";
src: url("../static/fonts/MonaSans-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
font-display: swap;
}
5 changes: 4 additions & 1 deletion packages/eclipse/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "tw-animate-css";
@import "./fonts.css";

@source "../components/**/*.tsx";
@source "../components/ui/**/*.tsx";
Expand Down Expand Up @@ -70,7 +71,9 @@
--blur-background-low: 16px;
--blur-background: 24px;
--blur-background-high: 40px;

--font-mona-sans:
"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
Comment on lines +74 to +76
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Unquoted font names will fail Stylelint — quote BlinkMacSystemFont, Roboto, and Arial.

Stylelint's value-keyword-case rule treats unquoted font-family identifiers as CSS keywords and requires lowercase. The simple fix is quoting them — note that "Segoe UI" and "Helvetica Neue" in the same line are already quoted. The rule flags these as hard errors, which will fail linting in CI.

🔧 Proposed fix 
-    --font-mona-sans:
-        "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        "Helvetica Neue", Arial, sans-serif;
+    --font-mona-sans:
+        "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
+        "Helvetica Neue", "Arial", sans-serif;
📝 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.

Suggested change
--font-mona-sans:
"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mona-sans:
"Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
"Helvetica Neue", "Arial", sans-serif;
🧰 Tools
🪛 Stylelint (17.3.0)

[error] 75-75: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)

(value-keyword-case)

[error] 75-75: Expected "Roboto" to be "roboto" (value-keyword-case)

(value-keyword-case)

[error] 76-76: Expected "Arial" to be "arial" (value-keyword-case)

(value-keyword-case)

🤖 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 74 - 76, The CSS custom
property --font-mona-sans contains unquoted font family identifiers that fail
Stylelint (BlinkMacSystemFont, Roboto, Arial); update the value of
--font-mona-sans so those font names are quoted (e.g., "BlinkMacSystemFont",
"Roboto", "Arial") to match the existing quoted entries ("Segoe UI", "Helvetica
Neue") and satisfy the value-keyword-case rule in the styles/globals.css
declaration.

/* Typography - Font Families */
--font-family-display: var(--font-mona-sans), Inter, sans-serif;
--font-family-sans-display: Inter, sans-serif;
Expand Down
Loading