@cloudgrid-io/ui 0.13.0 → 0.14.0

package/dist/theme.css

@@ -147,16 +147,18 @@
      gives: a token whose utility lands a release later is a token the first
      consumer reaches for and does not find.
 
-     There is no --color-danger-border or --color-unhealthy-border, because
-     there is no such token — the same shape as --color-offline-fill, and the
-     `state` group's own note carries the reason. */
+     The grid is whole as of #154: danger and unhealthy have borders now, so the
+     absence this comment used to record is gone. --color-offline-fill is still
+     the one deliberate hole, and still for #111's reason. */
   --color-online-border: var(--cg-online-border);
   --color-online-strong: var(--cg-online-strong);
   --color-expired-border: var(--cg-expired-border);
   --color-expired-strong: var(--cg-expired-strong);
   --color-pending-border: var(--cg-pending-border);
   --color-pending-strong: var(--cg-pending-strong);
+  --color-unhealthy-border: var(--cg-unhealthy-border);
   --color-unhealthy-strong: var(--cg-unhealthy-strong);
+  --color-danger-border: var(--cg-danger-border);
   --color-danger-strong: var(--cg-danger-strong);
 
   /* ---- lines ---- */
@@ -273,6 +275,50 @@
   --shadow-hover: var(--cg-shadow-hover);
   --shadow-panel: var(--cg-shadow-panel);
   --shadow-focus: var(--cg-ring-focus);
