Andreas Reinhold / reiniandClaude Opus 5
c545fb69ef
Plan step 33. foundation.css is the one required import: the full material layer statement, then plain imports of its parts, each opening with the same statement. - foundation/reset.css (material.reset): Tailwind 4's preflight rule for rule, with M3's on-surface-variant placeholder and no typeface. - foundation/hidden.css: [hidden] and [x-cloak], outside every layer. - foundation/tokens.css (material.tokens): the token files. - foundation/base.css (material.base): the page's surface, ink and brand typeface, and the font face. - foundation/interaction.css (material.base): md-state-layer, md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the utilities; md-state-layer also takes data-md-dragged, and md-touch-target is 48px (space600) where the utility reads 3rem. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
112 lines
4.0 KiB
CSS
112 lines
4.0 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` (or the
|
||
* older `data-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; `md-touch-target` alone
|
||
* differs, in 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);
|
||
}
|
||
|
||
&:is([data-md-dragged], [data-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;
|
||
}
|
||
}
|
||
}
|