@crewlethq/tokens 0.17.1 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +28 -0
  2. package/dist/css/themes/abyss.css +6 -0
  3. package/dist/css/themes/all.css +54 -0
  4. package/dist/css/themes/dusk.css +6 -0
  5. package/dist/css/themes/high-contrast.css +6 -0
  6. package/dist/css/themes/iris.css +6 -0
  7. package/dist/css/themes/ledger.css +6 -0
  8. package/dist/css/themes/nightshade.css +6 -0
  9. package/dist/css/themes/nocturne.css +6 -0
  10. package/dist/css/themes/origin.css +6 -0
  11. package/dist/css/themes/violet.css +6 -0
  12. package/dist/css/themes.css +6 -0
  13. package/dist/css/tokens.css +6 -0
  14. package/dist/index.d.ts +10 -0
  15. package/dist/index.js +10 -0
  16. package/dist/themes.d.ts +8 -0
  17. package/dist/themes.js +8 -0
  18. package/package.json +1 -1
  19. package/test/palette.d.mts +6 -0
  20. package/test/palette.mjs +32 -0
package/README.md CHANGED
@@ -45,6 +45,19 @@ const accent = color.brand.accent;
45
45
  CSS variables follow Style Dictionary's `--{group}-{path}` convention,
46
46
  for example `var(--color-brand-accent)` or `var(--spacing-4)`.
47
47
 
