Merge branch 'develop' into 'release'

See merge request passbolt/passbolt-styleguide!1664
passbolt · Jul 15, 2024 · 9ba165c · 9ba165c
2 parents da4ca61 + f01fbf5
commit 9ba165c
Show file tree

Hide file tree

Showing 163 changed files with 4,077 additions and 1,272 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "passbolt-styleguide",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "AGPL-3.0",
   "copyright": "Copyright 2023 Passbolt SA",
   "description": "Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.",
@@ -85,7 +85,8 @@
     },
     "glob-stream": {
       "glob-parent": "5.1.2"
-    }
+    },
+    "ws": "8.17.1"
   },
   "scripts": {
     "build": "npm run build-api-app",

diff --git a/src/less/abstractions/colors.less b/src/less/abstractions/colors.less
@@ -14,6 +14,7 @@
 @honeydew: #EDF7EB;
 @islamic-green: #0EAA00;
 @islamic-green-2: #009900;
+@islamic-green-3: #7ac473;
 
 @deep-champagne: #FFDBA6;
 @blond: #FEF0BF;
@@ -383,6 +384,7 @@
 
 /* tables */
 @table-background: @white;
+@table-success-background: @islamic-green-3;
 @table-warning-background: @blond;
 @table-error-background: @light-salmon-pink;
 @table-border: @chinese-white;

diff --git a/src/less/abstractions/colors_custom.sample.less b/src/less/abstractions/colors_custom.sample.less
@@ -15,6 +15,7 @@
 
 @success-1: hsl(68,100%,30%);
 @success-2: hsl(45,100%,35%);
+@success-3: hsl(68,50%,50%);
 
 @warning-1: hsl(18,80%,54%);
 @warning-2: hsl(18,80%,64%);
@@ -368,6 +369,7 @@
 
 /* tables */
 @table-background: @main-color;
+@table-success-background: @success-3;
 @table-warning-background: @warning-2;
 @table-error-background: @alert-3;
 @table-border: @main-color-gradient-21;

diff --git a/src/less/abstractions/colors_migdar.less b/src/less/abstractions/colors_migdar.less
@@ -12,6 +12,7 @@
 @honeydew: #EDF7EB;
 @islamic-green: #0EAA00;
 @islamic-green-2: #009900;
+@islamic-green-3: #7ac473;
 
 
 @gamboge-orange: #A46100;
@@ -388,6 +389,7 @@
 
 /* tables */
 @table-background: @raisin-black;
+@table-success-background: @islamic-green-3;
 @table-warning-background: @deep-champagne-2;
 @table-error-background: @light-salmon-pink;
 @table-border: @raisin-black;

diff --git a/src/less/abstractions/colors_solarized-dark.less b/src/less/abstractions/colors_solarized-dark.less
@@ -12,6 +12,7 @@
 
 @success-1: hsl(68,100%,30%);
 @success-2: hsl(68,100%,35%);
+@success-3: hsl(68,50%,70%);
 
 @warning-1: hsl(18,80%,54%);
 @warning-2: hsl(18,80%,64%);
@@ -395,6 +396,7 @@
 
 /* tables */
 @table-background: @main-color-gradient-8;
+@table-success-background: @success-3;
 @table-warning-background: @warning-3;
 @table-error-background: @alert-3;
 @table-border: @main-color-gradient-8;

diff --git a/src/less/abstractions/colors_solarized-light.less b/src/less/abstractions/colors_solarized-light.less
@@ -15,6 +15,7 @@
 
 @success-1: hsl(68,100%,30%);
 @success-2: hsl(45,100%,35%);
+@success-3: hsl(68,50%,50%);
 
 @warning-1: hsl(18,80%,54%);
 @warning-2: hsl(18,80%,64%);
@@ -396,6 +397,7 @@
 
 /* tables */
 @table-background: @main-color;
+@table-success-background: @success-3;
 @table-warning-background: @warning-2;
 @table-error-background: @alert-3;
 @table-border: @main-color-gradient-21;

diff --git a/src/less/base/shimmer.less b/src/less/base/shimmer.less
@@ -4,14 +4,26 @@
     width:100%;
     height:100%;
     content: '';
-    animation : shimmer 2s infinite;
+    animation: shimmer 2s infinite;
     background: linear-gradient(
             45deg,
             rgba(@default-background, 0) 0,
             rgba(@default-background, 0.1) 30%,
             rgba(@default-background, 0.5) 50%,
             rgba(@default-background, 0)
     );
+
+  &.shimmer-tooltip {
+    animation : shimmer 10s infinite;
+    background: linear-gradient(
+            45deg,
+            rgba(@tooltip-background, 0) 0,
+            rgba(@tooltip-background, 0.1) 30%,
+            rgba(@tooltip-background, 0.5) 50%,
+            rgba(@tooltip-background, 0)
+    );
+  }
+
 }
 @keyframes shimmer {
     0% {

diff --git a/src/less/components/actionbar.less b/src/less/components/actionbar.less
@@ -43,11 +43,17 @@
 
 /* hide icons if there is no space */
 @media all and (max-width: 1024px) {
+    .header.third .main-action-wrapper {
+        button {
+            width: 4.8rem;
+        }
+    }
     .header.third .main-action-wrapper,
     .header.third .actions-wrapper {
         button {
             min-width: 1em;
             font-size: 1em;
+            height: 3.6rem;
         }
         button span + span {
             &.svg-icon {

diff --git a/src/less/components/comments.less b/src/less/components/comments.less
@@ -28,6 +28,7 @@
             margin-left: 1.6rem;
             margin-top: 0;
             border-radius: .3rem;
+            overflow-wrap: break-word;
         }
 
         /* picture */

diff --git a/src/less/components/fingerprint.less b/src/less/components/fingerprint.less
@@ -0,0 +1,24 @@
+.fingerprint {
+  .fingerprint-line {
+    text-transform: uppercase;
+    font-family: "Inconsolata";
+    font-size: 1.5rem;
+  }
+
+  &.skeleton {
+    position:relative;
+    .fingerprint-line {
+      margin: .3rem 0 0 0;
+      height: 1.3rem;
+      width: 18rem;
+      background: @tooltip-text-color;
+      opacity: 0.2;
+      .rounded();
+    }
+    .shimmer {
+      position:absolute;
+      top:0;
+      left:0;
+    }
+  }
+}
diff --git a/src/less/components/form/password-complexity-with-goal.less b/src/less/components/form/password-complexity-with-goal.less
@@ -4,7 +4,7 @@
     .complexity-text {
         display: flex;
         font-size: 1rem;
-        line-height: 1.4rem;
+        line-height: 1.362rem;
         color: @complexity-text-color;
     }
 
@@ -14,6 +14,10 @@
         position: relative;
         height: 1rem;
         width: 100%;
+
+        .tooltip {
+            top: 0;
+        }
     }
 
     .progress-bar {
@@ -38,7 +42,7 @@
             &.required {
                 background: @hint-error-color;
             }
-    
+
             &.reached {
                 background: @hint-success-color;
             }
@@ -48,10 +52,14 @@
             width: 0;
             background: @table-warning-background;
             z-index: 5;
-    
+
             &.required {
                 background: @table-error-background;
             }
+
+            &.reached {
+                background: @table-success-background;
+            }
         }
     }