@innovaccer/design-system 2.15.0 → 2.15.2

package/CHANGELOG.md

@@ -1,3 +1,82 @@
+## 2.15.2 (2023-04-03)
+
+### Highlights
+
+- fix(backdrop): update 80% opacity with 60% opacity in backdrop component (bc46072c)
+- fix(badge): update subtle text appearances of badge component (3c1c2b47)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+NA
+
+### Fixes
+
+- fix(backdrop): update 80% opacity with 60% opacity (bc46072c)
+- fix(badge): update subtle text appearances of badge component (3c1c2b47)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(badge): update documentation with hover and statusHint vs badge comparison (e7b69672)
+- docs(statusHint): update documentation with statusHint vs badge comparison (d928e95d)
+- docs(table): update documentation with data alignment guideline (7270caea)
+- docs(content): update house rules documentation (203dd85f)
+
+---
+
+## 2.15.1 (2023-03-27)
+
+### Highlights
+
+- fix(card): add new shadows in card component (165740cd)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+NA
+
+### Fixes
+
+- fix(docs): fix scroll issue with sticky tabs (b26110d7)
+- fix(card): add new shadows in card component (165740cd)
+- fix(tooltip): update animation delay property in tooltip component (b391f26c)
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 2.15.0 (2023-03-06)
 
 ### Highlights

package/css/dist/index.css

@@ -974,7 +974,7 @@ body {
 }
 
 .Backdrop {
-  background-color: rgba(47, 47, 47, 0.8);
+  background-color: rgba(47, 47, 47, 0.6);
   height: 100vh;
   width: 100vw;
   position: fixed;
@@ -1074,21 +1074,22 @@ body {
 }
 
 .Badge--subtle-primary {
-  color: var(--primary-dark);
+  color: var(--primary-darker);
   background: var(--primary-lightest);
 }
 
 .Badge--subtle-secondary {
+  color: var(--text);
   background: var(--secondary-light);
 }
 
 .Badge--subtle-success {
-  color: var(--success-dark);
+  color: var(--success-darker);
   background: var(--success-lightest);
 }
 
 .Badge--subtle-alert {
-  color: var(--alert-dark);
+  color: var(--alert-darker);
   background: var(--alert-lightest);
 }
 
@@ -1103,12 +1104,12 @@ body {
 }
 
 .Badge--subtle-accent2 {
-  color: var(--accent2-dark);
+  color: var(--accent2-darker);
   background: var(--accent2-lightest);
 }
 
 .Badge--subtle-accent3 {
-  color: var(--accent3-dark);
+  color: var(--accent3-darker);
   background: var(--accent3-lightest);
 }
 
@@ -1732,14 +1733,29 @@ body {
   background-color: var(--white);
 }
 
-.Card--shadow-default,
-.Card--shadow-light,
-.Card--shadow-medium,
-.Card--shadow-dark {
+.Card--default,
+.Card--light,
+.Card--medium,
+.Card--dark {
   border: none;
   box-shadow: var(--shadow-s);
 }
 
+.Card--shadow10 {
+  border: none;
+  box-shadow: var(--shadow-s);
+}
+
+.Card--shadow20 {
+  border: none;
+  box-shadow: var(--shadow-m);
+}
+
+.Card--shadow30 {
+  border: none;
+  box-shadow: var(--shadow-l);
+}
+
 .Card-header {
   padding: var(--spacing-2) var(--spacing-2) var(--spacing-l) var(--spacing-2);
 }
@@ -6365,7 +6381,6 @@ body {
   overflow: hidden;
   box-sizing: border-box;
   transition: opacity 120ms;
-  transition-delay: 800ms;
   transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
 }
 
@@ -6379,7 +6394,7 @@ body {
 @-webkit-keyframes tooltip-open-top {
   from {
     top: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     top: -4px;
@@ -6390,7 +6405,7 @@ body {
 @keyframes tooltip-open-top {
   from {
     top: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     top: -4px;
@@ -6400,7 +6415,7 @@ body {
 @-webkit-keyframes tooltip-close-top {
   from {
     top: -4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     top: 0px;
@@ -6410,7 +6425,7 @@ body {
 @keyframes tooltip-close-top {
   from {
     top: -4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     top: 0px;
@@ -6425,13 +6440,13 @@ body {
           animation-fill-mode: forwards;
 }
 .Tooltip-animation-close-top {
-  -webkit-animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
-          animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
+  -webkit-animation: tooltip-close-top 80ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-top 80ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 @-webkit-keyframes tooltip-open-bottom {
   from {
     top: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     top: 4px;
@@ -6441,7 +6456,7 @@ body {
 @keyframes tooltip-open-bottom {
   from {
     top: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     top: 4px;
@@ -6451,7 +6466,7 @@ body {
 @-webkit-keyframes tooltip-close-bottom {
   from {
     top: 4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     top: 0px;
@@ -6461,7 +6476,7 @@ body {
 @keyframes tooltip-close-bottom {
   from {
     top: 4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     top: 0px;
@@ -6476,14 +6491,14 @@ body {
           animation-fill-mode: forwards;
 }
 .Tooltip-animation-close-bottom {
-  -webkit-animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
-          animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
+  -webkit-animation: tooltip-close-bottom 80ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-bottom 80ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 
 @-webkit-keyframes tooltip-open-left {
   from {
     left: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     left: -4px;
@@ -6494,7 +6509,7 @@ body {
 @keyframes tooltip-open-left {
   from {
     left: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     left: -4px;
@@ -6504,7 +6519,7 @@ body {
 @-webkit-keyframes tooltip-close-left {
   from {
     left: -4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     left: 0px;
@@ -6514,7 +6529,7 @@ body {
 @keyframes tooltip-close-left {
   from {
     left: -4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     left: 0px;
@@ -6529,14 +6544,14 @@ body {
           animation-fill-mode: forwards;
 }
 .Tooltip-animation-close-left {
-  -webkit-animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
-          animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
+  -webkit-animation: tooltip-close-left 80ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-left 80ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 
 @-webkit-keyframes tooltip-open-right {
   from {
     left: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     left: 4px;
@@ -6547,7 +6562,7 @@ body {
 @keyframes tooltip-open-right {
   from {
     left: 0px;
-    opacity: 0.5;
+    opacity: 0;
   }
   to {
     left: 4px;
@@ -6557,7 +6572,7 @@ body {
 @-webkit-keyframes tooltip-close-right {
   from {
     left: 4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     left: 0px;
@@ -6567,7 +6582,7 @@ body {
 @keyframes tooltip-close-right {
   from {
     left: 4px;
-    opacity: 0.5;
+    opacity: 1;
   }
   to {
     left: 0px;
@@ -6582,8 +6597,14 @@ body {
           animation-fill-mode: forwards;
 }
 .Tooltip-animation-close-right {
-  -webkit-animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
-          animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
+  -webkit-animation: tooltip-close-right 80ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-right 80ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+.Tooltip-container {
+  transition-delay: 400ms;
+  -webkit-animation-delay: 400ms;
+          animation-delay: 400ms;
 }
 
 .VerificationCodeInput-Input {