From 62deb84e64b90d3352c759152b89b09a665ebb4d Mon Sep 17 00:00:00 2001 From: david-on-github Date: Mon, 27 Jul 2026 18:21:58 -0400 Subject: [PATCH 01/28] Convert theme swizzles to TS, restructure CSS into partials, and polish UI Migrates ejected theme components from .js to .tsx and reorganizes src/css into per-concern partials (navbar, sidebar, breadcrumbs, pagination, footer, markdown, toc-mobile, etc.) under custom.scss. UI changes: single-icon color mode toggle, TOC "on this page" title replaced with an icon, animated left-aligned active indicator for the desktop TOC, flush/truncating mobile TOC and breadcrumbs, updated GitHub icon, and the navbar version dropdown restyled to match the "Open Markdown" dropdown. --- docusaurus.config.js | 29 +- src/css/_admonitions.scss | 26 + src/css/_breadcrumbs.scss | 55 ++ src/css/_code-blocks.scss | 36 + src/css/_feedback-widget.scss | 60 ++ src/css/_footer.scss | 22 + src/css/_markdown.scss | 150 +++ src/css/_navbar.scss | 86 ++ src/css/_pagination.scss | 47 + src/css/_search.scss | 99 ++ src/css/_sidebar.scss | 105 +++ src/css/_toc-mobile.scss | 23 + src/css/_utilities.scss | 45 + src/css/custom.scss | 870 +----------------- src/css/default-infima-variables.scss | 396 -------- src/css/fonts.scss | 1 - src/css/infima-variables.scss | 101 -- src/css/typography.scss | 3 - src/css/variables.scss | 268 ++++++ src/pages/index.module.scss | 4 +- src/theme/ColorModeToggle/MoonIcon.tsx | 22 +- src/theme/ColorModeToggle/SunIcon.tsx | 58 +- src/theme/ColorModeToggle/index.tsx | 130 +-- src/theme/ColorModeToggle/styles.module.scss | 147 +-- src/theme/DocItem/Content/index.js | 38 - src/theme/DocItem/Footer/index.tsx | 24 +- src/theme/DocItem/Layout/ListTreeIcon.tsx | 24 + src/theme/DocItem/Layout/index.tsx | 29 +- src/theme/DocItem/Layout/styles.module.scss | 37 +- src/theme/DocItem/Metadata/index.js | 14 - src/theme/DocItem/Paginator/index.js | 11 - src/theme/DocItem/TOC/Desktop/index.js | 15 - src/theme/DocItem/TOC/Mobile/index.js | 17 - .../DocItem/TOC/Mobile/styles.module.css | 12 - src/theme/DocItem/index.js | 19 - src/theme/DocPage/Layout/Main/index.tsx | 29 - .../DocPage/Layout/Main/styles.module.scss | 21 - .../Layout/Sidebar/ExpandButton/index.js | 28 - .../Sidebar/ExpandButton/styles.module.css | 27 - src/theme/DocPage/Layout/Sidebar/index.js | 67 -- .../DocPage/Layout/Sidebar/styles.module.css | 32 - src/theme/DocPage/Layout/index.tsx | 29 - src/theme/DocPage/Layout/styles.module.scss | 10 - src/theme/DocPage/index.tsx | 61 -- src/theme/EditThisPage/index.tsx | 7 +- src/theme/Footer/Copyright/index.js | 11 - src/theme/Footer/Layout/index.tsx | 10 +- src/theme/Footer/LinkItem/index.js | 25 - src/theme/Footer/Links/MultiColumn/index.js | 37 - src/theme/Footer/Links/Simple/index.js | 31 - src/theme/Footer/Links/index.js | 11 - src/theme/Footer/Logo/index.js | 35 - src/theme/Footer/Logo/styles.module.css | 9 - src/theme/Footer/index.tsx | 22 - .../Icon/ExternalLink/{index.js => index.tsx} | 9 +- .../{MDXComponents.js => MDXComponents.tsx} | 1 - ...m.js => DocsVersionDropdownNavbarItem.tsx} | 8 +- .../PaginatorNavLink/{index.js => index.tsx} | 6 +- src/theme/TOC/index.js | 19 - src/theme/TOC/index.tsx | 81 ++ src/theme/TOC/styles.module.css | 41 +- static/img/icon-chevron-down.svg | 1 + static/img/icon-external-link.svg | 1 + static/img/icon-github-dark.svg | 4 + static/img/icon-github.svg | 4 + tsconfig.json | 3 +- 66 files changed, 1411 insertions(+), 2292 deletions(-) create mode 100644 src/css/_admonitions.scss create mode 100644 src/css/_breadcrumbs.scss create mode 100644 src/css/_code-blocks.scss create mode 100644 src/css/_feedback-widget.scss create mode 100644 src/css/_footer.scss create mode 100644 src/css/_markdown.scss create mode 100644 src/css/_navbar.scss create mode 100644 src/css/_pagination.scss create mode 100644 src/css/_search.scss create mode 100644 src/css/_sidebar.scss create mode 100644 src/css/_toc-mobile.scss create mode 100644 src/css/_utilities.scss delete mode 100644 src/css/default-infima-variables.scss delete mode 100644 src/css/fonts.scss delete mode 100644 src/css/infima-variables.scss delete mode 100644 src/css/typography.scss create mode 100644 src/css/variables.scss delete mode 100644 src/theme/DocItem/Content/index.js create mode 100644 src/theme/DocItem/Layout/ListTreeIcon.tsx delete mode 100644 src/theme/DocItem/Metadata/index.js delete mode 100644 src/theme/DocItem/Paginator/index.js delete mode 100644 src/theme/DocItem/TOC/Desktop/index.js delete mode 100644 src/theme/DocItem/TOC/Mobile/index.js delete mode 100644 src/theme/DocItem/TOC/Mobile/styles.module.css delete mode 100644 src/theme/DocItem/index.js delete mode 100644 src/theme/DocPage/Layout/Main/index.tsx delete mode 100644 src/theme/DocPage/Layout/Main/styles.module.scss delete mode 100644 src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js delete mode 100644 src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css delete mode 100644 src/theme/DocPage/Layout/Sidebar/index.js delete mode 100644 src/theme/DocPage/Layout/Sidebar/styles.module.css delete mode 100644 src/theme/DocPage/Layout/index.tsx delete mode 100644 src/theme/DocPage/Layout/styles.module.scss delete mode 100644 src/theme/DocPage/index.tsx delete mode 100644 src/theme/Footer/Copyright/index.js delete mode 100644 src/theme/Footer/LinkItem/index.js delete mode 100644 src/theme/Footer/Links/MultiColumn/index.js delete mode 100644 src/theme/Footer/Links/Simple/index.js delete mode 100644 src/theme/Footer/Links/index.js delete mode 100644 src/theme/Footer/Logo/index.js delete mode 100644 src/theme/Footer/Logo/styles.module.css delete mode 100644 src/theme/Footer/index.tsx rename src/theme/Icon/ExternalLink/{index.js => index.tsx} (86%) rename src/theme/{MDXComponents.js => MDXComponents.tsx} (93%) rename src/theme/NavbarItem/{DocsVersionDropdownNavbarItem.js => DocsVersionDropdownNavbarItem.tsx} (85%) rename src/theme/PaginatorNavLink/{index.js => index.tsx} (82%) delete mode 100644 src/theme/TOC/index.js create mode 100644 src/theme/TOC/index.tsx create mode 100644 static/img/icon-chevron-down.svg create mode 100644 static/img/icon-external-link.svg create mode 100644 static/img/icon-github-dark.svg create mode 100644 static/img/icon-github.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index ba7e4588..fd1fa9c1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -57,7 +57,7 @@ const config = { defaultMode: "dark", }, navbar: { - title: null, + title: undefined, hideOnScroll: false, logo: { alt: "Source Network Documentation", @@ -277,7 +277,8 @@ const config = { // DefraDB instance [ "@docusaurus/plugin-content-docs", - { + /** @type {Partial} */ + ({ id: "defradb", path: "docs/defradb", routeBasePath: "defradb", @@ -295,12 +296,13 @@ const config = { const sidebarItems = await defaultSidebarItemsGenerator(args); return reverseSidebarChangelog(sidebarItems); }, - }, + }), ], // SourceHub instance [ "@docusaurus/plugin-content-docs", - { + /** @type {Partial} */ + ({ id: "sourcehub", path: "docs/sourcehub", routeBasePath: "sourcehub", @@ -323,12 +325,13 @@ const config = { const sidebarItems = await defaultSidebarItemsGenerator(args); return reverseSidebarChangelog(sidebarItems); }, - }, + }), ], // Orbis instance [ "@docusaurus/plugin-content-docs", - { + /** @type {Partial} */ + ({ id: "orbis", path: "docs/orbis", routeBasePath: "orbis", @@ -351,12 +354,13 @@ const config = { const sidebarItems = await defaultSidebarItemsGenerator(args); return reverseSidebarChangelog(sidebarItems); }, - }, + }), ], // LensVM instance [ "@docusaurus/plugin-content-docs", - { + /** @type {Partial} */ + ({ id: "lensvm", path: "docs/lensvm", routeBasePath: "lensvm", @@ -379,7 +383,7 @@ const config = { const sidebarItems = await defaultSidebarItemsGenerator(args); return reverseSidebarChangelog(sidebarItems); }, - }, + }), ], ], customFields: { @@ -389,12 +393,17 @@ const config = { module.exports = config; +/** + * @typedef {{type?: string, label?: string, items?: SidebarItem[]}} SidebarItem + */ + // Reverse the sidebar items ordering (including nested category items) +/** @param {SidebarItem[]} items */ function reverseSidebarChangelog(items) { // Reverse items in categories const result = items.map((item) => { if (item.type === "category" && item.label == "Release Notes") { - return { ...item, items: item.items.reverse() }; + return { ...item, items: (item.items ?? []).reverse() }; } return item; }); diff --git a/src/css/_admonitions.scss b/src/css/_admonitions.scss new file mode 100644 index 00000000..c7098c8d --- /dev/null +++ b/src/css/_admonitions.scss @@ -0,0 +1,26 @@ +.admonition { + .admonition-icon { + display: none; + } +} + +.alert { + --ifm-link-color: var(--ifm-color-primary); + + a { + text-decoration-color: var(--ifm-color-primary); + } +} + +// Override the black background with green for :::info admonitions +.alert--info { + --ifm-alert-background-color: #011a0b; +} + +// Visual indication of tabs length +.tabs-container { + .margin-top--md { + border-left: 2px var(--src-primary) solid; + padding-left: var(--ifm-tabs-padding-horizontal); + } +} diff --git a/src/css/_breadcrumbs.scss b/src/css/_breadcrumbs.scss new file mode 100644 index 00000000..90d41186 --- /dev/null +++ b/src/css/_breadcrumbs.scss @@ -0,0 +1,55 @@ +@use "./utils" as *; + +.theme-doc-breadcrumbs .breadcrumbs { + margin: 0; + font-size: rem(12px); + opacity: 0.7; + + &__item { + &:nth-child(2) { + .breadcrumbs__link { + padding-left: 0; + } + } + + &:first-child { + display: none; + } + + &:not(:last-child):after { + content: " /"; + display: inline-block; + color: var(--ifm-color-emphasis-500); + opacity: 1; + } + } + + // Items are display: inline-block (infima default) with no width limit, so + // a long segment just wraps the whole trail onto a second line instead of + // truncating. A vw-based max-width per link doesn't work reliably here: + // it's relative to the viewport, not this (narrower, padded) container, so + // multiple long segments can still sum past the real available width at + // very small sizes. Flex + min-width: 0 instead shrinks each item to + // whatever space is actually left in the container, however much that is. + @media (max-width: 996px) { + display: flex; + flex-wrap: nowrap; + + &__item { + display: flex; + align-items: center; + min-width: 0; + flex-shrink: 1; + + &--active { + flex-shrink: 0; + } + } + + &__link { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} diff --git a/src/css/_code-blocks.scss b/src/css/_code-blocks.scss new file mode 100644 index 00000000..cc47e904 --- /dev/null +++ b/src/css/_code-blocks.scss @@ -0,0 +1,36 @@ +.docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); + + [data-theme="dark"] & { + background-color: rgba(0, 0, 0, 0.3); + } +} + +.theme-code-block { + border: 1px solid var(--codeblock-title-border); + + // Color for highlighted lines in code blocks + .theme-code-block-highlighted-line { + border-left: 3px var(--ifm-color-primary) solid; + background-color: var(--codeblock-highlighted-line-background); + } + + // Squash together query and result code blocks, when one is placed immediately after another + &:has(+ .codeblock-result) { + margin-bottom: 0.313rem; // 5px + } + + // Override the title border + & [class*="codeBlockTitle"] { + border-bottom-color: var(--codeblock-title-border); + color: var(--ifm-color-content-secondary); + } +} + +// Override the large margin bottom on code blocks within list elements +li div.theme-code-block { + margin-bottom: 0px; +} diff --git a/src/css/_feedback-widget.scss b/src/css/_feedback-widget.scss new file mode 100644 index 00000000..da19dcb9 --- /dev/null +++ b/src/css/_feedback-widget.scss @@ -0,0 +1,60 @@ +.feedback-widget { + margin-top: 3rem; + text-align: center; + + &__title { + margin-bottom: 0.5rem; + font-size: 1rem; + opacity: 80%; + } + + &__status { + margin-top: 0.5rem; + font-size: 0.875rem; + + &--error { + color: var(--src-red); + } + } + + &__buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + } + + &__vote { + &--positive:hover .feedback-widget__button { + color: var(--ifm-color-primary); + } + + &--negative:hover .feedback-widget__button { + color: var(--src-red); + } + } + + &__button { + border: none; + background: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + opacity: 0.8; + transition: all 0.3s ease; + cursor: pointer; + + &:hover { + opacity: 1; + } + + svg { + display: block; + width: 18px; + height: 18px; + } + } +} diff --git a/src/css/_footer.scss b/src/css/_footer.scss new file mode 100644 index 00000000..0369668b --- /dev/null +++ b/src/css/_footer.scss @@ -0,0 +1,22 @@ +@use "./utils" as *; + +.footer { + margin-top: rem(40px); + + &__links { + @media (min-width: 997px) { + margin-bottom: rem(100px); + } + } + + &__logo { + width: 100%; + max-width: rem(160px); + margin: 0; + } +} + +.footer__copyright { + font-size: rem(12px); + margin: rem(30px) 0; +} diff --git a/src/css/_markdown.scss b/src/css/_markdown.scss new file mode 100644 index 00000000..1b58614e --- /dev/null +++ b/src/css/_markdown.scss @@ -0,0 +1,150 @@ +.markdown h1:first-child { + --ifm-h1-font-size: var(--h1-base-font-size); +} + +// External link icon indicator +.theme-doc-markdown a[target="_blank"]::after { + content: ""; + display: inline-block; + width: 0.75em; + height: 0.609375em; + margin-left: 0.2em; + vertical-align: baseline; + transform: rotate(-45deg); + background-color: currentColor; + mask-image: url("/img/icon-external-link.svg"); + mask-size: contain; + mask-repeat: no-repeat; + -webkit-mask-image: url("/img/icon-external-link.svg"); + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +@media (min-width: 800px) { + .sidebyside-left { + float: left; + width: 49%; + } + .sidebyside-right { + float: right; + width: 49%; + } + .sidebyside-clear { + clear: both; + } +} + +// Markdown actions dropdown + +article .markdown header { + display: flex; + align-items: center; + gap: 1.5rem; + overflow: visible; + + // Allow h1 to grow and take available space + h1 { + flex: 1 1 auto; + margin: 0; + } +} + +.markdown-actions-container { + flex-shrink: 0; + margin-left: auto; + position: relative; + vertical-align: top; + align-self: start; + + .dropdown { + position: relative; + } + + .dropdown__menu { + z-index: 1000; + min-width: 220px; + right: 0; + left: auto; + border-radius: 0.5rem; + overflow: hidden; + padding: 0.5rem; + border: 1px solid var(--ifm-color-emphasis-200); + box-shadow: none; + top: calc(100% + 0.5rem); + + li { + padding: 0.15rem; + } + } + + .button { + font-size: 0.8rem; + font-weight: 400; + border-radius: 0.5rem; + opacity: 0.7; + padding: 0.5rem 1rem; + border-color: var(--ifm-color-emphasis-200); + transition: + opacity 0.2s ease, + background-color 0.2s ease, + color 0.2s ease; + + &:hover { + opacity: 1; + background-color: var(--ifm-dropdown-hover-background-color); + color: var(--ifm-font-color-base); + } + + // Replace the plugin's own inline triangle with a real chevron. + // It's unclassed, so hide it by position (last child) and draw the + // replacement as a masked pseudo-element instead of touching node_modules. + svg:last-child { + display: none; + } + + &::after { + content: ""; + display: inline-block; + width: 0.875em; + height: 0.875em; + margin-left: 6px; + vertical-align: -0.15em; + background-color: currentColor; + mask-image: url("/img/icon-chevron-down.svg"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-image: url("/img/icon-chevron-down.svg"); + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + transition: transform 0.2s ease; + } + } + + // Flip the chevron when the dropdown is open + .dropdown--show .button::after { + transform: rotate(180deg); + } + + @media (max-width: 768px) { + display: none; + } + + // RTL language support + [dir="rtl"] & { + margin-left: 0; + margin-right: auto; + } + + .dropdown__link { + opacity: 0.7; + font-size: 0.8rem; + + &:hover { + opacity: 1; + background-color: var(--ifm-dropdown-hover-background-color); + color: var(--ifm-font-color-base); + } + } +} diff --git a/src/css/_navbar.scss b/src/css/_navbar.scss new file mode 100644 index 00000000..63f9b2ea --- /dev/null +++ b/src/css/_navbar.scss @@ -0,0 +1,86 @@ +@use "./utils" as *; + +.navbar { + box-shadow: none; + border-bottom: rem(1px) solid var(--docs-title-border); + + &__brand { + margin-right: rem(40px); + flex-shrink: 0; + } + + &__logo { + max-width: rem(230px); + margin-left: rem(30px); + @media (max-width: 996px) { + margin-left: rem(20px); + } + } + + &__link { + font-size: rem(14px); + &--active { + color: var(--ifm-navbar-link-color); + } + } + + &__list-item-icon { + display: inline-block; + width: rem(25px); + height: rem(25px); + vertical-align: middle; + } + + // Color for the version selector + &__item.dropdown .navbar__link { + color: var(--ifm-navbar-link-color); + } + + // Match the "Open Markdown" dropdown's card look (see .markdown-actions-container + // in _markdown.scss) for the version selector's own dropdown menu. + &__item.dropdown .dropdown__menu { + right: 0; + left: auto; + min-width: rem(160px); + border-radius: rem(8px); + border: rem(1px) solid var(--ifm-color-emphasis-200); + box-shadow: none; + padding: rem(8px); + } + + &__item.dropdown .dropdown__link { + border-radius: rem(6px); + opacity: 0.7; + font-size: rem(14px); + + &:hover { + opacity: 1; + background-color: var(--ifm-dropdown-hover-background-color); + color: var(--ifm-font-color-base); + } + } + + .header-github-link { + &:hover { + opacity: 0.6; + } + + &:before { + content: ""; + background: url("/img/icon-github.svg") no-repeat center / contain; + display: flex; + height: rem(20px); + width: rem(20px); + + [data-theme="dark"] & { + background: url("/img/icon-github-dark.svg") no-repeat center / contain; + } + } + } + + .header-docs-link { + @media (min-width: 996px) { + display: none; + } + } +} diff --git a/src/css/_pagination.scss b/src/css/_pagination.scss new file mode 100644 index 00000000..4066532f --- /dev/null +++ b/src/css/_pagination.scss @@ -0,0 +1,47 @@ +@use "./utils" as *; + +.pagination-nav { +padding-bottom: 3rem; + + + &__link { + border: none; + transition: all 0.3s ease; + color: var(--ifm-font-color-base); + + &--next:hover .pagination-nav__label { + transform: translateX(5px); + } + &--prev:hover .pagination-nav__label { + transform: translateX(-5px); + } + } + + &__label { + display: flex; + line-height: 1; + font-size: rem(14px); + transition: all 0.3s ease; + span { + line-height: 1; + vertical-align: middle; + margin: 0 rem(10px); + order: 1; + width: 100%; + } + &:before, + &:after { + display: none; + } + } + + &__arrow { + &--next { + order: 2; + } + } + + &__sublabel { + display: none; + } +} diff --git a/src/css/_search.scss b/src/css/_search.scss new file mode 100644 index 00000000..52f15782 --- /dev/null +++ b/src/css/_search.scss @@ -0,0 +1,99 @@ +body .DocSearch { + --docsearch-modal-width: 800px; + + &-Button-Placeholder { + font-size: 0.8rem; + padding-right: 10rem; + &:after { + content: " ..."; + } + + // Between ~996px and 1200px, shrink the search bar so the logo + // (and other navbar items) keep their natural width. We start at + // 996px (rather than 997px) to avoid a sub-pixel gap where neither + // the mobile navbar rules nor this rule apply. + @media (min-width: 996px) and (max-width: 1200px) { + padding-right: 2rem; + } + } + + &-Button { + border: 1px solid var(--card-border-color); + margin-left: 1rem; + + &-Keys { + min-width: 0; + align-items: center; + } + + &-Key { + padding: 0; + box-shadow: none; + background: var(--ifm-background-color); + color: var(--card-border-color); + width: auto; + font-size: 0.8rem; + height: auto; + top: 0; + } + } + + &-Search-Icon { + height: 1rem; + } + + &-Hit { + &-source { + font-family: "Funnel Display", sans-serif; + color: white; + } + &[aria-selected="true"] a { + background-color: var(--docsearch-hit-background-active); + } + } + + &-Logo { + filter: grayscale(100%); + } + + &-Commands-Key { + box-shadow: none; + background: var(--ifm-background-color); + color: var(--ifm-color-primary); + } +} + +.search-page-wrapper { + --ifm-toc-border-color: var(--docs-title-border); + + a[aria-label="Search by Algolia"] { + opacity: 0.5; + filter: grayscale(100%); + } + + main { + --ifm-h2-font-size: 1rem; + + article { + border-top: 1px solid var(--docs-title-border); + + a { + color: inherit; + } + } + + .breadcrumbs { + margin: 0; + + &__item { + &:after { + padding: 0 0.5rem; + } + + &:first-child { + display: inline-block; + } + } + } + } +} diff --git a/src/css/_sidebar.scss b/src/css/_sidebar.scss new file mode 100644 index 00000000..25e6ecee --- /dev/null +++ b/src/css/_sidebar.scss @@ -0,0 +1,105 @@ +@use "./utils" as *; + +.main-wrapper { + .menu__list { + .menu__list { + position: relative; + + &:before { + content: ""; + display: block; + width: rem(1px); + background: var(--docs-title-border); + position: absolute; + left: rem(15px); + top: 0; + bottom: 0; + } + + .menu__link--active:not(.menu__link--sublist) { + position: relative; + + &:before { + content: ""; + display: block; + width: rem(1px); + background: var(--ifm-color-primary); + position: absolute; + left: 0; + top: 0; + bottom: 0; + } + } + } + } + + .menu { + $self: &; + + padding: calc(var(--ifm-navbar-padding-vertical) * 7) + var(--ifm-navbar-padding-horizontal); + + &__link { + font-size: rem(14px); + border-radius: 0; + + &--active { + font-weight: 500; + } + + &--sublist { + position: relative; + + &.menu__link--active { + color: var(--ifm-menu-color); + } + + &:after { + content: " "; + transition: all 0.3s ease; + display: inline-block; + width: 0px; + height: 0px; + position: absolute; + top: 50%; + right: rem(5px); + margin-top: rem(-4px); + background: none; + min-width: 0; + border: solid var(--menu-indicator-color); + border-width: 0 rem(2px) rem(2px) 0; + padding: rem(3px); + transform: rotate(-135deg); + } + } + } + + &__list-item { + &--collapsed { + .menu__link--sublist { + &:after { + transform: rotate(45deg); + } + } + } + } + + ul { + font-weight: 400; + } + + .menu__list-item__bottom-hr { + .menu__link { + border-bottom: 1px solid var(--docs-title-border); + padding-bottom: calc(var(--ifm-menu-link-padding-vertical) + 0.25rem); + margin-bottom: calc(var(--ifm-menu-link-padding-vertical) + 0.25rem); + } + } + + // Categories with a linked label produce a double collapsible arrow; + // this removes the bulkier one. + .menu__caret { + display: none; + } + } +} diff --git a/src/css/_toc-mobile.scss b/src/css/_toc-mobile.scss new file mode 100644 index 00000000..fdac719a --- /dev/null +++ b/src/css/_toc-mobile.scss @@ -0,0 +1,23 @@ +@use "./utils" as *; + +// .theme-doc-toc-mobile is a stable global class (ThemeClassNames.docs.docTocMobile), +// not CSS-module-scoped, added specifically so it can be targeted here without swizzling. +// +// Ancestor-prefixed selector: infima's own TOCCollapsible module CSS sets a +// `margin: 1rem 0` shorthand (margin-left/right: 0) on the same element, at +// equal specificity, and it lands later in the bundle - so it wins the tie +// against a plain single-class override. Prefixing with an ancestor bumps +// our specificity just enough to beat it, without resorting to !important. +.theme-layout-main .theme-doc-toc-mobile { + margin-left: calc(var(--ifm-spacing-horizontal) * -1); + margin-right: calc(var(--ifm-spacing-horizontal) * -1); + + border-bottom: 1px solid var(--ifm-color-emphasis-100); + + button { + &:after { + width: 0.7rem; + height: 0.7rem; + } + } +} diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss new file mode 100644 index 00000000..2a4212a7 --- /dev/null +++ b/src/css/_utilities.scss @@ -0,0 +1,45 @@ +@use "./utils" as *; + +.footer > .container, +.navbar__inner, +.main-wrapper { + width: 100%; + max-width: var(--root-wrapper-width); + margin: auto; +} + +.spacing-horz { + padding: 0 var(--ifm-spacing-horizontal); +} + +.block-section { + padding-top: rem(50px); + padding-bottom: rem(50px); + border-top: rem(1px) solid var(--docs-title-border); +} + +.thin-scrollbar { + scrollbar-width: thin; + scrollbar-color: var(--ifm-scrollbar-thumb-background-color) transparent; +} + +// Shift the scroll-to-top button further up to avoid clashing with the feedback button +button.theme-back-to-top-button { + bottom: 3.6rem; +} + +.theme-edit-this-page { + color: var(--ifm-menu-color); + font-weight: 500; + font-size: rem(14px); + + svg { + display: inline-block; + margin-right: 0.5rem; + } +} + +// Edit this page is already shown under the ToC +.theme-doc-footer-edit-meta-row { + display: none; +} diff --git a/src/css/custom.scss b/src/css/custom.scss index 9de778c1..5511bcff 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1,12 +1,25 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ -@import "./utils"; -@import "./infima-variables"; -@import "./fonts"; -@import "./typography"; +// Any CSS included here will be global. The classic template bundles Infima +// by default. Infima is a CSS framework designed to work well for +// content-centric websites. +@use "./variables"; +@use "./utilities"; +@use "./navbar"; +@use "./sidebar"; +@use "./breadcrumbs"; +@use "./footer"; +@use "./pagination"; +@use "./toc-mobile"; +@use "./admonitions"; +@use "./search"; +@use "./code-blocks"; +@use "./markdown"; +@use "./feedback-widget"; + +// Fonts + +@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); + +// Base typography html, body { @@ -18,842 +31,3 @@ body { -moz-osx-font-smoothing: grayscale; } -/* You can override the default Infima variables here. */ -:root { - // Source Brand variables - --src-primary: #06b250; - --src-highlight: #39e265; - --src-red: #ff7777; - - --root-wrapper-width: 90rem; - --menu-indicator-color: #ccc; - - --src-red: #ff7777; - - // Light theme - --code-foreground: #000000; - --code-background: #f3f3f3; - --code-token-keyword: #5a2cbc; - --code-token-constant: #1a7032; - --code-token-string: #d18c0c; - --code-token-comment: #7e7e7e; - --code-token-parameter: hsl(var(--foreground-light) / 1); - --code-token-function: #1a7032; - --code-token-string-expression: #f1a10d; - --code-token-punctuation: hsl(var(--foreground-light) / 1); - --code-token-link: hsl(var(--foreground-light) / 1); - --code-token-number: hsl(var(--foreground-light) / 1); - --code-token-property: rgb(105, 76, 156); - --code-highlight-color: #1c1c1c; - - --color-text-muted: #939598; - - // Code block variables - --codeblock-title-border: #d1d1d1; - --codeblock-valid-border: var(--src-primary); - --codeblock-invalid-border: var(--src-red); -} - -// Dark overrides - -html[data-theme="dark"] { - // Dark theme - --code-foreground: #fffff; - --code-background: #191919; - --code-token-keyword: #aca4ff; - --code-foreground: #ffffff; - --code-token-constant: #3ecf6e; - --code-token-string: #e7bb94; - --code-token-comment: #7e7e7e; - --code-token-parameter: #ffffff; - --code-token-function: #3ecf6e; - --code-token-string-expression: #ffcda1; - --code-token-punctuation: #ffffff; - --code-token-link: #ffffff; - --code-token-number: #ffffff; - --code-token-property: rgb(180, 148, 234); - --code-highlight-color: #232323; - - // Code block variables - --codeblock-title-border: #323232; -} - -// Layout - -.footer > .container, -.navbar__inner, -.main-wrapper { - width: 100%; - max-width: var(--root-wrapper-width); - margin: auto; -} - -// Utilities - -.spacing-horz { - padding: 0 var(--ifm-spacing-horizontal); -} - -.block-section { - padding-top: rem(50px); - padding-bottom: rem(50px); - border-top: rem(1px) solid var(--docs-title-border); -} - -// navbar - -.docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); - - [data-theme="dark"] & { - background-color: rgba(0, 0, 0, 0.3); - } -} - -// Navbar - -.navbar { - box-shadow: none; - border-bottom: rem(1px) solid var(--docs-title-border); - - &__brand { - margin-right: rem(40px); - flex-shrink: 0; - } - - &__logo { - max-width: rem(230px); - margin-left: rem(30px); - @media (max-width: 996px) { - margin-left: rem(20px); - } - } - - &__link { - font-size: rem(14px); - &--active { - color: var(--ifm-navbar-link-color); - } - } - - &__list-item-icon { - display: inline-block; - width: rem(25px); - height: rem(25px); - vertical-align: middle; - } - - .header-github-link { - &:hover { - opacity: 0.6; - } - - &:before { - content: ""; - background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; - display: flex; - height: rem(24px); - width: rem(24px); - - [data-theme="dark"] & { - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; - } - } - } - - .header-docs-link { - @media (min-width: 996px) { - display: none; - } - } -} - -// Sidebar menu - -.main-wrapper { - .menu__list { - .menu__list { - position: relative; - - &:before { - content: ""; - display: block; - width: rem(1px); - background: var(--docs-title-border); - position: absolute; - left: rem(15px); - top: 0; - bottom: 0; - } - - .menu__link--active:not(.menu__link--sublist) { - position: relative; - - &:before { - content: ""; - display: block; - width: rem(1px); - background: var(--ifm-color-primary); - position: absolute; - left: 0; - top: 0; - bottom: 0; - } - } - } - } - - .menu { - $self: &; - - padding: calc(var(--ifm-navbar-padding-vertical) * 4) - var(--ifm-navbar-padding-horizontal); - - &__link { - font-size: rem(14px); - border-radius: 0; - - &--active { - font-weight: 500; - } - - &--sublist { - position: relative; - - &.menu__link--active { - color: var(--ifm-menu-color); - } - - &:after { - content: " "; - transition: all 0.3s ease; - display: inline-block; - width: 0px; - height: 0px; - position: absolute; - top: 50%; - right: rem(5px); - margin-top: rem(-4px); - background: none; - min-width: 0; - border: solid var(--menu-indicator-color); - border-width: 0 rem(2px) rem(2px) 0; - padding: rem(3px); - transform: rotate(-135deg); - } - } - } - - &__list-item { - &--collapsed { - .menu__link--sublist { - &:after { - transform: rotate(45deg); - } - } - } - } - - ul { - font-weight: 400; - } - - .menu__list-item__bottom-hr { - .menu__link { - border-bottom: 1px solid var(--docs-title-border); - padding-bottom: calc(var(--ifm-menu-link-padding-vertical) + 0.25rem); - margin-bottom: calc(var(--ifm-menu-link-padding-vertical) + 0.25rem); - } - } - - /* categories with a linked label produce a double collapsible arrow; this removes the bulkier one */ - .menu__caret { - display: none; - } - } -} - -// Breadcrumbs - -.breadcrumbs { - margin: rem(30px) 0 rem(20px); - font-size: rem(12px); - - &__item { - &:nth-child(2) { - .breadcrumbs__link { - padding-left: 0; - } - } - - &:first-child { - display: none; - } - - &:last-child { - color: var(--ifm-color-primary); - } - - &:not(:last-child):after { - content: " /"; - display: inline-block; - } - - &--active { - color: #6d6d6d; - } - } - - &__link { - color: #6d6d6d; - } -} - -// Theme - -.theme-edit-this-page { - color: var(--ifm-menu-color); - font-weight: 500; - font-size: 14px; - // border-top: 1px solid var(--docs-title-border); - - svg { - display: inline-block; - margin-right: 0.5rem; - } -} - -// Footer - -.footer { - margin-top: rem(40px); - - &__links { - @media (min-width: 997px) { - margin-bottom: rem(100px); - } - } - - &__logo { - width: 100%; - max-width: rem(160px); - margin: 0; - } -} - -.footer__copyright { - font-size: rem(12px); - margin: rem(30px) 0; -} - -// Markdown - -// .markdown { -// > :first-child { -// margin-top: 0; -// } -// > :last-child { -// margin-bottom: 0; -// } -// } - -// Pagination - -.pagination-nav { - &__link { - border: none; - box-shadow: 0px 0px rem(15px) rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; - border: 1px solid rgb(228, 228, 228); - - &:hover { - border-color: rgb(228, 228, 228); - box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); - } - - html[data-theme="dark"] & { - background-color: #000000; - border-color: rgb(56, 56, 56); - } - } - - &__label { - display: flex; - line-height: 1; - font-size: rem(14px); - transition: all 0.3s ease; - span { - line-height: 1; - vertical-align: middle; - margin: 0 rem(10px); - order: 1; - width: 100%; - } - &:before, - &:after { - display: none; - } - } - - &__arrow { - &--next { - order: 2; - } - } - - &__sublabel { - display: none; - } - - &__item { - &--next .pagination-nav__label { - padding-right: rem(10px); - } - &--next:hover .pagination-nav__label { - transform: translateX(5px); - } - - &--previous .pagination-nav__label { - padding-left: rem(10px); - } - &--previous:hover .pagination-nav__label { - transform: translateX(-5px); - } - } -} - -// Admonition - -.admonition { - .admonition-icon { - display: none; - } -} - -// Search - -body .DocSearch { - --docsearch-modal-width: 800px; - - &-Button-Placeholder { - font-size: 0.8rem; - padding-right: 10rem; - &:after { - content: " ..."; - } - - // Between ~996px and 1200px, shrink the search bar so the logo - // (and other navbar items) keep their natural width. We start at - // 996px (rather than 997px) to avoid a sub-pixel gap where neither - // the mobile navbar rules nor this rule apply. - @media (min-width: 996px) and (max-width: 1200px) { - padding-right: 2rem; - } - } - - &-Button { - border: 1px solid var(--card-border-color); - margin-left: 1rem; - - &-Keys { - min-width: 0; - align-items: center; - } - - &-Key { - padding: 0; - box-shadow: none; - background: var(--ifm-background-color); - color: var(--card-border-color); - width: auto; - font-size: 0.8rem; - height: auto; - top: 0; - } - } - - &-Search-Icon { - height: 1rem; - } - - &-Hit { - &-source { - font-family: "Funnel Display", sans-serif; - color: white; - } - &[aria-selected="true"] a { - background-color: var(--docsearch-hit-background-active); - } - } - - &-Logo { - filter: grayscale(100%); - } - - &-Commands-Key { - box-shadow: none; - background: var(--ifm-background-color); - color: var(--ifm-color-primary); - } -} - -.search-page-wrapper { - --ifm-toc-border-color: var(--docs-title-border); - - a[aria-label="Search by Algolia"] { - opacity: 0.5; - filter: grayscale(100%); - } - - main { - --ifm-h2-font-size: 1rem; - - article { - border-top: 1px solid var(--docs-title-border); - - a { - color: inherit; - } - } - - .breadcrumbs { - margin: 0; - - &__item { - &:after { - padding: 0 0.5rem; - } - - &:first-child { - display: inline-block; - } - } - } - } -} - -[data-theme="light"] .DocSearch { - /* --docsearch-primary-color: var(--ifm-color-primary); */ - /* --docsearch-text-color: var(--ifm-font-color-base); */ - --docsearch-muted-color: var(--ifm-color-secondary-darkest); - --docsearch-container-background: rgba(36, 36, 36, 0.8); - /* Modal */ - --docsearch-modal-background: var(--ifm-color-secondary-lighter); - /* Search box */ - --docsearch-searchbox-background: var(--ifm-color-secondary); - --docsearch-searchbox-focus-background: var(--ifm-color-white); - /* Hit */ - --docsearch-hit-color: var(--ifm-font-color-base); - --docsearch-hit-active-color: var(--ifm-color-white); - --docsearch-hit-background: var(--ifm-color-white); - --docsearch-hit-background-active: rgba(94, 100, 112, 0.7); - /* Footer */ - --docsearch-footer-background: var(--ifm-color-white); - --docsearch-search-button-background: var(--ifm-background-color); -} - -[data-theme="dark"] .DocSearch { - --docsearch-text-color: var(--ifm-font-color-base); - --docsearch-muted-color: var(--ifm-color-secondary-darkest); - --docsearch-container-background: rgba(24, 24, 24, 0.7); - --docsearch-highlight-color: var(--ifm-color-primary); - - /* Modal */ - --docsearch-modal-background: var(--ifm-background-color); - /* Search box */ - --docsearch-searchbox-background: var(--ifm-background-color); - --docsearch-searchbox-focus-background: var(--ifm-color-black); - /* Hit */ - --docsearch-hit-color: var(--ifm-font-color-base); - --docsearch-hit-active-color: var(--ifm-color-white); - --docsearch-hit-background: var(--ifm-color-emphasis-100); - --docsearch-hit-background-active: rgba(124, 124, 124, 0.7); - - /* Footer */ - --docsearch-footer-background: var(--ifm-background-surface-color); - --docsearch-key-gradient: linear-gradient( - -26.5deg, - var(--ifm-color-emphasis-200) 0%, - var(--ifm-color-emphasis-100) 100% - ); - --docsearch-search-button-background: var(--ifm-background-color); -} - -.alert { - --ifm-link-color: var(--ifm-color-primary); -} - -/* Color for version selector */ -.navbar__item.dropdown { - .navbar__link { - color: var(--ifm-color-primary); - } -} - -/* Visual indication of tabs length */ -.tabs-container { - .margin-top--md { - border-left: 2px var(--src-primary) solid; - padding-left: var(--ifm-tabs-padding-horizontal); - } -} - -/* THEME CODE BLOCK STYLES */ -.theme-code-block { - border: 1px solid var(--codeblock-title-border); - - /* Color for highlighted lines in code blocks */ - .theme-code-block-highlighted-line { - border-left: 3px var(--ifm-color-primary) solid; - - [data-theme="dark"] & { - background-color: rgb(47 47 47); - } - - [data-theme="light"] & { - background-color: rgb(230 230 230); - } - } - - // Squash together query and result code blocks, when one is placed immediately after another - &:has(+ .codeblock-result) { - margin-bottom: 0.313rem; // 5px - } - - // Override the title border - & [class*="codeBlockTitle"] { - border-bottom-color: var(--codeblock-title-border); - } -} - -.thin-scrollbar { - scrollbar-width: thin; - scrollbar-color: var(--ifm-scrollbar-thumb-background-color) transparent; -} -/* End style for code blocks starting with `//invalid` or `//valid` */ - -// External link icon indicator. -.theme-doc-markdown a[target="_blank"]::after { - content: ""; - display: inline-block; - width: 0.75em; - height: 0.609375em; - margin-left: 0.2em; - vertical-align: baseline; - transform: rotate(-45deg); - background-color: currentColor; - mask-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.4609 6.79387C15.7808 6.47395 15.7808 5.95525 15.4609 5.63533L10.2475 0.421917C9.92756 0.101996 9.40887 0.101996 9.08895 0.421917C8.76903 0.741838 8.76903 1.26053 9.08895 1.58045L13.7231 6.2146L9.08895 10.8487C8.76903 11.1687 8.76903 11.6874 9.08895 12.0073C9.40887 12.3272 9.92756 12.3272 10.2475 12.0073L15.4609 6.79387ZM0.955078 7.03381H14.8816V5.39539H0.955078V7.03381Z'/%3E%3C/svg%3E"); - mask-size: contain; - mask-repeat: no-repeat; - -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.4609 6.79387C15.7808 6.47395 15.7808 5.95525 15.4609 5.63533L10.2475 0.421917C9.92756 0.101996 9.40887 0.101996 9.08895 0.421917C8.76903 0.741838 8.76903 1.26053 9.08895 1.58045L13.7231 6.2146L9.08895 10.8487C8.76903 11.1687 8.76903 11.6874 9.08895 12.0073C9.40887 12.3272 9.92756 12.3272 10.2475 12.0073L15.4609 6.79387ZM0.955078 7.03381H14.8816V5.39539H0.955078V7.03381Z'/%3E%3C/svg%3E"); - -webkit-mask-size: contain; - -webkit-mask-repeat: no-repeat; -} - -/* Override black background with green for :::info admonitions */ -.alert--info { - --ifm-alert-background-color: var(--ifm-color-success-contrast-background); -} - -/* Override large margin bottom on code blocks within list elements */ -li div.theme-code-block { - margin-bottom: 0px; -} - -@media (min-width: 800px) { - .sidebyside-left { - float: left; - width: 49%; - } - .sidebyside-right { - float: right; - width: 49%; - } - .sidebyside-clear { - clear: both; - } -} - -/* Markdown Actions Dropdown Styles */ -/* Style the article header as flexbox */ -article .markdown header { - display: flex; - align-items: center; - gap: 1rem; - overflow: visible; -} - -/* Allow h1 to grow and take available space */ -article .markdown header h1 { - flex: 1 1 auto; - margin: 0; -} - -/* Container for the markdown actions dropdown */ -.markdown-actions-container { - flex-shrink: 0; - margin-left: auto; - position: relative; - vertical-align: top; - margin-top: 0.75rem; - align-self: start; -} - -/* Ensure dropdown wrapper has proper positioning */ -.markdown-actions-container .dropdown { - position: relative; -} - -/* Base dropdown menu styles */ -.markdown-actions-container .dropdown__menu { - z-index: 1000; - min-width: 220px; - right: auto; - left: 0; -} - -/* Add hover effect for dropdown items */ -.dropdown__link:hover { - background-color: var(--ifm-dropdown-hover-background); - color: var(--ifm-link-color); -} - -.markdown-actions-container .button { - font-size: small; -} - -.markdown-actions-container .button:hover { - background-color: var(--ifm-dropdown-hover-background); - color: var(--ifm-link-color); -} - -/* Hide on mobile */ -@media (max-width: 768px) { - .markdown-actions-container { - display: none; - } -} - -/* RTL language support */ -[dir="rtl"] .markdown-actions-container { - margin-left: 0; - margin-right: auto; -} - -[dir="rtl"] .markdown-actions-container .dropdown__menu { - right: auto; - left: 0; -} - -@media (max-width: 768px) { - [dir="rtl"] .markdown-actions-container .dropdown__menu { - left: 0; - right: auto; - } -} -/* End Markdown Actions Dropdown Styles */ - -/* Feedback button */ -html[data-theme="dark"], -html[data-theme="light"] { - /* needs to be more specific than :root */ - --feedback-button-text-font-size: 1rem; /* same as text size */ - --feedback-button-text-font-weight: 600; - --feedback-background: var(--code-background); - --feedback-button-dark-bg-color: var(--feedback-background); - --feedback-button-dark-text-color: var(--feedback-primary-color); - --feedback-button-dark-icon-color: var(--feedback-primary-color); - --feedback-modal-button-submit-bg-color: var(--feedback-background); - --feedback-modal-button-submit-bg-color-hover: var(--feedback-background); - --feedback-modal-button-border-color-active: var(--feedback-background); - --feedback-modal-button-submit-border-color-hover: var( - --feedback-primary-color - ); - --feedback-modal-button-submit-text-color: var(--feedback-primary-color); - --feedback-modal-button-submit-text-color-hover: var( - --feedback-primary-color - ); - --feedback-modal-rating-button-selected-color: var(--feedback-primary-color); - --feedback-modal-rating-button-positive-selected-color: var( - --ifm-color-primary - ); - --feedback-modal-rating-button-negative-selected-color: var(--src-red); -} -html[data-theme="dark"] { - --feedback-primary-color: var(--ifm-color-primary); -} -html[data-theme="light"] { - --feedback-primary-color: #000000; -} -/* Shift scroll to top button further up to avoid clash with feedback button */ -button.theme-back-to-top-button { - bottom: 3.6rem; -} - -/* Footer widget */ -.feedback-widget { - margin-top: 3rem; - text-align: center; -} - -.feedback-widget-title { - margin-bottom: 0.5rem; - font-size: 1rem; - opacity: 80%; -} - -.feedback-widget-error { - margin-top: 0.5rem; - font-size: 0.875rem; - color: var(--src-red); -} - -.feedback-buttons { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.feedback-thumb-button { - border: none; - background: none; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - opacity: 0.8; - transition: all 0.3s ease; - cursor: pointer; - - &:hover { - opacity: 1; - } - - svg { - display: block; - width: 18px; - height: 18px; - } - - .feedback-widget-positive &:hover { - color: var(--ifm-color-primary); - } - - .feedback-widget-negative &:hover { - color: var(--src-red); - } -} -/* END Feedback widget */ - -/* Edit this page is already shown under ToC */ -.theme-doc-footer-edit-meta-row { - display: none; -} diff --git a/src/css/default-infima-variables.scss b/src/css/default-infima-variables.scss deleted file mode 100644 index 5bff3a66..00000000 --- a/src/css/default-infima-variables.scss +++ /dev/null @@ -1,396 +0,0 @@ -// :root { -// --ifm-color-scheme: light; - -// /* Colors. */ -// --ifm-dark-value: 10%; -// --ifm-darker-value: 15%; -// --ifm-darkest-value: 30%; -// --ifm-light-value: 15%; -// --ifm-lighter-value: 30%; -// --ifm-lightest-value: 50%; - -// /* -// This seems like a lot, but we want to ensure enough contrast. -// Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix -// For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts) -// See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075 -// */ -// --ifm-contrast-background-value: 90%; -// --ifm-contrast-foreground-value: 70%; -// /* Using slightly different values for dark mode */ -// --ifm-contrast-background-dark-value: 70%; -// --ifm-contrast-foreground-dark-value: 90%; - -// --ifm-color-primary: #3578e5; -// --ifm-color-secondary: #ebedf0; -// --ifm-color-success: #00a400; -// --ifm-color-info: #54c7ec; -// --ifm-color-warning: #ffba00; -// --ifm-color-danger: #fa383e; -// --ifm-color-primary-dark: rgb(48, 108, 206); -// --ifm-color-primary-darker: rgb(45, 102, 195); -// --ifm-color-primary-darkest: rgb(37, 84, 160); -// --ifm-color-primary-light: rgb(83, 140, 233); -// --ifm-color-primary-lighter: rgb(114, 161, 237); -// --ifm-color-primary-lightest: rgb(154, 188, 242); -// --ifm-color-primary-contrast-background: rgb(235, 242, 252); -// --ifm-color-primary-contrast-foreground: rgb(16, 36, 69); -// --ifm-color-secondary-dark: rgb(212, 213, 216); -// --ifm-color-secondary-darker: rgb(200, 201, 204); -// --ifm-color-secondary-darkest: rgb(164, 166, 168); -// --ifm-color-secondary-light: rgb(238, 240, 242); -// --ifm-color-secondary-lighter: rgb(241, 242, 245); -// --ifm-color-secondary-lightest: rgb(245, 246, 248); -// --ifm-color-secondary-contrast-background: rgb(253, 253, 254); -// --ifm-color-secondary-contrast-foreground: rgb(71, 71, 72); -// --ifm-color-success-dark: rgb(0, 148, 0); -// --ifm-color-success-darker: rgb(0, 139, 0); -// --ifm-color-success-darkest: rgb(0, 115, 0); -// --ifm-color-success-light: rgb(38, 178, 38); -// --ifm-color-success-lighter: rgb(77, 191, 77); -// --ifm-color-success-lightest: rgb(128, 210, 128); -// --ifm-color-success-contrast-background: rgb(230, 246, 230); -// --ifm-color-success-contrast-foreground: rgb(0, 49, 0); -// --ifm-color-info-dark: rgb(76, 179, 212); -// --ifm-color-info-darker: rgb(71, 169, 201); -// --ifm-color-info-darkest: rgb(59, 139, 165); -// --ifm-color-info-light: rgb(110, 207, 239); -// --ifm-color-info-lighter: rgb(135, 216, 242); -// --ifm-color-info-lightest: rgb(170, 227, 246); -// --ifm-color-info-contrast-background: rgb(238, 249, 253); -// --ifm-color-info-contrast-foreground: rgb(25, 60, 71); -// --ifm-color-warning-dark: rgb(230, 167, 0); -// --ifm-color-warning-darker: rgb(217, 158, 0); -// --ifm-color-warning-darkest: rgb(179, 130, 0); -// --ifm-color-warning-light: rgb(255, 196, 38); -// --ifm-color-warning-lighter: rgb(255, 207, 77); -// --ifm-color-warning-lightest: rgb(255, 221, 128); -// --ifm-color-warning-contrast-background: rgb(255, 248, 230); -// --ifm-color-warning-contrast-foreground: rgb(77, 56, 0); -// --ifm-color-danger-dark: rgb(225, 50, 56); -// --ifm-color-danger-darker: rgb(213, 48, 53); -// --ifm-color-danger-darkest: rgb(175, 39, 43); -// --ifm-color-danger-light: rgb(251, 86, 91); -// --ifm-color-danger-lighter: rgb(251, 116, 120); -// --ifm-color-danger-lightest: rgb(253, 156, 159); -// --ifm-color-danger-contrast-background: rgb(255, 235, 236); -// --ifm-color-danger-contrast-foreground: rgb(75, 17, 19); - -// --ifm-color-white: #fff; -// --ifm-color-black: #000; - -// --ifm-color-gray-0: var(--ifm-color-white); -// --ifm-color-gray-100: #f5f6f7; -// --ifm-color-gray-200: #ebedf0; -// --ifm-color-gray-300: #dadde1; -// --ifm-color-gray-400: #ccd0d5; -// --ifm-color-gray-500: #bec3c9; -// --ifm-color-gray-600: #8d949e; -// --ifm-color-gray-700: #606770; -// --ifm-color-gray-800: #444950; -// --ifm-color-gray-900: #1c1e21; -// --ifm-color-gray-1000: var(--ifm-color-black); - -// --ifm-color-emphasis-0: var(--ifm-color-gray-0); -// --ifm-color-emphasis-100: var(--ifm-color-gray-100); -// --ifm-color-emphasis-200: var(--ifm-color-gray-200); -// --ifm-color-emphasis-300: var(--ifm-color-gray-300); -// --ifm-color-emphasis-400: var(--ifm-color-gray-400); -// --ifm-color-emphasis-500: var(--ifm-color-gray-500); -// --ifm-color-emphasis-600: var(--ifm-color-gray-600); -// --ifm-color-emphasis-700: var(--ifm-color-gray-700); -// --ifm-color-emphasis-800: var(--ifm-color-gray-800); -// --ifm-color-emphasis-900: var(--ifm-color-gray-900); -// --ifm-color-emphasis-1000: var(--ifm-color-gray-1000); - -// /* Base. */ -// --ifm-color-content: var(--ifm-color-emphasis-900); -// --ifm-color-content-inverse: var(--ifm-color-emphasis-0); -// --ifm-color-content-secondary: #525860; - -// --ifm-background-color: transparent; /* Body's background. */ -// --ifm-background-surface-color: var(--ifm-color-content-inverse); -// --ifm-global-border-width: 1px; -// --ifm-global-radius: 0.4rem; - -// --ifm-hover-overlay: rgba(0, 0, 0, 0.05); - -// /* Typography. */ -// --ifm-font-color-base: var(--ifm-color-content); -// --ifm-font-color-base-inverse: var(--ifm-color-content-inverse); -// --ifm-font-color-secondary: var(--ifm-color-content-secondary); -// --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, -// Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, -// Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -// --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, -// "Liberation Mono", "Courier New", monospace; -// --ifm-font-size-base: 100%; - -// --ifm-font-weight-light: 300; -// --ifm-font-weight-normal: 400; -// --ifm-font-weight-semibold: 500; -// --ifm-font-weight-bold: 700; - -// --ifm-font-weight-base: var(--ifm-font-weight-normal); -// --ifm-line-height-base: 1.65; - -// /* Spacing. */ -// --ifm-global-spacing: 1rem; -// --ifm-spacing-vertical: var(--ifm-global-spacing); -// --ifm-spacing-horizontal: var(--ifm-global-spacing); - -// /* Transitions. */ -// --ifm-transition-fast: 200ms; -// --ifm-transition-slow: 400ms; -// --ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1); - -// /* Shadows. */ -// --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1); -// --ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2); -// --ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2), -// 0 2px 4px 0 rgba(0, 0, 0, 0.1); - -// /* Z-index. */ -// --ifm-z-index-dropdown: 100; -// --ifm-z-index-fixed: 200; -// --ifm-z-index-overlay: 400; -// --ifm-container-width: 1140px; -// --ifm-container-width-xl: 1320px; -// --ifm-code-background: rgb(246, 247, 248); -// --ifm-code-border-radius: var(--ifm-global-radius); -// --ifm-code-font-size: 90%; -// --ifm-code-padding-horizontal: 0.1rem; -// --ifm-code-padding-vertical: 0.1rem; - -// --ifm-pre-background: var(--ifm-color-emphasis-100); -// --ifm-pre-border-radius: var(--ifm-code-border-radius); -// --ifm-pre-color: inherit; -// --ifm-pre-line-height: 1.45; -// --ifm-pre-padding: 1rem; -// --ifm-heading-color: inherit; -// --ifm-heading-margin-top: 0; -// --ifm-heading-margin-bottom: var(--ifm-spacing-vertical); -// --ifm-heading-font-family: var(--ifm-font-family-base); -// --ifm-heading-font-weight: var(--ifm-font-weight-bold); -// --ifm-heading-line-height: 1.25; - -// --ifm-h1-font-size: 2rem; -// --ifm-h2-font-size: 1.5rem; -// --ifm-h3-font-size: 1.25rem; -// --ifm-h4-font-size: 1rem; -// --ifm-h5-font-size: 0.875rem; -// --ifm-h6-font-size: 0.85rem; -// --ifm-image-alignment-padding: 1.25rem; -// /* Leading is the distance between two baselines */ -// /* TODO: add appropriate mobile leading */ -// --ifm-leading-desktop: 1.25; -// --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem); -// --ifm-list-left-padding: 2rem; -// --ifm-list-margin: 1rem; -// --ifm-list-item-margin: 0.25rem; -// --ifm-list-paragraph-margin: 1rem; -// --ifm-table-cell-padding: 0.75rem; - -// --ifm-table-background: transparent; -// --ifm-table-stripe-background: var(--ifm-color-emphasis-100); - -// --ifm-table-border-width: 1px; -// --ifm-table-border-color: var(--ifm-color-emphasis-300); - -// --ifm-table-head-background: inherit; -// --ifm-table-head-color: inherit; -// --ifm-table-head-font-weight: var(--ifm-font-weight-bold); - -// --ifm-table-cell-color: inherit; -// /* Links. */ -// --ifm-link-color: var(--ifm-color-primary); -// --ifm-link-decoration: none; -// --ifm-link-hover-color: var(--ifm-link-color); -// --ifm-link-hover-decoration: underline; - -// /* Paragraphs. */ -// --ifm-paragraph-margin-bottom: var(--ifm-leading); - -// /* Blockquotes. */ -// --ifm-blockquote-font-size: var(--ifm-font-size-base); -// --ifm-blockquote-border-left-width: 2px; -// --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal); -// --ifm-blockquote-padding-vertical: 0; -// --ifm-blockquote-shadow: none; -// --ifm-blockquote-color: var(--ifm-color-emphasis-800); -// --ifm-blockquote-border-color: var(--ifm-color-emphasis-300); - -// /* Horizontal Rules. */ -// --ifm-hr-border-color: var(--ifm-color-emphasis-500); -// --ifm-hr-border-width: 1px; -// --ifm-hr-margin-vertical: 1.5rem; -// --ifm-scrollbar-size: 7px; -// --ifm-scrollbar-track-background-color: #f1f1f1; -// --ifm-scrollbar-thumb-background-color: #c0c0c0; -// --ifm-scrollbar-thumb-hover-background-color: #a7a7a7; -// --ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */ -// --ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */ -// --ifm-alert-border-radius: var(--ifm-global-radius); -// --ifm-alert-border-width: 0px; /* For users that want to easily add a border */ -// --ifm-alert-border-left-width: 5px; -// --ifm-alert-color: var(--ifm-font-color-base); -// --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal); -// --ifm-alert-padding-vertical: var(--ifm-spacing-vertical); -// --ifm-alert-shadow: var(--ifm-global-shadow-lw); -// --ifm-avatar-intro-margin: 1rem; -// --ifm-avatar-intro-alignment: inherit; -// --ifm-avatar-photo-size-sm: 2rem; -// --ifm-avatar-photo-size-md: 3rem; -// --ifm-avatar-photo-size-lg: 4rem; -// --ifm-avatar-photo-size-xl: 6rem; -// --ifm-badge-background-color: inherit; /* Set a default which will be overridden later. */ -// --ifm-badge-border-color: inherit; /* Set a default which will be overridden later. */ -// --ifm-badge-border-radius: var(--ifm-global-radius); -// --ifm-badge-border-width: var(--ifm-global-border-width); -// --ifm-badge-color: var(--ifm-color-white); -// --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5); -// --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25); -// --ifm-breadcrumb-border-radius: 1.5rem; -// --ifm-breadcrumb-spacing: 0.0625rem; -// --ifm-breadcrumb-color-active: var(--ifm-color-primary); -// --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay); -// --ifm-breadcrumb-padding-horizontal: 1rem; -// --ifm-breadcrumb-padding-vertical: 0.5rem; -// --ifm-breadcrumb-size-multiplier: 1; -// --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,'); -// --ifm-breadcrumb-separator-filter: none; -// --ifm-breadcrumb-separator-size: 0.5rem; -// --ifm-breadcrumb-separator-size-multiplier: 1.25; -// --ifm-button-background-color: inherit; -// --ifm-button-border-color: var(--ifm-button-background-color); -// --ifm-button-border-width: var(--ifm-global-border-width); -// --ifm-button-color: var(--ifm-font-color-base-inverse); -// --ifm-button-font-weight: var(--ifm-font-weight-bold); -// --ifm-button-padding-horizontal: 1.5rem; -// --ifm-button-padding-vertical: 0.375rem; -// --ifm-button-size-multiplier: 1; -// --ifm-button-transition-duration: var(--ifm-transition-fast); -// --ifm-button-border-radius: calc( -// var(--ifm-global-radius) * var(--ifm-button-size-multiplier) -// ); -// --ifm-button-group-margin: 2px; -// --ifm-card-background-color: var(--ifm-background-surface-color); -// --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2); -// --ifm-card-horizontal-spacing: var(--ifm-global-spacing); -// --ifm-card-vertical-spacing: var(--ifm-global-spacing); -// --ifm-toc-border-color: var(--ifm-color-emphasis-300); -// --ifm-toc-link-color: var(--ifm-color-content-secondary); -// --ifm-toc-padding-vertical: 0.5rem; -// --ifm-toc-padding-horizontal: 0.5rem; -// --ifm-dropdown-background-color: var(--ifm-background-surface-color); -// --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold); -// --ifm-dropdown-link-color: var(--ifm-font-color-base); -// --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay); -// --ifm-footer-background-color: var(--ifm-color-emphasis-100); -// --ifm-footer-color: inherit; -// --ifm-footer-link-color: var(--ifm-color-emphasis-700); -// --ifm-footer-link-hover-color: var(--ifm-color-primary); -// --ifm-footer-link-horizontal-spacing: 0.5rem; -// --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2); -// --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2); -// --ifm-footer-title-color: inherit; -// --ifm-hero-background-color: var(--ifm-background-surface-color); -// --ifm-hero-text-color: var(--ifm-color-emphasis-800); -// --ifm-menu-color: var(--ifm-color-emphasis-700); -// --ifm-menu-color-active: var(--ifm-color-primary); -// --ifm-menu-color-background-active: var(--ifm-hover-overlay); -// --ifm-menu-color-background-hover: var(--ifm-hover-overlay); -// --ifm-menu-link-padding-horizontal: 1rem; -// --ifm-menu-link-padding-vertical: 0.375rem; -// --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); -// --ifm-menu-link-sublist-icon-filter: none; -// --ifm-navbar-background-color: var(--ifm-background-surface-color); -// --ifm-navbar-height: 3.75rem; -// --ifm-navbar-item-padding-horizontal: 0.75rem; -// --ifm-navbar-item-padding-vertical: 0.25rem; -// --ifm-navbar-link-color: var(--ifm-font-color-base); -// --ifm-navbar-link-hover-color: var(--ifm-color-primary); -// --ifm-navbar-link-active-color: var(--ifm-link-color); -// --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal); -// --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); -// --ifm-navbar-shadow: var(--ifm-global-shadow-lw); -// --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200); -// --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800); -// --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500); -// --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); -// --ifm-navbar-sidebar-width: 83vw; -// --ifm-pagination-border-radius: calc( -// var(--ifm-global-radius) * var(--ifm-pagination-size-multiplier) -// ); -// --ifm-pagination-color-active: var(--ifm-color-primary); -// --ifm-pagination-font-size: 1rem; -// --ifm-pagination-item-active-background: var(--ifm-hover-overlay); -// --ifm-pagination-page-spacing: 0.0625rem; -// --ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1); -// --ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25); -// --ifm-pagination-size-multiplier: 1; -// --ifm-pagination-nav-border-radius: var(--ifm-global-radius); -// --ifm-pagination-nav-color-hover: var(--ifm-color-primary); -// --ifm-pills-color-active: var(--ifm-color-primary); -// --ifm-pills-color-background-active: var(--ifm-hover-overlay); -// --ifm-pills-spacing: 0.0625rem; -// --ifm-tabs-color: var(--ifm-font-color-secondary); -// --ifm-tabs-color-active: var(--ifm-color-primary); -// --ifm-tabs-color-active-border: var(--ifm-tabs-color-active); -// --ifm-tabs-padding-horizontal: 1rem; -// --ifm-tabs-padding-vertical: 1rem; -// --ifm-tabs-spacing: 0.0625rem; -// } - -// html[data-theme="dark"] { -// --ifm-color-scheme: dark; - -// --ifm-color-emphasis-0: var(--ifm-color-gray-1000); -// --ifm-color-emphasis-100: var(--ifm-color-gray-900); -// --ifm-color-emphasis-200: var(--ifm-color-gray-800); -// --ifm-color-emphasis-300: var(--ifm-color-gray-700); -// --ifm-color-emphasis-400: var(--ifm-color-gray-600); -// --ifm-color-emphasis-500: var(--ifm-color-gray-500); -// --ifm-color-emphasis-600: var(--ifm-color-gray-400); -// --ifm-color-emphasis-700: var(--ifm-color-gray-300); -// --ifm-color-emphasis-800: var(--ifm-color-gray-200); -// --ifm-color-emphasis-900: var(--ifm-color-gray-100); -// --ifm-color-emphasis-1000: var(--ifm-color-gray-0); - -// --ifm-background-color: #18191a; -// --ifm-background-surface-color: #242526; - -// --ifm-hover-overlay: rgba(255, 255, 255, 0.05); - -// --ifm-color-content-secondary: rgba(255, 255, 255, 1); - -// --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%) -// hue-rotate(149deg) brightness(99%) contrast(95%); - -// --ifm-code-background: rgb(51, 52, 55); - -// --ifm-scrollbar-track-background-color: #444444; -// --ifm-scrollbar-thumb-background-color: #686868; -// --ifm-scrollbar-thumb-hover-background-color: #7a7a7a; -// --ifm-color-primary-contrast-background: rgb(16, 36, 69); -// --ifm-color-primary-contrast-foreground: rgb(235, 242, 252); -// --ifm-color-secondary-contrast-background: rgb(71, 71, 72); -// --ifm-color-secondary-contrast-foreground: rgb(253, 253, 254); -// --ifm-color-success-contrast-background: rgb(0, 49, 0); -// --ifm-color-success-contrast-foreground: rgb(230, 246, 230); -// --ifm-color-info-contrast-background: rgb(25, 60, 71); -// --ifm-color-info-contrast-foreground: rgb(238, 249, 253); -// --ifm-color-warning-contrast-background: rgb(77, 56, 0); -// --ifm-color-warning-contrast-foreground: rgb(255, 248, 230); -// --ifm-color-danger-contrast-background: rgb(75, 17, 19); -// --ifm-color-danger-contrast-foreground: rgb(255, 235, 236); -// } - -// .markdown { -// // --ifm-h1-vertical-rhythm-top: 3; -// // --ifm-h2-vertical-rhythm-top: 2; -// // --ifm-h3-vertical-rhythm-top: 1.5; -// // --ifm-heading-vertical-rhythm-top: 1.25; -// // --ifm-h1-vertical-rhythm-bottom: 1.25; -// // --ifm-heading-vertical-rhythm-bottom: 1; -// } diff --git a/src/css/fonts.scss b/src/css/fonts.scss deleted file mode 100644 index 13193738..00000000 --- a/src/css/fonts.scss +++ /dev/null @@ -1 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); diff --git a/src/css/infima-variables.scss b/src/css/infima-variables.scss deleted file mode 100644 index f3511056..00000000 --- a/src/css/infima-variables.scss +++ /dev/null @@ -1,101 +0,0 @@ -// Custom vars -:root { - --card-color: rgb(255, 255, 255, 0.9); - --card-border-color: #e8e8e8; - --card-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - --card-box-shadow-highlight: 0 2px 25px rgba(31, 96, 233, 0.05); -} - -html[data-theme="dark"] { - --card-color: rgb(29, 29, 29, 0.4); - --card-border-color: #313131; - --card-box-shadow: 0 2px 25px rgba(238, 238, 238, 0.05); -} - -:root { - // Colors - --ifm-color-primary: var(--src-primary); - --ifm-color-primary-dark: #1554d8; - --ifm-color-primary-darker: #144fcc; - --ifm-color-primary-darkest: #1141a8; - --ifm-color-primary-light: #3771eb; - --ifm-color-primary-lighter: #437aed; - --ifm-color-primary-lightest: #6793f0; - --ifm-color-secondary-contrast-background: rgb(236, 236, 236); - - --ifm-color-info-dark: rgb(0, 205, 80); - --ifm-color-info-darker: rgb(7, 160, 66); - --ifm-color-info-darkest: rgb(4, 146, 59); - - // Fonts - --ifm-font-family-base: - "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, - Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --ifm-font-size-base: 1rem; - --ifm-font-weight-bold: 800; - --ifm-heading-font-family: "Funnel Display", sans-serif; - --ifm-heading-font-weight: 400; - - // Base - --ifm-global-radius: 0rem; - - // Code - --ifm-code-background: rgb(226, 226, 226); - --ifm-code-font-size: 80%; - --ifm-code-border-radius: 0.375rem; // 6px - --ifm-pre-padding: 1rem; - - --ifm-leading-desktop: 1.75; - --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem); - - --ifm-toc-border-color: transparent; - --ifm-toc-padding-horizontal: 0.5rem; - - --ifm-menu-color-background-active: transparent; - --ifm-menu-link-padding-horizontal: 1rem; - --ifm-menu-link-padding-vertical: 0.5rem; - - --ifm-navbar-height: 80px; - --ifm-navbar-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1); - --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); - - // Footer - --ifm-footer-background-color: var(--ifm-background-color); - --docs-title-border: #e0e0e0; - - --ifm-alert-border-left-width: 2px; - --ifm-alert-border-radius: 0rem; - - /* Horizontal Rules. */ - --ifm-breadcrumb-spacing: 0rem; - --ifm-breadcrumb-color-active: inherit; - --ifm-breadcrumb-item-background-active: transparent; - --ifm-breadcrumb-separator: none; - --ifm-menu-color: var(--ifm-color-emphasis-700); - --ifm-menu-color-active: var(--ifm-color-primary); - - --ifm-color-info-contrast-background: rgb(255, 255, 255); - --ifm-color-info-contrast-foreground: rgb(0, 0, 0); - --ifm-scrollbar-thumb-background-color: var(--ifm-color-emphasis-400); -} - -html[data-theme="dark"] { - --ifm-color-primary: var(--src-highlight); - --ifm-background-color: #000000; - --ifm-background-surface-color: var(--ifm-background-color); - --docs-title-border: #343434; - --ifm-toc-border-color: transparent; - --ifm-menu-color: var(--ifm-color-emphasis-400); - - --ifm-color-secondary-contrast-background: #222222; - --ifm-color-info-contrast-background: rgb(0, 0, 0); - --ifm-color-info-contrast-foreground: rgb(255, 255, 255); - --ifm-scrollbar-thumb-background-color: var(--ifm-color-emphasis-200); -} - -.markdown { - h1:first-child { - --ifm-h1-font-size: 2.5rem; - } -} diff --git a/src/css/typography.scss b/src/css/typography.scss deleted file mode 100644 index 81085d18..00000000 --- a/src/css/typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h4 { - font-weight: 400; -} diff --git a/src/css/variables.scss b/src/css/variables.scss new file mode 100644 index 00000000..5ccac4fe --- /dev/null +++ b/src/css/variables.scss @@ -0,0 +1,268 @@ +// All CSS custom properties (variables) for the site, grouped by concern. +// Actual styling rules live in custom.scss / component stylesheets. +// +// Theme variables (ours) and Infima's own variables are kept in separate +// :root / html[data-theme="dark"] blocks below, so it's always clear which +// system a given variable belongs to. + +// ========================================================================= +// Theme variables +// ========================================================================= + +:root { + // Brand + --src-primary: #06b250; + --src-highlight: #39e265; + --src-red: #ff7777; + + // Layout + --root-wrapper-width: 110rem; + --menu-indicator-color: #ccc; + --docs-title-border: #e0e0e0; + --doc-sidebar-width: 300px; + --doc-sidebar-hidden-width: 30px; + + --h1-base-font-size: 2.25rem; + + // Cards + --card-color: rgb(255, 255, 255, 0.9); + --card-border-color: #e8e8e8; + --card-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + --card-box-shadow-highlight: 0 2px 25px rgba(31, 96, 233, 0.05); + + // Code blocks / syntax highlighting + --color-text-muted: #939598; + --code-foreground: #000000; + --code-background: #f3f3f3; + --code-token-keyword: #5a2cbc; + --code-token-constant: #1a7032; + --code-token-string: #d18c0c; + --code-token-comment: #7e7e7e; + --code-token-parameter: #000000; + --code-token-function: #1a7032; + --code-token-string-expression: #f1a10d; + --code-token-punctuation: #000000; + --code-token-link: #000000; + --code-token-number: #000000; + --code-token-property: rgb(105, 76, 156); + --code-highlight-color: #1c1c1c; + --codeblock-title-border: #d1d1d1; + --codeblock-valid-border: var(--src-primary); + --codeblock-invalid-border: var(--src-red); + --codeblock-highlighted-line-background: rgb(230 230 230); +} + +html[data-theme="dark"] { + // Layout + --docs-title-border: #1a1a1a; + + // Cards + --card-color: rgb(29, 29, 29, 0.4); + --card-border-color: #313131; + --card-box-shadow: 0 2px 25px rgba(238, 238, 238, 0.05); + + // Code blocks / syntax highlighting + --code-foreground: #ffffff; + --code-background: #191919; + --code-token-keyword: #aca4ff; + --code-token-constant: #3ecf6e; + --code-token-string: #e7bb94; + --code-token-comment: #7e7e7e; + --code-token-parameter: #ffffff; + --code-token-function: #3ecf6e; + --code-token-string-expression: #ffcda1; + --code-token-punctuation: #ffffff; + --code-token-link: #ffffff; + --code-token-number: #ffffff; + --code-token-property: rgb(180, 148, 234); + --code-highlight-color: #232323; + --codeblock-title-border: #323232; + --codeblock-highlighted-line-background: rgb(47 47 47); +} + +// Feedback widget (pushfeedback's own vars, not ours). Unlike every other +// variable here, pushfeedback ships its own defaults for these same names +// (see node_modules/pushfeedback/dist/pushfeedback/pushfeedback.css), using +// `:root` for light and `[data-theme='dark']` for dark — both specificity +// (0,1,0). A plain `:root` here would tie and depend on stylesheet load +// order; `html[data-theme=...]` is (0,1,1), so ours always wins. +html[data-theme="dark"], +html[data-theme="light"] { + --feedback-button-text-font-size: 1rem; // same as text size + --feedback-button-text-font-weight: 600; + --feedback-background: var(--code-background); + --feedback-button-dark-bg-color: var(--feedback-background); + --feedback-button-dark-text-color: var(--feedback-primary-color); + --feedback-button-dark-icon-color: var(--feedback-primary-color); + --feedback-modal-button-submit-bg-color: var(--feedback-background); + --feedback-modal-button-submit-bg-color-hover: var(--feedback-background); + --feedback-modal-button-border-color-active: var(--feedback-background); + --feedback-modal-button-submit-border-color-hover: var( + --feedback-primary-color + ); + --feedback-modal-button-submit-text-color: var(--feedback-primary-color); + --feedback-modal-button-submit-text-color-hover: var( + --feedback-primary-color + ); + --feedback-modal-rating-button-selected-color: var(--feedback-primary-color); + --feedback-modal-rating-button-positive-selected-color: var( + --ifm-color-primary + ); + --feedback-modal-rating-button-negative-selected-color: var(--src-red); +} +html[data-theme="dark"] { + --feedback-primary-color: var(--ifm-color-primary); +} +html[data-theme="light"] { + --feedback-primary-color: #000000; +} + +// DocSearch theming (its own CSS custom properties, not ours) + +[data-theme="light"] .DocSearch { + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-container-background: rgba(36, 36, 36, 0.8); + // Modal + --docsearch-modal-background: var(--ifm-color-secondary-lighter); + // Search box + --docsearch-searchbox-background: var(--ifm-color-secondary); + --docsearch-searchbox-focus-background: var(--ifm-color-white); + // Hit + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-white); + --docsearch-hit-background-active: rgba(94, 100, 112, 0.7); + // Footer + --docsearch-footer-background: var(--ifm-color-white); + --docsearch-search-button-background: var(--ifm-background-color); +} + +[data-theme="dark"] .DocSearch { + --docsearch-text-color: var(--ifm-font-color-base); + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-container-background: rgba(24, 24, 24, 0.7); + --docsearch-highlight-color: var(--ifm-color-primary); + + // Modal + --docsearch-modal-background: var(--ifm-background-color); + // Search box + --docsearch-searchbox-background: var(--ifm-background-color); + --docsearch-searchbox-focus-background: var(--ifm-color-black); + // Hit + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-emphasis-100); + --docsearch-hit-background-active: rgba(124, 124, 124, 0.7); + + // Footer + --docsearch-footer-background: var(--ifm-background-surface-color); + --docsearch-key-gradient: linear-gradient( + -26.5deg, + var(--ifm-color-emphasis-200) 0%, + var(--ifm-color-emphasis-100) 100% + ); + --docsearch-search-button-background: var(--ifm-background-color); +} + +// ========================================================================= +// Infima overrides +// ========================================================================= + +:root { + // Colors + --ifm-color-primary: var(--src-primary); + --ifm-color-primary-dark: #1554d8; + --ifm-color-primary-darker: #144fcc; + --ifm-color-primary-darkest: #1141a8; + --ifm-color-primary-light: #3771eb; + --ifm-color-primary-lighter: #437aed; + --ifm-color-primary-lightest: #6793f0; + --ifm-color-secondary-contrast-background: rgb(236, 236, 236); + + --ifm-color-info-dark: rgb(0, 205, 80); + --ifm-color-info-darker: rgb(7, 160, 66); + --ifm-color-info-darkest: rgb(4, 146, 59); + --ifm-color-info-contrast-background: rgb(255, 255, 255); + --ifm-color-info-contrast-foreground: rgb(0, 0, 0); + + --ifm-container-width-xl: 1400px; + + // Fonts + --ifm-font-family-base: + "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, + Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-font-size-base: 1rem; + --ifm-font-weight-bold: 800; + --ifm-heading-font-family: "Funnel Display", sans-serif; + --ifm-heading-font-weight: 400; + --ifm-h1-font-size: var(--h1-base-font-size); + + --ifm-leading-desktop: 1.75; + --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem); + + // Base + --ifm-global-radius: 0rem; + + // Code + --ifm-code-background: rgb(226, 226, 226); + --ifm-code-font-size: 80%; + --ifm-code-border-radius: 0.375rem; // 6px + --ifm-pre-padding: 1rem; + + // Table of contents + --ifm-toc-border-color: transparent; + --ifm-toc-padding-horizontal: 0.313rem; + --ifm-toc-padding-vertical: 0.5rem; + --ifm-toc-padding-horizontal: 1rem; + + // Menu / sidebar + --ifm-menu-color: var(--ifm-color-emphasis-700); + --ifm-menu-color-active: var(--ifm-color-primary); + --ifm-menu-color-background-active: transparent; + --ifm-menu-link-padding-horizontal: 1rem; + --ifm-menu-link-padding-vertical: 0.5rem; + + // Navbar + --ifm-navbar-height: 80px; + --ifm-navbar-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1); + --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); + + // Footer + --ifm-footer-background-color: var(--ifm-background-color); + + // Alerts + --ifm-alert-border-left-width: 2px; + --ifm-alert-border-radius: 0rem; + + // Breadcrumbs + --ifm-breadcrumb-spacing: 0rem; + --ifm-breadcrumb-color-active: inherit; + --ifm-breadcrumb-item-background-active: transparent; + --ifm-breadcrumb-separator: none; + + // Scrollbar + --ifm-scrollbar-thumb-background-color: var(--ifm-color-emphasis-400); + + --ifm-hr-background-color: var(--ifm-color-emphasis-300); +} + +html[data-theme="dark"] { + --ifm-color-primary: var(--src-highlight); + --ifm-background-color: #000000; + --ifm-background-surface-color: var(--ifm-background-color); + + --ifm-color-content-secondary: rgb(174 174 174); + --ifm-color-secondary-contrast-background: #222222; + + --ifm-color-info-contrast-background: rgb(0, 0, 0); + --ifm-color-info-contrast-foreground: rgb(255, 255, 255); + + --ifm-toc-border-color: transparent; + --ifm-menu-color: var(--ifm-color-emphasis-400); + --ifm-scrollbar-thumb-background-color: var(--ifm-color-emphasis-200); + + --ifm-color-success-contrast-background: #011a0b; + + --ifm-hr-background-color: var(--ifm-color-emphasis-200); +} diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 4cd17586..aa8f824e 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -1,4 +1,4 @@ -@import "../css/utils"; +@use "../css/utils" as *; .homeWrapper { margin: auto 0; @@ -65,7 +65,7 @@ display: block; background-color: var(--card-color); border: rem(1px) solid var(--card-border-color); - border-radius: rem(8px); + border-radius: rem(5x); padding: rem(32px); text-align: center; color: var(--ifm-font-color-base); diff --git a/src/theme/ColorModeToggle/MoonIcon.tsx b/src/theme/ColorModeToggle/MoonIcon.tsx index 068cf516..dc38fb0b 100644 --- a/src/theme/ColorModeToggle/MoonIcon.tsx +++ b/src/theme/ColorModeToggle/MoonIcon.tsx @@ -3,22 +3,18 @@ import React, { FC } from "react"; const MoonIcon: FC<{ className: string }> = (props) => { return ( - - - + ); }; diff --git a/src/theme/ColorModeToggle/SunIcon.tsx b/src/theme/ColorModeToggle/SunIcon.tsx index 5462912e..59b8f79b 100644 --- a/src/theme/ColorModeToggle/SunIcon.tsx +++ b/src/theme/ColorModeToggle/SunIcon.tsx @@ -3,50 +3,26 @@ import React, { FC } from "react"; const SunIcon: FC<{ className: string }> = (props) => { return ( - - - - - - - + + + + + + + + + ); }; diff --git a/src/theme/ColorModeToggle/index.tsx b/src/theme/ColorModeToggle/index.tsx index aa14d7d8..6548f4ec 100644 --- a/src/theme/ColorModeToggle/index.tsx +++ b/src/theme/ColorModeToggle/index.tsx @@ -1,94 +1,50 @@ -import { translate } from '@docusaurus/Translate'; -import useIsBrowser from '@docusaurus/useIsBrowser'; -import clsx from 'clsx'; -import React, { FC, memo, useRef, useState } from 'react'; -import MoonIcon from './MoonIcon'; -import styles from './styles.module.scss'; -import SunIcon from './SunIcon'; - -const Toggle: FC = memo( - ({ className, disabled, value, onChange }) => { - - const inputRef = useRef(null); - const isBrowser = useIsBrowser(); - const [checked, setChecked] = useState(value === "light"); - const [focused, setFocused] = useState(false); - - const title = translate( - { - message: 'Switch between dark and light mode (currently {mode})', - id: 'theme.colorToggle.ariaLabel', - description: 'The ARIA label for the navbar color mode toggle', - }, - { - mode: - value === 'dark' - ? translate({ - message: 'dark mode', - id: 'theme.colorToggle.ariaLabel.mode.dark', - description: 'The name for the dark color mode', +import { translate } from "@docusaurus/Translate"; +import useIsBrowser from "@docusaurus/useIsBrowser"; +import type { Props } from "@theme/ColorModeToggle"; +import clsx from "clsx"; +import React, { type ReactNode } from "react"; +import MoonIcon from "./MoonIcon"; +import styles from "./styles.module.scss"; +import SunIcon from "./SunIcon"; + +function ColorModeToggle({ className, value, onChange }: Props): ReactNode { + const isBrowser = useIsBrowser(); + + const title = translate( + { + message: "Switch between dark and light mode (currently {mode})", + id: "theme.colorToggle.ariaLabel", + description: "The ARIA label for the navbar color mode toggle", + }, + { + mode: + value === "dark" + ? translate({ + message: "dark mode", + id: "theme.colorToggle.ariaLabel.mode.dark", + description: "The name for the dark color mode", }) - : translate({ - message: 'light mode', - id: 'theme.colorToggle.ariaLabel.mode.light', - description: 'The name for the light color mode', + : translate({ + message: "light mode", + id: "theme.colorToggle.ariaLabel.mode.light", + description: "The name for the light color mode", }), - }, - ); - - return ( -
-
inputRef.current?.click()} - > -
-
-
- - -
-
- - onChange(value === 'dark' ? 'light' : 'dark')} - onClick={() => setChecked(!checked)} - onFocus={() => setFocused(true)} - onBlur={() => setFocused(false)} - onKeyDown={(e) => { - if (e.key === "Enter") { - inputRef.current?.click(); - } - }} - /> -
- ); - } -); - + }, + ); -function ColorModeToggle(props) { - const { className } = props; return ( -
- -
+ ); } diff --git a/src/theme/ColorModeToggle/styles.module.scss b/src/theme/ColorModeToggle/styles.module.scss index 743095a8..83076252 100644 --- a/src/theme/ColorModeToggle/styles.module.scss +++ b/src/theme/ColorModeToggle/styles.module.scss @@ -1,127 +1,44 @@ -.toggle { - touch-action: pan-x; - position: relative; - cursor: pointer; - user-select: none; - -webkit-tap-highlight-color: transparent; -} - -.toggleScreenReader { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - width: 1px; -} - -.toggleDisabled { - cursor: not-allowed; -} - -.toggleTrack { - width: 44px; - height: 16px; - border-radius: 30px; - background-color: #d6d6d6; - transition: all 0.2s ease; -} - -.toggleTrackCheck { - position: absolute; - width: 14px; - height: 10px; - top: 0px; - bottom: 0px; - margin: auto 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -[data-theme="dark"] { - .toggleTrack { - background-color: #3a3a3a; - } -} - -[data-theme="dark"] .toggle .toggleTrackCheck, -.toggleChecked .toggleTrackCheck { - opacity: 1; - transition: opacity 0.25s ease; -} - -.toggleTrackX { - position: absolute; - width: 10px; - height: 10px; - top: 0px; - bottom: 0px; - margin: auto 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -[data-theme="dark"] .toggle .toggleTrackX, -.toggleChecked .toggleTrackX { - opacity: 0; -} +@use "../../css/utils" as *; -.toggleTrackThumb { - position: absolute; - top: -5px; - left: 1px; - width: 25px; - height: 25px; - border: 1px solid #979797; +.toggleButton { + display: flex; + align-items: center; + justify-content: center; + width: rem(32px); + height: rem(32px); + padding: 0; + border: none; border-radius: 50%; - - transition: all 0.25s ease; - background-color: rgb(56, 56, 56); - color: rgb(223, 223, 223); + background: transparent; + color: var(--ifm-color-emphasis-700); + cursor: pointer; + transition: + background-color 0.2s ease, + color 0.2s ease; + opacity: 0.9; svg { - position: absolute; - top: 0; - height: 15px; - width: 15px; - left: 4px; - top: 4px; - fill: currentColor; + width: rem(23px); + height: rem(23px); + fill: none; + stroke: currentColor; } -} -[data-theme="dark"] { - .toggleTrackThumb { - color: #000; - background-color: #fafafa; + &:hover { + opacity: 1; + background-color: var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-900); } -} - -[data-theme="dark"] .toggle .toggleTrackThumb { - left: 27px; -} -.toggleFocused .toggleTrackThumb, -.toggle:hover .toggleTrackThumb { - box-shadow: 0px 0px 2px 3px var(--ifm-color-primary); -} - -.toggle:active:not(.toggleDisabled) .toggleTrackThumb { - box-shadow: 0px 0px 5px 5px var(--ifm-color-primary); -} + &:focus-visible { + outline: none; + box-shadow: 0 0 0 rem(2px) var(--ifm-color-primary); + } -.toggleIcon { - align-items: center; - display: flex; - height: 10px; - justify-content: center; - width: 10px; -} -.toggle::before { - position: absolute; + &:disabled { + cursor: not-allowed; + opacity: 0.5; + } } [data-theme="light"] .dark, diff --git a/src/theme/DocItem/Content/index.js b/src/theme/DocItem/Content/index.js deleted file mode 100644 index 12ee749d..00000000 --- a/src/theme/DocItem/Content/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import {ThemeClassNames} from '@docusaurus/theme-common'; -import {useDoc} from '@docusaurus/plugin-content-docs/client'; -import Heading from '@theme/Heading'; -import MDXContent from '@theme/MDXContent'; -/** - Title can be declared inside md content or declared through - front matter and added manually. To make both cases consistent, - the added title is added under the same div.markdown block - See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120 - - We render a "synthetic title" if: - - user doesn't ask to hide it with front matter - - the markdown content does not already contain a top-level h1 heading -*/ -function useSyntheticTitle() { - const {metadata, frontMatter, contentTitle} = useDoc(); - const shouldRender = - !frontMatter.hide_title && typeof contentTitle === 'undefined'; - if (!shouldRender) { - return null; - } - return metadata.title; -} -export default function DocItemContent({children}) { - const syntheticTitle = useSyntheticTitle(); - return ( -
- {syntheticTitle && ( -
- {syntheticTitle} -
- )} - {children} -
- ); -} diff --git a/src/theme/DocItem/Footer/index.tsx b/src/theme/DocItem/Footer/index.tsx index dda8286f..0f1caab0 100644 --- a/src/theme/DocItem/Footer/index.tsx +++ b/src/theme/DocItem/Footer/index.tsx @@ -73,20 +73,22 @@ function FeedbackWidget(): ReactNode { return (
-
Was this helpful?
+
Was this helpful?
{status === "sent" && ( -
Thanks for your feedback!
+
+ Thanks for your feedback! +
)} {/* Hidden rather than unmounted: feedback events emit on the host element after the fetch resolves, so it must stay connected for the document listeners (esp. feedbackError) to hear them */}
- + - + - @@ -122,7 +124,7 @@ function FeedbackWidget(): ReactNode {
{status === "failed" && ( -
+
Something went wrong. Please try again.
)} @@ -133,7 +135,11 @@ function FeedbackWidget(): ReactNode { export default function FooterWrapper(props: Props): ReactNode { return ( <> - + {/* Skip mounting entirely without a project ID: the pushfeedback + custom element fetches project data as soon as it connects, + regardless of whether `project` is set, so mounting it with an + empty ID always 404s. */} + {process.env.PUSHFEEDBACK_PROJECT_ID && }