From 78ff7d38acbd90c49e13fb950cd51fa3f5f7ff09 Mon Sep 17 00:00:00 2001 From: endiliey Date: Thu, 14 Nov 2019 01:02:53 +0700 Subject: [PATCH] refactor(v2): split out dark mode toggle so it is easily swizzle-able --- .../src/theme/Navbar/index.js | 14 +- .../src/theme/Navbar/styles.module.css | 153 ----------------- .../src/theme/Toggle/index.js | 27 +++ .../src/theme/Toggle/styles.module.css | 159 ++++++++++++++++++ 4 files changed, 187 insertions(+), 166 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Toggle/index.js create mode 100644 packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index 333c37808427..13277c2756bd 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -6,14 +6,13 @@ */ import React, {useCallback, useState} from 'react'; -import Toggle from 'react-toggle'; - import Link from '@docusaurus/Link'; import Head from '@docusaurus/Head'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import SearchBar from '@theme/SearchBar'; +import Toggle from '@theme/Toggle'; import classnames from 'classnames'; @@ -42,9 +41,6 @@ function NavLink({to, href, label, position, ...props}) { ); } -const Moon = () => ; -const Sun = () => ; - function Navbar() { const context = useDocusaurusContext(); const [sidebarShown, setSidebarShown] = useState(false); @@ -133,10 +129,6 @@ function Navbar() { aria-label="Dark mode toggle" checked={theme === 'dark'} onChange={onToggleChange} - icons={{ - checked: , - unchecked: , - }} /> )} , - unchecked: , - }} /> )} diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css index c3e85fe7d811..fb1c5c12b39a 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css @@ -11,161 +11,8 @@ } } -.toggle { - align-items: center; - display: flex; - height: 10px; - justify-content: center; - position: relative; - width: 10px; -} -.toggle::before { - position: absolute; -} -.moon::before { - content: '\1F31C'; -} -.sun::before { - content: '\1F31E'; -} - @media (max-width: 360px) { .hideLogoText { display: none; } } - -/** - * styles for React Toggle - * copied over because we want to allow user to swizzle it and modify the css - * https://github.com/aaronshaf/react-toggle/blob/master/style.css - */ -:global(.react-toggle) { - touch-action: pan-x; - - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; -} - -:global(.react-toggle-screenreader-only) { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -:global(.react-toggle--disabled) { - cursor: not-allowed; - opacity: 0.5; - -webkit-transition: opacity 0.25s; - transition: opacity 0.25s; -} - -:global(.react-toggle-track) { - width: 50px; - height: 24px; - padding: 0; - border-radius: 30px; - background-color: #4d4d4d; - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; -} - -:global(.react-toggle-track-check) { - position: absolute; - width: 14px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -:global(.react-toggle--checked .react-toggle-track-check) { - opacity: 1; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -:global(.react-toggle-track-x) { - position: absolute; - width: 10px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -:global(.react-toggle--checked .react-toggle-track-x) { - opacity: 0; -} - -:global(.react-toggle-thumb) { - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid #4d4d4d; - border-radius: 50%; - background-color: #fafafa; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - -webkit-transition: all 0.25s ease; - -moz-transition: all 0.25s ease; - transition: all 0.25s ease; -} - -:global(.react-toggle--checked .react-toggle-thumb) { - left: 27px; - border-color: #19ab27; -} - -:global(.react-toggle--focus .react-toggle-thumb) { - -webkit-box-shadow: 0px 0px 3px 2px #0099e0; - -moz-box-shadow: 0px 0px 3px 2px #0099e0; - box-shadow: 0px 0px 2px 3px #0099e0; -} - -:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) { - -webkit-box-shadow: 0px 0px 5px 5px #0099e0; - -moz-box-shadow: 0px 0px 5px 5px #0099e0; - box-shadow: 0px 0px 5px 5px #0099e0; -} diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.js b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js new file mode 100644 index 000000000000..c49ff8ed1dde --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import Toggle from 'react-toggle'; + +import classnames from 'classnames'; +import styles from './styles.module.css'; + +const Moon = () => ; +const Sun = () => ; + +export default function(props) { + return ( + , + unchecked: , + }} + {...props} + /> + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css new file mode 100644 index 000000000000..dd8302fdfaef --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css @@ -0,0 +1,159 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.toggle { + align-items: center; + display: flex; + height: 10px; + justify-content: center; + position: relative; + width: 10px; +} +.toggle::before { + position: absolute; +} +.moon::before { + content: '\1F31C'; +} +.sun::before { + content: '\1F31E'; +} + +/** + * styles for React Toggle + * copied over because we want to allow user to swizzle it and modify the css + * https://github.com/aaronshaf/react-toggle/blob/master/style.css + */ +:global(.react-toggle) { + touch-action: pan-x; + + display: inline-block; + position: relative; + cursor: pointer; + background-color: transparent; + border: 0; + padding: 0; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; +} + +:global(.react-toggle-screenreader-only) { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +:global(.react-toggle--disabled) { + cursor: not-allowed; + opacity: 0.5; + -webkit-transition: opacity 0.25s; + transition: opacity 0.25s; +} + +:global(.react-toggle-track) { + width: 50px; + height: 24px; + padding: 0; + border-radius: 30px; + background-color: #4d4d4d; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; +} + +:global(.react-toggle-track-check) { + position: absolute; + width: 14px; + height: 10px; + top: 0px; + bottom: 0px; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + left: 8px; + opacity: 0; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; +} + +:global(.react-toggle--checked .react-toggle-track-check) { + opacity: 1; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; +} + +:global(.react-toggle-track-x) { + position: absolute; + width: 10px; + height: 10px; + top: 0px; + bottom: 0px; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + right: 10px; + opacity: 1; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; +} + +:global(.react-toggle--checked .react-toggle-track-x) { + opacity: 0; +} + +:global(.react-toggle-thumb) { + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border: 1px solid #4d4d4d; + border-radius: 50%; + background-color: #fafafa; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + transition: all 0.25s ease; +} + +:global(.react-toggle--checked .react-toggle-thumb) { + left: 27px; + border-color: #19ab27; +} + +:global(.react-toggle--focus .react-toggle-thumb) { + -webkit-box-shadow: 0px 0px 3px 2px #0099e0; + -moz-box-shadow: 0px 0px 3px 2px #0099e0; + box-shadow: 0px 0px 2px 3px #0099e0; +} + +:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) { + -webkit-box-shadow: 0px 0px 5px 5px #0099e0; + -moz-box-shadow: 0px 0px 5px 5px #0099e0; + box-shadow: 0px 0px 5px 5px #0099e0; +}