+  /* The live dot's halo (#154), paired with --cg-live-halo the way --shadow-focus
+     is paired with --cg-focus-ring. */
+  --shadow-live: var(--cg-ring-live);
+
+  /* Tailwind's OWN three rungs, pointed at the brand's (#155).
+
+     This block is not a rename and not a convenience. Until it existed, the
+     elevation of this package's own components was decided by the CONSUMER:
+     dropdown-menu is authored with `shadow-md` and `shadow-lg`, select and
+     combobox with `shadow-md`, tabs with `shadow-sm`, and theme.css declared
+     none of those three names. So in a consumer that declares nothing, every
+     library dropdown and select renders Tailwind stock — measured,
+     `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` for shadow-lg — which
+     is far heavier and greyer than anything this brand ships. Nothing errors and
+     nothing looks broken; the components are just not on the brand.
+
+     The console was carrying three lines exactly like these in its own
+     globals.css to hold this package's components on this package's elevation.
+     A consumer paying to fix the library is the shape #149, #150 and #151 all
+     had, and the answer is the same: it belongs in the token file.
+
+     Forwarded, not repointed. The alternative was to rewrite the four component
+     class strings onto `shadow-card` / `shadow-raised`, which would have changed
+     the compiled class NAMES and so changed what the console renders today. This
+     way the compiled rules are byte-identical to what the console's own forwards
+     produce, and every other consumer gets the brand values without knowing this
+     was ever a problem. Proof in docs/test-results/.
+
+     The role mapping is the console's, unchanged: sm and md are the card
+     elevation, lg is the overlay lift. sm and md landing on one value is not an
+     oversight — this system contains one card elevation, and the console had
+     already collapsed its own three-tier ramp onto it.
+
+     xs, xl and 2xl are deliberately left on Tailwind stock. No component here
+     uses them, and forwarding a rung nothing consumes is a value invented to
+     complete a grid.
+
+     KNOWN: a forwarded rung loses Tailwind's --tw-shadow-color fallback, so
+     `shadow-red-500/20` stops tinting shadow-md. That is already true of
+     shadow-card and shadow-raised, and this palette has no colour a shadow would
+     be tinted with. */
+  --shadow-sm: var(--cg-shadow-card);
+  --shadow-md: var(--cg-shadow-card);
+  --shadow-lg: var(--cg-shadow-raised);
 
   /* ---- spacing ----
      --spacing sets the 4px base, so the numeric utilities (p-4, gap-6) line up

package/dist/tokens/base.json

@@ -52,7 +52,7 @@
     }
   },
   "state": {
-    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.\n\nTHREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a\nhairline around it, a dot and a word, and until now the set carried only the\nfirst two of those four. -border is the hairline and -strong is the word; the\nbare name stays the dot it has always been.\n\n  <status>-fill     the chip ground\n  <status>-border   the hairline around it, a pale tint\n  <status>          the dot. An indicator, so 3:1, never text\n  <status>-strong   the word on the fill. Text, so 4.5:1\n\nThe values are the Console's, measured and shipped, not new ones: #149 asked\nfor the rung and console#579 had already been forced to leave two bands as\nliterals for the want of it. Only unhealthy-strong and danger-strong are\nderived, each for a stated reason in its own note.\n\nNo --cg-danger-border and no --cg-unhealthy-border. Neither has ever been drawn\nby any surface — StatusChip's error state has no edge and unhealthy has no band\nat all — so a value here would be invented to complete a grid rather than to\nserve a chip. Same call as --cg-offline-fill above, and the same remedy: add\nthem when something needs them, with the number that made the choice.\n\noffline has no -border and no -strong either, and for the reason it has no\nfill: an unplugged chip sits on the card ground with border-control, and its\nword is --cg-text-primary. Absence of state still does not need a colour.\n\nOn the panel and on ink, -border resolves to the surface's own hairline and\n-strong to its own primary text. A dark ground has no darker rung to reach for,\nand the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's\nchip fill, which is a dot and not a word. Worth knowing before retuning: on ink\nthe tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who\nwants the word tinted there changes five entries in surface-ink.json. On the\npanel it is not available at any value — white is 4.31:1 on that fill and white\nis the lightest colour there is, so AA on a panel chip needs the FILL to move.",
+    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.\n\nTHREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a\nhairline around it, a dot and a word, and until now the set carried only the\nfirst two of those four. -border is the hairline and -strong is the word; the\nbare name stays the dot it has always been.\n\n  <status>-fill     the chip ground\n  <status>-border   the hairline around it, a pale tint\n  <status>          the dot. An indicator, so 3:1, never text\n  <status>-strong   the word on the fill. Text, so 4.5:1\n\nThe values are the Console's, measured and shipped, not new ones: #149 asked\nfor the rung and console#579 had already been forced to leave two bands as\nliterals for the want of it. Only unhealthy-strong and danger-strong are\nderived, each for a stated reason in its own note.\n\nFOUR RUNGS PER STATUS as of 2026-09-05 (#154). --cg-danger-border and\n--cg-unhealthy-border were the two holes #152 left, on the reasoning above: at\nthe time nothing drew either one, so a value would have been invented to complete\na grid rather than to serve a chip. That note said what would change the answer —\n\"add them when something needs them, with the number that made the choice\" — and\nthis is it. Both are DERIVED rather than adopted, because neither has a shipped\nliteral anywhere, and each carries its number in its own note.\n\nThe derivation is one rule, and it is the two adopted borders' own measured\nposition rather than a recipe: a -border is its own tone's hue, at the lightness\nthat reproduces the 1.18-1.19:1 those two hold against their own fills, carrying\nthe mean of their chroma (OKLCH 0.0998) or the most sRGB has at that hue and\nlightness, whichever is smaller. Danger's hue hits the second clause and\nunhealthy's does not; both notes show the sweep.\n\noffline has no -border and no -strong either, and for the reason it has no\nfill: an unplugged chip sits on the card ground with border-control, and its\nword is --cg-text-primary. Absence of state still does not need a colour.\n\nOn the panel and on ink, -border resolves to the surface's own hairline and\n-strong to its own primary text. A dark ground has no darker rung to reach for,\nand the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's\nchip fill, which is a dot and not a word. Worth knowing before retuning: on ink\nthe tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who\nwants the word tinted there changes five entries in surface-ink.json. On the\npanel it is not available at any value — white is 4.31:1 on that fill and white\nis the lightest colour there is, so AA on a panel chip needs the FILL to move.",
     "online": {
       "$value": "#00a05c",
       "$type": "color",
@@ -170,6 +170,26 @@
         }
       }
     },
+    "unhealthy-border": {
+      "$value": "#eee596",
+      "$type": "color",
+      "$description": "The hairline around an unhealthy chip. 1.19:1 against --cg-unhealthy-fill and\n1.28:1 on white.\n\nDERIVED, like unhealthy-strong and for the same reason: unhealthy is the one\ntone here the Console never had, so there is no shipped literal to take.\n\nThe rule is the two adopted borders' own position, measured rather than\ninvented. #abefc6 and #fedf89 are not mixes of their tone and their fill — the\nclosest sRGB mix reproduces them at dE2000 5.5 and 13.1 — but they sit in one\nnarrow band: OKLCH L 0.8958 and 0.9112, chroma 0.0886 and 0.1109, and 1.19:1\nand 1.18:1 against their own fills. So a new border is its own tone's hue at the\nlightness that reproduces that ratio, carrying the mean of their chroma (0.0998)\nor the most sRGB has at that hue and lightness, whichever is smaller. Here the\nhue has room: L 0.911, C 0.0998, H 102.17.\n\nKNOWN, measured before it was accepted rather than after: dE2000 6.3 from\nexpired-border, which is far under the 16.5 floor the tones in this palette were\nchosen against. It is not a defect, and the reason is that this rung already\nbehaves this way — expired-fill and unhealthy-fill ship 2.4 apart, so the border\nis MORE separated than the ground it surrounds. 16.5 is a floor for the rungs\nthat carry the signal, the dot and the word, which measure 22.3 and 20.6 for this\npair. At the pale end an amber and a gold are the same colour: swept across the\nwhole hue's usable chroma, the best separation available anywhere in the band is\n11.6, and buying it costs the pale tint that IS this rung's definition. Same\nfinding #122 recorded for the tones on a dark ground.\n\nNot an alias of expired-border, though the two are close enough that it would\nrender almost identically today. #122's whole decision was that unhealthy must\nnot be an alias of expired: a designer retuning one must not silently retune the\nother.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "#ffd3cd",
+      "$type": "color",
+      "$description": "The hairline around a danger chip. 1.19:1 against --cg-danger-fill and 1.35:1 on\nwhite.\n\nDERIVED by the rule unhealthy-border's note sets out, and the interesting part is\nwhere the rule runs out. --cg-danger is OKLCH H 27.03, and at the lightness the\nrule asks for, sRGB carries at most C 0.0506 on that hue — half the 0.0998 the\ntwo adopted borders carry. There is no paler red with more chroma; the gamut\nends. So this is the second clause of the rule doing its work: L 0.904 at the\nmost chroma available, which puts the red channel at 255.\n\nMeasured across the band, so the choice is visible:\n\n  L 0.896  maxC 0.0551  #ffd0c9  1.22:1 on fill\n  L 0.904  maxC 0.0506  #ffd3cd  1.19:1 on fill   <- taken\n  L 0.912  maxC 0.0461  #ffd7d2  1.16:1 on fill\n\ndE2000 to its neighbours in this rung: 38.6 from online-border, 27.3 from\nunhealthy-border, 25.0 from expired-border. It is the best separated of the four,\nwhich is the right way round — a failed chip is the one a reader must not\nmisread.\n\n#152 declined to add this, and correctly: at the time nothing drew it, and the\n`state` group's note says a value would then be invented to complete a grid\nrather than to serve a chip. That note also says what would change the answer —\n\"add them when something needs them, with the number that made the choice\" — and\nui#154 is that. The number is above.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
     "pending-border": {
       "$value": "{state.expired-border}",
       "$description": "The hairline around a pending chip, aliased to expired's for the same reason the\ntone and the fill are. Splitting pending from expired later means editing the\nfour pending entries in this file and nothing else.",
@@ -1179,6 +1199,16 @@
           "css": "--cg-ring-focus"
         }
       }
+    },
+    "ring-live": {
+      "$value": "0 0 0 4px var(--cg-live-halo)",
+      "$description": "The live dot's halo as a ready-made box-shadow, so a surface draws the mark with\none token instead of restating the geometry.\n\nSame pair as --cg-focus-ring and --cg-ring-focus above: the colour lives in the\nindicator group, the shadow that spends it lives here. 4px rather than the focus\nring's 3px because that is the spread the mark ships at — the Console writes\n`box-shadow: 0 0 0 4px var(--color-volt-ring)` at all seven call sites, so the\ngeometry was already one value repeated seven times and is now one token.\n\nA dot larger than 8px wants a larger halo; that is a call site's business, and it\nsets its own box-shadow with --cg-live-halo rather than this rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-ring-live"
+        }
+      }
     }
   },
   "motion": {
@@ -1278,6 +1308,16 @@
         }
       }
     },
+    "live-halo": {
+      "$value": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
+      "$description": "The soft ring around a live dot. The other half of the mark --cg-volt's note\ndescribes: \"the dot in its halo\".\n\nDERIVED FROM THE DOT, not written out, and that is the whole reason this exists\nrather than the value being pasted back. Computed it is the Console's own\nrgba(182, 255, 46, 0.32) — 32% of #b6ff2e over white is #e8ffbc, which is what\nships today — but written as a literal it would be a third place #b6ff2e is\nspelled out, and the next volt retune would leave an old-hue halo around a\nnew-hue dot with nothing anywhere going red.\n\nA ROLE name rather than --cg-volt-ring, which #149 purged as volt residue. The\npurge was right about this package (nothing here read it) and the name was the\nresidue: a token named for the hue cannot survive the hue being renamed, and\n--cg-volt's own note records that which lime the brand owns is still open. This\none is deliberately downstream of that question — whatever answers it, the halo\nfollows.\n\nWhat the purge missed is that the Console DOES read it, seven times: .cg-live-dot\nplus StatusChip, DiscoverRails, EngagementHeadline, MyStuffLoopStrip,\nViewsTrendChart and GridStatusBoard, each setting the dot and its box-shadow\ntogether. console#591 kept all three volt names rather than convert two thirds of\none mark, which is what ui#154 reports.\n\nNo contrast obligation of its own: it is a halo, not a foreground, and the dot it\nsurrounds is the signal. Declared at :root only, like --cg-volt itself, because a\nbrand mark is not a state and does not flip per surface.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-live-halo"
+        }
+      }
+    },
     "scrim": {
       "$value": "rgba(34, 34, 34, 0.4)",
       "$type": "color",

package/dist/tokens/surface-ink.json

@@ -249,6 +249,24 @@
         }
       }
     },
+    "unhealthy-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
     "pending-border": {
       "$value": "{state.expired-border}",
       "$extensions": {

package/dist/tokens/surface-panel.json

@@ -233,6 +233,24 @@
         }
       }
     },
+    "unhealthy-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
     "pending-border": {
       "$value": "{state.expired-border}",
       "$extensions": {

package/dist/tokens.css

@@ -124,11 +124,20 @@
      literals for the want of it. Only unhealthy-strong and danger-strong are
      derived, each for a stated reason in its own note.
 
-     No --cg-danger-border and no --cg-unhealthy-border. Neither has ever been drawn
-     by any surface — StatusChip's error state has no edge and unhealthy has no band
-     at all — so a value here would be invented to complete a grid rather than to
-     serve a chip. Same call as --cg-offline-fill above, and the same remedy: add
-     them when something needs them, with the number that made the choice.
+     FOUR RUNGS PER STATUS as of 2026-09-05 (#154). --cg-danger-border and
+     --cg-unhealthy-border were the two holes #152 left, on the reasoning above: at
+     the time nothing drew either one, so a value would have been invented to complete
+     a grid rather than to serve a chip. That note said what would change the answer —
+     "add them when something needs them, with the number that made the choice" — and
+     this is it. Both are DERIVED rather than adopted, because neither has a shipped
+     literal anywhere, and each carries its number in its own note.
+
+     The derivation is one rule, and it is the two adopted borders' own measured
+     position rather than a recipe: a -border is its own tone's hue, at the lightness
+     that reproduces the 1.18-1.19:1 those two hold against their own fills, carrying
+     the mean of their chroma (OKLCH 0.0998) or the most sRGB has at that hue and
+     lightness, whichever is smaller. Danger's hue hits the second clause and
+     unhealthy's does not; both notes show the sweep.
 
      offline has no -border and no -strong either, and for the reason it has no
      fill: an unplugged chip sits on the card ground with border-control, and its
@@ -218,6 +227,66 @@
      --cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is
      the tone doing the border's job. */
   --cg-expired-border: #fedf89;
+  /*
+     The hairline around an unhealthy chip. 1.19:1 against --cg-unhealthy-fill and
+     1.28:1 on white.
+
+     DERIVED, like unhealthy-strong and for the same reason: unhealthy is the one
+     tone here the Console never had, so there is no shipped literal to take.
+
+     The rule is the two adopted borders' own position, measured rather than
+     invented. #abefc6 and #fedf89 are not mixes of their tone and their fill — the
+     closest sRGB mix reproduces them at dE2000 5.5 and 13.1 — but they sit in one
+     narrow band: OKLCH L 0.8958 and 0.9112, chroma 0.0886 and 0.1109, and 1.19:1
+     and 1.18:1 against their own fills. So a new border is its own tone's hue at the
+     lightness that reproduces that ratio, carrying the mean of their chroma (0.0998)
+     or the most sRGB has at that hue and lightness, whichever is smaller. Here the
+     hue has room: L 0.911, C 0.0998, H 102.17.
+
+     KNOWN, measured before it was accepted rather than after: dE2000 6.3 from
+     expired-border, which is far under the 16.5 floor the tones in this palette were
+     chosen against. It is not a defect, and the reason is that this rung already
+     behaves this way — expired-fill and unhealthy-fill ship 2.4 apart, so the border
+     is MORE separated than the ground it surrounds. 16.5 is a floor for the rungs
+     that carry the signal, the dot and the word, which measure 22.3 and 20.6 for this
+     pair. At the pale end an amber and a gold are the same colour: swept across the
+     whole hue's usable chroma, the best separation available anywhere in the band is
+     11.6, and buying it costs the pale tint that IS this rung's definition. Same
+     finding #122 recorded for the tones on a dark ground.
+
+     Not an alias of expired-border, though the two are close enough that it would
+     render almost identically today. #122's whole decision was that unhealthy must
+     not be an alias of expired: a designer retuning one must not silently retune the
+     other. */
+  --cg-unhealthy-border: #eee596;
+  /*
+     The hairline around a danger chip. 1.19:1 against --cg-danger-fill and 1.35:1 on
+     white.
+
+     DERIVED by the rule unhealthy-border's note sets out, and the interesting part is
+     where the rule runs out. --cg-danger is OKLCH H 27.03, and at the lightness the
+     rule asks for, sRGB carries at most C 0.0506 on that hue — half the 0.0998 the
+     two adopted borders carry. There is no paler red with more chroma; the gamut
+     ends. So this is the second clause of the rule doing its work: L 0.904 at the
+     most chroma available, which puts the red channel at 255.
+
+     Measured across the band, so the choice is visible:
+
+       L 0.896  maxC 0.0551  #ffd0c9  1.22:1 on fill
+       L 0.904  maxC 0.0506  #ffd3cd  1.19:1 on fill   <- taken
+       L 0.912  maxC 0.0461  #ffd7d2  1.16:1 on fill
+
+     dE2000 to its neighbours in this rung: 38.6 from online-border, 27.3 from
+     unhealthy-border, 25.0 from expired-border. It is the best separated of the four,
+     which is the right way round — a failed chip is the one a reader must not
+     misread.
+
+     #152 declined to add this, and correctly: at the time nothing drew it, and the
+     `state` group's note says a value would then be invented to complete a grid
+     rather than to serve a chip. That note also says what would change the answer —
+     "add them when something needs them, with the number that made the choice" — and
+     ui#154 is that. The number is above. */
+  --cg-danger-border: #ffd3cd;
   /*
      The hairline around a pending chip, aliased to expired's for the same reason the
      tone and the fill are. Splitting pending from expired later means editing the
@@ -466,6 +535,19 @@
   --cg-shadow-hover: 0 8px 24px rgba(34, 34, 34, 0.08);
   --cg-shadow-panel: 0 10px 40px rgba(90, 71, 240, 0.18);
   --cg-ring-focus: 0 0 0 3px var(--cg-focus-ring);
+  /*
+     The live dot's halo as a ready-made box-shadow, so a surface draws the mark with
+     one token instead of restating the geometry.
+
+     Same pair as --cg-focus-ring and --cg-ring-focus above: the colour lives in the
+     indicator group, the shadow that spends it lives here. 4px rather than the focus
+     ring's 3px because that is the spread the mark ships at — the Console writes
+     `box-shadow: 0 0 0 4px var(--color-volt-ring)` at all seven call sites, so the
+     geometry was already one value repeated seven times and is now one token.
+
+     A dot larger than 8px wants a larger halo; that is a call site's business, and it
+     sets its own box-shadow with --cg-live-halo rather than this rung. */
+  --cg-ring-live: 0 0 0 4px var(--cg-live-halo);
 
   /* ---- motion ----
      motion: small and quick, nothing slides in */
