From 1450b86b319bb7dc00d1f54eacbc165e5231bf59 Mon Sep 17 00:00:00 2001 From: slumbering Date: Thu, 3 Jun 2021 16:10:44 +0200 Subject: [PATCH] docs: :lipstick: apply dagger style Signed-off-by: slumbering --- tools/daggosaurus/docusaurus.config.js | 9 + tools/daggosaurus/src/css/custom.css | 180 ++++++++++++++---- tools/daggosaurus/src/theme/Toggle/index.js | 97 ++++++++++ .../src/theme/Toggle/styles.module.css | 105 ++++++++++ .../daggosaurus/static/img/Icon_Day-mode.svg | 1 + .../static/img/Icon_Night-mode.svg | 1 + 6 files changed, 356 insertions(+), 37 deletions(-) create mode 100644 tools/daggosaurus/src/theme/Toggle/index.js create mode 100644 tools/daggosaurus/src/theme/Toggle/styles.module.css create mode 100644 tools/daggosaurus/static/img/Icon_Day-mode.svg create mode 100644 tools/daggosaurus/static/img/Icon_Night-mode.svg diff --git a/tools/daggosaurus/docusaurus.config.js b/tools/daggosaurus/docusaurus.config.js index 0b5b11b1..5455e4b9 100644 --- a/tools/daggosaurus/docusaurus.config.js +++ b/tools/daggosaurus/docusaurus.config.js @@ -32,6 +32,15 @@ module.exports = { apiKey: 'cd4551565ea091140ab8f6c968ea670f', indexName: 'docs_dagger' }, + colorMode: { + // "light" | "dark" + defaultMode: 'light', + + switchConfig: { + darkIcon: "img/Icon_Night-mode.svg", + lightIcon: 'img/Icon_Day-mode.svg', + }, + }, }, presets: [ [ diff --git a/tools/daggosaurus/src/css/custom.css b/tools/daggosaurus/src/css/custom.css index ab082b6b..daf6d273 100644 --- a/tools/daggosaurus/src/css/custom.css +++ b/tools/daggosaurus/src/css/custom.css @@ -11,63 +11,48 @@ --ifm-color-primary-dark: #131226; --ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darkest: rgb(26, 136, 112); - --ifm-color-primary-light: #fffef3; + --ifm-color-primary-light: #fffef6; --ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-primary-lightest: rgb(146, 224, 208); - --ifm-code-font-size: 95%; + --ifm-color-secondary: #66ac9f50; --ifm-navbar-height: 5rem; --ifm-background-color: var(--ifm-color-primary-light); --ifm-navbar-background-color: var(--ifm-color-primary-light); + --ifm-menu-color: var(--ifm-color-primary-dark); --ifm-menu-color-active: var(--ifm-color-primary-dark); + --ifm-menu-color-background-hover: #fdf9d7; --ifm-font-family-base: "Karla", sans-serif; - /* --ifm-font-family-monospace: "Karla", sans-serif; */ + --ifm-font-family-monospace: "Courier new", sans-serif; + --ifm-code-background: var(--ifm-color-primary); + --ifm-code-font-size: 100%; + --ifm-code-border-radius: 2rem; + --ifm-code-color: var(--ifm-color-primary-light); + --ifm-code-padding-vertical: 0.3rem; + --ifm-code-padding-horizontal: 0.5rem; --ifm-h2-font-size: 2rem; --ifm-menu-color-background-active: var(--ifm-color-primary); --ifm-menu-color-active: var(--ifm-color-primary-light); --ifm-leading-desktop: 2; + --ifm-toc-border-color: transparent; + --ifm-toc-link-color: var(--ifm-color-primary-dark); + --ifm-font-color-base: var(--ifm-color-primary-dark); + --ifm-link-color: var(--ifm-color-primary-dark); + --ifm-link-hover-color: var(--ifm-color-primary); + --ifm-pre-padding: 2rem; + --ifm-pagination-nav-border-radius: 2rem; } html[data-theme="dark"] { --ifm-background-color: var(--ifm-color-primary-dark); --ifm-navbar-background-color: transparent; --ifm-menu-color-active: var(--ifm-color-primary-light); - --ifm-menu-color-active: var(--ifm-color-primary-light); --ifm-link-color: var(--ifm-color-primary-light); + --ifm-link-hover-color: var(--ifm-color-primary-light); + --ifm-toc-link-color: var(--ifm-color-primary-light); + --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light); } -#__docusaurus { - background-color: var(--ifm-color-primary-light); -} - -html[data-theme="dark"] #__docusaurus { - background: linear-gradient( - 180deg, - var(--ifm-color-primary-dark), - var(--ifm-color-primary) - ); -} - -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -.navbar__brand { - height: var(--ifm-navbar-height); -} - -.navbar { - max-width: var(--ifm-container-width-xl); - align-self: center; - box-shadow: none; -} - -.main-wrapper { - max-width: var(--ifm-container-width-xl); - align-self: center; -} +/* global */ h1, h2, @@ -90,6 +75,58 @@ p { line-height: 24px; } +#__docusaurus { + background-color: var(--ifm-color-primary-light); +} + +html[data-theme="dark"] #__docusaurus { + background: linear-gradient( + 180deg, + var(--ifm-color-primary-dark), + var(--ifm-color-primary) + ); +} + +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +/* navbar */ +.navbar__brand { + height: var(--ifm-navbar-height); +} + +.navbar { + max-width: var(--ifm-container-width-xl); + align-self: center; + box-shadow: none; +} + +/* main */ +.main-wrapper { + max-width: var(--ifm-container-width-xl); + align-self: center; +} + +main[class^="docMainContainer"] { + background: #ffffff; + box-shadow: 0px 4px 16px 4px #13122610; + border-radius: 2rem; + margin-top: 1rem; +} + +html[data-theme="dark"] main[class^="docMainContainer"] { + background: var(--ifm-color-primary); + box-shadow: 0px 4px 16px 4px #13122610; + border-radius: 2rem; + margin-top: 1rem; + color: #fffef6; +} + +/* table-of-contents */ .table-of-contents { font-size: 1rem; } @@ -101,3 +138,72 @@ html[data-theme="dark"] .table-of-contents__link--active, html[data-theme="dark"] .table-of-contents__link:hover { color: var(--ifm-color-primary-light); } + +/* codeBlock */ +div[class^="codeBlock"] { + border-radius: var(--ifm-code-border-radius); + background-color: var(--ifm-color-primary) !important; +} +html[data-theme="dark"] div[class^="codeBlock"] { + background-color: var(--ifm-color-primary-light) !important; +} + +div[class^="codeBlockLines"] .token-line { + color: var(--ifm-color-primary-light) !important; +} +html[data-theme="dark"] div[class^="codeBlockLines"] .token-line { + color: var(--ifm-color-primary) !important; +} +/* badge */ +.badge--secondary { + color: var(--ifm-color-primary-dark); +} + +/* hash-link */ +.hash-link { + color: #40b8bb; +} + +.hash-link:hover { + color: #175761; +} + +.hash-link:focus { + color: var(--ifm-color-primary-dark); +} + +/* link */ +.menu__link { + border-radius: 2rem; +} + +.menu__link:focus { + background-color: var(--ifm-color-primary-dark); + color: var(--ifm-color-primary-light); +} + +.menu__link:active { + background-color: var(--ifm-color-primary); + color: var(--ifm-color-primary-light); +} + +html[data-theme="dark"] .menu__link { + color: var(--ifm-color-primary-light); +} + +html[data-theme="dark"] .menu__link:hover { + color: var(--ifm-color-primary-dark); +} +html[data-theme="dark"] .menu__link[href=""]:hover, +html[data-theme="dark"] .menu__link[href="#"]:hover { + color: var(--ifm-color-primary-light); +} + +html[data-theme="dark"] .menu__link:focus { + color: var(--ifm-color-primary-light); +} + +html[data-theme="dark"] .menu__link:active { + background-color: var(--ifm-color-primary-light); + color: var(--ifm-color-primary-dark); +} diff --git a/tools/daggosaurus/src/theme/Toggle/index.js b/tools/daggosaurus/src/theme/Toggle/index.js new file mode 100644 index 00000000..cca8dc4a --- /dev/null +++ b/tools/daggosaurus/src/theme/Toggle/index.js @@ -0,0 +1,97 @@ +/** + * 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. + */ +import React, { useState, useRef, memo } from 'react'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import clsx from 'clsx'; +import styles from './styles.module.css'; +import DarkIcon from "../../../static/img/Icon_Night-mode.svg" +import LightIcon from "../../../static/img/Icon_Day-mode.svg" + +const Dark = ({ icon, style }) => ( + + + +); + +const Light = ({ icon, style }) => ( + + + +); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/). + +const Toggle = memo( + ({ className, icons, checked: defaultChecked, disabled, onChange }) => { + const [checked, setChecked] = useState(defaultChecked); + const [focused, setFocused] = useState(false); + const inputRef = useRef(null); + + const handleToggle = (e) => { + const checkbox = inputRef.current; + + if (!checkbox) { + return; + } + + if (e.target !== checkbox) { + e.preventDefault(); + checkbox.focus(); + checkbox.click(); + return; + } + + setChecked(checkbox?.checked); + }; + + return ( +
+
+
{icons.checked}
+
{icons.unchecked}
+
+
+ + setFocused(true)} + onBlur={() => setFocused(false)} + /> +
+ ); + }, +); +export default function (props) { + const { + colorMode: { + switchConfig: { darkIcon, darkIconStyle, lightIcon, lightIconStyle }, + }, + } = useThemeConfig(); + const { isClient } = useDocusaurusContext(); + return ( + , + unchecked: , + }} + {...props} + /> + ); +} diff --git a/tools/daggosaurus/src/theme/Toggle/styles.module.css b/tools/daggosaurus/src/theme/Toggle/styles.module.css new file mode 100644 index 00000000..68635249 --- /dev/null +++ b/tools/daggosaurus/src/theme/Toggle/styles.module.css @@ -0,0 +1,105 @@ +/** + * 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. + */ + +.toggle { + align-items: center; + display: flex; + height: 16px; + justify-content: center; + width: 21px; +} +.toggle::before { + position: absolute; +} + +/** + * styles for React Toggle + * copied over because we want to allow user to swizzle it and modify the css + * and also to make sure its compatible with our dark mode + * https://github.com/aaronshaf/react-toggle/blob/master/style.css + */ +:global(.react-toggle) { + touch-action: pan-x; + position: relative; + cursor: pointer; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +:global(.react-toggle-screenreader-only) { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + width: 1px; +} + +:global(.react-toggle--disabled) { + cursor: not-allowed; +} + +:global(.react-toggle-track) { + width: 55px; + height: 24px; + border-radius: 30px; + background-color: #40b8bb; + transition: all 0.2s ease; +} + +:global(.react-toggle-track-check) { + position: absolute; + width: 21px; + height: 16px; + top: 0px; + bottom: 0px; + margin: auto 0; + left: 6px; + opacity: 0; + transition: opacity 0.25s ease; +} + +:global([data-theme="dark"] .react-toggle .react-toggle-track-check), +:global(.react-toggle--checked .react-toggle-track-check) { + opacity: 1; + transition: opacity 0.25s ease; +} + +:global(.react-toggle-track-x) { + position: absolute; + width: 21px; + height: 16px; + top: 0px; + bottom: 0px; + margin: auto 0; + right: 6px; + opacity: 1; + transition: opacity 0.25s ease; +} + +:global([data-theme="dark"] .react-toggle .react-toggle-track-x), +:global(.react-toggle--checked .react-toggle-track-x) { + opacity: 0; +} + +:global(.react-toggle-thumb) { + position: absolute; + top: -1px; + left: 0; + width: 26px; + height: 26px; + border: 3px solid var(--ifm-color-primary-dark); + border-radius: 50%; + background-color: #fafafa; + transition: all 0.25s ease; +} + +:global([data-theme="dark"] .react-toggle .react-toggle-thumb), +:global(.react-toggle--checked .react-toggle-thumb) { + left: 31px; +} diff --git a/tools/daggosaurus/static/img/Icon_Day-mode.svg b/tools/daggosaurus/static/img/Icon_Day-mode.svg new file mode 100644 index 00000000..876ad3b2 --- /dev/null +++ b/tools/daggosaurus/static/img/Icon_Day-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tools/daggosaurus/static/img/Icon_Night-mode.svg b/tools/daggosaurus/static/img/Icon_Night-mode.svg new file mode 100644 index 00000000..aba67380 --- /dev/null +++ b/tools/daggosaurus/static/img/Icon_Night-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file