Skip to content

Commit

Permalink
fix(material/checkbox): use token for disabled label color
Browse files Browse the repository at this point in the history
Fixes that we were emitting a concrete style for the checkbox instead of using a token.
  • Loading branch information
crisbeto committed Jan 16, 2024
1 parent 064415b commit cbeeb3a
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 6 deletions.
5 changes: 0 additions & 5 deletions src/material/checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,6 @@
&.mat-warn {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
}

&.mat-mdc-checkbox-disabled label {
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
color: inspection.get-theme-color($theme, foreground, disabled-text);
}
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/material/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,11 @@

&.mat-mdc-checkbox-disabled label {
cursor: default;

@include token-utils.use-tokens(tokens-mat-checkbox.$prefix,
tokens-mat-checkbox.get-token-slots()) {
@include token-utils.create-token-slot(color, disabled-label-color);
}
}

// The MDC styles result in extra padding if the label is present but empty. To fix this we hide
Expand Down
4 changes: 3 additions & 1 deletion src/material/core/tokens/m2/mat/_checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ $prefix: (mat, checkbox);

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
@return ();
@return (
disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
);
}

// Tokens that can be configured through Angular Material's typography theming API.
Expand Down

0 comments on commit cbeeb3a

Please sign in to comment.