[chore] v1.1.0 release by Foscat · Pull Request #5 · Foscat/Interactive-Surface-CSS

Foscat · 2026-04-09T23:23:36Z

Summary

Prepares the v1.1.0 release by standardizing color notation and release workflow quality gates, while aligning docs/demo guidance with the new index.html customization experience.

Key updates:

Standardized library color values to functional notation (rgb(...)).
Added check:no-hex-colors and enforced it in prepublishOnly.
Promoted index.html as the demo/customization app with example.html kept as a backward-compatible alias.
Updated README/wiki/changelog and release documentation.
Bumped package version to 1.1.0.

Scope

Validation

Commands run and results:

npm run check:no-hex-colors   # pass
npm run lint:css              # pass
npm test                      # pass (24 passed)
npm run pack:dry              # pass (interactive-surface-css-1.1.0.tgz)
npm run prepublishOnly        # pass

API and Behavior Impact

no public API changes
class API changed
token contract changed
accessibility behavior changed
motion behavior changed
browser behavior changed

Documentation

README updated (if needed)
wiki updated (if needed)
CHANGELOG updated (if needed)

Notes

Token/color standardization and guardrail script coverage.
Release checklist consistency across README/wiki/changelog.
Demo export compatibility (index.html primary, example.html alias)

Copilot

Pull request overview

Prepares the v1.1.0 release by enforcing functional color notation (no hex literals), promoting index.html as the primary demo/customization experience, and aligning docs/tests/release workflow around those changes.

Changes:

Converted remaining hex fallbacks to rgb(...) in interactive-surface.css and added npm run check:no-hex-colors enforced via prepublishOnly.
Replaced the old example.html demo with a new, expanded index.html demo/customization app and updated Playwright coverage accordingly.
Updated README/wiki/CHANGELOG/release docs for v1.1.0, color notation guidance, and the new demo entrypoint.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
`interactive-surface.css`	Replaces hex fallbacks; adds icon-role hooks/tokens for icon-only controls.
`scripts/check-no-hex-colors.mjs`	New guard script to fail builds when hex literals appear in the library CSS.
`package.json`	Bumps version, adds guard script + `prepublishOnly` gate, updates exports/files for `index.html`.
`package-lock.json`	Syncs lockfile version metadata to `1.1.0`.
`index.html`	New primary demo/customization page with token editor, import/export, and embedded docs rendering.
`example.html`	Removed legacy demo page.
`tests/example.spec.ts`	Updates the demo test to load `index.html` and adjusts the control-count assertion.
`README.md`	Updates CDN instructions, demo guidance, testing scripts, and release checklist examples.
`CHANGELOG.md`	Adds `1.1.0` entry and reorders historical entries.
`wiki/Token-Reference.md`	Adds functional color notation guidance and updates examples to `rgb(...)`.
`wiki/Testing-and-Quality.md`	Documents the new guard script + updates demo-page references.
`wiki/Publishing-and-Releases.md`	Adds the guard script to the release checklist and updates version example.
`wiki/Installation-and-Usage.md`	Updates CDN usage guidance.
`wiki/Getting-Started.md`	Updates CDN guidance + token examples to `rgb(...)`.
`wiki/Home.md`	Updates repo version/tag and notes `index.html` as the demo page.
`wiki/API-Reference.md`	Updates demo entry to `index.html` and mentions `example.html` as an alias.
`wiki/FAQ.md`	Points users to `index.html` for safer token customization.
`wiki/Contributing.md`	Adds functional color notation rule and includes the new validation script.

Comments suppressed due to low confidence (1)

tests/example.spec.ts:16

Variable/test naming still refers to “example” even though the test now loads index.html. Renaming exampleHtml / the describe+test titles to “index”/“demo” would reduce confusion when reading failures.

const exampleHtml = fs
  .readFileSync(path.join(packageRoot, "index.html"), "utf8")
  .replace('<link rel="stylesheet" href="./interactive-surface.css" />', `<style>${css}</style>`);

