Fix dangling --wb-* custom properties + token-usage guard

.changeset/dangling-token-names.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+Fix CSS variable names that pointed at non-existent tokens: the variables-settings modal picks up its token-defined colors, spacing, and radii, and diagram edge labels use their intended hover/selection colors.

.changeset/textarea-disabled-background.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/ui': minor
+---
+
+TextArea exposes `--ax-public-textarea-root-background-color-disabled` (defaults to `transparent`); a never-applied icon-switch thumb background declaration was removed.

.github/workflows/pr-check-docs.yml

@@ -8,10 +8,10 @@ name: PR Check (docs)
 # Typecheck is deliberately absent: apps/docs tolerates known starlight
 # virtual-module type errors.
 
+# Every PR gets checks regardless of its base branch — this keeps stacked
+# PRs and integration branches covered without a base allowlist to maintain.
 on:
   pull_request:
-    branches:
-      - main
     paths:
       - 'apps/docs/**'
       - 'packages/ui/**'

.github/workflows/pr-check.yml

@@ -4,13 +4,14 @@ name: PR Check
 # is safe to merge. Focus on the published packages @workflowbuilder/sdk and
 # @workflowbuilder/ui (plus its private @workflowbuilder/ui-tokens build) +
 # global format consistency. apps/docs has its own path-filtered workflow
-# (pr-check-docs.yml); demo and ai-studio are not checked here — they're
-# internal and have their own broken-state tolerances.
+# (pr-check-docs.yml); demo and ai-studio are not built here — they're
+# internal and have their own broken-state tolerances — but their CSS goes
+# through the style lint below like every other workspace's.
 
+# Every PR gets checks regardless of its base branch — this keeps stacked
+# PRs and integration branches covered without a base allowlist to maintain.
 on:
   pull_request:
-    branches:
-      - main
 
 permissions:
   contents: read
@@ -145,3 +146,6 @@ jobs:
         # build:ui builds @workflowbuilder/ui-tokens first, then ui, then runs
         # the check:built-css guard.
         run: pnpm build:ui
+
+      - name: Style lint (token usage + fallbacks)
+        run: pnpm lint:styles

.prettierignore

@@ -5,3 +5,5 @@
 apps/icons/src/utils/icons.gen.ts
 # Astro auto-generated content collections + types (gitignored, regenerated on build/dev)
 **/.astro/
+# Designer changelog checked in verbatim — reformatting corrupted token paths in emphasis markers
+packages/tokens/migration/

.stylelintrc.mjs

@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url';
+
+// The csstools rule resolves importFrom paths against process.cwd(), and
+// lint-staged runs commands from workspace directories — anchor to this file.
+const customProperties = fileURLToPath(new URL('./tools/stylelint/custom-properties.mjs', import.meta.url));
+
+/** @type {import('stylelint').Config} */
+export default {
+  plugins: ['stylelint-value-no-unknown-custom-properties', './tools/stylelint/no-system-token-fallbacks.mjs'],
+  ignoreFiles: ['**/node_modules/**', '**/dist/**', 'apps/docs/**'],
+  rules: {
+    'csstools/value-no-unknown-custom-properties': [true, { importFrom: [customProperties] }],
+    'wb/no-system-token-fallbacks': true,
+  },
+};

apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css

@@ -16,11 +16,11 @@
   max-width: 460px;
   padding: 2rem;
   font-family: var(--wb-font-family);
