feat: rename --font-cal to --font-heading + use Cal Sans UI #26064

pasqualevitiello · 2025-12-19T17:30:14Z

What does this PR do?

Standardizes typography across the app by switching body text to Cal Sans UI and renaming the heading font from --font-cal/font-cal to --font-heading/font-heading. Font loading is now centralized via @coss/ui/fonts for consistent usage and simpler setup.

Changes

Added shared fonts in @coss/ui/fonts (fontSans = Cal Sans UI variable, fontHeading = Cal Sans SemiBold)
Applied fontSans and fontHeading variables on body in app layout and _document; removed scattered local font imports
Renamed all font-cal usages to font-heading and updated related utilities (e.g., prose-h3:font-heading)
Updated !font-cal to font-heading! (Tailwind v4 syntax)
Removed redundant font-weight classes (font-semibold, font-medium, etc.) from elements with font-heading since the heading font is already semibold
Updated theme tokens to use --font-heading and aligned platform/global styles

Migration Guide

Replace class font-cal with font-heading and CSS var --font-cal with --font-heading
Replace !font-cal with font-heading! (Tailwind v4 important syntax)
Import fonts from @coss/ui/fonts and add ${fontSans.variable} ${fontHeading.variable} to the body class
Update any prose utilities from prose-h3:font-cal to prose-h3:font-heading
Remove font-weight classes from elements using font-heading (the font is already semibold)

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - internal font changes only.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Verify headings throughout the app render with the correct Cal Sans SemiBold font
Verify body text uses Cal Sans UI
Check that the Tailwind v4 important syntax (font-heading!) works correctly
Visually confirm no font-weight regressions after removing explicit weight classes

Human Review Checklist

Verify headings look correct without explicit font-semibold/font-medium classes (the heading font is inherently semibold)
Confirm font-heading! syntax works correctly in Tailwind v4
Check font loading works across web app and platform atoms

Link to Devin run: https://app.devin.ai/sessions/fb0be98a05a444bd9a71539f53701308
Requested by: pasquale@cal.com

vercel · 2025-12-19T17:30:28Z

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this Vercel project: cal-eu.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

vercel · 2025-12-19T18:12:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
cal-com-v2	Error		Jan 10, 2026 11:19pm

4 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
api-v2	Ignored	Preview	Jan 10, 2026 11:19pm
cal	Ignored		Jan 10, 2026 11:19pm
cal-companion	Ignored	Preview	Jan 10, 2026 11:19pm
cal-eu	Ignored		Jan 10, 2026 11:19pm

github-actions · 2025-12-27T00:26:21Z

This PR has been marked as stale due to inactivity. If you're still working on it or need any help, please let us know or update the PR to keep it active.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

vercel · 2026-01-07T13:16:03Z

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this Vercel project: cal.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

vercel · 2026-01-07T13:16:04Z

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this Vercel project: cal-companion.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

cubic-dev-ai

4 issues found across 74 files

Prompt for AI agents (all issues)


Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/app/layout.tsx">

<violation number="1" location="apps/web/app/layout.tsx:109">
P1: Typo: Extra trailing double quote `"` inside the template literal will be included as part of the className, breaking the `antialiased` class application.</violation>
</file>

<file name="packages/platform/atoms/globals.css">

<violation number="1" location="packages/platform/atoms/globals.css:245">
P2: Duplicate CSS variable declaration. The line `--font-cal: var(--font-cal);` was changed to `--font-heading: var(--font-heading);`, but `--font-heading` is already declared on the preceding line. This creates a redundant duplicate that should be removed.</violation>
</file>

<file name="packages/coss-ui/src/fonts/README.md">

<violation number="1" location="packages/coss-ui/src/fonts/README.md:26">
P2: Documentation incorrectly states `fontHeading` uses "Cal Sans Regular font" but the implementation uses `CalSans-SemiBold.woff2`. Should be "Cal Sans SemiBold font" to match the actual font file.</violation>

