@cloudgrid-io/ui 0.12.0 → 0.13.0

package/dist/theme.css

@@ -66,6 +66,10 @@
   --color-page: var(--cg-surface-page);
   --color-page-alt: var(--cg-surface-page-alt);
   --color-subtle: var(--cg-surface-subtle);
+  /* The neutral raised ground (#151). `subtle` is the lavender tint and `card`
+     is white, so before this there was no name for "one step off white, no
+     hue" and a raised panel had to flatten or take a cast. */
+  --color-raised: var(--cg-surface-raised);
   --color-control: var(--cg-surface-control);
   --color-panel: var(--cg-surface-panel);
   --color-code: var(--cg-surface-code);
@@ -137,6 +141,24 @@
   --color-expired-fill: var(--cg-expired-fill);
   --color-danger-fill: var(--cg-danger-fill);
 
+  /* The other two rungs of the chip (#149, #150). `-fill` is the ground, the
+     bare name is the dot, `-border` is the hairline and `-strong` is the word.
+     Mapped in the same pass as the tokens, for the reason the block above
+     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. */
+  --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-strong: var(--cg-unhealthy-strong);
+  --color-danger-strong: var(--cg-danger-strong);
+
   /* ---- lines ---- */
   --color-hairline: var(--cg-border-hairline);
   --color-line: var(--cg-border-control);

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.",
+    "$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.",
     "online": {
       "$value": "#00a05c",
       "$type": "color",
@@ -149,6 +149,84 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "#abefc6",
+      "$type": "color",
+      "$description": "The hairline around an online chip. From the Console's OK band, where it has\nshipped as #abefc6 on #ecfdf3 (console#579).\n\nIts own rung rather than the tone, and console#579 is why. Both systems carried\n{tone, fill} pairs and no third value, so converting the band meant sending the\nborder AND the word to --cg-online. Measured, that is not a repaint: the word\nfell from 7.55:1 to 3.06:1 and the border went from this pale tint to full\nsaturation. The band stayed a literal instead. This token is what lets it move.\n\n1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so\nthere is no floor it has to clear; what it has to do is stay pale, which the\ncontrast guardrail holds with a ceiling rather than a floor.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "#fedf89",
+      "$type": "color",
+      "$description": "The hairline around an expired or pending chip. From the Console's WARN band,\nwhere it has shipped as #fedf89 on #fffaeb (console#579).\n\n1.18:1 against --cg-expired-fill. Same rung and same reasoning as\n--cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is\nthe tone doing the border's job.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-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.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "#085d3a",
+      "$type": "color",
+      "$description": "The WORD on an online chip, and online as running text anywhere. From the\nConsole's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.\n\nThis is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on\nwhite and 3.06:1 on its own fill, which is an indicator and not a foreground, so\nthe component paints the dot with the tone and the word with --cg-text-primary,\nand its own note says a state foreground is a brand decision rather than a\ncomponent's to take. This is that decision, made with a value the Console has\nalready shipped rather than a new one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "#7a3d0a",
+      "$type": "color",
+      "$description": "The word on an expired chip, and expired as running text. From the Console's\nWARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$description": "The word on a pending chip. Aliased to expired's, like every other pending rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "#5d5401",
+      "$type": "color",
+      "$description": "The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on\nwhite.\n\nDERIVED, not adopted. unhealthy is the one tone here the Console never had, so\nthere is no shipped literal to take. This is --cg-unhealthy darkened along its\nown hue and saturation until it reaches the band the two adopted words already\noccupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather\nthan stopped at the first value that clears 4.5:1, so the words read as one set\ninstead of three matched and one nearly failing.\n\nThe tone is not simply reused because it does not clear the bar: --cg-unhealthy\nmeasures 4.46:1 on this fill. Four hundredths under the floor is under it.\n\ndE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from\nonline-strong. The tightest pair in the whole rung is expired-strong against\ndanger-strong at 19.8, above the 16.5 floor this palette was measured against.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "#c42828",
+      "$type": "color",
+      "$description": "The word on a danger chip, and danger as running text. 5.02:1 on\n--cg-danger-fill and 5.70:1 on white.\n\n--cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own\nfill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails\nas a sentence. The token is deliberately NOT moved to fix that: every fill,\nborder and icon already consuming it would repaint, and the error is that danger\nhad no word rung, not that its tone is wrong.\n\nThe Console's retired --color-error #d42b2b is where this starts and is not\nwhere it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still\nunder the floor on the exact chip that needs it. This is that red darkened along\nits own hue and saturation until it clears 5:1 on the fill, which is the\nsmallest move that holds on both grounds.\n\nKept lighter than the other three words on purpose. It is already the closest\npair in the rung, dE2000 19.8 from expired-strong, and darkening it into their\n7:1 band closes that to 16.6 — a failed chip and an expiring one should not\nconverge.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "brand-derived": {
@@ -210,6 +288,16 @@
         }
       }
     },
