@agorapulse/ui-theme 20.1.4 → 20.1.6

package/assets/desktop_variables.css

@@ -201,6 +201,17 @@
   --sys-icon-sm: 14px;
   --sys-icon-md: 16px;
   --sys-radio-transition-duration: 250ms;
+  --sys-settings-content-max-width-md: 700px;
+  --sys-settings-content-max-width-lg: 1200px;
+  --sys-settings-content-internal-margin: 16px;
+  --sys-settings-content-vertical-spacing: 16px;
+  --sys-settings-content-background-color: #F9F9FA;
+  --sys-settings-card-border-color: #EAECEF;
+  --sys-settings-card-border-radius: 8px;
+  --sys-settings-card-background-color: #FFFFFF;
+  --sys-settings-card-internal-padding: 16px;
+  --sys-settings-card-feature-background-color: #EFEDF8;
+  --sys-settings-card-feature-lock-border-color: #E0DDF2;
   --sys-text-color-default: #344563;
   --sys-text-color-light: #5D6A82;
   --sys-text-color-error: #E81313;
@@ -623,7 +634,6 @@
   --comp-status-line-height: 16px;
   --comp-tabs-text-font-family: Averta;
   --comp-tabs-border-color: #EAECEF;
-  --comp-tabs-content-spacing: 16px;
   --comp-tabs-tab-padding: 12px 16px;
   --comp-tabs-tab-font-size: 14px;
   --comp-tabs-tab-line-height: 18px;

package/assets/mobile_variables.css

@@ -201,6 +201,17 @@
   --sys-icon-sm: 14px;
   --sys-icon-md: 16px;
   --sys-radio-transition-duration: 250ms;
+  --sys-settings-content-max-width-md: 700px;
+  --sys-settings-content-max-width-lg: 1200px;
+  --sys-settings-content-internal-margin: 16px;
+  --sys-settings-content-vertical-spacing: 16px;
+  --sys-settings-content-background-color: #F9F9FA;
+  --sys-settings-card-border-color: #EAECEF;
+  --sys-settings-card-border-radius: 8px;
+  --sys-settings-card-background-color: #FFFFFF;
+  --sys-settings-card-internal-padding: 16px;
+  --sys-settings-card-feature-background-color: #EFEDF8;
+  --sys-settings-card-feature-lock-border-color: #E0DDF2;
   --sys-text-color-default: #344563;
   --sys-text-color-light: #5D6A82;
   --sys-text-color-error: #E81313;
@@ -623,7 +634,6 @@
   --comp-status-line-height: 16px;
   --comp-tabs-text-font-family: Averta;
   --comp-tabs-border-color: #EAECEF;
-  --comp-tabs-content-spacing: 16px;
   --comp-tabs-tab-padding: 12px 16px;
   --comp-tabs-tab-font-size: 14px;
   --comp-tabs-tab-line-height: 18px;

package/assets/style/_helpers.scss

@@ -1,11 +1,11 @@
-@import 'variables';
+@use 'variables' as vars;
 
 /*
  * Helpers, mostly from https://materializecss.com/helpers.html
  */
 blockquote {
-    border-left: 5px solid $color-azure;
-    margin: $padding-l 0;
+    border-left: 5px solid vars.$color-azure;
+    margin: vars.$padding-l 0;
     padding-left: 1.5rem;
     font-style: italic;
 }
