@agorapulse/ui-theme 17.0.0-beta.2 → 17.0.0

package/assets/desktop_variables.css

@@ -482,6 +482,21 @@
   --comp-select-search-bar-bottom-link-padding-top: 12px;
   --comp-select-search-bar-bottom-link-padding-bottom: 4px;
   --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
+  --comp-snackbar-text-style-font-family: Averta;
+  --comp-snackbar-text-style-size: 14px;
+  --comp-snackbar-text-style-font-weight: 400;
+  --comp-snackbar-text-style-line-height: 18px;
+  --comp-snackbar-text-color: #344563;
+  --comp-snackbar-width: 420px;
+  --comp-snackbar-border-radius: 8px;
+  --comp-snackbar-padding-horizontal: 16px;
+  --comp-snackbar-padding-vertical: 12px;
+  --comp-snackbar-spacing: 12px;
+  --comp-snackbar-success-background-color: #DAF1DD;
+  --comp-snackbar-success-icon-color: #0F821D;
+  --comp-snackbar-error-background-color: #FAD0D0;
+  --comp-snackbar-error-icon-color: #D80505;
+  --comp-snackbar-shadow: 0px 7px 50px 0px rgba(0, 0, 0, 0.08);
   --comp-split-button-text-size: 14px;
   --comp-split-button-text-font-family: Averta;
   --comp-split-button-text-weight: 700;

package/assets/mobile_variables.css

@@ -482,6 +482,21 @@
   --comp-select-search-bar-bottom-link-padding-top: 12px;
   --comp-select-search-bar-bottom-link-padding-bottom: 4px;
   --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
+  --comp-snackbar-text-style-font-family: Averta;
+  --comp-snackbar-text-style-size: 14px;
+  --comp-snackbar-text-style-font-weight: 400;
+  --comp-snackbar-text-style-line-height: 18px;
+  --comp-snackbar-text-color: #344563;
+  --comp-snackbar-width: 420px;
+  --comp-snackbar-border-radius: 8px;
+  --comp-snackbar-padding-horizontal: 16px;
+  --comp-snackbar-padding-vertical: 12px;
+  --comp-snackbar-spacing: 12px;
+  --comp-snackbar-success-background-color: #DAF1DD;
+  --comp-snackbar-success-icon-color: #0F821D;
+  --comp-snackbar-error-background-color: #FAD0D0;
+  --comp-snackbar-error-icon-color: #D80505;
+  --comp-snackbar-shadow: 0px 7px 50px 0px rgba(0, 0, 0, 0.08);
   --comp-split-button-text-size: 14px;
   --comp-split-button-text-font-family: Averta;
   --comp-split-button-text-weight: 700;

package/assets/style/_colors.scss

@@ -273,7 +273,7 @@ $color-linkedin: #2c67bc;
 $color-twitter: #55acee;
 $color-youtube: #ff0000;
 $color-instagramlink: #00376b;
-$color-web: #178DFE;
+$color-web: #178dfe;
 
 // Others
 //$state-tag: #5EA9FF;

package/assets/style/_input.scss

@@ -46,3 +46,7 @@
         width: 100%;
     }
 }
+
+input:placeholder-shown {
+    text-overflow: ellipsis;
+}

package/assets/style/_select.scss

@@ -303,7 +303,7 @@
                     &:not(.multiple) {
                         background-color: var(--ref-color-electric-blue-10);
                         color: var(--ref-color-electric-blue-150);
-                        ap-symbol {
+                        ap-symbol:not(.option-selected) {
                             .svg {
                                 color: var(--ref-color-electric-blue-150);
                             }
@@ -584,6 +584,9 @@
             &:active {
                 color: var(--ref-color-electric-blue-150);
             }
+            span {
+                text-align: left;
+            }
         }
     }
 

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

@@ -170,7 +170,9 @@
                 border-radius: 50%;
                 border-top: 2px solid map_get($colors-electric-blue, 100);
                 border-right: 2px solid map_get($colors-electric-blue, 100);
-                animation: spin 1s linear infinite, fadein 0.4s linear 1 forwards;
+                animation:
+                    spin 1s linear infinite,
+                    fadein 0.4s linear 1 forwards;
             }
 
             &.animation-fade-out {
@@ -179,7 +181,9 @@
                 }
 
                 .animation {
-                    animation: spin 1s linear infinite, fadeout 0.4s linear 1 forwards;
+                    animation:
+                        spin 1s linear infinite,
+                        fadeout 0.4s linear 1 forwards;
                 }
             }
         }
