@oneli8/react 1.0.0-beta.2 → 1.0.0-beta.5

package/src/styles/button.css

@@ -0,0 +1,195 @@
+/* GENERATED from packages/core/src/molecules/button/button.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Button
+ * Figma: section "Button" (1034:9968) — Primary 15:823, Secondary 15:824,
+ *        Quiet 15:825, Destructive 15:826. 4 families × 4 sizes × 6 states.
+ *
+ * The governing rule comes from the Figma component description itself:
+ *
+ *   "State → deterministic visual evidence … Runtime-only native button
+ *    semantics, disabled, loading, pressed, fullWidth and iconMotion remain
+ *    implemented and tested in code; they must not become fake visual axes."
+ *
+ * So the six Figma States are NOT six markup variants:
+ *   Default  → the base rule
+ *   Hover    → :hover
+ *   Pressed  → :active  (and [aria-pressed="true"] for toggles)
+ *   Focus    → :focus-visible
+ *   Disabled → [disabled]           (native, not a class)
+ *   Loading  → [data-ol8-loading]   (which also implies disabled + aria-busy)
+ *
+ * There is no .ol8-btn--hover. Emitting one is a bug.
+ */
+
+.ol8-btn {
+  /* Per-variant channels. Families set these; the base rule never hardcodes. */
+  --_bg: transparent;
+  --_fg: currentColor;
+  --_bd: transparent;
+  --_bw: 0px;
+
+  /* Size channels, defaulted to Standard. */
+  --_h:    var(--ol8-component-button-height-standard);
+  --_px:   var(--ol8-component-button-paddinginline-standard);
+  --_r:    var(--ol8-component-button-radius-standard);
+  --_gap:  var(--ol8-component-button-gap-compact);
+  --_icon: var(--ol8-size-icon-small);
+
+  box-sizing: border-box;          /* Figma strokes are inside the frame */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_gap);
+  block-size: var(--_h);
+  padding-inline: var(--_px);
+  padding-block: 0;
+  border: var(--_bw) solid var(--_bd);
+  border-radius: var(--_r);
+  background: var(--_bg);
+  color: var(--_fg);
+
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+  letter-spacing: 0;
+  /* AR One Sans variable axis. Figma sets this on every functional text node;
+     omitting it shifts glyph advances and the button measures narrow. */
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;           /* when rendered as <a class="ol8-btn"> */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ol8-btn__label { white-space: nowrap; }
+
+/* Button size governs icon size — the Figma Icon Frame is driven by the
+   button, never set on the glyph. Higher specificity than .ol8-icon's own
+   [data-ol8-icon-size] rule, deliberately. */
+.ol8-btn .ol8-icon { --_ol8-icon-size: var(--_icon); }
+
+/* ---- Size (Figma: Size variant axis) --------------------------------- */
+.ol8-btn[data-ol8-size="compact"] {
+  --_h: var(--ol8-component-button-height-compact);
+  --_px: var(--ol8-component-button-paddinginline-compact);
+  --_r: var(--ol8-component-button-radius-compact);
+  --_gap: var(--ol8-component-button-gap-compact);
+  --_icon: var(--ol8-size-icon-small);
+}
+.ol8-btn[data-ol8-size="standard"] {
+  --_h: var(--ol8-component-button-height-standard);
+  --_px: var(--ol8-component-button-paddinginline-standard);
+  --_r: var(--ol8-component-button-radius-standard);
+  --_gap: var(--ol8-component-button-gap-compact);      /* shared, by design */
+  --_icon: var(--ol8-size-icon-small);
+}
+.ol8-btn[data-ol8-size="comfortable"] {
+  --_h: var(--ol8-component-button-height-comfortable);
+  --_px: var(--ol8-component-button-paddinginline-comfortable);
+  --_r: var(--ol8-component-button-radius-comfortable);
+  --_gap: var(--ol8-component-button-gap-comfortable);
+  --_icon: var(--ol8-size-icon-standard);
+}
+.ol8-btn[data-ol8-size="large"] {
+  --_h: var(--ol8-component-button-height-large);
+  --_px: var(--ol8-component-button-paddinginline-large);
+  --_r: var(--ol8-component-button-radius-large);
+  --_gap: var(--ol8-component-button-gap-comfortable);  /* shared, by design */
+  --_icon: var(--ol8-size-icon-standard);
+}
+
+/* ---- Family: Primary ------------------------------------------------- */
+.ol8-btn--primary { --_bg: var(--ol8-color-actionprimary-default); --_fg: var(--ol8-color-actionprimary-content); }
+.ol8-btn--primary:hover:not(:disabled):not([data-ol8-loading]) { --_bg: var(--ol8-color-actionprimary-hover); }
+.ol8-btn--primary:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--primary[aria-pressed="true"]:not(:disabled)          { --_bg: var(--ol8-color-actionprimary-pressed); }
+.ol8-btn--primary:disabled, .ol8-btn--primary[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionprimary-disabled);
+  --_fg: var(--ol8-color-actionprimary-disabledcontent);
+}
+
+/* ---- Family: Destructive (same shape as Primary) --------------------- */
+.ol8-btn--destructive { --_bg: var(--ol8-color-actiondestructive-default); --_fg: var(--ol8-color-actiondestructive-content); }
+.ol8-btn--destructive:hover:not(:disabled):not([data-ol8-loading]) { --_bg: var(--ol8-color-actiondestructive-hover); }
+.ol8-btn--destructive:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--destructive[aria-pressed="true"]:not(:disabled)          { --_bg: var(--ol8-color-actiondestructive-pressed); }
+.ol8-btn--destructive:disabled, .ol8-btn--destructive[data-ol8-loading] {
+  --_bg: var(--ol8-color-actiondestructive-disabled);
+  --_fg: var(--ol8-color-actiondestructive-disabledcontent);
+}
+
+/* ---- Family: Secondary ----------------------------------------------
+   Secondary and Quiet carry byte-identical color roles in Figma. The ONLY
+   differentiator is this boundary: Secondary has a 2px stroke whose color
+   tracks the content color; Quiet has none. Verified — Quiet's node binds no
+   --ol8-component-button-secondaryboundary at all.                        */
+.ol8-btn--secondary {
+  --_bw: var(--ol8-component-button-secondaryboundary);
+  --_bg: var(--ol8-color-actionsecondary-surfacedefault);
+  --_fg: var(--ol8-color-actionsecondary-contentdefault);
+  --_bd: var(--ol8-color-actionsecondary-contentdefault);
+}
+.ol8-btn--secondary:hover:not(:disabled):not([data-ol8-loading]) {
+  --_bg: var(--ol8-color-actionsecondary-surfacehover);
+  --_fg: var(--ol8-color-actionsecondary-contenthover);
+  --_bd: var(--ol8-color-actionsecondary-contenthover);
+}
+.ol8-btn--secondary:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--secondary[aria-pressed="true"]:not(:disabled) {
+  --_bg: var(--ol8-color-actionsecondary-surfacepressed);
+  --_fg: var(--ol8-color-actionsecondary-contentpressed);
+  --_bd: var(--ol8-color-actionsecondary-contentpressed);
+}
+.ol8-btn--secondary:disabled, .ol8-btn--secondary[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionsecondary-surfacedisabled);
+  --_fg: var(--ol8-color-actionsecondary-contentdisabled);
+  --_bd: var(--ol8-color-actionsecondary-contentdisabled);
+}
+
+/* ---- Family: Quiet (identical colors, no boundary) ------------------- */
+.ol8-btn--quiet {
+  --_bg: var(--ol8-color-actionquiet-surfacedefault);
+  --_fg: var(--ol8-color-actionquiet-contentdefault);
+}
+.ol8-btn--quiet:hover:not(:disabled):not([data-ol8-loading]) {
+  --_bg: var(--ol8-color-actionquiet-surfacehover);
+  --_fg: var(--ol8-color-actionquiet-contenthover);
+}
+.ol8-btn--quiet:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--quiet[aria-pressed="true"]:not(:disabled) {
+  --_bg: var(--ol8-color-actionquiet-surfacepressed);
+  --_fg: var(--ol8-color-actionquiet-contentpressed);
+}
+.ol8-btn--quiet:disabled, .ol8-btn--quiet[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionquiet-surfacedisabled);
+  --_fg: var(--ol8-color-actionquiet-contentdisabled);
+}
+
+/* ---- Focus ----------------------------------------------------------
+   Figma draws the focus ring as an INSIDE stroke, so the focused variant is
+   exactly the same size as the unfocused one (83×42 either way, Standard).
+   An inset box-shadow reproduces that without disturbing layout or fighting
+   Secondary's own 2px boundary — `outline` would sit outside and grow it.  */
+.ol8-btn:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-outer);
+}
+
+/* ---- Disabled / Loading --------------------------------------------- */
+.ol8-btn:disabled, .ol8-btn[data-ol8-loading] { cursor: not-allowed; }
+.ol8-btn[data-ol8-loading] { cursor: progress; }
+
+/* "Platform motion adapters may rotate it; Reduced Motion keeps the static
+   busy mark." — Figma 379:7. Rotation is opt-in and motion-guarded. */
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-btn[data-ol8-loading] .ol8-btn__spinner > svg { animation: ol8-spin 900ms linear infinite; }
+}
+@keyframes ol8-spin { to { transform: rotate(360deg); } }
+
+/* ---- fullWidth (runtime-only, per the Figma description) ------------- */
+.ol8-btn[data-ol8-fullwidth] { display: flex; inline-size: 100%; }

