Skip to content

Commit

Permalink
refactor(material/slider): switch to new theming API (#25725)
Browse files Browse the repository at this point in the history 
Switches the MDC-based slider to use the new theming API based on CSS variables.
  • Loading branch information
@crisbeto
crisbeto committed Oct 3, 2022
1 parent 2686bfe commit 67e3e3f
Show file tree
Hide file tree
Showing 6 changed files with 703 additions and 699 deletions.
94 changes: 47 additions & 47 deletions package.json
View file
Expand Up @@ -95,53 +95,53 @@
"@bazel/terser": "5.5.3",
"@bazel/worker": "5.5.3",
"@firebase/app-types": "^0.7.0",
"@material/animation": "15.0.0-canary.c363f267b.0",
"@material/auto-init": "15.0.0-canary.c363f267b.0",
"@material/banner": "15.0.0-canary.c363f267b.0",
"@material/base": "15.0.0-canary.c363f267b.0",
"@material/button": "15.0.0-canary.c363f267b.0",
"@material/card": "15.0.0-canary.c363f267b.0",
"@material/checkbox": "15.0.0-canary.c363f267b.0",
"@material/chips": "15.0.0-canary.c363f267b.0",
"@material/circular-progress": "15.0.0-canary.c363f267b.0",
"@material/data-table": "15.0.0-canary.c363f267b.0",
"@material/density": "15.0.0-canary.c363f267b.0",
"@material/dialog": "15.0.0-canary.c363f267b.0",
"@material/dom": "15.0.0-canary.c363f267b.0",
"@material/drawer": "15.0.0-canary.c363f267b.0",
"@material/elevation": "15.0.0-canary.c363f267b.0",
"@material/fab": "15.0.0-canary.c363f267b.0",
"@material/feature-targeting": "15.0.0-canary.c363f267b.0",
"@material/floating-label": "15.0.0-canary.c363f267b.0",
"@material/form-field": "15.0.0-canary.c363f267b.0",
"@material/icon-button": "15.0.0-canary.c363f267b.0",
"@material/image-list": "15.0.0-canary.c363f267b.0",
"@material/layout-grid": "15.0.0-canary.c363f267b.0",
"@material/line-ripple": "15.0.0-canary.c363f267b.0",
"@material/linear-progress": "15.0.0-canary.c363f267b.0",
"@material/list": "15.0.0-canary.c363f267b.0",
"@material/menu": "15.0.0-canary.c363f267b.0",
"@material/menu-surface": "15.0.0-canary.c363f267b.0",
"@material/notched-outline": "15.0.0-canary.c363f267b.0",
"@material/radio": "15.0.0-canary.c363f267b.0",
"@material/ripple": "15.0.0-canary.c363f267b.0",
"@material/rtl": "15.0.0-canary.c363f267b.0",
"@material/segmented-button": "15.0.0-canary.c363f267b.0",
"@material/select": "15.0.0-canary.c363f267b.0",
"@material/shape": "15.0.0-canary.c363f267b.0",
"@material/slider": "15.0.0-canary.c363f267b.0",
"@material/snackbar": "15.0.0-canary.c363f267b.0",
"@material/switch": "15.0.0-canary.c363f267b.0",
"@material/tab": "15.0.0-canary.c363f267b.0",
"@material/tab-bar": "15.0.0-canary.c363f267b.0",
"@material/tab-indicator": "15.0.0-canary.c363f267b.0",
"@material/tab-scroller": "15.0.0-canary.c363f267b.0",
"@material/textfield": "15.0.0-canary.c363f267b.0",
"@material/theme": "15.0.0-canary.c363f267b.0",
"@material/tooltip": "15.0.0-canary.c363f267b.0",
"@material/top-app-bar": "15.0.0-canary.c363f267b.0",
"@material/touch-target": "15.0.0-canary.c363f267b.0",
"@material/typography": "15.0.0-canary.c363f267b.0",
"@material/animation": "15.0.0-canary.a515a2d18.0",
"@material/auto-init": "15.0.0-canary.a515a2d18.0",
"@material/banner": "15.0.0-canary.a515a2d18.0",
"@material/base": "15.0.0-canary.a515a2d18.0",
"@material/button": "15.0.0-canary.a515a2d18.0",
"@material/card": "15.0.0-canary.a515a2d18.0",
"@material/checkbox": "15.0.0-canary.a515a2d18.0",
"@material/chips": "15.0.0-canary.a515a2d18.0",
"@material/circular-progress": "15.0.0-canary.a515a2d18.0",
"@material/data-table": "15.0.0-canary.a515a2d18.0",
"@material/density": "15.0.0-canary.a515a2d18.0",
"@material/dialog": "15.0.0-canary.a515a2d18.0",
"@material/dom": "15.0.0-canary.a515a2d18.0",
"@material/drawer": "15.0.0-canary.a515a2d18.0",
"@material/elevation": "15.0.0-canary.a515a2d18.0",
"@material/fab": "15.0.0-canary.a515a2d18.0",
"@material/feature-targeting": "15.0.0-canary.a515a2d18.0",
"@material/floating-label": "15.0.0-canary.a515a2d18.0",
"@material/form-field": "15.0.0-canary.a515a2d18.0",
"@material/icon-button": "15.0.0-canary.a515a2d18.0",
"@material/image-list": "15.0.0-canary.a515a2d18.0",
"@material/layout-grid": "15.0.0-canary.a515a2d18.0",
"@material/line-ripple": "15.0.0-canary.a515a2d18.0",
"@material/linear-progress": "15.0.0-canary.a515a2d18.0",
"@material/list": "15.0.0-canary.a515a2d18.0",
"@material/menu": "15.0.0-canary.a515a2d18.0",
"@material/menu-surface": "15.0.0-canary.a515a2d18.0",
"@material/notched-outline": "15.0.0-canary.a515a2d18.0",
"@material/radio": "15.0.0-canary.a515a2d18.0",
"@material/ripple": "15.0.0-canary.a515a2d18.0",
"@material/rtl": "15.0.0-canary.a515a2d18.0",
"@material/segmented-button": "15.0.0-canary.a515a2d18.0",
"@material/select": "15.0.0-canary.a515a2d18.0",
"@material/shape": "15.0.0-canary.a515a2d18.0",
"@material/slider": "15.0.0-canary.a515a2d18.0",
"@material/snackbar": "15.0.0-canary.a515a2d18.0",
"@material/switch": "15.0.0-canary.a515a2d18.0",
"@material/tab": "15.0.0-canary.a515a2d18.0",
"@material/tab-bar": "15.0.0-canary.a515a2d18.0",
"@material/tab-indicator": "15.0.0-canary.a515a2d18.0",
"@material/tab-scroller": "15.0.0-canary.a515a2d18.0",
"@material/textfield": "15.0.0-canary.a515a2d18.0",
"@material/theme": "15.0.0-canary.a515a2d18.0",
"@material/tooltip": "15.0.0-canary.a515a2d18.0",
"@material/top-app-bar": "15.0.0-canary.a515a2d18.0",
"@material/touch-target": "15.0.0-canary.a515a2d18.0",
"@material/typography": "15.0.0-canary.a515a2d18.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.1.3",
Expand Down
2 changes: 1 addition & 1 deletion packages.bzl
View file
Expand Up @@ -2,7 +2,7 @@
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
# version for the placeholders.
ANGULAR_PACKAGE_VERSION = "^15.0.0-0 || ^16.0.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.c363f267b.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.a515a2d18.0"
TSLIB_PACKAGE_VERSION = "^2.3.0"
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"

Expand Down
1 change: 0 additions & 1 deletion src/dev-app/dev-app/dev-app-layout.ts
View file
Expand Up @@ -103,7 +103,6 @@ export class DevAppLayout {
{name: 'Typography', route: '/typography'},
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
{name: 'YouTube Player', route: '/youtube-player'},
{name: 'MDC Slider', route: '/mdc-slider'},
{name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
{name: 'Legacy Button', route: '/legacy-button'},
{name: 'Legacy Card', route: '/legacy-card'},
Expand Down
123 changes: 50 additions & 73 deletions src/material/slider/_slider-theme.scss
View file
@@ -1,47 +1,46 @@
@use 'sass:map';

@use '@material/slider/slider' as mdc-slider;
@use '@material/slider/slider-theme';
@use '@material/theme/variables' as theme-variables;
@use '@material/slider/slider-theme' as mdc-slider-theme;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/typography/typography' as mdc-typography;
@use '@material/theme/variables' as mdc-theme-variables;
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/theming';
@use '../core/typography/typography';
@use '../core/ripple/ripple-theme';


@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
@include mdc-helpers.using-mdc-theme($config) {
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-theme-styles-query);

@include mdc-helpers.using-mdc-theme($config) {
.mat-mdc-slider {
&.mat-primary, &.mat-accent, &.mat-warn {
$is-dark: map.get($config, is-dark);
$indicator-color: if($is-dark, white, black);
$indicator-text-color: if($is-dark, black, white);
$indicator-opacity: if($is-dark, 0.9, 0.6);

@include slider-theme.value-indicator-color(
$color: $indicator-color,
$opacity: $indicator-opacity,
$query: mdc-helpers.$mdc-theme-styles-query
);
@include slider-theme.value-indicator-text-color(
$color: $indicator-text-color,
$query: mdc-helpers.$mdc-theme-styles-query
);
}
$is-dark: map.get($config, is-dark);
$on-surface: mdc-theme-color.prop-value(on-surface);

@include mdc-slider-theme.theme((
label-container-color: if($is-dark, white, black),
label-label-text-color: if($is-dark, black, white),
disabled-handle-color: $on-surface,
disabled-active-track-color: $on-surface,
disabled-inactive-track-color: $on-surface,
with-tick-marks-disabled-container-color: $on-surface,
));

// Note that technically we can control this using an `rgba` color in `label-container-color`.
// We don't do it, because the shapes MDC uses to construct the indicator overlap which causes
// their color opacities to stack with an `rgba` color.
--mat-mdc-slider-value-indicator-opacity: #{if($is-dark, 0.9, 0.6)};

&.mat-primary {
@include _custom-slider-color(primary, on-primary);
@include _slider-color(primary, on-primary);
}

&.mat-accent {
@include _custom-slider-color(secondary, on-secondary);
@include _slider-color(secondary, on-secondary);
}

&.mat-warn {
@include _custom-slider-color(error, on-error);
@include _slider-color(error, on-error);
}
}
}
Expand All @@ -51,7 +50,15 @@
$config: typography.private-typography-to-2018-config(
theming.get-typography-config($config-or-theme));
@include mdc-helpers.using-mdc-typography($config) {
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
.mat-mdc-slider {
@include mdc-slider-theme.theme((
label-label-text-font: mdc-typography.get-font(subtitle2),
label-label-text-font-size: mdc-typography.get-size(subtitle2),
label-label-text-line-height: mdc-typography.get-line-height(subtitle2),
label-label-text-tracking: mdc-typography.get-tracking(subtitle2),
label-label-text-weight: mdc-typography.get-weight(subtitle2),
));
}
}
}

Expand All @@ -76,52 +83,22 @@
}
}

