From 0282fe0a70a4f6b3724e81fa54357c68860eb54d Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:25:33 +0300 Subject: [PATCH 1/8] Social: prefix color tokens --- .../components/icons/style.module.scss | 24 +++++----- .../shared-extension-utils/src/icons.scss | 10 ++-- .../social-logos/src/social-logo-colors.css | 48 +++++++++---------- .../share-buttons/styles.module.scss | 2 +- .../blocks/sharing-button/style.scss | 42 ++++++++-------- 5 files changed, 63 insertions(+), 63 deletions(-) diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss index 42126d23cb00..4c754686ff64 100644 --- a/projects/js-packages/components/components/icons/style.module.scss +++ b/projects/js-packages/components/components/icons/style.module.scss @@ -13,11 +13,11 @@ fill: gb.$gray-700; &.bluesky { - fill: var(--color-bluesky); + fill: var(--jetpack-social-color-bluesky); } &.facebook { - fill: var(--color-facebook); + fill: var(--jetpack-social-color-facebook); // Add some specificity to override the border-radius on Jetpack settings page &:global(.social-logo) { border-radius: 50%; @@ -25,27 +25,27 @@ } &.twitter { - fill: var(--color-twitter); + fill: var(--jetpack-social-color-twitter); } &.linkedin { - fill: var(--color-linkedin); + fill: var(--jetpack-social-color-linkedin); } &.tumblr { - fill: var(--color-tumblr); + fill: var(--jetpack-social-color-tumblr); } &.google { - fill: var(--color-gplus); + fill: var(--jetpack-social-color-google-plus); } &.mastodon { - fill: var(--color-mastodon); + fill: var(--jetpack-social-color-mastodon); } &.nextdoor { - fill: var(--color-nextdoor); + fill: var(--jetpack-social-color-nextdoor); // Add some specificity to override the border-radius on Jetpack settings page &:global(.social-logo) { border-radius: 50%; @@ -53,15 +53,15 @@ } &.instagram { - fill: var(--color-instagram); + fill: var(--jetpack-social-color-instagram); } &.whatsapp { - fill: var(--color-whatsapp); + fill: var(--jetpack-social-color-whatsapp); } &.threads { - fill: var(--color-threads); + fill: var(--jetpack-social-color-threads); &:global(.social-logo) { border-radius: 40%; @@ -69,7 +69,7 @@ } &.x { - fill: var(--color-x); + fill: var(--jetpack-social-color-x); } } diff --git a/projects/js-packages/shared-extension-utils/src/icons.scss b/projects/js-packages/shared-extension-utils/src/icons.scss index bb481ba4ef91..2ad478b3c9fc 100644 --- a/projects/js-packages/shared-extension-utils/src/icons.scss +++ b/projects/js-packages/shared-extension-utils/src/icons.scss @@ -4,22 +4,22 @@ fill: gb.$gray-700; &.is-facebook { - fill: var(--color-facebook); + fill: var(--jetpack-social-color-facebook); } &.is-twitter { - fill: var(--color-twitter); + fill: var(--jetpack-social-color-twitter); } &.is-linkedin { - fill: var(--color-linkedin); + fill: var(--jetpack-social-color-linkedin); } &.is-tumblr { - fill: var(--color-tumblr); + fill: var(--jetpack-social-color-tumblr); } &.is-google { - fill: var(--color-gplus); + fill: var(--jetpack-social-color-google-plus); } } diff --git a/projects/js-packages/social-logos/src/social-logo-colors.css b/projects/js-packages/social-logos/src/social-logo-colors.css index 6fe2dc32a230..8642711fb163 100644 --- a/projects/js-packages/social-logos/src/social-logo-colors.css +++ b/projects/js-packages/social-logos/src/social-logo-colors.css @@ -1,26 +1,26 @@ :root { - --color-blogger: #ff5722; - --color-bluesky: #1185fe; - --color-eventbrite: #ff8000; - --color-facebook: #0866ff; - --color-godaddy: #5ea95a; - --color-google-plus: #df4a32; - --color-instagram: #d93174; - --color-linkedin: #0976b4; - --color-mastodon: #6364ff; - --color-medium: #12100e; - --color-nextdoor: #8ed500; - --color-pinterest: #cc2127; - --color-print: #f8f8f8; - --color-reddit: #ff4500; - --color-squarespace: #222; - --color-stumbleupon: #eb4924; - --color-substack: #ff6719; - --color-telegram: #08c; - --color-tumblr: #35465c; - --color-twitter: #55acee; - --color-threads: #000; - --color-whatsapp: #43d854; - --color-wix: #faad4d; - --color-x: #000; + --jetpack-social-color-blogger: #ff5722; + --jetpack-social-color-bluesky: #1185fe; + --jetpack-social-color-eventbrite: #ff8000; + --jetpack-social-color-facebook: #0866ff; + --jetpack-social-color-godaddy: #5ea95a; + --jetpack-social-color-google-plus: #df4a32; + --jetpack-social-color-instagram: #d93174; + --jetpack-social-color-linkedin: #0976b4; + --jetpack-social-color-mastodon: #6364ff; + --jetpack-social-color-medium: #12100e; + --jetpack-social-color-nextdoor: #8ed500; + --jetpack-social-color-pinterest: #cc2127; + --jetpack-social-color-print: #f8f8f8; + --jetpack-social-color-reddit: #ff4500; + --jetpack-social-color-squarespace: #222; + --jetpack-social-color-stumbleupon: #eb4924; + --jetpack-social-color-substack: #ff6719; + --jetpack-social-color-telegram: #08c; + --jetpack-social-color-tumblr: #35465c; + --jetpack-social-color-twitter: #55acee; + --jetpack-social-color-threads: #000; + --jetpack-social-color-whatsapp: #43d854; + --jetpack-social-color-wix: #faad4d; + --jetpack-social-color-x: #000; } diff --git a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss index f3cfc87c6519..f36db1833b23 100644 --- a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss +++ b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss @@ -40,7 +40,7 @@ $whatsapp: #2ab318; } .facebook { - background-color: var(--color-facebook); + background-color: var(--jetpack-social-color-facebook); // I hate !important, but social icon has it, so it needs to be overriden border-radius: var(--jp-border-radius) !important; } diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss index 0eb706a57862..1ce145c1b6f1 100644 --- a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss @@ -50,63 +50,63 @@ a.jetpack-sharing-button__button { color: #fff; &.share-bluesky { - background: var(--color-bluesky); + background: var(--jetpack-social-color-bluesky); } &.share-x { - background: #000; - } - - &.share-print { - background: #c5c2c2; + background: var(--jetpack-social-color-x); } &.share-reddit { - background: var(--color-reddit); + background: var(--jetpack-social-color-reddit); } &.share-facebook { - background: var(--color-facebook); + background: var(--jetpack-social-color-facebook); } &.share-linkedin { - background: var(--color-linkedin); - } - - &.share-mail { - background: #c5c2c2; + background: var(--jetpack-social-color-linkedin); } &.share-twitter { - background: var(--color-twitter); + background: var(--jetpack-social-color-twitter); } &.share-tumblr { - background: var(--color-tumblr); + background: var(--jetpack-social-color-tumblr); } &.share-pinterest { - background: var(--color-pinterest); + background: var(--jetpack-social-color-pinterest); } &.share-telegram { - background: var(--color-telegram); + background: var(--jetpack-social-color-telegram); } &.share-threads { - background: var(--color-threads); + background: var(--jetpack-social-color-threads); } &.share-whatsapp { - background: var(--color-whatsapp); + background: var(--jetpack-social-color-whatsapp); } &.share-mastodon { - background: var(--color-mastodon); + background: var(--jetpack-social-color-mastodon); } &.share-nextdoor { - background: var(--color-nextdoor); + background: var(--jetpack-social-color-nextdoor); + } + + &.share-print { + background: #c5c2c2; + } + + &.share-mail { + background: #c5c2c2; } &.share-share { From a83894d1100df4216947d33ffb42230c396586c1 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:32:07 +0300 Subject: [PATCH 2/8] changelog --- .../publicize/changelog/update-social-prefix-color-tokens | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/publicize/changelog/update-social-prefix-color-tokens diff --git a/projects/packages/publicize/changelog/update-social-prefix-color-tokens b/projects/packages/publicize/changelog/update-social-prefix-color-tokens new file mode 100644 index 000000000000..d850279c7e64 --- /dev/null +++ b/projects/packages/publicize/changelog/update-social-prefix-color-tokens @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Comment: Prefix --color-* variables into --jetpack-social-color-* CSS variables to avoid name collisions. From e02b83e27f940f3c6ce369a09121f68d24010444 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:43:16 +0300 Subject: [PATCH 3/8] Publicize: use --jetpack-social-color-whatsapp for share buttons. --- .../_inc/components/share-buttons/styles.module.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss index f36db1833b23..3e41c7877eb0 100644 --- a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss +++ b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss @@ -1,5 +1,3 @@ -$whatsapp: #2ab318; - .share-buttons { display: flex; flex-wrap: wrap; @@ -36,7 +34,7 @@ $whatsapp: #2ab318; } .whatsapp { - background-color: $whatsapp; + background-color: var(--jetpack-social-color-whatsapp); } .facebook { From bb3b66a5eab0c8dc2bd5abe14b153c34c0631788 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:50:49 +0300 Subject: [PATCH 4/8] Depend on social logos everywhere --- pnpm-lock.yaml | 25 +++++----- .../components/icons/style.module.scss | 25 +++++----- .../shared-extension-utils/package.json | 3 +- .../shared-extension-utils/src/icons.scss | 11 +++-- .../social-logos/src/social-logo-colors.css | 48 +++++++++---------- .../connection-icon/stories/index.stories.jsx | 2 +- .../share-buttons/styles.module.scss | 6 ++- .../update-social-prefix-color-tokens | 2 +- .../blocks/sharing-button/style.scss | 28 ++++++----- 9 files changed, 80 insertions(+), 70 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0e5f629ed56..1f54a3cb86e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1482,6 +1482,9 @@ importers: debug: specifier: 4.4.3 version: 4.4.3 + social-logos: + specifier: workspace:* + version: link:../social-logos devDependencies: '@automattic/jetpack-webpack-config': specifier: workspace:* @@ -8803,8 +8806,8 @@ packages: '@lezer/lr@1.4.3': resolution: {integrity: sha512-yenN5SqAxAPv/qMnpWW0AT7l+SxVrgG+u0tNsRQWqbrz66HIl8DnEbBObvy21J5K7+I1v7gsAnlE2VQ5yYVSeA==} - '@lezer/markdown@1.6.4': - resolution: {integrity: sha512-N0SxazMj4k65DBfaf1azqtMZd6u7MqluP84/NZnB/io8Td9aleFmAhz9hcbvSfsxT5tdYlJ5qgv5aMJGY4zEtA==} + '@lezer/markdown@1.7.1': + resolution: {integrity: sha512-MEBZeFSBxgteUjEC3Wxg2Dwld5/JxRKG267L3bMFdibm8KjqSdiJYBeFw1Nt1CM8+zKMpSIEHblY8FD9z38sJQ==} '@lezer/php@1.0.5': resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==} @@ -14845,8 +14848,8 @@ packages: jquery@3.7.1: resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==} - js-base64@3.8.0: - resolution: {integrity: sha512-65kvbemyZhj+ExQt1PEFyBEjL5vAHysu1lJdW1AwhhChkO8ZBPizYk/m9GVrpbS2Je1hF+UYZ+6KywqtZV8mHw==} + js-base64@3.8.1: + resolution: {integrity: sha512-5xVjhUZlHHeuO2W7w2rDFj/Kl1xLX+HjZxdOQwCsUOifl6UaoH1o1wsbsTMz+r0aeC7gCijvru02j6TfKZWzKg==} js-sha256@0.11.1: resolution: {integrity: sha512-o6WSo/LUvY2uC4j7mO50a2ms7E/EAdbP0swigLV+nzHKTTaYnaLIWJ02VdXrsJX0vGedDESQnLsOekr94ryfjg==} @@ -20078,7 +20081,7 @@ snapshots: '@codemirror/state': 6.5.2 '@codemirror/view': 6.38.0 '@lezer/common': 1.3.0 - '@lezer/markdown': 1.6.4 + '@lezer/markdown': 1.7.1 '@codemirror/lang-php@6.0.2': dependencies: @@ -21109,7 +21112,7 @@ snapshots: dependencies: '@lezer/common': 1.3.0 - '@lezer/markdown@1.6.4': + '@lezer/markdown@1.7.1': dependencies: '@lezer/common': 1.5.2 '@lezer/highlight': 1.2.3 @@ -23463,12 +23466,12 @@ snapshots: '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.107.2)': dependencies: webpack: 5.107.2(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack@5.107.2) + webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.107.2)': dependencies: webpack: 5.107.2(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack@5.107.2) + webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.5)(webpack@5.107.2)': dependencies: @@ -33672,7 +33675,7 @@ snapshots: jquery@3.7.1: {} - js-base64@3.8.0: {} + js-base64@3.8.1: {} js-sha256@0.11.1: {} @@ -37152,7 +37155,7 @@ snapshots: buffer-from: 1.1.2 combine-errors: 3.0.3 is-stream: 2.0.1 - js-base64: 3.8.0 + js-base64: 3.8.1 lodash.throttle: 4.1.1 proper-lockfile: 4.1.2 url-parse: 1.5.10 @@ -37750,7 +37753,7 @@ snapshots: watchpack: 2.5.1 webpack-sources: 3.5.0 optionalDependencies: - webpack-cli: 6.0.1(webpack@5.107.2) + webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) transitivePeerDependencies: - '@minify-html/node' - '@swc/core' diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss index 4c754686ff64..dccc451ecd83 100644 --- a/projects/js-packages/components/components/icons/style.module.scss +++ b/projects/js-packages/components/components/icons/style.module.scss @@ -1,3 +1,4 @@ +@use "social-logos/colors.css"; @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; .star-icon { @@ -13,11 +14,11 @@ fill: gb.$gray-700; &.bluesky { - fill: var(--jetpack-social-color-bluesky); + fill: var(--jetpack-social-logo-color-bluesky); } &.facebook { - fill: var(--jetpack-social-color-facebook); + fill: var(--jetpack-social-logo-color-facebook); // Add some specificity to override the border-radius on Jetpack settings page &:global(.social-logo) { border-radius: 50%; @@ -25,27 +26,27 @@ } &.twitter { - fill: var(--jetpack-social-color-twitter); + fill: var(--jetpack-social-logo-color-twitter); } &.linkedin { - fill: var(--jetpack-social-color-linkedin); + fill: var(--jetpack-social-logo-color-linkedin); } &.tumblr { - fill: var(--jetpack-social-color-tumblr); + fill: var(--jetpack-social-logo-color-tumblr); } &.google { - fill: var(--jetpack-social-color-google-plus); + fill: var(--jetpack-social-logo-color-google-plus); } &.mastodon { - fill: var(--jetpack-social-color-mastodon); + fill: var(--jetpack-social-logo-color-mastodon); } &.nextdoor { - fill: var(--jetpack-social-color-nextdoor); + fill: var(--jetpack-social-logo-color-nextdoor); // Add some specificity to override the border-radius on Jetpack settings page &:global(.social-logo) { border-radius: 50%; @@ -53,15 +54,15 @@ } &.instagram { - fill: var(--jetpack-social-color-instagram); + fill: var(--jetpack-social-logo-color-instagram); } &.whatsapp { - fill: var(--jetpack-social-color-whatsapp); + fill: var(--jetpack-social-logo-color-whatsapp); } &.threads { - fill: var(--jetpack-social-color-threads); + fill: var(--jetpack-social-logo-color-threads); &:global(.social-logo) { border-radius: 40%; @@ -69,7 +70,7 @@ } &.x { - fill: var(--jetpack-social-color-x); + fill: var(--jetpack-social-logo-color-x); } } diff --git a/projects/js-packages/shared-extension-utils/package.json b/projects/js-packages/shared-extension-utils/package.json index 4ac32257bba9..679ecda309c1 100644 --- a/projects/js-packages/shared-extension-utils/package.json +++ b/projects/js-packages/shared-extension-utils/package.json @@ -49,7 +49,8 @@ "@wordpress/ui": "0.17.0", "@wordpress/url": "4.50.0", "clsx": "2.1.1", - "debug": "4.4.3" + "debug": "4.4.3", + "social-logos": "workspace:*" }, "devDependencies": { "@automattic/jetpack-webpack-config": "workspace:*", diff --git a/projects/js-packages/shared-extension-utils/src/icons.scss b/projects/js-packages/shared-extension-utils/src/icons.scss index 2ad478b3c9fc..6b0cc09c054d 100644 --- a/projects/js-packages/shared-extension-utils/src/icons.scss +++ b/projects/js-packages/shared-extension-utils/src/icons.scss @@ -1,25 +1,26 @@ +@use "social-logos/colors.css"; @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; .jetpack-gutenberg-social-icon { fill: gb.$gray-700; &.is-facebook { - fill: var(--jetpack-social-color-facebook); + fill: var(--jetpack-social-logo-color-facebook); } &.is-twitter { - fill: var(--jetpack-social-color-twitter); + fill: var(--jetpack-social-logo-color-twitter); } &.is-linkedin { - fill: var(--jetpack-social-color-linkedin); + fill: var(--jetpack-social-logo-color-linkedin); } &.is-tumblr { - fill: var(--jetpack-social-color-tumblr); + fill: var(--jetpack-social-logo-color-tumblr); } &.is-google { - fill: var(--jetpack-social-color-google-plus); + fill: var(--jetpack-social-logo-color-google-plus); } } diff --git a/projects/js-packages/social-logos/src/social-logo-colors.css b/projects/js-packages/social-logos/src/social-logo-colors.css index 8642711fb163..9fcc969a64d9 100644 --- a/projects/js-packages/social-logos/src/social-logo-colors.css +++ b/projects/js-packages/social-logos/src/social-logo-colors.css @@ -1,26 +1,26 @@ :root { - --jetpack-social-color-blogger: #ff5722; - --jetpack-social-color-bluesky: #1185fe; - --jetpack-social-color-eventbrite: #ff8000; - --jetpack-social-color-facebook: #0866ff; - --jetpack-social-color-godaddy: #5ea95a; - --jetpack-social-color-google-plus: #df4a32; - --jetpack-social-color-instagram: #d93174; - --jetpack-social-color-linkedin: #0976b4; - --jetpack-social-color-mastodon: #6364ff; - --jetpack-social-color-medium: #12100e; - --jetpack-social-color-nextdoor: #8ed500; - --jetpack-social-color-pinterest: #cc2127; - --jetpack-social-color-print: #f8f8f8; - --jetpack-social-color-reddit: #ff4500; - --jetpack-social-color-squarespace: #222; - --jetpack-social-color-stumbleupon: #eb4924; - --jetpack-social-color-substack: #ff6719; - --jetpack-social-color-telegram: #08c; - --jetpack-social-color-tumblr: #35465c; - --jetpack-social-color-twitter: #55acee; - --jetpack-social-color-threads: #000; - --jetpack-social-color-whatsapp: #43d854; - --jetpack-social-color-wix: #faad4d; - --jetpack-social-color-x: #000; + --jetpack-social-logo-color-blogger: #ff5722; + --jetpack-social-logo-color-bluesky: #1185fe; + --jetpack-social-logo-color-eventbrite: #ff8000; + --jetpack-social-logo-color-facebook: #0866ff; + --jetpack-social-logo-color-godaddy: #5ea95a; + --jetpack-social-logo-color-google-plus: #df4a32; + --jetpack-social-logo-color-instagram: #d93174; + --jetpack-social-logo-color-linkedin: #0976b4; + --jetpack-social-logo-color-mastodon: #6364ff; + --jetpack-social-logo-color-medium: #12100e; + --jetpack-social-logo-color-nextdoor: #8ed500; + --jetpack-social-logo-color-pinterest: #cc2127; + --jetpack-social-logo-color-print: #f8f8f8; + --jetpack-social-logo-color-reddit: #ff4500; + --jetpack-social-logo-color-squarespace: #222; + --jetpack-social-logo-color-stumbleupon: #eb4924; + --jetpack-social-logo-color-substack: #ff6719; + --jetpack-social-logo-color-telegram: #08c; + --jetpack-social-logo-color-tumblr: #35465c; + --jetpack-social-logo-color-twitter: #55acee; + --jetpack-social-logo-color-threads: #000; + --jetpack-social-logo-color-whatsapp: #43d854; + --jetpack-social-logo-color-wix: #faad4d; + --jetpack-social-logo-color-x: #000; } diff --git a/projects/packages/publicize/_inc/components/connection-icon/stories/index.stories.jsx b/projects/packages/publicize/_inc/components/connection-icon/stories/index.stories.jsx index 49bd41b7fe77..7be65fa4bc4e 100644 --- a/projects/packages/publicize/_inc/components/connection-icon/stories/index.stories.jsx +++ b/projects/packages/publicize/_inc/components/connection-icon/stories/index.stories.jsx @@ -1,5 +1,5 @@ import ConnectionIcon from '../index.tsx'; -import '../../../../../../js-packages/social-logos/src/social-logo-colors.css'; +import 'social-logos/colors.css'; export default { title: 'Packages/Publicize/ConnectionIcon', diff --git a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss index 3e41c7877eb0..e9c2cbedd1a9 100644 --- a/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss +++ b/projects/packages/publicize/_inc/components/share-buttons/styles.module.scss @@ -1,3 +1,5 @@ +@use "social-logos/colors.css"; + .share-buttons { display: flex; flex-wrap: wrap; @@ -34,11 +36,11 @@ } .whatsapp { - background-color: var(--jetpack-social-color-whatsapp); + background-color: var(--jetpack-social-logo-color-whatsapp); } .facebook { - background-color: var(--jetpack-social-color-facebook); + background-color: var(--jetpack-social-logo-color-facebook); // I hate !important, but social icon has it, so it needs to be overriden border-radius: var(--jp-border-radius) !important; } diff --git a/projects/packages/publicize/changelog/update-social-prefix-color-tokens b/projects/packages/publicize/changelog/update-social-prefix-color-tokens index d850279c7e64..ecca17362e14 100644 --- a/projects/packages/publicize/changelog/update-social-prefix-color-tokens +++ b/projects/packages/publicize/changelog/update-social-prefix-color-tokens @@ -1,4 +1,4 @@ Significance: patch Type: changed -Comment: Prefix --color-* variables into --jetpack-social-color-* CSS variables to avoid name collisions. +Comment: Prefix --color-* variables into --jetpack-social-logo-color-* CSS variables to avoid name collisions. diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss index 1ce145c1b6f1..a2b7b8681bf6 100644 --- a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss @@ -1,3 +1,5 @@ +@use "social-logos/colors.css"; + a.jetpack-sharing-button__button { color: inherit; } @@ -50,55 +52,55 @@ a.jetpack-sharing-button__button { color: #fff; &.share-bluesky { - background: var(--jetpack-social-color-bluesky); + background: var(--jetpack-social-logo-color-bluesky); } &.share-x { - background: var(--jetpack-social-color-x); + background: var(--jetpack-social-logo-color-x); } &.share-reddit { - background: var(--jetpack-social-color-reddit); + background: var(--jetpack-social-logo-color-reddit); } &.share-facebook { - background: var(--jetpack-social-color-facebook); + background: var(--jetpack-social-logo-color-facebook); } &.share-linkedin { - background: var(--jetpack-social-color-linkedin); + background: var(--jetpack-social-logo-color-linkedin); } &.share-twitter { - background: var(--jetpack-social-color-twitter); + background: var(--jetpack-social-logo-color-twitter); } &.share-tumblr { - background: var(--jetpack-social-color-tumblr); + background: var(--jetpack-social-logo-color-tumblr); } &.share-pinterest { - background: var(--jetpack-social-color-pinterest); + background: var(--jetpack-social-logo-color-pinterest); } &.share-telegram { - background: var(--jetpack-social-color-telegram); + background: var(--jetpack-social-logo-color-telegram); } &.share-threads { - background: var(--jetpack-social-color-threads); + background: var(--jetpack-social-logo-color-threads); } &.share-whatsapp { - background: var(--jetpack-social-color-whatsapp); + background: var(--jetpack-social-logo-color-whatsapp); } &.share-mastodon { - background: var(--jetpack-social-color-mastodon); + background: var(--jetpack-social-logo-color-mastodon); } &.share-nextdoor { - background: var(--jetpack-social-color-nextdoor); + background: var(--jetpack-social-logo-color-nextdoor); } &.share-print { From c332840168d7205e62e6d51693947f1d8ac18ac4 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:52:45 +0300 Subject: [PATCH 5/8] Changelogs --- .../components/changelog/update-social-prefix-color-tokens | 4 ++++ .../changelog/update-social-prefix-color-tokens | 4 ++++ .../social-logos/changelog/update-social-prefix-color-tokens | 4 ++++ 3 files changed, 12 insertions(+) create mode 100644 projects/js-packages/components/changelog/update-social-prefix-color-tokens create mode 100644 projects/js-packages/shared-extension-utils/changelog/update-social-prefix-color-tokens create mode 100644 projects/js-packages/social-logos/changelog/update-social-prefix-color-tokens diff --git a/projects/js-packages/components/changelog/update-social-prefix-color-tokens b/projects/js-packages/components/changelog/update-social-prefix-color-tokens new file mode 100644 index 000000000000..ecca17362e14 --- /dev/null +++ b/projects/js-packages/components/changelog/update-social-prefix-color-tokens @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Comment: Prefix --color-* variables into --jetpack-social-logo-color-* CSS variables to avoid name collisions. diff --git a/projects/js-packages/shared-extension-utils/changelog/update-social-prefix-color-tokens b/projects/js-packages/shared-extension-utils/changelog/update-social-prefix-color-tokens new file mode 100644 index 000000000000..ecca17362e14 --- /dev/null +++ b/projects/js-packages/shared-extension-utils/changelog/update-social-prefix-color-tokens @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Comment: Prefix --color-* variables into --jetpack-social-logo-color-* CSS variables to avoid name collisions. diff --git a/projects/js-packages/social-logos/changelog/update-social-prefix-color-tokens b/projects/js-packages/social-logos/changelog/update-social-prefix-color-tokens new file mode 100644 index 000000000000..ecca17362e14 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/update-social-prefix-color-tokens @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Comment: Prefix --color-* variables into --jetpack-social-logo-color-* CSS variables to avoid name collisions. From ba121fe480ddae30f7a88372c9d8aee222832f08 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 16:53:57 +0300 Subject: [PATCH 6/8] Jetpack changelog --- .../jetpack/changelog/update-social-prefix-color-tokens | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/update-social-prefix-color-tokens diff --git a/projects/plugins/jetpack/changelog/update-social-prefix-color-tokens b/projects/plugins/jetpack/changelog/update-social-prefix-color-tokens new file mode 100644 index 000000000000..b40aa97a2297 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-social-prefix-color-tokens @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Comment: Prefix --color-* variables into --jetpack-social-logo-color-* CSS variables to avoid name collisions. From 9d57ed62d729e10b91376984a53969132374554a Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 18:11:51 +0300 Subject: [PATCH 7/8] Load in JS --- projects/js-packages/components/components/icons/index.tsx | 1 + .../js-packages/components/components/icons/style.module.scss | 1 - projects/js-packages/shared-extension-utils/src/icons.jsx | 1 + projects/js-packages/shared-extension-utils/src/icons.scss | 1 - 4 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/js-packages/components/components/icons/index.tsx b/projects/js-packages/components/components/icons/index.tsx index 6dd2a6346db1..c7e5f99ccd07 100644 --- a/projects/js-packages/components/components/icons/index.tsx +++ b/projects/js-packages/components/components/icons/index.tsx @@ -1,6 +1,7 @@ import { Path, SVG, G, Polygon } from '@wordpress/components'; import clsx from 'clsx'; import { SocialLogo } from 'social-logos'; +import 'social-logos/colors.css'; import styles from './style.module.scss'; import { BaseIconProps } from './types.ts'; import type { ComponentProps, ComponentType, FC, ReactNode } from 'react'; diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss index dccc451ecd83..bf1471b344a7 100644 --- a/projects/js-packages/components/components/icons/style.module.scss +++ b/projects/js-packages/components/components/icons/style.module.scss @@ -1,4 +1,3 @@ -@use "social-logos/colors.css"; @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; .star-icon { diff --git a/projects/js-packages/shared-extension-utils/src/icons.jsx b/projects/js-packages/shared-extension-utils/src/icons.jsx index 58b5aa3f6826..2b76f3eef265 100644 --- a/projects/js-packages/shared-extension-utils/src/icons.jsx +++ b/projects/js-packages/shared-extension-utils/src/icons.jsx @@ -1,6 +1,7 @@ import colorStudio from '@automattic/color-studio'; import { G, Path, Polygon, Rect, SVG, Circle } from '@wordpress/components'; import clsx from 'clsx'; +import 'social-logos/colors.css'; import './icons.scss'; diff --git a/projects/js-packages/shared-extension-utils/src/icons.scss b/projects/js-packages/shared-extension-utils/src/icons.scss index 6b0cc09c054d..5099fbb2d98d 100644 --- a/projects/js-packages/shared-extension-utils/src/icons.scss +++ b/projects/js-packages/shared-extension-utils/src/icons.scss @@ -1,4 +1,3 @@ -@use "social-logos/colors.css"; @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; .jetpack-gutenberg-social-icon { From 93fa77057133ec218ae2ad643fd5249e8341a990 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 10 Jul 2026 18:22:38 +0300 Subject: [PATCH 8/8] Update pnpm-lock.yaml --- pnpm-lock.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f54a3cb86e7..e6cb797b08cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23466,12 +23466,12 @@ snapshots: '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.107.2)': dependencies: webpack: 5.107.2(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) + webpack-cli: 6.0.1(webpack@5.107.2) '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.107.2)': dependencies: webpack: 5.107.2(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) + webpack-cli: 6.0.1(webpack@5.107.2) '@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.5)(webpack@5.107.2)': dependencies: @@ -37753,7 +37753,7 @@ snapshots: watchpack: 2.5.1 webpack-sources: 3.5.0 optionalDependencies: - webpack-cli: 6.0.1(webpack-dev-server@5.2.5)(webpack@5.107.2) + webpack-cli: 6.0.1(webpack@5.107.2) transitivePeerDependencies: - '@minify-html/node' - '@swc/core'