Andreas Reinhold / reiniandClaude Opus 5
0326065348
Plan step 36 review. interaction.css read `data-dragged` beside `data-md-dragged` while <x-card> still set the old name; the card now sets the new one and nothing in the package renders the old one on an element with the class, which 2.0.0 introduces. The Tailwind `state-layer` utility keeps `data-dragged` until step 39 deletes it. UPGRADE.md's card line named the old `data-card` hook. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
113 lines
4.1 KiB
CSS
113 lines
4.1 KiB
CSS
/*
|
||
* The interaction classes every interactive component shares, and an application's own control
|
||
* can use: M3's state layer, its focus indicator, its minimum target, and a link in running text.
|
||
*
|
||
* `md-state-layer` lays the content colour over an element at M3's state opacities
|
||
* (tokens/state.css): hover 8%, focus and press 10%, dragged 16%. Hover only where the pointer
|
||
* can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` on the
|
||
* element draws the dragged layer; a disabled element has none. The layer is a ::before, so the
|
||
* element becomes `position: relative` and `isolation: isolate`.
|
||
*
|
||
* `md-focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
|
||
* focus. The site gives no thickness or offset; the values are @material/web's focus ring tokens
|
||
* (Apache-2.0, © Google LLC).
|
||
*
|
||
* `md-touch-target` extends an element's pointer target to M3's 48×48 minimum without changing
|
||
* what is drawn: a ::after centred on it, at least `space600` (48px) each way. M3 gives the web
|
||
* target as "48 × 48 CSS pixels", so the size is px and does not grow with the text. It is
|
||
* `::after`-based, so a component that already draws with ::after wraps its control in an element
|
||
* carrying it.
|
||
*
|
||
* `md-link` is a link in running text: underlined in the colour of the words around it, because
|
||
* M3 never lets colour alone mark a link (docs/reference/m3/styles.md § Typography); give it
|
||
* `md-ink-primary` where it should also read as primary.
|
||
*
|
||
* The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities
|
||
* (tokens/utilities.css) the components still written in Tailwind use, but for two: the dragged
|
||
* hook is `data-md-dragged` where the utility reads `data-dragged`, and `md-touch-target` is px
|
||
* where the utility reads 3rem. In `material.base`, so a component's own rules, the text classes
|
||
* and an application's rules all outrank them.
|
||
*/
|
||
|
||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||
|
||
@layer material.base {
|
||
.md-state-layer {
|
||
position: relative;
|
||
isolation: isolate;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
border-radius: inherit;
|
||
background-color: currentColor;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
&:hover::before {
|
||
opacity: var(--md-sys-state-hover-state-layer-opacity);
|
||
}
|
||
}
|
||
|
||
&:focus-visible::before {
|
||
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
||
}
|
||
|
||
&:active::before {
|
||
opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
||
}
|
||
|
||
&[data-md-dragged]::before {
|
||
opacity: var(--md-sys-state-dragged-state-layer-opacity);
|
||
}
|
||
|
||
&:disabled::before,
|
||
&[aria-disabled='true']::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.md-focus-ring {
|
||
outline: none;
|
||
|
||
&:focus-visible {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
|
||
.md-touch-target {
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: var(--md-sys-measurement-space600);
|
||
min-height: var(--md-sys-measurement-space600);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.md-link {
|
||
cursor: pointer;
|
||
text-decoration-line: underline;
|
||
text-decoration-thickness: from-font;
|
||
text-underline-offset: 0.15em;
|
||
border-radius: var(--md-sys-shape-corner-xs);
|
||
|
||
&:focus-visible {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
}
|