package/src/styles/choice-group.css

@@ -0,0 +1,95 @@
+/* GENERATED from packages/core/src/organisms/choice-group/choice-group.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Choice Group (ORGANISM)
+ * Figma: Documentation / Organism / Choice Group
+ *   Checkbox Hierarchy 273:603  Aggregate = None | Some | All
+ *   Radio Group        859:5180 Behavior  = Safe Default | No Default |
+ *                                           Horizontal | Invalid
+ *
+ * First organism in the system, and the first tier allowed to hold logic:
+ * the checkbox group computes its parent from its children, and the radio
+ * group owns group-level validation.
+ *
+ * From Figma (273:603): "Aggregate None/Some/All is computed from nested
+ * Checkbox molecules; MIXED IS NEVER A THIRD PREFERENCE. Runtime recursion,
+ * parent-child synchronization, group naming, required behavior, reset, and
+ * announcements live in code."
+ *
+ * So Aggregate is an OUTPUT, never an input. Nothing may author it.
+ *
+ * The two shells differ, deliberately:
+ *   checkbox  bordered, radius-container (24px), legend Title/Small
+ *   radio     unbordered, radius-standard (12px), legend Body/Medium
+ */
+
+.ol8-choice-group {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  padding: var(--ol8-spacing-inset-standard);
+  background: var(--ol8-color-surface-raised);
+  border: 0;
+  border-radius: var(--ol8-shape-radius-standard);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  min-inline-size: 0;   /* fieldset defaults to min-content; this lets it shrink */
+}
+
+.ol8-choice-group--checkbox {
+  border: 1px solid var(--ol8-color-border-subtle);
+  border-radius: var(--ol8-shape-radius-container);
+}
+
+/* <legend> is taken out of flow by default, so it is laid out as a normal
+   flex child instead — the group label is a real legend for assistive tech. */
+.ol8-choice-group__legend {
+  display: block;
+  float: none;
+  padding: 0;
+  inline-size: 100%;
+  color: var(--ol8-color-text-primary);
+}
+.ol8-choice-group--checkbox > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-021);
+  line-height: var(--ol8-font-line-030);
+  font-weight: var(--ol8-font-weight-semibold);
+}
+.ol8-choice-group--radio > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+}
+
+.ol8-choice-group__instruction {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+
+.ol8-choice-group__options { display: flex; flex-direction: column; }
+.ol8-choice-group[data-ol8-orientation="horizontal"] > .ol8-choice-group__options {
+  flex-direction: row;
+  gap: var(--ol8-spacing-stack-related);
+  flex-wrap: wrap;
+}
+
+/* Children of a hierarchy sit under their parent, indented one 24px step. */
+.ol8-choice-group__children {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: var(--ol8-dimension-scale-024);
+}
+
+/* Group-level validation message. */
+.ol8-choice-group__message {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+.ol8-choice-group[data-ol8-invalid="true"] > .ol8-choice-group__message {
+  color: var(--ol8-color-feedbackcritical-inlinecontent);
+}

package/src/styles/choice-item.css

@@ -0,0 +1,192 @@
+/* GENERATED from packages/core/src/molecules/choice-item/choice-item.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Choice Item (MOLECULE)
+ * Figma: Documentation / Molecule / Choice Item
+ *   Checkbox 252:301 (24 variants) · Radio 331:1309 (16) · Switch 825:1591 (16)
+ *
+ * From the Figma description (252:301):
+ *   "Selection maps Unchecked/Checked/Mixed to checked/indeterminate;
+ *    Availability maps enabled/disabled ... The indicator is a shared
+ *    selection atom, not local artwork. Native input, name/value, required,
+ *    reset, form submission, and onCheckedChange live in code."
+ *
+ * So the molecule is: a real <input>, the selection-indicator atom, a label,
+ * an optional description — and NOTHING that duplicates native behaviour.
+ *
+ * ANATOMY (Figma 266:257 / 252:74 / 252:77)
+ *   <label class=ol8-choice>          the whole row is the target
+ *     input                            visually hidden, still focusable
+ *     __surface                        hover / pressed / gem wash, bleeds 9px inline
+ *     __indicator                      slot: indicator wide, label-line tall
+ *     __content                        label + optional description
+ *
+ * ROW GEOMETRY — every size resolves to the same 48px minimum row:
+ *   size         gap  indicator  slot h   label          padding-block
+ *   compact       6      18        18     Body/Small      15
+ *   standard      9      18        24     Body/Medium     12
+ *   comfortable   9      24        24     Body/Medium     12
+ *   large         9      24        30     Body/Large       9
+ * padding-block is derived: (48 - slot height) / 2.
+ */
+
+.ol8-choice {
+  --_gap:    var(--ol8-component-choice-gap-standard);
+  --_slot-h: var(--ol8-font-line-024);
+  --_pad:    calc((var(--ol8-component-choice-rowminimum) - var(--_slot-h)) / 2);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-small);
+  /* The hover / pressed / focus wash bleeds outside the text column. */
+  --_bleed: var(--ol8-dimension-scale-009);
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_gap);
+  min-block-size: var(--ol8-component-choice-rowminimum);
+  padding-block: var(--_pad);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  cursor: pointer;
+}
+.ol8-choice[data-ol8-availability="disabled"] { cursor: not-allowed; }
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-choice[data-ol8-size="compact"] {
+  --_gap: var(--ol8-component-choice-gap-compact);
+  --_slot-h: var(--ol8-font-line-018);
+  --_label-size: var(--ol8-font-size-012);
+  --_label-line: var(--ol8-font-line-018);
+  --_indicator: var(--ol8-size-icon-small);
+}
+.ol8-choice[data-ol8-size="standard"] {
+  --_slot-h: var(--ol8-font-line-024);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-small);
+}
+.ol8-choice[data-ol8-size="comfortable"] {
+  --_slot-h: var(--ol8-font-line-024);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-standard);
+}
+.ol8-choice[data-ol8-size="large"] {
+  --_slot-h: var(--ol8-font-line-030);
+  --_label-size: var(--ol8-font-size-021);
+  --_label-line: var(--ol8-font-line-030);
+  --_indicator: var(--ol8-size-icon-standard);
+}
+/* Compact's label carries the Body/Small tracking. */
+.ol8-choice[data-ol8-size="compact"] .ol8-choice__label { letter-spacing: 1px; }
+
+/* ---- The native input owns everything semantic ----------------------- */
+.ol8-choice__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+  /* No margin reset needed — it is absolutely positioned, so margin cannot
+     affect layout. The structure lint would reject one regardless. */
+}
+
+/* ---- Wash: hover, pressed, focus, gem -------------------------------- */
+.ol8-choice__surface {
+  position: absolute;
+  inset-block: 0;
+  inset-inline: calc(-1 * var(--_bleed));
+  border-radius: var(--ol8-shape-radius-medium);
+  pointer-events: none;
+}
+.ol8-choice:hover:not([data-ol8-availability="disabled"]) > .ol8-choice__surface,
+.ol8-choice:active:not([data-ol8-availability="disabled"]) > .ol8-choice__surface {
+  background: var(--ol8-color-selection-surface);
+}
+
+/* Two nested rings, both visible — outer 3px, inner 3px at a 2px inset.
+   This is the same two-tone ring the Icon Button focus tokens describe. */
+.ol8-choice:has(> .ol8-choice__input:focus-visible) > .ol8-choice__surface {
+  border: var(--ol8-focus-ring-outerwidth) solid var(--ol8-color-focus-outer);
+}
+.ol8-choice:has(> .ol8-choice__input:focus-visible) > .ol8-choice__surface::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  border-radius: 7px;
+}
+
+/* ---- Indicator slot -------------------------------------------------- */
+.ol8-choice__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex: none;
+  inline-size: var(--_indicator);
+  block-size: var(--_slot-h);
+}
+
+/* Invalid draws an extra boundary over the indicator, same shape. */
+.ol8-choice[data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  content: "";
+  position: absolute;
+  inline-size: var(--_indicator);
+  block-size: var(--_indicator);
+  border: var(--ol8-component-checkbox-boundary) solid var(--ol8-color-feedbackcritical-inlinecontent);
+  border-radius: var(--ol8-component-checkbox-radius-compact);
+  pointer-events: none;
+}
+.ol8-choice[data-ol8-size="comfortable"][data-ol8-invalid="true"] .ol8-choice__indicator::after,
+.ol8-choice[data-ol8-size="large"][data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  border-radius: var(--ol8-component-checkbox-radius-comfortable);
+}
+.ol8-choice--radio[data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  border-radius: var(--ol8-shape-radius-full);
+}
+
+/* ---- Content --------------------------------------------------------- */
+.ol8-choice__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-dimension-scale-003);
+  flex: 1 0 0;
+  min-inline-size: 0;
+  position: relative;
+}
+.ol8-choice__label {
+  font-size: var(--_label-size);
+  line-height: var(--_label-line);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--ol8-color-text-primary);
+  overflow-wrap: break-word;
+}
+.ol8-choice__description {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+  overflow-wrap: break-word;
+}
+.ol8-choice[data-ol8-availability="disabled"] .ol8-choice__label,
+.ol8-choice[data-ol8-availability="disabled"] .ol8-choice__description {
+  color: var(--ol8-color-text-disabled);
+}
+
+/* ---- Gem material ----------------------------------------------------
+   "Gem is one Boolean material adapter over the same anatomy; Regular
+   remains the default." A wash on the row, not a different component. */
+.ol8-choice[data-ol8-material="gem"] > .ol8-choice__surface {
+  background: var(--ol8-material-gem-color-quiet-environmentalface);
+  border: 1px solid var(--ol8-material-gem-color-cutedge-high);
+  border-radius: var(--ol8-shape-radius-standard);
+  inset-inline: 0;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ol8-choice[data-ol8-material="gem"] > .ol8-choice__surface {
+    background: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  }
+}

