@agorapulse/ui-theme 15.0.3 → 15.0.5

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

@@ -9,7 +9,7 @@
 .form-field {
     margin-bottom: $padding-m;
 
-    label:not(.mat-checkbox-layout):not(.mat-radio-label) {
+    label:not(.mat-radio-label) {
         @extend %small-font;
         color: $form-control-default-label-color;
         display: block;

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

@@ -120,7 +120,7 @@
                 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(.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);
             }
@@ -390,6 +390,38 @@ button.mat-stroked-button {
             color: map_get($colors-grey, 20);
         }
     }
+    &.locked {
+        background-color: map_get($colors-purple, 10);
+        border: 1px solid map_get($colors-purple, 20);
+        color: map_get($colors-purple, 100);
+        position: relative;
+
+        &:after {
+            display: block;
+            position: absolute;
+            right: -6px;
+            top: -6px;
+            height: 16px;
+            width: 16px;
+            background-color: white;
+            border-radius: 200px;
+            content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0a12 12 0 1 0 12 12A12.015 12.014 0 0 0 12 0Zm5.34 17.693a.912.912 0 0 1-1.297 1.14l-3.852-2.168a.386.387 0 0 0-.38 0L7.96 18.833a.911.911 0 0 1-1.298-1.14l1.567-3.603a.384.384 0 0 0-.083-.43l-2.83-2.787a.85.84 0 0 1 .598-1.487h3.232a.385.385 0 0 0 .351-.223l1.685-3.628a.92.92 0 0 1 1.637 0l1.684 3.628a.386.386 0 0 0 .352.223h3.23a.851.851 0 0 1 .602 1.487l-2.829 2.787a.384.384 0 0 0-.084.43l1.567 3.603Z' fill='%236554C0'/></svg>");
+        }
+        &:hover {
+            background-color: map_get($colors-purple, 20);
+            border: 1px solid map_get($colors-purple, 40);
+        }
+        &:focus-visible {
+            background-color: map_get($colors-purple, 20);
+            border: 1px solid map_get($colors-purple, 20);
+            box-shadow: 0 0 0 1px $color-white, 0 0 0 3px map_get($colors-electric-blue, 100);
+        }
+        &:active {
+            background: map_get($colors-purple, 40);
+            border: 1px solid map_get($colors-purple, 60);
+        }
+    }
+
     @extend %ap-button;
     &.background-grey {
         background-color: $color-grey-background;
@@ -397,7 +429,7 @@ button.mat-stroked-button {
     &.background-white {
         background-color: $color-white;
     }
-    &:not([disabled]) {
+    &:not([disabled]), &:not(.locked) {
         border-color: map_get($colors-grey, 20);
         &.active {
             border-color: map_get($colors-electric-blue, 100);

package/assets/style/theme.scss

@@ -41,7 +41,6 @@
 @import 'components-custom-style/notification';
 @import 'components-custom-style/mat-button';
 @import 'components-custom-style/mat-button-toggle-group';
-@import 'components-custom-style/mat-checkbox';
 @import 'components-custom-style/mat-dialog';
 @import 'components-custom-style/mat-divider';
 @import 'components-custom-style/mat-expansion-panel';

package/assets/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 29 Mar 2023 10:20:13 GMT
+ * Generated on Wed, 19 Apr 2023 12:35:57 GMT
  */
 
 :root {
@@ -25,7 +25,7 @@
   --ref-color-electric-blue-05: #F3F9FF;
   --ref-color-grey-10: #EAECEF;
   --ref-color-grey-20: #D6DAE0;
-  --ref-color-grey-40: #858FA1;
+  --ref-color-grey-40: #AEB5C1;
   --ref-color-grey-60: #858FA1;
   --ref-color-grey-80: #5D6A82;
   --ref-color-grey-100: #344563;
@@ -153,47 +153,47 @@
   --sys-text-color-default: #344563;
   --sys-text-color-light: #5D6A82;
   --sys-text-color-error: #E81313;
-  --sys-text-style-h0-font-family: Averta Std;
+  --sys-text-style-h0-font-family: Averta;
   --sys-text-style-h0-size: 20px;
   --sys-text-style-h0-weight: 900;
   --sys-text-style-h0-line-height: 36px;
-  --sys-text-style-marketing-font-family: Averta Std;
+  --sys-text-style-marketing-font-family: Averta;
   --sys-text-style-marketing-size: 24px;
   --sys-text-style-marketing-weight: 800;
   --sys-text-style-marketing-line-height: 36px;
-  --sys-text-style-h1-font-family: Averta Std;
+  --sys-text-style-h1-font-family: Averta;
   --sys-text-style-h1-size: 20px;
   --sys-text-style-h1-weight: 700;
   --sys-text-style-h1-line-height: 36px;
-  --sys-text-style-h2-font-family: Averta Std;
+  --sys-text-style-h2-font-family: Averta;
   --sys-text-style-h2-size: 18px;
   --sys-text-style-h2-weight: 700;
   --sys-text-style-h2-line-height: 24px;
-  --sys-text-style-subtitle-font-family: Averta Std;
+  --sys-text-style-subtitle-font-family: Averta;
   --sys-text-style-subtitle-size: 16px;
   --sys-text-style-subtitle-weight: 400;
   --sys-text-style-subtitle-line-height: 20px;
-  --sys-text-style-h3-font-family: Averta Std;
+  --sys-text-style-h3-font-family: Averta;
   --sys-text-style-h3-size: 16px;
   --sys-text-style-h3-weight: 700;
   --sys-text-style-h3-line-height: 24px;
-  --sys-text-style-h4-font-family: Averta Std;
+  --sys-text-style-h4-font-family: Averta;
   --sys-text-style-h4-size: 14px;
   --sys-text-style-h4-weight: 700;
   --sys-text-style-h4-line-height: 20px;
-  --sys-text-style-body-font-family: Averta Std;
+  --sys-text-style-body-font-family: Averta;
   --sys-text-style-body-size: 14px;
   --sys-text-style-body-weight: 400;
   --sys-text-style-body-line-height: 18px;
-  --sys-text-style-body-bold-font-family: Averta Std;
+  --sys-text-style-body-bold-font-family: Averta;
   --sys-text-style-body-bold-size: 14px;
   --sys-text-style-body-bold-weight: 700;
   --sys-text-style-body-bold-line-height: 18px;
-  --sys-text-style-caption-font-family: Averta Std;
+  --sys-text-style-caption-font-family: Averta;
   --sys-text-style-caption-size: 12px;
   --sys-text-style-caption-weight: 400;
   --sys-text-style-caption-line-height: 16px;
-  --sys-text-style-caption-bold-font-family: Averta Std;
+  --sys-text-style-caption-bold-font-family: Averta;
   --sys-text-style-caption-bold-size: 12px;
   --sys-text-style-caption-bold-weight: 700;
   --sys-text-style-caption-bold-line-height: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "15.0.3",
+  "version": "15.0.5",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",

package/src/tokens/reference/color.json

@@ -28,7 +28,7 @@
                 "100" : { "value": "#344563" },
                 "80" : { "value": "#5D6A82" },
                 "60" : { "value": "#858FA1" },
-                "40" : { "value": "#858FA1" },
+                "40" : { "value": "#AEB5C1" },
                 "20" : { "value": "#D6DAE0" },
                 "10" : { "value": "#EAECEF" },
                 "05" : { "value": "#F5F5F7" },

package/src/tokens/reference/font.json

@@ -1,7 +1,7 @@
 {
     "ref": {
         "font": {
-            "family": "Averta Std",
+            "family": "Averta",
             "size": {
                 "xs" : {
                     "value": "12px"

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

@@ -1,103 +0,0 @@
-@import '../variables';
-
-@mixin checkbox-state-style($color) {
-    .mat-checkbox-frame {
-        border-color:$color;
-    }
-    &.mat-checkbox-checked {
-        .mat-checkbox-background {
-            background-color: $color !important;
-        }
-    }
-}
-
-.mat-checkbox {
-    margin-right: $padding-m;
-    .mat-checkbox-frame {
-        background-color: white;
-        border-color: $form-control-default-border-color;
-        border-radius: $border-radius;
-        border-width: 1px;
-    }
-    .mat-checkbox-background {
-        border-radius: $border-radius;
-        .mat-checkbox-checkmark-path {
-            stroke-width: 4px;
-        }
-    }
-    .mat-checkbox-checkmark {
-        height: 10px;
-        top: 2px;
-    }
-    .mat-checkbox-layout {
-        align-items: center;
-
-        .mat-checkbox-label {
-            display: flex;
-            color: $form-control-default-font-color;
-            line-height: $font-line-height;
-            font-size: $font-size;
-        }
-    }
-    // Hover
-    /* Does not work?
-    &:hover {
-        .mat-checkbox-frame {
-            color: $form-control-hover-border-color !important;
-        }
-    }*/
-    // Checked
-    &.mat-checkbox-checked:not(.mat-checkbox-disabled) {
-        .mat-checkbox-background {
-            background-color: $form-control-selected-background-color !important;
-        }
-        .mat-checkbox-label {
-            color: $form-control-selected-font-color;
-        }
-    }
-    // Disabled
-    &.mat-checkbox-disabled {
-        .mat-checkbox-background {
-            background-color: $form-control-disabled-background-color;
-            border: 1px solid $form-control-disabled-border-color;
-        }
-        .mat-checkbox-label {
-            color: $form-control-disabled-font-color;
-        }
-        &.mat-checkbox-checked {
-            .mat-checkbox-background {
-                background-color: $form-control-disabled-selected-background-color !important;
-            }
-        }
-    }
-    // Invalid
-    &.invalid:not(.mat-checkbox-disabled),
-    &.ng-invalid.ng-dirty.ng-touched:not([disabled]) {
-        @include checkbox-state-style($color-error);
-    }
-    // Valid
-    &.valid:not(.mat-checkbox-disabled) {
-        @include checkbox-state-style($color-success);
-    }
-    // Full width
-    &.full-width {
-        width: 100%;
-        margin: 0;
-        .mat-checkbox-layout {
-            display: flex;
-            justify-content: space-between;
-            .mat-checkbox-inner-container {
-                margin: 0;
-            }
-        }
-    }
-}
-
-form.submitted {
-    .mat-checkbox {
-        // Invalid
-        &.ng-invalid {
-            @include checkbox-state-style($color-error);
-        }
-    }
-}