From a0fa3d6401e37e815af655cd69c825f074266458 Mon Sep 17 00:00:00 2001 From: devin distefano Date: Mon, 19 Oct 2026 13:03:20 -0500 Subject: [PATCH 01/15] dark mode + client side transitions --- astro.config.ts | 12 + patches/astro+5.18.2.patch | 21 ++ public/chainlink-docs-dark.svg | 30 +++ .../PolicyInstanceBuilder.module.css | 6 +- .../AnchoredAccordion/AnchoredAccordion.astro | 10 +- src/components/Aside.astro | 2 +- src/components/CCIP/AddButton/AddButton.astro | 2 +- src/components/CCIP/Breadcrumb/Breadcrumb.css | 8 +- .../CCIP/BrowseButton/BrowseButton.astro | 2 +- src/components/CCIP/Cards/Card.css | 8 +- src/components/CCIP/Cards/NetworkCard.css | 8 +- src/components/CCIP/Cards/TokenCard.css | 16 +- src/components/CCIP/Chain/Chain.astro | 8 +- .../CCIP/Chain/DecommissionedChain.astro | 12 +- src/components/CCIP/ChainHero/ChainHero.css | 16 +- .../CCIP/ChainHero/LaneDetailsHero.css | 4 +- src/components/CCIP/Drawer/Drawer.css | 2 +- src/components/CCIP/Hero/Hero.css | 4 +- .../CCIP/Landing/ccip-landing.astro | 4 +- .../LandingVersionNote.astro | 2 +- src/components/CCIP/Search/Search.css | 18 +- src/components/CCIP/Search/Search.tsx | 3 +- src/components/CCIP/Search/SearchIcon.tsx | 16 ++ src/components/CCIP/SeeMore/SeeMore.css | 2 +- src/components/CCIP/Tables/Table.css | 48 ++-- .../CCIP/Tables/TableSearchInput.css | 2 +- .../CCIP/Tables/TableSearchInput.tsx | 3 +- src/components/CCIP/Tables/Tabs.css | 4 +- src/components/CCIP/Token/Token.astro | 4 +- .../ContractAddress.css | 2 +- .../SectionProgress.module.css | 10 +- .../CCIP/TutorialProgress/StepCheckbox.css | 10 +- .../TutorialSetup/TutorialStep.module.css | 8 +- src/components/CCIP/Verifiers/Verifiers.css | 4 +- src/components/CRETemplate/CRETemplate.astro | 36 +-- .../CRETemplate/CRETemplateOverview.astro | 16 +- .../CRETemplate/CRETemplatePanel.astro | 34 +-- src/components/CRETemplate/TemplateCard.astro | 22 +- src/components/Cards/cards.module.css | 4 +- .../CcipVersionBanner.module.css | 4 +- .../CcipVersionToggle/CcipVersionGuard.astro | 13 +- .../CcipVersionToggle.module.css | 8 +- .../ChainSelector/ChainSelector.module.css | 54 ++-- .../ChangelogSnippet/ChangelogCard.astro | 4 +- .../ChangelogSnippet/ChangelogCard.module.css | 6 +- .../CodeHighlightBlock.astro | 2 +- .../CodeHighlightBlock/CodeHighlightBlock.css | 18 +- .../CodeHighlightBlockMulti.astro | 2 +- .../CommunityEvents/EventCard.module.css | 2 +- src/components/DocCards/DocCards.module.css | 2 +- .../docsNavigationDesktop.module.css | 12 +- .../docsPickerDesktop.module.css | 12 +- .../DocsNavigationMobile/bottomBar.module.css | 4 +- .../DocsNavigationMobile/category.module.css | 6 +- .../docsNavigationMobile.module.css | 8 +- .../docsPickerMobile.module.css | 10 +- .../productNavigation.module.css | 2 +- src/components/ErrorBoundary.module.css | 46 ++-- .../Footer/NewsletterSignupForm.tsx | 2 +- src/components/HeadCommon.astro | 5 +- src/components/Header/Header.astro | 2 +- src/components/Header/Nav/NavBar.tsx | 2 + .../Desktop/category.module.css | 6 +- .../Desktop/megaMenu.module.css | 2 +- .../Desktop/productNavigation.module.css | 26 +- .../Desktop/subProductContent.module.css | 6 +- .../Desktop/trigger.module.css | 6 +- .../Mobile/category.module.css | 2 +- .../Mobile/megaMenu.module.css | 16 +- .../Mobile/productNavigation.module.css | 6 +- src/components/Header/Nav/ThemeToggle.tsx | 86 +++++++ src/components/Header/Nav/navBar.module.css | 14 +- .../Header/Nav/themeToggle.module.css | 46 ++++ src/components/LanguageSwitcher.module.css | 8 +- .../LayoutHero/LayoutHero.module.css | 4 +- .../LeftSidebar/recursiveSidebar.module.css | 2 +- .../MethodTabs/MethodTabs.module.css | 2 +- src/components/Modal/Modal.module.css | 2 +- src/components/NavigationProgress.astro | 94 +++++++ src/components/PageContent/Feedback.tsx | 2 +- src/components/PageContent/PageContent.astro | 2 +- src/components/PageTabs.astro | 28 +- .../sections/ProductChainTable.module.css | 31 ++- .../sections/QuickLinksHero.module.css | 8 +- .../Quickstart/Accordion/Accordion.astro | 4 +- src/components/Quickstart/Quickstart.astro | 6 +- .../Quickstart/QuickstartOverview.astro | 4 +- .../Quickstart/QuickstartPanel.astro | 4 +- src/components/ReleaseNotes.astro | 2 +- .../CopyPageLink/CopyPageLink.module.css | 22 +- .../MarkdownPreviewModal.module.css | 68 +++-- .../RightSidebar/LlmsLink.module.css | 2 +- src/components/RightSidebar/MoreMenu.astro | 4 +- .../RightSidebar/RightSidebar.astro | 2 +- src/components/Segment/Segments.css | 4 +- .../SidebarDropdown.module.css | 26 +- src/components/Solutions/SolutionCard.astro | 22 +- .../Solutions/SolutionDisclaimer.astro | 6 +- .../Solutions/SolutionNavigation.astro | 18 +- .../Solutions/SolutionSummary.astro | 22 +- src/components/Solutions/SolutionsHub.astro | 24 +- .../solutionMobileNavigation.module.css | 16 +- .../StickyHeader/stickyHeader.module.css | 12 +- src/components/Tabs/Tabs.module.css | 2 +- src/components/Tabs/Tabs.tsx | 2 +- src/components/TryItOut/styles.module.css | 8 +- .../github-card/GitHubCard.module.css | 4 +- src/content/data-feeds/historical-data.mdx | 2 +- src/content/data-feeds/overview.mdx | 2 +- src/content/data-feeds/using-data-feeds.mdx | 2 +- .../vrf/v2-5/subscription/test-locally.mdx | 2 +- .../ccip/components/MintTokenButton.tsx | 2 +- .../ccip/components/NetworkDropdown.tsx | 2 +- .../components/WalletConnection.module.css | 18 +- .../components/WalletSetupGate.module.css | 6 +- .../ccip/components/WalletSetupGate.tsx | 2 +- .../components/api-reference/Errors.astro | 2 +- .../components/api-reference/Events.astro | 2 +- .../ccip/components/billing/Billing.astro | 2 +- .../components/billing/TokenCalculator.tsx | 2 +- .../faucet/SVMTestTokens.module.css | 6 +- .../components/faucet/SVMTestTokensClient.tsx | 2 +- .../components/networkDropdown.module.css | 12 +- .../rate-limit-bucket/RateLimitBucket.astro | 6 +- src/features/ccip/components/toast.css | 2 +- .../components/UpkeepLookup.tsx | 2 +- .../components/SubscriptionLookup.tsx | 2 +- .../ens/components/EnsLookupForm.module.css | 2 +- .../ens/components/EnsManualLookupForm.tsx | 2 +- .../feeds/components/FeedList.module.css | 34 +-- src/features/feeds/components/FeedList.tsx | 2 +- .../feeds/components/Tables.module.css | 38 +-- src/features/feeds/components/Tables.tsx | 2 +- .../components/get-price/PriceButton.tsx | 2 +- .../pause-notice/PauseNotice.module.css | 2 +- .../landing/components/ProductCard.module.css | 6 +- .../styles/EthereumLandingPage.module.css | 4 +- .../components/headerBanner.module.css | 2 +- src/features/vrf/v2/components/CostTable.tsx | 2 +- src/features/vrf/v2/components/costTable.css | 2 +- src/features/vrf/v2/components/dropdown.css | 2 +- src/layouts/BaseLayout.astro | 129 +++++++++- src/layouts/CRETemplateLayout.astro | 8 +- src/layouts/CcipDirectoryLayout.astro | 8 +- src/layouts/QuickstartLayout.astro | 4 +- src/layouts/SolutionLayout.astro | 4 +- src/layouts/TutorialLayout.astro | 2 +- src/lib/designSystemButton.ts | 11 + .../components/SuccessState.tsx | 2 +- .../components/WalletPicker.module.css | 6 +- src/pages/api/ace/coordinator/docs.astro | 6 +- src/pages/api/ace/evaluation/docs.astro | 4 +- src/pages/api/ace/reporting/docs.astro | 6 +- src/pages/api/ccip/v1/docs.astro | 10 +- src/pages/api/crec/docs.astro | 6 +- src/pages/certification.astro | 20 +- src/pages/chainlink-nodes.astro | 2 +- src/pages/cre-templates/index.astro | 44 ++-- src/pages/cre/[...id].astro | 17 ++ src/pages/index.astro | 14 +- .../copyToClipboard/copyToClipboard.ts | 6 +- src/scripts/fix-external-links.ts | 2 +- src/scripts/fix-remix-urls.ts | 2 +- src/scripts/link-to-wallet.ts | 2 +- src/scripts/scroll-to-search.ts | 2 +- src/styles/dark.css | 242 ++++++++++++++++++ src/styles/index.css | 2 +- src/styles/migrated.css | 8 +- src/styles/theme.css | 11 + tailwind.config.js | 13 +- vercel.json | 9 + 171 files changed, 1437 insertions(+), 677 deletions(-) create mode 100644 patches/astro+5.18.2.patch create mode 100644 public/chainlink-docs-dark.svg create mode 100644 src/components/CCIP/Search/SearchIcon.tsx create mode 100644 src/components/Header/Nav/ThemeToggle.tsx create mode 100644 src/components/Header/Nav/themeToggle.module.css create mode 100644 src/components/NavigationProgress.astro create mode 100644 src/lib/designSystemButton.ts create mode 100644 src/styles/dark.css diff --git a/astro.config.ts b/astro.config.ts index 34ce5588199..42326697f21 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -44,6 +44,18 @@ const canonicalUrlsWithLanguageVariants = extractCanonicalUrlsWithLanguageVarian export default defineConfig({ site: "https://docs.chain.link", trailingSlash: "never", + // Prefetch internal links so client-side navigations (ClientRouter) feel instant. + // "hover" (not "viewport") avoids prefetching the hundreds of links in the docs sidebar at once. + // + // NOTE (Astro 5 -> 7 upgrade): `prefetch` and `` are stable in Astro 5 and remain + // the supported API in Astro 6/7, so this config carries over unchanged. The one thing to revisit + // is `patches/astro+5.18.2.patch` (dev-server module-graph perf fix): it is pinned to 5.18.2 and + // will fail to apply after the upgrade. Check whether the upstream fix has landed by then; if not, + // regenerate the patch against the new version with `npx patch-package astro`. + prefetch: { + prefetchAll: true, + defaultStrategy: "hover", + }, redirects: { "/ccip/directory": "/ccip/directory/mainnet", "/ccip/supported-networks": "/ccip/directory/mainnet", diff --git a/patches/astro+5.18.2.patch b/patches/astro+5.18.2.patch new file mode 100644 index 00000000000..2326c547f7f --- /dev/null +++ b/patches/astro+5.18.2.patch @@ -0,0 +1,21 @@ +diff --git a/node_modules/astro/dist/vite-plugin-astro-server/vite.js b/node_modules/astro/dist/vite-plugin-astro-server/vite.js +index 81bb5cf..e2f060c 100644 +--- a/node_modules/astro/dist/vite-plugin-astro-server/vite.js ++++ b/node_modules/astro/dist/vite-plugin-astro-server/vite.js +@@ -60,6 +60,16 @@ async function* crawlGraph(loader, _id, isRootFile, scanned = /* @__PURE__ */ ne + } + } + function isImportedBy(parent, entry) { ++ // Vite 6's backward-compatible ModuleNode rebuilds a union Set (and looks up a compat ++ // node for every importer) each time `importers` is read. With ~3.7k icons importing ++ // one module that is ~27M iterations per request. Read the per-environment Sets directly. ++ const client = entry._clientModule; ++ const ssr = entry._ssrModule; ++ if (client || ssr) { ++ if (client) for (const importer of client.importers) if (importer.id === parent) return true; ++ if (ssr) for (const importer of ssr.importers) if (importer.id === parent) return true; ++ return false; ++ } + for (const importer of entry.importers) { + if (importer.id === parent) { + return true; diff --git a/public/chainlink-docs-dark.svg b/public/chainlink-docs-dark.svg new file mode 100644 index 00000000000..105cc7cb3b7 --- /dev/null +++ b/public/chainlink-docs-dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css b/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css index 858b8e54d79..698c416eef1 100644 --- a/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css +++ b/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css @@ -105,7 +105,7 @@ font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; - color: var(--blue-600, #375bd2); + color: var(--text-accent); background: transparent; border: 1px solid var(--blue-600, #375bd2); border-radius: 4px; @@ -204,7 +204,7 @@ } .learnMore a { - color: var(--blue-600, #375bd2); + color: var(--text-accent); text-decoration: none; font-weight: 500; } @@ -248,7 +248,7 @@ :global(.theme-dark) .copyButton:hover { background: var(--blue-400, #6d9eff); - color: #1a1a1a; + color: var(--foreground); } :global(.theme-dark) .codeBlock { diff --git a/src/components/AnchoredAccordion/AnchoredAccordion.astro b/src/components/AnchoredAccordion/AnchoredAccordion.astro index bfbe2fe179e..bc4db106f27 100644 --- a/src/components/AnchoredAccordion/AnchoredAccordion.astro +++ b/src/components/AnchoredAccordion/AnchoredAccordion.astro @@ -60,12 +60,12 @@ const id = anchorId || slugger.slug(title) details { overflow: hidden; - border-bottom: 1px solid var(--gray-300, #ced0d5); + border-bottom: 1px solid var(--color-border-secondary); transition: background-color 0.15s ease; } details:not([open]):hover { - background-color: var(--blue-50, #eef2ff); + background-color: var(--surface-accent); } summary { @@ -74,7 +74,7 @@ const id = anchorId || slugger.slug(title) align-items: center; gap: var(--space-8x); cursor: pointer; - color: var(--blue-800, #1a2b6b); + color: var(--color-text-link-hover); font-size: 16px; padding: var(--space-2x) 0px; list-style: none; @@ -82,7 +82,7 @@ const id = anchorId || slugger.slug(title) } details[open] > summary:hover { - background-color: var(--blue-50, #eef2ff); + background-color: var(--surface-accent); } summary::-webkit-details-marker { @@ -116,7 +116,7 @@ const id = anchorId || slugger.slug(title) .permalink:hover { opacity: 1; - color: var(--blue-800, #1a2b6b); + color: var(--color-text-link-hover); } .accordion-arrow { diff --git a/src/components/Aside.astro b/src/components/Aside.astro index fc8421be0fc..83720185875 100644 --- a/src/components/Aside.astro +++ b/src/components/Aside.astro @@ -37,7 +37,7 @@ const icons = { padding: var(--space-4x); gap: var(--space-4x); background-color: var(--aside-bg); - border: 1px solid #eee; + border: 1px solid var(--border); border-radius: var(--border-radius-10); color: var(--color-text-info); diff --git a/src/components/CCIP/AddButton/AddButton.astro b/src/components/CCIP/AddButton/AddButton.astro index bd52b43b126..8f1b1ca0938 100644 --- a/src/components/CCIP/AddButton/AddButton.astro +++ b/src/components/CCIP/AddButton/AddButton.astro @@ -32,7 +32,7 @@ const { href, text, urlClass } = Astro.props } .add-button:hover { - background-color: var(--gray-100); + background-color: var(--muted); border-color: var(--gray-400); } diff --git a/src/components/CCIP/Breadcrumb/Breadcrumb.css b/src/components/CCIP/Breadcrumb/Breadcrumb.css index 0ab03d30200..e09de03b328 100644 --- a/src/components/CCIP/Breadcrumb/Breadcrumb.css +++ b/src/components/CCIP/Breadcrumb/Breadcrumb.css @@ -2,19 +2,19 @@ display: flex; gap: var(--space-2x); align-items: center; - color: var(--gray-700); + color: var(--color-text-secondary); flex-wrap: wrap; } .ccip-hero__breadcrumb a { - color: var(--gray-700); + color: var(--color-text-secondary); } .ccip-hero__breadcrumb a:hover { - color: var(--gray-800); + color: var(--foreground); } .ccip-hero__breadcrumb a:last-child { - color: var(--gray-900); + color: var(--foreground); font-weight: var(--font-weight-bold); } diff --git a/src/components/CCIP/BrowseButton/BrowseButton.astro b/src/components/CCIP/BrowseButton/BrowseButton.astro index 488c9723e31..0ebfbc11611 100644 --- a/src/components/CCIP/BrowseButton/BrowseButton.astro +++ b/src/components/CCIP/BrowseButton/BrowseButton.astro @@ -30,7 +30,7 @@ const { href, text } = Astro.props } .browse-button:hover { - background-color: var(--gray-100); + background-color: var(--muted); border-color: var(--gray-400); } diff --git a/src/components/CCIP/Cards/Card.css b/src/components/CCIP/Cards/Card.css index bb77dae5555..d2952fd2790 100644 --- a/src/components/CCIP/Cards/Card.css +++ b/src/components/CCIP/Cards/Card.css @@ -3,8 +3,8 @@ padding: var(--space-6x); gap: var(--space-3x); width: 100%; - background: var(--white); - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: var(--space-1x); /* Optimize rendering performance */ contain: layout style paint; @@ -12,7 +12,7 @@ } .card__container:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .card__container img, @@ -28,7 +28,7 @@ font-size: var(--space-4x); font-weight: var(--font-weight-medium); line-height: var(--space-6x); - color: var(--gray-950); + color: var(--foreground); margin-bottom: var(--space-1x); } diff --git a/src/components/CCIP/Cards/NetworkCard.css b/src/components/CCIP/Cards/NetworkCard.css index 99bc0bfb76f..3ea9f73ea1a 100644 --- a/src/components/CCIP/Cards/NetworkCard.css +++ b/src/components/CCIP/Cards/NetworkCard.css @@ -3,8 +3,8 @@ padding: var(--space-6x); gap: var(--space-3x); width: 100%; - background: var(--white); - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: var(--space-1x); /* Optimize rendering performance */ contain: layout style paint; @@ -12,7 +12,7 @@ } .network-card__container:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .network-card__container img { @@ -26,7 +26,7 @@ font-size: var(--space-4x); font-weight: var(--font-weight-medium); line-height: var(--space-6x); - color: var(--gray-950); + color: var(--foreground); margin-bottom: var(--space-1x); } diff --git a/src/components/CCIP/Cards/TokenCard.css b/src/components/CCIP/Cards/TokenCard.css index ae035e97a19..16d2a12d98b 100644 --- a/src/components/CCIP/Cards/TokenCard.css +++ b/src/components/CCIP/Cards/TokenCard.css @@ -3,8 +3,8 @@ padding: var(--space-6x); gap: var(--space-3x); width: 100%; - background: var(--white); - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: var(--space-1x); /* Optimize rendering performance */ contain: layout style paint; @@ -12,7 +12,7 @@ } .token-card__container:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .token-card__container object, @@ -28,7 +28,7 @@ font-size: var(--space-4x); font-weight: var(--font-weight-medium); line-height: var(--space-6x); - color: var(--gray-950); + color: var(--foreground); margin-bottom: var(--space-1x); } @@ -60,14 +60,14 @@ justify-content: center; padding: var(--space-6x); width: 100%; - background: var(--white); - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: var(--space-1x); text-align: center; } .token-card__square-container:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .token-card__square-logo { @@ -94,7 +94,7 @@ font-size: var(--space-4x); font-weight: var(--font-weight-medium); line-height: var(--space-6x); - color: var(--gray-950); + color: var(--foreground); margin-bottom: var(--space-1x); text-align: center; } diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro index 918db433067..b0e04f4bfe9 100644 --- a/src/components/CCIP/Chain/Chain.astro +++ b/src/components/CCIP/Chain/Chain.astro @@ -189,7 +189,7 @@ const chainStructuredData = generateChainStructuredData( } .layout h2 { - color: var(--gray-900); + color: var(--foreground); font-size: 22px; line-height: var(--space-10x); margin-bottom: 0px; @@ -208,11 +208,11 @@ const chainStructuredData = generateChainStructuredData( } :global(.chain-add-button) { border-color: var(--blue-600) !important; - color: var(--blue-600) !important; + color: var(--text-accent) !important; } :global(.chain-add-button:hover) { - background-color: var(--blue-100) !important; + background-color: var(--surface-accent-strong) !important; } @media (min-width: 50em) { @@ -242,7 +242,7 @@ const chainStructuredData = generateChainStructuredData( } .ccip-heading { - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); } } diff --git a/src/components/CCIP/Chain/DecommissionedChain.astro b/src/components/CCIP/Chain/DecommissionedChain.astro index e5c46382911..fede0a14bf4 100644 --- a/src/components/CCIP/Chain/DecommissionedChain.astro +++ b/src/components/CCIP/Chain/DecommissionedChain.astro @@ -147,7 +147,7 @@ const decommissionedChainStructuredData = generateDecommissionedChainStructuredD } .decom-content h2 { - color: var(--gray-900); + color: var(--foreground); font-size: 22px; line-height: var(--space-10x); margin: 0 0 var(--space-6x) 0; @@ -164,26 +164,26 @@ const decommissionedChainStructuredData = generateDecommissionedChainStructuredD padding: var(--space-6x); background: var(--color-background-secondary); border-radius: var(--border-radius-10); - border: 1px solid var(--gray-200); + border: 1px solid var(--border); } .decom-info-item h3 { font-size: 18px; font-weight: 600; - color: var(--gray-900); + color: var(--foreground); margin: 0 0 var(--space-3x) 0; text-align: center; } .decom-info-item p { - color: var(--gray-600); + color: var(--color-text-primary); margin: 0; line-height: 1.6; text-align: left; } .decom-info-item ul { - color: var(--gray-600); + color: var(--color-text-primary); margin: var(--space-3x) 0 0 0; padding-left: var(--space-5x); line-height: 1.6; @@ -198,7 +198,7 @@ const decommissionedChainStructuredData = generateDecommissionedChainStructuredD } .decom-info-item li strong { - color: var(--gray-900); + color: var(--foreground); } @media (min-width: 40em) { diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index cf810e10cb9..130626caa67 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -1,10 +1,10 @@ .ccip-chain-hero { background: var(--Page-Background-Alt); - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); } .ccip-chain-hero__heading { - color: var(--gray-900); + color: var(--foreground); display: flex; align-items: center; gap: var(--space-6x); @@ -82,14 +82,14 @@ font-size: 14px; line-height: 22px; padding-bottom: var(--space-4x); - color: var(--gray-700); + color: var(--color-text-secondary); } .ccip-chain-hero__feeTokens__item { display: flex; align-items: center; gap: var(--space-2x); - color: var(--gray-900); + color: var(--foreground); } .ccip-chain-hero__feeTokens__native-gas-token { @@ -97,7 +97,7 @@ font-weight: var(--font-weight-normal); font-size: var(--space-4x); line-height: var(--space-6x); - color: var(--gray-600); + color: var(--color-text-primary); } .ccip-chain-hero__feeTokens__item a { @@ -120,7 +120,7 @@ /* identical to box height, or 150% */ font-feature-settings: "liga" off; - color: #212732; + color: var(--foreground); } .ccip-chain-hero__token-logo__symbol { @@ -224,7 +224,7 @@ .ccip-chain-hero__pool-program-type { font-size: var(--font-size-s); font-weight: normal; - color: var(--gray-700); + color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; /* Prevent label from shrinking */ } @@ -266,7 +266,7 @@ gap: var(--space-4x); padding: var(--space-4x); background-color: var(--color-background-warning); - border: 1px solid var(--gray-200); + border: 1px solid var(--border); border-radius: var(--border-radius-10); color: var(--color-text-info); } diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css index 2046fc35f59..9fe73f8eef1 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.css +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css @@ -1,7 +1,7 @@ .lane-details-hero { background: var(--Page-Background-Alt); padding: var(--space-6x); - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); } .lane-details-hero h2 { @@ -33,7 +33,7 @@ display: flex; align-items: center; gap: var(--space-6x); - color: var(--gray-900); + color: var(--foreground); } .lane-details-hero__network img { diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css index 0b8d48a4d6a..40f186005bd 100644 --- a/src/components/CCIP/Drawer/Drawer.css +++ b/src/components/CCIP/Drawer/Drawer.css @@ -25,7 +25,7 @@ right: 0; width: 100%; height: 100vh; - background-color: white; + background-color: var(--background); transform: translateX(100%); transition: transform 0.5s ease-in-out; will-change: transform; diff --git a/src/components/CCIP/Hero/Hero.css b/src/components/CCIP/Hero/Hero.css index 589dba88fcc..d28d523b926 100644 --- a/src/components/CCIP/Hero/Hero.css +++ b/src/components/CCIP/Hero/Hero.css @@ -1,12 +1,12 @@ .ccip-hero { background: var(--Page-Background-Alt); - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); position: relative; z-index: 1; /* lowered */ } .ccip-hero__heading { - color: var(--gray-900); + color: var(--foreground); font-size: 2.5rem; margin-bottom: var(--space-6x); } diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro index ea022307f2a..3d31b1f7589 100644 --- a/src/components/CCIP/Landing/ccip-landing.astro +++ b/src/components/CCIP/Landing/ccip-landing.astro @@ -208,13 +208,13 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net .ccip-heading { display: flex; padding-bottom: var(--space-4x); - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); margin-bottom: var(--space-6x); justify-content: space-between; } .layout h2 { - color: var(--gray-900); + color: var(--foreground); font-size: 22px; line-height: var(--space-10x); margin-bottom: 0px; diff --git a/src/components/CCIP/LandingVersionNote/LandingVersionNote.astro b/src/components/CCIP/LandingVersionNote/LandingVersionNote.astro index 8255b3f9564..5e5f304d5aa 100644 --- a/src/components/CCIP/LandingVersionNote/LandingVersionNote.astro +++ b/src/components/CCIP/LandingVersionNote/LandingVersionNote.astro @@ -15,7 +15,7 @@ const NOTE_ID = "ccip-canonical-landing-version-note" padding: 12px 14px; border: 1px solid rgba(229, 231, 235, 1); border-radius: 12px; - background: rgba(249, 250, 251, 1); + background: var(--muted); font-size: 14px; line-height: 20px; color: rgba(55, 65, 81, 1); diff --git a/src/components/CCIP/Search/Search.css b/src/components/CCIP/Search/Search.css index 484a9e80960..13d8714384c 100644 --- a/src/components/CCIP/Search/Search.css +++ b/src/components/CCIP/Search/Search.css @@ -1,11 +1,11 @@ .ccip-hero__search { - background-color: white; + background-color: var(--background); padding: 18px; display: flex; gap: var(--space-4x); width: 100%; max-width: 640px; - border: 1px solid var(--gray-200); + border: 1px solid var(--border); border-radius: var(--space-1x); position: relative; } @@ -17,7 +17,7 @@ left: 0; right: 0; bottom: 0; - background-color: rgba(255, 255, 255, 0.7); + background-color: color-mix(in srgb, var(--background) 70%, transparent); z-index: 3; } @@ -66,7 +66,7 @@ top: 110%; left: -1px; right: -1px; - background-color: white; + background-color: var(--background); border: 1px solid var(--gray-400); border-radius: var(--space-1x); z-index: 1; @@ -75,11 +75,11 @@ font-style: normal; font-weight: 600; font-size: var(--space-4x); - color: #000000; + color: var(--foreground); } .ccip-hero__search-results a { - color: #000000; + color: var(--foreground); } .ccip-hero__search-results ul { @@ -118,7 +118,7 @@ } .ccip-hero__search-results li:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .ccip-hero__search-results li img { @@ -129,7 +129,7 @@ .ccip-hero__search-results li span { flex: 1; text-align: end; - color: var(--gray-700); + color: var(--color-text-secondary); } .ccip-hero__search-results__title, @@ -137,7 +137,7 @@ display: block; font-size: 18px; line-height: 24px; - color: var(--gray-700); + color: var(--color-text-secondary); padding-left: var(--space-6x); padding-right: var(--space-6x); padding-top: var(--space-6x); diff --git a/src/components/CCIP/Search/Search.tsx b/src/components/CCIP/Search/Search.tsx index b5e3626a739..e802c204883 100644 --- a/src/components/CCIP/Search/Search.tsx +++ b/src/components/CCIP/Search/Search.tsx @@ -1,4 +1,5 @@ import { useState, useEffect, useRef } from "react" +import { SearchIcon } from "./SearchIcon.tsx" import "./Search.css" import { clsx } from "~/lib/clsx/clsx.ts" import { useClickOutside } from "~/hooks/useClickOutside.tsx" @@ -155,7 +156,7 @@ function Search({ chains, tokens, small, environment, lanes, verifiers = [] }: S })} ref={searchRef} > - Search icon + ( + +) diff --git a/src/components/CCIP/SeeMore/SeeMore.css b/src/components/CCIP/SeeMore/SeeMore.css index 102d96cf4b1..efd46823b8a 100644 --- a/src/components/CCIP/SeeMore/SeeMore.css +++ b/src/components/CCIP/SeeMore/SeeMore.css @@ -2,7 +2,7 @@ height: 22px; font-size: 14px; line-height: 22px; - color: var(--blue-700); + color: var(--color-text-link); margin-top: var(--space-6x); } .seeMore__container { diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index 534cd02540b..c13592f412d 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -197,7 +197,7 @@ } .ccip-table tbody tr:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .ccip-table__row--clickable { @@ -214,7 +214,7 @@ /* identical to box height, or 157% */ text-align: start; background-color: transparent; - color: var(--gray-700); + color: var(--color-text-secondary); align-content: baseline; padding-left: 0; } @@ -229,7 +229,7 @@ .ccip-table tbody td { text-align: start; - color: var(--gray-900); + color: var(--foreground); padding: var(--space-4x) var(--space-4x) var(--space-4x) 0; /* Break long unbreakable strings (e.g. pool class names like SiloedWithUnsiloedXERC20GroupTokenPool) so they wrap within the cell @@ -238,7 +238,7 @@ } .ccip-table__network-name { - color: #000; + color: var(--foreground); display: flex; align-items: center; border: none; @@ -264,11 +264,11 @@ gap: var(--space-1x); font-size: 13px; padding: 6px var(--space-3x); - background: #ddf8e6; + background: var(--Success-Background, #ddf8e6); border-radius: var(--space-6x); border: 1px solid var(--Page-Border-Border, #e4e8ed); background: var(--Page-Background-Muted, #f5f7fa); - color: var(--gray-900); + color: var(--foreground); text-transform: capitalize; } .ccip-table__status img { @@ -315,7 +315,7 @@ width: var(--space-4x); height: var(--space-4x); border-radius: 50%; - background-color: #fff; + background-color: var(--white); } .ccip-table__drawer-heading { @@ -324,7 +324,7 @@ font-size: 22px; line-height: 28px; padding: var(--space-2x); - color: var(--gray-900); + color: var(--foreground); margin-bottom: 0px; background: var(--Page-Background-Alt); } @@ -336,12 +336,12 @@ align-items: center; gap: var(--space-4x); margin-bottom: var(--space-6x); - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); padding-bottom: var(--space-4x); } .ccip-table__filters-title { - color: var(--gray-900); + color: var(--foreground); font-style: normal; font-weight: var(--font-weight-medium); font-size: 22px; @@ -356,7 +356,7 @@ .ccip-table__verifier-description { margin-bottom: var(--space-6x); - color: var(--gray-900); + color: var(--foreground); } .ccip-table__verifier-description p { @@ -365,7 +365,7 @@ } .ccip-table__verifier-description-link { - color: var(--blue-600); + color: var(--text-accent); font-weight: var(--font-weight-medium); text-decoration: none; } @@ -433,7 +433,7 @@ align-items: center; gap: var(--space-2x); border: 1px solid var(--blue-600); - color: var(--blue-600); + color: var(--text-accent); } .ccip-table__filters__external-icon { @@ -476,11 +476,11 @@ /* Paused token styles */ .ccip-table__row--paused { opacity: 0.6; - background-color: var(--gray-50); + background-color: var(--muted); } .ccip-table__row--paused:hover { - background-color: var(--gray-100); + background-color: var(--muted); } .ccip-table__network-name--paused { @@ -524,7 +524,7 @@ } .ccip-table__accordion-row:hover { - background-color: var(--gray-50); + background-color: var(--muted); } .ccip-table__accordion-row--expanded { @@ -548,7 +548,7 @@ gap: var(--space-2x); font-family: inherit; font-size: inherit; - color: var(--gray-700); + color: var(--color-text-secondary); pointer-events: none; } @@ -566,7 +566,7 @@ .ccip-table__verifier-count { font-size: 14px; - color: var(--gray-600); + color: var(--color-text-primary); } .ccip-table__expand-icon { @@ -579,18 +579,18 @@ } .ccip-table__verifier-row { - background: var(--gray-50); + background: var(--muted); border-left: 4px solid var(--blue-600); } .ccip-table__verifier-row td { - border-top: 1px solid var(--gray-200); + border-top: 1px solid var(--border); } .ccip-table__verifier-content { - background: white; + background: var(--background); border-radius: var(--space-2x); - border: 1px solid var(--gray-200); + border: 1px solid var(--border); } .ccip-table--verifiers { @@ -606,7 +606,7 @@ color: var(--Page-Foreground-Muted, #6c7585); text-transform: none; letter-spacing: normal; - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); text-align: start; } @@ -617,7 +617,7 @@ .ccip-table--verifiers tbody td { padding: var(--space-4x) var(--space-6x) var(--space-4x) 0; font-size: 14px; - color: var(--gray-900); + color: var(--foreground); border-bottom: 1px solid var(--gray-100); vertical-align: middle; text-align: start; diff --git a/src/components/CCIP/Tables/TableSearchInput.css b/src/components/CCIP/Tables/TableSearchInput.css index f46d5b8b55d..8192607eadf 100644 --- a/src/components/CCIP/Tables/TableSearchInput.css +++ b/src/components/CCIP/Tables/TableSearchInput.css @@ -4,7 +4,7 @@ min-width: 40px; min-height: 40px; padding: 0 10px; - border: 1px solid var(--gray-200); + border: 1px solid var(--border); border-radius: var(--space-1x); cursor: pointer; gap: var(--space-4x); diff --git a/src/components/CCIP/Tables/TableSearchInput.tsx b/src/components/CCIP/Tables/TableSearchInput.tsx index 6a6ea2cbfd4..9a80cfb46ac 100644 --- a/src/components/CCIP/Tables/TableSearchInput.tsx +++ b/src/components/CCIP/Tables/TableSearchInput.tsx @@ -1,4 +1,5 @@ import { useRef, useState } from "react" +import { SearchIcon } from "../Search/SearchIcon.tsx" import "./TableSearchInput.css" import { useClickOutside } from "~/hooks/useClickOutside.tsx" @@ -36,7 +37,7 @@ function TableSearchInput({ search, setSearch }: TableSearchInputProps) { : undefined } > - Search icon + {isExpanded ? ( h2 { margin-top: var(--space-8x) !important; padding-top: var(--space-6x); - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--border); } article > h2:first-child { @@ -76,7 +76,7 @@ } :where(article, article section) > :is(h2, h3, h4, h5, h6) { - color: #0b101c; + color: var(--foreground); margin-top: 0; } @@ -131,7 +131,7 @@ article li { line-height: 1.6; - color: #374151; + color: var(--color-text-secondary); } article li > * { @@ -150,18 +150,18 @@ font-size: 0.5rem; top: 8px; left: -1rem; - color: #0847f7; + color: var(--color-text-link); } /* Paragraph styling */ article p { - color: #374151; + color: var(--color-text-secondary); line-height: 1.7; } /* Link styling - exclude heading links */ article a:not(.button):not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(h5 a):not(h6 a) { - color: #0847f7; + color: var(--color-text-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; @@ -178,11 +178,11 @@ /* Code styling */ article code:not(pre code) { - background: #f8faff; + background: var(--surface-accent); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; - color: #0b101c; + color: var(--foreground); } article pre { @@ -253,17 +253,17 @@ article td { padding: var(--space-3x) var(--space-4x); text-align: left; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid var(--border); } article th { - background: #f8faff; + background: var(--surface-accent); font-weight: 600; - color: #0b101c; + color: var(--foreground); } article td { - color: #374151; + color: var(--color-text-secondary); } @media (min-width: 48em) { @@ -319,12 +319,12 @@ /* Subtle background on hover */ article :global(astro-accordion details:hover) { - background: #f8faff; + background: var(--surface-accent); } /* Background when expanded */ article :global(astro-accordion details[expanded]) { - background: #f8faff; + background: var(--surface-accent); } /* Summary (clickable header) styling */ @@ -335,14 +335,14 @@ padding: var(--space-4x) var(--space-4x) var(--space-4x) var(--space-5x); font-size: 16px; font-weight: 600; - color: #0b101c; + color: var(--foreground); cursor: pointer; border-radius: 8px; transition: color 0.2s ease; } article :global(astro-accordion summary:hover) { - color: #0847f7; + color: var(--color-text-link); } /* Hide default marker */ @@ -363,8 +363,8 @@ min-width: 28px; height: 28px; margin-right: 12px; - background: #e5e7eb; - color: #5a6175; + background: var(--muted-more); + color: var(--color-text-primary); font-size: 13px; font-weight: 600; border-radius: 6px; diff --git a/src/components/CRETemplate/CRETemplateOverview.astro b/src/components/CRETemplate/CRETemplateOverview.astro index cd4f5a7db78..f15f6378ed8 100644 --- a/src/components/CRETemplate/CRETemplateOverview.astro +++ b/src/components/CRETemplate/CRETemplateOverview.astro @@ -80,7 +80,7 @@ const { frontmatter } = Astro.props - diff --git a/src/components/Header/Nav/NavBar.tsx b/src/components/Header/Nav/NavBar.tsx index 4b2255d42aa..f9225e29318 100644 --- a/src/components/Header/Nav/NavBar.tsx +++ b/src/components/Header/Nav/NavBar.tsx @@ -8,6 +8,7 @@ import { ProductNavigation } from "./ProductNavigation/ProductNavigation.tsx" import { useHideHeader } from "./useHideHeader.tsx" import ProductChainTable from "../../QuickLinks/sections/ProductChainTable.tsx" import AlgoliaSearch from "../aiSearch/Search.tsx" +import { ThemeToggle } from "./ThemeToggle.tsx" export type SearchTrigger = React.ReactNode @@ -81,6 +82,7 @@ export const NavBar = ({ path, algoliaVars, onHideChange, productsNav, subProduc
+
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/category.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/category.module.css index 89258534852..1b9db6aba5e 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/category.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/category.module.css @@ -1,5 +1,5 @@ .link { - color: var(--blue-800); + color: var(--color-text-link-hover); display: flex; gap: var(--space-4x); align-items: center; @@ -12,8 +12,8 @@ } .link:hover { - color: var(--blue-600); - background: var(--blue-100); + color: var(--text-accent); + background: var(--surface-accent-strong); } .item p { diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css index c6acaa76617..4f8a9a56b97 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css @@ -21,7 +21,7 @@ .wrapper { max-width: 1500px; width: 100%; - background-color: white; + background-color: var(--background); height: fit-content; overflow: hidden; display: flex; diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css index 048809c260c..711d72ab8b6 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css @@ -10,7 +10,7 @@ } .navLink { - color: var(--gray-600); + color: var(--color-text-primary); font-size: var(--space-4x); font-weight: var(--font-weight-medium); padding: 0px 16px; @@ -25,7 +25,7 @@ } .navLink:hover { - color: var(--blue-800); + color: var(--color-text-link-hover); } .active::before, @@ -49,7 +49,7 @@ } .active { - color: var(--blue-800); + color: var(--color-text-link-hover); } .megaMenu::before, @@ -89,11 +89,11 @@ align-items: center; gap: var(--space-1x); width: fit-content; - color: var(--blue-800); + color: var(--color-text-link-hover); } .button:hover { - color: var(--blue-600); + color: var(--text-accent); } .button > div > img { @@ -166,7 +166,7 @@ transform-origin: top center; margin-top: 10px; width: var(--radix-navigation-menu-viewport-width); - background-color: var(--white); + background-color: var(--background); border-radius: var(--border-radius-secondary); overflow: hidden; box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15); @@ -187,7 +187,7 @@ position: absolute; display: grid; grid-template-columns: 3fr 1fr; - background-color: white; + background-color: var(--background); border-radius: var(--border-radius-secondary); box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15); top: 60px; @@ -204,7 +204,7 @@ transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; - background-color: white; + background-color: var(--background); box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15); } @@ -214,7 +214,7 @@ padding-bottom: var(--space-3x); color: var(--gray-500); text-transform: uppercase; - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); } .resourcesMenuContentMain { @@ -223,7 +223,7 @@ .resourcesMenuContentFeatured { padding: var(--space-8x); - background-color: var(--gray-100); + background-color: var(--muted); } .featuredImage { @@ -232,19 +232,19 @@ .trigger span { position: relative; - color: var(--gray-600) !important; + color: var(--color-text-primary) !important; font-size: var(--space-4x); font-weight: var(--font-weight-medium); } .trigger:hover span { - color: var(--blue-800) !important; + color: var(--color-text-link-hover) !important; } .arrow { position: absolute; top: 70%; - background-color: var(--white); + background-color: var(--background); width: 10px; height: 10px; right: var(--space-1x); diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css index 90693374e94..058e3404242 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css @@ -1,5 +1,5 @@ .link { - color: var(--gray-700); + color: var(--color-text-secondary); display: flex; gap: var(--space-4x); align-items: center; @@ -12,8 +12,8 @@ } .link:hover { - color: var(--blue-600); - background: var(--blue-100); + color: var(--text-accent); + background: var(--surface-accent-strong); } .icon { diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/trigger.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/trigger.module.css index 7aa294b56fc..aa984fc2a46 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/trigger.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/trigger.module.css @@ -7,11 +7,11 @@ align-items: center; gap: var(--space-2x); width: fit-content; - color: var(--blue-800); + color: var(--color-text-link-hover); } .trigger:hover { - color: var(--blue-600); + color: var(--text-accent); } .trigger svg { @@ -20,7 +20,7 @@ } .trigger:hover svg { - fill: var(--blue-600); + fill: var(--text-accent); } [data-state="open"] .trigger svg { diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/category.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/category.module.css index b68ea0585cf..4669564799a 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/category.module.css +++ b/src/components/Header/Nav/ProductNavigation/Mobile/category.module.css @@ -1,5 +1,5 @@ .link { - color: var(--blue-800); + color: var(--color-text-link-hover); display: flex; align-items: center; gap: var(--space-3x); diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css index cf8382f3d30..f538cf624de 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css +++ b/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css @@ -11,12 +11,12 @@ color: var(--gray-500); text-transform: uppercase; - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); } .wrapper h3 { font-family: var(--font-family-text); - color: var(--gray-900); + color: var(--foreground); } .wrapper p { @@ -39,7 +39,7 @@ } .verticalDivider { - border-left: 1px solid var(--gray-300); + border-left: 1px solid var(--color-border-secondary); margin: 0 var(--space-3x); } @@ -58,7 +58,7 @@ padding-left: var(--space-8x); padding-bottom: var(--space-16x); padding-right: var(--space-16x); - background-color: var(--gray-100); + background-color: var(--muted); } .megaMenuButton { @@ -95,7 +95,7 @@ } .divider { - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--border); margin: var(--space-8x) auto; } @@ -104,7 +104,7 @@ display: flex; flex-direction: column; gap: var(--space-8x); - border-top: 1px solid var(--gray-200); + border-top: 1px solid var(--border); } .bottomLinks div { @@ -115,12 +115,12 @@ } .bottomLinks a { - color: var(--gray-900); + color: var(--foreground); } /* TODO: change with a var when available in the chainlink repo */ .bottomLink a:hover { - color: #0847f7; + color: var(--color-text-link); } @media screen and (min-width: 768px) { diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css index e8d91972d09..9c77e8818de 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css +++ b/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css @@ -11,7 +11,7 @@ position: fixed; top: 0; left: 0; - background: var(--white); + background: var(--background); height: 100vh; height: 100dvh; width: 100vw; @@ -56,7 +56,7 @@ .productContentLink { font-size: var(--font-size-4x); font-weight: var(--font-weight-medium); - color: var(--gray-600); + color: var(--color-text-primary); margin-right: var(--space-5x); padding: var(--space-2x) 0; font-size: var(--font-size-4x); @@ -83,7 +83,7 @@ .subProductContentTitle { font-size: var(--font-size-4x); font-weight: var(--font-weight-medium); - color: var(--blue-800); + color: var(--color-text-link-hover); margin-right: var(--space-5x); } diff --git a/src/components/Header/Nav/ThemeToggle.tsx b/src/components/Header/Nav/ThemeToggle.tsx new file mode 100644 index 00000000000..c75588a1721 --- /dev/null +++ b/src/components/Header/Nav/ThemeToggle.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from "react" +import styles from "./themeToggle.module.css" + +// Keep in sync with the inline theme script in src/layouts/BaseLayout.astro. +const STORAGE_KEY = "docs-theme" + +export const ThemeToggle = () => { + const [isDark, setIsDark] = useState(null) + + useEffect(() => { + setIsDark(document.documentElement.classList.contains("dark")) + }, []) + + const toggle = () => { + const root = document.documentElement + const next = !root.classList.contains("dark") + + // Disable transitions during the switch so components don't fade out of sync (next-themes' + // disableTransitionOnChange). The toggle icons are exempt so they can animate. + const applyTheme = () => { + const noTransitions = document.createElement("style") + noTransitions.textContent = "*:not([data-theme-icon]),*::before,*::after{transition:none!important}" + document.head.appendChild(noTransitions) + root.classList.toggle("dark", next) + // Flush styles while transitions are off + window.getComputedStyle(document.body).getPropertyValue("color") + requestAnimationFrame(() => noTransitions.remove()) + } + + const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches + if (typeof document.startViewTransition !== "function" || reduceMotion) { + applyTheme() + } else { + root.classList.add("theme-transition") + document.startViewTransition(applyTheme).finished.finally(() => root.classList.remove("theme-transition")) + } + + try { + localStorage.setItem(STORAGE_KEY, next ? "dark" : "light") + } catch (e) { + // localStorage unavailable + } + setIsDark(next) + } + + // Wait for the theme so the icon doesn't flip after hydration + if (isDark === null) return + + return ( + + ) +} diff --git a/src/components/Header/Nav/navBar.module.css b/src/components/Header/Nav/navBar.module.css index 0185457ce0d..30535386e56 100644 --- a/src/components/Header/Nav/navBar.module.css +++ b/src/components/Header/Nav/navBar.module.css @@ -22,9 +22,9 @@ .navBar { position: fixed; width: 100%; - background: rgba(255, 255, 255, 0.8); + background: var(--theme-navbar-bg-blur); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); - border-bottom: 1px solid #ecedef; + border-bottom: 1px solid var(--theme-navbar-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform 0.3s ease-in-out; @@ -101,7 +101,7 @@ .modalContentWrapper { position: relative; - background-color: #fff; + background-color: var(--background); padding: 4em 1em; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); @@ -127,7 +127,7 @@ font-weight: 600; font-size: inherit; line-height: inherit; - color: var(--blue-600); + color: var(--text-accent); } .modalDescription { @@ -146,11 +146,11 @@ border: none; font-size: 2em; cursor: pointer; - color: var(--gray-600); + color: var(--color-text-primary); } .closeButton:hover { - color: var(--blue-600); + color: var(--text-accent); } @media screen and (min-width: 768px) { @@ -162,7 +162,7 @@ line-height: var(--space-4x); justify-content: center; align-items: center; - color: var(--blue-700); + color: var(--color-text-link); border: var(--border-width-primary) solid transparent; transition: background-color 300ms ease-out, diff --git a/src/components/Header/Nav/themeToggle.module.css b/src/components/Header/Nav/themeToggle.module.css new file mode 100644 index 00000000000..bee50e3df1f --- /dev/null +++ b/src/components/Header/Nav/themeToggle.module.css @@ -0,0 +1,46 @@ +.toggle, +.placeholder { + display: inline-flex; + flex-shrink: 0; + width: 40px; + height: 40px; +} + +.toggle { + position: relative; + overflow: hidden; + align-items: center; + justify-content: center; + padding: 0; + /* Match the search button next to it */ + border: 1px solid var(--search-button-border, var(--border)); + border-radius: 8px; + background: var(--search-button-background, transparent); + color: var(--color-text-secondary); + cursor: pointer; +} + +.toggle:hover { + color: var(--color-text-heading); + border-color: var(--search-button-border-hover, var(--color-border-secondary)); +} + +.icon { + position: absolute; + inset: 0; + margin: auto; + transition: + transform 450ms cubic-bezier(0.3, 1.3, 0.5, 1), + opacity 250ms ease; +} + +.iconHidden { + transform: translateY(140%) rotate(90deg); + opacity: 0; +} + +@media (prefers-reduced-motion: reduce) { + .icon { + transition: none; + } +} diff --git a/src/components/LanguageSwitcher.module.css b/src/components/LanguageSwitcher.module.css index 2eb1d142a94..aa65d57d2a3 100644 --- a/src/components/LanguageSwitcher.module.css +++ b/src/components/LanguageSwitcher.module.css @@ -1,6 +1,6 @@ .switcher { display: flex; - background-color: #f5f6f8; + background-color: var(--muted); border-radius: 8px; padding: 4px; border: 1px solid #e1e5e9; @@ -13,7 +13,7 @@ padding: 6px 12px; border: none; background-color: transparent; - color: #6b7280; + color: var(--muted-foreground); font-weight: 500; border-radius: 6px; cursor: pointer; @@ -37,6 +37,6 @@ } .button:hover { - background-color: #e5e7eb; - color: #374151; + background-color: var(--muted-more); + color: var(--color-text-secondary); } diff --git a/src/components/LayoutHero/LayoutHero.module.css b/src/components/LayoutHero/LayoutHero.module.css index 08edb61ed40..f226d692d23 100644 --- a/src/components/LayoutHero/LayoutHero.module.css +++ b/src/components/LayoutHero/LayoutHero.module.css @@ -3,7 +3,7 @@ flex-direction: column; gap: var(--space-8x); margin: 0 auto; - background-color: var(--gray-100); + background-color: var(--muted); position: relative; width: 100%; height: 345px; @@ -38,7 +38,7 @@ .heroTitle { font-size: 3rem; line-height: 50px; - color: var(--gray-950); + color: var(--foreground); margin-bottom: var(--space-3x); letter-spacing: -0.48px; font-weight: 400; diff --git a/src/components/LeftSidebar/recursiveSidebar.module.css b/src/components/LeftSidebar/recursiveSidebar.module.css index d0377ed7bcc..17239076712 100644 --- a/src/components/LeftSidebar/recursiveSidebar.module.css +++ b/src/components/LeftSidebar/recursiveSidebar.module.css @@ -127,7 +127,7 @@ details summary.navLink a[aria-current="page"] { top: 0; bottom: 0; width: 1px; - background-color: var(--gray-200); + background-color: var(--muted-more); } .navGroupEntries.nested .navLink { diff --git a/src/components/MethodTabs/MethodTabs.module.css b/src/components/MethodTabs/MethodTabs.module.css index 9090253676a..4d395ebdb3c 100644 --- a/src/components/MethodTabs/MethodTabs.module.css +++ b/src/components/MethodTabs/MethodTabs.module.css @@ -32,7 +32,7 @@ } .tabActive { - color: var(--blue-600, #375bd2); + color: var(--text-accent); border-bottom-color: var(--blue-600, #375bd2); } diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css index eecaf9c8ee5..3893a8b572b 100644 --- a/src/components/Modal/Modal.module.css +++ b/src/components/Modal/Modal.module.css @@ -22,7 +22,7 @@ max-width: var(--modal-max-width); max-height: var(--modal-max-height); overflow-y: auto; - background: var(--white); + background: var(--background); box-shadow: var(--shadow-high); border: var(--modal-border); border-radius: var(--modal-border-radius); diff --git a/src/components/NavigationProgress.astro b/src/components/NavigationProgress.astro new file mode 100644 index 00000000000..fc86a5d67c9 --- /dev/null +++ b/src/components/NavigationProgress.astro @@ -0,0 +1,94 @@ +--- +/** + * Top-of-page progress bar for client-side navigation. + * + * With there is no browser loading indicator, so a slow navigation looks like a + * dead click. This restores that feedback: the bar appears when a navigation starts and completes + * when the new page is swapped in. + * + * `transition:persist` keeps the element across swaps, so the script's element references stay + * valid and the bar never restarts mid-navigation. + */ +--- + + + + + + diff --git a/src/components/PageContent/Feedback.tsx b/src/components/PageContent/Feedback.tsx index 85db3c5a5b5..921b4e51e03 100644 --- a/src/components/PageContent/Feedback.tsx +++ b/src/components/PageContent/Feedback.tsx @@ -1,7 +1,7 @@ /** @jsxImportSource preact */ import { useState } from "preact/hooks" import { v4 as uuidv4 } from "uuid" -import buttonStyles from "@chainlink/design-system/button.module.css" +import buttonStyles from "~/lib/designSystemButton.ts" import styles from "./Feedback.module.css" import ThumbUpIcon from "./Assets/ThumbUpIcon.tsx" import ThumbDownIcon from "./Assets/ThumbDownIcon.tsx" diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index 97abc140979..a267d0abf63 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -271,7 +271,7 @@ const { titleHeading, disableDefaultStyles, hideTitle } = Astro.props position: sticky; top: 0; z-index: 3; - background: white; + background: var(--color-background-primary); border-bottom: 2px solid var(--blue-200, #dfe7fb); padding: var(--space-6x) 0; } diff --git a/src/components/PageTabs.astro b/src/components/PageTabs.astro index 12ff4ad2696..7da5e9e6e31 100644 --- a/src/components/PageTabs.astro +++ b/src/components/PageTabs.astro @@ -249,7 +249,7 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa .tabs-section { margin: 2.5rem 0; padding: var(--section-padding, 2rem); - background: var(--gray-100); + background: var(--muted); border: 1px solid var(--gray-100); border-radius: 1rem; } @@ -263,13 +263,13 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa .tabs-title { font-size: 1.25rem; font-weight: 600; - color: var(--gray-900); + color: var(--foreground); margin-bottom: 0.5rem; } .tabs-description { font-size: 0.9375rem; - color: var(--gray-600); + color: var(--color-text-primary); line-height: 1.5; } @@ -285,10 +285,10 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa gap: 0.75rem; width: 100%; padding: 1rem; - background: white; - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: 0.75rem; - color: var(--gray-900); + color: var(--foreground); font-size: 0.9375rem; font-weight: 500; text-align: left; @@ -297,7 +297,7 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa } .dropdown-trigger:hover { - background: var(--gray-50); + background: var(--muted); } .current-text { @@ -344,7 +344,7 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa flex-shrink: 0; opacity: 0.7; padding: 0.375rem; - background: var(--gray-50); + background: var(--gray-100); border-radius: 0.5rem; transition: all 0.2s ease; } @@ -361,8 +361,8 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa top: calc(100% + 0.5rem); left: 0; right: 0; - background: white; - border: 1px solid var(--gray-200); + background: var(--background); + border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), @@ -381,18 +381,18 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa gap: 0.75rem; width: 100%; padding: 0.75rem; - color: var(--gray-700); + color: var(--color-text-secondary); text-decoration: none; border-radius: 0.5rem; transition: all 0.2s ease; } .dropdown-item:hover { - background: var(--gray-50); + background: var(--muted); } .dropdown-item.active { - color: var(--blue-700); + color: var(--color-text-link); font-weight: 500; } @@ -466,7 +466,7 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa }) } - window.addEventListener("load", initDropdown) + document.addEventListener("astro:page-load", initDropdown) // Update padding based on header visibility const section = document.querySelector(".tabs-section") as HTMLElement diff --git a/src/components/QuickLinks/sections/ProductChainTable.module.css b/src/components/QuickLinks/sections/ProductChainTable.module.css index 99c66946997..216c37246ff 100644 --- a/src/components/QuickLinks/sections/ProductChainTable.module.css +++ b/src/components/QuickLinks/sections/ProductChainTable.module.css @@ -19,7 +19,7 @@ td { } th { - background-color: var(--gray-100); + background-color: var(--muted); font-weight: bold; } @@ -27,8 +27,8 @@ th { position: sticky; top: 0; z-index: 4; - background-color: var(--gray-100); - border-bottom: 2px solid var(--gray-200); + background-color: var(--muted); + border-bottom: 2px solid var(--border); } .networkHeaderCell { @@ -75,7 +75,7 @@ th { } .productCell:hover { - background-color: var(--blue-100); + background-color: var(--surface-accent-strong); } .productLink { @@ -84,7 +84,7 @@ th { } .productLink:hover { - color: var(--blue-600); + color: var(--text-accent); } .supportedContainer { @@ -119,7 +119,7 @@ th { } .cellLink:hover { - background-color: var(--blue-100); + background-color: var(--surface-accent-strong); } .cardContainer { @@ -128,7 +128,7 @@ th { } .card { - background-color: var(--gray-100); + background-color: var(--muted); border-radius: 8px; padding: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); @@ -175,14 +175,14 @@ th { align-items: center; text-decoration: none; color: inherit; - background-color: var(--blue-50); + background-color: var(--surface-accent); border-radius: 8px; padding: 8px; transition: background-color 0.2s ease; } .productLink:hover { - background-color: var(--blue-100); + background-color: var(--surface-accent-strong); } .icon { @@ -201,6 +201,19 @@ th { height: 16px; } +:global(html.dark) th .productLink:not(:hover) { + background-color: transparent; +} + +:global(html.dark) .linkIcon { + filter: invert(1); + opacity: 0.6; +} + +:global(html.dark) :is(.table, .table th, .table td) { + border-color: var(--gray-800); +} + @media (max-width: 1080px) { .tableContainer { display: none; diff --git a/src/components/QuickLinks/sections/QuickLinksHero.module.css b/src/components/QuickLinks/sections/QuickLinksHero.module.css index 5305c3c3bb1..576f57c2c1b 100644 --- a/src/components/QuickLinks/sections/QuickLinksHero.module.css +++ b/src/components/QuickLinks/sections/QuickLinksHero.module.css @@ -18,11 +18,11 @@ } .quickLinksHero h2 span { - color: var(--blue-600); + color: var(--text-accent); } .quickLinksHero p { - color: var(--gray-700); + color: var(--color-text-secondary); font-family: Circular, Tahoma, sans-serif; font-size: 20px; line-height: 1.6; @@ -33,14 +33,14 @@ display: inline-block; font-size: 18px; font-weight: 600; - color: var(--blue-800); + color: var(--color-text-link-hover); text-decoration: none; margin-bottom: 16px; transition: color 0.3s ease; } .backLink:hover { - color: var(--blue-600); + color: var(--text-accent); } @media screen and (min-width: 768px) { diff --git a/src/components/Quickstart/Accordion/Accordion.astro b/src/components/Quickstart/Accordion/Accordion.astro index ad0bcd69cff..624eff2e6b3 100644 --- a/src/components/Quickstart/Accordion/Accordion.astro +++ b/src/components/Quickstart/Accordion/Accordion.astro @@ -32,7 +32,7 @@ const wrapperClass = `header-wrapper-${depth}` diff --git a/src/components/Quickstart/QuickstartPanel.astro b/src/components/Quickstart/QuickstartPanel.astro index 1e606c756d6..29a0f7a95b9 100644 --- a/src/components/Quickstart/QuickstartPanel.astro +++ b/src/components/Quickstart/QuickstartPanel.astro @@ -100,7 +100,7 @@ const githubSourceCodeUrl = frontmatter.githubSourceCodeUrl max-width: 100%; height: auto; border-radius: 5px; - border: 1px solid var(--gray-200, #ecedef); + border: 1px solid var(--border); } a.button { @@ -124,7 +124,7 @@ const githubSourceCodeUrl = frontmatter.githubSourceCodeUrl } .panel .description { - border-top: 1px solid var(--gray-300, #ced0d5); + border-top: 1px solid var(--color-border-secondary); padding-top: var(--space-8x); grid-template-columns: 1fr; grid-auto-flow: row; diff --git a/src/components/ReleaseNotes.astro b/src/components/ReleaseNotes.astro index 53d2729cd89..a185fea86c4 100644 --- a/src/components/ReleaseNotes.astro +++ b/src/components/ReleaseNotes.astro @@ -211,7 +211,7 @@ const entries = changelog.filter((entry) => entry.topic === topic) } .no-entries { - color: #666; + color: var(--muted-foreground); font-style: italic; } diff --git a/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css b/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css index 2057a94b3a6..7d6476d941e 100644 --- a/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css +++ b/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css @@ -14,7 +14,7 @@ gap: 6px; font-size: 0.75rem; font-weight: 500; - color: var(--gray-600, #4b5563); + color: var(--color-text-primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; @@ -26,20 +26,20 @@ align-items: center; gap: 10px; padding: 12px 14px; - background-color: var(--gray-100, #f3f4f6); + background-color: var(--muted); border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 15px; font-weight: 500; - color: var(--gray-900, #111827); + color: var(--foreground); width: 100%; position: relative; } .trigger:hover { - background-color: var(--gray-200, #e5e7eb); + background-color: var(--muted-more); } .trigger:focus-visible { @@ -58,7 +58,7 @@ text-align: left; min-width: 0; font-weight: 500; - color: var(--gray-900, #111827); + color: var(--foreground); } .arrow { @@ -78,8 +78,8 @@ top: calc(100% + 4px); left: 0; right: 0; - background: white; - border: 1px solid var(--blue-200, #bfdbfe); + background: var(--background); + border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; @@ -102,7 +102,7 @@ padding: 10px 12px; background: transparent; border: none; - border-bottom: 1px solid var(--gray-200, #e5e7eb); + border-bottom: 1px solid var(--border); border-radius: 0; cursor: pointer; text-align: left; @@ -125,7 +125,7 @@ } .dropdownItem:hover { - background-color: var(--blue-50, #eff6ff); + background-color: var(--muted); } .dropdownItem:focus-visible { @@ -153,13 +153,13 @@ .itemTitle { font-size: 14px; font-weight: 500; - color: var(--gray-900, #111827); + color: var(--foreground); margin-bottom: 2px; } .itemDescription { font-size: 12px; - color: var(--gray-600, #4b5563); + color: var(--color-text-primary); line-height: 1.4; } diff --git a/src/components/RightSidebar/CopyPageLink/MarkdownPreviewModal.module.css b/src/components/RightSidebar/CopyPageLink/MarkdownPreviewModal.module.css index 14f42931a77..03a390e5041 100644 --- a/src/components/RightSidebar/CopyPageLink/MarkdownPreviewModal.module.css +++ b/src/components/RightSidebar/CopyPageLink/MarkdownPreviewModal.module.css @@ -83,7 +83,7 @@ background: none; border: none; font-size: 24px; - color: var(--gray-600); + color: var(--color-text-primary); cursor: pointer; padding: var(--space-1x); line-height: 1; @@ -97,7 +97,7 @@ } .closeButton:hover { - color: var(--gray-900); + color: var(--foreground); background-color: var(--theme-bg-hover, var(--gray-100)); } @@ -115,7 +115,7 @@ .markdown { margin: 0; padding: var(--space-4x); - background-color: var(--gray-50); + background-color: var(--muted); border-radius: var(--border-radius-primary, 4px); overflow: auto; font-size: 13px; @@ -123,8 +123,8 @@ font-family: "Courier New", Courier, monospace; white-space: pre-wrap; word-break: break-word; - border: 1px solid var(--gray-200); - color: var(--gray-900); + border: 1px solid var(--border); + color: var(--foreground); } .markdown code { @@ -177,12 +177,12 @@ .cancelButton { background-color: transparent; - color: var(--gray-700); - border: 1px solid var(--gray-300); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-secondary); } .cancelButton:hover { - background-color: var(--gray-100); + background-color: var(--muted); border-color: var(--gray-400); } @@ -223,37 +223,35 @@ } /* Dark theme support */ -@media (prefers-color-scheme: dark) { - .modal { - background: var(--color-background-primary, #1a1a1a); - } +:global(html.dark) .modal { + background: var(--color-background-primary, #1a1a1a); +} - .title { - color: var(--color-text-heading, #ffffff); - } +:global(html.dark) .title { + color: var(--color-text-heading, #ffffff); +} - .markdown { - background-color: var(--gray-900); - color: var(--gray-100); - border-color: var(--gray-700); - } +:global(html.dark) .markdown { + background-color: var(--gray-900); + color: var(--gray-100); + border-color: var(--gray-700); +} - .closeButton { - color: var(--gray-400); - } +:global(html.dark) .closeButton { + color: var(--gray-400); +} - .closeButton:hover { - color: var(--gray-100); - background-color: var(--gray-800); - } +:global(html.dark) .closeButton:hover { + color: var(--gray-100); + background-color: var(--gray-800); +} - .cancelButton { - color: var(--gray-300); - border-color: var(--gray-600); - } +:global(html.dark) .cancelButton { + color: var(--gray-300); + border-color: var(--gray-600); +} - .cancelButton:hover { - background-color: var(--gray-800); - border-color: var(--gray-500); - } +:global(html.dark) .cancelButton:hover { + background-color: var(--gray-800); + border-color: var(--gray-500); } diff --git a/src/components/RightSidebar/LlmsLink.module.css b/src/components/RightSidebar/LlmsLink.module.css index c5c0520d350..8858c0ce201 100644 --- a/src/components/RightSidebar/LlmsLink.module.css +++ b/src/components/RightSidebar/LlmsLink.module.css @@ -4,7 +4,7 @@ justify-content: space-between; gap: 0.25rem; font-size: 14px; - color: var(--blue-600, #375bd2); + color: var(--text-accent); } .headerLink * { diff --git a/src/components/RightSidebar/MoreMenu.astro b/src/components/RightSidebar/MoreMenu.astro index 38d684b016a..968bb59be42 100644 --- a/src/components/RightSidebar/MoreMenu.astro +++ b/src/components/RightSidebar/MoreMenu.astro @@ -115,7 +115,7 @@ const showMoreSection = llmsExists || CONFIG.COMMUNITY_INVITE_URL || editHref } .heading { - color: var(--gray-900, #141921); + color: var(--foreground); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0; @@ -126,7 +126,7 @@ const showMoreSection = llmsExists || CONFIG.COMMUNITY_INVITE_URL || editHref .header-link { font-size: 14px; - color: var(--blue-600, #375bd2); + color: var(--text-accent); } .header-link * { diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro index 75ad06568f0..f9b7785b5d7 100644 --- a/src/components/RightSidebar/RightSidebar.astro +++ b/src/components/RightSidebar/RightSidebar.astro @@ -45,7 +45,7 @@ const showCopyPage = !isSunsetDocsPath(Astro.url.pathname) .heading { margin-bottom: 0; - color: var(--gray-900, #141921); + color: var(--foreground); font-size: 10px; font-weight: 500; line-height: 130%; diff --git a/src/components/Segment/Segments.css b/src/components/Segment/Segments.css index ebda7f86170..1dd516620a6 100644 --- a/src/components/Segment/Segments.css +++ b/src/components/Segment/Segments.css @@ -19,12 +19,12 @@ } .segments__container a:first-of-type { - border-right: 1px solid #e4e8ed; + border-right: 1px solid var(--border); } .segments__container a.active { background: var(--Button-Tertiary-Background-Selected, #f5f7fa); - color: #0847f7; + color: var(--color-text-link); } @media (min-width: 992px) { diff --git a/src/components/SidebarDropdown/SidebarDropdown.module.css b/src/components/SidebarDropdown/SidebarDropdown.module.css index c5f716798bc..0a55f8ea741 100644 --- a/src/components/SidebarDropdown/SidebarDropdown.module.css +++ b/src/components/SidebarDropdown/SidebarDropdown.module.css @@ -18,7 +18,7 @@ display: block; font-size: 0.75rem; font-weight: 500; - color: var(--gray-600, #4b5563); + color: var(--color-text-primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; @@ -29,20 +29,20 @@ align-items: center; gap: 10px; padding: 12px 14px; - background-color: var(--gray-100, #f3f4f6); + background-color: var(--muted); border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 15px; font-weight: 500; - color: var(--gray-900, #111827); + color: var(--foreground); width: 100%; position: relative; } .trigger:hover { - background-color: var(--gray-200, #e5e7eb); + background-color: var(--muted-more); } .triggerIcon { @@ -58,7 +58,7 @@ text-align: left; min-width: 0; font-weight: 500; - color: var(--gray-900, #111827); + color: var(--foreground); } .arrow { @@ -78,8 +78,8 @@ top: calc(100% + 4px); left: 0; right: 0; - background: white; - border: 1px solid var(--blue-200, #bfdbfe); + background: var(--background); + border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; @@ -104,13 +104,13 @@ text-align: left; font-size: 14px; font-weight: 500; - color: var(--gray-800, #1f2937); + color: var(--foreground); transition: all 0.2s ease; position: relative; } .option:hover { - background-color: var(--blue-50, #eff6ff); + background-color: var(--muted); } .option:focus { @@ -124,13 +124,13 @@ } .option.selected { - background-color: var(--blue-100, #dbeafe); - color: var(--blue-900, #1e3a8a); + background-color: var(--surface-accent-strong); + color: var(--color-text-link-active); font-weight: 600; } .option.selected:hover { - background-color: var(--blue-150, #c7e0fd); + background-color: var(--surface-accent-strong); } .optionIcon { @@ -144,7 +144,7 @@ .checkmark { margin-left: auto; flex-shrink: 0; - color: var(--blue-600, #2563eb); + color: var(--text-accent); } /* Responsive adjustments */ diff --git a/src/components/Solutions/SolutionCard.astro b/src/components/Solutions/SolutionCard.astro index a5ed2583b4c..e81f9239225 100644 --- a/src/components/Solutions/SolutionCard.astro +++ b/src/components/Solutions/SolutionCard.astro @@ -54,10 +54,10 @@ const displayCategories = solution.categories.slice(0, 3) display: flex; flex-direction: row; align-items: stretch; - background: white; + background: var(--background); border-radius: 0; - border-right: 1px solid #e5e7eb; - border-bottom: 1px solid #e5e7eb; + border-right: 1px solid var(--border); + border-bottom: 1px solid var(--border); transition: all 0.15s ease; text-decoration: none; color: inherit; @@ -72,7 +72,7 @@ const displayCategories = solution.categories.slice(0, 3) } .solution-card:hover { - background: #f8f9fb; + background: var(--muted); } .card-strip { @@ -90,7 +90,7 @@ const displayCategories = solution.categories.slice(0, 3) .solution-card:hover .arrow-icon { opacity: 1; - color: var(--blue-600, #0847f7); + color: var(--text-accent); } .card-content { @@ -115,9 +115,9 @@ const displayCategories = solution.categories.slice(0, 3) text-transform: uppercase; padding: 4px 12px; border-radius: 20px; - background: #f5f7fa; - color: #5a6175; - border: 1px solid #e5e7eb; + background: var(--muted); + color: var(--color-text-primary); + border: 1px solid var(--border); } .card-title { @@ -125,14 +125,14 @@ const displayCategories = solution.categories.slice(0, 3) font-size: 17px; font-weight: 700; line-height: 1.3; - color: #0b101c; + color: var(--foreground); } .card-description { margin: 0; font-size: 14px; line-height: 1.5; - color: #5a6175; + color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -157,7 +157,7 @@ const displayCategories = solution.categories.slice(0, 3) .category-chip { font-size: 11px; font-weight: 500; - color: #5a6175; + color: var(--color-text-primary); } .category-chip::before { diff --git a/src/components/Solutions/SolutionDisclaimer.astro b/src/components/Solutions/SolutionDisclaimer.astro index 2cb52f61cf2..9b9c5278046 100644 --- a/src/components/Solutions/SolutionDisclaimer.astro +++ b/src/components/Solutions/SolutionDisclaimer.astro @@ -22,7 +22,7 @@ import alertIcon from "~/components/Alert/Assets/alert-icon.svg" .solution-disclaimer { margin-top: var(--space-10x); padding-top: var(--space-6x); - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--border); } .solution-disclaimer__header { @@ -45,7 +45,7 @@ import alertIcon from "~/components/Alert/Assets/alert-icon.svg" line-height: 130%; letter-spacing: 1px; text-transform: uppercase; - color: var(--gray-900, #141921); + color: var(--foreground); } .solution-disclaimer__text { @@ -53,7 +53,7 @@ import alertIcon from "~/components/Alert/Assets/alert-icon.svg" margin: 0; font-size: 12px; line-height: 1.7; - color: #5a5a5a; + color: var(--color-text-primary); text-align: justify; } diff --git a/src/components/Solutions/SolutionNavigation.astro b/src/components/Solutions/SolutionNavigation.astro index 9e6cb085581..41025826d9e 100644 --- a/src/components/Solutions/SolutionNavigation.astro +++ b/src/components/Solutions/SolutionNavigation.astro @@ -70,10 +70,10 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole top: var(--space-16x); z-index: 5; padding: var(--space-4x) 0; - background: rgba(250, 250, 251, 0.8); + background: var(--theme-navbar-bg-blur); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border-bottom: 1px solid #ecedef; + border-bottom: 1px solid var(--border); box-shadow: var(--space-0x) var(--space-1x) var(--space-3x) var(--space-0x) #0000000f; /* Mirrors DocsNavigationDesktop: collapses to top: 0 when the site header hides. */ transition: top 0.5s ease; @@ -116,7 +116,7 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole } .breadcrumb-root:hover { - color: var(--blue-600, #0847f7); + color: var(--text-accent); text-decoration: underline; } @@ -128,7 +128,7 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole .breadcrumb-current { font-size: 16px; font-weight: 700; - color: #0b101c; + color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -147,7 +147,7 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; - color: #6c7585; + color: var(--muted-foreground); line-height: 1; } @@ -156,15 +156,15 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole font-weight: 600; padding: 3px 10px; border-radius: 20px; - background: #f5f7fa; - color: #5a6175; - border: 1px solid #e5e7eb; + background: var(--muted); + color: var(--color-text-primary); + border: 1px solid var(--border); text-decoration: none; transition: all 0.15s ease; } .product-badge:hover { - color: var(--blue-600, #0847f7); + color: var(--text-accent); border-color: var(--blue-600, #0847f7); } diff --git a/src/components/Solutions/SolutionSummary.astro b/src/components/Solutions/SolutionSummary.astro index e07ed48760f..ff79589d74a 100644 --- a/src/components/Solutions/SolutionSummary.astro +++ b/src/components/Solutions/SolutionSummary.astro @@ -43,8 +43,8 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole .solution-summary { margin: 0 0 var(--space-8x) 0; padding: var(--space-6x); - background: #fafbfd; - border: 1px solid #e5e7eb; + background: var(--muted); + border: 1px solid var(--border); border-radius: 8px; } @@ -52,7 +52,7 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole margin: 0 0 var(--space-4x) 0; font-size: 15px; line-height: 1.6; - color: #5a6175; + color: var(--color-text-primary); } .solution-summary__title { @@ -60,7 +60,7 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole font-size: 20px; font-weight: 600; line-height: 1.3; - color: var(--gray-900, #141921); + color: var(--foreground); } .solution-summary__meta { @@ -82,15 +82,15 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole font-weight: 600; padding: 3px 10px; border-radius: 20px; - background: #ffffff; - color: #5a6175; - border: 1px solid #e5e7eb; + background: var(--background); + color: var(--color-text-primary); + border: 1px solid var(--border); text-decoration: none; transition: all 0.15s ease; } .product-badge:hover { - color: var(--blue-600, #0847f7); + color: var(--text-accent); border-color: var(--blue-600, #0847f7); } @@ -101,9 +101,9 @@ const products = solution.products.map((p) => SOLUTION_PRODUCTS[p]).filter(Boole text-transform: uppercase; padding: 4px 12px; border-radius: 20px; - background: #ffffff; - color: #5a6175; - border: 1px solid #e5e7eb; + background: var(--background); + color: var(--color-text-primary); + border: 1px solid var(--border); } .solution-summary__repo { diff --git a/src/components/Solutions/SolutionsHub.astro b/src/components/Solutions/SolutionsHub.astro index 8addd15e2c5..62f394f31f7 100644 --- a/src/components/Solutions/SolutionsHub.astro +++ b/src/components/Solutions/SolutionsHub.astro @@ -102,11 +102,11 @@ const facets = getSolutionFacets() - + + + +
diff --git a/src/layouts/CRETemplateLayout.astro b/src/layouts/CRETemplateLayout.astro index a697369a868..51002a165e3 100644 --- a/src/layouts/CRETemplateLayout.astro +++ b/src/layouts/CRETemplateLayout.astro @@ -57,7 +57,7 @@ const { frontmatter, headings } = Astro.props + + + + + { + !embed && ( +
+
+ Component gallery + + Light + + + Dark + + + Split + + + Auto + + (Auto follows the saved choice / OS) + + {!forcedTheme && view !== "split" && } +
+ +
+ ) + } + + { + split ? ( +
+