+    "neutral-50": {
+      "$value": "#f4f6f8",
+      "$type": "color",
+      "$description": "SOURCE: the Console's --color-canvas, the recessed ground behind a card.\n\nNot a pure grey. It carries a slight blue cast where the rest of this ramp is\nneutral, and that is recorded rather than corrected because the value is what\nlegacy raised panels already render and matching them is the point (#151).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-neutral-50"
+        }
+      }
+    },
     "neutral-100": {
       "$value": "#f1f1f1",
       "$type": "color",
@@ -304,6 +392,15 @@
         }
       }
     },
+    "surface-raised": {
+      "$value": "{neutrals.neutral-50}",
+      "$description": "A neutral ground one step off white, for a panel that should read as lifted off\nthe page rather than flat on it.\n\n#151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,\nso a raised panel had no value-preserving target and every consumer faced the\nsame three-way choice with no right answer — flatten it to white, tint it\nlavender, or pin a literal. This is the fourth answer, and it is the Console's\nown #f4f6f8 rather than a new value.\n\nDeclared at :root only, like --cg-surface-subtle and --cg-surface-control. The\nneutral grounds do not flip: inside a purple panel or on ink, depth is carried\nby --cg-surface-card and the hairline instead. Making it flip is one entry in\neach of the two surface sets.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-raised"
+        }
+      }
+    },
     "surface-control": {
       "$value": "{neutrals.neutral-200}",
       "$extensions": {
@@ -1164,23 +1261,13 @@
     "volt": {
       "$value": "#b6ff2e",
       "$type": "color",
-      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nMEASURED 1.21:1 on white, which is below every bar there is. It works on the\npanel (4.82:1) and on ink (13.13:1); on the page ground it reads only because\nit is paired with the ring and, in a pill, with volt-ink. Recorded rather than\nsilently corrected: darkening it would change the Console's appearance, which\nis a design decision and not a contrast fix.\n\nNote it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one\nthe brand owns is the open question here.\n\nIt is also a second LIVE. state.online (#00a05c) is the same idea in the state\nscale, and EntityStatus (#116) already paints the live dot with it. They are not\ninterchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a\nsurface must not swap one for the other on the assumption that both mean\n'serving'. Which name the brand keeps for live belongs to the same open question,\nand until it is answered volt is the Console's brand mark and online is the\nentity's state.",
+      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nMEASURED 1.21:1 on white, which is below every bar there is. It works on the\npanel (4.82:1) and on ink (13.13:1); on the page ground it reads only because\nit is paired with volt-ink in a pill. Recorded rather than\nsilently corrected: darkening it would change the Console's appearance, which\nis a design decision and not a contrast fix.\n\nNote it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one\nthe brand owns is the open question here.\n\nIt is also a second LIVE. state.online (#00a05c) is the same idea in the state\nscale, and EntityStatus (#116) already paints the live dot with it. They are not\ninterchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a\nsurface must not swap one for the other on the assumption that both mean\n'serving'. Which name the brand keeps for live belongs to the same open question,\nand until it is answered volt is the Console's brand mark and online is the\nentity's state.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-volt"
         }
       }
     },
