@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/finance-composites.css

@@ -0,0 +1,214 @@
+/* ==========================================================================
+   @digithings-ai/ui — finance-composites family structural CSS
+   (components/finance-composites/*: <StockTicker/>, <OrderBook/>,
+   <SortableTable/>, <PerformanceDashboard/>, <SyncedTearsheet/>).
+   Import PLAINLY (no layer(…) wrapper) AFTER the token bridge, in the app's
+   globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/finance-composites.css";
+     @source "<path-to>/packages/ui/src/components/finance-composites";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the components carry token-backed utilities, and Tailwind does not scan
+   package sources on its own.
+
+   Layering (the cascade contract, MIGRATION.md): single-class defaults live
+   in @layer components so call-site utilities can override them; state and
+   structural rules (:hover, .is-active, descendant sizing, sibling-index
+   hairlines, keyframes, media blocks) stay UNLAYERED on purpose — they must
+   keep outranking plain utilities. Do not wrap this import in layer(…).
+   OrderBook is pure token utilities and needs nothing here; SyncedTearsheet
+   paints on canvas from tokens read at runtime.
+   ========================================================================== */
+
+/* ── StockTicker: seamless scrolling tape (tk-*) ─────────────────────────── */
+
+@layer components {
+  .tk {
+    overflow: hidden;
+    border-block: 1px solid var(--hair);
+    /* mask alpha, not a palette color — #000 is "fully opaque" in mask space
+       (migrate-vs-leave sanctions masks staying concrete). */
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
+    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
+  }
+
+  .tk-track {
+    display: inline-flex;
+    width: max-content;
+    animation: tk-scroll 42s linear infinite;
+    will-change: transform;
+  }
+}
+
+/* state/motion rules — unlayered on purpose */
+.tk:hover .tk-track,
+.tk:focus-within .tk-track {
+  animation-play-state: paused;
+}
+
+@keyframes tk-scroll {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tk-track {
+    animation: none;
+  }
+}
+
+/* ── SortableTable: leaderboard grammar (srt-*) ──────────────────────────── */
+
+@layer components {
+  .srt-table {
+    /* component sizing tokens (finance-composites / SortableTable) */
+    --srt-fs: 0.82rem;
+    --srt-min-w: 35rem;      /* content floor: 560px at the 16px root */
+    --srt-cell-y: 0.6rem;
+    --srt-cell-x: 1rem;
+    --srt-head-y: 0.7rem;
+    --srt-head-gap: 0.35rem;
+    --srt-head-fs: 0.58rem;
+    --srt-caret-fs: 0.6rem;
+    width: 100%;
+    min-width: var(--srt-min-w);
+    border-collapse: collapse;
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--srt-fs);
+  }
+
+  .srt-l {
+    text-align: start;
+  }
+  .srt-r {
+    text-align: end;
+  }
+
+  .srt-head {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--srt-head-gap);
+    padding: var(--srt-head-y) var(--srt-cell-x);
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    font-family: var(--font-mono);
+    font-size: var(--srt-head-fs);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    transition: color 0.15s var(--ease);
+  }
+
+  .srt-caret {
+    font-size: var(--srt-caret-fs);
+    opacity: 0.55;
+  }
+}
+
+/* descendant/state rules — unlayered on purpose (they must beat utilities,
+   exactly like the reference-app originals) */
+.srt-table thead th {
+  padding: 0;
+  border-bottom: 1px solid var(--hair);
+}
+
+.srt-r .srt-head {
+  justify-content: flex-end;
+}
+
+.srt-head:hover {
+  color: var(--ink-soft);
+}
+
+.srt-head.is-active {
+  color: var(--ink);
+}
+
+.srt-head.is-active .srt-caret {
+  opacity: 1;
+  color: var(--accent);
+}
+
+.srt-table td {
+  padding: var(--srt-cell-y) var(--srt-cell-x);
+  border-bottom: 1px solid color-mix(in srgb, var(--hair) 55%, transparent);
+  color: var(--ink-soft);
+}
+
+.srt-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* identifier-column emphasis. Written as td.srt-sym so it actually outranks
+   the `.srt-table td` read above — the reference's bare `.srt-sym` lost that
+   specificity fight (0,1,0 vs 0,1,1) and was silently dead. */
+.srt-table td.srt-sym {
+  color: var(--ink);
+}
+
+/* money colors, column-scoped — P&L semantics only, never a livery */
+.srt-table td.up {
+  color: var(--up);
+}
+.srt-table td.down {
+  color: var(--down);
+}
+
+/* ── PerformanceDashboard: hairline grammar (pdash-*) ────────────────────── */
+/* Sibling-index hairlines Tailwind can't express — all structural, all
+   unlayered on purpose. Utilities in the component carry everything else. */
+
+/* headline cells: left hairlines between cells; stacked with top hairlines
+   when the row collapses to one column ≤ 720px */
+.pdash-head {
+  border-inline-start: 1px solid var(--hair);
+}
+
+.pdash-head:first-child {
+  border-inline-start: none;
+}
+
+@media (max-width: 720px) {
+  .pdash-head {
+    border-inline-start: none;
+    border-top: 1px solid var(--hair);
+  }
+
+  .pdash-head:first-child {
+    border-top: none;
+  }
+}
+
+/* ratio strip: left hairlines between cells, re-derived per row keyed off
+   the strip's data-cols (n-up desktop, 3-up ≤ 720px) */
+.pdash-ratio {
+  border-inline-start: 1px solid var(--hair);
+}
+
+.pdash-ratios[data-cols="6"] .pdash-ratio:nth-child(6n + 1),
+.pdash-ratios[data-cols="5"] .pdash-ratio:nth-child(5n + 1),
+.pdash-ratios[data-cols="4"] .pdash-ratio:nth-child(4n + 1),
+.pdash-ratios[data-cols="3"] .pdash-ratio:nth-child(3n + 1) {
+  border-inline-start: none;
+}
+
+@media (max-width: 720px) {
+  /* the strip is 3-up whatever data-cols says (max-[720px]:grid-cols-3) —
+     re-derive. Selectors keep the [data-cols] attr so they tie the desktop
+     rules on specificity and win by order. */
+  .pdash-ratios[data-cols="6"] .pdash-ratio:nth-child(6n + 1),
+  .pdash-ratios[data-cols="5"] .pdash-ratio:nth-child(5n + 1),
+  .pdash-ratios[data-cols="4"] .pdash-ratio:nth-child(4n + 1) {
+    border-inline-start: 1px solid var(--hair);
+  }
+
+  .pdash-ratios[data-cols] .pdash-ratio:nth-child(3n + 1) {
+    border-inline-start: none;
+  }
+}

