From 52b972d2a5e1c7845e6f5b41039f4071103ab075 Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Tue, 10 Sep 2024 08:38:19 -0700
Subject: [PATCH] feat(field): add token to set background of md-outlined-field

PiperOrigin-RevId: 672978449
---
 field/internal/_filled-field.scss   | 13 -------------
 field/internal/_shared.scss         | 13 +++++++++++++
 field/internal/field.ts             |  5 +++--
 field/internal/filled-field.ts      |  3 +--
 tokens/_md-comp-outlined-field.scss |  8 ++++++++
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/field/internal/_filled-field.scss b/field/internal/_filled-field.scss
index c7a2fea42e..c929ae61f0 100644
--- a/field/internal/_filled-field.scss
+++ b/field/internal/_filled-field.scss
@@ -52,19 +52,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       }
     }
 
-    .background,
     .state-layer {
       border-radius: inherit;
       inset: 0;
       pointer-events: none;
       position: absolute;
-    }
-
-    .background {
-      background: var(--_container-color);
-    }
-
-    .state-layer {
       visibility: hidden;
     }
 
@@ -161,11 +153,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       opacity: var(--_disabled-active-indicator-opacity);
     }
 
-    .disabled .background {
-      background: var(--_disabled-container-color);
-      opacity: var(--_disabled-container-opacity);
-    }
-
     .error .active-indicator::before {
       border-bottom-color: var(--_error-active-indicator-color);
     }
diff --git a/field/internal/_shared.scss b/field/internal/_shared.scss
index df062beb69..79501bd049 100644
--- a/field/internal/_shared.scss
+++ b/field/internal/_shared.scss
@@ -57,6 +57,19 @@
     resize: inherit;
   }
 
+  .background {
+    background: var(--_container-color);
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .disabled .background {
+    background: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
   .resizable:not(.disabled) .container {
     // `resize` is inherited from the host, but only applies to the container
     // when resizable.
diff --git a/field/internal/field.ts b/field/internal/field.ts
index 345e146358..fc65766fa2 100644
--- a/field/internal/field.ts
+++ b/field/internal/field.ts
@@ -132,7 +132,8 @@ export class Field extends LitElement {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
+          <div class="background"></div>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
@@ -180,7 +181,7 @@ export class Field extends LitElement {
     }
   }
 
-  protected renderBackground?(): TemplateResult;
+  protected renderStateLayer?(): TemplateResult;
   protected renderIndicator?(): TemplateResult;
   protected renderOutline?(floatingLabel: unknown): TemplateResult;
 
diff --git a/field/internal/filled-field.ts b/field/internal/filled-field.ts
index a553f50fd8..16a45ca672 100644
--- a/field/internal/filled-field.ts
+++ b/field/internal/filled-field.ts
@@ -12,9 +12,8 @@ import {Field} from './field.js';
  * A filled field component.
  */
 export class FilledField extends Field {
-  protected override renderBackground() {
+  protected override renderStateLayer() {
     return html`
-      <div class="background"></div>
       <div class="state-layer"></div>
     `;
   }
diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
index a74440439d..a93b89575f 100644
--- a/tokens/_md-comp-outlined-field.scss
+++ b/tokens/_md-comp-outlined-field.scss
@@ -20,6 +20,7 @@
 $supported-tokens: (
   // go/keep-sorted start
   'bottom-space',
+  'container-color',
   'container-shape',
   'container-shape-end-end',
   'container-shape-end-start',
@@ -31,6 +32,8 @@ $supported-tokens: (
   'content-size',
   'content-space',
   'content-weight',
+  'disabled-container-color',
+  'disabled-container-opacity',
   'disabled-content-color',
   'disabled-content-opacity',
   'disabled-label-text-color',
@@ -125,6 +128,7 @@ $_default: (
   $tokens: (
     // go/keep-sorted start
     'bottom-space': if($exclude-hardcoded-values, null, 16px),
+    'container-color': map.get($text-field, 'container-color', 'transparent'),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-font': map.get($text-field, 'input-text-font'),
@@ -132,6 +136,10 @@ $_default: (
     'content-size': map.get($text-field, 'input-text-size'),
     'content-space': if($exclude-hardcoded-values, null, 16px),
     'content-weight': map.get($text-field, 'input-text-weight'),
+    'disabled-container-color':
+      map.get($text-field, 'disabled-container-color', 'transparent'),
+    'disabled-container-opacity':
+      map.get($text-field, 'disabled-container-opacity'),
     'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
     'disabled-content-opacity':
       map.get($text-field, 'disabled-input-text-opacity'),