Migrate MDC tokens to Angular Material 20 system tokens (#2391)

rfontanarosa · web-flow · commit b8fe12b197f1 · 2026-01-20T19:17:21.000+01:00
diff --git a/web/src/app/components/create-survey/create-survey.component.html b/web/src/app/components/create-survey/create-survey.component.html
@@ -24,6 +24,7 @@
     </div>
   </div>
 
+  <div class="container">
     <div class="card">
       <img
         *ngIf="createSurveyPhase === CreateSurveyPhase.JOB_DETAILS"
@@ -110,4 +111,5 @@
       </button>
       </div>
     </div>
+  </div>
 </div>
diff --git a/web/src/app/components/create-survey/data-sharing-terms/_data-sharing-terms.component-theme.scss b/web/src/app/components/create-survey/data-sharing-terms/_data-sharing-terms.component-theme.scss
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2026 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  .data-sharing-terms {
+    .mat-mdc-card {
+      --mat-card-elevated-container-elevation: 0;
+      --mat-card-elevated-container-color: #fcfdf7;
+
+      border: 1px solid mat.get-theme-color($theme, neutral, 90);
+    }
+  }
+}
+
+@mixin theme($theme) {
+  @include color($theme);
+}
diff --git a/web/src/app/components/edit-survey/_edit-survey.component-theme.scss b/web/src/app/components/edit-survey/_edit-survey.component-theme.scss
@@ -24,13 +24,15 @@
 
   .survey-details-container, .share-survey-container {
     .mat-mdc-card {
-      --mdc-elevated-card-container-elevation: 0;
+      --mat-card-elevated-container-elevation: 0;
+      --mat-card-elevated-container-color: #fcfdf7;
+
       border: 1px solid mat.get-theme-color($theme, neutral, 90);
     }
 
     .mdc-button {
       &.delete-survey-button {
-        --mdc-outlined-button-label-text-color: #{mat.get-theme-color($theme, error)};
+        --mat-button-outlined-label-text-color: #{mat.get-theme-color($theme, error)};
       }
     }
   }
diff --git a/web/src/app/components/edit-survey/edit-survey.component.scss b/web/src/app/components/edit-survey/edit-survey.component.scss
@@ -33,12 +33,13 @@
   width: 300px;
   padding: 12px;
 
-  --mdc-list-list-item-label-text-size: 14px;
-  --mdc-list-list-item-leading-label-color: #444746;
-  --mdc-list-list-item-hover-label-text-color: #444746;
-  --mdc-list-list-item-label-icon-size: 14px;
-  --mdc-list-list-item-leading-icon-color: #444746;
-  --mdc-list-list-item-hover-leading-icon-color: #444746;
+  --mat-list-list-item-label-text-size: 14px;
+  --mat-list-list-item-label-text-color: #444746;
+  --mat-list-list-item-hover-label-text-color: #444746;
+  --mat-list-list-item-leading-icon-size: 24px;
+  --mat-list-list-item-leading-icon-color: #444746;
+  --mat-list-list-item-hover-leading-icon-color: #444746;
+  --mat-list-list-item-leading-avatar-color: #444746;
 
   .is-active {
     background-color: #dcddd9;
diff --git a/web/src/app/components/main-page-container/main-page/secondary-side-panel/submission-panel/submission-panel.component.scss b/web/src/app/components/main-page-container/main-page/secondary-side-panel/submission-panel/submission-panel.component.scss
@@ -30,7 +30,7 @@
   }
 
   .submission-subtitle {
-    padding-left: var(--mdc-icon-button-state-layer-size);
+    padding-left: 40px;
   }
 
   .submission-tasks-container {
diff --git a/web/src/app/components/shared/header/_header.component-theme.scss b/web/src/app/components/shared/header/_header.component-theme.scss
@@ -11,12 +11,12 @@
   }
 
   .header .cancel-edit-button {
-    --mdc-text-button-label-text-color: #{mat.get-theme-color($theme, secondary)};
+    --mat-button-text-label-text-color: #{mat.get-theme-color($theme, secondary)};
   }
 
   .header .finish-edit-button {
-    --mdc-filled-button-container-color: #{mat.get-theme-color($theme, tertiary)};
-    --mdc-filled-button-label-text-color: #{mat.get-theme-color($theme, on-primary)};
+    --mat-button-filled-container-color: #{mat.get-theme-color($theme, tertiary)};
+    --mat-button-filled-label-text-color: #{mat.get-theme-color($theme, on-primary)};
   }
 }
 
diff --git a/web/src/app/components/shared/loi-editor/_loi-editor.component-theme.scss b/web/src/app/components/shared/loi-editor/_loi-editor.component-theme.scss
@@ -18,22 +18,22 @@
 @use '@angular/material' as mat;
 
 @mixin color($theme) {
-	.loi-editor .loi-editor-card .loi-editor-card-row button.import-lois-button {
-		--mdc-filled-button-container-color: #FFDDAB;
-		--mdc-filled-button-label-text-color: mat.get-theme-color($theme, on-secondary-container);
+  .loi-editor .loi-editor-card .loi-editor-card-row button.import-lois-button {
+    --mat-button-filled-container-color: #FFDDAB;
+    --mat-button-filled-label-text-color: mat.get-theme-color($theme, on-secondary-container);
   }
 }
 
 @mixin typography($theme) {
-	.loi-editor-card-row-title {
-		font: mat.get-theme-typography($theme, title-medium, font);
-	}
-	.loi-editor-card-row-subtitle {
-		font: mat.get-theme-typography($theme, body-medium, font);
-	}
+  .loi-editor-card-row-title {
+    font: mat.get-theme-typography($theme, title-medium, font);
+  }
+  .loi-editor-card-row-subtitle {
+    font: mat.get-theme-typography($theme, body-medium, font);
+  }
 }
 
 @mixin theme($theme) {
-	@include color($theme);
-	@include typography($theme);
+  @include color($theme);
+  @include typography($theme);
 }
diff --git a/web/src/app/components/shared/loi-editor/loi-editor.component.scss b/web/src/app/components/shared/loi-editor/loi-editor.component.scss
@@ -50,14 +50,9 @@
         align-items: center;
         justify-content: flex-end;
       }
-  
-      button.import-lois-button {
-        --mdc-filled-button-container-shape: 24px;
-      }
 
       button.clear-all-lois {
         border: 1px solid #727970;
-        --mdc-filled-button-container-shape: 24px;
       }
     }
   }
diff --git a/web/src/app/components/shared/share-list/share-list.component.scss b/web/src/app/components/shared/share-list/share-list.component.scss
@@ -16,8 +16,6 @@
 
 .share-list-container {
   .mat-mdc-list-item {
-    --mdc-list-list-item-one-line-container-height: 48px;
-    --mdc-list-list-item-trailing-supporting-text-size: 16px;
     padding: 0;
   }
 
diff --git a/web/src/app/components/shared/share-survey/_share-survey.component-theme.scss b/web/src/app/components/shared/share-survey/_share-survey.component-theme.scss
@@ -20,7 +20,9 @@
 @mixin color($theme) {
   .share-survey-container {
     .mat-mdc-card {
-      --mdc-elevated-card-container-elevation: 0;
+      --mat-card-elevated-container-elevation: 0;
+      --mat-card-elevated-container-color: #fcfdf7;
+
       border: 1px solid mat.get-theme-color($theme, neutral, 90);
 
       .mat-mdc-card-content {
@@ -30,8 +32,8 @@
 
     .mdc-button {
       &.share-survey-button {
-        --mdc-filled-button-container-color: transparent;
-        --mdc-filled-button-label-text-color: #{mat.get-theme-color($theme, error)};
+        --mat-filled-button-container-color: transparent;
+        --mat-filled-button-label-text-color: #{mat.get-theme-color($theme, error)};
         background-color: mat.get-theme-color($theme, secondary-container);
         color: mat.get-theme-color($theme, on-secondary-container);
       }
diff --git a/web/src/app/components/shared/survey-list/_survey-list.component-theme.scss b/web/src/app/components/shared/survey-list/_survey-list.component-theme.scss
@@ -7,19 +7,19 @@
   }
 
   .filters-container {
-    --mdc-chip-elevated-disabled-container-color: #D4E8D1;
-    --mdc-chip-elevated-selected-container-color: #D4E8D1;
-    --mdc-chip-outline-color: #C4C7C5;
-    --mdc-chip-disabled-outline-color: #D4E8D1;
-    --mdc-chip-selected-outline-color: #D4E8D1;
-    --mdc-chip-label-text-color: #0F1F11;
-    --mdc-chip-disabled-label-text-color: #0F1F11;
-    --mdc-chip-selected-label-text-color: #0F1F11;
-    --mdc-chip-with-icon-icon-color: #006E2C;
-    --mdc-chip-with-icon-disabled-icon-color: #0F1F11;
-    --mdc-chip-with-icon-selected-icon-color: #0F1F11;
-    --mdc-chip-with-avatar-disabled-avatar-opacity: 1;
-    --mdc-chip-with-avatar-selected-avatar-opacity: 1;
+    --mat-chip-elevated-disabled-container-color: #D4E8D1;
+    --mat-chip-elevated-selected-container-color: #D4E8D1;
+    --mat-chip-outline-color: #C4C7C5;
+    --mat-chip-disabled-outline-color: #D4E8D1;
+    --mat-chip-selected-outline-color: #D4E8D1;
+    --mat-chip-label-text-color: #0F1F11;
+    --mat-chip-disabled-label-text-color: #0F1F11;
+    --mat-chip-selected-label-text-color: #0F1F11;
+    --mat-chip-with-icon-icon-color: #006E2C;
+    --mat-chip-with-icon-disabled-icon-color: #0F1F11;
+    --mat-chip-with-icon-selected-icon-color: #0F1F11;
+    --mat-chip-with-avatar-disabled-avatar-opacity: 1;
+    --mat-chip-with-avatar-selected-avatar-opacity: 1;
   }
 
   .mat-mdc-card {
diff --git a/web/src/ground-theme.scss b/web/src/ground-theme.scss
@@ -38,6 +38,7 @@
 @use 'app/components/shared/tasks-editor/task-form/edit-option/_edit-option.component-theme' as edit-option;
 @use 'app/components/shared/user-avatar/_user-avatar.component-theme' as user-avatar;
 @use 'app/components/create-survey/_create-survey.component-theme' as create-survey;
+@use 'app/components/create-survey/data-sharing-terms/_data-sharing-terms.component-theme' as data-sharing-terms;
 @use 'app/components/create-survey/step-card/_step-card.component-theme' as step-card;
 @use 'app/components/edit-survey/_edit-survey.component-theme.scss' as edit-survey;
 @use 'app/components/edit-survey/edit-job/_edit-job.component-theme' as edit-job;
@@ -89,6 +90,7 @@ html {
   @include create-survey.theme($theme);
   @include edit-survey.theme($theme);
   @include edit-job.theme($theme);
+  @include data-sharing-terms.theme($theme);
   @include step-card.theme($theme);
   @include drawing-tools.theme($theme);
   @include task-editor.theme($theme);
@@ -107,7 +109,6 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  --mdc-typography-button-letter-spacing: 0;
 }
 
 /* Space between button icon and label. */

Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,15 @@`
`24`	`24`
`25`	`25`	`.survey-details-container, .share-survey-container {`
`26`	`26`	`.mat-mdc-card {`
`27`		`- --mdc-elevated-card-container-elevation: 0;`
	`27`	`+ --mat-card-elevated-container-elevation: 0;`
	`28`	`+ --mat-card-elevated-container-color: #fcfdf7;`
	`29`	`+`
`28`	`30`	`border: 1px solid mat.get-theme-color($theme, neutral, 90);`
`29`	`31`	`}`
`30`	`32`
`31`	`33`	`.mdc-button {`
`32`	`34`	`&.delete-survey-button {`
`33`		`- --mdc-outlined-button-label-text-color: #{mat.get-theme-color($theme, error)};`
	`35`	`+ --mat-button-outlined-label-text-color: #{mat.get-theme-color($theme, error)};`
`34`	`36`	`}`
`35`	`37`	`}`
`36`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.submission-subtitle {`
`33`		`- padding-left: var(--mdc-icon-button-state-layer-size);`
	`33`	`+ padding-left: 40px;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`.submission-tasks-container {`
Original file line number	Diff line number	Diff line change
`@@ -11,12 +11,12 @@`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.header .cancel-edit-button {`
`14`		`- --mdc-text-button-label-text-color: #{mat.get-theme-color($theme, secondary)};`
	`14`	`+ --mat-button-text-label-text-color: #{mat.get-theme-color($theme, secondary)};`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.header .finish-edit-button {`
`18`		`- --mdc-filled-button-container-color: #{mat.get-theme-color($theme, tertiary)};`
`19`		`- --mdc-filled-button-label-text-color: #{mat.get-theme-color($theme, on-primary)};`
	`18`	`+ --mat-button-filled-container-color: #{mat.get-theme-color($theme, tertiary)};`
	`19`	`+ --mat-button-filled-label-text-color: #{mat.get-theme-color($theme, on-primary)};`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -50,14 +50,9 @@`
`50`	`50`	`align-items: center;`
`51`	`51`	`justify-content: flex-end;`
`52`	`52`	`}`
`53`		`-`
`54`		`- button.import-lois-button {`
`55`		`- --mdc-filled-button-container-shape: 24px;`
`56`		`- }`
`57`	`53`
`58`	`54`	`button.clear-all-lois {`
`59`	`55`	`border: 1px solid #727970;`
`60`		`- --mdc-filled-button-container-shape: 24px;`
`61`	`56`	`}`
`62`	`57`	`}`
`63`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,6 @@`
`16`	`16`
`17`	`17`	`.share-list-container {`
`18`	`18`	`.mat-mdc-list-item {`
`19`		`- --mdc-list-list-item-one-line-container-height: 48px;`
`20`		`- --mdc-list-list-item-trailing-supporting-text-size: 16px;`
`21`	`19`	`padding: 0;`
`22`	`20`	`}`
`23`	`21`