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

package/DS1/0-face/translations/sv.json

@@ -17,6 +17,10 @@
     "Email": "E-post",
     "Password": "Lösenord",
     "Nothing here yet": "Inget här än",
+    "Loading": "Läser in",
+    "{value} of {max}": "{value} av {max}",
+    "{value} of {max}, over by {over}": "{value} av {max}, {over} för mycket",
+    "Failed": "Misslyckades",
     "Today": "I dag",
     "Yesterday": "I går",
     "Tomorrow": "I morgon",
@@ -25,6 +29,7 @@
     "Theme": "Tema",
     "Light": "Ljust",
     "Dark": "Mörkt",
+    "System": "System",
     "Note": "Anteckning",
     "Page": "Sida",
     "Red": "Röd",
@@ -58,6 +63,60 @@
     "Swedish": "Svenska",
     "Chinese": "Kinesiska",
     "Show password": "Visa lösenord",
-    "Hide password": "Dölj lösenord"
+    "Hide password": "Dölj lösenord",
+    "OK": "OK",
+    "Copied": "Kopierat",
+    "Could not copy": "Kunde inte kopiera",
+    "Notifications": "Aviseringar",
+    "Try again": "Försök igen",
+    "Undo": "Ångra",
+    "Redo": "Gör om",
+    "Copy": "Kopiera",
+    "Copy link": "Kopiera länk",
+    "Remove": "Ta bort",
+    "Rename": "Byt namn",
+    "Duplicate": "Duplicera",
+    "Download": "Hämta",
+    "Refresh": "Uppdatera",
+    "Open": "Öppna",
+    "Send": "Skicka",
+    "Clear": "Rensa",
+    "Saved": "Sparat",
+    "Saving…": "Sparar…",
+    "Untitled": "Namnlös",
+    "Account": "Konto",
+    "Carousel": "Karusell",
+    "Slide": "Bild",
+    "Slides": "Bilder",
+    "Slide {index}": "Bild {index}",
+    "{index} of {count}": "{index} av {count}",
+    "Previous slide": "Föregående bild",
+    "Next slide": "Nästa bild",
+    "Pause": "Pausa",
+    "Play": "Spela upp",
+    "Menu": "Meny",
+    "Contents": "Innehåll",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Skift",
+    "key.alt": "Alt",
+    "key.enter": "Retur",
+    "key.escape": "Esc",
+    "key.tab": "Tabb",
+    "key.space": "Blanksteg",
+    "key.backspace": "Backsteg",
+    "key.delete": "Delete",
+    "key.home": "Home",
+    "key.end": "End",
+    "key.pageup": "Page Up",
+    "key.pagedown": "Page Down",
+    "Previous month": "Föregående månad",
+    "Next month": "Nästa månad",
+    "Choose a date": "Välj ett datum",
+    "Date": "Datum",
+    "W{week}": "V{week}",
+    "Total": "Totalt",
+    "End date": "Slutdatum",
+    "Include time": "Inkludera tid",
+    "Time": "Tid"
   }
 }

package/DS1/0-face/translations/zh.json

@@ -17,6 +17,10 @@
     "Email": "邮箱",
     "Password": "密码",
     "Nothing here yet": "这里还没有内容",
+    "Loading": "正在加载",
+    "{value} of {max}": "{value}/{max}",
+    "{value} of {max}, over by {over}": "{value}/{max}，超出 {over}",
+    "Failed": "失败",
     "Today": "今天",
     "Yesterday": "昨天",
     "Tomorrow": "明天",
@@ -25,6 +29,7 @@
     "Theme": "主题",
     "Light": "浅色",
     "Dark": "深色",
+    "System": "跟随系统",
     "Note": "笔记",
     "Page": "页面",
     "Red": "红色",
@@ -58,6 +63,60 @@
     "Swedish": "瑞典语",
     "Chinese": "中文",
     "Show password": "显示密码",
