Adopt remaining typography token classes (CR-24)
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
@@ -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}
|
||||
|
||||
+2
-2
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
@@ -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)]";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user