@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/1-root/palette.css

@@ -0,0 +1,58 @@
+/* Design system 1's named colours as tokens: --one-<colour> and --one-<colour>-pastel,
+   each light-dark(light, dark), and the named pastels (--one-zenith-blue,
+   --one-comfortable-green). light-dark() follows the page's color-scheme, which
+   one.css sets. Written by scripts/write-palette-css.ts from palette.ts; never edit it
+   by hand. */
+
+:root {
+  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */
+  --one-red-for-blood: light-dark(#de0331, #9c374c);
+  --one-red-for-blood-pastel: light-dark(#fecdd7, #4b1b25);
+  --one-dark-red-variant: light-dark(#c50124, #d20126);
+  --one-dark-red-variant-pastel: light-dark(#ffccd5, #4c1a23);
+  --one-tuned-red: light-dark(#ff5f5f, #9d3636);
+  --one-tuned-red-pastel: light-dark(#ffcccc, #4c1a1a);
+  --one-signal-red: light-dark(#ff4438, #9d3c36);
+  --one-signal-red-pastel: light-dark(#ffcfcc, #4c1d1a);
+  --one-sand: light-dark(#dbc88f, #84774f);
+  --one-sand-pastel: light-dark(#f3ecd8, #403926);
+  --one-orange: light-dark(#fec20d, #9d8336);
+  --one-orange-pastel: light-dark(#fff2cc, #4c3f1a);
+  --one-old-gold: light-dark(#b69e55, #7e7455);
+  --one-old-gold-pastel: light-dark(#f0ebdb, #3d3829);
+  --one-drip-yellow: light-dark(#fde70c, #9c9337);
+  --one-drip-yellow-pastel: light-dark(#fffacc, #4c471a);
+  --one-every-green: light-dark(#979441, #7e7d55);
+  --one-every-green-pastel: light-dark(#f0efdb, #3d3c29);
+  --one-yellow: light-dark(#eaff00, #959d36);
+  --one-yellow-pastel: light-dark(#fbffcc, #484c1a);
+  --one-chartreuse: light-dark(#ccff4d, #809d36);
+  --one-chartreuse-pastel: light-dark(#f2ffcf, #3e4c1a);
+  --one-comfortable-green: var(--one-chartreuse-pastel);
+  --one-apple-green: light-dark(#99ff73, #529d36);
+  --one-apple-green-pastel: light-dark(#daffcc, #284c1a);
+  --one-metal-green: light-dark(#026d5b, #04cfad);
+  --one-metal-green-pastel: light-dark(#cdfef6, #1b4b43);
+  --one-hysteric-blue: light-dark(#69d8fb, #39839b);
+  --one-hysteric-blue-pastel: light-dark(#cdf2fe, #1b3f4b);
+  --one-winning-blue: light-dark(#0275fa, #37669c);
+  --one-winning-blue-pastel: light-dark(#cce4ff, #1a314c);
+  --one-sharp-blue: light-dark(#594dff, #3d369d);
+  --one-sharp-blue-pastel: light-dark(#ccccff, #1d1a4c);
+  --one-zenith-blue: var(--one-sharp-blue-pastel);
+  --one-purple: light-dark(#e63aaf, #924178);
+  --one-purple-pastel: light-dark(#f9d2ed, #46203a);
+  --one-pink: light-dark(#f5aad1, #92416b);
+  --one-pink-pastel: light-dark(#fad1e6, #471f34);
+  --one-white: light-dark(#ffffff, #1f1f1f);
+  --one-egg: light-dark(#f9f6ef, #392e15);
+  --one-light-grey: light-dark(#e8e8e8, #303030);
+  --one-slate-light: light-dark(#e6e6e6, #323232);
+  --one-darker-grey: light-dark(#797979, #848484);
+  --one-stealth: light-dark(#554455, #b09cb0);
+  --one-slate-dark: light-dark(#3c3c3c, #b3b3b3);
+  --one-ink: light-dark(#2c2c2b, #c0c0bf);
+  --one-black: light-dark(#2a2a2a, #c0c0c0);
+  --one-slate: light-dark(#1e1e1e, #cacaca);
+  /* Palette: end */
+}

package/DS1/1-root/palette.ts

@@ -89,3 +89,22 @@ export function paletteCss(): string {
   lines.push(paletteEnd);
   return lines.join('\n');
 }
+
+/**
+ * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
+ */
+export function paletteSheet(): string {
+  return [
+    '/* Design system 1\'s named colours as tokens: --one-<colour> and --one-<colour>-pastel,',
+    '   each light-dark(light, dark), and the named pastels (--one-zenith-blue,',
+    '   --one-comfortable-green). light-dark() follows the page\'s color-scheme, which',
+    '   one.css sets. Written by scripts/write-palette-css.ts from palette.ts; never edit it',
+    '   by hand. */',
+    '',
+    ':root {',
+    paletteCss(),
+    '}',
+    '',
+  ].join('\n');
+}

package/DS1/1-root/progress.css

@@ -0,0 +1,356 @@
+@import "./component-metrics.css";
+
+/*
+ * Progress, as plain classes on native elements: a value against its range,
+ * a sequence of steps, or a dot for each page. The `ds-progress` element
+ * draws the same parts; controls.css imports this file.
+ *
+ * Everything sits on the paper with no box, every line is one square and
+ * widths come in whole squares. Colour is kept for a state: the danger colour
+ * for a value that is over or a step that failed, the ink for the current
+ * step and the current dot.
+ *
+ * A value against its range, one square high (HTML's <progress>):
+ *
+ *   ds-progress              the row; role="meter" with aria-valuenow, -min, -max and -valuetext
+ *   ds-progress__fill        the bar, half a square high, drawn to --ds-progress-value (0 to 1)
+ *   ds-progress--squares     the range in squares instead, each one square
+ *   ds-progress__square      one square of the range; --on when it is filled
+ *   ds-progress--over        past the end: filled whole in the danger colour
+ *
+ * Tokens: `--ds-progress-value`, `--ds-progress-color` (the ink by default)
+ * and `--ds-progress-track` (the grey fill).
+ *
+ * A sequence of steps, one square high, each step on whole squares:
+ *
+ *   ds-progress--steps       with ds-progress, on an <ol>; the steps on one row, joined by a line
+ *   ds-progress--vertical    one step to a row, each with room for its body under it
+ *   ds-progress__step        an <li>; aria-current="step" on the current one
+ *   ds-progress__step--done, --current, --failed    states; upcoming without one
+ *   ds-progress__link        a step that goes somewhere: an <a href> around its mark and label
+ *   ds-progress__mark        the number (or the done or failed icon), one control high
+ *   ds-progress__label       the step's name on one line
+ *   ds-progress__state       the state in words for assistive technology, hidden ("Done")
+ *   ds-progress__body        what belongs under a step in a vertical sequence
+ *
+ * A dot for each page, one square each:
+ *
+ *   ds-progress--dots        with ds-progress, a group of dots (role="group")
+ *   ds-progress__dot         a button; `data-state` is `past`, `current` (with
+ *                            `aria-current="true"`), `next`, `future`, or `end` for a
+ *                            last dot marked as an end
+ *
+ * Tokens: the dot colours `--ds-progress-dot-past` and `-future` (the muted
+ * text colour by default), `-current`, `-next` and `-end` (the text colour),
+ * set on the dots or any element around them. Past, current and next dots are
+ * filled; future dots and the end marker are rings.
+ */
+
+/* ---- A value against its range: the bar, or the range in squares ---- */
+
+.ds-progress {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--ds-unit);
+  margin: 0;
+}
+
+/* The range and its bar are a band half a square high across the middle of
+   the row, as a chart's ratio is drawn. */
+.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before,
+.ds-progress__fill {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(var(--ds-unit) / 4);
+  height: calc(var(--ds-unit) / 2);
+}
+
+.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before {
+  content: "";
+  background: var(--ds-progress-track, var(--ds-fill));
+}
+
+.ds-progress__fill {
+  display: block;
+  background: var(--ds-progress-color, var(--ds-text-color));
+  transform: scaleX(var(--ds-progress-value, 0));
+  transform-origin: left center;
+  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ds-progress__fill:dir(rtl) {
+  transform-origin: right center;
+}
+
+.ds-progress--over .ds-progress__fill {
+  background: var(--ds-danger-color);
+  transform: none;
+}
+
+.ds-progress--squares {
+  display: flex;
+  width: max-content;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.ds-progress__square {
+  flex: none;
+  width: calc(var(--ds-unit) - 1px);
+  height: calc(var(--ds-unit) - 1px);
+  margin-inline-end: 1px;
+  background: var(--ds-progress-track, var(--ds-fill));
+}
+
+.ds-progress__square--on {
+  background: var(--ds-progress-color, var(--ds-text-color));
+}
+
+.ds-progress--over .ds-progress__square {
+  background: var(--ds-danger-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-progress__fill {
+    transition: none;
+  }
+}
+
+/* ---- A sequence of steps --------------------------------------------- */
+
+.ds-progress--steps {
+  box-sizing: border-box;
+  position: static;
+  display: flex;
+  width: auto;
+  height: auto;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  text-transform: none;
+}
+
+/* Each step rounds its width up to whole squares where the browser can size
+   to content in calc; elsewhere it hugs its words. */
+.ds-progress__step {
+  --ds-progress-mark: transparent;
+  --ds-progress-mark-ink: var(--ds-text-color-muted);
+  --ds-progress-mark-line: var(--ds-border-color);
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  width: max-content;
+  width: calc-size(max-content, round(up, size, var(--ds-unit)));
+  min-height: var(--ds-unit);
+  margin: 0;
+  color: var(--ds-text-color-muted);
+}
+
+/* A line joins a step to the next: at least one square, across whatever the
+   step's rounding leaves, a quarter of a square short of each end. */
+.ds-progress__step:not(:last-child)::after {
+  content: "";
+  flex: 1 0 var(--ds-unit);
+  height: var(--ds-unit);
+  background: linear-gradient(var(--ds-border-color), var(--ds-border-color)) center / calc(100% - var(--ds-unit) / 2) 1px no-repeat;
+}
+
+.ds-progress__step--done {
+  --ds-progress-mark: var(--ds-fill);
+  --ds-progress-mark-ink: var(--ds-text-color);
+  --ds-progress-mark-line: transparent;
+  color: var(--ds-text-color);
+}
+
+.ds-progress__step--current {
+  --ds-progress-mark: var(--ds-text-color);
+  --ds-progress-mark-ink: var(--ds-paper);
+  --ds-progress-mark-line: transparent;
+  color: var(--ds-text-color);
+}
+
+.ds-progress__step--failed {
+  --ds-progress-mark: var(--ds-danger-color);
+  --ds-progress-mark-ink: light-dark(var(--ds-white), var(--ds-black));
+  --ds-progress-mark-line: transparent;
+  color: var(--ds-danger-color);
+}
+
+.ds-progress__link {
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--ds-radius);
+}
+
+.ds-progress__link:hover .ds-progress__label {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: calc(3px * var(--ds-sf, 1));
+}
+
+.ds-progress__link:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -2px;
+}
+
+.ds-progress__mark {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
+  overflow: hidden;
+  background: var(--ds-progress-mark);
+  box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);
+  color: var(--ds-progress-mark-ink);
+  --ds-icon-color: var(--ds-progress-mark-ink);
+  font-family: var(--ds-typeface-medium);
+  font-size: var(--ds-type-size-small);
+  font-weight: var(--ds-type-weight-bold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--ds-control-height);
+  letter-spacing: 0;
+}
+
+.ds-progress__label {
+  min-width: 0;
+  padding-inline-end: calc(4px * var(--ds-sf, 1));
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ds-progress__step--current .ds-progress__label {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+.ds-progress__state {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.ds-progress--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.ds-progress--vertical .ds-progress__step {
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.ds-progress--vertical .ds-progress__step::after {
+  content: none;
+}
+
+/* Its content stands in a column, so an inline element in it (text drawn by
+   an element, say) takes its own lines rather than a line box's descent. */
+.ds-progress__body {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 100%;
+  min-width: 0;
+  padding-inline-start: var(--ds-unit);
+  color: var(--ds-text-color);
+}
+
+/* ---- A dot for each page ------------------------------------------- */
+
+.ds-progress--dots {
+  position: static;
+  display: inline-flex;
+  width: auto;
+  flex: none;
+  align-items: center;
+  height: var(--ds-row-height);
+  margin: 0;
+  padding: 0;
+}
+
+.ds-progress__dot {
+  --ds-progress-dot-color: var(--ds-progress-dot-future, var(--ds-text-color-muted));
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-unit);
+  height: var(--ds-unit);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* The dot itself: 4px, scaled with the surface, a fifth of the square. */
+.ds-progress__dot::before {
+  content: "";
+  box-sizing: border-box;
+  width: calc(4px * var(--ds-sf, 1));
+  height: calc(4px * var(--ds-sf, 1));
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--ds-progress-dot-color);
+  transition: transform 160ms ease-out;
+}
+
+.ds-progress__dot[data-state="past"] { --ds-progress-dot-color: var(--ds-progress-dot-past, var(--ds-text-color-muted)); }
+.ds-progress__dot[data-state="next"] { --ds-progress-dot-color: var(--ds-progress-dot-next, var(--ds-text-color)); }
+.ds-progress__dot[data-state="end"] { --ds-progress-dot-color: var(--ds-progress-dot-end, var(--ds-text-color)); }
+.ds-progress__dot[aria-current="true"] { --ds-progress-dot-color: var(--ds-progress-dot-current, var(--ds-text-color)); }
+
+.ds-progress__dot:is([data-state="past"], [data-state="next"], [aria-current="true"])::before {
+  background: var(--ds-progress-dot-color);
+}
+
+/* The current dot is half again as large. */
+.ds-progress__dot[aria-current="true"]::before {
+  transform: scale(1.5);
+}
+
+.ds-progress__dot:hover:not([aria-current="true"])::before {
+  transform: scale(1.25);
+}
+
+.ds-progress__dot:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-progress__dot::before {
+    transition: none;
+  }
+}

package/DS1/1-root/prose.css

@@ -0,0 +1,202 @@
+@import "./component-metrics.css";
+
+/*
+ * Prose: long-form and marketing writing on the grid.
+ *
+ * Mark the element that holds the writing with `data-ds-prose`. Its headings,
+ * paragraphs, lists, links, quotes, code, rules and simple tables stay native
+ * elements and take Design system 1's type: every line is one square, one
+ * square stands between two blocks and two before a heading, and a title (h1)
+ * takes two squares. These count as Design system 1's styles.
+ *
+ * Nothing outside a marked element is touched: no rule here reaches the page,
+ * its body or its controls. Mark a part inside the writing that draws itself
+ * (an example, a widget) with `data-ds-not-prose` to leave its contents out.
+ *
+ * Every rule is one attribute strong ([data-ds-prose] with :where()), so one
+ * class in a page's own stylesheet overrides it. The sheet reads the component
+ * tokens (component-tokens.css) and the faces the page loads, as controls.css
+ * does; it imports no fonts of its own.
+ *
+ *   h1                          20 on two squares, medium
+ *   h2, h3                      17 and 15 on one square, medium
+ *   h4, h5, h6, p, li, td, th   14 on one square
+ *   code, pre                   13 in the code face, on one square
+ *   small                       10
+ */
+
+[data-ds-prose] {
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  overflow-wrap: break-word;
+}
+
+/* Blocks start flush; the spacing below puts them on the grid. */
+[data-ds-prose] :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, pre, table, figure, hr, details):not(:where([data-ds-not-prose] *)) {
+  margin-block: 0;
+}
+
+[data-ds-prose] :where(p, li, dt, dd, td, th, blockquote, summary, figcaption):not(:where([data-ds-not-prose] *)) {
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-unit);
+}
+
+/* One square between two blocks, two before a heading. */
+[data-ds-prose] :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr)) + :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr, [data-ds-not-prose] *)) {
+  margin-top: var(--ds-unit);
+}
+
+[data-ds-prose] :where(:not(h1, h2, h3, h4, h5, h6)) + :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {
+  margin-top: calc(2 * var(--ds-unit));
+}
+
+/* Headings */
+
+[data-ds-prose] :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-medium);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-bold);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+[data-ds-prose] :where(h1):not(:where([data-ds-not-prose] *)) {
+  font-size: var(--ds-type-size-display);
+  line-height: calc(2 * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
+}
+
+[data-ds-prose] :where(h2):not(:where([data-ds-not-prose] *)) {
+  font-size: calc(var(--ds-prose-h2-size, 17px) * var(--ds-sf, 1));
+  letter-spacing: calc(var(--ds-prose-h2-tracking, -0.34px) * var(--ds-sf, 1));
+}
+
+[data-ds-prose] :where(h3):not(:where([data-ds-not-prose] *)) {
+  font-size: calc(var(--ds-prose-h3-size, 15px) * var(--ds-sf, 1));
+}
+
+/* Lists: items stand edge to edge, indented one square. */
+
+[data-ds-prose] :where(ul, ol):not(:where([data-ds-not-prose] *)) {
+  padding-inline-start: var(--ds-unit);
+}
+
+[data-ds-prose] :where(li + li, li > ul, li > ol, dt + dt, dt + dd, dd + dd):not(:where([data-ds-not-prose] *)) {
+  margin-top: 0;
+}
+
+[data-ds-prose] :where(dt):not(:where([data-ds-not-prose] *)) {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+[data-ds-prose] :where(dd):not(:where([data-ds-not-prose] *)) {
+  margin-inline-start: var(--ds-unit);
+}
+
+/* Words */
+
+[data-ds-prose] :where(a):not(:where([data-ds-not-prose] *)) {
+  color: inherit;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: calc(3px * var(--ds-sf, 1));
+}
+
+[data-ds-prose] :where(a:focus-visible):not(:where([data-ds-not-prose] *)) {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+[data-ds-prose] :where(strong, b, th):not(:where([data-ds-not-prose] *)) {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+[data-ds-prose] :where(small):not(:where([data-ds-not-prose] *)) {
+  font-size: var(--ds-type-size-small);
+}
+
+[data-ds-prose] :where(blockquote):not(:where([data-ds-not-prose] *)) {
+  margin-inline: 0;
+  padding-inline-start: var(--ds-unit);
+  border: 0;
+  box-shadow: inset 1px 0 var(--ds-text-color-muted);
+}
+
+/* Code: thirteen on the same one-square lines, in the code face. */
+
+[data-ds-prose] :where(code, kbd, samp, pre):not(:where([data-ds-not-prose] *)) {
+  font-family: var(--ds-typeface-mono);
+  font-size: calc(var(--ds-code-text-size, 13px) * var(--ds-sf, 1));
+  line-height: var(--ds-unit);
+  letter-spacing: 0;
+}
+
+[data-ds-prose] :where(:not(pre) > code, kbd, samp):not(:where([data-ds-not-prose] *)) {
+  margin: 0;
+  padding: 0 calc(4px * var(--ds-sf, 1));
+  border-radius: var(--ds-radius);
+  background: var(--ds-fill);
+}
+
+/* A block of code: a square of room around it, its frame a hairline. */
+[data-ds-prose] :where(pre):not(:where([data-ds-not-prose] *)) {
+  overflow-x: auto;
+  padding: var(--ds-unit);
+  border: 0;
+  border-radius: var(--ds-radius);
+  box-shadow: inset 0 0 0 1px var(--ds-border-color);
+  background: transparent;
+  color: inherit;
+}
+
+[data-ds-prose] :where(pre > code):not(:where([data-ds-not-prose] *)) {
+  padding: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* A rule takes no room: it is a hairline under the space above it. */
+[data-ds-prose] :where(hr):not(:where([data-ds-not-prose] *)) {
+  height: 0;
+  margin-inline: 0;
+  border: 0;
+  box-shadow: 0 1px var(--ds-border-color);
+}
+
+/* A table's row is two squares, ruled by a hairline under it. A wide table
+   scrolls on its own rather than widening the page. */
+[data-ds-prose] :where(table):not(:where([data-ds-not-prose] *)) {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border-radius: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-ds-prose] :where(th, td):not(:where([data-ds-not-prose] *)) {
+  padding: calc(var(--ds-unit) / 2);
+  border: 0;
+  box-shadow: inset 0 -1px var(--ds-border-color);
+  text-align: start;
+  vertical-align: top;
+}
+
+[data-ds-prose] :where(img, video):not(:where([data-ds-not-prose] *)) {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ds-radius);
+}
+
+[data-ds-prose] :where(figcaption):not(:where([data-ds-not-prose] *)) {
+  color: var(--ds-text-color-muted);
+}