Skip to content

Commit c380ea8

Browse files
pasqualevitiellodevin-ai-integration[bot]pasquale@cal.comRyukemeister
authored
feat: rename --font-cal to --font-heading + use Cal Sans UI (calcom#26064)
* 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>
1 parent 56b29b5 commit c380ea8

74 files changed

Lines changed: 159 additions & 141 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function ShellMainAppDir(props: LayoutProps) {
2727
{props.heading && (
2828
<h3
2929
className={classNames(
30-
"font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
30+
"font-heading text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg tracking-wide sm:text-xl md:block xl:max-w-full",
3131
props.smallHeading ? "text-base" : "text-xl"
3232
)}>
3333
{props.heading}

‎apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
183183

184184
<form onSubmit={handleOnSubmit}>
185185
<div className="mb-8">
186-
<h1 className="font-cal text-emphasis mb-1 text-xl font-semibold tracking-wide">
186+
<h1 className="font-heading text-emphasis mb-1 text-xl tracking-wide">
187187
{form.name}
188188
</h1>
189189
{form.description ? (

‎apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function AvailabilityScheduleSkeleton() {
1919
{/* Title section */}
2020
<header className="flex w-full max-w-full items-center truncate">
2121
<div className="w-full truncate ltr:mr-4 rtl:ml-4 md:block">
22-
<SkeletonText className="font-cal max-w-28 sm:max-w-72 md:max-w-80 hidden h-6 truncate text-xl font-semibold tracking-wide md:block" />
22+
<SkeletonText className="font-heading max-w-28 sm:max-w-72 md:max-w-80 hidden h-6 truncate text-xl tracking-wide md:block" />
2323
{/* Title */}
2424
<SkeletonText className="mt-1 hidden h-4 w-64 text-sm md:block" /> {/* Subtitle */}
2525
</div>

‎apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
5151
<FingerprintAnimation isHovered={isButtonHovered} />
5252

5353
<div className="flex w-full flex-col items-center gap-1 text-center">
54-
<h2 className="font-cal text-emphasis text-xl font-semibold">{t("pbac_opt_in_title")}</h2>
54+
<h2 className="font-heading text-emphasis text-xl">{t("pbac_opt_in_title")}</h2>
5555
<p className="text-default text-sm">{t("pbac_opt_in_description")}</p>
5656
</div>
5757
</div>

‎apps/web/app/icons/IconGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const IconGrid = (props: {
1010
iconClassName?: string;
1111
}) => (
1212
<div className={props.rootClassName}>
13-
<h2 className="font-cal mt-6 text-lg font-medium">{props.title}</h2>
13+
<h2 className="font-heading mt-6 text-lg">{props.title}</h2>
1414
<div className="grid grid-cols-2 lg:grid-cols-6">
1515
{props.icons.map((icon) => {
1616
return (

‎apps/web/app/icons/page.tsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,21 @@ export async function generateMetadata(): Promise<Metadata> {
1515
return await _generateMetadataForStaticPage("Icons Showcase", "", undefined, undefined, "/icons");
1616
}
1717

18-
const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
19-
const calFont = localFont({
20-
src: "../../fonts/CalSans-SemiBold.woff2",
21-
variable: "--font-cal",
22-
preload: true,
23-
display: "swap",
24-
weight: "600",
25-
});
26-
2718
export default function IconsPage() {
2819
const icons = Array.from(lucideIconList).sort() as IconName[];
2920

3021
return (
31-
<div className={`${interFont.variable} ${calFont.variable}`}>
32-
<div className="bg-subtle flex h-screen">
33-
<IconSprites />
34-
<div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
35-
<h1 className="text-emphasis font-cal text-2xl font-medium">Icons Showcase</h1>
36-
<IconGrid title="Regular Icons" icons={icons} />
37-
<IconGrid
38-
title="Filled Icons"
39-
icons={icons}
40-
rootClassName="bg-inverted text-inverted"
41-
iconClassName="fill-blue-500"
42-
/>
43-
</div>
22+
<div className="bg-subtle flex h-screen">
23+
<IconSprites />
24+
<div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
25+
<h1 className="text-emphasis font-heading text-2xl">Icons Showcase</h1>
26+
<IconGrid title="Regular Icons" icons={icons} />
27+
<IconGrid
28+
title="Filled Icons"
29+
icons={icons}
30+
rootClassName="bg-inverted text-inverted"
31+
iconClassName="fill-blue-500"
32+
/>
4433
</div>
4534
</div>
4635
);

‎apps/web/app/layout.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { dir } from "i18next";
2-
import { Inter } from "next/font/google";
3-
import localFont from "next/font/local";
42
import { headers, cookies } from "next/headers";
53
import React from "react";
64

@@ -15,14 +13,7 @@ import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
1513
import { SpeculationRules } from "./SpeculationRules";
1614
import { Providers } from "./providers";
1715

18-
const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
19-
const calFont = localFont({
20-
src: "../fonts/CalSans-SemiBold.woff2",
21-
variable: "--font-cal",
22-
preload: true,
23-
display: "block",
24-
weight: "600",
25-
});
16+
import { fontHeading, fontSans } from "@coss/ui/fonts";
2617

2718
export const viewport = {
2819
width: "device-width",
@@ -114,16 +105,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
114105
style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
115106
suppressHydrationWarning
116107
data-nextjs-router="app">
117-
<head nonce={nonce}>
118-
<style>{`
119-
:root {
120-
--font-sans: ${interFont.style.fontFamily.replace(/\'/g, "")};
121-
--font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
122-
}
123-
`}</style>
124-
</head>
125108
<body
126-
className="dark:bg-default bg-subtle antialiased"
109+
className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}
127110
style={
128111
isEmbed
129112
? {

‎apps/web/app/notFoundClient.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export function NotFound({ host }: { host: string }) {
9292
<main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
9393
<div className="text-center">
9494
<p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
95-
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
95+
<h1 className="font-heading mt-2 text-4xl text-gray-900 sm:text-5xl">
9696
{t("feature_currently_disabled") ?? "Feature is currently disabled"}
9797
</h1>
9898
</div>
@@ -114,7 +114,7 @@ export function NotFound({ host }: { host: string }) {
114114
<main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
115115
<div className="text-center">
116116
<p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{t("error_404")}</p>
117-
<h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
117+
<h1 className="font-heading text-emphasis mt-2 text-4xl sm:text-5xl">
118118
{isBookingSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
119119
</h1>
120120
{isSubpage && pageType !== PageType.TEAM ? (

‎apps/web/components/PageWrapper.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
"use client";
1111

1212
import { DefaultSeo } from "next-seo";
13-
import { Inter } from "next/font/google";
14-
import localFont from "next/font/local";
1513
import Head from "next/head";
1614
import Script from "next/script";
1715

@@ -33,15 +31,6 @@ export interface CalPageWrapper {
3331
PageWrapper?: AppProps["Component"]["PageWrapper"];
3432
}
3533

36-
const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
37-
const calFont = localFont({
38-
src: "../fonts/CalSans-SemiBold.woff2",
39-
variable: "--font-cal",
40-
preload: true,
41-
display: "swap",
42-
weight: "600",
43-
});
44-
4534
function PageWrapper(props: AppProps) {
4635
const { Component, pageProps, err, router } = props;
4736
let pageStatus = "200";
@@ -87,12 +76,6 @@ function PageWrapper(props: AppProps) {
8776
dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
8877
/>
8978

90-
<style jsx global>{`
91-
:root {
92-
--font-sans: ${interFont.style.fontFamily};
93-
--font-cal: ${calFont.style.fontFamily};
94-
}
95-
`}</style>
9679
<IconSprites />
9780

9881
{getLayout(

‎apps/web/components/apps/AppPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ export const AppPage = ({
343343
src={logo}
344344
alt={name}
345345
/>
346-
<h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
346+
<h1 className="font-heading text-emphasis ml-4 text-3xl">{name}</h1>
347347
</div>
348348
<h2 className="text-default text-sm font-medium">
349349
<Link

0 commit comments

Comments
 (0)