@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/marquee.css

@@ -0,0 +1,168 @@
+/* ==========================================================================
+   @digithings-ai/ui — Marquee structural CSS (components/marquee/Marquee).
+   Import 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/marquee.css";
+     @source "<path-to>/packages/ui/src/components/marquee";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the component carries token-backed item utilities, and Tailwind does not scan
+   package sources on its own.
+
+   Utilities in <Marquee/> carry the item chip type/color and the accent dot.
+   This file holds only what must stay CSS: the overflow + edge-fade mask, the
+   seamless-loop geometry + keyframes, pause-on-hover, and the reduced-motion
+   stop — the drift never gates content; the strip reads statically. Loop
+   duration comes from --mq-speed (set inline by the component, default 34s).
+
+   Loop geometry is load-bearing: the content renders twice as two .mq-group
+   spans and the track translates exactly -50% per cycle. The inter-item gap
+   lives INSIDE each group (gap + an equal padding-right); the track itself has
+   no gap, so half the track width is exactly one period and the wrap point is
+   invisible. A track-level gap would offset the period by gap/2 and make every
+   loop visibly jump.
+   ========================================================================== */
+
+.mq-row {
+  overflow: hidden;
+  /* edge fade: the strip reads as continuing past both sides. Mask colors are
+     opacity stops, not palette (migrate-vs-leave: masks stay CSS). */
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
+}
+
+.mq-track {
+  display: inline-flex;
+  width: max-content;
+  will-change: transform;
+}
+
+/* one full copy of the content; padding-right doubles as the wrap gap so the
+   -50% translate lands exactly one period on (see header comment) */
+.mq-group {
+  /* component tokens — loop period gap (gap + matching padding) */
+  --mq-gap: 2.2rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mq-gap);
+  padding-inline-end: var(--mq-gap);
+  white-space: nowrap;
+}
+
+.mq-track--left {
+  animation: mq-left var(--mq-speed, 34s) linear infinite;
+}
+
+.mq-track--right {
+  animation: mq-right var(--mq-speed, 34s) linear infinite;
+}
+
+/* Pause from a control (`data-paused`). Hover does not use play-state: toggling
+   it restarts the loop at translateX(0), which jumps the strip to the right.
+   Marquee pins the computed transform instead. */
+.mq-row[data-paused="true"] .mq-track {
+  animation-play-state: paused;
+}
+
+/* A short row would show the seamless copy beside the first. One group is at
+   least the viewport wide, so the copy starts off-screen and each logo is
+   visible once. */
+.mq-fill.mq-row .mq-group {
+  min-width: 100vw;
+  justify-content: space-evenly;
+  box-sizing: border-box;
+}
+
+@keyframes mq-left {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes mq-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mq-track--left,
+  .mq-track--right {
+    animation: none;
+  }
+}
+
+/* MarketBar (components/finance-composites/MarketBar).
+   The live mark is a square in the money green. Each cell owns its padding
+   and the group gap is zero, so the duplicated copy meets the first with the
+   same gap as every other pair — the seam is not a hole. A percent pulse is
+   opacity on the number only; the slot widths stay put. */
+.mb-tape.mq-row .mq-group {
+  flex: 0 0 auto;
+  gap: 0;
+  padding-inline-end: 0;
+}
+
+.mb-cell {
+  flex: 0 0 auto;
+}
+
+.mb-price {
+  display: inline-block;
+  min-width: 10ch;
+  text-align: end;
+}
+
+.mb-pct {
+  min-width: 8.5ch;
+}
+
+.mb-live-mark {
+  --mb-mark: 0.45rem;
+
+  display: inline-block;
+  width: var(--mb-mark);
+  height: var(--mb-mark);
+  flex-shrink: 0;
+  border-radius: 0;
+  background: var(--up);
+  animation: mb-live-pulse 2.4s ease-out infinite;
+}
+
+/* Missing prices. Same square as the feed mark, in --down, with no pulse. */
+.mb-status-miss {
+  display: inline-block;
+  width: var(--mb-mark, 0.45rem);
+  height: var(--mb-mark, 0.45rem);
+  flex-shrink: 0;
+  border-radius: 0;
+  background: var(--down);
+}
+
+@keyframes mb-live-pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.35; }
+  100% { opacity: 1; }
+}
+
+.mb-pct-pulse {
+  animation: mb-pct-pulse 0.7s ease-out;
+}
+
+@keyframes mb-pct-pulse {
+  0% { opacity: 1; }
+  35% { opacity: 0.2; }
+  100% { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mb-live-mark,
+  .mb-pct-pulse {
+    animation: none;
+  }
+}

package/src/styles/metrics.css

@@ -0,0 +1,82 @@
+/* ==========================================================================
+   @digithings-ai/ui — metrics family structural CSS (components/metrics/*:
+   <PerfMetrics/> + <StatCounter/>). Import 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/metrics.css";
+     @source "<path-to>/packages/ui/src/components/metrics";
+   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.
+
+   Utilities in the components carry the grid container, cell padding, and
+   label/value typography. This file holds only what must stay CSS: the
+   sibling-index hairline grids (Tailwind can't express nth-child), keyed off
+   the container's data-cols and re-derived for the 2-up collapse ≤ 720px
+   (matching the components' max-[720px]:grid-cols-2 utility).
+   ========================================================================== */
+
+/* ── PerfMetrics: n-up hairline cell grid ────────────────────────────────── */
+
+.perf-metric {
+  border-inline-start: 1px solid var(--hair);
+  border-top: 1px solid var(--hair);
+}
+
+/* first row has no top border; first column no left border */
+.perf-metrics[data-cols="4"] .perf-metric:nth-child(-n + 4),
+.perf-metrics[data-cols="3"] .perf-metric:nth-child(-n + 3),
+.perf-metrics[data-cols="2"] .perf-metric:nth-child(-n + 2) {
+  border-top: none;
+}
+
+.perf-metrics[data-cols="4"] .perf-metric:nth-child(4n + 1),
+.perf-metrics[data-cols="3"] .perf-metric:nth-child(3n + 1),
+.perf-metrics[data-cols="2"] .perf-metric:nth-child(2n + 1) {
+  border-inline-start: none;
+}
+
+/* ≤ 720px the grid is two-up whatever data-cols says — re-derive the
+   hairlines. Selectors keep the [data-cols] attr so they tie the desktop
+   rules on specificity and win by order. */
+@media (max-width: 720px) {
+  .perf-metrics[data-cols="4"] .perf-metric:nth-child(-n + 4),
+  .perf-metrics[data-cols="3"] .perf-metric:nth-child(-n + 3) {
+    border-top: 1px solid var(--hair);
+  }
+
+  .perf-metrics[data-cols] .perf-metric:nth-child(-n + 2) {
+    border-top: none;
+  }
+
+  .perf-metrics[data-cols="4"] .perf-metric:nth-child(4n + 1),
+  .perf-metrics[data-cols="3"] .perf-metric:nth-child(3n + 1) {
+    border-inline-start: 1px solid var(--hair);
+  }
+
+  .perf-metrics[data-cols] .perf-metric:nth-child(2n + 1) {
+    border-inline-start: none;
+  }
+}
+
+/* ── StatCounter: single-row strip, left hairlines between stats ─────────── */
+
+.sc-stat {
+  border-inline-start: 1px solid var(--hair);
+}
+
+.sc-stat:first-child {
+  border-inline-start: none;
+}
+
+@media (max-width: 720px) {
+  .sc-stat:nth-child(2n + 1) {
+    border-inline-start: none;
+  }
+
+  .sc-stat:nth-child(n + 3) {
+    border-top: 1px solid var(--hair);
+  }
+}