openyida 2026.9.21 → 2026.9.22-beta.2

package/lib/design-plan/validate.js

@@ -3,12 +3,8 @@
 const path = require('path');
 const { readJson } = require('./files');
 const { CliError } = require('../core/cli-error');
-const { derivePageContent } = require('./normalize');
-const { PLAN_SKILL_ROOT: ROOT, loadThemeIndex } = require('./themes');
-const { concretePageText } = require('../design/page-content');
-const { ENTRY_MODES } = require('./entry-navigation');
-const { t } = require('../core/i18n');
 
+const ROOT = path.resolve(__dirname, '../../yida-skills/skills/yida-design/sub_skill/yida-design-plan');
 const object = value => value !== null && typeof value === 'object' && !Array.isArray(value);
 const filled = value => typeof value === 'string' && value.trim().length > 0;
 
@@ -20,7 +16,6 @@ function collectIssues(plan) {
   const array = (value, path, required = false) => check(Array.isArray(value) && (!required || value.length > 0), path, required ? '填写非空数组' : '填写数组');
   if (!check(object(plan), '$', '填写计划对象')) {return issues;}
   strings(plan.meta, 'meta', ['projectName', 'revision']);
-  if (plan.visualStyle?.forUser?.selectedTheme) {strings(plan.meta, 'meta', ['experienceTopology', 'businessDomain']);}
   strings(plan.overview, 'overview', ['summary']);
   array(plan.overview?.rolePermissionSummary, 'overview.rolePermissionSummary', true);
   const models = Array.isArray(plan.dataModels) ? plan.dataModels : [];
@@ -53,7 +48,7 @@ function collectIssues(plan) {
     if (!object(model) || String(model.formType).includes('流程')) {return;}
     const entryIndex = Array.isArray(samples) ? samples.findIndex(entry => entry?.form === model.name) : -1;
     const entry = samples === undefined ? { records: model.sampleRecords, skipReason: model.skipSampleReason } : samples?.[entryIndex];
-    const p = samples === undefined ? `dataModels[${index}].sampleRecords` : entryIndex < 0 ? 'execution.sampleDataPlan' : `execution.sampleDataPlan[${entryIndex}]`;
+    const p = samples === undefined ? `dataModels[${index}].sampleRecords` : `execution.sampleDataPlan[${entryIndex}]`;
     if (!check(object(entry), p, `补齐 ${model.name} 的示例记录或 skipReason`)) {return;}
     if (filled(entry.skipReason)) {return;}
     if (!check(Array.isArray(entry.records) && entry.records.length > 0 && entry.records.length <= 3, p, '填写 1–3 条业务示例记录，或说明跳过原因')) {return;}
@@ -66,29 +61,7 @@ function collectIssues(plan) {
       });
     });
   });
-  if (plan.execution?.interactionStates !== undefined
-    && check(object(plan.execution.interactionStates), 'execution.interactionStates', '填写对象，例如 {"empty":"展示空态","error":"提示失败原因"}')) {
-    Object.entries(plan.execution.interactionStates).forEach(([key, value]) => {
-      check(['empty', 'loading', 'error', 'formEntry', 'detail'].includes(key), `execution.interactionStates.${key}`, '选择 empty/loading/error/formEntry/detail');
-      check(filled(value), `execution.interactionStates.${key}`, '填写该状态的业务行为说明');
-    });
-  }
   const pages = plan.pages?.customPageDetails;
-  const recommendation = plan.execution?.entryRecommendation;
-  if (recommendation !== undefined && check(object(recommendation), 'execution.entryRecommendation', '填写访问态入口方案')) {
-    check(ENTRY_MODES.includes(recommendation.mode), 'execution.entryRecommendation.mode', t('cli.design_plan_entry_mode_required'));
-    if (array(recommendation.entries, 'execution.entryRecommendation.entries', true)) {
-      if (recommendation.mode === 'backend-only') {
-        check(recommendation.entries.every(entry => entry?.role === 'management'), 'execution.entryRecommendation.entries', t('cli.design_plan_backend_only_roles'));
-      }
-      recommendation.entries.forEach((entry, index) => {
-        const p = `execution.entryRecommendation.entries[${index}]`;
-        strings(entry, p, ['key', 'name', 'defaultMenuKey']);
-        check(['service', 'management', 'workspace'].includes(entry?.role), `${p}.role`, '选择 service/management/workspace');
-        array(entry?.menu, `${p}.menu`, true);
-      });
-    }
-  }
   const ids = new Set();
   const patternScenes = { 'data-insight': 'dashboard', 'catalog-browse': 'list', 'brand-landing': 'landing', 'progress-narrative': 'detail', 'split-pane-ops': 'detail' };
   const scenes = new Set((Array.isArray(pages) ? pages : []).map(page => page?.sceneKey || page?.pageSpecHandoff?.scene || page?.scene || patternScenes[page?.layoutPattern?.id] || 'workbench'));
