@cloudgrid-io/ui 0.31.1 → 0.31.3

package/dist/tokens.css

@@ -1390,6 +1390,20 @@
   --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);
+  /*
+     The lift under a picture tile that sits directly on a surface: the showcase's
+     creation cards (#283). A ROLE, declared in all three scopes, because the value that
+     reads depends on the ground. On white and on ink it is --cg-shadow-card. On the
+     purple panel an ink shadow at 4% vanishes, so the panel scope redeclares it as the
+     same geometry in a deep violet (surface-panel.json).
+
+     Declared on ink as well, as the card shadow, so a tile inside an ink block that is
+     itself inside the panel does not inherit the violet. */
+  --cg-shadow-tile: var(--cg-shadow-card);
+  /*
+     The deeper lift of a hovered picture tile (#283). Same three-scope reasoning as
+     --cg-shadow-tile: --cg-shadow-hover on white and on ink, a violet on the panel. */
+  --cg-shadow-tile-hover: var(--cg-shadow-hover);
   --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
@@ -1654,6 +1668,17 @@
   /*
      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);
+
+  /* ---- elevation ----
+     elevation: the picture-tile shadows, redeclared for the purple ground (#283).
+
+     SOURCE: the founder-approved showcase mock (v3, 2026-10-06). The library's ink
+     shadows are 4-8% of #222 and disappear on #5a47f0, so a tile looked pasted on rather
+     than sitting on the panel. These are a deep violet, rgb(24, 12, 110): the panel's
+     own hue taken down to near-black, so the shadow reads as the panel in shade rather
+     than as a grey cast on it. */
+  --cg-shadow-tile: 0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26);
+  --cg-shadow-tile-hover: 0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42);
 }
 
 [data-cg-surface='ink'] {
@@ -1743,4 +1768,12 @@
   /*
      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);
+
+  /* ---- elevation ----
+     elevation: the picture-tile shadows, pinned back to the card shadows on ink (#283).
+
+     No ink value was designed. These exist so a tile on ink nested inside the panel
+     does not inherit the panel's violet. */
+  --cg-shadow-tile: var(--cg-shadow-card);
+  --cg-shadow-tile-hover: var(--cg-shadow-hover);
 }

package/dist/tokens.json

@@ -183,6 +183,8 @@
       "--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)",
+      "--cg-shadow-tile": "var(--cg-shadow-card)",
+      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)",
       "--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",
@@ -237,7 +239,9 @@
       "--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)"
+      "--cg-hover": "rgba(255, 255, 255, 0.10)",
+      "--cg-shadow-tile": "0 1px 2px rgba(24, 12, 110, 0.16), 0 6px 16px -4px rgba(24, 12, 110, 0.26)",
+      "--cg-shadow-tile-hover": "0 2px 4px rgba(24, 12, 110, 0.18), 0 16px 32px -8px rgba(24, 12, 110, 0.42)"
     },
     "ink": {
       "--cg-text-primary": "#ffffff",
@@ -275,7 +279,9 @@
       "--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)"
+      "--cg-hover": "rgba(255, 255, 255, 0.06)",
+      "--cg-shadow-tile": "var(--cg-shadow-card)",
+      "--cg-shadow-tile-hover": "var(--cg-shadow-hover)"
     }
   }
 }

package/package.json

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