feat(form-field): Added theme styles to form field

PiperOrigin-RevId: 464479156

formfield/lib/_formfield-theme.scss

@@ -0,0 +1,41 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+$custom-property-prefix: 'formfield';
+
+$light-theme: (
+  label-text-color:
+    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
+  disabled-label-text-color:
+    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface-variant),
+);
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  @include theme.emit-theme-vars(
+    theme.create-theme-vars($theme, $custom-property-prefix)
+  );
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $prefix: $custom-property-prefix);
+
+  .md3-formfield__label {
+    color: map.get($theme, label-text-color);
+  }
+
+  &.md3-formfield--disabled .md3-formfield__label {
+    color: map.get($theme, disabled-label-text-color);
+  }
+}

formfield/lib/_formfield.scss

@@ -4,58 +4,37 @@
 //
 
 // stylelint-disable selector-class-pattern --
-// Selector '.mdc-*' should only be used in this project.
+// Selector '.md3-*' should only be used in this project.
 
 @mixin static-styles() {
   :host {
-    @include host-root;
+    display: inline-flex;
   }
 
-  .mdc-formfield {
-    @include root;
-
-    .mdc-formfield__label {
-      @include label;
-    }
+  .md3-formfield {
+    align-items: center;
+    display: inline-flex;
+    vertical-align: middle;
+    width: 100%;
   }
 
-  .mdc-formfield--align-end .mdc-formfield__label {
-    @include align-end;
+  .md3-formfield__label {
+    margin-inline: 0 auto;
+    order: 0;
+    padding-inline: 4px 0;
   }
 
-  .mdc-formfield--space-between {
-    @include space-between;
+  .md3-formfield--align-end .md3-formfield__label {
+    margin-inline: auto 0;
+    order: -1;
+    padding-inline: 0 4px;
   }
-}
-
-@mixin host-root() {
-  display: inline-flex;
-}
-
-@mixin root() {
-  align-items: center;
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-}
 
-@mixin label() {
-  margin-inline: 0 auto;
-  padding-inline: 4px 0;
-
-  order: 0;
-}
-@mixin align-end() {
-  margin-inline: auto 0;
-  padding-inline: 0 4px;
-
-  order: -1;
-}
-
-@mixin space-between() {
-  justify-content: space-between;
+  .md3-formfield--space-between {
+    justify-content: space-between;
+  }
 
-  .mdc-formfield__label {
+  .md3-formfield--space-between .md3-formfield__label {
     margin: 0;
   }
 }

formfield/lib/formfield-styles.scss

@@ -3,6 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
 @use './formfield';
+@use './formfield-theme';
 
 @include formfield.static-styles();
+
+.md3-formfield {
+  @include formfield-theme.theme-styles(formfield-theme.$light-theme);
+}

formfield/lib/formfield-base.ts → formfield/lib/formfield.ts

@@ -13,10 +13,9 @@ import {ifDefined} from 'lit/directives/if-defined';
 export class Formfield extends LitElement {
   @property({type: Boolean}) alignEnd = false;
   @property({type: Boolean}) spaceBetween = false;
-
   @property({type: String}) label = '';
-
   @property({type: String}) inputId?: string;
+  @property({type: Boolean}) disabled = false;
 
   @queryAssignedElements() protected slottedInputs!: HTMLElement[]|null;
 
@@ -27,9 +26,9 @@ export class Formfield extends LitElement {
   /** @soyTemplate */
   protected override render(): TemplateResult {
     return html`
-      <div class="mdc-formfield ${classMap(this.getRenderClasses())}">
+      <div class="md3-formfield ${classMap(this.getRenderClasses())}">
         <div><slot></slot></div>
-        <label class="mdc-formfield__label"
+        <label class="md3-formfield__label"
           for="${ifDefined(this.inputId)}"
           @click="${this.labelClick}">${this.label}</label>
       </div>`;
@@ -38,8 +37,9 @@ export class Formfield extends LitElement {
   /** @soyTemplate */
   protected getRenderClasses(): ClassInfo {
     return {
-      'mdc-formfield--align-end': this.alignEnd,
-      'mdc-formfield--space-between': this.spaceBetween,
+      'md3-formfield--align-end': this.alignEnd,
+      'md3-formfield--space-between': this.spaceBetween,
+      'md3-formfield--disabled': this.disabled,
     };
   }