@ng-matero/extensions 19.4.0 → 20.0.0

package/select/select.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/select' as tokens-mtx-select;
+@use './m3-select';
 
-$_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
+$fallbacks: m3-select.get-tokens();
 
 @mixin rtl {
   @at-root [dir='rtl'] #{&} {
@@ -11,269 +11,253 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
 }
 
 .ng-select {
-  @include token-utils.use-tokens($_tokens...) {
-    $filled-padding-top: var(--mat-form-field-filled-with-label-container-padding-top, 24px);
-    $filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);
-    $vertical-padding: var(--mat-form-field-container-vertical-padding, 16px);
-    $text-line-height: var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));
-
-    padding: $filled-padding-top 16px $filled-padding-bottom;
-    margin: calc($filled-padding-top * -1) -16px calc($filled-padding-bottom * -1);
-
-    .mdc-text-field--outlined &,
-    .mdc-text-field--no-label & {
-      padding-top: $vertical-padding;
-      padding-bottom: $vertical-padding;
-      margin-top: calc($vertical-padding * -1);
-      margin-bottom: calc($vertical-padding * -1);
-    }
-
-    .ng-select-container {
-      align-items: center;
-
-      @include token-utils.create-token-slot(color, container-text-color);
+  $filled-padding-top: var(--mat-form-field-filled-with-label-container-padding-top, 24px);
+  $filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);
+  $vertical-padding: var(--mat-form-field-container-vertical-padding, 16px);
+  $text-line-height: var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));
+
+  padding: $filled-padding-top 16px $filled-padding-bottom;
+  margin: calc($filled-padding-top * -1) -16px calc($filled-padding-bottom * -1);
+
+  .mdc-text-field--outlined &,
+  .mdc-text-field--no-label & {
+    padding-top: $vertical-padding;
+    padding-bottom: $vertical-padding;
+    margin-top: calc($vertical-padding * -1);
+    margin-bottom: calc($vertical-padding * -1);
+  }
 
