@astryxdesign/lab 0.7.5-canary.253fe63 → 0.7.5-canary.2af4d30

package/dist/Chat/ChatUnreadDivider.js

@@ -74,7 +74,7 @@ export function ChatUnreadDivider({
       }
     }), /*#__PURE__*/_jsx("span", {
       ...{
-        className: "x2lah0s x9ynric x141an7d x1lvx875 xjt36v0 x1ltkj2j"
+        className: "x2lah0s x9ynric x141an7d x1lvx875 x1wj83wy x1ltkj2j"
       },
       children: label
     })]

package/dist/CircularProgress/CircularProgress.js

@@ -106,15 +106,15 @@ const variantStyles = {
     $$css: true
   },
   success: {
-    kjVXCG: "x8y33gb",
+    kjVXCG: "x88o7k4",
     $$css: true
   },
   warning: {
-    kjVXCG: "x9ezeq1",
+    kjVXCG: "x16d96h5",
     $$css: true
   },
   error: {
-    kjVXCG: "x1vco6zm",
+    kjVXCG: "xqb94c9",
     $$css: true
   },
   neutral: {

package/dist/LogStream/LogStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AAwOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqNhB;yBAnOe,SAAS"}
+{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AAsOD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqNhB;yBAnOe,SAAS"}

package/dist/LogStream/LogStream.js

@@ -164,11 +164,11 @@ const styles = {
     $$css: true
   },
   levelWarn: {
-    kMwMTN: "xuj0v0c",
+    kMwMTN: "x10h9ou4",
     $$css: true
   },
   levelError: {
-    kMwMTN: "x1lenag",
+    kMwMTN: "x1wj83wy",
     $$css: true
   },
   levelInfoTerminal: {

package/dist/SVGIcon/SVGIcon.js

@@ -75,15 +75,15 @@ const colorStyles = {
     $$css: true
   },
   positive: {
-    kMwMTN: "xtjic6",
+    kMwMTN: "x1vau044",
     $$css: true
   },
   negative: {
-    kMwMTN: "xjt36v0",
+    kMwMTN: "xskb5cx",
     $$css: true
   },
   warning: {
-    kMwMTN: "xs3pv69",
+    kMwMTN: "x4z9hng",
     $$css: true
   },
   inherit: {

package/dist/Stat/Stat.js

@@ -78,11 +78,11 @@ const sizeStyles = {
  */
 const sentimentStyles = {
   positive: {
-    kMwMTN: "xtjic6",
+    kMwMTN: "x1caiuuo",
     $$css: true
   },
   negative: {
-    kMwMTN: "xjt36v0",
+    kMwMTN: "x1wj83wy",
     $$css: true
   },
   neutral: {

package/dist/lab.css

@@ -337,16 +337,15 @@
   .x1s4jh2n:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-teal) 52%,var(--color-text-secondary))}
   .x1wzna5w:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-yellow) 52%,var(--color-text-secondary))}
   .x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
-  .xuj0v0c:not(#\#):not(#\#):not(#\#){color:light-dark(color-mix(in srgb,var(--color-warning) 58%,black),var(--color-warning))}
-  .x1lenag:not(#\#):not(#\#):not(#\#){color:light-dark(var(--color-error),color-mix(in srgb,var(--color-error) 82%,white))}
   .x19co3pv:not(#\#):not(#\#):not(#\#){color:transparent}
   .xqwr325:not(#\#):not(#\#):not(#\#){color:var(--color-accent)}
-  .xjt36v0:not(#\#):not(#\#):not(#\#){color:var(--color-error)}
   .xqa6c3m:not(#\#):not(#\#):not(#\#){color:var(--color-icon-disabled)}
+  .xskb5cx:not(#\#):not(#\#):not(#\#){color:var(--color-icon-error)}
   .xtbr613:not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}
   .xv9yike:not(#\#):not(#\#):not(#\#){color:var(--color-icon-secondary)}
+  .x1vau044:not(#\#):not(#\#):not(#\#){color:var(--color-icon-success)}
+  .x4z9hng:not(#\#):not(#\#):not(#\#){color:var(--color-icon-warning)}
   .x17wrial:not(#\#):not(#\#):not(#\#){color:var(--color-on-accent)}
-  .xtjic6:not(#\#):not(#\#):not(#\#){color:var(--color-success)}
   .x1wxerb0:not(#\#):not(#\#):not(#\#){color:var(--color-syntax-added-marker)}
   .xt5rlkq:not(#\#):not(#\#):not(#\#){color:var(--color-syntax-punctuation)}
   .x103bwea:not(#\#):not(#\#):not(#\#){color:var(--color-syntax-removed-marker)}
@@ -355,6 +354,7 @@
   .x1vvqiwl:not(#\#):not(#\#):not(#\#){color:var(--color-text-blue)}
   .x1txnczv:not(#\#):not(#\#):not(#\#){color:var(--color-text-cyan)}
   .xnbbluu:not(#\#):not(#\#):not(#\#){color:var(--color-text-disabled)}
+  .x1wj83wy:not(#\#):not(#\#):not(#\#){color:var(--color-text-error)}
   .xru1t7f:not(#\#):not(#\#):not(#\#){color:var(--color-text-gray)}
   .xltfdvo:not(#\#):not(#\#):not(#\#){color:var(--color-text-green)}
   .xm47u9q:not(#\#):not(#\#):not(#\#){color:var(--color-text-orange)}
@@ -363,9 +363,10 @@
   .x1m9wyeb:not(#\#):not(#\#):not(#\#){color:var(--color-text-purple)}
   .x1joocv1:not(#\#):not(#\#):not(#\#){color:var(--color-text-red)}
   .xv1l7n4:not(#\#):not(#\#):not(#\#){color:var(--color-text-secondary)}
+  .x1caiuuo:not(#\#):not(#\#):not(#\#){color:var(--color-text-success)}
   .x9x0lbs:not(#\#):not(#\#):not(#\#){color:var(--color-text-teal)}
+  .x10h9ou4:not(#\#):not(#\#):not(#\#){color:var(--color-text-warning)}
   .xdhq94a:not(#\#):not(#\#):not(#\#){color:var(--color-text-yellow)}
-  .xs3pv69:not(#\#):not(#\#):not(#\#){color:var(--color-warning)}
   .x1kihgfc:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-0-5)}
   .x1lfs0n9:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-1)}
   .xak3so:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-2)}
@@ -528,13 +529,13 @@
   .ximx5ud:not(#\#):not(#\#):not(#\#){stroke:var(--color-accent-muted)}
   .xjsr54c:not(#\#):not(#\#):not(#\#){stroke:var(--color-accent)}
   .xjswp7v:not(#\#):not(#\#):not(#\#){stroke:var(--color-error-muted)}
-  .x1vco6zm:not(#\#):not(#\#):not(#\#){stroke:var(--color-error)}
   .x1uro670:not(#\#):not(#\#):not(#\#){stroke:var(--color-success-muted)}
-  .x8y33gb:not(#\#):not(#\#):not(#\#){stroke:var(--color-success)}
   .xuxf9kk:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-disabled)}
+  .xqb94c9:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-error)}
+  .x88o7k4:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-success)}
+  .x16d96h5:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-warning)}
   .xpi25hw:not(#\#):not(#\#):not(#\#){stroke:var(--color-track)}
   .x1wjzxuj:not(#\#):not(#\#):not(#\#){stroke:var(--color-warning-muted)}
-  .x9ezeq1:not(#\#):not(#\#):not(#\#){stroke:var(--color-warning)}
   .xeq4nuv:not(#\#):not(#\#):not(#\#){tab-size:2}
   .x140o2bo:not(#\#):not(#\#):not(#\#){table-layout:fixed}
   .x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.5-canary.253fe63",
+  "version": "0.7.5-canary.2af4d30",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.5-canary.253fe63",
+    "@astryxdesign/core": "0.7.5-canary.2af4d30",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.5-canary.253fe63",
-    "@astryxdesign/cli": "0.7.5-canary.253fe63",
+    "@astryxdesign/a11y-spec": "0.7.5-canary.2af4d30",
+    "@astryxdesign/cli": "0.7.5-canary.2af4d30",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chat/ChatUnreadDivider.tsx

@@ -63,7 +63,7 @@ const styles = stylex.create({
     fontFamily: typographyVars['--font-family-body'],
     fontSize: typeScaleVars['--text-supporting-size'],
     fontWeight: fontWeightVars['--font-weight-bold'],
-    color: colorVars['--color-error'],
+    color: colorVars['--color-text-error'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
   },
 });

package/src/CircularProgress/CircularProgress.tsx

@@ -260,13 +260,13 @@ const variantStyles = stylex.create({
     stroke: colorVars['--color-accent'],
   },
   success: {
-    stroke: colorVars['--color-success'],
+    stroke: colorVars['--color-text-success'],
   },
   warning: {
-    stroke: colorVars['--color-warning'],
+    stroke: colorVars['--color-text-warning'],
   },
   error: {
-    stroke: colorVars['--color-error'],
+    stroke: colorVars['--color-text-error'],
   },
   neutral: {
     stroke: colorVars['--color-text-disabled'],

package/src/LogStream/LogStream.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
 
   usage: {
     description:
-      'Experimental streaming log viewer: mono grid rows (timestamp | level | source | message) with token-derived level accents, expandable per-row detail panels, follow-scroll live tailing with a "Jump to latest" affordance, and an always-dark terminal variant. Appended rows fade in via @starting-style. Live announcements follow the pinning state: the role="log" region is aria-live="polite" only while following the tail, and aria-live="off" while unfollowed, so a busy stream never floods assistive tech.',
+      'Experimental streaming log viewer: mono grid rows (timestamp | level | source | message) with token-derived level accents, expandable per-row detail panels, follow-scroll live tailing with a "Jump to latest" affordance, and an always-dark terminal variant. In the default variant, warning and error labels use their plain-surface status foreground roles. Appended rows fade in via @starting-style. Live announcements follow the pinning state: the role="log" region is aria-live="polite" only while following the tail, and aria-live="off" while unfollowed, so a busy stream never floods assistive tech.',
   },
 
   props: [

package/src/LogStream/LogStream.tsx

@@ -233,14 +233,12 @@ const styles = stylex.create({
   },
   levelInfo: {color: colorVars['--color-text-secondary']},
   levelDebug: {color: colorVars['--color-text-disabled']},
-  // Token amber/red are tuned for fills; as small text they miss 4.5:1.
-  // light-dark() darkens the amber in light mode and lifts the red in dark
-  // mode, both derived from the tokens.
+  // Plain-surface warning/error labels use the dedicated foreground roles.
   levelWarn: {
-    color: `light-dark(color-mix(in srgb, ${colorVars['--color-warning']} 58%, black), ${colorVars['--color-warning']})`,
+    color: colorVars['--color-text-warning'],
   },
   levelError: {
-    color: `light-dark(${colorVars['--color-error']}, color-mix(in srgb, ${colorVars['--color-error']} 82%, white))`,
+    color: colorVars['--color-text-error'],
   },
   levelInfoTerminal: {color: TERM.text},
   levelDebugTerminal: {color: TERM.textDim},

package/src/SVGIcon/SVGIcon.tsx

@@ -118,9 +118,9 @@ const colorStyles = stylex.create({
   secondary: {color: colorVars['--color-icon-secondary']},
   disabled: {color: colorVars['--color-icon-disabled']},
   accent: {color: colorVars['--color-accent']},
-  positive: {color: colorVars['--color-success']},
-  negative: {color: colorVars['--color-error']},
-  warning: {color: colorVars['--color-warning']},
+  positive: {color: colorVars['--color-icon-success']},
+  negative: {color: colorVars['--color-icon-error']},
+  warning: {color: colorVars['--color-icon-warning']},
   inherit: {color: 'inherit'},
 });
 

package/src/Stat/Stat.tsx

@@ -116,10 +116,10 @@ const sizeStyles = stylex.create({
  */
 const sentimentStyles = stylex.create({
   positive: {
-    color: colorVars['--color-success'],
+    color: colorVars['--color-text-success'],
   },
   negative: {
-    color: colorVars['--color-error'],
+    color: colorVars['--color-text-error'],
   },
   neutral: {
     color: colorVars['--color-text-secondary'],