@mixin _custom-slider-color($color, $on-color) {
@include slider-theme.thumb-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mdc-theme-styles-query
);
@include slider-theme.track-active-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mdc-theme-styles-query
);
@include slider-theme.track-inactive-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mdc-theme-styles-query
);
@include slider-theme.tick-mark-active-color(
$color-or-map: (
default: $on-color,
disabled: surface,
),
$query: mdc-helpers.$mdc-theme-styles-query
);
@include slider-theme.tick-mark-inactive-color(
$color-or-map: (
default: $color,
disabled: on-surface,
),
$query: mdc-helpers.$mdc-theme-styles-query
);
$ripple-color: map.get(theme-variables.$property-values, $color);
@include ripple-theme.color((
foreground: (
base: $ripple-color
),
@mixin _slider-color($color, $on-color) {
$ripple-color: map.get(mdc-theme-variables.$property-values, $color);
$resolved-color: mdc-theme-color.prop-value($color);
$resolved-on-color: mdc-theme-color.prop-value($on-color);

@include mdc-slider-theme.theme((
handle-color: $resolved-color,
focus-handle-color: $resolved-color,
hover-handle-color: $resolved-color,
active-track-color: $resolved-color,
inactive-track-color: $resolved-color,
with-tick-marks-active-container-color: $resolved-on-color,
with-tick-marks-inactive-container-color: $resolved-color,
));
.mat-mdc-slider-hover-ripple {
background-color: rgba($ripple-color, 0.05);
}
.mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
background-color: rgba($ripple-color, 0.2);
}

--mat-mdc-slider-ripple-color: #{$ripple-color};
--mat-mdc-slider-hover-ripple-color: #{rgba($ripple-color, 0.05)};
--mat-mdc-slider-focus-ripple-color: #{rgba($ripple-color, 0.2)};
}
29 changes: 28 additions & 1 deletion src/material/slider/slider.scss
View file
@@ -1,8 +1,9 @@
@use '@material/slider/slider' as mdc-slider;
@use '@material/slider/slider-theme' as mdc-slider-theme;
@use '../core/mdc-helpers/mdc-helpers';

@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-slider.without-ripple($query: mdc-helpers.$mdc-base-styles-query);
@include mdc-slider.static-styles($query: mdc-helpers.$mdc-base-styles-query);
}