-    "Hide password": "隐藏密码"
+    "Hide password": "隐藏密码",
+    "OK": "确定",
+    "Copied": "已复制",
+    "Could not copy": "无法复制",
+    "Notifications": "通知",
+    "Try again": "重试",
+    "Undo": "撤销",
+    "Redo": "重做",
+    "Copy": "复制",
+    "Copy link": "复制链接",
+    "Remove": "移除",
+    "Rename": "重命名",
+    "Duplicate": "创建副本",
+    "Download": "下载",
+    "Refresh": "刷新",
+    "Open": "打开",
+    "Send": "发送",
+    "Clear": "清除",
+    "Saved": "已保存",
+    "Saving…": "正在保存…",
+    "Untitled": "未命名",
+    "Account": "账户",
+    "Carousel": "轮播",
+    "Slide": "幻灯片",
+    "Slides": "幻灯片",
+    "Slide {index}": "幻灯片 {index}",
+    "{index} of {count}": "第 {index} 张，共 {count} 张",
+    "Previous slide": "上一张",
+    "Next slide": "下一张",
+    "Pause": "暂停",
+    "Play": "播放",
+    "Menu": "菜单",
+    "Contents": "目录",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Shift",
+    "key.alt": "Alt",
+    "key.enter": "Enter",
+    "key.escape": "Esc",
+    "key.tab": "Tab",
+    "key.space": "空格",
+    "key.backspace": "Backspace",
+    "key.delete": "Delete",
+    "key.home": "Home",
+    "key.end": "End",
+    "key.pageup": "Page Up",
+    "key.pagedown": "Page Down",
+    "Previous month": "上个月",
+    "Next month": "下个月",
+    "Choose a date": "选择日期",
+    "Date": "日期",
+    "W{week}": "第{week}周",
+    "Total": "合计",
+    "End date": "结束日期",
+    "Include time": "包含时间",
+    "Time": "时间"
   }
 }

package/DS1/0-face/translations-format.ts