-    "volt-ring": {
-      "$value": "rgba(182, 255, 46, 0.32)",
-      "$type": "color",
-      "$description": "The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above.",
-      "$extensions": {
-        "io.cloudgrid": {
-          "css": "--cg-volt-ring"
-        }
-      }
-    },
     "volt-ink": {
       "$value": "#243d00",
       "$type": "color",

package/dist/tokens/surface-ink.json

@@ -134,7 +134,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#5FD99A",
       "$type": "color",
@@ -232,6 +232,70 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens/surface-panel.json

@@ -118,7 +118,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#C8F5DC",
       "$type": "color",
@@ -216,6 +216,70 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens.css

@@ -107,7 +107,41 @@
      brighter gold on the same ramp as the amber rather than a new hue family,
      because green/amber/red is the traffic light an operator already reads and
      'serving but degraded' is its middle rung. Its own note carries the numbers
-     and the three families that were measured and rejected. */
+     and the three families that were measured and rejected.
+
+     THREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a
+     hairline around it, a dot and a word, and until now the set carried only the
+     first two of those four. -border is the hairline and -strong is the word; the
+     bare name stays the dot it has always been.
+
+       <status>-fill     the chip ground
+       <status>-border   the hairline around it, a pale tint
+       <status>          the dot. An indicator, so 3:1, never text
+       <status>-strong   the word on the fill. Text, so 4.5:1
+
+     The values are the Console's, measured and shipped, not new ones: #149 asked
+     for the rung and console#579 had already been forced to leave two bands as
+     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.
+
+     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
+     word is --cg-text-primary. Absence of state still does not need a colour.
+
+     On the panel and on ink, -border resolves to the surface's own hairline and
+     -strong to its own primary text. A dark ground has no darker rung to reach for,
+     and the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's
+     chip fill, which is a dot and not a word. Worth knowing before retuning: on ink
+     the tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who
+     wants the word tinted there changes five entries in surface-ink.json. On the
+     panel it is not available at any value — white is 4.31:1 on that fill and white
+     is the lightest colour there is, so AA on a panel chip needs the FILL to move. */
   /*
      Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white. */
   --cg-online: #00a05c;
@@ -162,6 +196,90 @@
   /*
      From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one. */
   --cg-danger-fill: #fceded;
+  /*
+     The hairline around an online chip. From the Console's OK band, where it has
+     shipped as #abefc6 on #ecfdf3 (console#579).
+
+     Its own rung rather than the tone, and console#579 is why. Both systems carried
+     {tone, fill} pairs and no third value, so converting the band meant sending the
+     border AND the word to --cg-online. Measured, that is not a repaint: the word
+     fell from 7.55:1 to 3.06:1 and the border went from this pale tint to full
+     saturation. The band stayed a literal instead. This token is what lets it move.
+
+     1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so
+     there is no floor it has to clear; what it has to do is stay pale, which the
+     contrast guardrail holds with a ceiling rather than a floor. */
+  --cg-online-border: #abefc6;
+  /*
+     The hairline around an expired or pending chip. From the Console's WARN band,
+     where it has shipped as #fedf89 on #fffaeb (console#579).
+
+     1.18:1 against --cg-expired-fill. Same rung and same reasoning as
+     --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 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
+     four pending entries in this file and nothing else. */
+  --cg-pending-border: var(--cg-expired-border);
+  /*
+     The WORD on an online chip, and online as running text anywhere. From the
+     Console's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.
+
+     This is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on
+     white and 3.06:1 on its own fill, which is an indicator and not a foreground, so
+     the component paints the dot with the tone and the word with --cg-text-primary,
+     and its own note says a state foreground is a brand decision rather than a
+     component's to take. This is that decision, made with a value the Console has
+     already shipped rather than a new one. */
+  --cg-online-strong: #085d3a;
+  /*
+     The word on an expired chip, and expired as running text. From the Console's
+     WARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white. */
+  --cg-expired-strong: #7a3d0a;
+  /*
+     The word on a pending chip. Aliased to expired's, like every other pending rung. */
+  --cg-pending-strong: var(--cg-expired-strong);
+  /*
+     The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on
+     white.
+
+     DERIVED, not adopted. unhealthy is the one tone here the Console never had, so
+     there is no shipped literal to take. This is --cg-unhealthy darkened along its
+     own hue and saturation until it reaches the band the two adopted words already
+     occupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather
+     than stopped at the first value that clears 4.5:1, so the words read as one set
+     instead of three matched and one nearly failing.
+
+     The tone is not simply reused because it does not clear the bar: --cg-unhealthy
+     measures 4.46:1 on this fill. Four hundredths under the floor is under it.
+
+     dE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from
+     online-strong. The tightest pair in the whole rung is expired-strong against
+     danger-strong at 19.8, above the 16.5 floor this palette was measured against. */
+  --cg-unhealthy-strong: #5d5401;
+  /*
+     The word on a danger chip, and danger as running text. 5.02:1 on
+     --cg-danger-fill and 5.70:1 on white.
+
+     --cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own
+     fill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails
+     as a sentence. The token is deliberately NOT moved to fix that: every fill,
+     border and icon already consuming it would repaint, and the error is that danger
+     had no word rung, not that its tone is wrong.
+
+     The Console's retired --color-error #d42b2b is where this starts and is not
+     where it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still
+     under the floor on the exact chip that needs it. This is that red darkened along
+     its own hue and saturation until it clears 5:1 on the fill, which is the
+     smallest move that holds on both grounds.
+
+     Kept lighter than the other three words on purpose. It is already the closest
+     pair in the rung, dE2000 19.8 from expired-strong, and darkening it into their
+     7:1 band closes that to 16.6 — a failed chip and an expiring one should not
+     converge. */
+  --cg-danger-strong: #c42828;
 
   /* ---- brand-derived ----
      brand derived (interaction only) */
@@ -174,6 +292,13 @@
   --cg-neutral-0: #ffffff;
   /* SOURCE: alternate page wash */
   --cg-lavender-50: #f2f1f7;
+  /*
+     SOURCE: the Console's --color-canvas, the recessed ground behind a card.
+
+     Not a pure grey. It carries a slight blue cast where the rest of this ramp is
+     neutral, and that is recorded rather than corrected because the value is what
+     legacy raised panels already render and matching them is the point (#151). */
+  --cg-neutral-50: #f4f6f8;
   /* SOURCE: hairline / card border */
   --cg-neutral-100: #f1f1f1;
   /* SOURCE: control border, inactive pill fill */
@@ -192,6 +317,21 @@
   --cg-surface-page-alt: var(--cg-lavender-50);
   --cg-surface-card: var(--cg-neutral-0);
   --cg-surface-subtle: var(--cg-lavender-50);
+  /*
+     A neutral ground one step off white, for a panel that should read as lifted off
+     the page rather than flat on it.
+
+     #151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,
+     so a raised panel had no value-preserving target and every consumer faced the
+     same three-way choice with no right answer — flatten it to white, tint it
+     lavender, or pin a literal. This is the fourth answer, and it is the Console's
+     own #f4f6f8 rather than a new value.
+
+     Declared at :root only, like --cg-surface-subtle and --cg-surface-control. The
+     neutral grounds do not flip: inside a purple panel or on ink, depth is carried
+     by --cg-surface-card and the hairline instead. Making it flip is one entry in
+     each of the two surface sets. */
+  --cg-surface-raised: var(--cg-neutral-50);
   --cg-surface-control: var(--cg-neutral-200);
   --cg-surface-panel: var(--cg-primary);
   --cg-surface-code: var(--cg-ink);
@@ -353,7 +493,7 @@
 
      MEASURED 1.21:1 on white, which is below every bar there is. It works on the
      panel (4.82:1) and on ink (13.13:1); on the page ground it reads only because
-     it is paired with the ring and, in a pill, with volt-ink. Recorded rather than
+     it is paired with volt-ink in a pill. Recorded rather than
      silently corrected: darkening it would change the Console's appearance, which
      is a design decision and not a contrast fix.
 
@@ -368,9 +508,6 @@
      and until it is answered volt is the Console's brand mark and online is the
      entity's state. */
   --cg-volt: #b6ff2e;
-  /*
-     The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above. */
-  --cg-volt-ring: rgba(182, 255, 46, 0.32);
   /*
      Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that
      is comfortably legible.
@@ -423,7 +560,9 @@
   --cg-danger: #FFDAD6;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override. */
   --cg-online: #C8F5DC;
@@ -458,6 +597,14 @@
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-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);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
@@ -496,7 +643,9 @@
   --cg-danger: #FF8A80;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint. */
   --cg-online: #5FD99A;
