/* Signals' own screens. Tokens only — no raw values, no redefining .ds-*. See packages/design/README.md. */ /* This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on the `data-app` slug the shell puts on . It moved there when the accents started being DERIVED from each app's logo rather than chosen per app: the ramp, the contrast check and the logo are one decision now, and splitting them across six stylesheets is how they drift apart. Repointing a semantic token is still the supported extension point — that file is just where this particular repointing happens. */ .sg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--ds-space-4); margin-bottom: var(--ds-space-6); } .sg-stat__value { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); } .sg-stat__label { color: var(--ds-text-muted); font-size: var(--ds-text-sm); } /* A bar chart made of divs, because two counts and a max is not a reason to ship a charting library. */ .sg-bars { display: grid; gap: var(--ds-space-3); } .sg-bar__row { display: grid; /* A fourth, auto-width column for the funnel's per-step note. The overview's bars supply three children and simply leave it empty. */ grid-template-columns: 9rem 1fr auto auto; align-items: center; gap: var(--ds-space-3); } .sg-bar__track { height: 0.5rem; border-radius: var(--ds-radius-full); background: var(--ds-surface-sunken); overflow: hidden; } .sg-bar__fill { height: 100%; border-radius: var(--ds-radius-full); background: var(--ds-accent); } .sg-bar__label { color: var(--ds-text-muted); font-size: var(--ds-text-sm); } .sg-bar__count { font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .sg-quote { margin-bottom: var(--ds-space-4); } .sg-quote__text { margin: 0 0 var(--ds-space-2); max-width: var(--ds-measure); line-height: var(--ds-leading-base); } .sg-quote__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; color: var(--ds-text-muted); font-size: var(--ds-text-xs); } .sg-filters { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); } /* --- Funnel and retention -------------------------------------------------- The two analyses that make this analytics rather than a log. Still no charting library: a funnel is bars and a cohort grid is a table, and both are more readable as the thing they actually are. -------------------------------------------------------------------------- */ .sg-bar__note { color: var(--ds-text-subtle); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .sg-cohorts { font-variant-numeric: tabular-nums; } .sg-cohorts th[scope="row"] { white-space: nowrap; } /* Heat, mixed from the accent so it repoints with the app and survives a rebrand. --sg-strength is the retention rate, set per cell by app.js. */ .sg-cell { text-align: center; background: color-mix( in srgb, var(--ds-accent) calc(var(--sg-strength, 0) * 100%), var(--ds-surface) ); } /* A week that has not happened yet. Deliberately blank rather than 0%: see retentionGrid in src/analytics.js for why the difference matters. */ .sg-cell--future { background: var(--ds-surface-sunken); }