Skip to content

[#305] Updated the colour scheme to the new brand palette. - #310

Merged
AlexSkrypnyk merged 2 commits into
developfrom
feature/305-brand-colours
Aug 12, 2026
Merged

[#305] Updated the colour scheme to the new brand palette.#310
AlexSkrypnyk merged 2 commits into
developfrom
feature/305-brand-colours

Conversation

@AlexSkrypnyk

Copy link
Copy Markdown
Member

Closes #305

Checklist before requesting a review

  • Subject includes ticket number as [#123] Verb in past tense.
  • Ticket number #123 added to description
  • Added context in Changed section
  • Self-reviewed code and commented in commented complex areas.
  • Added tests for fix/feature.
  • Relevant tests run and passed locally.

Changed

  1. Replaced the palette in config/default/drevops.settings.yml (colors.palette) - all 18 light and dark slots rewritten from the outgoing muted blue and orange scheme to the brand palette anchored on Navy #152235, Deep Navy #030d1e, Cool White #eff6ff, Teal #1e7582, Bright Cyan #96e7f4 and Coral #cd5b43, with intermediate steps taken from the ramps already generated in static-prototype/framework.css.
  2. Set use_brand_colors: 0 and updated the colors.brand swatches - hides the Brand colors fieldset in the theme settings form so its JS recompute can no longer overwrite the authored palette; colors.brand itself never reaches rendered CSS.
  3. Wrote out all 18 slots explicitly rather than deriving them from the three brand anchors, because CivicTheme's derivation formulas mix with pure black and white and pull the intermediate steps toward grey instead of along the brand's ramps.
  4. Mirrored the same 18 slots per theme in web/themes/custom/drevops/components/variables.base.scss, the Storybook fallback used whenever there is no Drupal-generated stylesheet, and removed the leftover starter-kit placeholders success: green, custom1: brown / custom1: red, custom2: orange and custom3: blue.
  5. Dropped the $ct-back-to-top-light-background-color override in variables.components.scss, which pointed at the removed custom1 slot - the back-to-top button now falls back to CivicTheme's own interaction-background default.
  6. Recoloured the eyebrow kicker in assets/sass/_eyebrow.scss from hardcoded hexes (#c1430a orange, #90cfeb light blue) to the highlight palette slot, Teal on light and Bright Cyan on dark; rich-text table captions pick up the same change automatically through the shared $ct-eyebrow-color and $ct-eyebrow-color-dark variables they already reference.
  7. Updated the Storybook spacing demo swatch in 00-base/spacing/spacing.stories.scss from the old brand cyan #61daff to the new Bright Cyan #96e7f4.
  8. Added docs/brand-colours.md, indexed from docs/README.md and AGENTS.md - records the palette, the two files that carry it, why every slot is explicit rather than derived, contrast figures, and how to apply a future change.

Screenshots

The AI-assisted delivery page showing the palette across light and dark bands, with the Bright Cyan CTA on the navy band.

Verified against /, /contact, /blog, /ai-assisted-delivery, /services, /about-us and /our-work at 1280px and at 390px with the mobile nav open: every text and background pair clears WCAG AA, measured by computing real ratios against the effective composited background, with zero console errors, and keyboard focus rings render the new Coral at 3px on all eight focusable header controls, offset onto the page background.

Before / After

BEFORE - muted blue, orange highlight
┌───────────────────────────────────────────────────┐
│ light   bg #f2f5f8  accent #42748a  focus #ff6b6b │
│ dark    bg #2b3f53  accent #90cfeb  focus #ff6b6b │
└───────────────────────────────────────────────────┘
                          │
                          ▼
AFTER - brand navy, teal, bright cyan, coral
┌───────────────────────────────────────────────────┐
│ light   bg #eff6ff  accent #1e7582  focus #cd5b43 │
│ dark    bg #152235  accent #96e7f4  focus #ff9c86 │
└───────────────────────────────────────────────────┘

@coderabbitai

coderabbitai Bot commented Aug 12, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 30 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e918c886-0267-48f2-935c-fa6d7ceee002

📥 Commits

Reviewing files that changed from the base of the PR and between f9bfa5f and 42c20a8.

📒 Files selected for processing (8)
  • AGENTS.md
  • config/default/drevops.settings.yml
  • docs/README.md
  • docs/brand-colours.md
  • web/themes/custom/drevops/assets/sass/_eyebrow.scss
  • web/themes/custom/drevops/components/00-base/spacing/spacing.stories.scss
  • web/themes/custom/drevops/components/variables.base.scss
  • web/themes/custom/drevops/components/variables.components.scss

Comment @coderabbitai help to get the list of available commands.

@AlexSkrypnyk AlexSkrypnyk added A1 Board worker 1 AUTOMERGE Pull request has been approved and set to automerge labels Aug 12, 2026
@github-actions

Copy link
Copy Markdown

Code coverage (threshold: 80%)

  Classes: 48.00% (12/25)
  Methods: 73.42% (58/79)
  Lines:   87.77% (653/744)
Per-class coverage
Drupal\do_ai_alt_text\AltTextGenerator
  Methods:  85.71% ( 6/ 7)   Lines:  98.72% ( 77/ 78)
Drupal\do_ai_alt_text\Plugin\Action\RegenerateImageAltText
  Methods: 100.00% ( 8/ 8)   Lines: 100.00% ( 63/ 63)
Drupal\do_base\EventSubscriber\PreviewLinkCacheSubscriber
  Methods:  33.33% ( 1/ 3)   Lines:  11.11% (  1/  9)
Drupal\do_base\EventSubscriber\ThemeColorSubscriber
  Methods:  66.67% ( 2/ 3)   Lines:  40.00% (  4/ 10)
Drupal\do_base\Hook\AutomatedListPagerHook
  Methods: 100.00% ( 5/ 5)   Lines: 100.00% ( 31/ 31)
Drupal\do_base\Hook\MetatagsAlterHook
  Methods: 100.00% ( 7/ 7)   Lines: 100.00% ( 58/ 58)
Drupal\do_base\Twig\ImageDimensionsExtension
  Methods:  40.00% ( 2/ 5)   Lines:  81.48% ( 44/ 54)
Drupal\do_content_api\EventSubscriber\JsonApiWriteGateSubscriber
  Methods:  66.67% ( 2/ 3)   Lines:  88.89% (  8/  9)
Drupal\do_content_api\Hook\EntityCreateAccessHook
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 12/ 12)
Drupal\do_content_api\Hook\ModerationPolicyHook
  Methods:  50.00% ( 1/ 2)   Lines:  93.75% ( 15/ 16)
Drupal\do_content_api\Routing\RouteSubscriber
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  6/  6)
Drupal\do_feed\FeedUrlBuilder
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 18/ 18)
Drupal\do_feed\Form\FeedSettingsForm
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 15/ 15)
Drupal\do_feed\Hook\EntityDeleteHook
  Methods:  50.00% ( 1/ 2)   Lines:  92.31% ( 12/ 13)
