@adzen/doohbot 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/fesm2022/adzen-doohbot.mjs +1541 -1137
  2. package/fesm2022/adzen-doohbot.mjs.map +1 -1
  3. package/index.d.ts +87 -111
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/lib/app/chat/components/chat-button/chat-button.component.scss +43 -9
  7. package/src/lib/app/chat/components/chat-footer/chat-footer.component.scss +3 -3
  8. package/src/lib/app/chat/components/chat-header/chat-header.component.scss +29 -11
  9. package/src/lib/app/chat/components/{chat-history-sidebar/chat-history-sidebar.component.scss → chat-history/chat-history.component.scss} +46 -34
  10. package/src/lib/app/chat/components/chat-input/chat-input.component.scss +44 -21
  11. package/src/lib/app/chat/components/chat-message/chat-message.component.scss +178 -178
  12. package/src/lib/app/chat/components/chat-message-container/chat-message-container.component.scss +55 -24
  13. package/src/lib/app/chat/components/chat-window/chat-window.component.scss +282 -21
  14. package/src/lib/app/login/login-form.component.scss +24 -24
  15. package/src/lib/app/personalization/personalization-dialog.component.scss +17 -17
  16. package/src/lib/app/personalization/sections/account/account-section.component.scss +167 -166
  17. package/src/lib/app/personalization/sections/instruction/instruction-section.component.scss +47 -46
  18. package/src/lib/app/personalization/sections/preferences/preferences-section.component.scss +172 -170
  19. package/src/lib/app/personalization/sections/terms/terms-section.component.scss +58 -57
  20. package/src/lib/doohbot.component.scss +6 -12
  21. package/src/lib/shared/chips/chips.component.scss +8 -8
  22. package/src/lib/shared/confirmation-dialog/confirmation-dialog.component.scss +24 -0
  23. package/src/lib/shared/dropdown-menu/dropdown-menu.component.scss +5 -5
  24. package/src/lib/shared/input-dialog/input-dialog.component.scss +8 -8
  25. package/src/lib/shared/notification-banner/notification-banner.component.scss +342 -0
  26. package/src/lib/shared/snackbar/snackbar.component.scss +3 -3
  27. package/src/lib/styles/_theme.scss +101 -45
  28. package/src/lib/styles/material-override.scss +36 -26
  29. package/src/lib/styles/utility.scss +64 -12
  30. package/src/lib/theme/index.scss +7 -7
  31. package/src/lib/theme/palettes/aqua.scss +76 -62
  32. package/src/lib/theme/palettes/candy.scss +75 -61
  33. package/src/lib/theme/palettes/doohbot.scss +21 -7
  34. package/src/lib/theme/palettes/forest.scss +75 -61
  35. package/src/lib/theme/palettes/midnight.scss +75 -61
  36. package/src/lib/theme/palettes/slate.scss +75 -61
  37. package/src/lib/theme/palettes/sunset.scss +75 -61
  38. package/src/lib/shared/dialog/dialog.component.scss +0 -90
  39. package/src/lib/shared/menu-item/menu-item.component.scss +0 -0
  40. package/src/lib/theme/themes.scss +0 -7
  41. package/src/lib/theme/tokens/semantic.scss +0 -102
