@tensor_1/tokens 2.36.0 → 2.37.0

package/build/css/tokens.css

@@ -96,6 +96,12 @@
     --uix-scrollbar-track: transparent;
     --uix-scrim: rgba(0,0,0,.5);
     --uix-scrim-strong: rgba(0,0,0,.7);
+    --uix-print-ink: #0A0A0A;
+    --uix-print-ink-quiet: #525252;
+    --uix-print-paper: #FFFFFF;
+    --uix-print-paper-quiet: #F0F0F0;
+    --uix-print-line: #8A8A8A;
+    --uix-print-danger: #C40012;
     --uix-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
     --uix-shadow-md: 0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
     --uix-shadow-popover: 0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05);

package/build/tailwind/preset.cjs

@@ -97,6 +97,12 @@ module.exports = {
       "uix-scrollbar-track": "var(--uix-scrollbar-track)",
       "uix-scrim": "var(--uix-scrim)",
       "uix-scrim-strong": "var(--uix-scrim-strong)",
+      "uix-print-ink": "var(--uix-print-ink)",
+      "uix-print-ink-quiet": "var(--uix-print-ink-quiet)",
+      "uix-print-paper": "var(--uix-print-paper)",
+      "uix-print-paper-quiet": "var(--uix-print-paper-quiet)",
+      "uix-print-line": "var(--uix-print-line)",
+      "uix-print-danger": "var(--uix-print-danger)",
       },
       borderRadius: {
       "uix-xs": "var(--uix-radius-xs)",

package/build/tailwind/theme.css

@@ -94,6 +94,12 @@
   --color-uix-scrollbar-track: var(--uix-scrollbar-track);
   --color-uix-scrim: var(--uix-scrim);
   --color-uix-scrim-strong: var(--uix-scrim-strong);
+  --color-uix-print-ink: var(--uix-print-ink);
+  --color-uix-print-ink-quiet: var(--uix-print-ink-quiet);
+  --color-uix-print-paper: var(--uix-print-paper);
+  --color-uix-print-paper-quiet: var(--uix-print-paper-quiet);
+  --color-uix-print-line: var(--uix-print-line);
+  --color-uix-print-danger: var(--uix-print-danger);
 
   --radius-uix-xs: var(--uix-radius-xs);
   --radius-uix-sm: var(--uix-radius-sm);

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-md" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
+export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -97,6 +97,12 @@ export const cssVar = {
   "scrollbar-track": "var(--uix-scrollbar-track)",
   "scrim": "var(--uix-scrim)",
   "scrim-strong": "var(--uix-scrim-strong)",
+  "print-ink": "var(--uix-print-ink)",
+  "print-ink-quiet": "var(--uix-print-ink-quiet)",
+  "print-paper": "var(--uix-print-paper)",
+  "print-paper-quiet": "var(--uix-print-paper-quiet)",
+  "print-line": "var(--uix-print-line)",
+  "print-danger": "var(--uix-print-danger)",
   "shadow-sm": "var(--uix-shadow-sm)",
   "shadow-md": "var(--uix-shadow-md)",
   "shadow-popover": "var(--uix-shadow-popover)",
@@ -270,6 +276,12 @@ export const light = {
   "scrollbar-track": "transparent",
   "scrim": "rgba(0,0,0,.5)",
   "scrim-strong": "rgba(0,0,0,.7)",
+  "print-ink": "#0A0A0A",
+  "print-ink-quiet": "#525252",
+  "print-paper": "#FFFFFF",
+  "print-paper-quiet": "#F0F0F0",
+  "print-line": "#8A8A8A",
+  "print-danger": "#C40012",
   "shadow-sm": "0 1px 2px rgba(0,0,0,.06)",
   "shadow-md": "0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)",
   "shadow-popover": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.36.0",
+  "version": "2.37.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "sideEffects": [

package/styles/components/scheduling-calendar.css

@@ -24,6 +24,7 @@
     --calendar-status-text-dim: var(--uix-text-muted);
     --calendar-band-medium-edge: var(--uix-neutral-solid);
     --calendar-band-high-fill: var(--uix-danger);
+    --calendar-band-high-edge: var(--uix-danger); /* read on paper only, where the fill is the paper's */
     --calendar-band-high-text: var(--uix-danger-fg);
     --calendar-window-surface: var(--uix-neutral-bg);
     --calendar-window-ink: var(--uix-neutral-solid);
@@ -280,6 +281,8 @@
   .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__entry-text { white-space:normal; overflow-wrap:anywhere; max-height:100%; }
   .uix-scheduling-calendar__tg-item[data-lines="1"] > .uix-scheduling-calendar__entry-text { white-space:nowrap; overflow-wrap:normal; }
   .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__markers { height:1rem; }
+  /* an item too short for a line shows its markers only; its words are in the markup for paper (HAR-1541) */
+  .uix-scheduling-calendar__tg-item > [data-room="none"] { display:none; }
   .uix-scheduling-calendar__tg-from { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; font-style:italic; }
   /* an item that crosses midnight: two parts with the shared edge left open */
   .uix-scheduling-calendar__tg-item[data-part="start"] { border-bottom-style:dashed; border-bottom-left-radius:0; border-bottom-right-radius:0; }
@@ -298,4 +301,115 @@
   .uix-scheduling-calendar__tg-probe { position:absolute; left:0; top:0; height:0; padding:0 0.125rem; border:0 solid transparent; border-width:0 1px; visibility:hidden; overflow:hidden; white-space:nowrap; font-size:var(--uix-text-meta); pointer-events:none; }
 
   .uix-scheduling-calendar__state { padding:var(--uix-space-8); border:1px dashed var(--calendar-chrome-line-strong); border-radius:var(--uix-radius-lg); text-align:center; }
+  /* ── Print (HAR-1541) ────────────────────────────────────────────────────────────────────────
+     The same markup on paper. Nothing scrolls or is cut, and the colours are the paper's (light,
+     whatever theme the screen has). The calendar asks the browser to print its surfaces as they
+     are; a browser may refuse, so no meaning rests on a fill or a pattern: each is an edge too.
+     The first rule is the colour map again. */
+  @media print {
+    .uix-scheduling-calendar {
+      --calendar-chrome-text: var(--uix-print-ink);
+      --calendar-chrome-text-quiet: var(--uix-print-ink-quiet);
+      --calendar-chrome-surface: var(--uix-print-paper);
+      --calendar-chrome-surface-quiet: var(--uix-print-paper-quiet);
+      --calendar-chrome-line: var(--uix-print-line);
+      --calendar-chrome-line-strong: var(--uix-print-ink-quiet);
+      --calendar-status-surface: var(--uix-print-paper);
+      --calendar-status-surface-quiet: var(--uix-print-paper-quiet);
+      --calendar-status-edge: var(--uix-print-line);
+      --calendar-status-edge-strong: var(--uix-print-ink-quiet);
+      --calendar-status-text: var(--uix-print-ink);
+      --calendar-status-text-dim: var(--uix-print-ink-quiet);
+      --calendar-band-medium-edge: var(--uix-print-ink-quiet);
+      --calendar-band-high-fill: var(--uix-print-paper);
+      --calendar-band-high-edge: var(--uix-print-danger);
+      --calendar-band-high-text: var(--uix-print-ink);
+      --calendar-window-surface: var(--uix-print-paper);
+      --calendar-window-ink: var(--uix-print-ink);
+      --calendar-window-edge: var(--uix-print-ink-quiet);
+      --calendar-window-text: var(--uix-print-ink);
+      --calendar-marker-ink: var(--uix-print-ink);
+      --calendar-chrome-now: var(--uix-print-ink);
+      --calendar-chrome-ghost: var(--uix-print-line);
+      --calendar-chrome-ghost-surface: var(--uix-print-paper);
+    }
+    /* The calendar brings its own paper and asks for its surfaces to be printed as they are, so
+       an item covers what is behind it whether or not the reader prints background graphics. */
+    :where(.uix-scheduling-calendar) { background:var(--calendar-chrome-surface); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
+    /* a focus ring belongs to the screen */
+    .uix-scheduling-calendar :focus-visible { outline:none; }
+    /* nothing scrolls on paper: a grid is as wide as the page and as tall as what it holds */
+    .uix-scheduling-calendar__grid,.uix-scheduling-calendar__timegrid,.uix-scheduling-calendar__agenda--virtual { overflow:visible; max-height:none; }
+    .uix-scheduling-calendar__grid,.uix-scheduling-calendar__week { grid-template-columns:repeat(7,minmax(0,1fr)); }
+    .uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__tg-body { grid-template-columns:var(--calendar-gutter) repeat(var(--uix-scheduling-calendar-days,7),minmax(0,1fr)); min-width:0; }
+    /* controls do nothing on paper; the period title, the zone label and the legend stay */
+    .uix-scheduling-calendar__header :is(button,.uix-segmented) { display:none; }
+    /* the line for "now" and a move not yet sent belong to the moment, not to the page */
+    .uix-scheduling-calendar__tg-now,.uix-scheduling-calendar__tg-ghost { display:none; }
+    /* a week row, an agenda row, the legend, and a time grid that fits a page stay on one page;
+       a heading stays with what it heads */
+    .uix-scheduling-calendar__week,.uix-scheduling-calendar__agenda-rows > li,.uix-scheduling-calendar__agenda-vrow,.uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__timegrid,.uix-scheduling-calendar__legend { break-inside:avoid; }
+    .uix-scheduling-calendar__header,.uix-scheduling-calendar__agenda-vrow[data-kind="heading"] { break-after:avoid; }
+    .uix-scheduling-calendar__agenda-head { position:static; break-after:avoid; }
+    .uix-scheduling-calendar__empty { position:static; }
+
+    /* Month: a week is as tall as the page allows for six of them, and grows with what it holds */
+    .uix-scheduling-calendar__day { min-height:clamp(4.5rem,calc((100vh - 10rem) / 6),8rem); }
+    .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__week { height:auto; }
+    .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__day { overflow:visible; }
+    /* a chip holds its whole title, and a day badge its whole text */
+    .uix-scheduling-calendar__entries > .uix-scheduling-calendar__entry { height:auto; min-height:var(--calendar-chip); white-space:normal; overflow:visible; }
+    .uix-scheduling-calendar__entries > .uix-scheduling-calendar__entry > .uix-scheduling-calendar__entry-text { overflow:visible; overflow-wrap:anywhere; }
+    .uix-scheduling-calendar__badge { overflow:visible; white-space:normal; }
+
+    /* Time grid: an hour is as tall as the page allows for the whole day, between a readable
+       hour and the hour of the screen. Every position is counted in hours, so the items follow. */
+    .uix-scheduling-calendar__timegrid { --calendar-hour:clamp(1.25rem,calc((100vh - 21rem) / var(--uix-scheduling-calendar-hours,24)),3rem); margin-bottom:var(--uix-space-8); }
+    .uix-scheduling-calendar__tg-dayhead,.uix-scheduling-calendar__tg-dayhead > .uix-scheduling-calendar__markers { overflow:visible; flex-wrap:wrap; }
+    /* the lanes over the days grow with the words of a window or of an item with no time of day */
+    .uix-scheduling-calendar__tg-strip { grid-auto-rows:minmax(var(--calendar-lane),auto); }
+    .uix-scheduling-calendar__tg-strip > :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__tg-span),.uix-scheduling-calendar__agenda-notes .uix-scheduling-calendar__window,.uix-scheduling-calendar__agenda-vrow > .uix-scheduling-calendar__window { height:auto; min-height:calc(var(--calendar-lane) - var(--calendar-gap)); white-space:normal; overflow:visible; }
+    :is(.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__agenda-notes,.uix-scheduling-calendar__agenda-vrow) :is(.uix-scheduling-calendar__window-text,.uix-scheduling-calendar__window-name,.uix-scheduling-calendar__window-scope,.uix-scheduling-calendar__entry-text) { flex-wrap:wrap; overflow:visible; overflow-wrap:anywhere; }
+    /* the hour lines are a background: on paper each hour label draws its own line across the days */
+    .uix-scheduling-calendar__tg-column { background:none; }
+    .uix-scheduling-calendar__tg-gutter { position:static; }
+    .uix-scheduling-calendar__tg-gutter > .uix-scheduling-calendar__tg-hour { left:0; right:0; padding-right:calc(100% - var(--calendar-gutter) + var(--uix-space-1)); }
+    .uix-scheduling-calendar__tg-gutter > .uix-scheduling-calendar__tg-hour::after { content:""; position:absolute; top:0; left:var(--calendar-gutter); right:0; border-top:1px dotted var(--calendar-chrome-line); }
+    /* the hours of a window for everything: a quiet tint under the hour lines, and an edge of its own inside the
+       day. Its clip makes it a layer of its own, painted in the order of the grid: `order` puts it before the
+       hours, so their lines are drawn over it and the items over both. */
+    .uix-scheduling-calendar__tg-shade[data-pattern] { order:-1; margin-inline:var(--uix-space-1); border-inline:1px dashed var(--calendar-window-edge); background-color:var(--calendar-chrome-surface-quiet); opacity:1; }
+    /* an item is at least as tall as its time and grows to hold its words; one that starts later lies over the end of it */
+    .uix-scheduling-calendar__tg-item { height:auto; min-height:max(calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-hour) - 1px),0.875rem); overflow:visible; }
+    .uix-scheduling-calendar__tg-item[data-lines] > :is(.uix-scheduling-calendar__entry-text,.uix-scheduling-calendar__tg-from) { display:block; max-height:none; overflow:visible; white-space:normal; overflow-wrap:anywhere; }
+
+    /* Agenda: the long form mounts every row while the page prints, each as tall as its text */
+    .uix-scheduling-calendar__agenda-window { padding:0 !important; }
+    .uix-scheduling-calendar__agenda--virtual .uix-scheduling-calendar__agenda-vrow,.uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-vrow { height:auto; min-height:44px; overflow:visible; }
+    .uix-scheduling-calendar__agenda--virtual .uix-scheduling-calendar__agenda-vrow :is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda-main,.uix-scheduling-calendar__agenda-time,.uix-scheduling-calendar__agenda-heading,.uix-scheduling-calendar__markers,.uix-scheduling-calendar__markers > span,.uix-scheduling-calendar__marker) { flex-wrap:wrap; overflow:visible; white-space:normal; }
+
+    /* Paper has no fill to rely on: the high band is the heaviest edge, in the one signal colour, in every
+       state. Its fill is the paper's on paper (the map above), so it still covers what is behind it, and its
+       edge has a name of its own there. */
+    :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"] { border-width:3px; border-color:var(--calendar-band-high-edge); }
+    :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"]:is([data-status="tentative"],[data-status="dead"],[data-status="done"]) { border-color:var(--calendar-band-high-edge); }
+    .uix-scheduling-calendar__entry[data-band="high"][data-dim] { border-color:var(--calendar-band-high-edge); }
+    /* a highlight is a heavier edge, which does not show beside the edge of the high band, and in
+       the agendas a shadow, which may not print: on paper its title is underlined as well */
+    .uix-scheduling-calendar__entry[data-highlight] .uix-scheduling-calendar__title,:is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda > ol > li > button)[data-highlight] :is(.uix-scheduling-calendar__title,strong) { text-decoration:underline; }
+    /* a window's pattern is a background and may not print: its edge says the same */
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="diagonal"] { border-style:dashed; }
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="cross"] { border-style:double; border-width:3px; }
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="dotted"] { border-style:dotted; border-width:2px; }
+    /* a window for everything keeps its heavier edge in each pattern */
+    .uix-scheduling-calendar__window[data-global][data-pattern="diagonal"] { border-width:2px; }
+    .uix-scheduling-calendar__window[data-global][data-pattern="cross"] { border-width:4px; }
+    .uix-scheduling-calendar__window[data-global][data-pattern="dotted"] { border-width:3px; }
+    /* a window that goes on past the row is open at that end, whatever its pattern */
+    .uix-scheduling-calendar__window[data-continues-before] { border-left-style:none; }
+    .uix-scheduling-calendar__window[data-continues-after] { border-right-style:none; }
+    /* a bar too short for all its words gives up the scope first and keeps the name */
+    .uix-scheduling-calendar__window-name { flex-shrink:0; }
+    .uix-scheduling-calendar__window-scope { flex-shrink:1; }
+  }
 }

