From e50b478eb6ce6d54f0487a86572a20c645fac6c2 Mon Sep 17 00:00:00 2001
From: Kevin Vizcarra <kevinprograms@google.com>
Date: Thu, 8 Feb 2024 10:01:56 -0800
Subject: [PATCH] feat(banner): Add Theming API support for max width and
 z-index

New tokens:

* `content-max-width`
* `z-index`

PiperOrigin-RevId: 605349697
---
 packages/mdc-banner/_banner-theme.scss | 11 ++++++++---
 packages/mdc-banner/_banner.scss       |  4 ----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/mdc-banner/_banner-theme.scss b/packages/mdc-banner/_banner-theme.scss
index 2157a281a84..dc94b23630f 100644
--- a/packages/mdc-banner/_banner-theme.scss
+++ b/packages/mdc-banner/_banner-theme.scss
@@ -47,7 +47,6 @@ $primary-action-text-color: primary;
 $secondary-action-text-color: primary;
 
 $mobile-breakpoint: 480px;
-$z-index: 1;
 $custom-property-prefix: 'banner';
 
 $light-theme: (
@@ -70,6 +69,7 @@ $light-theme: (
   container-elevation: null,
   container-shadow-color: null,
   container-shape: 0,
+  content-max-width: 720px,
   divider-color: $divider-color,
   divider-height: 1px,
   supporting-text-color: theme-color.$on-surface,
@@ -82,6 +82,7 @@ $light-theme: (
   with-image-image-size: 40px,
   with-image-image-color: $graphic-color,
   with-image-image-container-color: $graphic-background-color,
+  z-index: 1,
 );
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
@@ -136,6 +137,10 @@ $light-theme: (
     $prefix: $custom-property-prefix
   );
 
+  @include z-index(map.get($theme, 'z-index'), $query: $query);
+
+  @include max-width(map.get($theme, 'content-max-width'), $query: $query);
+
   @include graphic-color(
     map.get($theme, 'with-image-image-color'),
     $query: $query
@@ -348,7 +353,7 @@ $light-theme: (
 
   .mdc-banner__content {
     @include feature-targeting.targets($feat-structure) {
-      max-width: $max-width;
+      @include theme.property(max-width, $max-width);
     }
   }
 }
@@ -401,7 +406,7 @@ $light-theme: (
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include feature-targeting.targets($feat-structure) {
-    z-index: $z-index;
+    @include theme.property(z-index, $z-index);
   }
 }
 
diff --git a/packages/mdc-banner/_banner.scss b/packages/mdc-banner/_banner.scss
index b83620d40eb..f932a792587 100644
--- a/packages/mdc-banner/_banner.scss
+++ b/packages/mdc-banner/_banner.scss
@@ -34,7 +34,6 @@
 
 $_text-type-scale: body2;
 $_min-width: 344px;
-$_max-width: 720px;
 // Minimum banner height minus standard text height, divided by 2 for both top
 // and bottom padding. This is used to support two/three line banners.
 $_text-padding-top-bottom: math.div(52px - 20px, 2);
@@ -48,7 +47,6 @@ $_exit-duration: 250ms;
   $feat-animation: feature-targeting.create-target($query, animation);
 
   @include banner-theme.min-width($_min-width, $query: $query);
-  @include banner-theme.max-width($_max-width, $query: $query);
   @include static-styles($query: $query);
 
   .mdc-banner {
@@ -70,8 +68,6 @@ $_exit-duration: 250ms;
   $feat-animation: feature-targeting.create-target($query, animation);
 
   .mdc-banner {
-    @include banner-theme.z-index(banner-theme.$z-index, $query: $query);
-
     @include feature-targeting.targets($feat-structure) {
       // Mobile view styles.
       @media (max-width: banner-theme.$mobile-breakpoint) {