From 2877a67241baab7c22f1f13cd4ec420cf50ad26e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:41:46 +0900 Subject: [PATCH 1/6] Components: Add stylelint rule for theme var regressions --- packages/components/.stylelintrc.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 packages/components/.stylelintrc.js diff --git a/packages/components/.stylelintrc.js b/packages/components/.stylelintrc.js new file mode 100644 index 0000000000000..be2035d903731 --- /dev/null +++ b/packages/components/.stylelintrc.js @@ -0,0 +1,23 @@ +/** @type {import('stylelint').Config} */ +module.exports = { + extends: '../../.stylelintrc.json', + rules: { + 'declaration-property-value-disallowed-list': [ + { + '/.*/': '/--wp-admin-theme-/', + }, + { + message: + '--wp-admin-theme-* variables do not support component theming. Use Sass variables from packages/components/src/utils/theme-variables.scss instead.', + }, + ], + }, + overrides: [ + { + files: [ './src/utils/theme-variables.scss' ], + rules: { + 'declaration-property-value-disallowed-list': null, + }, + }, + ], +}; From 6037480dbc889febb2ee86aafc811467c91325ac Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:42:19 +0900 Subject: [PATCH 2/6] Disable rule for Button --- packages/components/src/button/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 0af5144d3d4b7..aa7d9a5cc018e 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -164,11 +164,13 @@ &:hover:not(:disabled, [aria-disabled="true"]) { // TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724) + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } &:active:not(:disabled, [aria-disabled="true"]) { // TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724) + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ background: rgba(var(--wp-admin-theme-color--rgb), 0.08); } From 0d7aceae1820aa38e1014cfa3b9b07fb0f82ad9b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:42:26 +0900 Subject: [PATCH 3/6] Fix in Guide --- packages/components/src/guide/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss index b2516edeff135..76f7b03ac4aaf 100644 --- a/packages/components/src/guide/style.scss +++ b/packages/components/src/guide/style.scss @@ -82,7 +82,7 @@ } li[aria-current="step"] .components-button { - color: var(--wp-components-color-accent, var(--wp-admin-theme-color)); + color: $components-color-accent; } } } From 1083948d348d415fee1deff7d7da8d21116b5dc1 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:42:32 +0900 Subject: [PATCH 4/6] Fix in Modal --- packages/components/src/modal/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 0933f836892f1..352f8dc8ba109 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -160,7 +160,7 @@ } &.is-scrollable:focus-visible { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; From 1f3e75a0ef21b55177c0872d0b946104e27a9fa9 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 23 Jan 2024 08:42:42 +0900 Subject: [PATCH 5/6] Fix in Placeholder --- packages/block-library/src/embed/editor.scss | 10 ++++++++-- packages/block-library/src/embed/embed-placeholder.js | 2 +- packages/components/src/placeholder/style.scss | 5 ----- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index 368784c22f38a..ae0b1fe1ee68b 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -16,9 +16,15 @@ .components-placeholder__error { word-break: break-word; } +} + +.wp-block-embed__learn-more { + margin-top: 1em; - .components-placeholder__learn-more { - margin-top: 1em; + @at-root .wp-block-post-content & { + a { + color: var(--wp-admin-theme-color); + } } } diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js index 5b9191c3446a7..9552bf9acf028 100644 --- a/packages/block-library/src/embed/embed-placeholder.js +++ b/packages/block-library/src/embed/embed-placeholder.js @@ -37,7 +37,7 @@ const EmbedPlaceholder = ( { { _x( 'Embed', 'button label' ) } -
+
Date: Tue, 23 Jan 2024 20:42:51 +0900 Subject: [PATCH 6/6] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 92ce15dc425f6..954357eb1ae68 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -17,6 +17,7 @@ ### 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)).