@adzen/doohbot 1.0.0 → 1.0.2

package/{projects/doohbot/src/lib/utils → src/lib/styles}/utility.scss

@@ -5,28 +5,31 @@
 */
 
 $colors: (
-  'blue': '#2196F3',
-  'blue-dark': '#1333bc',
-  'blue-grey': '#7b7781',
-  'sky-blue': '#87ceeb',
-  'green': '#619361',
-  'green-dark-1': '#538353',
-  'green-light': 'rgb(13, 155, 13)',
-  'green-light-1': '#76bd76',
-  'orange': '#cc7e33',
-  'yellow': '#ffff00',
-  'yellow-dark-1': '#bdbd28',
-  'red': '#cc5133',
-  'red-light': 'rgb(249 3 3)',
-  'red-dark': 'rgb(160, 5, 5)',
-  'white': '#fff',
-  'grey': 'grey',
-  'purple': '#800080',
-  'grey-dark': '#695e5e',
-  'grey-light': '#b2a6a6',
-  'black': '#000',
-  'pink': '#e91e63',
-  'pink-dark-1': '#d81b60',
+  'blue': var(--blue),
+  'blue-dark': var(--blue),
+  // Simplified for now
+  'blue-grey': var(--grey),
+  'sky-blue': var(--blue),
+  'green': var(--green),
+  'green-dark-1': var(--green),
+  'green-light': var(--green),
+  'green-light-1': var(--green),
+  'orange': var(--orange),
+  'yellow': var(--orange),
+  // map to orange or add yellow
+  'yellow-dark-1': var(--orange),
+  'red': var(--red),
+  'red-light': var(--light-red),
+  'red-dark': var(--red),
+  'white': var(--white),
+  'grey': var(--grey),
+  'purple': var(--primary-color),
+  // map to primary or add purple
+  'grey-dark': var(--grey),
+  'grey-light': var(--grey),
+  'black': var(--black),
+  'pink': var(--light-red),
+  'pink-dark-1': var(--red),
 );
 
 // Text Color
@@ -41,12 +44,16 @@ $colors: (
   .bg-#{$color-name} {
     background-color: #{$value} !important;
 
-    @if $color-name == white {
-      color: #000 !important;
-    } @else if $color-name == 'sky-blue' {
-      color: #000 !important;
-    } @else {
-      color: #fff !important;
+    @if $color-name ==white {
+      color: var(--black) !important;
+    }
+
+    @else if $color-name =='sky-blue' {
+      color: var(--black) !important;
+    }
+
+    @else {
+      color: var(--white) !important;
     }
   }
 }
@@ -70,10 +77,12 @@ $border-position: (
     .border-#{$color}-#{$size}px {
       border: solid #{$size}px #{$col} !important;
     }
+
     .border-t-b-#{$color}-#{$size}px {
       border-top: solid #{$size}px #{$col} !important;
       border-bottom: solid #{$size}px #{$col} !important;
     }
+
     .border-l-r-#{$color}-#{$size}px {
       border-left: solid #{$size}px #{$col} !important;
       border-right: solid #{$size}px #{$col} !important;
@@ -93,6 +102,7 @@ $unit: (
     .h-#{$size}#{$unit} {
       height: #{$size}#{$ut} !important;
     }
+
     .w-#{$size}#{$unit} {
       width: #{$size}#{$ut} !important;
     }
@@ -119,6 +129,7 @@ $unit: (
       .m-#{$pos}-#{$size}#{$unit} {
         margin-#{$position}: #{$size}#{$ut} !important;
       }
+
       .p-#{$pos}-#{$size}#{$unit} {
         padding-#{$position}: #{$size}#{$ut} !important;
       }
