@gravitee/ui-particles-angular 14.1.5 → 14.2.0-update-gravitee-theme-6776356

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-particles-angular",
-  "version": "14.1.5",
+  "version": "14.2.0-update-gravitee-theme-6776356",
   "description": "Gravitee.io - UI Particles Angular",
   "repository": {
     "type": "git",
@@ -8,9 +8,10 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@fontsource/fira-mono": "4.5.0",
-    "@fontsource/golos-ui": "^4.5.1",
-    "@fontsource/material-icons": "4.5.1",
+    "@fontsource/fira-mono": "5.0.14",
+    "@fontsource/kanit": "^5.2.6",
+    "@fontsource/manrope": "^5.2.5",
+    "@fontsource/material-icons": "5.0.19",
     "cronstrue": "^2.48.0",
     "tslib": "^2.6.2"
   },

package/src/scss/gio-fonts.scss

@@ -23,17 +23,23 @@
   @if $withTilde == true {
     @import '~@fontsource/material-icons/400.css';
     @import '~@fontsource/fira-mono/400.css';
-    @import '~@fontsource/golos-ui/400.css';
-    @import '~@fontsource/golos-ui/500.css';
-    @import '~@fontsource/golos-ui/600.css';
+    @import '~@fontsource/kanit/400.css';
+    @import '~@fontsource/kanit/500.css';
+    @import '~@fontsource/kanit/600.css';
+    @import '~@fontsource/manrope/400.css';
+    @import '~@fontsource/manrope/500.css';
+    @import '~@fontsource/manrope/600.css';
   }
 
   @if $withTilde == false {
     @import '@fontsource/material-icons/400.css';
     @import '@fontsource/fira-mono/400.css';
-    @import '@fontsource/golos-ui/400.css';
-    @import '@fontsource/golos-ui/500.css';
-    @import '@fontsource/golos-ui/600.css';
+    @import '@fontsource/kanit/400.css';
+    @import '@fontsource/kanit/500.css';
+    @import '@fontsource/kanit/600.css';
+    @import '@fontsource/manrope/400.css';
+    @import '@fontsource/manrope/500.css';
+    @import '@fontsource/manrope/600.css';
   }
 
   // Material Icons

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