-      .ng-value-container {
-        align-items: center;
-        gap: 4px;
+  .ng-select-container {
+    align-items: center;
+    color: token-utils.slot(select-container-text-color, $fallbacks);
 
-        .ng-input>input {
-          height: $text-line-height;
-          color: inherit;
-          font: inherit;
-        }
-      }
+    .ng-value-container {
+      align-items: center;
+      gap: 4px;
 
-      .ng-clear-wrapper {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 24px;
+      .ng-input > input {
         height: $text-line-height;
+        color: inherit;
+        font: inherit;
       }
     }
 
-    .ng-placeholder {
-      transition: opacity 200ms;
-      opacity: 1;
+    .ng-clear-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: $text-line-height;
+    }
+  }
 
-      @include token-utils.create-token-slot(color, placeholder-text-color);
+  .ng-placeholder {
+    transition: opacity 200ms;
+    opacity: 1;
+    color: token-utils.slot(select-placeholder-text-color, $fallbacks);
 
-      .mat-form-field-hide-placeholder & {
-        opacity: 0;
-      }
+    .mat-form-field-hide-placeholder & {
+      opacity: 0;
     }
+  }
 
-    .ng-has-value .ng-placeholder {
-      display: none;
-    }
+  .ng-has-value .ng-placeholder {
+    display: none;
+  }
 
-    .ng-clear-wrapper {
-      @include token-utils.create-token-slot(color, clear-icon-color);
+  .ng-clear-wrapper {
+    color: token-utils.slot(select-clear-icon-color, $fallbacks);
 
-      &:hover .ng-clear {
-        @include token-utils.create-token-slot(color, clear-icon-hover-color);
-      }
+    &:hover .ng-clear {
+      color: token-utils.slot(select-clear-icon-hover-color, $fallbacks);
     }
+  }
 
-    &.ng-select-disabled {
-      .ng-value {
-        @include token-utils.create-token-slot(color, disabled-text-color);
-      }
+  &.ng-select-disabled {
+    .ng-value {
+      color: token-utils.slot(select-disabled-text-color, $fallbacks);
     }
+  }
 
-    &.ng-select-opened {
-      .ng-arrow-wrapper .ng-arrow {
-        top: -2px;
-        border-width: 0 5px 5px;
-      }
+  &.ng-select-opened {
+    .ng-arrow-wrapper .ng-arrow {
+      top: -2px;
+      border-width: 0 5px 5px;
     }
+  }
 
-    &.ng-select-single {
-      &.ng-select-filtered .ng-placeholder {
-        display: initial;
-        visibility: hidden;
-      }
+  &.ng-select-single {
+    &.ng-select-filtered .ng-placeholder {
+      display: initial;
+      visibility: hidden;
     }
+  }
 
-    &.ng-select-multiple {
-      .ng-select-container .ng-value-container .ng-value {
-        display: inline-flex;
-        align-items: center;
-        height: $text-line-height;
-        padding: 0 calc(($text-line-height - 16px) / 2);
-        border-radius: 9999px;
-        font-size: .875em;
-
-        @include token-utils.create-token-slot(background-color, multiple-value-background-color);
-
-        $border-color: token-utils.get-token-variable(multiple-value-outline-color);
-
-        border: 1px solid $border-color;
-
-        &.ng-value-disabled {
-          opacity: .4;
-        }
+  &.ng-select-multiple {
+    .ng-select-container .ng-value-container .ng-value {
+      display: inline-flex;
+      align-items: center;
+      height: $text-line-height;
+      padding: 0 calc(($text-line-height - 16px) / 2);
+      border-radius: 9999px;
+      font-size: 0.875em;
+      background-color: token-utils.slot(select-multiple-value-background-color, $fallbacks);
+      border: 1px solid token-utils.slot(select-multiple-value-outline-color, $fallbacks);
+
+      &.ng-value-disabled {
+        opacity: 0.4;
+      }
 
-        .ng-value-label {
-          display: inline-block;
-          margin: 0 4px;
-          line-height: 16px;
-        }
+      .ng-value-label {
+        display: inline-block;
+        margin: 0 4px;
+        line-height: 16px;
+      }
 
-        .ng-value-icon {
-          width: 16px;
-          height: 16px;
-          line-height: 16px;
-          border-radius: 50%;
-          text-align: center;
+      .ng-value-icon {
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        border-radius: 50%;
+        text-align: center;
 
-          &:hover {
-            @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
-          }
+        &:hover {
+          background-color: token-utils.slot(select-multiple-value-icon-hover-background-color, $fallbacks);
         }
       }
-
-      &.ng-select-disabled .ng-select-container .ng-value-container .ng-value {
-        border-color: token-utils.get-token-variable(multiple-value-disabled-outline-color);
-      }
     }
 
-    .ng-arrow-wrapper {
-      width: 10px;
+    &.ng-select-disabled .ng-select-container .ng-value-container .ng-value {
+      border-color: token-utils.slot(select-multiple-value-disabled-outline-color, $fallbacks);
     }
+  }
 
-    $enabled-arrow-color: token-utils.get-token-variable(enabled-arrow-color);
-    $disabled-arrow-color: token-utils.get-token-variable(disabled-arrow-color);
-    $invalid-arrow-color: token-utils.get-token-variable(invalid-arrow-color);
+  .ng-arrow-wrapper {
+    width: 10px;
+  }
 
-    .ng-arrow {
-      border-width: 5px 5px 2px;
-      border-style: solid;
-      border-color: $enabled-arrow-color transparent transparent;
-    }
+  $enabled-arrow-color: token-utils.slot(select-enabled-arrow-color, $fallbacks);
+  $disabled-arrow-color: token-utils.slot(select-disabled-arrow-color, $fallbacks);
+  $invalid-arrow-color: token-utils.slot(select-invalid-arrow-color, $fallbacks);
 
-    &.ng-select-disabled .ng-arrow {
-      border-color: $disabled-arrow-color transparent transparent;
-    }
+  .ng-arrow {
+    border-width: 5px 5px 2px;
+    border-style: solid;
+    border-color: $enabled-arrow-color transparent transparent;
+  }
 
-    &.ng-select-invalid .ng-arrow {
-      border-color: $invalid-arrow-color transparent transparent;
-    }
+  &.ng-select-disabled .ng-arrow {
+    border-color: $disabled-arrow-color transparent transparent;
+  }
 
-    &.ng-select-opened .ng-arrow {
-      border-color: transparent transparent $enabled-arrow-color;
-    }
+  &.ng-select-invalid .ng-arrow {
+    border-color: $invalid-arrow-color transparent transparent;
+  }
 
-    &.ng-select-opened.ng-select-invalid .ng-arrow {
-      border-color: transparent transparent $invalid-arrow-color;
-    }
+  &.ng-select-opened .ng-arrow {
+    border-color: transparent transparent $enabled-arrow-color;
+  }
+
+  &.ng-select-opened.ng-select-invalid .ng-arrow {
+    border-color: transparent transparent $invalid-arrow-color;
   }
 }
 
 .ng-dropdown-panel {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, panel-background-color);
+  background-color: token-utils.slot(select-panel-background-color, $fallbacks);
 
-    &.ng-select-bottom {
-      top: 100%;
+  &.ng-select-bottom {
+    top: 100%;
+    border-bottom-left-radius: token-utils.slot(select-container-shape, $fallbacks);
+    border-bottom-right-radius: token-utils.slot(select-container-shape, $fallbacks);
+    box-shadow: token-utils.slot(select-container-elevation-shadow, $fallbacks);
+  }
 
-      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-      @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-    }
+  &.ng-select-top {
+    bottom: 100%;
+    border-top-left-radius: token-utils.slot(select-container-shape, $fallbacks);
+    border-top-right-radius: token-utils.slot(select-container-shape, $fallbacks);
+    box-shadow: token-utils.slot(select-container-elevation-shadow, $fallbacks);
+  }
 
-    &.ng-select-top {
-      bottom: 100%;
+  .ng-dropdown-header,
+  .ng-dropdown-footer {
+    padding: 14px 16px;
+  }
 
-      @include token-utils.create-token-slot(border-top-left-radius, container-shape);
-      @include token-utils.create-token-slot(border-top-right-radius, container-shape);
-      @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-    }
+  .ng-dropdown-header {
+    border-bottom: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
+  }
+
+  .ng-dropdown-footer {
+    border-top: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
+  }
 
-    .ng-dropdown-header,
-    .ng-dropdown-footer {
+  .ng-dropdown-panel-items {
+    .ng-optgroup {
       padding: 14px 16px;
-    }
+      font-weight: 500;
+      user-select: none;
+      cursor: pointer;
+      color: token-utils.slot(select-optgroup-label-text-color, $fallbacks);
 
-    $border-color: token-utils.get-token-variable(panel-divider-color);
+      &.ng-option-disabled {
+        cursor: default;
+      }
 
-    .ng-dropdown-header {
-      border-bottom: 1px solid $border-color;
-    }
+      &.ng-option-marked {
+        background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
+      }
 
-    .ng-dropdown-footer {
-      border-top: 1px solid $border-color;
+      &.ng-option-selected {
+        background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
+        color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
+      }
     }
 
-    .ng-dropdown-panel-items {
-      .ng-optgroup {
-        padding: 14px 16px;
-        font-weight: 500;
-        user-select: none;
-        cursor: pointer;
-
-        @include token-utils.create-token-slot(color, optgroup-label-text-color);
-
-        &.ng-option-disabled {
-          cursor: default;
-        }
-
-        &.ng-option-marked {
-          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
-        }
-
-        &.ng-option-selected {
-          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
-          @include token-utils.create-token-slot(color, option-selected-state-text-color);
-        }
+    .ng-option {
+      position: relative;
+      padding: 14px 16px;
+      text-overflow: ellipsis;
+      text-decoration: none;
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      color: token-utils.slot(select-option-label-text-color, $fallbacks);
+
+      &.ng-option-marked {
+        background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
       }
 
-      .ng-option {
-        position: relative;
-        padding: 14px 16px;
-        text-overflow: ellipsis;
-        text-decoration: none;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-
-        @include token-utils.create-token-slot(color, option-label-text-color);
+      &.ng-option-selected {
+        background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
+        color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
+      }
 
-        &.ng-option-marked {
-          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
-        }
+      &.ng-option-disabled {
+        color: token-utils.slot(select-option-disabled-state-text-color, $fallbacks);
+      }
 
-        &.ng-option-selected {
-          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
-          @include token-utils.create-token-slot(color, option-selected-state-text-color);
-        }
+      @include rtl {
+        text-align: right;
+      }
 
-        &.ng-option-disabled {
-          @include token-utils.create-token-slot(color, option-disabled-state-text-color);
-        }
+      &.ng-option-child {
+        padding-left: 32px;
 
         @include rtl {
-          text-align: right;
-        }
-
-        &.ng-option-child {
-          padding-left: 32px;
-
-          @include rtl {
-            padding-right: 32px;
-            padding-left: 0;
-          }
+          padding-right: 32px;
+          padding-left: 0;
         }
+      }
 
-        .ng-tag-label {
-          margin-right: 6px;
-          font-size: 80%;
+      .ng-tag-label {
+        margin-right: 6px;
+        font-size: 80%;
 
-          @include rtl {
-            margin-left: 6px;
-            margin-right: 0;
-          }
+        @include rtl {
+          margin-left: 6px;
+          margin-right: 0;
         }
       }
     }

package/{core/tokens/m2/mtx/_split.scss → split/_m2-split.scss}

@@ -2,14 +2,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@angular/material' as mat;
-@use '../../token-definition';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mtx, split);
+@use '../core/tokens/m2-utils';
 
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    gutter-hover-state-background-color: mat.get-theme-color($theme, $palette-name, text),
+    split-gutter-hover-state-background-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
@@ -24,7 +21,7 @@ $prefix: (mtx, split);
   $gutter-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return mat.private-merge-all($gutter-tokens, (
-    gutter-background-color: mat.get-theme-color($theme, foreground, divider),
+    split-gutter-background-color: mat.get-theme-color($theme, foreground, divider),
   ));
 }
 
@@ -43,8 +40,8 @@ $prefix: (mtx, split);
 @function get-token-slots() {
   @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/split/_m3-split.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-split.
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  $tokens: (
+    base: (),
+    color: (
+      split-gutter-background-color: map.get($system, outline-variant),
+      split-gutter-hover-state-background-color: map.get($system, primary),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/split/_split-theme.scss

@@ -1,45 +1,38 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/split' as tokens-mtx-split;
+@use './m2-split';
+@use './m3-split';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-split.$prefix,
-        tokens-mtx-split.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-split.get-unthemable-tokens());
     }
   }
 }
 
-@mixin color($theme, $options...) {
+@mixin color($theme, $color-variant: null) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme, $color-variant), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-split.$prefix,
-        tokens-mtx-split.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-split.get-color-tokens($theme));
     }
 
     .mtx-split>.mtx-split-gutter {
       &.mat-accent:hover {
-        $accent-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values(tokens-mtx-split.$prefix, $accent-tokens);
+        $accent-tokens: m2-split.private-get-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed($accent-tokens);
       }
 
       &.mat-warn:hover {
-        $warn-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values(tokens-mtx-split.$prefix, $warn-tokens);
+        $warn-tokens: m2-split.private-get-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed($warn-tokens);
       }
     }
   }
@@ -47,36 +40,47 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-split.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-split.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-split.$prefix,
-      tokens: tokens-mtx-split.get-token-slots(),
+      namespace: split,
+      tokens: token-utils.get-overrides(m3-split.get-tokens(), split),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
-@mixin theme($theme, $options...) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-split') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -92,10 +96,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  $mtx-split-tokens: token-utils.get-tokens-for($tokens, tokens-mtx-split.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mtx-split.$prefix, $mtx-split-tokens);
-}