@docusaurus/theme-classic 3.8.1 → 3.9.0-canary-6403

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -12,7 +12,7 @@ import {
   useDocsPreferredVersion,
 } from '@docusaurus/plugin-content-docs/client';
 import {translate} from '@docusaurus/Translate';
-import {useLocation} from '@docusaurus/router';
+import {useHistorySelector} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 function getVersionItems(versions, configs) {
@@ -73,7 +73,8 @@ export default function DocsVersionDropdownNavbarItem({
   versions: configs,
   ...props
 }) {
-  const {search, hash} = useLocation();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
   const activeDocContext = useActiveDocContext(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
   const versionItems = useVersionItems({docsPluginId, configs});

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -8,33 +8,79 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
-import {useLocation} from '@docusaurus/router';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import styles from './styles.module.css';
+function useLocaleDropdownUtils() {
+  const {
+    siteConfig,
+    i18n: {localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
+  const getLocaleConfig = (locale) => {
+    const localeConfig = localeConfigs[locale];
+    if (!localeConfig) {
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
+    }
+    return localeConfig;
+  };
+  const getBaseURLForLocale = (locale) => {
+    const localeConfig = getLocaleConfig(locale);
+    const isSameDomain = localeConfig.url === siteConfig.url;
+    if (isSameDomain) {
+      // Shorter paths if localized sites are hosted on the same domain
+      // This reduces HTML size a bit
+      return `pathname://${alternatePageUtils.createUrl({
+        locale,
+        fullyQualified: false,
+      })}`;
+    }
+    return alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: true,
+    });
+  };
+  return {
+    getURL: (locale, options) => {
+      // We have 2 query strings because
+      // - there's the current one
+      // - there's one user can provide through navbar config
+      // see https://github.com/facebook/docusaurus/pull/8915
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
+      return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
+    },
+    getLabel: (locale) => {
+      return getLocaleConfig(locale).label;
+    },
+    getLang: (locale) => {
+      return getLocaleConfig(locale).htmlLang;
+    },
+  };
+}
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
   dropdownItemsAfter,
-  queryString = '',
+  queryString,
   ...props
 }) {
+  const utils = useLocaleDropdownUtils();
   const {
-    i18n: {currentLocale, locales, localeConfigs},
+    i18n: {currentLocale, locales},
   } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
-  const {search, hash} = useLocation();
   const localeItems = locales.map((locale) => {
-    const baseTo = `pathname://${alternatePageUtils.createUrl({
-      locale,
-      fullyQualified: false,
-    })}`;
-    // preserve ?search#hash suffix on locale switches
-    const to = `${baseTo}${search}${hash}${queryString}`;
     return {
-      label: localeConfigs[locale].label,
-      lang: localeConfigs[locale].htmlLang,
-      to,
+      label: utils.getLabel(locale),
+      lang: utils.getLang(locale),
+      to: utils.getURL(locale, {queryString}),
       target: '_self',
       autoAddBaseUrl: false,
       className:
@@ -57,7 +103,7 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale].label;
+    : utils.getLabel(currentLocale);
   return (
     <DropdownNavbarItem
       {...props}

package/lib/theme/Tabs/index.js

@@ -6,6 +6,7 @@
  */
 import React, {cloneElement} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
   useTabs,
@@ -111,7 +112,14 @@ function TabContent({lazy, children, selectedValue}) {
 function TabsComponent(props) {
   const tabs = useTabs(props);
   return (
-    <div className={clsx('tabs-container', styles.tabList)}>
+    <div
+      className={clsx(
+        ThemeClassNames.tabs.container,
+        // former name kept for backward compatibility
+        // see https://github.com/facebook/docusaurus/pull/4086
+        'tabs-container',
+        styles.tabList,
+      )}>
       <TabList {...tabs} {...props} />
       <TabContent {...tabs} {...props} />
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.8.1",
+  "version": "3.9.0-canary-6403",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,22 +20,21 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.8.1",
-    "@docusaurus/logger": "3.8.1",
-    "@docusaurus/mdx-loader": "3.8.1",
-    "@docusaurus/module-type-aliases": "3.8.1",
-    "@docusaurus/plugin-content-blog": "3.8.1",
-    "@docusaurus/plugin-content-docs": "3.8.1",
-    "@docusaurus/plugin-content-pages": "3.8.1",
-    "@docusaurus/theme-common": "3.8.1",
-    "@docusaurus/theme-translations": "3.8.1",
-    "@docusaurus/types": "3.8.1",
-    "@docusaurus/utils": "3.8.1",
-    "@docusaurus/utils-common": "3.8.1",
-    "@docusaurus/utils-validation": "3.8.1",
+    "@docusaurus/core": "3.9.0-canary-6403",
+    "@docusaurus/logger": "3.9.0-canary-6403",
+    "@docusaurus/mdx-loader": "3.9.0-canary-6403",
+    "@docusaurus/module-type-aliases": "3.9.0-canary-6403",
+    "@docusaurus/plugin-content-blog": "3.9.0-canary-6403",
+    "@docusaurus/plugin-content-docs": "3.9.0-canary-6403",
+    "@docusaurus/plugin-content-pages": "3.9.0-canary-6403",
+    "@docusaurus/theme-common": "3.9.0-canary-6403",
+    "@docusaurus/theme-translations": "3.9.0-canary-6403",
+    "@docusaurus/types": "3.9.0-canary-6403",
+    "@docusaurus/utils": "3.9.0-canary-6403",
+    "@docusaurus/utils-common": "3.9.0-canary-6403",
+    "@docusaurus/utils-validation": "3.9.0-canary-6403",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
-    "copy-text-to-clipboard": "^3.2.0",
     "infima": "0.2.0-alpha.45",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
@@ -60,7 +59,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "engines": {
-    "node": ">=18.0"
+    "node": ">=20.0"
   },
-  "gitHead": "fa8ae13e668fcbc0481ce10c0a734e2a5b397293"
+  "gitHead": "22c95f8cb5c070ce47e115be376fa9b828dd54df"
 }

package/src/index.ts

@@ -125,7 +125,6 @@ export default function themeClassic(
           {
             tagName: 'svg',
             attributes: {
-              xmlns: 'http://www.w3.org/2000/svg',
               style: 'display: none;',
             },
             innerHTML: SvgSpriteDefs,

package/src/inlineScripts.ts

@@ -15,7 +15,7 @@ const ThemeQueryStringKey = 'docusaurus-theme';
 const DataQueryStringPrefixKey = 'docusaurus-data-';
 
 export function getThemeInlineScript({
-  colorMode: {defaultMode, respectPrefersColorScheme},
+  colorMode: {disableSwitch, defaultMode, respectPrefersColorScheme},
   siteStorage,
 }: {
   colorMode: ThemeConfig['colorMode'];
@@ -25,28 +25,35 @@ export function getThemeInlineScript({
   // Make sure the key is the same as the one in the color mode React context
   // Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
   const themeStorageKey = `theme${siteStorage.namespace}`;
+  const isThemeUserConfigurable = !disableSwitch;
 
   /* language=js */
   return `(function() {
-    var defaultMode = '${defaultMode}';
-    var respectPrefersColorScheme = ${respectPrefersColorScheme};
-    function getSystemColorMode() {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    function getQueryStringTheme() {
-      try {
-        return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
-      } catch (e) {}
-    }
-    function getStoredTheme() {
-      try {
-        return window['${siteStorage.type}'].getItem('${themeStorageKey}');
-      } catch (err) {}
-    }
-    var initialTheme = getQueryStringTheme() || getStoredTheme();
-    document.documentElement.setAttribute('data-theme', initialTheme || (respectPrefersColorScheme ? getSystemColorMode() : defaultMode));
-    document.documentElement.setAttribute('data-theme-choice', initialTheme || (respectPrefersColorScheme ? 'system' : defaultMode));
-  })();`;
+  function getSystemColorMode() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+${
+  isThemeUserConfigurable
+    ? `  function getQueryStringTheme() {
+    try {
+      return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+    } catch (e) {}
+  }
+  function getStoredTheme() {
+    try {
+      return window['${siteStorage.type}'].getItem('${themeStorageKey}');
+    } catch (err) {}
+  }
+  var initialTheme = getQueryStringTheme() || getStoredTheme();`
+    : '  var initialTheme;'
+}
+  document.documentElement.setAttribute('data-theme', initialTheme || ${
+    respectPrefersColorScheme ? 'getSystemColorMode()' : `'${defaultMode}'`
+  });
+  document.documentElement.setAttribute('data-theme-choice', initialTheme || ${
+    respectPrefersColorScheme ? `'system'` : `'${defaultMode}'`
+  });
+})();`;
 }
 
 /* language=js */

package/src/theme/Blog/Components/Author/Socials/index.tsx

@@ -23,6 +23,7 @@ import Threads from '@theme/Icon/Socials/Threads';
 import Youtube from '@theme/Icon/Socials/YouTube';
 import Mastodon from '@theme/Icon/Socials/Mastodon';
 import Twitch from '@theme/Icon/Socials/Twitch';
+import Email from '@theme/Icon/Socials/Email';
 
 import styles from './styles.module.css';
 
@@ -42,6 +43,7 @@ const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
   mastodon: {Icon: Mastodon, label: 'Mastodon'},
   youtube: {Icon: Youtube, label: 'YouTube'},
   twitch: {Icon: Twitch, label: 'Twitch'},
+  email: {Icon: Email, label: 'Email'},
 };
 
 function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {
@@ -57,7 +59,7 @@ function SocialLink({platform, link}: {platform: string; link: string}) {
   const {Icon, label} = getSocialPlatformConfig(platform);
   return (
     <Link className={styles.authorSocialLink} href={link} title={label}>
-      <Icon className={clsx(styles.authorSocialLink)} />
+      <Icon className={clsx(styles.authorSocialIcon)} />
     </Link>
   );
 }

package/src/theme/Blog/Components/Author/index.tsx

@@ -30,10 +30,14 @@ function AuthorTitle({title}: {title: string}) {
 
 function AuthorName({name, as}: {name: string; as: Props['as']}) {
   if (!as) {
-    return <span className={styles.authorName}>{name}</span>;
+    return (
+      <span className={styles.authorName} translate="no">
+        {name}
+      </span>
+    );
   } else {
     return (
-      <Heading as={as} className={styles.authorName}>
+      <Heading as={as} className={styles.authorName} translate="no">
         {name}
       </Heading>
     );

package/src/theme/CodeBlock/Buttons/CopyButton/index.tsx

@@ -13,7 +13,6 @@ import React, {
   type ReactNode,
 } from 'react';
 import clsx from 'clsx';
-import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
 import Button from '@theme/CodeBlock/Buttons/Button';
@@ -53,11 +52,12 @@ function useCopyButton() {
   const copyTimeout = useRef<number | undefined>(undefined);
 
   const copyCode = useCallback(() => {
-    copy(code);
-    setIsCopied(true);
-    copyTimeout.current = window.setTimeout(() => {
-      setIsCopied(false);
-    }, 1000);
+    navigator.clipboard.writeText(code).then(() => {
+      setIsCopied(true);
+      copyTimeout.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    });
   }, [code]);
 
   useEffect(() => () => window.clearTimeout(copyTimeout.current), []);

package/src/theme/DocSidebarItem/Category/index.tsx

@@ -24,31 +24,51 @@ import {
   isActiveSidebarItem,
   findFirstSidebarItemLink,
   useDocSidebarItemsExpandedState,
+  useVisibleSidebarItems,
 } from '@docusaurus/plugin-content-docs/client';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
+import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
 import type {Props} from '@theme/DocSidebarItem/Category';
 
+import type {
+  PropSidebarItemCategory,
+  PropSidebarItemLink,
+} from '@docusaurus/plugin-content-docs';
+import styles from './styles.module.css';
+
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
   updateCollapsed,
+  activePath,
 }: {
   isActive: boolean;
   collapsed: boolean;
   updateCollapsed: (b: boolean) => void;
+  activePath: string;
 }) {
   const wasActive = usePrevious(isActive);
+  const previousActivePath = usePrevious(activePath);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
-    if (justBecameActive && collapsed) {
+    const stillActiveButPathChanged =
+      isActive && wasActive && activePath !== previousActivePath;
+    if ((justBecameActive || stillActiveButPathChanged) && collapsed) {
       updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, updateCollapsed]);
+  }, [
+    isActive,
+    wasActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+    previousActivePath,
+  ]);
 }
 
 /**
@@ -114,7 +134,56 @@ function CollapseButton({
   );
 }
 
-export default function DocSidebarItemCategory({
+function CategoryLinkLabel({label}: {label: string}) {
+  return (
+    <span title={label} className={styles.categoryLinkLabel}>
+      {label}
+    </span>
+  );
+}
+
+export default function DocSidebarItemCategory(props: Props): ReactNode {
+  const visibleChildren = useVisibleSidebarItems(
+    props.item.items,
+    props.activePath,
+  );
+  if (visibleChildren.length === 0) {
+    return <DocSidebarItemCategoryEmpty {...props} />;
+  } else {
+    return <DocSidebarItemCategoryCollapsible {...props} />;
+  }
+}
+
+function isCategoryWithHref(
+  category: PropSidebarItemCategory,
+): category is PropSidebarItemCategory & {href: string} {
+  return typeof category.href === 'string';
+}
+
+// If a category doesn't have any visible children, we render it as a link
+function DocSidebarItemCategoryEmpty({item, ...props}: Props): ReactNode {
+  // If the category has no link, we don't render anything
+  // It's not super useful to render a category you can't open nor click
+  if (!isCategoryWithHref(item)) {
+    return null;
+  }
+  // We remove props that don't make sense for a link and forward the rest
+  const {
+    type,
+    collapsed,
+    collapsible,
+    items,
+    linkUnlisted,
+    ...forwardableProps
+  } = item;
+  const linkItem: PropSidebarItemLink = {
+    type: 'link',
+    ...forwardableProps,
+  };
+  return <DocSidebarItemLink item={linkItem} {...props} />;
+}
+
+function DocSidebarItemCategoryCollapsible({
   item,
   onItemClick,
   activePath,
@@ -150,7 +219,12 @@ export default function DocSidebarItemCategory({
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
   };
-  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+  });
   useEffect(() => {
     if (
       collapsible &&
@@ -162,6 +236,29 @@ export default function DocSidebarItemCategory({
     }
   }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
 
+  const handleItemClick: ComponentProps<'a'>['onClick'] = (e) => {
+    onItemClick?.(item);
+    if (collapsible) {
+      if (href) {
+        // When already on the category's page, we collapse it
+        // We don't use "isActive" because it would collapse the
+        // category even when we browse a children element
+        // See https://github.com/facebook/docusaurus/issues/11213
+        if (isCurrentPage) {
+          e.preventDefault();
+          updateCollapsed();
+        } else {
+          // When navigating to a new category, we always expand
+          // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182
+          updateCollapsed(false);
+        }
+      } else {
+        e.preventDefault();
+        updateCollapsed();
+      }
+    }
+  };
+
   return (
     <li
       className={clsx(
@@ -178,43 +275,18 @@ export default function DocSidebarItemCategory({
           'menu__list-item-collapsible--active': isCurrentPage,
         })}>
         <Link
-          className={clsx('menu__link', {
+          className={clsx(styles.categoryLink, 'menu__link', {
             'menu__link--sublist': collapsible,
             'menu__link--sublist-caret': !href && collapsible,
             'menu__link--active': isActive,
           })}
-          onClick={
-            collapsible
-              ? (e) => {
-                  onItemClick?.(item);
-                  if (href) {
-                    // When already on the category's page, we collapse it
-                    // We don't use "isActive" because it would collapse the
-                    // category even when we browse a children element
-                    // See https://github.com/facebook/docusaurus/issues/11213
-                    if (isCurrentPage) {
-                      e.preventDefault();
-                      updateCollapsed();
-                    } else {
-                      // When navigating to a new category, we always expand
-                      // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182
-                      updateCollapsed(false);
-                    }
-                  } else {
-                    e.preventDefault();
-                    updateCollapsed();
-                  }
-                }
-              : () => {
-                  onItemClick?.(item);
-                }
-          }
+          onClick={handleItemClick}
           aria-current={isCurrentPage ? 'page' : undefined}
           role={collapsible && !href ? 'button' : undefined}
           aria-expanded={collapsible && !href ? !collapsed : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
-          {label}
+          <CategoryLinkLabel label={label} />
         </Link>
         {href && collapsible && (
           <CollapseButton

package/src/theme/DocSidebarItem/Category/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+.categoryLink {
+  overflow: hidden;
+}
+
+/*
+TODO merge this logic back in Infima?
+ */
+:global(.menu__link--sublist-caret)::after {
+  margin-left: var(--ifm-menu-link-padding-vertical);
+}
+
+.categoryLinkLabel {
+  flex: 1;
+  overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

package/src/theme/DocSidebarItem/Link/index.tsx

@@ -16,6 +16,14 @@ import type {Props} from '@theme/DocSidebarItem/Link';
 
 import styles from './styles.module.css';
 
+function LinkLabel({label}: {label: string}) {
+  return (
+    <span title={label} className={styles.linkLabel}>
+      {label}
+    </span>
+  );
+}
+
 export default function DocSidebarItemLink({
   item,
   onItemClick,
@@ -51,7 +59,7 @@ export default function DocSidebarItemLink({
           onClick: onItemClick ? () => onItemClick(item) : undefined,
         })}
         {...props}>
-        {label}
+        <LinkLabel label={label} />
         {!isInternalLink && <IconExternalLink />}
       </Link>
     </li>

package/src/theme/DocSidebarItem/Link/styles.module.css

@@ -8,3 +8,11 @@
 .menuExternalLink {
   align-items: center;
 }
+
+.linkLabel {
+  overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

package/src/theme/Heading/index.tsx

@@ -54,7 +54,8 @@ export default function Heading({as: As, id, ...props}: Props): ReactNode {
         className="hash-link"
         to={`#${id}`}
         aria-label={anchorTitle}
-        title={anchorTitle}>
+        title={anchorTitle}
+        translate="no">
         ​
       </Link>
     </As>

package/src/theme/Icon/ExternalLink/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/Icon/ExternalLink';
 
 import styles from './styles.module.css';
@@ -22,7 +23,11 @@ export default function IconExternalLink({
     <svg
       width={width}
       height={height}
-      aria-hidden="true"
+      aria-label={translate({
+        id: 'theme.IconExternalLink.ariaLabel',
+        message: '(opens in new tab)',
+        description: 'The ARIA label for the external link icon',
+      })}
       className={styles.iconExternalLink}>
       <use href={svgSprite} />
     </svg>

package/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>
   );
 }