[WIP] Update translations page to use theme color 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

Problem: The translations page (src/pages/translations.jsx) currently uses styles in src/pages/translations.module.css that include hard-coded colors (e.g., hero gradient rgba(139,195,74,..) and .statusComplete color #1b7f5b). The project defines theme color variables in src/css/custom.css (--ifm-color-primary and related variables). To keep a single source of truth for theme colors and ensure the translations page matches the site's theme and dark mode, update translations.module.css to use the theme CSS variables instead of hard-coded colors.

Requirements:

• Replace hard-coded color values with corresponding CSS variables defined in src/css/custom.css where appropriate (prefer var(--ifm-color-primary), var(--ifm-color-primary-darkest), var(--ifm-font-color-secondary), var(--ifm-toc-border-color), var(--ifm-background-surface-color), var(--ifm-global-shadow-lw), var(--ifm-global-shadow-md)).
• Make the hero gradient visually match the primary color. Prefer using rgba(var(--ifm-color-primary-rgb), ...) if variable exists; if not, use an rgba value that matches the current primary color.
• Keep all other layout and spacing rules unchanged.
• Add a concise commit message and open a pull request against main.

Files to change:

• src/pages/translations.module.css: replace file contents with updated CSS that uses the theme variables. Use the content below as the updated file:

--- begin file content ---
.hero {
/* Use the primary color (converted to rgba) for the gradient so it matches custom.css */
background: linear-gradient(135deg, rgba(46,133,85,0.12), rgba(46,133,85,0.32));
padding: 4rem 0;
text-align: center;
}

.hero h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: 1rem;
}

.hero p {
max-width: 640px;
margin: 0 auto;
font-size: 1.1rem;
}

.section {
margin: 4rem 0;
}

.section h2 {
font-size: 2rem;
margin-bottom: 0.75rem;
}

.sectionDescription {
max-width: 720px;
color: var(--ifm-font-color-secondary);
font-size: 1rem;
margin-bottom: 2rem;
}

.grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
border: 1px solid var(--ifm-toc-border-color);
border-radius: 1rem;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: var(--ifm-global-shadow-lw);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
transform: translateY(-4px);
box-shadow: var(--ifm-global-shadow-md);
}

.cardHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 1rem;
}

.languageButton {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}

.languageButton:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.languageButton:focus-visible {
outline: 2px solid var(--ifm-color-primary);
outline-offset: 2px;
}

.languageName {
font-size: 1.25rem;
font-weight: 600;
}

.nativeName {
color: var(--ifm-font-color-secondary);
font-size: 0.95rem;
}

.status {
font-weight: 600;
color: var(--ifm-color-primary);
}

/* Use the theme's darkest primary color for complete status */
.statusComplete {
color: var(--ifm-color-primary-darkest);
}

.cardBody {
display: flex;
flex-direction: column;
gap: 1rem;
}

.links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.contributeButton:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.infoCard {
border: 1px solid var(--ifm-toc-border-color);
border-radius: 1rem;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
box-shadow: var(--ifm-global-shadow-lw);
display: flex;
flex-direction: column;
gap: 1rem;
}

.infoList {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.infoList li {
font-size: 0.95rem;
}

.infoList a {
font-weight: 600;
}

@media (max-width: 768px) {
.hero {
padding: 3rem 0;
}

.card {
padding: 1.25rem;
}
}
--- end file content ---

Provide a PR title and description: "Style: align translations page with theme variables" and description explaining the change and why.

Please create a branch, commit the file, and open a PR against main. Do not modify other files.

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

Problem: The translations page (src/pages/translations.jsx) currently uses styles in src/pages/translations.module.css that include hard-coded colors (e.g., hero gradient rgba(139,195,74,..) and .statusComplete color #1b7f5b). The project defines theme color variables in src/css/custom.css (--ifm-color-primary and related variables). To keep a single source of truth for theme colors and ensure the translations page matches the site's theme and dark mode, update translations.module.css to use the theme CSS variables instead of hard-coded colors.

Requirements:

• Replace hard-coded color values with corresponding CSS variables defined in src/css/custom.css where appropriate (prefer var(--ifm-color-primary), var(--ifm-color-primary-darkest), var(--ifm-font-color-secondary), var(--ifm-toc-border-color), var(--ifm-background-surface-color), var(--ifm-global-shadow-lw), var(--ifm-global-shadow-md)).
• Make the hero gradient visually match the primary color. Prefer using rgba(var(--ifm-color-primary-rgb), ...) if variable exists; if not, use an rgba value that matches the current primary color.
• Keep all other layout and spacing rules unchanged.
• Add a concise commit message and open a pull request against main.

Files to change:

• src/pages/translations.module.css: replace file contents with updated CSS that uses the theme variables. Use the content below as the updated file:

--- begin file content ---
.hero {
/* Use the primary color (converted to rgba) for the gradient so it matches custom.css */
background: linear-gradient(135deg, rgba(46,133,85,0.12), rgba(46,133,85,0.32));
padding: 4rem 0;
text-align: center;
}

.hero h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: 1rem;
}

.hero p {
max-width: 640px;
margin: 0 auto;
font-size: 1.1rem;
}

.section {
margin: 4rem 0;
}

.section h2 {
font-size: 2rem;
margin-bottom: 0.75rem;
}

.sectionDescription {
max-width: 720px;
color: var(--ifm-font-color-secondary);
font-size: 1rem;
margin-bottom: 2rem;
}

.grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
border: 1px solid var(--ifm-toc-border-color);
border-radius: 1rem;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: var(--ifm-global-shadow-lw);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
transform: translateY(-4px);
box-shadow: var(--ifm-global-shadow-md);
}

.cardHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 1rem;
}

.languageButton {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}

.languageButton:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.languageButton:focus-visible {
outline: 2px solid var(--ifm-color-primary);
outline-offset: 2px;
}

.languageName {
font-size: 1.25rem;
font-weight: 600;
}

.nativeName {
color: var(--ifm-font-color-secondary);
font-size: 0.95rem;
}

.status {
font-weight: 600;
color: var(--ifm-color-primary);
}

/* Use the theme's darkest primary color for complete status */
.statusComplete {
color: var(--ifm-color-primary-darkest);
}

.cardBody {
display: flex;
flex-direction: column;
gap: 1rem;
}

.links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.contributeButton:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.infoCard {
border: 1px solid var(--ifm-toc-border-color);
border-radius: 1rem;
padding: 1.5rem;
background: var(--ifm-background-surface-color);
box-shadow: var(--ifm-global-shadow-lw);
display: flex;
flex-direction: column;
gap: 1rem;
}

.infoList {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.infoList li {
font-size: 0.95rem;
}

.infoList a {
font-weight: 600;
}

@media (max-width: 768px) {
.hero {
padding: 3rem 0;
}

.card {
padding: 1.25rem;
}
}
--- end file content ---

Provide a PR title and description: "Style: align translations page with theme variables" and description explaining the change and why.

Please create a branch, commit the file, and open a PR against main. Do not modify other files.

---

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