[chdefrene]

Component Development

Type

• Feature
• Fix
• Hotfix (should release ASAP)
• Maintenance (deps only)

Reference to assignment

Related to equinor/fusion-core-tasks#2120, Storybook portion only. Other runtime surfaces are handled separately. This is a nonclosing reference; legacy work remains unresolved.

Description of assignment

This is a separate fix needed specifically for Storybook. The theme fix in #3479 keeps native controls light for components using the shared theme, but it does not cover the Storybook preview document root where EDS CSS variables are resolved. This PR closes that gap for Storybook only.

Temporarily keep Storybook stories and docs that use EDS CSS variables and native browser controls light, both at initial light/dark OS/browser preferences and when preferences change live. Do not add dark-mode support or change reusable component/provider defaults.

Description of Proposed Changes

• Follow the EDS colour scheme detection guidance in storybook/.storybook/preview-head.html: declare <html data-color-scheme="light">. The HTML parser merges these attributes onto the preview document's root <html> element before styles load and stories render; no script is needed. EDS then keeps its light variables (its prefers-color-scheme: dark rule only applies to :root:not([data-color-scheme="light"])) and applies color-scheme: light, so native controls stay light too. This covers Docs canvases and body-portaled content without changing ThemeProvider.
• Leave the Storybook manager UI unchanged; only the preview, where components use EDS CSS variables, is forced light.
• Add vitest regression tests in storybook/.storybook/light-mode.test.ts (configured by storybook/vitest.config.ts): one checks the preview head markup; the other renders --eds-color-bg-canvas in headless Chromium (Playwright, new Storybook dev dependency) with a dark prefers-color-scheme and asserts it resolves to the EDS light token value (bg-neutral-canvas, read from @equinor/eds-tokens) with the preview head, and to the dark value without it. Wire them through storybook/package.json (test, plus test:setup to install the browser), and document the temporary policy and verification procedure in CONTRIBUTING.md.

Preserve explicit nested dark specimens. Do not change SideSheet or any reusable library.

Changeset: N/A — user-approved private-only exemption (2026-09-30). The user explicitly selected “Exempt the private-only Storybook PR (Recommended)” after reviewing the release-planner evidence. The only affected package is @equinor/fusion-react-components-stories (storybook/package.json, private: true); contributor documentation is also updated. Existing Changesets configuration defaults to privatePackages.version: false, and the installed release planner returns no releases for a private Storybook patch entry. Such an entry would be inert. Do not change the repository's private-versioning policy, bump untouched public libraries, or add an empty/inert changeset. No package version bump is included.

Follow-up (EDS alignment): verified in Chromium (dev server and storybook build output) with prefers-color-scheme: dark on load and after a live light→dark switch on data-textarea--basic and data-textarea--docs. Preview root data-color-scheme="light", computed color-scheme: light on the root, body-portaled input and all 23 Docs controls, --eds-color-bg-canvas #f5f5f5, --eds-color-text-strong #1d1d1d. bun run --cwd storybook test passed (1 test).

Validation completed in the dedicated worktree:

Command	Result
bun install --frozen-lockfile	Passed after the first Storybook command reported missing dependencies; no lockfile change.
bun run build	Passed for all workspace libraries.
bun run --cwd storybook test	Passed, 2 tests (static markup + Chromium rendering of an EDS variable). Temporarily breaking the data-color-scheme attribute makes both fail.
bun run storybook:build --disable-telemetry	Passed; generated preview HTML contains the startup policy (run before the manager override was removed).
git diff --check	Passed.

Rebased onto main after #3486 merged (it removed the merge-conflict markers that #3475 left in bun.lock). This PR's lockfile diff is only playwright/playwright-core. After rebase, bun install --frozen-lockfile reports no changes and bun run --cwd storybook test passes (2 tests).

