Repository navigation
fix(segmented): the chosen face is bg.raised — lighter than the track in dark (D-054, Android 0.8.1) - #150
Merged
Conversation
… in dark (D-054, Android 0.8.1) In the dark theme the chosen segment was bg.default (#09090B), darker than its bg.subtle track (#18181B), and the level-1 shadow does not show in dark, so it read as a hole (found in Qooroo's full-screen review). Web and Android alike. New semantic token color.bg.raised: white in light (unchanged look), zinc.800 (#27272A) in dark, one step lighter than bg.subtle. Text on it: 14.27:1 primary, 5.81:1 secondary. The chosen segment uses it in dds-css (so react, solid and vue) and in DdsSegmentedControl (DdsColors.bgRaised). The shadow stays at level 1, as the owner decided; Android guide §10 no. 20 is settled. Tests pin it: tokens (raised lighter than subtle, text >= 4.5:1, the CSS uses it), ColorSchemeTest, and a device test that the dark face is lighter than the track. Android 0.8.1; a minor changeset for dds-tokens and dds-css.
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
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
The owner's decision on the chosen segment's look (Android guide §10 no. 20), for the web and Android together (D-054).
bg.default(#09090B), darker than itsbg.subtletrack (#18181B). The level-1 shadow does not show in dark, so the chosen face read as a hole. Qooroo's full-screen review caught it. The webSegmentedControland AndroidDdsSegmentedControl0.8.0 were the same.color.bg.raised(--dds-color-bg-raised,DdsColors.bgRaised,dds_color_bg_raised): white in light, so light looks the same as before, andzinc.800(#27272A) in dark, one step lighter thanbg.subtle. Text on it:text.primary14.27:1,text.secondary5.81:1. It is a system value, not one of the backgrounds a product sets (D-053).dds-css(sodds-react,dds-solidanddds-vue, which render that CSS) and inDdsSegmentedControl.border.strongedge, as the owner decided. Level 2 spreads past the 2dp track gap and looks like a floating card. Guide §10 no. 20 is now settled.Other options considered (D-054): painting the face with
border.default(a line token, and light would turn grey), the track plusoverlay.hover-tint(a hovered segment would look the same as the chosen one), andbg.elevated(samezinc.900as the track in dark).Release
VERSION_NAME, changelog, guide §10/§12, READMEs).minorchangeset for@devslab/dds-tokensand@devslab/dds-css(fixed group, so the whole web train moves together): a new token is added, and nothing is renamed or removed.design-system.md/.ko.mdtoken table,preview/index.html,docs/decisions.mdD-054, backlog.Tests
tests/foundation-contracts.test.mjs: in both themesbg.raisedis lighter thanbg.subtle, primary and secondary text are at least 4.5:1 on it, and the checked segment's CSS uses it. Confirmed it fails when the CSS usesbg-default.ColorSchemeTest.aRaisedFaceIsLighterThanTheSubtleTrackAndCarriesText.SegmentedOnDeviceTest: the chosen-face pixel check now expectsbgRaised; a new dark test checks that the face is lighter than the track.Verified locally
verify:source:stage1-241/41,verify:source:stage3-4107/107,verify:foundation:core(token and CSS build plus checks),check:android,check-docs-sync,verify:release(pack, publish dry-run, fresh consumer). The builttokens.csshas--dds-color-bg-raised: #ffffff/#27272a.ColorSchemeTest12/12).SegmentedOnDeviceTest21/21 (failures="0" errors="0" skipped="0"), including the new dark check that the chosen face is lighter than the track. The catalog looked unchanged in light on the phone. I took no dark screenshot on the phone: another session was using it, so the dark look is covered by that pixel test and the web render above.