UI, DataViews: Give input and selection controls solid backgrounds

packages/base-styles/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Regenerate the WPDS fallback map with the solid neutral interactive background state tokens. ([#82391](https://github.com/WordPress/gutenberg/pull/82391))
+
 ### Enhancements
 
 -   Add a `$block-bg-padding` variable that resolves the default background padding through the `--wp--style--block-background-padding` custom property, keeping the existing values as its fallback ([#82024](https://github.com/WordPress/gutenberg/pull/82024)).

packages/base-styles/internal/_wpds-token-fallbacks.scss

@@ -33,6 +33,9 @@ $fallbacks: (
 	"--wpds-color-background-interactive-error-weak": "#0000",
 	"--wpds-color-background-interactive-error-weak-active": "#f6e6e3",
 	"--wpds-color-background-interactive-error-weak-disabled": "#0000",
+	"--wpds-color-background-interactive-neutral": "#fff",
+	"--wpds-color-background-interactive-neutral-active": "#fff",
+	"--wpds-color-background-interactive-neutral-disabled": "#fff",
 	"--wpds-color-background-interactive-neutral-strong": "#2d2d2d",
 	"--wpds-color-background-interactive-neutral-strong-active": "#1e1e1e",
 	"--wpds-color-background-interactive-neutral-strong-disabled": "#e6e6e6",

packages/dataviews/CHANGELOG.md

@@ -36,6 +36,7 @@
 
 ### Enhancements
 
+-   Give unselected multi-selection filter indicators solid, themed backgrounds. ([#82391](https://github.com/WordPress/gutenberg/pull/82391))
 -   Validated form controls: Use `--wpds-color-stroke-interactive-error` for the invalid-state focus ring and border ([#82410](https://github.com/WordPress/gutenberg/pull/82410)).
 -   DataForm: Communicate the timezone a `datetime` value is edited in. When the site timezone differs from the visitor's, the control renders help text under the input naming the site timezone: the zone name (e.g. `(CEST) Europe/Madrid`) or the UTC offset for sites pinned to one ([#82291](https://github.com/WordPress/gutenberg/pull/82291)).
 -   Export the `DataViewsProps` and `ItemWithId` types ([#82326](https://github.com/WordPress/gutenberg/pull/82326)).

packages/dataviews/src/components/dataviews-filters/style.scss

@@ -220,8 +220,9 @@
 		}
 
 		.dataviews-filters__search-widget-listitem-multi-selection {
+			/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+			background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong));
 			border-color: var(--wpds-color-stroke-interactive-brand-active);
-			background: var(--wpds-color-background-surface-neutral-strong);
 
 			&.is-selected {
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
@@ -289,7 +290,8 @@
 
 		@include checkbox-control;
 		position: relative;
-		background: var(--wpds-color-background-interactive-neutral-weak);
+		/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+		background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong));
 		color: var(--wpds-color-foreground-content-neutral);
 		margin: 0;
 		padding: 0;

packages/theme/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add neutral interactive background tokens for resting, active, and disabled input and selection control states. ([#82391](https://github.com/WordPress/gutenberg/pull/82391))
+
 ### Documentation
 
 -   Explain how consumers define light and dark themes through `ThemeProvider` color seeds ([#82039](https://github.com/WordPress/gutenberg/pull/82039)).

packages/theme/docs/tokens.md

@@ -205,6 +205,9 @@ The semantic token set is role-based, not a complete matrix of every property, t
 | `--wpds-color-background-surface-caution-weak`                | Background color for surfaces with caution tone and weak emphasis.                                                                          |
 | `--wpds-color-background-surface-error`                       | Background color for surfaces with error tone and normal emphasis.                                                                          |
 | `--wpds-color-background-surface-error-weak`                  | Background color for surfaces with error tone and weak emphasis.                                                                            |
+| `--wpds-color-background-interactive-neutral`                 | Solid background color for neutral interactive controls, such as input fields and unchecked checkboxes.                                     |
+| `--wpds-color-background-interactive-neutral-active`          | Solid background color for neutral interactive controls that are hovered, focused, or active.                                               |
+| `--wpds-color-background-interactive-neutral-disabled`        | Solid background color for neutral interactive controls in their disabled state.                                                            |
 | `--wpds-color-background-interactive-neutral-strong`          | Background color for interactive elements with neutral tone and strong emphasis.                                                            |
 | `--wpds-color-background-interactive-neutral-strong-active`   | Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active.                       |
 | `--wpds-color-background-interactive-neutral-strong-disabled` | Background color for interactive elements with neutral tone and strong emphasis, in their disabled state.                                   |

packages/theme/prebuilt/css/design-tokens.css

@@ -51,6 +51,12 @@
 	--wpds-color-background-surface-error: #f6e6e3;
 	/* Background color for surfaces with error tone and weak emphasis. */
 	--wpds-color-background-surface-error-weak: #fff6f5;
+	/* Solid background color for neutral interactive controls, such as input fields and unchecked checkboxes. */
+	--wpds-color-background-interactive-neutral: #fff;
+	/* Solid background color for neutral interactive controls that are hovered, focused, or active. */
+	--wpds-color-background-interactive-neutral-active: #fff;
+	/* Solid background color for neutral interactive controls in their disabled state. */
+	--wpds-color-background-interactive-neutral-disabled: #fff;
 	/* Background color for interactive elements with neutral tone and strong emphasis. */
 	--wpds-color-background-interactive-neutral-strong: #2d2d2d;
 	/* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */

packages/theme/prebuilt/js/design-token-fallbacks.mjs

@@ -31,6 +31,9 @@ export default {
 	'--wpds-color-background-interactive-error-weak': '#0000',
 	'--wpds-color-background-interactive-error-weak-active': '#f6e6e3',
 	'--wpds-color-background-interactive-error-weak-disabled': '#0000',
+	'--wpds-color-background-interactive-neutral': '#fff',
+	'--wpds-color-background-interactive-neutral-active': '#fff',
+	'--wpds-color-background-interactive-neutral-disabled': '#fff',
 	'--wpds-color-background-interactive-neutral-strong': '#2d2d2d',
 	'--wpds-color-background-interactive-neutral-strong-active': '#1e1e1e',
 	'--wpds-color-background-interactive-neutral-strong-disabled': '#e6e6e6',

packages/theme/prebuilt/js/design-tokens.mjs

@@ -28,6 +28,9 @@ export default [
 	'--wpds-color-background-surface-caution-weak',
 	'--wpds-color-background-surface-error',
 	'--wpds-color-background-surface-error-weak',
+	'--wpds-color-background-interactive-neutral',
+	'--wpds-color-background-interactive-neutral-active',
+	'--wpds-color-background-interactive-neutral-disabled',
 	'--wpds-color-background-interactive-neutral-strong',
 	'--wpds-color-background-interactive-neutral-strong-active',
 	'--wpds-color-background-interactive-neutral-strong-disabled',

packages/theme/src/prebuilt/ts/color-tokens.ts

@@ -87,7 +87,12 @@ export default {
 		'background-interactive-neutral-strong-disabled',
 	],
 	'bg-surface4': [ 'background-interactive-neutral-weak-active' ],
-	'bg-surface3': [ 'background-surface-neutral-strong' ],
+	'bg-surface3': [
+		'background-interactive-neutral',
+		'background-interactive-neutral-active',
+		'background-interactive-neutral-disabled',
+		'background-surface-neutral-strong',
+	],
 	'bg-fgSurface4': [
 		'foreground-content-neutral',
 		'foreground-interactive-neutral',

packages/theme/src/prebuilt/ts/token-types.ts

@@ -79,6 +79,7 @@ export type SurfaceBackgroundColor =
  * Background color variants for interactive elements.
  */
 export type InteractiveBackgroundColor =
+	| 'neutral'
 	| 'neutral-strong'
 	| 'neutral-weak'
 	| 'brand-strong'

packages/theme/src/semantic-color-contrast-pairs.ts

@@ -7,6 +7,26 @@
 export const MINIMUM_TEXT_CONTRAST = 4.5;
 
 export const SEMANTIC_COLOR_CONTRAST_PAIRS = [
+	{
+		background: 'background.interactive.neutral',
+		foreground: 'foreground.interactive.neutral',
+	},
+	{
+		background: 'background.interactive.neutral',
+		foreground: 'foreground.interactive.neutral-weak',
+	},
+	{
+		background: 'background.interactive.neutral-active',
+		foreground: 'foreground.interactive.neutral',
+	},
+	{
+		background: 'background.interactive.neutral-active',
+		foreground: 'foreground.interactive.neutral-weak',
+	},
+	{
+		background: 'background.interactive.neutral-weak-active',
+		foreground: 'foreground.interactive.neutral-active',
+	},
 	{
 		background: 'background.surface.neutral',
 		foreground: 'foreground.content.neutral',

packages/theme/src/test/build-plugin-parity.test.ts

@@ -119,6 +119,27 @@ describe( 'design token fallback build plugin parity', () => {
 		);
 	} );
 
+	it( 'keeps nested token fallbacks aligned across PostCSS and Lightning CSS', async () => {
+		const filename = join( fixturesDirectory, 'nested-fallback.css' );
+		const source = `
+.fixture {
+	background: var(--wpds-color-background-interactive-neutral-active, var(--wpds-color-background-surface-neutral-strong));
+}`;
+		const postcssResult = await postcss( [ postcssPlugin ] ).process(
+			source,
+			{ from: filename }
+		);
+		const lightningcssResult = transformWithLightningcss(
+			source,
+			filename
+		);
+		const expected =
+			'var(--wpds-color-background-interactive-neutral-active, var(--wpds-color-background-surface-neutral-strong, #fff))';
+
+		expect( postcssResult.css ).toContain( expected );
+		expect( lightningcssResult ).toContain( expected );
+	} );
+
 	it( 'leaves an empty var() fallback untouched in PostCSS', async () => {
 		const source = await readFile( emptyFallbackCssFixture, 'utf8' );
 		const result = await postcss( [ postcssPlugin ] ).process( source, {

packages/theme/src/test/use-theme-provider-styles.jsdom.test.tsx

@@ -135,6 +135,29 @@ describe( 'useThemeProviderStyles', () => {
 			).toBe( '#1e90ff' );
 		} );
 
+		it( 'emits neutral interactive background state properties from the background ramp', () => {
+			const { result } = renderHook( () =>
+				useThemeProviderStyles( { color: { background: '#222222' } } )
+			);
+			const styles = result.current.themeProviderStyles;
+
+			expect(
+				styles[ '--wpds-color-background-interactive-neutral' ]
+			).toBe(
+				styles[ '--wpds-color-background-surface-neutral-strong' ]
+			);
+			expect(
+				styles[ '--wpds-color-background-interactive-neutral-active' ]
+			).toBe(
+				styles[ '--wpds-color-background-surface-neutral-strong' ]
+			);
+			expect(
+				styles[ '--wpds-color-background-interactive-neutral-disabled' ]
+			).toBe(
+				styles[ '--wpds-color-background-surface-neutral-strong' ]
+			);
+		} );
+
 		it( 're-emits inherited color tokens so portaled subtrees can re-apply them', () => {
 			const wrapper = ( { children }: { children: ReactNode } ) => (
 				<ThemeProvider

packages/theme/tokens/color.json

@@ -1162,6 +1162,18 @@
 				}
 			},
 			"interactive": {
+				"neutral": {
+					"$value": "{wpds-color.primitive.bg.surface3}",
+					"$description": "Solid background color for neutral interactive controls, such as input fields and unchecked checkboxes."
+				},
+				"neutral-active": {
+					"$value": "{wpds-color.primitive.bg.surface3}",
+					"$description": "Solid background color for neutral interactive controls that are hovered, focused, or active."
+				},
+				"neutral-disabled": {
+					"$value": "{wpds-color.primitive.bg.surface3}",
+					"$description": "Solid background color for neutral interactive controls in their disabled state."
+				},
 				"neutral-strong": {
 					"$value": "{wpds-color.primitive.bg.bgFillInverted1}",
 					"$description": "Background color for interactive elements with neutral tone and strong emphasis."

packages/ui/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Enhancements
 
+-   Give input fields and checkboxes solid, state-aware themed backgrounds while keeping minimal Select triggers transparent. ([#82391](https://github.com/WordPress/gutenberg/pull/82391))
 -   `AlertDialog`, `Dialog`, `Drawer`, `Popover`, and `Tooltip`: Derive Trigger props from the corresponding Base UI components. ([#81824](https://github.com/WordPress/gutenberg/pull/81824))
 -   `Autocomplete.Status`, `Combobox.Status`: Add a `Status` subcomponent that announces async list status to screen readers. Item popups give Status its own collapsing grid row so a visible result count sits above the list without overlaying items ([#82195](https://github.com/WordPress/gutenberg/pull/82195)).
 -   `Autocomplete.Popup`, `Combobox.Popup`, `SearchableChipSelect`, `SearchableChipSelectControl`, `Select.Popup`, and `SelectControl`: Add `width` on Popups and `popupWidth` on composites, with preset width constraints (`anchor`, `content`, `sm`, `md`, `lg`, and `available`) for the item popup. `SelectControl` defaults to `content` to preserve prior popup sizing ([#82087](https://github.com/WordPress/gutenberg/pull/82087), [#82193](https://github.com/WordPress/gutenberg/pull/82193)).

packages/ui/src/form/primitives/checkbox/style.module.css

@@ -15,14 +15,17 @@
 				var(--wpds-border-width-xs) solid
 				var(--wpds-color-stroke-interactive-neutral);
 			padding: 0;
-			background-color: var(--wpds-color-background-interactive-neutral-weak);
+			/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+			background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong));
 
 			&:not([data-disabled]) {
 				cursor: var(--wpds-cursor-control);
 			}
 
 			[data-highlighted] &,
 			&:hover {
+				/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+				background-color: var(--wpds-color-background-interactive-neutral-active, var(--wpds-color-background-surface-neutral-strong));
 				border-color: var(--wpds-color-stroke-interactive-neutral-active);
 			}
 
@@ -34,7 +37,8 @@
 			}
 
 			&[data-disabled] {
-				background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
+				/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+				background-color: var(--wpds-color-background-interactive-neutral-disabled, var(--wpds-color-background-surface-neutral-strong));
 				border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
 				color: var(--wpds-color-foreground-interactive-neutral-disabled);
 

packages/ui/src/form/primitives/input-layout/style.module.css

@@ -7,7 +7,8 @@
 
 			display: flex;
 			height: var(--wpds-dimension-size-lg);
-			background-color: var(--wpds-color-background-interactive-neutral-weak);
+			/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+			background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong));
 			border-width: var(--wpds-border-width-xs);
 			border-style: solid;
 			border-color: var(--wpds-color-stroke-interactive-neutral);
@@ -33,7 +34,8 @@
 
 			&.is-disabled,
 			&:has([data-can-disable-input-layout][data-disabled]) {
-				background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
+				/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+				background-color: var(--wpds-color-background-interactive-neutral-disabled, var(--wpds-color-background-surface-neutral-strong));
 				border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
 				color: var(--wpds-color-foreground-interactive-neutral-disabled);
 
@@ -44,6 +46,7 @@
 			}
 
 			&.is-borderless {
+				background-color: var(--wpds-color-background-interactive-neutral-weak);
 				border-color: transparent;
 			}
 
@@ -55,6 +58,8 @@
 			}
 
 			&:hover:not(.is-disabled, :has([data-can-disable-input-layout][data-disabled]), .is-borderless) {
+				/* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+				background-color: var(--wpds-color-background-interactive-neutral-active, var(--wpds-color-background-surface-neutral-strong));
 				border-color: var(--wpds-color-stroke-interactive-neutral-active);
 			}