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

Merge pull request 'Adopt typography token classes in type' (#63) from vinod/cr-24-type-typography-tokens into main

Browse Source 
Reviewed-on: #63
This commit was merged in pull request #63.
This commit is contained in:
an.di
2026-08-16 03:22:13 +00:00
parent 2bc190e0c5 fad06d9e23
commit 99419915d7
13 changed files with 64 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/type/ContentLockup/ContentLockup.container.tsx
+19 -19
View File
@@ -36,11 +36,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleContainer: titleContainer:
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center", "flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
title: 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: 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: 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: shape:
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]", "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<ContentLockupProps>(
title: 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)]", "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: 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: 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-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: shape:
@@ -68,11 +68,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleContainer: titleContainer:
"flex flex-wrap items-center gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-010)]", "flex flex-wrap items-center gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-010)]",
title: 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: 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)]", "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: 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: shape:
"w-[20px] h-[20px] md:w-[28px] md:h-[28px]", "w-[20px] h-[20px] md:w-[28px] md:h-[28px]",
}, },
@@ -88,7 +88,7 @@ const ContentLockupContainer = memo<ContentLockupProps>(
subtitle: 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)]", "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: 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: shape:
"w-[20px] h-[20px] md:w-[28px] md:h-[28px]", "w-[20px] h-[20px] md:w-[28px] md:h-[28px]",
}, },
@@ -101,9 +101,9 @@ const ContentLockupContainer = memo<ContentLockupProps>(
"flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-008)]", "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", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
title: 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: 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: 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-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: shape:
@@ -115,9 +115,9 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]", titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]",
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
title: 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: 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: shape:
"w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]", "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
}, },
@@ -127,9 +127,9 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full", titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
titleContainer: "flex gap-[var(--spacing-scale-008)] items-center", titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
title: 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: 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: shape:
"w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]", "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
}, },
@@ -140,11 +140,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full", titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
titleContainer: "flex items-center justify-start w-full", titleContainer: "flex items-center justify-start w-full",
title: 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: 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: 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]", shape: "w-[16px] h-[16px]",
}, },
login: { login: {
@@ -154,11 +154,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleGroup: "flex flex-col gap-[var(--spacing-scale-012)] w-full", titleGroup: "flex flex-col gap-[var(--spacing-scale-012)] w-full",
titleContainer: "flex items-center justify-start w-full", titleContainer: "flex items-center justify-start w-full",
title: 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: 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: 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]", shape: "w-[16px] h-[16px]",
}, },
}; };
app/components/type/ContentLockup/ContentLockup.view.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ function ContentLockupView({
{variant === "feature" && linkText && ( {variant === "feature" && linkText && (
<a <a
href={linkHref || "#"} href={linkHref || "#"}
className="font-inter font-normal text-[length:var(--sizing-400,16px)] leading-[24px] underline text-[var(--color-content-default-primary)] hover:text-[var(--color-content-default-secondary)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-secondary)] rounded-sm px-1 py-0.5" className="text-medium-underline underline text-[var(--color-content-default-primary)] hover:text-[var(--color-content-default-secondary)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-secondary)] rounded-sm px-1 py-0.5"
> >
{linkText} {linkText}
</a> </a>
app/components/type/HeaderLockup/HeaderLockup.view.tsx
+6 -6
View File
@@ -36,8 +36,8 @@ function HeaderLockupView({
isLeft ? "text-left" : "text-center" isLeft ? "text-left" : "text-center"
} ${ } ${
isL isL
? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]" ? "font-bricolage-grotesque text-x-large-heading"
: "font-bricolage-grotesque font-bold text-[28px] leading-[36px]" : "font-bricolage-grotesque text-medium-heading"
}`} }`}
> >
{title} {title}
@@ -49,20 +49,20 @@ function HeaderLockupView({
!(typeof description === "string" && description.length === 0) && !(typeof description === "string" && description.length === 0) &&
(typeof description === "string" ? ( (typeof description === "string" ? (
<p <p
className={`font-inter font-normal max-w-[640px] overflow-visible relative shrink-0 ${descriptionColorClass} w-full whitespace-pre-wrap ${ className={`max-w-[640px] overflow-visible relative shrink-0 ${descriptionColorClass} w-full whitespace-pre-wrap ${
isLeft ? "" : "text-center" isLeft ? "" : "text-center"
} ${ } ${
isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]" isL ? "text-large-paragraph" : "text-small-paragraph"
}`} }`}
> >
{description} {description}
</p> </p>
) : ( ) : (
<div <div
className={`font-inter font-normal max-w-[640px] overflow-visible relative shrink-0 ${descriptionColorClass} w-full whitespace-pre-wrap ${ className={`max-w-[640px] overflow-visible relative shrink-0 ${descriptionColorClass} w-full whitespace-pre-wrap ${
isLeft ? "" : "text-center" isLeft ? "" : "text-center"
} ${ } ${
isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]" isL ? "text-large-paragraph" : "text-small-paragraph"
}`} }`}
> >
{description} {description}
app/components/type/InputLabel/InputLabel.view.tsx
+9 -9
View File
@@ -20,16 +20,16 @@ function InputLabelView({
// Size-based typography // Size-based typography
const labelTextSize = isSmall const labelTextSize = isSmall
? "text-[length:var(--sizing-350,14px)] leading-[20px]" ? "text-small-paragraph"
: "text-[length:var(--sizing-400,16px)] leading-[24px]"; : "text-medium-paragraph";
const helperTextSize = isSmall const helperTextSize = isSmall
? "text-[length:var(--measures-sizing-250,10px)] leading-[var(--measures-spacing-350,14px)]" ? "text-xx-small-paragraph"
: "text-[length:var(--sizing-300,12px)] leading-[16px]"; : "text-x-small-paragraph";
const asteriskSize = isSmall const asteriskSize = isSmall
? "text-[length:var(--measures-sizing-250,10px)] leading-[var(--measures-spacing-300,12px)]" ? "text-xx-small-label"
: "text-[length:var(--measures-spacing-300,12px)] leading-[var(--measures-spacing-300,12px)]"; : "font-medium text-[length:var(--measures-spacing-300,12px)] leading-[var(--measures-spacing-300,12px)]";
// Palette-based colors // Palette-based colors
const labelColor = isInverse const labelColor = isInverse
@@ -64,13 +64,13 @@ function InputLabelView({
<div className={labelContainerClass}> <div className={labelContainerClass}>
<div className="flex gap-px items-start relative shrink-0"> <div className="flex gap-px items-start relative shrink-0">
<p <p
className={`font-inter font-normal ${labelTextSize} ${labelColor} relative shrink-0`} className={`${labelTextSize} ${labelColor} relative shrink-0`}
> >
{label} {label}
</p> </p>
{asterisk && ( {asterisk && (
<p <p
className={`font-inter font-medium ${asteriskSize} relative shrink-0 text-[color:var(--color-content-default-negative-primary,#ea4845)]`} className={`${asteriskSize} relative shrink-0 text-[color:var(--color-content-default-negative-primary,#ea4845)]`}
> >
* *
</p> </p>
@@ -96,7 +96,7 @@ function InputLabelView({
</div> </div>
{helperText && ( {helperText && (
<p <p
className={`flex-[1_0_0] font-inter font-normal ${helperTextSize} min-h-px min-w-px relative ${helperTextColor} text-right`} className={`flex-[1_0_0] ${helperTextSize} min-h-px min-w-px relative ${helperTextColor} text-right`}
> >
{typeof helperText === "string" ? helperText : helperTextDefault} {typeof helperText === "string" ? helperText : helperTextDefault}
</p> </p>
app/components/type/NumberedList/NumberedList.view.tsx
+7 -7
View File
@@ -22,8 +22,8 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
<div <div
className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${ className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${
isM isM
? "font-inter font-bold text-[20px] leading-[28px]" ? "text-x-small-heading"
: "font-bricolage-grotesque font-bold text-[16px] leading-[22px]" : "font-bricolage-grotesque text-xx-small-heading"
}`} }`}
> >
<span>{index + 1}</span> <span>{index + 1}</span>
@@ -37,8 +37,8 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
<h3 <h3
className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${ className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
isM isM
? "font-inter font-bold text-[20px] leading-[28px]" ? "text-x-small-heading"
: "font-bricolage-grotesque font-bold text-[16px] leading-[22px]" : "font-bricolage-grotesque text-xx-small-heading"
}`} }`}
> >
{item.title} {item.title}
@@ -47,10 +47,10 @@ function NumberedListView({ items, size }: NumberedListViewProps) {
{/* Description */} {/* Description */}
<p <p
className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${ className={`max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
isM isM
? "text-[14px] leading-[20px]" ? "text-small-paragraph"
: "text-[12px] leading-[16px]" : "text-x-small-paragraph"
}`} }`}
> >
{item.description} {item.description}
app/components/type/PageHeader/PageHeader.view.tsx
+3 -3
View File
@@ -32,8 +32,8 @@ function PageHeaderView({
: "py-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-032)]"; : "py-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-032)]";
const titleTypeClasses = sectionMinimal 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-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-[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-medium-display lg:text-large-display";
const sectionFigmaNode = const sectionFigmaNode =
sectionMinimal && collapseTitleAtLg sectionMinimal && collapseTitleAtLg
@@ -77,7 +77,7 @@ function PageHeaderView({
)} )}
</h1> </h1>
{hasDescription ? ( {hasDescription ? (
<p className="font-inter text-[18px] font-normal leading-[28px] text-[var(--color-content-default-primary)] lg:text-[24px] lg:leading-[28px]"> <p className="text-[18px] font-normal leading-[28px] text-[var(--color-content-default-primary)] lg:text-x-large-label">
{description} {description}
</p> </p>
) : null} ) : null}
app/components/type/Section/Section.view.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import type { SectionProps } from "./Section.types";
const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)"; const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)";
const CATEGORY_CLASS = 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({ function SectionView({
categoryName, categoryName,
app/components/type/SectionHeader/SectionHeader.tsx
+8 -8
View File
@@ -68,10 +68,10 @@ const SectionHeader = memo<SectionHeaderProps>(
variant === "multi-line" variant === "multi-line"
? ruleStackDesktopTypeScale ? ruleStackDesktopTypeScale
? splitFromMd ? 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 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 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 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 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 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 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 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)]"
} }
> >
<span className={splitFromMd ? "block md:hidden" : "block lg:hidden"}> <span className={splitFromMd ? "block md:hidden" : "block lg:hidden"}>
@@ -108,10 +108,10 @@ const SectionHeader = memo<SectionHeaderProps>(
variant === "multi-line" variant === "multi-line"
? ruleStackDesktopTypeScale ? ruleStackDesktopTypeScale
? splitFromMd ? 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]" ? "text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-left md:text-large-paragraph xl:text-x-large-paragraph"
: "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]" : "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"
: "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" : "text-small-paragraph md:text-large-paragraph xl:text-x-large-paragraph 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-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} {subtitle}
app/components/type/TextBlock/TextBlock.view.tsx
+3 -3
View File
@@ -11,13 +11,13 @@ type TextRow = NonNullable<TextBlockProps["rows"]>[number];
*/ */
const ENTRY_TITLE_CLASS = 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 = 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 = 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[] { function bodyToParagraphs(body: string): string[] {
return body return body
app/components/type/TripleStep/TripleStep.view.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ function TripleStepView({
<div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:self-start lg:self-center"> <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:self-start lg:self-center">
<h2 <h2
id={headingId} id={headingId}
className="font-bricolage-grotesque text-[length:var(--text-medium-heading)] font-bold leading-[length:var(--text-medium-heading--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-large-heading)] md:leading-[length:var(--text-large-heading--line-height)]" className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
> >
{heading} {heading}
</h2> </h2>
@@ -54,7 +54,7 @@ function TripleStepView({
<p className="font-bricolage-grotesque text-[18px] font-medium leading-[22px]"> <p className="font-bricolage-grotesque text-[18px] font-medium leading-[22px]">
{step.title} {step.title}
</p> </p>
<p className="font-inter text-[length:var(--text-small-paragraph)] font-normal leading-[length:var(--text-small-paragraph--line-height)]"> <p className="text-small-paragraph">
{step.body} {step.body}
</p> </p>
</div> </div>
app/components/type/TripleTextBlock/TripleTextBlock.view.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ function TripleTextUseCasesColumn({ column }: { column: TripleTextBlockColumn })
<h3 className="text-left font-bricolage-grotesque text-[24px] font-medium leading-8 text-[var(--color-content-default-primary,white)] md:text-[32px] md:leading-[1.1] lg:text-[18px] lg:leading-[var(--spacing-scale-022)] xl:text-[32px] xl:leading-[1.1]"> <h3 className="text-left font-bricolage-grotesque text-[24px] font-medium leading-8 text-[var(--color-content-default-primary,white)] md:text-[32px] md:leading-[1.1] lg:text-[18px] lg:leading-[var(--spacing-scale-022)] xl:text-[32px] xl:leading-[1.1]">
{column.title} {column.title}
</h3> </h3>
<div className="flex flex-col font-inter text-[16px] font-normal leading-6 text-[var(--color-content-default-secondary)] md:text-[24px] md:leading-8 lg:text-[14px] lg:leading-5 xl:text-[24px] xl:leading-8"> <div className="flex flex-col text-medium-paragraph text-[var(--color-content-default-secondary)] md:text-x-large-paragraph lg:text-small-paragraph xl:text-x-large-paragraph">
<p>{column.description}</p> <p>{column.description}</p>
{column.descriptionSecondary ? ( {column.descriptionSecondary ? (
<p className="mt-[var(--spacing-scale-024)] md:mt-[var(--spacing-scale-032)] lg:mt-0 lg:pt-[var(--spacing-scale-020)] xl:mt-[var(--spacing-scale-032)]"> <p className="mt-[var(--spacing-scale-024)] md:mt-[var(--spacing-scale-032)] lg:mt-0 lg:pt-[var(--spacing-scale-020)] xl:mt-[var(--spacing-scale-032)]">
@@ -153,7 +153,7 @@ function TripleTextBlockView({
id={headingId} id={headingId}
className={ className={
isUseCases 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)]" : "w-full text-left font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary,white)]"
} }
> >
tests/components/FeatureGrid.test.tsx
+1 -2
View File
@@ -112,8 +112,7 @@ describe("FeatureGrid (behavioral tests)", () => {
expect(title.className).toMatch(/text-\[18px\]/); expect(title.className).toMatch(/text-\[18px\]/);
expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/); expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/);
const subtitle = screen.getByRole("heading", { name: "Test Subtitle" }); const subtitle = screen.getByRole("heading", { name: "Test Subtitle" });
expect(subtitle.className).toMatch(/text-\[length:var\(--sizing-350,14px\)\]/); expect(subtitle).toHaveClass("text-small-paragraph", "md:text-medium-paragraph");
expect(subtitle.className).toMatch(/md:text-\[length:var\(--sizing-400,16px\)\]/);
}); });
it("applies grain texture to feature grid icons", () => { it("applies grain texture to feature grid icons", () => {
tests/components/InputLabel.test.tsx
+2 -2
View File
@@ -70,13 +70,13 @@ describe("InputLabel – behaviour specifics", () => {
it("applies size s styling", () => { it("applies size s styling", () => {
render(<InputLabel label="Test Label" size="s" />); render(<InputLabel label="Test Label" size="s" />);
const label = screen.getByText("Test Label"); 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", () => { it("applies size m styling", () => {
render(<InputLabel label="Test Label" size="m" />); render(<InputLabel label="Test Label" size="m" />);
const label = screen.getByText("Test Label"); 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", () => { it("applies default palette styling", () => {