@lumen-stack/react 0.8.1 → 0.9.0

package/dist/styles.css

@@ -13,15 +13,19 @@
   --lumen-s-5: 24px;
   --lumen-s-6: 32px;
 
-  /* Radii */
-  --lumen-r-sm: 6px;
-  --lumen-r-md: 10px;
-  --lumen-r-lg: 14px;
+  /* Radii — derived from one themeable base so the dashboard's corner-radius
+   * control (which sets --lumen-radius) scales the whole widget. At the 10px
+   * default this reproduces the original 6 / 10 / 14 scale exactly. */
+  --lumen-radius: 10px;
+  --lumen-r-sm: max(0px, calc(var(--lumen-radius) - 4px));
+  --lumen-r-md: var(--lumen-radius);
+  --lumen-r-lg: calc(var(--lumen-radius) + 4px);
 
   /* Type */
   --lumen-font-ui:
     "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
     "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
+  --lumen-fs-11: 11px;
   --lumen-fs-12: 12px;
   --lumen-fs-13: 13px;
   --lumen-fs-14: 14px;
@@ -43,10 +47,16 @@
   --lumen-fg-subtle: #71717a;
   --lumen-border: #26262a;
   --lumen-border-strong: #3f3f46;
-  --lumen-accent: #fafafa;
-  --lumen-accent-fg: #0a0a0b;
+  /* Brand accent — International Klein Blue, shared with the marketing site
+   * (apps/web/app/lp.css `.lp-root --blue`). Same value in light + dark so a
+   * CTA reads as Lumen-blue regardless of the host scheme. The hex line is a
+   * fallback for engines without oklch(); modern browsers take the oklch. */
+  --lumen-accent: #3a2fe6;
+  --lumen-accent: oklch(0.4550 0.3000 264);
+  --lumen-accent-fg: #ffffff;
+  --lumen-mark: oklch(0.8800 0.1650 93);
   --lumen-danger: #ef4444;
-  --lumen-focus-ring: rgb(96 165 250 / 0.6);
+  --lumen-focus-ring: oklch(0.4550 0.3000 264 / 0.55);
   --lumen-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
   --lumen-shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.7),
     0 1px 0 rgb(255 255 255 / 0.04) inset;
@@ -55,7 +65,6 @@
   --lumen-primary: var(--lumen-accent);
   --lumen-primary-fg: var(--lumen-accent-fg);
   --lumen-muted: var(--lumen-fg-muted);
-  --lumen-radius: var(--lumen-r-md);
   --lumen-shadow: var(--lumen-shadow-lg);
 }
 
@@ -70,7 +79,9 @@
     --lumen-fg-subtle: #a1a1aa;
     --lumen-border: #e4e4e7;
     --lumen-border-strong: #d4d4d8;
-    --lumen-accent: #0a0a0b;
+    /* Accent stays Klein blue in light mode too (brand-consistent CTA). */
+    --lumen-accent: #3a2fe6;
+    --lumen-accent: oklch(0.4550 0.3000 264);
     --lumen-accent-fg: #ffffff;
     --lumen-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
     --lumen-shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.18);
@@ -87,8 +98,9 @@
   --lumen-fg-subtle: #71717a;
   --lumen-border: #26262a;
   --lumen-border-strong: #3f3f46;
-  --lumen-accent: #fafafa;
-  --lumen-accent-fg: #0a0a0b;
+  --lumen-accent: #3a2fe6;
+  --lumen-accent: oklch(0.4550 0.3000 264);
+  --lumen-accent-fg: #ffffff;
   --lumen-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
   --lumen-shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.7),
     0 1px 0 rgb(255 255 255 / 0.04) inset;
@@ -103,7 +115,8 @@
   --lumen-fg-subtle: #a1a1aa;
   --lumen-border: #e4e4e7;
   --lumen-border-strong: #d4d4d8;
-  --lumen-accent: #0a0a0b;
+  --lumen-accent: #3a2fe6;
+  --lumen-accent: oklch(0.4550 0.3000 264);
   --lumen-accent-fg: #ffffff;
   --lumen-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
   --lumen-shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.18);
@@ -123,7 +136,8 @@
   padding: 8px 14px;
   font-family: var(--lumen-font-ui);
   font-size: var(--lumen-fs-13);
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: -0.005em;
   line-height: var(--lumen-lh-tight);
   cursor: pointer;
   transition:
@@ -340,6 +354,8 @@
   position: relative;
   background: var(--lumen-bg);
   color: var(--lumen-fg);
