@cloudgrid-io/ui 0.21.0 → 0.23.0

package/dist/tokens.css

@@ -359,6 +359,18 @@
 
   /* ---- neutrals ---- */
   --cg-neutral-0: #ffffff;
+  /*
+     SOURCE: the founder's 2026-09-09 draft, "N1 New". The page ground.
+
+     The page was #ffffff and the card is #ffffff, so a card had no edge except its
+     own hairline and a listing read as one sheet. This is the ground the cards sit
+     ON; --cg-surface-card stays white, which is what gives the card its shape
+     (#196).
+
+     Half a step off --cg-lavender-50 (#f2f1f7) and deliberately its own value: the
+     lavender is the ALTERNATE wash a section reaches for, and collapsing the two
+     would leave a page with no alternate. */
+  --cg-neutral-25: #f1f1f6;
   /* SOURCE: alternate page wash */
   --cg-lavender-50: #f2f1f7;
   /*
@@ -368,21 +380,33 @@
      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: hairline / card border. Retuned to the founder's draft "N2 New" (#196):
+     #f1f1f1 measured 1.13:1 on white and disappeared entirely against the new page
+     ground; #e6e8ea measures 1.23:1 on white and gives a white card a real edge on
+     an off-white page. */
+  --cg-neutral-100: #e6e8ea;
   /* SOURCE: control border, inactive pill fill */
   --cg-neutral-200: #e3e3e3;
   /* SOURCE: placeholder */
   --cg-neutral-400: #acacac;
-  /* SOURCE: footer text */
-  --cg-neutral-500: #8e8e8e;
+  /*
+     SOURCE: footer text. Re-anchored from #8e8e8e to #858585 when the page ground
+     moved off white (#196).
+
+     It carries --cg-text-muted and --cg-offline, and the dot is the binding
+     constraint: an indicator has to clear 3:1 (WCAG 1.4.11) and #8e8e8e measured
+     2.91:1 on #f1f1f6. #858585 measures 3.27:1 there, which is exactly what the old
+     value held on white, so the ground moved and the dot kept its contrast. The
+     muted text rung comes with it, 3.27:1 -> 3.69:1 on white. */
+  --cg-neutral-500: #858585;
   /* SOURCE: legal / secondary text */
   --cg-neutral-700: #595959;
   /* SOURCE: ink */
   --cg-neutral-900: #222222;
 
   /* ---- semantic-surfaces ---- */
-  --cg-surface-page: var(--cg-neutral-0);
+  --cg-surface-page: var(--cg-neutral-25);
   --cg-surface-page-alt: var(--cg-lavender-50);
   --cg-surface-card: var(--cg-neutral-0);
   --cg-surface-subtle: var(--cg-lavender-50);
@@ -513,6 +537,10 @@
   --cg-measure: 68ch;
 
   /* ---- corners ---- */
+  /*
+     SOURCE: the kind badge on an entity card (#196). The smallest corner in the
+     system, and it exists because a 20px mark rounded at 8px reads as a circle. */
+  --cg-radius-2xs: 6px;
   --cg-radius-xs: 8px;
   --cg-radius-sm: 10px;
   /* SOURCE: code block, OTP cell */
@@ -530,7 +558,17 @@
   /* ---- elevation ----
      elevation: hairlines first, shadow only on the wash or on hover */
   --cg-shadow-none: none;
-  --cg-shadow-card: 0 1px 2px rgba(34, 34, 34, 0.04);
+  /*
+     SOURCE: the founder's 2026-09-09 draft, "Elevation 1 New" (#196). Was
+     0 1px 2px rgba(34,34,34,0.04), which was a line rather than a shadow and did
+     nothing at all once the page ground stopped being white. The draft's own value
+     is pure black at 4%; this keeps the ramp's ink base and the draft's geometry. */
+  --cg-shadow-card: 0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);
+  /*
+     The lift under a small mark sitting ON a picture: the entity card's kind badge
+     (#196). Tighter and darker than --cg-shadow-card because it has to read against
+     a screenshot rather than against a page, and it is 20px wide. */
+  --cg-shadow-mark: 0 2px 1px rgba(34, 34, 34, 0.06), 0 2px 4px rgba(34, 34, 34, 0.08);
   --cg-shadow-raised: 0 4px 14px rgba(34, 34, 34, 0.06);
   --cg-shadow-hover: 0 8px 24px rgba(34, 34, 34, 0.08);
   --cg-shadow-panel: 0 10px 40px rgba(90, 71, 240, 0.18);
