Components: Add eslint rule for theme var regressions (#58130)

* Components: Add eslint rule for theme var regressions * Fix in ItemGroup and DropdownMenuV2 * Update changelog * Fix new lint error in PaletteEdit * Fix changelog placement Including some entries from my recent PRs
WordPress · Jan 25, 2024 · c94f863 · c94f863
1 parent 3a283bc
commit c94f863
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -357,6 +357,26 @@ module.exports = {
 				'jsdoc/require-param': 'off',
 			},
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			excludedFiles: [ 'packages/components/src/utils/colors-values.js' ],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					{
+						selector: 'Literal[value=/--wp-admin-theme-/]',
+						message:
+							'--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
+					},
+					{
+						selector:
+							'TemplateElement[value.cooked=/--wp-admin-theme-/]',
+						message:
+							'--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/components/src/**' ],
 			excludedFiles: [ 'packages/components/src/**/@(test|stories)/**' ],

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)).
+
+### Experimental
+
+-   `Guide`, `Modal`: Restore accent color themability ([#58098](https://github.com/WordPress/gutenberg/pull/58098)).
+-   `DropdownMenuV2`: Restore accent color themability ([#58130](https://github.com/WordPress/gutenberg/pull/58130)).
+
 ## 25.16.0 (2024-01-24)
 
 ### Enhancements
@@ -19,13 +28,11 @@
 
 -   `ToggleGroupControl`: Improve controlled value detection ([#57770](https://github.com/WordPress/gutenberg/pull/57770)).
 -   `Tooltip`: Improve props forwarding to children of nested `Tooltip` components ([#57878](https://github.com/WordPress/gutenberg/pull/57878)).
--   `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)).
 -   `Tooltip`: revert prop types to only accept component-specific props ([#58125](https://github.com/WordPress/gutenberg/pull/58125)).
 -   `Button`: prevent the component from trashing and re-creating the HTML element ([#56490](https://github.com/WordPress/gutenberg/pull/56490)).
 
 ### Experimental
 
--   `Guide`, `Modal`: Restore accent color themability ([#58098](https://github.com/WordPress/gutenberg/pull/58098)).
 -   `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)).
 -   `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)).
 -   `Theme`: Set `color` on wrapper div ([#58095](https://github.com/WordPress/gutenberg/pull/58095)).

diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -180,7 +180,7 @@ const baseItem = css`
 
 	/* Keyboard focus (focus-visible) */
 	&[data-focus-visible] {
-		box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
+		box-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };
 
 		/* Only visible in Windows High Contrast mode */
 		outline: 2px solid transparent;

diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -35,10 +35,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-				var(
-					--wp-components-color-accent,
-					var( --wp-admin-theme-color, ${ COLORS.theme.accent } )
-				);
+				${ COLORS.theme.accent };
 			// Windows high contrast mode.
 			outline: 2px solid transparent;
 			outline-offset: 0;

diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
@@ -80,10 +80,7 @@ export const PaletteItem = styled( View )`
 	&:focus-visible {
 		border-color: transparent;
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			var(
-				--wp-components-color-accent,
-				var( --wp-admin-theme-color, ${ COLORS.theme.accent } )
-			);
+			${ COLORS.theme.accent };
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
 		outline-offset: 0;