Skip to content

Commit 79b03ff

Browse files
mcokermcoker
committed
chore: remove placeholder vars, add some code/comments
1 parent 1dbab57 commit 79b03ff

File tree

4 files changed

+34
-59
lines changed

4 files changed

+34
-59
lines changed

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

Lines changed: 9 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -45,61 +45,6 @@
4545
}
4646
}
4747

48-
// Glass tokens from core
49-
:root {
50-
// Glass theme off base. These are reused.
51-
--pf-t--global--background--color--glass--filter--base: none;
52-
--pf-t--global--background--color--glass--opacity--base: 1;
53-
--pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
54-
55-
// Glass theme on. In the root scope so they can be themed on :root
56-
--pf-t--global--light--glass--background--color--glass--color: #ffffff;
57-
--pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
58-
--pf-t--global--light--glass--background--color--glass--opacity: 85%;
59-
--pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
60-
--pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
61-
--pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
62-
--pf-t--global--dark--glass--background--color--glass--opacity: 85%;
63-
--pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
64-
65-
// Glass light theme
66-
--pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
67-
--pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
68-
--pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
69-
70-
// Glass dark theme
71-
&:where(.pf-v6-theme-dark) {
72-
--pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
73-
--pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
74-
--pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
75-
}
76-
}
77-
78-
// Glass chatbot styles
79-
.pf-chatbot {
80-
background-color: var(--pf-t--global--background--color--glass--default);
81-
backdrop-filter: var(--pf-t--global--background--color--glass--filter);
82-
border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--alt);
83-
84-
#{&} {
85-
&__content,
86-
&__header,
87-
&__footer {
88-
background-color: transparent;
89-
}
90-
}
91-
}
92-
93-
#ws-demo-e-overview-basic-chatbot {
94-
background-size: cover;
95-
background-image: url(https://staging.patternfly.org/assets/images/compass--wallpaper-light.png);
96-
97-
.pf-v6-theme-dark & {
98-
background-image: url(https://staging.patternfly.org/assets/images/compass--wallpaper-dark.png);
99-
}
100-
}
101-
// End Glass style stuff
102-
10348
// ============================================================================
10449
// Chatbot Display Mode - Docked
10550
// ============================================================================
@@ -216,3 +161,12 @@
216161
.pf-chatbot.pf-m-compact {
217162
font-size: var(--pf-t--global--font--size--sm);
218163
}
164+
165+
// ============================================================================
166+
// Glass styles
167+
// ============================================================================
168+
:where(.pf-v6-theme-glass) .pf-chatbot {
169+
background-color: var(--pf-t--global--background--color--glass--default);
170+
backdrop-filter: var(--pf-t--global--background--color--glass--filter);
171+
border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--alt);
172+
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
&.pf-m-primary {
17-
background-color: var(--pf-t--global--background--color--primary--default);
17+
background-color: var(--pf-t--global--background--color--primary--default); // TODO - what about this in glass?
1818
}
1919
}
2020

@@ -31,3 +31,10 @@
3131
}
3232
}
3333
}
34+
35+
// ============================================================================
36+
// Chatbot glass theme
37+
// ============================================================================
38+
:where(.pf-v6-theme-glass) .pf-chatbot__content {
39+
background-color: transparent;
40+
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
position: relative; // this is so focus ring on parent chatbot doesn't include footer
1414

1515
&.pf-m-primary {
16-
background-color: var(--pf-t--global--background--color--primary--default);
16+
background-color: var(--pf-t--global--background--color--primary--default); // TODO - what about this in glass?
1717
}
1818
}
1919
.pf-chatbot__footer-container {
@@ -83,3 +83,10 @@
8383
}
8484
}
8585
}
86+
87+
// ============================================================================
88+
// Chatbot glass theme
89+
// ============================================================================
90+
:where(.pf-v6-theme-glass) .pf-chatbot__footer {
91+
background-color: transparent;
92+
}

‎packages/module/src/ChatbotHeader/ChatbotHeader.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
.pf-chatbot--fullscreen,
6363
.pf-chatbot--embedded {
6464
.pf-chatbot__header {
65-
background-color: var(--pf-t--global--background--color--primary--default);
65+
background-color: var(--pf-t--global--background--color--primary--default); // TODO - what about this in glass?
6666
}
6767
.pf-chatbot__header__divider {
6868
display: none;
@@ -76,7 +76,7 @@
7676
.pf-chatbot--drawer,
7777
.pf-chatbot--docked {
7878
.pf-chatbot__header {
79-
background-color: var(--pf-t--global--background--color--secondary--default);
79+
background-color: var(--pf-t--global--background--color--secondary--default); // TODO - what about this in glass?
8080
}
8181
}
8282

@@ -181,3 +181,10 @@
181181
}
182182
}
183183
}
184+
185+
// ============================================================================
186+
// Chatbot glass theme
187+
// ============================================================================
188+
:where(.pf-v6-theme-glass) .pf-chatbot__header {
189+
background-color: transparent;
190+
}

0 commit comments

Comments
 (0)