add contrast badges

[lukasoppermann]

This pull request significantly improves the ColorScale component in Storybook by enhancing its accessibility and usability. The changes add dynamic contrast ratio calculations for various foreground and background color combinations, introduce a new visual badge system for displaying these ratios, and update the component's styling for better clarity and structure.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6ba19b0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull request overview

This PR enhances the Storybook ColorScale component to display contrast ratios between each swatch color and several key theme foreground/background tokens, adding a compact badge row UI and updated layout styling.

Changes:

• Added contrast ratio calculation utilities and a probe-based approach to resolve CSS variable colors at runtime.
• Rendered contrast “badges” (with icons + formatted ratios) and updated the swatch content structure.
• Refreshed ColorScale styles to a flex-column layout and introduced tooltip styling for badges.

Show a summary per file

File	Description
docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx	Adds contrast computation, CSS-var probes, and renders badge UI + hex display.
docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.css	Updates layout styling and adds badge/tooltip presentation styles.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comments suppressed due to low confidence (2)

docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx:109

• Switching from border to outline may cause the optional border to ignore the element’s border-radius (outlines don’t reliably follow rounding), which can visually regress the rounded corners set in .ColorScale--block:first/last-of-type. If rounding is desired, consider keeping a real border or using an inset box-shadow for the 1px stroke.

      style={{
        backgroundColor: `var(--${color})`,
        outline: border ? '1px solid var(--borderColor-default)' : undefined,
      }}

docs/storybook/stories/StorybookComponents/ColorScale/ColorScale.tsx:152

• Badges rely on a hover-only tooltip (data-tooltip) and aren’t keyboard focusable, so the tooltip content isn’t accessible to keyboard/screen-reader users. Consider adding an accessible name (e.g., aria-label) and making the badge focusable (or use a title attribute) so the extra context is available without hover.

            <span key={key} className="cs-badge" data-tooltip={tooltip}>
              {icon === 'aa' ? (
                <span className="cs-aa" style={{color: `var(${cssVar})`}}>
                  Aa
                </span>
              ) : icon === 'outline-square' ? (
                <span className="cs-square cs-square--outline" style={{borderColor: `var(${cssVar})`}} />
              ) : (
                <span className="cs-square cs-square--filled" style={{backgroundColor: `var(${cssVar})`}} />
              )}
              <span className="cs-num" style={{color: numColor}}>
                {fmt(ratio)}
              </span>
            </span>

• Files reviewed: 2/2 changed files
• Comments generated: 2