Skip to content

Commit c1eacd5

Browse files
thatblindgeyethatblindgeye
committed
feat(Chatbot): applied glass and felt tokens
1 parent a106a49 commit c1eacd5

10 files changed

Lines changed: 3191 additions & 2149 deletions

File tree

‎package-lock.json‎

Lines changed: 3053 additions & 2030 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
"@babel/preset-react": "^7.23.3",
4040
"@babel/preset-typescript": "^7.23.3",
4141
"@octokit/rest": "^18.0.0",
42-
"@patternfly/documentation-framework": "6.28.9",
43-
"@patternfly/patternfly": "^6.1.0",
42+
"@patternfly/documentation-framework": "^6.44.0",
43+
"@patternfly/patternfly": "^6.5.2",
4444
"@patternfly/react-icons": "^6.5.1",
45-
"@patternfly/react-table": "^6.1.0",
45+
"@patternfly/react-table": "^6.5.1",
4646
"@swc/core": "1.3.96",
4747
"@testing-library/dom": "^9.3.4",
4848
"@testing-library/jest-dom": "^6.4.2",

‎packages/module/package.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,19 @@
3333
"tag": "prerelease"
3434
},
3535
"dependencies": {
36+
<<<<<<< HEAD
3637
"@patternfly/react-code-editor": "^6.1.0",
3738
"@patternfly/react-core": "^6.1.0",
3839
"@patternfly/react-icons": "^6.5.1",
3940
"@patternfly/react-styles": "^6.1.0",
4041
"@patternfly/react-table": "^6.1.0",
42+
=======
43+
"@patternfly/react-code-editor": "^6.5.1",
44+
"@patternfly/react-core": "^6.5.1",
45+
"@patternfly/react-icons": "^6.5.1",
46+
"@patternfly/react-styles": "^6.5.1",
47+
"@patternfly/react-table": "^6.5.1",
48+
>>>>>>> 5d910d9 (feat(Chatbot): applied glass and felt tokens)
4149
"@segment/analytics-next": "^1.76.0",
4250
"clsx": "^2.1.0",
4351
"path-browserify": "^1.0.1",
@@ -66,8 +74,8 @@
6674
},
6775
"devDependencies": {
6876
"@octokit/rest": "^18.0.0",
69-
"@patternfly/documentation-framework": "6.28.9",
70-
"@patternfly/patternfly": "^6.1.0",
77+
"@patternfly/documentation-framework": "^6.44.0",
78+
"@patternfly/patternfly": "^6.5.2",
7179
"@patternfly/patternfly-a11y": "^5.0.0",
7280
"@types/dom-speech-recognition": "^0.0.4",
7381
"@types/react": "^18.2.61",

‎packages/module/src/Chatbot/Chatbot.scss‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
flex-direction: column;
1010
width: 30rem;
1111
height: 70vh;
12-
background-color: var(
13-
--pf-t--global--background--color--floating--secondary--default,
14-
--pf-t--global--background--color--secondary--default
15-
);
12+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1613
border-radius: var(--pf-t--global--border--radius--medium);
1714
box-shadow: var(--pf-t--global--box-shadow--lg);
1815
font-size: var(--pf-t--global--font--size--md);
@@ -31,9 +28,8 @@
3128
opacity: 1;
3229
transform: translateY(0);
3330
}
34-
// for high contrast support
35-
border: var(--pf-t--global--border--width--high-contrast--regular) solid
36-
var(--pf-t--global--border--color--high-contrast);
31+
32+
border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
3733

3834
// 32 rem is the width of the overlay chatbot plus the insets
3935
// if the screen is smaller, we want to be 100%
@@ -46,24 +42,42 @@
4642
@media screen and (max-height: 518px) {
4743
overflow: auto;
4844
}
45+
46+
&:not(&--default) {
47+
background-color: var(--pf-t--global--background--color--secondary--default);
48+
49+
@at-root :where(.pf-v6-theme-glass) & {
50+
background-color: var(--pf-t--global--background--color--glass--primary--default);
51+
}
52+
}
53+
}
54+
55+
:root:where(.pf-v6-theme-felt):not(.pf-v6-theme-glass) {
56+
.pf-chatbot.pf-chatbot--default {
57+
box-shadow: var(--pf-t--global--box-shadow--md);
58+
}
4959
}
5060