package/src/styles/finance-tearsheet-overlay.css

@@ -0,0 +1,90 @@
+/**
+ * Overlay / risk-band extensions for the finance-tearsheet family (#3172).
+ * Lives beside finance-tearsheet.css so the existing legend-swatch encoding
+ * (CSS triangles, open-bar ring) is not rewritten. Import plainly after the
+ * family sheet.
+ *
+ * Sizing: the legend/risk-label/caption dimensions below read the family's
+ * `--ts-*` sizing tokens (declared in finance-tearsheet.css) with the previous
+ * literal as a fallback, so this sheet still renders if it is loaded alone.
+ */
+
+.ts-tone-mute.ts-line { stroke: var(--ink-soft); }
+.ts-tone-mute.ts-area { fill: var(--ink-soft); }
+.ts-line-dashed { stroke-dasharray: 5 4; }
+/* Round dots for the benchmark leg: zero-length dash + round caps reads as
+   dots at any stroke width, and stays dots (not dashes) when the chart
+   compresses many points into few pixels. */
+.ts-line-dotted { stroke-dasharray: 0.1 5; stroke-linecap: round; }
+
+.ts-chart-legend-line-up { width: var(--ts-legend-line-w, 1.125rem); height: 0; border-top: var(--ts-legend-stroke-w, 2px) solid var(--up); }
+.ts-chart-legend-line-down { width: var(--ts-legend-line-w, 1.125rem); height: 0; border-top: var(--ts-legend-stroke-w, 2px) solid var(--down); }
+.ts-chart-legend-line-mute { width: var(--ts-legend-line-w, 1.125rem); height: 0; border-top: var(--ts-legend-stroke-w, 2px) solid var(--ink-soft); }
+.ts-chart-legend-line-dashed { width: var(--ts-legend-line-w, 1.125rem); height: 0; border-top: var(--ts-legend-stroke-w, 2px) dashed var(--ink-soft); }
+
+.ts-risk-band-fire { fill: color-mix(in srgb, var(--up) 22%, transparent); }
+.ts-risk-band-acc { fill: color-mix(in srgb, var(--up) 12%, transparent); }
+.ts-risk-band-value { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
+.ts-risk-band-mid { fill: color-mix(in srgb, var(--ink-mute) 8%, transparent); }
+.ts-risk-band-hot { fill: color-mix(in srgb, var(--down) 12%, transparent); }
+.ts-risk-band-bubble { fill: color-mix(in srgb, var(--down) 22%, transparent); }
+
+.ts-risk-threshold { stroke-width: 1.2; stroke-dasharray: 5 4; }
+.ts-risk-threshold-buy { stroke: var(--up); }
+.ts-risk-threshold-sell { stroke: var(--down); }
+.ts-risk-threshold-label {
+  --ts-risk-label-fs: 0.625rem;   /* 10px */
+  font-size: var(--ts-risk-label-fs);
+  fill: var(--ink-soft);
+}
+.ts-price-faint { stroke: var(--ink-soft); stroke-width: 1; opacity: 0.35; }
+.ts-axis-mute { fill: var(--ink-soft); }
+
+/**
+ * Generic reference overlays for TimeSeries / MultiTimeSeries (Q3b slice 5a,
+ * #4443). Token-driven like the rest of the family: nothing here reads the
+ * theme in JS, so consumers drop their getComputedStyle color readers.
+ */
+.ts-ref-line { stroke-width: 1.2; }
+.ts-ref-dashed { stroke-dasharray: 4 4; }
+.ts-ref-tone-accent { stroke: var(--accent); }
+.ts-ref-tone-up { stroke: var(--up); }
+.ts-ref-tone-down { stroke: var(--down); }
+.ts-ref-tone-warn { stroke: var(--warn); }
+.ts-ref-tone-mute { stroke: var(--ink-soft); }
+.ts-ref-band { stroke: none; }
+.ts-ref-band-accent { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
+.ts-ref-band-up { fill: color-mix(in srgb, var(--up) 10%, transparent); }
+.ts-ref-band-down { fill: color-mix(in srgb, var(--down) 10%, transparent); }
+.ts-ref-band-warn { fill: color-mix(in srgb, var(--warn) 10%, transparent); }
+.ts-ref-band-mute { fill: color-mix(in srgb, var(--ink-mute) 8%, transparent); }
+.ts-ref-dot { stroke: var(--bg); stroke-width: 1; }
+.ts-ref-dot-accent { fill: var(--accent); }
+.ts-ref-dot-up { fill: var(--up); }
+.ts-ref-dot-down { fill: var(--down); }
+.ts-ref-dot-warn { fill: var(--warn); }
+.ts-ref-dot-mute { fill: var(--ink-soft); }
+.ts-fill-dot-buy { fill: var(--up); opacity: 0.7; }
+.ts-fill-dot-sell { fill: var(--down); opacity: 0.7; }
+.ts-indicator-grid {
+  --ts-indicator-gap: 0.75rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ts-indicator-gap);
+}
+.ts-indicator-unused { opacity: 0.55; }
+.ts-indicator-caption {
+  --ts-caption-fs: 0.8rem;
+  font-size: var(--ts-caption-fs);
+  color: var(--ink-soft);
+  margin: 0 0 var(--space-1, 0.25rem);
+}
+
+.ts-position-dca-band {
+  --ts-dca-band-fs: 1.05rem;
+  font-family: var(--font-display, var(--font-sans));
+  font-size: var(--ts-dca-band-fs);
+  color: var(--ink);
+  letter-spacing: -0.02em;
+}
+.ts-position-dca-rate { color: var(--ink-soft); }