changed component names and word order in variable names

Author: KhizerRehan

modules/web/src/app/cluster/details/cluster/cni-version/theme.scss

@@ -18,7 +18,7 @@
   .cni-version-container {
     .cni-version {
       .mdc-notched-outline {
-        --mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
+        --mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider)};
       }
 
       .cni-version-type {

modules/web/src/app/cluster/details/shared/version-picker/theme.scss

@@ -18,7 +18,7 @@
   .version-picker-container {
     .km-version-picker {
       .mat-form-field-outline {
-        --mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
+        --mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider)};
       }
 
       .version-picker-type {

modules/web/src/app/dynamic/enterprise/quotas/quota-widget/style.scss

@@ -72,8 +72,8 @@
     padding-top: 9px;
 
     .property-usage-bar {
-      --mat-linear-progress-track-height: 5px;
-      --mat-linear-progress-active-indicator-height: 5px;
+      --mat-progress-bar-track-height: 5px;
+      --mat-progress-bar-active-indicator-height: 5px;
 
       border-radius: variables.$border-radius;
       height: 5px;
@@ -134,8 +134,8 @@
       width: 100%;
 
       .property-usage-bar {
-        --mat-linear-progress-track-height: 6px;
-        --mat-linear-progress-active-indicator-height: 6px;
+        --mat-progress-bar-track-height: 6px;
+        --mat-progress-bar-active-indicator-height: 6px;
 
         border-radius: variables.$border-radius;
         height: 6px;

modules/web/src/app/shared/components/property-usage/style.scss

@@ -22,7 +22,7 @@
 .property-usage-bar {
   @include mixins.size(280px, 6px, true);
 
-  --mat-linear-progress-track-height: 6px;
+  --mat-progress-bar-track-height: 6px;
 
   border-radius: variables.$border-radius;
   margin: 6px 0;

modules/web/src/assets/css/material/_main.scss

@@ -645,9 +645,9 @@ button {
 
 /* stylelint-disable selector-class-pattern */
 .mat-mdc-slide-toggle {
-  --mat-switch-track-width: 50px;
-  --mat-switch-track-height: 24px;
-  --mat-switch-track-shape: 50px;
+  --mat-slide-toggle-track-width: 50px;
+  --mat-slide-toggle-track-height: 24px;
+  --mat-slide-toggle-track-shape: 50px;
 
   .mdc-switch {
     .mdc-switch__handle-track {

modules/web/src/assets/css/material/_theme.scss

@@ -131,9 +131,9 @@
     &.mat-mdc-form-field {
       color: map.get($colors, hint-color);
 
-      --mat-outlined-text-field-outline-color: #{map.get($colors, divider)};
-      --mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider-disabled)};
-      --mat-outlined-text-field-hover-outline-color: #{map.get($colors, secondary-dark)};
+      --mat-form-field-outlined-outline-color: #{map.get($colors, divider)};
+      --mat-form-field-outlined-disabled-outline-color: #{map.get($colors, divider-disabled)};
+      --mat-form-field-outlined-hover-outline-color: #{map.get($colors, secondary-dark)};
     }
 
   }
@@ -155,8 +155,8 @@
   .mat-mdc-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-raised-button {
-    --mat-filled-button-container-color: #{map.get($colors, primary)};
-    --mat-filled-button-label-text-color: #fff;
+    --mat-button-filled-container-color: #{map.get($colors, primary)};
+    --mat-button-filled-label-text-color: #fff;
 
     &:hover:not([disabled]) {
       background-color: map.get($colors, primary-hover);
@@ -277,30 +277,30 @@
     &.mat-accent,
     button {
       // track color
-      --mat-switch-selected-track-color: #{map.get($colors, primary)};
-      --mat-switch-selected-focus-track-color: var(--mat-switch-selected-track-color);
-      --mat-switch-selected-hover-track-color: var(--mat-switch-selected-track-color);
-      --mat-switch-selected-pressed-track-color: var(--mat-switch-selected-track-color);
-      --mat-switch-unselected-track-color: #{map.get($colors, divider)};
-      --mat-switch-unselected-focus-track-color: var(--mat-switch-unselected-track-color);
-      --mat-switch-unselected-hover-track-color: var(--mat-switch-unselected-track-color);
-      --mat-switch-unselected-pressed-track-color: var(--mat-switch-unselected-track-color);
+      --mat-slide-toggle-selected-track-color: #{map.get($colors, primary)};
+      --mat-slide-toggle-selected-focus-track-color: var(--mat-slide-toggle-selected-track-color);
+      --mat-slide-toggle-selected-hover-track-color: var(--mat-slide-toggle-selected-track-color);
+      --mat-slide-toggle-selected-pressed-track-color: var(--mat-slide-toggle-selected-track-color);
+      --mat-slide-toggle-unselected-track-color: #{map.get($colors, divider)};
+      --mat-slide-toggle-unselected-focus-track-color: var(--mat-slide-toggle-unselected-track-color);
+      --mat-slide-toggle-unselected-hover-track-color: var(--mat-slide-toggle-unselected-track-color);
+      --mat-slide-toggle-unselected-pressed-track-color: var(--mat-slide-toggle-unselected-track-color);
 
       // handle color
-      --mat-switch-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
-      --mat-switch-selected-handle-color: #fafafa;
-      --mat-switch-selected-focus-handle-color: var(--mat-switch-selected-handle-color);
-      --mat-switch-selected-hover-handle-color: var(--mat-switch-selected-handle-color);
-      --mat-switch-selected-pressed-handle-color: var(--mat-switch-selected-handle-color);
-      --mat-switch-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
-      --mat-switch-unselected-focus-handle-color: var(--mat-switch-unselected-handle-color);
-      --mat-switch-unselected-hover-handle-color: var(--mat-switch-unselected-handle-color);
-      --mat-switch-unselected-pressed-handle-color: var(--mat-switch-unselected-handle-color);
+      --mat-slide-toggle-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
+      --mat-slide-toggle-selected-handle-color: #fafafa;
+      --mat-slide-toggle-selected-focus-handle-color: var(--mat-slide-toggle-selected-handle-color);
+      --mat-slide-toggle-selected-hover-handle-color: var(--mat-slide-toggle-selected-handle-color);
+      --mat-slide-toggle-selected-pressed-handle-color: var(--mat-slide-toggle-selected-handle-color);
+      --mat-slide-toggle-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
+      --mat-slide-toggle-unselected-focus-handle-color: var(--mat-slide-toggle-unselected-handle-color);
+      --mat-slide-toggle-unselected-hover-handle-color: var(--mat-slide-toggle-unselected-handle-color);
+      --mat-slide-toggle-unselected-pressed-handle-color: var(--mat-slide-toggle-unselected-handle-color);
 
       // ripple color
-      --mat-switch-selected-focus-state-layer-color: var(--mat-switch-selected-track-color);
-      --mat-switch-selected-hover-state-layer-color: var(--mat-switch-selected-track-color);
-      --mat-switch-selected-pressed-state-layer-color: var(--mat-switch-selected-track-color);
+      --mat-slide-toggle-selected-focus-state-layer-color: var(--mat-slide-toggle-selected-track-color);
+      --mat-slide-toggle-selected-hover-state-layer-color: var(--mat-slide-toggle-selected-track-color);
+      --mat-slide-toggle-selected-pressed-state-layer-color: var(--mat-slide-toggle-selected-track-color);
     }
   }
 
@@ -406,6 +406,6 @@
   }
 
   .mat-mdc-progress-bar.mat-accent {
-    --mat-linear-progress-active-indicator-color: #{map.get($colors, indicator-orange)};
+    --mat-progress-bar-active-indicator-color: #{map.get($colors, indicator-orange)};
   }
 }