@ng-matero/extensions 19.3.3 → 20.0.0

package/grid/column-resize/_column-resize.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../core/tokens/token-utils';
-@use '../../core/tokens/m2/mtx/grid' as tokens-mtx-grid;
+@use '../m3-grid';
 
-$_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
+$fallbacks: m3-grid.get-tokens();
 
 // Required for resizing to work properly.
 .mat-column-resize-table.cdk-column-resize-with-resized-column {
@@ -34,7 +34,8 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   right: 0;
   width: 1px;
   background: transparent;
-  transition: background mat.$private-swift-ease-in-duration mat.$private-swift-ease-in-timing-function;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
 }
 
 .mat-mdc-header-cell:not(.mat-resizable)::after {
@@ -61,18 +62,16 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     border-right: none;
   }
 
-  @include token-utils.use-tokens($_tokens...) {
-    .mat-mdc-header-cell:not(.mat-resizable)::after {
-      @include token-utils.create-token-slot(background-color, resizable-handle-disabled-background-color);
-    }
+  .mat-mdc-header-cell:not(.mat-resizable)::after {
+    background-color: token-utils.slot(grid-resizable-handle-disabled-background-color, $fallbacks);
+  }
 
-    .mat-resizable-handle {
-      @include token-utils.create-token-slot(background-color, resizable-handle-hover-background-color);
-    }
+  .mat-resizable-handle {
+    background-color: token-utils.slot(grid-resizable-handle-hover-background-color, $fallbacks);
   }
 }
 
-.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle {
+.mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
   opacity: 0;
   transition: none;
 }
@@ -80,10 +79,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 .mat-resizable-handle:focus,
 .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
   outline: none;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, resizable-handle-active-background-color);
