diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0e5f629ed56..e6cb797b08cd 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 @@ -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 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/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 42126d23cb00..bf1471b344a7 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-logo-color-bluesky); } &.facebook { - fill: var(--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 +25,27 @@ } &.twitter { - fill: var(--color-twitter); + fill: var(--jetpack-social-logo-color-twitter); } &.linkedin { - fill: var(--color-linkedin); + fill: var(--jetpack-social-logo-color-linkedin); } &.tumblr { - fill: var(--color-tumblr); + fill: var(--jetpack-social-logo-color-tumblr); } &.google { - fill: var(--color-gplus); + fill: var(--jetpack-social-logo-color-google-plus); } &.mastodon { - fill: var(--color-mastodon); + fill: var(--jetpack-social-logo-color-mastodon); } &.nextdoor { - fill: var(--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 +53,15 @@ } &.instagram { - fill: var(--color-instagram); + fill: var(--jetpack-social-logo-color-instagram); } &.whatsapp { - fill: var(--color-whatsapp); + fill: var(--jetpack-social-logo-color-whatsapp); } &.threads { - fill: var(--color-threads); + fill: var(--jetpack-social-logo-color-threads); &:global(.social-logo) { border-radius: 40%; @@ -69,7 +69,7 @@ } &.x { - fill: var(--color-x); + fill: var(--jetpack-social-logo-color-x); } } 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/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.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 bb481ba4ef91..5099fbb2d98d 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-logo-color-facebook); } &.is-twitter { - fill: var(--color-twitter); + fill: var(--jetpack-social-logo-color-twitter); } &.is-linkedin { - fill: var(--color-linkedin); + fill: var(--jetpack-social-logo-color-linkedin); } &.is-tumblr { - fill: var(--color-tumblr); + fill: var(--jetpack-social-logo-color-tumblr); } &.is-google { - fill: var(--color-gplus); + fill: var(--jetpack-social-logo-color-google-plus); } } 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. 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..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 { - --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-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 f3cfc87c6519..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,4 +1,4 @@ -$whatsapp: #2ab318; +@use "social-logos/colors.css"; .share-buttons { display: flex; @@ -36,11 +36,11 @@ $whatsapp: #2ab318; } .whatsapp { - background-color: $whatsapp; + background-color: var(--jetpack-social-logo-color-whatsapp); } .facebook { - background-color: var(--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 new file mode 100644 index 000000000000..ecca17362e14 --- /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-logo-color-* CSS variables to avoid name collisions. 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. diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss index 0eb706a57862..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,63 +52,63 @@ a.jetpack-sharing-button__button { color: #fff; &.share-bluesky { - background: var(--color-bluesky); + background: var(--jetpack-social-logo-color-bluesky); } &.share-x { - background: #000; - } - - &.share-print { - background: #c5c2c2; + background: var(--jetpack-social-logo-color-x); } &.share-reddit { - background: var(--color-reddit); + background: var(--jetpack-social-logo-color-reddit); } &.share-facebook { - background: var(--color-facebook); + background: var(--jetpack-social-logo-color-facebook); } &.share-linkedin { - background: var(--color-linkedin); - } - - &.share-mail { - background: #c5c2c2; + background: var(--jetpack-social-logo-color-linkedin); } &.share-twitter { - background: var(--color-twitter); + background: var(--jetpack-social-logo-color-twitter); } &.share-tumblr { - background: var(--color-tumblr); + background: var(--jetpack-social-logo-color-tumblr); } &.share-pinterest { - background: var(--color-pinterest); + background: var(--jetpack-social-logo-color-pinterest); } &.share-telegram { - background: var(--color-telegram); + background: var(--jetpack-social-logo-color-telegram); } &.share-threads { - background: var(--color-threads); + background: var(--jetpack-social-logo-color-threads); } &.share-whatsapp { - background: var(--color-whatsapp); + background: var(--jetpack-social-logo-color-whatsapp); } &.share-mastodon { - background: var(--color-mastodon); + background: var(--jetpack-social-logo-color-mastodon); } &.share-nextdoor { - background: var(--color-nextdoor); + background: var(--jetpack-social-logo-color-nextdoor); + } + + &.share-print { + background: #c5c2c2; + } + + &.share-mail { + background: #c5c2c2; } &.share-share {