+  /* Match the marketing site's editorial tracking (.lp-root). */
+  letter-spacing: -0.008em;
   width: 100%;
   max-width: 100%;
   max-height: 92dvh;
@@ -429,9 +445,9 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: var(--lumen-fs-14);
+  font-size: 15px;
   font-weight: 600;
-  letter-spacing: -0.005em;
+  letter-spacing: -0.01em;
   margin: 0;
   color: var(--lumen-fg);
 }
@@ -439,7 +455,7 @@
   width: 8px;
   height: 8px;
   border-radius: 2px;
-  background: var(--lumen-fg);
+  background: var(--lumen-accent);
   transform: rotate(45deg);
 }
 .lumen-icon-btn {
@@ -1130,19 +1146,19 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
   position: absolute;
   inset: 0;
   width: 0;
-  background: var(--lumen-fg);
+  background: var(--lumen-accent);
   transition: width var(--lumen-dur) var(--lumen-ease);
 }
 .lumen-step-done .lumen-step-num {
-  background: var(--lumen-fg);
+  background: var(--lumen-accent);
   color: var(--lumen-accent-fg);
-  border-color: var(--lumen-fg);
+  border-color: var(--lumen-accent);
 }
 .lumen-step-done .lumen-step-lbl { color: var(--lumen-fg-muted); }
 .lumen-step-done .lumen-step-bar::after { width: 100%; }
 .lumen-step-active .lumen-step-num {
-  border-color: var(--lumen-fg);
-  color: var(--lumen-fg);
+  border-color: var(--lumen-accent);
+  color: var(--lumen-accent);
   box-shadow: 0 0 0 3px var(--lumen-focus-ring);
 }
 .lumen-step-active .lumen-step-lbl { color: var(--lumen-fg); font-weight: 500; }
@@ -1196,10 +1212,12 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
   margin-left: auto;
   flex: none;
   font-size: 10px;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--lumen-fg-subtle);
-  border: 1px solid var(--lumen-border);
+  color: var(--lumen-accent);
+  background: color-mix(in oklab, var(--lumen-accent) 10%, transparent);
+  border: 1px solid color-mix(in oklab, var(--lumen-accent) 30%, transparent);
   border-radius: 999px;
   padding: 3px 9px;
 }
@@ -1289,6 +1307,52 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
 }
 .lumen-cap-note { font-size: var(--lumen-fs-12); color: var(--lumen-fg-subtle); }
 
+/* Voice note, capture-step variant — record the moment the bug is still on
+ * screen. Shares the audio-row states with the describe step; the wrapper
+ * gives it a branded affordance + an in-context hint. */
+.lumen-voice-capture {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 16px 4px;
+}
+.lumen-voice-capture-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  appearance: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--lumen-fs-13);
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--lumen-accent);
+  background: color-mix(in oklab, var(--lumen-accent) 10%, transparent);
+  border: 1px solid color-mix(in oklab, var(--lumen-accent) 32%, transparent);
+  border-radius: 999px;
+  padding: 8px 14px;
+  transition: background-color var(--lumen-dur-fast) var(--lumen-ease),
+    border-color var(--lumen-dur-fast) var(--lumen-ease),
+    transform var(--lumen-dur-fast) var(--lumen-ease);
+  -webkit-tap-highlight-color: transparent;
+}
+.lumen-voice-capture-btn svg { width: 16px; height: 16px; }
+.lumen-voice-capture-btn:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--lumen-accent) 16%, transparent);
+  border-color: color-mix(in oklab, var(--lumen-accent) 45%, transparent);
+  transform: translateY(-0.5px);
+}
+.lumen-voice-capture-btn:focus-visible {
+  outline: 2px solid var(--lumen-focus-ring);
+  outline-offset: 2px;
+}
+.lumen-voice-capture-hint {
+  margin: 0;
+  font-size: var(--lumen-fs-12);
+  color: var(--lumen-fg-subtle);
+}
+
 /* ─── Wizard: step 3 review ──────────────────────────────────────────── */
 .lumen-review { padding: 8px 16px 16px; }
 .lumen-review-row {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumen-stack/react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "React SDK for Lumen — screenshot capture, annotation, and feedback widget.",
   "license": "MIT",
   "publishConfig": {
@@ -39,7 +39,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@lumen-stack/core": "^0.8.0",
+    "@lumen-stack/core": "^0.9.0",
     "html2canvas-pro": "^1.5.8",
     "sonner": "^1.7.1"
   },