@innovaccer/design-system 2.9.1 → 3.0.0-2

package/css/dist/index.css

@@ -253,25 +253,6 @@
 
   /* Transparancy (Opacity) */
   --transparent-58: 0.58;
-
-  /* Transition curve timing function */
-  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
-  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
-  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
-  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
-  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
-  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
-  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
-  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
-  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);
-
-  /* Transition duration */
-  --duration--fast-01: 80ms;
-  --duration--fast-02: 120ms;
-  --duration--moderate-01: 160ms;
-  --duration--moderate-02: 240ms;
-  --duration--slow-01: 400ms;
-  --duration--slow-02: 720ms;
 }
 
 /* fallback */
@@ -434,14 +415,6 @@
           animation: fadeOut 120ms cubic-bezier(0.4, 0.14, 0.3, 1);
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-1 {
-  opacity: 1;
-}
-
 .ss {
   background: red;
 }
@@ -668,17 +641,6 @@ body {
           animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
 }
 
-::-webkit-scrollbar {
-  width: var(--spacing-2);
-}
-
-::-webkit-scrollbar-thumb {
-  border: var(--spacing-s) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
-}
-
 .Legend {
   display: flex;
   flex-direction: row;
@@ -817,6 +779,15 @@ body {
   overflow-y: auto;
 }
 
+.AvatarGroup-TextWrapper::-webkit-scrollbar {
+  width: var(--spacing);
+}
+
+.AvatarGroup-TextWrapper::-webkit-scrollbar-thumb {
+  background: var(--secondary);
+  border-radius: var(--spacing-m);
+}
+
 @-webkit-keyframes backdrop-open {
   from {
     opacity: 0;
@@ -1051,7 +1022,8 @@ body {
   line-height: var(--font-height-s);
   color: var(--text-white);
 
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
 .Button:disabled {
@@ -1141,7 +1113,7 @@ body {
 }
 
 .Button--basic:hover {
-  box-shadow: var(--shadow-s);
+  background: var(--secondary);
 }
 
 .Button--basic:active {
@@ -1228,7 +1200,7 @@ body {
 
 .Button--transparent:focus {
   background: rgba(229, 229, 229, 0.2);
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
 }
 
 .Button--transparent:active {
@@ -1430,7 +1402,6 @@ body {
       -ms-user-select: none;
           user-select: none;
   border-radius: var(--spacing-m);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Calendar-value:hover {
@@ -1701,7 +1672,6 @@ body {
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Checkbox-input:focus {
@@ -1782,7 +1752,6 @@ body {
   flex-direction: row;
   cursor: default;
   height: var(--spacing-xl);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Chip-wrapper {
   display: inline-flex;
@@ -2133,16 +2102,8 @@ body {
   box-sizing: border-box;
 }
 
-.Dropdown-items {
-  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
 .Option {
   display: flex;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Option,
@@ -2220,6 +2181,15 @@ body {
   line-height: var(--font-height);
 }
 
+.Dropdown-wrapper::-webkit-scrollbar {
+  width: var(--spacing);
+}
+
+.Dropdown-wrapper::-webkit-scrollbar-thumb {
+  background: var(--secondary);
+  border-radius: var(--spacing-m);
+}
+
 .DropdownButton {
   width: 100%;
   justify-content: space-between;
@@ -2227,7 +2197,6 @@ body {
   padding-bottom: unset;
   background: var(--secondary-light);
   color: var(--text);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .DropdownButton-wrapper {
@@ -2284,10 +2253,6 @@ body {
 .DropdownButton--open {
   background-color: var(--secondary-dark) !important;
   color: var(--text) !important;
-  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  -webkit-animation-duration: 120ms;
-          animation-duration: 120ms;
 }
 
 .DropdownButton:disabled {
@@ -2725,6 +2690,11 @@ body {
   overflow: auto;
   display: flex;
   flex-direction: column;
+  visibility: hidden;
+}
+
+.FullscreenModal--open {
+  visibility: visible;
 }
 
 .FullscreenModal-animation--open {
@@ -2877,6 +2847,17 @@ body {
   overflow-y: overlay;
 }
 
+.Grid-body::-webkit-scrollbar {
+  background: var(--white);
+  height: var(--spacing-l);
+  width: var(--spacing-l);
+}
+
+.Grid-body::-webkit-scrollbar-thumb {
+  background: var(--secondary);
+  border-radius: var(--spacing);
+}
+
 .Grid-rowWrapper {
   display: inline-flex;
   flex-direction: column;
@@ -3264,7 +3245,6 @@ body {
   padding-left: var(--spacing-l);
   border-radius: var(--spacing-2);
   margin: 0 var(--spacing-xs);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .HorizontalNav-menu--disabled {
@@ -3497,7 +3477,6 @@ body {
   padding-right: var(--spacing-l);
   padding-left: var(--spacing-l);
   background: var(--white);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Input--tiny {
@@ -3631,7 +3610,6 @@ body {
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Link--regular {
@@ -3833,7 +3811,6 @@ body {
   border: var(--border);
   padding-right: var(--spacing-m);
   background: var(--white);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
@@ -4255,6 +4232,17 @@ body {
   padding-right: var(--spacing-xl);
 }
 
+.OverlayBody::-webkit-scrollbar {
+  width: var(--spacing-2);
+}
+
+.OverlayBody::-webkit-scrollbar-thumb {
+  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: var(--spacing);
+  background-color: var(--secondary);
+}
+
 .PageHeader-wrapper {
   padding: var(--spacing) var(--spacing-2);
 }
@@ -4583,30 +4571,6 @@ body {
   pointer-events: none;
 }
 
-@-webkit-keyframes popper-fade-in {
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes popper-fade-in {
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 .Ring {
   transform: rotate(-90deg);
 }
@@ -4696,7 +4660,6 @@ body {
   justify-content: center;
   box-sizing: border-box;
   z-index: 1;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Radio--disabled {
@@ -4727,7 +4690,6 @@ body {
 
 .Radio-input:checked ~ .Radio-wrapper:after {
   display: block;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Radio-wrapper:after {
@@ -5003,8 +4965,6 @@ body {
   box-sizing: border-box;
   outline: none;
   display: flex;
-  transition: border var(--duration--fast-01) var(--standard-productive-curve),
-    background-color var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Slider-handle:hover {
@@ -5376,7 +5336,7 @@ body {
   outline: none;
   border-radius: 4px;
   /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-  box-shadow: rgba(0, 112, 221, 0.16) 0px 0px 0px calc(var(--spacing-xs) + var(--spacing-s)) inset;
+  box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
 }
 
 .Tab:active:focus {
@@ -5484,6 +5444,17 @@ body {
   resize: auto;
 }
 
+.Textarea::-webkit-scrollbar {
+  width: var(--spacing-2);
+}
+
+.Textarea::-webkit-scrollbar-thumb {
+  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: var(--spacing);
+  background-color: var(--secondary);
+}
+
 /* toast */
 
 .Toast {
@@ -5671,216 +5642,6 @@ body {
           hyphens: auto;
 }
 
-@-webkit-keyframes tooltip-open-top {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: -8px;
-    opacity: 1;
-  }
-}
-
-@keyframes tooltip-open-top {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: -8px;
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-close-top {
-  from {
-    top: -8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-@keyframes tooltip-close-top {
-  from {
-    top: -8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-
-.Tooltip-animation-open-top {
-  -webkit-animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
-          animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
-  -webkit-animation-fill-mode: forwards;
-          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-keyframes tooltip-open-bottom {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: 8px;
-    opacity: 1;
-  }
-}
-@keyframes tooltip-open-bottom {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: 8px;
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-close-bottom {
-  from {
-    top: 8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-@keyframes tooltip-close-bottom {
-  from {
-    top: 8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-
-.Tooltip-animation-open-bottom {
-  -webkit-animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
-          animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
-  -webkit-animation-fill-mode: forwards;
-          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-keyframes tooltip-open-left {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: -8px;
-    opacity: 1;
-  }
-}
-
-@keyframes tooltip-open-left {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: -8px;
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-close-left {
-  from {
-    left: -8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-@keyframes tooltip-close-left {
-  from {
-    left: -8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-
-.Tooltip-animation-open-left {
-  -webkit-animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
-          animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
-  -webkit-animation-fill-mode: forwards;
-          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-keyframes tooltip-open-right {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: 8px;
-    opacity: 1;
-  }
-}
-
-@keyframes tooltip-open-right {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: 8px;
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-close-right {
-  from {
-    left: 8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-@keyframes tooltip-close-right {
-  from {
-    left: 8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-
-.Tooltip-animation-open-right {
-  -webkit-animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
-          animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
-  -webkit-animation-fill-mode: forwards;
-          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);
-}
-
 .VerificationCodeInput-Input {
   display: inline-flex;
   width: 40px;
@@ -5922,7 +5683,6 @@ body {
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MenuItem--horizontal {
@@ -5963,13 +5723,11 @@ body {
 
 .MenuItem:hover {
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-s);
 }
 
 .MenuItem--active,
 .MenuItem--active:hover {
   background: var(--primary-lightest);
-  box-shadow: none;
 }
 
 .MenuItem--rounded {