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

Merge pull request 'Replace remaining hardcoded hex colors with color tokens' (#66) from adilallo/fix/CR-27-color-tokens into main

Browse Source 
Reviewed-on: #66
This commit was merged in pull request #66.
This commit is contained in:
an.di
2026-08-17 20:33:55 +00:00
parent 705fa428ce da453f6108
commit 1983a67ffd
13 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/create/screens/review/FinalReviewScreen.tsx
+1 -1
View File
@@ -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}
app/components/asset/Avatar/Avatar.tsx
+1
View File
@@ -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)]",
app/components/cards/Step/Step.tsx
+5 -5
View File
@@ -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>
app/components/controls/RadioButton/RadioButton.view.tsx
+2 -2
View File
@@ -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"
app/components/layout/Accordion/Accordion.view.tsx
+1 -1
View File
@@ -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
app/components/modals/Login/LoginForm.tsx
+1 -7
View File
@@ -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
app/components/modals/Share/Share.view.tsx
+1
View File
@@ -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}
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>
</>
app/components/type/HeaderLockup/HeaderLockup.view.tsx
+1 -1
View File
@@ -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 (
app/components/type/SectionHeader/SectionHeader.tsx
+1 -1
View File
@@ -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}
tests/unit/Step.test.jsx
+1 -1
View File
@@ -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", () => {