<violation number="2" location="packages/coss-ui/src/fonts/README.md:30">
P2: Incorrect directory path in documentation. Should be `packages/coss-ui/src/fonts/` instead of `packages/ui/src/fonts/` to match the actual file location.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

cubic-dev-ai · 2026-01-07T13:59:13Z

apps/web/app/layout.tsx

-      </head>
      <body
-        className="dark:bg-default bg-subtle antialiased"
+        className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased"`}


P1: Typo: Extra trailing double quote " inside the template literal will be included as part of the className, breaking the antialiased class application.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/app/layout.tsx, line 109: <comment>Typo: Extra trailing double quote `"` inside the template literal will be included as part of the className, breaking the `antialiased` class application.</comment> <file context> @@ -114,16 +105,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo - </head> <body - className="dark:bg-default bg-subtle antialiased" + className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased"`} style={ isEmbed </file context>

Suggested change

className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased"`}

className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}

✅ Addressed in a2123cb

cubic-dev-ai · 2026-01-07T13:59:13Z

packages/platform/atoms/globals.css

    --radius: var(--radius);
    --font-heading: var(--font-heading);
-    --font-cal: var(--font-cal);
+    --font-heading: var(--font-heading);


P2: Duplicate CSS variable declaration. The line --font-cal: var(--font-cal); was changed to --font-heading: var(--font-heading);, but --font-heading is already declared on the preceding line. This creates a redundant duplicate that should be removed.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/platform/atoms/globals.css, line 245: <comment>Duplicate CSS variable declaration. The line `--font-cal: var(--font-cal);` was changed to `--font-heading: var(--font-heading);`, but `--font-heading` is already declared on the preceding line. This creates a redundant duplicate that should be removed.</comment> <file context> @@ -242,7 +242,7 @@ --radius: var(--radius); --font-heading: var(--font-heading); - --font-cal: var(--font-cal); + --font-heading: var(--font-heading); --shadow-dropdown: var(--shadow-dropdown); --shadow-switch-thumb: var(--shadow-switch-thumb); </file context>

✅ Addressed in a2123cb

cubic-dev-ai · 2026-01-07T13:59:13Z

packages/coss-ui/src/fonts/README.md

+
+## Adding New Fonts
+
+1. Place the font file in this directory (`packages/ui/src/fonts/`)


P2: Incorrect directory path in documentation. Should be packages/coss-ui/src/fonts/ instead of packages/ui/src/fonts/ to match the actual file location.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/coss-ui/src/fonts/README.md, line 30: <comment>Incorrect directory path in documentation. Should be `packages/coss-ui/src/fonts/` instead of `packages/ui/src/fonts/` to match the actual file location.</comment> <file context> @@ -0,0 +1,49 @@ + +## Adding New Fonts + +1. Place the font file in this directory (`packages/ui/src/fonts/`) +2. Add a new font configuration in `index.ts`: + </file context>

✅ Addressed in a2123cb

cubic-dev-ai · 2026-01-07T13:59:13Z

packages/coss-ui/src/fonts/README.md

+## Available Fonts
+
+- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes)
+- `fontHeading` - Cal Sans Regular font


P2: Documentation incorrectly states fontHeading uses "Cal Sans Regular font" but the implementation uses CalSans-SemiBold.woff2. Should be "Cal Sans SemiBold font" to match the actual font file.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/coss-ui/src/fonts/README.md, line 26: <comment>Documentation incorrectly states `fontHeading` uses "Cal Sans Regular font" but the implementation uses `CalSans-SemiBold.woff2`. Should be "Cal Sans SemiBold font" to match the actual font file.</comment> <file context> @@ -0,0 +1,49 @@ +## Available Fonts + +- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes) +- `fontHeading` - Cal Sans Regular font + +## Adding New Fonts </file context>

eunjae-lee

Overall it looks great in the app

Ryukemeister

test atoms, everything looks good!

…26064)" This reverts commit c380ea8.

…26064)" (#26759) Co-authored-by: Peer Richelsen <peeroke@gmail.com>

