@gravitee/ui-particles-angular 12.22.1 → 12.22.2-angular-18-96ea9e3

package/lib/gio-form-cron/gio-form-cron.adapter.d.ts

@@ -14,5 +14,5 @@ export declare const CRON_DISPLAY_MODES: readonly ["secondly", "minutely", "hour
 export type CronDisplayMode = (typeof CRON_DISPLAY_MODES)[number];
 export declare const getDefaultCronDisplay: (mode: CronDisplayMode) => CronDisplay;
 export declare const parseCronExpression: (cronExpression: string) => CronDisplay;
-export declare const toCronExpression: (cronDisplay: Omit<CronDisplay, 'cronDescription'>) => string;
+export declare const toCronExpression: (cronDisplay: Omit<CronDisplay, "cronDescription">) => string;
 export declare const toCronDescription: (cronExpression: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-particles-angular",
-  "version": "12.22.1",
+  "version": "12.22.2-angular-18-96ea9e3",
   "description": "Gravitee.io - UI Particles Angular",
   "repository": {
     "type": "git",
@@ -15,16 +15,16 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/animations": "^16.0.0 || ^17.0.0",
-    "@angular/cdk": "^16.0.0 || ^17.0.0",
-    "@angular/common": "^16.0.0 || ^17.0.0",
-    "@angular/core": "^16.0.0 || ^17.0.0",
-    "@angular/forms": "^16.0.0 || ^17.0.0",
-    "@angular/material": "^16.0.0 || ^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
     "@asciidoctor/core": "^3.0.0",
     "@ngx-formly/core": "^6.2.2",
     "@ngx-formly/material": "^6.2.2",
-    "ngx-file-helpers": "^10.0.0 || ^11.0.0",
+    "ngx-file-helpers": "^11.0.0 || ^12.0.0",
     "prismjs": "^1.29.0"
   },
   "peerDependenciesMeta": {

package/src/lib/gio-badge/gio-badge.scss

@@ -33,10 +33,10 @@
     border-radius: 16px;
     margin-right: 4px;
     margin-left: 4px;
-    background-color: mat.get-color-from-palette(palettes.$mat-primary-palette, lighter);
-    color: mat.get-color-from-palette(palettes.$mat-primary-palette, lighter-contrast);
-    font-size: mat.font-size(theme.$mat-typography, caption);
-    font-weight: mat.font-weight(theme.$mat-typography, caption);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, lighter);
+    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, lighter-contrast);
+    font-size: mat.m2-font-size(theme.$mat-typography, caption);
+    font-weight: mat.m2-font-weight(theme.$mat-typography, caption);
     line-height: 16px;
     text-align: center;
     text-transform: capitalize;
@@ -76,43 +76,43 @@
   .gio-badge-accent {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-accent-palette, lighter);
-    color: mat.get-color-from-palette(palettes.$mat-accent-palette, lighter-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, lighter);
+    color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, lighter-contrast);
   }
 
   .gio-badge-neutral {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-dove-palette, darker10);
-    color: mat.get-color-from-palette(palettes.$mat-dove-palette, darker10-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker10);
+    color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker10-contrast);
   }
 
   .gio-badge-white {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-basic-palette, white);
-    color: mat.get-color-from-palette(palettes.$mat-basic-palette, white-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-basic-palette, white);
+    color: mat.m2-get-color-from-palette(palettes.$mat-basic-palette, white-contrast);
   }
 
   .gio-badge-success {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-success-palette, lighter);
-    color: mat.get-color-from-palette(palettes.$mat-success-palette, lighter-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-success-palette, lighter);
+    color: mat.m2-get-color-from-palette(palettes.$mat-success-palette, lighter-contrast);
   }
 
   .gio-badge-error {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-error-palette, lighter);
-    color: mat.get-color-from-palette(palettes.$mat-error-palette, lighter-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-error-palette, lighter);
+    color: mat.m2-get-color-from-palette(palettes.$mat-error-palette, lighter-contrast);
   }
 
   .gio-badge-warning {
     @extend %gio-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-warning-palette, lighter);
