Sitelet https://github.com/Strategy11/formidable-forms/pull/3376
Skip to content

Rebuild the primary blue ramp on an accessible 500 - #3376

Merged
Crabcyborg merged 3 commits into
masterfrom
accessible-blue
Sep 18, 2026
Merged

Crabcyborg merged 3 commits into
masterfrom
accessible-blue

Conversation

@tuguirazvan

@tuguirazvan tuguirazvan commented Sep 18, 2026 •

Copy link
Copy Markdown
Collaborator

#4199fd measured 2.92:1 on white — failing AA both as link text and as a button fill behind white text. That covered every admin link, .frm-button-primary, the active Inbox tab, the settings sidebar headings, the style selector and the active Add-Ons/Templates category.

Rebuilt in OKLCh at one hue; the ramp now runs 25–900 like the grey ramp beside it. --primary-500 is #026ee8 (4.77:1), --primary-700 #1256ae (7.08:1). 500 is the lightest stop clearing 4.5:1, so it is the floor for text and for anything behind white text.

Also folded in: three stray blues — one an active-tab underline at 2.89:1 against the 3:1 floor for a state indicator — plus the blue stops of gradients carrying white text, and --blue-border → --primary-200.

Not changed: front-end and email defaults (FrmStyle.php, FrmEmailStylesController.php) paint customer forms, not the admin — separate decision. Third-party brand blues untouched.

Verified: axe re-run on Forms, Entries, Global Settings and Add-Ons — zero color-contrast on the listed selectors. stylelint, ESLint, PHPCS, PHPStan clean locally.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Refreshed the admin interface’s blue color palette across banners, controls, tabs, sliders, dropdowns, notifications, templates, and form components.
    • Updated borders, backgrounds, gradients, hover states, badges, toggles, and upgrade elements with the revised visual styling.
    • Updated floating-link hover colors and small-device warning illustration colors.
    • Improved consistency by applying shared primary color variables across responsive layouts and interface components.

#4199fd measured 2.92:1 on white, failing AA both as link text and as a
button fill behind white text — the same number either way, since contrast
is symmetric. Every admin link, primary button, active tab and settings
sidebar heading read at that ratio.

The ramp is rebuilt in OKLCh at one hue, lightness stepping evenly in
perceived terms and chroma peaking at 500, and now runs 25 to 900 like the
grey ramp beside it. 500 is #026ee8 at 4.77:1 and 700 #1256ae at 7.08:1;
500 is the lightest stop that clears 4.5:1, so it is the floor for text and
for anything sitting behind white text.

Values held outside the ramp came with it: three strays fold into tokens,
including an active-tab underline that sat at 2.89:1 against the 3:1 floor
for a state indicator, and the blue stops of gradients carrying white text
move up to clear 4.5:1 each. --blue-border folds into --primary-200.

Front-end and email defaults keep #4199FD — those paint customer forms, not
the admin, and are a separate decision. Third-party brand blues are
untouched.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

Warning

Review limit reached

Next included review available in 44 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 33e834ac-bb0b-4c62-9cdd-91903eac8828

📥 Commits

Reviewing files that changed from the base of the PR and between 93f1bd9 and ace782f.

📒 Files selected for processing (2)
  • css/frm_admin.css
  • resources/scss/admin/components/table/_widefat.scss

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 5b43d50a-31c0-4679-914b-150f1760aee8

📥 Commits

Reviewing files that changed from the base of the PR and between f10d69b and 93f1bd9.