@@ -429,7 +433,9 @@ button.mat-stroked-button {
         &: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);
+            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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@agorapulse/ui-theme",
-    "version": "17.0.0-beta.2",
+    "version": "17.0.0",
     "description": "Agorapulse UI Theme Library",
     "repository": {
         "type": "git",

package/src/README.md

@@ -1,11 +1,13 @@
 # Agorapulse Style Dictionary
 
 To generate the style dictionary based on the config file, you'll have to run the following command:
+
 ```bash
 style-dictionary build
 ```
 
 You should see something like this output:
+
 ```
 Copying starter files...
 
@@ -16,7 +18,9 @@ Running `style-dictionary build` for the first time to generate build artifacts.
 css
 ✔︎  assets/variables.css
 ```
+
 If everything goes well, you'll should have the following architecture.
+
 ```
 ├── README.md
 ├── config.json

package/src/desktop_config.js

@@ -1,10 +1,5 @@
 module.exports = {
-    source: [
-        'tokens/reference/*.json',
-        'tokens/system/*.json',
-        'tokens/system/desktop/*.json',
-        'tokens/components/*.json',
-    ],
+    source: ['tokens/reference/*.json', 'tokens/system/*.json', 'tokens/system/desktop/*.json', 'tokens/components/*.json'],
     platforms: {
         desktop: {
             transformGroup: 'css',

package/src/mobile_config.js

@@ -1,10 +1,5 @@
 module.exports = {
-    source: [
-        'tokens/reference/*.json',
-        'tokens/system/*.json',
-        'tokens/system/mobile/*.json',
-        'tokens/components/*.json',
-    ],
+    source: ['tokens/reference/*.json', 'tokens/system/*.json', 'tokens/system/mobile/*.json', 'tokens/components/*.json'],
     platforms: {
         mobile: {
             transformGroup: 'css',

package/src/tokens/components/snackbar.json

@@ -0,0 +1,71 @@
+{
+    "comp": {
+        "snackbar": {
+            "text": {
+                "style": {
+                    "font-family": {
+                        "value": "{sys.text.style.body.font-family}"
+                    },
+                    "size": {
+                        "value": "{sys.text.style.body.size}"
+                    },
+                    "font-weight": {
+                        "value": "{sys.text.style.body.weight}"
+                    },
+                    "line-height": {
+                        "value": "{sys.text.style.body.line-height}"
+                    }
+                },
+                "color": {
+                    "value": "{ref.color.grey.100}"
+                }
+            },
+            "width": {
+               "value": "420px"
+            },
+            "border": {
+                "radius": {
+                    "value": "{sys.border.radius.lg}"
+                }
+            },
+            "padding": {
+                "horizontal": {
+                    "value": "{ref.spacing.sm}"
+                },
+                "vertical": {
+                    "value": "{ref.spacing.xs}"
+                }
+            },
+            "spacing": {
+                "value": "{ref.spacing.xs}"
+            },
+            "success": {
+                "background": {
+                    "color": {
+                        "value": "{ref.color.green.20}"
+                    }
+                },
+                "icon": {
+                    "color": {
+                        "value": "{ref.color.green.150}"
+                    }
+                }
+            },
+            "error": {
+                "background": {
+                    "color": {
+                        "value": "{ref.color.red.20}"
+                    }
+                },
+                "icon": {
+                    "color": {
+                        "value": "{ref.color.red.150}"
+                    }
+                }
+            },
+            "shadow": {
+                "value": "0px 7px 50px 0px rgba(0, 0, 0, 0.08)"
+            }
+        }
+    }
+}