From 1080a1ac35bde3b8e9534bc4d80bfc70509a7b0b Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 24 May 2025 05:41:29 -0600 Subject: [PATCH 1/3] fix(material/badge): remove badge opacity color mix --- src/material/badge/_m2-badge.scss | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss index 83e5300f60a6..66f8e35c278e 100644 --- a/src/material/badge/_m2-badge.scss +++ b/src/material/badge/_m2-badge.scss @@ -42,22 +42,8 @@ $_large-size: $_default-size + 6px; // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary); - $app-background: inspection.get-theme-color($theme, background, background); - $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button); - - // The disabled color usually has some kind of opacity, but because the badge is overlayed - // on top of something else, it won't look good if it's opaque. If it is a color *type*, - // we convert it into a solid color by taking the opacity from the rgba value and using - // the value to determine the percentage of the background to put into foreground when - // mixing the colors together. - @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) { - $badge-opacity: color.opacity($disabled-background); - $disabled-background: color.mix($app-background, - rgba($disabled-background, 1), (1 - $badge-opacity) * 100%); - } - @return map.merge($primary-color-tokens, ( - badge-disabled-state-background-color: $disabled-background, + badge-disabled-state-background-color: inspection.get-theme-color($theme, foreground, disabled-button), badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text), )); } From 543e3cef01de38b8cbbf24173d78ea09a6a8bfcd Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 24 May 2025 05:53:49 -0600 Subject: [PATCH 2/3] refactor: lint --- src/material/badge/_m2-badge.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss index 66f8e35c278e..c1706e56e8b1 100644 --- a/src/material/badge/_m2-badge.scss +++ b/src/material/badge/_m2-badge.scss @@ -43,7 +43,8 @@ $_large-size: $_default-size + 6px; @function get-color-tokens($theme) { $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary); @return map.merge($primary-color-tokens, ( - badge-disabled-state-background-color: inspection.get-theme-color($theme, foreground, disabled-button), + badge-disabled-state-background-color: + inspection.get-theme-color($theme, foreground, disabled-button), badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text), )); } From 5f89726ae4e7ac8c243c33db1a1d5e4e749b4ef8 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 24 May 2025 06:00:12 -0600 Subject: [PATCH 3/3] refactor: lint --- src/material/badge/_m2-badge.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss index c1706e56e8b1..7fbfc925fc07 100644 --- a/src/material/badge/_m2-badge.scss +++ b/src/material/badge/_m2-badge.scss @@ -1,7 +1,5 @@ -@use 'sass:meta'; @use 'sass:map'; @use 'sass:math'; -@use 'sass:color'; @use '../core/theming/inspection'; $_default-size: 22px;