From 8f05fc0b6b43b8781893ac6b44f38d894ccac778 Mon Sep 17 00:00:00 2001 From: Simek Date: Fri, 12 Sep 2025 11:00:19 +0200 Subject: [PATCH 1/3] fix(theme): remove hardcoded fill from Bluesky and LinkedIn icons --- examples/classic-typescript/blog/authors.yml | 1 + .../src/theme/Icon/Socials/Bluesky/index.tsx | 13 +++++++------ .../theme/Icon/Socials/Bluesky/styles.module.css | 14 ++++++++++++++ .../src/theme/Icon/Socials/LinkedIn/index.tsx | 13 +++++++------ .../theme/Icon/Socials/LinkedIn/styles.module.css | 14 ++++++++++++++ 5 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css create mode 100644 packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css diff --git a/examples/classic-typescript/blog/authors.yml b/examples/classic-typescript/blog/authors.yml index 0fd398733b23..16fe457aa039 100644 --- a/examples/classic-typescript/blog/authors.yml +++ b/examples/classic-typescript/blog/authors.yml @@ -22,4 +22,5 @@ slorber: x: sebastienlorber linkedin: sebastienlorber github: slorber + bluesky: sebastienlorber.com newsletter: https://thisweekinreact.com diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx index 0f0c400bb42b..8033cabac310 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import type {SVGProps, ReactNode} from 'react'; +import type {SVGProps, ReactNode, CSSProperties} from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; // SVG Source: https://svgl.app/ function Bluesky(props: SVGProps): ReactNode { @@ -16,11 +18,10 @@ function Bluesky(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 226" - {...props}> - + style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} + {...props} + className={clsx(props.className, styles.blueskySvg)}> + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css new file mode 100644 index 000000000000..b7ad757675b7 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css @@ -0,0 +1,14 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +[data-theme='dark'] .blueskySvg { + fill: var(--light); +} + +[data-theme='light'] .blueskySvg { + fill: var(--dark); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 1970a5bcd1c7..2d2144e8af6b 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import type {ReactNode, SVGProps} from 'react'; +import type {SVGProps, ReactNode, CSSProperties} from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; // SVG Source: https://svgl.app/ function LinkedIn(props: SVGProps): ReactNode { @@ -16,11 +18,10 @@ function LinkedIn(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" - {...props}> - + style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} + {...props} + className={clsx(props.className, styles.linkedinSvg)}> + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css new file mode 100644 index 000000000000..dc1d40dc1eac --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css @@ -0,0 +1,14 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +[data-theme='dark'] .linkedinSvg { + fill: var(--light); +} + +[data-theme='light'] .linkedinSvg { + fill: var(--dark); +} From 175e6aee5ec71ceb3c24e73d0e3e7c6bc29c44a8 Mon Sep 17 00:00:00 2001 From: Simek Date: Fri, 12 Sep 2025 12:16:44 +0200 Subject: [PATCH 2/3] apply review feedback --- examples/classic-typescript/blog/authors.yml | 1 - .../src/theme/Icon/Socials/Bluesky/index.tsx | 2 +- .../src/theme/Icon/Socials/LinkedIn/index.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/examples/classic-typescript/blog/authors.yml b/examples/classic-typescript/blog/authors.yml index 16fe457aa039..0fd398733b23 100644 --- a/examples/classic-typescript/blog/authors.yml +++ b/examples/classic-typescript/blog/authors.yml @@ -22,5 +22,4 @@ slorber: x: sebastienlorber linkedin: sebastienlorber github: slorber - bluesky: sebastienlorber.com newsletter: https://thisweekinreact.com diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx index 8033cabac310..141bb4ed33a1 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx @@ -18,7 +18,7 @@ function Bluesky(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 226" - style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} + style={{'--dark': '#0085ff', '--light': '#0085ff'} as CSSProperties} {...props} className={clsx(props.className, styles.blueskySvg)}> diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 2d2144e8af6b..eeeaff543a43 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -18,7 +18,7 @@ function LinkedIn(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" - style={{'--dark': '#000', '--light': '#fff'} as CSSProperties} + style={{'--dark': '#ffffffe6', '--light': '#0a66c2'} as CSSProperties} {...props} className={clsx(props.className, styles.linkedinSvg)}> From 97f780e67a8ed6a5f7a44ac995c5a13a46fe8d15 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Fri, 12 Sep 2025 20:01:36 +0200 Subject: [PATCH 3/3] Update packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx --- .../src/theme/Icon/Socials/LinkedIn/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index eeeaff543a43..ad339a2e98a2 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -18,7 +18,7 @@ function LinkedIn(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" - style={{'--dark': '#ffffffe6', '--light': '#0a66c2'} as CSSProperties} + style={{'--dark': '#0a66c2', '--light': '#ffffffe6'} as CSSProperties} {...props} className={clsx(props.className, styles.linkedinSvg)}>