package/src/styles/gem.css

@@ -0,0 +1,173 @@
+/* GENERATED from packages/core/src/materials/gem/gem.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Gem material adapter
+ * Figma: section "Gem Button" (1034:9969) — 144 components across
+ *   Button/Primary/Gem 100:3, Button/Secondary/Gem 100:208,
+ *   Icon Button ±Circle Primary/Secondary Gem 102:78, 102:151, 119:202, 119:299.
+ *
+ * From the Figma description (100:3):
+ *   "Material adapter — NOT a fifth semantic variant. Geometry, meaning,
+ *    accessibility, protected target, Size, State, label/icon content and
+ *    native behavior are inherited from the regular molecule. Material changes
+ *    only the token-bound surface and inner focus edge. Reduced Transparency
+ *    resolves to the regular opaque equivalent. Quiet and Destructive use the
+ *    regular material treatment until a distinct Gem treatment is explicitly
+ *    approved."
+ *
+ * So Gem is an ATTRIBUTE on an existing button, never a new class:
+ *   <button class="ol8-btn ol8-btn--primary" data-ol8-material="gem">
+ *
+ * It adds exactly two painted layers and touches nothing else:
+ *   ::before  the three-stop body + backdrop blur
+ *   ::after   the rim (specular top edge + integrated light rim)
+ *
+ * THE GRADIENT ANGLE
+ * Figma bakes a per-instance angle: 153.1595deg at Standard (83x42),
+ * 151.6609 at Comfortable (89x48), 149.2872 at Large (101x60). Those are not
+ * three different designs — every one satisfies
+ *       theta = 90deg + atan(W / H)
+ * to four decimal places, which is exactly CSS's `to bottom right` corner
+ * keyword (gradient line perpendicular to the other diagonal). Using the
+ * keyword reproduces Figma at every size AND at any label width, where a baked
+ * degree value would only be correct for the one instance it was measured on.
+ */
+
+.ol8-btn[data-ol8-material="gem"],
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+  position: relative;
+  isolation: isolate;
+  --_rim: var(--ol8-material-control-gem-rim-default);
+}
+
+/* The regular opaque background stays underneath on purpose — it is what
+   shows through when the gem layer is suppressed for Reduced Transparency. */
+.ol8-btn[data-ol8-material="gem"]::before,
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  backdrop-filter: blur(var(--ol8-material-control-gem-blur));
+  -webkit-backdrop-filter: blur(var(--ol8-material-control-gem-blur));
+  background-image: linear-gradient(
+    to bottom right,
+    var(--_g1) var(--ol8-material-control-gem-gradient-start),
+    var(--_g2) var(--ol8-material-control-gem-gradient-mid),
+    var(--_g3) var(--ol8-material-control-gem-gradient-end));
+}
+
+.ol8-btn[data-ol8-material="gem"]::after,
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    inset 0 2px 1px 0 var(--ol8-material-control-gem-rim-specular),
+    inset 0 0 0 0 var(--_rim);
+}
+
+/* ---- Primary · three-stop same-hue body ------------------------------ */
+.ol8-btn--primary[data-ol8-material="gem"],
+.ol8-icon-btn--primary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-primary-start);
+  --_g2: var(--ol8-material-control-gem-primary-mid);
+  --_g3: var(--ol8-material-control-gem-primary-end);
+  --_fg: var(--ol8-material-control-gem-primary-content);
+  --_ink: var(--ol8-material-control-gem-primary-content);
+}
+.ol8-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
+.ol8-icon-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-primary-hoverstart);
+  --_g2: var(--ol8-material-control-gem-primary-hovermid);
+  --_g3: var(--ol8-material-control-gem-primary-hoverend);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+}
+/* Pressed reuses the HOVER stops and adds the cut-edge drop shadow. */
+.ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
+.ol8-icon-btn--primary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-primary-hoverstart);
+  --_g2: var(--ol8-material-control-gem-primary-hovermid);
+  --_g3: var(--ol8-material-control-gem-primary-hoverend);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+}
+.ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) {
+  filter: drop-shadow(0 9px 12px var(--ol8-material-gem-color-cutedge-shadow));
+}
+.ol8-btn--primary[data-ol8-material="gem"][data-ol8-loading],
+.ol8-icon-btn--primary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-primary-loadingstart);
+  --_g2: var(--ol8-material-control-gem-primary-loadingmid);
+  --_g3: var(--ol8-material-control-gem-primary-loadingend);
+}
+
+/* ---- Secondary · transparent body with an integrated light rim -------
+   The regular Secondary's 2px boundary is dropped in Gem; the rim replaces
+   it. Reduced Transparency restores the boundary along with the opaque body. */
+.ol8-btn--secondary[data-ol8-material="gem"] { --_bw: 0px; }
+.ol8-btn--secondary[data-ol8-material="gem"],
+.ol8-icon-btn--secondary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-secondary-high);
+  --_g2: var(--ol8-material-control-gem-secondary-mid);
+  --_g3: var(--ol8-material-control-gem-secondary-low);
+  --_fg: var(--ol8-material-control-gem-secondary-content);
+  --_ink: var(--ol8-material-control-gem-secondary-content);
+  --_bd: transparent;
+}
+.ol8-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
+.ol8-icon-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
+  --_g2: var(--ol8-material-control-gem-secondary-hovermid);
+  --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+  --_fg: var(--ol8-material-control-gem-secondary-content);
+}
+.ol8-btn--secondary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--secondary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
+.ol8-icon-btn--secondary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
+  --_g2: var(--ol8-material-control-gem-secondary-hovermid);
+  --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+  --_fg: var(--ol8-material-control-gem-secondary-content);
+}
+.ol8-btn--secondary[data-ol8-material="gem"][data-ol8-loading],
+.ol8-icon-btn--secondary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem-secondary-loadinghigh);
+  --_g2: var(--ol8-material-control-gem-secondary-loadingmid);
+  --_g3: var(--ol8-material-control-gem-secondary-loadinglow);
+}
+
+/* Content must sit above the ::before body. */
+.ol8-btn[data-ol8-material="gem"] > *,
+.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon { position: relative; z-index: 0; }
+
+/* ---- Disabled inherits the regular opaque treatment ------------------ */
+.ol8-btn[data-ol8-material="gem"]:disabled::before,
+.ol8-btn[data-ol8-material="gem"]:disabled::after,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface::before,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface::after { display: none; }
+
+/* ---- Reduced Transparency -> the regular opaque equivalent -----------
+   Explicitly required by the Figma description. Hiding the gem layers
+   reveals the regular molecule's own background, which was never removed. */
+@media (prefers-reduced-transparency: reduce) {
+  .ol8-btn[data-ol8-material="gem"]::before,
+  .ol8-btn[data-ol8-material="gem"]::after,
+  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before,
+  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after { display: none; }
+  .ol8-btn--secondary[data-ol8-material="gem"] {
+    --_bw: var(--ol8-component-button-secondaryboundary);
+    --_bd: var(--ol8-color-actionsecondary-contentdefault);
+    --_fg: var(--ol8-color-actionsecondary-contentdefault);
+  }
+  .ol8-btn--primary[data-ol8-material="gem"] { --_fg: var(--ol8-color-actionprimary-content); }
+  .ol8-btn[data-ol8-material="gem"]:active { filter: none; }
+}