Merged
Conversation
Collaborator
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
github-actions
bot
added
root
apps:docs
libs:docusaurus-plugin-docgen
apps:vite-app
labels
8 tasks
cb-ekuersch
reviewed
Mar 20, 2026
Update to latest
cb-ekuersch
force-pushed
the
nicole/colorpicker
branch
from
15d5c80 to
1f1f05e
Compare
hcopp
reviewed
Mar 25, 2026
Contributor
hcopp
left a comment
hcopp
left a comment
There was a problem hiding this comment.
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!
Contributor
|
@nicoledbelcher are you able to fill out the PR description? This is done in GitHub UI manually. You can look at other PRs to see what we normally do to fill it out. 
Also your commits are unverified, you should follow https://docs.github.com/en/authentication/managing-commit-signature-verification/adding-a-gpg-key-to-your-github-account. This is a requirement to merge in code. Lastly, can you pull in the latest from master? Cursor can help with this. |
hcopp
reviewed
Mar 27, 2026
nicoledbelcher
temporarily deployed
to
production
GitHub Actions
Inactive
nicoledbelcher
force-pushed
the
nicole/colorpicker
branch
from
fafe4f6 to
2c12130
Compare
nicoledbelcher
had a problem deploying
to
production
GitHub Actions
Failure
nicoledbelcher
temporarily deployed
to
production
GitHub Actions
Inactive
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 27, 2026
hcopp
reviewed
Mar 31, 2026
Contributor
hcopp
left a comment
hcopp
left a comment
There was a problem hiding this comment.
It looks like you have have merge issues and now have all our recent changes here in your history...
I'm not sure what we can easily do to solve this, I'll let you know if we find anything.
…tching Adds a Color Pairing Tool to the docs site that extracts colors from uploaded images (or manual hex input) and maps them to CDS spectrum tokens with WCAG contrast compliance. Includes drag-and-drop upload, k-means color extraction, hue-aware token matching, light/dark mode previews, and a component playground. Made-with: Cursor
nicoledbelcher
force-pushed
the
nicole/colorpicker
branch
from
f83b08f to
bf5d3ed
Compare
… responsive props Replace mobile layout overrides that relied on CSS `!important` to beat CDS inline styles with native CDS responsive props (`base`/`tablet` breakpoints) on the layout components themselves. Converted: - ResultCard topRow/topRowLeft/topRowDivider → responsive flexDirection, width, height, minHeight, and display props; removed CSS module import - ComponentPlayground playgroundHeader → responsive flexDirection, alignItems, gap props; removed CSS module import - PlaygroundContent cardsRow/cardBox/ctaLabel → responsive flexDirection, height, and Box display props for CTA label toggle; removed CSS module import - index.tsx startOverLabel → Box with responsive display prop Kept as CSS (not converted): - `.toolbarRow` and `.carouselCenter` in ColorPairingTool.module.css — these use `position: absolute` with `transform: translateX(-50%)` to center the pagination carousel between the Start Over and Export buttons on mobile. This positional trick cannot be expressed with CDS layout props and is better left as targeted CSS. - `.blurredBg`, `.hotspotWrap`, `.hotspotDot`, `.hotspotLabel`, `.previewImg`, `.imageSection` in ResultCard.module.css — these are custom visual effects (blur overlay, drag-to-resample hotspot UI) that are inherently CSS-driven and not representable as CDS component props. Made-with: Cursor
Restore !important mobile overrides in ResultCard.module.css since CDS responsive props use viewport breakpoints which don't account for the Docusaurus sidebar narrowing the content area on desktop. Changes: - Restore mobile stacking overrides for topRow, topRowLeft, topRowDivider, playgroundHeader, cardsRow, and cardBox - Fix toolbar pagination overlap on small screens by using flex-wrap instead of absolute positioning — carousel drops to its own centered row on mobile - Show "Start over" label on all screen sizes - Make the preview Button compact - Add fixed 200px height to cardBox on mobile for consistent card sizing - Remove bottom padding on topRowLeft on mobile to reduce gap - Convert topRowLeft padding from inline style to CDS spacing prop - Add preserveAspectRatio="xMidYMid slice" to checkerboard SVG for proper scaling in the media card - Delete ColorPairingTool.module.css toolbar absolute positioning rules, replace with flex-wrap approach Made-with: Cursor
hcopp
reviewed
Apr 3, 2026
- Remove spectrum re-exports from colorUtils.ts; all consumers now use useTheme() to access theme.lightSpectrum/theme.darkSpectrum directly - Update findBestDarkToken and processImageFile to accept spectrum as parameters instead of importing module-level constants - Delete ColorPairingTool.module.css; toolbar pagination uses inline flex-wrap + order instead of absolute positioning CSS - Simplify WcagBadge to use Tag's built-in endIcon and endIconActive props instead of manually composing HStack/Text/Icon Made-with: Cursor
…sive props Replace every !important mobile override in ResultCard.module.css with CDS responsive props (base/tablet/desktop) on the layout components. CDS breakpoints are ranges (tablet: 768-1279px, desktop: 1280px+), so both tablet and desktop values must be specified to avoid falling back to the base (phone) layout at wide viewports. - ResultCard: topRow, topRowLeft, topRowDivider → responsive flexDirection, width, height, minHeight, paddingBottom, display - ComponentPlayground: playgroundHeader → responsive flexDirection, alignItems, gap - PlaygroundContent: cardsRow, cardBox → responsive flexDirection, height, width - ContrastPanel: remove stale className refs and CSS module import - Delete the entire !important media query block from ResultCard.module.css Made-with: Cursor
- Remove closest primitive card and matched-to-primitive text, show only input color swatch - Add vertical divider between input swatch and contrast panels - Fix all lint warnings: prop sorting, accessibility labels, import ordering - Fix type errors: cast spectrum tokens, handle nullable imgSrc, fix margin type Made-with: Cursor
nicoledbelcher
temporarily deployed
to
production
GitHub Actions
Inactive
Made-with: Cursor
nicoledbelcher
temporarily deployed
to
production
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed? Why?
Added a new sidebar to the docs site called extras and created a new color pairing tool inside it.
What it is
The Color Pairing Tool is an internal design utility built into the CDS documentation site. It helps designers and engineers find the closest CDS spectrum primitives for any color and automatically generates accessible, theme-aware color pairings that work across light and dark modes.
How it works
Image upload — Users can upload up to 10 images (PNG, JPG, or WebP) via file picker or drag-and-drop. The tool extracts dominant colors from each image using a k-means clustering algorithm run client-side on an .
Manual hex entry — Users can type one or more comma-separated hex codes directly into a text input.
2. Token Matching
For each extracted or entered color, the tool runs a hue-aware matching algorithm against the full CDS spectrum (both light and dark). This isn't a simple "nearest Euclidean distance" match — it's purpose-built for CDS tokens and factors in perceptual hue so the matched primitive feels like a natural fit, not just the mathematically closest one.
Once a primary background token is matched, the tool:
Selects a foreground text color that meets WCAG AA contrast requirements (minimum 4.5:1 for normal text).
Computes a secondary/complementary token pairing.
Offers a high-contrast mode toggle that enforces even stricter contrast ratios.
Displays live WCAG contrast ratios (AA Normal, AA Large, AAA) for every pairing.
4. Component Preview
The results feed into a Component Playground that renders real CDS components — Card, Button, MessagingCard, LineChart, ProgressBar, and more — using the matched token pairings. This gives an immediate preview of how the colors will look in a production UI across both light and dark themes.
For image uploads, users can drag a hotspot around the image to resample the dominant color from a different region, which recalculates the token match and all downstream pairings in real time.
Results can be exported as structured JSON containing the matched tokens, hex values, text colors, and button state variants for both light and dark modes — ready to hand off to engineering.
Key technical details
Runs entirely client-side — no server calls. All color math, image processing, and token matching happen in the browser.
Uses CDS design tokens as the source of truth (imported from tokens.ts), so matches always stay in sync with the design system.
Theme-aware throughout — every visual (checkerboards, previews, component playground) adapts to the user's current light/dark mode setting.
UI changes
Multiple outputs carousel:
Testing
You should test selecting a color from the color picker without uploading an image, and then test uploading one or multiple images. Users can only upload, PNG, JGP and WEBP files, no video/animated gif files allowed.
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false