@@ -25,25 +25,25 @@
 $mat-primary-palette: mat.m2-define-palette(
   (
     // Keep sync GIO color token with Material color token
-    darker80: #001f1f,
-    900: #001f1f,
-    darker60: #003d3d,
-    800: #003d3d,
-    darker40: #005c5c,
-    700: #005c5c,
-    darker20: #007a7a,
-    600: #007a7a,
-    default: #099,
-    500: #099,
-    lighter20: #0bd2d2,
-    400: #0bd2d2,
-    lighter40: #45ffff,
-    300: #45ffff,
-    lighter60: #91ffff,
-    200: #91ffff,
-    lighter80: #d6ffff,
-    100: #d6ffff,
-    50: #d6ffff,
+    darker80: #16000d,
+    900: #16000d,
+    darker60: #31001e,
+    800: #31001e,
+    darker40: #49002c,
+    700: #49002c,
+    darker20: #6d0142,
+    600: #6d0142,
+    default: #80004d,
+    500: #80004d,
+    lighter20: #b11a75,
+    400: #b11a75,
+    lighter40: #db3297,
+    300: #db3297,
+    lighter60: #f960bc,
+    200: #f960bc,
+    lighter80: #ff80cd,
+    100: #ff80cd,
+    50: #ff80cd,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -55,10 +55,10 @@ $mat-primary-palette: mat.m2-define-palette(
       600: #fff,
       default: #fff,
       500: #fff,
-      lighter20: #000,
-      400: #000,
-      lighter40: #000,
-      300: #000,
+      lighter20: #fff,
+      400: #fff,
+      lighter40: #fff,
+      300: #fff,
       lighter60: #000,
       200: #000,
       lighter80: #000,
@@ -74,25 +74,25 @@ $mat-primary-palette: mat.m2-define-palette(
 // Accent
 $mat-accent-palette: mat.m2-define-palette(
   (
-    darker80: #1b162f,
-    900: #1b162f,
-    darker60: #362c5e,
-    800: #362c5e,
-    darker40: #51438e,
-    700: #51438e,
-    darker20: #6c59bd,
-    600: #6c59bd,
-    default: #876fec,
-    500: #876fec,
-    lighter20: #9f8cf0,
-    400: #9f8cf0,
-    lighter40: #b7a9f4,
-    300: #b7a9f4,
-    lighter60: #cdc5f7,
-    200: #cdc5f7,
-    lighter80: #e7e2fb,
-    100: #e7e2fb,
-    50: #e7e2fb,
+    darker80: #10191a,
+    900: #10191a,
+    darker60: #27464a,
+    800: #27464a,
+    darker40: #31747d,
+    700: #31747d,
+    darker20: #318e9a,
+    600: #318e9a,
+    default: #22a3b3,
+    500: #22a3b3,
+    lighter20: #3cc2d3,
+    400: #3cc2d3,
+    lighter40: #56d4e4,
+    300: #56d4e4,
+    lighter60: #6bebfb,
+    200: #6bebfb,
+    lighter80: #96f3ff,
+    100: #96f3ff,
+    50: #96f3ff,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -102,8 +102,8 @@ $mat-accent-palette: mat.m2-define-palette(
       700: #fff,
       darker20: #fff,
       600: #fff,
-      default: #fff,
-      500: #fff,
+      default: #000,
+      500: #000,
       lighter20: #000,
       400: #000,
       lighter40: #000,
@@ -123,19 +123,19 @@ $mat-accent-palette: mat.m2-define-palette(
 // Success color
 $mat-success-palette: mat.m2-define-palette(
   (
-    darker80: #002c1c,
-    darker60: #056946,
-    darker40: #018e5d,
-    darker20: #02c37f,
-    default: #0de598,
-    lighter20: #43ebaf,
-    lighter40: #78f2c7,
-    lighter60: #aef8de,
-    lighter80: #e4fff5,
+    darker80: #1b3b2d,
+    darker60: #225b42,
+    darker40: #258259,
+    darker20: #239c67,
+    default: #22b374,
+    lighter20: #2fcd88,
+    lighter40: #3ee69e,
+    lighter60: #56fbb3,
+    lighter80: #8dffce,
     contrast: (
       darker80: #fff,
       darker60: #fff,
-      darker40: #000,
+      darker40: #fff,
       darker20: #000,
       default: #000,
       lighter20: #000,
@@ -152,21 +152,21 @@ $mat-success-palette: mat.m2-define-palette(
 // Warning color
 $mat-warning-palette: mat.m2-define-palette(
   (
-    darker80: #2c0c01,
-    darker60: #551c07,
-    darker40: #983611,
-    darker20: #bf3f0e,
-    default: #fe733f,
-    lighter20: #fe9168,
-    lighter40: #feb092,
-    lighter60: #ffcebb,
-    lighter80: #ffece5,
+    darker80: #331d03,
+    darker60: #714109,
+    darker40: #a5610f,
+    darker20: #d47300,
+    default: #ff5718,
+    lighter20: #fe766f,
+    lighter40: #ffae4f,
+    lighter60: #ffc47e,
+    lighter80: #ffd8aa,
     contrast: (
       darker80: #fff,
       darker60: #fff,
       darker40: #fff,
       darker20: #fff,
-      default: #fff,
+      default: #000,
       lighter20: #000,
       lighter40: #000,
       lighter60: #000,
@@ -181,25 +181,25 @@ $mat-warning-palette: mat.m2-define-palette(
 // Error color
 $mat-error-palette: mat.m2-define-palette(
   (
-    darker80: #2c0015,
-    900: #2c0015,
-    darker60: #5f002f,
-    800: #5f002f,
-    darker40: #930149,
-    700: #930149,
-    darker20: #cb0366,
-    600: #cb0366,
-    default: #ec4899,
-    500: #ec4899,
-    lighter20: #f170b0,
-    400: #f170b0,
-    lighter40: #f698c7,
-    300: #f698c7,
-    lighter60: #fac1dd,
-    200: #fac1dd,
-    lighter80: #ffe9f4,
-    100: #ffe9f4,
-    50: #ffe9f4,
+    darker80: #290505,
+    900: #290505,
+    darker60: #591212,
+    800: #591212,
+    darker40: #881d1e,
+    700: #881d1e,
+    darker20: #c72224,
+    600: #c72224,
+    default: #dd1d1f,
+    500: #dd1d1f,
+    lighter20: #ef3436,
+    400: #ef3436,
+    lighter40: #fb686a,
+    300: #fb686a,
+    lighter60: #ff9e9f,
+    200: #ff9e9f,
+    lighter80: #ffcfd0,
+    100: #ffcfd0,
+    50: #ffcfd0,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -211,6 +211,55 @@ $mat-error-palette: mat.m2-define-palette(
       600: #fff,
       default: #fff,
       500: #fff,
+      lighter20: #fff,
+      400: #fff,
+      lighter40: #000,
+      300: #000,
+      lighter60: #000,
+      200: #000,
+      lighter80: #000,
+      100: #000,
+      50: #000,
+    ),
+  ),
+  default,
+  lighter80,
+  darker80
+);
+
+// Smoke palette
+$mat-smoke-palette: mat.m2-define-palette(
+  (
+    darker80: #1e1b1b,
+    900: #1e1b1b,
+    darker60: #322f2f,
+    800: #322f2f,
+    darker40: #5c5959,
+    700: #5c5959,
+    darker20: #8a8383,
+    600: #8a8383,
+    default: #b2aaa9,
+    500: #b2aaa9,
+    lighter20: #d2cecd,
+    400: #d2cecd,
+    lighter40: #e3e3e3,
+    300: #e3e3e3,
+    lighter60: #f7f7f8,
+    200: #f7f7f8,
+    lighter80: #fff,
+    100: #fff,
+    50: #fff,
+    contrast: (
+      darker80: #fff,
+      900: #fff,
+      darker60: #fff,
+      800: #fff,
+      darker40: #fff,
+      700: #fff,
+      darker20: #000,
+      600: #000,
+      default: #000,
+      500: #000,
       lighter20: #000,
       400: #000,
       lighter40: #000,
@@ -230,14 +279,14 @@ $mat-error-palette: mat.m2-define-palette(
 // Basic color
 $mat-basic-palette: mat.m2-define-palette(
   (
-    black: #000,
-    white: #fff,
+    black: mat.m2-get-color-from-palette($mat-smoke-palette, darker80),
+    white: mat.m2-get-color-from-palette($mat-smoke-palette, lighter80),
     disabled: rgb(0 0 0 / 12%),
     // Same color as the disabled color of material
     contrast:
       (
-        black: #fff,
-        white: #000,
+        black: mat.m2-get-color-from-palette($mat-smoke-palette, lighter80),
+        white: mat.m2-get-color-from-palette($mat-smoke-palette, darker80),
         disabled: rgb(0 0 0 / 26%),
         // Same color as the disabled color of material
       ),
@@ -250,22 +299,22 @@ $mat-basic-palette: mat.m2-define-palette(
 // Space color
 $mat-space-palette: mat.m2-define-palette(
   (
-    default: #100c27,
-    lighter10: #1c1e39,
-    lighter20: #33354d,
-    lighter30: #494b61,
-    lighter40: #606274,
-    lighter50: #777888,
-    lighter60: #8e8f9c,
-    lighter70: #a4a5b0,
-    lighter80: #bbbcc4,
+    default: mat.m2-get-color-from-palette($mat-smoke-palette, darker80),
+    lighter10: mat.m2-get-color-from-palette($mat-smoke-palette, darker80),
+    lighter20: mat.m2-get-color-from-palette($mat-smoke-palette, darker60),
+    lighter30: mat.m2-get-color-from-palette($mat-smoke-palette, darker60),
+    lighter40: mat.m2-get-color-from-palette($mat-smoke-palette, darker60),
+    lighter50: mat.m2-get-color-from-palette($mat-smoke-palette, darker60),
+    lighter60: mat.m2-get-color-from-palette($mat-smoke-palette, darker20),
+    lighter70: mat.m2-get-color-from-palette($mat-smoke-palette, default),
+    lighter80: mat.m2-get-color-from-palette($mat-smoke-palette, lighter40),
     contrast: (
       default: #fff,
       lighter10: #fff,
       lighter20: #fff,
       lighter30: #fff,
       lighter40: #fff,
-      lighter50: #000,
+      lighter50: #fff,
       lighter60: #000,
       lighter70: #000,
       lighter80: #000,
@@ -279,15 +328,15 @@ $mat-space-palette: mat.m2-define-palette(
 // Space color
 $mat-dove-palette: mat.m2-define-palette(
   (
-    darker80: #313133,
-    darker70: #49494c,
-    darker60: #616266,
-    darker50: #7a7b80,
-    darker40: #98999f,
-    darker30: #b4b5bb,
-    darker20: #d3d5dc,
-    darker10: #e7e8ef,
-    default: #f7f8fd,
+    darker80: mat.m2-get-color-from-palette($mat-smoke-palette, darker80),
+    darker70: mat.m2-get-color-from-palette($mat-smoke-palette, darker60),
+    darker60: mat.m2-get-color-from-palette($mat-smoke-palette, darker40),
+    darker50: mat.m2-get-color-from-palette($mat-smoke-palette, darker20),
+    darker40: mat.m2-get-color-from-palette($mat-smoke-palette, default),
+    darker30: mat.m2-get-color-from-palette($mat-smoke-palette, default),
+    darker20: mat.m2-get-color-from-palette($mat-smoke-palette, lighter20),
+    darker10: mat.m2-get-color-from-palette($mat-smoke-palette, lighter60),
+    default: mat.m2-get-color-from-palette($mat-smoke-palette, lighter60),
     contrast: (
       darker80: #fff,
       darker70: #fff,
@@ -350,30 +399,45 @@ $mat-blue-palette: mat.m2-define-palette(
 // Method color
 $mat-method-palette: mat.m2-define-palette(
   (
-    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),
+    patch: #ea96ff,
+    post: #ffa996,
+    put: #d2c5c3,
+    get: #96fbff,
+    delete: #ff96d0,
+    option: #96ffd8,
+    trace: #96d7ff,
+    head: #96a6ff,
     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.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: #000,
+      post: #000,
+      put: #000,
+      get: #000,
+      delete: #000,
+      option: #000,
+      trace: #000,
+      head: #000,
+      connect: #000,
+      other: #000,
     ),
   ),
   patch,
   patch,
   patch
 );
+
+// Gradient to be used for buttons and logo
+$mat-gradient-palette: mat.m2-define-palette(
+  (
+    button: linear-gradient(245.01deg, #ff8601 15.9%, #f31412 84.1%),
+    logo: linear-gradient(222.67deg, #ff7200 7.45%, #f01114 94.83%),
+    contrast: (
+      button: #fff,
+      logo: #fff,
+    ),
+  ),
+  logo,
+  logo,
+  logo
+);

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

@@ -20,7 +20,7 @@
 
 // Config mat Typography
 $mat-typography: mat.m2-define-typography-config(
-  $font-family: '"Golos UI", Roboto, "Helvetica Neue", sans-serif',
+  $font-family: '"Kanit", "Helvetica Neue", sans-serif',
   $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),
@@ -28,12 +28,12 @@ $mat-typography: mat.m2-define-typography-config(
   $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),
+  $subtitle-2: mat.m2-define-typography-level(14px, 20px, 500, '"Manrope", sans-serif', $letter-spacing: 0.4px),
+  $body-1: mat.m2-define-typography-level(14px, 22px, 500, '"Manrope", sans-serif', $letter-spacing: 0.4px),
+  $body-2: mat.m2-define-typography-level(14px, 22px, 400, '"Manrope", sans-serif', $letter-spacing: 0.4px),
+  $caption: mat.m2-define-typography-level(12px, 16px, 400, '"Manrope", sans-serif'),
+  $button: mat.m2-define-typography-level(14px, 14px, 500, '"Manrope", sans-serif'),
+  $overline: mat.m2-define-typography-level(inherit, 1.125, 400, '"Manrope", sans-serif'),
 );
 
 // Mat default light theme

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

@@ -30,13 +30,14 @@ $oem-menu-border: color-mix(in srgb, $oem-menu-background 75%, $oem-menu-text);
 $oem-menu-environment-selected: var(--gio-oem-palette--active, map.get(gio.$mat-primary-palette, default));
 
 // Sub Menu
-$oem-sub-menu-background: var(--gio-oem-palette--sub-menu, map.get(gio.$mat-space-palette, default));
+$oem-sub-menu-background: var(--gio-oem-palette--sub-menu, map.get(gio.$mat-space-palette, lighter20));
 $oem-sub-menu-title: color-mix(in srgb, $oem-menu-text 70%, black);
 
 // Top Bar
 $oem-top-bar-notification: var(--gio-oem-palette--active, map.get(gio.$mat-accent-palette, lighter80));
 $oem-top-bar-notification-contrast: var(--gio-oem-palette--active-contrast, map.get(gio.$mat-space-palette, default));
 $oem-top-bar-apim-button-background: var(--gio-oem-palette--sub-menu, rgb(0 111 185 / 50%));
+$oem-top-bar-apim-button-background: var(--gio-oem-palette--sub-menu, map.get(gio.$mat-smoke-palette, darker60));
 
 // Light
 $oem-light-menu-selected: var(--gio-oem-palette--active, map.get(gio.$mat-accent-palette, default));

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

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 @use '@angular/material' as mat;
+@use './gio-mat-palettes' as palettes;
 
 $mat-oem-palette: mat.m2-define-palette(
   (
     // mat-space-palette lighter10
-    background: var(--gio-oem-palette--background, #1c1e39),
+    background: var(--gio-oem-palette--background, mat.m2-get-color-from-palette(palettes.$mat-space-palette, lighter10)),
     // mat-space-palette lighter30
-    active: var(--gio-oem-palette--active, #494b61),
+    active: var(--gio-oem-palette--active, mat.m2-get-color-from-palette(palettes.$mat-smoke-palette, darker40)),
     contrast: (
       background: var(--gio-oem-palette--background-contrast, #fff),
       active: var(--gio-oem-palette--active-contrast, #fff),