diff --git a/docs/docusaurus/.gitignore b/docs/docusaurus/.gitignore index 3c6ee54e99db..6c02775e3926 100644 --- a/docs/docusaurus/.gitignore +++ b/docs/docusaurus/.gitignore @@ -1,3 +1,4 @@ __MACOSX oss_docs_versions.zip docs/reference/api +/coverage/ diff --git a/docs/docusaurus/__mocks__/@theme/ThemedImage.js b/docs/docusaurus/__mocks__/@theme/ThemedImage.js new file mode 100644 index 000000000000..edf3157317e7 --- /dev/null +++ b/docs/docusaurus/__mocks__/@theme/ThemedImage.js @@ -0,0 +1,6 @@ +import React from 'react'; +export default function ThemedImage(props) { + return ( +
+ ) +} \ No newline at end of file diff --git a/docs/docusaurus/docusaurus.config.js b/docs/docusaurus/docusaurus.config.js index 2b8dbe251d58..769074694977 100644 --- a/docs/docusaurus/docusaurus.config.js +++ b/docs/docusaurus/docusaurus.config.js @@ -90,7 +90,7 @@ module.exports = { ] }, colorMode: { - disableSwitch: true, + disableSwitch: false, }, zoomSelector: '.markdown :not(em) > img', // announcementBar: { @@ -107,6 +107,7 @@ module.exports = { logo: { alt: 'Great Expectations', src: 'img/GXDocs.svg', + srcDark: 'img/GXDocs-dark.svg', href: 'https://greatexpectations.io', }, items: [ @@ -127,6 +128,11 @@ module.exports = { position: 'left', className: 'custom-search-bar', }, + { + type: 'custom-colorModeToggle', + position: 'left', + className: 'color-mode-toggle', + }, { type: 'custom-githubNavbarItem', position: 'left', diff --git a/docs/docusaurus/jest.config.js b/docs/docusaurus/jest.config.js index c4908f5321db..612e045628d1 100644 --- a/docs/docusaurus/jest.config.js +++ b/docs/docusaurus/jest.config.js @@ -8,6 +8,7 @@ module.exports = { "\\.(s?)css$": "identity-obj-proxy", "@docusaurus/(BrowserOnly|ComponentCreator|constants|ExecutionEnvironment|Head|Interpolate|isInternalUrl|Link|Noop|renderRoutes|router|Translate|use.*)": "identity-obj-proxy", + "@theme/ThemedImage": "/__mock__/@theme/ThemedImage.js", "@theme/(.*)": "@docusaurus/theme-classic/src/theme/$1", "@theme-original/(.*)": "identity-obj-proxy", "@site/(.*)": "website/$1", diff --git a/docs/docusaurus/src/components/GXCard/styles.module.css b/docs/docusaurus/src/components/GXCard/styles.module.css index 53aaa297357b..318233741c32 100644 --- a/docs/docusaurus/src/components/GXCard/styles.module.css +++ b/docs/docusaurus/src/components/GXCard/styles.module.css @@ -17,10 +17,6 @@ flex-wrap: wrap; } - html[data-theme="dark"] .gxCard { - background-color: var(--orange-700); - } - .button { display: inline-block; position: relative; @@ -54,6 +50,10 @@ border-color: var(--blue-600); background: none; } + + html[data-theme="dark"] .gxCard { + background-color: var(--dark-orange-dark-theme); + } html[data-theme="dark"] .button__outline { border-color: var(--blue-300); diff --git a/docs/docusaurus/src/components/LinkCard/styles.module.css b/docs/docusaurus/src/components/LinkCard/styles.module.css index c528f546048a..8aee5b2ff29d 100644 --- a/docs/docusaurus/src/components/LinkCard/styles.module.css +++ b/docs/docusaurus/src/components/LinkCard/styles.module.css @@ -22,7 +22,7 @@ } html[data-theme="dark"] .linkCard[href]:hover { - background-color: var(--orange-900); + background-color: var(--dark-orange-dark-theme); } .linkCard__icon { @@ -54,4 +54,15 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - } \ No newline at end of file + } + +[data-theme='dark'] .linkCard { + background-color: var(--card-background-dark-theme); + border-color: #4E4E4E; + box-shadow: var(--default-box-shadow); +} + +[data-theme='dark'] :global(.markdown) .linkCard img { + background-color: transparent; + margin: 0; +} \ No newline at end of file diff --git a/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/index.js b/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/index.js new file mode 100644 index 000000000000..a94fbb482673 --- /dev/null +++ b/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ColorModeToggle from '@theme-original/Navbar/ColorModeToggle'; +import styles from './styles.module.scss'; + +export default function CustomColorModeToggle(props) { + return ( +
+ +
+ ); +} diff --git a/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/styles.module.scss b/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/styles.module.scss new file mode 100644 index 000000000000..f5897957176d --- /dev/null +++ b/docs/docusaurus/src/components/NavbarItems/ColorModeToggle/styles.module.scss @@ -0,0 +1,13 @@ +@import '../../../css/sass_variables'; + +.colorModeToggle { + padding: var(--ifm-navbar-item-padding-vertical) 0.5rem var(--ifm-navbar-item-padding-vertical) 0.25rem; +} + +@media (max-width: $mobile-breakpoint) { + .colorModeToggle { + position: absolute; + right: calc(var(--ifm-navbar-padding-horizontal) + 4.5rem); + padding-right: 0; + } +} \ No newline at end of file diff --git a/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/index.js b/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/index.js index 94aa0d74ee12..7b096fecdd94 100644 --- a/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/index.js +++ b/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/index.js @@ -1,6 +1,7 @@ import React, {useEffect, useState} from 'react'; import styles from './styles.module.scss'; import useBaseUrl from "@docusaurus/useBaseUrl"; +import ThemedImage from '@theme/ThemedImage'; export default function GithubNavbarItem({ owner, repository, className }) { @@ -9,6 +10,7 @@ export default function GithubNavbarItem({ owner, repository, className }) { const [showGithubBadgeInfo, setShowGithubBadgeInfo] = useState(true); useEffect(() => { + fetch(`https://api.github.com/repos/${owner}/${repository}`) .then(response => response.json()) .then(data => { @@ -29,22 +31,26 @@ export default function GithubNavbarItem({ owner, repository, className }) { const githubLogoImg = useBaseUrl(`img/github.svg`); const starIcon = useBaseUrl(`img/star.svg`); const forkIcon = useBaseUrl(`img/code-branch.svg`); + const githubMarkDarkImg = useBaseUrl(`img/github-mark-dark.svg`); + const githubLogoDarkImg = useBaseUrl(`img/github-dark.svg`); + const starDarkIcon = useBaseUrl(`img/star-dark.svg`); + const forkDarkIcon = useBaseUrl(`img/code-branch-dark.svg`); return repository && ( - Github Invertocat Logo { showGithubBadgeInfo && (
- Github Logo
- Github Stargazers Count + {starsCount} - Github Forks Count + {forksCount}
diff --git a/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/styles.module.scss b/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/styles.module.scss index 2d575809ad0b..57d0f1431858 100644 --- a/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/styles.module.scss +++ b/docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/styles.module.scss @@ -5,7 +5,7 @@ gap: 0.25rem; align-items: flex-start; font-size: var(--p-tiny-font-size); - padding-right: 2rem; + padding: var(--ifm-navbar-item-padding-vertical) 2rem var(--ifm-navbar-item-padding-vertical) 0.25rem; } .githubBadgeNoErrors { @@ -62,3 +62,4 @@ a:hover { display: none; } } + diff --git a/docs/docusaurus/src/components/WasThisHelpful/styles.module.scss b/docs/docusaurus/src/components/WasThisHelpful/styles.module.scss index e43701d62fbc..6939b1d08ad5 100644 --- a/docs/docusaurus/src/components/WasThisHelpful/styles.module.scss +++ b/docs/docusaurus/src/components/WasThisHelpful/styles.module.scss @@ -113,7 +113,7 @@ .modalHeaderCloseButton { align-self: flex-end; cursor: pointer; - height: 8px; + height: 12px; margin: auto; } @@ -216,3 +216,45 @@ max-height: unset; } } + +[data-theme='dark'] { + .feedbackCard { + background-color: var(--payne-gray-color); + border-color: var(--payne-gray-color); + box-shadow: var(--default-box-shadow); + } + + .feedbackCardTitle { + color: var(--ifm-font-color-base); + } + + .feedbackButton:enabled:hover { + background-color: var(--dark-orange-dark-theme); + } + + .feedbackDivider { + border-color: var(--light-gray-dark-theme); + } + + .modal { + background-color: #222222; + } + + .modalTextInput { + border-color: #F4F4F7; + } + + .modalTextLabel { + color: var(--ifm-font-color-base); + } + + .modal .modalHeader img { + background-color: transparent; + margin: auto; + } + + .submitButton:disabled { + color: var(--light-gray-dark-theme); + background-color: var(--concrete-gray-color); + } +} diff --git a/docs/docusaurus/src/css/alerts.scss b/docs/docusaurus/src/css/alerts.scss index 81746c3decc1..8337163ce325 100644 --- a/docs/docusaurus/src/css/alerts.scss +++ b/docs/docusaurus/src/css/alerts.scss @@ -9,7 +9,7 @@ --ifm-color-success-dark: #B6C647; --ifm-color-warning-contrast-background: #FEFBF3; - --ifm-color-warning-dark: #F5CE4A; + --ifm-color-warning-dark: #F3C62D; --ifm-color-danger-contrast-background: #FEF6F9; --ifm-color-danger-dark: #E54F54; @@ -18,6 +18,14 @@ --color-cta-secondary-dark: var(--ifm-color-primary); } +:root[data-theme='dark'] { + --ifm-color-info-contrast-background: var(--card-background-dark-theme); + --ifm-color-success-contrast-background: var(--card-background-dark-theme); + --ifm-color-warning-contrast-background: var(--card-background-dark-theme); + --ifm-color-danger-contrast-background: var(--card-background-dark-theme); + --ifm-color-cta-contrast-background: var(--card-background-dark-theme); +} + .alert { border-width: 1px; border-left-width: var(--ifm-alert-border-left-width); diff --git a/docs/docusaurus/src/css/api_docs/api_docs.scss b/docs/docusaurus/src/css/api_docs/api_docs.scss index 1a7869f950b6..516a113afa32 100644 --- a/docs/docusaurus/src/css/api_docs/api_docs.scss +++ b/docs/docusaurus/src/css/api_docs/api_docs.scss @@ -34,7 +34,26 @@ background-color: #1e1e1e; } + [data-theme='dark'] & { + p { + color: var(--ifm-font-color-base); + } + + cite { + background-color: var(--gray-800); + border: none; + color: var(--ifm-font-color-base); + } + + pre { + border: none; + } + + .highlight pre { + background-color: var(--payne-gray-color); + border-color: transparent; + box-shadow: 0 3px 6px #00000029; + color: var(--ifm-font-color-base); + } + } } - - - diff --git a/docs/docusaurus/src/css/api_docs/pydata-sphinx-theme-modified.scss b/docs/docusaurus/src/css/api_docs/pydata-sphinx-theme-modified.scss index ba3ff72a99b2..873363cad627 100644 --- a/docs/docusaurus/src/css/api_docs/pydata-sphinx-theme-modified.scss +++ b/docs/docusaurus/src/css/api_docs/pydata-sphinx-theme-modified.scss @@ -8826,6 +8826,7 @@ a.text-dark:focus, a.text-dark:hover { } @media print { + [data-theme="light"] { *, :after, :before { box-shadow: none !important; text-shadow: none !important @@ -8883,6 +8884,7 @@ a.text-dark:focus, a.text-dark:hover { border-color: #dee2e6; color: inherit } + } } // Changed to * to apply to all elements since this file is imported under a selector @@ -10288,27 +10290,49 @@ nav.page-toc ul > li { } div.deprecated, div.versionadded, div.versionchanged { - background-color: var(--pst-color-on-background); - border-left: .2rem solid; - border-color: var(--pst-color-info); + border: 1px solid; border-radius: .25rem; - box-shadow: 0 .2rem .5rem var(--pst-color-shadow), 0 0 .0625rem var(--pst-color-shadow) !important; + box-shadow: none; margin: 1.5625em auto; overflow: hidden; padding: 0 .6rem; page-break-inside: avoid; position: relative; transition: color .25s, background-color .25s, border-color .25s; - vertical-align: middle -} + vertical-align: middle; + + p { + margin: 0.5rem 0 + } -div.deprecated > p, div.versionadded > p, div.versionchanged > p { - margin-bottom: .6rem; - margin-top: .6rem + p:before { + background-color: transparent; + } + + cite { + [data-theme='dark'] & { + color: var(--ifm-font-color-base); + } + } + + .deprecated:before, + .added:before, + .versionchanged:before{ + background-color: var(--ifm-font-color-base); + content: ''; + display: inline-block; + mask-size: cover; + height: 1em; + width: 1em; + } + + [data-theme='dark'] & { + background-color: var(--card-background-dark-theme); + } } + div.deprecated > p:before, div.versionadded > p:before, div.versionchanged > p:before { - background-color: var(--pst-color-info); content: ""; height: 100%; left: 0; @@ -10320,11 +10344,18 @@ div.deprecated > p:before, div.versionadded > p:before, div.versionchanged > p:b } div.versionadded { - border-color: var(--pst-color-success) -} + background-color: var(--ifm-color-success-contrast-background); + border: 1px solid var(--ifm-color-success-dark); + border-left-width: 6px; -div.versionadded p:before { - background-color: var(--pst-color-success) + cite { + background-color: var(--ifm-color-success-contrast-background); + border-color: var(--ifm-color-success-dark); + } + + .added:before { + mask: url("/static/img/admonition-info-icon.svg"); + } } div.versionchanged { @@ -10336,11 +10367,18 @@ div.versionchanged p:before { } div.deprecated { - border-color: var(--pst-color-danger) -} + background-color: var(--ifm-color-danger-contrast-background); + border: 1px solid var(--ifm-color-danger-dark); + border-left-width: 6px; -div.deprecated p:before { - background-color: var(--pst-color-danger) + .deprecated:before { + mask: url("/static/img/admonition-info-icon.svg"); + } + + cite { + background-color: var(--ifm-color-danger-contrast-background); + border-color: var(--ifm-color-danger-dark); + } } span.versionmodified { @@ -10359,7 +10397,7 @@ span.versionmodified:before { span.versionmodified.added:before { color: var(--pst-color-success); // Note: Color is currently hardcoded into the svg below: - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%2328a745' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E"); + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23a3b32f' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E"); } span.versionmodified.changed:before { @@ -10370,7 +10408,7 @@ span.versionmodified.changed:before { span.versionmodified.deprecated:before { color: var(--pst-color-danger); // Note: Color is currently hardcoded into the svg below: - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23dc3545' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E"); + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23d74148' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E"); } .sidebar-indices-items { @@ -10775,11 +10813,16 @@ div.literal-block-wrapper div[class*=highlight-] pre { box-shadow: none } -code.literal { +code .literal { background-color: var(--pst-color-surface); border: 1px solid var(--pst-color-on-surface); border-radius: .25rem; - padding: .1rem .25rem + padding: .1rem .25rem; +} + +[data-theme='dark'] code .literal { + background-color: var(--nero-black-color); + border: 1px solid var(--gray-900); } figure a.headerlink { diff --git a/docs/docusaurus/src/css/breadcrumbs.scss b/docs/docusaurus/src/css/breadcrumbs.scss index 320f919e0653..a0ad421f2336 100644 --- a/docs/docusaurus/src/css/breadcrumbs.scss +++ b/docs/docusaurus/src/css/breadcrumbs.scss @@ -16,3 +16,9 @@ .breadcrumbs:has(li:only-child) { display: none; } + +[data-theme='dark'] .breadcrumbs__item:not(:last-child)::after{ + background: url('/img/separator-dark.svg') center; + opacity: 1; + filter: invert(0); +} \ No newline at end of file diff --git a/docs/docusaurus/src/css/code_block.scss b/docs/docusaurus/src/css/code_block.scss index a61b132af520..86e1c7230717 100644 --- a/docs/docusaurus/src/css/code_block.scss +++ b/docs/docusaurus/src/css/code_block.scss @@ -1,5 +1,5 @@ :root { - --code-snippets-title-color: #FAFAFA; + --code-snippets-title-color: var(--pale-white-color); --code-snippets-title-background-color: #292F43; } diff --git a/docs/docusaurus/src/css/custom.scss b/docs/docusaurus/src/css/custom.scss index f2f3d1988530..9992e0ef3e40 100755 --- a/docs/docusaurus/src/css/custom.scss +++ b/docs/docusaurus/src/css/custom.scss @@ -23,12 +23,12 @@ /* You can override the default Infima variables here. */ :root { - --ifm-font-color-base: #404041; - --ifm-navbar-link-color: #404041; - --ifm-menu-color: #404041; + --ifm-font-color-base: var(--payne-gray-color); + --ifm-navbar-link-color: var(--payne-gray-color); + --ifm-menu-color: var(--payne-gray-color); --ifm-footer-title-color: #FF8D3A; --ifm-footer-link-color: #F8F8F8; - --ifm-footer-background-color: #404041; + --ifm-footer-background-color: var(--payne-gray-color); --ifm-color-primary: #ff6310; --ifm-color-primary-dark: #fd326b; --ifm-color-primary-darker: #fc215f; @@ -101,6 +101,16 @@ --gray-900: #1a1c1f; --link-hover-color: #A03E0A; + + --dark-orange-dark-theme: #66371D; + --card-background-dark-theme: #3C3C3C; + --light-gray-dark-theme: #6E6E6E; + --payne-gray-color: #404041; + --pale-white-color: #FAFAFA; + --nero-black-color: #262626; + --concrete-gray-color: #363637; + + --default-box-shadow: 0 3px 6px #00000029; } .markdown a, @@ -114,7 +124,12 @@ p > a { } h3 { - color: #404041; + color: var(--payne-gray-color); +} + +[data-theme='dark'] .markdown img{ + background-color: var(--white); + margin: 0.5rem } .docusaurus-highlight-code-line { @@ -296,3 +311,15 @@ li p + ol { .code-block-hide-line { display:none; } + +:root[data-theme='dark'] { + --ifm-font-color-base: var(--pale-white-color); + --ifm-navbar-link-color: var(--pale-white-color); + --ifm-menu-color: var(--pale-white-color); + --ifm-background-color: var(--nero-black-color); + --ifm-navbar-background-color: var(--nero-black-color); +} + +[data-theme='dark'] .markdown h3{ + color: var(--ifm-font-color-base); +} diff --git a/docs/docusaurus/src/css/left_navigation.scss b/docs/docusaurus/src/css/left_navigation.scss index efb853b349d1..776e2dea05df 100644 --- a/docs/docusaurus/src/css/left_navigation.scss +++ b/docs/docusaurus/src/css/left_navigation.scss @@ -99,4 +99,9 @@ li.menu__list-item { top: calc(50% + 2px); } } +} + +[data-theme='dark'] nav.menu { + background-color: var(--ifm-background-color); + border-right: 1px solid var(--light-gray-dark-theme); } \ No newline at end of file diff --git a/docs/docusaurus/src/css/navbar.scss b/docs/docusaurus/src/css/navbar.scss index 732c831a9835..39b0ad867688 100644 --- a/docs/docusaurus/src/css/navbar.scss +++ b/docs/docusaurus/src/css/navbar.scss @@ -4,10 +4,6 @@ --navbar-background-color: #F9F9FB; } -.navbar--fixed-top { - opacity: .95; -} - .navbar__link { font-weight: 700; font-size: 14px; @@ -81,8 +77,10 @@ padding: 0.5em var(--ifm-navbar-padding-horizontal); /* The number in this rule corresponds to the amount of links that - will be positioned in the right end of the tabs in the navbar */ - &:nth-last-child(2) { + will be positioned in the right end of the tabs in the navbar, + CURRENTLY the last three items are Resources, the color mode toggle + (not displayed since it has a .hidden class) and the Expectations Gallery */ + &:nth-last-child(3) { margin-left: auto; } } @@ -92,6 +90,11 @@ } } +[data-theme='dark'] .navbar__items--right { + background-color: #2e2f32; + border-bottom: 1px solid var(--gray-900); +} + .navbar__inner > div:first-child .navbar__item.dropdown { border: 1px solid var(--ifm-color-primary); border-radius: 6px; @@ -116,6 +119,14 @@ } } +[data-theme='dark'] .navbar__link--active { + color: var(--ifm-color-primary); +} + +[data-theme='dark'] .navbar__link::after { + filter: invert(1); +} + .header-cloud-link { border: none; border-radius: 35px; @@ -143,9 +154,17 @@ box-shadow: 0 3px 6px -1px var(--orange-300); } + [data-theme='dark'] .navbar-sidebar .header-cloud-link { + box-shadow: none; + } + .navbar-sidebar .github-badge { display: none; } + + .navbar-sidebar .color-mode-toggle { + display: none; + } } diff --git a/docs/docusaurus/src/css/overview_pages.scss b/docs/docusaurus/src/css/overview_pages.scss index 9a633dd126c3..5c2dc4df3355 100644 --- a/docs/docusaurus/src/css/overview_pages.scss +++ b/docs/docusaurus/src/css/overview_pages.scss @@ -1,5 +1,5 @@ @mixin overview-card-container { - background-color: #404041; + background-color: var(--payne-gray-color); color: var(--ifm-footer-link-color); margin-bottom: 2rem; padding: 2.5rem 3rem 2rem; diff --git a/docs/docusaurus/src/css/searchBar.scss b/docs/docusaurus/src/css/searchBar.scss index 775049f3f310..af9c47986767 100644 --- a/docs/docusaurus/src/css/searchBar.scss +++ b/docs/docusaurus/src/css/searchBar.scss @@ -1,3 +1,8 @@ +div .custom-search-bar { + padding: var(--ifm-navbar-item-padding-vertical) 0; + +} + .custom-search-bar .DocSearch-Button { background: none; @@ -13,3 +18,11 @@ display: none; } } + +[data-theme='dark'] .custom-search-bar .DocSearch-Button:hover { + background: none; +} + +[data-theme='dark'] .DocSearch-Form { + background: none; +} diff --git a/docs/docusaurus/src/css/tabs.scss b/docs/docusaurus/src/css/tabs.scss index 52d819bd9d7d..79e986c02e89 100644 --- a/docs/docusaurus/src/css/tabs.scss +++ b/docs/docusaurus/src/css/tabs.scss @@ -30,3 +30,7 @@ div[role="tabpanel"]{ } } } + +[data-theme='dark'] .tabs-container .tabs { + border-bottom: 2px solid var(--light-gray-dark-theme); +} diff --git a/docs/docusaurus/src/theme/DocCard/styles.module.css b/docs/docusaurus/src/theme/DocCard/styles.module.css index 27389d421071..024b2d64fbf2 100644 --- a/docs/docusaurus/src/theme/DocCard/styles.module.css +++ b/docs/docusaurus/src/theme/DocCard/styles.module.css @@ -2,7 +2,7 @@ a.cardContainer { --ifm-link-color: var(--ifm-color-emphasis-800); --ifm-link-hover-color: var(--ifm-color-emphasis-700); --ifm-link-hover-decoration: none; - + box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); border: 1px solid var(--ifm-color-emphasis-200); transition: all var(--ifm-transition-fast) ease; @@ -11,30 +11,35 @@ a.cardContainer { color: var(--ifm-font-color-base); text-decoration: none; } - + a.cardContainer:hover { color: var(--ifm-font-color-base); border-color: var(--ifm-color-primary); box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%); } - + .cardContainer *:last-child { margin-bottom: 0; } - + .cardTitle { font-size: 1.2rem; display: flex; align-items: center; gap: 0.7rem; } - + .cardTitle img { /* vertical-align: middle; */ max-height: 30px; width: auto; } - + .cardDescription { font-size: 0.8rem; - } \ No newline at end of file + } + +[data-theme='dark'] :global(.markdown) .cardTitle img { + background-color: transparent; + margin: 0; +} \ No newline at end of file diff --git a/docs/docusaurus/src/theme/Footer/Layout/index.js b/docs/docusaurus/src/theme/Footer/Layout/index.js index ea8dcf05147b..8ee3e2fb4f1d 100644 --- a/docs/docusaurus/src/theme/Footer/Layout/index.js +++ b/docs/docusaurus/src/theme/Footer/Layout/index.js @@ -1,5 +1,7 @@ import React from 'react'; import clsx from 'clsx'; +import styles from './styles.module.css'; + export default function FooterLayout({style, links, logo, copyright}) { return (
diff --git a/docs/docusaurus/src/theme/Footer/Layout/styles.module.css b/docs/docusaurus/src/theme/Footer/Layout/styles.module.css new file mode 100644 index 000000000000..bd8c60d93e5e --- /dev/null +++ b/docs/docusaurus/src/theme/Footer/Layout/styles.module.css @@ -0,0 +1,3 @@ +.privacyPolicy { + color: var(--pale-white-color); +} \ No newline at end of file diff --git a/docs/docusaurus/src/theme/Navbar/ColorModeToggle/index.js b/docs/docusaurus/src/theme/Navbar/ColorModeToggle/index.js new file mode 100644 index 000000000000..ba3adab7ef20 --- /dev/null +++ b/docs/docusaurus/src/theme/Navbar/ColorModeToggle/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ColorModeToggle from '@theme-original/Navbar/ColorModeToggle'; +import styles from './styles.module.scss'; + +export default function ColorModeToggleWrapper(props) { + return ( +
+ +
+ ); +} diff --git a/docs/docusaurus/src/theme/Navbar/ColorModeToggle/styles.module.scss b/docs/docusaurus/src/theme/Navbar/ColorModeToggle/styles.module.scss new file mode 100644 index 000000000000..3d40c1898b48 --- /dev/null +++ b/docs/docusaurus/src/theme/Navbar/ColorModeToggle/styles.module.scss @@ -0,0 +1,3 @@ +.hidden { + display: none; +} \ No newline at end of file diff --git a/docs/docusaurus/src/theme/NavbarItem/ComponentTypes.js b/docs/docusaurus/src/theme/NavbarItem/ComponentTypes.js index 415a769b4c3c..7c8ad77d61a1 100644 --- a/docs/docusaurus/src/theme/NavbarItem/ComponentTypes.js +++ b/docs/docusaurus/src/theme/NavbarItem/ComponentTypes.js @@ -3,8 +3,10 @@ // See https://github.com/facebook/docusaurus/issues/7227. import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; import GithubNavbarItem from '@site/src/components/NavbarItems/GithubNavbarItem'; +import ColorModeToggle from '@site/src/components/NavbarItems/ColorModeToggle'; export default { ...ComponentTypes, 'custom-githubNavbarItem': GithubNavbarItem, + 'custom-colorModeToggle': ColorModeToggle, }; diff --git a/docs/docusaurus/static/img/GXDocs-dark.svg b/docs/docusaurus/static/img/GXDocs-dark.svg new file mode 100644 index 000000000000..365f54d04a88 --- /dev/null +++ b/docs/docusaurus/static/img/GXDocs-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/docs/docusaurus/static/img/code-branch-dark.svg b/docs/docusaurus/static/img/code-branch-dark.svg new file mode 100644 index 000000000000..6f558812bb89 --- /dev/null +++ b/docs/docusaurus/static/img/code-branch-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/docusaurus/static/img/github-dark.svg b/docs/docusaurus/static/img/github-dark.svg new file mode 100644 index 000000000000..a876d98238f1 --- /dev/null +++ b/docs/docusaurus/static/img/github-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/docs/docusaurus/static/img/github-mark-dark.svg b/docs/docusaurus/static/img/github-mark-dark.svg new file mode 100644 index 000000000000..420d2cabc2d8 --- /dev/null +++ b/docs/docusaurus/static/img/github-mark-dark.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/docs/docusaurus/static/img/separator-dark.svg b/docs/docusaurus/static/img/separator-dark.svg new file mode 100644 index 000000000000..2c83d5db0032 --- /dev/null +++ b/docs/docusaurus/static/img/separator-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/docusaurus/static/img/star-dark.svg b/docs/docusaurus/static/img/star-dark.svg new file mode 100644 index 000000000000..20bc23839f57 --- /dev/null +++ b/docs/docusaurus/static/img/star-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file