48
+ ## Changed in 0.18.0: presence, change marks and the sheet row
49
+
50
+ Five tokens for the collaborative sheet and the presence marks. Nothing that existed moved.
51
+
52
+ | What changed | What to change | Details |
53
+ | --- | --- | --- |
54
+ | `--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) |
55
+ | `--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) |
56
+ | `--shadow-cursor` (`shadow.cursor`) is new: an alias of `--shadow-sm`, under a live cursor and its flag. | Nothing. | [Presence](#presence) |
57
+ | `--z-index-presence` (`zIndex.presence`, 20) is new: collaborators' marks over content, above sticky headers and below every menu and layer. | Nothing. | [Presence](#presence) |
58
+ | `--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) |
59
+ | 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) |
60
+
48
61
  ## Changed in 0.13.0: named themes
49
62
 
50
63
  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`
284
297
 
285
298
  `--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.
286
299
 
300
+ `--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.
301
+
287
302
  `--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.
288
303
 
289
304
  ### 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
416
431
 
417
432
  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.
418
433
 
434
+ ### Presence
435
+
436
+ 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.
437
+
438
+ | Token | Dark | Light | What it is |
439
+ | --- | --- | --- | --- |
440
+ | `--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. |
441
+ | `--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. |
442
+ | `--shadow-cursor` | `--shadow-sm` | `--shadow-sm` | The lift under a live cursor and its flag. |
443
+ | `--z-index-presence` | 20 | 20 | Above sticky headers and frozen columns, below every menu, popover and dialog. |
444
+
445
+ 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.
446
+
419
447
  ### The accent
420
448
 
421
449
  The accent is a violet, and it is **per palette**:
package/dist/css/themes/abyss.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #3c3054;
40
40
  --color-border-strong: #3c3054;
41
41
  --color-border-strong-hover: #4a3e64;
42
+ --color-border-hatch: #2b1e41;
42
43
  --color-border-control: #7b738e;
43
44
  --color-focus: #8e4eff;
44
45
  --color-feedback-success: #16d297;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #cdc7dc;
146
148
  --color-border-strong: #cdc7dc;
147
149
  --color-border-strong-hover: #bcb5cc;
150
+ --color-border-hatch: #dedae9;
148
151
  --color-border-control: #78708b;
149
152
  --color-focus: #6b11da;
150
153
  --color-feedback-success: #019472;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #cdc7dc;
252
256
  --color-border-strong: #cdc7dc;
253
257
  --color-border-strong-hover: #bcb5cc;
258
+ --color-border-hatch: #dedae9;
254
259
  --color-border-control: #78708b;
255
260
  --color-focus: #6b11da;
256
261
  --color-feedback-success: #019472;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/all.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --color-border-hover: #303038;
42
42
  --color-border-strong: #303038;
43
43
  --color-border-strong-hover: #3e3e48;
44
+ --color-border-hatch: #232329;
44
45
  --color-border-control: #797983;
45
46
  --color-focus: #7e5bff;
46
47
  --color-feedback-success: #3ecf8f;
@@ -95,6 +96,7 @@
95
96
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
96
97
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
97
98
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
99
+ --color-presence-flag-text: #07080d;
98
100
  --color-scrollbar: rgba(255, 255, 255, 0.16);
99
101
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
100
102
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -147,6 +149,7 @@
147
149
  --color-border-hover: #d3d3ce;
148
150
  --color-border-strong: #d3d3ce;
149
151
  --color-border-strong-hover: #c2c2bc;
152
+ --color-border-hatch: #e2e2df;
150
153
  --color-border-control: #7b7a81;
151
154
  --color-focus: #6b45f0;
152
155
  --color-feedback-success: #009b74;
@@ -201,6 +204,7 @@
201
204
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
202
205
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
203
206
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
207
+ --color-presence-flag-text: #ffffff;
204
208
  --color-scrollbar: rgba(7, 8, 13, 0.2);
205
209
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
206
210
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -253,6 +257,7 @@
253
257
  --color-border-hover: #d3d3ce;
254
258
  --color-border-strong: #d3d3ce;
255
259
  --color-border-strong-hover: #c2c2bc;
260
+ --color-border-hatch: #e2e2df;
256
261
  --color-border-control: #7b7a81;
257
262
  --color-focus: #6b45f0;
258
263
  --color-feedback-success: #009b74;
@@ -307,6 +312,7 @@
307
312
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
308
313
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
309
314
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
315
+ --color-presence-flag-text: #ffffff;
310
316
  --color-scrollbar: rgba(7, 8, 13, 0.2);
311
317
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
312
318
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -359,6 +365,7 @@
359
365
  --color-border-hover: #3f4145;
360
366
  --color-border-strong: #4a4d52;
361
367
  --color-border-strong-hover: #4a4d52;
368
+ --color-border-hatch: #323439;
362
369
  --color-border-control: #828ca0;
363
370
  --color-focus: #7d8fe8;
364
371
  --color-feedback-success: #3eba82;
@@ -413,6 +420,7 @@
413
420
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
414
421
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
415
422
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
423
+ --color-presence-flag-text: #07080d;
416
424
  --color-scrollbar: rgba(255, 255, 255, 0.16);
417
425
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
418
426
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -465,6 +473,7 @@
465
473
  --color-border-hover: #c4c4ca;
466
474
  --color-border-strong: #d4d4d8;
467
475
  --color-border-strong-hover: #b4b4bc;
476
+ --color-border-hatch: #e5e5e8;
468
477
  --color-border-control: #71717a;
469
478
  --color-focus: #5469d4;
470
479
  --color-feedback-success: #0f9a73;
@@ -519,6 +528,7 @@
519
528
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
520
529
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
521
530
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
531
+ --color-presence-flag-text: #ffffff;
522
532
  --color-scrollbar: rgba(7, 8, 13, 0.2);
523
533
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
524
534
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -571,6 +581,7 @@
571
581
  --color-border-hover: #c4c4ca;
572
582
  --color-border-strong: #d4d4d8;
573
583
  --color-border-strong-hover: #b4b4bc;
584
+ --color-border-hatch: #e5e5e8;
574
585
  --color-border-control: #71717a;
575
586
  --color-focus: #5469d4;
576
587
  --color-feedback-success: #0f9a73;
@@ -625,6 +636,7 @@
625
636
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
626
637
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
627
638
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
639
+ --color-presence-flag-text: #ffffff;
628
640
  --color-scrollbar: rgba(7, 8, 13, 0.2);
629
641
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
630
642
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -677,6 +689,7 @@
677
689
  --color-border-hover: #3c3054;
678
690
  --color-border-strong: #3c3054;
679
691
  --color-border-strong-hover: #4a3e64;
692
+ --color-border-hatch: #2b1e41;
680
693
  --color-border-control: #7b738e;
681
694
  --color-focus: #8e4eff;
682
695
  --color-feedback-success: #16d297;
@@ -731,6 +744,7 @@
731
744
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
732
745
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
733
746
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
747
+ --color-presence-flag-text: #07080d;
734
748
  --color-scrollbar: rgba(255, 255, 255, 0.16);
735
749
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
736
750
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -783,6 +797,7 @@
783
797
  --color-border-hover: #cdc7dc;
784
798
  --color-border-strong: #cdc7dc;
785
799
  --color-border-strong-hover: #bcb5cc;
800
+ --color-border-hatch: #dedae9;
786
801
  --color-border-control: #78708b;
787
802
  --color-focus: #6b11da;
788
803
  --color-feedback-success: #019472;
@@ -837,6 +852,7 @@
837
852
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
838
853
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
839
854
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
855
+ --color-presence-flag-text: #ffffff;
840
856
  --color-scrollbar: rgba(7, 8, 13, 0.2);
841
857
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
842
858
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -889,6 +905,7 @@
889
905
  --color-border-hover: #cdc7dc;
890
906
  --color-border-strong: #cdc7dc;
891
907
  --color-border-strong-hover: #bcb5cc;
908
+ --color-border-hatch: #dedae9;
892
909
  --color-border-control: #78708b;
893
910
  --color-focus: #6b11da;
894
911
  --color-feedback-success: #019472;
@@ -943,6 +960,7 @@
943
960
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
944
961
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
945
962
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
963
+ --color-presence-flag-text: #ffffff;
946
964
  --color-scrollbar: rgba(7, 8, 13, 0.2);
947
965
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
948
966
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -995,6 +1013,7 @@
995
1013
  --color-border-hover: #39334b;
996
1014
  --color-border-strong: #39334b;
997
1015
  --color-border-strong-hover: #48415d;
1016
+ --color-border-hatch: #292339;
998
1017
  --color-border-control: #767285;
999
1018
  --color-focus: #9584ff;
1000
1019
  --color-feedback-success: #27cf9b;
@@ -1049,6 +1068,7 @@
1049
1068
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
1050
1069
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
1051
1070
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
1071
+ --color-presence-flag-text: #07080d;
1052
1072
  --color-scrollbar: rgba(255, 255, 255, 0.16);
1053
1073
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
1054
1074
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1101,6 +1121,7 @@
1101
1121
  --color-border-hover: #c8c4d8;
1102
1122
  --color-border-strong: #c8c4d8;
1103
1123
  --color-border-strong-hover: #b6b2c8;
1124
+ --color-border-hatch: #dbd8e7;
1104
1125
  --color-border-control: #4c495b;
1105
1126
  --color-focus: #4a2abd;
1106
1127
  --color-feedback-success: #039571;
@@ -1155,6 +1176,7 @@
1155
1176
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1156
1177
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1157
1178
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1179
+ --color-presence-flag-text: #ffffff;
1158
1180
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1159
1181
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1160
1182
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1207,6 +1229,7 @@
1207
1229
  --color-border-hover: #c8c4d8;
1208
1230
  --color-border-strong: #c8c4d8;
1209
1231
  --color-border-strong-hover: #b6b2c8;
1232
+ --color-border-hatch: #dbd8e7;
1210
1233
  --color-border-control: #4c495b;
1211
1234
  --color-focus: #4a2abd;
1212
1235
  --color-feedback-success: #039571;
@@ -1261,6 +1284,7 @@
1261
1284
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1262
1285
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1263
1286
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1287
+ --color-presence-flag-text: #ffffff;
1264
1288
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1265
1289
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1266
1290
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1313,6 +1337,7 @@
1313
1337
  --color-border-hover: #393044;
1314
1338
  --color-border-strong: #393044;
1315
1339
  --color-border-strong-hover: #473e53;
1340
+ --color-border-hatch: #292232;
1316
1341
  --color-border-control: #837b92;
1317
1342
  --color-focus: #d6b7fc;
1318
1343
  --color-feedback-success: #8ec899;
@@ -1367,6 +1392,7 @@
1367
1392
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
1368
1393
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
1369
1394
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
1395
+ --color-presence-flag-text: #07080d;
1370
1396
  --color-scrollbar: rgba(255, 255, 255, 0.16);
1371
1397
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
1372
1398
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1419,6 +1445,7 @@
1419
1445
  --color-border-hover: #ccc5d5;
1420
1446
  --color-border-strong: #ccc5d5;
1421
1447
  --color-border-strong-hover: #bbb4c4;
1448
+ --color-border-hatch: #dcd7e3;
1422
1449
  --color-border-control: #7d7089;
1423
1450
  --color-focus: #4e247e;
1424
1451
  --color-feedback-success: #527b67;
@@ -1473,6 +1500,7 @@
1473
1500
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1474
1501
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1475
1502
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1503
+ --color-presence-flag-text: #ffffff;
1476
1504
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1477
1505
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1478
1506
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1525,6 +1553,7 @@
1525
1553
  --color-border-hover: #ccc5d5;
1526
1554
  --color-border-strong: #ccc5d5;
1527
1555
  --color-border-strong-hover: #bbb4c4;
1556
+ --color-border-hatch: #dcd7e3;
1528
1557
  --color-border-control: #7d7089;
1529
1558
  --color-focus: #4e247e;
1530
1559
  --color-feedback-success: #527b67;
@@ -1579,6 +1608,7 @@
1579
1608
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1580
1609
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1581
1610
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1611
+ --color-presence-flag-text: #ffffff;
1582
1612
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1583
1613
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1584
1614
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1631,6 +1661,7 @@
1631
1661
  --color-border-hover: #2b3245;
1632
1662
  --color-border-strong: #2b3245;
1633
1663
  --color-border-strong-hover: #384158;
1664
+ --color-border-hatch: #1f2432;
1634
1665
  --color-border-control: #727a8f;
1635
1666
  --color-focus: #606af8;
1636
1667
  --color-feedback-success: #34c98b;
@@ -1685,6 +1716,7 @@
1685
1716
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
1686
1717
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
1687
1718
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
1719
+ --color-presence-flag-text: #07080d;
1688
1720
  --color-scrollbar: rgba(255, 255, 255, 0.16);
1689
1721
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
1690
1722
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -1737,6 +1769,7 @@
1737
1769
  --color-border-hover: #c9cfdc;
1738
1770
  --color-border-strong: #c9cfdc;
1739
1771
  --color-border-strong-hover: #b5bdce;
1772
+ --color-border-hatch: #dbdfe8;
1740
1773
  --color-border-control: #74798c;
1741
1774
  --color-focus: #4c55e6;
1742
1775
  --color-feedback-success: #00916f;
@@ -1791,6 +1824,7 @@
1791
1824
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1792
1825
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1793
1826
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1827
+ --color-presence-flag-text: #ffffff;
1794
1828
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1795
1829
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1796
1830
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1843,6 +1877,7 @@
1843
1877
  --color-border-hover: #c9cfdc;
1844
1878
  --color-border-strong: #c9cfdc;
1845
1879
  --color-border-strong-hover: #b5bdce;
1880
+ --color-border-hatch: #dbdfe8;
1846
1881
  --color-border-control: #74798c;
1847
1882
  --color-focus: #4c55e6;
1848
1883
  --color-feedback-success: #00916f;
@@ -1897,6 +1932,7 @@
1897
1932
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
1898
1933
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
1899
1934
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
1935
+ --color-presence-flag-text: #ffffff;
1900
1936
  --color-scrollbar: rgba(7, 8, 13, 0.2);
1901
1937
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
1902
1938
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -1949,6 +1985,7 @@
1949
1985
  --color-border-hover: #2b3245;
1950
1986
  --color-border-strong: #2b3245;
1951
1987
  --color-border-strong-hover: #38405a;
1988
+ --color-border-hatch: #1f2432;
1952
1989
  --color-border-control: #72798b;
1953
1990
  --color-focus: #9584ff;
1954
1991
  --color-feedback-success: #20cc98;
@@ -2003,6 +2040,7 @@
2003
2040
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
2004
2041
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
2005
2042
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
2043
+ --color-presence-flag-text: #07080d;
2006
2044
  --color-scrollbar: rgba(255, 255, 255, 0.16);
2007
2045
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
2008
2046
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2055,6 +2093,7 @@
2055
2093
  --color-border-hover: #c9cfdc;
2056
2094
  --color-border-strong: #c9cfdc;
2057
2095
  --color-border-strong-hover: #b7becd;
2096
+ --color-border-hatch: #dbdfe8;
2058
2097
  --color-border-control: #464b5c;
2059
2098
  --color-focus: #4a2abd;
2060
2099
  --color-feedback-success: #039571;
@@ -2109,6 +2148,7 @@
2109
2148
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2110
2149
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2111
2150
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2151
+ --color-presence-flag-text: #ffffff;
2112
2152
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2113
2153
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2114
2154
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2161,6 +2201,7 @@
2161
2201
  --color-border-hover: #c9cfdc;
2162
2202
  --color-border-strong: #c9cfdc;
2163
2203
  --color-border-strong-hover: #b7becd;
2204
+ --color-border-hatch: #dbdfe8;
2164
2205
  --color-border-control: #464b5c;
2165
2206
  --color-focus: #4a2abd;
2166
2207
  --color-feedback-success: #039571;
@@ -2215,6 +2256,7 @@
2215
2256
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2216
2257
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2217
2258
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2259
+ --color-presence-flag-text: #ffffff;
2218
2260
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2219
2261
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2220
2262
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2267,6 +2309,7 @@
2267
2309
  --color-border-hover: #3a3730;
2268
2310
  --color-border-strong: #3a3730;
2269
2311
  --color-border-strong-hover: #4b473e;
2312
+ --color-border-hatch: #2b2923;
2270
2313
  --color-border-control: #827d74;
2271
2314
  --color-focus: #5272f6;
2272
2315
  --color-feedback-success: #53cc8f;
@@ -2321,6 +2364,7 @@
2321
2364
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
2322
2365
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
2323
2366
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
2367
+ --color-presence-flag-text: #07080d;
2324
2368
  --color-scrollbar: rgba(255, 255, 255, 0.16);
2325
2369
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
2326
2370
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2373,6 +2417,7 @@
2373
2417
  --color-border-hover: #cdc6b8;
2374
2418
  --color-border-strong: #cdc6b8;
2375
2419
  --color-border-strong-hover: #bab1a0;
2420
+ --color-border-hatch: #ddd9cf;
2376
2421
  --color-border-control: #7e776b;
2377
2422
  --color-focus: #2f50d8;
2378
2423
  --color-feedback-success: #1a9368;
@@ -2427,6 +2472,7 @@
2427
2472
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2428
2473
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2429
2474
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2475
+ --color-presence-flag-text: #ffffff;
2430
2476
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2431
2477
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2432
2478
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2479,6 +2525,7 @@
2479
2525
  --color-border-hover: #cdc6b8;
2480
2526
  --color-border-strong: #cdc6b8;
2481
2527
  --color-border-strong-hover: #bab1a0;
2528
+ --color-border-hatch: #ddd9cf;
2482
2529
  --color-border-control: #7e776b;
2483
2530
  --color-focus: #2f50d8;
2484
2531
  --color-feedback-success: #1a9368;
@@ -2533,6 +2580,7 @@
2533
2580
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2534
2581
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2535
2582
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2583
+ --color-presence-flag-text: #ffffff;
2536
2584
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2537
2585
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2538
2586
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2585,6 +2633,7 @@
2585
2633
  --color-border-hover: #9a9aae;
2586
2634
  --color-border-strong: #9a9aae;
2587
2635
  --color-border-strong-hover: #b8b8c8;
2636
+ --color-border-hatch: #61616f;
2588
2637
  --color-border-control: #a2a2b4;
2589
2638
  --color-focus: #ffe066;
2590
2639
  --color-feedback-success: #34c98b;
@@ -2639,6 +2688,7 @@
2639
2688
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
2640
2689
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
2641
2690
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
2691
+ --color-presence-flag-text: #07080d;
2642
2692
  --color-scrollbar: rgba(255, 255, 255, 0.16);
2643
2693
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
2644
2694
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -2691,6 +2741,7 @@
2691
2741
  --color-border-hover: #4f4f60;
2692
2742
  --color-border-strong: #4f4f60;
2693
2743
  --color-border-strong-hover: #383846;
2744
+ --color-border-hatch: #92929e;
2694
2745
  --color-border-control: #5b5b69;
2695
2746
  --color-focus: #4424c4;
2696
2747
  --color-feedback-success: #0b9a74;
@@ -2745,6 +2796,7 @@
2745
2796
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2746
2797
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2747
2798
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2799
+ --color-presence-flag-text: #ffffff;
2748
2800
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2749
2801
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2750
2802
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -2797,6 +2849,7 @@
2797
2849
  --color-border-hover: #4f4f60;
2798
2850
  --color-border-strong: #4f4f60;
2799
2851
  --color-border-strong-hover: #383846;
2852
+ --color-border-hatch: #92929e;
2800
2853
  --color-border-control: #5b5b69;
2801
2854
  --color-focus: #4424c4;
2802
2855
  --color-feedback-success: #0b9a74;
@@ -2851,6 +2904,7 @@
2851
2904
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
2852
2905
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
2853
2906
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
2907
+ --color-presence-flag-text: #ffffff;
2854
2908
  --color-scrollbar: rgba(7, 8, 13, 0.2);
2855
2909
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
2856
2910
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/dusk.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #393044;
40
40
  --color-border-strong: #393044;
41
41
  --color-border-strong-hover: #473e53;
42
+ --color-border-hatch: #292232;
42
43
  --color-border-control: #837b92;
43
44
  --color-focus: #d6b7fc;
44
45
  --color-feedback-success: #8ec899;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #ccc5d5;
146
148
  --color-border-strong: #ccc5d5;
147
149
  --color-border-strong-hover: #bbb4c4;
150
+ --color-border-hatch: #dcd7e3;
148
151
  --color-border-control: #7d7089;
149
152
  --color-focus: #4e247e;
150
153
  --color-feedback-success: #527b67;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #ccc5d5;
252
256
  --color-border-strong: #ccc5d5;
253
257
  --color-border-strong-hover: #bbb4c4;
258
+ --color-border-hatch: #dcd7e3;
254
259
  --color-border-control: #7d7089;
255
260
  --color-focus: #4e247e;
256
261
  --color-feedback-success: #527b67;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/high-contrast.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #9a9aae;
40
40
  --color-border-strong: #9a9aae;
41
41
  --color-border-strong-hover: #b8b8c8;
42
+ --color-border-hatch: #61616f;
42
43
  --color-border-control: #a2a2b4;
43
44
  --color-focus: #ffe066;
44
45
  --color-feedback-success: #34c98b;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #4f4f60;
146
148
  --color-border-strong: #4f4f60;
147
149
  --color-border-strong-hover: #383846;
150
+ --color-border-hatch: #92929e;
148
151
  --color-border-control: #5b5b69;
149
152
  --color-focus: #4424c4;
150
153
  --color-feedback-success: #0b9a74;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #4f4f60;
252
256
  --color-border-strong: #4f4f60;
253
257
  --color-border-strong-hover: #383846;
258
+ --color-border-hatch: #92929e;
254
259
  --color-border-control: #5b5b69;
255
260
  --color-focus: #4424c4;
256
261
  --color-feedback-success: #0b9a74;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/iris.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #39334b;
40
40
  --color-border-strong: #39334b;
41
41
  --color-border-strong-hover: #48415d;
42
+ --color-border-hatch: #292339;
42
43
  --color-border-control: #767285;
43
44
  --color-focus: #9584ff;
44
45
  --color-feedback-success: #27cf9b;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #c8c4d8;
146
148
  --color-border-strong: #c8c4d8;
147
149
  --color-border-strong-hover: #b6b2c8;
150
+ --color-border-hatch: #dbd8e7;
148
151
  --color-border-control: #4c495b;
149
152
  --color-focus: #4a2abd;
150
153
  --color-feedback-success: #039571;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #c8c4d8;
252
256
  --color-border-strong: #c8c4d8;
253
257
  --color-border-strong-hover: #b6b2c8;
258
+ --color-border-hatch: #dbd8e7;
254
259
  --color-border-control: #4c495b;
255
260
  --color-focus: #4a2abd;
256
261
  --color-feedback-success: #039571;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/ledger.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #3a3730;
40
40
  --color-border-strong: #3a3730;
41
41
  --color-border-strong-hover: #4b473e;
42
+ --color-border-hatch: #2b2923;
42
43
  --color-border-control: #827d74;
43
44
  --color-focus: #5272f6;
44
45
  --color-feedback-success: #53cc8f;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #cdc6b8;
146
148
  --color-border-strong: #cdc6b8;
147
149
  --color-border-strong-hover: #bab1a0;
150
+ --color-border-hatch: #ddd9cf;
148
151
  --color-border-control: #7e776b;
149
152
  --color-focus: #2f50d8;
150
153
  --color-feedback-success: #1a9368;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #cdc6b8;
252
256
  --color-border-strong: #cdc6b8;
253
257
  --color-border-strong-hover: #bab1a0;
258
+ --color-border-hatch: #ddd9cf;
254
259
  --color-border-control: #7e776b;
255
260
  --color-focus: #2f50d8;
256
261
  --color-feedback-success: #1a9368;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/nightshade.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #2b3245;
40
40
  --color-border-strong: #2b3245;
41
41
  --color-border-strong-hover: #38405a;
42
+ --color-border-hatch: #1f2432;
42
43
  --color-border-control: #72798b;
43
44
  --color-focus: #9584ff;
44
45
  --color-feedback-success: #20cc98;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #c9cfdc;
146
148
  --color-border-strong: #c9cfdc;
147
149
  --color-border-strong-hover: #b7becd;
150
+ --color-border-hatch: #dbdfe8;
148
151
  --color-border-control: #464b5c;
149
152
  --color-focus: #4a2abd;
150
153
  --color-feedback-success: #039571;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #c9cfdc;
252
256
  --color-border-strong: #c9cfdc;
253
257
  --color-border-strong-hover: #b7becd;
258
+ --color-border-hatch: #dbdfe8;
254
259
  --color-border-control: #464b5c;
255
260
  --color-focus: #4a2abd;
256
261
  --color-feedback-success: #039571;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/nocturne.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #2b3245;
40
40
  --color-border-strong: #2b3245;
41
41
  --color-border-strong-hover: #384158;
42
+ --color-border-hatch: #1f2432;
42
43
  --color-border-control: #727a8f;
43
44
  --color-focus: #606af8;
44
45
  --color-feedback-success: #34c98b;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #c9cfdc;
146
148
  --color-border-strong: #c9cfdc;
147
149
  --color-border-strong-hover: #b5bdce;
150
+ --color-border-hatch: #dbdfe8;
148
151
  --color-border-control: #74798c;
149
152
  --color-focus: #4c55e6;
150
153
  --color-feedback-success: #00916f;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #c9cfdc;
252
256
  --color-border-strong: #c9cfdc;
253
257
  --color-border-strong-hover: #b5bdce;
258
+ --color-border-hatch: #dbdfe8;
254
259
  --color-border-control: #74798c;
255
260
  --color-focus: #4c55e6;
256
261
  --color-feedback-success: #00916f;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/origin.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #3f4145;
40
40
  --color-border-strong: #4a4d52;
41
41
  --color-border-strong-hover: #4a4d52;
42
+ --color-border-hatch: #323439;
42
43
  --color-border-control: #828ca0;
43
44
  --color-focus: #7d8fe8;
44
45
  --color-feedback-success: #3eba82;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #c4c4ca;
146
148
  --color-border-strong: #d4d4d8;
147
149
  --color-border-strong-hover: #b4b4bc;
150
+ --color-border-hatch: #e5e5e8;
148
151
  --color-border-control: #71717a;
149
152
  --color-focus: #5469d4;
150
153
  --color-feedback-success: #0f9a73;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #c4c4ca;
252
256
  --color-border-strong: #d4d4d8;
253
257
  --color-border-strong-hover: #b4b4bc;
258
+ --color-border-hatch: #e5e5e8;
254
259
  --color-border-control: #71717a;
255
260
  --color-focus: #5469d4;
256
261
  --color-feedback-success: #0f9a73;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes/violet.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --color-border-hover: #303038;
40
40
  --color-border-strong: #303038;
41
41
  --color-border-strong-hover: #3e3e48;
42
+ --color-border-hatch: #232329;
42
43
  --color-border-control: #797983;
43
44
  --color-focus: #7e5bff;
44
45
  --color-feedback-success: #3ecf8f;
@@ -93,6 +94,7 @@
93
94
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
95
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
96
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
97
+ --color-presence-flag-text: #07080d;
96
98
  --color-scrollbar: rgba(255, 255, 255, 0.16);
97
99
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
100
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -145,6 +147,7 @@
145
147
  --color-border-hover: #d3d3ce;
146
148
  --color-border-strong: #d3d3ce;
147
149
  --color-border-strong-hover: #c2c2bc;
150
+ --color-border-hatch: #e2e2df;
148
151
  --color-border-control: #7b7a81;
149
152
  --color-focus: #6b45f0;
150
153
  --color-feedback-success: #009b74;
@@ -199,6 +202,7 @@
199
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-presence-flag-text: #ffffff;
202
206
  --color-scrollbar: rgba(7, 8, 13, 0.2);
203
207
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
208
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -251,6 +255,7 @@
251
255
  --color-border-hover: #d3d3ce;
252
256
  --color-border-strong: #d3d3ce;
253
257
  --color-border-strong-hover: #c2c2bc;
258
+ --color-border-hatch: #e2e2df;
254
259
  --color-border-control: #7b7a81;
255
260
  --color-focus: #6b45f0;
256
261
  --color-feedback-success: #009b74;
@@ -305,6 +310,7 @@
305
310
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
311
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
312
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
313
+ --color-presence-flag-text: #ffffff;
308
314
  --color-scrollbar: rgba(7, 8, 13, 0.2);
309
315
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
316
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/themes.css CHANGED
@@ -45,6 +45,7 @@
45
45
  --color-border-hover: #2d3448;
46
46
  --color-border-strong: #2d3448;
47
47
  --color-border-strong-hover: #424f74;
48
+ --color-border-hatch: #202534;
48
49
  --color-border-control: #7f879c;
49
50
  --color-focus: #8572fe;
50
51
  --color-feedback-success: #34c98b;
@@ -99,6 +100,7 @@
99
100
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
100
101
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
101
102
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
103
+ --color-presence-flag-text: #07080d;
102
104
  --color-scrollbar: rgba(255, 255, 255, 0.16);
103
105
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
104
106
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -154,6 +156,7 @@
154
156
  --color-border-hover: #c9cfdc;
155
157
  --color-border-strong: #c9cfdc;
156
158
  --color-border-strong-hover: #acb6cc;
159
+ --color-border-hatch: #dbdfe8;
157
160
  --color-border-control: #777a83;
158
161
  --color-focus: #735af2;
159
162
  --color-feedback-success: #0b9a74;
@@ -208,6 +211,7 @@
208
211
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
209
212
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
210
213
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
214
+ --color-presence-flag-text: #ffffff;
211
215
  --color-scrollbar: rgba(7, 8, 13, 0.2);
212
216
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
213
217
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
@@ -261,6 +265,7 @@
261
265
  --color-border-hover: #c9cfdc;
262
266
  --color-border-strong: #c9cfdc;
263
267
  --color-border-strong-hover: #acb6cc;
268
+ --color-border-hatch: #dbdfe8;
264
269
  --color-border-control: #777a83;
265
270
  --color-focus: #735af2;
266
271
  --color-feedback-success: #0b9a74;
@@ -315,6 +320,7 @@
315
320
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
316
321
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
317
322
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
323
+ --color-presence-flag-text: #ffffff;
318
324
  --color-scrollbar: rgba(7, 8, 13, 0.2);
319
325
  --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
320
326
  --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
package/dist/css/tokens.css CHANGED
@@ -52,6 +52,7 @@
52
52
  --color-border-hover: rgba(255, 255, 255, 0.15);
53
53
  --color-border-strong: #4a4d52; /** The heavier resting border, at the plain border's hover weight. It used to hold the same value as --color-border-default in both palettes, so the pair was a copy of the plain pair rather than a third step. */
54
54
  --color-border-strong-hover: #5a5e65; /** One step past strong, so the strong pair is a real pair. */
55
+ --color-border-hatch: #2c2e31; /** The arranging hatch's line: strong at 60% over the sheet. A board under construction draws its diagonals in it, and so does a note standing on that board, which is why it is a colour of its own and not the strong border faded on a layer. */
55
56
  --color-border-control: #7f848e; /** The boundary of an input, a checkbox or a switch. It clears 3:1 on every surface a control can sit on, the overlay composites included: a checkbox inside a hovered row in a dialog body is the case the opaque surfaces alone do not catch. */
56
57
  --color-focus: #7e5bff; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. It is the ACCENT, lightened dE 1.06 along lightness, which clears this root at 3.01:1: #7c56ff itself measured 2.89:1 on a pressed row inside a raised surface, under the 3:1 a ring has to clear, and the accent cannot make that move for it, because any lighter takes the white label of a primary button under the text floor. */
57
58
  --color-feedback-success: #3ecf8f; /** DONE: work that finished. The four states are what a piece of work is doing, and their meanings never move: info is working, warning needs a person, danger is stopped, success is done. The names stay generic because a badge, a callout and a toast mean the same four things. The values here are this root's own; each theme draws its four in tokens/themes, whose comments say what moved each from the approved palette. */
@@ -116,6 +117,7 @@
116
117
  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
117
118
  --color-node-blue-line: rgba(91, 127, 199, 0.38);
118
119
  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
120
+ --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. */
119
121
  --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. */
120
122
  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
121
123
  --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 +165,7 @@
163
165
  --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. */
164
166
  --size-row-md: calc(36px * var(--density, 1));
165
167
  --size-row-lg: calc(48px * var(--density, 1));
168
+ --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. */
166
169
  --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. */
167
170
  --size-nav-row-pad: calc(12px * var(--density, 1));
168
171
  --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 +221,7 @@
218
221
  --z-index-base: 0;
219
222
  --z-index-raised: 1; /** Lifts an element above its siblings inside its own stacking context, such as a control layered over a card. */
220
223
  --z-index-sticky: 10; /** Sticky headers and pinned columns within the page flow. */
224
+ --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. */
221
225
  --z-index-dropdown: 100; /** In-flow menus that stay inside their container rather than portaling to the body. */
222
226
  --z-index-overlay: 200; /** In-page overlays such as drawers and scrims that cover page chrome but not dialogs. */
223
227
  --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 +229,8 @@
225
229
  --z-index-modal: 9999; /** Dialog backdrop and frame. High enough to clear any page chrome an application stacks with its own numbers. */
226
230
  --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. */
227
231
  --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. */
232
+ --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. */
228
233
  --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. */
234
+ --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. */
229
235
  --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. */
230
236
  }
package/dist/index.d.ts CHANGED
@@ -59,6 +59,7 @@ export declare const color: {
59
59
  readonly hover: "rgba(255, 255, 255, 0.15)";
60
60
  readonly strong: "#4a4d52";
61
61
  readonly strongHover: "#5a5e65";
62
+ readonly hatch: "#2c2e31";
62
63
  readonly control: "#7f848e";
63
64
  };
64
65
  readonly focus: "#7e5bff";
@@ -134,6 +135,10 @@ export declare const color: {
134
135
  readonly blueLine: "rgba(91, 127, 199, 0.38)";
135
136
  readonly blueHalo: "rgba(91, 127, 199, 0.16)";
136
137
  };
138
+ readonly presence: {
139
+ readonly flagText: "#07080d";
140
+ };
141
+ readonly changeMark: "rgba(124, 86, 255, 0.32)";
137
142
  readonly scrollbar: "rgba(255, 255, 255, 0.16)";
138
143
  readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
139
144
  readonly qr: {
@@ -189,6 +194,7 @@ export declare const shadow: {
189
194
  readonly hairline: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
190
195
  readonly focus: "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)";
191
196
  readonly selection: "inset 0 0 0 2px var(--color-brand-accent)";
197
+ readonly cursor: "0 2px 8px rgba(0, 0, 0, 0.15)";
192
198
  readonly glow: "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)";
193
199
  };
194
200
  export declare const size: {
@@ -202,6 +208,9 @@ export declare const size: {
202
208
  readonly md: "36px";
203
209
  readonly lg: "48px";
204
210
  };
211
+ readonly sheet: {
212
+ readonly row: "32px";
213
+ };
205
214
  readonly nav: {
206
215
  readonly gutter: "8px";
207
216
  readonly rowPad: "12px";
@@ -278,6 +287,7 @@ export declare const zIndex: {
278
287
  readonly base: "0";
279
288
  readonly raised: "1";
280
289
  readonly sticky: "10";
290
+ readonly presence: "20";
281
291
  readonly dropdown: "100";
282
292
  readonly overlay: "200";
283
293
  readonly layerBase: "9000";
package/dist/index.js CHANGED
@@ -60,6 +60,7 @@ export const color = {
60
60
  "hover": "rgba(255, 255, 255, 0.15)",
61
61
  "strong": "#4a4d52",
62
62
  "strongHover": "#5a5e65",
63
+ "hatch": "#2c2e31",
63
64
  "control": "#7f848e"
64
65
  },
65
66
  "focus": "#7e5bff",
@@ -135,6 +136,10 @@ export const color = {
135
136
  "blueLine": "rgba(91, 127, 199, 0.38)",
136
137
  "blueHalo": "rgba(91, 127, 199, 0.16)"
137
138
  },
139
+ "presence": {
140
+ "flagText": "#07080d"
141
+ },
142
+ "changeMark": "rgba(124, 86, 255, 0.32)",
138
143
  "scrollbar": "rgba(255, 255, 255, 0.16)",
139
144
  "scrollbarHover": "rgba(255, 255, 255, 0.26)",
140
145
  "qr": {
@@ -190,6 +195,7 @@ export const shadow = {
190
195
  "hairline": "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
191
196
  "focus": "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)",
192
197
  "selection": "inset 0 0 0 2px var(--color-brand-accent)",
198
+ "cursor": "0 2px 8px rgba(0, 0, 0, 0.15)",
193
199
  "glow": "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)"
194
200
  };
195
201
  export const size = {
@@ -203,6 +209,9 @@ export const size = {
203
209
  "md": "36px",
204
210
  "lg": "48px"
205
211
  },
212
+ "sheet": {
213
+ "row": "32px"
214
+ },
206
215
  "nav": {
207
216
  "gutter": "8px",
208
217
  "rowPad": "12px",
@@ -279,6 +288,7 @@ export const zIndex = {
279
288
  "base": "0",
280
289
  "raised": "1",
281
290
  "sticky": "10",
291
+ "presence": "20",
282
292
  "dropdown": "100",
283
293
  "overlay": "200",
284
294
  "layerBase": "9000",
package/dist/themes.d.ts CHANGED
@@ -48,6 +48,7 @@ export declare const themes: {
48
48
  readonly hover: "#c9cfdc";
49
49
  readonly strong: "#c9cfdc";
50
50
  readonly strongHover: "#acb6cc";
51
+ readonly hatch: "#dbdfe8";
51
52
  readonly control: "#777a83";
52
53
  };
53
54
  readonly focus: "#735af2";
@@ -109,6 +110,9 @@ export declare const themes: {
109
110
  readonly blueLine: "rgba(64, 98, 167, 0.38)";
110
111
  readonly blueHalo: "rgba(64, 98, 167, 0.16)";
111
112
  };
113
+ readonly presence: {
114
+ readonly flagText: "#ffffff";
115
+ };
112
116
  readonly scrollbar: "rgba(7, 8, 13, 0.2)";
113
117
  readonly scrollbarHover: "rgba(7, 8, 13, 0.32)";
114
118
  };
@@ -168,6 +172,7 @@ export declare const themes: {
168
172
  readonly hover: "#2d3448";
169
173
  readonly strong: "#2d3448";
170
174
  readonly strongHover: "#424f74";
175
+ readonly hatch: "#202534";
171
176
  readonly control: "#7f879c";
172
177
  };
173
178
  readonly focus: "#8572fe";
@@ -229,6 +234,9 @@ export declare const themes: {
229
234
  readonly blueLine: "rgba(91, 127, 199, 0.38)";
230
235
  readonly blueHalo: "rgba(91, 127, 199, 0.16)";
231
236
  };
237
+ readonly presence: {
238
+ readonly flagText: "#07080d";
239
+ };
232
240
  readonly scrollbar: "rgba(255, 255, 255, 0.16)";
233
241
  readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
234
242
  };
package/dist/themes.js CHANGED
@@ -49,6 +49,7 @@ export const themes = {
49
49
  "hover": "#c9cfdc",
50
50
  "strong": "#c9cfdc",
51
51
  "strongHover": "#acb6cc",
52
+ "hatch": "#dbdfe8",
52
53
  "control": "#777a83"
53
54
  },
54
55
  "focus": "#735af2",
@@ -110,6 +111,9 @@ export const themes = {
110
111
  "blueLine": "rgba(64, 98, 167, 0.38)",
111
112
  "blueHalo": "rgba(64, 98, 167, 0.16)"
112
113
  },
114
+ "presence": {
115
+ "flagText": "#ffffff"
116
+ },
113
117
  "scrollbar": "rgba(7, 8, 13, 0.2)",
114
118
  "scrollbarHover": "rgba(7, 8, 13, 0.32)"
115
119
  },
@@ -169,6 +173,7 @@ export const themes = {
169
173
  "hover": "#2d3448",
170
174
  "strong": "#2d3448",
171
175
  "strongHover": "#424f74",
176
+ "hatch": "#202534",
172
177
  "control": "#7f879c"
173
178
  },
174
179
  "focus": "#8572fe",
@@ -230,6 +235,9 @@ export const themes = {
230
235
  "blueLine": "rgba(91, 127, 199, 0.38)",
231
236
  "blueHalo": "rgba(91, 127, 199, 0.16)"
232
237
  },
238
+ "presence": {
239
+ "flagText": "#07080d"
240
+ },
233
241
  "scrollbar": "rgba(255, 255, 255, 0.16)",
234
242
  "scrollbarHover": "rgba(255, 255, 255, 0.26)"
235
243
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crewlethq/tokens",
3
- "version": "0.17.1",
3
+ "version": "0.19.0",
4
4
  "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
5
5
  "license": "MIT AND OFL-1.1",
6
6
  "repository": {
package/test/palette.d.mts CHANGED
@@ -202,3 +202,9 @@ export const VEIL_BAND: readonly number[];
202
202
 
203
203
  /** The alpha the veil draws its own root's frame at. */
204
204
  export const VEIL_ALPHA: number;
205
+
206
+ /** The six node hues a collaborator's presence marks are drawn in, held to 3:1 as marks on every rung. */
207
+ export const PRESENCE_HUES: readonly string[];
208
+
209
+ /** The ink of the name on a presence flag, held to 4.5:1 on every presence hue. */
210
+ export const PRESENCE_FLAG_TEXT: string;
package/test/palette.mjs CHANGED
@@ -306,6 +306,27 @@ const labelOf = (step) => (step.startsWith('--color-feedback-danger') ? DESTRUCT
306
306
  /** The ten seeded avatar grounds, each carrying white initials. */
307
307
  export const AVATAR_TINTS = Array.from({ length: 10 }, (_, i) => `--color-avatar-tint-${i}`);
308
308
 
309
+ // ---------------------------------------------------------------------------
310
+ // Presence
311
+ // ---------------------------------------------------------------------------
312
+
313
+ /**
314
+ * The six node hues a collaborator's presence is drawn in, and the ink of the
315
+ * name flag filled with each.
316
+ *
317
+ * PRESENCE IS THE NARROW EXCEPTION to colour carrying state: a collaborator's
318
+ * hue ties their cursor, their selection ring, their cell outline and their
319
+ * name flag to their name, and is spent on nothing else. Two promises follow.
320
+ * The flag's name is TEXT on the hue, so it clears 4.5:1 there in every
321
+ * palette; and the ring and the cursor are MARKS on content, so the hue clears
322
+ * 3:1 on every rung a sheet or a page can stand on. The high-contrast theme is
323
+ * held to the same 4.5: the hue is the collaborator's identity rather than a
324
+ * palette's step, so it is not re-tuned per theme, and the name is also said
325
+ * in words wherever presence is listed.
326
+ */
327
+ export const PRESENCE_HUES = ['purple', 'cyan', 'green', 'amber', 'rose', 'blue'].map((hue) => `--color-node-${hue}`);
328
+ export const PRESENCE_FLAG_TEXT = '--color-presence-flag-text';
329
+
309
330
  // ---------------------------------------------------------------------------
310
331
  // The rail
311
332
  // ---------------------------------------------------------------------------
@@ -874,6 +895,17 @@ function checkState(state, values, profile, push, theme = { tint: null, contrast
874
895
  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})`);
875
896
  }
876
897
 
898
+ // PRESENCE. See PRESENCE_HUES.
899
+ {
900
+ const ink = colour(PRESENCE_FLAG_TEXT);
901
+ const low = worst(ink, PRESENCE_HUES.map((name) => [name, colour(name)]));
902
+ 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})`);
903
+ for (const name of PRESENCE_HUES) {
904
+ const mark = worst(colour(name), opaque);
905
+ 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})`);
906
+ }
907
+ }
908
+
877
909
  // THE PRIMARY ACTION'S STEPS. See ACTION_STEPS.
878
910
  for (const [rule, step, from] of ACTION_STEPS) {
879
911
  const name = labelOf(step);