Nicole/colorpicker by nicoledbelcher · Pull Request #524 · coinbase/cds

nicoledbelcher · 2026-03-20T00:06:47Z

What changed? Why?

Root cause (required for bugfixes)

UI changes

iOS Old	iOS New
old screenshot	new screenshot

Android Old	Android New
old screenshot	new screenshot

Web Old	Web New
old screenshot	new screenshot

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

Adds ColorPairingTool to docs site, color-pairing utilities and components to vite-app, cds-finder app, guidelines documentation, and various supporting updates. Made-with: Cursor

…heming - Remove Color matching / Color pairs tab strip; single-flow layout - Scope LineChart scrubber overlay/line CSS vars to chart card for light playground - Hue-aware primitive matching and related adjustments Made-with: Cursor

cb-heimdall · 2026-03-20T00:06:52Z

🟡 Heimdall Review Status

Requirement Status More Info

Reviews

🟡 0/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS 🟡 See below

🟡 `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

🟡 0/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

cb-ekuersch · 2026-03-20T14:33:54Z

.cursor/rules/cds.mdc

@@ -0,0 +1,44 @@
+---


we can remove this

cb-ekuersch · 2026-03-20T14:33:59Z

.cursor/mcp.json

    "Figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {}
+    },


remove changes

cb-ekuersch · 2026-03-20T14:35:11Z

apps/cds-finder/server/index.ts

@@ -0,0 +1,59 @@
+import cors from 'cors';


This feature shouldn't require an application. Especially not an express server which we would have to set up infra for. The scope of changes for this feature should, in theory, be limited solely to apps/docs

cb-ekuersch · 2026-03-20T14:36:15Z

apps/docs/docs/extras/color-pairing-tool.mdx

@@ -0,0 +1,20 @@
+---
+id: color-pairing-tool


let's discuss a different place to organize the color picker. Getting Started doesn't fool like the right place

cb-ekuersch · 2026-03-20T14:38:11Z

apps/vite-app/src/color-pairing/ColorPicker.module.css

@@ -0,0 +1,188 @@
+/* ── Color Picker ──────────────────────────────────────────────────── */


i dont think changes were meant to be made to vite-app. Likely the agent wen through multiple implementation attempts and forgot to clean up the changes made here. All the changes under vite-app should be removed

cb-ekuersch · 2026-03-20T14:39:25Z

package.json

@@ -202,6 +193,7 @@
    "postcss-sort-media-queries": "^4.2.1",
    "postcss-styled-syntax": "^0.7.1",
    "prettier": "^3.6.2",
+    "puppeteer": "^24.37.5",


remove new dependency

cb-ekuersch · 2026-03-20T14:39:56Z

guidelines/Untitled

@@ -0,0 +1 @@
+https://www.nerdwallet.com/banking/best/high-yield-online-savings-accounts


cb-ekuersch · 2026-03-20T14:40:19Z

libs/docusaurus-plugin-docgen/src/scripts/docgenRunner.ts

@@ -260,20 +260,19 @@ export async function docgenRunner(params: DocgenRunnerParams): Promise<PluginCo
        template: 'shared/objectMap',
      });

-      /** Styles API data - extracted from *ClassNames exports */


im skeptical these docgen changes impact anything - we should remove all the changes under that folder

cb-ekuersch · 2026-03-20T14:40:31Z

guidelines/overview-setup.md

@@ -0,0 +1,125 @@
+# Setup Guide


remove all guidelines

hcopp

Love the idea! Hopefully this can help you talk with Cursor about how to clean things up.

Also if you could get sample screenshots, description of your intended changes, and a link to the figma in the PR description that would be very helpful!

hcopp · 2026-03-25T13:02:57Z

apps/docs/src/components/page/Metadata/MetadataLinks.tsx

@@ -74,9 +54,6 @@ export const MetadataLinks = memo(({ source, storybook, changelog, figma }: Meta
          </LinkChip>
        </Tooltip>
      )}
-      <Chip compact onClick={handleCopyLLMDoc} start={<Icon color="fg" name="copy" size="s" />}>
-        Copy for LLM
-      </Chip>


We shouldn't remove this.

hcopp · 2026-03-25T13:03:37Z

apps/docs/static/img/campaignCardBanners/color-pairing-tool_dark.png

nit: these are normally svg, can we do that?

hcopp · 2026-03-25T13:06:58Z

apps/docs/src/components/page/ColorPairingTool/ColorPicker.tsx

+import { Icon } from '@coinbase/cds-web/icons';
+import { TextInput } from '@coinbase/cds-web/controls';
+import { toHex, hsbToRgb, rgbToHsb, parseColorInput } from './colorUtils';
+import styles from './ColorPicker.module.css';


Can you run yarn nx run docs:lint --fix

hcopp · 2026-03-25T13:08:13Z

apps/docs/src/components/page/ColorPairingTool/ComponentPlayground.tsx

+                </Box>
+                <LineChart
+                  enableScrubbing
+                  height={{ base: 110 }}


You can just do height={110}

hcopp · 2026-03-25T13:09:35Z

apps/docs/src/components/page/ColorPairingTool/ComponentPlayground.tsx

+                  alt=""
+                  src={imgSrc || '/img/checker-placeholder.png'}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />


Do we need this checker placeholder png? Maybe we could make it a simple svg

hcopp · 2026-03-25T13:24:11Z

apps/docs/src/components/page/ColorPairingTool/ContrastPanel.tsx

+            width: '100%',
+            height: '100%',
+            flexGrow: 1,
+          }}


Can we set these on Box instead of in styles props

hcopp · 2026-03-25T13:24:55Z

apps/docs/src/components/page/ColorPairingTool/HotspotImagePreview.tsx

+  padding: '1px 5px',
+  borderRadius: 3,
+  whiteSpace: 'nowrap',
+};


Ideally we don't need custom CSS here, but if anything we should be consistent with a separate module.css file as we have elsewhere. We can do <Text background={X} borderRadius={100} ... /> instead.

hcopp · 2026-03-25T13:25:41Z

apps/docs/src/components/page/ColorPairingTool/ResultCard.module.css

+   CDS layout components use inline styles generated from their style props,
+   which have higher specificity than CSS class rules. !important is required
+   here to override those inline styles at mobile breakpoints.
+   ────────────────────────────────────────────────────────────────────────── */


We shouldn't need to use style props, but instead use our regular component props which support responsive values.

hcopp · 2026-03-25T13:26:21Z

apps/docs/src/components/page/ColorPairingTool/sharedStyles.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export const monoStyle: React.CSSProperties = { fontFamily: 'CoinbaseMono, monospace' };


Is this needed? We normally don't use mono font and even then don't have Coinbase fonts in our docs

hcopp · 2026-03-25T13:27:02Z

apps/docs/src/components/page/ColorPairingTool/state.ts

+    default:
+      return state;
+  }
+}


We normally don't use a state file, but I get it could be funky here. Ideally we have a parent component which holds the state, and then passes the state components as props to different children based on what step we are on.

nicoledbelcher added 2 commits March 18, 2026 10:37

Add color pairing tool and related changes

4db0ba6

Adds ColorPairingTool to docs site, color-pairing utilities and components to vite-app, cds-finder app, guidelines documentation, and various supporting updates. Made-with: Cursor

github-actions bot added root apps:docs libs:docusaurus-plugin-docgen apps:vite-app labels Mar 20, 2026

cb-ekuersch mentioned this pull request Mar 20, 2026

feat: add feature-planner skill for non-technical contributors #525

Merged

8 tasks

cb-ekuersch reviewed Mar 20, 2026

View reviewed changes

revert changes

1f1f05e

cb-ekuersch force-pushed the nicole/colorpicker branch from 15d5c80 to 1f1f05e Compare March 20, 2026 19:43

cb-ekuersch added 3 commits March 21, 2026 11:19

refactor with cursor

d196bd4

more refactoring with cursor

7a55804

move color picker to extras

5842bd7

hcopp reviewed Mar 25, 2026

View reviewed changes

cb-ekuersch temporarily deployed to production March 25, 2026 13:32 — with GitHub Actions Inactive

		@@ -0,0 +1,188 @@
		/* ── Color Picker ──────────────────────────────────────────────────── */

		@@ -0,0 +1 @@
		https://www.nerdwallet.com/banking/best/high-yield-online-savings-accounts

		@@ -0,0 +1,3 @@
		import type React from 'react';

		export const monoStyle: React.CSSProperties = { fontFamily: 'CoinbaseMono, monospace' };

Conversation

nicoledbelcher commented Mar 20, 2026

What changed? Why?

Root cause (required for bugfixes)

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Heimdall Review Status

🟡 CODEOWNERS

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hcopp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

cb-heimdall commented Mar 20, 2026 •

edited

Loading

🟡 `CODEOWNERS`