-    color: mat.get-color-from-palette(palettes.$mat-warning-palette, lighter-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-warning-palette, lighter);
+    color: mat.m2-get-color-from-palette(palettes.$mat-warning-palette, lighter-contrast);
   }
 }
 

package/src/lib/gio-button-toggle-group/gio-button-toggle-group.scss

@@ -24,11 +24,11 @@ $typography: map.get(theme.$mat-theme, typography);
   width: fit-content;
   height: 44px;
   padding: 4px;
-  border: solid 1px mat.get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
+  border: solid 1px mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
   margin-bottom: 16px;
 
   .mat-button-toggle {
-    @include mat.typography-level($typography, subtitle-2);
+    @include mat.m2-typography-level($typography, subtitle-2);
 
     display: flex;
     flex-direction: row;
@@ -37,13 +37,13 @@ $typography: map.get(theme.$mat-theme, typography);
   }
 
   .mat-button-toggle.mat-button-toggle-checked:not(.mat-button-toggle-disabled) {
-    background-color: mat.get-color-from-palette(palettes.$mat-accent-palette, 'darker20');
-    color: mat.get-color-from-palette(palettes.$mat-accent-palette, default-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, 'darker20');
+    color: mat.m2-get-color-from-palette(palettes.$mat-accent-palette, default-contrast);
   }
 
   .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
-    background-color: mat.get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
-    color: mat.get-color-from-palette(palettes.$mat-dove-palette, darker20-contrast, 0.4);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
+    color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker20-contrast, 0.4);
   }
 
   .mat-button-toggle.mat-button-toggle + .mat-button-toggle {

package/src/lib/gio-description-list/gio-description-list.scss

@@ -30,20 +30,20 @@ $typography: map.get(theme.$mat-theme, typography);
     dt {
       flex: 1 1 30%;
       padding: 6px 8px;
-      color: mat.get-color-from-palette(palettes.$mat-space-palette, 'lighter40');
-      @include mat.typography-level($typography, body-1);
+      color: mat.m2-get-color-from-palette(palettes.$mat-space-palette, 'lighter40');
+      @include mat.m2-typography-level($typography, body-1);
     }
 
     dd {
       flex: 1 1 70%;
       padding: 6px 8px;
       margin: 0;
-      @include mat.typography-level($typography, subtitle-2);
+      @include mat.m2-typography-level($typography, subtitle-2);
     }
 
     dd ~ dd,
     dd ~ dt {
-      border-top: 1px solid mat.get-color-from-palette($foreground, divider);
+      border-top: 1px solid mat.m2-get-color-from-palette($foreground, divider);
     }
   }
 }

package/src/lib/gio-method-badge/gio-method-badge.scss

@@ -33,8 +33,8 @@
     border-radius: 6px;
     margin-right: 4px;
     margin-left: 4px;
-    font-size: mat.font-size(theme.$mat-typography, caption);
-    font-weight: mat.font-weight(theme.$mat-typography, caption);
+    font-size: mat.m2-font-size(theme.$mat-typography, caption);
+    font-weight: mat.m2-font-weight(theme.$mat-typography, caption);
     line-height: 16px;
     text-align: center;
     text-transform: uppercase;
@@ -49,70 +49,70 @@
   .gio-method-badge-post {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, post);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, post-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, post);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, post-contrast);
   }
 
   .gio-method-badge-get {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, get);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, get-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, get);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, get-contrast);
   }
 
   .gio-method-badge-patch {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, patch);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, patch-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, patch);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, patch-contrast);
   }
 
   .gio-method-badge-put {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, put);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, put-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, put);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, put-contrast);
   }
 
   .gio-method-badge-delete {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, delete);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, delete-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, delete);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, delete-contrast);
   }
 
   .gio-method-badge-options {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, option);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, option-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, option);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, option-contrast);
   }
 
   .gio-method-badge-trace {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, trace);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, trace-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, trace);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, trace-contrast);
   }
 
   .gio-method-badge-head {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, head);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, head-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, head);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, head-contrast);
   }
 
   .gio-method-badge-connect {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, connect);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, connect-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, connect);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, connect-contrast);
   }
 
   .gio-method-badge-other {
     @extend %gio-method-badge-base;
 
-    background-color: mat.get-color-from-palette(palettes.$mat-method-palette, other);
-    color: mat.get-color-from-palette(palettes.$mat-method-palette, other-contrast);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, other);
+    color: mat.m2-get-color-from-palette(palettes.$mat-method-palette, other-contrast);
   }
 }

