Skip to content

Commit 0de8b78

Browse files
KhizerRehanKhizerRehan
committed
changing the prefix from --mdc-* to --mat-*
1 parent 27f5ee1 commit 0de8b78

File tree

10 files changed

+85
-82
lines changed

10 files changed

+85
-82
lines changed

‎modules/web/package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎modules/web/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@
5858
},
5959
"dependencies": {
6060
"@angular/animations": "20.3.1",
61-
"@angular/cdk": "20.2.4",
61+
"@angular/cdk": "20.2.12",
6262
"@angular/common": "20.3.1",
6363
"@angular/compiler": "20.3.1",
6464
"@angular/core": "20.3.1",
6565
"@angular/flex-layout": "15.0.0-beta.42",
6666
"@angular/forms": "20.3.1",
6767
"@angular/localize": "20.3.1",
68-
"@angular/material": "20.2.4",
68+
"@angular/material": "20.2.12",
6969
"@angular/platform-browser": "20.3.1",
7070
"@angular/platform-browser-dynamic": "20.3.1",
7171
"@angular/router": "20.3.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
.cni-version-container {
1919
.cni-version {
2020
.mdc-notched-outline {
21-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
21+
--mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
2222
}
2323

2424
.cni-version-type {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
.version-picker-container {
1919
.km-version-picker {
2020
.mat-form-field-outline {
21-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
21+
--mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider)};
2222
}
2323

2424
.version-picker-type {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
padding-top: 9px;
7373

7474
.property-usage-bar {
75-
--mdc-linear-progress-track-height: 5px;
76-
--mdc-linear-progress-active-indicator-height: 5px;
75+
--mat-linear-progress-track-height: 5px;
76+
--mat-linear-progress-active-indicator-height: 5px;
7777

7878
border-radius: variables.$border-radius;
7979
height: 5px;
@@ -134,8 +134,8 @@
134134
width: 100%;
135135

136136
.property-usage-bar {
137-
--mdc-linear-progress-track-height: 6px;
138-
--mdc-linear-progress-active-indicator-height: 6px;
137+
--mat-linear-progress-track-height: 6px;
138+
--mat-linear-progress-active-indicator-height: 6px;
139139

140140
border-radius: variables.$border-radius;
141141
height: 6px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.property-usage-bar {
2323
@include mixins.size(280px, 6px, true);
2424

25-
--mdc-linear-progress-track-height: 6px;
25+
--mat-linear-progress-track-height: 6px;
2626

2727
border-radius: variables.$border-radius;
2828
margin: 6px 0;

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@ button {
535535
&.mat-mdc-raised-button,
536536
&.mat-mdc-icon-button {
537537
--mat-icon-button-state-layer-color: none;
538-
--mdc-icon-button-state-layer-size: none;
538+
--mat-icon-button-state-layer-size: none;
539539

540540
font-size: variables.$font-size-subhead;
541541
height: 45px;
@@ -564,7 +564,7 @@ button {
564564

565565
&.mat-mdc-icon-button {
566566
--mat-icon-button-state-layer-color: none;
567-
--mdc-icon-button-state-layer-size: 45px !important;
567+
--mat-icon-button-state-layer-size: 45px !important;
568568

569569
bottom: 2px;
570570
}
@@ -645,9 +645,9 @@ button {
645645

646646
/* stylelint-disable selector-class-pattern */
647647
.mat-mdc-slide-toggle {
648-
--mdc-switch-track-width: 50px;
649-
--mdc-switch-track-height: 24px;
650-
--mdc-switch-track-shape: 50px;
648+
--mat-switch-track-width: 50px;
649+
--mat-switch-track-height: 24px;
650+
--mat-switch-track-shape: 50px;
651651

652652
.mdc-switch {
653653
.mdc-switch__handle-track {
@@ -671,8 +671,8 @@ button {
671671
.mat-mdc-chip {
672672
border-radius: variables.$border-radius;
673673

674-
--mdc-chip-container-height: 24px !important;
675-
--mdc-chip-container-shape-radius: 3px !important;
674+
--mat-chip-container-height: 24px !important;
675+
--mat-chip-container-shape-radius: 3px !important;
676676

677677
.mdc-evolution-chip__action {
678678
box-shadow: none !important;

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

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
// Dialogs.
3535
.mat-mdc-dialog-container {
36-
--mdc-dialog-supporting-text-color: #{map.get($colors, text)};
36+
--mat-dialog-supporting-text-color: #{map.get($colors, text)};
3737

3838
color: map.get($colors, text);
3939
}
@@ -131,9 +131,9 @@
131131
&.mat-mdc-form-field {
132132
color: map.get($colors, hint-color);
133133

134-
--mdc-outlined-text-field-outline-color: #{map.get($colors, divider)};
135-
--mdc-outlined-text-field-disabled-outline-color: #{map.get($colors, divider-disabled)};
136-
--mdc-outlined-text-field-hover-outline-color: #{map.get($colors, secondary-dark)};
134+
--mat-outlined-text-field-outline-color: #{map.get($colors, divider)};
135+
--mat-outlined-text-field-disabled-outline-color: #{map.get($colors, divider-disabled)};
136+
--mat-outlined-text-field-hover-outline-color: #{map.get($colors, secondary-dark)};
137137
}
138138

139139
}
@@ -155,8 +155,8 @@
155155
.mat-mdc-button,
156156
.mat-mdc-unelevated-button,
157157
.mat-mdc-raised-button {
158-
--mdc-filled-button-container-color: #{map.get($colors, primary)};
159-
--mdc-filled-button-label-text-color: #fff;
158+
--mat-filled-button-container-color: #{map.get($colors, primary)};
159+
--mat-filled-button-label-text-color: #fff;
160160

161161
&:hover:not([disabled]) {
162162
background-color: map.get($colors, primary-hover);
@@ -265,43 +265,42 @@
265265

266266
.mat-mdc-radio-button {
267267
&.mat-accent {
268-
--mdc-radio-selected-icon-color: #{map.get($colors, primary)};
269-
--mat-radio-checked-ripple-color: none;
270-
--mdc-radio-selected-pressed-icon-color: var(--mdc-radio-selected-icon-color);
271-
--mdc-radio-selected-hover-icon-color: var(--mdc-radio-selected-icon-color);
272-
--mdc-radio-selected-focus-icon-color: var(--mdc-radio-selected-icon-color);
273-
--mdc-radio-unselected-icon-color: #{map.get($colors, text-secondary)};
268+
--mat-radio-selected-icon-color: #{map.get($colors, primary)};
269+
--mat-radio-selected-pressed-icon-color: var(--mat-radio-selected-icon-color);
270+
--mat-radio-selected-hover-icon-color: var(--mat-radio-selected-icon-color);
271+
--mat-radio-selected-focus-icon-color: var(--mat-radio-selected-icon-color);
272+
--mat-radio-unselected-icon-color: #{map.get($colors, text-secondary)};
274273
}
275274
}
276275

277276
.mat-mdc-slide-toggle {
278277
&.mat-accent,
279278
button {
280279
// track color
281-
--mdc-switch-selected-track-color: #{map.get($colors, primary)};
282-
--mdc-switch-selected-focus-track-color: var(--mdc-switch-selected-track-color);
283-
--mdc-switch-selected-hover-track-color: var(--mdc-switch-selected-track-color);
284-
--mdc-switch-selected-pressed-track-color: var(--mdc-switch-selected-track-color);
285-
--mdc-switch-unselected-track-color: #{map.get($colors, divider)};
286-
--mdc-switch-unselected-focus-track-color: var(--mdc-switch-unselected-track-color);
287-
--mdc-switch-unselected-hover-track-color: var(--mdc-switch-unselected-track-color);
288-
--mdc-switch-unselected-pressed-track-color: var(--mdc-switch-unselected-track-color);
280+
--mat-switch-selected-track-color: #{map.get($colors, primary)};
281+
--mat-switch-selected-focus-track-color: var(--mat-switch-selected-track-color);
282+
--mat-switch-selected-hover-track-color: var(--mat-switch-selected-track-color);
283+
--mat-switch-selected-pressed-track-color: var(--mat-switch-selected-track-color);
284+
--mat-switch-unselected-track-color: #{map.get($colors, divider)};
285+
--mat-switch-unselected-focus-track-color: var(--mat-switch-unselected-track-color);
286+
--mat-switch-unselected-hover-track-color: var(--mat-switch-unselected-track-color);
287+
--mat-switch-unselected-pressed-track-color: var(--mat-switch-unselected-track-color);
289288

290289
// handle color
291-
--mdc-switch-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
292-
--mdc-switch-selected-handle-color: #fafafa;
293-
--mdc-switch-selected-focus-handle-color: var(--mdc-switch-selected-handle-color);
294-
--mdc-switch-selected-hover-handle-color: var(--mdc-switch-selected-handle-color);
295-
--mdc-switch-selected-pressed-handle-color: var(--mdc-switch-selected-handle-color);
296-
--mdc-switch-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
297-
--mdc-switch-unselected-focus-handle-color: var(--mdc-switch-unselected-handle-color);
298-
--mdc-switch-unselected-hover-handle-color: var(--mdc-switch-unselected-handle-color);
299-
--mdc-switch-unselected-pressed-handle-color: var(--mdc-switch-unselected-handle-color);
290+
--mat-switch-handle-surface-color: #{map.get($colors, slide-toggle-handle-color)};
291+
--mat-switch-selected-handle-color: #fafafa;
292+
--mat-switch-selected-focus-handle-color: var(--mat-switch-selected-handle-color);
293+
--mat-switch-selected-hover-handle-color: var(--mat-switch-selected-handle-color);
294+
--mat-switch-selected-pressed-handle-color: var(--mat-switch-selected-handle-color);
295+
--mat-switch-unselected-handle-color: #{map.get($colors, slide-toggle-handle-color)};
296+
--mat-switch-unselected-focus-handle-color: var(--mat-switch-unselected-handle-color);
297+
--mat-switch-unselected-hover-handle-color: var(--mat-switch-unselected-handle-color);
298+
--mat-switch-unselected-pressed-handle-color: var(--mat-switch-unselected-handle-color);
300299

301300
// ripple color
302-
--mdc-switch-selected-focus-state-layer-color: var(--mdc-switch-selected-track-color);
303-
--mdc-switch-selected-hover-state-layer-color: var(--mdc-switch-selected-track-color);
304-
--mdc-switch-selected-pressed-state-layer-color: var(--mdc-switch-selected-track-color);
301+
--mat-switch-selected-focus-state-layer-color: var(--mat-switch-selected-track-color);
302+
--mat-switch-selected-hover-state-layer-color: var(--mat-switch-selected-track-color);
303+
--mat-switch-selected-pressed-state-layer-color: var(--mat-switch-selected-track-color);
305304
}
306305
}
307306

@@ -321,22 +320,22 @@
321320
}
322321

323322
.mdc-checkbox {
324-
--mdc-checkbox-selected-icon-color: #{map.get($colors, primary)};
325-
--mdc-checkbox-selected-hover-icon-color: var(--mdc-checkbox-selected-icon-color);
326-
--mdc-checkbox-selected-focus-icon-color: var(--mdc-checkbox-selected-icon-color);
327-
--mdc-checkbox-selected-pressed-icon-color: var(--mdc-checkbox-selected-icon-color);
328-
--mdc-checkbox-selected-focus-state-layer-color: var(--mdc-checkbox-selected-icon-color);
329-
--mdc-checkbox-selected-pressed-state-layer-color: var(--mdc-checkbox-selected-icon-color);
330-
--mdc-checkbox-selected-focus-state-layer-opacity: 0;
331-
--mdc-checkbox-unselected-focus-state-layer-opacity: 0;
323+
--mat-checkbox-selected-icon-color: #{map.get($colors, primary)};
324+
--mat-checkbox-selected-hover-icon-color: var(--mat-checkbox-selected-icon-color);
325+
--mat-checkbox-selected-focus-icon-color: var(--mat-checkbox-selected-icon-color);
326+
--mat-checkbox-selected-pressed-icon-color: var(--mat-checkbox-selected-icon-color);
327+
--mat-checkbox-selected-focus-state-layer-color: var(--mat-checkbox-selected-icon-color);
328+
--mat-checkbox-selected-pressed-state-layer-color: var(--mat-checkbox-selected-icon-color);
329+
--mat-checkbox-selected-focus-state-layer-opacity: 0;
330+
--mat-checkbox-unselected-focus-state-layer-opacity: 0;
332331
}
333332

334333
// Chips.
335334
.mat-mdc-chip {
336-
--mdc-chip-elevated-container-color: transparent;
337-
--mdc-chip-label-text-color: #{map.get($colors, text)};
338-
--mdc-chip-focus-state-layer-color: none;
339-
--mdc-chip-hover-state-layer-color: none;
335+
--mat-chip-elevated-container-color: transparent;
336+
--mat-chip-label-text-color: #{map.get($colors, text)};
337+
--mat-chip-focus-state-layer-color: none;
338+
--mat-chip-hover-state-layer-color: none;
340339

341340
.mat-mdc-chip-remove {
342341
background-color: map.get($colors, text);
@@ -365,7 +364,7 @@
365364

366365
// Tooltips.
367366
.mat-mdc-tooltip {
368-
--mdc-plain-tooltip-container-color: #{map.get($colors, tooltip-background)};
367+
--mat-plain-tooltip-container-color: #{map.get($colors, tooltip-background)};
369368
}
370369

371370
// Spinners.
@@ -383,7 +382,7 @@
383382

384383
// Snackbar
385384
.mat-mdc-snack-bar-container {
386-
--mdc-snackbar-container-color: #{map.get($colors, option-background)};
385+
--mat-snackbar-container-color: #{map.get($colors, option-background)};
387386
}
388387

389388
// Progress bar
@@ -407,6 +406,6 @@
407406
}
408407

409408
.mat-mdc-progress-bar.mat-accent {
410-
--mdc-linear-progress-active-indicator-color: #{map.get($colors, indicator-orange)};
409+
--mat-linear-progress-active-indicator-color: #{map.get($colors, indicator-orange)};
411410
}
412411
}

‎modules/web/src/assets/themes/dark.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,13 @@ $colors-dark-palette: map.merge(
7979
500: #0072b0,
8080
)
8181
);
82-
$theme-dark: mat.m2-define-dark-theme(
83-
mat.m2-define-palette($colors-dark-palette),
84-
mat.m2-define-palette(mat.$m2-light-blue-palette),
85-
mat.m2-define-palette(mat.$m2-pink-palette)
86-
);
82+
$theme-dark: mat.m2-define-dark-theme((
83+
color: (
84+
primary: mat.m2-define-palette($colors-dark-palette),
85+
accent: mat.m2-define-palette(mat.$m2-light-blue-palette),
86+
warn: mat.m2-define-palette(mat.$m2-pink-palette)
87+
)
88+
));
8789
$background: map.get($theme-dark, background);
8890
$background: map.merge(
8991
$background,

‎modules/web/src/assets/themes/light.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,13 @@ $colors-light-palette: map.merge(
7575
500: #00517d,
7676
)
7777
);
78-
$theme-light: mat.m2-define-light-theme(
79-
mat.m2-define-palette($colors-light-palette),
80-
mat.m2-define-palette(mat.$m2-light-blue-palette),
81-
mat.m2-define-palette(mat.$m2-pink-palette)
82-
);
78+
$theme-light: mat.m2-define-light-theme((
79+
color: (
80+
primary: mat.m2-define-palette($colors-light-palette),
81+
accent: mat.m2-define-palette(mat.$m2-light-blue-palette),
82+
warn: mat.m2-define-palette(mat.$m2-pink-palette)
83+
)
84+
));
8385
$background: map.get($theme-light, background);
8486
$background: map.merge(
8587
$background,

0 commit comments

Comments
 (0)