@adzen/doohbot 1.0.5 → 1.0.7
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.
- package/fesm2022/adzen-doohbot.mjs +1574 -1193
- package/fesm2022/adzen-doohbot.mjs.map +1 -1
- package/index.d.ts +100 -109
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/app/chat/components/chat-button/chat-button.component.scss +43 -9
- package/src/lib/app/chat/components/chat-footer/chat-footer.component.scss +3 -3
- package/src/lib/app/chat/components/chat-header/chat-header.component.scss +29 -11
- package/src/lib/app/chat/components/{chat-history-sidebar/chat-history-sidebar.component.scss → chat-history/chat-history.component.scss} +46 -34
- package/src/lib/app/chat/components/chat-input/chat-input.component.scss +44 -21
- package/src/lib/app/chat/components/chat-message/chat-message.component.scss +178 -178
- package/src/lib/app/chat/components/chat-message-container/chat-message-container.component.scss +55 -24
- package/src/lib/app/chat/components/chat-window/chat-window.component.scss +282 -21
- package/src/lib/app/login/login-form.component.scss +24 -24
- package/src/lib/app/personalization/personalization-dialog.component.scss +17 -17
- package/src/lib/app/personalization/sections/account/account-section.component.scss +167 -166
- package/src/lib/app/personalization/sections/instruction/instruction-section.component.scss +47 -46
- package/src/lib/app/personalization/sections/preferences/preferences-section.component.scss +172 -170
- package/src/lib/app/personalization/sections/terms/terms-section.component.scss +58 -57
- package/src/lib/doohbot.component.scss +6 -12
- package/src/lib/shared/chips/chips.component.scss +8 -8
- package/src/lib/shared/confirmation-dialog/confirmation-dialog.component.scss +24 -0
- package/src/lib/shared/dropdown-menu/dropdown-menu.component.scss +5 -5
- package/src/lib/shared/input-dialog/input-dialog.component.scss +8 -8
- package/src/lib/shared/notification-banner/notification-banner.component.scss +342 -0
- package/src/lib/shared/snackbar/snackbar.component.scss +3 -3
- package/src/lib/styles/_theme.scss +101 -45
- package/src/lib/styles/material-override.scss +36 -26
- package/src/lib/styles/utility.scss +64 -12
- package/src/lib/theme/index.scss +7 -7
- package/src/lib/theme/palettes/aqua.scss +76 -62
- package/src/lib/theme/palettes/candy.scss +75 -61
- package/src/lib/theme/palettes/doohbot.scss +21 -7
- package/src/lib/theme/palettes/forest.scss +75 -61
- package/src/lib/theme/palettes/midnight.scss +75 -61
- package/src/lib/theme/palettes/slate.scss +75 -61
- package/src/lib/theme/palettes/sunset.scss +75 -61
- package/src/lib/shared/dialog/dialog.component.scss +0 -90
- package/src/lib/shared/menu-item/menu-item.component.scss +0 -0
- package/src/lib/theme/themes.scss +0 -7
- package/src/lib/theme/tokens/semantic.scss +0 -102
|
@@ -2,43 +2,50 @@
|
|
|
2
2
|
Midnight Palette (Light Mode)
|
|
3
3
|
*/
|
|
4
4
|
.db-theme-midnight {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
/* Fonts */
|
|
6
|
+
--db-font: 'Roboto', Arial, sans-serif;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
/* Brand Colors */
|
|
9
|
+
--db-primary: #6366f1;
|
|
10
|
+
--db-primary-rgb: 99, 102, 241;
|
|
11
|
+
--db-secondary: #1e88e5;
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
/* Backgrounds */
|
|
14
|
+
--db-bg-color: #0f172a;
|
|
15
|
+
--db-bg-chat-input: #1f2937;
|
|
16
|
+
--db-bg-user-msg: #1e293b;
|
|
17
|
+
--db-bg-bot-msg: #1e293b;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
/* Text Colors */
|
|
20
|
+
--db-text-primary: #f8fafc;
|
|
21
|
+
--db-text-secondary: #9ca3af;
|
|
22
|
+
--db-text-tertiary: #f8fafc;
|
|
23
|
+
--db-text-hint: #6b7280;
|
|
24
|
+
--db-text-user-msg: #f8fafc;
|
|
25
|
+
--db-text-bot-msg: #f8fafc;
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
/* UI Elements */
|
|
28
|
+
--db-border-color: #334155;
|
|
29
|
+
--db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
|
|
30
|
+
--db-border-top: #ffffff00;
|
|
31
31
|
|
|
32
32
|
/* Interaction */
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
--db-color-button: var(--db-primary);
|
|
34
|
+
--db-color-typing: #334155;
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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: brightness(1.15) contrast(1.05);
|
|
42
49
|
}
|
|
43
50
|
|
|
44
51
|
/*
|
|
@@ -48,41 +55,48 @@
|
|
|
48
55
|
.dark-theme .db-theme-midnight,
|
|
49
56
|
.dark-theme.cdk-overlay-container .db-theme-midnight,
|
|
50
57
|
.dark-theme .cdk-overlay-container .db-theme-midnight {
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
/* Fonts */
|
|
59
|
+
--db-font: 'Roboto', Arial, sans-serif;
|
|
53
60
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
61
|
+
/* Brand Colors */
|
|
62
|
+
--db-primary: #818cf8;
|
|
63
|
+
--db-primary-rgb: 129, 140, 248;
|
|
64
|
+
--db-secondary: #60a5fa;
|
|
58
65
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
66
|
+
/* Backgrounds */
|
|
67
|
+
--db-bg-color: #020617;
|
|
68
|
+
--db-bg-chat-input: #0f172a;
|
|
69
|
+
--db-bg-user-msg: #1e293b;
|
|
70
|
+
--db-bg-bot-msg: #1e293b;
|
|
64
71
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
/* Text Colors */
|
|
73
|
+
--db-text-primary: #f9fafb;
|
|
74
|
+
--db-text-secondary: #cbd5f5;
|
|
75
|
+
--db-text-tertiary: #f9fafb;
|
|
76
|
+
--db-text-hint: #94a3b8;
|
|
77
|
+
--db-text-user-msg: #f9fafb;
|
|
78
|
+
--db-text-bot-msg: #f9fafb;
|
|
72
79
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
/* UI Elements */
|
|
81
|
+
--db-border-color: #1e293b;
|
|
82
|
+
--db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
83
|
+
--db-border-top: #ffffff00;
|
|
77
84
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
85
|
+
/* Interaction */
|
|
86
|
+
--db-color-button: var(--db-primary);
|
|
87
|
+
--db-color-typing: #1e293b;
|
|
81
88
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
100
|
+
/* Media/Filters */
|
|
101
|
+
--db-avatar-filter: brightness(1.25) contrast(1.1);
|
|
102
|
+
}
|
|
@@ -2,43 +2,50 @@
|
|
|
2
2
|
Slate Palette (Light Mode)
|
|
3
3
|
*/
|
|
4
4
|
.db-theme-slate {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
/* Fonts */
|
|
6
|
+
--db-font: 'Roboto', Arial, sans-serif;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
/* Brand Colors */
|
|
9
|
+
--db-primary: #455a64;
|
|
10
|
+
--db-primary-rgb: 69, 90, 100;
|
|
11
|
+
--db-secondary: #90a4ae;
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
/* Backgrounds */
|
|
14
|
+
--db-bg-color: #ffffff;
|
|
15
|
+
--db-bg-chat-input: #ffffff;
|
|
16
|
+
--db-bg-user-msg: #e2e8f0;
|
|
17
|
+
--db-bg-bot-msg: #e2e8f0;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
/* Text Colors */
|
|
20
|
+
--db-text-primary: #263238;
|
|
21
|
+
--db-text-secondary: #607d8b;
|
|
22
|
+
--db-text-tertiary: #263238;
|
|
23
|
+
--db-text-hint: #90a4ae;
|
|
24
|
+
--db-text-user-msg: #263238;
|
|
25
|
+
--db-text-bot-msg: #263238;
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
/* UI Elements */
|
|
28
|
+
--db-border-color: #cfd8dc;
|
|
29
|
+
--db-border-shadow: 0 4px 12px rgba(38, 50, 56, 0.12);
|
|
30
|
+
--db-border-top: #ffffff00;
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
/* Interaction */
|
|
33
|
+
--db-color-button: var(--db-primary);
|
|
34
|
+
--db-color-typing: #cfd8dc;
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
41
|
-
|
|
47
|
+
/* Media/Filters */
|
|
48
|
+
--db-avatar-filter: none;
|
|
42
49
|
}
|
|
43
50
|
|
|
44
51
|
/*
|
|
@@ -48,41 +55,48 @@ Slate Palette (Dark Mode)
|
|
|
48
55
|
.dark-theme .db-theme-slate,
|
|
49
56
|
.dark-theme.cdk-overlay-container .db-theme-slate,
|
|
50
57
|
.dark-theme .cdk-overlay-container .db-theme-slate {
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
/* Fonts */
|
|
59
|
+
--db-font: 'Roboto', Arial, sans-serif;
|
|
53
60
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
61
|
+
/* Brand Colors */
|
|
62
|
+
--db-primary: #90a4ae;
|
|
63
|
+
--db-primary-rgb: 144, 164, 174;
|
|
64
|
+
--db-secondary: #90a4ae;
|
|
58
65
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
66
|
+
/* Backgrounds */
|
|
67
|
+
--db-bg-color: #12181b;
|
|
68
|
+
--db-bg-chat-input: #1e272c;
|
|
69
|
+
--db-bg-user-msg: #2f3e46;
|
|
70
|
+
--db-bg-bot-msg: #2f3e46;
|
|
64
71
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
/* Text Colors */
|
|
73
|
+
--db-text-primary: #eceff1;
|
|
74
|
+
--db-text-secondary: #b0bec5;
|
|
75
|
+
--db-text-tertiary: #eceff1;
|
|
76
|
+
--db-text-hint: #78909c;
|
|
77
|
+
--db-text-user-msg: #eceff1;
|
|
78
|
+
--db-text-bot-msg: #eceff1;
|
|
72
79
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
/* UI Elements */
|
|
81
|
+
--db-border-color: #2f3e46;
|
|
82
|
+
--db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
83
|
+
--db-border-top: #ffffff00;
|
|
77
84
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
85
|
+
/* Interaction */
|
|
86
|
+
--db-color-button: var(--db-primary);
|
|
87
|
+
--db-color-typing: #2f3e46;
|
|
81
88
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
100
|
+
/* Media/Filters */
|
|
101
|
+
--db-avatar-filter: brightness(1.1);
|
|
102
|
+
}
|
|
@@ -2,43 +2,50 @@
|
|
|
2
2
|
Sunset Palette (Light Mode)
|
|
3
3
|
*/
|
|
4
4
|
.db-theme-sunset {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
/* Fonts */
|
|
6
|
+
--db-font: 'Roboto', Arial, sans-serif;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
/* Brand Colors */
|
|
9
|
+
--db-primary: #ff7043;
|
|
10
|
+
--db-primary-rgb: 255, 112, 67;
|
|
11
|
+
--db-secondary: #ffb74d;
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
/* Backgrounds */
|
|
14
|
+
--db-bg-color: #ffffff;
|
|
15
|
+
--db-bg-chat-input: #ffffff;
|
|
16
|
+
--db-bg-user-msg: #ffe0b2;
|
|
17
|
+
--db-bg-bot-msg: #ffe0b2;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
/* Text Colors */
|
|
20
|
+
--db-text-primary: #4e342e;
|
|
21
|
+
--db-text-secondary: #8d6e63;
|
|
22
|
+
--db-text-tertiary: #4e342e;
|
|
23
|
+
--db-text-hint: #a1887f;
|
|
24
|
+
--db-text-user-msg: #4e342e;
|
|
25
|
+
--db-text-bot-msg: #4e342e;
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
/* Interaction */
|
|
33
|
-
--db-color-button: var(--db-primary);
|
|
34
|
-
--db-color-typing: #ffccbc;
|
|
27
|
+
/* UI Elements */
|
|
28
|
+
--db-border-color: #ffccbc;
|
|
29
|
+
--db-border-shadow: 0 4px 12px rgba(78, 52, 46, 0.12);
|
|
30
|
+
--db-border-top: #ffffff00;
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
32
|
+
/* Interaction */
|
|
33
|
+
--db-color-button: var(--db-primary);
|
|
34
|
+
--db-color-typing: #ffccbc;
|
|
39
35
|
|
|
40
|
-
|
|
41
|
-
|
|
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,39 +55,46 @@ Sunset Palette (Dark Mode)
|
|
|
48
55
|
.dark-theme .db-theme-sunset,
|
|
49
56
|
.dark-theme.cdk-overlay-container .db-theme-sunset,
|
|
50
57
|
.dark-theme .cdk-overlay-container .db-theme-sunset {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
58
|
+
/* Brand Colors */
|
|
59
|
+
--db-primary: #ff8a65;
|
|
60
|
+
--db-primary-rgb: 255, 138, 101;
|
|
61
|
+
--db-secondary: #ffb74d;
|
|
55
62
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
63
|
+
/* Backgrounds */
|
|
64
|
+
--db-bg-color: #2b1b16;
|
|
65
|
+
--db-bg-chat-input: #3e2723;
|
|
66
|
+
--db-bg-user-msg: #4e342e;
|
|
67
|
+
--db-bg-bot-msg: #4e342e;
|
|
61
68
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
/* Text Colors */
|
|
70
|
+
--db-text-primary: #fff3e0;
|
|
71
|
+
--db-text-secondary: #ffccbc;
|
|
72
|
+
--db-text-tertiary: #fff3e0;
|
|
73
|
+
--db-text-hint: #d7ccc8;
|
|
74
|
+
--db-text-user-msg: #fff3e0;
|
|
75
|
+
--db-text-bot-msg: #fff3e0;
|
|
69
76
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
77
|
+
/* UI Elements */
|
|
78
|
+
--db-border-color: #5d4037;
|
|
79
|
+
--db-border-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
80
|
+
--db-border-top: #3e2723;
|
|
81
|
+
--db-border-top: #ffffff00;
|
|
75
82
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
83
|
+
/* Interaction */
|
|
84
|
+
--db-color-button: var(--db-primary);
|
|
85
|
+
--db-color-typing: #5d4037;
|
|
79
86
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
87
|
+
/* Colors */
|
|
88
|
+
--white-rgb: 0, 0, 0;
|
|
89
|
+
--black-rgb: 255, 255, 255;
|
|
90
|
+
--white: #000000;
|
|
91
|
+
--black: #ffffff;
|
|
92
|
+
--grey: #9ca3af;
|
|
93
|
+
--red: #ff6b6b;
|
|
94
|
+
--green: #34d399;
|
|
95
|
+
--orange: #fb923c;
|
|
96
|
+
--blue: #60a5fa;
|
|
83
97
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
98
|
+
/* Media/Filters */
|
|
99
|
+
--db-avatar-filter: brightness(1.1);
|
|
100
|
+
}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
.dialog-container {
|
|
2
|
-
padding: 0;
|
|
3
|
-
min-width: 320px;
|
|
4
|
-
max-width: 500px;
|
|
5
|
-
|
|
6
|
-
.dialog-header {
|
|
7
|
-
display: flex;
|
|
8
|
-
align-items: center;
|
|
9
|
-
gap: 12px;
|
|
10
|
-
padding: 24px 24px 16px;
|
|
11
|
-
margin-bottom: 0;
|
|
12
|
-
|
|
13
|
-
.dialog-icon {
|
|
14
|
-
font-size: 32px;
|
|
15
|
-
width: 32px;
|
|
16
|
-
height: 32px;
|
|
17
|
-
color: var(--primary-color);
|
|
18
|
-
|
|
19
|
-
&.warn-icon {
|
|
20
|
-
color: var(--red);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
h2 {
|
|
25
|
-
margin: 0;
|
|
26
|
-
font-size: 20px;
|
|
27
|
-
font-weight: 600;
|
|
28
|
-
color: var(--secondary-text-color);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
mat-dialog-content {
|
|
33
|
-
padding: 0 24px 24px;
|
|
34
|
-
margin: 0;
|
|
35
|
-
|
|
36
|
-
.dialog-message {
|
|
37
|
-
margin: 0;
|
|
38
|
-
font-size: 14px;
|
|
39
|
-
line-height: 1.6;
|
|
40
|
-
color: var(--text-color);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
mat-dialog-actions {
|
|
45
|
-
padding: 12px 24px 24px;
|
|
46
|
-
margin: 0;
|
|
47
|
-
gap: 12px;
|
|
48
|
-
|
|
49
|
-
.cancel-btn {
|
|
50
|
-
color: var(--secondary-text-color, var(--grey));
|
|
51
|
-
transition: all 0.2s ease;
|
|
52
|
-
|
|
53
|
-
&:hover {
|
|
54
|
-
background-color: var(--hover-bg);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.confirm-btn {
|
|
59
|
-
font-weight: 500;
|
|
60
|
-
transition: all 0.2s ease;
|
|
61
|
-
|
|
62
|
-
&.warn-btn {
|
|
63
|
-
background-color: var(--red);
|
|
64
|
-
color: var(--white);
|
|
65
|
-
|
|
66
|
-
&:hover {
|
|
67
|
-
background-color: var(--red);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&.primary-btn {
|
|
72
|
-
background-color: var(--primary-color);
|
|
73
|
-
color: var(--white);
|
|
74
|
-
|
|
75
|
-
&:hover {
|
|
76
|
-
background-color: var(--primary-color);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&.accent-btn {
|
|
81
|
-
background-color: var(--light-red);
|
|
82
|
-
color: var(--white);
|
|
83
|
-
|
|
84
|
-
&:hover {
|
|
85
|
-
background-color: var(--light-red);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
File without changes
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Semantic Tokens & Logic
|
|
3
|
-
Bridges palette-specific variables to functional tokens used by components.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
.db-theme-doohbot,
|
|
7
|
-
.db-theme-aqua,
|
|
8
|
-
.db-theme-candy,
|
|
9
|
-
.db-theme-forest,
|
|
10
|
-
.db-theme-midnight,
|
|
11
|
-
.db-theme-sunset,
|
|
12
|
-
.db-theme-slate,
|
|
13
|
-
app-doohbot {
|
|
14
|
-
/* Fonts */
|
|
15
|
-
--db-font: var(--db-font);
|
|
16
|
-
|
|
17
|
-
/* Brand */
|
|
18
|
-
--db-primary: var(--db-primary);
|
|
19
|
-
--db-primary-rgb: var(--db-primary-rgb);
|
|
20
|
-
--db-secondary: var(--db-secondary);
|
|
21
|
-
|
|
22
|
-
/* Backgrounds */
|
|
23
|
-
--db-bg-app: var(--db-bg-app);
|
|
24
|
-
--db-bg-chat-input: var(--db-bg-chat-input);
|
|
25
|
-
--db-bg-user-msg: var(--db-bg-user-msg);
|
|
26
|
-
--db-bg-bot-msg: var(--db-bg-bot-msg);
|
|
27
|
-
|
|
28
|
-
/* Text */
|
|
29
|
-
--db-text-primary: var(--db-text-primary);
|
|
30
|
-
--db-text-secondary: var(--db-text-secondary);
|
|
31
|
-
--db-text-tertiary: var(--db-text-tertiary);
|
|
32
|
-
--db-text-hint: var(--db-text-hint);
|
|
33
|
-
--db-text-user-msg: var(--db-text-primary);
|
|
34
|
-
--db-text-bot-msg: var(--db-text-bot-msg);
|
|
35
|
-
|
|
36
|
-
/* UI Elements */
|
|
37
|
-
--db-border-color: var(--db-border-color);
|
|
38
|
-
--db-border-shadow: var(--db-border-shadow);
|
|
39
|
-
--db-border-top: var(--db-transparent);
|
|
40
|
-
|
|
41
|
-
/* Interaction */
|
|
42
|
-
--db-button-color: var(--db-primary);
|
|
43
|
-
--db-typing-indicator-color: var(--db-color-typing);
|
|
44
|
-
|
|
45
|
-
/* Media/Filters */
|
|
46
|
-
--db-avatar-filter: var(--db-avatar-filter);
|
|
47
|
-
|
|
48
|
-
/* Colors */
|
|
49
|
-
--db-white-rgb: var(--db-white-rgb);
|
|
50
|
-
--db-black-rgb: var(--db-black-rgb);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
/* ===============================
|
|
54
|
-
Bridge to Legacy / Public Variables
|
|
55
|
-
=============================== */
|
|
56
|
-
|
|
57
|
-
/* Fonts */
|
|
58
|
-
--font-family: var(--db-font);
|
|
59
|
-
|
|
60
|
-
/* Brand */
|
|
61
|
-
--primary-color: var(--db-primary);
|
|
62
|
-
--primary-color-rgb: var(--db-primary-rgb);
|
|
63
|
-
--secondary-color: var(--db-secondary);
|
|
64
|
-
|
|
65
|
-
/* Backgrounds */
|
|
66
|
-
--background-color: var(--db-bg-app);
|
|
67
|
-
--chat-input-color: var(--db-bg-chat-input);
|
|
68
|
-
--user-message-color: var(--db-bg-user-msg);
|
|
69
|
-
--bot-message-color: var(--db-bg-bot-msg);
|
|
70
|
-
|
|
71
|
-
/* Text */
|
|
72
|
-
--text-color: var(--db-text-primary);
|
|
73
|
-
--secondary-text-color: var(--db-text-secondary);
|
|
74
|
-
--text-alt-color: var(--db-text-tertiary);
|
|
75
|
-
--hint-text-color: var(--db-text-hint);
|
|
76
|
-
--user-text-color: var(--db-text-primary);
|
|
77
|
-
--bot-text-color: var(--db-text-bot-msg);
|
|
78
|
-
|
|
79
|
-
/* UI Elements */
|
|
80
|
-
--border-color: var(--db-border-color);
|
|
81
|
-
--border-shadow-color: var(--db-border-shadow);
|
|
82
|
-
--border-top-color: var(--db-transparent);
|
|
83
|
-
|
|
84
|
-
/* Interaction */
|
|
85
|
-
--button-color: var(--db-primary);
|
|
86
|
-
--typing-indicator-color: var(--db-color-typing);
|
|
87
|
-
|
|
88
|
-
/* Media/Filters */
|
|
89
|
-
--avatar-filter: var(--db-avatar-filter, none);
|
|
90
|
-
|
|
91
|
-
/* Colors */
|
|
92
|
-
--white: var(--db-color-white, #ffffff);
|
|
93
|
-
--black: var(--db-color-black, #000000);
|
|
94
|
-
--grey: var(--db-color-grey, #6b7280);
|
|
95
|
-
--red: var(--db-color-error, #fe0000);
|
|
96
|
-
--green: var(--db-color-success, #00ce4b);
|
|
97
|
-
--orange: var(--db-color-warning, #ff6a00);
|
|
98
|
-
--blue: var(--db-color-info, #0062ff);
|
|
99
|
-
--white-rgb: var(--db-white-rgb);
|
|
100
|
-
--black-rgb: var(--db-black-rgb);
|
|
101
|
-
}
|
|
102
|
-
|