@ng-matero/extensions 16.3.0 → 17.0.0

package/core/tokens/m2/mtx/_select.scss

@@ -1,57 +1,56 @@
 @use 'sass:map';
+@use 'sass:math';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
+@use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
 
 // Generates the tokens used to theme the option based on a palette.
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    option-selected-state-text-color: theming.get-color-from-palette($palette),
+    option-selected-state-text-color: mat.get-theme-color($theme, $palette-name),
   );
 }
 
 // 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 ();
+  @return (
+    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);
-  $primary: map.get($config, primary);
-  $warn: map.get($config, warn);
-  $text-color: theming.get-color-from-palette($foreground, text);
-  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
-  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
-  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
-  $divider-color: theming.get-color-from-palette($foreground, divider);
-  $hover-color: theming.get-color-from-palette($background, hover);
-  $palette-tokens: private-get-color-palette-color-tokens($config, primary);
+@function get-color-tokens($theme) {
+  $text-color: mat.get-theme-color($theme, foreground, text);
+  $hint-text-color: mat.get-theme-color($theme, foreground, hint-text);
+  $secondary-text-color: mat.get-theme-color($theme, foreground, secondary-text);
+  $disabled-text-color: mat.get-theme-color($theme, foreground, disabled-text);
+  $divider-color: mat.get-theme-color($theme, foreground, divider);
+  $hover-color: mat.get-theme-color($theme, background, hover);
+  $palette-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge($palette-tokens, (
     container-text-color: $text-color,
     placeholder-text-color: $hint-text-color,
     disabled-text-color: $hint-text-color,
 
-    multiple-value-background-color: theming.get-color-from-palette($background, unselected-chip),
+    multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
     multiple-value-border-color: $divider-color,
     multiple-value-icon-hover-background-color: $divider-color,
 
     clear-icon-color: $secondary-text-color,
-    clear-icon-hover-color: theming.get-color-from-palette($warn),
+    clear-icon-hover-color: mat.get-theme-color($theme, warn),
 
     enabled-arrow-color: $secondary-text-color,
     disabled-arrow-color: $disabled-text-color,
-    invalid-arrow-color: theming.get-color-from-palette($warn),
+    invalid-arrow-color: mat.get-theme-color($theme, warn),
 
-    panel-background-color: theming.get-color-from-palette($background, card),
+    panel-background-color: mat.get-theme-color($theme, background, card),
     panel-divider-color: $divider-color,
     optgroup-label-text-color: $secondary-text-color,
     option-label-text-color: $text-color,
@@ -62,13 +61,54 @@ $prefix: (mtx, select);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  @return ();
+@function get-density-tokens($theme) {
+  $density-scale: mat.private-clamp-density(mat.get-theme-density($theme), -4);
+  $height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
+    $density-scale: mat.get-theme-density($theme),
+    $property-name: height,
+  );
+  $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
+
+  // We computed the desired height of the form-field using the density configuration. The
+  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
+  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
+  // determine the height reduction and equally subtract it from the default `top` and `bottom`
+  // padding that is provided by the Material Design specification.
+  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
+
+  // Note: these calculations are trivial enough that we could do them at runtime with `calc`
+  // and the value of the `height` token. The problem is that because we need to hide the label
+  // if the container becomes too short, we have to change the padding calculation. This is
+  // complicated further by the fact that filled form fields without labels have the same
+  // vertical padding as outlined ones. Alternatives:
+  // 1. Using container queries to hide the label and change the padding - this doesn't work
+  // because size container queries require setting the `container-type` property which breaks
+  // the form field layout. We could use style queries, but they're only supported in Chrome.
+  // 2. Monitoring the size of the label - we already have a `ResizeObserver` on the label so we
+  // could reuse it to also check when it becomes `display: none`. This would allows us to remove
+  // the three padding tokens. We don't do it, because it would require us to always set up
+  // the resize observer, as opposed to currently where it's only set up for outlined form fields.
+  // This may lead to performance regressions.
+  // 3. Conditionally adding `::before` and `::after` to the infix with positive and negative
+  // margin respectively - this works, but is likely to break a lot of overrides that are targeting
+  // a specific padding. It also runs the risk of overflowing the container.
+  // TODO: switch the padding tokens to style-based container queries
+  // when they become available in all the browsers we support.
+  $filled-with-label-padding: 24px - $vertical-deduction;
+  $filled-with-label-padding-bottom: 8px - $vertical-deduction;
+  $vertical-padding: 16px - $vertical-deduction;
+
+  @return (
+    vertical-padding: $vertical-padding,
+    filled-padding-top: if($hide-label, $vertical-padding, $filled-with-label-padding),
+    filled-padding-bottom: if($hide-label, $vertical-padding, $filled-with-label-padding-bottom),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mtx/_split.scss

@@ -1,18 +1,16 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use '@angular/material' as mat;
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, split);
 
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    gutter-hover-state-background-color: theming.get-color-from-palette($palette, text),
+    gutter-hover-state-background-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
@@ -23,22 +21,21 @@ $prefix: (mtx, split);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $gutter-tokens: private-get-color-palette-color-tokens($config, primary);
+@function get-color-tokens($theme) {
+  $gutter-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return sass-utils.merge-all($gutter-tokens, (
-    gutter-background-color: theming.get-color-from-palette($foreground, divider, .12),
+    gutter-background-color: mat.get-theme-color($theme, foreground, divider),
   ));
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/typography/_all-typography.scss

@@ -0,0 +1,40 @@
+@use './typography';
+@use '../theming/inspection';
+@use '../../alert/alert-theme';
+@use '../../button/button-theme';
+@use '../../colorpicker/colorpicker-theme';
+@use '../../datetimepicker/datetimepicker-theme';
+@use '../../drawer/drawer-theme';
+@use '../../grid/grid-theme';
+@use '../../loader/loader-theme';
+@use '../../popover/popover-theme';
+@use '../../progress/progress-theme';
+@use '../../select/select-theme';
+@use '../../split/split-theme';
+@use '../../tooltip/tooltip-theme';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($theme: null) {
+  // If no actual color configuration has been specified, create a default one.
+  @if not inspection.theme-has($theme, typography) {
+    $theme: typography.define-typography-config();
+  }
+
+  @include alert-theme.typography($theme);
+  @include button-theme.typography($theme);
+  @include colorpicker-theme.typography($theme);
+  @include datetimepicker-theme.typography($theme);
+  @include drawer-theme.typography($theme);
+  @include grid-theme.typography($theme);
+  @include loader-theme.typography($theme);
+  @include popover-theme.typography($theme);
+  @include progress-theme.typography($theme);
+  @include select-theme.typography($theme);
+  @include split-theme.typography($theme);
+  @include tooltip-theme.typography($theme);
+}
+
+// @deprecated Use `all-component-typographies`.
+@mixin material-extensions-typography($theme: null) {
+  @include all-component-typographies($theme);
+}