From ea23681a51126b412aa0004889e12bd10d384060 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 8 Mar 2021 20:47:03 -0700 Subject: [PATCH 1/2] fix(material-experimental/mdc-progress-bar): improve buffer color --- .../mdc-progress-bar/_progress-bar-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss index 384aed11e6d3..ad43b74b13fc 100644 --- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss +++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss @@ -8,8 +8,8 @@ // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming // and doesn't match the Material design spec. For now we approximate the buffer background by - // lightening the color of the primary bar. - $buffer-color: color.adjust(mdc-theme-color.prop-value($color), $lightness: 30%); + // applying an opacity to the color of the bar. + $buffer-color: rgba(mdc-theme-color.prop-value($color), 0.25); @include mdc-linear-progress.bar-color($color, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-linear-progress.buffer-color($buffer-color, $query: mdc-helpers.$mat-theme-styles-query); From ed443847720bd29ce42d5bfa437f1531051571a2 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 8 Mar 2021 22:07:54 -0700 Subject: [PATCH 2/2] fix(material-experimental/mdc-progress-bar): use color.adjust --- .../mdc-progress-bar/_progress-bar-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss index ad43b74b13fc..948f90bd53c4 100644 --- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss +++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss @@ -9,7 +9,7 @@ // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming // and doesn't match the Material design spec. For now we approximate the buffer background by // applying an opacity to the color of the bar. - $buffer-color: rgba(mdc-theme-color.prop-value($color), 0.25); + $buffer-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75); @include mdc-linear-progress.bar-color($color, $query: mdc-helpers.$mat-theme-styles-query); @include mdc-linear-progress.buffer-color($buffer-color, $query: mdc-helpers.$mat-theme-styles-query);