@morphemecms/cms 0.5.0 → 0.7.0

package/theme/components/Section.astro

@@ -1,5 +1,6 @@
 ---
-// A front-page section: container, spacing above, reveal on scroll and an optional heading + intro.
+// A front-page section: container, spacing above, reveal on scroll and an optional heading + intro; with a `color`
+// the content sits in a panel (.text-section-<color>, blocks.css) inside the container, none without one.
 import Container from '@theme/components/Container.astro';
 import SectionHeading from '@theme/components/SectionHeading';
 import Inline from '@theme/components/Inline.astro';
@@ -10,20 +11,26 @@ interface Props {
   class?: string;
   /** Id for the heading; the section is then labelled by it (aria-labelledby). */
   id?: string;
+  /** The colour of the panel behind the section (`sectionColor` from the front page's heading, as in a page's text-section). */
+  color?: string;
 }
-const { title, intro, class: className, id } = Astro.props;
+const { title, intro, class: className, id, color } = Astro.props;
+const Panel = color ? 'div' : Fragment;
+const panel = color ? { class: `text-section text-section-${color} my-0` } : {};
 ---
 
 <Container
-  class:list={['pt-(--theme-section-space) md:pt-(--theme-section-space-large)', className]}
+  class:list={['pt-(--theme-section-space) medium:pt-(--theme-section-space-large)', className]}
   aria-labelledby={title && id ? id : undefined}
   data-reveal
 >
-  {title && <SectionHeading id={id} text={title} />}
-  {intro && (
-    <p class="type-body-large mt-3 max-w-[52ch] text-muted">
-      <Inline text={intro} />
-    </p>
-  )}
-  <slot />
+  <Panel {...panel}>
+    {title && <SectionHeading id={id} text={title} />}
+    {intro && (
+      <p class="type-body-large mt-3 max-w-[52ch] text-muted">
+        <Inline text={intro} />
+      </p>
+    )}
+    <slot />
+  </Panel>
 </Container>

package/theme/components/SectionHeading.tsx

@@ -1,7 +1,7 @@
 // The h2 used for every front-page section. `text`: its text.
 export default function SectionHeading({ text, id, className }: { text: string; id?: string; className?: string }) {
   return (
-    <h2 id={id} className={['type-headline-large md:type-display-medium', className].filter(Boolean).join(' ')}>
+    <h2 id={id} className={['type-headline-large medium:type-display-medium', className].filter(Boolean).join(' ')}>
       {text}
     </h2>
   );

package/theme/components/home/PageBlock.astro

@@ -1,18 +1,18 @@
 ---
 // A block a page can have, as a section of the front page (`pageBlocks` in packages/editor/defaults/collections.ts): the standard
-// one's or the app's (Block.astro, by its type), in the front page's width and space, with its shared texts.
+// one's or the app's (Block.astro, by its type), in the front page's width and space, with its shared texts; a colour under its heading (`sectionColor`) goes to Section, not to the block.
 import Block from '@morphemecms/cms/src/standard/Block.astro';
 import Section from '@theme/components/Section.astro';
 import { blockTexts } from '@morphemecms/cms/site/site';
 
 interface Props {
-  section: { type: string; hidden?: boolean } & Record<string, unknown>;
+  section: { type: string; hidden?: boolean; sectionColor?: string } & Record<string, unknown>;
   class?: string;
 }
-const { type, hidden, ...props } = Astro.props.section;
+const { type, hidden, sectionColor, ...props } = Astro.props.section;
 ---
 
-<Section class={Astro.props.class}>
+<Section class={Astro.props.class} color={sectionColor}>
   <div class="block-place">
     <Block type={type} props={props} texts={blockTexts[type]} />
   </div>

package/theme/components/home/Text.astro

@@ -1,13 +1,13 @@
 ---
-// A text the site's owner writes: an optional heading and Markdown.
+// A text the site's owner writes: an optional heading and Markdown, in a panel when its heading has a colour (`sectionColor`).
 import Section from '@theme/components/Section.astro';
 import Markdown from '@theme/components/Markdown.astro';
 import type { HomeSection } from '@morphemecms/cms/site/home';
 
 type Props = Extract<HomeSection, { type: 'text' }> & { class?: string };
-const { heading, body, class: className } = Astro.props;
+const { heading, body, sectionColor, class: className } = Astro.props;
 ---
 
-<Section title={heading} class={className}>
+<Section title={heading} class={className} color={sectionColor}>
   <Markdown body={body} class={heading && 'mt-6'} />
 </Section>

package/theme/layouts/PageLayout.astro

@@ -90,7 +90,7 @@ const side =
   questions={questions}
 >
   <article>
-    <Container as="header" class="pt-8 md:pt-14">
+    <Container as="header" class="pt-8 medium:pt-14">
       {parent && (
         <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
           <Icon name="arrow-left" size={16} />
@@ -102,14 +102,14 @@ const side =
       </h1>
     </Container>
 
-    <Container as="div" class:list={[wide ? 'mt-4' : 'mt-8 md:mt-12']}>
+    <Container as="div" class:list={[wide ? 'mt-4' : 'mt-8 medium:mt-12']}>
       <div {...(side ? { class: 'page-with-side' } : {})}>
         <div
           data-editor="text"
           class:list={[
             'prose',
             wide
-              ? 'max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:max-w-[52ch] [&>p:first-child]:type-body-large [&>p:first-child]:text-muted md:[&>p:first-child]:type-title-large'
+              ? 'max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:max-w-[52ch] [&>p:first-child]:type-body-large [&>p:first-child]:text-muted medium:[&>p:first-child]:type-title-large'
               : 'max-w-[66ch]',
           ]}
         >

package/theme/layouts/PostLayout.astro

@@ -1,12 +1,13 @@
 ---
 // Blog post template. A narrow reading column, the site's owner as author; related posts in the footer.
 // data-editor marks what the editor's preview fills in with what is in its form ("Forhåndsvis",
-// packages/editor/src/pagePreview.tsx): the heading, the picture and the text.
+// packages/editor/src/pagePreview.tsx): the heading, the picture and the text. The text goes through RichText (blocks={false}: a post draws no blocks, but its coloured sections are panels).
 import { firstImage, heroImage, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import Base from '@theme/layouts/Base.astro';
 import Icon from '@theme/components/Icon.astro';
 import Img from '@theme/components/Img.astro';
 import EndBlock from '@theme/components/EndBlock.astro';
+import RichText from '@theme/components/RichText.astro';
 import { categoryName, getPosts, postPath, stateOf, type Post } from '@morphemecms/cms/site/content';
 import PostMeta from '@theme/components/PostMeta';
 import Chip from '@theme/ui/Chip';
@@ -68,7 +69,7 @@ const related = (await getPosts())
   ]}
 >
   <article>
-    <header class="mx-auto max-w-3xl px-5 pt-8 md:px-8 md:pt-14">
+    <header class="mx-auto max-w-3xl px-5 pt-8 medium:px-8 medium:pt-14">
       <a href="/blog/" class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
         <Icon name="arrow-left" size={16} /> {siteT.theme.blog}
       </a>
@@ -87,22 +88,22 @@ const related = (await getPosts())
     </header>
 
     {image && (
-      <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 md:mt-12 md:px-8">
+      <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 medium:mt-12 medium:px-8">
         <Img
           src={image}
           alt={imageAlt ?? ''}
           fetchpriority="high"
-          class="aspect-[16/10] w-full rounded-(--theme-picture-radius) object-cover md:aspect-[16/9]"
-          sizes="(min-width: 1024px) 960px, calc(100vw - 40px)"
+          class="aspect-[16/10] w-full rounded-(--theme-picture-radius) object-cover medium:aspect-[16/9]"
+          sizes="min(60rem, calc(100vw - 2.5rem))"
         />
       </div>
     )}
 
-    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 md:mt-14 md:px-8">
-      <slot />
+    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 medium:mt-14 medium:px-8">
+      <RichText html={await Astro.slots.render('default')} blocks={false} />
     </div>
 
-    <footer class="mx-auto mt-12 max-w-3xl px-5 md:px-8">
+    <footer class="mx-auto mt-12 max-w-3xl px-5 medium:px-8">
       {onBlog.length > 0 && (
         <ul class="flex flex-wrap gap-2" aria-label="Tags">
           {onBlog.map((c) => (

package/theme/styles/base.css

@@ -93,6 +93,16 @@
   --ease-soft: var(--ease);
 }
 
+/* Material 3's breakpoints (m3.material.io/foundations/layout/breakpoints): Tailwind's medium:, expanded:, large: and
+   extra-large: (and max-…:), and theme(--breakpoint-…) in a @media; the same as lib/breakpoints.mjs for scripts. */
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-medium: 37.5rem;
+  --breakpoint-expanded: 52.5rem;
+  --breakpoint-large: 75rem;
+  --breakpoint-extra-large: 100rem;
+}
+
 /* z-index scale (documented, no ad-hoc values): action bar 30, header 40, cookie banner 42 (under the
    open menu, which must stay usable), menu 45, skip link 50 */
 
@@ -276,7 +286,7 @@
   font-weight: var(--type-headline-large-weight);
   letter-spacing: var(--type-headline-large-tracking);
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   .block-place > h2,
   .block-place > .block-head > h2 {
     font-size: var(--type-display-medium-size);
@@ -287,7 +297,7 @@
 }
 /* Cards placed in the page's full width (a front-page section, PageBlock.astro): three in a row on a computer, as
    there is room for (in the text, two). */
-@media (min-width: 64rem) {
+@media (width >= theme(--breakpoint-expanded)) {
   .block-place .block-cards {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -313,7 +323,7 @@
   font-weight: var(--type-headline-small-weight);
   letter-spacing: var(--type-headline-small-tracking);
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   .block-panels > .block-panel {
     --card-padding: 2rem;
   }

package/theme/styles/blocks.css

@@ -23,6 +23,9 @@
                        square, a step on a time line)
     --block-control-radius  the corners of a button and a tag (a pill when large)
     --block-shadow     the shadow of a raised panel
+    --block-section-padding, --block-section-margin  the space inside, and above and below, a coloured section of a text
+                       (.text-section: a panel the width of the text column, on --block-surface, --block-tint or --block-accent; on the accent
+                       the blocks in it get inverted variables: text, accent and line on-accent, surface and tint a veil of it)
     --block-ease       the easing of motion (else the motion scheme's, --motion-ease)
     --block-ease-quick the easing of a quick change of state (a colour, an arrow that turns or moves; else the motion
                        scheme's, --motion-ease-quick)
@@ -31,7 +34,7 @@
     --block-page-width, --block-gutter  the page's container (its width, gutters included, and its gutter at the
                        side), whose left edge the text starts at: how far a banner across the whole width reaches out
                        of the text to the window's edges, and where its content starts again (the standard theme's
-                       Container.astro: 72rem, 1.25rem and 2rem from 48rem)
+                       Container.astro: 72rem, 1.25rem and 2rem from the medium width)
 
   How things move is the site's motion scheme (Material 3's, chosen under "Udseende" › "Bevægelse"; lib/motion.ts), which
   Base.astro writes into the <head> as springs, each its duration and curve, for `transition` and `animation`:
@@ -81,8 +84,10 @@
   --block-ease-quick: var(--motion-ease-quick, cubic-bezier(0.2, 0, 0, 1));
   --block-page-width: 72rem;
   --block-gutter: 1.25rem;
+  --block-section-padding: 1.5rem;
+  --block-section-margin: 2rem;
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   :where(:root) {
     --block-gutter: 2rem;
   }
@@ -95,6 +100,62 @@
     margin-block: 2rem;
   }
 
+  /* A coloured section of a page's or post's text (lib/text-sections.mjs, RichText.astro): a panel the width of the text
+     column, from its heading to the next (its first and last parts' margins: at the end of the file). */
+  .text-section {
+    margin-block: var(--block-section-margin);
+    border-radius: var(--block-radius);
+    padding: var(--block-section-padding);
+  }
+  .text-section-surface {
+    background: var(--block-surface);
+    box-shadow: var(--block-shadow);
+  }
+  .text-section-tint {
+    background: var(--block-tint);
+  }
+  /* On the accent everything in the text is the text-on-accent colour (the prose colours are variables, .prose in base.css),
+     links too: they are underlined by the prose style. The section's real colours are kept in private variables first
+     (--section-…): the blocks in it get the variables swapped (below), and a variable cannot swap with another on the
+     same element. */
+  .text-section-accent {
+    --section-accent: var(--block-accent);
+    --section-on-accent: var(--block-on-accent);
+    --section-text: var(--block-text);
+    --section-surface: var(--block-surface);
+    background: var(--section-accent);
+    color: var(--section-on-accent);
+    --tw-prose-body: var(--section-on-accent);
+    --tw-prose-headings: var(--section-on-accent);
+    --tw-prose-lead: var(--section-on-accent);
+    --tw-prose-links: var(--section-on-accent);
+    --tw-prose-bold: var(--section-on-accent);
+    --tw-prose-counters: var(--section-on-accent);
+    --tw-prose-bullets: var(--section-on-accent);
+    --tw-prose-hr: var(--section-on-accent);
+    --tw-prose-quotes: var(--section-on-accent);
+    --tw-prose-quote-borders: var(--section-on-accent);
+    --tw-prose-captions: var(--section-on-accent);
+    --tw-prose-code: var(--section-on-accent);
+  }
+  /* The blocks in it read as an inverted theme on the accent: text, lines and the accent itself are the text-on-accent
+     colour, a surface is a veil of it, and what was text-on-accent (a filled button's label, a step number) is the
+     accent. Dark mode follows, as the variables do. */
+  .text-section-accent > * {
+    --block-text: var(--section-on-accent);
+    --block-muted: color-mix(in srgb, var(--section-on-accent) 80%, transparent);
+    --block-accent: var(--section-on-accent);
+    --block-accent-hover: color-mix(in srgb, var(--section-on-accent) 88%, var(--section-accent));
+    --block-on-accent: var(--section-accent);
+    --block-surface: color-mix(in srgb, var(--section-on-accent) 14%, transparent);
+    --block-tint: color-mix(in srgb, var(--section-on-accent) 14%, transparent);
+    --block-line: color-mix(in srgb, var(--section-on-accent) 35%, transparent);
+    --block-shadow: none;
+    /* A hero with its picture behind the text is darkened with the section's own text colour, in its own surface. */
+    --block-hero-shade: var(--section-text);
+    --block-hero-on-shade: var(--section-surface);
+  }
+
   /* "Besked": a short notice in a box with the accent along its left edge (notice/). */
   .block-notice {
     border-left: 4px solid var(--block-accent);
@@ -393,7 +454,7 @@
   body:has(.block-hero-full.block-in-text) {
     overflow-x: clip;
   }
-  @media (min-width: 48rem) {
+  @media (width >= theme(--breakpoint-expanded)) {
     .block-hero {
       grid-template-columns: 7fr 5fr;
       gap: 3rem;
@@ -964,7 +1025,7 @@
     font-weight: var(--type-title-large-weight);
     letter-spacing: var(--type-title-large-tracking);
   }
-  @media (width >= 40rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .block-timeline {
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
@@ -1000,7 +1061,7 @@
     padding-top: 1.25rem;
   }
   /* Only on phones and tablets (a block a site shows beside the text on a computer). */
-  @media (width >= 64rem) {
+  @media (width >= theme(--breakpoint-expanded)) {
     .block-small-screens {
       display: none;
     }
@@ -1405,7 +1466,7 @@
       scale: 1.03;
     }
   }
-  @media (width >= 40rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .block-buttons {
       flex-direction: row;
       flex-wrap: wrap;
@@ -1420,7 +1481,7 @@
       text-align: right;
     }
   }
-  @media (width >= 48rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .block-testimonial {
       --card-padding: 1.75rem;
     }
@@ -1737,7 +1798,7 @@
   color: #fff;
   text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
 }
-@media (min-width: 768px) {
+@media (width >= theme(--breakpoint-medium)) {
   .prose .video-facade-still svg {
     width: 4.5rem;
     height: 4.5rem;
@@ -1754,7 +1815,7 @@
    heading is the text's own <h2>, without this): the label in small capitals, spaced out, in the accent; the
    subheading larger and quiet. Mostly in the text's style (.prose), so outside the layers, like the video above, whose
    margins it sets in place of the text's; a theme that places a block outside the text sets its own (.block-place in
-   the standard theme). A theme gives it its own look outside the layers too (the standard theme: in the middle). */
+   the standard theme). A label above a heading in a text has the same look. A theme gives it its own look outside the layers too (the standard theme: in the middle). */
 .block-head {
   margin-block: 2.5em 1.25em;
 }
@@ -1773,7 +1834,8 @@
 .block-head > .block-eyebrow + h2 {
   margin-top: 0.5rem;
 }
-.block-head > .block-eyebrow {
+.block-head > .block-eyebrow,
+.prose .block-eyebrow {
   font-size: var(--type-label-medium-size);
   line-height: var(--type-label-medium-line-height);
   font-weight: var(--type-label-medium-weight);
@@ -1789,6 +1851,15 @@
   color: var(--block-muted);
 }
 
+/* A label above a heading in a text (packages/editor/lib/eyebrow.mjs): a block's label, with the heading's space above
+   it and close to its heading. */
+.prose .block-eyebrow {
+  margin-block: 2em 0;
+}
+.prose .block-eyebrow + :is(h1, h2, h3) {
+  margin-top: 0.5rem;
+}
+
 /* A word or more in one of the site's colours, in a text (packages/editor/lib/text-colors.mjs, the colour button in the
    editor): the accent, or the quiet text's, both readable on the background, the surfaces and the tint (the site's
    pairs of colours, checked under "Farver"). Bold, italic and a link in it have its colour. Outside the layers, as it
@@ -1806,3 +1877,19 @@
 .block-hero-behind :is(.color-accent, .color-muted) :is(strong, em, a) {
   color: inherit;
 }
+
+/* A word in the accent's or the quiet text's colour (above) on a section with the accent as its background would not
+   be read: there it has the section's text colour. */
+.text-section-accent :is(.color-accent, .color-muted),
+.text-section-accent :is(.color-accent, .color-muted) :is(strong, em, a) {
+  color: inherit;
+}
+
+/* The first and last parts of a coloured section lose the prose margins that would add to the panel's padding. Outside
+   the layers, as the prose style (Tailwind's typography) is in the utilities layer, which wins over components. */
+.text-section > :first-child {
+  margin-top: 0;
+}
+.text-section > :last-child {
+  margin-bottom: 0;
+}

package/theme/styles/components.css

@@ -43,7 +43,7 @@
   --theme-title-leading: var(--type-display-small-line-height);
   --theme-title-size-large: var(--type-display-medium-size);
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   :root {
     --theme-title-leading: var(--type-display-medium-line-height);
   }
@@ -87,7 +87,7 @@
   .theme-logo-role {
     display: var(--theme-logo-role-display);
   }
-  @media (min-width: 48rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .theme-logo-role {
       display: var(--theme-logo-role-display-large);
     }
@@ -109,7 +109,7 @@
   /* The bar at the bottom of a phone's screen (a promotion: ActionBar.astro), a docked toolbar
      (.toolbar-docked, ui.css) fixed there: the page gets room under its footer, and only the first bar on a page is
      shown. data-hidden: moved down out of sight (while the buttons at the top of the front page are on screen, the script
-     in Base.astro). Not from 48rem (a tablet in landscape, a computer). */
+     in Base.astro). Not from the medium width (a tablet in portrait, a computer). */
   .theme-action-bar {
     position: fixed;
     inset: auto 0 0;
@@ -122,12 +122,12 @@
   .theme-action-bar ~ .theme-action-bar {
     display: none;
   }
-  @media (width < 48rem) {
+  @media (width < theme(--breakpoint-medium)) {
     body:has(.theme-action-bar) {
       padding-bottom: 6rem;
     }
   }
-  @media (width >= 48rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .theme-action-bar {
       display: none;
     }
@@ -165,7 +165,7 @@
 
 @layer components {
   /* With the bar of "Mobilmenu" under the header (MobileNav.astro), a link to a part of a page stops below both. */
-  @media (width < 80rem) {
+  @media (width < theme(--breakpoint-large)) {
     html:has([data-mobile-nav]) {
       scroll-padding-top: 9.25rem;
     }
@@ -193,12 +193,12 @@
   }
 }
 
-/* A page with a block beside its text (PageLayout.astro): the text, then the column (on a phone below the text); from md
+/* A page with a block beside its text (PageLayout.astro): the text, then the column (on a phone below the text); from medium
    two columns, the second one staying in view while the text is read. */
 .page-with-side > .page-side {
   margin-top: 3rem;
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   .page-with-side {
     display: grid;
     grid-template-columns: minmax(0, 1fr) var(--theme-side-width);
@@ -220,7 +220,7 @@
   font-weight: var(--type-display-small-weight);
   letter-spacing: var(--type-display-small-tracking);
 }
-@media (min-width: 48rem) {
+@media (width >= theme(--breakpoint-medium)) {
   .theme-title {
     font-size: var(--theme-title-size-large);
     font-weight: var(--type-display-medium-weight);

package/theme/styles/elevation.test.mjs

@@ -0,0 +1,168 @@
+// Checks the tonal elevation tokens and rules of the base theme (spec: tonal elevation, Material 3).
+// Reads theme/styles/ui.css (and later global.css) as text; no browser, no build.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const read = (name) => readFileSync(new URL(name, import.meta.url), 'utf8');
+const uiCss = read('./ui.css');
+
+const count = (text, part) => text.split(part).length - 1;
+
+// The level tokens: the exact default declaration of each, once in ui.css.
+const tokens = {
+  '--elevation-0-surface': 'var(--bg)',
+  '--elevation-1-surface': 'var(--surface-container-low, var(--block-surface))',
+  '--elevation-2-surface': 'var(--surface-container, var(--block-surface))',
+  '--elevation-3-surface': 'var(--surface-container-high, var(--block-surface))',
+  '--elevation-4-surface': 'var(--surface-container-highest, var(--block-surface))',
+  '--elevation-5-surface': 'var(--surface-container-highest, var(--block-surface))',
+  '--elevation-1-rest-shadow': 'var(--elevation-1)',
+  '--elevation-2-rest-shadow': 'var(--elevation-2)',
+  '--elevation-3-rest-shadow': 'var(--elevation-3)',
+  '--elevation-4-rest-shadow': 'var(--elevation-4)',
+  '--elevation-5-rest-shadow': 'var(--elevation-5)',
+};
+
+for (const [name, value] of Object.entries(tokens)) {
+  test(`ui.css declares ${name}`, () => {
+    assert.equal(count(uiCss, `  ${name}: ${value};\n`), 1);
+  });
+}
+
+// Neutral parts: the resting surface reads the part's own variable, then its level's colour.
+const surfaces = [
+  ['elevated button', 'background: var(--button-elevated-surface, var(--elevation-1-surface));', 1],
+  ['elevated chip', 'background: var(--chip-elevated-surface, var(--elevation-1-surface));', 1],
+  ['elevated card', 'background: var(--card-elevated-surface, var(--elevation-1-surface));', 1],
+  ['outlined card', 'background: var(--card-outlined-surface, var(--elevation-0-surface));', 1],
+  ['dialog (also date and time picker)', 'background: var(--dialog-surface, var(--elevation-3-surface));', 1],
+  ['date picker input label notch', '--text-field-label-surface: var(--dialog-surface, var(--elevation-3-surface));', 1],
+  ['bottom sheet (container and cover)', 'background: var(--bottom-sheet-surface, var(--elevation-1-surface));', 2],
+  ['standard side sheet', 'background: var(--side-sheet-surface, var(--elevation-0-surface));', 2],
+  ['modal side sheet', 'background: var(--side-sheet-modal-surface, var(--side-sheet-surface, var(--elevation-1-surface)));', 2],
+  ['scrolled top app bar', 'background: var(--top-app-bar-stuck-surface, var(--elevation-2-surface));', 1],
+  ['menu, menu group and select list', 'background: var(--menu-surface, var(--elevation-2-surface));', 3],
+  ['navigation drawer', 'background: var(--navigation-drawer-surface, var(--elevation-1-surface));', 1],
+  ['rich tooltip', 'background: var(--tooltip-rich-surface, var(--elevation-2-surface));', 1],
+  ['standard navigation rail', 'background: var(--navigation-rail-surface, var(--elevation-0-surface));', 1],
+  ['modal navigation rail', 'background: var(--navigation-rail-modal-surface, var(--elevation-2-surface));', 1],
+  ['search view', 'background: var(--search-view-surface, var(--elevation-3-surface));', 1],
+];
+
+for (const [part, line, times] of surfaces) {
+  test(`${part} reads its level's surface`, () => {
+    assert.equal(count(uiCss, line), times);
+  });
+}
+
+// Parts that keep their surface: the top app bar at rest, and the role parts.
+const unchanged = [
+  'background: var(--top-app-bar-surface, color-mix(in oklab, var(--bg) 85%, transparent));',
+  'background: var(--search-bar-surface, var(--block-surface));',
+  'background: var(--navigation-bar-surface, var(--block-surface));',
+  'background: var(--card-filled-surface, var(--block-tint));',
+  'background: var(--switch-handle-surface, var(--block-surface));',
+];
+
+for (const line of unchanged) {
+  test(`ui.css keeps ${line}`, () => {
+    assert.equal(count(uiCss, line), 1);
+  });
+}
+
+test('no part reads the old surface fallbacks', () => {
+  assert.equal(count(uiCss, 'var(--menu-surface, var(--block-surface))'), 0);
+  assert.equal(count(uiCss, 'var(--dialog-surface, var(--block-surface))'), 0);
+  assert.equal(count(uiCss, 'var(--navigation-drawer-surface, var(--surface-container-low, var(--bg)))'), 0);
+  assert.equal(count(uiCss, 'var(--navigation-rail-surface, var(--block-surface))'), 0);
+});
+
+// Resting shadows: the part's own variable first, then its level's rest-shadow token.
+const restShadows = [
+  ['elevated button', 'box-shadow: var(--button-elevated-shadow, var(--elevation-1-rest-shadow));', 2],
+  ['elevated chip', 'box-shadow: var(--chip-elevated-shadow, var(--elevation-1-rest-shadow));', 2],
+  ['elevated card', '--card-shadow: var(--card-elevated-shadow, var(--elevation-1-rest-shadow));', 1],
+  ['modal side sheet (container and wide layout)', 'box-shadow: var(--side-sheet-shadow, var(--elevation-1-rest-shadow));', 2],
+  ['bottom sheet', 'box-shadow: var(--bottom-sheet-shadow, var(--elevation-1-rest-shadow));', 1],
+  ['bottom sheet as a dialog', 'box-shadow: var(--bottom-sheet-shadow-large, var(--elevation-3-rest-shadow));', 1],
+  ['dialog (also date and time picker)', 'var(--dialog-shadow, var(--elevation-3-rest-shadow));', 1],
+  ['docked date picker', 'var(--date-picker-docked-shadow, var(--dialog-shadow, var(--elevation-3-rest-shadow)));', 1],
+  ['scrolled top app bar', 'box-shadow: var(--top-app-bar-stuck-shadow, var(--elevation-2-rest-shadow));', 1],
+  ['modal navigation rail', 'box-shadow: var(--navigation-rail-modal-shadow, var(--elevation-2-rest-shadow));', 1],
+  ['navigation drawer', 'box-shadow: var(--navigation-drawer-shadow, var(--elevation-1-rest-shadow));', 1],
+  ['menu, menu group and select list', 'var(--menu-shadow, var(--elevation-2-rest-shadow));', 3],
+  ['rich tooltip', 'var(--tooltip-rich-shadow, var(--elevation-2-rest-shadow));', 1],
+  ['search view', 'var(--search-view-shadow, var(--elevation-3-rest-shadow));', 1],
+  ['floating toolbar', 'var(--toolbar-floating-shadow, var(--elevation-3-rest-shadow));', 1],
+  ['FAB and FAB menu', 'box-shadow: var(--fab-shadow, var(--elevation-3-rest-shadow));', 2],
+  ['snackbar', 'box-shadow: var(--snackbar-shadow, var(--elevation-3-rest-shadow));', 1],
+  ['switch handle', 'box-shadow: var(--switch-handle-shadow, var(--elevation-1-rest-shadow));', 1],
+  ['slider handle (both directions)', 'box-shadow: var(--slider-handle-shadow, var(--elevation-1-rest-shadow));', 2],
+];
+
+for (const [part, line, times] of restShadows) {
+  test(`${part} reads its level's rest shadow`, () => {
+    assert.equal(count(uiCss, line), times);
+  });
+}
+
+// The lift stays on --elevation-N.
+test('elevated card hover still reads --elevation-2', () => {
+  assert.equal(count(uiCss, '--card-shadow: var(--card-elevated-hover-shadow, var(--card-elevated-shadow, var(--elevation-2)));'), 1);
+});
+
+test('outlined card keeps --elevation-0', () => {
+  assert.equal(count(uiCss, '--card-shadow: var(--card-outlined-shadow, var(--elevation-0));'), 1);
+});
+
+// The Material theme (global.css): colour at rest, a shadow only for the FAB and the lift.
+const globalCss = read('./global.css');
+
+for (let level = 1; level <= 5; level++) {
+  test(`global.css sets --elevation-${level}-rest-shadow to no shadow`, () => {
+    assert.equal(count(globalCss, `  --elevation-${level}-rest-shadow: var(--elevation-0);\n`), 1);
+  });
+}
+
+const addedLines = [
+  ['--fab-shadow: var(--elevation-3);', 1],
+  ['--fab-hover-shadow: var(--elevation-4);', 1],
+  ['--block-shadow: var(--elevation-1-rest-shadow);', 1],
+  // Light mode once, then the dark-mode media block and the dark theme attribute.
+  ['--shadow: var(--elevation-1-rest-shadow);', 3],
+];
+
+for (const [line, times] of addedLines) {
+  test(`global.css has ${line} ${times} time(s)`, () => {
+    assert.equal(count(globalCss, line), times);
+  });
+}
+
+const removedDeclarations = [
+  '--button-elevated-surface',
+  '--card-elevated-surface',
+  '--side-sheet-surface',
+  '--side-sheet-modal-surface',
+  '--bottom-sheet-surface',
+  '--dialog-surface',
+  '--top-app-bar-stuck-surface',
+  '--top-app-bar-stuck-shadow',
+  '--navigation-rail-surface',
+  '--navigation-drawer-surface',
+  '--menu-surface',
+  '--tooltip-rich-surface',
+  '--search-view-surface',
+  '--switch-handle-shadow',
+  '--slider-handle-shadow',
+];
+
+for (const name of removedDeclarations) {
+  test(`global.css no longer declares ${name}`, () => {
+    assert.equal(count(globalCss, `${name}:`), 0);
+  });
+}
+
+test('global.css keeps the extended FAB lines in the navigation drawer', () => {
+  assert.equal(count(globalCss, '  --fab-shadow: var(--elevation-1);\n  --fab-hover-shadow: var(--elevation-2);\n'), 1);
+});