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/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>