test.describe("example page", () => {
  test.beforeEach(async ({ page }) => {

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-09T23:29:43Z

+const source = fs.readFileSync(targetFile, "utf8");
+const hexPattern = /#[0-9a-fA-F]{3,8}\b/g;
+const lines = source.split(/\r?\n/);


The hex detection regex will also match non-color uses of # (e.g., fragment URLs or potential future ID selectors like #abc), which can create false positives unrelated to hex colors. Consider tightening the pattern to match only CSS color contexts (e.g., after :/,/whitespace) or explicitly excluding selector positions/comments if you only want to ban color literals.

@copilot apply changes based on this feedback

Copilot · 2026-04-09T23:29:44Z

+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.0.2/interactive-surface.css" />
+<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.0.2/interactive-surface.css" />


These embedded README CDN links still reference @1.0.2, while the repo README/wiki now instruct @latest (and the release checklist uses <version> placeholders). Update this embedded snippet to match the current guidance so the demo doesn’t show outdated install instructions.

Suggested change

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.0.2/interactive-surface.css" />

<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.0.2/interactive-surface.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@latest/interactive-surface.css" />

<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@latest/interactive-surface.css" />

Copilot · 2026-04-09T23:29:44Z

+## Testing
+
+```bash
+npm run lint:css


The embedded README “Testing” commands omit the new npm run check:no-hex-colors quality gate that’s documented elsewhere and enforced in prepublishOnly. Update the embedded README block so it matches the repo’s current validation workflow.

Suggested change

npm run lint:css

npm run lint:css

npm run check:no-hex-colors

Copilot · 2026-04-09T23:29:45Z

+5. Create and publish a GitHub Release tag (for example `v1.0.1`).
+6. Verify the `Publish to npm` workflow succeeds.
+7. Verify CDN availability:
+   - `https://cdn.jsdelivr.net/npm/interactive-surface-css@1.0.2/interactive-surface.css`
+   - `https://unpkg.com/interactive-surface-css@1.0.2/interactive-surface.css`


The embedded README “Publishing” checklist and CDN verification URLs still reference older examples (v1.0.1, @1.0.2). Update to v1.1.0 or <version> placeholders to keep the in-demo docs aligned with the updated README/release docs.

Suggested change

5. Create and publish a GitHub Release tag (for example `v1.0.1`).

6. Verify the `Publish to npm` workflow succeeds.

7. Verify CDN availability:

- `https://cdn.jsdelivr.net/npm/interactive-surface-css@1.0.2/interactive-surface.css`

- `https://unpkg.com/interactive-surface-css@1.0.2/interactive-surface.css`

5. Create and publish a GitHub Release tag (for example `v<version>`).

6. Verify the `Publish to npm` workflow succeeds.

7. Verify CDN availability:

- `https://cdn.jsdelivr.net/npm/interactive-surface-css@<version>/interactive-surface.css`

- `https://unpkg.com/interactive-surface-css@<version>/interactive-surface.css`

Copilot · 2026-04-09T23:29:45Z

+            <a class="docs-link" href="./wiki/Home.md">Wiki Home</a>
+            <a class="docs-link" href="./wiki/Getting-Started.md">Getting Started</a>
+            <a class="docs-link" href="./wiki/Installation-and-Usage.md">Installation and Usage</a>
+            <a class="docs-link" href="./wiki/API-Reference.md">API Reference</a>
+            <a class="docs-link" href="./wiki/Token-Reference.md">Token Reference</a>
+            <a class="docs-link" href="./wiki/Accessibility.md">Accessibility</a>
+            <a class="docs-link" href="./wiki/Testing-and-Quality.md">Testing and Quality</a>
+            <a class="docs-link" href="./wiki/Publishing-and-Releases.md">Publishing and Releases</a>
+            <a class="docs-link" href="./wiki/FAQ.md">FAQ</a>
+            <a class="docs-link" href="./wiki/Roadmap.md">Roadmap</a>
+            <a class="docs-link" href="./CONTRIBUTING.md">Contributing</a>
+            <a class="docs-link" href="./CODE_OF_CONDUCT.md">Code of Conduct</a>
+            <a class="docs-link" href="./SECURITY.md">Security Policy</a>
+          </div>


These links point to ./wiki/*.md and other repo markdown files, but the package files allowlist does not include them, so they will 404 when index.html is opened from the installed npm package. Consider linking to the GitHub wiki/markdown URLs instead, or ensure the referenced docs are shipped with the package.

Suggested change

<a class="docs-link" href="./wiki/Home.md">Wiki Home</a>

<a class="docs-link" href="./wiki/Getting-Started.md">Getting Started</a>

<a class="docs-link" href="./wiki/Installation-and-Usage.md">Installation and Usage</a>

<a class="docs-link" href="./wiki/API-Reference.md">API Reference</a>

<a class="docs-link" href="./wiki/Token-Reference.md">Token Reference</a>

<a class="docs-link" href="./wiki/Accessibility.md">Accessibility</a>

<a class="docs-link" href="./wiki/Testing-and-Quality.md">Testing and Quality</a>

<a class="docs-link" href="./wiki/Publishing-and-Releases.md">Publishing and Releases</a>

<a class="docs-link" href="./wiki/FAQ.md">FAQ</a>

<a class="docs-link" href="./wiki/Roadmap.md">Roadmap</a>

<a class="docs-link" href="./CONTRIBUTING.md">Contributing</a>

<a class="docs-link" href="./CODE_OF_CONDUCT.md">Code of Conduct</a>

<a class="docs-link" href="./SECURITY.md">Security Policy</a>

</div>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Home">Wiki Home</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Getting-Started">Getting Started</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Installation-and-Usage">Installation and Usage</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/API-Reference">API Reference</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Token-Reference">Token Reference</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Accessibility">Accessibility</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Testing-and-Quality">Testing and Quality</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Publishing-and-Releases">Publishing and Releases</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/FAQ">FAQ</a>

<a class="docs-link" href="#readmeContent" data-doc-url="wiki/Roadmap">Roadmap</a>

<a class="docs-link" href="#readmeContent" data-doc-url="CONTRIBUTING.md">Contributing</a>

<a class="docs-link" href="#readmeContent" data-doc-url="CODE_OF_CONDUCT.md">Code of Conduct</a>

<a class="docs-link" href="#readmeContent" data-doc-url="SECURITY.md">Security Policy</a>

</div>

<script>

(() => {

const wikiLinks = document.getElementById("wikiLinks");

if (!wikiLinks) {

return;

}

const links = wikiLinks.querySelectorAll("a.docs-link[data-doc-url]");

const { hostname, pathname } = window.location;

let repoBase = "";

if (hostname.endsWith(".github.io")) {

const owner = hostname.slice(0, -".github.io".length);

const pathSegments = pathname.split("/").filter(Boolean);

const repo = pathSegments[0];

if (owner && repo) {

repoBase = `https://github.com/${owner}/${repo}`;

}

} else if (hostname === "github.com") {

const pathSegments = pathname.split("/").filter(Boolean);

if (pathSegments.length >= 2) {

repoBase = `https://github.com/${pathSegments[0]}/${pathSegments[1]}`;

}

}

links.forEach((link) => {

const docUrl = link.getAttribute("data-doc-url");

if (!docUrl) {

return;

}

if (repoBase) {

link.href = docUrl.startsWith("wiki/")

? `${repoBase}/${docUrl}`

: `${repoBase}/blob/HEAD/${docUrl}`;

link.target = "_blank";

link.rel = "noopener noreferrer";

} else {

link.href = "#readmeContent";

link.title = "Repository documentation is not bundled with this package; use the embedded README content below.";

}

});

})();

</script>

Copilot · 2026-04-09T23:29:45Z

+## Color notation standard
+
+Use functional color notation for token values:
+
+- `rgb(255 255 255)`
+- `rgb(15 23 42 / 80%)`
+- `hsl(200deg 100% 50%)`
+
+Avoid hex literals in examples and production token files so palette updates are easier to audit and automate.


interactive-surface.css introduces new public-ish tokens for icon role colors (e.g. --interactive-surface-light-icon-color and ...-dark variants), but they are not listed anywhere in this token reference. Since the PR notes a “token contract changed”, consider documenting these new tokens here (and clarifying whether they are part of the supported public token surface).

@copilot apply changes based on this feedback

Copilot suggestion Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…ce.css Agent-Logs-Url: https://github.com/Foscat/Interactive-Surface-CSS/sessions/4ea410f0-6f52-477a-8977-3d56bbb14677 Co-authored-by: Foscat <40616718+Foscat@users.noreply.github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Foscat · 2026-04-09T23:33:51Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:34:39Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:35:00Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:35:26Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:36:03Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:36:20Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:36:40Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:37:29Z

@copilot apply changes based on the comments in this thread

Foscat · 2026-04-09T23:38:05Z

@copilot apply changes based on the comments in this thread

[chore] v1.1.0 release

f1956a3

Foscat requested a review from Copilot April 9, 2026 23:23

Foscat added documentation Improvements or additions to documentation enhancement New feature or request labels Apr 9, 2026

Copilot started reviewing on behalf of Foscat April 9, 2026 23:24 View session

Foscat self-assigned this Apr 9, 2026

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Copilot started work on behalf of Foscat April 9, 2026 23:31 View session

Foscat and others added 2 commits April 9, 2026 18:31

Update package.json

0e38d24

Copilot suggestion Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Remove misspelled .accessability-icon selector from interactive-surfa…

7c88eab

…ce.css Agent-Logs-Url: https://github.com/Foscat/Interactive-Surface-CSS/sessions/4ea410f0-6f52-477a-8977-3d56bbb14677 Co-authored-by: Foscat <40616718+Foscat@users.noreply.github.com>

Copilot finished work on behalf of Foscat April 9, 2026 23:33

Update scripts/check-no-hex-colors.mjs

78b2700

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of Foscat April 9, 2026 23:33 View session

Foscat closed this Apr 9, 2026

Foscat reopened this Apr 9, 2026

Copilot stopped work on behalf of Foscat due to an error April 9, 2026 23:36
The session was cancelled by the user.

Copilot started work on behalf of Foscat April 9, 2026 23:36 View session

Foscat merged commit 6b4da4a into main Apr 9, 2026
1 check failed

Foscat deleted the ghPages branch April 9, 2026 23:38

Copilot stopped work on behalf of Foscat due to an error April 9, 2026 23:38
The session was cancelled by the user.

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.0.2/interactive-surface.css" />
		<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.0.2/interactive-surface.css" />

-            <a class="docs-link" href="./wiki/Home.md">Wiki Home</a>
-            <a class="docs-link" href="./wiki/Getting-Started.md">Getting Started</a>
-            <a class="docs-link" href="./wiki/Installation-and-Usage.md">Installation and Usage</a>
-            <a class="docs-link" href="./wiki/API-Reference.md">API Reference</a>
-            <a class="docs-link" href="./wiki/Token-Reference.md">Token Reference</a>
-            <a class="docs-link" href="./wiki/Accessibility.md">Accessibility</a>
-            <a class="docs-link" href="./wiki/Testing-and-Quality.md">Testing and Quality</a>
-            <a class="docs-link" href="./wiki/Publishing-and-Releases.md">Publishing and Releases</a>
-            <a class="docs-link" href="./wiki/FAQ.md">FAQ</a>
-            <a class="docs-link" href="./wiki/Roadmap.md">Roadmap</a>
-            <a class="docs-link" href="./CONTRIBUTING.md">Contributing</a>
-            <a class="docs-link" href="./CODE_OF_CONDUCT.md">Code of Conduct</a>
-            <a class="docs-link" href="./SECURITY.md">Security Policy</a>
-          </div>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Home">Wiki Home</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Getting-Started">Getting Started</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Installation-and-Usage">Installation and Usage</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/API-Reference">API Reference</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Token-Reference">Token Reference</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Accessibility">Accessibility</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Testing-and-Quality">Testing and Quality</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Publishing-and-Releases">Publishing and Releases</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/FAQ">FAQ</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="wiki/Roadmap">Roadmap</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="CONTRIBUTING.md">Contributing</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="CODE_OF_CONDUCT.md">Code of Conduct</a>
+            <a class="docs-link" href="#readmeContent" data-doc-url="SECURITY.md">Security Policy</a>
+          </div>
+          <script>
+            (() => {
+              const wikiLinks = document.getElementById("wikiLinks");
+              if (!wikiLinks) {
+                return;
+              }
+              const links = wikiLinks.querySelectorAll("a.docs-link[data-doc-url]");
+              const { hostname, pathname } = window.location;
+              let repoBase = "";
+              if (hostname.endsWith(".github.io")) {
+                const owner = hostname.slice(0, -".github.io".length);
+                const pathSegments = pathname.split("/").filter(Boolean);
+                const repo = pathSegments[0];
+                if (owner && repo) {
+                  repoBase = `https://github.com/${owner}/${repo}`;
+                }
+              } else if (hostname === "github.com") {
+                const pathSegments = pathname.split("/").filter(Boolean);
+                if (pathSegments.length >= 2) {
+                  repoBase = `https://github.com/${pathSegments[0]}/${pathSegments[1]}`;
+                }
+              }
+              links.forEach((link) => {
+                const docUrl = link.getAttribute("data-doc-url");
+                if (!docUrl) {
+                  return;
+                }
+                if (repoBase) {
+                  link.href = docUrl.startsWith("wiki/")
+                    ? `${repoBase}/${docUrl}`
+                    : `${repoBase}/blob/HEAD/${docUrl}`;
+                  link.target = "_blank";
+                  link.rel = "noopener noreferrer";
+                } else {
+                  link.href = "#readmeContent";
+                  link.title = "Repository documentation is not bundled with this package; use the embedded README content below.";
+                }
+              });
+            })();
+          </script>

Conversation

Foscat commented Apr 9, 2026

Summary

Scope

Validation

API and Behavior Impact

Documentation

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Foscat commented Apr 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants