[WIP] Update translations page to use theme variables

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Update two files to ensure the translations page hero gradient is computed from the global theme color RGB variable and to align translations.module.css with theme variables.

Changes to make:

1. src/css/custom.css

• Add a new CSS variable inside the existing :root to expose the primary color as an rgb triplet:
  --ifm-color-primary-rgb: 46,133,85; /* corresponds to #2e8555 */
• Leave all other variables intact.

2. src/pages/translations.module.css

• Replace the .hero background to use rgba(var(--ifm-color-primary-rgb), ...) so the gradient derives from the global theme color.
• Ensure the rest of the file consumes theme variables (var(--ifm-...)) for borders, backgrounds, status colors as in the prepared content.

Branch: style/translations-theme-vars
Commit message: "Style: align translations page with theme variables"
PR title: "Style: align translations page with theme variables"
PR description: "This PR adds a single-source RGB variable for the theme and updates the translations page to derive its hero gradient from that variable. This ensures gradients and colors stay in sync with the site theme and prevents visual mismatches between pages."

Files and exact contents to write (replace existing files):

--- src/css/custom.css ---
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-color-primary-rgb: 46,133,85;
}
(remainder of file unchanged)

--- src/pages/translations.module.css ---
.hero {
background: linear-gradient(
135deg,
rgba(var(--ifm-color-primary-rgb), 0.12),
rgba(var(--ifm-color-primary-rgb), 0.32)
);
padding: 4rem 0;
text-align: center;
}

.hero h1 { ... }
(and the rest of the prepared translations.module.css contents that use theme variables)

Do not modify other files.

Please create the branch, commit the changes, push, and open a PR against main. Return the PR URL.

This pull request was created as a result of the following prompt from Copilot chat.

Update two files to ensure the translations page hero gradient is computed from the global theme color RGB variable and to align translations.module.css with theme variables.

Changes to make:

1. src/css/custom.css

• Add a new CSS variable inside the existing :root to expose the primary color as an rgb triplet:
  --ifm-color-primary-rgb: 46,133,85; /* corresponds to #2e8555 */
• Leave all other variables intact.

2. src/pages/translations.module.css

• Replace the .hero background to use rgba(var(--ifm-color-primary-rgb), ...) so the gradient derives from the global theme color.
• Ensure the rest of the file consumes theme variables (var(--ifm-...)) for borders, backgrounds, status colors as in the prepared content.

Branch: style/translations-theme-vars
Commit message: "Style: align translations page with theme variables"
PR title: "Style: align translations page with theme variables"
PR description: "This PR adds a single-source RGB variable for the theme and updates the translations page to derive its hero gradient from that variable. This ensures gradients and colors stay in sync with the site theme and prevents visual mismatches between pages."

Files and exact contents to write (replace existing files):

--- src/css/custom.css ---
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-color-primary-rgb: 46,133,85;
}
(remainder of file unchanged)

--- src/pages/translations.module.css ---
.hero {
background: linear-gradient(
135deg,
rgba(var(--ifm-color-primary-rgb), 0.12),
rgba(var(--ifm-color-primary-rgb), 0.32)
);
padding: 4rem 0;
text-align: center;
}

.hero h1 { ... }
(and the rest of the prepared translations.module.css contents that use theme variables)

Do not modify other files.

Please create the branch, commit the changes, push, and open a PR against main. Return the PR URL.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.