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() }) })