From 2321a1e761f99e6c43f6abed10b23c33a4c1cbd4 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Mon, 17 Aug 2026 11:40:10 -0600 Subject: [PATCH] Adopt remaining typography token classes (CR-24) Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review. Co-authored-by: Cursor --- .../components/ApplicableScopeField.tsx | 4 +-- .../CustomMethodCardWizardBlocksList.view.tsx | 4 +-- .../informational/InformationalScreen.tsx | 2 +- .../select/ConfirmStakeholdersScreen.tsx | 2 +- .../screens/select/CoreValuesSelectScreen.tsx | 2 +- .../PublishedStakeholdersManagePanel.tsx | 12 ++++---- .../utils/createFlowFooterClassNames.ts | 2 +- app/(app)/login/page.tsx | 4 +-- app/(app)/profile/ProfilePageClient.tsx | 2 +- .../profile/_components/ProfilePage.view.tsx | 12 ++++---- app/(dev)/components-preview/page.tsx | 26 ++++++++--------- .../_components/LegalDocumentPage.tsx | 4 +-- app/(marketing)/blog/[slug]/page.tsx | 2 +- app/(marketing)/how-it-works/page.tsx | 2 +- app/components/buttons/Button/Button.tsx | 10 +++---- .../InlineTextButton/InlineTextButton.tsx | 2 +- .../cards/CardStack/CardStack.view.tsx | 6 ++-- app/components/cards/Icon/Icon.view.tsx | 4 +-- app/components/cards/Mini/Mini.view.tsx | 2 +- app/components/cards/Rule/Rule.view.tsx | 28 +++++++++---------- .../cards/Selection/Selection.view.tsx | 10 +++---- app/components/cards/Stat/Stat.view.tsx | 6 ++-- .../TemplateChipDetailModal.tsx | 4 +-- .../ContentContainer.container.tsx | 14 +++++----- .../AddCustomField/AddCustomField.view.tsx | 4 +-- .../controls/Checkbox/Checkbox.view.tsx | 2 +- .../CheckboxGroup/CheckboxGroup.view.tsx | 4 +-- app/components/controls/Chip/Chip.view.tsx | 10 +++---- .../controls/Incrementer/Incrementer.view.tsx | 2 +- .../InfoMessageBox/InfoMessageBox.view.tsx | 4 +-- .../InputWithCounter.view.tsx | 6 ++-- .../controls/MultiSelect/MultiSelect.view.tsx | 2 +- .../controls/RadioButton/RadioButton.view.tsx | 2 +- .../controls/RadioGroup/RadioGroup.view.tsx | 4 +-- .../controls/SelectInput/SelectInput.view.tsx | 12 ++++---- .../SelectOption/SelectOption.container.tsx | 8 +++--- .../controls/Switch/Switch.container.tsx | 5 +--- .../controls/TextArea/TextArea.container.tsx | 20 ++++++------- .../controls/TextArea/TextArea.view.tsx | 4 +-- .../TextInput/TextInput.container.tsx | 2 +- .../controls/TextInput/TextInput.view.tsx | 4 +-- .../controls/Toggle/Toggle.container.tsx | 7 ++--- .../ToggleGroup/ToggleGroup.container.tsx | 1 - .../controls/Upload/Upload.view.tsx | 4 +-- .../layout/Accordion/Accordion.view.tsx | 20 ++++++------- .../layout/ListItem/ListItem.view.tsx | 2 +- app/components/layout/listSizeLayout.ts | 12 ++++---- .../modals/Alert/Alert.container.tsx | 18 ++++++------ .../AskOrganizerInquiryModal.view.tsx | 8 +++--- app/components/modals/Login/LoginForm.tsx | 4 +-- app/components/modals/Share/Share.view.tsx | 2 +- .../modals/Tooltip/Tooltip.view.tsx | 2 +- .../CreateFlowFooter.view.tsx | 2 +- .../CreateFlowTopNav.view.tsx | 8 +++--- app/components/navigation/Footer.tsx | 22 +++++++-------- app/components/navigation/Link/Link.view.tsx | 2 +- .../MenuItem/MenuItem.container.tsx | 10 +++---- .../NavigationItem.container.tsx | 4 +-- .../AskOrganizer/AskOrganizer.view.tsx | 2 +- .../ContentBanner/ContentBanner.view.tsx | 4 +-- .../sections/Groups/Groups.view.tsx | 2 +- .../QuoteBlock/QuoteBlock.container.tsx | 6 ++-- .../sections/QuoteBlock/QuoteBlock.view.tsx | 6 ++-- .../RelatedArticles/RelatedArticles.view.tsx | 4 +-- app/components/sections/Stats/Stats.view.tsx | 2 +- .../ContentLockup/ContentLockup.container.tsx | 4 +-- .../type/TripleStep/TripleStep.view.tsx | 2 +- app/components/utility/Tag/Tag.view.tsx | 2 +- app/contexts/AuthModalContext.tsx | 2 +- app/not-found.tsx | 6 ++-- tests/components/ContentBanner.test.tsx | 2 +- tests/pages/blog.test.jsx | 12 +++----- tests/unit/ContentContainer.test.jsx | 24 +++++----------- tests/unit/QuoteBlock.test.jsx | 8 +++--- tests/unit/Rule.test.jsx | 4 +-- 75 files changed, 229 insertions(+), 252 deletions(-) diff --git a/app/(app)/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx index e9a666b..dff8c6b 100644 --- a/app/(app)/create/components/ApplicableScopeField.tsx +++ b/app/(app)/create/components/ApplicableScopeField.tsx @@ -105,13 +105,13 @@ function ApplicableScopeFieldComponent({ }} placeholder={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)]" /> ) : ( diff --git a/app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx b/app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx index e74d6cf..0e451d6 100644 --- a/app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx +++ b/app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx @@ -109,7 +109,7 @@ export function PublishedStakeholdersManagePanel({
{bannerError ? (

{bannerError} @@ -117,15 +117,15 @@ export function PublishedStakeholdersManagePanel({ ) : null} {loadError ? ( -

+

{t("managePublished.loadFailed")}

) : items === null ? ( -

+

{t("managePublished.loading")}

) : items.length === 0 ? ( -

+

{t("managePublished.empty")}

) : ( @@ -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" >
- + {row.email} - + {row.status === "pending" ? t("managePublished.pending") : t("managePublished.accepted")} diff --git a/app/(app)/create/utils/createFlowFooterClassNames.ts b/app/(app)/create/utils/createFlowFooterClassNames.ts index f14f2b0..ba3ae73 100644 --- a/app/(app)/create/utils/createFlowFooterClassNames.ts +++ b/app/(app)/create/utils/createFlowFooterClassNames.ts @@ -11,7 +11,7 @@ * exposes a native size that matches, this module should collapse. */ 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)] " + "!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"; diff --git a/app/(app)/login/page.tsx b/app/(app)/login/page.tsx index 3a67fa4..10bebd6 100644 --- a/app/(app)/login/page.tsx +++ b/app/(app)/login/page.tsx @@ -14,7 +14,7 @@ function LoginLoadingFallback() { const t = useTranslation("pages.login"); return (
-

+

{t("loadingFallback")}

@@ -42,7 +42,7 @@ function LoginWithSearchParams() { belowCard={ {t("backToHome")} diff --git a/app/(app)/profile/ProfilePageClient.tsx b/app/(app)/profile/ProfilePageClient.tsx index 765eb58..3d05b03 100644 --- a/app/(app)/profile/ProfilePageClient.tsx +++ b/app/(app)/profile/ProfilePageClient.tsx @@ -303,7 +303,7 @@ export default function ProfilePageClient() { if (!sessionLoaded) { return (
-

+

{t("loading")}

diff --git a/app/(app)/profile/_components/ProfilePage.view.tsx b/app/(app)/profile/_components/ProfilePage.view.tsx index 49e75e8..09f80f2 100644 --- a/app/(app)/profile/_components/ProfilePage.view.tsx +++ b/app/(app)/profile/_components/ProfilePage.view.tsx @@ -81,7 +81,7 @@ export type ProfilePageViewProps = { * mobile: smaller Bricolage. */ 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 = { onSignIn: () => void; @@ -122,11 +122,11 @@ export function ProfilePageSignedOutView({ <>

{t("pageTitle")}

-

+

{t("signInPrompt")}

@@ -275,11 +275,11 @@ export function ProfilePageView({ <>

{welcomeTitle}

-

+

{welcomeBody}

@@ -381,7 +381,7 @@ export function ProfilePageView({ ))}
{rules.length === 0 && !rulesError && !showDraftCard ? ( -

+

{t("yourRulesEmpty")}

) : null} diff --git a/app/(dev)/components-preview/page.tsx b/app/(dev)/components-preview/page.tsx index f4df3c3..c42feff 100644 --- a/app/(dev)/components-preview/page.tsx +++ b/app/(dev)/components-preview/page.tsx @@ -45,7 +45,7 @@ export default function ComponentsPreview() {

Component Preview

-

+

Navigation Link (Figma 21861:21428) and List (21863:45631 / 45493 / 4405) with ListEntry (21844:4118). Use Tab and hover to review states. @@ -53,12 +53,12 @@ export default function ComponentsPreview() {

-

+

Link

-

+

Light surface

@@ -105,7 +105,7 @@ export default function ComponentsPreview() {
-

+

Dark surface

@@ -154,22 +154,22 @@ export default function ComponentsPreview() {
-

+

Divider

-

+

Utility / Divider (450:1941). List rows use the Content line; Menu is slightly higher-contrast.

-

+

Content

-

+

Menu

@@ -178,16 +178,16 @@ export default function ComponentsPreview() {
-

+

List

-

+

List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row: ListEntry (21844:4118).

-

+

Small

@@ -195,7 +195,7 @@ export default function ComponentsPreview() {
-

+

Medium

@@ -203,7 +203,7 @@ export default function ComponentsPreview() {
-

+

Large

diff --git a/app/(marketing)/_components/LegalDocumentPage.tsx b/app/(marketing)/_components/LegalDocumentPage.tsx index 1e28c3b..5eabb12 100644 --- a/app/(marketing)/_components/LegalDocumentPage.tsx +++ b/app/(marketing)/_components/LegalDocumentPage.tsx @@ -17,7 +17,7 @@ type LegalDocumentPageProps = { const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g; 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"; @@ -161,7 +161,7 @@ export default function LegalDocumentPage({ >
{page.banner.author} diff --git a/app/(marketing)/blog/[slug]/page.tsx b/app/(marketing)/blog/[slug]/page.tsx index 1ce8706..e768339 100644 --- a/app/(marketing)/blog/[slug]/page.tsx +++ b/app/(marketing)/blog/[slug]/page.tsx @@ -252,7 +252,7 @@ export default async function BlogPostPage({ params }: PageProps) { sm:px-0 sm:py-[var(--spacing-scale-032)] " > -
+
diff --git a/app/(marketing)/how-it-works/page.tsx b/app/(marketing)/how-it-works/page.tsx index b565907..7a88575 100644 --- a/app/(marketing)/how-it-works/page.tsx +++ b/app/(marketing)/how-it-works/page.tsx @@ -111,7 +111,7 @@ export default function HowItWorksPage() {
diff --git a/app/components/buttons/Button/Button.tsx b/app/components/buttons/Button/Button.tsx index 5156a34..28779be 100644 --- a/app/components/buttons/Button/Button.tsx +++ b/app/components/buttons/Button/Button.tsx @@ -106,11 +106,11 @@ const Button = memo( }; const fontStyles: Record = { - xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", - small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", - medium: "font-inter text-[14px] leading-[16px] font-medium tracking-[0%]", - large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", - xlarge: "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]", + xsmall: "text-xx-small-label", + small: "text-x-small-label", + medium: "text-small-label", + large: "text-medium-label", + xlarge: "text-x-large-label", }; const variantStyles: Record = { diff --git a/app/components/buttons/InlineTextButton/InlineTextButton.tsx b/app/components/buttons/InlineTextButton/InlineTextButton.tsx index 56903a7..b7f9425 100644 --- a/app/components/buttons/InlineTextButton/InlineTextButton.tsx +++ b/app/components/buttons/InlineTextButton/InlineTextButton.tsx @@ -46,7 +46,7 @@ function InlineTextButtonComponent({ const baseClasses = [ "cursor-pointer border-none bg-transparent p-0", 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", "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(" "); diff --git a/app/components/cards/CardStack/CardStack.view.tsx b/app/components/cards/CardStack/CardStack.view.tsx index 95685c0..2f7f6b8 100644 --- a/app/components/cards/CardStack/CardStack.view.tsx +++ b/app/components/cards/CardStack/CardStack.view.tsx @@ -48,7 +48,7 @@ function CardStackAddCardButton({ type="button" onClick={onClick} 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)]" > @@ -474,7 +474,7 @@ export function CardStackView({ diff --git a/app/components/cards/Icon/Icon.view.tsx b/app/components/cards/Icon/Icon.view.tsx index cee210b..175afbf 100644 --- a/app/components/cards/Icon/Icon.view.tsx +++ b/app/components/cards/Icon/Icon.view.tsx @@ -35,13 +35,13 @@ export function IconView({ {/* Title — Figma XX Large / Label (32 / 36) */}

{title}

{/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md– +

{description}

diff --git a/app/components/cards/Mini/Mini.view.tsx b/app/components/cards/Mini/Mini.view.tsx index 9a115f5..663f99b 100644 --- a/app/components/cards/Mini/Mini.view.tsx +++ b/app/components/cards/Mini/Mini.view.tsx @@ -64,7 +64,7 @@ function MiniView({ {children}
-
+
{labelLine1 && labelLine2 ? ( <>
{labelLine1}
diff --git a/app/components/cards/Rule/Rule.view.tsx b/app/components/cards/Rule/Rule.view.tsx index a8ecfe9..8f28497 100644 --- a/app/components/cards/Rule/Rule.view.tsx +++ b/app/components/cards/Rule/Rule.view.tsx @@ -108,27 +108,27 @@ export function RuleView({ const showRecommendedTag = recommended && !expanded; const titleClass = templateGridFigmaShell ? ` - max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px] - 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-[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-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px] + max-[639px]:text-x-small-heading + 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]:text-x-large-heading + 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] - 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-[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-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px] + max-[639px]:text-x-small-heading + 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]:text-small-heading + min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading `; const descriptionClass = isLarge - ? "font-inter font-medium text-[18px] leading-[24px]" + ? "text-large-label" : isMedium ? templateGridFigmaShell - ? "font-inter font-medium text-[14px] leading-[16px] min-[1024px]:max-[1439px]:text-[18px] min-[1024px]:max-[1439px]:leading-[24px]" - : "font-inter font-medium text-[14px] leading-[16px]" + ? "text-small-label min-[1024px]:max-[1439px]:text-large-label" + : "text-small-label" : isSmall - ? "font-inter font-medium text-[14px] leading-[16px]" // S: 14px, medium, Inter - : "font-inter font-medium text-[12px] leading-[14px]"; // XS: 12px, medium, Inter + ? "text-small-label" // S: 14px, medium, Inter + : "text-x-small-label"; // XS: 12px, medium, Inter const headerIconCellClass = templateGridFigmaShell ? ` @@ -355,7 +355,7 @@ export function RuleView({ data-figma-node="21867:47400" > {bottomStatusLabel ? ( - + {bottomStatusLabel} ) : null} diff --git a/app/components/cards/Selection/Selection.view.tsx b/app/components/cards/Selection/Selection.view.tsx index 0890900..b864a9d 100644 --- a/app/components/cards/Selection/Selection.view.tsx +++ b/app/components/cards/Selection/Selection.view.tsx @@ -6,7 +6,7 @@ import type { SelectionViewProps } from "./Selection.types"; function InfoIcon() { return ( ? @@ -59,11 +59,11 @@ export function SelectionView({ onKeyDown={onKeyDown} > - + {label} {supportText ? ( -

+

{supportText}

) : null} @@ -85,13 +85,13 @@ export function SelectionView({ >
- + {label} {showInfoIcon ? : null}
{supportText ? ( -

+

{supportText}

) : null} diff --git a/app/components/cards/Stat/Stat.view.tsx b/app/components/cards/Stat/Stat.view.tsx index 9de2830..547c71c 100644 --- a/app/components/cards/Stat/Stat.view.tsx +++ b/app/components/cards/Stat/Stat.view.tsx @@ -24,16 +24,16 @@ function StatView({ variant={shapeVariant} className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90" /> -

+

{value}

-

+

{label}

{asOf ? ( -

+

{asOf}

) : null} diff --git a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx index aa4dbeb..5d649eb 100644 --- a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx +++ b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx @@ -56,7 +56,7 @@ export function TemplateChipDetailModal({ >
{resolved?.body ?? ( -

+

{t("fallback.bodyLabel")}

)} @@ -318,7 +318,7 @@ function ReadOnlyValueField({ return (
- + {value}
diff --git a/app/components/content/ContentContainer/ContentContainer.container.tsx b/app/components/content/ContentContainer/ContentContainer.container.tsx index cd119f7..4acea87 100644 --- a/app/components/content/ContentContainer/ContentContainer.container.tsx +++ b/app/components/content/ContentContainer/ContentContainer.container.tsx @@ -75,22 +75,22 @@ const ContentContainerContainer = memo( const titleClasses = size === "xs" ? `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 = size === "xs" - ? `font-inter font-normal text-[12px] leading-[16px] 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 max-w-md ${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 = size === "xs" - ? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${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}`; + ? `overflow-hidden text-ellipsis whitespace-nowrap text-xx-small-paragraph ${bodyColor}` + : `text-xx-small-paragraph md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph ${bodyColor}`; const dateClasses = size === "xs" - ? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${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}`; + ? `overflow-hidden text-ellipsis whitespace-nowrap text-xx-small-paragraph ${bodyColor}` + : `text-xx-small-paragraph md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph ${bodyColor}`; return ( - + {label} @@ -65,7 +65,7 @@ function AddCustomFieldViewComponent({ type="button" onClick={onPressAdd} 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()} > {label} diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx index b43b6f4..70900b5 100644 --- a/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx +++ b/app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx @@ -37,7 +37,7 @@ export function CheckboxGroupView({ />
onInputChange?.(e.target.value)} onKeyDown={onInputKeyDown} 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={{ fontSize: isSmall ? "var(--sizing-300,12px)" diff --git a/app/components/controls/Incrementer/Incrementer.view.tsx b/app/components/controls/Incrementer/Incrementer.view.tsx index 88d8b08..d5cbbf6 100644 --- a/app/components/controls/Incrementer/Incrementer.view.tsx +++ b/app/components/controls/Incrementer/Incrementer.view.tsx @@ -75,7 +75,7 @@ function IncrementerView({ {displayValue} diff --git a/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx index 7fd474d..3bb8833 100644 --- a/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx +++ b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx @@ -56,11 +56,11 @@ function InfoMessageBoxView({ > {icon ?? }
-

+

{title}

-
+
-
{/* Character counter */} -

+

{value.length}/{maxLength}

diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx index 54baf43..5b32793 100644 --- a/app/components/controls/MultiSelect/MultiSelect.view.tsx +++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx @@ -122,7 +122,7 @@ function MultiSelectView({ {addButtonText && ( {label} diff --git a/app/components/controls/RadioGroup/RadioGroup.view.tsx b/app/components/controls/RadioGroup/RadioGroup.view.tsx index 004962b..d9a53cd 100644 --- a/app/components/controls/RadioGroup/RadioGroup.view.tsx +++ b/app/components/controls/RadioGroup/RadioGroup.view.tsx @@ -41,7 +41,7 @@ export function RadioGroupView({ />
{ @@ -89,9 +89,7 @@ export function SelectInputView({ h-[40px] px-[12px] py-[8px] - text-[16px] - font-medium - leading-[20px] + text-medium-label rounded-[8px] border border-solid @@ -153,7 +151,7 @@ export function SelectInputView({ {label} {asterisk && ( - + * )} @@ -169,7 +167,7 @@ export function SelectInputView({ )}
{textOptional && ( - + Optional text )} @@ -271,7 +269,7 @@ export function SelectInputView({
{textHint && (
-

+

{hintDefault}

diff --git a/app/components/controls/SelectOption/SelectOption.container.tsx b/app/components/controls/SelectOption/SelectOption.container.tsx index 0407926..49571c9 100644 --- a/app/components/controls/SelectOption/SelectOption.container.tsx +++ b/app/components/controls/SelectOption/SelectOption.container.tsx @@ -25,13 +25,13 @@ const SelectOptionContainer = forwardRef( const getTextSize = (): string => { switch (size) { case "small": - return "text-[10px] leading-[14px]"; + return "text-xx-small-paragraph"; case "medium": - return "text-[14px] leading-[20px]"; + return "text-small-paragraph"; case "large": - return "text-[16px] leading-[24px]"; + return "text-medium-paragraph"; default: - return "text-[14px] leading-[20px]"; + return "text-small-paragraph"; } }; diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx index cbe3b2c..9a6be27 100644 --- a/app/components/controls/Switch/Switch.container.tsx +++ b/app/components/controls/Switch/Switch.container.tsx @@ -135,10 +135,7 @@ const SwitchContainer = memo( const labelClasses = ` ml-[var(--measures-spacing-008)] - font-inter - font-normal - text-[14px] - leading-[20px] + text-small-paragraph text-[var(--color-content-default-primary)] ` .trim() diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx index e48aeff..3c6f59f 100644 --- a/app/components/controls/TextArea/TextArea.container.tsx +++ b/app/components/controls/TextArea/TextArea.container.tsx @@ -57,24 +57,24 @@ const TextAreaContainer = forwardRef( small: { textarea: labelVariant === "horizontal" - ? "h-[60px] px-[12px] py-[8px] text-[10px]" - : "h-[60px] px-[12px] py-[8px] text-[10px]", - label: "text-[12px] leading-[14px] font-medium", + ? "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph" + : "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph", + label: "text-x-small-label", container: "gap-[4px]", radius: "var(--measures-radius-xsmall)", }, medium: { textarea: labelVariant === "horizontal" - ? "h-[110px] px-[12px] py-[8px] text-[14px] leading-[20px]" - : "h-[100px] px-[12px] py-[8px] text-[14px] leading-[20px]", - label: "text-[14px] leading-[16px] font-medium", + ? "h-[110px] px-[12px] py-[8px] text-small-paragraph" + : "h-[100px] px-[12px] py-[8px] text-small-paragraph", + label: "text-small-label", container: "gap-[8px]", radius: "var(--measures-radius-xsmall)", }, large: { - textarea: "h-[150px] px-[12px] py-[8px] text-[16px] leading-[24px]", - label: "text-[16px] leading-[20px] font-medium", + textarea: "h-[150px] px-[12px] py-[8px] text-medium-paragraph", + label: "text-medium-label", container: "gap-[12px]", radius: "var(--measures-radius-small)", }, @@ -155,8 +155,8 @@ const TextAreaContainer = forwardRef( const labelClasses = labelVariant === "horizontal" - ? `${currentSize.label} font-inter min-w-fit` - : `${currentSize.label} font-inter`; + ? `${currentSize.label} min-w-fit` + : `${currentSize.label} `; const textareaClasses = ` scrollbar-design w-full transition-all duration-200 ease-in-out resize-none diff --git a/app/components/controls/TextArea/TextArea.view.tsx b/app/components/controls/TextArea/TextArea.view.tsx index 8b8a538..fa170f7 100644 --- a/app/components/controls/TextArea/TextArea.view.tsx +++ b/app/components/controls/TextArea/TextArea.view.tsx @@ -44,7 +44,7 @@ export const TextAreaView = forwardRef( @@ -82,7 +82,7 @@ export const TextAreaView = forwardRef(
{textHint ? (
-

+

{typeof textHint === "string" ? textHint : hintDefault}

diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx index 1f8008b..c1c494b 100644 --- a/app/components/controls/TextInput/TextInput.container.tsx +++ b/app/components/controls/TextInput/TextInput.container.tsx @@ -160,7 +160,7 @@ const TextInputContainer = forwardRef( // Container classes (default label variant only) 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) const inputClasses = ` diff --git a/app/components/controls/TextInput/TextInput.view.tsx b/app/components/controls/TextInput/TextInput.view.tsx index 70ee44b..d6ab3eb 100644 --- a/app/components/controls/TextInput/TextInput.view.tsx +++ b/app/components/controls/TextInput/TextInput.view.tsx @@ -42,7 +42,7 @@ export const TextInputView = forwardRef( @@ -84,7 +84,7 @@ export const TextInputView = forwardRef(
{textHint && (
-

+

{typeof textHint === "string" ? textHint : hintDefault}

diff --git a/app/components/controls/Toggle/Toggle.container.tsx b/app/components/controls/Toggle/Toggle.container.tsx index f0aa5f1..8daef15 100644 --- a/app/components/controls/Toggle/Toggle.container.tsx +++ b/app/components/controls/Toggle/Toggle.container.tsx @@ -101,16 +101,13 @@ const ToggleContainer = forwardRef( // Container classes const containerClasses = "flex flex-col gap-[4px]"; - const labelClasses = `${currentSize.label} font-inter font-medium`; + const labelClasses = `${currentSize.label} font-medium`; const toggleClasses = ` ${currentSize.toggle} ${stateStyles.toggle} rounded-full - font-inter - font-normal - text-[12px] - leading-[16px] + text-x-small-paragraph cursor-pointer transition-all duration-200 diff --git a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx index 885f3c1..625d921 100644 --- a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx +++ b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx @@ -107,7 +107,6 @@ const ToggleGroupContainer = memo( py-[var(--measures-spacing-008)] px-[var(--measures-spacing-008)] gap-[var(--measures-spacing-008)] - font-inter font-medium text-[12px] leading-[12px] diff --git a/app/components/controls/Upload/Upload.view.tsx b/app/components/controls/Upload/Upload.view.tsx index db8d8db..4f2274c 100644 --- a/app/components/controls/Upload/Upload.view.tsx +++ b/app/components/controls/Upload/Upload.view.tsx @@ -98,7 +98,7 @@ function UploadView({
{/* Button text */}

{uploadButtonLabel}

@@ -106,7 +106,7 @@ function UploadView({ {/* Description text */}

{hintText}

diff --git a/app/components/layout/Accordion/Accordion.view.tsx b/app/components/layout/Accordion/Accordion.view.tsx index 31622f8..e43cfc3 100644 --- a/app/components/layout/Accordion/Accordion.view.tsx +++ b/app/components/layout/Accordion/Accordion.view.tsx @@ -13,28 +13,28 @@ const SIZE_CLASSES: Record< header: "gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center", 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). */ m: { header: "gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center", - title: "text-[18px] font-medium leading-6", - subhead: "text-[14px] leading-[18px]", + title: "text-large-label", + subhead: "text-[14px] leading-[18px] font-medium", }, l: { header: "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). */ - title: "text-[24px] font-normal leading-7", - subhead: "text-[18px] leading-6", + title: "text-x-large-label", + subhead: "text-large-label", }, }; const PANEL_CLASSES: Record = { - 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)]", - 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)]", - 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)]", + 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)] text-medium-paragraph 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 { @@ -124,13 +124,13 @@ function AccordionView({ > {title} {subhead ? ( {subhead} diff --git a/app/components/layout/ListItem/ListItem.view.tsx b/app/components/layout/ListItem/ListItem.view.tsx index e8106b5..5ac15e9 100644 --- a/app/components/layout/ListItem/ListItem.view.tsx +++ b/app/components/layout/ListItem/ListItem.view.tsx @@ -33,7 +33,7 @@ export const ListItemView = memo(function ListItemView({ {label} diff --git a/app/components/layout/listSizeLayout.ts b/app/components/layout/listSizeLayout.ts index 4116ab9..e3b4123 100644 --- a/app/components/layout/listSizeLayout.ts +++ b/app/components/layout/listSizeLayout.ts @@ -42,18 +42,18 @@ export const listEntrySizeLayout: Record = { 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", 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: - "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, }, m: { 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", 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: - "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, }, l: { @@ -61,9 +61,9 @@ export const listEntrySizeLayout: Record = { textCol: "flex min-w-0 flex-1 flex-col items-start justify-center gap-[var(--spacing-scale-004)]", 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: - "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, }, }; diff --git a/app/components/modals/Alert/Alert.container.tsx b/app/components/modals/Alert/Alert.container.tsx index cc78e0f..91e7cd0 100644 --- a/app/components/modals/Alert/Alert.container.tsx +++ b/app/components/modals/Alert/Alert.container.tsx @@ -28,17 +28,17 @@ function layoutFor( return { containerClasses, titleClasses: - "font-inter text-[14px] leading-[18px] font-medium tracking-[0%]", + "text-[14px] leading-[18px] font-medium tracking-[0%]", 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 { containerClasses, titleClasses: - "font-inter text-[18px] leading-[24px] font-medium tracking-[0%]", + "text-large-label", 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)]", }; } @@ -46,19 +46,19 @@ function layoutFor( return { containerClasses: "flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid", - titleClasses: - "font-inter text-[14px] leading-[18px] font-medium tracking-[0%]", + titleClasses: + "text-[14px] leading-[18px] font-medium tracking-[0%]", 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 { containerClasses: "flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid", titleClasses: - "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", + "text-medium-label", descriptionClasses: - "font-inter text-[16px] leading-[24px] font-normal tracking-[0%] mt-[var(--spacing-scale-004)]", + "text-medium-paragraph mt-[var(--spacing-scale-004)]", }; } diff --git a/app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx b/app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx index 1df4ee5..8023adf 100644 --- a/app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx +++ b/app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx @@ -76,7 +76,7 @@ export function AskOrganizerInquiryModalView({ belowCard={ onClose()} > {copy.backToHome} @@ -85,10 +85,10 @@ export function AskOrganizerInquiryModalView({ > {success ? (
-

+

{copy.successTitle}

-

+

{copy.successDescription}

@@ -102,7 +102,7 @@ export function AskOrganizerInquiryModalView({ {formError ? (

{formError}

diff --git a/app/components/modals/Login/LoginForm.tsx b/app/components/modals/Login/LoginForm.tsx index 3d8fe42..ff88385 100644 --- a/app/components/modals/Login/LoginForm.tsx +++ b/app/components/modals/Login/LoginForm.tsx @@ -244,7 +244,7 @@ export default function LoginForm({ id={emailErrorId} role="alert" 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}

@@ -259,7 +259,7 @@ export default function LoginForm({ > {t("sendMagicLink")} -

+

{t("legalPrefix")} {icon}

- + {label} diff --git a/app/components/modals/Tooltip/Tooltip.view.tsx b/app/components/modals/Tooltip/Tooltip.view.tsx index 755bcf5..6c0efa3 100644 --- a/app/components/modals/Tooltip/Tooltip.view.tsx +++ b/app/components/modals/Tooltip/Tooltip.view.tsx @@ -20,7 +20,7 @@ export function TooltipView({ aria-live="polite" id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`} > -

+

{text}

diff --git a/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx index 55baacf..593e187 100644 --- a/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx +++ b/app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx @@ -7,10 +7,10 @@ import Popover from "../../modals/Popover"; import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types"; 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 = - "!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 }) { return ( @@ -215,7 +215,7 @@ export function CreateFlowTopNavView({ type="button" onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })} 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} @@ -281,7 +281,7 @@ export function CreateFlowTopNavView({ type="button" onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })} 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} diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx index b86d162..0cee6db 100644 --- a/app/components/navigation/Footer.tsx +++ b/app/components/navigation/Footer.tsx @@ -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"; 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`. */ 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. */ - 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 const schemaData = { @@ -178,15 +178,15 @@ const Footer = memo(() => { text-[var(--color-content-default-primary)] md:flex-row md:items-start md:justify-between md:gap-[var(--spacing-scale-040)] md:whitespace-nowrap - md:text-xs md:leading-4 - lg:text-sm lg:leading-5" + md:text-x-small-paragraph + lg:text-small-paragraph" >

{

{t("legal.privacyPolicy")} diff --git a/app/components/navigation/Link/Link.view.tsx b/app/components/navigation/Link/Link.view.tsx index 6a235f2..03b3390 100644 --- a/app/components/navigation/Link/Link.view.tsx +++ b/app/components/navigation/Link/Link.view.tsx @@ -9,7 +9,7 @@ const FIGMA_ROOT = "21861:21428"; /** Profile & card small viewports: Figma Sizing/300 + label line (350). ≥640px: 18px / 1.3. */ 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) { return theme === "light" diff --git a/app/components/navigation/MenuItem/MenuItem.container.tsx b/app/components/navigation/MenuItem/MenuItem.container.tsx index cdba605..f0b4017 100644 --- a/app/components/navigation/MenuItem/MenuItem.container.tsx +++ b/app/components/navigation/MenuItem/MenuItem.container.tsx @@ -51,12 +51,12 @@ const MenuItemContainer = memo( string > = { "X Small": - "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", - Small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", - Medium: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", - Large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", + "text-xx-small-label", + Small: "text-x-small-label", + Medium: "text-x-small-label", + Large: "text-medium-label", "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) diff --git a/app/components/navigation/NavigationItem/NavigationItem.container.tsx b/app/components/navigation/NavigationItem/NavigationItem.container.tsx index 0d348ea..613f547 100644 --- a/app/components/navigation/NavigationItem/NavigationItem.container.tsx +++ b/app/components/navigation/NavigationItem/NavigationItem.container.tsx @@ -38,8 +38,8 @@ const NavigationItemContainer = memo( // Text styles based on size const textStyles: Record = { default: - "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", - xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", + "text-xx-small-label", + 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`; diff --git a/app/components/sections/AskOrganizer/AskOrganizer.view.tsx b/app/components/sections/AskOrganizer/AskOrganizer.view.tsx index cfe6b7d..502b460 100644 --- a/app/components/sections/AskOrganizer/AskOrganizer.view.tsx +++ b/app/components/sections/AskOrganizer/AskOrganizer.view.tsx @@ -53,7 +53,7 @@ function AskOrganizerView({ size="small" buttonType="filled" 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} ariaLabel={ctaAriaLabel} data-testid="ask-organizer-cta" diff --git a/app/components/sections/ContentBanner/ContentBanner.view.tsx b/app/components/sections/ContentBanner/ContentBanner.view.tsx index aa29dc0..095b034 100644 --- a/app/components/sections/ContentBanner/ContentBanner.view.tsx +++ b/app/components/sections/ContentBanner/ContentBanner.view.tsx @@ -37,12 +37,12 @@ function ContentBannerGuideView({

{title}

{description ? ( -

+

{description}

) : null} diff --git a/app/components/sections/Groups/Groups.view.tsx b/app/components/sections/Groups/Groups.view.tsx index 0802ac0..6d92d80 100644 --- a/app/components/sections/Groups/Groups.view.tsx +++ b/app/components/sections/Groups/Groups.view.tsx @@ -14,7 +14,7 @@ function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps

{title}

diff --git a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx index 360e18a..ce620b2 100644 --- a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx +++ b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx @@ -46,11 +46,11 @@ const QuoteBlockContainer = memo( avatar: "md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]", 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: - "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: - "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, }, extended: { diff --git a/app/components/sections/QuoteBlock/QuoteBlock.view.tsx b/app/components/sections/QuoteBlock/QuoteBlock.view.tsx index 14a0a6d..b2df134 100644 --- a/app/components/sections/QuoteBlock/QuoteBlock.view.tsx +++ b/app/components/sections/QuoteBlock/QuoteBlock.view.tsx @@ -25,7 +25,7 @@ function QuoteBlockView({ if (config.statementLayout) { 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 (
{author} @@ -151,7 +151,7 @@ function QuoteBlockView({ data-qopen="“" data-qclose="”" className={[ - "font-inter font-normal", + "font-normal", config.source, "text-[var(--color-content-inverse-primary)] uppercase", "pl-[0.6em] -indent-[0.6em]", diff --git a/app/components/sections/RelatedArticles/RelatedArticles.view.tsx b/app/components/sections/RelatedArticles/RelatedArticles.view.tsx index 4c03265..ae7840d 100644 --- a/app/components/sections/RelatedArticles/RelatedArticles.view.tsx +++ b/app/components/sections/RelatedArticles/RelatedArticles.view.tsx @@ -37,7 +37,7 @@ export function RelatedArticlesView({ } > {isUseCases && useCasesHeadingLines?.length ? ( -

+

{/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */} {useCasesHeadingLines.map((line, index) => ( @@ -52,7 +52,7 @@ export function RelatedArticlesView({

) : (

{titlePrefix ? ( diff --git a/app/components/type/ContentLockup/ContentLockup.container.tsx b/app/components/type/ContentLockup/ContentLockup.container.tsx index 7e7e6c8..db0bfbc 100644 --- a/app/components/type/ContentLockup/ContentLockup.container.tsx +++ b/app/components/type/ContentLockup/ContentLockup.container.tsx @@ -54,7 +54,7 @@ const ContentLockupContainer = memo( subtitle: "text-small-paragraph md:text-medium-paragraph text-[var(--color-content-default-secondary)]", 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: "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]", }, @@ -105,7 +105,7 @@ const ContentLockupContainer = memo( subtitle: "font-space-grotesk text-medium-paragraph tracking-[0] lg:text-x-large-label text-[var(--color-content-default-primary)]", 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: "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]", }, diff --git a/app/components/type/TripleStep/TripleStep.view.tsx b/app/components/type/TripleStep/TripleStep.view.tsx index 1d8e0ff..384c6d1 100644 --- a/app/components/type/TripleStep/TripleStep.view.tsx +++ b/app/components/type/TripleStep/TripleStep.view.tsx @@ -66,7 +66,7 @@ function TripleStepView({ buttonType="outline" palette="default" 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} diff --git a/app/components/utility/Tag/Tag.view.tsx b/app/components/utility/Tag/Tag.view.tsx index 09bd4a4..a0f14c8 100644 --- a/app/components/utility/Tag/Tag.view.tsx +++ b/app/components/utility/Tag/Tag.view.tsx @@ -21,7 +21,7 @@ export function TagView({ variant, children, className }: TagViewProps) { return ( {children} diff --git a/app/contexts/AuthModalContext.tsx b/app/contexts/AuthModalContext.tsx index 21eb7aa..d8f827d 100644 --- a/app/contexts/AuthModalContext.tsx +++ b/app/contexts/AuthModalContext.tsx @@ -65,7 +65,7 @@ export function AuthModalProvider({ children }: { children: ReactNode }) { belowCard={ closeLogin()} > {t("backToHome")} diff --git a/app/not-found.tsx b/app/not-found.tsx index 27bccba..959bf83 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -63,12 +63,12 @@ export default function NotFound() { />

{t("pages.notFoundPage.heading")}

-

+

{t("pages.notFoundPage.description")}

@@ -119,7 +119,7 @@ export default function NotFound() { ))}
-

+

{t("pages.notFoundPage.templateHint")}

diff --git a/tests/components/ContentBanner.test.tsx b/tests/components/ContentBanner.test.tsx index 2bf5a10..b7df100 100644 --- a/tests/components/ContentBanner.test.tsx +++ b/tests/components/ContentBanner.test.tsx @@ -157,7 +157,7 @@ describe("ContentBanner", () => { const title = screen.getByRole("heading", { name: "Test Article" }); 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(); const copyColumn = container.querySelector('[data-node-id="19189:9171"]'); expect(copyColumn).toHaveClass("lg:max-w-[365px]"); diff --git a/tests/pages/blog.test.jsx b/tests/pages/blog.test.jsx index 5347910..28c73d6 100644 --- a/tests/pages/blog.test.jsx +++ b/tests/pages/blog.test.jsx @@ -253,8 +253,7 @@ describe("BlogPostPage", () => { expect(contentDiv).toHaveClass( "text-[var(--color-content-inverse-primary)]", ); - expect(contentDiv).toHaveClass("text-[16px]"); - expect(contentDiv).toHaveClass("leading-[24px]"); + expect(contentDiv).toHaveClass("text-medium-paragraph"); const article = contentDiv?.closest("article"); expect(article).toHaveClass("p-[var(--spacing-scale-024)]"); @@ -271,12 +270,9 @@ describe("BlogPostPage", () => { const contentDiv = screen .getByText(/This is the article content/) .closest("div.post-body"); - expect(contentDiv).toHaveClass("sm:text-[18px]"); - expect(contentDiv).toHaveClass("sm:leading-[130%]"); - expect(contentDiv).toHaveClass("lg:text-[24px]"); - expect(contentDiv).toHaveClass("lg:leading-[32px]"); - expect(contentDiv).toHaveClass("xl:text-[32px]"); - expect(contentDiv).toHaveClass("xl:leading-[40px]"); + expect(contentDiv).toHaveClass("sm:text-large-paragraph"); + expect(contentDiv).toHaveClass("lg:text-x-large-paragraph"); + expect(contentDiv).toHaveClass("xl:text-xx-large-paragraph"); }); it("applies responsive max-width constraints", async () => { diff --git a/tests/unit/ContentContainer.test.jsx b/tests/unit/ContentContainer.test.jsx index 1eb1077..bfcb847 100644 --- a/tests/unit/ContentContainer.test.jsx +++ b/tests/unit/ContentContainer.test.jsx @@ -74,8 +74,7 @@ describe("ContentContainer", () => { expect(title).toHaveClass( "font-bricolage", "font-medium", - "text-[18px]", - "leading-[120%]", + "text-xx-small-display", "text-[var(--color-content-inverse-brand-royal)]", ); }); @@ -86,10 +85,7 @@ describe("ContentContainer", () => { const description = screen.getByText(/This is a test article description/); expect(description).toBeInTheDocument(); expect(description).toHaveClass( - "font-inter", - "font-normal", - "text-[12px]", - "leading-[16px]", + "text-x-small-paragraph", "text-[var(--color-content-inverse-brand-royal)]", ); }); @@ -148,19 +144,13 @@ describe("ContentContainer", () => { const author = screen.getByText("Test Author"); expect(author).toHaveClass( - "font-inter", - "font-normal", - "text-[10px]", - "leading-[14px]", + "text-xx-small-paragraph", "text-[var(--color-content-inverse-brand-royal)]", ); const date = screen.getByText("April 2025"); expect(date).toHaveClass( - "font-inter", - "font-normal", - "text-[10px]", - "leading-[14px]", + "text-xx-small-paragraph", "text-[var(--color-content-inverse-brand-royal)]", ); }); @@ -217,7 +207,7 @@ describe("ContentContainer", () => { expect(title).toHaveClass("text-[18px]", "leading-[22px]"); 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", () => { @@ -227,10 +217,10 @@ describe("ContentContainer", () => { expect(icon).toHaveClass("w-[60px]", "h-[30px]"); 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/); - expect(description).toHaveClass("text-[12px]", "leading-[16px]"); + expect(description).toHaveClass("text-x-small-paragraph"); }); it("has proper accessibility attributes", () => { diff --git a/tests/unit/QuoteBlock.test.jsx b/tests/unit/QuoteBlock.test.jsx index 555687a..e3850f1 100644 --- a/tests/unit/QuoteBlock.test.jsx +++ b/tests/unit/QuoteBlock.test.jsx @@ -197,7 +197,7 @@ describe("QuoteBlock Component", () => { render(); 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", () => { @@ -207,9 +207,9 @@ describe("QuoteBlock Component", () => { const quoteElement = screen.getByText("Test quote"); expect(quoteElement).toHaveClass( - "text-[18px]", - "md:text-[36px]", - "lg:text-[52px]", + "text-xx-small-display", + "md:text-small-display", + "lg:text-large-display", ); }); diff --git a/tests/unit/Rule.test.jsx b/tests/unit/Rule.test.jsx index afcd3fb..79b0e12 100644 --- a/tests/unit/Rule.test.jsx +++ b/tests/unit/Rule.test.jsx @@ -188,11 +188,11 @@ describe("Rule Component", () => { render(); 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( /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", () => { -- 2.43.0