@@ -1,12 +1,11 @@
 /**
- * The one translations file format every 0001 product writes its words in.
+ * The one translations file format every product writes its words in.
  *
  *   { "<language>": { "<key>": "<text>" } }
  *
  * - `<language>` is a code from the language list (`da`, `pt-BR`).
- * - `<key>` is any string. Ezo, the 0001 site and Peer key by the English
- *   sentence (`"Send": "Send"`); Link and Consistency key by a dotted id
- *   (`"settings.language": "Language"`). Both are the same format.
+ * - `<key>` is any string: the English sentence (`"Send": "Send"`) or a
+ *   dotted id (`"settings.language": "Language"`). Both are the same format.
  * - English (`en`) is the fallback table. When a key is missing from `en`
  *   too, the key itself is the English text, so a sentence key needs no
  *   English entry and an id key needs one.

package/DS1/1-root/card.css

@@ -0,0 +1,192 @@
+@import "./component-metrics.css";
+
+/*
+ * A card, as plain classes on native elements.
+ *
+ * A card holds one thing on a fill of its own: its name in the muted ink on
+ * one square, a title in the display size on lines of a square and a half, writing,
+ * and a picture of it (`ds-card__media`) a square below, which can run off
+ * the card's foot and end edge and be cut there, never framed. Its size is
+ * given in whole squares, its padding one square, its corners a card's
+ * (`--ds-radius-card`). A card that opens something is one press target, an
+ * `<a class="ds-card" href>`: the pointer tints it, keyboard focus rings it
+ * 2px inside and its picture rises a little. Ordinary writing still sits
+ * straight on the paper; a card is for a thing shown among others, as in a
+ * slide. The `ds-card` element draws the same parts.
+ *
+ *   ds-card                      the card; `data-tone` names a palette colour
+ *                                for its fill (the colour's pastel, dim in dark
+ *                                mode, from palette.css, which one.css imports),
+ *                                `ink` for the ink with the paper's words
+ *   ds-card--outlined            a 1px line and no fill
+ *   ds-card__label               its name, muted, on one square
+ *   ds-card__title               the title, display size, a square and a half a line
+ *   ds-card__body                writing, one square a line
+ *   ds-card__media               the picture, a square below the words
+ *   ds-card__media--center       standing in the card's middle
+ *   ds-card__media--bleed        running on past the padding to the end edge
+ *
+ * Tokens: `--ds-card-width` and `--ds-card-height` (whole squares; the
+ * content's size by default), `--ds-card-padding` (one square), and
+ * `--ds-card-fill`, `--ds-card-ink` and `--ds-card-muted`.
+ */
+
+.ds-card {
+  --ds-card-fill: var(--ds-fill);
+  --ds-card-ink: var(--ds-text-color);
+  --ds-card-muted: var(--ds-text-color-muted);
+  --ds-card-padding: var(--ds-unit);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: var(--ds-card-width, auto);
+  height: var(--ds-card-height, auto);
+  min-width: 0;
+  margin: 0;
+  padding: var(--ds-card-padding) var(--ds-card-padding) 0;
+  overflow: hidden;
+  border-radius: var(--ds-radius-card);
+  background: var(--ds-card-fill);
+  color: var(--ds-card-ink);
+  font-family: var(--ds-typeface-regular);
+  font-size: var(--ds-type-size-default);
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-card[hidden] {
+  display: none;
+}
+
+.ds-card--outlined {
+  --ds-card-fill: transparent;
+  box-shadow: inset 0 0 0 1px var(--ds-border-color);
+}
+
+.ds-card[data-tone="apple-green"] { --ds-card-fill: var(--one-apple-green-pastel); }
+.ds-card[data-tone="chartreuse"] { --ds-card-fill: var(--one-chartreuse-pastel); }
+.ds-card[data-tone="every-green"] { --ds-card-fill: var(--one-every-green-pastel); }
+.ds-card[data-tone="yellow"] { --ds-card-fill: var(--one-yellow-pastel); }
+.ds-card[data-tone="orange"] { --ds-card-fill: var(--one-orange-pastel); }
+.ds-card[data-tone="tuned-red"] { --ds-card-fill: var(--one-tuned-red-pastel); }
+.ds-card[data-tone="pink"] { --ds-card-fill: var(--one-pink-pastel); }
+.ds-card[data-tone="sharp-blue"] { --ds-card-fill: var(--one-sharp-blue-pastel); }
+.ds-card[data-tone="winning-blue"] { --ds-card-fill: var(--one-winning-blue-pastel); }
+.ds-card[data-tone="hysteric-blue"] { --ds-card-fill: var(--one-hysteric-blue-pastel); }
+.ds-card[data-tone="purple"] { --ds-card-fill: var(--one-purple-pastel); }
+.ds-card[data-tone="metal-green"] { --ds-card-fill: var(--one-metal-green-pastel); }
+.ds-card[data-tone="drip-yellow"] { --ds-card-fill: var(--one-drip-yellow-pastel); }
+.ds-card[data-tone="sand"] { --ds-card-fill: var(--one-sand-pastel); }
+.ds-card[data-tone="old-gold"] { --ds-card-fill: var(--one-old-gold-pastel); }
+.ds-card[data-tone="red-for-blood"] { --ds-card-fill: var(--one-red-for-blood-pastel); }
+.ds-card[data-tone="dark-red-variant"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }
+.ds-card[data-tone="signal-red"] { --ds-card-fill: var(--one-signal-red-pastel); }
+.ds-card[data-tone="ink"] {
+  --ds-card-fill: var(--ds-black);
+  --ds-card-ink: var(--ds-white);
+  --ds-card-muted: color-mix(in srgb, var(--ds-white) 60%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-white) 8%, transparent);
+}
+
+/* Words: each line on the lower sixteen of its square. They keep their room
+   in a card of a set height; only the picture is cut at the foot. */
+.ds-card__label,
+.ds-card__title,
+.ds-card__body {
+  flex: none;
+}
+
+.ds-card__label {
+  margin: 0;
+  padding-top: calc(4px * var(--ds-sf, 1));
+  color: var(--ds-card-muted);
+  font: inherit;
+  line-height: var(--ds-type-lineheight-default, calc(16px * var(--ds-sf, 1)));
+}
+
+.ds-card__title {
+  margin: 0;
+  color: var(--ds-card-ink);
+  font-family: var(--ds-typeface-medium);
+  font-size: var(--ds-type-size-display);
+  font-weight: var(--ds-type-weight-bold);
+  /* A title that wraps keeps its lines together: a square and a half each. */
+  line-height: calc(1.5 * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
+  text-wrap: balance;
+}
+
+.ds-card__body {
+  margin: 0;
+  line-height: var(--ds-unit);
+}
+
+.ds-card__media {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  margin-top: var(--ds-unit);
+}
+
+.ds-card__media--center {
+  justify-content: center;
+  margin-inline: calc(-1 * var(--ds-card-padding));
+}
+
+.ds-card__media--bleed {
+  margin-inline-end: calc(-1 * var(--ds-card-padding));
+}
+
+.ds-card__media > * {
+  flex: none;
+}
+
+/* A card that opens something. */
+a.ds-card,
+.ds-card[data-interactive] {
+  cursor: pointer;
+}
+
+a.ds-card::after,
+.ds-card[data-interactive]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: transparent;
+  pointer-events: none;
+}
+
+a.ds-card:focus-visible,
+.ds-card[data-interactive]:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -2px;
+}
+
+@media (hover: hover) {
+  a.ds-card:hover::after,
+  .ds-card[data-interactive]:hover::after {
+    background: color-mix(in srgb, var(--ds-card-ink) 4%, transparent);
+  }
+}
+
+a.ds-card:active::after,
+.ds-card[data-interactive]:active::after {
+  background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);
+}
+
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  a.ds-card > .ds-card__media,
+  .ds-card[data-interactive] > .ds-card__media {
+    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  a.ds-card:hover > .ds-card__media,
+  .ds-card[data-interactive]:hover > .ds-card__media {
+    transform: translateY(calc(-0.25 * var(--ds-unit)));
+  }
+}

