Make checkmark color match text color

angular · Feb 8, 2024 · 60ed027 · 60ed027
1 parent 3c5c0f8
commit 60ed027
Showing 1 changed file with 18 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']) {
@@ -81,6 +87,9 @@ $_standard-tokens: (
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(color, text-color);
     @include token-utils.create-token-slot(font-family, text-font);
+    --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);
@@ -112,6 +121,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,
@@ -151,6 +163,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,