[siddharthkp]

No linked issue. Stacked on #8630, which supplies the existing component CSS hooks and playground.

Package the existing appearance toolbar and searchable theme sheet as a demo-only
AppearancePlayground export from @primer/react/experimental.
This is a draft experiment, not a production theme-system proposal or a package
already published to npm.

Keep the app's normal Primer providers and base styles, then wrap its content:

import { AppearancePlayground } from "@primer/react/experimental";

<AppearancePlayground>
  <App />
</AppearancePlayground>;

The wrapper includes all 17 themes, five density steps, the five visual-only
Seriousness presets, a scoped content surface and a separate themed Primer
portal root. Its controls and theme sheet retain the host theme.
Normal div attributes, class names and styles are forwarded to the wrapper.

Changelog

New

• Experimental AppearancePlayground and AppearancePlaygroundProps exports; no stable entrypoint additions.
• Colocated usage/limitations documentation, draft component metadata, Default/Playground and independent-instance stories, plus focused unit coverage for root attributes, scopes, density/profile coordination, Default reset, sibling isolation, portal cleanup and server rendering.
• A minor changeset and the matching experimental-export snapshot entries.

Changed

• Move the Noodles demo to the existing PageLayout.Sidebar, PageLayout.Content, and PageLayout.Pane. Native drag and keyboard resizing support a 240–480px sidebar, retain its width through hiding and focus mode for the current page session, and reset to 312px on double-click or reload. Story-local height and responsive rules preserve independent scrolling and narrow-screen stacked comments. No PageLayout component-source changes are added.
• Move the existing provider, controls, palette snapshots, theme sheet and licensed Windows 95 font into the package component. The issues page and gallery reuse that implementation through a private Storybook compatibility module.
• Copy the bundled font and both redistribution notices beside the emitted CSS during the existing package build. No new dependencies, package entrypoints or remote font loading are introduced.
• Unregister instance-owned app/picker portal containers on unmount without deleting replacement registrations.
• Exclude this demo tool from the gallery's eager component-story discovery, as with other providers/portals, to avoid embedding unsupported nested playgrounds.

Removed

• The duplicated Storybook-only implementation locations, replaced with moves and a compatibility re-export.

Rollout strategy

• No changes needed in github/github-ui
• Needs changes in github/github-ui
• Ships with feature flag(s)
• Not sure
• None

Opt-in, experimental, internal-demo use only. This intentionally exposes a narrow
config wrapper around the existing presentational pieces instead of promoting
its provider, state helpers or palette data into a supported API.
This is a deliberate demo-only exception to waiting for a stable product pattern
before adding a config component.

No persistence, controlled state or remote themes. Use one wrapper per app
subtree; sibling wrappers are independent but nesting is unsupported. Primer
portals that inherit its context are captured; explicit container overrides and
third-party/body portals are not. Custom app CSS/layouts may need token mappings.
Restrictive inline-style CSP and transformed/clipping ancestors need app-specific
handling. Brand presets are independent adaptations, not official brand components;
Glass UI remains a flat/translucent approximation. Seriousness has no security effect.

Testing & Reviewing

Passed

• PageLayout follow-up: NOODLES_PORT=6009 node /Users/siddharth/.copilot/session-state/ffb7aa4f-c550-485f-b591-35469fa88108/files/verify-noodles-pagelayout.mjs — passed against this PR's own Storybook preview. This session-only Playwright harness is not included in the PR. It verified real pointer dragging, keyboard resizing, 240/480px bounds, double-click reset, width retention through sidebar toggles/focus mode, pinned header/footer, independent document/navigation scrolling, wide mode, desktop/stacked comments, and 320/390/767/768/1000px layouts. Noodles Theme and Local Interactions play functions passed, including the new keyboard-resize assertions; no page overflow or JavaScript errors were observed.
• Browser automation: 45 page/profile/viewport combinations across the standalone wrapper, existing issues page and component gallery; all five profiles at 948/375/320px. Desktop bars remain 59px high, sliders fit and retain usable widths, expected recommended densities match, and the gallery editor remains protected. No uncaught page errors were observed; existing embedded-gallery warnings remain.
• Browser automation: themed app dialog inherits Bank security's monospace/radius-zero styling and scoped portal root, while the theme picker retains the host font. All 17 themes remain available; the bundled Windows 95 font loads.
• Browser automation: sibling state/scope isolation, forwarded consumer root styles, five unmount/remount cycles with working theme dialogs, and actual app/picker registry entries removed on unmount. The Playground story's interaction flow passes, including range changes, palette search, selection, Escape and focus return.
• Editor diagnostics: no errors in the new component, token helper, picker, stories, unit test, private portal hook and edited gallery. Static source audits verify the font URL matches the copy destination, notices are included, and runtime component modules do not import Storybook.
• Formatting: existing installed node_modules/.bin/prettier --write passed for edited supported sources. The generated export snapshot retains its generator format with --parser babel --semi. Initial isolated-worktree formatter resolution failed and an npx cache fallback was inadvertently invoked; final formatting reused existing dependencies. No project dependency manifests or lockfiles changed.

Not run

Per the request, npm test, npm run build, npm run type-check, npm run lint
and npm run lint:css were not run.
Focused unit tests were added but not executed. The package build/tarball and npm
consumer installation remain unverified; asset packaging was inspected statically,
not presented as a successful package build. Deployment-preview readiness is not verified.

Review

1. Install a package build from this branch (not the currently published npm version), wrap an existing Primer app as above, and try the toolbar.
2. Verify Density can override Seriousness spacing, Default restores the theme styling, and theme changes preserve the active profile.
3. Open an app dialog, then the theme sheet; compare their scoped and protected typography.
4. Review the documented boundaries before considering broader adoption.