@@ -523,6 +672,14 @@
   --cg-unhealthy-fill: rgba(255, 255, 255, 0.08);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-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);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */

package/dist/tokens.json

@@ -18,12 +18,21 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "#fdf6df",
       "--cg-danger-fill": "#fceded",
+      "--cg-online-border": "#abefc6",
+      "--cg-expired-border": "#fedf89",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "#085d3a",
+      "--cg-expired-strong": "#7a3d0a",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "#5d5401",
+      "--cg-danger-strong": "#c42828",
       "--cg-primary-press": "#4b39db",
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
       "--cg-neutral-0": "#ffffff",
       "--cg-lavender-50": "#f2f1f7",
+      "--cg-neutral-50": "#f4f6f8",
       "--cg-neutral-100": "#f1f1f1",
       "--cg-neutral-200": "#e3e3e3",
       "--cg-neutral-400": "#acacac",
@@ -34,6 +43,7 @@
       "--cg-surface-page-alt": "var(--cg-lavender-50)",
       "--cg-surface-card": "var(--cg-neutral-0)",
       "--cg-surface-subtle": "var(--cg-lavender-50)",
+      "--cg-surface-raised": "var(--cg-neutral-50)",
       "--cg-surface-control": "var(--cg-neutral-200)",
       "--cg-surface-panel": "var(--cg-primary)",
       "--cg-surface-code": "var(--cg-ink)",
@@ -127,7 +137,6 @@
       "--cg-lift-hover": "translateY(-1px)",
       "--cg-press-scale": "0.985",
       "--cg-volt": "#b6ff2e",
-      "--cg-volt-ring": "rgba(182, 255, 46, 0.32)",
       "--cg-volt-ink": "#243d00",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)"
@@ -155,6 +164,14 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-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)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.10)"
     },
     "ink": {
@@ -182,6 +199,14 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-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)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.06)"
     }
   }

package/package.json

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