@@ -97,25 +70,15 @@ function collectIssues(plan) {
     pages.forEach((page, index) => {
       const p = `pages.customPageDetails[${index}]`;
       if (!check(object(page), p, '填写页面对象')) {return;}
-      if (/^2(?:\.|$)/.test(String(plan.schemaVersion))) {page = derivePageContent(page);}
       strings(page, p, ['pageId', 'name', 'primaryTask', 'permissionSummary', 'firstScreenStructure', 'density']);
       check(!ids.has(page.pageId), `${p}.pageId`, '页面 ID 保持唯一');
       ids.add(page.pageId);
-      const legacyBlocks = !/^2(?:\.|$)/.test(String(plan.schemaVersion)) || (Array.isArray(page.blocks) && page.blocks.some(block => typeof block === 'string'));
-      if (page.contentPriority !== undefined || legacyBlocks) {array(page.contentPriority, `${p}.contentPriority`, true);}
-      if (page.contentRichness?.contentLayers !== undefined || legacyBlocks) {array(page.contentRichness?.contentLayers, `${p}.contentRichness.contentLayers`, true);}
+      array(page.contentPriority, `${p}.contentPriority`, true);
+      array(page.contentRichness?.contentLayers, `${p}.contentRichness.contentLayers`, true);
       check(patterns.some(item => item.id === page.layoutPattern?.id), `${p}.layoutPattern.id`, '使用 authoring-context 中的页面模式 ID');
-      const mode = page.layoutPattern?.mode;
-      if (mode) {
-        check(['preset', 'adapted', 'custom'].includes(mode), `${p}.layoutPattern.mode`, '使用 preset、adapted 或 custom');
-        if (mode === 'adapted') {array(page.layoutPattern.adaptations, `${p}.layoutPattern.adaptations`, true);}
-        if (mode === 'custom') {check(page.layoutPattern.id === 'custom-page-pattern', `${p}.layoutPattern.id`, 'custom 模式使用 custom-page-pattern');}
-        check(page.contentRichness?.requirement === 'rich-but-relevant', `${p}.contentRichness.requirement`, '使用 rich-but-relevant');
-        array(page.contentRichness?.antiFiller, `${p}.contentRichness.antiFiller`, true);
-      }
       const handoff = page.pageSpecHandoff || {};
       if (check(object(handoff), `${p}.pageSpecHandoff`, '填写交接对象')) {
-        const keys = ['scene', 'pageStructure', 'entryMode', 'navigation', 'contentBlocks', 'dataSources', 'dataBinding', 'emptyReason', 'primaryAction', 'themeSummary', 'designFile', 'designRefs'];
+        const keys = ['scene', 'pageStructure', 'entryMode', 'contentBlocks', 'dataSources', 'dataBinding', 'emptyReason', 'primaryAction', 'themeSummary', 'designFile', 'designRefs'];
         for (const key of Object.keys(handoff)) {
           check(keys.includes(key), `${p}.pageSpecHandoff.${key}`, key === 'sceneKey' ? `移到 ${p}.sceneKey` : '使用编写契约中的交接字段');
         }
@@ -127,10 +90,7 @@ function collectIssues(plan) {
             }
           });
         }
-        const blocks = handoff.contentBlocks || page.blocks;
-        if (array(blocks, `${p}.blocks`, true)) {
-          check(blocks.every(filled), `${p}.blocks`, '按优先顺序填写 {name,purpose} 区块，名称和业务用途均为非空文本；旧版使用非空文本数组');
-        }
+        array(handoff.contentBlocks || page.blocks, `${p}.blocks`, true);
         const binding = handoff.dataBinding || page.dataBinding;
         check(['form', 'report', 'connector', 'static-empty'].includes(binding), `${p}.dataBinding`, '选择 form/report/connector/static-empty');
         const sources = handoff.dataSources || page.dataSources;
@@ -143,38 +103,18 @@ function collectIssues(plan) {
       }
     });
   }
