refactor(material/divider): switch to tokens API

Author: behzadmehrabi

src/material/core/tokens/m2/mat/_divider.scss

@@ -0,0 +1,45 @@
+@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, divider);
+
+// 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 ();
+}
+
+// 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 (
+    line-color: theming.get-color-from-palette($foreground, divider)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// 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)
+  );
+}

src/material/divider/_divider-theme.scss

@@ -1,16 +1,15 @@
 @use 'sass:map';
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
 
-  .mat-divider {
-    border-top-color: theming.get-color-from-palette($foreground, divider);
-  }
-
-  .mat-divider-vertical {
-    border-right-color: theming.get-color-from-palette($foreground, divider);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-divider.$prefix,
+            tokens-mat-divider.get-color-tokens($config));
   }
 }
 

src/material/divider/divider.scss

@@ -1,3 +1,7 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
+
+
 $width: 1px;
 $inset-margin: 80px;
 
@@ -6,11 +10,15 @@ $inset-margin: 80px;
   margin: 0;
   border-top-width: $width;
   border-top-style: solid;
+  @include token-utils.use-tokens(tokens-mat-divider.$prefix, tokens-mat-divider.get-token-slots()) {
+    @include token-utils.create-token-slot(border-top-color, line-color);
 
-  &.mat-divider-vertical {
-    border-top: 0;
-    border-right-width: $width;
-    border-right-style: solid;
+    &.mat-divider-vertical {
+      border-top: 0;
+      border-right-width: $width;
+      border-right-style: solid;
+      @include token-utils.create-token-slot(border-right-color, line-color);
+    }
   }
 
   &.mat-divider-inset {