fix(theme): remove hardcoded fill from Bluesky and LinkedIn icons (#11407)

Author: Simek

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<SVGSVGElement>): ReactNode {
@@ -16,11 +18,10 @@ function Bluesky(props: SVGProps<SVGSVGElement>): ReactNode {
       height="1em"
       preserveAspectRatio="xMidYMid"
       viewBox="0 0 256 226"
-      {...props}>
-      <path
-        fill="#1185FE"
-        d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
-      />
+      style={{'--dark': '#0085ff', '--light': '#0085ff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.blueskySvg)}>
+      <path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z" />
     </svg>
   );
 }

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);
+}

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<SVGSVGElement>): ReactNode {
@@ -16,11 +18,10 @@ function LinkedIn(props: SVGProps<SVGSVGElement>): ReactNode {
       height="1em"
       preserveAspectRatio="xMidYMid"
       viewBox="0 0 256 256"
-      {...props}>
-      <path
-        d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"
-        fill="#0A66C2"
-      />
+      style={{'--dark': '#0a66c2', '--light': '#ffffffe6'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.linkedinSvg)}>
+      <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" />
     </svg>
   );
 }

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);
+}