@innovaccer/design-system 2.34.0 → 2.36.0

package/css/gulpfile.js

@@ -15,6 +15,7 @@ const sources = [
   materialIcons,
   './src/core/*.css',
   './src/components/*.css',
+  './src/ai-components/*.css',
   './src/utils/*.css',
 ];
 

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

@@ -0,0 +1,74 @@
+.AIButton {
+  padding: var(--spacing) var(--spacing-l);
+  border-radius: var(--spacing-m);
+  cursor: pointer;
+  border: 0;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  display: flex;
+  align-items: center;
+}
+
+.AIButton:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.AIButton:focus {
+  outline: 0;
+}
+
+/* Primary Button */
+
+.AIButton--primary {
+  background: var(--primary);
+  color: var(--white);
+}
+
+.AIButton--primary:hover {
+  background: var(--primary-dark);
+}
+
+.AIButton--primary:active {
+  background: var(--primary-darker);
+}
+
+.AIButton--primary:disabled {
+  background: var(--primary-lighter);
+}
+
+.AIButton--primary:focus {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+/* Basic Button */
+
+.AIButton--basic {
+  background: var(--secondary-light);
+  color: var(--inverse);
+}
+
+.AIButton--basic:hover {
+  background: var(--secondary);
+}
+
+.AIButton--basic:active {
+  background: var(--secondary-dark);
+}
+
+.AIButton--basic:disabled {
+  background: var(--secondary-lighter);
+  color: var(--inverse-lightest);
+}
+
+.AIButton--basic:focus {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+/* Button Icon */
+
+.AIButton-Icon {
+  margin-right: var(--spacing);
+}

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

@@ -0,0 +1,28 @@
+.AIResponse-box {
+  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);
+}
+
+.AIResponse-actionBar {
+  margin-top: var(--spacing-m);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.AIResponse-button {
+  opacity: var(--opacity-12);
+}
+
+.AIResponse-box:hover .AIResponse-button {
+  opacity: 1;
+}
+
+.AIResponse-button--selected {
+  opacity: 1;
+}

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

@@ -0,0 +1,63 @@
+.AIChip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--spacing-l);
+  padding: var(--spacing-s) var(--spacing);
+  background: var(--secondary-light);
+  cursor: pointer;
+  width: fit-content;
+  border: 0;
+}
+
+.AIChip:hover {
+  background: var(--secondary);
+}
+
+.AIChip:active {
+  background: var(--secondary-dark);
+}
+
+.AIChip:focus,
+.AIChip:focus-visible {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: none;
+}
+
+.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%);
+  background-clip: text;
+  color: transparent;
+}
+
+.AIChip-text {
+  color: var(--inverse);
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  font-family: var(--font-family);
+}
+
+/* Disabled Chip */
+
+.AIChip--disabled {
+  background: var(--secondary-lighter);
+}
+
+.AIChip-icon--disabled {
+  background: linear-gradient(to bottom, #ffe79e 0%, #f4a4c9 100%);
+  background-clip: text;
+  color: transparent;
+}
+
+.AIChip-text--disabled {
+  color: var(--inverse-lightest);
+}
+
+.AIChip:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -0,0 +1,67 @@
+.AIIconButton {
+  background: transparent;
+  padding: var(--spacing);
+  border-radius: var(--spacing-m);
+  cursor: pointer;
+  border: 0;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  position: relative;
+}
+
+.AIIconButton:hover {
+  background: var(--secondary);
+  color: var(--secondary) !important;
+}
+
+.AIIconButton:active {
+  background: var(--secondary-dark);
+  color: var(--secondary-dark) !important;
+}
+
+.AIIconButton:focus {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.AIIconButton:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background: transparent;
+  color: var(--inverse-lightest);
+}
+
+.AIIconButton-icon {
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.AIIconButton-AIIcon {
+  position: absolute;
+}
+
+.AIIconButton-AIIcon--regularTop {
+  bottom: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
+  left: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
+}
+
+.AIIconButton-AIIcon--largeTop {
+  bottom: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
+  left: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
+}
+
+.AIIconButton-AIIcon--regularBottom {
+  top: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */
+  left: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */
+}
+
+.AIIconButton-AIIcon--largeBottom {
+  top: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */
+  left: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */
+}

package/css/src/components/calendar.css

@@ -254,7 +254,15 @@
 }
 
 .Calendar-valueWrapper--dummy {
-  opacity: var(--transparent-58);
+  opacity: var(--opacity-20);
+}
+
+.Calendar-valueWrapper--disabled {
+  opacity: var(--opacity-10);
+}
+
+.Calendar-valueWrapper--active-dummy {
+  opacity: var(--opacity-16);
 }
 
 .Calendar-value--disabled {

package/css/src/components/chip.css

@@ -112,6 +112,14 @@
   color: var(--primary-darker);
 }
 
+.Chip-text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline;
+  max-width: 100%;
+}
+
 .Chip-selection--selectedDisabled {
   background: var(--primary-lightest);
   border-color: var(--primary-lighter);

package/css/src/components/chipInput.css

@@ -60,7 +60,7 @@
   outline: none;
   display: flex;
   width: 100%;
-  min-width: 30%;
+  min-width: 15%;
   flex: 0px;
   box-sizing: border-box;
   height: var(--spacing-xl);

package/css/src/components/emptyState.css

@@ -6,6 +6,23 @@
   background: transparent;
 }
 
+.EmptyState-Wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  width: 100%;
+}
+
+.EmptyState-image {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .EmptyState-title {
   text-align: center;
   max-width: 480px;
@@ -32,3 +49,36 @@
 .EmptyState-description--small {
   margin-bottom: var(--spacing-2);
 }
+
+.EmptyState-text {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
+.EmptyState-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.EmptyState-title--compressed {
+  margin-top: var(--spacing-2);
+}
+.EmptyState-title--standard {
+  margin-top: var(--spacing-xl);
+}
+.EmptyState-title--tight {
+  margin-top: var(--spacing-l);
+}
+
+.EmptyState-actions--compressed {
+  margin-top: var(--spacing-2);
+}
+
+.EmptyState-actions--standard {
+  margin-top: var(--spacing-xl);
+}
+
+.EmptyState-actions--tight {
+  margin-top: var(--spacing-l);
+}

package/css/src/components/input.css

@@ -67,6 +67,12 @@
   pointer-events: none;
 }
 
+.Input--readOnly {
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+  pointer-events: none;
+}
+
 .Input--disabled .Input-icon--left {
   color: var(--inverse-lightest);
 }

package/css/src/components/metricInput.css

@@ -46,6 +46,12 @@
   pointer-events: none;
 }
 
+.MetricInput--readOnly {
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+  pointer-events: none;
+}
+
 .MetricInput--disabled .MetricInput-icon {
   color: var(--inverse-lightest);
 }

package/css/src/components/textarea.css

@@ -37,6 +37,12 @@
   border-color: var(--secondary-light);
 }
 
+.Textarea--readOnly {
+  pointer-events: none;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary);
+}
+
 .Textarea--error {
   border: var(--spacing-xs) solid var(--alert);
 }

package/css/src/core/animation.css

@@ -108,3 +108,23 @@
   transform: rotateZ(180deg);
   transition: var(--duration--moderate-02) var(--standard-productive-curve);
 }
+
+.shimmer-text {
+  text-align: center;
+  background: var(--inverse-light);
+  color: rgba(47, 47, 47, 0.1) !important;
+  background: linear-gradient(to right, var(--inverse-light) 0%, var(--secondary-dark) 50%, var(--inverse-light) 100%);
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: shimmerText 2s infinite linear forwards;
+  background-clip: text;
+}
+
+@keyframes shimmerText {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}