package/styles/components/scheduling-timeline.css

@@ -29,6 +29,7 @@
     --timeline-status-text-dim: var(--uix-text-muted);
     --timeline-band-medium-edge: var(--uix-neutral-solid);
     --timeline-band-high-fill: var(--uix-danger);
+    --timeline-band-high-edge: var(--uix-danger); /* read on paper only, where the fill is the paper's */
     --timeline-band-high-text: var(--uix-danger-fg);
     --timeline-window-surface: var(--uix-neutral-bg);
     --timeline-window-ink: var(--uix-neutral-solid);
@@ -229,4 +230,77 @@
 
   .uix-scheduling-timeline__empty { margin: 0; color: var(--timeline-chrome-text-quiet); font-size: var(--uix-text-meta); }
   .uix-scheduling-timeline__state { padding: var(--uix-space-8); border: 1px dashed var(--timeline-chrome-line-strong); border-radius: var(--uix-radius-lg); text-align: center; }
+  /* ── Print (HAR-1541) ────────────────────────────────────────────────────────────────────────
+     The same markup on paper: nothing scrolls or sticks, the axis is as wide as the page, the
+     colours are the paper's (light, whatever theme the screen has), and nothing depends on a
+     background, which a browser drops unless the reader asks for background graphics. The first
+     rule is the colour map again. */
+  @media print {
+    .uix-scheduling-timeline {
+      --timeline-chrome-text: var(--uix-print-ink);
+      --timeline-chrome-text-quiet: var(--uix-print-ink-quiet);
+      --timeline-chrome-surface: var(--uix-print-paper);
+      --timeline-chrome-surface-quiet: var(--uix-print-paper-quiet);
+      --timeline-chrome-line: var(--uix-print-line);
+      --timeline-chrome-line-strong: var(--uix-print-ink-quiet);
+      --timeline-chrome-now: var(--uix-print-ink);
+      --timeline-chrome-now-text: var(--uix-print-paper);
+      --timeline-chrome-ghost: var(--uix-print-ink-quiet);
+      --timeline-chrome-ghost-halo: var(--uix-print-paper);
+      --timeline-status-surface: var(--uix-print-paper);
+      --timeline-status-surface-quiet: var(--uix-print-paper-quiet);
+      --timeline-status-edge: var(--uix-print-line);
+      --timeline-status-edge-strong: var(--uix-print-ink-quiet);
+      --timeline-status-text: var(--uix-print-ink);
+      --timeline-status-text-dim: var(--uix-print-ink-quiet);
+      --timeline-band-medium-edge: var(--uix-print-ink-quiet);
+      --timeline-band-high-fill: var(--uix-print-paper);
+      --timeline-band-high-edge: var(--uix-print-danger);
+      --timeline-band-high-text: var(--uix-print-ink);
+      --timeline-window-surface: var(--uix-print-paper);
+      --timeline-window-ink: var(--uix-print-ink-quiet);
+      --timeline-window-edge: var(--uix-print-ink-quiet);
+      --timeline-window-text: var(--uix-print-ink);
+      --timeline-marker-ink: var(--uix-print-ink);
+      --timeline-marker-line: var(--uix-print-ink-quiet);
+    }
+    /* The timeline brings its own paper and asks for its surfaces to be printed as they are, so a bar
+       covers the window and the grid lines behind it whether or not the reader prints background graphics. */
+    :where(.uix-scheduling-timeline) { background: var(--timeline-chrome-surface); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    /* nothing scrolls on paper: the lanes are as wide as the page (every position is a share of
+       the axis, so the bars follow) and as tall as their rows. `!important` answers the sizes
+       the component writes on the elements themselves. */
+    .uix-scheduling-timeline__scroller { overflow: visible !important; max-height: none !important; }
+    .uix-scheduling-timeline__grid { width: 100%; min-width: 0; }
+    .uix-scheduling-timeline__track { flex: 1 1 0; min-width: 0 !important; }
+    /* nothing sticks: the axis, the lane names and the group heads stay where they are in the flow */
+    .uix-scheduling-timeline__row--axis,.uix-scheduling-timeline__lane-label,.uix-scheduling-timeline__group-label,.uix-scheduling-timeline__now-label { position: static; }
+    /* a lane and a group head stay on one page; a group head stays with its first lane */
+    .uix-scheduling-timeline__row { break-inside: avoid; }
+    .uix-scheduling-timeline__row--group,.uix-scheduling-timeline__row--axis { break-after: avoid; }
+    /* the line for "now" and a move not yet sent belong to the moment, not to the page */
+    .uix-scheduling-timeline__now,.uix-scheduling-timeline__ghost { display: none; }
+    /* the grid lines are backgrounds: on paper each is an edge */
+    .uix-scheduling-timeline__gridline { width: 0; background: none; border-left: 1px solid var(--timeline-chrome-line); }
+    .uix-scheduling-timeline__gridline[data-major] { background: none; border-left-color: var(--timeline-chrome-line-strong); }
+    .uix-scheduling-timeline__gridline[data-minor] { background: none; border-left-style: dashed; }
+    /* paper has no fill to rely on: the high band is a heavy edge in the one signal colour, in every state.
+       Its fill is the paper's on paper (the map above), so it still covers what is behind it, and its edge
+       has a name of its own there. */
+    .uix-scheduling-timeline__item[data-band="high"] { border-width: 2px; border-color: var(--timeline-band-high-edge); }
+    .uix-scheduling-timeline__item[data-band="high"]:is([data-status="tentative"], [data-status="dead"], [data-status="done"]) { border-color: var(--timeline-band-high-edge); }
+    /* done on the high band is a line painted inside the fill on a screen: on paper it is the cue of every
+       done bar, the bottom edge alone */
+    .uix-scheduling-timeline__item[data-band="high"][data-status="done"] { border-style: none none solid; background-image: none; }
+    /* a window's pattern is a background and may not print: its edges say the same */
+    .uix-scheduling-timeline__overlay[data-pattern="diagonal"] { border-style: none dashed; }
+    .uix-scheduling-timeline__overlay[data-pattern="cross"] { border-style: none double; border-width: 0 3px; }
+    .uix-scheduling-timeline__overlay[data-pattern="dotted"] { border-style: none dotted; border-width: 0 2px; }
+    /* a note on the column of a day is not cut at the column: on a narrow page a day is narrower than its note */
+    .uix-scheduling-timeline__column-note { overflow: visible; }
+    /* a bar too short for all the words of a window gives up the scope first and keeps the name */
+    .uix-scheduling-timeline__overlay-name { flex-shrink: 0; }
+    /* painted shapes ask to be printed even without background graphics: a marker's glyph and the hatch of bars that share time */
+    .uix-scheduling-timeline__item-marker[data-glyph]::before,.uix-scheduling-timeline__item[data-conflict]::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+  }
 }