package/DS1/1-root/carousel.css

@@ -0,0 +1,136 @@
+@import "./component-metrics.css";
+
+/*
+ * A carousel, as plain classes on native elements.
+ *
+ * A carousel is a row of slides that snaps sideways, one slide to a stop,
+ * with a row of controls one square high under it: optional previous and
+ * next buttons and a dot for each slide. Slides are the track's width, or
+ * whole squares wide, a whole number of squares apart (one by default). The
+ * controls stand one square below the track, on the grid from its start.
+ * The `ds-carousel` element draws the same parts, and
+ * `0-face/carousel.ts` gives the native markup its behaviour.
+ *
+ *   ds-carousel                    the region: track, controls, status;
+ *                                  `data-slides="auto"` for slides of their
+ *                                  own width, `data-bleed` `end` or `both`,
+ *                                  `data-snap="none"` to slide freely
+ *   ds-carousel__track             the scroller; every child is a slide
+ *   ds-carousel__controls          the row of buttons and dots
+ *   ds-carousel__previous, __next, icon buttons, on `.ds-button.ds-button--icon`
+ *   __pause
+ *   ds-carousel__status            the polite announcement, kept out of sight
+ *
+ *   The dots are `ds-progress--dots` from progress.css.
+ *
+ * A strip of slides of their own width can run on past its box to the
+ * window's end edge, or to both edges, while its first slide keeps to the
+ * box's start, so it lines up with the page's column; `--ds-carousel-before`
+ * and `--ds-carousel-after` are the room to the edges, which the script
+ * measures.
+ *
+ * Tokens: `--ds-carousel-slide` (a slide's width, the track's by default)
+ * and `--ds-carousel-gap` (between slides, one square by default).
+ */
+
+.ds-carousel {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: var(--ds-unit);
+  position: relative;
+  min-width: 0;
+  margin: 0;
+}
+
+.ds-carousel__track {
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--ds-carousel-slide, 100%);
+  column-gap: var(--ds-carousel-gap, var(--ds-unit));
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.ds-carousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Slides of their own width, several in view. */
+.ds-carousel[data-slides="auto"] > .ds-carousel__track {
+  grid-auto-columns: max-content;
+}
+
+.ds-carousel[data-snap="none"] > .ds-carousel__track {
+  scroll-snap-type: none;
+}
+
+/* To the window's end edge: the track reaches out over the room after the
+   box and keeps a gap at its end, so the last slide stops short of the edge. */
+.ds-carousel[data-bleed="end"] > .ds-carousel__track {
+  margin-inline-end: calc(-1 * var(--ds-carousel-after, 0px));
+  padding-inline-end: var(--ds-carousel-gap, var(--ds-unit));
+}
+
+/* To both edges: the track reaches out both ways, and the first slide, and
+   each one it stops at, still stands on the box's start. */
+.ds-carousel[data-bleed="both"] > .ds-carousel__track {
+  margin-inline: calc(-1 * var(--ds-carousel-before, 0px)) calc(-1 * var(--ds-carousel-after, 0px));
+  padding-inline: var(--ds-carousel-before, 0px) var(--ds-carousel-gap, var(--ds-unit));
+  scroll-padding-inline-start: var(--ds-carousel-before, 0px);
+}
+
+.ds-carousel__track:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-carousel__track > * {
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  scroll-snap-align: start;
+}
+
+/* One slide to a stop; a strip of several in view may pass a few. */
+.ds-carousel:not([data-slides="auto"]) > .ds-carousel__track > * {
+  scroll-snap-stop: always;
+}
+
+.ds-carousel__controls {
+  display: flex;
+  align-items: center;
+  height: var(--ds-row-height);
+  min-width: 0;
+}
+
+/* The buttons take a one-square cell each, as the dots do. Two classes, so
+   the button's own reset of its margin does not undo it. */
+.ds-carousel .ds-carousel__previous,
+.ds-carousel .ds-carousel__next,
+.ds-carousel .ds-carousel__pause {
+  flex: none;
+  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
+}
+
+/* Previous points back along the reading direction. */
+.ds-carousel:dir(rtl) :is(.ds-carousel__previous, .ds-carousel__next) > * {
+  transform: scaleX(-1);
+}
+
+.ds-carousel__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/DS1/1-root/cjk.css