@@ -661,6 +699,24 @@
   /*
      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);
+
+  /* ---- kind ----
+     kind: what an entity IS, as a ground for its 20px badge (#196).
+
+     Declared at :root ONLY, like the identity tile and unlike everything else in
+     this file. The badge sits on a screenshot, and a picture does not flip: half of
+     a mark flipping is a light disc with a white glyph on the ink surface, which
+     renders perfectly and shows nothing. --cg-text-on-accent is the glyph on all
+     three, and it measures 12.74:1, 14.65:1 and 10.24:1 on them. */
+  /* SOURCE: the founder's draft, the Inspiration badge. */
+  --cg-kind-inspiration: #fae4b3;
+  /* SOURCE: the founder's draft, the App badge. */
+  --cg-kind-app: #dffbfc;
+  /*
+     PROPOSAL, not sampled: the draft never draws an agent badge. This is its
+     "Secondary2 30" style, which is the nearest thing in the same set to the two
+     above. Founder may veto (#196). */
+  --cg-kind-agent: #d1c9ff;
 }
 
 [data-cg-surface='panel'] {

package/dist/tokens.json

@@ -33,15 +33,16 @@
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
       "--cg-neutral-0": "#ffffff",
+      "--cg-neutral-25": "#f1f1f6",
       "--cg-lavender-50": "#f2f1f7",
       "--cg-neutral-50": "#f4f6f8",
-      "--cg-neutral-100": "#f1f1f1",
+      "--cg-neutral-100": "#e6e8ea",
       "--cg-neutral-200": "#e3e3e3",
       "--cg-neutral-400": "#acacac",
-      "--cg-neutral-500": "#8e8e8e",
+      "--cg-neutral-500": "#858585",
       "--cg-neutral-700": "#595959",
       "--cg-neutral-900": "#222222",
-      "--cg-surface-page": "var(--cg-neutral-0)",
+      "--cg-surface-page": "var(--cg-neutral-25)",
       "--cg-surface-page-alt": "var(--cg-lavender-50)",
       "--cg-surface-card": "var(--cg-neutral-0)",
       "--cg-surface-subtle": "var(--cg-lavender-50)",
@@ -115,6 +116,7 @@
       "--cg-section-gap": "56px",
       "--cg-container": "1280px",
       "--cg-measure": "68ch",
+      "--cg-radius-2xs": "6px",
       "--cg-radius-xs": "8px",
       "--cg-radius-sm": "10px",
       "--cg-radius-md": "12px",
@@ -125,7 +127,8 @@
       "--cg-border-width": "1px",
       "--cg-border-width-strong": "1.5px",
       "--cg-shadow-none": "none",
-      "--cg-shadow-card": "0 1px 2px rgba(34, 34, 34, 0.04)",
+      "--cg-shadow-card": "0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04)",
+      "--cg-shadow-mark": "0 2px 1px rgba(34, 34, 34, 0.06), 0 2px 4px rgba(34, 34, 34, 0.08)",
       "--cg-shadow-raised": "0 4px 14px rgba(34, 34, 34, 0.06)",
       "--cg-shadow-hover": "0 8px 24px rgba(34, 34, 34, 0.08)",
       "--cg-shadow-panel": "0 10px 40px rgba(90, 71, 240, 0.18)",
@@ -144,7 +147,10 @@
       "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
       "--cg-scrim-strong": "rgba(34, 34, 34, 0.82)",
-      "--cg-hover": "rgba(34, 34, 34, 0.045)"
+      "--cg-hover": "rgba(34, 34, 34, 0.045)",
+      "--cg-kind-inspiration": "#fae4b3",
+      "--cg-kind-app": "#dffbfc",
+      "--cg-kind-agent": "#d1c9ff"
     },
     "panel": {
       "--cg-text-primary": "#ffffff",

package/package.json

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