@innovaccer/design-system 4.6.0 → 4.7.0

package/css/src/ai-components/button.module.css

@@ -1,6 +1,6 @@
 .AIButton {
-  padding: var(--spacing) var(--spacing-l);
-  border-radius: var(--spacing-m);
+  padding: var(--spacing-20) var(--spacing-30);
+  border-radius: var(--border-radius-10);
   cursor: pointer;
   border: 0;
   font-family: var(--font-family);
@@ -70,5 +70,5 @@
 /* Button Icon */
 
 .AIButton-Icon {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
 }

package/css/src/ai-components/chat.module.css

@@ -1,14 +1,25 @@
-.AIResponse-box {
+.AIResponse-container--glow {
   background: linear-gradient(white, white) padding-box,
-    linear-gradient(to right, rgba(255, 194, 8, 0.64), rgba(227, 28, 121, 0.64)) border-box;
-  border-radius: var(--spacing-l);
-  border: var(--spacing-s) solid transparent;
-  border-top-left-radius: 0;
-  padding: var(--spacing) var(--spacing-l);
+    linear-gradient(to right, rgba(254, 172, 95, 1) 9%, rgba(255, 31, 136, 1) 48%, rgba(227, 28, 121, 0.48) 100%)
+      border-box;
+  border: var(--spacing-2-5) solid transparent;
+  border-radius: var(--border-radius-30);
+}
+
+.AIResponse-container {
+  border-radius: var(--border-radius-30);
+  border: var(--border-width-2-5) solid var(--secondary);
+  padding: var(--spacing-20) var(--spacing-30);
+}
+
+.AIResponse-box--glow {
+  padding: var(--spacing-20) var(--spacing-30);
+  border-radius: var(--spacing-30);
+  background: linear-gradient(to right, rgba(240, 125, 0, 0.04), rgba(227, 28, 121, 0.0192));
 }
 
 .AIResponse-actionBar {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -19,10 +30,15 @@
   opacity: var(--opacity-12);
 }
 
-.AIResponse-box:hover .AIResponse-button {
+.AIResponse-box:hover .AIResponse-button,
+.AIResponse-box--glow:hover .AIResponse-button {
   opacity: 1;
 }
 
 .AIResponse-button--selected {
   opacity: 1;
 }
+
+.AIResponse-metaData {
+  margin-left: calc(var(--spacing-80) + var(--spacing-20));
+}

package/css/src/ai-components/chip.module.css

@@ -2,20 +2,35 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--spacing-l);
-  padding: var(--spacing-s) var(--spacing);
-  background: var(--secondary-light);
+  border-radius: var(--border-radius-30);
+  padding: var(--spacing-05) var(--spacing-20);
   cursor: pointer;
   width: fit-content;
   border: 0;
+  background: linear-gradient(
+    274deg,
+    rgba(231, 56, 79, 0.24) 0%,
+    rgba(231, 56, 79, 0.24) 19.79%,
+    rgba(240, 125, 0, 0.24) 100%
+  );
 }
 
 .AIChip:hover {
-  background: var(--secondary);
+  background: linear-gradient(
+    274deg,
+    rgba(231, 56, 79, 0.32) 0%,
+    rgba(231, 56, 79, 0.32) 19.79%,
+    rgba(240, 125, 0, 0.32) 100%
+  );
 }
 
 .AIChip:active {
-  background: var(--secondary-dark);
+  background: linear-gradient(
+    274deg,
+    rgba(231, 56, 79, 0.48) 0%,
+    rgba(231, 56, 79, 0.48) 19.79%,
+    rgba(240, 125, 0, 0.48) 100%
+  );
 }
 
 .AIChip:focus,
@@ -25,13 +40,12 @@
 }
 
 .AIChip-icon {
-  width: var(--spacing-2);
-  height: var(--spacing-2);
-  font-size: var(--spacing-2) !important;
-  margin-right: var(--spacing-m);
-  background: linear-gradient(to bottom, #ffc208 0%, #e31c79 100%);
+  width: var(--spacing-40);
+  height: var(--spacing-40);
+  font-size: var(--spacing-40) !important;
+  margin-right: var(--spacing-10);
   background-clip: text;
-  color: transparent;
+  color: var(--inverse);
 }
 
 .AIChip-text {
@@ -44,13 +58,17 @@
 /* Disabled Chip */
 
 .AIChip--disabled {
-  background: var(--secondary-lighter);
+  background: linear-gradient(
+    274deg,
+    rgba(231, 56, 79, 0.24) 0%,
+    rgba(231, 56, 79, 0.24) 19.79%,
+    rgba(240, 125, 0, 0.24) 100%
+  );
 }
 
 .AIChip-icon--disabled {
-  background: linear-gradient(to bottom, #ffe79e 0%, #f4a4c9 100%);
   background-clip: text;
-  color: transparent;
+  color: var(--inverse-lightest);
 }
 
 .AIChip-text--disabled {
@@ -59,5 +77,10 @@
 
 .AIChip:disabled {
   cursor: not-allowed;
-  pointer-events: none;
+  background: linear-gradient(
+    274deg,
+    rgba(231, 56, 79, 0.24) 0%,
+    rgba(231, 56, 79, 0.24) 19.79%,
+    rgba(240, 125, 0, 0.24) 100%
+  );
 }

package/css/src/ai-components/iconButton.module.css

@@ -1,7 +1,7 @@
 .AIIconButton {
   background: transparent;
-  padding: var(--spacing);
-  border-radius: var(--spacing-m);
+  padding: var(--spacing-20);
+  border-radius: var(--border-radius-10);
   cursor: pointer;
   border: 0;
   font-family: var(--font-family);
@@ -11,23 +11,42 @@
   position: relative;
 }
 
+.AIIconButton--large {
+  padding: var(--spacing-0-75);
+}
+
+.AIIconButton--regular {
+  padding: var(--spacing);
+}
+
 .AIIconButton:hover {
-  background: var(--secondary);
+  background: linear-gradient(
+    315deg,
+    rgba(227, 28, 121, 0.2) 0%,
+    rgba(231, 56, 79, 0.32) 19.79%,
+    rgba(240, 125, 0, 0.32) 100%
+  );
   color: var(--secondary) !important;
 }
 
 .AIIconButton:active {
-  background: var(--secondary-dark);
+  background: linear-gradient(
+    315deg,
+    rgba(227, 28, 121, 0.31) 0%,
+    rgba(231, 56, 79, 0.48) 19.79%,
+    rgba(240, 125, 0, 0.48) 100%
+  );
   color: var(--secondary-dark) !important;
 }
 
-.AIIconButton:focus {
+.AIIconButton:focus,
+.AIIconButton:focus-visible {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: none;
 }
 
 .AIIconButton:disabled {
   cursor: not-allowed;
-  pointer-events: none;
   background: transparent;
   color: var(--inverse-lightest);
 }
@@ -47,21 +66,21 @@
 }
 
 .AIIconButton-AIIcon--regularTop {
-  bottom: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
-  left: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
+  bottom: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */
+  left: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */
 }
 
 .AIIconButton-AIIcon--largeTop {
-  bottom: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
-  left: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
+  bottom: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */
+  left: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */
 }
 
 .AIIconButton-AIIcon--regularBottom {
-  top: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
-  left: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
+  top: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */
+  left: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */
 }
 
 .AIIconButton-AIIcon--largeBottom {
-  top: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
-  left: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
+  top: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */
+  left: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */
 }

package/css/src/components/actionButton.module.css

@@ -5,13 +5,13 @@
   user-select: none;
   cursor: pointer;
   color: var(--inverse-lighter);
-  border-radius: 50%;
-  padding: var(--spacing-s);
+  border-radius: var(--border-radius-full);
+  padding: var(--spacing-05);
 }
 
 .ActionButton:focus-visible,
 .ActionButton:focus {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }
 
 .ActionButton:hover {

package/css/src/components/actionCard.module.css

@@ -1,11 +1,11 @@
 .ActionCard {
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   width: 100%;
 }
 
 .ActionCard--default {
   cursor: pointer;
-  border: var(--spacing-xs) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
 .ActionCard--default:hover {
@@ -16,7 +16,7 @@
 .ActionCard--default:focus,
 .ActionCard--default:focus-visible {
   outline: none;
-  border: var(--spacing-xs) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
@@ -28,7 +28,7 @@
 .ActionCard--disabled {
   cursor: not-allowed;
   position: relative;
-  border: var(--spacing-xs) solid var(--secondary-lighter);
+  border: var(--border-width-2-5) solid var(--secondary-lighter);
 }
 
 .ActionCard-overlay--disabled {

package/css/src/components/avatar.module.css

@@ -8,7 +8,7 @@
   align-items: center;
   overflow: hidden;
   text-transform: uppercase;
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   cursor: default;
   position: relative;
 }
@@ -20,24 +20,24 @@
 }
 
 .Avatar-wrapper--square {
-  padding: var(--spacing-xs);
+  padding: var(--spacing-2-5);
   box-sizing: border-box;
 }
 
 .Avatar--square {
   width: 100%;
   height: 100%;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
 }
 
 .Avatar--regular {
-  height: var(--spacing-3);
-  width: var(--spacing-3);
+  height: var(--spacing-80);
+  width: var(--spacing-80);
 }
 
 .Avatar--tiny {
-  height: var(--spacing-xl);
-  width: var(--spacing-xl);
+  height: var(--spacing-60);
+  width: var(--spacing-60);
 }
 
 .Avatar--noInitials {
@@ -109,9 +109,9 @@
 
 .Avatar-presence {
   position: absolute;
-  border-radius: 50%;
-  width: var(--spacing);
-  height: var(--spacing);
+  border-radius: var(--border-radius-full);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
   right: 0;
   bottom: 0;
 }
@@ -125,11 +125,11 @@
 }
 
 .Avatar-status {
-  top: calc(-1 * var(--spacing-s));
-  right: calc(-1 * var(--spacing-s));
-  width: var(--spacing-l);
-  height: var(--spacing-l);
-  border-radius: 50%;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;

package/css/src/components/avatarGroup.module.css

@@ -1,15 +1,15 @@
 .AvatarGroup-item {
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   position: relative;
-  margin-right: calc(var(--spacing-s) * -1);
+  margin-right: calc(var(--spacing-05) * -1);
 }
 
 .AvatarGroup-item--regular {
-  height: var(--spacing-3);
+  height: var(--spacing-80);
 }
 
 .AvatarGroup-item--tiny {
-  height: var(--spacing-xl);
+  height: var(--spacing-60);
 }
 
 .AvatarGroup-Popper {
@@ -25,7 +25,7 @@
 }
 
 .AvatarCount-wrapper {
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   position: relative;
 }
 
@@ -36,19 +36,19 @@
 }
 
 .AvatarGroup-inputWrapper {
-  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
 .AvatarGroup-inputWrapper:focus-within {
-  border-bottom: var(--spacing-xs) solid var(--primary);
+  border-bottom: var(--border-width-2-5) solid var(--primary);
 }
 
 .AvatarGroup-input {
   min-width: unset !important;
   background: transparent;
-  border-bottom-left-radius: 0px;
+  border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  height: calc(var(--spacing-3) + var(--spacing-m)) !important;
+  height: calc(var(--spacing-80) + var(--spacing-10)) !important;
 }
 
 .AvatarGroup-input,

package/css/src/components/avatarSelection.module.css

@@ -8,8 +8,8 @@
 /* Selection Avatar List */
 
 .SelectionAvatarGroup-item {
-  margin-right: calc(var(--spacing-s) * -1);
-  border-radius: 50%;
+  margin-right: calc(var(--spacing-05) * -1);
+  border-radius: var(--border-radius-full);
   display: flex;
   transition: transform var(--duration--fast-01) var(--standard-productive-curve);
   position: relative;
@@ -22,8 +22,8 @@
 }
 
 .SelectionAvatarGroup-item--active:active {
-  outline: var(--spacing-s) solid #00509f;
-  outline-offset: var(--spacing-xs);
+  outline: var(--spacing-05) solid #00509f;
+  outline-offset: var(--spacing-2-5);
 }
 
 .SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item--active {
@@ -33,18 +33,18 @@
 /* Selected Avatar Group Item */
 
 .SelectionAvatarGroup-item--selected {
-  outline-offset: var(--spacing-xs);
-  outline: var(--spacing-s) solid var(--primary-dark);
+  outline-offset: var(--spacing-2-5);
+  outline: var(--spacing-05) solid var(--primary-dark);
 }
 
 .SelectionAvatarGroup-item--selected:active {
-  outline-offset: var(--spacing-xs);
-  outline: var(--spacing-s) solid var(--primary-darker);
+  outline-offset: var(--spacing-2-5);
+  outline: var(--spacing-05) solid var(--primary-darker);
 }
 
 .SelectionAvatarGroup-item--selected:focus,
 .SelectionAvatarGroup-item--selected:focus-visible {
-  box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
+  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
 }
 
 /* Selection Avatar Popover */
@@ -55,11 +55,11 @@
 }
 
 .SelectionAvatar-inputWrapper {
-  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
 .SelectionAvatar-inputWrapper:focus-within {
-  border-bottom: var(--spacing-xs) solid var(--primary);
+  border-bottom: var(--border-width-2-5) solid var(--primary);
 }
 
 .SelectionAvatar-input {
@@ -83,7 +83,7 @@
 /* Selection Avatar Count */
 
 .SelectionAvatarCount-wrapper {
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
 }
 
 .SelectionAvatarCount:hover {
@@ -101,11 +101,11 @@
 }
 
 .SelectionAvatarCount--selected {
-  outline-offset: var(--spacing-xs);
-  outline: var(--spacing-s) solid var(--primary-dark);
+  outline-offset: var(--spacing-2-5);
+  outline: var(--spacing-05) solid var(--primary-dark);
 }
 
 .SelectionAvatarCount--selected:focus,
 .SelectionAvatarCount--selected:focus-visible {
-  box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
+  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
 }

package/css/src/components/badge.module.css

@@ -2,7 +2,7 @@
 
 .Badge {
   /* 160px */
-  max-width: calc(var(--spacing-2) * 10);
+  max-width: calc(var(--spacing-40) * 10);
   /* truncate */
   white-space: nowrap;
   overflow: hidden;
@@ -10,11 +10,11 @@
   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);
+  padding-right: var(--spacing-10);
+  padding-left: var(--spacing-10);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+  border-radius: var(--border-radius-10);
   display: inline-block;
   box-sizing: border-box;
   font-weight: var(--font-weight-bold);

package/css/src/components/breadcrumbs.module.css

@@ -12,8 +12,8 @@
 
 .Breadcrumbs-link {
   /* 160px */
-  max-width: calc(var(--spacing-2) * 10);
-  margin: var(--spacing-m) 0;
+  max-width: calc(var(--spacing-40) * 10);
+  margin: var(--spacing-10) 0;
 }
 
 .Breadcrumbs-link:active {
@@ -28,8 +28,8 @@
   color: var(--secondary);
   font-size: var(--font-size-s);
   line-height: var(--font-height-s);
-  width: var(--spacing-m);
-  margin: 0 var(--spacing-m);
+  width: var(--spacing-10);
+  margin: 0 var(--spacing-10);
 }
 
 .Breadcrumbs-dropdown {

package/css/src/components/button.module.css

@@ -9,10 +9,10 @@
   cursor: pointer;
   user-select: none;
   border: 0;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
 
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 
   text-align: center;
   font-family: var(--font-family);
@@ -37,39 +37,39 @@
 }
 
 .Button-regularIcon--left {
-  margin-left: calc(-1 * var(--spacing-s));
+  margin-left: calc(-1 * var(--spacing-05));
 }
 
 .Button-regularIcon--right {
-  margin-right: calc(-1 * var(--spacing-s));
+  margin-right: calc(-1 * var(--spacing-05));
 }
 
 .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-60);
+  padding-right: var(--spacing-20);
+  padding-left: var(--spacing-20);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
 }
 
 .Button--tinySquare {
-  width: var(--spacing-xl);
+  width: var(--spacing-60);
 }
 
 .Button--regular {
-  height: var(--spacing-3);
-  padding-right: var(--spacing-l);
-  padding-left: var(--spacing-l);
+  height: var(--spacing-80);
+  padding-right: var(--spacing-30);
+  padding-left: var(--spacing-30);
 }
 
 .Button--regularSquare {
-  width: var(--spacing-3);
+  width: var(--spacing-80);
 }
 
 .Button--large {
   height: 40px;
-  padding-right: var(--spacing-2);
-  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-40);
+  padding-left: var(--spacing-40);
 
   line-height: var(--font-height-m);
   font-size: var(--font-size-m);
@@ -83,8 +83,8 @@
 .Button--largeSquare .Button-icon,
 .Button--tinySquare .Spinner,
 .Button--largeSquare .Spinner {
-  padding-left: var(--spacing-s);
-  padding-right: var(--spacing-s);
+  padding-left: var(--spacing-05);
+  padding-right: var(--spacing-05);
 }
 
 .Button--expanded {
@@ -98,18 +98,18 @@
 }
 
 .Button-icon--left {
-  margin-right: var(--spacing-0-75);
+  margin-right: var(--spacing-15);
 }
 
 .Button-icon--right {
-  margin-left: var(--spacing-0-75);
+  margin-left: var(--spacing-15);
 }
 
 .Button--tiny .Button-icon--left {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 .Button--tiny .Button-icon--right {
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-10);
 }
 
 .Button--basic {