@innovaccer/design-system 2.5.0-4 → 2.6.0

package/css/src/components/Legend.css

@@ -1,11 +1,11 @@
 .Legend {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
 }
 
 .Legend-icon {
-    border-radius: var(--spacing-s);
-    margin-right: var(--spacing);
-}
+  border-radius: var(--spacing-s);
+  margin-right: var(--spacing);
+}

package/css/src/components/ProgressBar.css

@@ -9,4 +9,4 @@
   background-color: var(--primary);
   border-radius: var(--spacing-m);
   transition: width 200ms;
-}
+}

package/css/src/components/avatarGroup.css

@@ -25,4 +25,4 @@
 .AvatarGroup-TextWrapper::-webkit-scrollbar-thumb {
   background: var(--secondary);
   border-radius: var(--spacing-m);
-}
+}

package/css/src/components/backdrop.css

@@ -1,11 +1,19 @@
 @keyframes backdrop-open {
-  from { opacity: 0; }
-  to { opacity: 60; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 60;
+  }
 }
 
 @keyframes backdrop-close {
-  from { opacity: 60; }
-  to { opacity: 0; }
+  from {
+    opacity: 60;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .Backdrop {
@@ -37,5 +45,3 @@
 .Backdrop-animation--close {
   animation: backdrop-close 120ms cubic-bezier(0.4, 0.14, 1, 1);
 }
-
-

package/css/src/components/badge.css

@@ -1,110 +1,110 @@
 /* badge */
 
 .Badge {
-	/* 160px */
-	max-width: calc(var(--spacing-2) * 10);
-	/* truncate */
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--font-size-s);
-	line-height: var(--font-height-s);
-	text-transform: uppercase;
-	padding-right: var(--spacing-m);
-	padding-left: var(--spacing-m);
-	padding-top: var(--spacing-s);
-	padding-bottom: var(--spacing-s);
-	border-radius: var(--spacing-m);
-	display: inline-block;
-	box-sizing: border-box;
-	font-weight: var(--font-weight-bold);
-	cursor: default;
+  /* 160px */
+  max-width: calc(var(--spacing-2) * 10);
+  /* truncate */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  text-transform: uppercase;
+  padding-right: var(--spacing-m);
+  padding-left: var(--spacing-m);
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+  border-radius: var(--spacing-m);
+  display: inline-block;
+  box-sizing: border-box;
+  font-weight: var(--font-weight-bold);
+  cursor: default;
 }
 
 .Badge--primary {
-	background: var(--primary);
-	color: var(--white);
+  background: var(--primary);
+  color: var(--white);
 }
 
 .Badge--secondary {
-	background: var(--secondary-light);
+  background: var(--secondary-light);
 }
 
 .Badge--success {
-	background: var(--success);
-	color: var(--white);
+  background: var(--success);
+  color: var(--white);
 }
 
 .Badge--alert {
-	background: var(--alert);
-	color: var(--white);
+  background: var(--alert);
+  color: var(--white);
 }
 
 .Badge--warning {
-	background: var(--warning);
-	color: var(--warning-darker);
+  background: var(--warning);
+  color: var(--warning-darker);
 }
 
 .Badge--accent1 {
-	background: var(--accent1);
-	color: var(--white);
+  background: var(--accent1);
+  color: var(--white);
 }
 
 .Badge--accent2 {
-	background: var(--accent2);
-	color: var(--white);
+  background: var(--accent2);
+  color: var(--white);
 }
 
 .Badge--accent3 {
-	background: var(--accent3);
-	color: var(--white);
+  background: var(--accent3);
+  color: var(--white);
 }
 
 .Badge--accent4 {
-	background: var(--accent4);
-	color: var(--accent4-darker);
+  background: var(--accent4);
+  color: var(--accent4-darker);
 }
 
 .Badge--subtle-primary {
-	color: var(--primary-dark);
-	background: var(--primary-lightest);
+  color: var(--primary-dark);
+  background: var(--primary-lightest);
 }
 
 .Badge--subtle-secondary {
-	background: var(--secondary-light);
+  background: var(--secondary-light);
 }
 
 .Badge--subtle-success {
-	color: var(--success-dark);
-	background: var(--success-lightest);
+  color: var(--success-dark);
+  background: var(--success-lightest);
 }
 
 .Badge--subtle-alert {
-	color: var(--alert-dark);
-	background: var(--alert-lightest);
+  color: var(--alert-dark);
+  background: var(--alert-lightest);
 }
 
 .Badge--subtle-warning {
-	color: var(--warning-darker);
-	background: var(--warning-lightest);
+  color: var(--warning-darker);
+  background: var(--warning-lightest);
 }
 
 .Badge--subtle-accent1 {
-	color: var(--accent1-darker);
-	background: var(--accent1-lightest);
+  color: var(--accent1-darker);
+  background: var(--accent1-lightest);
 }
 
 .Badge--subtle-accent2 {
-	color: var(--accent2-dark);
-	background: var(--accent2-lightest);
+  color: var(--accent2-dark);
+  background: var(--accent2-lightest);
 }
 
 .Badge--subtle-accent3 {
-	color: var(--accent3-dark);
-	background: var(--accent3-lightest);
+  color: var(--accent3-dark);
+  background: var(--accent3-lightest);
 }
 
 .Badge--subtle-accent4 {
-	color: var(--accent4-darker);
-	background: var(--accent4-lightest);
+  color: var(--accent4-darker);
+  background: var(--accent4-lightest);
 }

package/css/src/components/button.css

@@ -1,235 +1,240 @@
 .Button {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    border: 0;
-    border-radius: var(--spacing-m);
-
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
-
-    text-align: center;
-    font-family: var(--font-family);
-    font-weight: var(--font-weight-normal);
-    font-size: var(--font-size);
-    line-height: var(--font-height-s);
-    color: var(--text-white);
-	
-    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;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 0;
+  border-radius: var(--spacing-m);
+
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+
+  text-align: center;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  color: var(--text-white);
+
+  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 {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .Button:focus {
-    outline: 0;
+  outline: 0;
 }
 
 .Button--iconAlign-right {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .Button--tiny {
-    height: var(--spacing-xl);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  height: var(--spacing-xl);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Button--tinySquare {
-    width: var(--spacing-xl);
+  width: var(--spacing-xl);
 }
 
 .Button--regular {
-    height: var(--spacing-3);
-    padding-right: var(--spacing-l);
-	padding-left: var(--spacing-l);
+  height: var(--spacing-3);
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-l);
 }
 
 .Button--regularSquare {
-    width: var(--spacing-3);
+  width: var(--spacing-3);
 }
 
 .Button--large {
-    height: 40px;
-    padding-right: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    
-    line-height: var(--font-height-m);
-    font-size: var(--font-size-m);
+  height: 40px;
+  padding-right: var(--spacing-2);
+  padding-left: var(--spacing-2);
+
+  line-height: var(--font-height-m);
+  font-size: var(--font-size-m);
 }
 
 .Button--largeSquare {
-    width: 40px;
+  width: 40px;
 }
 
 .Button--tinySquare .Button-icon,
 .Button--largeSquare .Button-icon,
 .Button--tinySquare .Spinner,
 .Button--largeSquare .Spinner {
-    padding-left: var(--spacing-s);
-    padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+  padding-right: var(--spacing-s);
 }
 
 .Button--expanded {
-    width: 100%;
+  width: 100%;
 }
 
 .Button-icon {
-    line-height: inherit;
-    display: flex;
-    align-items: center;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
 }
 
 .Button-icon--left {
-    margin-right: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .Button-icon--right {
-    margin-left: var(--spacing);
+  margin-left: var(--spacing);
 }
 
 .Button--tiny .Button-icon--left {
-    margin-right: var(--spacing-m);
+  margin-right: var(--spacing-m);
 }
 .Button--tiny .Button-icon--right {
-    margin-left: var(--spacing-m);
+  margin-left: var(--spacing-m);
 }
 
 .Button--basic {
-	background: var(--secondary-light);
-	color: var(--inverse);
+  background: var(--secondary-light);
+  color: var(--inverse);
 }
 
 .Button--basic:hover {
-	background: var(--secondary);
+  background: var(--secondary);
 }
 
 .Button--basic:active {
-	background: var(--secondary-dark);
+  background: var(--secondary-dark);
 }
 
 .Button--basic:focus {
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .Button--basic:disabled {
-    background: var(--secondary-lighter);
-    color: var(--inverse-lightest);
+  background: var(--secondary-lighter);
+  color: var(--inverse-lightest);
 }
 
 .Button--primary {
-	background: var(--primary);
+  background: var(--primary);
 }
 
 .Button--primary:hover {
-	background: var(--primary-dark);
+  background: var(--primary-dark);
 }
 
 .Button--primary:active {
-	background: var(--primary-darker);
+  background: var(--primary-darker);
 }
 
 .Button--primary:focus {
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Button--primary:disabled {
-    background: var(--primary-lighter);
+  background: var(--primary-lighter);
 }
 
 .Button--success {
-	background: var(--success);
+  background: var(--success);
 }
 
 .Button--success:hover {
-	background: var(--success-dark);
+  background: var(--success-dark);
 }
 
 .Button--success:active {
-	background: var(--success-darker);
+  background: var(--success-darker);
 }
 
 .Button--success:focus {
-    box-shadow: var(--shadow-spread) var(--success-shadow);
+  box-shadow: var(--shadow-spread) var(--success-shadow);
 }
 
 .Button--success:disabled {
-    background: var(--success-lighter);
+  background: var(--success-lighter);
 }
 
 .Button--alert {
-	background: var(--alert);
+  background: var(--alert);
 }
 
 .Button--alert:hover {
-	background: var(--alert-dark);
+  background: var(--alert-dark);
 }
 
 .Button--alert:active {
-	background: var(--alert-darker);
+  background: var(--alert-darker);
 }
 
 .Button--alert:focus {
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Button--alert:disabled {
-    background: var(--alert-lighter);
+  background: var(--alert-lighter);
 }
 
 .Button--transparent {
-	background: transparent;
-	color: var(--inverse);
+  background: transparent;
+  color: var(--inverse);
 }
 
 .Button--transparent:hover {
-	background: var(--secondary-light);
+  background: var(--secondary-light);
+}
+
+.Button--transparent:focus {
+  background: color-mod(var(--stone-light) a(0.2));
+  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
 }
 
 .Button--transparent:active {
-	background: var(--secondary);
+  background: var(--secondary);
 }
 
-.Button--transparent:focus {
-    background: color-mod(var(--stone-light) a(0.2));
-    /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
+.Button--transparent:focus:active {
+  background: var(--secondary);
 }
 
 .Button--transparent:disabled {
-    background: transparent;
-    color: var(--inverse-lightest);
+  background: transparent;
+  color: var(--inverse-lightest);
 }
 
 .Button-spinner {
-    display: flex;
-    position: absolute;
-    z-index: 1;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
 
 .Button--tiny .Spinner--small {
-    height: var(--font-size-s);
-    width: var(--font-size-s);
+  height: var(--font-size-s);
+  width: var(--font-size-s);
 }
 
 .Button--large .Spinner--small {
-    height: var(--font-size-l);
-    width: var(--font-size-l);
+  height: var(--font-size-l);
+  width: var(--font-size-l);
 }
 
 .Button--selected {
-    background: var(--primary-lightest);
-    color: var(--primary);
+  background: var(--primary-lightest);
+  color: var(--primary);
 }
 
 .Button-text--hidden {
-    visibility: hidden;
+  visibility: hidden;
 }