package/src/lib/styles/utility.scss CHANGED
@@ -23,7 +23,7 @@ $colors: (
23
23
  'red-dark': var(--red),
24
24
  'white': var(--white),
25
25
  'grey': var(--grey),
26
- 'purple': var(--primary-color),
26
+ 'purple': var(--db-primary),
27
27
  // map to primary or add purple
28
28
  'grey-dark': var(--grey),
29
29
  'grey-light': var(--grey),
@@ -46,13 +46,9 @@ $colors: (
46
46
 
47
47
  @if $color-name ==white {
48
48
  color: var(--black) !important;
49
- }
50
-
51
- @else if $color-name =='sky-blue' {
49
+ } @else if $color-name == 'sky-blue' {
52
50
  color: var(--black) !important;
53
- }
54
-
55
- @else {
51
+ } @else {
56
52
  color: var(--white) !important;
57
53
  }
58
54
  }
@@ -97,7 +93,7 @@ $unit: (
97
93
  px: 'px',
98
94
  );
99
95
 
100
- @for $size from 0 through 50 {
96
+ @for $size from 0 through 200 {
101
97
  @each $unit, $ut in $unit {
102
98
  .h-#{$size}#{$unit} {
103
99
  height: #{$size}#{$ut} !important;
@@ -123,7 +119,7 @@ $unit: (
123
119
  px: 'px',
124
120
  );
125
121
 
126
- @for $size from 0 through 100 {
122
+ @for $size from 0 through 200 {
127
123
  @each $unit, $ut in $unit {
128
124
  @each $position, $pos in $position {
129
125
  .m-#{$pos}-#{$size}#{$unit} {
@@ -152,7 +148,7 @@ $unit: (
152
148
  pt: 'pt',
153
149
  );
154
150
 
155
- @for $size from 0 through 50 {
151
+ @for $size from 0 through 100 {
156
152
  @each $unit, $ut in $unit {
157
153
  .f-s-#{$size}#{$unit} {
158
154
  font-size: #{$size}#{$ut} !important;
@@ -349,7 +345,7 @@ $unit: (
349
345
  .card-title-text {
350
346
  font-size: 14px !important;
351
347
  font-weight: 600 !important;
352
- color: var(--secondary-text-color);
348
+ color: var(--db-text-secondary);
353
349
  }
354
350
 
355
351
  .pointer-event-none {
@@ -585,4 +581,60 @@ $unit: (
585
581
  100% {
586
582
  transform: translate(-100%, 0);
587
583
  }
588
- }
584
+ }
585
+
586
+ .cursor-pointer {
587
+ cursor: pointer !important;
588
+ }
589
+
590
+ .pos-fixed {
591
+ position: fixed !important;
592
+ }
593
+
594
+ .pos-absolute {
595
+ position: absolute !important;
596
+ }
597
+
598
+ .pos-relative {
599
+ position: relative !important;
600
+ }
601
+
602
+ .top-0 {
603
+ top: 0 !important;
604
+ }
605
+
606
+ .bottom-0 {
607
+ bottom: 0 !important;
608
+ }
609
+
610
+ .left-0 {
611
+ left: 0 !important;
612
+ }
613
+
614
+ .right-0 {
615
+ right: 0 !important;
616
+ }
617
+
618
+ .z-index-1000 {
619
+ z-index: 1000 !important;
620
+ }
621
+
622
+ .z-index-999 {
623
+ z-index: 999 !important;
624
+ }
625
+
626
+ .top-24px {
627
+ top: 24px !important;
628
+ }
629
+
630
+ .bottom-24px {
631
+ bottom: 24px !important;
632
+ }
633
+
634
+ .right-24px {
635
+ right: 24px !important;
636
+ }
637
+
638
+ .left-24px {
639
+ left: 24px !important;
640
+ }
package/src/lib/theme/index.scss CHANGED
@@ -1,8 +1,8 @@
1
- /* Load Contract & Logic */
2
- @use './tokens/semantic.scss';
3
-
4
- /* Load Default Palette (Global) */
1
+ /* Load Palette Classes */
2
+ @use './palettes/aqua.scss';
5
3
  @use './palettes/doohbot.scss';
6
-
7
- /* Load Template Classes */
8
- @use './themes.scss';
4
+ @use './palettes/candy.scss';
5
+ @use './palettes/forest.scss';
6
+ @use './palettes/sunset.scss';
7
+ @use './palettes/midnight.scss';
8
+ @use './palettes/slate.scss';
package/src/lib/theme/palettes/aqua.scss CHANGED
@@ -2,43 +2,50 @@
2
2
  Aqua Palette (Light Mode)
3
3
  */
4
4
  .db-theme-aqua {
5
- /* Fonts */
6
- --db-font: 'Roboto', Arial, sans-serif;
5
+ /* Fonts */
6
+ --db-font: 'Roboto', Arial, sans-serif;
7
7
 
8
- /* Brand Colors */
9
- --db-primary: #74c2bb;
10
- --db-primary-rgb: 116, 194, 187;
11
- --db-secondary: #96f6ee;
8
+ /* Brand Colors */
9
+ --db-primary: #74c2bb;
10
+ --db-primary-rgb: 116, 194, 187;
11
+ --db-secondary: #96f6ee;
12
12
 
13
- /* Backgrounds */
14
- --db-bg-app: #ffffff;
15
- --db-bg-chat-input: #f9fafb;
16
- --db-bg-user-msg: #e0e7ff;
17
- --db-bg-bot-msg: #f3f4f6;
13
+ /* Backgrounds */
14
+ --db-bg-color: #ffffff;
15
+ --db-bg-chat-input: #f9fafb;
16
+ --db-bg-user-msg: #e0e7ff;
17
+ --db-bg-bot-msg: #f3f4f6;
18
18
 
19
- /* Text Colors */
20
- --db-text-primary: #1f2937;
21
- --db-text-secondary: #9ca3af;
22
- --db-text-tertiary: #1f2937;
23
- --db-text-hint: #9ca3af;
24
- --db-text-user-msg: #111827;
25
- --db-text-bot-msg: #111827;
19
+ /* Text Colors */
20
+ --db-text-primary: #1f2937;
21
+ --db-text-secondary: #9ca3af;
22
+ --db-text-tertiary: #1f2937;
23
+ --db-text-hint: #9ca3af;
24
+ --db-text-user-msg: #111827;
25
+ --db-text-bot-msg: #111827;
26
26
 
27
- /* UI Elements */
28
- --db-border-color: #cbd5e1;
29
- --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
30
- --db-border-top: #ffffff00;
31
-
32
- /* Interaction */
33
- --db-color-button: var(--db-primary);
34
- --db-color-typing: #cbd5e1;
27
+ /* UI Elements */
28
+ --db-border-color: #cbd5e1;
29
+ --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
30
+ --db-border-top: #ffffff00;
35
31
 
36
- /* Colors */
37
- --db-white-rgb: 255, 255, 255;
38
- --db-black-rgb: 0, 0, 0;
32
+ /* Interaction */
33
+ --db-color-button: var(--db-primary);
34
+ --db-color-typing: #cbd5e1;
39
35
 
40
- /* Media/Filters */
41
- --db-avatar-filter: none;
36
+ /* Colors */
37
+ --white-rgb: 255, 255, 255;
38
+ --black-rgb: 0, 0, 0;
39
+ --white: #ffffff;
40
+ --black: #000000;
41
+ --grey: #6b7280;
42
+ --red: #fe0000;
43
+ --green: #00ce4b;
44
+ --orange: #ff6a00;
45
+ --blue: #0062ff;
46
+
47
+ /* Media/Filters */
48
+ --db-avatar-filter: none;
42
49
  }
43
50
 
44
51
  /*
@@ -48,41 +55,48 @@
48
55
  .dark-theme .db-theme-aqua,
49
56
  .dark-theme.cdk-overlay-container .db-theme-aqua,
50
57
  .dark-theme .cdk-overlay-container .db-theme-aqua {
51
- /* Fonts */
52
- --db-font: 'Roboto', Arial, sans-serif;
58
+ /* Fonts */
59
+ --db-font: 'Roboto', Arial, sans-serif;
53
60
 
54
- /* Brand Colors */
55
- --db-primary: #74c2bb;
56
- --db-primary-rgb: 116, 194, 187;
57
- --db-secondary: #96f6ee;
61
+ /* Brand Colors */
62
+ --db-primary: #74c2bb;
63
+ --db-primary-rgb: 116, 194, 187;
64
+ --db-secondary: #96f6ee;
58
65
 
59
- /* Backgrounds */
60
- --db-bg-app: #151521;
61
- --db-bg-chat-input: #1e293b;
62
- --db-bg-user-msg: #1e293b;
63
- --db-bg-bot-msg: #1e293b;
66
+ /* Backgrounds */
67
+ --db-bg-color: #151521;
68
+ --db-bg-chat-input: #1e293b;
69
+ --db-bg-user-msg: #1e293b;
70
+ --db-bg-bot-msg: #1e293b;
64
71
 
65
- /* Text Colors */
66
- --db-text-primary: #f8fafc;
67
- --db-text-secondary: #94a3b8;
68
- --db-text-tertiary: #1f2937;
69
- --db-text-hint: #64748b;
70
- --db-text-user-msg: #f8fafc;
71
- --db-text-bot-msg: #f8fafc;
72
+ /* Text Colors */
73
+ --db-text-primary: #f8fafc;
74
+ --db-text-secondary: #94a3b8;
75
+ --db-text-tertiary: #e5e7eb;
76
+ --db-text-hint: #64748b;
77
+ --db-text-user-msg: #f8fafc;
78
+ --db-text-bot-msg: #f8fafc;
72
79
 
73
- /* UI Elements */
74
- --db-border-color: #334155;
75
- --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
76
- --db-border-top: #ffffff00;
80
+ /* UI Elements */
81
+ --db-border-color: #334155;
82
+ --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
83
+ --db-border-top: #ffffff00;
77
84
 
78
- /* Interaction */
79
- --db-color-button: var(--db-primary);
80
- --db-color-typing: #334155;
85
+ /* Interaction */
86
+ --db-color-button: var(--db-primary);
87
+ --db-color-typing: #334155;
81
88
 
82
- /* Colors */
83
- --db-white-rgb: 0, 0, 0;
84
- --db-black-rgb: 255, 255, 255;
89
+ /* Colors */
90
+ --white-rgb: 0, 0, 0;
91
+ --black-rgb: 255, 255, 255;
92
+ --white: #000000;
93
+ --black: #ffffff;
94
+ --grey: #9ca3af;
95
+ --red: #ff6b6b;
96
+ --green: #34d399;
97
+ --orange: #fb923c;
98
+ --blue: #60a5fa;
85
99
 
86
- /* Media/Filters */
87
- --db-avatar-filter: brightness(1.2) contrast(1.1);
88
- }
100
+ /* Media/Filters */
101
+ --db-avatar-filter: brightness(1.2) contrast(1.1);
102
+ }
package/src/lib/theme/palettes/candy.scss CHANGED
@@ -2,43 +2,50 @@
2
2
  Candy Palette (Light Mode)
3
3
  */
4
4
  .db-theme-candy {
5
- /* Fonts */
6
- --db-font: 'Roboto', Arial, sans-serif;
5
+ /* Fonts */
6
+ --db-font: 'Roboto', Arial, sans-serif;
7
7
 
8
- /* Brand Colors */
9
- --db-primary: #e91e63;
10
- --db-primary-rgb: 233, 30, 99;
11
- --db-secondary: #ffeb3b;
8
+ /* Brand Colors */
9
+ --db-primary: #e91e63;
10
+ --db-primary-rgb: 233, 30, 99;
11
+ --db-secondary: #ffeb3b;
12
12
 
13
- /* Backgrounds */
14
- --db-bg-app: #ffffff;
15
- --db-bg-chat-input: #ffffff;
16
- --db-bg-user-msg: #f8bbd0;
17
- --db-bg-bot-msg: #f8bbd0;
13
+ /* Backgrounds */
14
+ --db-bg-color: #ffffff;
15
+ --db-bg-chat-input: #ffffff;
16
+ --db-bg-user-msg: #f8bbd0;
17
+ --db-bg-bot-msg: #f8bbd0;
18
18
 
19
- /* Text Colors */
20
- --db-text-primary: #4a148c;
21
- --db-text-secondary: #ad1457;
22
- --db-text-tertiary: #4a148c;
23
- --db-text-hint: #c2185b;
24
- --db-text-user-msg: #4a148c;
25
- --db-text-bot-msg: #4a148c;
19
+ /* Text Colors */
20
+ --db-text-primary: #4a148c;
21
+ --db-text-secondary: #ad1457;
22
+ --db-text-tertiary: #4a148c;
23
+ --db-text-hint: #c2185b;
24
+ --db-text-user-msg: #4a148c;
25
+ --db-text-bot-msg: #4a148c;
26
26
 
27
- /* UI Elements */
28
- --db-border-color: #f8bbd0;
29
- --db-border-shadow: 0 4px 12px rgba(233, 30, 99, .2);
30
- --db-border-top: #ffffff00;
27
+ /* UI Elements */
28
+ --db-border-color: #f8bbd0;
29
+ --db-border-shadow: 0 4px 12px rgba(233, 30, 99, 0.2);
30
+ --db-border-top: #ffffff00;
31
31
 
32
- /* Interaction */
33
- --db-color-button: var(--db-primary);
34
- --db-color-typing: #f8bbd0;
32
+ /* Interaction */
33
+ --db-color-button: var(--db-primary);
34
+ --db-color-typing: #f8bbd0;
35
35
 
36
- /* Colors */
37
- --db-white-rgb: 255, 255, 255;
38
- --db-black-rgb: 0, 0, 0;
36
+ /* Colors */
37
+ --white-rgb: 255, 255, 255;
38
+ --black-rgb: 0, 0, 0;
39
+ --white: #ffffff;
40
+ --black: #000000;
41
+ --grey: #6b7280;
42
+ --red: #fe0000;
43
+ --green: #00ce4b;
44
+ --orange: #ff6a00;
45
+ --blue: #0062ff;
39
46
 
40
- /* Media/Filters */
41
- --db-avatar-filter: none;
47
+ /* Media/Filters */
48
+ --db-avatar-filter: none;
42
49
  }
43
50
 
44
51
  /*
@@ -48,41 +55,48 @@ Candy Palette (Light Mode)
48
55
  .dark-theme .db-theme-candy,
49
56
  .dark-theme.cdk-overlay-container .db-theme-candy,
50
57
  .dark-theme .cdk-overlay-container .db-theme-candy {
51
- /* Fonts */
52
- --db-font: 'Roboto', Arial, sans-serif;
58
+ /* Fonts */
59
+ --db-font: 'Roboto', Arial, sans-serif;
53
60
 
54
- /* Brand Colors */
55
- --db-primary: #f06292;
56
- --db-primary-rgb: 240, 98, 146;
57
- --db-secondary: #ffeb3b;
61
+ /* Brand Colors */
62
+ --db-primary: #f06292;
63
+ --db-primary-rgb: 240, 98, 146;
64
+ --db-secondary: #ffeb3b;
58
65
 
59
- /* Backgrounds */
60
- --db-bg-app: #2a0f1c;
61
- --db-bg-chat-input: #3b102a;
62
- --db-bg-user-msg: #f06292;
63
- --db-bg-bot-msg: #5a1a3d;
66
+ /* Backgrounds */
67
+ --db-bg-color: #2a0f1c;
68
+ --db-bg-chat-input: #3b102a;
69
+ --db-bg-user-msg: #f06292;
70
+ --db-bg-bot-msg: #5a1a3d;
64
71
 
65
- /* Text Colors */
66
- --db-text-primary: #fff0f6;
67
- --db-text-secondary: #f8bbd0;
68
- --db-text-tertiary: ##fff0f6;
69
- --db-text-hint: #f48fb1;
70
- --db-text-user-msg: #fff0f6;
71
- --db-text-bot-msg: #fff0f6;
72
+ /* Text Colors */
73
+ --db-text-primary: #fff0f6;
74
+ --db-text-secondary: #f8bbd0;
75
+ --db-text-tertiary: ##fff0f6;
76
+ --db-text-hint: #f48fb1;
77
+ --db-text-user-msg: #fff0f6;
78
+ --db-text-bot-msg: #fff0f6;
72
79
 
73
- /* UI Elements */
74
- --db-border-color: #5a1a3d;
75
- --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
76
- --db-border-top: #ffffff00;
80
+ /* UI Elements */
81
+ --db-border-color: #5a1a3d;
82
+ --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
83
+ --db-border-top: #ffffff00;
77
84
 
78
- /* Interaction */
79
- --db-color-button: var(--db-primary);
80
- --db-color-typing: #5a1a3d;
85
+ /* Interaction */
86
+ --db-color-button: var(--db-primary);
87
+ --db-color-typing: #5a1a3d;
81
88
 
82
- /* Colors */
83
- --db-white-rgb: 0, 0, 0;
84
- --db-black-rgb: 255, 255, 255;
89
+ /* Colors */
90
+ --white-rgb: 0, 0, 0;
91
+ --black-rgb: 255, 255, 255;
92
+ --white: #000000;
93
+ --black: #ffffff;
94
+ --grey: #9ca3af;
95
+ --red: #ff6b6b;
96
+ --green: #34d399;
97
+ --orange: #fb923c;
98
+ --blue: #60a5fa;
85
99
 
86
- /* Media/Filters */
87
- --db-avatar-filter: brightness(1.15);
88
- }
100
+ /* Media/Filters */
101
+ --db-avatar-filter: brightness(1.15);
102
+ }
package/src/lib/theme/palettes/doohbot.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --db-secondary: #6366f1;
12
12
 
13
13
  /* Backgrounds */
14
- --db-bg-app: #ffffff;
14
+ --db-bg-color: #ffffff;
15
15
  --db-bg-chat-input: #f9fafb;
16
16
  --db-bg-user-msg: #f3f4f6;
17
17
  --db-bg-bot-msg: #f3f4f6;
@@ -34,8 +34,15 @@
34
34
  --db-color-typing: #cbd5e1;
35
35
 
36
36
  /* Colors */
37
- --db-white-rgb: 255, 255, 255;
38
- --db-black-rgb: 0, 0, 0;
37
+ --white-rgb: 255, 255, 255;
38
+ --black-rgb: 0, 0, 0;
39
+ --white: #ffffff;
40
+ --black: #000000;
41
+ --grey: #6b7280;
42
+ --red: #fe0000;
43
+ --green: #00ce4b;
44
+ --orange: #ff6a00;
45
+ --blue: #0062ff;
39
46
 
40
47
  /* Media/Filters */
41
48
  --db-avatar-filter: none;
@@ -57,7 +64,7 @@
57
64
  --db-secondary: #6366f1;
58
65
 
59
66
  /* Backgrounds */
60
- --db-bg-app: #161616;
67
+ --db-bg-color: #161616;
61
68
  --db-bg-chat-input: #1f2937;
62
69
  --db-bg-user-msg: #374151;
63
70
  --db-bg-bot-msg: #374151;
@@ -65,7 +72,7 @@
65
72
  /* Text Colors */
66
73
  --db-text-primary: #f9fafb;
67
74
  --db-text-secondary: #9ca3af;
68
- --db-text-tertiary: #1f2937;
75
+ --db-text-tertiary: #e5e7eb;
69
76
  --db-text-hint: #6b7280;
70
77
  --db-text-user-msg: #f9fafb;
71
78
  --db-text-bot-msg: #f9fafb;
@@ -80,8 +87,15 @@
80
87
  --db-color-typing: #505050;
81
88
 
82
89
  /* Colors */
83
- --db-white-rgb: 0, 0, 0;
84
- --db-black-rgb: 255, 255, 255;
90
+ --white-rgb: 0, 0, 0;
91
+ --black-rgb: 255, 255, 255;
92
+ --white: #000000;
93
+ --black: #ffffff;
94
+ --grey: #9ca3af;
95
+ --red: #ff6b6b;
96
+ --green: #34d399;
97
+ --orange: #fb923c;
98
+ --blue: #60a5fa;
85
99
 
86
100
  /* Media/Filters */
87
101
  --db-avatar-filter: brightness(1.2) contrast(1.1);
package/src/lib/theme/palettes/forest.scss CHANGED
@@ -2,43 +2,50 @@
2
2
  Forest Palette (Light Mode)
3
3
  */
4
4
  .db-theme-forest {
5
- /* Fonts */
6
- --db-font: 'Roboto', Arial, sans-serif;
5
+ /* Fonts */
6
+ --db-font: 'Roboto', Arial, sans-serif;
7
7
 
8
- /* Brand Colors */
9
- --db-primary: #2e7d32;
10
- --db-primary-rgb: 46, 125, 50;
11
- --db-secondary: #8bc34a;
8
+ /* Brand Colors */
9
+ --db-primary: #2e7d32;
10
+ --db-primary-rgb: 46, 125, 50;
11
+ --db-secondary: #8bc34a;
12
12
 
13
- /* Backgrounds */
14
- --db-bg-app: #ffffff;
15
- --db-bg-chat-input: #ffffff;
16
- --db-bg-user-msg: #dcedc8;
17
- --db-bg-bot-msg: #dcedc8;
13
+ /* Backgrounds */
14
+ --db-bg-color: #ffffff;
15
+ --db-bg-chat-input: #ffffff;
16
+ --db-bg-user-msg: #dcedc8;
17
+ --db-bg-bot-msg: #dcedc8;
18
18
 
19
- /* Text Colors */
20
- --db-text-primary: #1b5e20;
21
- --db-text-secondary: #558b2f;
22
- --db-text-tertiary: #1b5e20;
23
- --db-text-hint: #7cb342;
24
- --db-text-user-msg: #1b5e20;
25
- --db-text-bot-msg: #1b5e20;
19
+ /* Text Colors */
20
+ --db-text-primary: #1b5e20;
21
+ --db-text-secondary: #558b2f;
22
+ --db-text-tertiary: #1b5e20;
23
+ --db-text-hint: #7cb342;
24
+ --db-text-user-msg: #1b5e20;
25
+ --db-text-bot-msg: #1b5e20;
26
26
 
27
- /* UI Elements */
28
- --db-border-color: #c8e6c9;
29
- --db-border-shadow: 0 4px 12px rgba(27, 94, 32, .12);
30
- --db-border-top: #ffffff00;
27
+ /* UI Elements */
28
+ --db-border-color: #c8e6c9;
29
+ --db-border-shadow: 0 4px 12px rgba(27, 94, 32, 0.12);
30
+ --db-border-top: #ffffff00;
31
31
 
32
- /* Interaction */
33
- --db-color-button: var(--db-primary);
34
- --db-color-typing: #c8e6c9;
32
+ /* Interaction */
33
+ --db-color-button: var(--db-primary);
34
+ --db-color-typing: #c8e6c9;
35
35
 
36
- /* Colors */
37
- --db-white-rgb: 255, 255, 255;
38
- --db-black-rgb: 0, 0, 0;
36
+ /* Colors */
37
+ --white-rgb: 255, 255, 255;
38
+ --black-rgb: 0, 0, 0;
39
+ --white: #ffffff;
40
+ --black: #000000;
41
+ --grey: #6b7280;
42
+ --red: #fe0000;
43
+ --green: #00ce4b;
44
+ --orange: #ff6a00;
45
+ --blue: #0062ff;
39
46
 
40
- /* Media/Filters */
41
- --db-avatar-filter: none;
47
+ /* Media/Filters */
48
+ --db-avatar-filter: none;
42
49
  }
43
50
 
44
51
  /*
@@ -48,41 +55,48 @@ Forest Palette (Dark Mode)
48
55
  .dark-theme .db-theme-forest,
49
56
  .dark-theme.cdk-overlay-container .db-theme-forest,
50
57
  .dark-theme .cdk-overlay-container .db-theme-forest {
51
- /* Fonts */
52
- --db-font: 'Roboto', Arial, sans-serif;
58
+ /* Fonts */
59
+ --db-font: 'Roboto', Arial, sans-serif;
53
60
 
54
- /* Brand Colors */
55
- --db-primary: #66bb6a;
56
- --db-primary-rgb: 102, 187, 106;
57
- --db-secondary: #8bc34a;
61
+ /* Brand Colors */
62
+ --db-primary: #66bb6a;
63
+ --db-primary-rgb: 102, 187, 106;
64
+ --db-secondary: #8bc34a;
58
65
 
59
- /* Backgrounds */
60
- --db-bg-app: #102017;
61
- --db-bg-chat-input: #1b2f23;
62
- --db-bg-user-msg: #2e4d3a;
63
- --db-bg-bot-msg: #2e4d3a;
66
+ /* Backgrounds */
67
+ --db-bg-color: #102017;
68
+ --db-bg-chat-input: #1b2f23;
69
+ --db-bg-user-msg: #2e4d3a;
70
+ --db-bg-bot-msg: #2e4d3a;
64
71
 
65
- /* Text Colors */
66
- --db-text-primary: #e8f5e9;
67
- --db-text-secondary: #a5d6a7;
68
- --db-text-tertiary: #e8f5e9;
69
- --db-text-hint: #81c784;
70
- --db-text-user-msg: #e8f5e9;
71
- --db-text-bot-msg: #e8f5e9;
72
+ /* Text Colors */
73
+ --db-text-primary: #e8f5e9;
74
+ --db-text-secondary: #a5d6a7;
75
+ --db-text-tertiary: #e8f5e9;
76
+ --db-text-hint: #81c784;
77
+ --db-text-user-msg: #e8f5e9;
78
+ --db-text-bot-msg: #e8f5e9;
72
79
 
73
- /* UI Elements */
74
- --db-border-color: #2e4d3a;
75
- --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
76
- --db-border-top: #ffffff00;
80
+ /* UI Elements */
81
+ --db-border-color: #2e4d3a;
82
+ --db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
83
+ --db-border-top: #ffffff00;
77
84
 
78
- /* Interaction */
79
- --db-color-button: var(--db-primary);
80
- --db-color-typing: #2e4d3a;
85
+ /* Interaction */
86
+ --db-color-button: var(--db-primary);
87
+ --db-color-typing: #2e4d3a;
81
88
 
82
- /* Colors */
83
- --db-white-rgb: 0, 0, 0;
84
- --db-black-rgb: 255, 255, 255;
89
+ /* Colors */
90
+ --white-rgb: 0, 0, 0;
91
+ --black-rgb: 255, 255, 255;
92
+ --white: #000000;
93
+ --black: #ffffff;
94
+ --grey: #9ca3af;
95
+ --red: #ff6b6b;
96
+ --green: #34d399;
97
+ --orange: #fb923c;
98
+ --blue: #60a5fa;
85
99
 
86
- /* Media/Filters */
87
- --db-avatar-filter: brightness(1.1);
88
- }
100
+ /* Media/Filters */
101
+ --db-avatar-filter: brightness(1.1);
102
+ }