@morphemecms/cms 0.7.0 → 0.8.0

package/theme/styles/base.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+/* Material's rules sit in the last layer, fallback: a theme's own unlayered rules beat them, whatever their specificity. */
+@layer theme, base, components, utilities, fallback;
 /* The theme's UI components, as Material 3 names them (buttons, icon buttons), and the standard blocks of the editor,
    in this site's design (their variables below). */
 @import './ui.css';
@@ -8,6 +10,9 @@
 @import './components.css';
 
 /*
+  Material is every theme's fallback: its rules that set more than custom properties sit in @layer fallback (declared last in
+  base.css), so a theme's own unlayered rules win over them, whatever the specificity. Custom properties stay unlayered.
+
   The standard theme's base: what every theme builds on, plain and neutral. The system's own font, a small radius on
   panels, a light shadow, full pills on controls; the classes the standard theme's components use (.link, .prose,
   the motion …) besides the UI components (ui.css: buttons, icon buttons, chips, snackbars). The standard theme's own look is over it, in global.css; a theme with a look of its
@@ -31,7 +36,6 @@
   --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18);
   /* The motion scheme's curve (blocks.css, lib/motion.ts). */
   --ease: var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
-  color-scheme: light;
 
   /* The standard blocks (blocks.css) in this design; in dark mode too, as they
      follow the tokens above. */
@@ -53,17 +57,34 @@
   /* The same for a chip set that scrolls (ui.css). */
   --chip-set-bleed: 1.25rem;
 }
+@layer fallback {
+  :root {
+    color-scheme: light;
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
-    color-scheme: dark;
+  }
+}
+
+@layer fallback {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      color-scheme: dark;
+    }
   }
 }
 
 :root[data-theme='dark'] {
   --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
-  color-scheme: dark;
+}
+
+@layer fallback {
+  :root[data-theme='dark'] {
+    color-scheme: dark;
+  }
 }
 
 @theme inline {
@@ -176,152 +197,168 @@
   --tw-prose-th-borders: var(--line);
   --tw-prose-td-borders: var(--line);
   --tw-prose-code: var(--ink);
-  font-size: var(--type-body-large-size);
-  line-height: var(--type-body-large-line-height);
-  font-weight: var(--type-body-large-weight);
-  letter-spacing: var(--type-body-large-tracking);
-}
-/* The text's headings: a headline, a title under it and a smaller title under that (the type scale, ui.css). */
-.prose :where(h2) {
-  font-size: var(--type-headline-medium-size);
-  line-height: var(--type-headline-medium-line-height);
-  font-weight: var(--type-headline-medium-weight);
-  letter-spacing: var(--type-headline-medium-tracking);
-}
-.prose :where(h3) {
-  font-size: var(--type-title-large-size);
-  line-height: var(--type-title-large-line-height);
-  font-weight: var(--type-title-large-weight);
-  letter-spacing: var(--type-title-large-tracking);
-}
-.prose :where(h4) {
-  font-size: var(--type-title-medium-size);
-  line-height: var(--type-title-medium-line-height);
-  font-weight: var(--type-title-medium-weight);
-  letter-spacing: var(--type-title-medium-tracking);
-}
-/* Code in a line (cookie names in the privacy policy): on a tint, without the plugin's backticks. */
-.prose :where(:not(pre) > code):not(:where(.not-prose code)) {
-  background: var(--tint);
-  border-radius: 0.3em;
-  padding: 0.1em 0.35em;
-  font-weight: 500;
 }
