diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss index 22f40ac3e8c9..a7bc40b04a12 100644 --- a/src/material/badge/badge.scss +++ b/src/material/badge/badge.scss @@ -22,11 +22,11 @@ $large-size: $default-size + 6; // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to // grow with the content. - width: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset); - height: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset); - min-width: token-utils.get-token-variable($size-var-name, $fallback: unset); - min-height: token-utils.get-token-variable($size-var-name, $fallback: unset); - line-height: token-utils.get-token-variable($legacy-size-var-name); + @include token-utils.create-token-slot(width, $legacy-size-var-name); + @include token-utils.create-token-slot(height, $legacy-size-var-name); + @include token-utils.create-token-slot(min-width, $size-var-name); + @include token-utils.create-token-slot(min-height, $size-var-name); + @include token-utils.create-token-slot(line-height, '#{$prefix}line-height'); @include token-utils.create-token-slot(padding, '#{$prefix}container-padding'); @include token-utils.create-token-slot(font-size, '#{$prefix}text-size'); @include token-utils.create-token-slot(margin, '#{$prefix}container-offset'); diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/core/tokens/m2/mat/_badge.scss index 56f7e64c38fb..8e93f5750345 100644 --- a/src/material/core/tokens/m2/mat/_badge.scss +++ b/src/material/core/tokens/m2/mat/_badge.scss @@ -6,15 +6,19 @@ @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +$_default-size: 22px; +$_small-size: $_default-size - 6px; +$_large-size: $_default-size + 6px; + // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, badge); // 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() { - $default-size: 22px; - $small-size: $default-size - 6; - $large-size: $default-size + 6; + $default-size: $_default-size; + $small-size: $_small-size; + $large-size: $_large-size; @return ( container-shape: 50%, @@ -77,10 +81,15 @@ $prefix: (mat, badge); @return ( text-font: inspection.get-theme-typography($theme, body-2, font-family), + line-height: $_default-size, text-size: $base-size, text-weight: 600, + small-size-text-size: $base-size * 0.75, + small-size-line-height: $_small-size, + large-size-text-size: $base-size * 2, + large-size-line-height: $_large-size, ); } diff --git a/src/material/core/tokens/m3/mat/_badge.scss b/src/material/core/tokens/m3/mat/_badge.scss index 9ebf1ec3f8a9..65be1ae562a4 100644 --- a/src/material/core/tokens/m3/mat/_badge.scss +++ b/src/material/core/tokens/m3/mat/_badge.scss @@ -25,9 +25,11 @@ $prefix: (mat, badge); small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded), container-shape: map.get($systems, md-sys-shape, corner-full), container-size: token-definition.hardcode(16px, $exclude-hardcoded), - legacy-container-size: token-definition.hardcode(16px, $exclude-hardcoded), - legacy-small-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded), + line-height: token-definition.hardcode(16px, $exclude-hardcoded), + legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded), + legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded), small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded), + small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded), container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded), small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded), container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded), @@ -37,11 +39,12 @@ $prefix: (mat, badge); // This size isn't in the M3 spec so we emit the same values as for `medium`. large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded), + large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded), large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded), large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded), large-size-text-size: map.get($systems, md-sys-typescale, label-small-size), large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded), - legacy-large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded), + legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded), ), ( primary: ( background-color: map.get($systems, md-sys-color, primary),