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

Adopt remaining typography token classes #65

Merged
an.di merged 1 commits from adilallo/fix/CR-24-typography-tokens into main 2026-08-17 20:09:54 +00:00
Conversation 0 Commits 1 Files Changed 75
+229 -252
75 changed files with 229 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/create/components/ApplicableScopeField.tsx
+2 -2
View File
@@ -105,13 +105,13 @@ function ApplicableScopeFieldComponent({
}} }}
placeholder={inputPlaceholder ?? addLabel} placeholder={inputPlaceholder ?? addLabel}
aria-label={inputPlaceholder ?? addLabel} aria-label={inputPlaceholder ?? addLabel}
className="h-[30px] rounded-[9999px] border border-[var(--color-border-default-tertiary)] bg-transparent px-3 font-inter text-[length:var(--sizing-300,12px)] font-medium leading-[14px] text-[color:var(--color-content-default-primary)] outline-none placeholder:text-[color:var(--color-content-default-tertiary)] focus-visible:border-[var(--color-border-default-brand-primary)]" className="h-[30px] rounded-[9999px] border border-[var(--color-border-default-tertiary)] bg-transparent px-3 text-x-small-label text-[color:var(--color-content-default-primary)] outline-none placeholder:text-[color:var(--color-content-default-tertiary)] focus-visible:border-[var(--color-border-default-brand-primary)]"
/> />
) : ( ) : (
<button <button
type="button" type="button"
onClick={() => setIsAdding(true)} onClick={() => setIsAdding(true)}
className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] font-inter text-[length:var(--sizing-300,12px)] font-medium leading-[14px] text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent" className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
> >
<AddGlyph /> <AddGlyph />
{addLabel} {addLabel}
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+2 -2
View File
@@ -82,10 +82,10 @@ function CustomMethodCardWizardBlocksListViewComponent({
/> />
</span> </span>
<div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5"> <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5">
<span className="truncate font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]"> <span className="truncate text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]">
{title} {title}
</span> </span>
<span className="font-inter text-[12px] leading-4 text-[var(--color-content-default-secondary)]"> <span className="text-x-small-paragraph text-[var(--color-content-default-secondary)]">
{typeLabel} {typeLabel}
</span> </span>
</div> </div>
app/(app)/create/screens/informational/InformationalScreen.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export function InformationalScreen() {
{copy.descriptionLead}{" "} {copy.descriptionLead}{" "}
<a <a
href="#" href="#"
className="font-inter font-normal text-[var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] cursor-pointer" className="font-normal text-[var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] cursor-pointer"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
+1 -1
View File
@@ -169,7 +169,7 @@ export function ConfirmStakeholdersScreen() {
</div> </div>
{chipError ? ( {chipError ? (
<p <p
className="font-inter text-sm text-[var(--color-border-default-utility-negative)]" className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
role="alert" role="alert"
> >
{chipError} {chipError}
app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+1 -1
View File
@@ -632,7 +632,7 @@ export function CoreValuesSelectScreen() {
<button <button
type="button" type="button"
onClick={addHandlers.onAddClick} onClick={addHandlers.onAddClick}
className="cursor-pointer font-inter font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90" className="cursor-pointer font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90"
> >
{cv.header.addLink} {cv.header.addLink}
</button> </button>
app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx
+6 -6
View File
@@ -109,7 +109,7 @@ export function PublishedStakeholdersManagePanel({
<section className="flex w-full flex-col gap-4 pt-1 pb-2"> <section className="flex w-full flex-col gap-4 pt-1 pb-2">
{bannerError ? ( {bannerError ? (
<p <p
className="font-inter text-sm text-[var(--color-border-default-utility-negative)]" className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
role="alert" role="alert"
> >
{bannerError} {bannerError}
@@ -117,15 +117,15 @@ export function PublishedStakeholdersManagePanel({
) : null} ) : null}
{loadError ? ( {loadError ? (
<p className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"> <p className="text-small-paragraph text-[var(--color-border-default-utility-negative)]">
{t("managePublished.loadFailed")} {t("managePublished.loadFailed")}
</p> </p>
) : items === null ? ( ) : items === null ? (
<p className="font-inter text-sm text-[var(--color-content-default-secondary)]"> <p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{t("managePublished.loading")} {t("managePublished.loading")}
</p> </p>
) : items.length === 0 ? ( ) : items.length === 0 ? (
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("managePublished.empty")} {t("managePublished.empty")}
</p> </p>
) : ( ) : (
@@ -136,10 +136,10 @@ export function PublishedStakeholdersManagePanel({
className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between" className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between"
> >
<div className="flex min-w-0 flex-col gap-1"> <div className="flex min-w-0 flex-col gap-1">
<span className="truncate font-inter text-sm font-medium text-[var(--color-content-default-primary)] md:text-base"> <span className="truncate text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
{row.email} {row.email}
</span> </span>
<span className="font-inter text-xs text-[var(--color-content-default-tertiary)] md:text-sm"> <span className="text-x-small-paragraph text-[var(--color-content-default-tertiary)] md:text-sm">
{row.status === "pending" {row.status === "pending"
? t("managePublished.pending") ? t("managePublished.pending")
: t("managePublished.accepted")} : t("managePublished.accepted")}
app/(app)/create/utils/createFlowFooterClassNames.ts
+1 -1
View File
@@ -11,7 +11,7 @@
* exposes a native size that matches, this module should collapse. * exposes a native size that matches, this module should collapse.
*/ */
export const CREATE_FLOW_FOOTER_BUTTON_CLASS = export const CREATE_FLOW_FOOTER_BUTTON_CLASS =
"md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] " + "!text-x-small-label md:!text-small-label " +
"!px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] " + "!px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] " +
"!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"; "!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]";
app/(app)/login/page.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ function LoginLoadingFallback() {
const t = useTranslation("pages.login"); const t = useTranslation("pages.login");
return ( return (
<div className={`${loginPageBgClass} flex items-center justify-center`}> <div className={`${loginPageBgClass} flex items-center justify-center`}>
<p className="font-inter text-[14px] text-[var(--color-content-default-primary)]"> <p className="text-[14px] text-[var(--color-content-default-primary)]">
{t("loadingFallback")} {t("loadingFallback")}
</p> </p>
</div> </div>
@@ -42,7 +42,7 @@ function LoginWithSearchParams() {
belowCard={ belowCard={
<Link <Link
href="/" href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90" className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
> >
{t("backToHome")} {t("backToHome")}
</Link> </Link>
app/(app)/profile/ProfilePageClient.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ export default function ProfilePageClient() {
if (!sessionLoaded) { if (!sessionLoaded) {
return ( return (
<div className="mx-auto max-w-3xl px-4 py-16"> <div className="mx-auto max-w-3xl px-4 py-16">
<p className="font-inter text-sm text-[var(--color-content-default-secondary)]"> <p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{t("loading")} {t("loading")}
</p> </p>
</div> </div>
app/(app)/profile/_components/ProfilePage.view.tsx
+6 -6
View File
@@ -81,7 +81,7 @@ export type ProfilePageViewProps = {
* mobile: smaller Bricolage. * mobile: smaller Bricolage.
*/ */
const profileSectionHeadingClass = const profileSectionHeadingClass =
"font-bricolage text-base font-bold leading-[22px] text-[var(--color-content-default-primary)] md:font-inter md:text-xl md:font-bold md:leading-7 xl:font-bricolage-grotesque xl:font-bold xl:text-[28px] xl:leading-9"; "font-bricolage text-xx-small-heading text-[var(--color-content-default-primary)] md:font-sans md:text-x-small-heading xl:font-bricolage-grotesque xl:text-medium-heading";
export type ProfilePageSignedOutViewProps = { export type ProfilePageSignedOutViewProps = {
onSignIn: () => void; onSignIn: () => void;
@@ -122,11 +122,11 @@ export function ProfilePageSignedOutView({
<> <>
<h1 <h1
id={titleId} id={titleId}
className="font-inter text-xl font-bold leading-7 text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-[28px] md:font-bold md:leading-[36px]" className="text-x-small-heading text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-medium-heading"
> >
{t("pageTitle")} {t("pageTitle")}
</h1> </h1>
<p className="max-w-[640px] font-inter text-sm font-normal leading-5 text-[var(--color-content-default-tertiary)] md:text-base md:leading-6"> <p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-medium-paragraph">
{t("signInPrompt")} {t("signInPrompt")}
</p> </p>
</> </>
@@ -275,11 +275,11 @@ export function ProfilePageView({
<> <>
<h1 <h1
id={titleId} id={titleId}
className="font-inter text-xl font-bold leading-7 text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-[28px] md:font-bold md:leading-[36px]" className="text-x-small-heading text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-medium-heading"
> >
{welcomeTitle} {welcomeTitle}
</h1> </h1>
<p className="max-w-[640px] font-inter text-sm font-normal leading-5 text-[var(--color-content-default-tertiary)] md:text-base md:leading-6"> <p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-medium-paragraph">
{welcomeBody} {welcomeBody}
</p> </p>
</> </>
@@ -381,7 +381,7 @@ export function ProfilePageView({
))} ))}
</div> </div>
{rules.length === 0 && !rulesError && !showDraftCard ? ( {rules.length === 0 && !rulesError && !showDraftCard ? (
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("yourRulesEmpty")} {t("yourRulesEmpty")}
</p> </p>
) : null} ) : null}
app/(dev)/components-preview/page.tsx
+13 -13
View File
@@ -45,7 +45,7 @@ export default function ComponentsPreview() {
<h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]"> <h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]">
Component Preview Component Preview
</h1> </h1>
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]"> <p className="text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
Navigation Link (Figma 21861:21428) and List (21863:45631 / 45493 / Navigation Link (Figma 21861:21428) and List (21863:45631 / 45493 /
4405) with ListEntry (21844:4118). Use Tab and hover to review 4405) with ListEntry (21844:4118). Use Tab and hover to review
states. states.
@@ -53,12 +53,12 @@ export default function ComponentsPreview() {
</header> </header>
<section className="space-y-[var(--spacing-scale-016)]"> <section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Link Link
</h2> </h2>
<div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]"> <div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]">
<div> <div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Light surface Light surface
</p> </p>
<div className="flex flex-col gap-4 rounded-lg bg-white p-6"> <div className="flex flex-col gap-4 rounded-lg bg-white p-6">
@@ -105,7 +105,7 @@ export default function ComponentsPreview() {
</div> </div>
<div> <div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Dark surface Dark surface
</p> </p>
<div className="flex flex-col gap-4 rounded-lg bg-[var(--color-gray-800)] p-6"> <div className="flex flex-col gap-4 rounded-lg bg-[var(--color-gray-800)] p-6">
@@ -154,22 +154,22 @@ export default function ComponentsPreview() {
</section> </section>
<section className="space-y-[var(--spacing-scale-016)]"> <section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Divider Divider
</h2> </h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
Utility / Divider (450:1941). List rows use the Content line; Menu is Utility / Divider (450:1941). List rows use the Content line; Menu is
slightly higher-contrast. slightly higher-contrast.
</p> </p>
<div className="max-w-md space-y-4"> <div className="max-w-md space-y-4">
<div> <div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]"> <p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Content Content
</p> </p>
<Divider type="content" orientation="horizontal" /> <Divider type="content" orientation="horizontal" />
</div> </div>
<div> <div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]"> <p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Menu Menu
</p> </p>
<Divider type="menu" orientation="horizontal" /> <Divider type="menu" orientation="horizontal" />
@@ -178,16 +178,16 @@ export default function ComponentsPreview() {
</section> </section>
<section className="space-y-[var(--spacing-scale-024)]"> <section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
List List
</h2> </h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]"> <p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row: List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row:
ListEntry (21844:4118). ListEntry (21844:4118).
</p> </p>
<div className="space-y-[var(--spacing-scale-024)]"> <div className="space-y-[var(--spacing-scale-024)]">
<div> <div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]"> <h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Small Small
</h3> </h3>
<div className="mx-auto max-w-[1044px]"> <div className="mx-auto max-w-[1044px]">
@@ -195,7 +195,7 @@ export default function ComponentsPreview() {
</div> </div>
</div> </div>
<div> <div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]"> <h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Medium Medium
</h3> </h3>
<div className="mx-auto max-w-[1044px]"> <div className="mx-auto max-w-[1044px]">
@@ -203,7 +203,7 @@ export default function ComponentsPreview() {
</div> </div>
</div> </div>
<div> <div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]"> <h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Large Large
</h3> </h3>
<div className="mx-auto max-w-[1590px]"> <div className="mx-auto max-w-[1590px]">
app/(marketing)/_components/LegalDocumentPage.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g; const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
const ARTICLE_COLUMN_CLASS = const ARTICLE_COLUMN_CLASS =
"mx-auto flex w-full flex-col gap-[var(--space-800,32px)] font-inter text-[var(--color-content-default-primary)] text-[16px] leading-[24px] sm:max-w-[390px] sm:text-[18px] sm:leading-[130%] md:max-w-[472px] lg:max-w-[700px] lg:text-[24px] lg:leading-[32px] xl:max-w-[904px] xl:text-[32px] xl:leading-[40px]"; "mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-[904px] xl:text-xx-large-paragraph";
const LINK_CLASS = "underline decoration-solid underline-offset-2"; const LINK_CLASS = "underline decoration-solid underline-offset-2";
@@ -161,7 +161,7 @@ export default function LegalDocumentPage({
> >
<div className={`${ARTICLE_COLUMN_CLASS} -mt-[var(--spacing-scale-048)]`}> <div className={`${ARTICLE_COLUMN_CLASS} -mt-[var(--spacing-scale-048)]`}>
<div <div
className="flex flex-wrap items-end gap-[var(--measures-spacing-008,8px)] font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-default-secondary)] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%]" className="flex flex-wrap items-end gap-[var(--measures-spacing-008,8px)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
data-name="Metadata Container" data-name="Metadata Container"
> >
<span>{page.banner.author}</span> <span>{page.banner.author}</span>
app/(marketing)/blog/[slug]/page.tsx
+1 -1
View File
@@ -252,7 +252,7 @@ export default async function BlogPostPage({ params }: PageProps) {
sm:px-0 sm:py-[var(--spacing-scale-032)] sm:px-0 sm:py-[var(--spacing-scale-032)]
" "
> >
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-[16px] leading-[24px] sm:text-[18px] sm:leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"> <div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
<div dangerouslySetInnerHTML={{ __html: post.htmlContent }} /> <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
</div> </div>
</article> </article>
app/(marketing)/how-it-works/page.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ export default function HowItWorksPage() {
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]"> <article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
<div <div
className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-default-primary)] text-[16px] leading-[24px] sm:text-[18px] sm:leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]" className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"
dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }} dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
/> />
</article> </article>
app/components/buttons/Button/Button.tsx
+5 -5
View File
@@ -106,11 +106,11 @@ const Button = memo<ButtonProps>(
}; };
const fontStyles: Record<string, string> = { const fontStyles: Record<string, string> = {
xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", xsmall: "text-xx-small-label",
small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", small: "text-x-small-label",
medium: "font-inter text-[14px] leading-[16px] font-medium tracking-[0%]", medium: "text-small-label",
large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", large: "text-medium-label",
xlarge: "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]", xlarge: "text-x-large-label",
}; };
const variantStyles: Record<string, string> = { const variantStyles: Record<string, string> = {
app/components/buttons/InlineTextButton/InlineTextButton.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ function InlineTextButtonComponent({
const baseClasses = [ const baseClasses = [
"cursor-pointer border-none bg-transparent p-0", "cursor-pointer border-none bg-transparent p-0",
underline underline
? "font-inter font-normal text-[length:inherit] leading-[inherit] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px]" ? " font-normal text-[length:inherit] leading-[inherit] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px]"
: "text-[length:inherit] leading-[inherit] text-[color:inherit] no-underline", : "text-[length:inherit] leading-[inherit] text-[color:inherit] no-underline",
"hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60", "hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60",
].join(" "); ].join(" ");
app/components/cards/CardStack/CardStack.view.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ function CardStackAddCardButton({
type="button" type="button"
onClick={onClick} onClick={onClick}
aria-label={ariaLabel} aria-label={ariaLabel}
className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] font-inter text-base font-medium text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]" className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<svg <svg
@@ -154,7 +154,7 @@ export function CardStackView({
<button <button
type="button" type="button"
onClick={onToggleExpand} onClick={onToggleExpand}
className={`font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${ className={`text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
toggleAlignment === "end" ? "self-end" : "self-center" toggleAlignment === "end" ? "self-end" : "self-center"
}`} }`}
> >
@@ -474,7 +474,7 @@ export function CardStackView({
<button <button
type="button" type="button"
onClick={onToggleExpand} onClick={onToggleExpand}
className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer" className="text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
> >
{expanded ? showLessLabel : toggleLabel} {expanded ? showLessLabel : toggleLabel}
</button> </button>
app/components/cards/Icon/Icon.view.tsx
+2 -2
View File
@@ -35,13 +35,13 @@ export function IconView({
{/* Title — Figma XX Large / Label (32 / 36) */} {/* Title — Figma XX Large / Label (32 / 36) */}
<h3 <h3
id={interactive ? undefined : layoutTitleId} id={interactive ? undefined : layoutTitleId}
className="w-full text-left font-inter text-[32px] font-normal leading-[36px] text-[var(--color-content-default-primary)]" className="w-full text-left text-xx-large-label text-[var(--color-content-default-primary)]"
> >
{title} {title}
</h3> </h3>
{/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */} {/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */}
<p className="w-full text-left font-inter font-normal text-[length:var(--text-x-small-paragraph)] leading-[length:var(--text-x-small-paragraph--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-small-paragraph)] md:leading-[length:var(--text-small-paragraph--line-height)] lg:text-[length:var(--text-x-small-paragraph)] lg:leading-[length:var(--text-x-small-paragraph--line-height)]"> <p className="w-full text-left text-x-small-paragraph text-[var(--color-content-default-primary)] md:text-small-paragraph lg:text-x-small-paragraph">
{description} {description}
</p> </p>
</div> </div>
app/components/cards/Mini/Mini.view.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ function MiniView({
{children} {children}
</div> </div>
<div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]"> <div className="text-center text-x-small-label text-[var(--color-content-default-primary)]">
{labelLine1 && labelLine2 ? ( {labelLine1 && labelLine2 ? (
<> <>
<div>{labelLine1}</div> <div>{labelLine1}</div>
app/components/cards/Rule/Rule.view.tsx
+14 -14
View File
@@ -108,27 +108,27 @@ export function RuleView({
const showRecommendedTag = recommended && !expanded; const showRecommendedTag = recommended && !expanded;
const titleClass = templateGridFigmaShell const titleClass = templateGridFigmaShell
? ` ? `
max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px] max-[639px]:text-x-small-heading
min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px] min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:text-medium-heading
min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:font-extrabold min-[1024px]:max-[1439px]:text-[36px] min-[1024px]:max-[1439px]:leading-[44px] min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:text-x-large-heading
min-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px] min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
` `
: ` : `
max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px] max-[639px]:text-x-small-heading
min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px] min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:text-medium-heading
min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:font-bold min-[1024px]:max-[1439px]:text-[24px] min-[1024px]:max-[1439px]:leading-[32px] min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:text-small-heading
min-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px] min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
`; `;
const descriptionClass = isLarge const descriptionClass = isLarge
? "font-inter font-medium text-[18px] leading-[24px]" ? "text-large-label"
: isMedium : isMedium
? templateGridFigmaShell ? templateGridFigmaShell
? "font-inter font-medium text-[14px] leading-[16px] min-[1024px]:max-[1439px]:text-[18px] min-[1024px]:max-[1439px]:leading-[24px]" ? "text-small-label min-[1024px]:max-[1439px]:text-large-label"
: "font-inter font-medium text-[14px] leading-[16px]" : "text-small-label"
: isSmall : isSmall
? "font-inter font-medium text-[14px] leading-[16px]" // S: 14px, medium, Inter ? "text-small-label" // S: 14px, medium, Inter
: "font-inter font-medium text-[12px] leading-[14px]"; // XS: 12px, medium, Inter : "text-x-small-label"; // XS: 12px, medium, Inter
const headerIconCellClass = templateGridFigmaShell const headerIconCellClass = templateGridFigmaShell
? ` ? `
@@ -355,7 +355,7 @@ export function RuleView({
data-figma-node="21867:47400" data-figma-node="21867:47400"
> >
{bottomStatusLabel ? ( {bottomStatusLabel ? (
<span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 text-[var(--color-surface-invert-brand-teal)]"> <span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 text-xx-small-label uppercase text-[var(--color-surface-invert-brand-teal)]">
{bottomStatusLabel} {bottomStatusLabel}
</span> </span>
) : null} ) : null}
app/components/cards/Selection/Selection.view.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ import type { SelectionViewProps } from "./Selection.types";
function InfoIcon() { function InfoIcon() {
return ( return (
<span <span
className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]" className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
aria-hidden aria-hidden
> >
? ?
@@ -59,11 +59,11 @@ export function SelectionView({
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
> >
<SelectionTag recommended={recommended} selected={selected} /> <SelectionTag recommended={recommended} selected={selected} />
<span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]"> <span className="w-full text-medium-label text-[var(--color-content-invert-secondary)]">
{label} {label}
</span> </span>
{supportText ? ( {supportText ? (
<p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]"> <p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
{supportText} {supportText}
</p> </p>
) : null} ) : null}
@@ -85,13 +85,13 @@ export function SelectionView({
> >
<div className="flex min-w-0 flex-1 flex-col gap-1"> <div className="flex min-w-0 flex-1 flex-col gap-1">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]"> <span className="text-medium-label text-[var(--color-content-invert-secondary)]">
{label} {label}
</span> </span>
{showInfoIcon ? <InfoIcon /> : null} {showInfoIcon ? <InfoIcon /> : null}
</div> </div>
{supportText ? ( {supportText ? (
<p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]"> <p className="text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
{supportText} {supportText}
</p> </p>
) : null} ) : null}
app/components/cards/Stat/Stat.view.tsx
+3 -3
View File
@@ -24,16 +24,16 @@ function StatView({
variant={shapeVariant} variant={shapeVariant}
className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90" className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
/> />
<p className="relative font-bricolage-grotesque text-[40px] font-bold leading-[52px] text-[var(--color-content-invert-primary,black)]"> <p className="relative font-bricolage-grotesque text-xx-large-heading text-[var(--color-content-invert-primary,black)]">
{value} {value}
</p> </p>
</div> </div>
<p className="font-inter text-[14px] font-normal leading-5 text-[var(--color-content-invert-primary,black)]"> <p className="text-small-paragraph text-[var(--color-content-invert-primary,black)]">
{label} {label}
</p> </p>
</div> </div>
{asOf ? ( {asOf ? (
<p className="w-full font-inter text-[10px] font-normal leading-[14px] text-[var(--color-content-invert-tertiary,#2d2d2d)]"> <p className="w-full text-xx-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)]">
{asOf} {asOf}
</p> </p>
) : null} ) : null}
app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
+2 -2
View File
@@ -56,7 +56,7 @@ export function TemplateChipDetailModal({
> >
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2"> <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
{resolved?.body ?? ( {resolved?.body ?? (
<p className="font-inter text-[14px] leading-[20px] text-[color:var(--color-content-default-secondary,#a3a3a3)]"> <p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]">
{t("fallback.bodyLabel")} {t("fallback.bodyLabel")}
</p> </p>
)} )}
@@ -318,7 +318,7 @@ function ReadOnlyValueField({
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<InputLabel label={label} helpIcon size="s" palette="default" /> <InputLabel label={label} helpIcon size="s" palette="default" />
<span className="font-inter text-[16px] font-medium leading-[20px] text-[color:var(--color-content-default-primary)]"> <span className="text-medium-label text-[color:var(--color-content-default-primary)]">
{value} {value}
</span> </span>
</div> </div>
app/components/content/ContentContainer/ContentContainer.container.tsx
+7 -7
View File
@@ -75,22 +75,22 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const titleClasses = const titleClasses =
size === "xs" size === "xs"
? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}` ? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
: `font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] transition-colors ${titleColor}`; : `font-bricolage font-medium text-xx-small-display sm:text-x-small-display md:text-[32px] md:leading-[110%] lg:text-medium-display xl:text-x-large-display transition-colors ${titleColor}`;
const descriptionClasses = const descriptionClasses =
size === "xs" size === "xs"
? `font-inter font-normal text-[12px] leading-[16px] max-w-md ${bodyColor}` ? `text-x-small-paragraph max-w-md ${bodyColor}`
: `font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] ${bodyColor}`; : `text-x-small-paragraph sm:text-small-paragraph md:text-small-paragraph lg:text-large-paragraph xl:text-x-large-paragraph ${bodyColor}`;
const authorClasses = const authorClasses =
size === "xs" size === "xs"
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}` ? `overflow-hidden text-ellipsis whitespace-nowrap text-xx-small-paragraph ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`; : `text-xx-small-paragraph md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph ${bodyColor}`;
const dateClasses = const dateClasses =
size === "xs" size === "xs"
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}` ? `overflow-hidden text-ellipsis whitespace-nowrap text-xx-small-paragraph ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`; : `text-xx-small-paragraph md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph ${bodyColor}`;
return ( return (
<ContentContainerView <ContentContainerView
app/components/controls/AddCustomField/AddCustomField.view.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ function FieldTypeButton({
className="text-[var(--color-content-default-brand-primary,#fefcc9)]" className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
/> />
</span> </span>
<span className="w-full text-center font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]"> <span className="w-full text-center text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
{label} {label}
</span> </span>
</Vertical> </Vertical>
@@ -65,7 +65,7 @@ function AddCustomFieldViewComponent({
type="button" type="button"
onClick={onPressAdd} onClick={onPressAdd}
style={shellStyle} style={shellStyle}
className={`flex w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 py-12 font-inter text-[16px] font-medium leading-5 text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()} className={`flex w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 py-12 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
> >
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3"> <span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
<svg <svg
app/components/controls/Checkbox/Checkbox.view.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export function CheckboxView({
{label && ( {label && (
<span <span
id={labelId} id={labelId}
className="font-inter text-[14px] leading-[18px]" className="text-[14px] leading-[18px]"
style={{ color: labelColor }} style={{ color: labelColor }}
> >
{label} {label}
app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ export function CheckboxGroupView({
/> />
<div className="flex flex-col gap-[4px] flex-1"> <div className="flex flex-col gap-[4px] flex-1">
<span <span
className={`font-inter text-[14px] leading-[20px] ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
@@ -46,7 +46,7 @@ export function CheckboxGroupView({
{option.label} {option.label}
</span> </span>
<span <span
className={`font-inter text-[14px] leading-[20px] ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]" ? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-tertiary,#b4b4b4)]" : "text-[var(--color-content-default-tertiary,#b4b4b4)]"
app/components/controls/Chip/Chip.view.tsx
+5 -5
View File
@@ -39,11 +39,11 @@ function ChipView({
// Custom state has different padding // Custom state has different padding
const sizeClasses = isCustom const sizeClasses = isCustom
? isSmall ? isSmall
? "px-[var(--measures-spacing-100,4px)] py-[3px] text-[length:var(--sizing-300,12px)] leading-[16px]" ? "px-[var(--measures-spacing-100,4px)] py-[3px] text-x-small-paragraph"
: "px-[var(--measures-spacing-150,6px)] py-[10px] text-[length:var(--sizing-400,16px)] leading-[24px]" : "px-[var(--measures-spacing-150,6px)] py-[10px] text-medium-paragraph"
: isSmall : isSmall
? "h-[30px] px-[var(--measures-spacing-200,8px)] gap-[var(--measures-spacing-050,2px)] text-[length:var(--sizing-300,12px)] leading-[14px]" ? "h-[30px] px-[var(--measures-spacing-200,8px)] gap-[var(--measures-spacing-050,2px)] text-x-small-label"
: "px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-300,12px)] gap-[var(--measures-spacing-150,6px)] text-[length:var(--sizing-400,16px)] leading-[20px]"; : "px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-300,12px)] gap-[var(--measures-spacing-150,6px)] text-medium-label";
// Palette + state styling based on Figma examples // Palette + state styling based on Figma examples
// Use consistent border width to prevent layout shift // Use consistent border width to prevent layout shift
@@ -209,7 +209,7 @@ function ChipView({
onChange={(e) => onInputChange?.(e.target.value)} onChange={(e) => onInputChange?.(e.target.value)}
onKeyDown={onInputKeyDown} onKeyDown={onInputKeyDown}
placeholder={typeToAddPlaceholder} placeholder={typeToAddPlaceholder}
className="bg-transparent border-none outline-none flex-1 min-w-0 font-inter font-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[color:var(--color-content-default-tertiary,#b4b4b4)]" className="bg-transparent border-none outline-none flex-1 min-w-0 font-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
style={{ style={{
fontSize: isSmall fontSize: isSmall
? "var(--sizing-300,12px)" ? "var(--sizing-300,12px)"
app/components/controls/Incrementer/Incrementer.view.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ function IncrementerView({
</button> </button>
<span <span
aria-live="polite" aria-live="polite"
className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`} className={`shrink-0 whitespace-nowrap text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
> >
{displayValue} {displayValue}
</span> </span>
app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
+2 -2
View File
@@ -56,11 +56,11 @@ function InfoMessageBoxView({
> >
{icon ?? <ExclamationIconInline />} {icon ?? <ExclamationIconInline />}
</div> </div>
<p className="font-inter font-medium text-[14px] leading-[16px] text-[var(--color-content-default-primary,white)] min-w-0"> <p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0">
{title} {title}
</p> </p>
</div> </div>
<div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-[12px] [&_label_span]:leading-[16px] [&_label_span]:opacity-80 pl-8"> <div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80 pl-8">
<CheckboxGroup <CheckboxGroup
mode="standard" mode="standard"
value={checkedIds} value={checkedIds}
app/components/controls/InputWithCounter/InputWithCounter.view.tsx
+3 -3
View File
@@ -15,7 +15,7 @@ export function InputWithCounterView({
{/* Label with help icon */} {/* Label with help icon */}
{label && ( {label && (
<div className="flex items-center gap-[var(--spacing-scale-002)]"> <div className="flex items-center gap-[var(--spacing-scale-002)]">
<label className="font-inter text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]"> <label className="text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]">
{label} {label}
</label> </label>
{showHelpIcon && ( {showHelpIcon && (
@@ -61,12 +61,12 @@ export function InputWithCounterView({
} }
}} }}
maxLength={maxLength} maxLength={maxLength}
className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--measures-radius-medium,8px)] text-[16px] leading-[24px] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`} className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--measures-radius-medium,8px)] text-medium-paragraph text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`}
/> />
</div> </div>
{/* Character counter */} {/* Character counter */}
<p className="font-inter text-[12px] leading-[16px] text-[var(--color-content-default-tertiary)]"> <p className="text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
{value.length}/{maxLength} {value.length}/{maxLength}
</p> </p>
</div> </div>
app/components/controls/MultiSelect/MultiSelect.view.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ function MultiSelectView({
</svg> </svg>
{addButtonText && ( {addButtonText && (
<span <span
className={`font-inter font-medium ${isSmall ? "text-[length:var(--sizing-300,12px)] leading-[14px]" : "text-[length:var(--sizing-400,16px)] leading-[20px]"} ${ className={`font-medium ${isSmall ? "text-[length:var(--sizing-300,12px)] leading-[14px]" : "text-medium-label"} ${
isInverse isInverse
? "text-[color:var(--color-content-inverse-primary,black)]" ? "text-[color:var(--color-content-inverse-primary,black)]"
: "text-[color:var(--color-content-default-primary,white)]" : "text-[color:var(--color-content-default-primary,white)]"
app/components/controls/RadioButton/RadioButton.view.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function RadioButtonView({
{label && ( {label && (
<span <span
id={`${radioId}-label`} id={`${radioId}-label`}
className="font-inter text-[14px] leading-[18px]" className="text-[14px] leading-[18px]"
style={{ color: labelColor }} style={{ color: labelColor }}
> >
{label} {label}
app/components/controls/RadioGroup/RadioGroup.view.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export function RadioGroupView({
/> />
<div className="flex flex-col gap-[4px] flex-1"> <div className="flex flex-col gap-[4px] flex-1">
<span <span
className={`font-inter text-[14px] leading-[20px] ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
@@ -50,7 +50,7 @@ export function RadioGroupView({
{option.label} {option.label}
</span> </span>
<span <span
className={`font-inter text-[14px] leading-[20px] ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]" ? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-secondary,#b4b4b4)]" : "text-[var(--color-content-default-secondary,#b4b4b4)]"
app/components/controls/SelectInput/SelectInput.view.tsx
+5 -7
View File
@@ -80,7 +80,7 @@ export function SelectInputView({
// Styles based on Figma design // Styles based on Figma design
const containerClasses = "flex flex-col gap-[8px]"; const containerClasses = "flex flex-col gap-[8px]";
const labelClasses = const labelClasses =
"text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]"; "text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]";
// Button styles per Figma // Button styles per Figma
const getButtonClasses = (): string => { const getButtonClasses = (): string => {
@@ -89,9 +89,7 @@ export function SelectInputView({
h-[40px] h-[40px]
px-[12px] px-[12px]
py-[8px] py-[8px]
text-[16px] text-medium-label
font-medium
leading-[20px]
rounded-[8px] rounded-[8px]
border border
border-solid border-solid
@@ -153,7 +151,7 @@ export function SelectInputView({
{label} {label}
</label> </label>
{asterisk && ( {asterisk && (
<span className="text-[var(--color-content-default-negative-primary,#ea4845)] text-[10px] leading-[12px] font-medium"> <span className="text-[var(--color-content-default-negative-primary,#ea4845)] text-xx-small-label">
* *
</span> </span>
)} )}
@@ -169,7 +167,7 @@ export function SelectInputView({
)} )}
</div> </div>
{textOptional && ( {textOptional && (
<span className="text-[var(--color-content-default-tertiary,#b4b4b4)] text-[10px] leading-[14px] font-normal"> <span className="text-[var(--color-content-default-tertiary,#b4b4b4)] text-xx-small-paragraph">
Optional text Optional text
</span> </span>
)} )}
@@ -271,7 +269,7 @@ export function SelectInputView({
</div> </div>
{textHint && ( {textHint && (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]"> <p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{hintDefault} {hintDefault}
</p> </p>
</div> </div>
app/components/controls/SelectOption/SelectOption.container.tsx
+4 -4
View File
@@ -25,13 +25,13 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
const getTextSize = (): string => { const getTextSize = (): string => {
switch (size) { switch (size) {
case "small": case "small":
return "text-[10px] leading-[14px]"; return "text-xx-small-paragraph";
case "medium": case "medium":
return "text-[14px] leading-[20px]"; return "text-small-paragraph";
case "large": case "large":
return "text-[16px] leading-[24px]"; return "text-medium-paragraph";
default: default:
return "text-[14px] leading-[20px]"; return "text-small-paragraph";
} }
}; };
app/components/controls/Switch/Switch.container.tsx
+1 -4
View File
@@ -135,10 +135,7 @@ const SwitchContainer = memo(
const labelClasses = ` const labelClasses = `
ml-[var(--measures-spacing-008)] ml-[var(--measures-spacing-008)]
font-inter text-small-paragraph
font-normal
text-[14px]
leading-[20px]
text-[var(--color-content-default-primary)] text-[var(--color-content-default-primary)]
` `
.trim() .trim()
app/components/controls/TextArea/TextArea.container.tsx
+10 -10
View File
@@ -57,24 +57,24 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
small: { small: {
textarea: textarea:
labelVariant === "horizontal" labelVariant === "horizontal"
? "h-[60px] px-[12px] py-[8px] text-[10px]" ? "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph"
: "h-[60px] px-[12px] py-[8px] text-[10px]", : "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph",
label: "text-[12px] leading-[14px] font-medium", label: "text-x-small-label",
container: "gap-[4px]", container: "gap-[4px]",
radius: "var(--measures-radius-xsmall)", radius: "var(--measures-radius-xsmall)",
}, },
medium: { medium: {
textarea: textarea:
labelVariant === "horizontal" labelVariant === "horizontal"
? "h-[110px] px-[12px] py-[8px] text-[14px] leading-[20px]" ? "h-[110px] px-[12px] py-[8px] text-small-paragraph"
: "h-[100px] px-[12px] py-[8px] text-[14px] leading-[20px]", : "h-[100px] px-[12px] py-[8px] text-small-paragraph",
label: "text-[14px] leading-[16px] font-medium", label: "text-small-label",
container: "gap-[8px]", container: "gap-[8px]",
radius: "var(--measures-radius-xsmall)", radius: "var(--measures-radius-xsmall)",
}, },
large: { large: {
textarea: "h-[150px] px-[12px] py-[8px] text-[16px] leading-[24px]", textarea: "h-[150px] px-[12px] py-[8px] text-medium-paragraph",
label: "text-[16px] leading-[20px] font-medium", label: "text-medium-label",
container: "gap-[12px]", container: "gap-[12px]",
radius: "var(--measures-radius-small)", radius: "var(--measures-radius-small)",
}, },
@@ -155,8 +155,8 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
const labelClasses = const labelClasses =
labelVariant === "horizontal" labelVariant === "horizontal"
? `${currentSize.label} font-inter min-w-fit` ? `${currentSize.label} min-w-fit`
: `${currentSize.label} font-inter`; : `${currentSize.label} `;
const textareaClasses = ` const textareaClasses = `
scrollbar-design w-full transition-all duration-200 ease-in-out resize-none scrollbar-design w-full transition-all duration-200 ease-in-out resize-none
app/components/controls/TextArea/TextArea.view.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
<label <label
id={labelId} id={labelId}
htmlFor={textareaId} htmlFor={textareaId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`} className={`${labelClasses} font-medium text-[var(--color-content-default-secondary)]`}
> >
{label} {label}
</label> </label>
@@ -82,7 +82,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
</div> </div>
{textHint ? ( {textHint ? (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]"> <p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{typeof textHint === "string" ? textHint : hintDefault} {typeof textHint === "string" ? textHint : hintDefault}
</p> </p>
</div> </div>
app/components/controls/TextInput/TextInput.container.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
// Container classes (default label variant only) // Container classes (default label variant only)
const containerClasses = `flex flex-col ${sizeStyles.container}`; const containerClasses = `flex flex-col ${sizeStyles.container}`;
const labelClasses = `${sizeStyles.label} font-inter`; const labelClasses = `${sizeStyles.label} `;
// Base classes without border (border is added in state styles) // Base classes without border (border is added in state styles)
const inputClasses = ` const inputClasses = `
app/components/controls/TextInput/TextInput.view.tsx
+2 -2
View File
@@ -42,7 +42,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
<label <label
id={labelId} id={labelId}
htmlFor={inputId} htmlFor={inputId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-primary)]`} className={`${labelClasses} font-medium text-[var(--color-content-default-primary)]`}
> >
{label} {label}
</label> </label>
@@ -84,7 +84,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
</div> </div>
{textHint && ( {textHint && (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]"> <p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{typeof textHint === "string" ? textHint : hintDefault} {typeof textHint === "string" ? textHint : hintDefault}
</p> </p>
</div> </div>
app/components/controls/Toggle/Toggle.container.tsx
+2 -5
View File
@@ -101,16 +101,13 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
// Container classes // Container classes
const containerClasses = "flex flex-col gap-[4px]"; const containerClasses = "flex flex-col gap-[4px]";
const labelClasses = `${currentSize.label} font-inter font-medium`; const labelClasses = `${currentSize.label} font-medium`;
const toggleClasses = ` const toggleClasses = `
${currentSize.toggle} ${currentSize.toggle}
${stateStyles.toggle} ${stateStyles.toggle}
rounded-full rounded-full
font-inter text-x-small-paragraph
font-normal
text-[12px]
leading-[16px]
cursor-pointer cursor-pointer
transition-all transition-all
duration-200 duration-200
app/components/controls/ToggleGroup/ToggleGroup.container.tsx
-1
View File
@@ -107,7 +107,6 @@ const ToggleGroupContainer = memo(
py-[var(--measures-spacing-008)] py-[var(--measures-spacing-008)]
px-[var(--measures-spacing-008)] px-[var(--measures-spacing-008)]
gap-[var(--measures-spacing-008)] gap-[var(--measures-spacing-008)]
font-inter
font-medium font-medium
text-[12px] text-[12px]
leading-[12px] leading-[12px]
app/components/controls/Upload/Upload.view.tsx
+2 -2
View File
@@ -98,7 +98,7 @@ function UploadView({
</div> </div>
{/* Button text */} {/* Button text */}
<div <div
className={`flex flex-col font-inter font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`} className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`}
> >
<p className="leading-[20px]">{uploadButtonLabel}</p> <p className="leading-[20px]">{uploadButtonLabel}</p>
</div> </div>
@@ -106,7 +106,7 @@ function UploadView({
{/* Description text */} {/* Description text */}
<div <div
className={`flex flex-[1_0_0] flex-col font-inter font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`} className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}
> >
<p className="leading-[20px] whitespace-pre-wrap">{hintText}</p> <p className="leading-[20px] whitespace-pre-wrap">{hintText}</p>
</div> </div>
app/components/layout/Accordion/Accordion.view.tsx
+10 -10
View File
@@ -13,28 +13,28 @@ const SIZE_CLASSES: Record<
header: header:
"gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center", "gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center",
title: "text-[14px] font-medium leading-[18px]", title: "text-[14px] font-medium leading-[18px]",
subhead: "text-[12px] leading-[14px]", subhead: "text-x-small-label",
}, },
/** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */ /** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */
m: { m: {
header: header:
"gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center", "gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center",
title: "text-[18px] font-medium leading-6", title: "text-large-label",
subhead: "text-[14px] leading-[18px]", subhead: "text-[14px] leading-[18px] font-medium",
}, },
l: { l: {
header: header:
"gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center", "gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center",
/** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */ /** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */
title: "text-[24px] font-normal leading-7", title: "text-x-large-label",
subhead: "text-[18px] leading-6", subhead: "text-large-label",
}, },
}; };
const PANEL_CLASSES: Record<AccordionSizeValue, string> = { const PANEL_CLASSES: Record<AccordionSizeValue, string> = {
s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] font-inter text-[14px] font-normal leading-5 text-[var(--color-content-default-secondary,#d2d2d2)]", s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] text-small-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
m: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-024)] font-inter text-[16px] font-normal leading-6 text-[var(--color-content-default-secondary,#d2d2d2)]", m: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-024)] text-medium-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
l: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-032)] font-inter text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]", l: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-032)] text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]",
}; };
function withLgClasses(base: string, lg: string): string { function withLgClasses(base: string, lg: string): string {
@@ -124,13 +124,13 @@ function AccordionView({
> >
<span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]"> <span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]">
<span <span
className={`font-inter text-[var(--color-content-default-primary,white)] ${sizeClass.title}`} className={`text-[var(--color-content-default-primary,white)] ${sizeClass.title}`}
> >
{title} {title}
</span> </span>
{subhead ? ( {subhead ? (
<span <span
className={`font-inter font-medium text-[var(--color-content-default-tertiary,#b4b4b4)] ${sizeClass.subhead}`} className={`font-medium text-[var(--color-content-default-tertiary,#b4b4b4)] ${sizeClass.subhead}`}
> >
{subhead} {subhead}
</span> </span>
app/components/layout/ListItem/ListItem.view.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const ListItemView = memo(function ListItemView({
<Icon name={leadingIcon} size={24} /> <Icon name={leadingIcon} size={24} />
</span> </span>
<span <span
className={`min-w-0 flex-1 text-left font-inter text-[12px] font-normal leading-4 whitespace-normal ${contentTone}`} className={`min-w-0 flex-1 text-left text-x-small-paragraph whitespace-normal ${contentTone}`}
> >
{label} {label}
</span> </span>
app/components/layout/listSizeLayout.ts
+6 -6
View File
@@ -42,18 +42,18 @@ export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
shell: `${rowShellBase} min-h-0 gap-1.5 py-[var(--spacing-scale-012)]`, shell: `${rowShellBase} min-h-0 gap-1.5 py-[var(--spacing-scale-012)]`,
textCol: "flex min-w-0 flex-1 flex-col items-start justify-center", textCol: "flex min-w-0 flex-1 flex-col items-start justify-center",
title: title:
"min-w-0 flex-1 font-inter text-sm font-medium leading-[18px] text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-sm font-medium leading-[18px] text-[var(--color-content-default-primary)]",
description: description:
"w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-default-secondary)]", "w-full text-x-small-paragraph text-[var(--color-content-default-secondary)]",
rowFigma: FIGMA_LIST_ENTRY_ROW.s, rowFigma: FIGMA_LIST_ENTRY_ROW.s,
}, },
m: { m: {
shell: `${rowShellBase} min-h-16 gap-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)]`, shell: `${rowShellBase} min-h-16 gap-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)]`,
textCol: "flex min-w-0 flex-1 flex-col items-start justify-center", textCol: "flex min-w-0 flex-1 flex-col items-start justify-center",
title: title:
"min-w-0 flex-1 font-inter text-lg font-medium leading-6 text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-large-label text-[var(--color-content-default-primary)]",
description: description:
"w-full font-inter text-base font-normal leading-6 text-[var(--color-content-default-secondary)]", "w-full text-medium-paragraph text-[var(--color-content-default-secondary)]",
rowFigma: FIGMA_LIST_ENTRY_ROW.m, rowFigma: FIGMA_LIST_ENTRY_ROW.m,
}, },
l: { l: {
@@ -61,9 +61,9 @@ export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
textCol: textCol:
"flex min-w-0 flex-1 flex-col items-start justify-center gap-[var(--spacing-scale-004)]", "flex min-w-0 flex-1 flex-col items-start justify-center gap-[var(--spacing-scale-004)]",
title: title:
"min-w-0 flex-1 font-inter text-2xl font-normal leading-7 text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-x-large-label text-[var(--color-content-default-primary)]",
description: description:
"w-full font-inter text-lg font-normal leading-[1.3] text-[var(--color-content-default-secondary)]", "w-full text-large-paragraph text-[var(--color-content-default-secondary)]",
rowFigma: FIGMA_LIST_ENTRY_ROW.l, rowFigma: FIGMA_LIST_ENTRY_ROW.l,
}, },
}; };
app/components/modals/Alert/Alert.container.tsx
+8 -8
View File
@@ -28,17 +28,17 @@ function layoutFor(
return { return {
containerClasses, containerClasses,
titleClasses: titleClasses:
"font-inter text-[14px] leading-[18px] font-medium tracking-[0%]", "text-[14px] leading-[18px] font-medium tracking-[0%]",
descriptionClasses: descriptionClasses:
"font-inter text-[14px] leading-[20px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]", "text-small-paragraph mt-[var(--spacing-scale-004)]",
}; };
} }
return { return {
containerClasses, containerClasses,
titleClasses: titleClasses:
"font-inter text-[18px] leading-[24px] font-medium tracking-[0%]", "text-large-label",
descriptionClasses: descriptionClasses:
"font-inter text-[18px] leading-[1.3] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]", "text-large-paragraph mt-[var(--spacing-scale-004)]",
}; };
} }
@@ -47,18 +47,18 @@ function layoutFor(
containerClasses: containerClasses:
"flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid", "flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid",
titleClasses: titleClasses:
"font-inter text-[14px] leading-[18px] font-medium tracking-[0%]", "text-[14px] leading-[18px] font-medium tracking-[0%]",
descriptionClasses: descriptionClasses:
"font-inter text-[14px] leading-[20px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]", "text-small-paragraph mt-[var(--spacing-scale-004)]",
}; };
} }
return { return {
containerClasses: containerClasses:
"flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid", "flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid",
titleClasses: titleClasses:
"font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", "text-medium-label",
descriptionClasses: descriptionClasses:
"font-inter text-[16px] leading-[24px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]", "text-medium-paragraph mt-[var(--spacing-scale-004)]",
}; };
} }
app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx
+4 -4
View File
@@ -76,7 +76,7 @@ export function AskOrganizerInquiryModalView({
belowCard={ belowCard={
<Link <Link
href="/" href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90" className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
onClick={() => onClose()} onClick={() => onClose()}
> >
{copy.backToHome} {copy.backToHome}
@@ -85,10 +85,10 @@ export function AskOrganizerInquiryModalView({
> >
{success ? ( {success ? (
<div className="flex flex-col gap-3 py-2"> <div className="flex flex-col gap-3 py-2">
<p className="font-inter text-[18px] font-semibold leading-[24px] text-[var(--color-content-default-primary)]"> <p className="text-large-label text-[var(--color-content-default-primary)]">
{copy.successTitle} {copy.successTitle}
</p> </p>
<p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)]"> <p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{copy.successDescription} {copy.successDescription}
</p> </p>
</div> </div>
@@ -102,7 +102,7 @@ export function AskOrganizerInquiryModalView({
{formError ? ( {formError ? (
<p <p
role="alert" role="alert"
className="font-inter text-[14px] leading-[20px] text-[var(--color-border-default-negative-primary)]" className="text-small-paragraph text-[var(--color-border-default-negative-primary)]"
> >
{formError} {formError}
</p> </p>
app/components/modals/Login/LoginForm.tsx
+2 -2
View File
@@ -244,7 +244,7 @@ export default function LoginForm({
id={emailErrorId} id={emailErrorId}
role="alert" role="alert"
aria-live="polite" aria-live="polite"
className="font-inter text-[14px] text-[var(--color-border-default-utility-negative)]" className="text-[14px] text-[var(--color-border-default-utility-negative)]"
> >
{emailError} {emailError}
</p> </p>
@@ -259,7 +259,7 @@ export default function LoginForm({
> >
{t("sendMagicLink")} {t("sendMagicLink")}
</Button> </Button>
<p className="text-center font-inter text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)]"> <p className="text-center text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("legalPrefix")} {t("legalPrefix")}
<Link <Link
href={tFooter("legal.termsOfServiceHref")} href={tFooter("legal.termsOfServiceHref")}
app/components/modals/Share/Share.view.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ function ShareChannelTile({ label, onClick, circleClassName, icon }: ShareChanne
> >
{icon} {icon}
</div> </div>
<span className="max-w-[4.5rem] text-center font-inter text-[12px] font-medium leading-4 text-[var(--color-content-default-tertiary)]"> <span className="max-w-[4.5rem] text-center text-x-small-label text-[var(--color-content-default-tertiary)]">
{label} {label}
</span> </span>
</button> </button>
app/components/modals/Tooltip/Tooltip.view.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function TooltipView({
aria-live="polite" aria-live="polite"
id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`} id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`}
> >
<p className="font-inter text-[var(--sizing-350,14px)] leading-[16px] font-medium tracking-[0%] text-[var(--color-content-default-primary)] relative shrink-0"> <p className="text-small-label text-[var(--color-content-default-primary)] relative shrink-0">
{text} {text}
</p> </p>
<div <div
app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function CreateFlowFooterView({
buttonType="ghost" buttonType="ghost"
palette="default" palette="default"
size="xsmall" size="xsmall"
className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]" className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={onBackClick} onClick={onBackClick}
disabled={!onBackClick} disabled={!onBackClick}
> >
app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+4 -4
View File
@@ -7,10 +7,10 @@ import Popover from "../../modals/Popover";
import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types"; import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types";
const outlineButtonClass = const outlineButtonClass =
"md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"; "md:!text-x-small-label !text-xx-small-label !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]";
const exitButtonFigmaClass = const exitButtonFigmaClass =
"!rounded-[var(--radius-measures-radius-full,9999px)] !border-[1.25px] !px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!text-[12px] md:!leading-[14px]"; "!rounded-[var(--radius-measures-radius-full,9999px)] !border-[1.25px] !px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!text-x-small-label";
function KebabIcon({ className = "" }: { className?: string }) { function KebabIcon({ className = "" }: { className?: string }) {
return ( return (
@@ -215,7 +215,7 @@ export function CreateFlowTopNavView({
type="button" type="button"
onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })} onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
ariaLabel={exitButtonText} ariaLabel={exitButtonText}
className={`shrink-0 ${exitButtonFigmaClass} !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px]`} className={`shrink-0 ${exitButtonFigmaClass} !text-xx-small-label !py-[6px] md:!py-[8px]`}
> >
{exitButtonText} {exitButtonText}
</Button> </Button>
@@ -281,7 +281,7 @@ export function CreateFlowTopNavView({
type="button" type="button"
onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })} onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
ariaLabel={exitButtonText} ariaLabel={exitButtonText}
className={`shrink-0 ${exitButtonFigmaClass} !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px]`} className={`shrink-0 ${exitButtonFigmaClass} !text-xx-small-label !py-[6px] md:!py-[8px]`}
> >
{exitButtonText} {exitButtonText}
</Button> </Button>
app/components/navigation/Footer.tsx
+11 -11
View File
@@ -20,15 +20,15 @@ const Footer = memo(() => {
"touch-manipulation [-webkit-tap-highlight-color:transparent] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity duration-150 ease-out"; "touch-manipulation [-webkit-tap-highlight-color:transparent] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity duration-150 ease-out";
const bodyTextClass = const bodyTextClass =
"text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] lg:text-2xl lg:font-normal lg:leading-7"; "text-[var(--color-content-default-primary)] text-medium-label lg:text-x-large-label";
/** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */ /** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`; const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:ml-auto md:self-end text-left md:text-right md:justify-end text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`; const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:ml-auto md:self-end text-left md:text-right md:justify-end text-[var(--color-content-default-primary)] text-medium-label ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-x-large-label`;
/** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */ /** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */
const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`; const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] text-small-paragraph ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-x-small-paragraph md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-small-paragraph lg:text-[var(--color-content-default-primary)]`;
// Schema markup for organization information // Schema markup for organization information
const schemaData = { const schemaData = {
@@ -178,15 +178,15 @@ const Footer = memo(() => {
text-[var(--color-content-default-primary)] text-[var(--color-content-default-primary)]
md:flex-row md:items-start md:justify-between md:gap-[var(--spacing-scale-040)] md:flex-row md:items-start md:justify-between md:gap-[var(--spacing-scale-040)]
md:whitespace-nowrap md:whitespace-nowrap
md:text-xs md:leading-4 md:text-x-small-paragraph
lg:text-sm lg:leading-5" lg:text-small-paragraph"
> >
<p <p
className="w-full font-inter text-sm font-normal leading-5 tracking-[0%] className="w-full text-small-paragraph
text-[var(--color-content-default-secondary)] text-[var(--color-content-default-secondary)]
md:w-auto md:w-auto
md:text-xs md:leading-4 md:text-x-small-paragraph
lg:text-sm lg:leading-5" lg:text-small-paragraph"
> >
<a <a
href={t("license.href")} href={t("license.href")}
@@ -199,15 +199,15 @@ const Footer = memo(() => {
<div <div
className="flex w-full min-w-0 flex-col flex-wrap className="flex w-full min-w-0 flex-col flex-wrap
gap-[var(--spacing-scale-032)] gap-[var(--spacing-scale-032)]
font-inter text-sm text-small-paragraph
text-[var(--color-content-default-primary)] text-[var(--color-content-default-primary)]
md:max-w-[min(100%,396px)] md:max-w-[min(100%,396px)]
md:flex-row md:flex-nowrap md:content-center md:items-center md:justify-end md:flex-row md:flex-nowrap md:content-center md:items-center md:justify-end
md:gap-[var(--spacing-scale-040)] md:gap-[var(--spacing-scale-040)]
md:text-xs md:leading-4 md:text-x-small-paragraph
lg:max-w-none lg:max-w-none
lg:gap-10 lg:gap-10
lg:text-sm lg:leading-5" lg:text-small-paragraph"
> >
<Link href={t("legal.privacyPolicyHref")} className={legalLinkClass}> <Link href={t("legal.privacyPolicyHref")} className={legalLinkClass}>
{t("legal.privacyPolicy")} {t("legal.privacyPolicy")}
app/components/navigation/Link/Link.view.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const FIGMA_ROOT = "21861:21428";
/** Profile & card small viewports: Figma Sizing/300 + label line (350). ≥640px: 18px / 1.3. */ /** Profile & card small viewports: Figma Sizing/300 + label line (350). ≥640px: 18px / 1.3. */
const LINK_TYPOGRAPHY = const LINK_TYPOGRAPHY =
"font-inter font-normal text-[length:var(--sizing-300)] leading-[var(--sizing-350)] min-[640px]:text-[18px] min-[640px]:leading-[1.3]"; "font-normal text-[length:var(--sizing-300)] leading-[var(--sizing-350)] min-[640px]:text-large-paragraph";
function linkFocusRing(theme: LinkThemeValue) { function linkFocusRing(theme: LinkThemeValue) {
return theme === "light" return theme === "light"
app/components/navigation/MenuItem/MenuItem.container.tsx
+5 -5
View File
@@ -51,12 +51,12 @@ const MenuItemContainer = memo<MenuItemProps>(
string string
> = { > = {
"X Small": "X Small":
"font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", "text-xx-small-label",
Small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", Small: "text-x-small-label",
Medium: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", Medium: "text-x-small-label",
Large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", Large: "text-medium-label",
"X Large": "X Large":
"font-inter text-[24px] leading-[28px] font-normal tracking-[0%]", "text-x-large-label",
}; };
// State styles for Default mode (yellow text on dark background) // State styles for Default mode (yellow text on dark background)
app/components/navigation/NavigationItem/NavigationItem.container.tsx
+2 -2
View File
@@ -38,8 +38,8 @@ const NavigationItemContainer = memo<NavigationItemProps>(
// Text styles based on size // Text styles based on size
const textStyles: Record<string, string> = { const textStyles: Record<string, string> = {
default: default:
"font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", "text-xx-small-label",
xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", xsmall: "text-xx-small-label",
}; };
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`; const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
app/components/sections/AskOrganizer/AskOrganizer.view.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ function AskOrganizerView({
size="small" size="small"
buttonType="filled" buttonType="filled"
palette={buttonPalette} palette={buttonPalette}
className="!px-[var(--spacing-scale-010)] md:!px-[var(--spacing-scale-016)] md:!py-[var(--spacing-scale-012)] md:!text-[16px] md:!leading-[20px]" className="!px-[var(--spacing-scale-010)] md:!px-[var(--spacing-scale-016)] md:!py-[var(--spacing-scale-012)] md:!text-medium-label"
onClick={onContactClick} onClick={onContactClick}
ariaLabel={ctaAriaLabel} ariaLabel={ctaAriaLabel}
data-testid="ask-organizer-cta" data-testid="ask-organizer-cta"
app/components/sections/ContentBanner/ContentBanner.view.tsx
+2 -2
View File
@@ -37,12 +37,12 @@ function ContentBannerGuideView({
<div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]"> <div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
<h1 <h1
id="content-banner-title" id="content-banner-title"
className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-[44px]" className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-medium-display"
> >
{title} {title}
</h1> </h1>
{description ? ( {description ? (
<p className="w-full font-inter font-normal text-[16px] leading-[130%] sm:text-[18px]"> <p className="w-full font-normal text-[16px] leading-[130%] sm:text-large-paragraph">
{description} {description}
</p> </p>
) : null} ) : null}
app/components/sections/Groups/Groups.view.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps
<div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]"> <div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]">
<h2 <h2
id={headingId} id={headingId}
className="w-full shrink-0 text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-10 lg:text-[40px] lg:leading-[52px]" className="w-full shrink-0 text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading"
> >
{title} {title}
</h2> </h2>
app/components/sections/QuoteBlock/QuoteBlock.container.tsx
+3 -3
View File
@@ -46,11 +46,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
avatar: avatar:
"md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]", "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
quote: quote:
"text-[18px] leading-[120%] md:text-[36px] md:leading-[110%] md:tracking-[0px] lg:text-[52px] xl:text-[64px]", "text-xx-small-display md:text-small-display lg:text-large-display xl:text-x-large-display",
author: author:
"text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]", "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
source: source:
"text-[12px] leading-[120%] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] xl:text-[32px]", "text-x-small-uppercase md:text-large-uppercase lg:text-x-large-uppercase xl:text-xx-large-uppercase",
showDecor: true, showDecor: true,
}, },
extended: { extended: {
app/components/sections/QuoteBlock/QuoteBlock.view.tsx
+3 -3
View File
@@ -25,7 +25,7 @@ function QuoteBlockView({
if (config.statementLayout) { if (config.statementLayout) {
const statementTextClass = const statementTextClass =
"font-bricolage-grotesque text-[28px] font-bold leading-9 tracking-[var(--text-xx-large-heading--letter-spacing)] text-[var(--color-surface-default-tertiary)] md:text-[length:var(--text-xx-large-heading)] md:leading-[length:var(--text-xx-large-heading--line-height)]"; "font-bricolage-grotesque text-medium-heading text-[var(--color-surface-default-tertiary)] md:text-xx-large-heading";
return ( return (
<section <section
@@ -142,7 +142,7 @@ function QuoteBlockView({
<footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]"> <footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
<cite <cite
id={authorId} id={authorId}
className={`font-inter font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`} className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
> >
{author} {author}
</cite> </cite>
@@ -151,7 +151,7 @@ function QuoteBlockView({
data-qopen="&ldquo;" data-qopen="&ldquo;"
data-qclose="&rdquo;" data-qclose="&rdquo;"
className={[ className={[
"font-inter font-normal", "font-normal",
config.source, config.source,
"text-[var(--color-content-inverse-primary)] uppercase", "text-[var(--color-content-inverse-primary)] uppercase",
"pl-[0.6em] -indent-[0.6em]", "pl-[0.6em] -indent-[0.6em]",
app/components/sections/RelatedArticles/RelatedArticles.view.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ export function RelatedArticlesView({
} }
> >
{isUseCases && useCasesHeadingLines?.length ? ( {isUseCases && useCasesHeadingLines?.length ? (
<h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-[40px] lg:text-[40px] lg:leading-[52px]"> <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading">
{/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */} {/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */}
<span className="flex flex-col md:hidden"> <span className="flex flex-col md:hidden">
{useCasesHeadingLines.map((line, index) => ( {useCasesHeadingLines.map((line, index) => (
@@ -52,7 +52,7 @@ export function RelatedArticlesView({
</h2> </h2>
) : ( ) : (
<h2 <h2
className={`text-center text-[32px] font-medium leading-[110%] lg:text-[44px] ${ className={`text-center font-medium text-[32px] leading-[110%] lg:text-medium-display ${
headingSurface === "onLight" headingSurface === "onLight"
? "text-[var(--color-content-default-primary)]" ? "text-[var(--color-content-default-primary)]"
: "text-[var(--color-content-inverse-primary)]" : "text-[var(--color-content-inverse-primary)]"
app/components/sections/Stats/Stats.view.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ function StatsView({
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-010)] sm:gap-[var(--spacing-scale-032)]"> <div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-010)] sm:gap-[var(--spacing-scale-032)]">
<h2 <h2
id={headingId} id={headingId}
className="max-w-[116px] font-inter text-[24px] font-normal leading-[32px] md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0" className="max-w-[116px] text-x-large-paragraph md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
> >
<span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]"> <span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]">
{titlePrefix ? ( {titlePrefix ? (
app/components/type/ContentLockup/ContentLockup.container.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ const ContentLockupContainer = memo<ContentLockupProps>(
subtitle: subtitle:
"text-small-paragraph md:text-medium-paragraph text-[var(--color-content-default-secondary)]", "text-small-paragraph md:text-medium-paragraph text-[var(--color-content-default-secondary)]",
description: description:
"font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]", "font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
shape: shape:
"w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]", "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
}, },
@@ -105,7 +105,7 @@ const ContentLockupContainer = memo<ContentLockupProps>(
subtitle: subtitle:
"font-space-grotesk text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]", "font-space-grotesk text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]",
description: description:
"font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]", "font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-default-secondary)]",
shape: shape:
"w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]", "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
}, },
app/components/type/TripleStep/TripleStep.view.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ function TripleStepView({
buttonType="outline" buttonType="outline"
palette="default" palette="default"
size="medium" size="medium"
className="max-md:!px-[var(--spacing-scale-012)] max-md:!py-[var(--spacing-scale-010)] max-md:!text-[14px] max-md:!leading-[18px] md:!p-[var(--spacing-scale-012)] md:!text-[16px] md:!leading-5 md:!gap-[var(--spacing-scale-006)]" className="max-md:!px-[var(--spacing-scale-012)] max-md:!py-[var(--spacing-scale-010)] max-md:!text-[14px] max-md:!leading-[18px] md:!p-[var(--spacing-scale-012)] md:!text-medium-label md:!gap-[var(--spacing-scale-006)]"
> >
{ctaText} {ctaText}
</Button> </Button>
app/components/utility/Tag/Tag.view.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function TagView({ variant, children, className }: TagViewProps) {
return ( return (
<span <span
className={`inline-flex shrink-0 items-center justify-center rounded-[2px] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`} className={`inline-flex shrink-0 items-center justify-center rounded-[2px] px-1 py-0.5 text-xx-small-label uppercase ${bgClass} ${textClass} ${className}`}
role="status" role="status"
> >
{children} {children}
app/contexts/AuthModalContext.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export function AuthModalProvider({ children }: { children: ReactNode }) {
belowCard={ belowCard={
<Link <Link
href="/" href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90" className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
onClick={() => closeLogin()} onClick={() => closeLogin()}
> >
{t("backToHome")} {t("backToHome")}
app/not-found.tsx
+3 -3
View File
@@ -63,12 +63,12 @@ export default function NotFound() {
/> />
<h1 <h1
id="not-found-heading" id="not-found-heading"
className="mt-[var(--spacing-scale-032)] max-w-full text-center font-bricolage-grotesque text-[2.5rem] font-medium leading-[1.1] text-[var(--color-content-default-primary)] min-[400px]:text-[44px] min-[400px]:leading-[1.1]" className="mt-[var(--spacing-scale-032)] max-w-full text-center font-bricolage-grotesque font-medium leading-[1.1] text-[40px] text-[var(--color-content-default-primary)] min-[400px]:text-medium-display"
> >
{t("pages.notFoundPage.heading")} {t("pages.notFoundPage.heading")}
</h1> </h1>
</div> </div>
<p className="mt-[var(--spacing-scale-016)] w-full max-w-[443px] text-center font-inter text-lg font-normal leading-[1.3] text-[var(--color-content-default-secondary)]"> <p className="mt-[var(--spacing-scale-016)] w-full max-w-[443px] text-center text-large-paragraph text-[var(--color-content-default-secondary)]">
{t("pages.notFoundPage.description")} {t("pages.notFoundPage.description")}
</p> </p>
@@ -119,7 +119,7 @@ export default function NotFound() {
</Link> </Link>
))} ))}
</div> </div>
<p className="w-full text-center font-inter text-[13px] font-normal leading-[1.2] text-[var(--color-gray-500)]"> <p className="w-full text-center text-[13px] font-normal leading-[1.2] text-[var(--color-gray-500)]">
{t("pages.notFoundPage.templateHint")} {t("pages.notFoundPage.templateHint")}
</p> </p>
</div> </div>
tests/components/ContentBanner.test.tsx
+1 -1
View File
@@ -157,7 +157,7 @@ describe("ContentBanner", () => {
const title = screen.getByRole("heading", { name: "Test Article" }); const title = screen.getByRole("heading", { name: "Test Article" });
expect(title).toBeInTheDocument(); expect(title).toBeInTheDocument();
expect(title).toHaveClass("sm:text-[24px]", "md:text-[32px]"); expect(title).toHaveClass("sm:text-x-small-display", "md:text-[32px]");
expect(screen.getByText("Sample Operating Manual")).toBeInTheDocument(); expect(screen.getByText("Sample Operating Manual")).toBeInTheDocument();
const copyColumn = container.querySelector('[data-node-id="19189:9171"]'); const copyColumn = container.querySelector('[data-node-id="19189:9171"]');
expect(copyColumn).toHaveClass("lg:max-w-[365px]"); expect(copyColumn).toHaveClass("lg:max-w-[365px]");
tests/pages/blog.test.jsx
+4 -8
View File
@@ -253,8 +253,7 @@ describe("BlogPostPage", () => {
expect(contentDiv).toHaveClass( expect(contentDiv).toHaveClass(
"text-[var(--color-content-inverse-primary)]", "text-[var(--color-content-inverse-primary)]",
); );
expect(contentDiv).toHaveClass("text-[16px]"); expect(contentDiv).toHaveClass("text-medium-paragraph");
expect(contentDiv).toHaveClass("leading-[24px]");
const article = contentDiv?.closest("article"); const article = contentDiv?.closest("article");
expect(article).toHaveClass("p-[var(--spacing-scale-024)]"); expect(article).toHaveClass("p-[var(--spacing-scale-024)]");
@@ -271,12 +270,9 @@ describe("BlogPostPage", () => {
const contentDiv = screen const contentDiv = screen
.getByText(/This is the article content/) .getByText(/This is the article content/)
.closest("div.post-body"); .closest("div.post-body");
expect(contentDiv).toHaveClass("sm:text-[18px]"); expect(contentDiv).toHaveClass("sm:text-large-paragraph");
expect(contentDiv).toHaveClass("sm:leading-[130%]"); expect(contentDiv).toHaveClass("lg:text-x-large-paragraph");
expect(contentDiv).toHaveClass("lg:text-[24px]"); expect(contentDiv).toHaveClass("xl:text-xx-large-paragraph");
expect(contentDiv).toHaveClass("lg:leading-[32px]");
expect(contentDiv).toHaveClass("xl:text-[32px]");
expect(contentDiv).toHaveClass("xl:leading-[40px]");
}); });
it("applies responsive max-width constraints", async () => { it("applies responsive max-width constraints", async () => {
tests/unit/ContentContainer.test.jsx
+7 -17
View File
@@ -74,8 +74,7 @@ describe("ContentContainer", () => {
expect(title).toHaveClass( expect(title).toHaveClass(
"font-bricolage", "font-bricolage",
"font-medium", "font-medium",
"text-[18px]", "text-xx-small-display",
"leading-[120%]",
"text-[var(--color-content-inverse-brand-royal)]", "text-[var(--color-content-inverse-brand-royal)]",
); );
}); });
@@ -86,10 +85,7 @@ describe("ContentContainer", () => {
const description = screen.getByText(/This is a test article description/); const description = screen.getByText(/This is a test article description/);
expect(description).toBeInTheDocument(); expect(description).toBeInTheDocument();
expect(description).toHaveClass( expect(description).toHaveClass(
"font-inter", "text-x-small-paragraph",
"font-normal",
"text-[12px]",
"leading-[16px]",
"text-[var(--color-content-inverse-brand-royal)]", "text-[var(--color-content-inverse-brand-royal)]",
); );
}); });
@@ -148,19 +144,13 @@ describe("ContentContainer", () => {
const author = screen.getByText("Test Author"); const author = screen.getByText("Test Author");
expect(author).toHaveClass( expect(author).toHaveClass(
"font-inter", "text-xx-small-paragraph",
"font-normal",
"text-[10px]",
"leading-[14px]",
"text-[var(--color-content-inverse-brand-royal)]", "text-[var(--color-content-inverse-brand-royal)]",
); );
const date = screen.getByText("April 2025"); const date = screen.getByText("April 2025");
expect(date).toHaveClass( expect(date).toHaveClass(
"font-inter", "text-xx-small-paragraph",
"font-normal",
"text-[10px]",
"leading-[14px]",
"text-[var(--color-content-inverse-brand-royal)]", "text-[var(--color-content-inverse-brand-royal)]",
); );
}); });
@@ -217,7 +207,7 @@ describe("ContentContainer", () => {
expect(title).toHaveClass("text-[18px]", "leading-[22px]"); expect(title).toHaveClass("text-[18px]", "leading-[22px]");
const description = screen.getByText(/This is a test article description/); const description = screen.getByText(/This is a test article description/);
expect(description).toHaveClass("text-[12px]", "leading-[16px]"); expect(description).toHaveClass("text-x-small-paragraph");
}); });
it("applies correct responsive sizing for responsive breakpoint", () => { it("applies correct responsive sizing for responsive breakpoint", () => {
@@ -227,10 +217,10 @@ describe("ContentContainer", () => {
expect(icon).toHaveClass("w-[60px]", "h-[30px]"); expect(icon).toHaveClass("w-[60px]", "h-[30px]");
const title = screen.getByText("Test Article Title"); const title = screen.getByText("Test Article Title");
expect(title).toHaveClass("text-[18px]", "leading-[120%]"); expect(title).toHaveClass("text-xx-small-display");
const description = screen.getByText(/This is a test article description/); const description = screen.getByText(/This is a test article description/);
expect(description).toHaveClass("text-[12px]", "leading-[16px]"); expect(description).toHaveClass("text-x-small-paragraph");
}); });
it("has proper accessibility attributes", () => { it("has proper accessibility attributes", () => {
tests/unit/QuoteBlock.test.jsx
+4 -4
View File
@@ -197,7 +197,7 @@ describe("QuoteBlock Component", () => {
render(<QuoteBlock quote="Test quote" author="Test Author" />); render(<QuoteBlock quote="Test quote" author="Test Author" />);
const authorElement = screen.getByText("Test Author"); const authorElement = screen.getByText("Test Author");
expect(authorElement).toHaveClass("font-inter", "font-normal", "uppercase"); expect(authorElement).toHaveClass("font-normal", "uppercase");
}); });
test("applies responsive text sizing", () => { test("applies responsive text sizing", () => {
@@ -207,9 +207,9 @@ describe("QuoteBlock Component", () => {
const quoteElement = screen.getByText("Test quote"); const quoteElement = screen.getByText("Test quote");
expect(quoteElement).toHaveClass( expect(quoteElement).toHaveClass(
"text-[18px]", "text-xx-small-display",
"md:text-[36px]", "md:text-small-display",
"lg:text-[52px]", "lg:text-large-display",
); );
}); });
tests/unit/Rule.test.jsx
+2 -2
View File
@@ -188,11 +188,11 @@ describe("Rule Component", () => {
render(<Rule {...defaultProps} size="L" />); render(<Rule {...defaultProps} size="L" />);
const heading = screen.getByRole("heading", { level: 3 }); const heading = screen.getByRole("heading", { level: 3 });
// Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and X Large Heading
expect(heading?.className).toMatch( expect(heading?.className).toMatch(
/min-\[1440px\]:font-bricolage-grotesque/, /min-\[1440px\]:font-bricolage-grotesque/,
); );
expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/); expect(heading?.className).toMatch(/min-\[1440px\]:text-x-large-heading/);
}); });
it("renders expanded state with categories", () => { it("renders expanded state with categories", () => {