Skip to content

Commit

Permalink
refactor(material/checkbox): simplify structural styles
Browse files Browse the repository at this point in the history 
Simplifies the styles for the checkbox to make them smaller and easier to follow.
  • Loading branch information
@crisbeto
crisbeto committed May 29, 2024
1 parent eb22e2e commit a15a234
Show file tree
Hide file tree
Showing 8 changed files with 571 additions and 224 deletions.
509 changes: 509 additions & 0 deletions src/material/checkbox/_checkbox-common.scss
View file

Large diffs are not rendered by default.

31 changes: 23 additions & 8 deletions src/material/checkbox/_checkbox-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '../core/style/sass-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';
Expand All @@ -16,7 +15,10 @@
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
} @else {
@include sass-utils.current-selector-or-root() {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-unthemable-tokens()
);
@include token-utils.create-token-values(
tokens-mat-checkbox.$prefix,
tokens-mat-checkbox.get-unthemable-tokens()
Expand All @@ -35,7 +37,10 @@
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
} @else {
@include sass-utils.current-selector-or-root() {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-color-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-checkbox.$prefix,
tokens-mat-checkbox.get-color-tokens($theme)
Expand All @@ -44,11 +49,15 @@

.mat-mdc-checkbox {
&.mat-primary {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-color-tokens($theme, primary));
}

&.mat-warn {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-color-tokens($theme, warn));
}
}
}
Expand All @@ -61,7 +70,10 @@
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
} @else {
@include sass-utils.current-selector-or-root() {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-typography-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-checkbox.$prefix,
tokens-mat-checkbox.get-typography-tokens($theme)
Expand All @@ -79,7 +91,10 @@
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
} @else {
@include sass-utils.current-selector-or-root() {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix,
tokens-mdc-checkbox.get-density-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-checkbox.$prefix,
tokens-mat-checkbox.get-density-tokens($theme)
Expand Down Expand Up @@ -140,6 +155,6 @@
// Don't pass $options here, since the mdc-checkbox doesn't support color options,
// only the mdc-checkbox does.
$mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
@include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
@include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens);
@include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
}
186 changes: 8 additions & 178 deletions src/material/checkbox/checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1,11 @@
@use 'sass:map';
@use '@angular/cdk';
@use '@material/checkbox/checkbox' as mdc-checkbox;
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/touch-target' as mdc-touch-target;
@use '@material/theme/custom-properties' as mdc-custom-properties;
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/style/layout-common';
@use '../core/style/vendor-prefixes';
@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
@use '../core/tokens/token-utils';
@use './checkbox-common';

@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
// Add the checkbox static styles.
@include mdc-checkbox.static-styles();

$mdc-checkbox-slots: tokens-mdc-checkbox.get-token-slots();

.mdc-checkbox {
// Add the slots for MDC checkbox.
@include mdc-checkbox-theme.theme-styles(
map.merge(
$mdc-checkbox-slots,
(
// Angular Material focuses the native input. rather than the element MDC expects,
// so we create this slot ourselves.
selected-focus-icon-color: null,
unselected-focus-icon-color: null,
// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
unselected-hover-state-layer-opacity: null,
unselected-hover-state-layer-color: null,
unselected-focus-state-layer-opacity: null,
unselected-focus-state-layer-color: null,
unselected-pressed-state-layer-opacity: null,
unselected-pressed-state-layer-color: null,
selected-hover-state-layer-opacity: null,
selected-hover-state-layer-color: null,
selected-focus-state-layer-opacity: null,
selected-focus-state-layer-color: null,
selected-pressed-state-layer-opacity: null,
selected-pressed-state-layer-color: null
)
)
);

@include token-utils.use-tokens(tokens-mdc-checkbox.$prefix, $mdc-checkbox-slots) {
// MDC expects focus on .mdc-checkbox, but we focus the native element instead, so we need to
// emit a our own slot for the focus styles.
.mdc-checkbox__native-control:enabled:focus {
// Extra `:focus` included to achieve higher specificity than MDC's `:hover` style.
&:focus:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
@include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
}

&:checked,
&:indeterminate {
& ~ .mdc-checkbox__background {
@include token-utils.create-token-slot(border-color, selected-focus-icon-color);
@include token-utils.create-token-slot(background-color, selected-focus-icon-color);
}
}
}

// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
&:hover {
.mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
unselected-hover-state-layer-color
);
}

.mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
unselected-hover-state-layer-color
);
}
}

.mdc-checkbox__native-control:focus {
& ~ .mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
unselected-focus-state-layer-color
);
}

& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
unselected-focus-state-layer-color
);
}
}

&:active .mdc-checkbox__native-control {
& ~ .mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
unselected-pressed-state-layer-color
);
}

& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
unselected-pressed-state-layer-color
);
}
}

&:hover .mdc-checkbox__native-control:checked {
& ~ .mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
selected-hover-state-layer-color
);
}

& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
selected-hover-state-layer-color
);
}
}