⛔ Files ignored due to path filters (3)
  • images/icons.svg is excluded by !**/*.svg
  • images/no-payments.svg is excluded by !**/*.svg
  • images/page-skeleton/empty-state.svg is excluded by !**/*.svg
📒 Files selected for processing (26)
  • classes/views/shared/small-device-message.php
  • css/admin/dashboard.css
  • css/admin/deactivation-feedback.css
  • css/admin/frm-settings-components.css
  • css/frm_admin.css
  • css/frm_testing_mode.css
  • js/formidable-web-components.js
  • js/packages/floating-links/config.js
  • js/packages/floating-links/s11-floating-links.js
  • js/src/web-components/frm-border-radius-component/frm-border-radius-component.css
  • js/src/web-components/frm-colorpicker-component/frm-colorpicker-component.css
  • js/src/web-components/frm-dropdown-component/frm-dropdown-component.css
  • js/src/web-components/frm-range-slider-component/frm-range-slider-component.css
  • js/src/web-components/frm-tab-navigator-component/frm-tab-navigator-component.css
  • js/src/web-components/frm-typography-component/frm-typography-component.css
  • resources/scss/admin/base/_variables.scss
  • resources/scss/admin/components/button/_button.scss
  • resources/scss/admin/components/form/_field-group-controls.scss
  • resources/scss/admin/components/form/_toggle-components.scss
  • resources/scss/admin/components/list/_template-list.scss
  • resources/scss/admin/components/notifications/_call-to-action.scss
  • resources/scss/admin/components/notifications/_message-styles.scss
  • resources/scss/admin/components/settings/_sliders.scss
  • resources/scss/admin/components/upgrade/_upgrade-bar.scss
  • resources/scss/admin/media-queries/_screen-laptop.scss
  • resources/scss/admin/media-queries/_screen-mobile.scss

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

The pull request refreshes the primary blue palette and updates admin styles, web-component tokens, floating-link colors, gradients, and device messaging to use the revised values.

Changes

Primary palette refresh

Layer / File(s) Summary
Primary palette foundation
resources/scss/admin/base/_variables.scss
The primary ramp adds new shades, updates existing values, documents the color ramp, and maps --blue-border to var(--primary-200).
Component and floating-link tokens
js/src/web-components/*/*.css, js/packages/floating-links/config.js, js/packages/floating-links/s11-floating-links.js
Web-component primary tokens and blue borders use revised values. Floating-link hover colors and fallback defaults are updated.
Admin visual consumers
classes/views/shared/small-device-message.php, css/admin/*, resources/scss/admin/components/*, resources/scss/admin/media-queries/*
Admin banners, controls, notifications, sliders, tabs, gradients, overlays, SVG colors, and device messaging use revised colors or primary tokens.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 93f1b

This palette refresh is mergeable with minimal current-head risk; the described changes are limited to visual color tokens and styling.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: rebuilding the primary blue ramp with an accessibility focus on the 500 shade. It is concise and related to the pull request objectives.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

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

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

master's slider rewrite removed the block holding two of the three literals
this branch had moved onto tokens, and had already put the rest of the
component on --primary-500. Its version is taken whole, with the one
surviving literal converted. Build artifacts are regenerated from the
merged source rather than hand-resolved.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@deepsource-io

deepsource-io Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in f10d69b...ace782f on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
PHP Sep 18, 2026 1:51p.m. Review ↗
JavaScript Sep 18, 2026 1:51p.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

@tuguirazvan

Copy link
Copy Markdown
Collaborator Author

@Crabcyborg This is one of many addressing the accessibility issues. Let me know your thoughts. Thank you!

@Crabcyborg Crabcyborg added run e2e tests Run the Cypress end-to-end suite on this PR run analysis labels Sep 18, 2026
@Crabcyborg Crabcyborg added this to the 6.36 milestone Sep 18, 2026
@Crabcyborg

Crabcyborg commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

Thank you @tuguirazvan!

What do you think about using the same colours for our forms list and entries lists?

I'm noticing the blues are quite different. They seem different on master too, but probably something that should be more consistent?

Screenshot 2026-09-18 at 10 42 35 AM Screenshot 2026-09-18 at 10 42 43 AM

@tuguirazvan

Copy link
Copy Markdown
Collaborator Author

@Crabcyborg Ouh, yes. I told Claude to verify each instance, it turned out it didn't.
Do you want me to update the PR or can you do it? Not sure what is the best approach when working together.

The Forms list wraps its title in <strong>, the Entries list does not, so
the two lists resolved to different stops: 700 on Forms, 500 everywhere
else. 500 is the ramp's stop for links and 700 is where they go on hover.

The resting rule also outranked .frm_wrap a:hover on specificity, so a form
name had no hover feedback. The hover pair added here carries the extra
pseudo-class and wins.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@tuguirazvan

Copy link
Copy Markdown
Collaborator Author

@Crabcyborg Made the change myself.

@Crabcyborg Crabcyborg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @tuguirazvan!

I keep running out of AI credits 😂, so I've been using vivi a lot to help wrap things up.

🚀

@Crabcyborg
Crabcyborg merged commit 22f22eb into master Sep 18, 2026
21 of 25 checks passed
@Crabcyborg
Crabcyborg deleted the accessible-blue branch September 18, 2026 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

run analysis run e2e tests Run the Cypress end-to-end suite on this PR run tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants