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

Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-11-02 17:03:43 -07:00
1 parent 63d5d21ae0
commit e808fe70bf
162 files changed
+1385 -1377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(app)/create/components/ApplicableScopeField.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ function ApplicableScopeFieldComponent({
<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)] 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"
className="inline-flex items-center gap-[var(--space-050)] rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)] 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/CreateFlowLockupCardStepShell.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function CreateFlowLockupCardStepShell({
className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
>
<div
className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--space-1200)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
>
<div
className={`flex min-w-0 flex-col justify-start md:justify-center ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
+4 -4
View File
@@ -60,14 +60,14 @@ export function CreateFlowTwoColumnSelectShell({
>
<div
className={
"flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] " +
"flex w-full min-w-0 flex-col items-start gap-[var(--space-400)] " +
"max-lg:flex-none lg:max-h-full lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
`${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
`${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--space-1200)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
}
>
<div
className={
`flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` +
`flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--space-200)] ` +
`lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
}
>
@@ -75,7 +75,7 @@ export function CreateFlowTwoColumnSelectShell({
</div>
<div
className={
`relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
`relative flex w-full min-w-0 flex-col items-start gap-[var(--space-800)] ` +
`overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` +
`${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
}
app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx
+1 -1
View File
@@ -134,7 +134,7 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
block.blockTitle ||
noFileChosen
}
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/>
) : (
<p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardUploadBlockRow.view.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ function CustomMethodCardUploadBlockRowViewComponent({
<img
src={assetUrlTrimmed}
alt={uploadPreviewImageAlt}
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/>
</div>
) : (
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+3 -3
View File
@@ -57,7 +57,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
key={block.id}
draggable
aria-grabbed={isDragging ? true : undefined}
className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--radius-400)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
isDropTarget
? "relative z-10 border-[var(--color-border-invert-primary)]"
: isDragging
@@ -74,7 +74,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
tabIndex={0}
aria-label={dragHandleAriaLabel}
onPointerDown={onHandlePointerDown}
className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--measures-radius-200,8px)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--radius-200)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
>
<DragHandleGlyph />
</span>
@@ -82,7 +82,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
type="button"
aria-label={title}
onClick={() => onEditBlock(block)}
className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--radius-200)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
>
<span className="flex h-8 w-8 shrink-0 items-center justify-center self-center">
<Icon
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx
+5 -5
View File
@@ -46,7 +46,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "text") {
return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]">
<div className="flex flex-col gap-[var(--space-600)]">
<InputWithCounter
label={copy.text.blockTitleLabel}
placeholder={copy.text.blockTitlePlaceholder}
@@ -80,7 +80,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "badges") {
return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]">
<div className="flex flex-col gap-[var(--space-600)]">
<div className="flex flex-col gap-2">
<InputLabel
label={copy.badges.blockTitleLabel}
@@ -114,7 +114,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "upload") {
return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]">
<div className="flex flex-col gap-[var(--space-600)]">
<input
ref={fileInputRef}
type="file"
@@ -154,7 +154,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
<img
src={uploadPreviewTrimmed}
alt={copy.upload.uploadPreviewImageAlt}
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/>
</div>
) : (
@@ -184,7 +184,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
}
return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]">
<div className="flex flex-col gap-[var(--space-600)]">
<InputWithCounter
label={copy.proportion.blockTitleLabel}
placeholder={copy.proportion.blockTitlePlaceholder}
app/(app)/create/components/FinalReviewChipEditModal.tsx
+1 -1
View File
@@ -1112,7 +1112,7 @@ export function FinalReviewChipEditModal({
}
ariaLabel={target?.chipLabel || "Edit chip details"}
>
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
<div className="flex flex-col gap-[var(--space-600)] pb-2">
{draft?.groupKey === "coreValues" &&
target &&
(modalUsesWizardFieldBlocksBody ? (
app/(app)/create/components/ModalTextAreaField.tsx
+2 -2
View File
@@ -107,13 +107,13 @@ function ModalTextAreaFieldComponent({
<button
type="button"
onClick={() => onChange(draftSource)}
className="flex shrink-0 items-center justify-center gap-[var(--measures-spacing-050,2px)] overflow-clip 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,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
className="flex shrink-0 items-center justify-center gap-[var(--space-050)] overflow-clip rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
>
<PlusGlyph />
{generateDraftLabel}
</button>
{generateDraftHint ? (
<p className="text-[length:var(--sizing-300,12px)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
<p className="text-[length:var(--sizing-300)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{generateDraftHint}
</p>
) : null}
app/(app)/create/components/createFlowLayoutTokens.ts
+1 -1
View File
@@ -48,7 +48,7 @@ export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS =
export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
"w-full min-w-0 lg:mx-auto lg:max-w-[640px]";
/** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
/** Two 640px columns + `--space-1200` (48px) gutter. */
export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS =
"w-full min-w-0 lg:max-w-[1328px]";
app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ function CoreValueEditFieldsComponent({
);
return (
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
<div className="flex flex-col gap-[var(--space-600)] pb-2">
<ModalTextAreaField
label={t.meaningLabel}
value={value.meaning}
app/(app)/create/screens/completed/CompletedScreen.tsx
+1 -1
View File
@@ -165,7 +165,7 @@ export function CompletedScreen() {
<>
<div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[var(--color-teal-teal50,#c9fef9)] md:h-full">
<div
className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--space-1200)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
>
<div
className={`flex flex-col justify-start max-md:min-h-min max-md:overflow-visible min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/screens/informational/InformationalScreen.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export function InformationalScreen() {
contentTopBelowMd="space-1400"
>
<div
className={`flex flex-col items-center gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
className={`flex flex-col items-center gap-[var(--space-1200)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
>
<CreateFlowHeaderLockup
title={copy.title}
app/(app)/create/screens/review/CommunityReviewScreen.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function CommunityReviewScreen() {
contentTopBelowMd="space-1400"
>
<div
className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--measures-spacing-1200,48px)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--space-1200)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
>
<div
className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
+1 -1
View File
@@ -190,7 +190,7 @@ export function ConfirmStakeholdersScreen() {
hasLeadingIcon={false}
hasBodyText={false}
onClose={() => setToastDismissed(true)}
className="w-full !px-[var(--space-600,24px)] !py-[var(--space-400,16px)] md:!py-4"
className="w-full !px-[var(--space-600)] !py-[var(--space-400)] md:!py-4"
/>
</div>
)}
app/(app)/create/screens/upload/CommunityUploadScreen.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ export function CommunityUploadScreen() {
<img
src={displaySrc ?? ""}
alt={u.previewAlt}
className="max-h-[200px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
className="max-h-[200px] max-w-full rounded-[var(--radius-200)] object-contain"
/>
</div>
) : (
app/(app)/create/utils/createFlowFooterClassNames.ts
+2 -2
View File
@@ -12,8 +12,8 @@
*/
export const CREATE_FLOW_FOOTER_BUTTON_CLASS =
"!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)]";
"!px-[var(--space-200)] md:!px-[var(--space-250)] " +
"!py-[var(--space-200)] md:!py-[var(--space-250)]";
/**
* Template-review "Use without changes" (ghost variant) renders on a dark