@felloinnovations/brand-kit 0.5.0 → 0.5.1

package/design-system/components/TickStrip/preview.html

@@ -46,7 +46,7 @@
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">Loading: the ticks as a ghost with the chart colours' sweep (still with reduced motion)</span>
+    <span class="ws-muted">Loading: the ticks as a ghost with the shimmer passing over them (still with reduced motion)</span>
     <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--loading" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
   </div>
 

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

@@ -24,7 +24,7 @@
 .ws-tick-strip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
 .ws-tick-strip__marker { position: absolute; top: 0; left: var(--at, 0%); display: flex; align-items: center; gap: var(--space-xxs-plus); white-space: nowrap; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--space-sm-plus); color: var(--ws-word-needs); }
 .ws-tick-strip__marker::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--ws-chart-under-half); }
-/* Loading (North): the ticks as a still ghost, the chart colours' sweep passing over them. */
+/* Loading (North): the ticks as a still ghost, the shimmer passing over them. */
 .ws-tick-strip--loading { --pitch: calc((100% + var(--g)) / var(--n)); background: var(--ws-shimmer); background-size: 300% 100%; -webkit-mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); }
 .ws-tick-strip--loading > * { visibility: hidden; }
 @media (prefers-reduced-motion: no-preference) {

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

@@ -40,7 +40,7 @@ A vertical feed of what happened, grouped by day, a coloured dot on a fine line
 - **An entry that opens something**: the title is a link (`a.ws-timeline__title`, medium), underlined on hover; on
   touch its box grows to 24 without moving anything.
 - **Empty**: the same card, a sentence ("Nothing here yet") in place of the list; never a bare line with no dots.
-- **Loading**: ghost lines where the titles go, in the chart colours' sweep (`__ghost ws-shimmer`), the dots plain grey;
+- **Loading**: ghost lines where the titles go under the shimmer (`__ghost ws-shimmer`), the dots plain grey;
   still under reduced motion.
 - **Long title**: wraps; a history entry is read once and should say the whole thing.
 - **Many entries**: the feed scrolls inside its card past a comfortable length; it is never paginated.

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,

package/design-system/components/bundle.css

@@ -238,7 +238,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,
@@ -1456,7 +1456,7 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
   .ws-check-row__line > .ws-check-row__chev { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
   .ws-check-row__ticks > b { transform-origin: bottom; animation: ws-grow-up var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(sibling-index() * var(--ws-ripple)); }
 }
-/* Loading: the name and the ticks as ghosts in the chart colours' sweep (add ws-shimmer). */
+/* Loading: the name and the ticks as ghosts under the shimmer (add ws-shimmer). */
 .ws-check-row__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
 .ws-check-row__ghost.ws-shimmer, .ws-check-row__ticks.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 
@@ -2299,7 +2299,7 @@ a.ws-goal-bars__label { border-radius: var(--ws-radius-chip); }
 .ws-kanban-board__who { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
 .ws-kanban-board__meta { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
 .ws-kanban-board__empty { padding: var(--space-md) var(--space-xs); text-align: center; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
-/* Loading: a ghost the height of a card, in the chart colours' sweep (add ws-shimmer). */
+/* Loading: a ghost the height of a card under the shimmer (add ws-shimmer). */
 .ws-kanban-board__ghost { display: block; height: calc(var(--ws-card-padding) * 2 + var(--ws-control-h-sm) + var(--space-xxs) + var(--ws-leading-control)); border-radius: var(--ws-radius-card); background: var(--ws-track); }
 .ws-kanban-board__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* A board page (K16): the board takes the rest of a height-bound column (the shell's body, a fill page), every column
@@ -3365,7 +3365,7 @@ a.ws-plate__foot:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1
 .ws-score-hero--needs-work { --tone-word: var(--ws-word-needs-work); }
 .ws-score-hero--needs-work .ws-tick-strip { --tone: var(--ws-rating-needs-work); }
 .ws-score-hero--none { --tone-word: var(--color-text-muted); }
-/* Loading: ghost blocks the size of what they stand for, in the chart colours' sweep. */
+/* Loading: ghost blocks the size of what they stand for under the shimmer. */
 .ws-score-hero__ghost { width: calc(var(--space-6xl) * 2); max-width: 100%; height: var(--ws-leading-score); }
 .ws-score-hero__ghost--line { width: min(100%, calc(var(--space-9xl) * 2)); height: var(--ws-leading-section); }
 @container (max-width: 26rem) {
@@ -3423,7 +3423,7 @@ a.ws-plate__foot:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1
 .ws-share-bar__item::before { content: ""; position: absolute; inset-inline-start: 0; top: calc((var(--space-md) - var(--space-xs)) / 2); width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone, var(--ws-chart-rest)); }
 /* Seth's key is one tone: the figure keeps the words' weight and colour, only its numerals are tabular. */
 .ws-share-bar__item b { font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
-/* Loading: the bar as a ghost in the chart colours' sweep, the key held back. */
+/* Loading: the bar as a ghost under the shimmer, the key held back. */
 .ws-share-bar--loading .ws-share-bar__bar { background: var(--ws-shimmer); background-size: 300% 100%; }
 @media (prefers-reduced-motion: no-preference) {
   .ws-share-bar--loading .ws-share-bar__bar { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }
@@ -3524,28 +3524,23 @@ a.ws-side-list__row:focus-visible::after, button.ws-side-list__row:focus-visible
     .ws-side-list__pick[aria-current="true"] { transition: none; }
   }
 }
-/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer in the chart colours running over them; sized where used ---- */
-/* A ghost block: the shimmer (the warm grey, a pass of salmon, purple and teal) at 300 %, 1.8 s. It replaces the
-   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is a still ghost in North's ghost grey
-   (the chart ghost's), never a frozen frame of the sweep: at rest the 300 % gradient showed its pink edge. */
+/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer, one quiet grey, running over them; sized where used ---- */
+/* A ghost block: the shimmer (the ghost grey with a lighter pass of the same grey) at 300 %, 1.8 s. It replaces the
+   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is the still ghost, the same grey
+   (North's ghost, the chart ghost's), never a frozen frame of the sweep. The ghost shows on the tray too (a card's foot,
+   a band), so it needs no ground of its own there. */
 .ws-skeleton { border-radius: var(--ws-radius-control); background: var(--ws-ghost); }
 .ws-skeleton--line { height: var(--space-sm); }
 .ws-skeleton--title { height: var(--ws-leading-title); }
 /* A button's place (North's 116 x 38 placeholder, on the grid: 120 x 36, 6 px corners). */
 .ws-skeleton--button { width: var(--space-7xl); height: var(--ws-control-h-md); border-radius: var(--ws-radius-row); }
-/* On the tray (a card's foot) and in a band the ghost's grey was the ground's own (1.04:1 on the tray in light, the same
-   grey as the track in dark), so the placeholder vanished: there it is built on the hover grey, with the dark theme's
-   recipe of 14 % salmon, purple and teal passes, on the token's stops (plain to 34 % and from 66 %, so the loop's end frames show no tint). */
-:is(.ws-card__foot, .ws-band) .ws-skeleton { --ws-shimmer: linear-gradient(100deg, var(--ws-well-hover) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-well-hover)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-well-hover)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-well-hover)) 56%, var(--ws-well-hover) 66% 100%); }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
 .ws-skeleton__head { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--ws-card-inset); }
 .ws-skeleton__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--ws-card-inset) var(--space-md); }
