@gravitee/ui-particles-angular 14.2.1 → 15.0.0-gio-el-editor-4-1cd4100

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: #331003,
+    900: #331003,
+    darker60: #5e1c03,
+    800: #5e1c03,
+    darker40: #932b04,
+    700: #932b04,
+    darker20: #b33a0d,
+    600: #b33a0d,
+    default: #da3b00,
+    500: #da3b00,
+    lighter20: #f15115,
+    400: #f15115,
+    lighter40: #fe733f,
+    300: #fe733f,
+    lighter60: #ffa685,
+    200: #ffa685,
+    lighter80: #ffc2ac,
+    100: #ffc2ac,
+    50: #ffc2ac,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -74,25 +74,26 @@ $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,
+    // Keep sync GIO color token with Material color token
+    darker80: #331003,
+    900: #331003,
+    darker60: #a93b12,
+    800: #a93b12,
+    darker40: #a5610f,
+    700: #a5610f,
+    darker20: #da3b00,
+    600: #da3b00,
+    default: #ffa685,
+    500: #ffa685,
+    lighter20: #fe733f,
+    400: #fe733f,
+    lighter40: #ff8557,
+    300: #ff8557,
+    lighter60: #ffa685,
+    200: #ffa685,
+    lighter80: #ffc2ac,
+    100: #ffc2ac,
+    50: #ffc2ac,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -102,8 +103,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,
@@ -113,29 +114,29 @@ $mat-accent-palette: mat.m2-define-palette(
       lighter80: #000,
       100: #000,
       50: #000,
-    ),
+    )
   ),
   default,
-  lighter80,
+  lighter40,
   darker80
 );
 
 // 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 +153,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: #331d04,
+    darker60: #714109,
+    darker40: #a5610f,
+    darker20: #d47300,
+    default: #ff8a00,
+    lighter20: #ff9f2c,
+    lighter40: #ffaf4f,
+    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 +182,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 +212,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 +280,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 +300,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 +329,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 +400,43 @@ $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),
-    connect: mat.m2-get-color-from-palette($mat-blue-palette, lighter80),
-    other: 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: #a791ff,
+    other: #d2cecd,
     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(222.67deg, #ff7200 7.45%, #f01114 94.83%),
+    contrast: (
+      button: #fff,
+    ),
+  ),
+  button,
+  button,
+  button
+);

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, 700, '"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, 500, '"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,16 +30,16 @@ $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));
+$oem-light-menu-selected: var(--gio-oem-palette--active, map.get(gio.$mat-accent-palette, darker60));
 $oem-light-menu-background: color-mix(in srgb, $oem-light-menu-selected 60%, black);
 $oem-light-menu-text: map.get(palette.$mat-oem-palette, active-contrast);
 $oem-light-menu-hover: color-mix(in srgb, $oem-light-menu-selected 80%, black);

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),

package/src/scss/index.scss

@@ -15,7 +15,7 @@
  */
 
 @forward './gio-mat-palettes' show $mat-primary-palette, $mat-accent-palette, $mat-success-palette, $mat-warning-palette, $mat-error-palette,
-  $mat-method-palette, $mat-basic-palette, $mat-blue-palette, $mat-cyan-palette, $mat-space-palette, $mat-dove-palette;
+  $mat-method-palette, $mat-basic-palette, $mat-blue-palette, $mat-cyan-palette, $mat-space-palette, $mat-dove-palette, $mat-smoke-palette;
 
 @forward './gio-oem-palette' show $mat-oem-palette, $mat-oem-palette-light;
 

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

@@ -13,7 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '@angular/material' as mat;
+
+@use '../gio-mat-palettes' as palettes;
+
 @mixin mat-button() {
+  @include mat.button-overrides(
+    (
+      outlined-label-text-weight: 700,
+      filled-label-text-weight: 700,
+      protected-label-text-weight: 700,
+      text-label-text-weight: 700,
+      outlined-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-space-palette, lighter10),
+      text-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-space-palette, lighter10),
+    )
+  );
+
   .mdc-button {
     &:has(.mdc-button__label:empty) {
       min-width: 36px;
@@ -26,5 +41,17 @@
         font-size: 22px;
       }
     }
+
+    &[color='primary']:not(:disabled) {
+      @include mat.button-overrides(
+        (
+          filled-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-gradient-palette, button-contrast),
+          text-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-gradient-palette, button-contrast),
+          outlined-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-gradient-palette, button-contrast),
+        )
+      );
+
+      background: mat.m2-get-color-from-palette(palettes.$mat-gradient-palette, button);
+    }
   }
 }

package/src/scss/mat-override/mat-form-field.scss

@@ -20,6 +20,18 @@
 @use '../gio-mat-palettes' as palettes;
 
 @mixin mat-form-field() {
+  @include mat.form-field-overrides(
+    (
+      outlined-caret-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      outlined-focus-outline-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      outlined-focus-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      filled-caret-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      filled-focus-active-indicator-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      filled-focus-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+      focus-select-arrow-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+    )
+  );
+
   .mat-mdc-form-field {
     margin: 0.45em 0;
   }

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

@@ -18,7 +18,21 @@
 
 @use '../gio-mat-theme-variable' as theme;
 
+@use '../gio-mat-palettes' as palettes;
+
 @mixin mat-option() {
+  @include mat.select-overrides(
+    (
+      focused-arrow-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+    )
+  );
+
+  @include mat.option-overrides(
+    (
+      selected-state-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
+    )
+  );
+
   .mat-typography .mat-mdc-option {
     min-height: 40px;
     @include mat.m2-typography-level(theme.$mat-typography, 'body-2');

package/src/scss/theme/typography/gio-typography.scss

@@ -26,6 +26,7 @@
 }
 
 @mixin subtitle-typography() {
+  font-family: Kanit, 'Helvetica Neue', sans-serif;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.4px;
@@ -33,12 +34,12 @@
 }
 
 @mixin link-typography() {
-  color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'darker40');
+  color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'darker20');
   cursor: pointer;
   text-decoration-thickness: 2px;
 
   &:hover {
-    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'darker20');
+    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'default');
   }
 }