Skip to content

refactor(material-experimental/mdc-snack-bar): switch to new theming API #25273

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 1 commit into from
Jul 18, 2022
Merged

refactor(material-experimental/mdc-snack-bar): switch to new theming API #25273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
62 changes: 25 additions & 37 deletions src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,31 @@
@use '@angular/material' as mat;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/snackbar' as mdc-snackbar;
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
@use 'sass:color';
@use 'sass:map';


@mixin color($config-or-theme) {
$config: mat.get-color-config($config-or-theme);

$orig-fill-color: mdc-snackbar.$fill-color;
$orig-label-ink-color: mdc-snackbar.$label-ink-color;
$orig-dismiss-ink-color: mdc-snackbar.$dismiss-ink-color;
$is-dark-theme: map.get($config, is-dark);
$accent: map.get($config, accent);

@include mat.private-using-mdc-theme($config) {
mdc-snackbar.$fill-color: color.mix(
mdc-theme-color.prop-value(on-surface),
mdc-theme-color.prop-value(surface),
80%
);
mdc-snackbar.$label-ink-color: rgba(
mdc-theme-color.prop-value(surface),
mdc-theme-color.text-emphasis(high)
);
mdc-snackbar.$dismiss-ink-color: rgba(
mdc-theme-color.prop-value(surface),
mdc-theme-color.text-emphasis(high)
);

@include mdc-snackbar.core-styles($query: mat.$private-mdc-theme-styles-query);
}
.mat-mdc-snack-bar-container {
$button-color: if($is-dark-theme, currentColor, mat.get-color-from-palette($accent, text));
--mat-mdc-snack-bar-button-color: #{$button-color};

mdc-snackbar.$fill-color: $orig-fill-color;
mdc-snackbar.$label-ink-color: $orig-label-ink-color;
mdc-snackbar.$dismiss-ink-color: $orig-dismiss-ink-color;

// Four classes is necessary to make it higher specificity than the mdc-button theme styles.
// This ensures the correct styles will be applied regardless of the order te mixins are
// @included.
.mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action {
$is-dark-theme: map.get($config, is-dark);
$accent: map.get($config, accent);
color: if($is-dark-theme, inherit, mat.get-color-from-palette($accent, text));

.mat-ripple-element {
background-color: currentColor;
opacity: 0.1;
@include mdc-snackbar-theme.theme((
container-color: color.mix(
mdc-theme-color.prop-value(on-surface),
mdc-theme-color.prop-value(surface),
80%
),
supporting-text-color: rgba(
mdc-theme-color.prop-value(surface),
mdc-theme-color.text-emphasis(high)
)
));
}
}
}
Expand All @@ -53,7 +34,14 @@
$config: mat.private-typography-to-2018-config(
mat.get-typography-config($config-or-theme));
@include mat.private-using-mdc-typography($config) {
@include mdc-snackbar.core-styles($query: mat.$private-mdc-typography-styles-query);
.mat-mdc-snack-bar-container {
@include mdc-snackbar-theme.theme((
supporting-text-font: mat.font-family($config, body-2),
supporting-text-line-height: mat.line-height($config, body-2),
supporting-text-size: mat.font-size($config, body-2),
supporting-text-weight: mat.font-weight($config, body-2),
));
}
}
}

Expand Down
73 changes: 68 additions & 5 deletions src/material-experimental/mdc-snack-bar/snack-bar-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,86 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use '@angular/cdk';
@use '@material/snackbar' as mdc-snackbar;
@use '@material/snackbar/snackbar' as mdc-snackbar;
@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;


@include mat.private-disable-mdc-fallback-declarations {
// Include the styles without the animations since we
// reuse the same animation as the non-MDC version.
@include mdc-snackbar.core-styles($query: mat.$private-mdc-base-styles-without-animation-query);
@include mdc-snackbar.static-styles($query: mat.$private-mdc-base-styles-without-animation-query);
}

// MDC sets the position as fixed and sets the container on the bottom center of the page (or
// otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
// of positions, so we'll defer logic there.
.mat-mdc-snack-bar-container {
@include mat.private-disable-mdc-fallback-declarations {
// The styles weren't included in `static-styles` so we need to add them ourselves.
@include mdc-snackbar-theme.min-width(
mdc-snackbar-theme.$min-width,
$query: mat.$private-mdc-base-styles-query
);
@include mdc-snackbar-theme.max-width(
mdc-snackbar-theme.$max-width,
$query: mat.$private-mdc-base-styles-query
);
@include mdc-snackbar-theme.viewport-margin(
mdc-snackbar-theme.$viewport-margin-narrow,
$query: mat.$private-mdc-base-styles-query
);

// MDC has the `container-elevation` which sounds like it should work, but it ends up applying
// the shadow on the outer container instead of the `.mdc-snackbar__surface` which causes
// a white background behind the rounded corners, because the `border-radius` is on the
// surface element.
@include mdc-snackbar-theme.elevation(mdc-snackbar-theme.$elevation);

@include mdc-snackbar-theme.theme-styles(map.merge(mdc-snackbar-theme.$light-theme, (
container-color: inherit,
supporting-text-color: inherit,
container-shape: mdc-snackbar-theme.$shape-radius,
supporting-text-font: inherit,
supporting-text-line-height: inherit,
supporting-text-size: inherit,
supporting-text-weight: inherit,

// Removed to match the previous appearance.
supporting-text-tracking: null,

// We're not using any of these since the button styling goes through `mat-button`.
action-label-text-color: null,
action-focus-state-layer-opacity: null,
action-hover-state-layer-opacity: null,
action-pressed-state-layer-opacity: null,
icon-focus-state-layer-opacity: null,
icon-hover-state-layer-opacity: null,
icon-pressed-state-layer-opacity: null,
)));
}

// MDC sets the position as fixed and sets the container on the bottom center of the page (or
// otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
// of positions, so we'll defer logic there.
position: static;

@include cdk.high-contrast(active, off) {
border: solid 1px;
}

// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
// the specificity over the button styles that may bleed in from the rest of the app.
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
// MDC's `action-label-text-color` should be able to do this, but the button theme has a
// higher specificity so it ends up overriding it. Define our own variable that we can
// use to control the color instead.
color: var(--mat-mdc-snack-bar-button-color, transparent);

// Darken the ripples in the button so they're visible against the dark background.
--mat-mdc-button-persistent-ripple-color: currentColor;

.mat-ripple-element {
background-color: currentColor;
opacity: 0.1;
}
}
}

// These elements need to have full width using flex layout.
Expand Down