@oneli8/react 1.0.0-beta.11 → 1.0.0-beta.12

package/ai-context.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
   "system": "OneLi8",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneli8/react",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "description": "OneLi8 Design System for React. Components, design tokens, the Gem material, and the design language they follow.",
   "keywords": [
     "react",
@@ -52,7 +52,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@oneli8/tokens": "1.0.0-beta.11"
+    "@oneli8/tokens": "1.0.0-beta.12"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/styles/gem.css

@@ -447,11 +447,40 @@
      1 - (1 - a)^4. Measured in proof/gem-halo-contrast.html. */
   text-shadow: var(--_gem-glow), var(--_gem-glow),
                var(--_gem-glow), var(--_gem-glow);
-  /* The cut edge. Invariant — it is what keeps a gem recognisable as gem. */
+  /* The cut edge, exactly as the Gem slab carries it in Figma — Light Gem Slab
+     297:617, which is the container this class is the code equivalent of:
+
+       INNER_SHADOW  offset  3, 3  blur  6            Cut Edge / High
+       INNER_SHADOW  offset -3,-3  blur 12  spread -3 Cut Edge / Mid
+       DROP_SHADOW   offset  0,12  blur 36            Cut Edge / Shadow
+       DROP_SHADOW   offset  0, 3  blur  6            Cut Edge / Shadow
+
+     TWO inner shadows, from OPPOSITE corners: light falling top-left and shade
+     gathering bottom-right. That is why the bezel reads on all four sides in
+     Figma. This carried a top specular and a 1px rim instead — the CONTROL
+     recipe, which belongs to buttons and fields, not to a slab — so the cut
+     only ever showed along the top. Every offset and blur here is on the 3px
+     grid, which is how the slab was drawn. */
   box-shadow:
-    inset 0 2px 1px 0 var(--ol8-material-gem-color-cutedge-high),
-    inset 0 0 0 1px var(--ol8-material-gem-color-cutedge-mid),
-    0 9px 12px var(--ol8-material-gem-color-cutedge-shadow);
+    inset 3px 3px 6px 0 var(--ol8-material-gem-color-cutedge-high),
+    inset -3px -3px 12px -3px var(--ol8-material-gem-color-cutedge-mid),
+    0 12px 36px var(--ol8-material-gem-color-cutedge-shadow),
+    0 3px 6px var(--ol8-material-gem-color-cutedge-shadow);
+}
+
+/* A Token or Choice Chip sitting ON a Gem surface.
+   Both draw the Choice Chip silhouette, whose default --_surface is
+   color.surface.sunken — an opaque plate. On glass that reads as a solid
+   lozenge stuck to the surface, and in the Light appearance its ink is dark,
+   so the label goes invisible against near-white gem content beside it.
+   The pill turns transparent and the label takes the gem ink and halo, so the
+   chip reads as a boundary around content rather than a second material. */
+.ol8-gem .ol8-chip {
+  --_surface: transparent;
+  --_edge: var(--ol8-material-gem-color-cutedge-high);
+  --_ink: var(--ol8-material-gem-color-quiet-content);
+  text-shadow: var(--_gem-glow), var(--_gem-glow),
+               var(--_gem-glow), var(--_gem-glow);
 }
 
 /* Disabled on a generic Gem surface, same single grey, same absent halo. */
@@ -481,6 +510,26 @@
   --_gem-blur: var(--ol8-material-gem-blur-environmental);
 }
 
+/* The third rung, and the SAME face as reduced transparency below reached for
+   a different reason. That one is the PREFERENCE route — the person asked for
+   less transparency, system-wide. This is the CONTEXT route: this surface is
+   legibility-critical right now, and the environment losing presence is the
+   correct trade rather than a regression. An athlete reading a split while
+   running laps is the case: speed is exactly when the ambient face recedes,
+   and exactly when this reader can least afford it.
+
+   Both land on legibilityFace because there is one dense-but-see-through face,
+   not two. 0.72 leaves 28% of the scene visible and measures 7.70:1 against
+   near-white ink in the worst region of a daylight plate, with no credit taken
+   for the halo — AAA while still worn-display honest.
+
+   Blur holds at the stabilized 12px. Environmental's 18px exists to let the
+   scene dominate, which is the opposite of what this face is for. */
+.ol8-gem[data-ol8-face="legibility"] {
+  --_gem-face: var(--ol8-material-gem-color-quiet-legibilityface);
+  --_gem-blur: var(--ol8-material-gem-blur-stabilized);
+}
+
 /* REDUCED TRANSPARENCY, THE WORN-DISPLAY READING OF IT
    Gem is worn, so the background is the real world and an opaque panel would
    occlude the street for the person who needs help reading the interface most.