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

Adopt remaining typography token classes #65

Merged
an.di merged 1 commits from adilallo/fix/CR-24-typography-tokens into main 2026-08-17 20:09:54 +00:00
Conversation 0 Commits 1 Files Changed 75
+229 -252
75 changed files with 229 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2321a1e761 - Show all commits
app/(app)/create/components/ApplicableScopeField.tsx
+2 -2
View File
@@ -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)]"
/>
) : (
<button
type="button"
onClick={() => setIsAdding(true)}
className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] font-inter text-[length:var(--sizing-300,12px)] font-medium leading-[14px] text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
>
<AddGlyph />
{addLabel}
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+2 -2
View File
@@ -82,10 +82,10 @@ function CustomMethodCardWizardBlocksListViewComponent({
/>
</span>
<div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5">
<span className="truncate font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]">
<span className="truncate text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]">
{title}
</span>
<span className="font-inter text-[12px] leading-4 text-[var(--color-content-default-secondary)]">
<span className="text-x-small-paragraph text-[var(--color-content-default-secondary)]">
{typeLabel}
</span>
</div>
app/(app)/create/screens/informational/InformationalScreen.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export function InformationalScreen() {
{copy.descriptionLead}{" "}
<a
href="#"
className="font-inter font-normal text-[var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] cursor-pointer"
className="font-normal text-[var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] cursor-pointer"
onClick={(e) => {
e.preventDefault();
}}
app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
+1 -1
View File
@@ -169,7 +169,7 @@ export function ConfirmStakeholdersScreen() {
</div>
{chipError ? (
<p
className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
role="alert"
>
{chipError}
app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+1 -1
View File
@@ -632,7 +632,7 @@ export function CoreValuesSelectScreen() {
<button
type="button"
onClick={addHandlers.onAddClick}
className="cursor-pointer font-inter font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90"
className="cursor-pointer font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90"
>
{cv.header.addLink}
</button>
app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx
+6 -6
View File
@@ -109,7 +109,7 @@ export function PublishedStakeholdersManagePanel({
<section className="flex w-full flex-col gap-4 pt-1 pb-2">
{bannerError ? (
<p
className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
role="alert"
>
{bannerError}
@@ -117,15 +117,15 @@ export function PublishedStakeholdersManagePanel({
) : null}
{loadError ? (
<p className="font-inter text-sm text-[var(--color-border-default-utility-negative)]">
<p className="text-small-paragraph text-[var(--color-border-default-utility-negative)]">
{t("managePublished.loadFailed")}
</p>
) : items === null ? (
<p className="font-inter text-sm text-[var(--color-content-default-secondary)]">
<p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{t("managePublished.loading")}
</p>
) : items.length === 0 ? (
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("managePublished.empty")}
</p>
) : (
@@ -136,10 +136,10 @@ export function PublishedStakeholdersManagePanel({
className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between"
>
<div className="flex min-w-0 flex-col gap-1">
<span className="truncate font-inter text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
<span className="truncate text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
{row.email}
</span>
<span className="font-inter text-xs text-[var(--color-content-default-tertiary)] md:text-sm">
<span className="text-x-small-paragraph text-[var(--color-content-default-tertiary)] md:text-sm">
{row.status === "pending"
? t("managePublished.pending")
: t("managePublished.accepted")}
app/(app)/create/utils/createFlowFooterClassNames.ts
+1 -1
View File
@@ -11,7 +11,7 @@
* exposes a native size that matches, this module should collapse.
*/
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)]";
app/(app)/login/page.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ function LoginLoadingFallback() {
const t = useTranslation("pages.login");
return (
<div className={`${loginPageBgClass} flex items-center justify-center`}>
<p className="font-inter text-[14px] text-[var(--color-content-default-primary)]">
<p className="text-[14px] text-[var(--color-content-default-primary)]">
{t("loadingFallback")}
</p>
</div>
@@ -42,7 +42,7 @@ function LoginWithSearchParams() {
belowCard={
<Link
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
>
{t("backToHome")}
</Link>
app/(app)/profile/ProfilePageClient.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ export default function ProfilePageClient() {
if (!sessionLoaded) {
return (
<div className="mx-auto max-w-3xl px-4 py-16">
<p className="font-inter text-sm text-[var(--color-content-default-secondary)]">
<p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{t("loading")}
</p>
</div>
app/(app)/profile/_components/ProfilePage.view.tsx
+6 -6
View File
@@ -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({
<>
<h1
id={titleId}
className="font-inter text-xl font-bold leading-7 text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-[28px] md:font-bold md:leading-[36px]"
className="text-x-small-heading text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-medium-heading"
>
{t("pageTitle")}
</h1>
<p className="max-w-[640px] font-inter text-sm font-normal leading-5 text-[var(--color-content-default-tertiary)] md:text-base md:leading-6">
<p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-medium-paragraph">
{t("signInPrompt")}
</p>
</>
@@ -275,11 +275,11 @@ export function ProfilePageView({
<>
<h1
id={titleId}
className="font-inter text-xl font-bold leading-7 text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-[28px] md:font-bold md:leading-[36px]"
className="text-x-small-heading text-[var(--color-content-default-primary)] md:font-bricolage-grotesque md:text-medium-heading"
>
{welcomeTitle}
</h1>
<p className="max-w-[640px] font-inter text-sm font-normal leading-5 text-[var(--color-content-default-tertiary)] md:text-base md:leading-6">
<p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-medium-paragraph">
{welcomeBody}
</p>
</>
@@ -381,7 +381,7 @@ export function ProfilePageView({
))}
</div>
{rules.length === 0 && !rulesError && !showDraftCard ? (
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("yourRulesEmpty")}
</p>
) : null}
app/(dev)/components-preview/page.tsx
+13 -13
View File
@@ -45,7 +45,7 @@ export default function ComponentsPreview() {
<h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]">
Component Preview
</h1>
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
<p className="text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
Navigation Link (Figma 21861:21428) and List (21863:45631 / 45493 /
4405) with ListEntry (21844:4118). Use Tab and hover to review
states.
@@ -53,12 +53,12 @@ export default function ComponentsPreview() {
</header>
<section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Link
</h2>
<div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]">
<div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Light surface
</p>
<div className="flex flex-col gap-4 rounded-lg bg-white p-6">
@@ -105,7 +105,7 @@ export default function ComponentsPreview() {
</div>
<div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Dark surface
</p>
<div className="flex flex-col gap-4 rounded-lg bg-[var(--color-gray-800)] p-6">
@@ -154,22 +154,22 @@ export default function ComponentsPreview() {
</section>
<section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Divider
</h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
Utility / Divider (450:1941). List rows use the Content line; Menu is
slightly higher-contrast.
</p>
<div className="max-w-md space-y-4">
<div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]">
<p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Content
</p>
<Divider type="content" orientation="horizontal" />
</div>
<div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]">
<p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Menu
</p>
<Divider type="menu" orientation="horizontal" />
@@ -178,16 +178,16 @@ export default function ComponentsPreview() {
</section>
<section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
List
</h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row:
ListEntry (21844:4118).
</p>
<div className="space-y-[var(--spacing-scale-024)]">
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Small
</h3>
<div className="mx-auto max-w-[1044px]">
@@ -195,7 +195,7 @@ export default function ComponentsPreview() {
</div>
</div>
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Medium
</h3>
<div className="mx-auto max-w-[1044px]">
@@ -203,7 +203,7 @@ export default function ComponentsPreview() {
</div>
</div>
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Large
</h3>
<div className="mx-auto max-w-[1590px]">
app/(marketing)/_components/LegalDocumentPage.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
const 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({
>
<div className={`${ARTICLE_COLUMN_CLASS} -mt-[var(--spacing-scale-048)]`}>
<div
className="flex flex-wrap items-end gap-[var(--measures-spacing-008,8px)] font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-default-secondary)] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%]"
className="flex flex-wrap items-end gap-[var(--measures-spacing-008,8px)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
data-name="Metadata Container"
>
<span>{page.banner.author}</span>
app/(marketing)/blog/[slug]/page.tsx
+1 -1
View File
@@ -252,7 +252,7 @@ export default async function BlogPostPage({ params }: PageProps) {
sm:px-0 sm:py-[var(--spacing-scale-032)]
"
>
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-[16px] leading-[24px] sm:text-[18px] sm:leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
<div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
</div>
</article>
app/(marketing)/how-it-works/page.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ export default function HowItWorksPage() {
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
<div
className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-default-primary)] text-[16px] leading-[24px] sm:text-[18px] sm:leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"
className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"
dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
/>
</article>
app/components/buttons/Button/Button.tsx
+5 -5
View File
@@ -106,11 +106,11 @@ const Button = memo<ButtonProps>(
};
const fontStyles: Record<string, string> = {
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<string, string> = {
app/components/buttons/InlineTextButton/InlineTextButton.tsx
+1 -1
View File
@@ -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(" ");
app/components/cards/CardStack/CardStack.view.tsx
+3 -3
View File
@@ -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)]"
>
<span className="flex items-center gap-2">
<svg
@@ -154,7 +154,7 @@ export function CardStackView({
<button
type="button"
onClick={onToggleExpand}
className={`font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
className={`text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
toggleAlignment === "end" ? "self-end" : "self-center"
}`}
>
@@ -474,7 +474,7 @@ export function CardStackView({
<button
type="button"
onClick={onToggleExpand}
className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
className="text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
>
{expanded ? showLessLabel : toggleLabel}
</button>
app/components/cards/Icon/Icon.view.tsx
+2 -2
View File
@@ -35,13 +35,13 @@ export function IconView({
{/* Title — Figma XX Large / Label (32 / 36) */}
<h3
id={interactive ? undefined : layoutTitleId}
className="w-full text-left font-inter text-[32px] font-normal leading-[36px] text-[var(--color-content-default-primary)]"
className="w-full text-left text-xx-large-label text-[var(--color-content-default-primary)]"
>
{title}
</h3>
{/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */}
<p className="w-full text-left font-inter font-normal text-[length:var(--text-x-small-paragraph)] leading-[length:var(--text-x-small-paragraph--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-small-paragraph)] md:leading-[length:var(--text-small-paragraph--line-height)] lg:text-[length:var(--text-x-small-paragraph)] lg:leading-[length:var(--text-x-small-paragraph--line-height)]">
<p className="w-full text-left text-x-small-paragraph text-[var(--color-content-default-primary)] md:text-small-paragraph lg:text-x-small-paragraph">
{description}
</p>
</div>
app/components/cards/Mini/Mini.view.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ function MiniView({
{children}
</div>
<div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]">
<div className="text-center text-x-small-label text-[var(--color-content-default-primary)]">
{labelLine1 && labelLine2 ? (
<>
<div>{labelLine1}</div>
app/components/cards/Rule/Rule.view.tsx
+14 -14
View File
@@ -108,27 +108,27 @@ export function RuleView({
const showRecommendedTag = recommended && !expanded;
const 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 ? (
<span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 text-[var(--color-surface-invert-brand-teal)]">
<span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 text-xx-small-label uppercase text-[var(--color-surface-invert-brand-teal)]">
{bottomStatusLabel}
</span>
) : null}
app/components/cards/Selection/Selection.view.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ import type { SelectionViewProps } from "./Selection.types";
function InfoIcon() {
return (
<span
className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
aria-hidden
>
?
@@ -59,11 +59,11 @@ export function SelectionView({
onKeyDown={onKeyDown}
>
<SelectionTag recommended={recommended} selected={selected} />
<span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
<span className="w-full text-medium-label text-[var(--color-content-invert-secondary)]">
{label}
</span>
{supportText ? (
<p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
<p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
{supportText}
</p>
) : null}
@@ -85,13 +85,13 @@ export function SelectionView({
>
<div className="flex min-w-0 flex-1 flex-col gap-1">
<div className="flex items-center gap-1">
<span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
<span className="text-medium-label text-[var(--color-content-invert-secondary)]">
{label}
</span>
{showInfoIcon ? <InfoIcon /> : null}
</div>
{supportText ? (
<p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
<p className="text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
{supportText}
</p>
) : null}
app/components/cards/Stat/Stat.view.tsx
+3 -3
View File
@@ -24,16 +24,16 @@ function StatView({
variant={shapeVariant}
className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
/>
<p className="relative font-bricolage-grotesque text-[40px] font-bold leading-[52px] text-[var(--color-content-invert-primary,black)]">
<p className="relative font-bricolage-grotesque text-xx-large-heading text-[var(--color-content-invert-primary,black)]">
{value}
</p>
</div>
<p className="font-inter text-[14px] font-normal leading-5 text-[var(--color-content-invert-primary,black)]">
<p className="text-small-paragraph text-[var(--color-content-invert-primary,black)]">
{label}
</p>
</div>
{asOf ? (
<p className="w-full font-inter text-[10px] font-normal leading-[14px] text-[var(--color-content-invert-tertiary,#2d2d2d)]">
<p className="w-full text-xx-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)]">
{asOf}
</p>
) : null}
app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
+2 -2
View File
@@ -56,7 +56,7 @@ export function TemplateChipDetailModal({
>
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
{resolved?.body ?? (
<p className="font-inter text-[14px] leading-[20px] text-[color:var(--color-content-default-secondary,#a3a3a3)]">
<p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]">
{t("fallback.bodyLabel")}
</p>
)}
@@ -318,7 +318,7 @@ function ReadOnlyValueField({
return (
<div className="flex flex-col gap-2">
<InputLabel label={label} helpIcon size="s" palette="default" />
<span className="font-inter text-[16px] font-medium leading-[20px] text-[color:var(--color-content-default-primary)]">
<span className="text-medium-label text-[color:var(--color-content-default-primary)]">
{value}
</span>
</div>
app/components/content/ContentContainer/ContentContainer.container.tsx
+7 -7
View File
@@ -75,22 +75,22 @@ const ContentContainerContainer = memo<ContentContainerProps>(
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 (
<ContentContainerView
app/components/controls/AddCustomField/AddCustomField.view.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ function FieldTypeButton({
className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
/>
</span>
<span className="w-full text-center font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
<span className="w-full text-center text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
{label}
</span>
</Vertical>
@@ -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()}
>
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
<svg
app/components/controls/Checkbox/Checkbox.view.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export function CheckboxView({
{label && (
<span
id={labelId}
className="font-inter text-[14px] leading-[18px]"
className="text-[14px] leading-[18px]"
style={{ color: labelColor }}
>
{label}
app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ export function CheckboxGroupView({
/>
<div className="flex flex-col gap-[4px] flex-1">
<span
className={`font-inter text-[14px] leading-[20px] ${
className={`text-small-paragraph ${
mode === "inverse"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
@@ -46,7 +46,7 @@ export function CheckboxGroupView({
{option.label}
</span>
<span
className={`font-inter text-[14px] leading-[20px] ${
className={`text-small-paragraph ${
mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-tertiary,#b4b4b4)]"
app/components/controls/Chip/Chip.view.tsx
+5 -5
View File
@@ -39,11 +39,11 @@ function ChipView({
// Custom state has different padding
const sizeClasses = isCustom
? isSmall
? "px-[var(--measures-spacing-100,4px)] py-[3px] text-[length:var(--sizing-300,12px)] leading-[16px]"
: "px-[var(--measures-spacing-150,6px)] py-[10px] text-[length:var(--sizing-400,16px)] leading-[24px]"
? "px-[var(--measures-spacing-100,4px)] py-[3px] text-x-small-paragraph"
: "px-[var(--measures-spacing-150,6px)] py-[10px] text-medium-paragraph"
: isSmall
? "h-[30px] px-[var(--measures-spacing-200,8px)] gap-[var(--measures-spacing-050,2px)] text-[length:var(--sizing-300,12px)] leading-[14px]"
: "px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-300,12px)] gap-[var(--measures-spacing-150,6px)] text-[length:var(--sizing-400,16px)] leading-[20px]";
? "h-[30px] px-[var(--measures-spacing-200,8px)] gap-[var(--measures-spacing-050,2px)] text-x-small-label"
: "px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-300,12px)] gap-[var(--measures-spacing-150,6px)] text-medium-label";
// Palette + state styling based on Figma examples
// Use consistent border width to prevent layout shift
@@ -209,7 +209,7 @@ function ChipView({
onChange={(e) => 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)"
app/components/controls/Incrementer/Incrementer.view.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ function IncrementerView({
</button>
<span
aria-live="polite"
className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
className={`shrink-0 whitespace-nowrap text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
>
{displayValue}
</span>
app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
+2 -2
View File
@@ -56,11 +56,11 @@ function InfoMessageBoxView({
>
{icon ?? <ExclamationIconInline />}
</div>
<p className="font-inter font-medium text-[14px] leading-[16px] text-[var(--color-content-default-primary,white)] min-w-0">
<p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0">
{title}
</p>
</div>
<div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-[12px] [&_label_span]:leading-[16px] [&_label_span]:opacity-80 pl-8">
<div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80 pl-8">
<CheckboxGroup
mode="standard"
value={checkedIds}
app/components/controls/InputWithCounter/InputWithCounter.view.tsx
+3 -3
View File
@@ -15,7 +15,7 @@ export function InputWithCounterView({
{/* Label with help icon */}
{label && (
<div className="flex items-center gap-[var(--spacing-scale-002)]">
<label className="font-inter text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]">
<label className="text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]">
{label}
</label>
{showHelpIcon && (
@@ -61,12 +61,12 @@ export function InputWithCounterView({
}
}}
maxLength={maxLength}
className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--measures-radius-medium,8px)] text-[16px] leading-[24px] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`}
className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--measures-radius-medium,8px)] text-medium-paragraph text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`}
/>
</div>
{/* Character counter */}
<p className="font-inter text-[12px] leading-[16px] text-[var(--color-content-default-tertiary)]">
<p className="text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
{value.length}/{maxLength}
</p>
</div>
app/components/controls/MultiSelect/MultiSelect.view.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ function MultiSelectView({
</svg>
{addButtonText && (
<span
className={`font-inter font-medium ${isSmall ? "text-[length:var(--sizing-300,12px)] leading-[14px]" : "text-[length:var(--sizing-400,16px)] leading-[20px]"} ${
className={`font-medium ${isSmall ? "text-[length:var(--sizing-300,12px)] leading-[14px]" : "text-medium-label"} ${
isInverse
? "text-[color:var(--color-content-inverse-primary,black)]"
: "text-[color:var(--color-content-default-primary,white)]"
app/components/controls/RadioButton/RadioButton.view.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function RadioButtonView({
{label && (
<span
id={`${radioId}-label`}
className="font-inter text-[14px] leading-[18px]"
className="text-[14px] leading-[18px]"
style={{ color: labelColor }}
>
{label}
app/components/controls/RadioGroup/RadioGroup.view.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export function RadioGroupView({
/>
<div className="flex flex-col gap-[4px] flex-1">
<span
className={`font-inter text-[14px] leading-[20px] ${
className={`text-small-paragraph ${
mode === "inverse"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
@@ -50,7 +50,7 @@ export function RadioGroupView({
{option.label}
</span>
<span
className={`font-inter text-[14px] leading-[20px] ${
className={`text-small-paragraph ${
mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-secondary,#b4b4b4)]"
app/components/controls/SelectInput/SelectInput.view.tsx
+5 -7
View File
@@ -80,7 +80,7 @@ export function SelectInputView({
// Styles based on Figma design
const containerClasses = "flex flex-col gap-[8px]";
const labelClasses =
"text-[14px] leading-[20px] font-medium font-inter text-[var(--color-content-default-primary)]";
"text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]";
// Button styles per Figma
const getButtonClasses = (): string => {
@@ -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}
</label>
{asterisk && (
<span className="text-[var(--color-content-default-negative-primary,#ea4845)] text-[10px] leading-[12px] font-medium">
<span className="text-[var(--color-content-default-negative-primary,#ea4845)] text-xx-small-label">
*
</span>
)}
@@ -169,7 +167,7 @@ export function SelectInputView({
)}
</div>
{textOptional && (
<span className="text-[var(--color-content-default-tertiary,#b4b4b4)] text-[10px] leading-[14px] font-normal">
<span className="text-[var(--color-content-default-tertiary,#b4b4b4)] text-xx-small-paragraph">
Optional text
</span>
)}
@@ -271,7 +269,7 @@ export function SelectInputView({
</div>
{textHint && (
<div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{hintDefault}
</p>
</div>
app/components/controls/SelectOption/SelectOption.container.tsx
+4 -4
View File
@@ -25,13 +25,13 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
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";
}
};
app/components/controls/Switch/Switch.container.tsx
+1 -4
View File
@@ -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()
app/components/controls/TextArea/TextArea.container.tsx
+10 -10
View File
@@ -57,24 +57,24 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
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<HTMLTextAreaElement, TextAreaProps>(
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
app/components/controls/TextArea/TextArea.view.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
<label
id={labelId}
htmlFor={textareaId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
className={`${labelClasses} font-medium text-[var(--color-content-default-secondary)]`}
>
{label}
</label>
@@ -82,7 +82,7 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
</div>
{textHint ? (
<div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{typeof textHint === "string" ? textHint : hintDefault}
</p>
</div>
app/components/controls/TextInput/TextInput.container.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
// Container classes (default label variant only)
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 = `
app/components/controls/TextInput/TextInput.view.tsx
+2 -2
View File
@@ -42,7 +42,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
<label
id={labelId}
htmlFor={inputId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-primary)]`}
className={`${labelClasses} font-medium text-[var(--color-content-default-primary)]`}
>
{label}
</label>
@@ -84,7 +84,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
</div>
{textHint && (
<div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{typeof textHint === "string" ? textHint : hintDefault}
</p>
</div>
app/components/controls/Toggle/Toggle.container.tsx
+2 -5
View File
@@ -101,16 +101,13 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
// 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
app/components/controls/ToggleGroup/ToggleGroup.container.tsx
-1
View File
@@ -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]
app/components/controls/Upload/Upload.view.tsx
+2 -2
View File
@@ -98,7 +98,7 @@ function UploadView({
</div>
{/* Button text */}
<div
className={`flex flex-col font-inter font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`}
className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`}
>
<p className="leading-[20px]">{uploadButtonLabel}</p>
</div>
@@ -106,7 +106,7 @@ function UploadView({
{/* Description text */}
<div
className={`flex flex-[1_0_0] flex-col font-inter font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}
className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}
>
<p className="leading-[20px] whitespace-pre-wrap">{hintText}</p>
</div>
app/components/layout/Accordion/Accordion.view.tsx
+10 -10
View File
@@ -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<AccordionSizeValue, string> = {
s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] font-inter text-[14px] font-normal leading-5 text-[var(--color-content-default-secondary,#d2d2d2)]",
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({
>
<span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]">
<span
className={`font-inter text-[var(--color-content-default-primary,white)] ${sizeClass.title}`}
className={`text-[var(--color-content-default-primary,white)] ${sizeClass.title}`}
>
{title}
</span>
{subhead ? (
<span
className={`font-inter font-medium text-[var(--color-content-default-tertiary,#b4b4b4)] ${sizeClass.subhead}`}
className={`font-medium text-[var(--color-content-default-tertiary,#b4b4b4)] ${sizeClass.subhead}`}
>
{subhead}
</span>
app/components/layout/ListItem/ListItem.view.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const ListItemView = memo(function ListItemView({
<Icon name={leadingIcon} size={24} />
</span>
<span
className={`min-w-0 flex-1 text-left font-inter text-[12px] font-normal leading-4 whitespace-normal ${contentTone}`}
className={`min-w-0 flex-1 text-left text-x-small-paragraph whitespace-normal ${contentTone}`}
>
{label}
</span>
app/components/layout/listSizeLayout.ts
+6 -6
View File
@@ -42,18 +42,18 @@ export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
shell: `${rowShellBase} min-h-0 gap-1.5 py-[var(--spacing-scale-012)]`,
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<ListSize, RowLayout> = {
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,
},
};
app/components/modals/Alert/Alert.container.tsx
+9 -9
View File
@@ -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)]",
};
}
app/components/modals/AskOrganizerInquiry/AskOrganizerInquiryModal.view.tsx
+4 -4
View File
@@ -76,7 +76,7 @@ export function AskOrganizerInquiryModalView({
belowCard={
<Link
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
onClick={() => onClose()}
>
{copy.backToHome}
@@ -85,10 +85,10 @@ export function AskOrganizerInquiryModalView({
>
{success ? (
<div className="flex flex-col gap-3 py-2">
<p className="font-inter text-[18px] font-semibold leading-[24px] text-[var(--color-content-default-primary)]">
<p className="text-large-label text-[var(--color-content-default-primary)]">
{copy.successTitle}
</p>
<p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)]">
<p className="text-small-paragraph text-[var(--color-content-default-secondary)]">
{copy.successDescription}
</p>
</div>
@@ -102,7 +102,7 @@ export function AskOrganizerInquiryModalView({
{formError ? (
<p
role="alert"
className="font-inter text-[14px] leading-[20px] text-[var(--color-border-default-negative-primary)]"
className="text-small-paragraph text-[var(--color-border-default-negative-primary)]"
>
{formError}
</p>
app/components/modals/Login/LoginForm.tsx
+2 -2
View File
@@ -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}
</p>
@@ -259,7 +259,7 @@ export default function LoginForm({
>
{t("sendMagicLink")}
</Button>
<p className="text-center font-inter text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)]">
<p className="text-center text-small-paragraph text-[var(--color-content-default-tertiary)]">
{t("legalPrefix")}
<Link
href={tFooter("legal.termsOfServiceHref")}
app/components/modals/Share/Share.view.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ function ShareChannelTile({ label, onClick, circleClassName, icon }: ShareChanne
>
{icon}
</div>
<span className="max-w-[4.5rem] text-center font-inter text-[12px] font-medium leading-4 text-[var(--color-content-default-tertiary)]">
<span className="max-w-[4.5rem] text-center text-x-small-label text-[var(--color-content-default-tertiary)]">
{label}
</span>
</button>
app/components/modals/Tooltip/Tooltip.view.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function TooltipView({
aria-live="polite"
id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`}
>
<p className="font-inter text-[var(--sizing-350,14px)] leading-[16px] font-medium tracking-[0%] text-[var(--color-content-default-primary)] relative shrink-0">
<p className="text-small-label text-[var(--color-content-default-primary)] relative shrink-0">
{text}
</p>
<div
app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function CreateFlowFooterView({
buttonType="ghost"
palette="default"
size="xsmall"
className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
onClick={onBackClick}
disabled={!onBackClick}
>
app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+4 -4
View File
@@ -7,10 +7,10 @@ import Popover from "../../modals/Popover";
import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types";
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}
</Button>
@@ -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}
</Button>
app/components/navigation/Footer.tsx
+11 -11
View File
@@ -20,15 +20,15 @@ const Footer = memo(() => {
"touch-manipulation [-webkit-tap-highlight-color:transparent] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity duration-150 ease-out";
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"
>
<p
className="w-full font-inter text-sm font-normal leading-5 tracking-[0%]
className="w-full text-small-paragraph
text-[var(--color-content-default-secondary)]
md:w-auto
md:text-xs md:leading-4
lg:text-sm lg:leading-5"
md:text-x-small-paragraph
lg:text-small-paragraph"
>
<a
href={t("license.href")}
@@ -199,15 +199,15 @@ const Footer = memo(() => {
<div
className="flex w-full min-w-0 flex-col flex-wrap
gap-[var(--spacing-scale-032)]
font-inter text-sm
text-small-paragraph
text-[var(--color-content-default-primary)]
md:max-w-[min(100%,396px)]
md:flex-row md:flex-nowrap md:content-center md:items-center md:justify-end
md:gap-[var(--spacing-scale-040)]
md:text-xs md:leading-4
md:text-x-small-paragraph
lg:max-w-none
lg:gap-10
lg:text-sm lg:leading-5"
lg:text-small-paragraph"
>
<Link href={t("legal.privacyPolicyHref")} className={legalLinkClass}>
{t("legal.privacyPolicy")}
app/components/navigation/Link/Link.view.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const FIGMA_ROOT = "21861:21428";
/** Profile & card small viewports: Figma Sizing/300 + label line (350). ≥640px: 18px / 1.3. */
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"
app/components/navigation/MenuItem/MenuItem.container.tsx
+5 -5
View File
@@ -51,12 +51,12 @@ const MenuItemContainer = memo<MenuItemProps>(
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)
app/components/navigation/NavigationItem/NavigationItem.container.tsx
+2 -2
View File
@@ -38,8 +38,8 @@ const NavigationItemContainer = memo<NavigationItemProps>(
// Text styles based on size
const textStyles: Record<string, string> = {
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`;
app/components/sections/AskOrganizer/AskOrganizer.view.tsx
+1 -1
View File
@@ -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"
app/components/sections/ContentBanner/ContentBanner.view.tsx
+2 -2
View File
@@ -37,12 +37,12 @@ function ContentBannerGuideView({
<div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
<h1
id="content-banner-title"
className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-[44px]"
className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-medium-display"
>
{title}
</h1>
{description ? (
<p className="w-full font-inter font-normal text-[16px] leading-[130%] sm:text-[18px]">
<p className="w-full font-normal text-[16px] leading-[130%] sm:text-large-paragraph">
{description}
</p>
) : null}
app/components/sections/Groups/Groups.view.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps
<div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]">
<h2
id={headingId}
className="w-full shrink-0 text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-10 lg:text-[40px] lg:leading-[52px]"
className="w-full shrink-0 text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading"
>
{title}
</h2>
app/components/sections/QuoteBlock/QuoteBlock.container.tsx
+3 -3
View File
@@ -46,11 +46,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
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: {
app/components/sections/QuoteBlock/QuoteBlock.view.tsx
+3 -3
View File
@@ -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 (
<section
@@ -142,7 +142,7 @@ function QuoteBlockView({
<footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
<cite
id={authorId}
className={`font-inter font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
>
{author}
</cite>
@@ -151,7 +151,7 @@ function QuoteBlockView({
data-qopen="&ldquo;"
data-qclose="&rdquo;"
className={[
"font-inter font-normal",
"font-normal",
config.source,
"text-[var(--color-content-inverse-primary)] uppercase",
"pl-[0.6em] -indent-[0.6em]",
app/components/sections/RelatedArticles/RelatedArticles.view.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ export function RelatedArticlesView({
}
>
{isUseCases && useCasesHeadingLines?.length ? (
<h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-[40px] lg:text-[40px] lg:leading-[52px]">
<h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading">
{/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */}
<span className="flex flex-col md:hidden">
{useCasesHeadingLines.map((line, index) => (
@@ -52,7 +52,7 @@ export function RelatedArticlesView({
</h2>
) : (
<h2
className={`text-center text-[32px] font-medium leading-[110%] lg:text-[44px] ${
className={`text-center font-medium text-[32px] leading-[110%] lg:text-medium-display ${
headingSurface === "onLight"
? "text-[var(--color-content-default-primary)]"
: "text-[var(--color-content-inverse-primary)]"
app/components/sections/Stats/Stats.view.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ function StatsView({
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-010)] sm:gap-[var(--spacing-scale-032)]">
<h2
id={headingId}
className="max-w-[116px] font-inter text-[24px] font-normal leading-[32px] md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
className="max-w-[116px] text-x-large-paragraph md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
>
<span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]">
{titlePrefix ? (
app/components/type/ContentLockup/ContentLockup.container.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ const ContentLockupContainer = memo<ContentLockupProps>(
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<ContentLockupProps>(
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]",
},
app/components/type/TripleStep/TripleStep.view.tsx
+1 -1
View File
@@ -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}
</Button>
app/components/utility/Tag/Tag.view.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function TagView({ variant, children, className }: TagViewProps) {
return (
<span
className={`inline-flex shrink-0 items-center justify-center rounded-[2px] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 ${bgClass} ${textClass} ${className}`}
className={`inline-flex shrink-0 items-center justify-center rounded-[2px] px-1 py-0.5 text-xx-small-label uppercase ${bgClass} ${textClass} ${className}`}
role="status"
>
{children}
app/contexts/AuthModalContext.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export function AuthModalProvider({ children }: { children: ReactNode }) {
belowCard={
<Link
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
onClick={() => closeLogin()}
>
{t("backToHome")}
app/not-found.tsx
+3 -3
View File
@@ -63,12 +63,12 @@ export default function NotFound() {
/>
<h1
id="not-found-heading"
className="mt-[var(--spacing-scale-032)] max-w-full text-center font-bricolage-grotesque text-[2.5rem] font-medium leading-[1.1] text-[var(--color-content-default-primary)] min-[400px]:text-[44px] min-[400px]:leading-[1.1]"
className="mt-[var(--spacing-scale-032)] max-w-full text-center font-bricolage-grotesque font-medium leading-[1.1] text-[40px] text-[var(--color-content-default-primary)] min-[400px]:text-medium-display"
>
{t("pages.notFoundPage.heading")}
</h1>
</div>
<p className="mt-[var(--spacing-scale-016)] w-full max-w-[443px] text-center font-inter text-lg font-normal leading-[1.3] text-[var(--color-content-default-secondary)]">
<p className="mt-[var(--spacing-scale-016)] w-full max-w-[443px] text-center text-large-paragraph text-[var(--color-content-default-secondary)]">
{t("pages.notFoundPage.description")}
</p>
@@ -119,7 +119,7 @@ export default function NotFound() {
</Link>
))}
</div>
<p className="w-full text-center font-inter text-[13px] font-normal leading-[1.2] text-[var(--color-gray-500)]">
<p className="w-full text-center text-[13px] font-normal leading-[1.2] text-[var(--color-gray-500)]">
{t("pages.notFoundPage.templateHint")}
</p>
</div>
tests/components/ContentBanner.test.tsx
+1 -1
View File
@@ -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]");
tests/pages/blog.test.jsx
+4 -8
View File
@@ -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 () => {
tests/unit/ContentContainer.test.jsx
+7 -17
View File
@@ -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", () => {
tests/unit/QuoteBlock.test.jsx
+4 -4
View File
@@ -197,7 +197,7 @@ describe("QuoteBlock Component", () => {
render(<QuoteBlock quote="Test quote" author="Test Author" />);
const authorElement = screen.getByText("Test Author");
expect(authorElement).toHaveClass("font-inter", "font-normal", "uppercase");
expect(authorElement).toHaveClass("font-normal", "uppercase");
});
test("applies responsive text sizing", () => {
@@ -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",
);
});
tests/unit/Rule.test.jsx
+2 -2
View File
@@ -188,11 +188,11 @@ describe("Rule Component", () => {
render(<Rule {...defaultProps} size="L" />);
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", () => {