From 7c359c28b21afbf36226a31b4db53e7431483bd5 Mon Sep 17 00:00:00 2001 From: Foscat Date: Sun, 31 May 2026 18:14:44 -0500 Subject: [PATCH 1/3] ## Summary 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 --- CHANGELOG.md | 14 ++++++++++++++ README.md | 21 +++++++++++++++++++++ interactive-surface.css | 13 ++++++------- 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8e6924..8ed010c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,25 +1,39 @@ + + # Changelog All notable changes to this package are documented in this file. ## Unreleased +### Added + +- Added integration docs for using this package with `ui-style-kit-css` and its `interactive-surface-bridge` export. + +### Changed + +- Expanded dark theme icon-role selectors to also match `data-mode="dark"` and `data-mode="contrast"` containers for broader cross-library theming compatibility. + ## 1.1.5 - 2026-05-18 ### Changed + - Republished the release under `1.1.5` after npm rejected the already-published `1.1.4` version. ## 1.1.4 - 2026-05-18 ### Fixed + - Corrected reduced-motion behavior so hover/focus/active lift transforms are fully disabled when `prefers-reduced-motion: reduce` is active. ### Changed + - Bumped package release metadata and docs references to `1.1.4` after the previous publish attempt issues. ## 1.1.3 - 2026-05-17 ### Changed + - Superseded the failed `1.1.2` release with `1.1.3`. - Updated version references across package metadata and release docs to `1.1.3`. - Aligned package metadata with the published `1.1.3` release. diff --git a/README.md b/README.md index 7866950..745fdcf 100644 --- a/README.md +++ b/README.md @@ -156,6 +156,27 @@ Preferred token namespace: The package also supports legacy fallback tokens and semantic fallback tokens. Full details and examples are in [Token Reference](./wiki/Token-Reference.md). +## Integration with UI Style Kit CSS + +`interactive-surface-css` works directly with `ui-style-kit-css`. + +If you use the combined UI Style Kit build, no extra bridge import is needed: + +```js +import "ui-style-kit-css/dist/ui-style-kit.css"; +import "interactive-surface-css/interactive-surface.css"; +``` + +If you use per-style UI Style Kit imports, also include the bridge: + +```js +import "ui-style-kit-css/styles/minimal-saas.css"; +import "ui-style-kit-css/interactive-surface-bridge"; +import "interactive-surface-css/interactive-surface.css"; +``` + +The bridge maps active `data-ui`, `data-theme`, and `data-mode` tokens to Interactive Surface tokens, including variant and icon-role hooks. + ## Accessibility Built-in support includes: diff --git a/interactive-surface.css b/interactive-surface.css index 4cf5bdb..04ad4ee 100644 --- a/interactive-surface.css +++ b/interactive-surface.css @@ -266,24 +266,24 @@ } } -:where([data-theme="dark"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .light-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 .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"] { color: var( @@ -473,7 +473,6 @@ @media (forced-colors: active) { .interactive-surface { - forced-color-adjust: auto; background-color: ButtonFace; color: ButtonText; border-color: ButtonText; From 63364ca6fb8f3af6195a09a0b4b23193940b9d2c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 31 May 2026 23:57:30 +0000 Subject: [PATCH 2/3] test: cover data-mode icon-role compatibility --- CHANGELOG.md | 1 + tests/interactive-surface.spec.ts | 39 ++++++++++++++++++++++++++++++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ed010c..a174f7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ All notable changes to this package are documented in this file. ### Changed - Expanded dark theme icon-role selectors to also match `data-mode="dark"` and `data-mode="contrast"` containers for broader cross-library theming compatibility. +- Removed `forced-color-adjust` from forced-colors styles to improve compatibility and avoid consumer integration warnings. ## 1.1.5 - 2026-05-18 diff --git a/tests/interactive-surface.spec.ts b/tests/interactive-surface.spec.ts index 78d60fc..659a830 100644 --- a/tests/interactive-surface.spec.ts +++ b/tests/interactive-surface.spec.ts @@ -32,7 +32,25 @@ const html = ` - + +
+ +
+
+ +
`; @@ -112,4 +130,23 @@ test.describe("interactive surface package behavior", () => { expect(iconStyles.minWidth).toBe("44px"); expect(iconStyles.minHeight).toBe("44px"); }); + + 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); + + expect(await getColor("#icon-light-default")).toBe("rgb(212, 175, 55)"); + expect(await getColor("#icon-dark-default")).toBe("rgb(0, 0, 0)"); + expect(await getColor("#icon-accessibility-default")).toBe("rgb(59, 130, 246)"); + + expect(await getColor("#icon-light-dark-mode")).toBe("rgb(255, 255, 255)"); + expect(await getColor("#icon-dark-dark-mode")).toBe("rgb(30, 58, 138)"); + expect(await getColor("#icon-accessibility-dark-mode")).toBe("rgb(156, 163, 175)"); + + expect(await getColor("#icon-light-contrast-mode")).toBe("rgb(255, 255, 255)"); + expect(await getColor("#icon-dark-contrast-mode")).toBe("rgb(30, 58, 138)"); + expect(await getColor("#icon-accessibility-contrast-mode")).toBe("rgb(156, 163, 175)"); + }); }); From 6c4847f6212143304ba56d73c48181ed15f6b4a3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 1 Jun 2026 05:10:20 +0000 Subject: [PATCH 3/3] test: set explicit colorScheme: light emulation for deterministic icon-color assertions --- tests/interactive-surface.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/interactive-surface.spec.ts b/tests/interactive-surface.spec.ts index 659a830..0524fab 100644 --- a/tests/interactive-surface.spec.ts +++ b/tests/interactive-surface.spec.ts @@ -134,6 +134,9 @@ test.describe("interactive surface package behavior", () => { test("data-mode dark and contrast containers apply dark icon-role colors without changing baseline colors", async ({ page }) => { + await page.emulateMedia({ colorScheme: "light" }); + await page.setContent(html); + const getColor = async (selector: string) => page.locator(selector).evaluate((el) => window.getComputedStyle(el).color);