@crewlethq/tokens 0.17.1 → 0.18.0

package/README.md

@@ -45,6 +45,19 @@ const accent = color.brand.accent;
 CSS variables follow Style Dictionary's `--{group}-{path}` convention,
 for example `var(--color-brand-accent)` or `var(--spacing-4)`.
 
+## Changed in 0.18.0: presence, change marks and the sheet row
+
+Five tokens for the collaborative sheet and the presence marks. Nothing that existed moved.
+
+| What changed | What to change | Details |
+| --- | --- | --- |
+| `--color-presence-flag-text` (`color.presence.flagText`) is new, in every palette of every theme: the ink of the name on a presence flag, which is filled with the collaborator's node hue. | Nothing. | [Presence](#presence) |
+| `--color-change-mark` (`color.changeMark`) is new: an alias of `--color-brand-accent-soft-strong`, for the corner mark on a changed cell. | Nothing. | [Presence](#presence) |
+| `--shadow-cursor` (`shadow.cursor`) is new: an alias of `--shadow-sm`, under a live cursor and its flag. | Nothing. | [Presence](#presence) |
+| `--z-index-presence` (`zIndex.presence`, 20) is new: collaborators' marks over content, above sticky headers and below every menu and layer. | Nothing. | [Presence](#presence) |
+| `--size-sheet-row` (`size.sheet.row`, 32px) is new and density-scaled, so its three density steps are 26.24px, 32px and 37.12px. | Nothing. | [Density](#density) |
+| In `@crewlethq/tokens/test/palette`, the rules `a presence flag name clears 4.5:1 on every node hue` and `a presence hue clears 3:1 as a mark` are new, with the exports `PRESENCE_HUES` and `PRESENCE_FLAG_TEXT`. | Nothing. | [Presence](#presence) |
+
 ## Changed in 0.13.0: named themes
 
 Nine named themes ship beside the default, each with a dark and a light palette, for an application that offers a theme picker. A document that sets no `data-palette` attribute is painted exactly as before, and no default value moved.
@@ -284,6 +297,8 @@ The control steps are the approved design's control rhythm: `--size-control-md`
 
 `--size-target-min` (24px) is that same floor, named, for a component that DERIVES a height from a control step rather than taking one. Subtracting from a step subtracts from its floor too, so `calc(var(--size-control-md) - 6px)` is 18.6px at compact density; `max(var(--size-target-min), calc(var(--size-control-md) - 6px))` is the 24px a chip in a segmented well stands at density 1, and still a reachable target at every other.
 
+`--size-sheet-row` (32px) is the height of a row in an editable data sheet, density-scaled like every row: 26.24px compact, 32px normal and 37.12px comfortable. A sheet measures the resolved height rather than restating the number, so its virtualised rows stay in step with the density.
+
 `--radius-chip` is `calc(var(--radius-md) - 1px)`, the corner of a chip lifted inside a well drawn at `--radius-md`. It is derived rather than written as a step of its own, so it follows the well.
 
 ### Changed in 0.5.0: the control steps
@@ -416,6 +431,19 @@ A phase is a category. The agent's phases (onboarding, execute, review, and what
 
 A `-soft` step is its own fill at alpha 0.12 and a `-line` step is the same fill at alpha 0.30. They are derived by the build from the fill, per palette, so a tint cannot come to belong to a hue the fill no longer is.
 
+### Presence
+
+A collaborator's presence colour is the one narrow exception to "colour carries state, never identity". It is one of the six node hues (`--color-node-{purple,cyan,green,amber,rose,blue}`): an agent's chosen hue, or a hue a person is given for the session in join order. It is drawn on four marks only, a live cursor, a selection ring, a cell outline and a name flag, and always beside the name, never on chrome and never as a state.
+
+| Token | Dark | Light | What it is |
+| --- | --- | --- | --- |
+| `--color-presence-flag-text` | `#07080d` | `#ffffff` | The name on a flag filled with a node hue. Every dark node hue is a mid tone that black clears and white does not, and every light one is a deep tone, so the ink flips with the mode. |
+| `--color-change-mark` | the accent at 0.32 | the accent at 0.32 | The corner mark on a cell that changed since the reader last looked, an alias of `--color-brand-accent-soft-strong`. It is always paired with a tooltip that names who changed it and what it was. |
+| `--shadow-cursor` | `--shadow-sm` | `--shadow-sm` | The lift under a live cursor and its flag. |
+| `--z-index-presence` | 20 | 20 | Above sticky headers and frozen columns, below every menu, popover and dialog. |
+
+The palette suite holds the flag's name at 4.5:1 on each of the six hues, and each hue at 3:1 as a mark on every rung, in every palette of every theme. The high-contrast theme keeps the same 4.5: the hue is the collaborator's identity rather than a palette's step, and the name is also said in words wherever presence is listed.
+
 ### The accent
 
 The accent is a violet, and it is **per palette**:

package/dist/css/themes/abyss.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/all.css

@@ -95,6 +95,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -201,6 +202,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -307,6 +309,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -413,6 +416,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -519,6 +523,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -625,6 +630,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -731,6 +737,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -837,6 +844,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -943,6 +951,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1049,6 +1058,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1155,6 +1165,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1261,6 +1272,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1367,6 +1379,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1473,6 +1486,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1579,6 +1593,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1685,6 +1700,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1791,6 +1807,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1897,6 +1914,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2003,6 +2021,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2109,6 +2128,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2215,6 +2235,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2321,6 +2342,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2427,6 +2449,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2533,6 +2556,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2639,6 +2663,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2745,6 +2770,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2851,6 +2877,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/dusk.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/high-contrast.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/iris.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/ledger.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/nightshade.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/nocturne.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/origin.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes/violet.css

@@ -93,6 +93,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -199,6 +200,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -305,6 +307,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/themes.css

@@ -99,6 +99,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d;
   --color-scrollbar: rgba(255, 255, 255, 0.16);
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -208,6 +209,7 @@
     --color-node-blue-fill: rgba(64, 98, 167, 0.12);
     --color-node-blue-line: rgba(64, 98, 167, 0.38);
     --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+    --color-presence-flag-text: #ffffff;
     --color-scrollbar: rgba(7, 8, 13, 0.2);
     --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
     --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -315,6 +317,7 @@
   --color-node-blue-fill: rgba(64, 98, 167, 0.12);
   --color-node-blue-line: rgba(64, 98, 167, 0.38);
   --color-node-blue-halo: rgba(64, 98, 167, 0.16);
+  --color-presence-flag-text: #ffffff;
   --color-scrollbar: rgba(7, 8, 13, 0.2);
   --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
   --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);

package/dist/css/tokens.css

@@ -116,6 +116,7 @@
   --color-node-blue-fill: rgba(91, 127, 199, 0.12);
   --color-node-blue-line: rgba(91, 127, 199, 0.38);
   --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-presence-flag-text: #07080d; /** The name on a presence flag: the plate a collaborator's cursor, cell or selection is labelled with, filled with that collaborator's node hue. It is the one place a node hue is a ground for text rather than a tint, so its ink is a step of its own, per palette, and the palette suite holds it at 4.5:1 on each of the six hues in every theme. Presence colour is the narrow exception to colour carrying state: it ties a mark to a name, and the name is always on the flag. */
   --color-scrollbar: rgba(255, 255, 255, 0.16); /** Scrollbars belong to the palette. A bright system gutter down the side of a dark page is the most visible way an application admits it is a web page. */
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --color-qr-dark: #000000; /** A QR code's dark modules. Part of the symbol a camera reads rather than a colour of the palette, so it is the same in every palette and theme and is never spent on anything else. A code is specified dark on light, and some authenticator apps do not read one inverted for a dark theme, which is why it is not themed. */
@@ -163,6 +164,7 @@
   --size-row-sm: max(24px, calc(28px * var(--density, 1))); /** The height of a list row, so every list in a product lines up with every other. The small step floors at 24px as the control step does. */
   --size-row-md: calc(36px * var(--density, 1));
   --size-row-lg: calc(48px * var(--density, 1));
+  --size-sheet-row: calc(32px * var(--density, 1)); /** The height of a row in an editable data sheet: a chip, a person badge and a status word each fit on one line in it. Density-scaled like every row, so the three density steps are 26.24px compact, 32px normal and 37.12px comfortable, all over the 24px target floor, and a sheet measures it rather than restating it, which is how its virtualised rows stay in step with the cells drawn in them. */
   --size-nav-gutter: calc(8px * var(--density, 1)); /** The rail's geometry in TWO parts, because a row's EDGE and a row's TEXT want different insets. The gutter insets the rail, which is where a row's background begins; the row pad insets the content inside the row. Splitting it is what lets the rows widen without moving a glyph: shrink the gutter, grow the pad by the same step, and the line every mark, group label and item text starts on does not move. */
   --size-nav-row-pad: calc(12px * var(--density, 1));
   --size-nav-row: calc(30px * var(--density, 1)); /** The height of a row in the rail: a destination, a project, a pinned view. The approved design draws it at 30px, the control rhythm's own height, and a rail row is a step of its own rather than size.row.md (36px, a list's row) because a rail holds fifteen destinations and more in a column the height of the window, where six pixels a row is the difference between the last one on screen and behind the foot. No floor is needed: 30 x 0.82 is 24.6px, over the 24px target at every density. */
@@ -218,6 +220,7 @@
   --z-index-base: 0;
   --z-index-raised: 1; /** Lifts an element above its siblings inside its own stacking context, such as a control layered over a card. */
   --z-index-sticky: 10; /** Sticky headers and pinned columns within the page flow. */
+  --z-index-presence: 20; /** Collaborators' marks drawn over content: live cursors, name flags and selection rings. Above sticky headers and frozen columns, so a flag on the first row is not hidden under the header, and below every in-flow menu and the whole layer band, so a menu or a dialog always covers a cursor. */
   --z-index-dropdown: 100; /** In-flow menus that stay inside their container rather than portaling to the body. */
   --z-index-overlay: 200; /** In-page overlays such as drawers and scrims that cover page chrome but not dialogs. */
   --z-index-layer-base: 9000; /** The bottom of the layer stack's own band. A portaled surface takes this plus its DEPTH in the live stack, clamped at layerMax, rather than a number from a counter that only grows: modal, popover and toast leave two free steps between them, so a counter would put the second dialog of a session at the popover level and the third at the toast level. */
@@ -225,6 +228,8 @@
   --z-index-modal: 9999; /** Dialog backdrop and frame. High enough to clear any page chrome an application stacks with its own numbers. */
   --z-index-popover: 10000; /** Floating panels portaled to the body (Select menus, Popover, date pickers). Above modal because they are routinely opened from inside a dialog, and a panel under the backdrop is hidden and swallows clicks. */
   --z-index-toast: 10001; /** Top of the stack. A toast reports the outcome of what somebody just did, often in a dialog or from a menu opened inside one, so it sits above both. */
+  --color-change-mark: var(--color-brand-accent-soft-strong); /** The corner mark on a cell or an element that changed since the reader last looked. An alias of the accent's strong soft step, so the meaning has a name of its own and follows the accent in every palette; the mark is always paired with a tooltip that says who changed it and what it was. */
   --radius-chip: calc(var(--radius-md) - 1px); /** The corner of a chip lifted INSIDE a well at --radius-md: one hairline tighter than the well around it, which is what reads as sitting in it. It sits between sm and md and is derived rather than written as 7px, so it follows --radius-md if that step ever moves. */
+  --shadow-cursor: var(--shadow-sm); /** The lift under a collaborator's live cursor and its name flag, so a pointer drawn over content reads as above it. An alias of the small step, so it repaints with the palette. */
   --font-family-display: var(--font-family-sans); /** Headings and other display type. An alias of the sans family, so a heading costs no extra download. Components keep reading this role token so a dedicated display face would land in one place. */
 }

package/dist/index.d.ts

@@ -134,6 +134,10 @@ export declare const color: {
         readonly blueLine: "rgba(91, 127, 199, 0.38)";
         readonly blueHalo: "rgba(91, 127, 199, 0.16)";
     };
+    readonly presence: {
+        readonly flagText: "#07080d";
+    };
+    readonly changeMark: "rgba(124, 86, 255, 0.32)";
     readonly scrollbar: "rgba(255, 255, 255, 0.16)";
     readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
     readonly qr: {
@@ -189,6 +193,7 @@ export declare const shadow: {
     readonly hairline: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
     readonly focus: "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)";
     readonly selection: "inset 0 0 0 2px var(--color-brand-accent)";
+    readonly cursor: "0 2px 8px rgba(0, 0, 0, 0.15)";
     readonly glow: "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)";
 };
 export declare const size: {
@@ -202,6 +207,9 @@ export declare const size: {
         readonly md: "36px";
         readonly lg: "48px";
     };
+    readonly sheet: {
+        readonly row: "32px";
+    };
     readonly nav: {
         readonly gutter: "8px";
         readonly rowPad: "12px";
@@ -278,6 +286,7 @@ export declare const zIndex: {
     readonly base: "0";
     readonly raised: "1";
     readonly sticky: "10";
+    readonly presence: "20";
     readonly dropdown: "100";
     readonly overlay: "200";
     readonly layerBase: "9000";

package/dist/index.js

@@ -135,6 +135,10 @@ export const color = {
         "blueLine": "rgba(91, 127, 199, 0.38)",
         "blueHalo": "rgba(91, 127, 199, 0.16)"
     },
+    "presence": {
+        "flagText": "#07080d"
+    },
+    "changeMark": "rgba(124, 86, 255, 0.32)",
     "scrollbar": "rgba(255, 255, 255, 0.16)",
     "scrollbarHover": "rgba(255, 255, 255, 0.26)",
     "qr": {
@@ -190,6 +194,7 @@ export const shadow = {
     "hairline": "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
     "focus": "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)",
     "selection": "inset 0 0 0 2px var(--color-brand-accent)",
+    "cursor": "0 2px 8px rgba(0, 0, 0, 0.15)",
     "glow": "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)"
 };
 export const size = {
@@ -203,6 +208,9 @@ export const size = {
         "md": "36px",
         "lg": "48px"
     },
+    "sheet": {
+        "row": "32px"
+    },
     "nav": {
         "gutter": "8px",
         "rowPad": "12px",
@@ -279,6 +287,7 @@ export const zIndex = {
     "base": "0",
     "raised": "1",
     "sticky": "10",
+    "presence": "20",
     "dropdown": "100",
     "overlay": "200",
     "layerBase": "9000",

package/dist/themes.d.ts

@@ -109,6 +109,9 @@ export declare const themes: {
                 readonly blueLine: "rgba(64, 98, 167, 0.38)";
                 readonly blueHalo: "rgba(64, 98, 167, 0.16)";
             };
+            readonly presence: {
+                readonly flagText: "#ffffff";
+            };
             readonly scrollbar: "rgba(7, 8, 13, 0.2)";
             readonly scrollbarHover: "rgba(7, 8, 13, 0.32)";
         };
@@ -229,6 +232,9 @@ export declare const themes: {
                 readonly blueLine: "rgba(91, 127, 199, 0.38)";
                 readonly blueHalo: "rgba(91, 127, 199, 0.16)";
             };
+            readonly presence: {
+                readonly flagText: "#07080d";
+            };
             readonly scrollbar: "rgba(255, 255, 255, 0.16)";
             readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
         };

package/dist/themes.js

@@ -110,6 +110,9 @@ export const themes = {
                 "blueLine": "rgba(64, 98, 167, 0.38)",
                 "blueHalo": "rgba(64, 98, 167, 0.16)"
             },
+            "presence": {
+                "flagText": "#ffffff"
+            },
             "scrollbar": "rgba(7, 8, 13, 0.2)",
             "scrollbarHover": "rgba(7, 8, 13, 0.32)"
         },
@@ -230,6 +233,9 @@ export const themes = {
                 "blueLine": "rgba(91, 127, 199, 0.38)",
                 "blueHalo": "rgba(91, 127, 199, 0.16)"
             },
+            "presence": {
+                "flagText": "#07080d"
+            },
             "scrollbar": "rgba(255, 255, 255, 0.16)",
             "scrollbarHover": "rgba(255, 255, 255, 0.26)"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/tokens",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
   "license": "MIT AND OFL-1.1",
   "repository": {

package/test/palette.d.mts

@@ -202,3 +202,9 @@ export const VEIL_BAND: readonly number[];
 
 /** The alpha the veil draws its own root's frame at. */
 export const VEIL_ALPHA: number;
+
+/** The six node hues a collaborator's presence marks are drawn in, held to 3:1 as marks on every rung. */
+export const PRESENCE_HUES: readonly string[];
+
+/** The ink of the name on a presence flag, held to 4.5:1 on every presence hue. */
+export const PRESENCE_FLAG_TEXT: string;

package/test/palette.mjs

@@ -306,6 +306,27 @@ const labelOf = (step) => (step.startsWith('--color-feedback-danger') ? DESTRUCT
 /** The ten seeded avatar grounds, each carrying white initials. */
 export const AVATAR_TINTS = Array.from({ length: 10 }, (_, i) => `--color-avatar-tint-${i}`);
 
+// ---------------------------------------------------------------------------
+// Presence
+// ---------------------------------------------------------------------------
+
+/**
+ * The six node hues a collaborator's presence is drawn in, and the ink of the
+ * name flag filled with each.
+ *
+ * PRESENCE IS THE NARROW EXCEPTION to colour carrying state: a collaborator's
+ * hue ties their cursor, their selection ring, their cell outline and their
+ * name flag to their name, and is spent on nothing else. Two promises follow.
+ * The flag's name is TEXT on the hue, so it clears 4.5:1 there in every
+ * palette; and the ring and the cursor are MARKS on content, so the hue clears
+ * 3:1 on every rung a sheet or a page can stand on. The high-contrast theme is
+ * held to the same 4.5: the hue is the collaborator's identity rather than a
+ * palette's step, so it is not re-tuned per theme, and the name is also said
+ * in words wherever presence is listed.
+ */
+export const PRESENCE_HUES = ['purple', 'cyan', 'green', 'amber', 'rose', 'blue'].map((hue) => `--color-node-${hue}`);
+export const PRESENCE_FLAG_TEXT = '--color-presence-flag-text';
+
 // ---------------------------------------------------------------------------
 // The rail
 // ---------------------------------------------------------------------------
@@ -874,6 +895,17 @@ function checkState(state, values, profile, push, theme = { tint: null, contrast
     say('a glyph clears 3:1 on its own fill', low.ratio >= 3, `${ink} on ${fill}`, low.ratio, `${low.ratio.toFixed(2)}:1 (worst on ${low.name})`);
   }
 
+  // PRESENCE. See PRESENCE_HUES.
+  {
+    const ink = colour(PRESENCE_FLAG_TEXT);
+    const low = worst(ink, PRESENCE_HUES.map((name) => [name, colour(name)]));
+    say('a presence flag name clears 4.5:1 on every node hue', low.ratio >= 4.5, PRESENCE_FLAG_TEXT, low.ratio, `${low.ratio.toFixed(2)}:1 (worst on ${low.name})`);
+    for (const name of PRESENCE_HUES) {
+      const mark = worst(colour(name), opaque);
+      say('a presence hue clears 3:1 as a mark', mark.ratio >= 3, name, mark.ratio, `${mark.ratio.toFixed(2)}:1 (worst on ${mark.name})`);
+    }
+  }
+
   // THE PRIMARY ACTION'S STEPS. See ACTION_STEPS.
   for (const [rule, step, from] of ACTION_STEPS) {
     const name = labelOf(step);