Score-big numeric

Tier-colored 22px mono numeric used on Sessions and History pages where a single big number is the focus of the row. Color resolves to the tier-aware --color-score-(below|approaching|passing)-text family.

Preview

below

1.8

approaching

3.2

passing

4.5

Source

apps/docs/app/recipes/score-big/recipe.tsx

const TIERS = [
  { score: '1.8', tier: 'below', tone: 'var(--color-score-below-text)' },
  { score: '3.2', tier: 'approaching', tone: 'var(--color-score-approaching-text)' },
  { score: '4.5', tier: 'passing', tone: 'var(--color-score-passing-text)' },
];

export default function ScoreBigRecipe() {
  return (
    <div className="border-stroke bg-surface flex flex-wrap items-baseline gap-10 rounded-2xl border p-6">
      {TIERS.map(({ score, tier, tone }) => (
        <figure key={tier} className="flex flex-col gap-1.5">
          <figcaption className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            {tier}
          </figcaption>
          <span
            className="font-mono text-[22px] leading-none font-bold tabular-nums"
            style={{ color: tone }}
          >
            {score}
          </span>
        </figure>
      ))}
    </div>
  );
}

const TIERS = [
  { score: '1.8', tier: 'below', tone: 'var(--color-score-below-text)' },
  { score: '3.2', tier: 'approaching', tone: 'var(--color-score-approaching-text)' },
  { score: '4.5', tier: 'passing', tone: 'var(--color-score-passing-text)' },
];

export default function ScoreBigRecipe() {
  return (
    <div className="border-stroke bg-surface flex flex-wrap items-baseline gap-10 rounded-2xl border p-6">
      {TIERS.map(({ score, tier, tone }) => (
        <figure key={tier} className="flex flex-col gap-1.5">
          <figcaption className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
            {tier}
          </figcaption>
          <span
            className="font-mono text-[22px] leading-none font-bold tabular-nums"
            style={{ color: tone }}
          >
            {score}
          </span>
        </figure>
      ))}
    </div>
  );
}