Modernization: retire react-slick & axios, adopt Tailwind brand tokens by Copilot · Pull Request #1264 · adoptium/adoptium.net

Copilot · 2026-08-07T23:28:45Z

Works through the modernization tracker (issue #1249), addressing 3 of 5 actionable areas. The remaining two (prismjs-to-sugar-high, next-intl-server-translations) are larger, higher-risk refactors deferred to their own PRs.

`react-slick-replace` (deprecated)

Migrated Logos/Carousel from the unmaintained react-slick to Swiper (already a dependency) using the Autoplay module, translating the old max-width responsive config to Swiper's min-width breakpoints.
Dropped react-slick, slick-carousel, @types/react-slick; removed their now-dead mocks from vitest-setup.tsx.

`tailwind-4-brand-tokens` (idiom)

Replaced raw hex arbitrary classes with the semantic @theme tokens across 16 files, per .github/copilot-instructions.md. Opacity modifiers preserved (e.g. shadow-[#ff1365]/20 → shadow-pink/20).

hex token

#ff1365 pink

#14003c purple

#0d002a blue

#c4bfce grey

`axios-to-fetch` (feature)

Rewrote the remaining axios GET calls with native fetch in fetchLatestEvents, eclipse (news), and useAdoptiumContributorsApi (Link header via response.headers.get); dropped axios and axios-mock-adapter.
The marketplace/temurin tests mocked axios but production uses openapi-fetch, so those mocks were inert — swapped for globalThis.fetch spies.
Hardened the fetch boundary against malformed responses (the default global.fetch test mock resolves {}, which axios's XHR path never hit):

// fetchLatestEvents
return Array.isArray(data.events) ? data.events : []
// getNews
const efPosts = (efNews.news ?? []).filter(...)

Snapshots and Co-Pilot attribution headers updated for all touched files. package-lock.json changes are removals only.

Fixes [modernize] Code modernization tracker — week of 2026-08-03 #1249

netlify · 2026-08-07T23:28:50Z

✅ Deploy Preview for adoptium-next ready!

Name	Link
🔨 Latest commit	`94e0a70`
🔍 Latest deploy log	https://app.netlify.com/projects/adoptium-next/deploys/6a76c0c7f9f4810008f59314
😎 Deploy Preview	https://deploy-preview-1264--adoptium-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

cloudflare-workers-and-pages · 2026-08-07T23:32:09Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	adoptium-net-next	`94e0a70`	Commit Preview URL Branch Preview URL	Aug 08 2026, 05:41 AM

…tic tokens Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

…ck/slick-carousel Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

…/axios-mock-adapter Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

codecov · 2026-08-08T00:00:15Z

Codecov Report

❌ Patch coverage is 83.33333% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.64%. Comparing base (40e4d32) to head (94e0a70).

Files with missing lines	Patch %	Lines
src/hooks/fetchLatestEvents.ts	81.81%	1 Missing and 1 partial ⚠️
src/app/[locale]/download/client.tsx	0.00%	1 Missing ⚠️
src/components/Contributors/home.tsx	0.00%	1 Missing ⚠️
src/components/Logos/Carousel/index.tsx	50.00%	0 Missing and 1 partial ⚠️
src/utils/eclipse.ts	90.90%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1264      +/-   ##
==========================================
+ Coverage   80.60%   80.64%   +0.04%     
==========================================
  Files         203      203              
  Lines        3691     3678      -13     
  Branches      965      964       -1     
==========================================
- Hits         2975     2966       -9     
  Misses        389      389              
+ Partials      327      323       -4

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR advances the modernization tracker by removing deprecated dependencies (react-slick, axios) and aligning UI styling with Tailwind v4 brand tokens, while updating tests and snapshots to match the new implementations.

Changes:

Replaced the react-slick logo carousel with Swiper, and removed now-dead react-slick/slick-carousel test mocks.
Migrated remaining axios GET usage to native fetch (Eclipse news/events + GitHub contributors), and updated tests to mock globalThis.fetch.
Replaced raw hex Tailwind arbitrary values with semantic brand tokens (pink, purple, blue, grey) across multiple components and snapshots.

Show a summary per file

File	Description
vitest-setup.tsx	Removes `react-slick` mocks; keeps/uses existing Swiper mocks for snapshots.
src/utils/news.ts	Hardens EF news merge by defaulting `efNews.news` to `[]`.
src/utils/eclipse.ts	Replaces axios with `fetch` for Eclipse newsroom news API.
src/utils/tests/eclipse.test.ts	Updates Eclipse news tests to mock `globalThis.fetch` instead of axios.
src/services/adoptiumApi.ts	Updates docs to reflect fetch-only usage (no axios mention).
src/hooks/useAdoptiumContributorsApi.ts	Replaces axios GitHub calls with `fetch`, including Link header parsing via `headers.get`.
src/hooks/fetchLatestEvents.ts	Replaces axios with `fetch` and hardens against malformed `events` payloads.
src/hooks/tests/fetchTemurinReleases.test.ts	Replaces axios-mock-adapter usage with `globalThis.fetch` spies.
src/hooks/tests/fetchMarketplace.test.ts	Replaces axios-mock-adapter usage with `globalThis.fetch` spies.
src/hooks/tests/fetchLatestEvents.test.ts	Updates events tests to mock `globalThis.fetch` and assert URL formation.
src/components/WorkingGroup/Projects/index.tsx	Replaces background hex class with `bg-blue` token.
src/components/UiVirtualScroll/UiVirtualContent.tsx	Replaces `text-[#ff1365]` with `text-pink`.
src/components/TemurinFeatures/BentoGrid.tsx	Replaces multiple hex background classes with `bg-blue`/`bg-purple`/`bg-pink`.
src/components/Sustainers/SavingsCalculator/index.tsx	Replaces `text-[#c4bfce]` with `text-grey`.
src/components/Sustainers/Program/index.tsx	Replaces `text-[#c4bfce]` with `text-grey`.
src/components/Sustainers/KeyInitiatives/index.tsx	Replaces `text-[#c4bfce]` with `text-grey`.
src/components/NavBar/index.tsx	Replaces multiple `text-[#ff1365]` occurrences with `text-pink`.
src/components/Logos/Carousel/index.tsx	Migrates carousel implementation from `react-slick` to Swiper with autoplay/breakpoints.
src/components/HeroSection/index.tsx	Replaces hero background and accent hex classes with tokens (`bg-purple`, `bg-pink`, `text-pink`).
src/components/HeroSection/DownloadButton.tsx	Replaces button/hover hex classes with tokens (`bg-purple`, `hover:ring-pink/50`, etc.).
src/components/Contributors/home.tsx	Replaces gradient `from-[#ff1365]` with `from-pink`.
src/components/Content/SyntaxHighlighter/index.tsx	Replaces hover accent hex classes with `pink` token variants.
src/components/BannerMiddle/index.tsx	Replaces banner background and CTA hex classes with `purple`/`pink` tokens.
src/components/Banner/Middle/index.tsx	Same token replacements as BannerMiddle duplicate path.
src/app/[locale]/temurin/tests/snapshots/page.test.tsx.snap	Snapshot updates for token classes + Swiper markup.
src/app/[locale]/sustainers/page.tsx	Replaces `text-[#c4bfce]` with `text-grey`.
src/app/[locale]/sustainers/tests/snapshots/page.test.tsx.snap	Snapshot updates for token replacements.
src/app/[locale]/page.tsx	Replaces root page background `bg-[#14003c]` with `bg-purple`.
src/app/[locale]/members/tests/snapshots/page.test.tsx.snap	Snapshot updates for token replacements; removes stray header line.
src/app/[locale]/download/client.tsx	Replaces multiple hex classes with semantic tokens in download page client UI.
src/app/[locale]/download/tests/snapshots/page.test.tsx.snap	Snapshot updates for download page token replacements.
src/app/[locale]/tests/snapshots/page.test.tsx.snap	Snapshot updates for homepage token replacements + Swiper markup.
package.json	Removes `axios`, `axios-mock-adapter`, `react-slick`, `slick-carousel`, and related types.
package-lock.json	Lockfile removals corresponding to dropped dependencies.

Review details

Tip

Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Suppressed comments (1)

src/hooks/tests/fetchTemurinReleases.test.ts:12

vi.clearAllMocks() does not restore the globalThis.fetch spy back to the original implementation. Because these tests use vi.spyOn(globalThis, "fetch"), the spy can leak into other test files. Prefer vi.restoreAllMocks() (or fetchSpy.mockRestore()) in afterEach.

afterEach(() => {
  vi.clearAllMocks();
});

Files reviewed: 33/34 changed files
Comments generated: 3
Review effort level: Lite

+    const response = await fetch(url.toString())
+    if (!response.ok) {
      return { news: [], pager: null }
-    })
+    }
+    return await response.json()


 describe("getAllPkgsForVersion", () => {
  it("returns valid JSON", async () => {
-    mock.onGet().reply(200, mockResponse);
+    vi.spyOn(globalThis, "fetch").mockResolvedValue({ ok: true, json: async () => mockResponse } as Response);


…omponents Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

… prism-themes, @types/prismjs Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

gdams · 2026-08-08T00:29:53Z

@copilot fix the code comments.

…AllMocks in fetch tests Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot · 2026-08-08T00:35:03Z

@copilot fix the code comments.

Fixed in 43dc6f2: added cache: "no-store" to the fetchLatestNews fetch call, reformatted fetchLatestEvents.ts with prettier to match repo style (2-space indent + semicolons), and switched vi.clearAllMocks() to vi.restoreAllMocks() in fetchMarketplace.test.ts/fetchTemurinReleases.test.ts so the fetch spies don't leak between tests.

gdams · 2026-08-08T05:28:21Z

@copilot fix the css linter. It also looks like more css was removed than I expected? The code boxes no longer look correctly spaced

…ckground lost with prism theme removal Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot · 2026-08-08T05:38:22Z

@copilot fix the css linter. It also looks like more css was removed than I expected? The code boxes no longer look correctly spaced

Fixed in 94e0a70:

CSS linter: .doc-light .doc-content pre was declared twice (the second block only for --sh-* variables), tripping stylelint's no-duplicate-selectors. Merged them into one rule.
Code box spacing: removing prism-themes/themes/prism-shades-of-purple.css also dropped its global pre[class*="language-"] { background: #1e1e3f; overflow: auto; }, which nothing in our custom CSS replaced. Restored the background and horizontal overflow on .doc-content pre[class*="language-"] so code boxes look the same as before.

Initial plan

33a9e25

Copilot AI assigned Copilot and gdams Aug 7, 2026

Copilot started work on behalf of gdams August 7, 2026 23:29 View session

Copilot AI linked an issue Aug 7, 2026 that may be closed by this pull request

[modernize] Code modernization tracker — week of 2026-08-03 #1249

Closed

5 tasks

Plan: modernization tracker areas

52585c4

Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot AI and others added 3 commits August 7, 2026 23:36

tailwind-4-brand-tokens: replace raw hex arbitrary classes with seman…

418d5f0

…tic tokens Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

react-slick-replace: migrate Logos carousel to Swiper; drop react-sli…

8d4f467

…ck/slick-carousel Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

axios-to-fetch: replace axios GET calls with native fetch; drop axios…

b4150a0

…/axios-mock-adapter Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Apply modernization changes for dependencies~~ Modernization: retire react-slick & axios, adopt Tailwind brand tokens Aug 7, 2026

Copilot AI requested a review from gdams August 7, 2026 23:55

Copilot finished work on behalf of gdams August 7, 2026 23:55

gdams requested a lite review from Copilot August 7, 2026 23:58

Copilot started reviewing on behalf of gdams August 7, 2026 23:59 View session

Copilot started work on behalf of gdams August 7, 2026 23:59 View session

gdams marked this pull request as ready for review August 8, 2026 00:00

Copilot AI reviewed Aug 8, 2026

View reviewed changes

Copilot and others added 3 commits August 8, 2026 00:26

next-intl: convert pure useTranslations client components to Server C…

91b6a58

…omponents Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

prismjs-to-sugar-high: replace PrismJS with sugar-high; drop prismjs,…

b75b753

… prism-themes, @types/prismjs Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

AuthorList: remove leftover 'use client' from converted Server Component

2f57a66

Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot started work on behalf of gdams August 8, 2026 00:30 View session

Copilot finished work on behalf of gdams August 8, 2026 00:31

gdams marked this pull request as draft August 8, 2026 00:34

Address review feedback: no-store cache, prettier formatting, restore…

43dc6f2

…AllMocks in fetch tests Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot finished work on behalf of gdams August 8, 2026 00:35

Copilot started work on behalf of gdams August 8, 2026 05:28 View session

Fix CSS linter (duplicate selector) and restore code block spacing/ba…

94e0a70

…ckground lost with prism theme removal Co-authored-by: gdams <20224954+gdams@users.noreply.github.com>

Copilot finished work on behalf of gdams August 8, 2026 05:38

Navigation Menu

Uh oh!

Uh oh!

Modernization: retire react-slick & axios, adopt Tailwind brand tokens - #1264

Modernization: retire react-slick & axios, adopt Tailwind brand tokens#1264
gdams with Copilot wants to merge 10 commits into
mainfrom
copilot/modernize-apply-area

Copilot AI commented Aug 7, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 7, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Aug 7, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Aug 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

gdams commented Aug 8, 2026

Uh oh!

Copilot AI commented Aug 8, 2026

Uh oh!

gdams commented Aug 8, 2026

Uh oh!

Copilot AI commented Aug 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hex	token
`#ff1365`	`pink`
`#14003c`	`purple`
`#0d002a`	`blue`
`#c4bfce`	`grey`

Uh oh!

Uh oh!

Conversation

Copilot AI commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

react-slick-replace (deprecated)

tailwind-4-brand-tokens (idiom)

axios-to-fetch (feature)

Uh oh!

netlify Bot commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for adoptium-next ready!

Uh oh!

cloudflare-workers-and-pages Bot commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

codecov Bot commented Aug 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

gdams commented Aug 8, 2026

Uh oh!

Copilot AI commented Aug 8, 2026

Uh oh!

gdams commented Aug 8, 2026

Uh oh!

Copilot AI commented Aug 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Aug 7, 2026 •

edited

Loading

`react-slick-replace` (deprecated)

`tailwind-4-brand-tokens` (idiom)

`axios-to-fetch` (feature)

netlify Bot commented Aug 7, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Aug 7, 2026 •

edited

Loading

codecov Bot commented Aug 8, 2026 •

edited

Loading