Skip to content

fix(material/checkbox): refactor to depend on @angular/material/core/tokens #26744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 20, 2023
Merged

fix(material/checkbox): refactor to depend on @angular/material/core/tokens #26744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
020b823
fix(material/checkbox): refactor to depend on @angular/material/core/…
mmalerba Mar 3, 2023
d3d5009
add checkbox tokens with placeholder values
mmalerba Mar 3, 2023
15f8b5c
add styles for token slots and values to checkbox
mmalerba Mar 3, 2023
b946092
fill in real token values and fix checkbox appearance
mmalerba Mar 4, 2023
82d3641
clean up unnecessary code
mmalerba Mar 7, 2023
b0e61a3
fix mat-list
mmalerba Mar 7, 2023
393fa65
fix ci
mmalerba Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/material/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@
$private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
@forward './core/typography/typography' show private-typography-to-2014-config,
private-typography-to-2018-config;
@forward './checkbox/checkbox-private' show private-checkbox-styles-with-color,
$private-checkbox-theme-config;
@forward './table/table-flex-styles' show private-table-flex-styles;
@forward './core/style/menu-common' as private-menu-common-*;
@forward './core/style/button-common' as private-button-common-*;
Expand Down
54 changes: 0 additions & 54 deletions src/material/checkbox/_checkbox-private.scss
View file
Open in desktop

This file was deleted.

101 changes: 31 additions & 70 deletions src/material/checkbox/_checkbox-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,36 @@
@use '@material/checkbox/checkbox' as mdc-checkbox;
@use 'sass:map';
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/form-field' as mdc-form-field;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme';
@use 'sass:map';
@use 'sass:color';
@use '../core/ripple/ripple-theme';
@use '../core/theming/theming';
@use '../core/typography/typography';
@use '../core/mdc-helpers/mdc-helpers';
@use './checkbox-private';

// Apply ripple colors to the MatRipple element and the MDC ripple element when the
// checkbox is selected.
@mixin _selected-ripple-colors($theme, $mdc-color) {
.mdc-checkbox--selected ~ {
.mat-mdc-checkbox-ripple {
@include ripple-theme.color((
foreground: (
base: mdc-theme-color.prop-value($mdc-color)
),
));
}

.mdc-checkbox__ripple {
background: $theme;
}
}
}
@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;

@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$primary: theming.get-color-from-palette(map.get($config, primary));
$accent: theming.get-color-from-palette(map.get($config, accent));
$warn: theming.get-color-from-palette(map.get($config, warn));
$primary: map.get($config, primary);
$warn: map.get($config, warn);
$foreground: map.get($config, foreground);

@include mdc-helpers.using-mdc-theme($config) {
.mat-mdc-checkbox {
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
@include ripple-theme.color((
foreground: (
base: mdc-theme-color.prop-value(on-surface)
),
));
.mat-mdc-checkbox {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));

.mdc-checkbox__ripple {
background: mdc-theme-color.prop-value(on-surface);
}

// MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
// class for accent and warn style, and applying the appropriate overrides below. Since we
// don't use MDC's ripple, we also need to set the color for our replacement ripple.
&.mat-primary {
@include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);
@include _selected-ripple-colors($primary, primary);
}
&.mat-primary {
$primary-config: map.merge($config, (accent: $primary));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't quite understand why we're passing in a primary palette into a key called accent here and in the warn theme.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our .mat-primary, .mat-accent, .mat-warn classes don't really fit well with the token-based theming. There aren't separate tokens for e.g. checkbox-color-when-primary, checkbox-color-when-accent. Instead I set up the tokens to draw their values from the default flavor of checkbox (accent). In order to still support the .mat-primary and .mat-warn, I just call get-color-tokens passing the desired palette as the accent palette to get the styles we want.

Ultimately I think we'll want to deprecate and remove the class based theming, but this seemed like a decent solution for now

@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
}

&.mat-accent {
@include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);
@include _selected-ripple-colors($accent, secondary);
}
&.mat-warn {
$warn-config: map.merge($config, (accent: $warn));
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($warn-config));
}

&.mat-warn {
@include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);
@include _selected-ripple-colors($warn, error);
}
@include mdc-helpers.using-mdc-theme($config) {
// TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
}

.mat-mdc-checkbox-disabled label {
&.mat-mdc-checkbox-disabled label {
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
color: theming.get-color-from-palette($foreground, disabled-text);
}
Expand All @@ -78,27 +40,26 @@
@mixin typography($config-or-theme) {
$config: typography.private-typography-to-2018-config(
theming.get-typography-config($config-or-theme));
@include mdc-helpers.using-mdc-typography($config) {
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
.mat-mdc-checkbox {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));

@include mdc-helpers.using-mdc-typography($config) {
// TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
}
}
}

@mixin density($config-or-theme) {
$density-scale: theming.get-density-config($config-or-theme);

@include mdc-helpers.disable-mdc-fallback-declarations {
.mat-mdc-checkbox .mdc-checkbox {
@include mdc-checkbox-theme.density(
$density-scale,
$query: mdc-helpers.$mdc-base-styles-query
);
}
.mat-mdc-checkbox {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
}

@include mdc-helpers.if-touch-targets-unsupported($density-scale) {
.mat-mdc-checkbox-touch-target {
display: none;
}
@include mdc-helpers.if-touch-targets-unsupported($density-scale) {
.mat-mdc-checkbox-touch-target {
display: none;
}
}
}
Expand Down
Loading