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

package/package.json

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

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

@@ -22,7 +22,7 @@
  */
 
 // Primary
-$mat-accent-palette: mat.m2-define-palette(
+$mat-primary-palette: mat.m2-define-palette(
   (
     // Keep sync GIO color token with Material color token
     darker80: #331d03,
@@ -66,13 +66,13 @@ $mat-accent-palette: mat.m2-define-palette(
       50: #000,
     )
   ),
-  lighter60,
-  lighter40,
+  default,
+  lighter80,
   darker80
 );
 
 // Accent
-$mat-primary-palette: mat.m2-define-palette(
+$mat-accent-palette: mat.m2-define-palette(
   (
     // Keep sync GIO color token with Material color token
     darker80: #331d03,
@@ -116,8 +116,8 @@ $mat-primary-palette: mat.m2-define-palette(
       50: #000,
     )
   ),
-  default,
-  lighter80,
+  lighter60,
+  lighter40,
   darker80
 );
 

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

@@ -30,7 +30,7 @@ $mat-typography: mat.m2-define-typography-config(
   $subtitle-1: mat.m2-define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
   $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, 400, '"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'),

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

@@ -39,7 +39,7 @@ $oem-top-bar-notification-contrast: var(--gio-oem-palette--active-contrast, map.
 $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/mat-override/mat-button.scss

@@ -13,12 +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() {
-  .mdc-button {
-    --mdc-outlined-button-label-text-weight: 700;
-    --mdc-filled-button-label-text-weight: 700;
-    --mdc-protected-button-label-text-weight: 700;
+  @include mat.button-overrides(
+    (
+      outlined-label-text-weight: 700,
+      filled-label-text-weight: 700,
+      protected-label-text-weight: 700,
+      outlined-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, darker20),
+      text-label-text-color: mat.m2-get-color-from-palette(palettes.$mat-primary-palette, darker20),
+    )
+  );
 
+  .mdc-button {
     &:has(.mdc-button__label:empty) {
       min-width: 36px;
 
@@ -30,5 +40,10 @@
         font-size: 22px;
       }
     }
+
+    &[color='primary'] {
+      --mdc-outlined-button-label-text-color: #{mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'darker20')};
+      --mdc-text-button-label-text-color: #{mat.m2-get-color-from-palette(palettes.$mat-primary-palette, 'darker20')};
+    }
   }
 }

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

@@ -20,16 +20,6 @@
 @use '../gio-mat-palettes' as palettes;
 
 @mixin mat-form-field() {
-  .mat-mdc-form-field {
-    margin: 0.45em 0;
-  }
-
-  .mat-mdc-form-field.mat-form-field-disabled {
-    cursor: not-allowed !important;
-  }
-}
-
-:root {
   @include mat.form-field-overrides(
     (
       outlined-caret-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
@@ -41,4 +31,12 @@
       focus-select-arrow-color: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, darker80),
     )
   );
+
+  .mat-mdc-form-field {
+    margin: 0.45em 0;
+  }
+
+  .mat-mdc-form-field.mat-form-field-disabled {
+    cursor: not-allowed !important;
+  }
 }

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

@@ -21,13 +21,6 @@
 @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),
@@ -39,4 +32,9 @@
       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');
+  }
 }