$mat-slider-min-size: 128px !default;
Expand All @@ -13,6 +14,10 @@ $mat-slider-horizontal-margin: 8px !default;
// element, aligning it in the vertical middle of a line, specifying a default minimum
// width and adding horizontal margin.
.mat-mdc-slider {
@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-slider-theme.theme-styles(mdc-slider-theme.$light-theme);
}

display: inline-block;
box-sizing: border-box;
outline: none;
Expand All @@ -27,6 +32,28 @@ $mat-slider-horizontal-margin: 8px !default;
width: auto;
min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);

.mdc-slider__value-indicator {
// There's no token to control this opacity so we have to do it ourselves.
opacity: var(--mat-mdc-slider-value-indicator-opacity, 1);
}

// The `.mat-ripple` wrapper here is redundant, but we need it to
// increase the specificity due to how some styles are setup in g3.
.mat-ripple {
// These ripple colors are custom so we have to introduce our own tokens.
.mat-ripple-element {
background-color: var(--mat-mdc-slider-ripple-color, transparent);
}

.mat-mdc-slider-hover-ripple {
background-color: var(--mat-mdc-slider-hover-ripple-color, transparent);
}

.mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
background-color: var(--mat-mdc-slider-focus-ripple-color, transparent);
}
}

&._mat-animation-noopable {
&.mdc-slider--discrete .mdc-slider__thumb,
&.mdc-slider--discrete .mdc-slider__track--active_fill,
Expand Down

0 comments on commit 67e3e3f

Please sign in to comment.