Enhance compatibility for dark mode theming in interactive-surface-css#13
Merged
Conversation
This PR applies compatibility revisions so interactive-surface-css integrates cleanly with ui-style-kit-css theme containers and mode-based theming. ## Why Integration usage exposed a gap where dark icon-role selectors responded to data-theme but not data-mode containers used by ui-style-kit-css. This could cause inconsistent icon-role colors in dark and contrast mode contexts. ## What Changed - Added integration guidance in README for ui-style-kit-css usage patterns, including when to import the bridge from ui-style-kit-css. - Updated Unreleased changelog notes to document the integration and selector compatibility improvements. - Expanded icon-role dark selector prefixes in interactive-surface.css to include: - [data-mode="dark"] - [data-mode="contrast"] - Removed an unsupported forced-color-adjust declaration in forced-colors styles to clear compatibility warnings. ## Validation - Ran npm run lint:css - Performed visual sanity check in index.html demo - Verified all icon-role dark selector entries now include data-mode dark and data-mode contrast targeting ## Type of Change - [ ] Fix - [x] Feature - [ ] Refactor - [x] Docs - [x] Chore ## Risk Low. Changes are scoped to documentation and selector matching expansion for dark/contrast mode containers, with no API surface changes. ## Rollback Revert this PR to restore previous dark selector behavior and docs wording. ## Checklist - [x] Public compatibility behavior documented - [x] No unrelated file churn - [x] Compatibility warnings addressed
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves dark/contrast mode theming compatibility for interactive-surface-css when used inside ui-style-kit-css theme containers by expanding icon-role dark selectors to recognize data-mode containers, and updates docs/changelog accordingly.
Changes:
- Documented recommended integration patterns for
ui-style-kit-cssusage inREADME.md. - Expanded icon-role dark-mode selector prefixes in
interactive-surface.cssto include[data-mode="dark"]and[data-mode="contrast"]. - Removed
forced-color-adjustfrom forced-colors styles to avoid compatibility warnings, and updatedCHANGELOG.mdUnreleased notes.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| README.md | Adds integration guidance for using this package alongside ui-style-kit-css (including bridge usage). |
| interactive-surface.css | Broadens dark/contrast container matching for icon-role colors; removes forced-color-adjust in forced-colors styles. |
| CHANGELOG.md | Updates Unreleased notes to reflect the compatibility-focused docs and selector changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+13
to
+15
| ### Changed | ||
|
|
||
| - Expanded dark theme icon-role selectors to also match `data-mode="dark"` and `data-mode="contrast"` containers for broader cross-library theming compatibility. |
Comment on lines
+269
to
288
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .light-icon, | ||
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) | ||
| .interactive-surface.icon-only | ||
| [data-icon-role="light"] { | ||
| color: var(--interactive-surface-light-icon-color-dark, var(--icon-light-dark, rgb(255 255 255))); | ||
| } | ||
|
|
||
| :where([data-theme="dark"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .dark-icon, | ||
| :where([data-theme="dark"], .theme-dark, .dark-mode, .dark) | ||
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .dark-icon, | ||
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) | ||
| .interactive-surface.icon-only | ||
| [data-icon-role="dark"] { | ||
| color: var(--interactive-surface-dark-icon-color-dark, var(--icon-dark-dark, rgb(30 58 138))); | ||
| } | ||
|
|
||
| :where([data-theme="dark"], .theme-dark, .dark-mode, .dark) | ||
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) | ||
| .interactive-surface.icon-only | ||
| .accessibility-icon, | ||
| :where([data-theme="dark"], .theme-dark, .dark-mode, .dark) | ||
| :where([data-theme="dark"], [data-mode="dark"], [data-mode="contrast"], .theme-dark, .dark-mode, .dark) | ||
| .interactive-surface.icon-only | ||
| [data-icon-role="accessibility"] { |
Comment on lines
+134
to
+138
| test("data-mode dark and contrast containers apply dark icon-role colors without changing baseline colors", async ({ | ||
| page | ||
| }) => { | ||
| const getColor = async (selector: string) => | ||
| page.locator(selector).evaluate((el) => window.getComputedStyle(el).color); |
Contributor
There was a problem hiding this comment.
Fixed in 70a1d3f. Added await page.emulateMedia({ colorScheme: "light" }) + await page.setContent(html) at the start of the test, following the same pattern as the existing reduced-motion test. Baseline color assertions are now deterministic regardless of the host OS color scheme.
…n-color assertions
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
This PR applies compatibility revisions so interactive-surface-css integrates cleanly with ui-style-kit-css theme containers and mode-based theming.
Scope
Validation
List commands you ran and results.
npm run lint:css npm test npm run pack:dryAPI and Behavior Impact
Documentation
Notes
forced-color-adjust.[data-mode="dark"]and[data-mode="contrast"].forced-color-adjustdeclaration in forced-colors styles to clear compatibility warnings.data-mode="dark"anddata-mode="contrast"icon-role color behavior.colorScheme: "light"emulation before asserting baseline colors, preventing flakiness on dark-scheme CI runners.