From ee1a68c54fa9240a334b0462513b855d5dab4807 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Fri, 22 Nov 2019 14:39:51 -0800 Subject: [PATCH] fix(button): Fix outline & ink color according to spec guidance (#5268) BREAKING CHANGE: Variable `$mdc-button-disabled-container-fill-color` renamed to `$mdc-button-disabled-container-color`. --- packages/mdc-button/_mixins.scss | 6 +-- packages/mdc-button/_variables.scss | 5 +- test/screenshot/golden.json | 74 ++++++++++++++--------------- 3 files changed, 43 insertions(+), 42 deletions(-) diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 74bbf1254a0..f05122b1382 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -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; @@ -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); } diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss index 8f42355f5fd..0ed25a5f14f 100644 --- a/packages/mdc-button/_variables.scss +++ b/packages/mdc-button/_variables.scss @@ -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; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index d54f6df6426..12ec32a29db 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -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": { @@ -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": { @@ -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": { @@ -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": { @@ -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": { @@ -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" } } -} \ No newline at end of file +}