| bun run check -- storybook/.storybook/light-mode.test.ts | No files processed: the repository intentionally excludes Storybook from Biome; not a lint pass. |
| node /Users/christian.frene/.copilot/session-state/490877d1-0c04-4928-851e-8d83283486ea/files/storybook-browser.mjs | Passed 15 actual-Storybook Chromium scenarios; no runtime exceptions. |

Automated browser evidence covers initial light/dark preferences and live transitions on a textarea story and Docs canvas, native/shadow-DOM controls, and an existing body-portaled EDS tooltip. The EDS input token stays #f5f5f5; removing the root selector under dark preference reproduces #0b0b0b. An explicit nested dark specimen remains dark.

Local evidence is retained in /Users/christian.frene/.copilot/session-state/490877d1-0c04-4928-851e-8d83283486ea/files/, including storybook-browser.json, build logs, and light/dark screenshots. The dependency-free browser harness is a local artifact rather than new repository tooling. Browser coverage is Chromium-only against development Storybook; the production build was checked separately.

User-reported manual acceptance (2026-09-30):

Pass — checked Storybook contents and controls stay light

The user checked http://127.0.0.1:46123/?path=/story/data-textarea--basic and http://127.0.0.1:46123/?path=/docs/data-textarea--docs. Contents and textarea stayed light after light/dark reloads and live switching. This is a pass for those checked routes and surfaces only, not every story. It is separate from the automated browser/probe results above; no user browser/version or manual portal-specimen check was reported. The report is retained in the local manual-evidence.md artifact.

Review follow-up: ported the light-mode tests from node:test to vitest (62ab69a) to match the repository's test runner. bun run --cwd storybook test passed (2 tests); setting data-color-scheme="auto" makes both fail.

Checklist

Create User Story(DevOps) or Issue(Github)

• Describe functional requirements
• Design plan/suggestion (e.g. images, link to eds design or relevant figma links, mention of eds tokens to use)
• Communication with UX (evaluate if needed)

No new visual design is introduced; the change preserves the existing light appearance.

Development

• Describe the component
• Code funtional requirements
• Create stories
• Create snapshots (evaluate if needed)
• Remove unused imports and commented code
• Lint code with Biome (and follow best practises for code quality

Reuse existing stories rather than add a new component or story. Local verification screenshots are retained, but no snapshot baselines are added. Biome excludes Storybook; see the validation result above.

Create Pull Request

• Assign relevant reviewers in Github and Cromatic
• Inform colleagues of pending reviews. We use Teams for this purpose, under fusion-frontend team please tag involved reviewers in the Code review channel

Create a ready-for-review PR under the user's explicit authorization. Leave assignees unset; no reviewer assignment, merge, deployment, or issue closure is part of this change.

Review of Pull Request

• Follow up on comments from code review and implement necessary changes (evaluate if needed)
• Review approved in github (and chromatic)

Publish Code

• Increment version number
• Merge PR
• Consider letting fusion developers know this this shiny new thing exists

Version increment: N/A under the explicit user-approved private-only changeset exemption above.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c3c33ae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

🟢 Approval recommended

The scoped changes match the stated policy, and the reported meta-value issue is not valid.

0 open findings

What changed in this PR

This PR temporarily keeps Storybook’s preview and manager light without changing reusable components or providers.

Changes:

• Apply light color-scheme settings before preview content renders and throughout manager controls.
• Add startup regression tests and document the temporary policy and browser checks.

File	Description
storybook/​package.json	Adds the test command.
storybook/​.storybook/​preview-head.html	Sets the preview’s light scheme at startup.
storybook/​.storybook/​manager-head.html	Keeps manager controls light.
storybook/​.storybook/​light-mode.test.mjs	Checks the startup settings.
CONTRIBUTING.md	Documents the policy and verification steps.

🧠 Review effort: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[chdefrene]

Closing per maintainer decision for equinor/fusion-core-tasks#2120: the temporary light-mode override now lives only in @equinor/fusion-web-theme (#3479, released as @equinor/fusion-web-theme@0.1.12). Repository-specific overrides are no longer wanted; dependents will be upgraded to 0.1.12 instead.