[DO NOT MERGE] Add light and dark color scheme test themes

COLOR-SCHEME-TESTING.md

@@ -0,0 +1,87 @@
+# Experimental color scheme test themes
+
+These themes exercise the stack in
+[WordPress/gutenberg#80698](https://github.com/WordPress/gutenberg/pull/80698)
+and [WordPress/gutenberg#80746](https://github.com/WordPress/gutenberg/pull/80746).
+They require a Gutenberg build containing both. Their `$schema` URLs
+intentionally point at the head branch of the duotone child PR.
+
+Each theme declares its opposite scheme inline, mirroring the CSS
+`prefers-color-scheme` model: the base palette is the default, and
+`settings.color.light` / `settings.color.dark` override the other scheme.
+
+## Coverage
+
+| Feature | `light-theme` | `dark-theme` |
+| --- | --- | --- |
+| Default scheme | Light | Dark |
+| Named schemes | Citrus Daylight / Electric Dusk | Midnight Terminal / Paper Morning |
+| Opposite scheme | Inline `settings.color.dark` | Inline `settings.color.light` |
+| Palette overrides | Yes | Yes |
+| Gradient overrides | Yes (`signal`) | Yes (`signal`) |
+| Duotone overrides | Yes (`portrait`) | Yes (`portrait`) |
+| Unmatched preset fallback | `fixed-accent` | `fixed-accent` |
+| `data-scheme` force/reset | System/Light/Dark test helper | System/Light/Dark test helper |
+
+## Setup
+
+Use this repository's wp-env with a local Gutenberg checkout whose current
+branch contains the full stack:
+
+```json
+{
+	"plugins": [ "../gutenberg" ]
+}
+```
+
+From the Gutenberg checkout, fetch and check out the duotone child branch, which
+is stacked on the data model:
+
+```bash
+git fetch origin pull/80746/head:try/dark-mode-duotone
+git switch try/dark-mode-duotone
+```
+
+Then start either theme from this repository:
+
+```bash
+npm run env:start:gutenberg -- --theme light-theme
+npm run env:start:gutenberg -- --theme dark-theme
+```
+
+## Manual checks
+
+Repeat these checks for both themes:
+
+1. With **System** selected, change the operating system appearance. The page
+   should update without a reload.
+2. Use the three-button test helper to force **Light**, **Dark**, and **System**.
+   System must remove the `data-scheme` attribute, and a forced value must win
+   over the operating-system preference.
+3. Reload the page. The helper must return to the effective operating-system
+   preference, because it stores nothing.
+4. Confirm the page background, text, primary card, Signal gradient, and Portrait
+   duotone all change together.
+5. Confirm the Fixed accent badge does not change. Its slug has no override.
+6. In DevTools, confirm the same `--wp--preset--color--*` and
+   `--wp--preset--gradient--signal` properties are redefined inside the expected
+   `prefers-color-scheme` gate and forced `data-scheme` selector.
+7. Confirm a used duotone injects `wp-duotone-portrait--dark` in `light-theme`
+   and `wp-duotone-portrait--light` in `dark-theme`, and that
+   `--wp--preset--duotone--portrait` points to it in the matching gate.
+8. Open the Site Editor and repeat the operating-system appearance check in the
+   editor canvas. It loads the same generated stylesheet as the front end.
+
+Theme-specific expectations:
+
+- `light-theme`: the dark scheme uses the restrained navy/pink values from
+  `settings.color.dark`.
+- `dark-theme`: the light scheme uses the mint/green values from
+  `settings.color.light`, and the theme's Georgia font is unchanged in both
+  schemes — a scheme section carries color presets only.
+
+## Backward compatibility
+
+Deactivate Gutenberg or use a build without #80698. Both themes should remain
+usable with their base palettes, and no scheme media-query overrides should be
+emitted. Re-enable the stacked build before testing automatic switching.

dark-theme/assets/js/scheme-switcher.js

@@ -0,0 +1,39 @@
+( () => {
+	const root = document.documentElement;
+	const controls = document.querySelectorAll( '[data-scheme-choice]' );
+
+	if ( ! controls.length ) {
+		return;
+	}
+
+	const updatePressedState = () => {
+		const activeScheme = root.dataset.scheme || 'system';
+
+		controls.forEach( ( control ) => {
+			control.setAttribute(
+				'aria-pressed',
+				String( control.dataset.schemeChoice === activeScheme )
+			);
+		} );
+	};
+
+	controls.forEach( ( control ) => {
+		control.addEventListener( 'click', () => {
+			const scheme = control.dataset.schemeChoice;
+
+			if ( scheme === 'system' ) {
+				delete root.dataset.scheme;
+			} else {
+				root.dataset.scheme = scheme;
+			}
+
+			updatePressedState();
+		} );
+	} );
+
+	new MutationObserver( updatePressedState ).observe( root, {
+		attributeFilter: [ 'data-scheme' ],
+	} );
+
+	updatePressedState();
+} )();

dark-theme/functions.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Dark Theme functions.
+ *
+ * @package Dark_Theme
+ */
+
+/**
+ * Enqueue the theme styles and non-persistent test control.
+ */
+function dark_theme_enqueue_assets() {
+	wp_enqueue_style(
+		'dark-theme-style',
+		get_stylesheet_uri(),
+		array(),
+		wp_get_theme()->get( 'Version' )
+	);
+
+	wp_enqueue_script(
+		'dark-theme-scheme-switcher',
+		get_theme_file_uri( 'assets/js/scheme-switcher.js' ),
+		array(),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+}
+add_action( 'wp_enqueue_scripts', 'dark_theme_enqueue_assets' );

dark-theme/patterns/scheme-lab.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Title: Color scheme test lab
+ * Slug: dark-theme/scheme-lab
+ * Categories: featured
+ * Inserter: no
+ */
+?>
+
+<!-- wp:group {"tagName":"main","align":"full","backgroundColor":"base","textColor":"contrast","className":"scheme-lab","style":{"spacing":{"padding":{"top":"var:preset|spacing|large","bottom":"var:preset|spacing|large"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group alignfull scheme-lab has-contrast-color has-base-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--large)">
+	<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:paragraph {"backgroundColor":"fixed-accent","textColor":"contrast","style":{"border":{"radius":"999px"},"spacing":{"padding":{"top":"0.35rem","right":"0.75rem","bottom":"0.35rem","left":"0.75rem"}}},"fontSize":"small"} -->
+		<p class="has-contrast-color has-fixed-accent-background-color has-text-color has-background has-small-font-size" style="border-radius:999px;padding-top:0.35rem;padding-right:0.75rem;padding-bottom:0.35rem;padding-left:0.75rem"><?php echo esc_html__( 'DARK THEME · Midnight Terminal', 'dark-theme' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:html -->
+		<div class="scheme-lab__switcher" role="group" aria-label="<?php echo esc_attr__( 'Preview color scheme', 'dark-theme' ); ?>">
+			<button type="button" data-scheme-choice="system" aria-pressed="true"><?php echo esc_html__( 'System', 'dark-theme' ); ?></button>
+			<button type="button" data-scheme-choice="light" aria-pressed="false"><?php echo esc_html__( 'Paper Morning', 'dark-theme' ); ?></button>
+			<button type="button" data-scheme-choice="dark" aria-pressed="false"><?php echo esc_html__( 'Midnight Terminal', 'dark-theme' ); ?></button>
+		</div>
+		<!-- /wp:html -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|large","bottom":"var:preset|spacing|large"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+	<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--large);margin-bottom:var(--wp--preset--spacing--large)">
+		<!-- wp:heading {"level":1,"fontSize":"xx-large"} -->
+		<h1 class="wp-block-heading has-xx-large-font-size"><?php echo esc_html__( 'Dark Theme: Midnight Terminal', 'dark-theme' ); ?></h1>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"fontSize":"large"} -->
+		<p class="has-large-font-size"><?php echo esc_html__( 'This is the Dark Theme. Its default scheme is the green-black Midnight Terminal palette. Its contrasting light scheme is the soft green-and-orange Paper Morning palette.', 'dark-theme' ); ?></p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide">
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:group {"backgroundColor":"primary","textColor":"base","className":"scheme-lab__card","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"}}},"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group scheme-lab__card has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+				<!-- wp:heading {"level":2,"textColor":"base"} -->
+				<h2 class="wp-block-heading has-base-color has-text-color"><?php echo esc_html__( 'Terminal / paper palette', 'dark-theme' ); ?></h2>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p><?php echo esc_html__( 'Terminal green and orange become forest ink on pale paper.', 'dark-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:group {"gradient":"signal","textColor":"contrast","className":"scheme-lab__card","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"}}},"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group scheme-lab__card has-contrast-color has-signal-gradient-background has-text-color has-background" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+				<!-- wp:heading {"level":2} -->
+				<h2 class="wp-block-heading"><?php echo esc_html__( 'Night / morning gradient', 'dark-theme' ); ?></h2>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p><?php echo esc_html__( 'The Signal gradient is redefined per scheme, so it repaints with everything else.', 'dark-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- wp:group {"align":"wide","className":"scheme-lab__card","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignwide scheme-lab__card">
+		<!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|portrait"}},"className":"scheme-lab__image"} -->
+		<figure class="wp-block-image size-full scheme-lab__image"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/scheme-lab.jpg" alt="<?php echo esc_attr__( 'An abstract geometric composition used to demonstrate the scheme-aware duotone preset.', 'dark-theme' ); ?>"/></figure>
+		<!-- /wp:image -->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:paragraph {"align":"center","textColor":"secondary","fontSize":"small"} -->
+	<p class="has-text-align-center has-secondary-color has-text-color has-small-font-size"><?php echo esc_html__( 'Dark Theme uses Midnight Terminal by default and Paper Morning as its light alternative.', 'dark-theme' ); ?></p>
+	<!-- /wp:paragraph -->
+</main>
+<!-- /wp:group -->

dark-theme/readme.txt

@@ -0,0 +1,22 @@
+=== Dark Theme ===
+Contributors: wordpressdotorg
+Requires at least: 6.9
+Tested up to: 6.9
+Requires PHP: 7.4
+Stable tag: 0.0.1
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+A dark-first test theme for the experimental Gutenberg color-scheme data model.
+
+== Description ==
+
+This theme is a manual test fixture for WordPress/gutenberg#80698 and its
+scheme-aware duotone follow-up, WordPress/gutenberg#80746. Its base palette is
+the dark Midnight Terminal scheme, and it supplies the contrasting Paper Morning
+scheme through inline settings.color.light overrides.
+
+== Changelog ==
+
+= 0.0.1 =
+* Initial experimental test fixture.

dark-theme/style.css

@@ -0,0 +1,62 @@
+/*
+Theme Name: Dark Theme
+Theme URI: https://github.com/WordPress/community-themes/tree/trunk/dark-theme
+Author: the WordPress team
+Author URI: https://wordpress.org/
+Description: An experimental dark-first block theme for testing automatic color schemes.
+Requires at least: 6.9
+Tested up to: 6.9
+Requires PHP: 7.4
+Version: 0.0.1
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: dark-theme
+Tags: one-column, custom-colors, full-site-editing, wide-blocks
+*/
+
+.scheme-lab {
+	min-height: 100vh;
+}
+
+.scheme-lab__switcher {
+	align-items: center;
+	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
+	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
+	border-radius: 999px;
+	display: inline-flex;
+	gap: 0.25rem;
+	padding: 0.25rem;
+}
+
+.scheme-lab__switcher button {
+	background: transparent;
+	border: 0;
+	border-radius: 999px;
+	color: var(--wp--preset--color--contrast);
+	cursor: pointer;
+	font: inherit;
+	font-weight: 700;
+	padding: 0.55rem 0.9rem;
+}
+
+.scheme-lab__switcher button[aria-pressed="true"] {
+	background: var(--wp--preset--color--contrast);
+	color: var(--wp--preset--color--base);
+}
+
+.scheme-lab__switcher button:focus-visible {
+	outline: 3px solid var(--wp--preset--color--primary);
+	outline-offset: 2px;
+}
+
+.scheme-lab__card {
+	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
+	border-radius: 1rem;
+	overflow: hidden;
+}
+
+.scheme-lab__image img {
+	aspect-ratio: 16 / 9;
+	object-fit: cover;
+	width: 100%;
+}

dark-theme/templates/index.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"dark-theme/scheme-lab"} /-->