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

Adopt remaining typography token classes (CR-24)

Browse Source 
Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-17 11:40:10 -06:00
co-authored by Cursor
parent cb0adf2049
commit 2321a1e761
75 changed files with 229 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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`;