@humanforest/tokens 0.1.0

package/dataviz/unovis.css

@@ -0,0 +1,151 @@
+/* Forest → Unovis adapter — generated by scripts/dataviz.ts. Do not edit by hand. */
+/* var() indirection, plus the one vendor rule that cannot be expressed as a var. Import AFTER
+   dataviz.css and the semantic theme. */
+/* :root:root — Unovis injects its own :root defaults at runtime (after this sheet loads), so we
+   need to win on specificity, not order. */
+:root:root {
+  --vis-color0: var(--dataviz-categorical-safe-1);
+  --vis-color1: var(--dataviz-categorical-safe-2);
+  --vis-color2: var(--dataviz-categorical-safe-3);
+  --vis-color3: var(--dataviz-categorical-safe-4);
+  --vis-color4: var(--dataviz-categorical-safe-5);
+  --vis-color5: var(--dataviz-categorical-safe-6);
+  --vis-font-family: var(--font-sans);
+  --vis-dark-font-family: var(--font-sans);
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-dark-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-dark-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-muted);
+  --vis-dark-axis-tick-label-color: var(--ui-text-muted);
+  --vis-axis-label-color: var(--ui-text-muted);
+  --vis-dark-axis-label-color: var(--ui-text-muted);
+  --vis-legend-label-color: var(--ui-text);
+  --vis-dark-legend-label-color: var(--ui-text);
+  --vis-tooltip-background-color: color-mix(in oklab, var(--ui-bg-elevated) 80%, transparent);
+  --vis-dark-tooltip-background-color: color-mix(in oklab, var(--ui-bg-elevated) 80%, transparent);
+  --vis-tooltip-backdrop-filter: blur(12px) saturate(1.4);
+  --vis-dark-tooltip-backdrop-filter: blur(12px) saturate(1.4);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-dark-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text-highlighted);
+  --vis-dark-tooltip-text-color: var(--ui-text-highlighted);
+  --vis-tooltip-border-radius: var(--ui-radius);
+  --vis-dark-tooltip-border-radius: var(--ui-radius);
+  --vis-tooltip-padding: 0;
+  --vis-dark-tooltip-padding: 0;
+  --vis-crosshair-line-stroke-color: var(--ui-text-dimmed);
+  --vis-dark-crosshair-line-stroke-color: var(--ui-text-dimmed);
+  --vis-donut-background-color: transparent;
+  --vis-dark-donut-background-color: transparent;
+  --vis-donut-central-label-font-size: 28px;
+  --vis-dark-donut-central-label-font-size: 28px;
+  --vis-donut-central-label-font-weight: 700;
+  --vis-dark-donut-central-label-font-weight: 700;
+  --vis-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-dark-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-donut-central-sub-label-font-size: 13px;
+  --vis-dark-donut-central-sub-label-font-size: 13px;
+  --vis-donut-central-sub-label-text-color: var(--ui-text-muted);
+  --vis-dark-donut-central-sub-label-text-color: var(--ui-text-muted);
+  --vis-nested-donut-central-label-font-size: 20px;
+  --vis-dark-nested-donut-central-label-font-size: 20px;
+  --vis-nested-donut-central-label-font-weight: 700;
+  --vis-dark-nested-donut-central-label-font-weight: 700;
+  --vis-nested-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-dark-nested-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-nested-donut-central-sublabel-text-color: var(--ui-text-muted);
+  --vis-dark-nested-donut-central-sublabel-text-color: var(--ui-text-muted);
+  --vis-nested-donut-background-color: transparent;
+  --vis-dark-nested-donut-background-color: transparent;
+  --vis-nested-donut-segment-stroke-color: var(--ui-bg);
+  --vis-dark-nested-donut-segment-stroke-color: var(--ui-bg);
+  --vis-nested-donut-segment-stroke-width: 3px;
+  --vis-dark-nested-donut-segment-stroke-width: 3px;
+  --vis-timeline-row-even-fill-color: var(--ui-bg);
+  --vis-dark-timeline-row-even-fill-color: var(--ui-bg);
+  --vis-timeline-row-odd-fill-color: var(--ui-bg-muted);
+  --vis-dark-timeline-row-odd-fill-color: var(--ui-bg-muted);
+  --vis-timeline-label-color: var(--ui-text-muted);
+  --vis-dark-timeline-label-color: var(--ui-text-muted);
+  --vis-timeline-scrollbar-background-color: var(--ui-bg-muted);
+  --vis-dark-timeline-scrollbar-background-color: var(--ui-bg-muted);
+  --vis-timeline-scrollbar-color: var(--ui-border-accented);
+  --vis-dark-timeline-scrollbar-color: var(--ui-border-accented);
+  --vis-sankey-node-label-color: var(--ui-text-highlighted);
+  --vis-dark-sankey-node-label-color: var(--ui-text-highlighted);
+  --vis-sankey-node-label-background-fill-color: var(--ui-bg);
+  --vis-dark-sankey-node-label-background-fill-color: var(--ui-bg);
+  --vis-sankey-node-label-background-stroke-color: var(--ui-border);
+  --vis-dark-sankey-node-label-background-stroke-color: var(--ui-border);
+  --vis-sankey-icon-color: var(--ui-bg);
+  --vis-dark-sankey-icon-color: var(--ui-bg);
+  --vis-treemap-internal-label-font-size: 16px;
+  --vis-dark-treemap-internal-label-font-size: 16px;
+  --vis-treemap-tile-radius: 12px;
+  --vis-dark-treemap-tile-radius: 12px;
+  --vis-treemap-tile-gap: 4px;
+  --vis-dark-treemap-tile-gap: 4px;
+  --vis-tooltip-title-color: var(--ui-text-highlighted);
+  --vis-tooltip-title-border-bottom: 1px solid var(--ui-border);
+  --vis-tooltip-label-color: var(--ui-text);
+  --vis-tooltip-value-color: var(--ui-text-highlighted);
+}
+
+/* Treemap concentric corners. Unovis draws group and leaf tiles as flat sibling rects sharing one
+   rx, so nesting gets no radius of its own and equal radii read as pinched inner corners. The
+   concentric rule is inner = outer − gap: with the house 8px corner and 4px padding, leaves take
+   4px. Leaves are the only tiles carrying the clickable class (treemapDefaults turns the affordance
+   on for exactly this reason); rx/ry are SVG geometry properties, so CSS overrides the attribute
+   Unovis sets. Matched on the emotion class suffix — Unovis hashes the prefix per build, the label
+   is stable. Separation comes from the padding gap showing the darker group tile beneath, not from
+   a stroke: a stroke on every tile double-borders the nesting. */
+rect[class*="-clickable-tile"] {
+  rx: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
+  ry: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
+}
+
+/* Re-centre the central label pair. Unovis anchors both texts on the hole's centre and separates
+   them with dy ±0.55em on each text's OWN font-size, so the block's optical centre always sits
+   above the true centre — and the gap widens with the label size. Shifting by a fraction of the
+   label size restores the centring and keeps it correct if a chart overrides the size locally.
+   dy is an attribute CSS cannot reach; translate composes with the transform attribute Unovis
+   sets, so it is the one lever here.
+
+   The two components need separate rules because they disagree twice. The flat donut sizes its
+   label from --vis-donut-*, the nested one from --vis-nested-donut-*, so one shared rule shifts
+   the nested label by half the FLAT donut's 28px. And they class their texts differently: the flat
+   donut gives BOTH texts the -central-label suffix, while the nested one names its second
+   -central-sub-label. Matching only the first suffix therefore moved the nested label down onto a
+   sub-label that stayed put. Both texts of a pair must shift by the same amount — that is what preserves
+   their spacing while re-centring the block. (No backticks in this comment: it lives inside a
+   template literal.) */
+g[class*="-donut-component"]:not([class*="-nested-donut-component"]) text[class*="-central-label"] {
+  translate: 0 calc(0.5 * var(--vis-donut-central-label-font-size, 16px));
+}
+
+g[class*="-nested-donut-component"] text[class*="-central-label"],
+g[class*="-nested-donut-component"] text[class*="-central-sub-label"] {
+  translate: 0 calc(0.5 * var(--vis-nested-donut-central-label-font-size, 16px));
+}
+
+/* Group labels get their own size. Unovis scales label type to tile area for LEAVES only
+   (enableTileLabelFontSizeVariation, gated on the node having no children), so an internal node
+   keeps the flat default
+   however large its group is — a zone heading ends up smaller than the station labels inside it.
+   Internal nodes carry their own class, so the heading can be sized here; it has to stay within
+   the tilePaddingTop strip the group reserves for it. */
+text[class*="-internal-label"] {
+  font-size: var(--vis-treemap-internal-label-font-size, 16px);
+}
+
+/* Square the label clip. Unovis gives each tile's label a clipPath rect that copies the tile's
+   corner radius and is inset by labelOffset on every side — and it translates the label group to
+   exactly that rect's top-left. The first glyph therefore lands on its own clip's rounded corner
+   and gets sliced, at every radius, and raising labelOffset cannot help because it moves the label
+   and the clip together. The clip's job is to stop text overflowing the tile, which a square does;
+   the tile keeps its own radius, and the label stays inset by labelOffset. */
+[class*="-tile-group"] clipPath rect {
+  rx: 0;
+  ry: 0;
+}