diff --git a/src/client/builtins/tab-icons.module.css b/src/client/builtins/tab-icons.module.css
index 0655970..b423373 100644
--- a/src/client/builtins/tab-icons.module.css
+++ b/src/client/builtins/tab-icons.module.css
@@ -29,8 +29,8 @@
}
.terminal {
- /* The shell chip is ink, not accent — and it is the widest glyph in the set,
- so it renders a step smaller than its siblings (see tab-icons.tsx). */
+ /* The shell chip is ink, not accent. Its glyph is the widest in the set and
+ renders a step smaller than its siblings (see tab-icons.tsx). */
color: var(--dsw-alias-label-primary);
}
diff --git a/src/client/builtins/tab-icons.tsx b/src/client/builtins/tab-icons.tsx
index e0d389a..e22d772 100644
--- a/src/client/builtins/tab-icons.tsx
+++ b/src/client/builtins/tab-icons.tsx
@@ -14,7 +14,7 @@
* `files` is the one exception in kind rather than in color: it renders DSH's
* own folder artwork (`FileTypeIcon`), matching the file rows this tab shows.
*/
-import { cloneElement, type ReactElement, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
import { FileTypeIcon } from '@deepseek-ai/dsh-client-ui-primitives'
import styles from './tab-icons.module.css'
import {
@@ -35,35 +35,6 @@ function themed(className: string, glyph: ReactNode): ReactNode {
return {glyph}
}
-/**
- * Give a filled VSCodicon a hairline of its own ink.
- *
- * The plugin's hand-drawn icons are 1.5px strokes on a 16px grid; the
- * VSCodicon set is filled at that size, and next to the plugin's own chrome a
- * bare fill reads heavy and slightly out of place — most visibly on the
- * terminal chip. A `currentColor` stroke in the SVG's own user units keeps the
- * host's shape and the token's color while lending it the same drawn weight,
- * and `paint-order: stroke` centres that hairline on the fill's edge instead
- * of fattening it.
- * @param icon - the glyph element to outline.
- * @returns the same glyph with its outline applied.
- */
-function outlined(icon: ReactElement): ReactElement {
- return cloneElement(icon as ReactElement<{ style?: React.CSSProperties }>, {
- style: {
- // `non-scaling-stroke` keeps the hairline one device pixel whatever the
- // glyph's own grid is (the sets mix 16- and 24-unit viewBoxes and the
- // strip renders at 14px), and `paint-order: stroke` centres it on the
- // fill's edge instead of fattening the shape.
- stroke: 'currentColor',
- strokeWidth: 1,
- strokeLinejoin: 'round',
- paintOrder: 'stroke',
- vectorEffect: 'non-scaling-stroke',
- },
- })
-}
-
/** The Files tab: the host's folder artwork, like the rows it opens. */
export const filesTabIcon: TabIcon = (size) => (
@@ -73,7 +44,7 @@ export const filesTabIcon: TabIcon = (size) => (
/** Changes / diff: the commit glyph, green like the diff affordances. */
export const changesTabIcon: TabIcon = (size) =>
- themed(css.changes, outlined())
+ themed(css.changes, )
/**
* Tasks (subagents and background jobs) — the live-activity amber. The glyph
@@ -81,20 +52,20 @@ export const changesTabIcon: TabIcon = (size) =>
* sessions plus the host's background jobs), not a to-do list.
*/
export const tasksTabIcon: TabIcon = (size) =>
- themed(css.tasks, outlined())
+ themed(css.tasks, )
/** Side chat — the conversational/secondary accent. */
export const sidechatTabIcon: TabIcon = (size) =>
- themed(css.sidechat, outlined())
+ themed(css.sidechat, )
/**
- * Terminal — primary ink, the shell is text. Drawn one step down from the
- * strip's 14px and with the outline above: the VSCodicon terminal is a wide
- * filled rectangle that dominated the chip at full size.
+ * Terminal — primary ink, the shell is text. Rendered one step down from the
+ * strip's 14px: the VSCodicon terminal is a wide filled rectangle and read
+ * heavier than its neighbours at full size.
*/
export const terminalTabIcon: TabIcon = (size) =>
- themed(css.terminal, outlined())
+ themed(css.terminal, )
/** Browser — the same secondary accent as the side chat's sibling surfaces. */
export const browserTabIcon: TabIcon = (size) =>
- themed(css.browser, outlined())
+ themed(css.browser, )
diff --git a/tests/builtins.spec.ts b/tests/builtins.spec.ts
index fab73dc..1a26e51 100644
--- a/tests/builtins.spec.ts
+++ b/tests/builtins.spec.ts
@@ -257,15 +257,14 @@ describe('built-in tab registrations', () => {
expect(glyphOf('git')).toBe(VscGitCommit)
expect(glyphOf('sidechat')).toBe(VscCommentDiscussion)
expect(glyphOf('browser')).toBe(VscGlobe)
- // The terminal glyph is the widest in the set: it renders a step down from
- // the strip's size and keeps a hairline outline so it matches the plugin's
- // own drawn chrome instead of reading as a heavy filled block.
+ // The terminal glyph is the widest in the set, so it renders a step down
+ // from the strip's size. No outline: the glyphs stay exactly as the icon
+ // set draws them, only tinted through the wrapper's token.
const wrapper = iconOf('terminal') as ReactElement<{ children?: ReactElement }>
const terminal = wrapper.props.children as ReactElement<{ size?: number; style?: Record }>
expect(terminal.type).toBe(VscTerminal)
expect(terminal.props.size).toBeLessThan(14)
- expect(terminal.props.style?.strokeWidth).toBe(1)
- expect(terminal.props.style?.vectorEffect).toBe('non-scaling-stroke')
+ expect(terminal.props.style).toBeUndefined()
})
})