Skip to content

Commit

Permalink
fix(button): Fix outline & ink color according to spec guidance (#5268)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Variable `$mdc-button-disabled-container-fill-color`
renamed to `$mdc-button-disabled-container-color`.
  • Loading branch information
@allan-chen
allan-chen authored Nov 22, 2019
1 parent d6a1d4b commit ee1a68c
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 42 deletions.
6 changes: 3 additions & 3 deletions packages/mdc-button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,8 +467,8 @@ $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);
@include mdc-button-outline-color(primary, $query);
@include mdc-button-disabled-outline-color($mdc-button-disabled-ink-color, $query);
@include mdc-button-outline-color($mdc-button-outline-color, $query);
@include mdc-button-disabled-outline-color($mdc-button-disabled-container-color, $query);

@include mdc-feature-targets($feat-structure) {
border-style: solid;
Expand All @@ -479,7 +479,7 @@ $query: mdc-feature-all()) {
@include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding, $query);
@include mdc-button-container-fill-color(primary, $query);
@include mdc-button-ink-color(on-primary, $query);
@include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-fill-color, $query);
@include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-color, $query);
@include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query);
}

Expand Down
5 changes: 3 additions & 2 deletions packages/mdc-button/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ $mdc-button-density-config: (
) !default;

$mdc-button-outlined-border-width: 1px !default;
$mdc-button-outline-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
$mdc-button-shape-radius: small !default;

$mdc-button-disabled-container-fill-color: rgba(mdc-theme-prop-value(on-surface), .12);
$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-button-disabled-container-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
74 changes: 37 additions & 37 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
{
"spec/mdc-button/classes/baseline-button-with-icons.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-with-icons.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-icons.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-icons.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-icons.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/27/16_53_20_055/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-icons.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png"
}
},
"spec/mdc-button/classes/baseline-button-with-trailing-icons.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/20_01_25_475/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png"
}
},
"spec/mdc-button/classes/baseline-button-without-icons.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-button-without-icons.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-without-icons.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-button-without-icons.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-without-icons.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-without-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-button-without-icons.html.windows_ie_11.png"
}
},
"spec/mdc-button/classes/baseline-link-with-icons.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/20_01_25_475/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/08/08/17_04_14_927/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_76.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png"
}
},
"spec/mdc-button/classes/baseline-link-without-icons.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/classes/baseline-link-without-icons.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-without-icons.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/classes/baseline-link-without-icons.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-without-icons.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/classes/baseline-link-without-icons.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-without-icons.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-without-icons.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/classes/baseline-link-without-icons.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/container-fill-color.html": {
Expand All @@ -48,11 +48,11 @@
}
},
"spec/mdc-button/mixins/density.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/08/13/21_46_47_510/spec/mdc-button/mixins/density.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/density.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/08/13/21_46_47_510/spec/mdc-button/mixins/density.html.windows_chrome_76.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/08/13/21_46_47_510/spec/mdc-button/mixins/density.html.windows_firefox_67.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/08/13/21_46_47_510/spec/mdc-button/mixins/density.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/density.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/density.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/density.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/filled-accessible.html": {
Expand All @@ -64,11 +64,11 @@
}
},
"spec/mdc-button/mixins/horizontal-padding-baseline.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_09_11_731/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/icon-color.html": {
Expand All @@ -88,11 +88,11 @@
}
},
"spec/mdc-button/mixins/shape-radius.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/shape-radius.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/shape-radius.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/shape-radius.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/shape-radius.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/shape-radius.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/shape-radius.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/shape-radius.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/shape-radius.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/stroke-color.html": {
Expand All @@ -104,11 +104,11 @@
}
},
"spec/mdc-button/mixins/stroke-width.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-button/mixins/stroke-width.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-button/mixins/stroke-width.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/stroke-width.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/stroke-width.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/21/21_45_38_479/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png"
}
},
"spec/mdc-card/classes/baseline.html": {
Expand Down Expand Up @@ -1951,4 +1951,4 @@
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/08/08_47_39_000/spec/mdc-typography/mixins/mixins.html.windows_ie_11.png"
}
}
}
}

0 comments on commit ee1a68c

Please sign in to comment.