@innovaccer/design-system 4.0.0 → 4.2.0

package/css/gulpfile.js

@@ -9,11 +9,20 @@ const cleaner = require('gulp-clean');
 const materialIcons = './material-design-icons/iconfont/material-icons.css';
 const materialFont = './material-design-icons/iconfont/*.{ttf,otf,woff2}';
 
+const typographyCssPath = [
+  './src/components/text.module.css',
+  './src/components/heading.module.css',
+  './src/components/label.module.css',
+  './src/components/caption.module.css',
+  './src/components/subheading.module.css',
+];
+
 const sources = [
   './src/tokens/*.css',
   './src/variables/*.css',
   materialIcons,
   './src/core/*.css',
+  ...typographyCssPath,
   './src/components/*.css',
   './src/ai-components/*.css',
   './src/utils/*.css',

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

@@ -1,15 +1,14 @@
 .AvatarGroup-item {
   border-radius: 50%;
   position: relative;
+  margin-right: calc(var(--spacing-s) * -1);
 }
 
 .AvatarGroup-item--regular {
-  margin-right: calc(var(--spacing-m) * -1);
   height: var(--spacing-3);
 }
 
 .AvatarGroup-item--tiny {
-  margin-right: calc(var(--spacing-s) * -1);
   height: var(--spacing-xl);
 }
 
@@ -35,3 +34,34 @@
   outline: 3px solid var(--primary-shadow);
   outline-offset: 3px;
 }
+
+.AvatarGroup-inputWrapper {
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.AvatarGroup-inputWrapper:focus-within {
+  border-bottom: var(--spacing-xs) solid var(--primary);
+}
+
+.AvatarGroup-input {
+  min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0;
+  height: calc(var(--spacing-3) + var(--spacing-m)) !important;
+}
+
+.AvatarGroup-input,
+.AvatarGroup-input:focus-within {
+  border: unset !important;
+  box-shadow: none !important;
+}
+
+.AvatarGroup-input:hover {
+  background-color: var(--secondary-lightest);
+}
+
+.AvatarGroup-listItem--disabled {
+  cursor: not-allowed;
+  pointer-events: auto !important;
+}

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

@@ -8,20 +8,20 @@
 /* Selection Avatar List */
 
 .SelectionAvatarGroup-item {
-  margin-right: calc(var(--spacing-m) * -1);
+  margin-right: calc(var(--spacing-s) * -1);
   border-radius: 50%;
   display: flex;
   transition: transform var(--duration--fast-01) var(--standard-productive-curve);
   position: relative;
 }
 
-.SelectionAvatarGroup-item:focus,
-.SelectionAvatarGroup-item:focus-visible {
+.SelectionAvatarGroup-item--active:focus,
+.SelectionAvatarGroup-item--active:focus-visible {
   outline: 3px solid var(--primary-shadow);
   outline-offset: 3px;
 }
 
-.SelectionAvatarGroup-item:active {
+.SelectionAvatarGroup-item--active:active {
   outline: var(--spacing-s) solid #00509f;
   outline-offset: var(--spacing-xs);
 }

package/css/src/components/chatBubble.module.css

@@ -0,0 +1,53 @@
+.ChatBubble-box--outgoing {
+  background-color: var(--primary-lightest);
+  border-radius: var(--spacing);
+  padding: var(--spacing) var(--spacing-l);
+}
+
+.ChatBubble-separator {
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  border-radius: 50%;
+  margin: 0 var(--spacing);
+  background: var(--inverse-lightest);
+}
+
+.ChatBubble-box--noSuccess {
+  margin-right: calc(var(--spacing-2) + var(--spacing-m));
+}
+
+.ChatBubble-box {
+  width: 100%;
+}
+
+.ChatBubble-actionBar--outgoing {
+  width: max-content;
+  margin-right: var(--spacing-m);
+  margin-top: var(--spacing-0-75);
+}
+
+.ChatBubble-actionBar--incoming {
+  width: max-content;
+  margin-left: var(--spacing-m);
+  margin-top: var(--spacing-0-75);
+}
+
+.ChatBubble-box--incoming {
+  background-color: var(--secondary-lightest);
+  border-radius: var(--spacing);
+  padding: var(--spacing) var(--spacing-l);
+}
+
+.ChatBubble-metaData--incoming {
+  margin-left: calc(var(--spacing-3) + var(--spacing));
+}
+
+.ChatBubble-boxWrapper {
+  flex: 0 0 auto;
+  display: flex;
+  max-width: 70%;
+}
+
+.ChatBubble-actionBarWrapper {
+  flex: 0 0 auto;
+}

package/css/src/components/chatSeparator.module.css

@@ -0,0 +1,23 @@
+.Chat-UnreadMessage {
+  border-radius: var(--spacing-2);
+  padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary);
+  cursor: pointer;
+}
+
+.NewMessage-Divider--left {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-right: var(--spacing-2);
+}
+
+.NewMessage-Divider--right {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-left: var(--spacing-2);
+}

package/css/src/utils/cursor.css

@@ -5,3 +5,7 @@
 .cursor-default {
   cursor: default;
 }
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}