@@ -13,7 +13,7 @@ blockquote {
 .divider {
     height: 1px;
     overflow: hidden;
-    background-color: $color-silver;
+    background-color: vars.$color-silver;
 }
 
 .left-align {

package/assets/style/_mat-typography.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import 'variables';
+@use 'variables' as vars;
 
 // Override base header tags (so that we don't have to add Material classes, e.g: class="mat-h1")
 h1,
@@ -30,7 +30,7 @@ h4 {
     font-weight: var(--sys-text-style-h4-weight);
 }
 p {
-    margin: 0 0 $padding-ml;
+    margin: 0 0 vars.$padding-ml;
 }
 .h0 {
     font-size: var(--sys-text-style-h0-size);
@@ -72,6 +72,6 @@ small {
 // Override default text state
 body {
     .mat-drawer-container {
-        color: $font-color;
+        color: vars.$font-color;
     }
 }

package/assets/style/_variables.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
-
-@import 'colors';
+@use 'sass:map';
+@use 'colors';
+@forward 'colors';
 
 $font-family: 'Averta';
 $font-family-header: 'Averta';
@@ -26,19 +27,19 @@ $font-size-sl: 10px;
 $font-line-height-sm: 14px;
 $font-size-sm: 8px;
 
-$font-color: map_get($colors-grey, 80);
+$font-color: map.get(colors.$colors-grey, 80);
 
-$border-color: map_get($colors-grey, 20); //$color-pale-grey,
+$border-color: map.get(colors.$colors-grey, 20); //$color-pale-grey,
 $border-radius: 4px;
 $border-radius-l: 8px;
 $border-radius-lg: 10px;
 
-$color-error: map_get($colors-red, 100);
-$color-info: map_get($colors-electric-blue, 100);
-$color-success: map_get($colors-green, 100);
-$color-warning: map_get($colors-yellow, 100);
+$color-error: map.get(colors.$colors-red, 100);
+$color-info: map.get(colors.$colors-electric-blue, 100);
+$color-success: map.get(colors.$colors-green, 100);
+$color-warning: map.get(colors.$colors-yellow, 100);
 
-$link-color: map_get($colors-electric-blue, 100);
+$link-color: map.get(colors.$colors-electric-blue, 100);
 
 $padding-xxl: 48px;
 $padding-xl: 32px;
@@ -50,22 +51,22 @@ $padding-sl: 6px;
 $padding-sm: 4px;
 
 // Forms controls
-$form-control-selected-background-color: map_get($colors-electric-blue, 100);
-$form-control-selected-border-color: map_get($colors-electric-blue, 100);
-$form-control-selected-font-color: map_get($colors-grey, 100);
-$form-control-default-background-color: map_get($colors-grey, 40);
-$form-control-default-border-color: map_get($colors-grey, 40);
-$form-control-default-font-color: map_get($colors-grey, 80);
-$form-control-default-label-color: map_get($colors-grey, 60);
-$form-control-disabled-background-color: map_get($colors-grey, 10);
-$form-control-disabled-border-color: map_get($colors-grey, 20);
-$form-control-disabled-font-color: map_get($colors-grey, 20);
-$form-control-disabled-selected-background-color: map_get($colors-grey, 20);
-$form-control-hover-border-color: map_get($colors-grey, 60);
-$form-input-default-border-color: map_get($colors-grey, 20);
-$form-input-disabled-background-color: map_get($colors-grey, 5);
-$form-input-placeholder-font-color: map_get($colors-grey, 40);
-$form-input-hover-border-color: map_get($colors-grey, 40);
+$form-control-selected-background-color: map.get(colors.$colors-electric-blue, 100);
+$form-control-selected-border-color: map.get(colors.$colors-electric-blue, 100);
+$form-control-selected-font-color: map.get(colors.$colors-grey, 100);
+$form-control-default-background-color: map.get(colors.$colors-grey, 40);
+$form-control-default-border-color: map.get(colors.$colors-grey, 40);
+$form-control-default-font-color: map.get(colors.$colors-grey, 80);
+$form-control-default-label-color: map.get(colors.$colors-grey, 60);
+$form-control-disabled-background-color: map.get(colors.$colors-grey, 10);
+$form-control-disabled-border-color: map.get(colors.$colors-grey, 20);
+$form-control-disabled-font-color: map.get(colors.$colors-grey, 20);
+$form-control-disabled-selected-background-color: map.get(colors.$colors-grey, 20);
+$form-control-hover-border-color: map.get(colors.$colors-grey, 60);
+$form-input-default-border-color: map.get(colors.$colors-grey, 20);
+$form-input-disabled-background-color: map.get(colors.$colors-grey, 5);
+$form-input-placeholder-font-color: map.get(colors.$colors-grey, 40);
+$form-input-hover-border-color: map.get(colors.$colors-grey, 40);
 
 // Avatar
 

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

@@ -1,8 +1,9 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 .alert {
     font-weight: bold;
-    padding: $padding-m $padding-m;
+    padding: vars.$padding-m vars.$padding-m;
     position: relative;
 
     a {
@@ -19,17 +20,17 @@
     }
 
     &.error {
-        background-color: $color-error;
-        color: $color-white;
+        background-color: vars.$color-error;
+        color: vars.$color-white;
     }
 
     &.success {
-        background-color: $color-success;
-        color: $color-white;
+        background-color: vars.$color-success;
+        color: vars.$color-white;
     }
 
     &.warning {
-        background-color: map_get($colors-orange, 100);
-        color: $color-white;
+        background-color: map.get(vars.$colors-orange, 100);
+        color: vars.$color-white;
     }
 }

package/assets/style/components-custom-style/_clickable-text.scss

@@ -1,8 +1,9 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 span {
     &.ap-clickable-text {
-        color: map_get($colors-electric-blue, 100);
+        color: map.get(vars.$colors-electric-blue, 100);
         cursor: pointer;
     }
 }

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

@@ -1,7 +1,8 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 .ap-input-error {
-    color: map-get($colors-red, 100);
-    font-weight: $font-weight;
-    font-size: $font-size-s;
+    color: map.get(vars.$colors-red, 100);
+    font-weight: vars.$font-weight;
+    font-size: vars.$font-size-s;
 }

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

@@ -1,4 +1,5 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 .mat-button-toggle-group {
     height: 36px;
@@ -7,19 +8,19 @@
 
     .mat-button-toggle {
         margin-left: -1px;
-        color: map_get($colors-grey, 100);
+        color: map.get(vars.$colors-grey, 100);
         font-weight: bold;
-        border: 1px solid map_get($colors-grey, 20);
+        border: 1px solid map.get(vars.$colors-grey, 20);
 
         &.mat-button-toggle-checked {
-            color: map_get($colors-electric-blue, 100);
-            border: 1px solid map_get($colors-electric-blue, 100) !important;
+            color: map.get(vars.$colors-electric-blue, 100);
+            border: 1px solid map.get(vars.$colors-electric-blue, 100) !important;
             background: white;
             z-index: 1;
 
             &:hover {
-                border: 1px solid map_get($colors-electric-blue, 100) !important;
-                color: map_get($colors-electric-blue, 100);
+                border: 1px solid map.get(vars.$colors-electric-blue, 100) !important;
+                color: map.get(vars.$colors-electric-blue, 100);
                 background: white;
                 z-index: 1;
                 height: 100%;
@@ -29,8 +30,8 @@
         &:hover {
             background: white;
             box-sizing: border-box;
-            border: 1px solid map_get($colors-electric-blue, 100) !important;
-            color: map_get($colors-grey, 100);
+            border: 1px solid map.get(vars.$colors-electric-blue, 100) !important;
+            color: map.get(vars.$colors-grey, 100);
             height: 100%;
             z-index: 1;
             .mat-button-toggle-focus-overlay {
@@ -44,7 +45,7 @@
         }
 
         span {
-            padding: 0 $padding-m;
+            padding: 0 vars.$padding-m;
             height: 36px;
             line-height: 36px;
             &.mat-button-toggle-focus-overlay {
@@ -53,12 +54,12 @@
         }
     }
     .mat-button-toggle:first-of-type {
-        border-bottom-left-radius: $border-radius;
-        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: vars.$border-radius;
+        border-top-left-radius: vars.$border-radius;
         margin-left: 0 !important;
     }
     .mat-button-toggle:last-of-type {
-        border-bottom-right-radius: $border-radius;
-        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: vars.$border-radius;
+        border-top-right-radius: vars.$border-radius;
     }
 }