@@ -157,27 +168,31 @@ $unit: (
 
 // Gradient | Background | Color
 .gradient-green-linear {
-  background-image: linear-gradient(to right, green, rgb(16, 180, 16)) !important;
+  background-image: linear-gradient(to right, var(--green), var(--green)) !important;
 
   // mat.define-palette(mat.$green-palette, 900),
   // mat.define-palette(mat.$green-palette, 500)
 }
+
 .gradient-orange-linear {
-  background-image: linear-gradient(to right, rgb(179, 120, 10), rgb(245, 164, 14)) !important;
+  background-image: linear-gradient(to right, var(--orange), var(--orange)) !important;
   // mat.define-palette(mat.$orange-palette, 900),
   // mat.define-palette(mat.$orange-palette, 500)
 }
+
 .gradient-red-linear {
-  background-image: linear-gradient(to right, red, rgb(255, 60, 0)) !important;
+  background-image: linear-gradient(to right, var(--red), var(--red)) !important;
   // mat.define-palette(mat.$red-palette, 900),
   // mat.define-palette(mat.$red-palette, 500)
 }
+
 .gradient-blue-linear {
-  background-image: linear-gradient(to right, blue, rgb(22, 86, 224)) !important;
+  background-image: linear-gradient(to right, var(--blue), var(--blue)) !important;
 
   // mat.define-palette(mat.$blue-palette, 900),
   // mat.define-palette(mat.$blue-palette, 500)
 }
+
 // Gradient | Background | Color
 
 // Flex
@@ -254,6 +269,7 @@ $unit: (
   font-weight: 500;
   margin-right: 5px;
 }
+
 .input-suffix {
   font-weight: 500;
   margin-left: 5px;
@@ -263,27 +279,35 @@ $unit: (
 .text-right {
   text-align: right !important;
 }
+
 .text-left {
   text-align: left !important;
 }
+
 .text-center {
   text-align: center !important;
 }
+
 .float-right {
   float: right !important;
 }
+
 .float-left {
   float: left !important;
 }
+
 .text-end {
   text-align: end !important;
 }
+
 .text-start {
   text-align: start !important;
 }
+
 .txt-center {
   text-align: center !important;
 }
+
 .txt-decoration-none {
   text-decoration: none !important;
 }
@@ -291,6 +315,7 @@ $unit: (
 .f-w-b {
   font-weight: bold !important;
 }
+
 .f-w-500 {
   font-weight: 500 !important;
 }
@@ -299,15 +324,19 @@ $unit: (
 .w-100 {
   width: 100% !important;
 }
+
 .h-100 {
   height: 100% !important;
 }
+
 .vw-100 {
   width: 100vw !important;
 }
+
 .vh-100 {
   height: 100vh !important;
 }
+
 .h-auto {
   height: auto !important;
 }
@@ -320,7 +349,7 @@ $unit: (
 .card-title-text {
   font-size: 14px !important;
   font-weight: 600 !important;
-  color: #6f766c;
+  color: var(--secondary-text-color);
 }
 
 .pointer-event-none {
@@ -534,3 +563,26 @@ $unit: (
   transition: opacity 0.3s ease-out !important;
   pointer-events: none !important;
 }
+
+// Marquee Text
+.marquee-container {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.marquee-text {
+  display: inline-block;
+  padding-left: 100%;
+  animation: marquee 15s linear infinite;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(-100%, 0);
+  }
+}

package/src/lib/theme/index.scss

@@ -0,0 +1,8 @@
+/* Load Contract & Logic */
+@use './tokens/semantic.scss';
+
+/* Load Default Palette (Global) */
+@use './palettes/doohbot.scss';
+
+/* Load Template Classes */
+@use './themes.scss';

package/src/lib/theme/palettes/aqua.scss

@@ -0,0 +1,88 @@
+/* 
+  Aqua Palette (Light Mode) 
+*/
+.db-theme-aqua {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #74c2bb;
+    --db-primary-rgb: 116, 194, 187;
+    --db-secondary: #96f6ee;
+
+     /* Backgrounds */
+    --db-bg-app: #ffffff;
+    --db-bg-chat-input: #f9fafb;
+    --db-bg-user-msg: #e0e7ff;
+    --db-bg-bot-msg: #f3f4f6;
+
+     /* Text Colors */
+    --db-text-primary: #1f2937;
+    --db-text-secondary: #9ca3af;
+    --db-text-tertiary: #1f2937;
+    --db-text-hint: #9ca3af;
+    --db-text-user-msg: #111827;
+    --db-text-bot-msg: #111827;
+
+     /* UI Elements */
+    --db-border-color: #cbd5e1;
+    --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --db-border-top: #ffffff00;
+    
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #cbd5e1;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+
+     /* Media/Filters */
+    --db-avatar-filter: none;
+}
+
+/* 
+  Aqua Palette - Dark Mode Overrides 
+*/
+.dark-theme.db-theme-aqua,
+.dark-theme .db-theme-aqua,
+.dark-theme.cdk-overlay-container .db-theme-aqua,
+.dark-theme .cdk-overlay-container .db-theme-aqua {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #74c2bb;
+    --db-primary-rgb: 116, 194, 187;
+    --db-secondary: #96f6ee;
+
+    /* Backgrounds */
+    --db-bg-app: #151521;
+    --db-bg-chat-input: #1e293b;
+    --db-bg-user-msg: #1e293b;
+    --db-bg-bot-msg: #1e293b;
+
+    /* Text Colors */
+    --db-text-primary: #f8fafc;
+    --db-text-secondary: #94a3b8;
+    --db-text-tertiary: #1f2937;
+    --db-text-hint: #64748b;
+    --db-text-user-msg: #f8fafc;
+    --db-text-bot-msg: #f8fafc;
+
+    /* UI Elements */
+    --db-border-color: #334155;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #334155;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.2) contrast(1.1);
+}

package/src/lib/theme/palettes/candy.scss

@@ -0,0 +1,88 @@
+/* 
+Candy Palette (Light Mode) 
+*/
+.db-theme-candy {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #e91e63;
+    --db-primary-rgb: 233, 30, 99;
+    --db-secondary: #ffeb3b;
+
+    /* Backgrounds */
+    --db-bg-app: #ffffff;
+    --db-bg-chat-input: #ffffff;
+    --db-bg-user-msg: #f8bbd0;
+    --db-bg-bot-msg: #f8bbd0;
+
+    /* Text Colors */
+    --db-text-primary: #4a148c;
+    --db-text-secondary: #ad1457;
+    --db-text-tertiary: #4a148c;
+    --db-text-hint: #c2185b;
+    --db-text-user-msg: #4a148c;
+    --db-text-bot-msg: #4a148c;
+
+    /* UI Elements */
+    --db-border-color: #f8bbd0;
+    --db-border-shadow: 0 4px 12px rgba(233, 30, 99, .2);
+    --db-border-top: #ffffff00;
+
+        /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #f8bbd0;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+
+     /* Media/Filters */
+    --db-avatar-filter: none;
+}
+
+/* 
+  candy Palette - Dark Mode Overrides 
+*/
+.dark-theme.db-theme-candy,
+.dark-theme .db-theme-candy,
+.dark-theme.cdk-overlay-container .db-theme-candy,
+.dark-theme .cdk-overlay-container .db-theme-candy {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #f06292;
+    --db-primary-rgb: 240, 98, 146;
+    --db-secondary: #ffeb3b;
+
+    /* Backgrounds */
+    --db-bg-app: #2a0f1c;
+    --db-bg-chat-input: #3b102a;
+    --db-bg-user-msg: #f06292;
+    --db-bg-bot-msg: #5a1a3d;
+
+    /* Text Colors */
+    --db-text-primary: #fff0f6;
+    --db-text-secondary: #f8bbd0;
+    --db-text-tertiary: ##fff0f6;
+    --db-text-hint: #f48fb1;
+    --db-text-user-msg: #fff0f6;
+    --db-text-bot-msg: #fff0f6;
+
+    /* UI Elements */
+    --db-border-color: #5a1a3d;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
+    --db-border-top: #ffffff00;
+
+            /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #5a1a3d;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+     /* Media/Filters */
+    --db-avatar-filter: brightness(1.15);
+}

package/src/lib/theme/palettes/doohbot.scss

@@ -0,0 +1,88 @@
+/* 
+  Doohbot Palette (Light Mode) 
+*/
+.db-theme-doohbot {
+  /* Fonts */
+  --db-font: 'Roboto', Arial, sans-serif;
+
+  /* Brand Colors */
+  --db-primary: #4f46e5;
+  --db-primary-rgb: 79, 70, 229;
+  --db-secondary: #6366f1;
+
+  /* Backgrounds */
+  --db-bg-app: #ffffff;
+  --db-bg-chat-input: #f9fafb;
+  --db-bg-user-msg: #f3f4f6;
+  --db-bg-bot-msg: #f3f4f6;
+
+  /* Text Colors */
+  --db-text-primary: #1f2937;
+  --db-text-secondary: #9ca3af;
+  --db-text-tertiary: #1f2937;
+  --db-text-hint: #9ca3af;
+  --db-text-user-msg: #111827;
+  --db-text-bot-msg: #111827;
+
+  /* UI Elements */
+  --db-border-color: #cbd5e1;
+  --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --db-border-top: #ffffff00;
+
+  /* Interaction */
+  --db-color-button: var(--db-primary);
+  --db-color-typing: #cbd5e1;
+
+  /* Colors */
+  --db-white-rgb: 255, 255, 255;
+  --db-black-rgb: 0, 0, 0;
+
+  /* Media/Filters */
+  --db-avatar-filter: none;
+}
+
+/* 
+  Doohbot Palette - Dark Mode Overrides 
+*/
+.dark-theme.db-theme-doohbot,
+.dark-theme .db-theme-doohbot,
+.dark-theme.cdk-overlay-container .db-theme-doohbot,
+.dark-theme .cdk-overlay-container .db-theme-doohbot {
+  /* Fonts */
+  --db-font: 'Roboto', Arial, sans-serif;
+
+  /* Brand Colors */
+  --db-primary: #818cf8;
+  --db-primary-rgb: 129, 140, 248;
+  --db-secondary: #6366f1;
+
+  /* Backgrounds */
+  --db-bg-app: #161616;
+  --db-bg-chat-input: #1f2937;
+  --db-bg-user-msg: #374151;
+  --db-bg-bot-msg: #374151;
+
+  /* Text Colors */
+  --db-text-primary: #f9fafb;
+  --db-text-secondary: #9ca3af;
+  --db-text-tertiary: #1f2937;
+  --db-text-hint: #6b7280;
+  --db-text-user-msg: #f9fafb;
+  --db-text-bot-msg: #f9fafb;
+
+  /* UI Elements */
+  --db-border-color: #505050;
+  --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --db-border-top: #ffffff00;
+
+  /* Interaction */
+  --db-color-button: var(--db-primary);
+  --db-color-typing: #505050;
+
+  /* Colors */
+  --db-white-rgb: 0, 0, 0;
+  --db-black-rgb: 255, 255, 255;
+
+  /* Media/Filters */
+  --db-avatar-filter: brightness(1.2) contrast(1.1);
+}

package/src/lib/theme/palettes/forest.scss

@@ -0,0 +1,88 @@
+/* 
+Forest Palette (Light Mode)
+ */
+.db-theme-forest {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #2e7d32;
+    --db-primary-rgb: 46, 125, 50;
+    --db-secondary: #8bc34a;
+
+    /* Backgrounds */
+    --db-bg-app: #ffffff;
+    --db-bg-chat-input: #ffffff;
+    --db-bg-user-msg: #dcedc8;
+    --db-bg-bot-msg: #dcedc8;
+
+    /* Text Colors */
+    --db-text-primary: #1b5e20;
+    --db-text-secondary: #558b2f;
+    --db-text-tertiary: #1b5e20;
+    --db-text-hint: #7cb342;
+    --db-text-user-msg: #1b5e20;
+    --db-text-bot-msg: #1b5e20;
+
+    /* UI Elements */
+    --db-border-color: #c8e6c9;
+    --db-border-shadow: 0 4px 12px rgba(27, 94, 32, .12);
+    --db-border-top: #ffffff00;
+
+      /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #c8e6c9;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+
+    /* Media/Filters */
+    --db-avatar-filter: none;
+}
+
+/* 
+Forest Palette (Dark Mode)
+*/
+.dark-theme.db-theme-forest,
+.dark-theme .db-theme-forest,
+.dark-theme.cdk-overlay-container .db-theme-forest,
+.dark-theme .cdk-overlay-container .db-theme-forest {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #66bb6a;
+    --db-primary-rgb: 102, 187, 106;
+    --db-secondary: #8bc34a;
+
+    /* Backgrounds */
+    --db-bg-app: #102017;
+    --db-bg-chat-input: #1b2f23;
+    --db-bg-user-msg: #2e4d3a;
+    --db-bg-bot-msg: #2e4d3a;
+
+    /* Text Colors */
+    --db-text-primary: #e8f5e9;
+    --db-text-secondary: #a5d6a7;
+    --db-text-tertiary: #e8f5e9;
+    --db-text-hint: #81c784;
+    --db-text-user-msg: #e8f5e9;
+    --db-text-bot-msg: #e8f5e9;
+
+    /* UI Elements */
+    --db-border-color: #2e4d3a;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #2e4d3a;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.1);
+}

package/src/lib/theme/palettes/midnight.scss

@@ -0,0 +1,88 @@
+/* 
+  Midnight Palette (Light Mode) 
+*/
+.db-theme-midnight {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #6366f1;
+    --db-primary-rgb: 99, 102, 241;
+    --db-secondary: #1e88e5;
+
+    /* Backgrounds */
+    --db-bg-app: #0f172a;
+    --db-bg-chat-input: #1f2937;
+    --db-bg-user-msg: #1e293b;
+    --db-bg-bot-msg: #1e293b;
+
+    /* Text Colors */
+    --db-text-primary: #f8fafc;
+    --db-text-secondary: #9ca3af;
+    --db-text-tertiary: #f8fafc;
+    --db-text-hint: #6b7280;
+    --db-text-user-msg: #f8fafc;
+    --db-text-bot-msg: #f8fafc;
+
+    /* UI Elements */
+    --db-border-color: #334155;
+    --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
+    --db-border-top: #ffffff00;
+
+  /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #334155;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+    
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.15) contrast(1.05);
+}
+
+/* 
+  Midnight Palette – Dark Mode Overrides 
+*/
+.dark-theme.db-theme-midnight,
+.dark-theme .db-theme-midnight,
+.dark-theme.cdk-overlay-container .db-theme-midnight,
+.dark-theme .cdk-overlay-container .db-theme-midnight {
+      /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #818cf8;
+    --db-primary-rgb: 129, 140, 248;
+    --db-secondary: #60a5fa;
+
+    /* Backgrounds */
+    --db-bg-app: #020617;
+    --db-bg-chat-input: #0f172a;
+    --db-bg-user-msg: #1e293b;
+    --db-bg-bot-msg: #1e293b;
+
+    /* Text Colors */
+    --db-text-primary: #f9fafb;
+    --db-text-secondary: #cbd5f5;
+    --db-text-tertiary: #f9fafb;
+    --db-text-hint: #94a3b8;
+    --db-text-user-msg: #f9fafb;
+    --db-text-bot-msg: #f9fafb;
+
+    /* UI Elements */
+    --db-border-color: #1e293b;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #1e293b;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.25) contrast(1.1);
+}