Unexpected button color change (upgrade from 7.0.5 to 9.5.5)

[dellagustin]

Hello,

When testing an upgrade from 7.0.5 to 9.5.5, a primary button is now showing the wrong color.

It should be black, but it is showing a blue color.

Before:

After:

Current source code: https://github.com/podStation/podstation.github.io/tree/cef62084112fb1022b763a3f6c15f181ec25015a (before upgrade)

mkdocs.yml:

theme:
  name: material
  features:
  - navigation.tabs
  palette:
    primary: black
    accent: teal
  icon: 
    logo: fontawesome/solid/rss
  favicon: images/favicon.ico

Button:

[INSTALL HERE][at-chrome-web-store]{ .md-button .md-button--primary }

Is this a bug, or did I miss some non-backwards compatible change?

[kamilkrzyskow]

Hello @dellagustin,
I believe the color has been changed in 9.4.0 as part of the Improved slate color scheme commits.
You can add extra css to make it black again:
https://squidfunk.github.io/mkdocs-material/customization/#additional-css

[data-md-color-primary=black] .md-button--primary {
    background-color: var(--md-primary-fg-color);
    border-color: var(--md-primary-fg-color);
}

EDIT:
Actually looking at git blame it turned out that the buttons started using the typeset color in 8.5.8
3c5f94f#diff-cb62b49a7cc534cf5888884165d4957ef93d17dff48f856d37b009e5ff6fc788

[dellagustin]

Thank you @kamilkrzyskow for pointing it out.
My understanding based on that is that this is an actual issue. Is that also your opinion?
If it is, I'd create an issue based on this discussion.

[kamilkrzyskow]

I don't think so 🤔 8.5.8 fixed #4571 which later got another fix on top in 8.5.9 #4600, so since there was already at least 2 fixes to the CSS I believe the current way it's working is intentional.
Personally I started working with mkdocs-material around version ~8.4.0 and don't remember any major changes in styling.
Perhaps there was some change in ideology to the button styling between 7.0.5 and 8.5.0 for it to use the accent color and then the typeset color began to use the same with slight hue changes 🤔

If you believe that the .md-button--primary should use the primary colors by default then @ mention squidfunk and ask him directly. Sadly I can't be of much help here, as I'm not sure what to look for in the commits or version messages 😅

[kamilkrzyskow]

There does still exist:

mkdocs-material/src/templates/assets/stylesheets/main/components/_form.scss

Lines 45 to 49 in d3d44cf

	&--primary {
	color: var(--md-primary-bg-color);
	background-color: var(--md-primary-fg-color);
	border-color: var(--md-primary-fg-color);
	}

which is the previous behaviour for 7.0.5, but the white and black primary colors do have this override:

mkdocs-material/src/templates/assets/stylesheets/palette/_primary.scss

Lines 164 to 169 in d3d44cf

	// Primary button
	&--primary {
	color: hsla(var(--md-hue), 0%, 100%, 1);
	background-color: var(--md-typeset-a-color);
	border-color: var(--md-typeset-a-color);
	}

added in 8.5.8 because of #4571 so the change was definitely intentional.
However, I still don't see the connection how #4571 came to be a bug in the first place that warranted the change 🤔 it worked fine on your site.

[squidfunk]

The commits that induce the problem reported in the OP were necessary, as they fixed some specificity bugs that led to unreadable links in certain combinations. If you increase the specificity of the selectors in your additional CSS to exceed or match the specificity of the rules employed by the theme, you'll get the previous behavior back.

Note that we do not consider this to be a breaking change, because we don't view CSS specificity as part of our API surface. We need to make changes here and there as we discover bugs, without raising the need for a major release every time we fix something. I hope for your understanding.