-/* A chart still loading: its empty shapes in a quiet ghost grey, and one colour band (salmon, purple, teal) passing
-   over the whole drawing in blend mode colour, so the bars take the band's hue as it crosses them. */
-.ws-skeleton__chart { position: relative; display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
+/* A chart still loading: its empty shapes, each a ghost with the same sweep as every other ghost. North's colour band
+   over the drawing is gone (0.5.1): loaders are one neutral tone, and a neutral band in blend mode colour paints nothing. */
+.ws-skeleton__chart { display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
 .ws-skeleton__chart > * { flex: 1 1 0; min-width: 0; border-radius: var(--ws-radius-bar) var(--ws-radius-bar) 0 0; background: var(--ws-ghost); }
-.ws-skeleton__chart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 28%, var(--ws-chart-under-half) 40%, var(--ws-chart-past-half) 50%, var(--color-stat-positive) 60%, transparent 72%); background-size: 300% 100%; mix-blend-mode: color; opacity: 0; }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton__chart::after { opacity: 0.85; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
+@media (prefers-reduced-motion: no-preference) { :is(.ws-skeleton, .ws-skeleton__chart > *) { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
 /* ---- Slider: a native range in the house's navy (Ignite's, 3 Nov): the browser's own control, so the keyboard, touch
    and a screen reader work as they should; accent-color the navy act, 24 px tall (40 on touch), its value said in words
    at the right of its label, the two ends named under it when they help. ---- */
@@ -3897,7 +3892,7 @@ a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width)
   .ws-table .ws-table__more { display: inline-flex; }
   .ws-table .ws-table__name { min-width: 40cqi; white-space: normal; }
 }
-/* Loading: a ghost bar in each cell, in the chart colours' sweep (add ws-shimmer), the head shown at once. */
+/* Loading: a ghost bar in each cell under the shimmer (add ws-shimmer), the head shown at once. */
 .ws-table__placeholder { height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
 .ws-table__placeholder.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* Empty: the same card, a sentence and the act that clears the filter. */
@@ -4013,7 +4008,7 @@ a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width)
 .ws-tick-strip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
 .ws-tick-strip__marker { position: absolute; top: 0; left: var(--at, 0%); display: flex; align-items: center; gap: var(--space-xxs-plus); white-space: nowrap; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--space-sm-plus); color: var(--ws-word-needs); }
 .ws-tick-strip__marker::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--ws-chart-under-half); }
