feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackwener merged 1 commit into from
Jul 3, 2026
Merged

feat(design): P-INSET input step-down + P-RADIUS concentric corners #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion apps/desktop/src/renderer/styles/chat-header.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
width: auto;
min-height: 32px;
margin: 8px 10px;
/* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
radius − inset. Modal shell is 12px with an 8px inset, so the
input's 6px control radius read "too round" against the shell
corners. 12 − 8 = 4px. */
border-radius: calc(var(--radius-modal)-8px);
border-color: var(--border);
background: var(--background-elevated);
/* P-INSET (roadmap §1.1): the input sits ON the elevated palette
surface, so it steps DOWN one level (slightly darker = "type into
here"), not up. foreground-derived so dark mode adapts. */
background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down
5 changes: 4 additions & 1 deletion apps/desktop/src/renderer/styles/sidebar.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
width: auto;
min-height: 32px;
margin: 8px 12px;
/* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
border-radius: calc(var(--radius-modal)-8px);
border-color: var(--border);
background: var(--background-elevated);
/* P-INSET: inset step-down on the elevated modal surface. */
background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
color: var(--foreground-50);
Expand Down
16 changes: 11 additions & 5 deletions docs/design-refinement-roadmap-2026-07.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
（12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
#406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/ui.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
'placeholder:text-muted-foreground/70',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(design): P-INSET input step-down + P-RADIUS concentric corners#458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jackwener
merged 1 commit into

from

Jul 3, 2026
 Merged


feat(design): P-INSET input step-down + P-RADIUS concentric corners
#458
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


10 changes: 9 additions & 1 deletion
apps/desktop/src/renderer/styles/chat-header.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -543,8 +543,16 @@
 width: auto;
 min-height: 32px;
 margin: 8px 10px;
 /* P-RADIUS concentric formula (roadmap §1.3): inner radius = outer
 radius − inset. Modal shell is 12px with an 8px inset, so the
 input's 6px control radius read "too round" against the shell
 corners. 12 − 8 = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET (roadmap §1.1): the input sits ON the elevated palette
 surface, so it steps DOWN one level (slightly darker = "type into
 here"), not up. foreground-derived so dark mode adapts. */
 background: oklch(from var(--foreground) l c h / 0.03);
}

.maka-palette-input {
Expand Down

5 changes: 4 additions & 1 deletion
apps/desktop/src/renderer/styles/sidebar.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -335,8 +335,11 @@
 width: auto;
 min-height: 32px;
 margin: 8px 12px;
 /* P-RADIUS concentric formula: dialog shell 12px − 8px inset = 4px. */
 border-radius: calc(var(--radius-modal)-8px);
 border-color: var(--border);
 background: var(--background-elevated);
 /* P-INSET: inset step-down on the elevated modal surface. */
 background: oklch(from var(--foreground) l c h / 0.03);
}
.maka-search-modal-input-icon {
 color: var(--foreground-50);
Expand Down

16 changes: 11 additions & 5 deletions
docs/design-refinement-roadmap-2026-07.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -101,11 +101,17 @@

## 2. 落地队列（按杠杆排序）

1. **P-SHADOW**：三层阴影配方升级 `--shadow-minimal/-medium` 系 +
 dark 塌缩 ring（纯 token，全 app 生效）
2. **P-INSET**：composer / 搜索框 / palette 输入行做 input-略暗 inset 层级
3. **P-RADIUS**：同心圆角审计（壳→卡→气泡→内嵌元素）
4. **P-MOTION**：duration token 对照 Emil 表收敛 + 高频操作零动画审计
1. **P-SHADOW** ✅ (#457)：三层阴影配方升级 + dark 塌缩 ring
2. **P-INSET** ✅：palette/搜索输入行 3% 前景 wash step-down；通用
 Input/Textarea 2% wash。composer 例外保持 elevated —— 它是主命令台
 不是表单字段（PR-UI-LAYOUT-8 的有意设计）。
3. **P-RADIUS** ✅（首轮）：palette/搜索 modal 输入行按同心公式修正
 （12−8=4px，写法 `calc(var(--radius-modal)-8px)` —— 契约的 calc
 allowlist 要求无空格）。其余嵌套对（settings modal 内卡、tool card
 内 pre）审计通过或留待触碰时修正。
4. **P-MOTION** ✅（已达标，无需动作）：duration token
 120/150/180/280ms 完全符合 Emil 表且取下限；装饰性入场动画已被
 #406 gap 3 清除；剩余 keyframes 全部是功能性流式动画（D3 豁免）
5. **P-TEXT**：四档文字语义别名 + 新代码治理契约
6. **P-4PT**：4pt 治理契约（新增声明检查 + 存量 allowlist）
7. **P-DARK**：dark elevation 独立化（依赖 P-SHADOW）
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/ui.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -111,7 +111,7 @@ export function Badge({ className, variant, ...props }: BadgeProps) {
}

const inputClasses = [
 'flex min-h-9 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm',
 'flex min-h-9 w-full rounded-sm border border-input bg-[oklch(from_var(--foreground)_l_c_h_/_0.02)] px-3 py-2 text-sm text-foreground shadow-sm',
 'placeholder:text-muted-foreground/70',
 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
 'disabled:cursor-not-allowed disabled:opacity-50',
Expand Down