@@ -519,6 +601,34 @@
      and belongs to volt. Adding a state -ink is still a brand decision and still
      open. */
   --cg-volt-ink: #243d00;
+  /*
+     The soft ring around a live dot. The other half of the mark --cg-volt's note
+     describes: "the dot in its halo".
+
+     DERIVED FROM THE DOT, not written out, and that is the whole reason this exists
+     rather than the value being pasted back. Computed it is the Console's own
+     rgba(182, 255, 46, 0.32) — 32% of #b6ff2e over white is #e8ffbc, which is what
+     ships today — but written as a literal it would be a third place #b6ff2e is
+     spelled out, and the next volt retune would leave an old-hue halo around a
+     new-hue dot with nothing anywhere going red.
+
+     A ROLE name rather than --cg-volt-ring, which #149 purged as volt residue. The
+     purge was right about this package (nothing here read it) and the name was the
+     residue: a token named for the hue cannot survive the hue being renamed, and
+     --cg-volt's own note records that which lime the brand owns is still open. This
+     one is deliberately downstream of that question — whatever answers it, the halo
+     follows.
+
+     What the purge missed is that the Console DOES read it, seven times: .cg-live-dot
+     plus StatusChip, DiscoverRails, EngagementHeadline, MyStuffLoopStrip,
+     ViewsTrendChart and GridStatusBoard, each setting the dot and its box-shadow
+     together. console#591 kept all three volt names rather than convert two thirds of
+     one mark, which is what ui#154 reports.
+
+     No contrast obligation of its own: it is a halo, not a foreground, and the dot it
+     surrounds is the signal. Declared at :root only, like --cg-volt itself, because a
+     brand mark is not a state and does not flip per surface. */
+  --cg-live-halo: color-mix(in srgb, var(--cg-volt) 32%, transparent);
   /*
      The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the
      Console's (#16181d) — a scrim sits above content and belongs to the system, not
@@ -599,6 +709,12 @@
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
   --cg-online-border: var(--cg-border-hairline);
   --cg-expired-border: var(--cg-border-hairline);
+  /*
+     The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot. */
+  --cg-unhealthy-border: var(--cg-border-hairline);
+  /*
+     The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline. */
+  --cg-danger-border: var(--cg-border-hairline);
   --cg-pending-border: var(--cg-expired-border);
   --cg-online-strong: var(--cg-text-primary);
   --cg-expired-strong: var(--cg-text-primary);