package/src/lib/gio-table-light/gio-table-light.scss

@@ -36,17 +36,17 @@ $typography: map.get(theme.$mat-theme, typography);
     }
 
     thead {
-      @include mat.typography-level($typography, 'subtitle-2');
+      @include mat.m2-typography-level($typography, 'subtitle-2');
 
-      background-color: mat.get-color-from-palette(palettes.$mat-dove-palette, default);
+      background-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, default);
       text-align: left;
       text-transform: uppercase;
     }
 
     tbody {
-      @include mat.typography-level($typography, 'body-2');
+      @include mat.m2-typography-level($typography, 'body-2');
 
-      background-color: mat.get-color-from-palette(palettes.$mat-basic-palette, white);
+      background-color: mat.m2-get-color-from-palette(palettes.$mat-basic-palette, white);
 
       & > tr:last-child > td {
         border-bottom: 0;
@@ -57,12 +57,12 @@ $typography: map.get(theme.$mat-theme, typography);
       border-color: map.get(palettes.$mat-dove-palette, darker10);
 
       thead {
-        background-color: mat.get-color-from-palette(palettes.$mat-dove-palette, default, 0.6);
-        color: mat.get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
+        background-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, default, 0.6);
+        color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
       }
 
       tbody {
-        color: mat.get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
+        color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, 'darker20');
       }
     }
   }

package/src/scss/gio-mat-palettes.scss

@@ -22,7 +22,7 @@
  */
 
 // Primary
