fix(material/core): rename sys vars from mat-app to mat-sys (#29879)

Author: andrewseguin

src/dev-app/theme/theme-demo.html

@@ -24,18 +24,18 @@ <h1>Colors</h1>
   colors and follow their uses to add theme colors to your application's custom components.
 </p>
 <p>
-  Note that variables starting with "mat-app-on-*" are designed to be used for text or icons
-  placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-app-on-primary</span>
-  is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-app-primary</span> color.
+  Note that variables starting with "--mat-sys-on-*" are designed to be used for text or icons
+  placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-sys-on-primary</span>
+  is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-sys-primary</span> color.
 </p>
 
 <div class="demo-group">
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-app-primary)'"
-         [style.color]="'var(--mat-app-on-primary)'">
+         [style.background-color]="'var(--mat-sys-primary)'"
+         [style.color]="'var(--mat-sys-on-primary)'">
       <div class="demo-name"> Primary</div>
-      <div class="demo-variable demo-code"> --mat-app-primary</div>
+      <div class="demo-variable demo-code"> --mat-sys-primary</div>
     </div>
     <div class="demo-description">
       <p>
@@ -48,7 +48,7 @@ <h1>Colors</h1>
         outline color of form fields.
       </p>
       <p>
-        Use the color <span class="demo-surface-variable">--mat-app-on-primary</span> for
+        Use the color <span class="demo-surface-variable">--mat-sys-on-primary</span> for
         icons, text, and other visual elements placed on a primary background. This
         color is calculated to be optimal for accessibility and legibility.
       </p>
@@ -57,10 +57,10 @@ <h1>Colors</h1>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-app-surface)'"
-         [style.color]="'var(--mat-app-on-surface)'">
+         [style.background-color]="'var(--mat-sys-surface)'"
+         [style.color]="'var(--mat-sys-on-surface)'">
       <div class="demo-name"> Surface</div>
-      <div class="demo-variable code"> --mat-app-surface</div>
+      <div class="demo-variable code"> --mat-sys-surface</div>
     </div>
     <div class="demo-description">
       <p>
@@ -72,7 +72,7 @@ <h1>Colors</h1>
         components such as the dialog, card, table, and more.
       </p>
       <p>
-        Use the color <span class="demo-surface-variable">--mat-app-on-surface</span> for
+        Use the color <span class="demo-surface-variable">--mat-sys-on-surface</span> for
         icons, text, and other visual elements placed on a surface background. This
         color is calculated to be optimal for accessibility and legibility.
       </p>
@@ -81,10 +81,10 @@ <h1>Colors</h1>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-app-error)'"
-         [style.color]="'var(--mat-app-on-error)'">
+         [style.background-color]="'var(--mat-sys-error)'"
+         [style.color]="'var(--mat-sys-on-error)'">
       <div class="demo-name"> Error</div>
-      <div class="demo-variable demo-code"> --mat-app-error</div>
+      <div class="demo-variable demo-code"> --mat-sys-error</div>
     </div>
     <div class="demo-description">
       <p>
@@ -95,7 +95,7 @@ <h1>Colors</h1>
         form fields inputs.
       </p>
       <p>
-        Use the color <span class="demo-surface-variable">--mat-app-on-error</span> for
+        Use the color <span class="demo-surface-variable">--mat-sys-on-error</span> for
         icons, text, and other visual elements placed on an error background. This
         color is calculated to be optimal for accessibility and legibility.
       </p>
@@ -104,10 +104,10 @@ <h1>Colors</h1>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-app-outline)'"
-         [style.color]="'var(--mat-app-surface)'">
+         [style.background-color]="'var(--mat-sys-outline)'"
+         [style.color]="'var(--mat-sys-surface)'">
       <div class="demo-name"> Outline</div>
-      <div class="demo-variable demo-code"> --mat-app-outline </div>
+      <div class="demo-variable demo-code"> --mat-sys-outline </div>
     </div>
     <div class="demo-description">
       <p>
@@ -119,7 +119,7 @@ <h1>Colors</h1>
         form field.
       </p>
       <p>
-        Use the color <span class="demo-surface-variable">--mat-app-outline-variant</span> for a less
+        Use the color <span class="demo-surface-variable">--mat-sys-outline-variant</span> for a less
         prominent outline.
       </p>
     </div>
@@ -135,7 +135,7 @@ <h1>Colors</h1>
     to components.
   </p>
   <p>
-    Colors may be paired with a <span class="demo-surface-variable">--mat-app-on-</span> variable
+    Colors may be paired with a <span class="demo-surface-variable">--mat-sys-on-</span> variable
     that should be used for text and icons placed within a filled container.
   </p>
 
@@ -152,7 +152,7 @@ <h2>Surface Colors</h2>
 
   <p>
     Containers filled with a surface color should apply the
-    <span class="demo-surface-variable">--mat-app-on-surface</span> color to text
+    <span class="demo-surface-variable">--mat-sys-on-surface</span> color to text
     and icons placed within.
   </p>
 
@@ -188,9 +188,9 @@ <h1>Typography</h1>
     @for (size of ['small', 'medium', 'large']; track $index) {
       <div class="demo-typography-example">
         <div class="demo-typography-variable">
-          <div class="demo-surface-variable">--mat-app-{{category}}-{{size}}</div>
+          <div class="demo-surface-variable">--mat-sys-{{category}}-{{size}}</div>
         </div>
-        <div class="demo-typography-text" [style.font]="'var(--mat-app-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
+        <div class="demo-typography-text" [style.font]="'var(--mat-sys-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
       </div>
     }
   </div>
@@ -204,12 +204,12 @@ <h1>Typography</h1>
   For example, the values for medium body text may be defined as follows:
 </p>
 <pre class="demo-code-block">
---mat-app-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
---mat-app-body-medium-font: Roboto, sans-serif;
---mat-app-body-medium-line-height: 1.25rem;
---mat-app-body-medium-size: 0.875rem;
---mat-app-body-medium-tracking: 0.016rem;
---mat-app-body-medium-weight: 400;
+--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
+--mat-sys-body-medium-font: Roboto, sans-serif;
+--mat-sys-body-medium-line-height: 1.25rem;
+--mat-sys-body-medium-size: 0.875rem;
+--mat-sys-body-medium-tracking: 0.016rem;
+--mat-sys-body-medium-weight: 400;
 </pre>
 
 <h1>Elevation</h1>
@@ -225,8 +225,8 @@ <h1>Elevation</h1>
 </p>
 
 @for (level of [0, 1, 2, 3, 4, 5]; track $index) {
-<div class="demo-elevation code" [style.box-shadow]="'var(--mat-app-level' + level + ')'">
-box-shadow: var(--mat-app-level{{level}})
+<div class="demo-elevation code" [style.box-shadow]="'var(--mat-sys-level' + level + ')'">
+box-shadow: var(--mat-sys-level{{level}})
 </div>
 }
 

src/dev-app/theme/theme-demo.scss

@@ -6,24 +6,24 @@
 }
 
 h1 {
-  font: var(--mat-app-title-large);
+  font: var(--mat-sys-title-large);
   font-size: 28px;
   padding-top: 32px;
 }
 
 h2 {
-  font: var(--mat-app-title-large);
+  font: var(--mat-sys-title-large);
 }
 
 a {
-  color: var(--mat-app-primary);
+  color: var(--mat-sys-primary);
 }
 
 .demo-warn {
-  background: var(--mat-app-error-container);
-  color: var(--mat-app-on-error-container);
-  border: 1px solid var(--mat-app-outline-variant);
-  border-radius: var(--mat-app-corner-extra-small);
+  background: var(--mat-sys-error-container);
+  color: var(--mat-sys-on-error-container);
+  border: 1px solid var(--mat-sys-outline-variant);
+  border-radius: var(--mat-sys-corner-extra-small);
   padding: 8px;
 }
 
