fix(portal-next): adjust colors to m3 palette

Author: jourdiw

gravitee-apim-portal-webui-next/src/components/api-filter/api-filter.component.html

@@ -32,7 +32,7 @@
     <mat-icon>expand_more</mat-icon>
   </mat-button-toggle>
 </mat-button-toggle-group>
-<mat-menu #restOfFilters="matMenu">
+<mat-menu #restOfFilters="matMenu" xPosition="before">
   @for (filter of filterList | slice: 4; track filter.id) {
     <button class="m3-label-large" mat-menu-item (click)="selectOption(filter)">{{ filter.name }}</button>
   }

gravitee-apim-portal-webui-next/src/components/api-filter/api-filter.component.scss

@@ -13,17 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '../../scss/theme/theme';
 
 .api-filter {
   --mat-standard-button-toggle-shape: 100px;
-
-  height: 40px;
-  align-items: center;
+  --mat-standard-button-toggle-selected-state-background-color: var(--mdc-filled-button-container-color);
+  --mat-standard-button-toggle-selected-state-text-color: var(--mdc-filled-button-label-text-color);
 
   &__button {
-    padding: 0 12px;
-
-    --mat-standard-button-toggle-selected-state-background-color: #eaddff;
+    min-width: 130px;
   }
 }

gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar-button/nav-bar-button.component.html

@@ -17,7 +17,7 @@
 -->
 <span [routerLink]="path" routerLinkActive #rla="routerLinkActive">
   @if (rla.isActive) {
-    <button [routerLink]="path" mat-flat-button color="accent">
+    <button [routerLink]="path" mat-flat-button color="primary">
       <ng-container *ngTemplateOutlet="buttonLabel"></ng-container>
     </button>
   } @else {

gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html

@@ -25,7 +25,7 @@
       <app-user-avatar [user]="currentUser()" />
     } @else {
       <app-nav-bar-button i18n="@@logIn" [path]="['log-in']">Log in</app-nav-bar-button>
-      <button i18n="@@signUp" mat-flat-button color="primary">Sign up</button>
+      <button i18n="@@signUp" mat-flat-button class="secondary-button">Sign up</button>
     }
   </div>
 </div>

gravitee-apim-portal-webui-next/src/components/page-tree/page-tree.component.scss

@@ -22,12 +22,17 @@
 
 .file-tree {
   &__node {
-    border-radius: 28px;
-    font-weight: 600;
+    border-radius: var(--mat-list-active-indicator-shape);
+    color: var(--mdc-list-list-item-label-text-color);
+    font-family: var(--mdc-list-list-item-label-text-font);
+    font-size: var(--mdc-list-list-item-label-text-size);
+    font-weight: var(--mdc-list-list-item-label-text-weight);
+    letter-spacing: var(--mdc-list-list-item-label-text-tracking);
+    line-height: var(--mdc-list-list-item-label-text-line-height);
     transition: 0.1s;
 
     &:hover {
-      background-color: theme.$secondary-main-color;
+      background-color: color-mix(in srgb, var(--mdc-list-list-item-hover-state-layer-color), transparent 90%);
     }
 
     &__container {
@@ -45,5 +50,6 @@
 }
 
 .active {
-  background-color: theme.$secondary-main-color;
+  background-color: var(--mat-list-active-indicator-color);
+  color: var(--mdc-list-list-item-selected-trailing-icon-color);
 }

gravitee-apim-portal-webui-next/src/components/user-avatar/user-avatar.component.html

@@ -15,7 +15,9 @@
     limitations under the License.
 
 -->
-<button class="user-avatar m3-title-medium" [matMenuTriggerFor]="user">{{ initials }}</button>
+<button mat-stroked-button color="primary" class="user-avatar m3-title-medium" [matMenuTriggerFor]="user">
+  {{ initials }}
+</button>
 <mat-menu #user="matMenu">
   <button i18n="@@userAvatarMenuLogOut" mat-menu-item [routerLink]="['log-out']">Log out</button>
 </mat-menu>

gravitee-apim-portal-webui-next/src/components/user-avatar/user-avatar.component.scss

@@ -16,12 +16,10 @@
 @import '../../scss/theme/theme';
 
 .user-avatar {
+  --mdc-outlined-button-container-height: 48px;
+  --mdc-outlined-button-container-shape: 50%;
+  --mdc-outlined-button-label-text-transform: uppercase;
+
   width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 50%;
-  background-color: $banner-background-color;
-  color: $banner-text-color;
-  cursor: pointer;
-  text-transform: uppercase;
+  min-width: 48px;
 }

gravitee-apim-portal-webui-next/src/scss/theme/m3-theme.scss

@@ -31,13 +31,13 @@ NOTE: This file is to be deleted once material 3 has an easier way to create pal
     35: hsl($h, $s, calc($l * 0.7)),
     40: hsl($h, $s, calc($l * 0.8)),
     50: hsl($h, $s, $l),
-    60: hsl($h, $s, calc($l + (100 - l) * 0.2)),
-    70: hsl($h, $s, calc($l + (100 - l) * 0.4)),
-    80: hsl($h, $s, calc($l + (100 - l) * 0.6)),
-    90: hsl($h, $s, calc($l + (100 - l) * 0.8)),
-    95: hsl($h, $s, calc($l + (100 - l) * 0.9)),
-    98: hsl($h, $s, calc($l + (100 - l) * 0.96)),
-    99: hsl($h, $s, calc($l + (100 - l) * 0.98)),
+    60: hsl($h, $s, calc($l + (100% - $l) * 0.2)),
+    70: hsl($h, $s, calc($l + (100% - $l) * 0.4)),
+    80: hsl($h, $s, calc($l + (100% - $l) * 0.6)),
+    90: hsl($h, $s, calc($l + (100% - $l) * 0.8)),
+    95: hsl($h, $s, calc($l + (100% - $l) * 0.9)),
+    98: hsl($h, $s, calc($l + (100% - $l) * 0.96)),
+    99: hsl($h, $s, calc($l + (100% - $l) * 0.98)),
     100: hsl($h, $s, 100%)
   );
 }