-$mat-primary-palette: mat.define-palette(
+$mat-primary-palette: mat.m2-define-palette(
   (
     // Keep sync GIO color token with Material color token
     darker80: #001f1f,
@@ -72,7 +72,7 @@ $mat-primary-palette: mat.define-palette(
 );
 
 // Accent
-$mat-accent-palette: mat.define-palette(
+$mat-accent-palette: mat.m2-define-palette(
   (
     darker80: #1b162f,
     900: #1b162f,
@@ -121,7 +121,7 @@ $mat-accent-palette: mat.define-palette(
 );
 
 // Success color
-$mat-success-palette: mat.define-palette(
+$mat-success-palette: mat.m2-define-palette(
   (
     darker80: #002c1c,
     darker60: #056946,
@@ -150,7 +150,7 @@ $mat-success-palette: mat.define-palette(
 );
 
 // Warning color
-$mat-warning-palette: mat.define-palette(
+$mat-warning-palette: mat.m2-define-palette(
   (
     darker80: #2c0c01,
     darker60: #551c07,
@@ -179,7 +179,7 @@ $mat-warning-palette: mat.define-palette(
 );
 
 // Error color
-$mat-error-palette: mat.define-palette(
+$mat-error-palette: mat.m2-define-palette(
   (
     darker80: #2c0015,
     900: #2c0015,
@@ -228,7 +228,7 @@ $mat-error-palette: mat.define-palette(
 );
 
 // Basic color
-$mat-basic-palette: mat.define-palette(
+$mat-basic-palette: mat.m2-define-palette(
   (
     black: #000,
     white: #fff,
@@ -248,7 +248,7 @@ $mat-basic-palette: mat.define-palette(
 );
 
 // Space color
-$mat-space-palette: mat.define-palette(
+$mat-space-palette: mat.m2-define-palette(
   (
     default: #100c27,
     lighter10: #1c1e39,
@@ -277,7 +277,7 @@ $mat-space-palette: mat.define-palette(
 );
 
 // Space color
-$mat-dove-palette: mat.define-palette(
+$mat-dove-palette: mat.m2-define-palette(
   (
     darker80: #313133,
     darker70: #49494c,
@@ -306,7 +306,7 @@ $mat-dove-palette: mat.define-palette(
 );
 
 // Cyan color
-$mat-cyan-palette: mat.define-palette(
+$mat-cyan-palette: mat.m2-define-palette(
   (
     default: #006fb9,
     lighter20: #389adb,
@@ -327,7 +327,7 @@ $mat-cyan-palette: mat.define-palette(
 );
 
 // Blue palette
-$mat-blue-palette: mat.define-palette(
+$mat-blue-palette: mat.m2-define-palette(
   (
     default: #313fbf,
     lighter20: #6978ff,
@@ -348,29 +348,29 @@ $mat-blue-palette: mat.define-palette(
 );
 
 // Method color
-$mat-method-palette: mat.define-palette(
+$mat-method-palette: mat.m2-define-palette(
   (
-    patch: mat.get-color-from-palette($mat-accent-palette, lighter80),
-    post: mat.get-color-from-palette($mat-warning-palette, lighter80),
-    put: mat.get-color-from-palette($mat-dove-palette, darker10),
-    get: mat.get-color-from-palette($mat-primary-palette, lighter80),
-    delete: mat.get-color-from-palette($mat-error-palette, lighter80),
-    option: mat.get-color-from-palette($mat-success-palette, lighter80),
-    trace: mat.get-color-from-palette($mat-cyan-palette, lighter80),
-    head: mat.get-color-from-palette($mat-blue-palette, lighter80),
-    connect: mat.get-color-from-palette($mat-blue-palette, lighter80),
-    other: mat.get-color-from-palette($mat-blue-palette, lighter80),
+    patch: mat.m2-get-color-from-palette($mat-accent-palette, lighter80),
+    post: mat.m2-get-color-from-palette($mat-warning-palette, lighter80),
+    put: mat.m2-get-color-from-palette($mat-dove-palette, darker10),
+    get: mat.m2-get-color-from-palette($mat-primary-palette, lighter80),
+    delete: mat.m2-get-color-from-palette($mat-error-palette, lighter80),
+    option: mat.m2-get-color-from-palette($mat-success-palette, lighter80),
+    trace: mat.m2-get-color-from-palette($mat-cyan-palette, lighter80),
+    head: mat.m2-get-color-from-palette($mat-blue-palette, lighter80),
+    connect: mat.m2-get-color-from-palette($mat-blue-palette, lighter80),
+    other: mat.m2-get-color-from-palette($mat-blue-palette, lighter80),
     contrast: (
-      patch: mat.get-color-from-palette($mat-accent-palette, darker40),
-      post: mat.get-color-from-palette($mat-warning-palette, darker20),
-      put: mat.get-color-from-palette($mat-dove-palette, lighter70),
-      get: mat.get-color-from-palette($mat-primary-palette, darker60),
-      delete: mat.get-color-from-palette($mat-error-palette, darker20),
-      option: mat.get-color-from-palette($mat-success-palette, darker60),
-      trace: mat.get-color-from-palette($mat-cyan-palette, default),
-      head: mat.get-color-from-palette($mat-blue-palette, default),
-      connect: mat.get-color-from-palette($mat-blue-palette, default),
-      other: mat.get-color-from-palette($mat-blue-palette, default),
+      patch: mat.m2-get-color-from-palette($mat-accent-palette, darker40),
+      post: mat.m2-get-color-from-palette($mat-warning-palette, darker20),
+      put: mat.m2-get-color-from-palette($mat-dove-palette, lighter70),
+      get: mat.m2-get-color-from-palette($mat-primary-palette, darker60),
+      delete: mat.m2-get-color-from-palette($mat-error-palette, darker20),
+      option: mat.m2-get-color-from-palette($mat-success-palette, darker60),
+      trace: mat.m2-get-color-from-palette($mat-cyan-palette, default),
+      head: mat.m2-get-color-from-palette($mat-blue-palette, default),
+      connect: mat.m2-get-color-from-palette($mat-blue-palette, default),
+      other: mat.m2-get-color-from-palette($mat-blue-palette, default),
     ),
   ),
   patch,

package/src/scss/gio-mat-theme-variable.scss

@@ -19,25 +19,25 @@
 @use './gio-mat-palettes' as palettes;
 
 // Config mat Typography
-$mat-typography: mat.define-typography-config(
+$mat-typography: mat.m2-define-typography-config(
   $font-family: '"Golos UI", Roboto, "Helvetica Neue", sans-serif',
-  $headline-1: mat.define-typography-level(112px, 112px, 400, $letter-spacing: -0.05em),
-  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $headline-4: mat.define-typography-level(60px, 66px, 600, $letter-spacing: -0.5px),
-  $headline-5: mat.define-typography-level(34px, 44px, 600),
-  $headline-6: mat.define-typography-level(26px, 36px, 600),
-  $subtitle-1: mat.define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
-  $subtitle-2: mat.define-typography-level(14px, 20px, 500, $letter-spacing: 0.4px),
-  $body-1: mat.define-typography-level(14px, 22px, 500, $letter-spacing: 0.4px),
-  $body-2: mat.define-typography-level(14px, 22px, 400, $letter-spacing: 0.4px),
-  $caption: mat.define-typography-level(12px, 16px, 400),
-  $button: mat.define-typography-level(14px, 14px, 500),
-  $overline: mat.define-typography-level(inherit, 1.125, 400),
+  $headline-1: mat.m2-define-typography-level(112px, 112px, 400, $letter-spacing: -0.05em),
+  $headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $headline-4: mat.m2-define-typography-level(60px, 66px, 600, $letter-spacing: -0.5px),
+  $headline-5: mat.m2-define-typography-level(34px, 44px, 600),
+  $headline-6: mat.m2-define-typography-level(26px, 36px, 600),
+  $subtitle-1: mat.m2-define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
+  $subtitle-2: mat.m2-define-typography-level(14px, 20px, 500, $letter-spacing: 0.4px),
+  $body-1: mat.m2-define-typography-level(14px, 22px, 500, $letter-spacing: 0.4px),
+  $body-2: mat.m2-define-typography-level(14px, 22px, 400, $letter-spacing: 0.4px),
+  $caption: mat.m2-define-typography-level(12px, 16px, 400),
+  $button: mat.m2-define-typography-level(14px, 14px, 500),
+  $overline: mat.m2-define-typography-level(inherit, 1.125, 400),
 );
 
 // Mat default light theme
-$mat-theme-default: mat.define-light-theme(
+$mat-theme-default: mat.m2-define-light-theme(
   (
     color: (
       primary: palettes.$mat-primary-palette,
@@ -50,7 +50,7 @@ $mat-theme-default: mat.define-light-theme(
 );
 
 // Mat default dark theme
-$mat-theme-dark: mat.define-dark-theme(
+$mat-theme-dark: mat.m2-define-dark-theme(
   (
     color: (
       primary: palettes.$mat-primary-palette,
@@ -69,8 +69,8 @@ $mat-foreground: map.get($mat-theme-default, foreground);
 $gio-background: map.merge(
   $mat-background,
   (
-    background: mat.get-color-from-palette(palettes.$mat-dove-palette, default),
-    tooltip: mat.get-color-from-palette(palettes.$mat-space-palette, default),
+    background: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, default),
+    tooltip: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
   )
 );
 
@@ -78,8 +78,8 @@ $gio-background: map.merge(
 $gio-foreground: map.merge(
   $mat-foreground,
   (
-    text: mat.get-color-from-palette(palettes.$mat-space-palette, default),
-    slider-min: mat.get-color-from-palette(palettes.$mat-space-palette, default),
+    text: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
+    slider-min: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
   )
 );
 $gio-background-foreground: (

package/src/scss/gio-oem-palette.scss

@@ -15,7 +15,7 @@
  */
 @use '@angular/material' as mat;
 
-$mat-oem-palette: mat.define-palette(
+$mat-oem-palette: mat.m2-define-palette(
   (
     // mat-space-palette lighter10
     background: var(--gio-oem-palette--background, #1c1e39),

package/src/scss/mat-override/mat-list.scss

@@ -26,7 +26,7 @@ $background: map.get(theme.$mat-theme, background);
      */
   .mat-mdc-list-item {
     &:hover {
-      background-color: mat.get-color-from-palette($background, hover);
+      background-color: mat.m2-get-color-from-palette($background, hover);
     }
   }
 }

package/src/scss/mat-override/mat-option.scss

@@ -21,6 +21,6 @@
 @mixin mat-option() {
   .mat-typography .mat-mdc-option {
     min-height: 40px;
-    @include mat.typography-level(theme.$mat-typography, 'body-2');
+    @include mat.m2-typography-level(theme.$mat-typography, 'body-2');
   }
 }

package/src/scss/mat-override/mat-table.scss

@@ -23,7 +23,7 @@ $background: map.get(theme.$mat-theme, background);
 @mixin mat-table() {
   .mat-mdc-table {
     tbody tr.mat-mdc-row:hover {
-      background-color: mat.get-color-from-palette($background, hover);
+      background-color: mat.m2-get-color-from-palette($background, hover);
     }
   }
 }

package/src/scss/theme/color/gio-palettes.stories.scss

@@ -31,8 +31,8 @@ $palettes: (
   @each $paletteName, $palette in $palettes {
     @each $colorName in $colorNames {
       @if map.has-key($palette, $colorName) {
-        $color: mat.get-color-from-palette($palette, $colorName);
-        $color-contrast: mat.get-color-from-palette($palette, #{$colorName}-contrast);
+        $color: mat.m2-get-color-from-palette($palette, $colorName);
+        $color-contrast: mat.m2-get-color-from-palette($palette, #{$colorName}-contrast);
 
         --gp--#{$paletteName}__#{$colorName}: #{$color};
         --gp--#{$paletteName}__#{$colorName}-contrast: #{$color-contrast};
@@ -43,48 +43,48 @@ $palettes: (
   // Special palettes
 
   @each $colorName in (patch, post, put, get, delete, option, trace, head) {
-    $color: mat.get-color-from-palette(gio.$mat-method-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-method-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-method-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-method-palette, #{$colorName}-contrast);
 
     --gp--method__#{$colorName}: #{$color};
     --gp--method__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (white, black, disabled) {
-    $color: mat.get-color-from-palette(gio.$mat-basic-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-basic-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-basic-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-basic-palette, #{$colorName}-contrast);
 
     --gp--basic__#{$colorName}: #{$color};
     --gp--basic__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter70, lighter60, lighter50, lighter40, lighter30, lighter20, lighter10, default) {
-    $color: mat.get-color-from-palette(gio.$mat-space-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-space-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-space-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-space-palette, #{$colorName}-contrast);
 
     --gp--space__#{$colorName}: #{$color};
     --gp--space__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (darker80, darker70, darker60, darker50, darker40, darker30, darker20, darker10, default) {
-    $color: mat.get-color-from-palette(gio.$mat-dove-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-dove-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-dove-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-dove-palette, #{$colorName}-contrast);
 
     --gp--dove__#{$colorName}: #{$color};
     --gp--dove__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter60, lighter40, lighter20, default) {
-    $color: mat.get-color-from-palette(gio.$mat-cyan-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-cyan-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-cyan-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-cyan-palette, #{$colorName}-contrast);
 
     --gp--cyan__#{$colorName}: #{$color};
     --gp--cyan__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter60, lighter40, lighter20, default) {
-    $color: mat.get-color-from-palette(gio.$mat-blue-palette, $colorName);
-    $color-contrast: mat.get-color-from-palette(gio.$mat-blue-palette, #{$colorName}-contrast);
+    $color: mat.m2-get-color-from-palette(gio.$mat-blue-palette, $colorName);
+    $color-contrast: mat.m2-get-color-from-palette(gio.$mat-blue-palette, #{$colorName}-contrast);
 
     --gp--blue__#{$colorName}: #{$color};
     --gp--blue__#{$colorName}-contrast: #{$color-contrast};

package/src/scss/theme/color/showcase-color.component.scss

@@ -20,7 +20,7 @@
 
 .title {
   flex: 1 1 30%;
-  color: mat.get-color-from-palette(gio.$mat-dove-palette, darker10-contrast);
+  color: mat.m2-get-color-from-palette(gio.$mat-dove-palette, darker10-contrast);
 }
 
 .row {