From fad06d9e233ce26e5c39cb404bbb54ff2d057fb8 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sat, 15 Aug 2026 21:21:17 -0600 Subject: [PATCH] Typography fix --- .../ContentLockup/ContentLockup.container.tsx | 38 +++++++++---------- .../type/ContentLockup/ContentLockup.view.tsx | 2 +- .../type/HeaderLockup/HeaderLockup.view.tsx | 12 +++--- .../type/InputLabel/InputLabel.view.tsx | 18 ++++----- .../type/NumberedList/NumberedList.view.tsx | 14 +++---- .../type/PageHeader/PageHeader.view.tsx | 6 +-- app/components/type/Section/Section.view.tsx | 2 +- .../type/SectionHeader/SectionHeader.tsx | 16 ++++---- .../type/TextBlock/TextBlock.view.tsx | 6 +-- .../type/TripleStep/TripleStep.view.tsx | 4 +- .../TripleTextBlock/TripleTextBlock.view.tsx | 4 +- tests/components/FeatureGrid.test.tsx | 3 +- tests/components/InputLabel.test.tsx | 4 +- 13 files changed, 64 insertions(+), 65 deletions(-) diff --git a/app/components/type/ContentLockup/ContentLockup.container.tsx b/app/components/type/ContentLockup/ContentLockup.container.tsx index da97276..7e7e6c8 100644 --- a/app/components/type/ContentLockup/ContentLockup.container.tsx +++ b/app/components/type/ContentLockup/ContentLockup.container.tsx @@ -36,11 +36,11 @@ const ContentLockupContainer = memo( titleContainer: "flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center", title: - "font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]", + "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]", subtitle: - "font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]", + "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]", description: - "font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]", + "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]", shape: "w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]", }, @@ -52,7 +52,7 @@ const ContentLockupContainer = memo( title: "font-bricolage-grotesque font-medium text-[18px] leading-[22px] md:text-[length:var(--sizing-600,24px)] md:leading-[32px] text-[var(--color-content-default-primary)]", subtitle: - "font-inter font-normal text-[length:var(--sizing-350,14px)] leading-[20px] md:text-[length:var(--sizing-400,16px)] md:leading-[24px] text-[var(--color-content-default-secondary)]", + "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)]", shape: @@ -68,11 +68,11 @@ const ContentLockupContainer = memo( titleContainer: "flex flex-wrap items-center gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-010)]", title: - "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] md:text-[52px] xl:text-[length:var(--spacing-scale-064)] xl:leading-[length:var(--spacing-scale-064)] text-[var(--color-content-default-primary,white)]", + "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] md:text-large-display xl:text-x-large-display text-[var(--color-content-default-primary,white)]", subtitle: "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] lg:text-[18px] lg:leading-[22px] xl:text-[32px] xl:leading-[1.1] text-[var(--color-content-default-primary,white)]", description: - "font-inter font-normal text-[length:var(--text-x-large-paragraph)] leading-[length:var(--text-x-large-paragraph--line-height)] tracking-[var(--text-x-large-paragraph--letter-spacing)] text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-[14px] lg:leading-[20px] lg:tracking-[0] xl:text-[length:var(--text-x-large-paragraph)] xl:leading-[length:var(--text-x-large-paragraph--line-height)] xl:tracking-[var(--text-x-large-paragraph--letter-spacing)]", + "text-x-large-paragraph text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-small-paragraph xl:text-x-large-paragraph", shape: "w-[20px] h-[20px] md:w-[28px] md:h-[28px]", }, @@ -88,7 +88,7 @@ const ContentLockupContainer = memo( subtitle: "font-bricolage-grotesque font-medium text-[18px] leading-[22px] lg:text-[length:var(--spacing-scale-020)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-032)] xl:leading-[1.1] text-[var(--color-content-default-primary)]", description: - "font-inter font-normal text-[length:var(--sizing-350)] leading-[20px] text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-[length:var(--sizing-400)] lg:leading-[24px] xl:text-[length:var(--spacing-scale-024)] xl:leading-[length:var(--text-x-large-paragraph--line-height)]", + "text-small-paragraph text-[var(--color-content-default-secondary)] whitespace-pre-line lg:text-medium-paragraph xl:text-x-large-paragraph", shape: "w-[20px] h-[20px] md:w-[28px] md:h-[28px]", }, @@ -101,9 +101,9 @@ const ContentLockupContainer = memo( "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-008)]", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center", title: - "font-bricolage-grotesque font-medium text-[28px] leading-[36px] tracking-[0] md:text-[44px] md:leading-[110%] lg:text-[52px] text-[var(--color-content-default-primary)]", + "font-bricolage-grotesque font-medium max-md:text-[28px] max-md:leading-[36px] tracking-[0] md:text-medium-display lg:text-large-display text-[var(--color-content-default-primary)]", subtitle: - "font-space-grotesk font-normal text-[16px] leading-[24px] tracking-[0] lg:text-[24px] lg:leading-[28px] 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: "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)]", shape: @@ -115,9 +115,9 @@ const ContentLockupContainer = memo( titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center", title: - "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-[44px] md:leading-[1.1] text-[var(--color-content-default-brand-primary)]", + "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-default-brand-primary)]", subtitle: - "font-inter font-normal text-[18px] leading-[1.3] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-default-primary)]", + "text-large-paragraph tracking-[0] md:text-x-large-paragraph text-[var(--color-content-default-primary)]", shape: "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]", }, @@ -127,9 +127,9 @@ const ContentLockupContainer = memo( titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center", title: - "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-[44px] md:leading-[1.1] text-[var(--color-content-inverse-primary)]", + "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] tracking-[0] md:text-medium-display text-[var(--color-content-inverse-primary)]", subtitle: - "font-inter font-normal text-[18px] leading-[1.3] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-invert-secondary)]", + "text-large-paragraph tracking-[0] md:text-x-large-paragraph text-[var(--color-content-invert-secondary)]", shape: "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]", }, @@ -140,11 +140,11 @@ const ContentLockupContainer = memo( titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full", titleContainer: "flex items-center justify-start w-full", title: - "font-bricolage-grotesque font-bold text-[28px] leading-[36px] tracking-[0] text-[var(--color-content-default-primary)] text-left", + "font-bricolage-grotesque text-medium-heading tracking-[0] text-[var(--color-content-default-primary)] text-left", subtitle: - "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left", + "text-medium-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left", description: - "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left", + "text-medium-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left", shape: "w-[16px] h-[16px]", }, login: { @@ -154,11 +154,11 @@ const ContentLockupContainer = memo( titleGroup: "flex flex-col gap-[var(--spacing-scale-012)] w-full", titleContainer: "flex items-center justify-start w-full", title: - "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px] tracking-[0] text-[var(--color-content-default-primary)] text-left", + "font-bricolage-grotesque text-x-large-heading tracking-[0] text-[var(--color-content-default-primary)] text-left", subtitle: - "font-inter font-normal text-[18px] leading-[130%] tracking-[0] text-[var(--color-content-default-tertiary)] text-left", + "text-large-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left", description: - "font-inter font-normal text-[18px] leading-[130%] tracking-[0] text-[var(--color-content-default-tertiary)] text-left", + "text-large-paragraph tracking-[0] text-[var(--color-content-default-tertiary)] text-left", shape: "w-[16px] h-[16px]", }, }; diff --git a/app/components/type/ContentLockup/ContentLockup.view.tsx b/app/components/type/ContentLockup/ContentLockup.view.tsx index b9a7999..c8b038f 100644 --- a/app/components/type/ContentLockup/ContentLockup.view.tsx +++ b/app/components/type/ContentLockup/ContentLockup.view.tsx @@ -97,7 +97,7 @@ function ContentLockupView({ {variant === "feature" && linkText && ( {linkText} diff --git a/app/components/type/HeaderLockup/HeaderLockup.view.tsx b/app/components/type/HeaderLockup/HeaderLockup.view.tsx index 2926e29..8a936b1 100644 --- a/app/components/type/HeaderLockup/HeaderLockup.view.tsx +++ b/app/components/type/HeaderLockup/HeaderLockup.view.tsx @@ -36,8 +36,8 @@ function HeaderLockupView({ isLeft ? "text-left" : "text-center" } ${ isL - ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]" - : "font-bricolage-grotesque font-bold text-[28px] leading-[36px]" + ? "font-bricolage-grotesque text-x-large-heading" + : "font-bricolage-grotesque text-medium-heading" }`} > {title} @@ -49,20 +49,20 @@ function HeaderLockupView({ !(typeof description === "string" && description.length === 0) && (typeof description === "string" ? (

{description}

) : (
{description} diff --git a/app/components/type/InputLabel/InputLabel.view.tsx b/app/components/type/InputLabel/InputLabel.view.tsx index c518751..c89923b 100644 --- a/app/components/type/InputLabel/InputLabel.view.tsx +++ b/app/components/type/InputLabel/InputLabel.view.tsx @@ -20,16 +20,16 @@ function InputLabelView({ // Size-based typography const labelTextSize = isSmall - ? "text-[length:var(--sizing-350,14px)] leading-[20px]" - : "text-[length:var(--sizing-400,16px)] leading-[24px]"; + ? "text-small-paragraph" + : "text-medium-paragraph"; const helperTextSize = isSmall - ? "text-[length:var(--measures-sizing-250,10px)] leading-[var(--measures-spacing-350,14px)]" - : "text-[length:var(--sizing-300,12px)] leading-[16px]"; + ? "text-xx-small-paragraph" + : "text-x-small-paragraph"; const asteriskSize = isSmall - ? "text-[length:var(--measures-sizing-250,10px)] leading-[var(--measures-spacing-300,12px)]" - : "text-[length:var(--measures-spacing-300,12px)] leading-[var(--measures-spacing-300,12px)]"; + ? "text-xx-small-label" + : "font-medium text-[length:var(--measures-spacing-300,12px)] leading-[var(--measures-spacing-300,12px)]"; // Palette-based colors const labelColor = isInverse @@ -64,13 +64,13 @@ function InputLabelView({

{label}

{asterisk && (

*

@@ -96,7 +96,7 @@ function InputLabelView({
{helperText && (

{typeof helperText === "string" ? helperText : helperTextDefault}

diff --git a/app/components/type/NumberedList/NumberedList.view.tsx b/app/components/type/NumberedList/NumberedList.view.tsx index 0f532fd..2222d9e 100644 --- a/app/components/type/NumberedList/NumberedList.view.tsx +++ b/app/components/type/NumberedList/NumberedList.view.tsx @@ -22,8 +22,8 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
{index + 1} @@ -37,8 +37,8 @@ function NumberedListView({ items, size }: NumberedListViewProps) {

{item.title} @@ -47,10 +47,10 @@ function NumberedListView({ items, size }: NumberedListViewProps) { {/* Description */}

{item.description} diff --git a/app/components/type/PageHeader/PageHeader.view.tsx b/app/components/type/PageHeader/PageHeader.view.tsx index d146363..089604b 100644 --- a/app/components/type/PageHeader/PageHeader.view.tsx +++ b/app/components/type/PageHeader/PageHeader.view.tsx @@ -32,8 +32,8 @@ function PageHeaderView({ : "py-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-032)]"; const titleTypeClasses = sectionMinimal - ? "font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary)] md:text-[52px] md:leading-[1.1] lg:text-[52px] lg:leading-[1.1] xl:text-[length:var(--sizing-1600)] xl:leading-[1.1]" - : "font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary)] md:text-[44px] md:leading-[110%] lg:text-[52px]"; + ? "font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary)] md:text-large-display xl:text-x-large-display" + : "font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary)] md:text-medium-display lg:text-large-display"; const sectionFigmaNode = sectionMinimal && collapseTitleAtLg @@ -77,7 +77,7 @@ function PageHeaderView({ )}

{hasDescription ? ( -

+

{description}

) : null} diff --git a/app/components/type/Section/Section.view.tsx b/app/components/type/Section/Section.view.tsx index 38d3da2..1a7becb 100644 --- a/app/components/type/Section/Section.view.tsx +++ b/app/components/type/Section/Section.view.tsx @@ -11,7 +11,7 @@ import type { SectionProps } from "./Section.types"; const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)"; const CATEGORY_CLASS = - "font-inter font-medium text-[16px] leading-[20px] text-[var(--color-content-invert-secondary,#1f1f1f)] shrink-0 w-full min-w-0"; + "text-medium-label text-[var(--color-content-invert-secondary,#1f1f1f)] shrink-0 w-full min-w-0"; function SectionView({ categoryName, diff --git a/app/components/type/SectionHeader/SectionHeader.tsx b/app/components/type/SectionHeader/SectionHeader.tsx index 430c9f7..bc57b23 100644 --- a/app/components/type/SectionHeader/SectionHeader.tsx +++ b/app/components/type/SectionHeader/SectionHeader.tsx @@ -68,10 +68,10 @@ const SectionHeader = memo( variant === "multi-line" ? ruleStackDesktopTypeScale ? splitFromMd - ? "font-bricolage-grotesque font-bold text-[28px] leading-[36px] text-[var(--color-content-default-primary)] md:w-full md:max-w-none md:text-left md:text-[32px] md:leading-[40px] xl:text-[40px] xl:leading-[52px]" - : "font-bricolage-grotesque font-bold text-[28px] leading-[36px] md:text-[32px] md:leading-[40px] lg:w-full lg:max-w-none lg:text-left lg:text-[32px] lg:leading-[40px] xl:text-[40px] xl:leading-[52px] text-[var(--color-content-default-primary)]" - : "font-bricolage-grotesque font-bold text-[28px] leading-[36px] md:text-[32px] md:leading-[40px] lg:w-[410px] lg:text-left xl:text-[40px] xl:leading-[52px] text-[var(--color-content-default-primary)]" - : "font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]" + ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-none md:text-left md:text-large-heading xl:text-xx-large-heading" + : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-none lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]" + : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]" + : "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]" } > @@ -108,10 +108,10 @@ const SectionHeader = memo( variant === "multi-line" ? ruleStackDesktopTypeScale ? splitFromMd - ? "font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)] md:text-left md:text-[18px] md:leading-[130%] xl:text-[24px] xl:leading-[32px]" - : "font-inter font-normal text-[14px] leading-[20px] md:text-[18px] md:leading-[130%] lg:text-left lg:text-[18px] lg:leading-[130%] text-[var(--color-content-default-tertiary)] xl:text-[24px] xl:leading-[32px]" - : "font-inter font-normal text-[14px] leading-[20px] md:text-[18px] md:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-default-tertiary)] lg:text-right" - : "font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]" + ? "text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-left md:text-large-paragraph xl:text-x-large-paragraph" + : "text-small-paragraph md:text-large-paragraph lg:text-left lg:text-large-paragraph text-[var(--color-content-default-tertiary)] xl:text-x-large-paragraph" + : "text-small-paragraph md:text-large-paragraph xl:text-x-large-paragraph text-[var(--color-content-default-tertiary)] lg:text-right" + : "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)]" } > {subtitle} diff --git a/app/components/type/TextBlock/TextBlock.view.tsx b/app/components/type/TextBlock/TextBlock.view.tsx index b752e19..dbbe4a3 100644 --- a/app/components/type/TextBlock/TextBlock.view.tsx +++ b/app/components/type/TextBlock/TextBlock.view.tsx @@ -11,13 +11,13 @@ type TextRow = NonNullable[number]; */ const ENTRY_TITLE_CLASS = - "font-inter font-bold text-[20px] leading-[28px] text-[var(--color-content-invert-primary)] shrink-0"; + "text-x-small-heading text-[var(--color-content-invert-primary)] shrink-0"; const ROW_LABEL_CLASS = - "font-inter font-medium text-[14px] leading-[18px] text-[var(--color-content-invert-primary)] shrink-0"; + "font-medium text-[14px] leading-[18px] text-[var(--color-content-invert-primary)] shrink-0"; const PARAGRAPH_CLASS = - "font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-primary)] shrink-0"; + "text-small-paragraph text-[var(--color-content-invert-primary)] shrink-0"; function bodyToParagraphs(body: string): string[] { return body diff --git a/app/components/type/TripleStep/TripleStep.view.tsx b/app/components/type/TripleStep/TripleStep.view.tsx index 5aa03d4..1d8e0ff 100644 --- a/app/components/type/TripleStep/TripleStep.view.tsx +++ b/app/components/type/TripleStep/TripleStep.view.tsx @@ -34,7 +34,7 @@ function TripleStepView({

{heading}

@@ -54,7 +54,7 @@ function TripleStepView({

{step.title}

-

+

{step.body}

diff --git a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx index c3950e1..1107911 100644 --- a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx +++ b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx @@ -33,7 +33,7 @@ function TripleTextUseCasesColumn({ column }: { column: TripleTextBlockColumn })

{column.title}

-
+

{column.description}

{column.descriptionSecondary ? (

@@ -153,7 +153,7 @@ function TripleTextBlockView({ id={headingId} className={ isUseCases - ? "w-full text-left font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary,white)] md:text-[32px] md:leading-[40px] lg:mx-auto lg:max-w-[693px] lg:text-center lg:text-[36px] lg:font-extrabold lg:leading-[44px] xl:text-[40px] xl:leading-[52px] xl:font-bold" + ? "w-full text-left font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary,white)] md:text-large-heading lg:mx-auto lg:max-w-[693px] lg:text-center lg:text-x-large-heading xl:text-xx-large-heading" : "w-full text-left font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary,white)]" } > diff --git a/tests/components/FeatureGrid.test.tsx b/tests/components/FeatureGrid.test.tsx index 755ee93..f38d511 100644 --- a/tests/components/FeatureGrid.test.tsx +++ b/tests/components/FeatureGrid.test.tsx @@ -112,8 +112,7 @@ describe("FeatureGrid (behavioral tests)", () => { expect(title.className).toMatch(/text-\[18px\]/); expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/); const subtitle = screen.getByRole("heading", { name: "Test Subtitle" }); - expect(subtitle.className).toMatch(/text-\[length:var\(--sizing-350,14px\)\]/); - expect(subtitle.className).toMatch(/md:text-\[length:var\(--sizing-400,16px\)\]/); + expect(subtitle).toHaveClass("text-small-paragraph", "md:text-medium-paragraph"); }); it("applies grain texture to feature grid icons", () => { diff --git a/tests/components/InputLabel.test.tsx b/tests/components/InputLabel.test.tsx index 13374eb..51f524b 100644 --- a/tests/components/InputLabel.test.tsx +++ b/tests/components/InputLabel.test.tsx @@ -70,13 +70,13 @@ describe("InputLabel – behaviour specifics", () => { it("applies size s styling", () => { render(); const label = screen.getByText("Test Label"); - expect(label).toHaveClass("text-[length:var(--sizing-350,14px)]"); + expect(label).toHaveClass("text-small-paragraph"); }); it("applies size m styling", () => { render(); const label = screen.getByText("Test Label"); - expect(label).toHaveClass("text-[length:var(--sizing-400,16px)]"); + expect(label).toHaveClass("text-medium-paragraph"); }); it("applies default palette styling", () => {