From cc02ea8fec8c5a93586e2a41ec1761447f86b035 Mon Sep 17 00:00:00 2001
From: Behzad Mehrabi <bezMehrabi@gmail.com>
Date: Fri, 21 Jul 2023 19:20:29 +0330
Subject: [PATCH] refactor(material/divider): switch to tokens API (#27478)

---
 src/material/core/tokens/m2/mat/_divider.scss | 45 +++++++++++++++++++
 src/material/divider/BUILD.bazel              |  4 ++
 src/material/divider/_divider-theme.scss      | 14 +++---
 src/material/divider/divider.scss             | 23 +++++++---
 4 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 src/material/core/tokens/m2/mat/_divider.scss

diff --git a/src/material/core/tokens/m2/mat/_divider.scss b/src/material/core/tokens/m2/mat/_divider.scss
new file mode 100644
index 000000000000..ee30de54a6e3
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_divider.scss
@@ -0,0 +1,45 @@
+@use 'sass:map';
+@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: (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 (
+    width: 1px
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+
+  @return (
+    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)
+  );
+}
diff --git a/src/material/divider/BUILD.bazel b/src/material/divider/BUILD.bazel
index 3cb47b3bcb48..ee9d2e5fa678 100644
--- a/src/material/divider/BUILD.bazel
+++ b/src/material/divider/BUILD.bazel
@@ -33,6 +33,10 @@ sass_library(
 sass_binary(
     name = "divider_scss",
     src = "divider.scss",
+    deps = [
+        ":divider_scss_lib",
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 ng_test_library(
diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss
index 520b22554723..3ee3d0680ff5 100644
--- a/src/material/divider/_divider-theme.scss
+++ b/src/material/divider/_divider-theme.scss
@@ -1,16 +1,14 @@
-@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));
   }
 }
 
diff --git a/src/material/divider/divider.scss b/src/material/divider/divider.scss
index 4fb1e3d89ce8..3b0b66f252b5 100644
--- a/src/material/divider/divider.scss
+++ b/src/material/divider/divider.scss
@@ -1,16 +1,27 @@
-$width: 1px;
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
+
+
 $inset-margin: 80px;
 
 .mat-divider {
+  @include token-utils.create-token-values(
+    tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
+
   display: block;
   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, color);
+    @include token-utils.create-token-slot(border-top-width, width);
 
-  &.mat-divider-vertical {
-    border-top: 0;
-    border-right-width: $width;
-    border-right-style: solid;
+    &.mat-divider-vertical {
+      border-top: 0;
+      border-right-style: solid;
+      @include token-utils.create-token-slot(border-right-color, color);
+      @include token-utils.create-token-slot(border-right-width, width);
+    }
   }
 
   &.mat-divider-inset {