Drupal\do_feed\Hook\EntityPresaveHook
  Methods: 100.00% ( 4/ 4)   Lines: 100.00% ( 54/ 54)
Drupal\do_feed\Hook\PreprocessParagraphHook
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 14/ 14)
Drupal\do_feed\Hook\PreprocessViewsViewRowRssHook
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  3/  3)
Drupal\do_feed\Hook\ViewsPreViewHook
  Methods:  50.00% ( 1/ 2)   Lines:  96.43% ( 27/ 28)
Drupal\do_generated_content\Generator\CaseMatrix
  Methods: 100.00% ( 3/ 3)   Lines: 100.00% ( 12/ 12)
Drupal\do_generated_content\Generator\RelativeDate
  Methods: 100.00% ( 1/ 1)   Lines: 100.00% (  1/  1)

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.51%. Comparing base (6382ee8) to head (42c20a8).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files
@@           Coverage Diff            @@
##           develop     #310   +/-   ##
========================================
  Coverage    84.51%   84.51%           
========================================
  Files           26       26           
  Lines          562      562           
========================================
  Hits           475      475           
  Misses          87       87           

☔ 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.

@AlexSkrypnyk AlexSkrypnyk added the Needs review Pull request needs a review from assigned developers label Aug 12, 2026
@AlexSkrypnyk
AlexSkrypnyk merged commit 279ccc5 into develop Aug 12, 2026
10 checks passed
@AlexSkrypnyk
AlexSkrypnyk deleted the feature/305-brand-colours branch August 12, 2026 04:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A1 Board worker 1 AUTOMERGE Pull request has been approved and set to automerge Needs review Pull request needs a review from assigned developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update colour scheme

2 participants