@innovaccer/design-system 2.15.4 → 2.16.0-0

package/css/dist/index.css

@@ -820,12 +820,19 @@ body {
 }
 
 .ProgressBar-indicator {
-  height: var(--spacing);
   background-color: var(--primary);
   border-radius: var(--spacing-m);
   transition: var(--duration--slow-01) var(--standard-expressive-curve);
 }
 
+.ProgressBar-indicator--small {
+  height: var(--spacing-s);
+}
+
+.ProgressBar-indicator--regular {
+  height: var(--spacing);
+}
+
 /* badge */
 
 .Avatar {
@@ -1433,6 +1440,12 @@ body {
   visibility: hidden;
 }
 
+.Button-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* calendar */
 
 .Calendar-wrapper {
@@ -2382,6 +2395,7 @@ body {
 
 .Divider--vertical {
   width: 1px;
+  background: var(--secondary-light);
 }
 
 .Divider--horizontal {
@@ -4219,6 +4233,107 @@ body {
   pointer-events: none;
 }
 
+.LinkButton {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border: 0;
+  text-align: center;
+  padding: 0;
+  background: transparent;
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family);
+  border-radius: var(--spacing-m);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.LinkButton--iconAlign-right {
+  flex-direction: row-reverse;
+}
+
+.LinkButton-icon {
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+}
+
+.LinkButton-icon--left {
+  margin-right: var(--spacing-m);
+}
+
+.LinkButton-icon--right {
+  margin-left: var(--spacing-m);
+}
+
+.LinkButton--regular {
+  line-height: var(--font-height);
+  font-size: var(--font-size);
+}
+
+.LinkButton--tiny {
+  line-height: var(--font-height-s);
+  font-size: var(--font-size-s);
+}
+
+.LinkButton--default {
+  color: var(--primary);
+}
+
+.LinkButton--default:hover {
+  color: var(--primary-dark);
+}
+
+.LinkButton--default:active {
+  color: var(--primary-darker);
+}
+
+.LinkButton--default:focus,
+.LinkButton--default:focus-visible {
+  outline: 0;
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.LinkButton--default:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--primary-lighter);
+}
+
+/* Subtle Appearance */
+
+.LinkButton--subtle {
+  color: var(--inverse-lighter);
+}
+
+.LinkButton--subtle:hover {
+  color: var(--inverse-light);
+}
+
+.LinkButton--subtle:active {
+  color: var(--inverse);
+}
+
+.LinkButton--subtle:focus,
+.LinkButton--subtle:focus-visible {
+  outline: 0;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.LinkButton--subtle:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--inverse-lightest);
+}
+
 .List {
   display: flex;
   flex-grow: 1;
@@ -4872,8 +4987,8 @@ body {
 .Pagination-MetricInput {
   width: var(--spacing-4);
   margin-right: var(--spacing);
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
 }
 
 .Pagination-MetricInput .MetricInput-input {
@@ -4940,7 +5055,7 @@ body {
 }
 
 .Placeholder--animation {
-  border-radius: var(--spacing-m);
+  border-radius: var(--spacing-s);
   -webkit-animation-duration: 1.5s;
           animation-duration: 1.5s;
   -webkit-animation-fill-mode: forwards;
@@ -5724,11 +5839,11 @@ body {
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--primary);
 }
 
 .Circle--white {
-  stroke: var(--white);
+  stroke: var(--primary);
 }
 
 .StatusHint {
@@ -5817,8 +5932,8 @@ body {
 }
 
 .Switch--large {
-  height: var(--spacing-3);
-  width: var(--spacing-5);
+  height: var(--spacing-xl);
+  width: var(--spacing-4);
 }
 
 .Switch-input {
@@ -5879,7 +5994,7 @@ body {
 }
 
 .Switch-wrapper--large {
-  border-radius: 38px;
+  border-radius: 34px;
 }
 
 .Switch-wrapper:before {
@@ -6167,7 +6282,7 @@ body {
   width: 360px;
   border-radius: var(--spacing-m);
   padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
+  padding-right: var(--spacing-l);
   padding-top: var(--spacing-l);
   padding-bottom: var(--spacing-l);
 }
@@ -6206,7 +6321,7 @@ body {
 
 .Toast-icon--right {
   cursor: pointer;
-  margin-left: var(--spacing-2);
+  margin-left: var(--spacing-l);
   border-radius: 50%;
   display: flex;
   align-items: center;