@agorapulse/ui-theme 15.0.26 → 16.0.0-rc.0

package/assets/style/_colors.scss

@@ -28,13 +28,13 @@ $colors-grey: (
 
 $colors-orange: (
     110: #ff4d00,
-    105: #FF560D,
+    105: #ff560d,
     100: #ff6726,
-    85 : #ff7e46,
+    85: #ff7e46,
     60: #ffa47d,
     40: #ffc2a8,
     20: #ffe1d4,
-    10: #ffefe9
+    10: #ffefe9,
 );
 
 $colors-soft-orange: (
@@ -45,7 +45,7 @@ $colors-soft-orange: (
     40: #fde199,
     20: #fef0cc,
     10: #fff8e6,
-    5: #fffef2
+    5: #fffef2,
 );
 
 $colors-electric-blue: (
@@ -56,45 +56,45 @@ $colors-electric-blue: (
     40: #a2d1ff,
     20: #d1e8ff,
     10: #e8f4ff,
-    5: #f3f9ff
+    5: #f3f9ff,
 );
 
 $colors-soft-blue: (
     100: #61a4e4,
-    85 : #78b1e8,
+    85: #78b1e8,
     60: #a0c8ef,
     40: #c0dbf4,
     20: #dfedfa,
-    10: #eff5fc
+    10: #eff5fc,
 );
 
 $colors-menthol: (
     150: #057e7a,
     40: #9fd9d6,
-    10: #f1f9f8
+    10: #f1f9f8,
 );
 
 $colors-purple: (
     100: #6554c0,
-    85 : #7c6dc9,
+    85: #7c6dc9,
     60: #a398d9,
     40: #c1bbe6,
     20: #e0ddf2,
-    10: #efedf8
+    10: #efedf8,
 );
 
 $colors-green: (
-    100: #45B854,
+    100: #45b854,
     85: #61c26d,
     60: #8fd498,
     40: #b5e3bb,
     20: #daf1dd,
     10: #ecf7ed,
-    5: #f2f7f3
+    5: #f2f7f3,
 );
 
 $colors-primary: (
-    50:  #fff7f3,
+    50: #fff7f3,
     100: #ffeae0,
     200: #ffcab3,
     300: #ffa680,
@@ -123,7 +123,7 @@ $colors-primary: (
         A200: black,
         A400: black,
         A700: black,
-    )
+    ),
 );
 
 $colors-accent: (
@@ -156,33 +156,33 @@ $colors-accent: (
         A200: black,
         A400: black,
         A700: $white-87-opacity,
-    )
+    ),
 );
 
 $colors-red: (
-    100: #E81313,
-    85: #EB3636,
-    60: #F17171,
-    40: #F6A1A1,
-    20: #FAD0D0,
-    10: #FDE7E7,
-    5: #FDF5F5
+    100: #e81313,
+    85: #eb3636,
+    60: #f17171,
+    40: #f6a1a1,
+    20: #fad0d0,
+    10: #fde7e7,
+    5: #fdf5f5,
 );
 
 $colors-soft-red: (
     100: #ff5353,
     85: #ff6d6d,
     60: #ff9898,
-    10: #fff9f9
+    10: #fff9f9,
 );
 
 $colors-yellow: (
-    100: #FFE91F,
-    85: #FFEC41,
-    60: #FFF279,
-    40: #FFF6A5,
-    20: #FFFBD2,
-    10: #FFFDE9
+    100: #ffe91f,
+    85: #ffec41,
+    60: #fff279,
+    40: #fff6a5,
+    20: #fffbd2,
+    10: #fffde9,
 );
 
 $colors-warn: (
@@ -215,7 +215,7 @@ $colors-warn: (
         A200: black,
         A400: $white-87-opacity,
         A700: $white-87-opacity,
-    )
+    ),
 );
 
 // Primary colors
