From da453f6108fe61c15fde4cf57c5350e2397c140e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 17 Aug 2026 14:31:28 -0600
Subject: [PATCH] Replace remaining hardcoded hex colors with color tokens
 (CR-27)

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.
---
 app/(app)/create/screens/review/FinalReviewScreen.tsx  |  2 +-
 app/components/asset/Avatar/Avatar.tsx                 |  1 +
 app/components/cards/Step/Step.tsx                     | 10 +++++-----
 .../controls/RadioButton/RadioButton.view.tsx          |  4 ++--
 app/components/layout/Accordion/Accordion.view.tsx     |  2 +-
 app/components/modals/Login/LoginForm.tsx              |  8 +-------
 app/components/modals/Share/Share.view.tsx             |  1 +
 app/components/sections/Accordion/Accordion.view.tsx   |  2 +-
 app/components/sections/Book/Book.view.tsx             |  2 +-
 app/components/sections/Stats/Stats.view.tsx           |  8 ++++----
 app/components/type/HeaderLockup/HeaderLockup.view.tsx |  2 +-
 app/components/type/SectionHeader/SectionHeader.tsx    |  2 +-
 tests/unit/Step.test.jsx                               |  2 +-
 13 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index 5689fa9..8a8b3f3 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -270,7 +270,7 @@ export function FinalReviewScreen({
         }
         size={mdUp ? "L" : "M"}
         expanded={true}
-        backgroundColor="bg-[#c9fef9]"
+        backgroundColor="bg-[var(--color-surface-invert-brand-teal)]"
         logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
         logoAlt={ruleCardTitle}
         categories={finalReviewCategories}
diff --git a/app/components/asset/Avatar/Avatar.tsx b/app/components/asset/Avatar/Avatar.tsx
index 6cc65a2..867b83d 100644
--- a/app/components/asset/Avatar/Avatar.tsx
+++ b/app/components/asset/Avatar/Avatar.tsx
@@ -14,6 +14,7 @@ const Avatar = memo<AvatarProps>(
     const size = sizeProp;
     const sizeStyles: Record<string, string> = {
       small:
+        // White 30% border: no DS token (opacity scale is black-alpha; inverse border tokens don't cover this).
         "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)] border-[1.5px] border-[#FFFFFF4D] border-solid",
       medium: "w-[var(--spacing-scale-018)] h-[var(--spacing-scale-018)]",
       large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
diff --git a/app/components/cards/Step/Step.tsx b/app/components/cards/Step/Step.tsx
index a25675b..d09245a 100644
--- a/app/components/cards/Step/Step.tsx
+++ b/app/components/cards/Step/Step.tsx
@@ -29,13 +29,13 @@ const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
 
     const textClasses = {
       small:
-        "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
+        "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[var(--color-gray-900)]",
       medium:
-        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[var(--color-gray-900)]",
       large:
-        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+        "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[var(--color-gray-900)]",
       xlarge:
-        "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
+        "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[var(--color-gray-900)]",
     };
 
     const sectionNumberWrapperClasses = {
@@ -92,7 +92,7 @@ const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
 
       {/* Card Content - Responsive positioning */}
       <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
-        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
+        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[var(--color-gray-900)]">
           {text}
         </p>
       </div>
diff --git a/app/components/controls/RadioButton/RadioButton.view.tsx b/app/components/controls/RadioButton/RadioButton.view.tsx
index e3e4368..be69684 100644
--- a/app/components/controls/RadioButton/RadioButton.view.tsx
+++ b/app/components/controls/RadioButton/RadioButton.view.tsx
@@ -35,11 +35,11 @@ export function RadioButtonView({
         id={radioId}
       >
         {/* Radio dot - 16px size per Figma */}
-        {/* Selected hover state: darker dot color (#333000) per Figma */}
+        {/* Selected hover: --color-surface-default-brand-primary (#333000 / yellow-1000) per Figma */}
         <div
           className={`w-[16px] h-[16px] rounded-full transition-all duration-200 ${
             checked && mode === "standard"
-              ? "bg-[var(--color-content-default-brand-primary,#fefcc9)] group-hover:!bg-[#333000]"
+              ? "bg-[var(--color-content-default-brand-primary,#fefcc9)] group-hover:!bg-[var(--color-surface-default-brand-primary)]"
               : checked && mode === "inverse"
                 ? "bg-[var(--color-content-default-primary,#000000)]"
                 : "bg-transparent"
diff --git a/app/components/layout/Accordion/Accordion.view.tsx b/app/components/layout/Accordion/Accordion.view.tsx
index e43cfc3..65e409e 100644
--- a/app/components/layout/Accordion/Accordion.view.tsx
+++ b/app/components/layout/Accordion/Accordion.view.tsx
@@ -120,7 +120,7 @@ function AccordionView({
           aria-expanded={isOpen}
           aria-controls={panelId}
           onClick={onToggle}
-          className={`flex w-full ${sizeClass.header} text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-content-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#141414]`}
+          className={`flex w-full ${sizeClass.header} text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-content-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-secondary)]`}
         >
           <span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]">
             <span
diff --git a/app/components/modals/Login/LoginForm.tsx b/app/components/modals/Login/LoginForm.tsx
index ff88385..f354b08 100644
--- a/app/components/modals/Login/LoginForm.tsx
+++ b/app/components/modals/Login/LoginForm.tsx
@@ -149,13 +149,7 @@ export default function LoginForm({
   return (
     <div className="flex flex-col gap-6 pt-2">
       <div className="flex flex-col gap-3">
-        <div
-          className={`relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full ${
-            isSaveProgress
-              ? "bg-[#fefcc9]"
-              : "bg-[var(--color-surface-inverse-brand-primary)]"
-          }`}
-        >
+        <div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-inverse-brand-primary)]">
           <MailIconInline />
         </div>
         <ContentLockup
diff --git a/app/components/modals/Share/Share.view.tsx b/app/components/modals/Share/Share.view.tsx
index 6e849bd..b839a8c 100644
--- a/app/components/modals/Share/Share.view.tsx
+++ b/app/components/modals/Share/Share.view.tsx
@@ -106,6 +106,7 @@ export const ShareView = memo(function ShareView({
       </div>
 
       <div className="scrollbar-design flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
+        {/* Channel circle hexes are third-party brand colors (copy/link, Signal, Slack, Discord), not DS tokens. */}
         <div className="flex flex-wrap gap-4">
           <ShareChannelTile
             label={copyLinkLabel}
diff --git a/app/components/sections/Accordion/Accordion.view.tsx b/app/components/sections/Accordion/Accordion.view.tsx
index 6069a88..ee103f2 100644
--- a/app/components/sections/Accordion/Accordion.view.tsx
+++ b/app/components/sections/Accordion/Accordion.view.tsx
@@ -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
diff --git a/app/components/sections/Book/Book.view.tsx b/app/components/sections/Book/Book.view.tsx
index b752a63..8454b8f 100644
--- a/app/components/sections/Book/Book.view.tsx
+++ b/app/components/sections/Book/Book.view.tsx
@@ -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
diff --git a/app/components/sections/Stats/Stats.view.tsx b/app/components/sections/Stats/Stats.view.tsx
index e42a5a8..c4499eb 100644
--- a/app/components/sections/Stats/Stats.view.tsx
+++ b/app/components/sections/Stats/Stats.view.tsx
@@ -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>
             </>
diff --git a/app/components/type/HeaderLockup/HeaderLockup.view.tsx b/app/components/type/HeaderLockup/HeaderLockup.view.tsx
index 8a936b1..89cf156 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.view.tsx
+++ b/app/components/type/HeaderLockup/HeaderLockup.view.tsx
@@ -19,7 +19,7 @@ function HeaderLockupView({
     ? "text-[var(--color-content-invert-primary)]"
     : "text-[var(--color-content-default-primary,white)]";
   const descriptionColorClass = isInverse
-    ? "text-[#2d2d2d]"
+    ? "text-[var(--color-content-invert-tertiary)]"
     : "text-[var(--color-content-default-tertiary,#b4b4b4)]";
 
   return (
diff --git a/app/components/type/SectionHeader/SectionHeader.tsx b/app/components/type/SectionHeader/SectionHeader.tsx
index bc57b23..f3f72d1 100644
--- a/app/components/type/SectionHeader/SectionHeader.tsx
+++ b/app/components/type/SectionHeader/SectionHeader.tsx
@@ -111,7 +111,7 @@ const SectionHeader = memo<SectionHeaderProps>(
                     ? "text-small-paragraph text-[var(--color-content-default-tertiary)] md:text-left md:text-large-paragraph xl:text-x-large-paragraph"
                     : "text-small-paragraph md:text-large-paragraph lg:text-left lg:text-large-paragraph text-[var(--color-content-default-tertiary)] xl:text-x-large-paragraph"
                   : "text-small-paragraph md:text-large-paragraph xl:text-x-large-paragraph text-[var(--color-content-default-tertiary)] lg:text-right"
-                : "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)]"
+                : "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[var(--color-gray-600)] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)]"
             }
           >
             {subtitle}
diff --git a/tests/unit/Step.test.jsx b/tests/unit/Step.test.jsx
index 66993c8..fe33de8 100644
--- a/tests/unit/Step.test.jsx
+++ b/tests/unit/Step.test.jsx
@@ -150,7 +150,7 @@ describe("Step Component", () => {
     render(<Step {...defaultProps} />);
 
     const textElement = screen.getByText("Test Card Text");
-    expect(textElement).toHaveClass("text-[#141414]");
+    expect(textElement).toHaveClass("text-[var(--color-gray-900)]");
   });
 
   it("handles long text content gracefully", () => {