Give a segmented list item a fill that reads against the page
tests / lint (push) Successful in 1m6s
tests / feature (8.4) (push) Failing after 1m41s
tests / feature (8.5) (push) Failing after 1m46s
tests / browser (chrome, chromium) (push) Failing after 6m21s
tests / browser (firefox, firefox) (push) Failing after 4m16s
tests / browser (safari, webkit) (push) Failing after 11m12s
tests / lint (push) Successful in 1m6s
tests / feature (8.4) (push) Failing after 1m41s
tests / feature (8.5) (push) Failing after 1m46s
tests / browser (chrome, chromium) (push) Failing after 6m21s
tests / browser (firefox, firefox) (push) Failing after 4m16s
tests / browser (safari, webkit) (push) Failing after 11m12s
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface` (ListTokens.kt, C-21) was taken literally, but foundation/base.css paints the page `surface` too — so a segmented list was invisible on any default page. The token reads against a Compose scaffold, not against this package's own page. The tile is `surface-container` now, the step M3 names for a container that has to read against the page, and what 1.x drew. Found in SealShare: the files chosen for an upload list under the drop zone with nothing to set them apart from it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
5800ab1fe1
commit
bae1df09da
@@ -20,7 +20,8 @@
|
||||
* on-surface at the disabled-content opacity (38%) and blocks the pointer; the view drops the
|
||||
* item's link entirely rather than leaving a focusable, activatable control behind it (C-02).
|
||||
*
|
||||
* `data-md-list="segmented"` items (M3 Expressive) are `surface` tiles (`ItemSegmentedContainerColor`,
|
||||
* `data-md-list="segmented"` items (M3 Expressive) are `surface-container` tiles (one tone up from
|
||||
* `ItemSegmentedContainerColor`, so they read against the package's own `surface` page;
|
||||
* C-21), 4px corners that open to 16px at the list's own ends and while hovered (12px), pressed,
|
||||
* focused or selected (16px) — the specs page's interaction-state expressive shapes (C-22). Leading
|
||||
* icons there are drawn at 20px, not scaled down from 24 — list-item.blade.php passes `size` to
|
||||
@@ -73,10 +74,14 @@
|
||||
}
|
||||
|
||||
/* M3 Expressive's segmented list gives each item its own container: ListTokens.kt:201,
|
||||
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`. Before the selected
|
||||
rule, which outranks it on the same weight. */
|
||||
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`. One tone up from that,
|
||||
because the token reads against a Compose scaffold and this package paints the page
|
||||
`surface` itself (foundation/base.css): a surface tile on a surface page is a list nobody
|
||||
can see. `surface-container` is the step M3 names for a container that has to read against
|
||||
the page, and what 1.x drew. Before the selected rule, which outranks it on the same
|
||||
weight. */
|
||||
[data-md-list='segmented'] > [data-md-list-item] {
|
||||
--md-list-row-fill: var(--md-sys-color-surface);
|
||||
--md-list-row-fill: var(--md-sys-color-surface-container);
|
||||
|
||||
background-color: var(--md-list-row-fill);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user