Skip to content

feat(gamut): selected-row tint, raised table rows and a two-tone ProgressBar label - #63

Draft
dreamwasp wants to merge 6 commits into
cass-gmt-1825-color-componentsfrom
cass-gmt-1825-color-behavior
Draft

dreamwasp wants to merge 6 commits into
cass-gmt-1825-color-componentsfrom
cass-gmt-1825-color-behavior

Conversation

@dreamwasp

Copy link
Copy Markdown
Contributor

Adds the component behavior design's component map asks for that #54's role swap didn't cover. Merge after #54.

What changes

  • List / DataList / DataTable: a selected row gets the state-selected veil over its own fill, and the hover veil stacks on top when it's hovered. Today a selected row only shows its checkbox. DataList's selected rows set the new isSelected row state, and ListRow accepts it directly.
  • Table rows are surface-raised with surface-sunken stripes, instead of transparent with sunken stripes.
  • ProgressBar: at large and xl, the label is two-tone. It's text-inverse where it sits on the bar and text-default where it runs onto the track. A second copy sits on the track under the bar, and the bar clips its own copy, so a short bar's label doesn't vanish into the track.

Design's map (gamut-styles colorSystem/migration.ts, from sandbox df33b47):

  • List: "Hover and selection are veils, and selected rows get a tint they lack today."
  • ProgressBar: "The label is two-tone: text-inverse where it sits on the bar, text-default where it sits on the track."

Testing

  • New tests cover the selected-row veil (DataGrid) and the two-tone label (ProgressBar).
  • gamut: 1600 of 1600 tests pass. gamut builds, and tsconfig.lib.json typechecks clean.

🤖 Generated with Claude Code

…ressBar label

Behavior design's component map (sandbox df33b47) adds on top of the
role swap in #54:

- List: an `isSelected` row state draws the `state-selected` veil over the
  row's fill, stacked under the hover veil; DataList's selected rows set
  it. Table rows are `surface-raised` instead of transparent.
- ProgressBar: at large and xl, a second copy of the label sits on the
  track in `text-default` and the bar clips its `text-inverse` copy, so a
  label crossing the bar edge reads on both sides.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
…into cass-gmt-1825-color-behavior

# Conflicts:
#	.changeset/color-system-brands.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant