npm - @innovaccer/design-system - Versions diffs - 2.9.1 → 3.0.0-2 - Mend

@innovaccer/design-system 2.9.1 → 3.0.0-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (785) hide show

package/css/src/components/avatarGroup.css CHANGED Viewed

@@ -17,3 +17,12 @@
   align-items: flex-end;
   overflow-y: auto;
 }
+.AvatarGroup-TextWrapper::-webkit-scrollbar {
+  width: var(--spacing);
+}
+.AvatarGroup-TextWrapper::-webkit-scrollbar-thumb {
+  background: var(--secondary);
+  border-radius: var(--spacing-m);
+}

package/css/src/components/button.css CHANGED Viewed

@@ -21,7 +21,8 @@
   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 {
@@ -111,7 +112,7 @@
 }
 .Button--basic:hover {
-  box-shadow: var(--shadow-s);
+  background: var(--secondary);
 }
 .Button--basic:active {
@@ -198,7 +199,7 @@
 .Button--transparent:focus {
   background: color-mod(var(--stone-light) a(0.2));
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
 }
 .Button--transparent:active {

package/css/src/components/calendar.css CHANGED Viewed

@@ -150,7 +150,6 @@
   cursor: pointer;
   user-select: none;
   border-radius: var(--spacing-m);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Calendar-value:hover {

package/css/src/components/checkbox.css CHANGED Viewed

@@ -61,7 +61,6 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Checkbox-input:focus {

package/css/src/components/chip.css CHANGED Viewed

@@ -14,7 +14,6 @@
   flex-direction: row;
   cursor: default;
   height: var(--spacing-xl);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Chip-wrapper {
   display: inline-flex;

package/css/src/components/dropdown.css CHANGED Viewed

@@ -59,14 +59,8 @@
   box-sizing: border-box;
 }
-.Dropdown-items {
-  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  animation-fill-mode: forwards;
-}
 .Option {
   display: flex;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Option,
@@ -141,3 +135,12 @@
   height: fit-content;
   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);
+}

package/css/src/components/dropdownButton.css CHANGED Viewed

@@ -5,7 +5,6 @@
   padding-bottom: unset;
   background: var(--secondary-light);
   color: var(--text);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .DropdownButton-wrapper {
@@ -62,8 +61,6 @@
 .DropdownButton--open {
   background-color: var(--secondary-dark) !important;
   color: var(--text) !important;
-  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  animation-duration: 120ms;
 }
 .DropdownButton:disabled {

package/css/src/components/fullscreenModal.css CHANGED Viewed

@@ -32,6 +32,11 @@
   overflow: auto;
   display: flex;
   flex-direction: column;
+  visibility: hidden;
+}
+.FullscreenModal--open {
+  visibility: visible;
 }
 .FullscreenModal-animation--open {

package/css/src/components/grid.css CHANGED Viewed

@@ -118,6 +118,17 @@
   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;

package/css/src/components/horizontalNav.css CHANGED Viewed

@@ -12,7 +12,6 @@
   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 {

package/css/src/components/input.css CHANGED Viewed

@@ -15,7 +15,6 @@
   padding-right: var(--spacing-l);
   padding-left: var(--spacing-l);
   background: var(--white);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Input--tiny {

package/css/src/components/link.css CHANGED Viewed

@@ -1,7 +1,6 @@
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Link--regular {

package/css/src/components/metricInput.css CHANGED Viewed

@@ -12,7 +12,6 @@
   border: var(--border);
   padding-right: var(--spacing-m);
   background: var(--white);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .MetricInput--regular {

package/css/src/components/overlay.css CHANGED Viewed

@@ -36,3 +36,14 @@
   padding-left: var(--spacing-xl);
   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);
+}

package/css/src/components/popover.css CHANGED Viewed

@@ -15,15 +15,3 @@
   visibility: hidden;
   pointer-events: none;
 }
-@keyframes popper-fade-in {
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/css/src/components/radio.css CHANGED Viewed

@@ -60,7 +60,6 @@
   justify-content: center;
   box-sizing: border-box;
   z-index: 1;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Radio--disabled {
@@ -91,7 +90,6 @@
 .Radio-input:checked ~ .Radio-wrapper:after {
   display: block;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .Radio-wrapper:after {

package/css/src/components/slider.css CHANGED Viewed

@@ -84,8 +84,6 @@
   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 {

package/css/src/components/tabs.css CHANGED Viewed

@@ -63,7 +63,7 @@
   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: color-mod(var(--primary) a(0.16)) 0px 0px 0px calc(var(--spacing-xs) + var(--spacing-s)) inset;
+  box-shadow: color-mod(var(--primary) a(0.2)) 0px 0px 0px var(--spacing-s) inset;
 }
 .Tab:active:focus {

package/css/src/components/textarea.css CHANGED Viewed

@@ -47,3 +47,14 @@
 .Textarea--resize {
   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);
+}

package/css/src/components/tooltip.css CHANGED Viewed

@@ -15,118 +15,3 @@
   word-break: break-word;
   hyphens: auto;
 }
-@keyframes tooltip-open-top {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: -8px;
-    opacity: 1;
-  }
-}
-@keyframes tooltip-close-top {
-  from {
-    top: -8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-.Tooltip-animation-open-top {
-  animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
-  animation-fill-mode: forwards;
-}
-.Tooltip-animation-close-top {
-  animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
-}
-@keyframes tooltip-open-bottom {
-  from {
-    top: 0px;
-    opacity: 0.5;
-  }
-  to {
-    top: 8px;
-    opacity: 1;
-  }
-}
-@keyframes tooltip-close-bottom {
-  from {
-    top: 8px;
-    opacity: 0.5;
-  }
-  to {
-    top: 0px;
-    opacity: 0;
-  }
-}
-.Tooltip-animation-open-bottom {
-  animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
-  animation-fill-mode: forwards;
-}
-.Tooltip-animation-close-bottom {
-  animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
-}
-@keyframes tooltip-open-left {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: -8px;
-    opacity: 1;
-  }
-}
-@keyframes tooltip-close-left {
-  from {
-    left: -8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-.Tooltip-animation-open-left {
-  animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
-  animation-fill-mode: forwards;
-}
-.Tooltip-animation-close-left {
-  animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
-}
-@keyframes tooltip-open-right {
-  from {
-    left: 0px;
-    opacity: 0.5;
-  }
-  to {
-    left: 8px;
-    opacity: 1;
-  }
-}
-@keyframes tooltip-close-right {
-  from {
-    left: 8px;
-    opacity: 0.5;
-  }
-  to {
-    left: 0px;
-    opacity: 0;
-  }
-}
-.Tooltip-animation-open-right {
-  animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
-  animation-fill-mode: forwards;
-}
-.Tooltip-animation-close-right {
-  animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
-}

package/css/src/components/verticalNav.css CHANGED Viewed

@@ -24,7 +24,6 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 .MenuItem--horizontal {
@@ -65,13 +64,11 @@
 .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 {

package/css/src/core/animation.css CHANGED Viewed

@@ -23,11 +23,3 @@
 .fade-out {
   animation: fadeOut 120ms cubic-bezier(0.4, 0.14, 0.3, 1);
 }
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-1 {
-  opacity: 1;
-}

package/css/src/core/utilities.css CHANGED Viewed

@@ -18,14 +18,3 @@
 .Overlay-container--close {
   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);
-}

package/css/src/variables/index.css CHANGED Viewed

@@ -185,23 +185,4 @@
   /* 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;
 }