From 0327283b7b0da6174a255b3e1434354ac360ab52 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 15 Dec 2022 15:45:44 -0800
Subject: [PATCH] feat(icon): Implement tokens for md-icon

Adds tokens for color, size, font-family, font-weight and font-variation-settings.

Slotted svg icons will also be sized and colored with the tokens.

PiperOrigin-RevId: 495716570
---
 icon/_icon.scss             |  6 +++++
 icon/lib/_icon.scss         | 54 +++++++++++++++++++++++++++++++++++++
 icon/lib/_md-comp-icon.scss | 19 +++++++++++++
 icon/lib/icon-styles.scss   | 21 ++-------------
 4 files changed, 81 insertions(+), 19 deletions(-)
 create mode 100644 icon/_icon.scss
 create mode 100644 icon/lib/_icon.scss
 create mode 100644 icon/lib/_md-comp-icon.scss

diff --git a/icon/_icon.scss b/icon/_icon.scss
new file mode 100644
index 0000000000..14f769838f
--- /dev/null
+++ b/icon/_icon.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/icon' show theme;
diff --git a/icon/lib/_icon.scss b/icon/lib/_icon.scss
new file mode 100644
index 0000000000..bb661b807f
--- /dev/null
+++ b/icon/lib/_icon.scss
@@ -0,0 +1,54 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use '../../sass/theme';
+@use './md-comp-icon';
+
+$_custom-property-prefix: 'icon';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(md-comp-icon.values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-icon.values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    display: inline-flex;
+    color: var(--_color);
+    font-family: var(--_font);
+    font-weight: var(--_weight);
+    font-style: normal;
+    font-size: var(--_size);
+    font-variation-settings: var(--_font-varation-settings);
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  span ::slotted(svg) {
+    fill: currentColor;
+    height: var(--_size);
+    width: var(--_size);
+  }
+}
diff --git a/icon/lib/_md-comp-icon.scss b/icon/lib/_md-comp-icon.scss
new file mode 100644
index 0000000000..09f3ff7fdb
--- /dev/null
+++ b/icon/lib/_md-comp-icon.scss
@@ -0,0 +1,19 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@function values($exclude-hardcoded-values: false) {
+  $values: (
+    (
+      color: if($exclude-hardcoded-values, null, inherit),
+      // TODO(b/225384738): Change to 'Material Symbols Outlined'
+      font: if($exclude-hardcoded-values, null, 'Material Icons'),
+      font-variation-settings: if($exclude-hardcoded-values, null, inherit),
+      size: if($exclude-hardcoded-values, null, 24px),
+      weight: if($exclude-hardcoded-values, null, 400),
+    )
+  );
+
+  @return $values;
+}
diff --git a/icon/lib/icon-styles.scss b/icon/lib/icon-styles.scss
index da8f9d747a..c07b122505 100644
--- a/icon/lib/icon-styles.scss
+++ b/icon/lib/icon-styles.scss
@@ -3,23 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-:host {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
+@use './icon';
 
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-}
+@include icon.styles;