5161
// ============================================================================
5262
// Chatbot Display Mode - Docked
5363
// ============================================================================
5464
.pf-chatbot--docked {
55-
// for high contrast support
5665
border: unset;
57-
border-left: var(--pf-t--global--border--width--high-contrast--regular) solid
58-
var(--pf-t--global--border--color--high-contrast);
66+
border-left: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
5967
inset-block-end: 0;
6068
inset-inline-end: 0;
6169
padding: 0;
6270
height: 100%;
6371
border-radius: 0;
64-
box-shadow: var(--pf-t--global--box-shadow--lg--left);
6572
overflow: inherit;
6673

74+
@at-root :where(.pf-v6-theme-glass) & {
75+
border-left: var(--pf-t--global--border--width--glass--default) solid
76+
var(--pf-t--global--border--color--glass--default);
77+
box-shadow: var(--pf-t--global--box-shadow--md--left);
78+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
79+
}
80+
6781
// 30rem is the width of the docked chatbot
6882
// if the screen is smaller, we want to be 100%
6983
@media screen and (max-width: 30rem) {
@@ -75,9 +89,6 @@
7589
// Chatbot Display Mode - Fullscreen
7690
// ============================================================================
7791
.pf-chatbot--fullscreen {
78-
background-color: var(--pf-t--global--background--color--secondary--default);
79-
80-
// for high contrast support
8192
border: unset;
8293
inset-block-end: 0;
8394
inset-inline-end: 0;
@@ -86,21 +97,27 @@
8697
height: 100%;
8798
border-radius: 0;
8899
box-shadow: none;
100+
101+
@at-root :where(.pf-v6-theme-glass) & {
102+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
103+
}
89104
}
90105

91106
// ============================================================================
92107
// Chatbot Display Mode - Embedded
93108
// ============================================================================
94109
.pf-chatbot--embedded {
95-
background-color: var(--pf-t--global--background--color--secondary--default);
96-
97-
// for high contrast support
98-
border: unset;
99110
position: static;
100111
width: 100%;
101112
min-height: 100%;
102113
border-radius: 0;
103-
box-shadow: none;
114+
box-shadow: var(--pf-t--global--box-shadow--lg);
115+
116+
@at-root :where(.pf-v6-theme-glass) & {
117+
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
118+
box-shadow: var(--pf-t--global--box-shadow--md);
119+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
120+
}
104121
}
105122

106123
.pf-chatbot-container {
@@ -143,7 +160,13 @@
143160
height: 100%;
144161
border-radius: 0;
145162
box-shadow: none;
146-
border-color: var(--pf-t--global--border--color--default);
163+
border-color: var(--pf-t--global--border--color--subtle);
164+
165+
@at-root :where(.pf-v6-theme-glass) & {
166+
border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
167+
box-shadow: var(--pf-t--global--box-shadow--md);
168+
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
169+
}
147170

148171
.pf-chatbot-container {
149172
border-radius: var(--pf-t--global--border--radius--sharp);
@@ -155,7 +178,6 @@
155178
}
156179
}
157180

158-
// for high contrast support
159181
:root:where(.pf-v6-theme-high-contrast) {
160182
.pf-chatbot--drawer {
161183
border: unset;

‎packages/module/src/ChatbotContent/ChatbotContent.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
// ============================================================================
44
.pf-chatbot__content {
55
position: relative;
6-
background-color: var(
7-
--pf-t--global--background--color--floating--secondary--default,
8-
--pf-t--global--background--color--secondary--default
9-
);
6+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
107
overflow-y: auto;
118
overflow: hidden; // needed in Red Hat Developer Hub workspace
129
flex: 1; // needed in Composer AI
@@ -21,6 +18,16 @@
2118
}
2219
}
2320

21+
.pf-chatbot:not(.pf-chatbot--default) {
22+
.pf-chatbot__content {
23+
background-color: var(--pf-t--global--background--color--secondary--default);
24+
25+
@at-root :where(.pf-v6-theme-glass) & {
26+
background-color: var(--pf-t--global--background--color--glass--primary--default);
27+
}
28+
}
29+
}
30+
2431
// ============================================================================
2532
// Chatbot Display Mode - Fullscreen and Embedded
2633
// ============================================================================
@@ -29,7 +36,6 @@
2936
.pf-chatbot--fullscreen,
3037
.pf-chatbot--embedded {
3138
.pf-chatbot__content {
32-
background-color: var(--pf-t--global--background--color--secondary--default);
3339
display: flex;
3440
justify-content: center;
3541
}

‎packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,52 @@
203203
}
204204
}
205205

206+
.pf-chatbot:not(.pf-chatbot--default) .pf-chatbot__history {
207+
&.pf-v6-c-drawer .pf-v6-c-drawer__panel {
208+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
209+
210+
@at-root :where(.pf-v6-theme-glass) & {
211+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
212+
}
213+
}
214+
215+
.pf-v6-c-menu {
216+
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--primary--default);
217+
218+
@at-root :where(.pf-v6-theme-glass) & {
219+
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
220+
}
221+
}
222+
223+
.pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
224+
background-color: var(--pf-t--global--background--color--primary--default);
225+
226+
@at-root :where(.pf-v6-theme-glass) & {
227+
background-color: var(--pf-t--global--background--color--glass--primary--default);
228+
}
229+
}
230+
}
231+
232+
.pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history {
233+
&.pf-v6-c-drawer .pf-v6-c-drawer__panel {
234+
@at-root :where(.pf-v6-theme-glass) & {
235+
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
236+
}
237+
}
238+
239+
.pf-v6-c-menu {
240+
@at-root :where(.pf-v6-theme-glass) & {
241+
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
242+
}
243+
}
244+
245+
.pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
246+
@at-root :where(.pf-v6-theme-glass) & {
247+
background-color: var(--pf-t--global--background--color--floating--default);
248+
}
249+
}
250+
}
251+
206252
// ============================================================================
207253
// Chatbot Display Mode - Docked
208254
// ============================================================================

