Make checkmark color match text color

angular · Feb 27, 2024 · 89aaace · 89aaace
1 parent d64545f
commit 89aaace
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -53,6 +53,12 @@ $_standard-tokens: (
   @include token-utils.use-tokens($_standard-tokens...) {
     @include token-utils.create-token-slot(border-radius, shape);
     border: solid 1px var(#{token-utils.get-token-variable(divider-color)});
+
+    .mat-pseudo-checkbox {
+      --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
+        #{token-utils.get-token-variable(selected-state-text-color)}
+      );
+    }
   }
 
   &:not([class*='mat-elevation-z']) {
@@ -86,6 +92,10 @@ $_standard-tokens: (
     @include token-utils.create-token-slot(font-weight, label-text-weight);
     @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
 
+    --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
+      #{token-utils.get-token-variable(selected-state-text-color)}
+    );
+
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
     }
@@ -116,6 +126,9 @@ $_standard-tokens: (
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(color, disabled-state-text-color);
     @include token-utils.create-token-slot(background-color, disabled-state-background-color);
+    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
+      #{token-utils.get-token-variable(disabled-state-text-color)}
+    );
 
     &.mat-button-toggle-checked {
       @include token-utils.create-token-slot(background-color,
@@ -159,6 +172,12 @@ $_standard-tokens: (
       @include token-utils.create-token-slot(color, disabled-state-text-color);
       @include token-utils.create-token-slot(background-color, disabled-state-background-color);
 
+      .mat-pseudo-checkbox {
+        --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
+          #{token-utils.get-token-variable(disabled-selected-state-text-color)}
+        );
+      }
+
       &.mat-button-toggle-checked {
         @include token-utils.create-token-slot(color, disabled-selected-state-text-color);
         @include token-utils.create-token-slot(background-color,