Sensei Lesson Action Buttons Do Not Respect Style Settings

[cat-og]

Steps to Reproduce

1. Open Site Styles by going to Appearance > Editor > Styles, and update the default color settings for the Buttons blocks.
2. Open Style Book by clicking the Style Book icon in the sidebar on the right.
3. Switch over to Sensei LMS tab in Style book and scroll down to the Lesson Actions buttons
4. You will see that the Lesson Actions buttons are the default Sensei green, and they do not align with the site styles or with the other button blocks in the Style book. The color set in step 1 as the button color is not applied.

What I Expected

• I expect that the Sensei Lesson Actions buttons will respect the style settings of the site, and match with the other site button defaults unless specifically updated

What Happened Instead

• On most themes, the Sensei Lesson Actions button remain the same default Sensei green, ignoring the button style settings for the site (the exception was the Sensei theme Course)
• If the buttons are specifically updated on the page or template, the Sensei green background color is still visible.

PHP / WordPress / Sensei LMS version

PHP 8.1 WordPress 6.7.2 Sensei LMS Version 4.24.5

Browser / OS version

• Tested on Chrome and Firefox

Screenshot / Video

• Screenshot with TwentyTwentyFive theme:

• Screenshot with TwentyTwentyFour theme:

• I did find that the Lesson Action buttons updated to align with the Site Styles on the Sensei Course theme:

Context / Source

• User reached out to share their feedback because the lesson buttons did not reflect the rest of their site
• When they manually updated the button colors on the lesson, the colors did update successfully, but the Sensei green background color was still visible.

[cat-og]

Reported here: 9396789-zd-a8c Theme: Kamala theme

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 9396789-zen

[mxhassani]

Workaround

Most of the color inconsistencies can be addressed with the following CSS:

/* Update Sensei colors to match theme colors */
body > * {
   --sensei-secondary-color: var(--wp--preset--color--contrast-2);
   --sensei-button-text-color: var(--wp--preset--color--base);
}

Depending on the theme, you may need to change what's inside var().

This doesn't fix the button radius inconsistency, but it can be done with a more involved CSS code.