-.prose :where(:not(pre) > code):not(:where(.not-prose code))::before,
-.prose :where(:not(pre) > code):not(:where(.not-prose code))::after {
-  content: none;
-}
-/* Not the links of a block in the text (not-prose): their look is the block's. */
-.prose :where(a):not(:where(.not-prose a)) {
-  font-weight: 500;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.2em;
-}
-/* Pictures in the text; not those in a block of the site in it (not-prose, RichText.astro). */
-.prose :where(img):not(:where(.not-prose img)) {
-  border-radius: var(--radius);
-  width: 100%;
-  height: auto;
-}
-/* A picture in the text cut to a format in the editor (packages/editor/lib/crop.mjs): the box is the format, the
+@layer fallback {
+  .prose {
+    font-size: var(--type-body-large-size);
+    line-height: var(--type-body-large-line-height);
+    font-weight: var(--type-body-large-weight);
+    letter-spacing: var(--type-body-large-tracking);
+  }
+  /* A blog post's lead: its first paragraph, one step larger than the text (the title-large size, with the body weight). */
+  .prose.post-lead {
+    font-size: var(--type-title-large-size);
+    line-height: var(--type-title-large-line-height);
+    font-weight: var(--type-body-large-weight);
+    letter-spacing: var(--type-title-large-tracking);
+  }
+  /* The text right after the lead (no picture between): the space the prose puts between paragraphs (1.25em), not the
+   larger space of a text under a picture. Unlayered on purpose: it must beat the mt-10 / medium:mt-14 utilities (a layer). */
+  .prose.post-lead + .prose {
+    margin-top: 1.25em;
+  }
+  /* The text's headings: a headline, a title under it and a smaller title under that (the type scale, ui.css). */
+  .prose :where(h2) {
+    font-size: var(--type-headline-medium-size);
+    line-height: var(--type-headline-medium-line-height);
+    font-weight: var(--type-headline-medium-weight);
+    letter-spacing: var(--type-headline-medium-tracking);
+  }
+  .prose :where(h3) {
+    font-size: var(--type-title-large-size);
+    line-height: var(--type-title-large-line-height);
+    font-weight: var(--type-title-large-weight);
+    letter-spacing: var(--type-title-large-tracking);
+  }
+  .prose :where(h4) {
+    font-size: var(--type-title-medium-size);
+    line-height: var(--type-title-medium-line-height);
+    font-weight: var(--type-title-medium-weight);
+    letter-spacing: var(--type-title-medium-tracking);
+  }
+  /* Code in a line (cookie names in the privacy policy): on a tint, without the plugin's backticks. */
+  .prose :where(:not(pre) > code):not(:where(.not-prose code)) {
+    background: var(--tint);
+    border-radius: 0.3em;
+    padding: 0.1em 0.35em;
+    font-weight: 500;
+  }
+  .prose :where(:not(pre) > code):not(:where(.not-prose code))::before,
+  .prose :where(:not(pre) > code):not(:where(.not-prose code))::after {
+    content: none;
+  }
+  /* Not the links of a block in the text (not-prose): their look is the block's. */
+  .prose :where(a):not(:where(.not-prose a)) {
+    font-weight: 500;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+  }
+  /* Pictures in the text; not those in a block of the site in it (not-prose, RichText.astro). */
+  .prose :where(img):not(:where(.not-prose img)) {
+    border-radius: var(--radius);
+    width: 100%;
+    height: auto;
+  }
+  /* A picture in the text cut to a format in the editor (packages/editor/lib/crop.mjs): the box is the format, the
    picture in it as large and as far moved as the part chosen. */
-.picture-crop {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius);
-  margin-block: 2em;
-}
-.picture-crop > img {
-  position: absolute;
-  inset: 0 auto auto 0;
-  max-width: none;
-  height: auto;
-  margin: 0;
-  border-radius: 0;
-}
-/* Video embeds (an embed that needs another size, an app's calendar, sets its own). */
-.prose :where(iframe) {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  height: auto;
-  border: 0;
-  border-radius: var(--radius);
-  margin-block: 2em;
-}
+  .picture-crop {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius);
+    margin-block: 2em;
+  }
+  .picture-crop > img {
+    position: absolute;
+    inset: 0 auto auto 0;
+    max-width: none;
+    height: auto;
+    margin: 0;
+    border-radius: 0;
+  }
+  /* Video embeds (an embed that needs another size, an app's calendar, sets its own). */
+  .prose :where(iframe) {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    height: auto;
+    border: 0;
+    border-radius: var(--radius);
+    margin-block: 2em;
+  }
 
-/* Motion.
+  /* Motion.
    [data-reveal]: sections fade up once when scrolled into view (packages/editor/theme/scripts/motion.ts).
    The top of a page stands still from the first paint; from another page of the site it fades in (components.css).
    Off for visitors who prefer reduced motion, and with the calm motion scheme ("Bevægelse", data-motion-scheme). */
-@media (prefers-reduced-motion: no-preference) {
-  .js:not([data-motion-scheme='calm']) [data-reveal] {
-    opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    .js:not([data-motion-scheme='calm']) [data-reveal] {
+      opacity: 0;
+    }
   }
-}
 
