## Bug: `ease-card-stat` number font size hardcoded, ignores `--ease-text-base` custom property

[Pcmhacker-piro]

Bug: ease-card-stat number font size hardcoded, ignores --ease-text-base custom property

Description

The ease-card-stat variant displays a large statistical number with a hardcoded font-size: 2.5rem (40px). When users customize the base text size via --ease-text-base, the stat card number does not scale proportionally, breaking the visual hierarchy in custom-themed projects.

Steps to Reproduce

1. Link EaseMotion CSS v1.0.0
2. Customize the base text size on the page:

   :root {
     --ease-text-base: 18px; /* Default is 16px */
   }

3. Create a stats card:

   <div class="ease-card ease-card-stat">
     <div class="ease-card-body">
       <p class="ease-card-title">Total Users</p>
       <p class="ease-card-stat-value">12,847</p>
     </div>
   </div>

4. Compare the stat value font size to body text

Expected Behavior

The stat value font size should scale relative to --ease-text-base so that the visual proportion is maintained across theme customizations.

Actual Behavior

The .ease-card-stat-value (or equivalent class for the large number) has font-size: 2.5rem hardcoded in components/cards.css. When --ease-text-base is changed from 16px to 18px, body text grows by 12.5% but the stat number remains at 40px (2.5rem × 16px base). This causes the stat number to appear proportionally smaller relative to surrounding text than the designer intended, breaking the component's visual hierarchy.

Implementation Hints

The issue is in components/cards.css, specifically the stat card variant:

/* Current — hardcoded font-size */
.ease-card-stat .ease-card-stat-value {
  font-size: 2.5rem; /* 40px — does not scale */
  font-weight: 700;
  line-height: 1.2;
  color: var(--ease-primary, #6366f1);
}

.ease-card-stat .ease-card-stat-label {
  font-size: 0.875rem;
  color: var(--ease-muted, #64748b);
}

The fix should use calc() with the --ease-text-base custom property:

/* Fixed — scales with base text size */
:root {
  --ease-text-base: 16px;
  --ease-stat-scale: 2.5; /* Multiplier for stat values */
}

.ease-card-stat .ease-card-stat-value {
  font-size: calc(var(--ease-text-base, 16px) * var(--ease-stat-scale, 2.5));
  font-weight: 700;
  line-height: 1.2;
  color: var(--ease-primary, #6366f1);
}

.ease-card-stat .ease-card-stat-label {
  font-size: calc(var(--ease-text-base, 16px) * 0.875);
  color: var(--ease-muted, #64748b);
}

Alternatively, use em units relative to the card's inherited font size:

.ease-card-stat {
  font-size: var(--ease-text-base, 16px);
}

.ease-card-stat .ease-card-stat-value {
  font-size: 2.5em; /* Relative to card's font-size which inherits --ease-text-base */
  font-weight: 700;
  line-height: 1.2;
}

The em approach is simpler and more maintainable — by setting font-size: var(--ease-text-base) on the card container, all child sizes automatically scale via em units.

Affected Files

• components/cards.css — .ease-card-stat-value and .ease-card-stat-label hardcoded rem values, should scale with --ease-text-base

Labels

type:bug, level:intermediate, GSSoC-26

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones

🕑 Inactivity rule: Issues with no progress for 5 days will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