@docusaurus/theme-classic 0.0.0-4241 → 0.0.0-4246

package/lib/index.js

@@ -149,7 +149,10 @@ options) {
     getTranslationFiles: async () => (0, _translations.getTranslationFiles)({
       themeConfig
     }),
-    translateThemeConfig: _translations.translateThemeConfig,
+    translateThemeConfig: params => (0, _translations.translateThemeConfig)({
+      themeConfig: params.themeConfig,
+      translationFiles: params.translationFiles
+    }),
 
     getDefaultCodeTranslationMessages() {
       return (0, _themeTranslations.readDefaultCodeTranslationMessages)({

package/lib/theme/Toggle/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = _default;
+exports.default = Toggle;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -27,32 +27,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function Dark({
-  icon,
-  style
-}) {
-  return <span className={(0, _clsx.default)(_stylesModule.default.toggleIcon, _stylesModule.default.dark)} style={style}>
-      {icon}
-    </span>;
-}
-
-function Light({
-  icon,
-  style
-}) {
-  return <span className={(0, _clsx.default)(_stylesModule.default.toggleIcon, _stylesModule.default.light)} style={style}>
-      {icon}
-    </span>;
-} // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-
-const Toggle = (0, _react.memo)(({
+// Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+const ToggleComponent = (0, _react.memo)(({
   className,
-  icons,
+  switchConfig,
   checked: defaultChecked,
   disabled,
   onChange
 }) => {
+  const {
+    darkIcon,
+    darkIconStyle,
+    lightIcon,
+    lightIconStyle
+  } = switchConfig;
   const [checked, setChecked] = (0, _react.useState)(defaultChecked);
   const [focused, setFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
@@ -69,8 +57,16 @@ const Toggle = (0, _react.memo)(({
 
       return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
     }}>
-          <div className={_stylesModule.default.toggleTrackCheck}>{icons.checked}</div>
-          <div className={_stylesModule.default.toggleTrackX}>{icons.unchecked}</div>
+          <div className={_stylesModule.default.toggleTrackCheck}>
+            <span className={_stylesModule.default.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={_stylesModule.default.toggleTrackX}>
+            <span className={_stylesModule.default.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={_stylesModule.default.toggleTrackThumb} />
         </div>
 
@@ -84,20 +80,12 @@ const Toggle = (0, _react.memo)(({
       </div>;
 });
 
-function _default(props) {
+function Toggle(props) {
   const {
     colorMode: {
-      switchConfig: {
-        darkIcon,
-        darkIconStyle,
-        lightIcon,
-        lightIconStyle
-      }
+      switchConfig
     }
   } = (0, _themeCommon.useThemeConfig)();
   const isBrowser = (0, _useIsBrowser.default)();
-  return <Toggle disabled={!isBrowser} icons={{
-    checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-    unchecked: <Light icon={lightIcon} style={lightIconStyle} />
-  }} {...props} />;
+  return <ToggleComponent switchConfig={switchConfig} disabled={!isBrowser} {...props} />;
 }

package/lib/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}

package/lib-next/index.js

@@ -123,7 +123,11 @@ export default function docusaurusThemeClassic(
       getTranslationFiles({
         themeConfig,
       }),
-    translateThemeConfig,
+    translateThemeConfig: (params) =>
+      translateThemeConfig({
+        themeConfig: params.themeConfig,
+        translationFiles: params.translationFiles,
+      }),
 
     getDefaultCodeTranslationMessages() {
       return readDefaultCodeTranslationMessages({

package/lib-next/theme/Toggle/index.js

@@ -8,26 +8,11 @@ import React, {useState, useRef, memo} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import clsx from 'clsx';
-import styles from './styles.module.css';
+import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
 
-function Dark({icon, style}) {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-      {icon}
-    </span>
-  );
-}
-
-function Light({icon, style}) {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-      {icon}
-    </span>
-  );
-} // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const Toggle = memo(
-  ({className, icons, checked: defaultChecked, disabled, onChange}) => {
+const ToggleComponent = memo(
+  ({className, switchConfig, checked: defaultChecked, disabled, onChange}) => {
+    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
     const [checked, setChecked] = useState(defaultChecked);
     const [focused, setFocused] = useState(false);
     const inputRef = useRef(null);
@@ -44,8 +29,16 @@ const Toggle = memo(
           role="button"
           tabIndex={-1}
           onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>{icons.checked}</div>
-          <div className={styles.toggleTrackX}>{icons.unchecked}</div>
+          <div className={styles.toggleTrackCheck}>
+            <span className={styles.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={styles.toggleTrackX}>
+            <span className={styles.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={styles.toggleTrackThumb} />
         </div>
 
@@ -69,20 +62,15 @@ const Toggle = memo(
     );
   },
 );
-export default function (props) {
+export default function Toggle(props) {
   const {
-    colorMode: {
-      switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
-    },
+    colorMode: {switchConfig},
   } = useThemeConfig();
   const isBrowser = useIsBrowser();
   return (
-    <Toggle
+    <ToggleComponent
+      switchConfig={switchConfig}
       disabled={!isBrowser}
-      icons={{
-        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
-      }}
       {...props}
     />
   );

package/lib-next/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4241",
+  "version": "0.0.0-4246",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4241",
-    "@docusaurus/plugin-content-blog": "0.0.0-4241",
-    "@docusaurus/plugin-content-docs": "0.0.0-4241",
-    "@docusaurus/plugin-content-pages": "0.0.0-4241",
-    "@docusaurus/theme-common": "0.0.0-4241",
-    "@docusaurus/theme-translations": "0.0.0-4241",
-    "@docusaurus/utils": "0.0.0-4241",
-    "@docusaurus/utils-validation": "0.0.0-4241",
+    "@docusaurus/core": "0.0.0-4246",
+    "@docusaurus/plugin-content-blog": "0.0.0-4246",
+    "@docusaurus/plugin-content-docs": "0.0.0-4246",
+    "@docusaurus/plugin-content-pages": "0.0.0-4246",
+    "@docusaurus/theme-common": "0.0.0-4246",
+    "@docusaurus/theme-translations": "0.0.0-4246",
+    "@docusaurus/utils": "0.0.0-4246",
+    "@docusaurus/utils-validation": "0.0.0-4246",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "chalk": "^4.1.2",
@@ -46,8 +46,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4241",
-    "@docusaurus/types": "0.0.0-4241",
+    "@docusaurus/module-type-aliases": "0.0.0-4246",
+    "@docusaurus/types": "0.0.0-4246",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "c9609b8c3e97c86812a67a377c7f0ebdca8b07f0"
+  "gitHead": "2ff272f38f0ca5c25bb6cc86998daff4cf5c7c76"
 }

package/src/index.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {DocusaurusContext, Plugin} from '@docusaurus/types';
+import {DocusaurusContext, Plugin, PostCssOptions} from '@docusaurus/types';
 import type {ThemeConfig} from '@docusaurus/theme-common';
 import {getTranslationFiles, translateThemeConfig} from './translations';
 import path from 'path';
 import {createRequire} from 'module';
-import type {AcceptedPlugin, Plugin as PostCssPlugin} from 'postcss';
+import type {Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 
@@ -132,7 +132,12 @@ export default function docusaurusThemeClassic(
     },
 
     getTranslationFiles: async () => getTranslationFiles({themeConfig}),
-    translateThemeConfig,
+
+    translateThemeConfig: (params) =>
+      translateThemeConfig({
+        themeConfig: params.themeConfig as ThemeConfig,
+        translationFiles: params.translationFiles,
+      }),
 
     getDefaultCodeTranslationMessages() {
       return readDefaultCodeTranslationMessages({
@@ -178,7 +183,7 @@ export default function docusaurusThemeClassic(
       };
     },
 
-    configurePostCss(postCssOptions: {plugins: AcceptedPlugin[]}) {
+    configurePostCss(postCssOptions: PostCssOptions) {
       if (direction === 'rtl') {
         const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
         const plugin: PostCssPlugin = {

package/src/theme/Toggle/index.tsx

@@ -5,46 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, memo, CSSProperties} from 'react';
+import React, {useState, useRef, memo} from 'react';
 import type {Props} from '@theme/Toggle';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, ColorModeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-interface IconProps {
-  icon: string;
-  style: CSSProperties;
-}
-
-function Dark({icon, style}: IconProps): JSX.Element {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-      {icon}
-    </span>
-  );
-}
-function Light({icon, style}: IconProps): JSX.Element {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-      {icon}
-    </span>
-  );
-}
-
 // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-const Toggle = memo(
+const ToggleComponent = memo(
   ({
     className,
-    icons,
+    switchConfig,
     checked: defaultChecked,
     disabled,
     onChange,
   }: Props & {
-    icons: {checked: JSX.Element; unchecked: JSX.Element};
+    switchConfig: ColorModeConfig['switchConfig'];
     disabled: boolean;
   }): JSX.Element => {
+    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
     const [checked, setChecked] = useState(defaultChecked);
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -62,8 +43,16 @@ const Toggle = memo(
           role="button"
           tabIndex={-1}
           onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>{icons.checked}</div>
-          <div className={styles.toggleTrackX}>{icons.unchecked}</div>
+          <div className={styles.toggleTrackCheck}>
+            <span className={styles.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={styles.toggleTrackX}>
+            <span className={styles.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={styles.toggleTrackThumb} />
         </div>
 
@@ -88,21 +77,16 @@ const Toggle = memo(
   },
 );
 
-export default function (props: Props): JSX.Element {
+export default function Toggle(props: Props): JSX.Element {
   const {
-    colorMode: {
-      switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
-    },
+    colorMode: {switchConfig},
   } = useThemeConfig();
   const isBrowser = useIsBrowser();
 
   return (
-    <Toggle
+    <ToggleComponent
+      switchConfig={switchConfig}
       disabled={!isBrowser}
-      icons={{
-        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
-      }}
       {...props}
     />
   );

package/src/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}

package/src/translations.ts

@@ -151,6 +151,8 @@ export function translateThemeConfig({
   themeConfig,
   translationFiles,
 }: {
+  // Why partial? To make TS correctly figure out the contravariance in parameter.
+  // In practice it's always normalized
   themeConfig: ThemeConfig;
   translationFiles: TranslationFile[];
 }): ThemeConfig {