[mdc-button] Outline color is not set to primary by default

[kimurakenshi]

Bug report

For the outlined button the border-color is not longer set to primary color. Now is using on-surface instead.

Steps to reproduce

Just take a look at the border color of the outlined button to notice that is not using the primary color.

Expected behavior

Unless the spec has changed and i'm not aware of that i would say this should use the primary-color for the border of an outlined button.

Screenshots

Additional context

I believe that

@mixin outline-color_($color, $query: feature-targeting-functions.all()) {
  $feat-color: feature-targeting-functions.create-target($query, color);

  @include feature-targeting-mixins.targets($feat-color) {
    @include theme-mixins.prop(border-color, $color);
  }
}

is taking care of this part and if i'm not mistake is using:

$outline-color: rgba(theme-variables.prop-value(on-surface), .12) !default; to set the border color instead of primary.

Possible solution

Maybe $outline-color should be updated to use the right color.

Additional Information

Currently i'm using @include mdc-button.outline-color(var(--mdc-theme-primary)); to set the border color back to primary.

[Kyouha2020]

I don't think it is a bug, because outlined button has a medium emphasis. Please see the MD Spec.https://material.io/components/buttons

[kimurakenshi]

Thank you @Kyouha2020 . Maybe this is an issue on my end but let me clarify what i'm referring to with some additional information:

Button Outlined - v4

Button Outlined - v5

There is definitely a different border color for this variant in version 5 and i don't even see this in the official demo (https://material.io/components/buttons). Like i said at the beginning this could be an issue on my end but by looking at the new version of button component it seems this color is defined by: $outline-color: rgba(theme-variables.prop-value(on-surface), .12) !default; which clearly is not using the primary color.

If you still think this is not an issue or the spec has changed(i don't see any changes in the spec) please feel free to close this issue.

Thank you.

[asyncLiz]

The demo on material.io has not been updated, but if you scroll down to the outlined button section you will see that the correct spec is 12% on-surface color for the border.

This was reported in #5170 and fixed in #5268 for v5.