Andreas Reinhold / reiniandClaude Sonnet 5
a967cfcc2b
Plan step 37: an application on 1.x-style imports now imports foundation.css before @import 'tailwindcss' and tailwind.css after it, the way foundation.css's own header has described since Phase F started — material.css only ever saved writing those two lines. Updates every place that named it: tailwind.css's and foundation/hidden.css's and tokens/utilities.css's header comments, the development skill's install snippet and Tokens section, README.md's install snippet, and a new line in UPGRADE.md's migration notes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
287 lines
9.1 KiB
CSS
287 lines
9.1 KiB
CSS
/*
|
||
* The token utilities, for the components still written in Tailwind.
|
||
*
|
||
* Tailwind's side of tokens/state.css and tokens/type.css, kept apart so that the token files the
|
||
* foundation imports carry no Tailwind directive. tailwind.css imports this file after Tailwind;
|
||
* it goes when the last component leaves Tailwind. New markup uses the plain-CSS classes instead,
|
||
* which carry the same declarations: `md-state-layer`, `md-focus-ring`, `md-touch-target` and
|
||
* `md-link` (foundation/interaction.css), and `md-type-*` (text.css).
|
||
*
|
||
* `state-layer` puts M3's state layer on an element. Hover only where the pointer can hover,
|
||
* because a touch screen keeps the last hover after a tap; `data-dragged` on the element draws
|
||
* the dragged layer. The layer is a ::before, so the element becomes `position: relative` and
|
||
* `isolation: isolate`; never pass `static` or a z-index to it.
|
||
*
|
||
* `touch-target` extends an element's pointer target to M3's 48×48px minimum without changing
|
||
* what is drawn: a ::after centred on it, at least 48px each way. It is `::after`-based, so a
|
||
* component that already draws with ::after wraps its control in an element carrying it.
|
||
*
|
||
* `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). `link` is a link in running text: underlined in the
|
||
* colour of the words around it.
|
||
*
|
||
* `type-*` is one of M3's 30 type styles (tokens/type.css): size, line height, weight and
|
||
* tracking together. M3 asks for emphasis one element at a time, and `font-variation-settings`
|
||
* inherits, so every regular utility resets it: body copy inside an emphasized heading reads as
|
||
* itself again.
|
||
*/
|
||
|
||
@utility 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-dragged]::before {
|
||
opacity: var(--md-sys-state-dragged-state-layer-opacity);
|
||
}
|
||
|
||
&:disabled::before,
|
||
&[aria-disabled='true']::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@utility touch-target {
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 3rem;
|
||
min-height: 3rem;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
@utility focus-ring {
|
||
outline: none;
|
||
|
||
&:focus-visible {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
|
||
@utility 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;
|
||
}
|
||
}
|
||
|
||
@utility type-display-lg {
|
||
font: var(--md-sys-typescale-display-lg);
|
||
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-display-lg {
|
||
font: var(--md-sys-typescale-emphasized-display-lg);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-display-md {
|
||
font: var(--md-sys-typescale-display-md);
|
||
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-display-md {
|
||
font: var(--md-sys-typescale-emphasized-display-md);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-display-md-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-display-sm {
|
||
font: var(--md-sys-typescale-display-sm);
|
||
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-display-sm {
|
||
font: var(--md-sys-typescale-emphasized-display-sm);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-display-sm-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-headline-lg {
|
||
font: var(--md-sys-typescale-headline-lg);
|
||
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-headline-lg {
|
||
font: var(--md-sys-typescale-emphasized-headline-lg);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-headline-lg-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-headline-md {
|
||
font: var(--md-sys-typescale-headline-md);
|
||
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-headline-md {
|
||
font: var(--md-sys-typescale-emphasized-headline-md);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-headline-sm {
|
||
font: var(--md-sys-typescale-headline-sm);
|
||
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-headline-sm {
|
||
font: var(--md-sys-typescale-emphasized-headline-sm);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-headline-sm-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-title-lg {
|
||
font: var(--md-sys-typescale-title-lg);
|
||
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-title-lg {
|
||
font: var(--md-sys-typescale-emphasized-title-lg);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-title-lg-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-title-md {
|
||
font: var(--md-sys-typescale-title-md);
|
||
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-title-md {
|
||
font: var(--md-sys-typescale-emphasized-title-md);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-title-md-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-title-sm {
|
||
font: var(--md-sys-typescale-title-sm);
|
||
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-title-sm {
|
||
font: var(--md-sys-typescale-emphasized-title-sm);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-title-sm-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-body-lg {
|
||
font: var(--md-sys-typescale-body-lg);
|
||
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-body-lg {
|
||
font: var(--md-sys-typescale-emphasized-body-lg);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-body-lg-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-body-md {
|
||
font: var(--md-sys-typescale-body-md);
|
||
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-body-md {
|
||
font: var(--md-sys-typescale-emphasized-body-md);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-body-md-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-body-sm {
|
||
font: var(--md-sys-typescale-body-sm);
|
||
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-body-sm {
|
||
font: var(--md-sys-typescale-emphasized-body-sm);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-body-sm-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-label-lg {
|
||
font: var(--md-sys-typescale-label-lg);
|
||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-label-lg {
|
||
font: var(--md-sys-typescale-emphasized-label-lg);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-label-lg-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-label-md {
|
||
font: var(--md-sys-typescale-label-md);
|
||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-label-md {
|
||
font: var(--md-sys-typescale-emphasized-label-md);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-label-md-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|
||
|
||
@utility type-label-sm {
|
||
font: var(--md-sys-typescale-label-sm);
|
||
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
||
font-variation-settings: normal;
|
||
}
|
||
|
||
@utility type-emphasized-label-sm {
|
||
font: var(--md-sys-typescale-emphasized-label-sm);
|
||
letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
|
||
font-variation-settings: "ROND" 100;
|
||
}
|