-  }
+  background-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
 }
 
 .mat-column-resize-overlay-thumb {
@@ -91,27 +87,36 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   cursor: col-resize;
   width: 100%;
   height: 100%;
-  transition: background mat.$private-swift-ease-in-duration mat.$private-swift-ease-in-timing-function;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
 
   @include mat.private-user-select(none);
 
   &:active {
     will-change: transform;
 
-    @include token-utils.use-tokens($_tokens...) {
-      $background-color: token-utils.get-token-variable(resizable-handle-active-background-color);
-
-      background: linear-gradient(90deg,
-          transparent, transparent 7px,
-          $background-color 7px, $background-color 9px,
-          transparent 9px, transparent);
-
-      .mat-column-resize-overlay-thumb-top {
-        background: linear-gradient(90deg,
-            transparent, transparent 4px,
-            $background-color 4px, $background-color 12px,
-            transparent 12px, transparent);
-      }
+    $bg-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
+
+    background: linear-gradient(
+      90deg,
+      transparent,
+      transparent 7px,
+      $bg-color 7px,
+      $bg-color 9px,
+      transparent 9px,
+      transparent
+    );
+
+    .mat-column-resize-overlay-thumb-top {
+      background: linear-gradient(
+        90deg,
+        transparent,
+        transparent 4px,
+        $bg-color 4px,
+        $bg-color 12px,
+        transparent 12px,
+        transparent
+      );
     }
   }
 }

package/grid/grid.scss

@@ -1,7 +1,7 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/grid' as tokens-mtx-grid;
+@use './m3-grid';
 
-$_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
+$fallbacks: m3-grid.get-tokens();
 
 .mtx-grid {
   position: relative;
@@ -9,40 +9,32 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   flex-direction: column;
   width: 100%;
   overflow: hidden;
+  border: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+  border-radius: token-utils.slot(grid-container-shape, $fallbacks);
 
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(outline-color);
+  .mat-mdc-table {
+    --mat-table-row-item-outline-color: #{token-utils.slot(grid-outline-color, $fallbacks)};
 
-    border: 1px solid $border-color;
-
-    @include token-utils.create-token-slot(border-radius, container-shape);
-
-    .mat-mdc-table {
-      --mat-table-row-item-outline-color: #{$border-color};
-
-      &.mat-table-striped .mat-row-odd {
-        @include token-utils.create-token-slot(background-color, table-row-striped-background-color);
-      }
-
-      &.mat-table-hover {
-        .mat-mdc-row:hover {
-          @include token-utils.create-token-slot(background-color, table-row-hover-background-color);
-        }
+    &.mat-table-striped .mat-row-odd {
+      background-color: token-utils.slot(grid-table-row-striped-background-color, $fallbacks);
+    }
 
-        .mat-mdc-row.selected:hover {
-          @include token-utils.create-token-slot(background-color, table-row-selected-hover-background-color);
-        }
+    &.mat-table-hover {
+      .mat-mdc-row:hover {
+        background-color: token-utils.slot(grid-table-row-hover-background-color, $fallbacks);
       }
 
-      .mat-mdc-row.selected {
-        @include token-utils.create-token-slot(background-color, table-row-selected-background-color);
+      .mat-mdc-row.selected:hover {
+        background-color: token-utils.slot(grid-table-row-selected-hover-background-color, $fallbacks);
       }
+    }
 
-      .mat-mdc-cell.selected {
-        $shadow-color: token-utils.get-token-variable(table-cell-selected-outline-color);
+    .mat-mdc-row.selected {
+      background-color: token-utils.slot(grid-table-row-selected-background-color, $fallbacks);
+    }
 
-        box-shadow: inset 0 0 0 1px $shadow-color;
-      }
+    .mat-mdc-cell.selected {
+      box-shadow: inset 0 0 0 1px token-utils.slot(grid-table-cell-selected-outline-color, $fallbacks);
     }
   }
 
@@ -62,9 +54,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     .mat-mdc-footer-cell,
     .mat-mdc-cell {
       &:not(.mtx-grid-checkbox-cell) {
-        @include token-utils.use-tokens($_tokens...) {
-          @include token-utils.create-token-slot(min-width, table-cell-min-width);
-        }
+        min-width: token-utils.slot(grid-table-cell-min-width, $fallbacks);
       }
     }
   }
@@ -89,10 +79,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
   .mat-mdc-footer-cell {
     border-top: 1px solid var(--mat-table-row-item-outline-color);
-
-    @include token-utils.use-tokens($_tokens...) {
-      @include token-utils.create-token-slot(background-color, table-footer-background-color);
-    }
+    background-color: token-utils.slot(grid-table-footer-background-color, $fallbacks);
   }
 
   .mat-mdc-row.mtx-grid-expansion {
@@ -125,14 +112,9 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   }
 
   .mat-mdc-paginator {
-    @include token-utils.use-tokens($_tokens...) {
-      $border-color: token-utils.get-token-variable(outline-color);
-
-      border-top: 1px solid $border-color;
-
-      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-    }
+    border-top: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+    border-bottom-left-radius: token-utils.slot(grid-container-shape, $fallbacks);
+    border-bottom-right-radius: token-utils.slot(grid-container-shape, $fallbacks);
   }
 
   .mat-paginator-hidden {
@@ -142,7 +124,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   .mtx-grid-checkbox-cell {
     width: 60px;
     min-width: 60px;
-    padding: 0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2);
+    padding: 0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2);
   }
 }
 
@@ -160,12 +142,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   min-height: var(--mat-table-header-container-height, 56px);
   padding: 8px;
   box-sizing: border-box;
-
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(outline-color);
-
-    border-bottom: 1px solid $border-color;
-  }
+  border-bottom: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
 }
 
 .mtx-grid-toolbar-content {
@@ -187,16 +164,11 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
 .mtx-grid-sidebar {
   max-width: 50%;
+  border-left: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
 
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(outline-color);
-
-    border-left: 1px solid $border-color;
-
-    [dir='rtl'] & {
-      border-left-width: 0;
-      border-right: 1px solid $border-color;
-    }
+  [dir='rtl'] & {
+    border-left-width: 0;
+    border-right: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
   }
 }
 
@@ -211,12 +183,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   min-height: var(--mat-table-header-container-height, 56px);
   padding: 8px;
   box-sizing: border-box;
-
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(outline-color);
-
-    border-top: 1px solid $border-color;
-  }
+  border-top: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
 }
 
 .mtx-grid-no-result {
@@ -230,13 +197,14 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 .mtx-grid-expansion-placeholder {
   display: inline-block;
   vertical-align: middle;
-
-  @include token-utils.use-tokens($_tokens...) {
-    $compat-size: token-utils.get-token-variable(row-expand-button-size, 40px);
-
-    width: var(--mdc-icon-button-state-layer-size, $compat-size);
-    height: var(--mdc-icon-button-state-layer-size, $compat-size);
-  }
+  width: var(
+    --mat-icon-button-state-layer-size,
+    token-utils.slot(grid-row-expand-button-size, $fallbacks)
+  );
+  height: var(
+    --mat-icon-button-state-layer-size,
+    token-utils.slot(grid-row-expand-button-size, $fallbacks)
+  );
 }
 
 .mtx-grid-expansion-detail-wrapper {
@@ -266,7 +234,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   }
 
   &.mat-mdc-icon-button,
-  +mtx-grid-cell {
+  + mtx-grid-cell {
     vertical-align: middle;
   }
 }