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

package/DS1/1-root/one.semantic.css

@@ -1,735 +0,0 @@
-/* DS1 — version 0.3.0-alpha.27 */
-/* A classless stylesheet for native HTML. No JavaScript is required. */
-
-/* It draws on Design system 1's measures: the 20px square, 14px type on
-   one-square lines, a 16px control height, 4px corners on buttons, fields and
-   pictures, and hairlines that take no room. Lengths follow --sf, the device
-   scale, when a page sets it. It names Design system 1's typefaces and loads
-   none: one.css, Sync 1's fonts export or
-   https://designsystem1.com/resources/fonts.css bring the faces. */
-
-/* Root
-   Global color, type, spacing, and component tokens.
-   The workbench edits these values without changing semantic markup.
-   Lengths are unscaled here; each rule multiplies them by --sf. */
-
-:root {
-  color-scheme: light dark;
-
-  --one-color-white:   #ffffff;
-  --one-color-black:   #2a2a2a;
-  --one-color-slate:   #1e1e1e;
-  --one-color-slate-light:   #e6e6e6;
-  --one-color-slate-dark:   #3c3c3c;
-  --one-color-muted:   #797979;
-  --one-color-focus:   #594dff;
-  --one-color-warning:   #d92d20;
-  --one-accent-color:   #0066ff;
-  --one-button-primary-background:   var(--one-accent-color);
-  --one-button-primary-background-hover:   color-mix(in srgb, var(--one-accent-color) 88%, black);
-  --one-button-primary-border:   var(--one-accent-color);
-  --one-button-primary-text:   #f5f5f5;
-  --one-button-neutral-background:   #e3e3e3;
-  --one-button-neutral-background-hover:   #cdcdcd;
-  --one-button-neutral-border:   #767676;
-  --one-button-neutral-text:   #1e1e1e;
-  --one-button-subtle-border-hover:   #d9d9d9;
-  --one-button-subtle-text:   #303030;
-  --one-button-subtle-text-hover:   #1e1e1e;
-  --one-button-danger-background:   #ec221f;
-  --one-button-danger-background-hover:   #c00f0c;
-  --one-button-danger-border:   #c00f0c;
-  --one-button-danger-border-hover:   #900b09;
-  --one-button-danger-text:   #fee9e7;
-  --one-button-danger-subtle-background-hover:   #fdd3d0;
-  --one-button-danger-subtle-text:   #900b09;
-  --one-button-disabled-background:   #d9d9d9;
-  --one-button-disabled-border:   #b3b3b3;
-  --one-button-disabled-text:   #b3b3b3;
-  --one-icon-button-size: 16px;
-  --one-icon-button-small-size: 16px;
-  --one-icon-button-icon-size: 16px;
-  --one-icon-button-neutral-background:   #f5f5f5;
-  --one-icon-button-neutral-background-hover:   #e6e6e6;
-  --one-icon-button-neutral-border:   #d9d9d9;
-  --one-icon-button-subtle-background-hover:   #f5f5f5;
-  --one-input-background:   #ffffff;
-  --one-input-border:   #d9d9d9;
-  --one-input-text:   #1e1e1e;
-  --one-input-placeholder:   #b3b3b3;
-  --one-input-disabled-background:   #d9d9d9;
-  --one-input-disabled-border:   #b3b3b3;
-  --one-input-disabled-text:   #b3b3b3;
-  --one-input-error-border:   #900b09;
-  --one-input-description:   #757575;
-
-  --one-background: light-dark(var(--one-color-white), var(--one-color-black));
-  --one-surface: light-dark(#f4f4f2, var(--one-color-slate-dark));
-  --one-text: light-dark(var(--one-color-black), var(--one-color-white));
-  --one-text-muted: light-dark(var(--one-color-muted), var(--one-color-slate-light));
-  --one-border: light-dark(#d8d8d5, #555555);
-
-  /* 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 */
-
-  --one-font: "Inter Arrows", "GT America", "GT-America-Standard-Regular", Inter, system-ui, -apple-system, sans-serif;
-  --one-font-medium: "Inter Arrows", "GT-America-Standard-Medium", "GT America", Inter, system-ui, -apple-system, sans-serif;
-  --one-font-display: "Inter Arrows", "GT-America-Standard-Medium", "GT America", Inter, system-ui, -apple-system, sans-serif;
-  --one-font-mono: "Inter Arrows", "Iosevka", "Iosevka Extended", ui-monospace, "SF Mono", Menlo, monospace;
-
-  --one-font-size: 14px;
-  --one-font-size-small: 10px;
-  --one-font-size-code: 13px;
-  --one-heading-size: 15px;
-  --one-title-size: 17px;
-  --one-display-size: 20px;
-  --one-letter-spacing: -0.3px;
-  --one-line-height: 20px;
-  --one-control-height: 16px;
-  --one-radius: 4px;
-  --one-unit: 20px;
-  --one-page-width: calc(32 * var(--one-unit));
-
-  --one-text-padding-block: 0px;
-  --one-text-padding-inline: 0px;
-  --one-link-padding-block: 0px;
-  --one-link-padding-inline: 0px;
-  --one-button-padding-block: 0px;
-  --one-button-padding-inline: 4px;
-  --one-button-small-min-height: 16px;
-  --one-button-small-padding-block: 0px;
-  --one-button-small-padding-inline: 4px;
-  --one-input-padding-block: 0px;
-  --one-input-padding-inline: 4px;
-  --one-input-gap: 4px;
-  --one-blockquote-padding-block: 0px;
-  --one-blockquote-padding-inline: 20px;
-  --one-details-padding-block: 10px;
-  --one-details-padding-inline: 0px;
-  --one-section-padding-block: 20px;
-  --one-section-padding-inline: 20px;
-  --one-section-gap: 20px;
-  --one-table-cell-padding-block: 10px;
-  --one-table-cell-padding-inline: 10px;
-  --one-code-padding-block: 0px;
-  --one-code-padding-inline: 4px;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Reset
-   Predictable sizing while keeping browser-native behavior. */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  min-height: 100vh;
-  margin: 0;
-  background: var(--one-background);
-  color: var(--one-text);
-  font-family: var(--one-font);
-  font-size: calc(var(--one-font-size) * var(--sf, 1));
-  line-height: calc(var(--one-line-height) * var(--sf, 1));
-  letter-spacing: calc(var(--one-letter-spacing) * var(--sf, 1));
-}
-
-img,
-svg,
-video,
-canvas {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Layout
-   Header, main, and footer become centered semantic containers: a reading
-   column of 32 squares, one square from the edge of a narrower screen. */
-
-body > header,
-body > main,
-body > footer {
-  width: min(100% - 2 * var(--one-unit) * var(--sf, 1), var(--one-page-width) * var(--sf, 1));
-  margin-inline: auto;
-}
-
-body > header,
-body > footer {
-  padding-block: calc(var(--one-unit) * var(--sf, 1));
-}
-
-body > main {
-  padding-block: calc(var(--one-unit) * 2 * var(--sf, 1));
-}
-
-section + section {
-  margin-block-start: calc(var(--one-unit) * 2 * var(--sf, 1));
-}
-
-/* Typography
-   Headings and text work directly from their native elements. Every line is
-   one square; a title (h1) takes two. */
-
-:where(h1, h2, h3, h4, h5, h6, p, small) {
-  margin-block: 0;
-  padding-block: calc(var(--one-text-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-text-padding-inline) * var(--sf, 1));
-}
-
-:where(h1, h2, h3, h4, h5, h6) {
-  color: var(--one-text);
-  font-family: var(--one-font-medium);
-  font-size: calc(var(--one-font-size) * var(--sf, 1));
-  font-weight: 500;
-  line-height: calc(var(--one-line-height) * var(--sf, 1));
-}
-
-h1 {
-  font-family: var(--one-font-display);
-  font-size: calc(var(--one-display-size) * var(--sf, 1));
-  line-height: calc(var(--one-line-height) * 2 * var(--sf, 1));
-  letter-spacing: calc(-0.4px * var(--sf, 1));
-}
-
-h2 {
-  font-size: calc(var(--one-title-size) * var(--sf, 1));
-  letter-spacing: calc(-0.34px * var(--sf, 1));
-}
-
-h3 {
-  font-size: calc(var(--one-heading-size) * var(--sf, 1));
-}
-
-p + p {
-  margin-block-start: calc(var(--one-unit) * var(--sf, 1));
-}
-
-small {
-  color: var(--one-text-muted);
-  font-size: calc(var(--one-font-size-small) * var(--sf, 1));
-}
-
-:where(strong, b) {
-  font-family: var(--one-font-medium);
-  font-weight: 500;
-}
-
-a {
-  display: inline-block;
-  padding-block: calc(var(--one-link-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-link-padding-inline) * var(--sf, 1));
-  color: inherit;
-  text-decoration-color: var(--one-accent-color);
-  text-decoration-thickness: 2px;
-  text-underline-offset: calc(3px * var(--sf, 1));
-}
-
-a:hover {
-  text-decoration-thickness: 4px;
-}
-
-/* Buttons
-   A native button is the primary action. No component class is needed.
-   Neutral and other weights use the variant attribute, mirroring how
-   input uses type — variant="neutral" instead of a component class.
-   A button is one control high and hugs its label; its line is a hairline
-   drawn inside it, so it takes no room. */
-
-:where(
-  button,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
-  --one-button-line: var(--one-button-primary-border);
-
-  appearance: none;
-  min-height: calc(var(--one-control-height) * var(--sf, 1));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0 solid var(--one-button-line);
-  border-radius: calc(var(--one-radius) * var(--sf, 1));
-  padding-block: calc(var(--one-button-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-button-padding-inline) * var(--sf, 1));
-  background: var(--one-button-primary-background);
-  box-shadow: inset 0 0 0 1px var(--one-button-line);
-  color: var(--one-button-primary-text);
-  cursor: pointer;
-  font-family: var(--one-font);
-  font-size: calc(var(--one-font-size) * var(--sf, 1));
-  font-weight: 400;
-  line-height: calc(var(--one-control-height) * var(--sf, 1));
-  letter-spacing: calc(var(--one-letter-spacing) * var(--sf, 1));
-}
-
-:where(
-  button[variant="neutral"],
-  input[variant="neutral"]
-) {
-  --one-button-line: var(--one-button-neutral-border);
-
-  background: var(--one-button-neutral-background);
-  color: var(--one-button-neutral-text);
-}
-
-:where(
-  button[small],
-  input[small][type="button"],
-  input[small][type="submit"],
-  input[small][type="reset"]
-) {
-  min-height: calc(var(--one-button-small-min-height) * var(--sf, 1));
-  padding-block: calc(var(--one-button-small-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-button-small-padding-inline) * var(--sf, 1));
-}
-
-:where(
-  button[variant="subtle"],
-  input[variant="subtle"]
-) {
-  --one-button-line: transparent;
-
-  background: transparent;
-  color: var(--one-button-subtle-text);
-}
-
-:where(
-  button[variant="warning"],
-  input[variant="warning"]
-) {
-  background: var(--one-color-warning);
-  color: var(--one-color-white);
-}
-
-:where(
-  button[variant="danger"],
-  input[variant="danger"]
-) {
-  --one-button-line: var(--one-button-danger-border);
-
-  background: var(--one-button-danger-background);
-  color: var(--one-button-danger-text);
-}
-
-:where(
-  button[variant="danger-subtle"],
-  input[variant="danger-subtle"]
-) {
-  --one-button-line: transparent;
-
-  background: transparent;
-  color: var(--one-button-danger-subtle-text);
-}
-
-/* An icon alone makes a square button, one control on each side. */
-:where(button:has(> ds-icon:only-child)) {
-  width: calc(var(--one-icon-button-size) * var(--sf, 1));
-  min-width: calc(var(--one-icon-button-size) * var(--sf, 1));
-  height: calc(var(--one-icon-button-size) * var(--sf, 1));
-  min-height: calc(var(--one-icon-button-size) * var(--sf, 1));
-  flex: none;
-  padding: 0;
-}
-
-:where(button[small]:has(> ds-icon:only-child)) {
-  width: calc(var(--one-icon-button-small-size) * var(--sf, 1));
-  min-width: calc(var(--one-icon-button-small-size) * var(--sf, 1));
-  height: calc(var(--one-icon-button-small-size) * var(--sf, 1));
-  min-height: calc(var(--one-icon-button-small-size) * var(--sf, 1));
-  padding: 0;
-}
-
-:where(button:has(> ds-icon:only-child) > ds-icon) {
-  flex: none;
-}
-
-:where(button[variant="neutral"]:has(> ds-icon:only-child)) {
-  --one-button-line: var(--one-icon-button-neutral-border);
-
-  background: var(--one-icon-button-neutral-background);
-}
-
-:where(button[variant="subtle"]:has(> ds-icon:only-child)) {
-  color: var(--one-button-neutral-text);
-}
-
-:where(
-    button:not([variant]),
-    input[type="button"]:not([variant]),
-    input[type="submit"]:not([variant]),
-    input[type="reset"]:not([variant])
-  ):hover:not(:disabled) {
-  background: var(--one-button-primary-background-hover);
-}
-
-:where(
-    button[variant="neutral"],
-    input[variant="neutral"]
-  ):hover:not(:disabled) {
-  background: var(--one-button-neutral-background-hover);
-}
-
-:where(
-    button[variant="subtle"],
-    input[variant="subtle"]
-  ):hover:not(:disabled) {
-  --one-button-line: var(--one-button-subtle-border-hover);
-
-  color: var(--one-button-subtle-text-hover);
-}
-
-:where(
-    button[variant="warning"],
-    input[variant="warning"]
-  ):hover:not(:disabled) {
-  filter: brightness(0.9);
-}
-
-:where(
-    button[variant="danger"],
-    input[variant="danger"]
-  ):hover:not(:disabled) {
-  --one-button-line: var(--one-button-danger-border-hover);
-
-  background: var(--one-button-danger-background-hover);
-}
-
-:where(
-    button[variant="danger-subtle"],
-    input[variant="danger-subtle"]
-  ):hover:not(:disabled) {
-  --one-button-line: var(--one-button-danger-border-hover);
-
-  background: var(--one-button-danger-subtle-background-hover);
-}
-
-:where(
-    button[variant="neutral"]:has(> ds-icon:only-child)
-  ):hover:not(:disabled) {
-  --one-button-line: var(--one-icon-button-neutral-border);
-
-  background: var(--one-icon-button-neutral-background-hover);
-}
-
-:where(
-    button[variant="subtle"]:has(> ds-icon:only-child)
-  ):hover:not(:disabled) {
-  --one-button-line: transparent;
-
-  background: var(--one-icon-button-subtle-background-hover);
-}
-
-:where(
-  button,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-):disabled {
-  --one-button-line: var(--one-button-disabled-border);
-
-  background: var(--one-button-disabled-background);
-  color: var(--one-button-disabled-text);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-/* Forms
-   Labels, inputs, selects, and textareas use their semantic relationship.
-   A label's line and its field stand on two squares. */
-
-form {
-  display: grid;
-  gap: calc(var(--one-unit) * var(--sf, 1));
-}
-
-/* A group of fields stands on the paper, its legend a line above them. */
-fieldset {
-  display: grid;
-  gap: calc(var(--one-unit) * var(--sf, 1));
-  min-inline-size: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0 0 calc(var(--one-unit) * var(--sf, 1));
-  font-family: var(--one-font-medium);
-  font-weight: 500;
-}
-
-label {
-  display: grid;
-  gap: calc(var(--one-input-gap) * var(--sf, 1));
-  color: var(--one-text);
-  font-family: var(--one-font);
-  font-size: calc(var(--one-font-size) * var(--sf, 1));
-  font-weight: 400;
-  line-height: calc(var(--one-line-height) * var(--sf, 1));
-  letter-spacing: calc(var(--one-letter-spacing) * var(--sf, 1));
-}
-
-:where(
-  input:not(
-    [type="button"],
-    [type="submit"],
-    [type="reset"],
-    [type="checkbox"],
-    [type="radio"]
-  ),
-  select,
-  textarea
-) {
-  appearance: none;
-  width: 100%;
-  min-width: calc(var(--one-unit) * 4 * var(--sf, 1));
-  min-height: calc(var(--one-control-height) * var(--sf, 1));
-  border: 0 solid var(--one-input-border);
-  border-radius: calc(var(--one-radius) * var(--sf, 1));
-  padding-block: calc(var(--one-input-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-input-padding-inline) * var(--sf, 1));
-  background: var(--one-input-background);
-  box-shadow: inset 0 0 0 1px var(--one-input-border);
-  color: var(--one-input-text);
-  font-family: var(--one-font);
-  font-size: calc(var(--one-font-size) * var(--sf, 1));
-  font-weight: 400;
-  line-height: calc(var(--one-control-height) * var(--sf, 1));
-  letter-spacing: calc(var(--one-letter-spacing) * var(--sf, 1));
-}
-
-input[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 1px var(--one-input-error-border);
-}
-
-input:disabled {
-  background: var(--one-input-disabled-background);
-  box-shadow: inset 0 0 0 1px var(--one-input-disabled-border);
-  color: var(--one-input-disabled-text);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-label:has(input:disabled) > span {
-  color: var(--one-input-disabled-text);
-}
-
-/* A text area spans whole rows, four squares at first; its writing sits 4px
-   further in than a one-line field's. */
-textarea {
-  min-height: calc(var(--one-unit) * 4 * var(--sf, 1));
-  padding-block: calc((var(--one-input-padding-block) + 4px) * var(--sf, 1));
-  line-height: calc(var(--one-line-height) * var(--sf, 1));
-  resize: vertical;
-}
-
-::placeholder {
-  color: var(--one-input-placeholder);
-  opacity: 1;
-}
-
-:where(input, select, textarea, button):focus-visible {
-  outline: 2px solid var(--one-color-focus);
-  outline-offset: 1px;
-}
-
-/* Sections
-   A semantic section is the default content surface: square corners, a
-   hairline and a square of room inside. */
-
-section {
-  display: grid;
-  gap: calc(var(--one-section-gap) * var(--sf, 1));
-  border: 0;
-  border-radius: 0;
-  padding-block: calc(var(--one-section-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-section-padding-inline) * var(--sf, 1));
-  background: var(--one-background);
-  box-shadow: inset 0 0 0 1px var(--one-border);
-  color: var(--one-text);
-}
-
-section > header,
-section > footer {
-  padding: 0;
-  background: transparent;
-}
-
-blockquote {
-  margin-block: 0;
-  margin-inline: 0;
-  border: 0;
-  padding-block: calc(var(--one-blockquote-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-blockquote-padding-inline) * var(--sf, 1));
-  box-shadow: inset 1px 0 var(--one-accent-color);
-  color: var(--one-text-muted);
-}
-
-details {
-  border: 0;
-  padding-block: calc(var(--one-details-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-details-padding-inline) * var(--sf, 1));
-  box-shadow: inset 0 1px var(--one-border), inset 0 -1px var(--one-border);
-}
-
-summary {
-  cursor: pointer;
-  font-family: var(--one-font-medium);
-}
-
-dialog {
-  max-width: min(calc(var(--one-unit) * 20 * var(--sf, 1)), 100% - 2 * var(--one-unit) * var(--sf, 1));
-  border: 0;
-  border-radius: 0;
-  padding: calc(var(--one-unit) * var(--sf, 1));
-  background: var(--one-background);
-  box-shadow: inset 0 0 0 1px var(--one-border);
-  color: var(--one-text);
-}
-
-dialog::backdrop {
-  background: rgb(0 0 0 / 50%);
-}
-
-/* Tables
-   Native table structure receives readable defaults: a row is two squares,
-   ruled by a hairline under it. */
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-variant-numeric: tabular-nums;
-}
-
-:where(th, td) {
-  border: 0;
-  padding-block: calc(var(--one-table-cell-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-table-cell-padding-inline) * var(--sf, 1));
-  box-shadow: inset 0 -1px var(--one-border);
-  text-align: start;
-}
-
-th {
-  font-family: var(--one-font-medium);
-  font-weight: 500;
-}
-
-tbody tr:hover {
-  background: var(--one-surface);
-}
-
-/* Code
-   Inline and block code share the same monospace language, at 13 on the
-   same one-square lines. */
-
-:where(code, kbd, samp, pre) {
-  font-family: var(--one-font-mono);
-  font-size: calc(var(--one-font-size-code) * var(--sf, 1));
-  line-height: calc(var(--one-line-height) * var(--sf, 1));
-  letter-spacing: 0;
-}
-
-:where(code, kbd) {
-  padding-block: calc(var(--one-code-padding-block) * var(--sf, 1));
-  padding-inline: calc(var(--one-code-padding-inline) * var(--sf, 1));
-  border-radius: calc(var(--one-radius) * var(--sf, 1));
-  background: var(--one-surface);
-}
-
-pre {
-  overflow: auto;
-  margin-block: 0;
-  padding: calc(var(--one-unit) * var(--sf, 1));
-  border-radius: calc(var(--one-radius) * var(--sf, 1));
-  background: var(--one-color-slate);
-  color: var(--one-color-white);
-}
-
-pre code {
-  padding: 0;
-  background: transparent;
-  font-size: inherit;
-}
-
-/* Feedback
-   Native progress and horizontal rules inherit the theme. A rule is a
-   hairline that takes no room. */
-
-hr {
-  height: 0;
-  border: 0;
-  box-shadow: 0 1px var(--one-border);
-}
-
-progress {
-  width: 100%;
-  accent-color: var(--one-accent-color);
-}
-
-/* Motion
-   Respect reduced-motion preferences. */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}