-  const applications = plan.visualStyle?.forUser?.pageApplications;
-  for (const [index, page] of (Array.isArray(pages) ? pages : []).entries()) {
-    const applicationIndex = Array.isArray(applications) ? applications.findIndex(item => item?.pageId === page?.pageId) : -1;
-    const application = applications?.[applicationIndex];
-    const p = `visualStyle.forUser.pageApplications[${applicationIndex < 0 ? index : applicationIndex}]`;
-    for (const key of ['firstScreenFocus', 'layout', 'responsive', 'primaryAction']) {
-      const value = application?.[key];
-      check(concretePageText(value),
-        `${p}.${key}`, `补齐 ${page?.name || page?.pageId} 的具体视觉决定，不能只写继承主题`);
-    }
-    check(Array.isArray(application?.acceptanceChecks) && application.acceptanceChecks.length > 0
-      && application.acceptanceChecks.every(concretePageText), `${p}.acceptanceChecks`, `为 ${page?.name || page?.pageId} 填写具体的验收检查数组`);
-  }
   if (/^2(?:\.|$)/.test(String(plan.schemaVersion))) {
     const user = plan.visualStyle?.forUser;
     strings(user?.visualDirection, 'visualStyle.forUser.visualDirection', ['label', 'description']);
     check(['top', 'side'].includes(user?.navigationStyle?.structure), 'visualStyle.forUser.navigationStyle.structure', '选择 top 或 side');
     check(['light', 'dark'].includes(user?.navigationStyle?.tone), 'visualStyle.forUser.navigationStyle.tone', '选择 light 或 dark');
     check(/^#[0-9a-f]{6}$/i.test(user?.colorStrategy?.primaryColor || ''), 'visualStyle.forUser.colorStrategy.primaryColor', '填写 6 位 HEX 色值');
+    if (user?.colorStrategy?.surfaceTone !== undefined) {
+      check(['theme', 'brand-tinted'].includes(user.colorStrategy.surfaceTone), 'visualStyle.forUser.colorStrategy.surfaceTone', '选择 theme 或 brand-tinted');
+    }
     const selected = plan.visualStyle?.internal?.selectedTheme || user?.selectedTheme;
-    const themes = loadThemeIndex().themes;
+    const themes = readJson(path.join(ROOT, 'templates/design-themes/index.json')).themes;
     check(themes.some(theme => theme.themeId === selected?.themeId), 'visualStyle.internal.selectedTheme.themeId', '使用主题索引中的 themeId');
-    if (themes.find(theme => theme.themeId === selected?.themeId)?.mode === 'creative') {
-      try {
-        require('../app/application-style').validateCreativeDirection(plan.visualStyle.creativeDirection, plan.visualStyle.tokens);
-      } catch (error) {
-        if (error.code !== 'APPLICATION_STYLE_CREATIVE_INCOMPLETE') {throw error;}
-        for (const field of error.details.missing) {
-          check(false, `visualStyle.${field.startsWith('--') ? 'tokens' : 'creativeDirection'}.${field}`, '填写独立设计决策');
-        }
-      }
-    }
   }
   return issues;
 }
@@ -182,7 +122,7 @@ function collectIssues(plan) {
 function validateAuthoring(plan) {
   const issues = collectIssues(plan);
   // A single issue keeps the existing precise error code from the full validator.
-  if (issues.length > 1 || issues.some(issue => issue.path.startsWith('visualStyle.forUser.pageApplications['))) {
+  if (issues.length > 1) {
     throw new CliError(`计划有 ${issues.length} 项待补充：\n${issues.map(issue => `${issue.path}: ${issue.message}`).join('\n')}`, {
       code: 'DESIGN_PLAN_VALIDATION_FAILED', details: { issues },
     });

package/lib/process/create-process.js

@@ -26,70 +26,56 @@ const { buildProcessAndViewJson } = require('./services/process-compiler');
 // ── 参数解析 ─────────────────────────────────────────
 
 function parseArgs(args) {
-  const positional = [];
-  let existingFormUuid = null;
-  let replace = false;
-  const invalid = (argument, reason, extra = {}) => {
-    throw new CliError([t('create_process.invalid_argument', argument), t('create_process.usage'), t('create_process.usage2')].join('\n'), {
-      code: 'CREATE_PROCESS_INVALID_ARGUMENTS', details: { argument, reason, ...extra },
-    });
-  };
   const directArgs = args || [];
-  for (let index = 0; index < directArgs.length; index++) {
-    const value = directArgs[index];
-    if (value === '--replace') {
-      if (replace) {invalid(value, 'duplicate_option');}
-      replace = true;
-    } else if (value === '--formUuid') {
-      if (existingFormUuid !== null) {invalid(value, 'duplicate_option');}
-      const next = directArgs[++index];
-      if (!next?.trim() || next.startsWith('-')) {invalid(value, 'missing_value');}
-      existingFormUuid = next;
-    } else if (value.startsWith('-')) {
-      invalid(value, 'unknown_option', value === '--form-uuid' ? { suggestion: '--formUuid' } : {});
-    } else {
-      positional.push(value);
+  const formUuidIndex = directArgs.indexOf('--formUuid');
+  const replace = directArgs.includes('--replace');
+
+  // 用法 2: <appType> --formUuid <formUuid> <processDefinitionFile>
+  if (formUuidIndex !== -1) {
+    if (formUuidIndex + 2 >= directArgs.length) {
+      warn(t('create_process.usage2'));
+      throw new CliError(t('create_process.usage2'), {
+        code: 'CREATE_PROCESS_INVALID_ARGUMENTS',
+      });
+    }
+    let appType = null;
+    const existingFormUuid = directArgs[formUuidIndex + 1];
+    const processDefFile = directArgs[formUuidIndex + 2];
+
+    for (let i = 0; i < directArgs.length; i++) {
+      if (directArgs[i] !== '--formUuid' && directArgs[i] !== existingFormUuid && directArgs[i] !== processDefFile) {
+        appType = directArgs[i];
+        break;
+      }
     }
+
+    return {
+      appType,
+      formTitle: null,
+      fieldsJsonFile: null,
+      processDefinitionFile: processDefFile,
+      existingFormUuid,
+      replace,
+    };
   }
-  const fields = existingFormUuid === null
-    ? ['appType', 'formTitle', 'fieldsJsonFile', 'processDefinitionFile']
-    : ['appType', 'processDefinitionFile'];
-  if (positional.length > fields.length) {invalid(positional[fields.length], 'unexpected_argument');}
-  for (let index = 0; index < fields.length; index++) {
-    if (!positional[index]?.trim()) {invalid(fields[index], 'missing_value');}
+
+  // 用法 1: <appType> <formTitle> <fieldsJsonFile> <processDefinitionFile>
+  if (directArgs.length < 4) {
+    warn(t('create_process.usage'));
+    throw new CliError(t('create_process.usage'), {
+      code: 'CREATE_PROCESS_INVALID_ARGUMENTS',
+    });
   }
   return {
-    appType: positional[0],
-    formTitle: existingFormUuid === null ? positional[1] : null,
-    fieldsJsonFile: existingFormUuid === null ? positional[2] : null,
-    processDefinitionFile: positional[fields.length - 1],
-    existingFormUuid,
+    appType: directArgs[0],
+    formTitle: directArgs[1],
+    fieldsJsonFile: directArgs[2],
+    processDefinitionFile: directArgs[3],
+    existingFormUuid: null,
     replace,
   };
 }
 
-function quoteCommandArgument(value, shell) {
-  const text = String(value);
-  const safePattern = shell === 'powershell'
-    ? /^[a-zA-Z0-9_./:\\-]+$/
-    : /^[a-zA-Z0-9_./:-]+$/;
-  if (safePattern.test(text)) {
-    return text;
-  }
-  if (shell === 'powershell') {
-    return "'" + text.replace(/'/g, "''") + "'";
-  }
-  return "'" + text.replace(/'/g, "'\"'\"'") + "'";
-}
-
-function buildRetryCommand({ appType, formUuid, processDefinitionFile, replace, platform = process.platform }) {
-  const shell = platform === 'win32' ? 'powershell' : 'posix';
-  return ['openyida', 'create-process', appType, '--formUuid', formUuid,
-    processDefinitionFile, ...(replace ? ['--replace'] : [])]
-    .map(value => quoteCommandArgument(value, shell))
-    .join(' ');
-}
-
 // ── 主流程 ───────────────────────────────────────────
 
 async function run(args) {
@@ -103,8 +89,7 @@ async function run(args) {
   const replace = parsed.replace;
   const stageTracker = createStageTracker();
   let formUuid;
-  // Reuse does not read form metadata; unknown is not an empty form.
-  let fieldCount = null;
+  let fieldCount = 0;
   let processCode = null;
 
   function context(extra) {
@@ -115,13 +100,9 @@ async function run(args) {
     }, extra || {});
   }
 
-  function recoveryRetryCommand() {
-    return buildRetryCommand({
-      appType,
-      formUuid,
-      processDefinitionFile,
-      replace,
-    });
+  function buildRetryCommand() {
+    return 'openyida create-process ' + appType + ' --formUuid ' + formUuid + ' '
+      + path.basename(processDefinitionFile) + (replace ? ' --replace' : '');
   }
 
   function isTerminalSafetyError(error) {
@@ -137,16 +118,7 @@ async function run(args) {
 
   function buildConfigureFailureDetails(configError) {
     const terminalSafetyError = isTerminalSafetyError(configError);
-    const retryCommand = terminalSafetyError ? null : recoveryRetryCommand();
-    const recovery = {
-      action: 'inspect_existing_form',
-      appType,
-      formUuid,
-      processDefinitionFile,
-      doNotCreateNewForm: true,
-      noWriteRetry: terminalSafetyError,
-      instruction: t('create_process.preserve_existing_form'),
-    };
+    const retryCommand = terminalSafetyError ? null : buildRetryCommand();
     const failureContext = { processCode };
     if (retryCommand) {
       failureContext.retryCommand = retryCommand;
@@ -156,7 +128,6 @@ async function run(args) {
       cause: configError,
       nextStep: terminalSafetyError ? terminalSafetyNextStep() : undefined,
     });
-    outerDetails.recovery = recovery;
     const innerDetails = configError && configError.isCliError && configError.details && configError.details.stage
       ? configError.details
       : null;
@@ -289,7 +260,7 @@ async function run(args) {
       }
 
       formUuid = createFormResult.formUuid;
-      fieldCount = createFormResult.fieldCount ?? null;
+      fieldCount = createFormResult.fieldCount || 0;
       warn('  ✅ ' + t('create_process.form_created') + ': ' + formUuid);
       stageTracker.complete('create_form');
     } catch (createError) {
@@ -332,15 +303,14 @@ async function run(args) {
       // 仅对已知、可安全重试的配置失败提供复用表单命令。
       warn('');
       warn('  💡 ' + t('create_process.retry_hint'));
-      warn('     ' + recoveryRetryCommand());
+      warn('     ' + buildRetryCommand());
       warn('');
     }
     const failureOutput = {
       success: false,
       errorCode: configError.code || 'CREATE_PROCESS_CONFIGURE_FAILED',
       formUuid: formUuid,
-      formMode: useExistingForm ? 'reuse' : 'create',
-      formTitle: formTitle,
+      formTitle: formTitle || '(existing form)',
       appType: appType,
       fieldCount: fieldCount,
       error: t('create_process.configure_failed') + ': ' + configError.message,
@@ -348,8 +318,6 @@ async function run(args) {
       completedStages: failureDetails.completedStages,
       nextStep: failureDetails.nextStep,
       configureProcess: failureDetails.configureProcess,
-      recovery: failureDetails.recovery,
-      noWriteRetry: terminalSafetyError,
     };
     if (!terminalSafetyError && failureDetails.context && failureDetails.context.retryCommand) {
       failureOutput.retryCommand = failureDetails.context.retryCommand;
@@ -368,8 +336,7 @@ async function run(args) {
   const finalResult = {
     success: true,
     formUuid: formUuid,
-    formMode: useExistingForm ? 'reuse' : 'create',
-    formTitle: formTitle,
+    formTitle: formTitle || '(existing form)',
     appType: appType,
     fieldCount: fieldCount,
     processCode: processCode,
@@ -394,5 +361,4 @@ async function run(args) {
 module.exports = {
   run,
   parseArgs,
-  buildRetryCommand,
 };

package/lib/samples/openyida-scaffold/canvas-form-drawer.canvas.jsx

@@ -61,11 +61,11 @@ function buildYidaFormUrl(request, currentAppType) {
   return '';
 }
 
-/** 抽屉默认使用内容画布与正文文字，background 可为当前抽屉指定颜色、渐变或 CSS token。 */
+/** 抽屉外壳默认跟随应用主题，background 可为当前抽屉指定颜色、渐变或 CSS token。 */
 function CanvasDrawer({
   open, title, onClose, onOpenInNewWindow, extra, children,
   contentMode = 'content',
-  background = 'var(--pod-shell-theme-bg-color, var(--color-white, #fff))',
+  background = 'var(--pod-shell-theme-bg-color, var(--drawer-bg, var(--color-brand1-1, #f4f6ff)))',
 }) {
   const [fullScreen, setFullScreen] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState(null);
@@ -138,7 +138,7 @@ function CanvasDrawer({
           border: 0;
           border-radius: 8px;
           background: transparent;
-          color: var(--drawer-close-color, var(--pod-page-header-text-color, var(--color-text1-4, #1f2329)));
+          color: var(--drawer-close-color, var(--pod-page-header-text-color, var(--color-text1-3, #666)));
           cursor: pointer;
         }
         .openyida-form-drawer .oy-drawer-action:hover {
@@ -146,7 +146,7 @@ function CanvasDrawer({
           background: var(--drawer-close-bg-hovered, var(--pod-overlay-color-hover, rgba(83, 88, 97, 0.16)));
         }
         .openyida-form-drawer .oy-drawer-action:focus-visible {
-          outline: 2px solid var(--color-brand1-6);
+          outline: 2px solid var(--color-brand1-6, #1677ff);
           outline-offset: 2px;
         }
         .openyida-form-drawer .oy-drawer-frame {
@@ -159,7 +159,7 @@ function CanvasDrawer({
           height: 100%;
           min-height: 0;
           overflow: auto;
-          background: transparent;
+          background: var(--pod-card-bg-color, var(--drawer-bg, var(--color-white, #fff)));
           border-radius: var(--pod-card-border-radius, 20px);
         }
         .openyida-form-drawer .oy-drawer-resize {
@@ -215,7 +215,7 @@ function CanvasDrawer({
           },
           content: {
             background,
-            color: 'var(--drawer-content-color, var(--pod-page-header-text-color, var(--color-text1-4, #1f2329)))',
+            color: 'var(--drawer-content-color, var(--color-text1-4, #1f2329))',
             borderLeft: 'var(--drawer-border-width, 0px) var(--drawer-border-style, solid) var(--drawer-border-color, transparent)',
             borderRadius: fullScreen ? 0 : 'var(--pod-drawer-border-radius, var(--pod-drawer-radius, var(--drawer-corner, 20px))) 0 0 var(--pod-drawer-border-radius, var(--pod-drawer-radius, var(--drawer-corner, 20px)))',
             overflow: 'hidden',
@@ -233,7 +233,6 @@ function CanvasDrawer({
             borderBottom: 'var(--drawer-title-border-width, 0px) solid var(--drawer-title-border-color, var(--drawer-border-color, transparent))',
           },
           body: {
-            background: 'transparent',
             display: 'flex', flexDirection: 'column', flex: '1 1 0',
             padding: contentMode === 'iframe' ? 0 : '0 8px 8px',
             minHeight: 0, overflow: 'hidden',
@@ -382,9 +381,85 @@ function normalizeRows(rows) {
   }));
 }
 
-/* @canvas-application-theme */
+// @openyida-canvas-theme:start
+// Standalone samples keep this fragment identical; see canvas-theme.test.js.
+function readCanvasTheme(root, fallback) {
+  const roles = {
+    colorPrimary: '--color-brand1-6', colorLink: '--color-brand1-6',
+    colorPrimaryHover: '--color-brand1-5', colorPrimaryActive: '--color-brand1-9',
+    colorBgLayout: ['--pod-page-bg-color', '--color-white'],
+    colorBgContainer: ['--pod-card-bg-color', '--color-white'],
+    colorBgElevated: ['--pod-card-bg-color', '--color-white'], colorText: '--color-text1-4',
+    colorTextHeading: '--color-text1-4', colorTextSecondary: '--color-text1-3',
+    colorTextDescription: '--color-text1-3', colorTextPlaceholder: '--color-text1-10',
+    colorBorder: '--color-line1-2', colorBorderSecondary: '--color-line1-1',
+    colorFillAlter: '--color-fill1-1', colorFillSecondary: '--color-fill1-2',
+  };
+  const token = { ...fallback };
+  if (!root) return token;
+  const doc = root.ownerDocument;
+  const view = doc.defaultView;
+  const scope = view.getComputedStyle(root);
+  const probe = doc.createElement('span');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
+  root.appendChild(probe);
+  try {
+    Object.keys(roles).forEach((role) => {
+      const names = Array.isArray(roles[role]) ? roles[role] : [roles[role]];
+      const value = names.map((name) => scope.getPropertyValue(name).trim()).find(Boolean) || '';
+      if (!value || !view.CSS.supports('color', value)) return;
+      probe.style.color = value;
+      const color = view.getComputedStyle(probe).color;
+      if (color) token[role] = color;
+    });
+  } finally {
+    probe.remove();
+  }
+  return token;
+}
 
-function PageContent(props) {
+function useCanvasTheme(fallback) {
+  const rootRef = React.useRef(null);
+  const fallbackRef = React.useRef(fallback);
+  const [token, setToken] = React.useState(fallback);
+  React.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+    const doc = root.ownerDocument;
+    const view = doc.defaultView;
+    let frame;
+    const refresh = () => {
+      const next = readCanvasTheme(root, fallbackRef.current);
+      setToken((previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+    };
+    const schedule = () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(refresh);
+    };
+    refresh();
+    // Observe only theme-bearing ancestors and stylesheet changes, not business DOM.
+    const observer = new view.MutationObserver(schedule);
+    for (let node = root; node; node = node.parentElement) {
+      observer.observe(node, { attributes: true });
+    }
+    if (doc.head) observer.observe(doc.head, { subtree: true, childList: true, characterData: true, attributes: true });
+    doc.addEventListener('load', schedule, true);
+    view.addEventListener('resize', schedule);
+    view.addEventListener('openyida:theme-change', schedule);
+    return () => {
+      observer.disconnect();
+      view.cancelAnimationFrame(frame);
+      doc.removeEventListener('load', schedule, true);
+      view.removeEventListener('resize', schedule);
+      view.removeEventListener('openyida:theme-change', schedule);
+    };
+  }, []);
+  return { rootRef, token };
+}
+// @openyida-canvas-theme:end
+
+function YidaComp(props) {
+  const { rootRef, token } = useCanvasTheme({ colorPrimary: "#1677ff", borderRadius: 9 });
   const rawAppType = props && props.appType ? props.appType : RAW_APP_TYPE;
   const rawFormUuid = props && props.formUuid ? props.formUuid : RAW_FORM_UUID;
   const appType = resolveConfigValue(rawAppType, 'APP_XXX');
@@ -477,7 +552,10 @@ function PageContent(props) {
   ];
 
   return (
-    <>
+    <ConfigProvider
+      theme={{ token }}
+      getPopupContainer={(triggerNode) => (triggerNode && triggerNode.parentElement) || document.body}
+    >
       <style>{`
         .oys-page {
           display: flow-root;
@@ -542,7 +620,7 @@ function PageContent(props) {
         }
       `}</style>
 
-      <div className="oys-page">
+      <div ref={rootRef} className="oys-page">
         <div className="oys-shell">
           <div className="oys-header">
             <div>
@@ -607,15 +685,7 @@ function PageContent(props) {
           {formOpenContainer}
         </div>
       </div>
-    </>
-  );
-}
-
-function YidaComp(props) {
-  return (
-    <CanvasThemeProvider getPopupContainer={(triggerNode) => (triggerNode && triggerNode.parentElement) || document.body}>
-      <PageContent {...props} />
-    </CanvasThemeProvider>
+    </ConfigProvider>
   );
 }