diff --git a/astro.config.ts b/astro.config.ts index 2803e89026c..b383ede18ba 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -8,7 +8,7 @@ import rehypeSlug from "rehype-slug" import rehypeAutolinkHeadings from "rehype-autolink-headings" import rehypeWrapAll from "rehype-wrap-all" import sitemap from "@astrojs/sitemap" -import type { RehypePlugins } from "astro" +import type { AstroIntegration, RehypePlugins } from "astro" import { unified } from "@astrojs/markdown-remark" import yaml from "@rollup/plugin-yaml" import { fileURLToPath } from "node:url" @@ -47,10 +47,28 @@ const canonicalUrlsWithLanguageVariants = extractCanonicalUrlsWithLanguageVarian // Preact files (`@jsxImportSource preact` pragma) and the barrels that only re-export them; everything else is React const preactModules = preactModulesMatcher(fileURLToPath(new URL(".", import.meta.url))) +/** Dev-only gallery: injected only under `astro dev`, so builds never see it. */ +const devOnlyComponentGallery: AstroIntegration = { + name: "dev-only-component-gallery", + hooks: { + "astro:config:setup": ({ command, injectRoute }) => { + if (command === "dev") { + injectRoute({ pattern: "/dev/components", entrypoint: "./src/dev/gallery.astro" }) + } + }, + }, +} + // https://astro.build/config 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. + prefetch: { + prefetchAll: true, + defaultStrategy: "hover", + }, redirects: { "/ccip/directory": "/ccip/directory/mainnet", "/ccip/supported-networks": "/ccip/directory/mainnet", @@ -61,6 +79,7 @@ export default defineConfig({ ...ccipRedirects, }, integrations: [ + devOnlyComponentGallery, trailingSlashMiddleware(), preact({ include: [preactModules], 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/assets/product-logos/chainlink-local-2-logo.svg b/src/assets/product-logos/chainlink-local-2-logo.svg index f3a6360b201..5f9123b640a 100644 --- a/src/assets/product-logos/chainlink-local-2-logo.svg +++ b/src/assets/product-logos/chainlink-local-2-logo.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/product-logos/general-globe-logo.svg b/src/assets/product-logos/general-globe-logo.svg index 11804ee8b1e..c8d6e6bedb3 100644 --- a/src/assets/product-logos/general-globe-logo.svg +++ b/src/assets/product-logos/general-globe-logo.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/src/assets/product-logos/nodes-logo.svg b/src/assets/product-logos/nodes-logo.svg index 016dae52333..9a116cec806 100644 --- a/src/assets/product-logos/nodes-logo.svg +++ b/src/assets/product-logos/nodes-logo.svg @@ -1,22 +1,22 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css b/src/components/ACE/PolicyInstanceBuilder/PolicyInstanceBuilder.module.css index 858b8e54d79..7003e536e17 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; } @@ -214,57 +214,57 @@ } /* Dark theme */ -:global(.theme-dark) .selectorCard { +:global(html.dark) .selectorCard { background: rgba(255, 255, 255, 0.04); border-color: #3a3a3a; } -:global(.theme-dark) .select { +:global(html.dark) .select { border-color: #3a3a3a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -:global(.theme-dark) .idRow { +:global(html.dark) .idRow { background: rgba(255, 255, 255, 0.04); border-color: #3a3a3a; } -:global(.theme-dark) .table th { +:global(html.dark) .table th { border-bottom-color: #3a3a3a; } -:global(.theme-dark) .table td { +:global(html.dark) .table td { border-bottom-color: #3a3a3a; } -:global(.theme-dark) .table td code { +:global(html.dark) .table td code { background: rgba(255, 255, 255, 0.06); } -:global(.theme-dark) .copyButton { +:global(html.dark) .copyButton { color: var(--blue-400, #6d9eff); border-color: var(--blue-400, #6d9eff); } -:global(.theme-dark) .copyButton:hover { +:global(html.dark) .copyButton:hover { background: var(--blue-400, #6d9eff); - color: #1a1a1a; + color: var(--foreground); } -:global(.theme-dark) .codeBlock { +:global(html.dark) .codeBlock { border-color: #3a3a3a; } -:global(.theme-dark) .codeHeader { +:global(html.dark) .codeHeader { background: rgba(255, 255, 255, 0.06); border-bottom-color: #3a3a3a; } -:global(.theme-dark) .codeContent { +:global(html.dark) .codeContent { background: var(--theme-bg, #1a1a1a); } -:global(.theme-dark) .learnMore a { +:global(html.dark) .learnMore a { color: var(--blue-400, #6d9eff); } diff --git a/src/components/AnchoredAccordion/AnchoredAccordion.astro b/src/components/AnchoredAccordion/AnchoredAccordion.astro index bfbe2fe179e..e36dc599591 100644 --- a/src/components/AnchoredAccordion/AnchoredAccordion.astro +++ b/src/components/AnchoredAccordion/AnchoredAccordion.astro @@ -23,7 +23,7 @@ const id = anchorId || slugger.slug(title)
{number} @@ -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..0eb94c58e0b 100644 --- a/src/components/Aside.astro +++ b/src/components/Aside.astro @@ -32,14 +32,16 @@ const icons = { @@ -79,10 +85,6 @@ const icons = { text-decoration: underline; } - .theme-dark .asideContent code:not([class*="language"]) { - color: var(--theme-code-text); - } - .asideContent p, .asideContent li { color: var(--theme-text-light); 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..e198801ba20 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,8 +617,8 @@ .ccip-table--verifiers tbody td { padding: var(--space-4x) var(--space-6x) var(--space-4x) 0; font-size: 14px; - color: var(--gray-900); - border-bottom: 1px solid var(--gray-100); + color: var(--foreground); + border-bottom: 1px solid var(--border); 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/Divider.tsx b/src/components/Header/Nav/Divider.tsx index 88b70d9e2ad..d3eebf9a557 100644 --- a/src/components/Header/Nav/Divider.tsx +++ b/src/components/Header/Nav/Divider.tsx @@ -2,7 +2,7 @@ export const Divider = ({ className }: { className?: string }) => (
+
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..f4d404f70e4 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, @@ -172,7 +172,7 @@ :is(.button):hover { border-radius: var(--border-radius-primary); - border: var(--border-width-primary) solid var(--blue-200); + border: var(--border-width-primary) solid var(--progress-border); background: var(--background-color-background-primary); } 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..8de236ffb73 100644 --- a/src/components/LanguageSwitcher.module.css +++ b/src/components/LanguageSwitcher.module.css @@ -1,9 +1,9 @@ .switcher { display: flex; - background-color: #f5f6f8; + background-color: var(--muted); border-radius: 8px; padding: 4px; - border: 1px solid #e1e5e9; + border: 1px solid var(--border); } .button { @@ -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/leftSidebar.module.css b/src/components/LeftSidebar/leftSidebar.module.css index 26de368fe1a..b1ad8d01ec5 100644 --- a/src/components/LeftSidebar/leftSidebar.module.css +++ b/src/components/LeftSidebar/leftSidebar.module.css @@ -59,7 +59,7 @@ flex: 1; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: var(--gray-300) transparent; + scrollbar-color: var(--border) transparent; } .navGroups::-webkit-scrollbar { @@ -71,7 +71,7 @@ } .navGroups::-webkit-scrollbar-thumb { - background-color: var(--gray-300); + background-color: var(--border); border-radius: 3px; } @@ -149,7 +149,7 @@ details[open] > .navGroupTitle { margin-bottom: var(--space-2x); } -:global(:root.theme-dark) .navLink[aria-current="page"] { +:global(html.dark) .navLink[aria-current="page"] { color: hsla(var(--color-base-white), 100%, 1); } diff --git a/src/components/LeftSidebar/recursiveSidebar.module.css b/src/components/LeftSidebar/recursiveSidebar.module.css index d0377ed7bcc..08722c52853 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 { @@ -138,9 +138,9 @@ details summary::-webkit-details-marker { display: none; } -:global(:root.theme-dark) .navLink[aria-current="page"], -:global(:root.theme-dark) details summary.navLink.active, -:global(:root.theme-dark) details summary.navLink:has(a.active) { +:global(html.dark) .navLink[aria-current="page"], +:global(html.dark) details summary.navLink.active, +:global(html.dark) details summary.navLink:has(a.active) { color: hsla(var(--color-base-white), 100%, 1); } diff --git a/src/components/MethodTabs/MethodTabs.module.css b/src/components/MethodTabs/MethodTabs.module.css index 9090253676a..ea1988fd788 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); } @@ -70,11 +70,11 @@ pointer-events: none; } -:global(.theme-dark) .tabBar { +:global(html.dark) .tabBar { border-bottom-color: #3a3a3a; } -:global(.theme-dark) .tabActive { +:global(html.dark) .tabActive { color: var(--blue-400, #6d9eff); border-bottom-color: var(--blue-400, #6d9eff); } diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css index eecaf9c8ee5..13b706a2cf2 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); @@ -31,7 +31,7 @@ } @media (min-width: 50em) { .modal { - --modal-border: var(--border-width-primary) solid var(--gray-200); + --modal-border: var(--border-width-primary) solid var(--border); --modal-border-radius: var(--border-radius-primary); --modal-max-width: min(calc(100% - 32px), 768px); --modal-max-height: calc(100% - 32px); 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 a1a132a18bc..9cc74a737c2 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..f95e8ffeb71 100644 --- a/src/components/PageTabs.astro +++ b/src/components/PageTabs.astro @@ -249,8 +249,8 @@ const displayPage = hasActivePage ? (Array.isArray(currentPageGroup) ? currentPa .tabs-section { margin: 2.5rem 0; padding: var(--section-padding, 2rem); - background: var(--gray-100); - border: 1px solid var(--gray-100); + background: var(--muted); + border: 1px solid var(--border); 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(--muted-more); 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..747d70412e2 100644 --- a/src/components/Quickstart/Accordion/Accordion.astro +++ b/src/components/Quickstart/Accordion/Accordion.astro @@ -16,7 +16,7 @@ const wrapperClass = `header-wrapper-${depth}`
{number} @@ -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/Quickstart/TableOfContents/tableOfContents.module.css b/src/components/Quickstart/TableOfContents/tableOfContents.module.css index 6c918a4b038..fd06ecc8530 100644 --- a/src/components/Quickstart/TableOfContents/tableOfContents.module.css +++ b/src/components/Quickstart/TableOfContents/tableOfContents.module.css @@ -1,7 +1,7 @@ .toc { border-radius: var(--space-1x); - border: 1px solid var(--border-color-secondary, #ced0d5); - background: var(--background-color-primary, #fff); + border: 1px solid var(--border); + background: var(--background); box-shadow: 0px var(--space-3x) var(--space-6x) -2px rgba(35, 51, 123, 0.1); padding: var(--space-8x) var(--space-6x); margin-top: var(--space-10x); 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 5f511efe716..3bb24654012 100644 --- a/src/components/RightSidebar/RightSidebar.astro +++ b/src/components/RightSidebar/RightSidebar.astro @@ -56,7 +56,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/components/dev/HeavyPreview.astro b/src/components/dev/HeavyPreview.astro new file mode 100644 index 00000000000..8c05be054e3 --- /dev/null +++ b/src/components/dev/HeavyPreview.astro @@ -0,0 +1,76 @@ +--- +/** Lazy iframe for pages too heavy to mount inline (e.g. ~17 MB address tables). */ +interface Props { + title: string + description?: string + path: string + theme?: string | null +} + +const { title, description, path, theme } = Astro.props +const src = theme ? `${path}?theme=${theme}` : path +--- + +
+ + {title} + Load preview + + {description &&

{description}

} + +
+ + diff --git a/src/components/dev/Specimen.astro b/src/components/dev/Specimen.astro new file mode 100644 index 00000000000..c2c974071fd --- /dev/null +++ b/src/components/dev/Specimen.astro @@ -0,0 +1,52 @@ +--- +interface Props { + title: string + description?: string + id?: string +} + +const { title, description, id } = Astro.props +--- + +
+
+

{title}

+ {description &&

{description}

} +
+
+ +
+
+ + diff --git a/src/components/github-card/GitHubCard.module.css b/src/components/github-card/GitHubCard.module.css index 92577af68cb..11930fb995e 100644 --- a/src/components/github-card/GitHubCard.module.css +++ b/src/components/github-card/GitHubCard.module.css @@ -18,7 +18,7 @@ .card:hover { background: var(--theme-bg-hover); - border-color: var(--gray-300); + border-color: var(--border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.04); @@ -35,8 +35,8 @@ width: 44px; height: 44px; border-radius: 999px; - border: 1px solid var(--gray-200); - background: var(--gray-50); + border: 1px solid var(--border); + background: var(--muted); display: flex; align-items: center; justify-content: center; diff --git a/src/content/data-feeds/historical-data.mdx b/src/content/data-feeds/historical-data.mdx index 95fc886b25d..ea01301e75c 100644 --- a/src/content/data-feeds/historical-data.mdx +++ b/src/content/data-feeds/historical-data.mdx @@ -11,7 +11,7 @@ metadata: import { priceFeedAddresses } from "@features/data" import { HistoricalPrice } from "@features/feeds" import { Aside, ClickToZoom, CodeSample, Icon } from "@components" -import button from "@chainlink/design-system/button.module.css" +import button from "~/lib/designSystemButton.ts" The most common use case for Data Feeds is to [Get the Latest Data](/data-feeds/using-data-feeds) from a feed. However, the [AggregatorV3Interface.sol](https://github.com/smartcontractkit/chainlink/blob/contracts-v1.3.0/contracts/src/v0.8/shared/interfaces/AggregatorV3Interface.sol) also has functions to retrieve data of a previous round IDs. diff --git a/src/content/data-feeds/overview.mdx b/src/content/data-feeds/overview.mdx index 9912a4619cf..02e8c7f2b60 100644 --- a/src/content/data-feeds/overview.mdx +++ b/src/content/data-feeds/overview.mdx @@ -17,7 +17,7 @@ metadata: --- import { Aside } from "@components" -import button from "@chainlink/design-system/button.module.css" +import button from "~/lib/designSystemButton.ts"