…6064) * feat: rename --font-cal to --font-heading + use Cal Sans UI * chore: remove font-weight from font-heading elements and CSS variables Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * chore: remove unneeded css vars * fix: cubic issues --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com> Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>

feat: rename --font-cal to --font-heading + use Cal Sans UI

abf2ce0

pull-request-size bot added the size/L label Dec 19, 2025

vercel bot deployed to Preview – dev December 19, 2025 18:30 View deployment

github-actions bot added the Stale label Dec 27, 2025

devin-ai-integration bot and others added 2 commits January 7, 2026 12:32

chore: merge main into feat/update-fonts

01c1964

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

chore: remove font-weight from font-heading elements and CSS variables

3b746b2

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

vercel bot deployed to Preview – dev January 7, 2026 12:42 View deployment

chore: remove unneeded css vars

0fdabad

vercel bot deployed to Preview – dev January 7, 2026 13:23 View deployment

PeerRich marked this pull request as ready for review January 7, 2026 13:45

PeerRich requested review from a team as code owners January 7, 2026 13:46

cubic-dev-ai bot reviewed Jan 7, 2026

View reviewed changes

fix: cubic issues

a2123cb

vercel bot had a problem deploying to Preview – cal-com-v2 January 7, 2026 14:24 Failure

vercel bot deployed to Preview – dev January 7, 2026 14:27 View deployment

github-actions bot removed the Stale label Jan 8, 2026

eunjae-lee approved these changes Jan 8, 2026

View reviewed changes

Ryukemeister approved these changes Jan 9, 2026

View reviewed changes

Merge branch 'main' into feat/update-fonts

14003c2

keithwillcode approved these changes Jan 9, 2026

View reviewed changes

graphite-app bot added the ready-for-e2e label Jan 9, 2026

keithwillcode enabled auto-merge (squash) January 9, 2026 10:18

keithwillcode merged commit c380ea8 into main Jan 9, 2026
68 of 70 checks passed

keithwillcode deleted the feat/update-fonts branch January 9, 2026 10:42

vercel bot had a problem deploying to Preview – dev January 11, 2026 00:04 Failure

keithwillcode added a commit that referenced this pull request Jan 12, 2026

revert: "feat: rename --font-cal to --font-heading + use Cal Sans UI (#…

439ab0d

…26064)" This reverts commit c380ea8.

PeerRich added a commit that referenced this pull request Jan 12, 2026

revert: "feat: rename --font-cal to --font-heading + use Cal Sans UI (#…

a4d4626

…26064)" (#26759) Co-authored-by: Peer Richelsen <peeroke@gmail.com>

emrysal pushed a commit that referenced this pull request Jan 12, 2026

revert: "feat: rename --font-cal to --font-heading + use Cal Sans UI (#…

050651c

…26064)" (#26759) Co-authored-by: Peer Richelsen <peeroke@gmail.com>

	className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased"`}
	className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}


		## Adding New Fonts

		1. Place the font file in this directory (`packages/ui/src/fonts/`)

feat: rename --font-cal to --font-heading + use Cal Sans UI #26064

feat: rename --font-cal to --font-heading + use Cal Sans UI #26064

Uh oh!

Conversation

pasqualevitiello commented Dec 19, 2025 • edited by devin-ai-integration bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Changes

Migration Guide

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Human Review Checklist

Uh oh!

vercel bot commented Dec 19, 2025

Uh oh!

vercel bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 27, 2025

Uh oh!

vercel bot commented Jan 7, 2026

Uh oh!

vercel bot commented Jan 7, 2026

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eunjae-lee left a comment

Choose a reason for hiding this comment

Uh oh!

Ryukemeister left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

pasqualevitiello commented Dec 19, 2025 •

edited by devin-ai-integration bot

Loading

vercel bot commented Dec 19, 2025 •

edited

Loading

cubic-dev-ai bot Jan 7, 2026 •

edited

Loading

cubic-dev-ai bot Jan 7, 2026 •

edited

Loading

cubic-dev-ai bot Jan 7, 2026 •

edited

Loading

cubic-dev-ai bot Jan 7, 2026 •

edited

Loading