0401c3c6c7
The check added last commit derived its elevated set from the sheets that already rebind, which cannot catch the omission it targets: such a set only confirms what someone already remembered, and a surface nobody has rebound yet defines itself as unelevated. Review found the case that proves it — TodoPanel scrolls in .list on a --dsw-specific-tip card, the same dark rung as the menu surface, unrebound and with the derived check green. Resolves the set from the palette's own dark elevation ladder instead: the surface tokens whose dark value lands on bg-layer-2 or bg-layer-3, which is the step the l1/l2 split encodes. A new palette token on an elevated rung is in scope the moment it is defined. Scope is by token family rather than geometry: only --dsw-alias-bg-* and --dsw-specific-* name a surface. The button, interactive, and markdown families reach the same rungs while naming a control or an inline span that no scroll container renders a bar against, and shape cannot separate them since a floating button carries a radius, a shadow, and a fixed size — ChatView's .toBottom pill was the false positive that showed this. Adds the missing TodoPanel rebind. Mutation-checked all four rebinds in turn: each is named with its surface. The palette anchoring has its own control — narrowing the family pattern turns it red on --dsw-specific-menu.
124 lines
2.5 KiB
CSS
124 lines
2.5 KiB
CSS
/* Todo strip above the composer (figma 772:51905 / 772:52972 / 772:53419):
|
|
tip surface, 14px radius, status icons + secondary item labels. Column is
|
|
calc(100% - 88px) / max 776, centered; InputBar top pad supplies the gap. */
|
|
|
|
.root {
|
|
flex: none;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
width: calc(100% - 88px);
|
|
max-width: 776px;
|
|
border: 1px solid var(--dsw-alias-border-l1);
|
|
border-radius: 14px;
|
|
background: var(--dsw-specific-tip);
|
|
/* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
|
|
surface, and `.list` scrolls inside this card, so the thumb takes the l2
|
|
elevation tokens. Declared here because the elevation belongs to the
|
|
surface, and the custom properties inherit down to `.list` (see ui-theme
|
|
styles/scrollbar.css for the rebinding contract). */
|
|
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
|
|
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title {
|
|
flex: none;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
font-weight: 500;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.progress {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
font-weight: 400;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chevron {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: var(--dsw-alias-label-secondary);
|
|
}
|
|
|
|
.glyph {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.glyphCompleted {
|
|
color: var(--dsw-alias-state-success-primary);
|
|
}
|
|
|
|
.glyphPending {
|
|
color: var(--dsw-alias-label-caption);
|
|
}
|
|
|
|
.glyphProgress {
|
|
color: var(--dsw-alias-state-business-primary);
|
|
animation: todo-progress-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes todo-progress-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Figma strip is single-line; long items ellipsize with no inline expand. */
|
|
.content {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|