@gravitee/ui-particles-angular 14.2.0-update-gravitee-theme-ba616c7 → 14.2.0-update-gravitee-theme-e682fbd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-particles-angular",
-  "version": "14.2.0-update-gravitee-theme-ba616c7",
+  "version": "14.2.0-update-gravitee-theme-e682fbd",
   "description": "Gravitee.io - UI Particles Angular",
   "repository": {
     "type": "git",

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

@@ -37,8 +37,8 @@ $typography: map.get(theme.$mat-theme, typography);
   }
 
   .mat-button-toggle.mat-button-toggle-checked:not(.mat-button-toggle-disabled) {
-    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);
+    background-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'default');
+    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, default-contrast);
   }
 
   .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {

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

@@ -22,28 +22,28 @@
  */
 
 // Primary
-$mat-primary-palette: mat.m2-define-palette(
+$mat-accent-palette: mat.m2-define-palette(
   (
     // Keep sync GIO color token with Material color token
-    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,
+    darker80: #331d03,
+    900: #331d03,
+    darker60: #a93b12,
+    800: #a93b12,
+    darker40: #a5610f,
+    700: #a5610f,
+    darker20: #da3b00,
+    600: #da3b00,
+    default: #ff5718,
+    500: #ff5718,
+    lighter20: #fe733f,
+    400: #fe733f,
+    lighter40: #ff8557,
+    300: #ff8557,
+    lighter60: #ffa685,
+    200: #ffa685,
+    lighter80: #ffc2ac,
+    100: #ffc2ac,
+    50: #ffc2ac,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -53,12 +53,12 @@ $mat-primary-palette: mat.m2-define-palette(
       700: #fff,
       darker20: #fff,
       600: #fff,
-      default: #fff,
-      500: #fff,
-      lighter20: #fff,
-      400: #fff,
-      lighter40: #fff,
-      300: #fff,
+      default: #000,
+      500: #000,
+      lighter20: #000,
+      400: #000,
+      lighter40: #000,
+      300: #000,
       lighter60: #000,
       200: #000,
       lighter80: #000,
@@ -66,33 +66,34 @@ $mat-primary-palette: mat.m2-define-palette(
       50: #000,
     )
   ),
-  default,
-  lighter80,
+  lighter60,
+  lighter40,
   darker80
 );
 
 // Accent
-$mat-accent-palette: mat.m2-define-palette(
+$mat-primary-palette: mat.m2-define-palette(
   (
-    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,
+    // Keep sync GIO color token with Material color token
+    darker80: #331d03,
+    900: #331d03,
+    darker60: #a93b12,
+    800: #a93b12,
+    darker40: #a5610f,
+    700: #a5610f,
+    darker20: #da3b00,
+    600: #da3b00,
+    default: #ff5718,
+    500: #ff5718,
+    lighter20: #fe733f,
+    400: #fe733f,
+    lighter40: #ff8557,
+    300: #ff8557,
+    lighter60: #ffa685,
+    200: #ffa685,
+    lighter80: #ffc2ac,
+    100: #ffc2ac,
+    50: #ffc2ac,
     contrast: (
       darker80: #fff,
       900: #fff,
@@ -113,7 +114,7 @@ $mat-accent-palette: mat.m2-define-palette(
       lighter80: #000,
       100: #000,
       50: #000,
-    ),
+    )
   ),
   default,
   lighter80,
@@ -152,15 +153,15 @@ $mat-success-palette: mat.m2-define-palette(
 // Warning color
 $mat-warning-palette: mat.m2-define-palette(
   (
-    darker80: #331d03,
-    darker60: #a93b12,
+    darker80: #331d04,
+    darker60: #714109,
     darker40: #a5610f,
-    darker20: #da3b00,
-    default: #ff5718,
-    lighter20: #fe733f,
-    lighter40: #ff8557,
-    lighter60: #ffa685,
-    lighter80: #ffc2ac,
+    darker20: #d47300,
+    default: #ff8a00,
+    lighter20: #ff9f2c,
+    lighter40: #ffaf4f,
+    lighter60: #ffc47e,
+    lighter80: #ffd8aa,
     contrast: (
       darker80: #fff,
       darker60: #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-form-field.scss

@@ -28,3 +28,17 @@
     cursor: not-allowed !important;
   }
 }
+
+:root {
+  @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),
+    )
+  );
+}

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

@@ -18,9 +18,25 @@
 
 @use '../gio-mat-theme-variable' as theme;
 
+@use '../gio-mat-palettes' as palettes;
+
 @mixin mat-option() {
   .mat-typography .mat-mdc-option {
     min-height: 40px;
     @include mat.m2-typography-level(theme.$mat-typography, 'body-2');
   }
 }
+
+:root {
+  @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),
+    )
+  );
+}

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

@@ -34,12 +34,12 @@
 }
 
 @mixin link-typography() {
-  color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'lighter20');
+  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, 'lighter40');
+    color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'default');
   }
 }