chore(console): Angular 20 #10690 (#10768)

# Which Problems Are Solved


# How the Problems Are Solved

# Additional Changes

# Additional Context
- Closes #10690

console/src/styles.scss

@@ -1,17 +1,23 @@
 @use '@angular/material' as mat;
+@use '@angular/material/core/m2/palette' as m2;
+@use 'sass:map';
+// https://github.com/lipis/flag-icons/issues/1395
+@forward '../node_modules/flag-icons/sass/variables' with (
+  $flag-icons-use-square: false
+);
+@use '../node_modules/flag-icons/sass/flag-icons-base';
+@use '../node_modules/flag-icons/sass/flag-icons-list';
 
 @import 'codemirror/lib/codemirror.css';
 @import './component-themes';
 @import './styles/lato-font.scss';
 @import './styles/ailerons.scss';
-@import '@angular/material/theming';
-@import '/node_modules/flag-icons/css/flag-icons.min.css';
 @import './styles/palette-helper.scss';
 @import './styles/palette.scss';
 
-$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
+$material-design-icons-font-directory-path: 'material-design-icons-iconfont/dist/fonts/';
 
-@import 'material-design-icons-iconfont/src/material-design-icons.scss';
+@import 'material-design-icons-iconfont/src/material-design-icons';
 
 :root {
   --mat-table-row-item-label-text-size: 14px;
@@ -156,85 +162,85 @@ $cnsl-dark-theme-secondary-text: var(--theme-dark-secondary-text);
 $cnsl-light-theme-secondary-text: var(--theme-light-secondary-text);
 
 $cnsl-dark-theme-background: (
-  status-bar: map_get($cnsl-dark-background, 300),
-  app-bar: map_get($cnsl-dark-background, 500),
-  background: map_get($cnsl-dark-background, 500),
+  status-bar: map.get($cnsl-dark-background, 300),
+  app-bar: map.get($cnsl-dark-background, 500),
+  background: map.get($cnsl-dark-background, 500),
   hover: rgba(black, 0.04),
   card: #222,
   // set fixed color due to https://github.com/angular/components/pull/14253
   // change where a scss mix function can't use a css var
-  cards: map_get($cnsl-dark-background, 400),
-  cardhovered: map_get($cnsl-dark-background, 300),
-  contributor: map_get($cnsl-dark-background, 400),
-  contributor-avatar: map_get($cnsl-dark-background, 300),
-  dialog: map_get($cnsl-dark-background, 500),
+  cards: map.get($cnsl-dark-background, 400),
+  cardhovered: map.get($cnsl-dark-background, 300),
+  contributor: map.get($cnsl-dark-background, 400),
+  contributor-avatar: map.get($cnsl-dark-background, 300),
+  dialog: map.get($cnsl-dark-background, 500),
   disabled-button: rgba(black, 0.12),
   raised-button: white,
-  focused-button: $dark-focused,
-  selected-button: map_get($cnsl-dark-background, 300),
-  selected-disabled-button: map_get($cnsl-dark-background, 400),
-  disabled-button-toggle: map_get($cnsl-dark-background, 200),
-  unselected-chip: map_get($cnsl-dark-background, 300),
-  disabled-list-option: map_get($cnsl-dark-background, 200),
-  tooltip: map_get($mat-gray, 700),
-  infosection: map_get($cnsl-dark-background, 300),
+  focused-button: m2.$dark-focused,
+  selected-button: map.get($cnsl-dark-background, 300),
+  selected-disabled-button: map.get($cnsl-dark-background, 400),
+  disabled-button-toggle: map.get($cnsl-dark-background, 200),
+  unselected-chip: map.get($cnsl-dark-background, 300),
+  disabled-list-option: map.get($cnsl-dark-background, 200),
+  tooltip: map.get(mat.$m2-gray-palette, 700),
+  infosection: map.get($cnsl-dark-background, 300),
   warninfosection: #741f2c4a,
   alertinfosection: #92400e50,
-  successinfosection: map_get($cnsl-dark-background, 300),
-  state: map_get($cnsl-dark-background, 300),
+  successinfosection: map.get($cnsl-dark-background, 300),
+  state: map.get($cnsl-dark-background, 300),
   state-active: #68cf8340,
   state-inactive: #af455359,
-  toolbar: rgba(map_get($cnsl-dark-background, 500), 0.9),
-  moz-toolbar: map_get($cnsl-dark-background, 500),
+  toolbar: rgba(map.get($cnsl-dark-background, 500), 0.9),
+  moz-toolbar: map.get($cnsl-dark-background, 500),
   footer: #00000020,
   metadata-section: #00000020,
   alert: #fbbf24,
-  toast: map_get($cnsl-dark-background, 400),
+  toast: map.get($cnsl-dark-background, 400),
 );
 
 $cnsl-light-theme-background: (
-  status-bar: map_get($cnsl-light-background, 300),
-  app-bar: map_get($cnsl-light-background, 100),
-  background: map_get($cnsl-light-background, 500),
+  status-bar: map.get($cnsl-light-background, 300),
+  app-bar: map.get($cnsl-light-background, 100),
+  background: map.get($cnsl-light-background, 500),
   hover: rgba(black, 0.04),
   contributor: #00000010,
-  contributor-avatar: map_get($caos-light-primary, 300),
+  contributor-avatar: map.get($caos-light-primary, 300),
   card: #fff,
   // set fixed color due to https://github.com/angular/components/pull/14253
   // change where a scss mix function can't use a css var
-  cards: map_get($cnsl-light-background, 400),
-  cardhovered: map_get($cnsl-light-background, 300),
-  dialog: map_get($cnsl-light-background, 500),
+  cards: map.get($cnsl-light-background, 400),
+  cardhovered: map.get($cnsl-light-background, 300),
+  dialog: map.get($cnsl-light-background, 500),
   disabled-button: rgba(black, 0.12),
   raised-button: white,
-  focused-button: $light-focused,
-  selected-button: map_get($cnsl-light-background, 300),
-  selected-disabled-button: map_get($cnsl-light-background, 400),
-  disabled-button-toggle: map_get($cnsl-light-background, 200),
-  unselected-chip: map_get($cnsl-light-background, 300),
-  disabled-list-option: map_get($cnsl-light-background, 200),
-  tooltip: map_get($mat-gray, 700),
-  infosection: map_get($cnsl-light-background, 600),
+  focused-button: m2.$light-focused,
+  selected-button: map.get($cnsl-light-background, 300),
+  selected-disabled-button: map.get($cnsl-light-background, 400),
+  disabled-button-toggle: map.get($cnsl-light-background, 200),
+  unselected-chip: map.get($cnsl-light-background, 300),
+  disabled-list-option: map.get($cnsl-light-background, 200),
+  tooltip: map.get(mat.$m2-gray-palette, 700),
+  infosection: map.get($cnsl-light-background, 600),
   warninfosection: #ffc1c1,
   alertinfosection: rgb(251, 191, 36),
   successinfosection: #cbf4c9,
-  toolbar: rgba(map_get($cnsl-light-background, 500), 0.9),
-  moz-toolbar: map_get($cnsl-light-background, 500),
+  toolbar: rgba(map.get($cnsl-light-background, 500), 0.9),
+  moz-toolbar: map.get($cnsl-light-background, 500),
   footer: #00000008,
   metadata-section: #605f5f08,
   alert: rgb(251, 191, 36),
-  toast: map_get($cnsl-light-background, 400),
+  toast: map.get($cnsl-light-background, 400),
 );
 
 $cnsl-dark-theme-foreground: (
   base: white,
-  divider: $light-dividers,
-  dividers: $light-dividers,
-  disabled: $light-disabled-text,
+  divider: m2.$light-dividers,
+  dividers: m2.$light-dividers,
+  disabled: m2.$light-disabled-text,
   disabled-button: rgba(white, 0.26),
-  disabled-text: $light-disabled-text,
+  disabled-text: m2.$light-disabled-text,
   elevation: black,
-  hint-text: $light-disabled-text,
+  hint-text: m2.$light-disabled-text,
   secondary-text: $cnsl-dark-theme-secondary-text,
   placeholder-text: rgba(white, 0.4),
   icon: rgba(white, 0.54),
@@ -247,19 +253,19 @@ $cnsl-dark-theme-foreground: (
   warninfosection: #ffc1c1,
   alertinfosection: rgb(251, 191, 36),
   successinfosection: #cbf4c9,
-  toolbar-items: map-get(map-get($caos-dark-primary, contrast), 500),
+  toolbar-items: map.get($caos-dark-primary, contrast, 500),
   slash: #ffffff6e,
 );
 
 $cnsl-light-theme-foreground: (
   base: black,
-  divider: $dark-dividers,
-  dividers: $dark-dividers,
-  disabled: $dark-disabled-text,
+  divider: m2.$dark-dividers,
+  dividers: m2.$dark-dividers,
+  disabled: m2.$dark-disabled-text,
   disabled-button: rgba(black, 0.26),
-  disabled-text: $dark-disabled-text,
+  disabled-text: m2.$dark-disabled-text,
   elevation: black,
-  hint-text: $dark-disabled-text,
+  hint-text: m2.$dark-disabled-text,
   secondary-text: $cnsl-light-theme-secondary-text,
   placeholder-text: rgba(black, 0.3),
   icon: rgba(black, 0.54),
@@ -268,15 +274,15 @@ $cnsl-light-theme-foreground: (
   slider-min: rgba(black, 0.87),
   slider-off: rgba(black, 0.26),
   slider-off-active: rgba(black, 0.38),
-  infosection: map-get(map-get($cnsl-light-background, contrast), 600),
+  infosection: map.get($cnsl-light-background, contrast, 600),
   warninfosection: #620e0e,
   alertinfosection: rgb(146, 64, 14),
   successinfosection: #0e6245,
-  toolbar-items: map-get(map-get($caos-light-primary, contrast), 500),
+  toolbar-items: map.get($caos-light-primary, contrast, 500),
   slash: #0000006e,
 );
 
-$custom-level: mat.define-typography-level(
+$custom-level: mat.m2-define-typography-level(
   $font-family: Lato,
   $font-weight: 500,
   $font-size: 14px,
@@ -284,51 +290,52 @@ $custom-level: mat.define-typography-level(
   $letter-spacing: normal,
 );
 
-$custom-body-level: mat.define-typography-level(
+$custom-body-level: mat.m2-define-typography-level(
   $font-family: Lato,
   $font-weight: 500,
   $font-size: 16px,
   $letter-spacing: normal,
 );
 
-$custom-caption-level: mat.define-typography-level(
+$custom-caption-level: mat.m2-define-typography-level(
   $font-family: Lato,
   $font-weight: 500,
   $font-size: 12px,
   $letter-spacing: normal,
 );
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
   $font-family: Lato,
   $button: $custom-level,
   $body-1: $custom-body-level,
   $caption: $custom-caption-level,
 );
 
-$caos-light-app-theme: mat.define-light-theme(
+$caos-light-app-theme: mat.m2-define-light-theme(
   (
     color: (
-      primary: mat-palette($caos-light-primary),
-      accent: mat-palette($caos-light-primary),
-      warn: mat-palette($caos-light-warn),
+      primary: $caos-light-primary,
+      accent: $caos-light-primary,
+      warn: $caos-light-warn,
     ),
     typography: $custom-typography,
     density: 0,
   )
 );
 
-$caos-dark-app-theme: mat.define-dark-theme(
+$caos-dark-app-theme: mat.m2-define-dark-theme(
   (
     color: (
-      primary: mat-palette($caos-dark-primary),
-      accent: mat-palette($caos-dark-primary),
-      warn: mat-palette($caos-dark-warn),
+      primary: $caos-dark-primary,
+      accent: $caos-dark-primary,
+      warn: $caos-dark-warn,
     ),
     typography: $custom-typography,
     density: 0,
   )
 );
 
+//@debug logger.pretty-map($caos-light-app-theme);
 $caos-light-app-theme: modify-palette($caos-light-app-theme, background, $cnsl-light-theme-background);
 $caos-dark-app-theme: modify-palette($caos-dark-app-theme, background, $cnsl-dark-theme-background);
 
@@ -336,7 +343,6 @@ $caos-light-app-theme: modify-palette($caos-light-app-theme, foreground, $cnsl-l
 $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dark-theme-foreground);
 
 @include mat.all-component-typographies($custom-typography);
-@include mat.core();
 
 .mat-mdc-dialog-container,
 .mat-mdc-raised-button,
@@ -387,81 +393,85 @@ $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dar
 @include mat.all-component-themes($caos-dark-app-theme);
 
 .progress {
-  --mdc-linear-progress-active-indicator-color: var(--success);
-  --mdc-linear-progress-track-height: 8px !important;
-  --mdc-linear-progress-track-color: #00000010;
+  --mat-progress-bar-active-indicator-color: var(--success);
+  --mat-progress-bar-track-height: 8px !important;
+  --mat-progress-bar-track-color: #00000010;
   --mat-select-enabled-trigger-text-color: #000;
-  --mdc-linear-progress-active-indicator-height: 8px !important;
+  --mat-progress-bar-active-indicator-height: 8px !important;
 }
 
 .light-theme {
   @include component-themes($caos-light-app-theme);
   @include mat.all-component-colors($caos-light-app-theme);
 
-  $background: map-get($caos-light-app-theme, background);
-  $foreground: map-get($caos-light-app-theme, foreground);
-  $primary: map-get($caos-light-app-theme, primary);
+  $background: map.get($caos-light-app-theme, background);
+  $foreground: map.get($caos-light-app-theme, foreground);
+
+  @include mat.dialog-overrides(
+    (
+      container-color: map.get($background, background),
+    )
+  );
 
   --warn: #cd3d56;
   --success: #10b981;
-  $border-color: map-get($foreground, divider);
+  $border-color: map.get($foreground, divider);
 
   --mat-select-enabled-trigger-text-color: #000;
   --mat-table-row-item-label-text-size: 14px;
   --mat-menu-item-label-text-size: 14px;
 
   .progress {
-    --mdc-linear-progress-track-color: #00000010;
-    --mdc-linear-progress-active-indicator-color: var(--success);
+    --mat-progress-bar-track-color: #00000010;
+    --mat-progress-bar-active-indicator-color: var(--success);
   }
 
   .mat-mdc-menu-panel {
-    background-color: map-get($background, cards);
+    background-color: map.get($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     border-radius: 6px;
     min-height: fit-content;
   }
 
   .mat-mdc-select-panel {
-    background-color: map-get($background, cards);
+    background-color: map.get($background, cards);
   }
 
   .mat-mdc-option {
-    background-color: map-get($background, cards);
+    background-color: map.get($background, cards);
 
     &:hover {
-      background-color: map-get($background, cardhovered);
+      background-color: map.get($background, cardhovered);
     }
   }
 
   .mat-button-toggle {
-    background-color: mat.get-color-from-palette($background, cards);
+    background-color: mat.m2-get-color-from-palette($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &.mat-button-toggle-checked {
-      background-color: mat.get-color-from-palette($background, background);
+      background-color: mat.m2-get-color-from-palette($background, background);
     }
   }
 
   .main-container,
-  .mat-mdc-dialog-container,
   .mat-calendar {
-    background-color: map-get($background, background);
+    background-color: map.get($background, background);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-    background-color: map-get($background, background);
+    background-color: map.get($background, background);
     border-radius: 8px;
   }
 
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    background-color: map-get($background, background);
+    background-color: map.get($background, background);
   }
 
   ::-webkit-scrollbar-thumb {
@@ -471,7 +481,7 @@ $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dar
   }
 
   .root-header {
-    box-shadow: inset 0 -1px map-get($cnsl-light-theme-foreground, divider);
+    box-shadow: inset 0 -1px map.get($cnsl-light-theme-foreground, divider);
   }
 
   .desc-link {
@@ -480,68 +490,72 @@ $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dar
 }
 
 .dark-theme {
-  $background: map-get($caos-dark-app-theme, background);
-  $foreground: map-get($caos-dark-app-theme, foreground);
-  $primary: map-get($caos-dark-app-theme, primary);
+  $background: map.get($caos-dark-app-theme, background);
+  $foreground: map.get($caos-dark-app-theme, foreground);
+
+  @include mat.dialog-overrides(
+    (
+      container-color: map.get($background, background),
+    )
+  );
 
   --warn: #ff3b5b;
   --success: #10b981;
-  $border-color: map-get($foreground, divider);
+  $border-color: map.get($foreground, divider);
 
   --mat-select-enabled-trigger-text-color: #fff;
   --mat-table-row-item-label-text-size: 14px;
   --mat-menu-item-label-text-size: 14px;
 
   .progress {
-    --mdc-linear-progress-track-color: #ffffff20;
-    --mdc-linear-progress-active-indicator-color: var(--success);
+    --mat-progress-bar-track-color: #ffffff20;
+    --mat-progress-bar-active-indicator-color: var(--success);
   }
 
   .main-container {
-    background-color: mat.get-color-from-palette($background, background);
-    color: map-get($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, background);
+    color: map.get($foreground, text);
   }
 
   .mat-mdc-menu-panel {
-    background-color: map-get($background, cards);
+    background-color: map.get($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     border-radius: 6px;
     min-height: fit-content;
   }
 
   .mat-mdc-select-panel {
-    background-color: map-get($background, cards);
+    background-color: map.get($background, cards);
   }
 
-  .mat-mdc-option {
-    background-color: map-get($background, cards);
+  .mat-mdc-option.mdc-list-item {
+    background-color: map.get($background, cards);
 
     &:hover {
-      background-color: map-get($background, cardhovered);
+      background-color: map.get($background, cardhovered);
     }
   }
 
   .mat-button-toggle {
-    background-color: mat.get-color-from-palette($background, cards);
+    background-color: mat.m2-get-color-from-palette($background, cards);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &.mat-button-toggle-checked {
-      background-color: mat.get-color-from-palette($background, background);
+      background-color: mat.m2-get-color-from-palette($background, background);
     }
   }
 
   .main-container,
-  .mat-mdc-dialog-container,
   .mat-calendar {
-    background-color: mat.get-color-from-palette($background, background);
+    background-color: mat.m2-get-color-from-palette($background, background);
     transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: map-get($background, background);
+    background-color: map.get($background, background);
     border-radius: 8px;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
   }
@@ -549,7 +563,7 @@ $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dar
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    background-color: map-get($background, background);
+    background-color: map.get($background, background);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
   }
 
@@ -561,7 +575,7 @@ $caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dar
   }
 
   .root-header {
-    box-shadow: inset 0 -1px map-get($cnsl-dark-theme-foreground, divider);
+    box-shadow: inset 0 -1px map.get($cnsl-dark-theme-foreground, divider);
   }
 
   .desc-link {