diff --git a/src/material/bottom-sheet/BUILD.bazel b/src/material/bottom-sheet/BUILD.bazel index 392926012289..22290135bd20 100644 --- a/src/material/bottom-sheet/BUILD.bazel +++ b/src/material/bottom-sheet/BUILD.bazel @@ -46,7 +46,10 @@ sass_library( sass_binary( name = "bottom_sheet_container_scss", src = "bottom-sheet-container.scss", - deps = ["//src/cdk:sass_lib"], + deps = [ + "//src/cdk:sass_lib", + "//src/material/core:core_scss_lib", + ], ) ng_test_library( diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index d75ccde7a298..122e93d99a02 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -1,26 +1,25 @@ -@use 'sass:map'; -@use '../core/style/private'; @use '../core/typography/typography'; -@use '../core/typography/typography-utils'; @use '../core/theming/theming'; +@use '../core/style/sass-utils'; +@use '../core/tokens/token-utils'; +@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $background: map.get($config, background); - $foreground: map.get($config, foreground); - .mat-bottom-sheet-container { - @include private.private-theme-elevation(16, $config); - background: theming.get-color-from-palette($background, dialog); - color: theming.get-color-from-palette($foreground, text); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-color-tokens($config)); } } @mixin typography($config-or-theme) { $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); - .mat-bottom-sheet-container { - @include typography-utils.typography-level($config, body-1); + + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-typography-tokens($config)); } } diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss index 93403a0b9c21..d1f77c951b79 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.scss +++ b/src/material/bottom-sheet/bottom-sheet-container.scss @@ -1,4 +1,7 @@ @use '@angular/cdk'; +@use '../core/style/elevation'; +@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; +@use '../core/tokens/token-utils'; // The bottom sheet minimum width on larger screen sizes is based // on increments of the toolbar, according to the spec. See: @@ -8,6 +11,9 @@ $container-vertical-padding: 8px !default; $container-horizontal-padding: 16px !default; .mat-bottom-sheet-container { + @include token-utils.create-token-values( + tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens()); + @include elevation.elevation(16); padding: $container-vertical-padding $container-horizontal-padding; min-width: 100vw; @@ -17,6 +23,17 @@ $container-horizontal-padding: 16px !default; max-height: 80vh; overflow: auto; + @include token-utils.use-tokens( + tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) { + @include token-utils.create-token-slot(background, container-background-color); + @include token-utils.create-token-slot(color, container-text-color); + @include token-utils.create-token-slot(font-family, container-text-font); + @include token-utils.create-token-slot(font-size, container-text-size); + @include token-utils.create-token-slot(line-height, container-text-line-height); + @include token-utils.create-token-slot(font-weight, container-text-weight); + @include token-utils.create-token-slot(letter-spacing, container-text-tracking); + } + @include cdk.high-contrast(active, off) { outline: 1px solid; } @@ -24,8 +41,11 @@ $container-horizontal-padding: 16px !default; // Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen. %_mat-bottom-sheet-container-border-radius { - border-top-left-radius: 4px; - border-top-right-radius: 4px; + @include token-utils.use-tokens( + tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) { + @include token-utils.create-token-slot(border-top-left-radius, container-shape); + @include token-utils.create-token-slot(border-top-right-radius, container-shape); + } } .mat-bottom-sheet-container-medium { diff --git a/src/material/core/tokens/m2/mat/_bottom-sheet.scss b/src/material/core/tokens/m2/mat/_bottom-sheet.scss new file mode 100644 index 000000000000..e8a45d035461 --- /dev/null +++ b/src/material/core/tokens/m2/mat/_bottom-sheet.scss @@ -0,0 +1,56 @@ +@use 'sass:map'; +@use '../../token-utils'; +@use '../../../typography/typography-utils'; +@use '../../../theming/theming'; +@use '../../../style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, bottom-sheet); + +// Tokens that can't be configured through Angular Material's current theming API, +// but may be in a future version of the theming API. +@function get-unthemable-tokens() { + @return ( + // TODO: will be necessary for M3. + container-shape: 4px, + ); +} + +// Tokens that can be configured through Angular Material's color theming API. +@function get-color-tokens($config) { + $foreground: map.get($config, foreground); + $background: map.get($config, background); + + @return ( + container-text-color: theming.get-color-from-palette($foreground, text), + container-background-color: theming.get-color-from-palette($background, dialog), + ); +} + +// Tokens that can be configured through Angular Material's typography theming API. +@function get-typography-tokens($config) { + @return ( + container-text-font: typography-utils.font-family($config, body-1) or + typography-utils.font-family($config), + container-text-line-height: typography-utils.line-height($config, body-1), + container-text-size: typography-utils.font-size($config, body-1), + container-text-tracking: typography-utils.letter-spacing($config, body-1), + container-text-weight: typography-utils.font-weight($config, body-1), + ); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($config) { + @return (); +} + +// Combines the tokens generated by the above functions into a single map with placeholder values. +// This is used to create token slots. +@function get-token-slots() { + @return sass-utils.deep-merge-all( + get-unthemable-tokens(), + get-color-tokens(token-utils.$placeholder-color-config), + get-typography-tokens(token-utils.$placeholder-typography-config), + get-density-tokens(token-utils.$placeholder-density-config) + ); +}