.mdc-checkbox__native-control:focus:checked {
& ~ .mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
selected-focus-state-layer-color
);
}

& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
selected-focus-state-layer-color
);
}
}

&:active .mdc-checkbox__native-control:checked {
& ~ .mdc-checkbox__ripple {
@include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
@include token-utils.create-token-slot(
background-color,
selected-pressed-state-layer-color
);
}

& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@include token-utils.create-token-slot(
background-color,
selected-pressed-state-layer-color
);
}
}
}
}
}
@include checkbox-common.checkbox-structure(true);

.mat-mdc-checkbox {
// The host node defaults to `display: inline`, we have to change it in order for margins to work.
Expand All @@ -183,15 +20,6 @@
@include vendor-prefixes.color-adjust(exact);
}

// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
&._mat-animation-noopable {
*,
*::before {
transition: none !important;
animation: none !important;
}
}

// Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
// user of this. Therefore we add the pointer cursor on top of MDC's styles.
label {
Expand Down Expand Up @@ -269,10 +97,12 @@

// Element used to provide a larger tap target for users on touch devices.
.mat-mdc-checkbox-touch-target {
@include mdc-touch-target.touch-target(
$set-width: true,
$query: mdc-helpers.$mdc-base-styles-query
);
position: absolute;
top: 50%;
left: 50%;
height: 48px;
width: 48px;
transform: translate(-50%, -50%);

@include token-utils.use-tokens(
tokens-mat-checkbox.$prefix,
Expand Down
7 changes: 3 additions & 4 deletions src/material/core/tokens/m2/mdc/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ $prefix: (mdc, checkbox);
// =============================================================================================
// = TOKENS NOT USED IN ANGULAR MATERIAL =
// =============================================================================================
selected-pressed-icon-color: null,
unselected-pressed-icon-color: null,

// MDC currently doesn't output a slot for these tokens.
disabled-selected-icon-opacity: null,
disabled-unselected-icon-opacity: null,
Expand Down Expand Up @@ -79,16 +82,12 @@ $prefix: (mdc, checkbox);
selected-hover-icon-color: $palette-selected,
// The color of the checkbox fill when the checkbox is selected.
selected-icon-color: $palette-selected,
// The color of the checkbox fill when the checkbox is selected an pressed.
selected-pressed-icon-color: $palette-selected,
// The color of the checkbox border when the checkbox is unselected and focused.
unselected-focus-icon-color: $active-border-color,
// The color of the checkbox border when the checkbox is unselected and hovered.
unselected-hover-icon-color: $active-border-color,
// The color of the checkbox border when the checkbox is unselected.
unselected-icon-color: $border-color,
// The color of the checkbox border when the checkbox is unselected and pressed.
unselected-pressed-icon-color: $border-color,
// The color of the ripple when the checkbox is selected and focused.
selected-focus-state-layer-color: $palette-default,
// The color of the ripple when the checkbox is selected and hovered.
Expand Down
1 change: 1 addition & 0 deletions src/material/list/BUILD.bazel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ sass_binary(
":list_scss_lib",
"//:mdc_sass_lib",
"//src/cdk:sass_lib",
"//src/material/checkbox:checkbox_scss_lib",
"//src/material/core:core_scss_lib",
],
)
Expand Down
38 changes: 19 additions & 19 deletions src/material/list/_list-item-hcm-indicator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@
// its background color. Since that doesn't work in HCM, this mixin provides an alternative by
// rendering a circle.
@mixin private-high-contrast-list-item-indicator() {
@include cdk.high-contrast(active, off) {
&::after {
$size: 10px;
content: '';
position: absolute;
top: 50%;
right: mdc-list-variables.$side-padding;
transform: translateY(-50%);
width: $size;
height: 0;
border-bottom: solid $size;
border-radius: $size;
}
@include cdk.high-contrast(active, off) {
&::after {
$size: 10px;
content: '';
position: absolute;
top: 50%;
right: mdc-list-variables.$side-padding;
transform: translateY(-50%);
width: $size;
height: 0;
border-bottom: solid $size;
border-radius: $size;
}

[dir='rtl'] {
&::after {
right: auto;
left: mdc-list-variables.$side-padding;
}
}
[dir='rtl'] {
&::after {
right: auto;
left: mdc-list-variables.$side-padding;
}
}
}
}
10 changes: 6 additions & 4 deletions src/material/list/_list-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use 'sass:map';
@use '@material/list/evolution-mixins';
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/radio/radio-theme' as mdc-radio-theme;
@use '@material/list/list-theme' as mdc-list-theme;

Expand Down Expand Up @@ -63,13 +62,16 @@
}

.mat-mdc-list-option {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary));
}
.mat-mdc-list-option.mat-accent {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent));
}
.mat-mdc-list-option.mat-warn {
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
@include token-utils.create-token-values(
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn));
}

// There is no token for activated color on nav list.
Expand Down
Loading

0 comments on commit a15a234

Please sign in to comment.