-  background: var(--ax-ui-bg-primary-default, #ffffff);
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
-  border-radius: var(--wb-app-bar-border-radius, 0.75rem);
+  background: var(--ax-ui-bg-primary-default);
+  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border-radius: var(--wb-app-bar-border-radius);
   box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.25);
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
 }
 
 .close {
@@ -35,13 +35,13 @@
   border: none;
   border-radius: 0.5rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default, #6f7480);
+  color: var(--ax-txt-tertiary-default);
   cursor: pointer;
 }
 
 .close:hover {
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
-  color: var(--ax-txt-primary-default, #151516);
+  background: var(--ax-ui-bg-secondary-default);
+  color: var(--ax-txt-primary-default);
 }
 
 .heading {
@@ -59,22 +59,22 @@
   height: 2.25rem;
   flex-shrink: 0;
   border-radius: 0.6rem;
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
-  color: var(--ax-colors-acc1-500, #1096e7);
+  background: var(--ax-ui-bg-secondary-default);
+  color: var(--ax-colors-acc1-500);
 }
 
 .title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
 }
 
 .body {
   margin: 0 0 1.5rem;
   font-size: 0.92rem;
   line-height: 1.6;
-  color: var(--ax-txt-secondary-default, #4d5059);
+  color: var(--ax-txt-secondary-default);
 }
 
 .body p {
@@ -86,7 +86,7 @@
 }
 
 .body strong {
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
   font-weight: 600;
 }
 
@@ -98,7 +98,7 @@
   padding: 0.7rem 1rem;
   border: none;
   border-radius: 0.625rem;
-  background: var(--ax-colors-acc1-500, #1096e7);
+  background: var(--ax-colors-acc1-500);
   color: #ffffff;
   font-size: 0.95rem;
   font-weight: 600;
@@ -107,7 +107,7 @@
 }
 
 .cta:hover {
-  background: var(--ax-colors-acc1-600, #0477c5);
+  background: var(--ax-colors-acc1-600);
 }
 
 .reopen {
@@ -123,11 +123,11 @@
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: 50%;
   background: var(--wb-app-bar-background);
-  color: var(--ax-txt-secondary-default, #4d5059);
+  color: var(--ax-txt-secondary-default);
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .reopen:hover {
-  color: var(--ax-colors-acc1-500, #1096e7);
+  color: var(--ax-colors-acc1-500);
 }

apps/ai-studio/src/components/execution/log-panel.module.css

@@ -1,14 +1,15 @@
 .panel {
   position: fixed;
   bottom: 1rem;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- set from log-panel.tsx inline style */
   right: var(--log-panel-right, 1rem);
   width: 30rem;
   max-width: calc(100vw - 3rem);
   max-height: 26.875rem;
   background: var(--wb-app-bar-background);
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: var(--wb-app-bar-border-radius);
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
   display: flex;
   flex-direction: column;
   z-index: 10;
@@ -90,7 +91,7 @@
 }
 
 .badge--node_started {
-  color: var(--ax-txt-secondary, #888);
+  color: var(--ax-txt-secondary-default);
 }
 
 .badge--node_failed,
@@ -99,7 +100,7 @@
 }
 
 .badge--execution_cancelled {
-  color: var(--ax-txt-secondary, #888);
+  color: var(--ax-txt-secondary-default);
 }
 
 .node-id {
@@ -159,6 +160,6 @@
 }
 
 .event--highlighted {
-  background: color-mix(in srgb, var(--ax-colors-acc1-500, #1096e7), transparent 88%);
-  box-shadow: inset 0.1875rem 0 0 var(--ax-colors-acc1-500, #1096e7);
+  background: color-mix(in srgb, var(--ax-colors-acc1-500), transparent 88%);
+  box-shadow: inset 0.1875rem 0 0 var(--ax-colors-acc1-500);
 }

apps/ai-studio/src/components/visualize/renderers.module.css

@@ -1,7 +1,7 @@
 .markdown {
   font-size: 0.85rem;
   line-height: 1.6;
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
   overflow-wrap: anywhere;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .markdown a {
-  color: var(--ax-colors-acc1-500, #1096e7);
+  color: var(--ax-colors-acc1-500);
   text-decoration: underline;
 }
 
@@ -51,15 +51,15 @@
 .markdown code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.82em;
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  background: var(--ax-ui-bg-secondary-default);
   padding: 0.1em 0.35em;
   border-radius: 0.25rem;
 }
 
 .markdown pre {
   margin: 0.6em 0;
   padding: 0.7em 0.85em;
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  background: var(--ax-ui-bg-secondary-default);
   border-radius: 0.5rem;
   overflow-x: auto;
 }
@@ -72,8 +72,8 @@
 .markdown blockquote {
   margin: 0.6em 0;
   padding-left: 0.85em;
-  border-left: 0.1875rem solid var(--ax-ui-stroke-primary-default, #edeff3);
-  color: var(--ax-txt-secondary-default, #4d5059);
+  border-left: 0.1875rem solid var(--ax-ui-stroke-primary-default);
+  color: var(--ax-txt-secondary-default);
 }
 
 .rich p {
@@ -89,13 +89,13 @@
 .rich code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.85em;
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  background: var(--ax-ui-bg-secondary-default);
   padding: 0.05em 0.3em;
   border-radius: 0.2rem;
 }
 
 .rich a {
-  color: var(--ax-colors-acc1-500, #1096e7);
+  color: var(--ax-colors-acc1-500);
   text-decoration: underline;
 }
 
@@ -108,7 +108,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.8rem;
   line-height: 1.55;
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
@@ -117,7 +117,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.78rem;
   line-height: 1.5;
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
 }
 
 .json-row {
@@ -132,18 +132,18 @@
 
 .json-children {
   padding-left: 0.9rem;
-  border-left: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+  border-left: 0.0625rem solid var(--ax-ui-stroke-primary-default);
   margin-left: 0.25rem;
 }
 
 .json-toggle {
   width: 0.7rem;
   flex-shrink: 0;
-  color: var(--ax-txt-tertiary-default, #6f7480);
+  color: var(--ax-txt-tertiary-default);
 }
 
 .json-key {
-  color: var(--ax-colors-acc1-600, #0477c5);
+  color: var(--ax-colors-acc1-600);
 }
 
 .json-string {
@@ -160,7 +160,7 @@
 }
 
 .json-bracket {
-  color: var(--ax-txt-tertiary-default, #6f7480);
+  color: var(--ax-txt-tertiary-default);
 }
 
 .table {
@@ -171,14 +171,14 @@
 
 .table th,
 .table td {
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
   padding: 0.3em 0.5em;
   text-align: left;
   vertical-align: top;
 }
 
 .table th {
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  background: var(--ax-ui-bg-secondary-default);
   font-weight: 600;
   position: sticky;
   top: 0;
@@ -192,15 +192,15 @@
 
 .stat-card {
   padding: 0.6rem 0.7rem;
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
   border-radius: 0.5rem;
-  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  background: var(--ax-ui-bg-secondary-default);
 }
 
 .stat-value {
   font-size: 1.05rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default, #151516);
+  color: var(--ax-txt-primary-default);
   overflow-wrap: anywhere;
 }
 
@@ -209,13 +209,13 @@
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  color: var(--ax-txt-tertiary-default, #6f7480);
+  color: var(--ax-txt-tertiary-default);
 }
 
 .fallback-note {
   margin-bottom: 0.4rem;
   font-size: 0.72rem;
-  color: var(--ax-txt-tertiary-default, #6f7480);
+  color: var(--ax-txt-tertiary-default);
 }
 
 .chart {