@innovaccer/design-system 4.1.0 → 4.3.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/avatarSelection.module.css

@@ -15,13 +15,13 @@
   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/components/meter.module.css

@@ -0,0 +1,39 @@
+.Meter {
+  display: flex;
+  align-items: center;
+}
+
+.Meter-Step {
+  border-radius: 50%;
+}
+
+.Meter-Step--small {
+  width: var(--spacing-m);
+  height: var(--spacing);
+}
+
+.Meter-Step--regular {
+  width: var(--spacing);
+  height: var(--spacing);
+}
+
+.Meter-Step--large {
+  width: var(--spacing-l);
+  height: var(--spacing-l);
+}
+
+.Meter-Step--info {
+  background: var(--primary);
+}
+
+.Meter-Step--warning {
+  background: var(--warning);
+}
+
+.Meter-Step--alert {
+  background: var(--alert);
+}
+
+.Meter-Step--success {
+  background: var(--success);
+}