-/* The site's logo (public/logo.svg), colored by background-color via a mask. */
-.logo-mark {
-  display: inline-block;
-  -webkit-mask: url('/logo.svg') center / contain no-repeat;
-  mask: url('/logo.svg') center / contain no-repeat;
-}
+  /* The site's logo (public/logo.svg), colored by background-color via a mask. */
+  .logo-mark {
+    display: inline-block;
+    -webkit-mask: url('/logo.svg') center / contain no-repeat;
+    mask: url('/logo.svg') center / contain no-repeat;
+  }
 
-/* A block the theme places outside the text (Block.astro in EndBlock.astro and on the prices page): its
+  /* A block the theme places outside the text (Block.astro in EndBlock.astro and on the prices page): its
    place gives the space around it, not the text's (.block-in-text). */
-.block-place > .block-in-text {
-  margin-block: 0;
-}
-/* The heading of a block placed outside the text (a front-page section): as the theme's other section headings
+  .block-place > .block-in-text {
+    margin-block: 0;
+  }
+  /* The heading of a block placed outside the text (a front-page section): as the theme's other section headings
    (SectionHeading.tsx), not the text's; with a label or a subheading (.block-head, blocks.css) the space under the
    whole head. */
-.block-place > h2,
-.block-place > .block-head {
-  margin-block: 0 2rem;
-}
-.block-place > h2,
-.block-place > .block-head > h2 {
-  font-size: var(--type-headline-large-size);
-  line-height: var(--type-headline-large-line-height);
-  font-weight: var(--type-headline-large-weight);
-  letter-spacing: var(--type-headline-large-tracking);
-}
-@media (width >= theme(--breakpoint-medium)) {
+  .block-place > h2,
+  .block-place > .block-head {
+    margin-block: 0 2rem;
+  }
   .block-place > h2,
   .block-place > .block-head > h2 {
-    font-size: var(--type-display-medium-size);
-    line-height: var(--type-display-medium-line-height);
-    font-weight: var(--type-display-medium-weight);
-    letter-spacing: var(--type-display-medium-tracking);
+    font-size: var(--type-headline-large-size);
+    line-height: var(--type-headline-large-line-height);
+    font-weight: var(--type-headline-large-weight);
+    letter-spacing: var(--type-headline-large-tracking);
   }
-}
-/* Cards placed in the page's full width (a front-page section, PageBlock.astro): three in a row on a computer, as
+  @media (width >= theme(--breakpoint-medium)) {
+    .block-place > h2,
+    .block-place > .block-head > h2 {
+      font-size: var(--type-display-medium-size);
+      line-height: var(--type-display-medium-line-height);
+      font-weight: var(--type-display-medium-weight);
+      letter-spacing: var(--type-display-medium-tracking);
+    }
+  }
+  /* 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 (width >= theme(--breakpoint-expanded)) {
-  .block-place .block-cards {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  @media (width >= theme(--breakpoint-expanded)) {
+    .block-place .block-cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
   }
-}
 
-/* The mark before the name on a testimonial (the standard block's card): a small dot in the accent, which the standard
+  /* The mark before the name on a testimonial (the standard block's card): a small dot in the accent, which the standard
    theme's own look (global.css) makes an avatar with the initial. Another mark (e.g. a logo) is that
    theme's own (its global.css), not the standard theme's. */
-.block-testimonial-mark {
-  display: inline-block;
-  flex-shrink: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  background-color: var(--accent);
-}
+  .block-testimonial-mark {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--accent);
+  }
 
-/* Boxes side by side ("Links", an app's boxes): the site's panels (outlined cards, ui.css, without a shadow), with
+  /* Boxes side by side ("Links", an app's boxes): the site's panels (outlined cards, ui.css, without a shadow), with
    more room on a computer and the heading of a section in it. */
-.block-panels .block-panel-title {
-  font-size: var(--type-headline-small-size);
-  line-height: var(--type-headline-small-line-height);
-  font-weight: var(--type-headline-small-weight);
-  letter-spacing: var(--type-headline-small-tracking);
+  .block-panels .block-panel-title {
+    font-size: var(--type-headline-small-size);
+    line-height: var(--type-headline-small-line-height);
+    font-weight: var(--type-headline-small-weight);
+    letter-spacing: var(--type-headline-small-tracking);
+  }
 }
 @media (width >= theme(--breakpoint-medium)) {
   .block-panels > .block-panel {