Widget: theme.tokens to set any color or size token, and the full token table in the docs
維護者通常 1 天內回覆
@Sreehita-here 已經在處理了。
開始於 2026年10月30日。
評估
這個 Issue 還沒有評估資料。
描述
F-05 task 10. theme has options for the accent, the text and background colors, the font and the radius (packages/widget/src/theme.ts:3-17). Everything else, such as the border color, the secondary text, the panel size or the launcher size, can only be changed from the page's CSS (the "CSS Override" section in website/src/content/docs/widget/theming.mdx:66). Sites that configure the widget from JavaScript, or with update(), can't reach them.
What to do
- Add
tokens?: WidgetTokenstoThemeConfig, whereWidgetTokensis an object of token names without the--cc-prefix:{ border: '#d0d4da', 'panel-width': '440px' }. The names are the ones defined inpackages/widget/src/styles/launcher.css:8-28(accent,accent-hover,on-accent,text,text-secondary,bg,bg-surface,bg-input,border,danger,shadow,font,radius,fab-size,panel-width,panel-height,focus-ring, and so on). Type it as a union, so a typo is a type error, and export the type. - In
applyTheme()(theme.ts:21), set each one withhost.style.setProperty('--cc-' + name, value), after the existing options, sotokenswins overaccentorbgColor. Ignore names that aren't tokens, and empty values. - Tokens apply in every mode. Say so in the docs, and show the page CSS for one mode only (the host has
data-cc-modewhenmodeislightordark). update({ theme: { tokens } })should work like the other theme options (widget.ts:538-548).- The docs half: a table in
theming.mdxlisting every token, what it colors, and its light and dark defaults (fromlauncher.css). Addtokensto theThemeConfigblock there and in the widget README.
Size
theme.ts is in the loader, which is at 4.62 of 5 kB, so keep the code small: a loop over the object and a check of the name is enough.
Acceptance criteria
- Unit tests: tokens are set on the host,
tokenswins overaccentandbgColor, unknown names and empty values are ignored, andupdate()changes them - A type test (
*.test-d.ts) showing a misspelled token name is an error - The token table and the
tokensoption documented, withpnpm docs:checkpassing - A minor changeset for
@chatcops/widget;pnpm test:coverage,pnpm lint,pnpm api(commit the snapshot change) andpnpm sizepass
Comment here to be assigned.
- 主要語言
- TypeScript
- 星號
- 13
- 分支
- 7
- 平均合併
- 3 小時 28 分鐘
- 30 天內合併 PR
- 296
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
codercops/chatcops 的其他 Issue
-
Core README lists old default models可能已有人在做 @prakashNalla 今天認領。 未關閉
難度 1/5 1 小時以內 新手友好度 90/100
codercops/chatcops#503 · 1 則留言 ·
維護者通常 1 天內回覆
-
Widget: a header menu with New conversation, Download transcript and a privacy link可能已有人在做 @anurag2787 今天認領。 未關閉hacktoberfest
codercops/chatcops#496 · 4 則留言 · 已指派 1 人 ·
維護者通常 1 天內回覆
-
Widget: keep a message sent while offline, and send it when the connection is back可能已有人在做 @Saifjafri212213 今天認領。 未關閉hacktoberfest
codercops/chatcops#495 · 3 則留言 · 已指派 1 人 ·
維護者通常 1 天內回覆
-
Widget: copy a completed assistant reply可能已有人在做 @piyusshhjangid 今天認領。 未關閉hacktoberfest
codercops/chatcops#477 · 2 則留言 · 已指派 1 人 ·
維護者通常 1 天內回覆
-
Server: validate `rateLimit.windowMs` before creating the limiter可能已有人在做 @ashutoshpalhare 於 1 天前認領。 未關閉
codercops/chatcops#452 · 1 則留言 · 已指派 1 人 ·
維護者通常 1 天內回覆
查看 codercops/chatcops 的全部 Issue
相似的 Issue
-
Replace discontinued crypto-js in the theme可能已有人在做 @aelmanaa 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 85/100
PaloAltoNetworks/docusaurus-openapi-docs#1689 ·
維護者通常 2 天內回覆
-
難度 2/5 1-3 小時 新手友好度 70/100
solana-foundation/solana-web3.js#4015 · 1 則留言 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 85/100
維護者通常 1 天內回覆
-
documentation
難度 1/5 1-3 小時 新手友好度 90/100
ivopogace/opencode-courier#422 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 68/100
chapel-lang/chapel-vscode#158 ·
維護者通常 1 天內回覆