feat(button): outlined button styles w/ dedicated outline node

PiperOrigin-RevId: 397829718

Author: allan-chen

components/button/lib/_button.scss

@@ -66,7 +66,6 @@
   vertical-align: middle;
   background: transparent;
   text-decoration: none;
-  transition: elevation-theme.transition-value();
 
   &::-moz-focus-inner {
     padding: 0;

components/button/lib/_outlined-button-theme.scss

@@ -4,4 +4,76 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
+@use '@material/shape/shape';
+@use '@material/theme/state';
+
+@use './button-theme';
+
+$_selectors: button-theme.$selectors;
+
 /// TODO: variant-specific theme + theme styles mixins.
+
+@mixin _shape-radius($radius) {
+  .mdc-button__outline {
+    @include shape.radius($radius);
+  }
+}
+
+@mixin _outline-color($colors) {
+  @include state.default($_selectors) {
+    @include _set-outline-color(state.get-default-state($colors));
+  }
+
+  @include state.hover($_selectors) {
+    @include _set-outline-color(state.get-hover-state($colors));
+  }
+
+  @include state.focus($_selectors) {
+    @include _set-outline-color(state.get-focus-state($colors));
+  }
+
+  @include state.pressed($_selectors) {
+    @include _set-outline-color(state.get-pressed-state($colors));
+  }
+
+  @include state.disabled($_selectors) {
+    @include _set-outline-color(state.get-disabled-state($colors));
+  }
+}
+
+@mixin _set-outline-color($color) {
+  .mdc-button__outline {
+    @include theme.property(border-color, $color);
+  }
+}
+
+@mixin _outline-width($widths) {
+  @include state.default($_selectors) {
+    @include _set-outline-width(state.get-default-state($widths));
+  }
+
+  @include state.hover($_selectors) {
+    @include _set-outline-width(state.get-hover-state($widths));
+  }
+
+  @include state.focus($_selectors) {
+    @include _set-outline-width(state.get-focus-state($widths));
+  }
+
+  @include state.pressed($_selectors) {
+    @include _set-outline-width(state.get-pressed-state($widths));
+  }
+
+  @include state.disabled($_selectors) {
+    @include _set-outline-width(state.get-disabled-state($widths));
+  }
+}
+
+@mixin _set-outline-width($width) {
+  .mdc-button__outline {
+    @include theme.property(border-width, $width);
+  }
+}

components/button/lib/_outlined-button.scss

@@ -4,4 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/// TODO: variant-specific static styles.
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
+@mixin static-styles() {
+  .mdc-button__outline {
+    @include outline;
+  }
+}
+
+@mixin outline() {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  box-sizing: border-box;
+}

components/button/lib/outlined-styles.scss

@@ -4,4 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/// TODO: variant-specific concrete styles.
+@use './outlined-button';
+
+@include outlined-button.static-styles;
+
+/// TODO: variant-specific theme styles.