@felloinnovations/brand-kit 0.5.0 → 0.5.3

package/design-system/components/TrendLine/style.css

@@ -30,6 +30,16 @@
 .ws-trend-line__lines path { fill: none; stroke: var(--ws-trend-line-tone); stroke-width: var(--ws-chart-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
 /* What is still to come (a projection): a dotted 1 px line. */
 .ws-trend-line__lines .ws-trend-line__ahead { stroke-width: var(--ws-line); stroke-dasharray: 0.1 calc(var(--ws-hairline) * 5); }
+/* Several series (up to 3, one unit, one axis): the first is the figure's own __draw and points; each other is a
+   __series box (display: contents, so its points still sit on the plot) holding its own __draw (the path only) and its
+   points. The tones run navy, teal, purple (salmon is the reference's), each series' own --tone over it; the key's
+   __key--2 and __key--3 match. With several series: no hatch (one area claims a whole, two areas cover each other), and
+   the period in progress keeps its series' tone (its name and the dotted __ahead say it). */
+.ws-trend-line__series { display: contents; }
+.ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--2 { --ws-trend-line-tone: var(--tone, var(--ws-chart-finished)); }
+.ws-trend-line__series ~ .ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--3 { --ws-trend-line-tone: var(--tone, var(--ws-chart-past-half)); }
+.ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__hatch { display: none; }
+.ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__point--now { --ws-trend-line-mark: var(--ws-trend-line-tone); }
 /* A point: its period's slot, from 12 above its value (the pointer's room) to the baseline. The column (::before) runs
    from the value to the baseline, its corners 1 px, cut by the grid's lines (set --ticks on the figure to the number of
    even steps the grid has; 1 cuts only at the top line); the dot (::after) is 8 on the value, ringed in the ground so the
@@ -60,14 +70,14 @@
   .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on) { anchor-name: --ws-trend-line-at; }
   .ws-trend-line__band { position-anchor: --ws-trend-line-at; left: anchor(left); right: anchor(right); width: auto; top: calc(anchor(top) + var(--ws-trend-line-hit)); background: repeating-linear-gradient(to bottom, var(--ws-trend-line-tone) 0 var(--ws-ring), transparent 0 calc(var(--ws-ring) * 2)) center / var(--ws-line) 100% no-repeat; }
   .ws-trend-line--bars .ws-trend-line__band { top: 0; background: var(--ws-hover); }
-  .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
+  .ws-trend-line__area:has(.ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
 }
 .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
 .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__point:not(:focus-visible, .ws-trend-line__point--on)::before { opacity: var(--ws-dim); }
 @media (hover: hover) {
   @supports (anchor-name: --a) {
     .ws-trend-line__point:hover { anchor-name: --ws-trend-line-at; }
-    .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
+    .ws-trend-line__area:has(.ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
   }
   .ws-trend-line__point:hover::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
   .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__point:not(:hover)::before { opacity: var(--ws-dim); }

package/design-system/components/Well/README.md

@@ -42,7 +42,7 @@ The system's grey well: a plate holding a short list of pressable rows, for ever
 - **Focus**: the 2 px navy ring drawn inside the row (`--ws-focus-*`), since a row cannot grow an outer ring without
   touching its neighbours.
 - **Pressed**: `--ws-surface-press` at once; rows never scale under a press, they only tint.
-- **Busy**: the well carries `aria-busy`, and rows still loading show a shimmer line in North's chart colours
+- **Busy**: the well carries `aria-busy`, and rows still loading show a shimmer line, one quiet grey
   (`hidden` rows), present for layout and invisible to a screen reader. Under reduced motion the line stands still.
 - **Disabled**: not a state a well row carries; a row that cannot be used yet is not shown.
 - **Empty**: a well with no suggestions is not rendered; there is no empty well.

package/design-system/components/Well/style.css

@@ -16,7 +16,7 @@
 .ws-well-row__words { display: flex; min-width: 0; flex: 1; flex-direction: column; }
 .ws-well-row__words > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ws-well-row__chevron { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-muted); }
-/* Busy: a shimmer line in each row (North's chart colours), sized where used; under reduced motion a still ghost in
-   the ghost grey (the sweep's frozen frame showed its pink edge). */
+/* Busy: a shimmer line in each row, sized where used; under reduced motion a still ghost in the hover grey, never a
+   frozen frame of the sweep. */
 .ws-well-row__placeholder { height: var(--space-sm); border-radius: var(--ws-radius-chip); background: var(--ws-well-hover); }
 @media (prefers-reduced-motion: no-preference) { .ws-well-row__placeholder { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }

package/design-system/components/_house.css

@@ -237,7 +237,7 @@ body { margin: 0; background: var(--color-bg-page); color: var(--color-text-body
   .ws-settle { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-i, 0) * var(--ws-stagger-detail)); }
   .ws-shimmer { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }
 }
-/* Loading (North): a ghost block in the chart colours' sweep. Give it the size of what it stands for; its words, if
+/* Loading (North): a ghost block under the shimmer. Give it the size of what it stands for; its words, if
    any, are transparent. Under reduced motion it is a still ghost. */
 .ws-shimmer { border-radius: var(--ws-radius-bar); background: var(--ws-shimmer); background-size: 300% 100%; color: transparent; }
 /* Hover tint (North): Seth's navy wash over whatever ground, a colour change, never a lift. --faint for a list row,