@@ -0,0 +1,23 @@
+/* version 0.3.0-alpha.14 */
+
+/* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
+   link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without
+   it the typeface tokens fall back to the reader's own face (Hiragino and
+   PingFang on Apple systems, Yu Gothic, Microsoft YaHei and JhengHei on
+   Windows, Noto Sans CJK on Android and Linux).
+
+   The faces come from Google Fonts (SIL Open Font License), which cuts each
+   one into unicode-range slices, so a page downloads only the characters it
+   shows. A page whose security policy keeps other hosts out leaves this sheet
+   out, or serves Noto Sans itself under the same family names. */
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@350&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@350&display=swap");
+
+/* One weight of each face: a heavier weight is drawn in the same face, never
+   thickened by the browser. Latin changes weight by changing family. */
+:lang(ja),
+:lang(zh) {
+  font-synthesis-weight: none;
+}

package/DS1/1-root/component-metrics.css

@@ -14,6 +14,7 @@
   --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));
   --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));
   --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));
+  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));
   --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));
   --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));
   --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));

package/DS1/1-root/component-tokens.css

@@ -23,24 +23,28 @@
 
   /* ----------------------------------------------------------
    PALETTE
+   The same values as palette.ts and one.css; the accent is Apple green.
    ---------------------------------------------------------- */
 
   --ds-white: #ffffff;
-  --ds-black: #1f1f1f;
+  --ds-black: #2a2a2a;
   --ds-slate: #1e1e1e;
-  --ds-slate-light: #ececec;
-  --ds-slate-dark: #363636;
-  --ds-grey: #7a7a7a;
+  --ds-slate-light: #e6e6e6;
+  --ds-slate-dark: #3c3c3c;
+  --ds-grey: #797979;
 
   --ds-tuned-red: #ff5f5f;
+  --ds-red-for-blood: #de0331;
   --ds-pink: #f5aad1;
   --ds-sharp-blue: #594dff;
   --ds-zenith-blue: #ccccff;
   --ds-apple-green: #99ff73;
+  /* Dark Apple green keeps a white switch thumb clear in either scheme. */
+  --ds-switch-track-on: #529d36;
   --ds-yellow: #eaff00;
   --ds-orange: #fec20d;
 
