fix(web): keep transparent images readable over a checkerboard canvas - #2022
Merged
Conversation
White-on-transparent images disappeared on light surfaces and black-on-transparent ones on dark surfaces (markdown inline images, tool result media, and the file preview's large view). Add a shared --media-alpha-canvas token — a checkerboard of two mid-gray squares mixed from --color-bg/--color-text, each >=3:1 against both white and black — and paint it directly on <img> so opaque images stay pixel-identical and only transparent pixels reveal the canvas. Also let check-style's no-gradient-text skip custom-property definitions (a token is never rendered text), and register the new tokens in the design system view.
🦋 Changeset detectedLatest commit: 3b0e934 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--media-alpha-canvascheckerboard token (two mid-gray squares color-mixed from--color-bg/--color-text, each ≥3:1 against both white and black; 16px period) and paint it directly on the<img>elements on those paths. Opaque images fully cover the canvas, so their rendering is unchanged; only transparent pixels reveal it.Details
apps/kimi-web/src/style.css: new--color-media-alpha-bg-1/-2+--media-alpha-canvastokenscomponents/chat/Markdown.vue: canvas behind.markdown-renderer imgcomponents/chat/tool-calls/MediaTool.vue,components/FilePreview.vue: canvas behind.media-image/.fp-imageviews/DesignSystemView.vue: register the new tokensscripts/check-style.mjs:no-gradient-textnow skips custom-property definitions (a token is never rendered text — same convention asno-hardcoded-font)Test plan
node apps/kimi-web/scripts/check-style.mjs— baseline unchanged (29 findings, none in the changed files)