@@ -39,18 +39,18 @@ a {
 }
 
 .demo-color-container {
-  border-radius: var(--mat-app-corner-small);
+  border-radius: var(--mat-sys-corner-small);
   display: inline-block;
-  font: var(--mat-app-body-medium);
+  font: var(--mat-sys-body-medium);
   vertical-align: top;
 }
 
 .demo-heading {
-  color: var(--mat-app-on-primary);
-  background: var(--mat-app-primary);
-  border: 1px solid var(--mat-app-outline);
-  border-top-right-radius: var(--mat-app-corner-small);
-  border-top-left-radius: var(--mat-app-corner-small);
+  color: var(--mat-sys-on-primary);
+  background: var(--mat-sys-primary);
+  border: 1px solid var(--mat-sys-outline);
+  border-top-right-radius: var(--mat-sys-corner-small);
+  border-top-left-radius: var(--mat-sys-corner-small);
   border-bottom: none;
   padding: 16px;
   display: flex;
@@ -59,19 +59,19 @@ a {
 }
 
 .demo-name {
-  font: var(--mat-app-title-medium);
+  font: var(--mat-sys-title-medium);
 }
 
 .demo-variable {
-  font: var(--mat-app-title-small);
+  font: var(--mat-sys-title-small);
   font-family: monospace;
   text-align: right;
 }
 
 .demo-description {
-  border: 1px solid var(--mat-app-outline);
-  border-bottom-right-radius: var(--mat-app-corner-small);
-  border-bottom-left-radius: var(--mat-app-corner-small);
+  border: 1px solid var(--mat-sys-outline);
+  border-bottom-right-radius: var(--mat-sys-corner-small);
+  border-bottom-left-radius: var(--mat-sys-corner-small);
   padding: 0 16px;
 }
 
@@ -82,8 +82,8 @@ a {
 .demo-surface-variable {
   display: inline-block;
   font-family: monospace;
-  background: var(--mat-app-primary-container);
-  color: var(--mat-app-on-primary-container);
+  background: var(--mat-sys-primary-container);
+  color: var(--mat-sys-on-primary-container);
   padding: 2px 6px;
   margin: 0 2px;
   border-radius: 4px;
@@ -93,17 +93,17 @@ mat-expansion-panel {
   margin-top: 24px;
   overflow: visible;
   @include mat.expansion-overrides((
-    'container-text-font': var(--mat-app-body-medium-font),
-    'container-text-size': var(--mat-app-body-medium-size),
-    'container-text-weight': var(--mat-app-body-medium-weight),
-    'container-text-line-height': var(--mat-app-body-medium-line-height),
-    'container-text-tracking': var(--mat-app-body-medium-tracking),
+    'container-text-font': var(--mat-sys-body-medium-font),
+    'container-text-size': var(--mat-sys-body-medium-size),
+    'container-text-weight': var(--mat-sys-body-medium-weight),
+    'container-text-line-height': var(--mat-sys-body-medium-line-height),
+    'container-text-tracking': var(--mat-sys-body-medium-tracking),
   ));
 }
 
 .demo-compact-color-container {
-  border-radius: var(--mat-app-corner-small);
-  border: 1px solid var(--mat-app-outline);
+  border-radius: var(--mat-sys-corner-small);
+  border: 1px solid var(--mat-sys-outline);
   overflow: hidden; // Hide child heading background color
   margin-top: 24px;
 
@@ -112,7 +112,7 @@ mat-expansion-panel {
     border-radius: 0;
 
     &:not(:nth-child(1)) {
-      border-top: 1px solid var(--mat-app-outline);
+      border-top: 1px solid var(--mat-sys-outline);
     }
   }
 
@@ -122,19 +122,19 @@ mat-expansion-panel {
 }
 
 .demo-typography-group {
-  border: 1px solid var(--mat-app-outline);
-  border-radius: var(--mat-app-corner-small);
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-small);
   margin-top: 40px;
   overflow: hidden;
 }
 
 .demo-typography-title {
   text-transform: capitalize;
-  font: var(--mat-app-title-medium);
+  font: var(--mat-sys-title-medium);
   padding: 16px;
-  border-bottom: 1px solid var(--mat-app-outline);
-  background: var(--mat-app-primary-container);
-  color: var(--mat-app-on-primary-container);
+  border-bottom: 1px solid var(--mat-sys-outline);
+  background: var(--mat-sys-primary-container);
+  color: var(--mat-sys-on-primary-container);
 }
 
 .demo-typography-variable {
@@ -145,7 +145,7 @@ mat-expansion-panel {
   padding: 16px;
   display: flex;
   align-items: baseline;
-  border-top: 1px solid var(--mat-app-outline-variant);
+  border-top: 1px solid var(--mat-sys-outline-variant);
 
   &:nth-child(1) {
     border: none;
@@ -166,31 +166,31 @@ mat-expansion-panel {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--mat-app-surface-container);
-  color: var(--mat-app-on-surface);
-  border-radius: var(--mat-app-corner-extra-small);
+  background: var(--mat-sys-surface-container);
+  color: var(--mat-sys-on-surface);
+  border-radius: var(--mat-sys-corner-extra-small);
 }
 
 .demo-code-block {
-  background: var(--mat-app-surface-container-low);
+  background: var(--mat-sys-surface-container-low);
   padding: 16px;
-  border-radius: var(--mat-app-corner-small);
-  border: 1px solid var(--mat-app-outline);
+  border-radius: var(--mat-sys-corner-small);
+  border: 1px solid var(--mat-sys-outline);
 }
 
 .demo-overrides {
-  background-color: var(--mat-app-primary);
-  color: var(--mat-app-on-primary);
-  font: var(--mat-app-body-medium);
-  border-radius: var(--mat-app-corner-large);
-  box-shadow: var(--mat-app-level3);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+  font: var(--mat-sys-body-medium);
+  border-radius: var(--mat-sys-corner-large);
+  box-shadow: var(--mat-sys-level3);
   padding: 16px;
 
   @include mat.theme-overrides((
     primary: #ebdcff,
     on-primary: #230f46,
     body-medium: 600 1.5rem / 2.25rem Arial,
     corner-large: 32px,
-    level3: 0 4px 6px 1px var(--mat-app-surface-dim),
+    level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
   ));
 }