diff --git a/package.json b/package.json index 28cbfdd7f795..e821603e6074 100644 --- a/package.json +++ b/package.json @@ -160,7 +160,7 @@ "requirejs": "^2.3.6", "rollup": "^2.66.1", "rollup-plugin-sourcemaps": "^0.6.3", - "sass": "^1.68.0", + "sass": "^1.77.8", "selenium-webdriver": "^3.6.0", "semver": "^7.3.5", "send": "^0.17.2", diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss index a83cb5b090c7..cdab2b58a360 100644 --- a/src/material/badge/badge.scss +++ b/src/material/badge/badge.scss @@ -63,11 +63,6 @@ $large-size: $default-size + 6; box-sizing: border-box; pointer-events: none; - @include cdk.high-contrast(active, off) { - outline: solid 1px; - border-radius: 0; - } - @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) { @include token-utils.create-token-slot(background-color, background-color); @include token-utils.create-token-slot(color, text-color); @@ -101,6 +96,11 @@ $large-size: $default-size + 6; right: 100%; } } + + @include cdk.high-contrast(active, off) { + outline: solid 1px; + border-radius: 0; + } } .mat-badge-disabled .mat-badge-content { diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index 1c98b53f7c4b..09080f5f2037 100644 --- a/src/material/button-toggle/button-toggle.scss +++ b/src/material/button-toggle/button-toggle.scss @@ -28,7 +28,6 @@ $_standard-tokens: ( .mat-button-toggle-standalone, .mat-button-toggle-group { - @include elevation.overridable-elevation(2); position: relative; display: inline-flex; flex-direction: row; @@ -43,6 +42,8 @@ $_standard-tokens: ( @include token-utils.create-token-slot(border-radius, shape); } + @include elevation.overridable-elevation(2); + @include cdk.high-contrast(active, off) { outline: solid 1px; } diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index eb5021150ad2..22d4fbaf8f3d 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -141,8 +141,6 @@ @include token-utils.use-tokens($prefix, $slots) { $icon-spacing: token-utils.get-token-variable(icon-spacing, true); $icon-offset: token-utils.get-token-variable(icon-offset, true); - $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true); - padding: 0 $horizontal-padding; @if ($has-with-icon-padding) { $with-icon-horizontal-padding: diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 7cc65bbcd4d0..86afcbb18f70 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -63,12 +63,9 @@ .mat-mdc-button { $mat-text-button-slots: tokens-mat-text-button.get-token-slots(); - @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix, - $mat-text-button-slots, true); - @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix, - $mat-text-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix, - $mat-text-button-slots); + @include token-utils.use-tokens(tokens-mat-text-button.$prefix, $mat-text-button-slots) { + padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + } @include token-utils.use-tokens( tokens-mdc-text-button.$prefix, @@ -95,19 +92,19 @@ @include token-utils.create-token-slot(color, disabled-label-text-color); } } + + @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix, + $mat-text-button-slots, true); + @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix, + $mat-text-button-slots); + @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix, + $mat-text-button-slots); } .mat-mdc-unelevated-button { $mat-filled-button-slots: tokens-mat-filled-button.get-token-slots(); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix, - $mat-filled-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix, - $mat-filled-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix, - $mat-filled-button-slots); - @include token-utils.use-tokens( tokens-mdc-filled-button.$prefix, tokens-mdc-filled-button.get-token-slots() @@ -118,7 +115,23 @@ @include token-utils.create-token-slot(letter-spacing, label-text-tracking); @include token-utils.create-token-slot(text-transform, label-text-transform); @include token-utils.create-token-slot(font-weight, label-text-weight); + } + + @include token-utils.use-tokens(tokens-mat-filled-button.$prefix, $mat-filled-button-slots) { + padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + } + + @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix, + $mat-filled-button-slots, false); + @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix, + $mat-filled-button-slots); + @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix, + $mat-filled-button-slots); + @include token-utils.use-tokens( + tokens-mdc-filled-button.$prefix, + tokens-mdc-filled-button.get-token-slots() + ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); @include token-utils.create-token-slot(background-color, container-color); @@ -141,13 +154,6 @@ $mat-protected-button-slots: tokens-mat-protected-button.get-token-slots(); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix, - $mat-protected-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix, - $mat-protected-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix, - $mat-protected-button-slots); - @include token-utils.use-tokens( tokens-mdc-protected-button.$prefix, tokens-mdc-protected-button.get-token-slots() @@ -159,7 +165,26 @@ @include token-utils.create-token-slot(letter-spacing, label-text-tracking); @include token-utils.create-token-slot(text-transform, label-text-transform); @include token-utils.create-token-slot(font-weight, label-text-weight); + } + + @include token-utils.use-tokens( + tokens-mat-protected-button.$prefix, + $mat-protected-button-slots + ) { + padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + } + + @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix, + $mat-protected-button-slots, false); + @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix, + $mat-protected-button-slots); + @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix, + $mat-protected-button-slots); + @include token-utils.use-tokens( + tokens-mdc-protected-button.$prefix, + tokens-mdc-protected-button.get-token-slots() + ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); @include token-utils.create-token-slot(background-color, container-color); @@ -199,13 +224,6 @@ border-style: solid; transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots); - @include token-utils.use-tokens( tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-token-slots() @@ -218,7 +236,23 @@ @include token-utils.create-token-slot(font-weight, label-text-weight); @include token-utils.create-token-slot(border-radius, container-shape); @include token-utils.create-token-slot(border-width, outline-width); + } + + @include token-utils.use-tokens(tokens-mat-outlined-button.$prefix, $mat-outlined-button-slots) { + padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + } + @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix, + $mat-outlined-button-slots, false); + @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix, + $mat-outlined-button-slots); + @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix, + $mat-outlined-button-slots); + + @include token-utils.use-tokens( + tokens-mdc-outlined-button.$prefix, + tokens-mdc-outlined-button.get-token-slots() + ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); @include token-utils.create-token-slot(border-color, outline-color); diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 5dbf2b283c35..5622649afe5e 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -10,8 +10,6 @@ @use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small; .mat-mdc-fab-base { - @include button-base.mat-private-button-interactive(); - @include style-private.private-animation-noop(); @include vendor-prefixes.user-select(none); position: relative; display: inline-flex; @@ -32,6 +30,9 @@ transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1); flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle. + @include button-base.mat-private-button-interactive(); + @include style-private.private-animation-noop(); + &::before { position: absolute; box-sizing: border-box; @@ -114,9 +115,6 @@ } @mixin _fab-structure($mdc-tokens, $mat-tokens) { - @include button-base.mat-private-button-touch-target(true, $mat-tokens...); - @include button-base.mat-private-button-ripple($mat-tokens...); - @include token-utils.use-tokens($mdc-tokens...) { @include token-utils.create-token-slot(background-color, container-color); @include token-utils.create-token-slot(border-radius, container-shape); @@ -134,6 +132,9 @@ @include token-utils.create-token-slot(background-color, disabled-state-container-color); } } + + @include button-base.mat-private-button-touch-target(true, $mat-tokens...); + @include button-base.mat-private-button-ripple($mat-tokens...); } .mat-mdc-fab { @@ -167,15 +168,6 @@ max-width: 100%; line-height: normal; - @include _fab-elevation($mdc-tokens); - - @include button-base.mat-private-button-disabled { - // Necessary for interactive disabled buttons. - &, &:focus { - box-shadow: none; - } - } - @include token-utils.use-tokens($mdc-tokens...) { @include token-utils.create-token-slot(height, container-height); @include token-utils.create-token-slot(border-radius, container-shape); @@ -185,6 +177,15 @@ @include token-utils.create-token-slot(letter-spacing, label-text-tracking); } + @include _fab-elevation($mdc-tokens); + + @include button-base.mat-private-button-disabled { + // Necessary for interactive disabled buttons. + &, &:focus { + box-shadow: none; + } + } + // stylelint-disable selector-class-pattern // For Extended FAB with text label followed by icon. // We are checking for the a button class because white this is a FAB it diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index a143ab22afdf..03f56e21520e 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -49,7 +49,17 @@ // the unused `.mdc-button__icon` class. Explicitly set the font-size here. @include token-utils.create-token-slot(font-size, icon-size); @include token-utils.create-token-slot(color, icon-color); + } + @include button-base.mat-private-button-interactive(); + @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix, + tokens-mat-icon-button.get-token-slots()); + @include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix, + tokens-mat-icon-button.get-token-slots()); + @include private.private-animation-noop(); + + @include token-utils.use-tokens( + tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) { @include button-base.mat-private-button-disabled { @include token-utils.create-token-slot(color, disabled-icon-color); }; @@ -62,13 +72,6 @@ } } - @include button-base.mat-private-button-interactive(); - @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-token-slots()); - @include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-token-slots()); - @include private.private-animation-noop(); - .mat-mdc-button-persistent-ripple { border-radius: 50%; } diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss index ea2b03748564..730f3ee659d9 100644 --- a/src/material/checkbox/_checkbox-common.scss +++ b/src/material/checkbox/_checkbox-common.scss @@ -175,10 +175,10 @@ $_fallback-size: 40px; // Always apply the color since the element becomes `opacity: 0` // when unchecked. This makes the animation look better. @include token-utils.create-token-slot(color, selected-checkmark-color); + } - @include cdk.high-contrast(active, off) { - color: CanvasText; - } + @include cdk.high-contrast(active, off) { + color: CanvasText; } } @@ -214,15 +214,15 @@ $_fallback-size: 40px; transition: opacity $_transition-duration $_exit-curve, transform $_transition-duration $_exit-curve; - @include cdk.high-contrast(active, off) { - margin: 0 1px; - } - @include token-utils.use-tokens($prefix, $slots) { // Always apply the color since the element becomes `opacity: 0` // when unchecked. This makes the animation look better. @include token-utils.create-token-slot(border-color, selected-checkmark-color); } + + @include cdk.high-contrast(active, off) { + margin: 0 1px; + } } @include token-utils.use-tokens($prefix, $slots) { diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index 5126480836e4..720f72f3d877 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -6,8 +6,6 @@ @include checkbox-common.checkbox-structure(true); .mat-mdc-checkbox { - @include checkbox-common.checkbox-noop-animations; - // The host node defaults to `display: inline`, we have to change it in order for margins to work. display: inline-block; // Avoids issues in some CSS grid layouts (see #25153). @@ -15,6 +13,8 @@ // Disable the browser's tap highlight since we indicate state with the ripple instead. -webkit-tap-highlight-color: transparent; + @include checkbox-common.checkbox-noop-animations; + // 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 { diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 78fc2a6eba0c..b117ea70a870 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -642,6 +642,11 @@ $_avatar-trailing-padding: 8px; // MDC centers the text, but we have a lot of internal customers who have it at the start. text-align: left; + // Give the text label a higher z-index than the focus overlay to ensure that the focus overlay + // does not affect the color of the text. Material spec requires state layer to not interfere with + // text color. + z-index: 1; + [dir='rtl'] & { text-align: right; } @@ -671,11 +676,6 @@ $_avatar-trailing-padding: 8px; $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); } - - // Give the text label a higher z-index than the focus overlay to ensure that the focus overlay - // does not affect the color of the text. Material spec requires state layer to not interfere with - // text color. - z-index: 1; } .mat-mdc-chip-remove { diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 2115da0560bb..a7c66df421d3 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -71,6 +71,10 @@ $_side-padding: 16px; // we can't use directly, because it comes with some selectors. cursor: default; + // Prevent clicking on disabled options with mouse. Support focusing on disabled option using + // keyboard, but not with mouse. + pointer-events: none; + // Give the visual content of this list item a lower opacity. This creates the "gray" appearance // for disabled state. Set the opacity on the pseudo checkbox and projected content. Set // opacity only on the visual content rather than the entire list-item so we don't affect the @@ -81,11 +85,6 @@ $_side-padding: 16px; .mat-mdc-option-pseudo-checkbox, .mdc-list-item__primary-text, > mat-icon { opacity: 0.38; } - - // Prevent clicking on disabled options with mouse. Support focusing on disabled option using - // keyboard, but not with mouse. - pointer-events: none; - } // Note that we bump the padding here, rather than padding inside the @@ -146,7 +145,6 @@ $_side-padding: 16px; font-family: inherit; text-decoration: inherit; text-transform: inherit; - margin-right: auto; [dir='rtl'] & { diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 206a3a76da6f..a745d9df688e 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -56,16 +56,17 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { - .mat-primary { - @include _palette-styles($theme, primary); - } - // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the // theme from their parent, rather than implementing their own theming, which is why we // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary` // in order to allow for the color to be overwritten if the checkbox is inside a parent that // has `mat-accent` and is placed inside another parent that has `mat-primary`. @include _palette-styles($theme, accent); + + .mat-primary { + @include _palette-styles($theme, primary); + } + .mat-accent { @include _palette-styles($theme, accent); } diff --git a/src/material/core/style/_list-common.scss b/src/material/core/style/_list-common.scss index 288c6a876cf0..a258f641ec26 100644 --- a/src/material/core/style/_list-common.scss +++ b/src/material/core/style/_list-common.scss @@ -33,14 +33,14 @@ // This mixin provides base styles for the wrapper around mat-line elements in a list. @mixin wrapper-base() { - @include normalize-text(); - display: flex; flex-direction: column; flex: auto; box-sizing: border-box; overflow: hidden; + @include normalize-text(); + // Must remove wrapper when lines are empty or it takes up horizontal // space and pushes other elements to the right. &:empty { diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss index a86b2d6333c0..4c6f65990b19 100644 --- a/src/material/core/tokens/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -208,8 +208,10 @@ $_cached-token-slots: null; m3-token-definitions.md-sys-color-values-dark($ref), m3-token-definitions.md-sys-color-values-light($ref)); - @each $name, $value in $sys-colors { - --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + & { + @each $name, $value in $sys-colors { + --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + } } } @@ -229,8 +231,10 @@ $_cached-token-slots: null; typography-system-variables-prefix) or $_system-level-prefix; } - @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) { - --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + & { + @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) { + --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + } } } @@ -259,20 +263,26 @@ $_cached-token-slots: null; } @mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) { - @each $name, $value in m3-token-definitions.md-sys-shape-values() { - --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + & { + @each $name, $value in m3-token-definitions.md-sys-shape-values() { + --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + } } } @mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) { - @each $name, $value in m3-token-definitions.md-sys-state-values() { - --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + & { + @each $name, $value in m3-token-definitions.md-sys-state-values() { + --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + } } } @mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) { - @each $name, $value in m3-token-definitions.md-sys-motion-values() { - --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + & { + @each $name, $value in m3-token-definitions.md-sys-motion-values() { + --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; + } } } diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss index 6ac1c4e1acdb..4fbe7df7cca0 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -123,9 +123,14 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks(); // Outputs a map of tokens under a specific prefix. @mixin create-token-values($prefix, $tokens) { @if $tokens != null { - @each $key, $value in $tokens { - @if $value != null { - #{_create-var-name($prefix, $key)}: #{$value}; + // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility + // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should + // figure out a better way to do this or move all the concrete styles out of the theme. + & { + @each $key, $value in $tokens { + @if $value != null { + #{_create-var-name($prefix, $key)}: #{$value}; + } } } } diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index e985e20830ac..551c76d88970 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -80,7 +80,6 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( } .mat-calendar-body-cell { - @include button-common.reset(); position: absolute; top: 0; left: 0; @@ -91,6 +90,7 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( outline: none; font-family: inherit; margin: 0; + @include button-common.reset(); } // We use ::before to apply a background to the body cell, because we need to apply a border diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 9487190311db..13072c7aee18 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -106,6 +106,16 @@ $_emit-fallbacks: true; min-width: inherit; max-width: inherit; + @include _use-mat-tokens { + @include token-utils.create-token-slot(box-shadow, container-elevation-shadow, + $_emit-fallbacks); + } + + @include _use-mdc-tokens { + @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks); + @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks); + } + [dir='rtl'] & { text-align: right; } @@ -132,16 +142,6 @@ $_emit-fallbacks: true; content: ''; pointer-events: none; } - - @include _use-mat-tokens { - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow, - $_emit-fallbacks); - } - - @include _use-mdc-tokens { - @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks); - @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks); - } } .mat-mdc-dialog-title { @@ -151,6 +151,10 @@ $_emit-fallbacks: true; box-sizing: border-box; margin: 0 0 1px; + @include _use-mat-tokens { + @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks); + } + // This was used by MDC to set the text baseline. We should figure out a way to // remove it, because it can introduce unnecessary whitespace at the beginning // of the element. @@ -166,10 +170,6 @@ $_emit-fallbacks: true; text-align: right; } - @include _use-mat-tokens { - @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks); - } - // Nested to maintain the old specificity. .mat-mdc-dialog-container & { @include _use-mdc-tokens { @@ -247,10 +247,6 @@ $_emit-fallbacks: true; padding: 8px; border-top: 1px solid transparent; - @include cdk.high-contrast(active, off) { - border-top-color: CanvasText; - } - // For backwards compatibility, actions align at start by default. MDC usually // aligns actions at the end of the container. @include _use-mat-tokens { @@ -258,6 +254,10 @@ $_emit-fallbacks: true; @include token-utils.create-token-slot(justify-content, actions-alignment, $_emit-fallbacks); } + @include cdk.high-contrast(active, off) { + border-top-color: CanvasText; + } + // .mat-mdc-dialog-actions-align-{start|center|end} are set by directive input "align" // [align='start'], [align='center'] and [align='right'] are kept for backwards compability &.mat-mdc-dialog-actions-align-start, &[align='start'] { diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index 0995142c76ac..1c5f8e029730 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/src/material/expansion/expansion-panel.scss @@ -6,7 +6,6 @@ @use '../core/style/elevation'; .mat-expansion-panel { - @include elevation.overridable-elevation(2); box-sizing: content-box; display: block; margin: 0; @@ -25,6 +24,8 @@ @include token-utils.create-token-slot(border-radius, container-shape); } + @include elevation.overridable-elevation(2); + .mat-accordion & { &:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) { border-radius: 0; diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index 9c2804ca9bd1..d796ecb06e1a 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -45,10 +45,6 @@ $_icon-prefix-infix-padding: 4px; // To avoid problems with text-align. text-align: left; - [dir='rtl'] & { - text-align: right; - } - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) { @include vendor-prefixes.smooth-font(); @@ -72,6 +68,10 @@ $_icon-prefix-infix-padding: 4px; } } } + + [dir='rtl'] & { + text-align: right; + } } // Container that contains the prefixes, infix and suffixes. These elements should diff --git a/src/material/grid-list/grid-list.scss b/src/material/grid-list/grid-list.scss index 16edc4d7dcf5..d687513d1e4b 100644 --- a/src/material/grid-list/grid-list.scss +++ b/src/material/grid-list/grid-list.scss @@ -24,8 +24,6 @@ $text-padding: 16px; // Headers & footers .mat-grid-tile-header, .mat-grid-tile-footer { - @include list-common.normalize-text(); - display: flex; align-items: center; height: $one-line-height; @@ -39,6 +37,8 @@ $text-padding: 16px; left: 0; right: 0; + @include list-common.normalize-text(); + &.mat-2-line { height: $two-line-height; } @@ -74,8 +74,8 @@ $text-padding: 16px; @include token-utils.use-tokens( tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) { $secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size); - @include list-common.base(#{$secondary-token-name}); @include token-utils.create-token-slot(font-size, tile-header-primary-text-size); + @include list-common.base(#{$secondary-token-name}); } } @@ -83,8 +83,8 @@ $text-padding: 16px; @include token-utils.use-tokens( tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) { $secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size); - @include list-common.base(#{$secondary-token-name}); @include token-utils.create-token-slot(font-size, tile-footer-primary-text-size); + @include list-common.base(#{$secondary-token-name}); } } diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index 9aacabba030f..49b460b8c90d 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -90,37 +90,8 @@ mat-menu { overflow: hidden; padding: 0; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - $icons-selector: '.material-icons, mat-icon, [matButtonIcon]'; - $leading-padding: token-utils.get-token-variable(item-leading-spacing); - $trailing-padding: token-utils.get-token-variable(item-trailing-spacing); - $with-icon-leading-padding: - token-utils.get-token-variable(item-with-icon-leading-spacing); - $with-icon-trailing-padding: - token-utils.get-token-variable(item-with-icon-trailing-spacing); - - padding-left: $leading-padding; - padding-right: $trailing-padding; - - [dir='rtl'] & { - padding-right: $leading-padding; - padding-left: $trailing-padding; - } - - &:has(#{$icons-selector}) { - padding-left: $with-icon-leading-padding; - padding-right: $with-icon-trailing-padding; - } - - [dir='rtl'] &:has(#{$icons-selector}) { - padding-right: $with-icon-leading-padding; - padding-left: $with-icon-trailing-padding; - } - } - // MDC's menu items are `