‎packages/module/src/ChatbotFooter/ChatbotFooter.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66
// ============================================================================
77
.pf-chatbot__footer {
88
--pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
9-
background-color: var(
10-
--pf-t--global--background--color--floating--secondary--default,
11-
--pf-t--global--background--color--secondary--default
12-
);
9+
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1310
display: flex;
1411
flex-direction: column;
1512
row-gap: var(--pf-chatbot__footer--RowGap);
@@ -19,6 +16,17 @@
1916
background-color: var(--pf-t--global--background--color--primary--default);
2017
}
2118
}
19+
20+
.pf-chatbot:not(.pf-chatnot--default) {
21+
.pf-chatbot__footer {
22+
background-color: var(--pf-t--global--background--color--secondary--default);
23+
24+
@at-root :where(.pf-v6-theme-glass) & {
25+
background-color: var(--pf-t--global--background--color--glass--primary--default);
26+
}
27+
}
28+
}
29+
2230
.pf-chatbot__footer-container {
2331
padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
2432
display: flex;
@@ -35,12 +43,6 @@
3543
.pf-chatbot--fullscreen {
3644
.pf-chatbot__footer {
3745
align-items: center;
38-
.pf-v6-c-divider {
39-
display: none;
40-
}
41-
}
42-
.pf-chatbot__footer {
43-
background-color: var(--pf-t--global--background--color--secondary--default);
4446
}
4547

4648
.pf-chatbot__footer-container {

0 commit comments

Comments
 (0)