@@ -674,6 +790,12 @@
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
   --cg-online-border: var(--cg-border-hairline);
   --cg-expired-border: var(--cg-border-hairline);
+  /*
+     The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot. */
+  --cg-unhealthy-border: var(--cg-border-hairline);
+  /*
+     The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline. */
+  --cg-danger-border: var(--cg-border-hairline);
   --cg-pending-border: var(--cg-expired-border);
   --cg-online-strong: var(--cg-text-primary);
   --cg-expired-strong: var(--cg-text-primary);

package/dist/tokens.json

@@ -20,6 +20,8 @@
       "--cg-danger-fill": "#fceded",
       "--cg-online-border": "#abefc6",
       "--cg-expired-border": "#fedf89",
+      "--cg-unhealthy-border": "#eee596",
+      "--cg-danger-border": "#ffd3cd",
       "--cg-pending-border": "var(--cg-expired-border)",
       "--cg-online-strong": "#085d3a",
       "--cg-expired-strong": "#7a3d0a",
@@ -128,6 +130,7 @@
       "--cg-shadow-hover": "0 8px 24px rgba(34, 34, 34, 0.08)",
       "--cg-shadow-panel": "0 10px 40px rgba(90, 71, 240, 0.18)",
       "--cg-ring-focus": "0 0 0 3px var(--cg-focus-ring)",
+      "--cg-ring-live": "0 0 0 4px var(--cg-live-halo)",
       "--cg-duration-fast": "120ms",
       "--cg-duration": "180ms",
       "--cg-duration-slow": "280ms",
@@ -138,6 +141,7 @@
       "--cg-press-scale": "0.985",
       "--cg-volt": "#b6ff2e",
       "--cg-volt-ink": "#243d00",
+      "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)"
     },
@@ -166,6 +170,8 @@
       "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-online-border": "var(--cg-border-hairline)",
       "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-unhealthy-border": "var(--cg-border-hairline)",
+      "--cg-danger-border": "var(--cg-border-hairline)",
       "--cg-pending-border": "var(--cg-expired-border)",
       "--cg-online-strong": "var(--cg-text-primary)",
       "--cg-expired-strong": "var(--cg-text-primary)",
@@ -201,6 +207,8 @@
       "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-online-border": "var(--cg-border-hairline)",
       "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-unhealthy-border": "var(--cg-border-hairline)",
+      "--cg-danger-border": "var(--cg-border-hairline)",
       "--cg-pending-border": "var(--cg-expired-border)",
       "--cg-online-strong": "var(--cg-text-primary)",
       "--cg-expired-strong": "var(--cg-text-primary)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",