@@ -234,19 +234,19 @@ $color-blue-grey: #8d98a9;
 $color-silver: #ced0da;
 $color-pale-grey: #dfe3e9;
 $color-grey-white: #f5f7f8;
-$color-queued: #8C50CF;
+$color-queued: #8c50cf;
 $color-approve: #f4bd49; //mat.get-color-from-palette($ap-orange, 500);
 $color-alice-blue: #f3f9ff;
 
 // Colors of 2021 Agorapulse Website
-$color-peach: #FFF9F4;
-$color-blue-sky: #F5FDFF;
-$color-very-light-blue: #F6F8FF;
-$color-very-light-orange: #FFF7F3;
-$color-very-light-green: #F3FAFF;
+$color-peach: #fff9f4;
+$color-blue-sky: #f5fdff;
+$color-very-light-blue: #f6f8ff;
+$color-very-light-orange: #fff7f3;
+$color-very-light-green: #f3faff;
 
 // Grey dark max
-$color-grey-dark-max: #212E44;
+$color-grey-dark-max: #212e44;
 
 $state-light-orange: #ffe2b3;
 //$state-light-transparent-orange: #fff1da;
@@ -254,11 +254,11 @@ $state-light-orange: #ffe2b3;
 $color-black: #344563;
 $color-cool-grey: #b4bbc6;
 $color-grey-blue: #68768c;
-$color-blue-link: #499EFF;
+$color-blue-link: #499eff;
 
 $color-white: #ffffff;
 
-$color-grey-background: #F9F9FA;
+$color-grey-background: #f9f9fa;
 
 // Social networks colors
 $color-facebook: #1877f2;
@@ -297,46 +297,46 @@ $ap-colors: (
     'pinkish-orange': $color-pinkish-orange,
     'charcoal-grey': $color-charcoal-grey,
     'azure': $color-azure,
-    'light-azure':$color-light-azure,
-    'blue-grey':$color-blue-grey,
+    'light-azure': $color-light-azure,
+    'blue-grey': $color-blue-grey,
     'silver': $color-silver,
     //'middle-grey':$state-disabled,
-    'pale-grey':$color-pale-grey,
-    'grey-white':$color-grey-white,
-    'cool-grey':$color-cool-grey,
-    'black':$color-black,
-    'grey-blue':$color-grey-blue,
-    'strawberry':$color-strawberry,
-    'light-strawberry':$color-light-strawberry,
-    'white':$color-white,
-    'cool-green':$color-cool-green,
-    'light-green':$color-light-green,
+    'pale-grey': $color-pale-grey,
+    'grey-white': $color-grey-white,
+    'cool-grey': $color-cool-grey,
+    'black': $color-black,
+    'grey-blue': $color-grey-blue,
+    'strawberry': $color-strawberry,
+    'light-strawberry': $color-light-strawberry,
+    'white': $color-white,
+    'cool-green': $color-cool-green,
+    'light-green': $color-light-green,
     'transparent': transparent,
 
-    'c0': #A566A5,
-    'c1': #C7AB82,
-    'c2': #F2713C,
-    'c3': #FFD006,
-    'c4': #94C5AA,
-    'c5': #2A9D8F,
-    'c6': #78ACD8,
-    'c7': #525A9E,
-    'c8': #6A2459,
-    'c9': #74729E,
+    'c0': #a566a5,
+    'c1': #c7ab82,
+    'c2': #f2713c,
+    'c3': #ffd006,
+    'c4': #94c5aa,
+    'c5': #2a9d8f,
+    'c6': #78acd8,
+    'c7': #525a9e,
+    'c8': #6a2459,
+    'c9': #74729e,
 );
 
 // Utility class for colors
 @each $key, $value in $ap-colors {
-    [color="#{$key}"] {
+    [color='#{$key}'] {
         color: $value;
     }
-    [bgcolor="#{$key}"] {
+    [bgcolor='#{$key}'] {
         background-color: $value;
     }
-    [hcolor="#{$key}"]:hover {
+    [hcolor='#{$key}']:hover {
         background-color: $value;
     }
-    [border="#{$key}"] {
+    [border='#{$key}'] {
         border: 1px solid $value;
     }
 }

package/assets/style/_font-face.scss

@@ -1,40 +1,40 @@
 // Import Averta Regular
 @font-face {
-    font-family: "Averta";
+    font-family: 'Averta';
     font-weight: normal;
     font-style: normal;
-    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Regular.otf") format("opentype");
+    src: url('/assets/lib-ui-theme/fonts/averta/AvertaStd-Regular.otf') format('opentype');
     font-display: swap;
 }
 
 // Import Averta Bold
 @font-face {
-    font-family: "Averta";
-    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Bold.otf") format("opentype");
+    font-family: 'Averta';
+    src: url('/assets/lib-ui-theme/fonts/averta/AvertaStd-Bold.otf') format('opentype');
     font-weight: bold;
     font-display: swap;
 }
 
 // Import Averta Semibold
 @font-face {
-    font-family: "Averta";
-    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Semibold.otf") format("opentype");
+    font-family: 'Averta';
+    src: url('/assets/lib-ui-theme/fonts/averta/AvertaStd-Semibold.otf') format('opentype');
     font-weight: 600;
     font-display: swap;
 }
 
 /* Import Averta extra bold */
 @font-face {
-    font-family: "Averta";
-    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Extrabold.otf") format("opentype");
+    font-family: 'Averta';
+    src: url('/assets/lib-ui-theme/fonts/averta/AvertaStd-Extrabold.otf') format('opentype');
     font-weight: 800;
     font-display: swap;
 }
 
 // Import Averta Black
 @font-face {
-    font-family: "Averta";
-    src: url("/assets/lib-ui-theme/fonts/averta/AvertaStd-Black.otf") format("opentype");
+    font-family: 'Averta';
+    src: url('/assets/lib-ui-theme/fonts/averta/AvertaStd-Black.otf') format('opentype');
     font-weight: 900;
     font-display: swap;
 }

package/assets/style/_helpers.scss

@@ -16,7 +16,6 @@ blockquote {
     background-color: $color-silver;
 }
 
-
 .left-align {
     text-align: left;
 }
@@ -61,7 +60,8 @@ video.responsive-video {
     height: 0;
     overflow: hidden;
 }
-object, embed {
+object,
+embed {
     position: absolute;
     top: 0;
     left: 0;
@@ -70,7 +70,9 @@ object, embed {
 }
 
 /* Other (used?) */
-.square, .rounded, .round {
+.square,
+.rounded,
+.round {
     overflow: hidden;
 }
 .rounded {

package/assets/style/_mat-typography.scss

@@ -16,7 +16,7 @@ $custom-typography: mat.define-legacy-typography-config(
     $body-2: mat.define-typography-level($font-size, $font-line-height, $font-weight-semibold),
     $caption: mat.define-typography-level($font-size-s, $font-line-height-s, $font-weight)
         //$button: mat.define-typography-level(16px, 24px, 500),
-    //$input: mat.define-typography-level(16px, 24px, 500),
+    //$input: mat.define-typography-level(16px, 24px, 500),,,
 );
 @include mat.all-legacy-component-typographies($custom-typography);
 

package/assets/style/_variables.scss

@@ -1,9 +1,9 @@
-@use "sass:math";
+@use 'sass:math';
 
 @import 'colors';
 
-$font-family: "Averta";
-$font-family-header: "Averta";
+$font-family: 'Averta';
+$font-family-header: 'Averta';
 $font-weight: 400;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
@@ -38,7 +38,7 @@ $color-info: map_get($colors-electric-blue, 100);
 $color-success: map_get($colors-green, 100);
 $color-warning: map_get($colors-yellow, 100);
 
-$link-color:  map_get($colors-electric-blue, 100);
+$link-color: map_get($colors-electric-blue, 100);
 
 $padding-xxl: 48px;
 $padding-xl: 32px;
@@ -90,13 +90,12 @@ $small-screen: 600px !default;
 $medium-screen: 992px !default;
 $large-screen: 1200px !default;
 
-$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
-$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
-$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
-$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
-$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
-$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
-
+$medium-and-up: 'only screen and (min-width : #{$small-screen-up})' !default;
+$large-and-up: 'only screen and (min-width : #{$medium-screen-up})' !default;
+$extra-large-and-up: 'only screen and (min-width : #{$large-screen-up})' !default;
+$small-and-down: 'only screen and (max-width : #{$small-screen})' !default;
+$medium-and-down: 'only screen and (max-width : #{$medium-screen})' !default;
+$medium-only: 'only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})' !default;
 
 // Grid
 

package/assets/style/components-custom-style/_input.scss

@@ -1,6 +1,9 @@
 @import '../variables';
 
-textarea, select, input, button {
+textarea,
+select,
+input,
+button {
     outline: none;
     &.full-width {
         box-sizing: border-box;
@@ -9,13 +12,17 @@ textarea, select, input, button {
 }
 
 form.full-width {
-    textarea, select, input, button {
+    textarea,
+    select,
+    input,
+    button {
         box-sizing: border-box;
         width: 100%;
     }
 }
 
-input, textarea {
+input,
+textarea {
     border: 1px solid $form-input-default-border-color;
     border-radius: $border-radius;
     color: $form-control-selected-font-color;
@@ -58,7 +65,7 @@ input, textarea {
 
     // Hover
     &:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover {
-        border-color: $form-input-hover-border-color
+        border-color: $form-input-hover-border-color;
     }
 }
 
@@ -105,7 +112,8 @@ input, textarea {
 }
 
 form.submitted {
-    input, textarea {
+    input,
+    textarea {
         // Invalid
         &.ng-invalid:not([disabled]):not(.transparent) {
             border: 1px solid $color-error;
@@ -113,7 +121,6 @@ form.submitted {
     }
 }
 
-
 textarea {
     resize: none;
 }

package/assets/style/components-custom-style/_mat-button-toggle-group.scss

@@ -3,7 +3,7 @@
 .mat-button-toggle-group {
     height: 36px;
     border-radius: 4px;
-    border:none;
+    border: none;
 
     .mat-button-toggle {
         margin-left: -1px;
@@ -62,4 +62,3 @@
         border-top-right-radius: $border-radius;
     }
 }
-

package/assets/style/components-custom-style/_mat-button.scss

@@ -120,7 +120,9 @@
                 color: map_get($colors-electric-blue, 100);
             }
         }
-        &:not(.mat-accent):not(.mat-primary):not(.mat-success):not(.mat-warn):not(.mat-secondary):not(.mat-facebook):not(.mat-instagram):not(.mat-linkedin):not(.mat-twitter):not(.mat-youtube):not(.active):not(.locked) {
+        &:not(.mat-accent):not(.mat-primary):not(.mat-success):not(.mat-warn):not(.mat-secondary):not(.mat-facebook):not(
+                .mat-instagram
+            ):not(.mat-linkedin):not(.mat-twitter):not(.mat-youtube):not(.active):not(.locked) {
             ap-symbol {
                 color: map_get($colors-grey, 60);
             }
@@ -129,7 +131,8 @@
             }
         }
     }
-    &.square, &.square-rounded {
+    &.square,
+    &.square-rounded {
         min-width: 36px;
         padding: 0;
         &.small {
@@ -152,7 +155,8 @@
         overflow: hidden;
         opacity: 1;
 
-        &.circle, &.square {
+        &.circle,
+        &.square {
             ap-symbol {
                 animation: fadeout 0.4s linear 1 forwards;
             }
@@ -237,7 +241,8 @@
             color: #fff !important;
         }
 
-        &:hover, &.force-hover {
+        &:hover,
+        &.force-hover {
             background-color: $hover-background-color;
         }
 
@@ -250,7 +255,8 @@
         &:not(.circle):not(.square) .animation {
             background-color: $background-color;
         }
-        &.circle .animation, &.square .animation {
+        &.circle .animation,
+        &.square .animation {
             border-top-color: white;
             border-right-color: white;
         }
@@ -260,7 +266,8 @@
 button.mat-flat-button {
     @extend %ap-button;
     background-color: transparent;
-    &:not([disabled]):hover, &.force-hover {
+    &:not([disabled]):hover,
+    &.force-hover {
         background-color: map_get($colors-grey, 5);
         &.active {
             background-color: map_get($colors-electric-blue, 10);
@@ -292,7 +299,11 @@ button.mat-flat-button {
         color: #fff;
     }
     &.mat-accent {
-        @include flat-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 85), map_get($colors-electric-blue, 60));
+        @include flat-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 85),
+            map_get($colors-electric-blue, 60)
+        );
     }
     &.mat-primary {
         @include flat-button-color(map_get($colors-orange, 100), map_get($colors-orange, 85), map_get($colors-orange, 60));
@@ -329,7 +340,8 @@ button.mat-flat-button {
         color: $color;
         border-color: $border-color;
 
-        &:hover, &.force-hover {
+        &:hover,
+        &.force-hover {
             border-color: $hover-border-color;
         }
 
@@ -344,7 +356,8 @@ button.mat-flat-button {
             bottom: -1px;
             background-color: $color;
         }
-        &.circle, &.square {
+        &.circle,
+        &.square {
             border: none;
             .animation {
                 border-top-color: $color;
@@ -360,7 +373,8 @@ button.mat-flat-button {
     ap-symbol {
         color: $color;
     }
-    &:hover, &.force-hover {
+    &:hover,
+    &.force-hover {
         background-color: $hover-background-color;
     }
     &:active {
@@ -379,7 +393,8 @@ button.mat-stroked-button {
         ap-symbol {
             color: map_get($colors-grey, 60);
         }
-        &:hover, &.force-hover {
+        &:hover,
+        &.force-hover {
             background-color: map_get($colors-grey, 10);
         }
         &:active {
@@ -429,13 +444,15 @@ button.mat-stroked-button {
     &.background-white {
         background-color: $color-white;
     }
-    &:not([disabled]), &:not(.locked) {
+    &:not([disabled]),
+    &:not(.locked) {
         border-color: map_get($colors-grey, 20);
         &.active {
             border-color: map_get($colors-electric-blue, 100);
         }
     }
-    &:not([disabled]):hover, &.force-hover {
+    &:not([disabled]):hover,
+    &.force-hover {
         border-color: map_get($colors-grey, 40);
         &.active {
             border-color: map_get($colors-electric-blue, 85);
@@ -454,7 +471,11 @@ button.mat-stroked-button {
     }
 
     &.mat-accent {
-        @include stroked-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 60), map_get($colors-electric-blue, 85));
+        @include stroked-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 60),
+            map_get($colors-electric-blue, 85)
+        );
     }
     &.mat-primary {
         @include stroked-button-color(map_get($colors-orange, 100), map_get($colors-orange, 60), map_get($colors-orange, 85));
@@ -486,7 +507,11 @@ button.mat-stroked-button {
         }
     }
     &.mat-accent.ghost {
-        @include ghost-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 60), map_get($colors-electric-blue, 85));
+        @include ghost-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 60),
+            map_get($colors-electric-blue, 85)
+        );
         &[disabled] {
             background-color: transparent;
             color: map_get($colors-electric-blue, 85);
@@ -537,7 +562,6 @@ button.mat-stroked-button {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
             width: 40px;
-
         }
     }
 }
@@ -555,7 +579,8 @@ button.mat-stroked-button {
     ap-symbol {
         color: $text-color !important;
     }
-    &:hover, &.force-hover {
+    &:hover,
+    &.force-hover {
         cursor: pointer;
         background-color: $hover-background-color;
     }
@@ -571,7 +596,12 @@ button.mat-stroked-button {
 }
 
 button.ap-button-secondary-orange {
-    @include flat-secondary-button-color(map_get($colors-orange, 100), map_get($colors-orange, 10), map_get($colors-orange, 20), map_get($colors-orange, 40));
+    @include flat-secondary-button-color(
+        map_get($colors-orange, 100),
+        map_get($colors-orange, 10),
+        map_get($colors-orange, 20),
+        map_get($colors-orange, 40)
+    );
 
     &.ap-one-line {
         @include crop-text();
@@ -579,7 +609,12 @@ button.ap-button-secondary-orange {
 }
 
 button.ap-button-secondary-blue {
-    @include flat-secondary-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 10), map_get($colors-electric-blue, 20), map_get($colors-electric-blue, 40));
+    @include flat-secondary-button-color(
+        map_get($colors-electric-blue, 100),
+        map_get($colors-electric-blue, 10),
+        map_get($colors-electric-blue, 20),
+        map_get($colors-electric-blue, 40)
+    );
 
     &.ap-one-line {
         @include crop-text();

package/assets/style/components-custom-style/_mat-dialog.scss

@@ -22,11 +22,11 @@
 }
 
 .dark-backdrop {
-    background: rgba(0, 0, 0, .75);
+    background: rgba(0, 0, 0, 0.75);
 }
 
 .white-backdrop {
-    background: rgba(255, 255, 255, .75);
+    background: rgba(255, 255, 255, 0.75);
 }
 
 .full-screen-modal {

package/assets/style/components-custom-style/_mat-expansion-panel.scss

@@ -17,5 +17,4 @@
             }
         }
     }
-
 }

package/assets/style/components-custom-style/_mat-menu.scss

@@ -19,14 +19,15 @@
             color: map_get($colors-grey, 100);
         }
 
-        &:hover:not([disabled]), &.mat-menu-item-highlighted:not([disabled]) {
+        &:hover:not([disabled]),
+        &.mat-menu-item-highlighted:not([disabled]) {
             background-color: map_get($colors-electric-blue, 10);
             color: map_get($colors-electric-blue, 100);
             &::after {
                 color: map_get($colors-electric-blue, 100);
             }
             ap-symbol .svg {
-                fill:  map_get($colors-electric-blue, 100) !important;
+                fill: map_get($colors-electric-blue, 100) !important;
             }
         }
 
@@ -41,36 +42,36 @@
     max-width: unset;
     background-color: white;
     padding: 0px;
-    border: none!important;
+    border: none !important;
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
 
     &.shadow {
-        filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25))
+        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
     }
 
     &.shadow-no-border {
         box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.08);
     }
 
-    &.arrow-left{
+    &.arrow-left {
         background: transparent;
         .mat-menu-content {
             margin-left: 8px;
         }
     }
-    &.arrow-top{
+    &.arrow-top {
         background: transparent;
         .mat-menu-content {
             margin-top: 8px;
         }
     }
-    &.arrow-right{
+    &.arrow-right {
         background: transparent;
         .mat-menu-content {
             margin-right: 8px;
         }
     }
-    &.arrow-bottom{
+    &.arrow-bottom {
         background: transparent;
         .mat-menu-content {
             margin-bottom: 8px;
@@ -93,26 +94,26 @@
             height: 8px;
             transform: rotate(135deg);
             z-index: 99999;
-            &.arrow-left{
+            &.arrow-left {
                 bottom: 12px;
                 left: -4px;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
             }
-            &.arrow-right{
+            &.arrow-right {
                 bottom: 12px;
                 right: -4px;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
             }
-            &.arrow-top{
+            &.arrow-top {
                 top: -4px;
                 left: 50%;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
                 //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
             }
-            &.arrow-bottom{
+            &.arrow-bottom {
                 bottom: -4px;
                 left: 50%;
                 -webkit-transform: rotate(45deg);

package/assets/style/theme.scss

@@ -47,7 +47,6 @@
 @import 'components-custom-style/mat-expansion-panel';
 @import 'components-custom-style/mat-list';
 @import 'components-custom-style/mat-menu';
-@import 'components-custom-style/mat-radio-button';
 @import 'components-custom-style/mat-snack-bar';
 @import 'components-custom-style/ng-select';
 @import 'components-custom-style/select';

package/package.json

@@ -1,24 +1,24 @@
 {
-  "name": "@agorapulse/ui-theme",
-  "version": "15.0.26",
-  "description": "Agorapulse UI Theme Library",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agorapulse/design.git"
-  },
-  "author": "Arnaud BUSO",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/agorapulse/design/issues"
-  },
-  "scripts": {
-    "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
-  },
-  "homepage": "https://github.com/agorapulse/design#readme",
-  "peerDependencies": {
-    "@angular/material": "^15.1.0"
-  },
-  "devDependencies": {
-    "style-dictionary": "^3.7.2"
-  }
+    "name": "@agorapulse/ui-theme",
+    "version": "16.0.0-rc.0",
+    "description": "Agorapulse UI Theme Library",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/agorapulse/design.git"
+    },
+    "author": "Arnaud BUSO",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/agorapulse/design/issues"
+    },
+    "scripts": {
+        "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
+    },
+    "homepage": "https://github.com/agorapulse/design#readme",
+    "peerDependencies": {
+        "@angular/material": "^16.2.9"
+    },
+    "devDependencies": {
+        "style-dictionary": "^3.7.2"
+    }
 }

package/assets/style/components-custom-style/_mat-radio-button.scss

@@ -1,86 +0,0 @@
-@import '../variables';
-
-@mixin radio-button-state-style($color) {
-    .mat-radio-button:not(.mat-radio-disabled) {
-        .mat-radio-outer-circle {
-            border-color: $color;
-        }
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
-                background-color: $color;
-            }
-        }
-    }
-}
-
-.mat-radio-button {
-    margin-right: $padding-m;
-    .mat-radio-container {
-        height: 16px;
-        width: 16px;
-        .mat-radio-inner-circle {
-            border-color: $form-control-default-border-color;
-            left: -2px;
-            top: -2px;
-        }
-        .mat-radio-outer-circle {
-            border-color: $form-control-default-border-color;
-            border-width: 1px;
-            height: 16px;
-            width: 16px;
-        }
-    }
-    .mat-radio-label-content {
-        color: $form-control-default-font-color;
-    }
-    // Checked
-    &.mat-radio-checked:not(.mat-radio-disabled) {
-        .mat-radio-container {
-            .mat-radio-outer-circle {
-                border-color: $form-control-selected-border-color;
-            }
-        }
-        .mat-radio-label-content {
-            color: $form-control-selected-font-color;
-        }
-    }
-    // Disabled
-    &.mat-radio-disabled {
-        .mat-radio-outer-circle {
-            background-color: $form-control-disabled-background-color;
-            border-color: $form-control-disabled-border-color;
-        }
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
-                background-color: $form-control-disabled-border-color;
-            }
-            .mat-radio-outer-circle {
-                border-color: $form-control-disabled-border-color;
-            }
-        }
-        .mat-radio-label-content {
-            color: $form-control-disabled-font-color;
-        }
-    }
-}
-
-.mat-radio-group {
-    // Invalid
-    &.invalid,
-    &.ng-invalid.ng-touched {
-        @include radio-button-state-style($color-error);
-    }
-    // Valid
-    &.valid {
-        @include radio-button-state-style($color-success);
-    }
-}
-
-form.submitted {
-    .mat-radio-group {
-        // Invalid
-        &.ng-invalid {
-            @include radio-button-state-style($color-error);
-        }
-    }
-}