Improve footer accessibility and color contrast using brand colors

[jrhoads]

Purpose

The primary purpose of this PR is to improve the accessibility of the footer component by updating its color contrast. By implementing the official brand colors from the DataCite Design Manual v2.1, we ensure that text elements meet modern accessibility standards while maintaining brand consistency.

Approach

• Introduced a new dedicated SCSS partial for official DataCite brand colors.
• Integrated the brand color variables into the global stylesheet.
• Replaced generic $dark-gray variables in the footer component with the high-contrast $datacite-primary-dark-blue to ensure better legibility and WCAG compliance.

Key Modifications

• src/stylesheets/_datacite_colors.scss: (New) Added official DataCite Design Manual v2.1 color palette, including primary, secondary, and additional brand colors.
• src/stylesheets/doi.scss: Imported the new branding colors into the main stylesheet workflow.
• src/stylesheets/doi/components/_footer.scss: Updated .footer, footer links (a), and .color-description to use $datacite-primary-dark-blue instead of $dark-gray.

Important Technical Details

• The new color variables use the !default flag, allowing for easier overrides if needed in specific implementations.
• The change from $dark-gray to $datacite-primary-dark-blue (#243B54) provides a darker, more distinct foreground against the $lighter-gray background, improving the contrast ratio for accessibility.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Reviewer, please remember our guidelines:

• Be humble in the language and feedback you give, ask don't tell.
• Consider using positive language as opposed to neutral when offering feedback. This is to avoid the negative bias that can occur with neutral language appearing negative.
• Offer suggestions on how to improve code e.g. simplification or expanding clarity.
• Ensure you give reasons for the changes you are proposing.

Summary by CodeRabbit

Release Notes

• Style
  • Introduced a centralized color palette with primary, secondary, and gradient color variables to standardize styling across the application.
  • Updated footer styling to use the new brand color scheme instead of previous generic color tokens.
  • Color palette includes primary blues, secondary colors, and gradient definitions for consistent visual branding.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between d76c0e5 and e7543dd.

⛔ Files ignored due to path filters (4)

• dist/stylesheets/doi.css is excluded by !**/dist/**
• dist/stylesheets/doi.css.map is excluded by !**/dist/**, !**/*.map
• dist/stylesheets/doi.min.css is excluded by !**/dist/**
• dist/stylesheets/doi.min.css.map is excluded by !**/dist/**, !**/*.map

📒 Files selected for processing (3)

• src/stylesheets/_datacite_colors.scss
• src/stylesheets/doi.scss
• src/stylesheets/doi/components/_footer.scss

---

📝 Walkthrough

Walkthrough

A new SCSS color palette file is introduced with DataCite brand colors defined as Sass variables. This file is imported into the main stylesheet, and the footer component is updated to use the new primary dark blue color variable instead of a generic dark gray reference.

Changes

Cohort / File(s)	Summary
Color Palette Foundation src/stylesheets/_datacite_colors.scss	New file introducing 10 DataCite brand color variables (primary, secondary, and additional colors) with gradient endpoints, all declared with !default flag for overridability.
Stylesheet & Component Integration src/stylesheets/doi.scss, src/stylesheets/doi/components/_footer.scss	Imports new color palette into global styles; updates footer styling to reference $datacite-primary-dark-blue instead of $dark-gray across 3 CSS rules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch accessibility-part1

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR improves footer text/link contrast for accessibility by introducing official DataCite brand color variables and applying them in the footer styles.

Changes:

• Added a new SCSS partial containing DataCite Design Manual v2.1 brand color variables.
• Imported the new brand color partial into the main doi.scss build pipeline.
• Updated footer text/link colors to use $datacite-primary-dark-blue and regenerated dist/ CSS outputs.

Reviewed changes

Copilot reviewed 3 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/stylesheets/doi/components/_footer.scss	Switches footer foreground colors to the new high-contrast brand variable.
src/stylesheets/doi.scss	Imports the new datacite_colors partial into the global Sass compilation flow.
src/stylesheets/_datacite_colors.scss	Introduces the DataCite brand color palette variables (with !default).
dist/stylesheets/doi.min.css	Updated minified build output reflecting the new footer colors.
dist/stylesheets/doi.css	Updated compiled CSS reflecting the new footer colors.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.