Local stories:

• http://localhost:6006/?path=/story/components-appearanceplayground--default
• http://localhost:6006/?path=/story/design-tools-issues-page--default
• http://localhost:6006/?path=/story/design-tools-component-gallery--default

[changeset-bot]

🦋 Changeset detected

Latest commit: 398da77

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[Copilot]

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Build

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

[Copilot]

🟡 Changes recommended

The documentation entry causes build:components.json to fail on an invalid story ID, while the Primer provider breaks app-level theme toggles and drops outer theme context values.

2 open issues

• Fix invalid Playground story lookup in components JSON build · New
• Preserve host theme context and setters for Primer · New

What changed in this PR

Packages the appearance tools from #8630 as a demo-only AppearancePlayground export from @primer/react/experimental, while reusing the implementation in existing Storybook demos.

Changes:

• Adds the wrapper with 17 themes, density and Seriousness controls, scoped content, and separate portal roots.
• Moves styles, palette data, and font assets into the package; adds portal-registration cleanup and asset copying.
• Adds usage documentation, stories, focused tests, export snapshots, and a minor changeset. Package build and test execution remain unverified.

File	Description
packages/​react/​src/​stories/​PlaygroundAppearance.tsx	Replaces the duplicate implementation with compatibility exports.
packages/​react/​src/​stories/​IssuesPage.stories.tsx	Updates the documented palette-data location.
packages/​react/​src/​stories/​ComponentGallery.stories.tsx	Excludes nested playground discovery and updates documentation paths.
packages/​react/​src/​Portal/​portalRoot.ts	Adds identity-checked portal unregistration.
packages/​react/​src/​internal/​hooks/​useRegisteredPortalRoot.ts	Manages instance-owned portal registrations.
packages/​react/​src/​experimental/​index.ts	Exports the experimental wrapper and props.
packages/​react/​src/​AppearancePlayground/​README.md	Documents usage and supported boundaries.
packages/​react/​src/​AppearancePlayground/​index.ts	Defines component exports.
packages/​react/​src/​AppearancePlayground/​assets/​w95fa/​w95fa.woff2	Relocates the bundled Windows 95 font.
packages/​react/​src/​AppearancePlayground/​assets/​w95fa/​OFL.txt	Relocates the font license text.
packages/​react/​src/​AppearancePlayground/​assets/​w95fa/​95CSS-LICENSE.txt	Relocates the source redistribution notice.
packages/​react/​src/​AppearancePlayground/​AppearancePlaygroundThemePicker.tsx	Moves the picker and adds portal cleanup.
packages/​react/​src/​AppearancePlayground/​AppearancePlaygroundThemePicker.module.css	Colocates picker and palette-preview styles.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.tsx	Implements the wrapper, controls, and scoped surfaces.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.tokens.ts	Updates imports for relocated palette data.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.test.tsx	Adds attribute, state, isolation, cleanup, and rendering tests.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.stories.tsx	Adds default and interactive playground stories.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.stories.module.css	Styles the example app.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.sources.json	Relocates palette values and provenance.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.module.css	Colocates wrapper styles and the font declaration.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.features.stories.tsx	Demonstrates independent instances and remounting.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.docs.json	Adds draft component metadata and story references.
packages/​react/​src/​AppearancePlayground/​AppearancePlayground.brands.json	Relocates brand preset values and source notes.
packages/​react/​src/​__tests__/​__snapshots__/​exports.test.ts.snap	Records the new experimental exports.
packages/​react/​script/​build	Copies font assets and notices into package output.
.changeset/​experimental-appearance-playground.md	Declares the experimental addition as a minor release.

_{Review effort: Balanced}

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[siddharthkp]

Replaced native browser-side-panel controls with an in-page floating panel docked at the top right (8ef73e1), following the requested Arc-compatible direction. The extension icon toggles it; Close dismisses the UI without removing preview styles. Controls are isolated in an extension frame inside a closed shadow root, with requests restricted to the containing website tab. Removed the sidePanel permission.

Browser verification passed in Chrome for Testing 153: real toolbar activation; top-right geometry; all 19 themes; Density and Seriousness; variable editing and dynamic portals; reset; close/reopen and icon toggle; independent tabs and cross-tab request rejection; 390px/1512px layouts; reload cleanup; unsupported-page badge; restrictive host frame-src/style-src CSP. No page errors or captured worker errors; editor diagnostics clean. Arc itself remains unverified. No repository tests/builds/typechecks/linters or dependency installs were run, as requested.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[siddharthkp]

Added MS DOS, inspired by noted.computer’s public Turbo blue palette: deep blue surfaces, cyan text, yellow accents, green actions, square controls and hard pixel shadows. Shared preset is available in all playgrounds and the floating extension (20 total themes). Added a dedicated MS DOS Storybook story.

Bundled the unmodified 5 KB PxPlus IBM VGA 9x16 font by VileR under CC BY-SA-4.0, including attribution, full license and source checksum in both the package and ready-to-load extension. No runtime requests to the reference website are needed. Existing minor changeset remains accurate.

Browser verification passed in Chrome for Testing 153: all 20 extension themes; MS DOS font loading on an independent page with no Storybook font styles (9px monospace glyph metrics at 16px); existing Windows 95 font still loads; MS DOS story play completes; square controls; blue VGA-themed inherited dialog; existing floating-UI reset/tab isolation/CSP checks. No browser page or captured worker errors; editor diagnostics clean. Repository tests/builds/typechecks/linters were not run, as requested. Updated extension ZIP; selected MS DOS in the shared Noodles preview.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.