feat(design): P-INSET input step-down + P-RADIUS concentric corners by jackwener · Pull Request #458 · apache/maka

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.

jackwener · 2026-07-03T07:28:47Z

Roadmap queue items 2–4 (docs/design-refinement-roadmap-2026-07.md).

P-INSET — input 略暗层级（interface-design：inset 隐喻）

palette / 搜索 modal 输入行：从 --background-elevated降为 3% 前景 wash —— 它们坐在 elevated 弹层上，elevated-on-elevated 等于没有层级
通用 Input/Textarea（共享 inputClasses）：bg-background → 2% 前景 wash，前景派生 dark 自适应
composer 有意不改：它是主命令台不是表单字段，浮起是 PR-UI-LAYOUT-8 的有意设计

P-RADIUS — 同心圆角首轮（内 = 外 − inset）

palette/搜索 modal 是 12px 壳 + 8px inset，输入行 6px 圆角相对壳角「过圆」→ calc(var(--radius-modal)-8px) = 4px
发现并绕过契约实现细节：radius contract 的 calc allowlist 按空白切分值 → 必须无空格写法

P-MOTION — 审计通过，零代码

duration token（120/150/180/280ms）已完全符合 Emil 分级表且取下限；装饰性入场动画已被 #406 gap 3 清除；剩余 keyframes 全部是功能性流式指示（D3 豁免）。

验证

settings-bots fixture 截图（表单 input wash）
npm --workspace @maka/desktop test: 1685/1685

Queue items 2-4 of docs/design-refinement-roadmap-2026-07.md. P-INSET (interface-design "inputs sit slightly darker = type into here"): - palette input row + search-modal input row stepped DOWN from background-elevated to a 3% foreground wash - they sit ON an elevated modal surface, so elevated-on-elevated read as no hierarchy at all. - generic Input/Textarea (shared inputClasses): bg-background -> 2% foreground wash. Foreground-derived, so dark mode adapts free. - composer deliberately NOT changed: it is the command deck, not a form field - its elevated lift is the intended reading (PR-UI-LAYOUT-8). P-RADIUS (concentric formula: inner = outer - inset): - palette modal and search dialog are 12px shells with 8px insets; the input rows' 6px control radius read "too round" against the shell corners. Now calc(var(--radius-modal)-8px) = 4px. NOTE: the radius contract's calc allowlist splits values on whitespace, so the no-space form is required. P-MOTION audited as already-compliant (no code): duration tokens 120/150/180/280ms match the Emil table at the low end, decorative entrance animations were already removed by #406 gap 3, remaining keyframes are functional streaming indicators (D3 exemption). Roadmap statuses updated. Desktop suite 1685/1685.

…TE) (#460) All eight queue items resolved across #457/#458/#459: four landed as code (shadow recipes + dark collapse, input inset step-down, concentric radii, 4pt ratchet + text tier cleanup) and four audited as already-compliant or covered (motion durations, dark semantics, state coverage). Records next-round candidates.