CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-11-02 17:03:43 -07:00
1 parent 63d5d21ae0
commit e808fe70bf
162 files changed
+1385 -1377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(admin)/monitor/MonitorPageContent.tsx
+27 -27
View File
@@ -13,10 +13,10 @@ export default function MonitorPageContent() {
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
<Top folderTop={false} />
<main className="container mx-auto px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)]">
<main className="container mx-auto px-[var(--space-600)] py-[var(--space-800)]">
<div className="max-w-6xl mx-auto">
<div className="mb-[var(--spacing-scale-032)]">
<h1 className="text-4xl font-bold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-016)]">
<div className="mb-[var(--space-800)]">
<h1 className="text-4xl font-bold text-[var(--color-content-default-primary)] mb-[var(--space-400)]">
{p.title}
</h1>
<p className="text-[var(--font-size-body-large)] text-[var(--color-content-default-secondary)]">
@@ -24,12 +24,12 @@ export default function MonitorPageContent() {
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-scale-032)] mb-[var(--spacing-scale-032)]">
<div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--space-800)] mb-[var(--space-800)]">
<div className="p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.performanceTargets.title}
</h2>
<div className="space-y-[var(--spacing-scale-012)]">
<div className="space-y-[var(--space-300)]">
<div className="flex justify-between items-center">
<span className="text-[var(--font-size-body-medium)]">
{p.performanceTargets.loadTime}
@@ -73,42 +73,42 @@ export default function MonitorPageContent() {
</div>
</div>
<div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
<div className="p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.optimizationStatus.title}
</h2>
<div className="space-y-[var(--spacing-scale-012)]">
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="space-y-[var(--space-300)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.codeSplitting}
</span>
</div>
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.reactMemo}
</span>
</div>
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.imageOptimization}
</span>
</div>
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.fontPreloading}
</span>
</div>
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.bundleAnalysis}
</span>
</div>
<div className="flex items-center gap-[var(--spacing-scale-008)]">
<div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.errorBoundaries}
@@ -120,40 +120,40 @@ export default function MonitorPageContent() {
<WebVitalsDashboard />
<div className="mt-[var(--spacing-scale-032)] p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
<div className="mt-[var(--space-800)] p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.title}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-016)]">
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--space-400)]">
<div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
<h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.bundleAnalyze.title}
</h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
<code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.bundleAnalyze.command}
</code>
</div>
<div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
<h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.e2ePerformance.title}
</h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
<code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.e2ePerformance.command}
</code>
</div>
<div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
<h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.lhciDesktop.title}
</h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
<code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.lhciDesktop.command}
</code>
</div>
<div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
<h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.performanceBudget.title}
</h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
<code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.performanceBudget.command}
</code>
</div>