-  --ds-accent-color: light-dark(var(--ds-yellow), #bbcc00);
+  --ds-accent-color: var(--ds-apple-green);
 
   /* ----------------------------------------------------------
    TYPE
@@ -48,8 +52,19 @@
 
   --ds-typeface-regular:
     "Inter Arrows", "GT America", "GT-America-Standard-Regular", Inter, system-ui, -apple-system, sans-serif;
+  /* The medium face for headings and strong text; one.css loads it as GT-America-Standard-Medium. */
+  --ds-typeface-medium:
+    "Inter Arrows", "GT-America-Standard-Medium", "GT America", Inter, system-ui, -apple-system, sans-serif;
   --ds-typeface-compressed: "Inter Arrows", "GT-America-Compressed-Regular", var(--ds-typeface-regular);
-  --ds-typeface-regular-jp: "Inter Arrows", "GT America", "Noto Sans JP", sans-serif;
+  --ds-typeface-mono: "Inter Arrows", "Iosevka", "Iosevka Extended", ui-monospace, "SF Mono", Menlo, monospace;
+  /* Japanese and Chinese: Noto Sans when cjk.css (or the product) loads it,
+     else the reader's own face. Latin keeps GT America. */
+  --ds-typeface-regular-jp:
+    "Inter Arrows", "GT America", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif;
+  --ds-typeface-regular-zh-hans:
+    "Inter Arrows", "GT America", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+  --ds-typeface-regular-zh-hant:
+    "Inter Arrows", "GT America", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
   /* GT America exposes circular dots as stylistic set 05. */
   --ds-font-features: "ss05" 1;
 
@@ -65,10 +80,25 @@
   --ds-text-color: light-dark(var(--ds-black), var(--ds-white));
   --ds-text-color-muted: light-dark(#5f5f5f, #cacaca);
   --ds-title-color: light-dark(var(--ds-grey), #9a9a9a);
+  /* Text that reports a failure or warns of a loss. Red for blood on light
+     paper and Tuned red on dark: both palette colours, legible as 14px text. */
+  --ds-danger-color: light-dark(var(--ds-red-for-blood), var(--ds-tuned-red));
+  /* Text that asks for care before something goes wrong. Orange is too light
+     for text on light paper and so is its dark-mode version, so light paper
+     takes Orange's dim (#4c3f1a, its pastel in dark mode); dark paper takes
+     Orange itself. Both read above 4.5:1 as 14px text. */
+  --ds-warning-color: light-dark(#4c3f1a, var(--ds-orange));
   --ds-border-color: light-dark(#d8d8d8, #3d3d3d);
   --ds-fill: light-dark(var(--ds-slate-light), var(--ds-slate-dark));
   --ds-fill-hover: light-dark(#e2e2e2, #404040);
   --ds-focus-ring: var(--ds-sharp-blue);
+  /* A row a person presses (ds-row, .ds-row, a tree's rows, ds-sidebar): under
+     the pointer, pressed, and the current destination or selected row, which
+     also takes the medium weight. */
+  --ds-row-fill-hover: var(--ds-fill);
+  --ds-row-fill-press: color-mix(in srgb, var(--ds-fill-hover) 92%, var(--ds-text-color));
+  --ds-row-fill-current: var(--ds-fill-hover);
+  --ds-row-current-weight: var(--ds-type-weight-bold);
 
   --ds-button-text-color: var(--ds-text-color);
   --ds-button-background-color-primary: var(--ds-accent-color);
@@ -76,7 +106,7 @@
   --ds-button-background-color-secondary: var(--ds-fill);
   --ds-icon-color: currentColor;
 
-  /* Shared fields, including the row treatment carried over from Ezo's forms. */
+  /* Shared fields, including the row treatment of a form's settings rows. */
   --ds-input-background: light-dark(#e8e8e8, #303030);
   --ds-input-color: light-dark(#2a2a2a, #f5f5f5);
   --ds-input-placeholder-color: light-dark(#797979, #ababab);
@@ -84,7 +114,20 @@
   --ds-input-reveal-color: light-dark(#1e1e1e, #f5f5f5);
 }
 
-/* A page written in Japanese sets its labels in the Japanese face. */
+/* A page written in Japanese or Chinese sets its labels in that language's
+   face: Chinese in Simplified characters, as the shared words are written,
+   unless it says Traditional. */
 :root:lang(ja) {
   --ds-typeface-regular: var(--ds-typeface-regular-jp);
 }
+
+:root:lang(zh) {
+  --ds-typeface-regular: var(--ds-typeface-regular-zh-hans);
+}
+
+:root:lang(zh-Hant),
+:root:lang(zh-TW),
+:root:lang(zh-HK),
+:root:lang(zh-MO) {
+  --ds-typeface-regular: var(--ds-typeface-regular-zh-hant);
+}