@cloudgrid-io/ui 0.5.0 → 0.6.0

package/dist/tokens/base.json

@@ -1138,5 +1138,58 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: taken from the Console so the system holds every value in\none place, 2026-08-24 (#96).\n\nPENDING A DESIGNER. These are adopted as-is, not designed. They are here so the\nConsole can stop carrying private copies and so there is a single thing to edit;\nthe values themselves are the Console's current ones and are expected to change.\nMeasurements are recorded beside each so the decision is informed rather than\ninherited.",
+    "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.",
+      "$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",
+      "$description": "Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that\nis comfortably legible.\n\nThis is NOT the state -ink that EntityStatus (#116) says the library lacks. That\nnote wants a foreground for the WORD on a state chip, and the arrangement it\nshipped instead — dot carries the colour, word is text-ink — already measures\n14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt\nand belongs to volt. Adding a state -ink is still a brand decision and still\nopen.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-volt-ink"
+        }
+      }
+    },
+    "scrim": {
+      "$value": "rgba(34, 34, 34, 0.4)",
+      "$type": "color",
+      "$description": "The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the\nConsole's (#16181d) — a scrim sits above content and belongs to the system, not\nto one surface's ink scale.\n\nDoes NOT flip per surface, deliberately: it composites over whatever is beneath\nit, so a panel-scoped override would darken a scrim that is already dark.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-scrim"
+        }
+      }
+    },
+    "hover": {
+      "$value": "rgba(34, 34, 34, 0.045)",
+      "$type": "color",
+      "$description": "The wash under a hovered row or control. The system had no hover token; components were each inventing one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-ink.json

@@ -213,5 +213,18 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: only hover flips. A dark wash is invisible on a dark ground.",
+    "hover": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "$description": "Translucent white — the base wash is a dark ink and would not register on the ink ground.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-panel.json

@@ -197,5 +197,18 @@
         }
       }
     }
+  },
+  "indicator": {
+    "$description": "indicator + chrome: only hover flips. A dark wash is invisible on a dark ground.",
+    "hover": {
+      "$value": "rgba(255, 255, 255, 0.10)",
+      "$type": "color",
+      "$description": "Translucent white — the base wash is a dark ink and would not register on the panel ground.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-hover"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -302,6 +302,62 @@
   --cg-transition-control: background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out);
   --cg-lift-hover: translateY(-1px);
   --cg-press-scale: 0.985;
+
+  /* ---- indicator ----
+     indicator + chrome: taken from the Console so the system holds every value in
+     one place, 2026-08-24 (#96).
+
+     PENDING A DESIGNER. These are adopted as-is, not designed. They are here so the
+     Console can stop carrying private copies and so there is a single thing to edit;
+     the values themselves are the Console's current ones and are expected to change.
+     Measurements are recorded beside each so the decision is informed rather than
+     inherited. */
+  /*
+     The live/current INDICATOR — the dot in its halo, and the brand mark. Never
+     decorative, never a fill.
+
+     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
+     silently corrected: darkening it would change the Console's appearance, which
+     is a design decision and not a contrast fix.
+
+     Note it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one
+     the brand owns is the open question here.
+
+     It is also a second LIVE. state.online (#00a05c) is the same idea in the state
+     scale, and EntityStatus (#116) already paints the live dot with it. They are not
+     interchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a
+     surface must not swap one for the other on the assumption that both mean
+     'serving'. Which name the brand keeps for live belongs to the same open question,
+     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.
+
+     This is NOT the state -ink that EntityStatus (#116) says the library lacks. That
+     note wants a foreground for the WORD on a state chip, and the arrangement it
+     shipped instead — dot carries the colour, word is text-ink — already measures
+     14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt
+     and belongs to volt. Adding a state -ink is still a brand decision and still
+     open. */
+  --cg-volt-ink: #243d00;
+  /*
+     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
+     to one surface's ink scale.
+
+     Does NOT flip per surface, deliberately: it composites over whatever is beneath
+     it, so a panel-scoped override would darken a scrim that is already dark. */
+  --cg-scrim: rgba(34, 34, 34, 0.4);
+  /*
+     The wash under a hovered row or control. The system had no hover token; components were each inventing one. */
+  --cg-hover: rgba(34, 34, 34, 0.045);
 }
 
 [data-cg-surface='panel'] {
@@ -357,6 +413,12 @@
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
+
+  /* ---- indicator ----
+     indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
+  /*
+     Translucent white — the base wash is a dark ink and would not register on the panel ground. */
+  --cg-hover: rgba(255, 255, 255, 0.10);
 }
 
 [data-cg-surface='ink'] {
@@ -409,4 +471,10 @@
   --cg-pending-fill: var(--cg-expired-fill);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
+
+  /* ---- indicator ----
+     indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
+  /*
+     Translucent white — the base wash is a dark ink and would not register on the ink ground. */
+  --cg-hover: rgba(255, 255, 255, 0.06);
 }

package/dist/tokens.json

@@ -123,7 +123,12 @@
       "--cg-ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
       "--cg-transition-control": "background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out)",
       "--cg-lift-hover": "translateY(-1px)",
-      "--cg-press-scale": "0.985"
+      "--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)"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",
@@ -145,7 +150,8 @@
       "--cg-online-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-pending-fill": "var(--cg-expired-fill)",
-      "--cg-danger-fill": "rgba(255, 255, 255, 0.16)"
+      "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-hover": "rgba(255, 255, 255, 0.10)"
     },
     "ink": {
       "--cg-text-primary": "#ffffff",
@@ -169,7 +175,8 @@
       "--cg-online-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-expired-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-pending-fill": "var(--cg-expired-fill)",
-      "--cg-danger-fill": "rgba(255, 255, 255, 0.08)"
+      "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-hover": "rgba(255, 255, 255, 0.06)"
     }
   }
 }

package/package.json

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