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

Replace remaining hardcoded hex colors with color tokens (CR-27)

Browse Source 
Map leftover component hex values onto the existing color scale, and leave third-party share brands and the Avatar white-alpha border documented as intentional exceptions.
This commit is contained in:
adilallo
2026-08-17 14:31:28 -06:00
parent 705fa428ce
commit da453f6108
13 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/sections/Accordion/Accordion.view.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ function FaqAccordionView({
return (
<section
aria-labelledby={headingId}
className={`bg-[#141414] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-160)] md:py-[var(--spacing-scale-096)] ${className}`.trim()}
className={`bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-160)] md:py-[var(--spacing-scale-096)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
<h2
app/components/sections/Book/Book.view.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ function BookView({
className={`px-[var(--spacing-scale-008)] py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-064)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-center">
<div className="flex w-full flex-col items-center gap-[var(--spacing-scale-032)] rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[#171717] p-[var(--spacing-scale-048)] shadow-[0_0_48px_rgba(0,0,0,0.1)] md:flex-row md:items-center lg:gap-[var(--spacing-scale-040)] lg:p-[var(--spacing-scale-064)] xl:mx-auto xl:max-w-[1280px] xl:gap-[var(--spacing-scale-032)] xl:p-[var(--spacing-scale-048)]">
<div className="flex w-full flex-col items-center gap-[var(--spacing-scale-032)] rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-048)] shadow-[0_0_48px_rgba(0,0,0,0.1)] md:flex-row md:items-center lg:gap-[var(--spacing-scale-040)] lg:p-[var(--spacing-scale-064)] xl:mx-auto xl:max-w-[1280px] xl:gap-[var(--spacing-scale-032)] xl:p-[var(--spacing-scale-048)]">
<div className="relative aspect-[375/580] w-full shrink-0 overflow-hidden rounded-[4px] shadow-[0_0_24px_rgba(0,0,0,0.25)] md:aspect-auto md:h-[495px] md:w-[320px]">
{/* eslint-disable-next-line @next/next/no-img-element -- marketing cover art */}
<img
app/components/sections/Stats/Stats.view.tsx
+4 -4
View File
@@ -41,12 +41,12 @@ function StatsView({
>
<span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]">
{titlePrefix ? (
<span className="text-[#636363]">
<span className="text-[var(--color-gray-500)]">
{titlePrefix}{" "}
</span>
) : null}
{titleEmphasis ? (
<span className="font-normal text-[#e0e0e0]">
<span className="font-normal text-[var(--color-gray-100)]">
{titleEmphasis}
</span>
) : null}
@@ -55,12 +55,12 @@ function StatsView({
<>
<span className="hidden md:inline md:leading-[inherit]">{" "}</span>
<span className="block whitespace-nowrap md:inline md:whitespace-normal md:leading-[inherit]">
<span className="text-[#636363]">
<span className="text-[var(--color-gray-500)]">
{suffixLead}
{suffixTail ? "\u00a0" : null}
</span>
{suffixTail ? (
<span className="text-[#e0e0e0]">{suffixTail}</span>
<span className="text-[var(--color-gray-100)]">{suffixTail}</span>
) : null}
</span>
</>