Repository navigation
fix: scope preview overrides to our preview, fix dark-mode contrast - #249
Merged
Merged
Conversation
- Scope every #slack_blocks_to_jsx override to :where(.styles_enabled), the root our previews render. Hosts render the library unstyled under the same id, and this stylesheet stays loaded for the SPA session, so the overrides were repainting the host's own message bodies. - Dark preview: lighten user/channel/user-group mentions to 5.08:1 (upstream reads 4.01:1 on its own tint). - Inline code red is light-only: it read 2.63:1 on the dark preview. Also covers rich-text inline code, which still read 4.31:1 in light. Refs ENG-6391 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
Cloudflare preview✅ Deployed |
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
block-kitchen | 1562786 | Commit Preview URL Branch Preview URL |
Oct 17 2026, 06:10 PM |
StephenTangCook
approved these changes
Oct 19, 2026
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
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
Scopes every preview override to
#slack_blocks_to_jsx:where(.styles_enabled), our own preview root, and fixes two dark-preview contrast failures.Why
#slack_blocks_to_jsx. Hosts also render slack-blocks-to-jsx unstyled under that id (Studio's message bodies), and this stylesheet stays loaded for the SPA session after one Message Blaster visit. So block-kitchen's inline-code red and link underline repainted those bodies too: inline code read 3.4:1 in Studio dark.:where()keeps every rule's specificity unchanged.rgb(29 155 209)on its own 20% tint reads 4.01:1 on the#1a1d21canvas. Lightened to#4aafda(same hue), 5.08:1.#c4144bfix applied in both themes and read 2.63:1 on the dark canvas. It's light-only now, so upstream's dark code colors apply (6.3–10.3:1). It also covers rich-text inline code (.slack_inline_code), which still read 4.31:1 in light.Context: ENG-6391, TightknitAI/tightknit-app#7519 (merged). Land TightknitAI/tightknit-app#7563 before bumping this package in tightknit-app: without it, the library's own inline-code red shows through in Studio once this scoping lands.
Test plan
pnpm typecheckpnpm lintpnpm test: 61/62 files, 731/735 tests pass, Storybook project included. The 4 failures are main's newrich-text-inputtests, which needslack-block-kit-validator@0.1.20. My machine's package-age guard blocks that version for now, so it ran on 0.1.19. The same reason kept the local pre-push hook from passing; CI installs 0.1.20.test/preview-theme-contrast.test.tsx, on the built stylesheet in Chromium. It checks AA (4.5:1) for mentions, inline code and links in both preview themes. It also checks that an unstyled host root sharing the id computes the same as with upstream's stylesheet alone. All 4 cases fail onmainand pass here.🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmith-botwith what you need.