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/components/sections/RelatedArticles/RelatedArticles.view.tsx
+9 -9
View File
@@ -24,8 +24,8 @@ export function RelatedArticlesView({
<section
className={
isUseCases
? "px-[var(--spacing-scale-020)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-120)] lg:py-[var(--spacing-scale-064)]"
: "py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
? "px-[var(--space-500)] py-[var(--space-800)] md:px-[var(--space-600)] md:py-[var(--space-1200)] lg:px-[var(--space-3000)] lg:py-[var(--space-1800)]"
: "py-[var(--space-800)] lg:py-[var(--space-1800)]"
}
data-testid="related-articles"
{...(isUseCases ? { "data-figma-node": "20711-14231" } : {})}
@@ -33,8 +33,8 @@ export function RelatedArticlesView({
<div
className={
isUseCases
? "mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-032)]"
: "flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]"
? "mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--space-600)] md:gap-[var(--space-800)]"
: "flex flex-col gap-[var(--space-800)] lg:gap-[51px]"
}
>
{isUseCases && useCasesHeadingLines?.length ? (
@@ -56,7 +56,7 @@ export function RelatedArticlesView({
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)]"
: "text-[var(--color-content-invert-primary)]"
}`}
>
{heading}
@@ -74,7 +74,7 @@ export function RelatedArticlesView({
<div
className={`flex gap-0 transition-transform duration-500 ease-in-out ${
isUseCases
? "lg:gap-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)]"
? "lg:gap-[var(--space-300)] lg:pl-[var(--space-600)]"
: ""
} ${
manualScroll
@@ -103,14 +103,14 @@ export function RelatedArticlesView({
</div>
{isMobile && !isUseCases && (
<div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
<div className="flex justify-center gap-[var(--space-200)] px-[var(--space-1800)]">
{filteredPosts.map((relatedPost, index) => (
<div
key={relatedPost.slug}
className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
className="max-w-[var(--space-1400)] w-full h-[var(--space-100)] bg-gray-200 rounded-full overflow-hidden"
>
<div
className="h-full bg-gray-600 rounded-full transition-all duration-75 ease-linear"
className="h-full bg-[var(--color-gray-600)] rounded-full transition-all duration-75 ease-linear"
style={getProgressStyle(index)}
/>
</div>