-/* Loading (North): the ticks as a still ghost, the chart colours' sweep passing over them. */
+/* Loading (North): the ticks as a still ghost, the shimmer passing over them. */
 .ws-tick-strip--loading { --pitch: calc((100% + var(--g)) / var(--n)); background: var(--ws-shimmer); background-size: 300% 100%; -webkit-mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); }
 .ws-tick-strip--loading > * { visibility: hidden; }
 @media (prefers-reduced-motion: no-preference) {
@@ -4474,7 +4469,7 @@ a.ws-timeline__title { display: block; font-weight: 500; text-decoration: none;
 .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/tokens.json

@@ -3,7 +3,7 @@
   "version": 1,
   "meta": {
     "source": "code",
-    "repo": "@felloinnovations/brand-kit 0.5.0: tokens/_source.hubl.css (the kit), tokens/_product.css (the product layer) and tokens/_dark.css (the dark theme)",
+    "repo": "@felloinnovations/brand-kit 0.5.1: tokens/_source.hubl.css (the kit), tokens/_product.css (the product layer) and tokens/_dark.css (the dark theme)",
     "note": "Generated by scripts/generate-tokens.mjs (yarn tokens): every value and the token list come from tokens/; the usage notes, the order and the type groups are kept from this file, so edit a note here and a value there. Kit tokens keep the kit's names (color-*, font-size-*, space-*, radius-*, shadow-*). The product layer keeps its ws-* names. A var(), calc() or color-mix() is written as the literal it resolves to, with the formula at the end of its usage note. A colour the dark theme changes has a value per theme: light, dark (data-theme=\"dark\") and navy (data-ground=\"navy\"). A gradient or a set of colour channels cannot be held here, so these are in tokens.css and fello.css only: --gradient-ai, --gradient-scrim-dropdown, --gradient-btn-primary, --ws-ink-rgb, --ws-shade-rgb, --ws-frame, --ws-stage-wash, --ws-shimmer, --ws-team-glow, --ws-cool-glow, --ws-orb."
   },
   "color": {
@@ -783,12 +783,8 @@
       },
       {
         "name": "ws-shimmer-ground",
-        "value": {
-          "light": "#ece8e4",
-          "dark": "#1a2631",
-          "navy": "#20354b"
-        },
-        "usage": "The grey a loading shimmer sweeps over: the tray made warmer in light, the track in dark. (CSS: color-mix(in srgb, var(--ws-tray) 96%, #d4700c))"
+        "value": "{ws-ghost}",
+        "usage": "The grey a loading shimmer sweeps over: the ghost grey (ws-ghost), the same at rest and in motion, which shows on the cream and on the tray in every theme. The pass over it is a lighter step of the same grey, never a chart hue (0.5.1)."
       },
       {
         "name": "ws-chart-dot",