package/tokens/base/color.json

@@ -103,5 +103,12 @@
   "scrollbar-track":       { "$type": "color", "$value": "transparent" },
 
   "scrim":        { "$type": "color", "$value": "rgba(0,0,0,.5)", "$description": "Backdrop behind modal / drawer / side-peek overlays and the avatar edit-overlay — dims the content beneath. Theme-invariant: a black scrim reads on light and dark alike (no dark override)." },
-  "scrim-strong": { "$type": "color", "$value": "rgba(0,0,0,.7)", "$description": "Heavier scrim for media-focus surfaces (lightbox), where the backdrop should recede fully behind the image." }
+  "scrim-strong": { "$type": "color", "$value": "rgba(0,0,0,.7)", "$description": "Heavier scrim for media-focus surfaces (lightbox), where the backdrop should recede fully behind the image." },
+
+  "print-ink":         { "$type": "color", "$value": "#0A0A0A", "$description": "Text and strong lines on paper. Theme-invariant (no dark override): paper is light whatever theme the screen has. Read only inside @media print, by components that print (HAR-1541)." },
+  "print-ink-quiet":   { "$type": "color", "$value": "#525252", "$description": "Secondary text on paper: times, counts, dimmed items. 7.8:1 on print-paper." },
+  "print-paper":       { "$type": "color", "$value": "#FFFFFF", "$description": "The page. Used where a printed component must cover what is under it." },
+  "print-paper-quiet": { "$type": "color", "$value": "#F0F0F0", "$description": "A quiet tint for headers when the reader prints background graphics. Nothing may depend on it: it is dropped when they do not." },
+  "print-line":        { "$type": "color", "$value": "#8A8A8A", "$description": "Cell and row lines on paper. 3.4:1 on print-paper." },
+  "print-danger":      { "$type": "color", "$value": "#C40012", "$description": "The one signal colour on paper (a heavy edge, never a fill, so it survives printing without background graphics). 6.2:1 on print-paper." }
 }