Skip to content

Commit df66f52

Browse files
nicolethoennicolethoen
authored
fix: button and toggle tokens (#143)
* fix: button and toggle tokens * fix some erroneous dark styles
1 parent a2846ca commit df66f52

File tree

4 files changed

+25
-92
lines changed

4 files changed

+25
-92
lines changed

‎packages/module/src/ChatbotToggle/ChatbotToggle.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
position: fixed;
66
inset-block-end: var(--pf-t--global--spacer--md);
77
inset-inline-end: var(--pf-t--global--spacer--md);
8-
background-color: var(--pf-t--chatbot-toggle--background);
8+
background-color: var(--pf-t--global--background--color--inverse--default);
99
border-radius: var(--pf-t--global--border--radius--pill);
10-
color: var(--pf-t--chatbot-toggle--color);
10+
--pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
1111
padding: var(--pf-t--global--spacer--md);
1212
width: 3rem;
1313
height: 3rem;
@@ -22,6 +22,5 @@
2222

2323
// Icon
2424
svg { width: var(--pf-t--global--spacer--lg); height: var(--pf-t--global--spacer--lg); }
25-
svg path:first-child { fill: var(--pf-t--chatbot-toggle--icon--fill); stroke: var(--pf-t--chatbot-toggle--icon--stroke); }
2625
}
2726

‎packages/module/src/ChatbotToggle/ChatbotToggle.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ export interface ChatbotToggleProps extends ButtonProps {
2626
const ChatIcon = () => (
2727
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
2828
<path
29-
fill="#fff"
30-
stroke="#fff"
29+
fill="var(--pf-t--global--icon--color--inverse)"
30+
stroke="var(--pf-t--global--icon--color--inverse)"
3131
strokeLinejoin="round"
3232
strokeWidth=".75"
3333
d="M3.577 14.382c0 .198.12.38.31.46l.19.04a.492.492 0 0 0 .349-.143l3.028-3.028h8.513a.489.489 0 0 0 .492-.492V2.491A.489.489 0 0 0 15.967 2H1.691a.489.489 0 0 0-.492.491v8.728c0 .135.056.262.143.349a.498.498 0 0 0 .349.143h1.878v2.663h.008v.008ZM2.19 10.72V2.983h13.278v7.729H7.24a.512.512 0 0 0-.35.143l-2.322 2.322v-1.974a.498.498 0 0 0-.142-.348.492.492 0 0 0-.35-.143H2.19v.008Z"
3434
/>
3535
<path
36-
fill="#999"
37-
stroke="#999"
36+
fill="var(--pf-t--global--text--color--inverse)"
37+
stroke="var(--pf-t--global--text--color--inverse)"
3838
strokeLinejoin="round"
3939
strokeWidth=".75"
4040
d="M22.301 9.135h-3.963a.489.489 0 0 0-.492.491c0 .27.222.492.492.492h3.472v7.737h-1.88a.404.404 0 0 0-.348.134.492.492 0 0 0-.143.35v1.973l-2.322-2.323a.492.492 0 0 0-.349-.142H8.532v-4.265a.489.489 0 0 0-.492-.492.494.494 0 0 0-.491.492v4.756c0 .277.222.492.491.492h8.514l3.028 3.028a.492.492 0 0 0 .349.142l.19-.04a.502.502 0 0 0 .31-.459V18.83h1.878c.111-.008.262-.048.349-.135a.491.491 0 0 0 .142-.349v-8.72a.489.489 0 0 0-.491-.491h-.008Z"

‎packages/module/src/Message/Message.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Chatbot Message
33
// ============================================================================
44
.pf-chatbot__message {
5-
--pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--secondary--hover);
5+
--pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--action--plain--hover); // needs to be updated to the correct semantic token when it exists
66
--pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
77
--pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
88
--pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);

‎packages/module/src/main.scss‎

Lines changed: 18 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,17 @@
3434
--pf-t--chatbot--jump--background: var(--pf-t--chatbot--background);
3535
--pf-t--chatbot--jump--background--hover: var(--pf-t--color--white);
3636

37-
--pf-t--chatbot-toggle--background: var(--pf-t--color--black);
38-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--90);
39-
--pf-t--chatbot-toggle--color: var(--pf-t--color--white);
40-
--pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--white);
41-
--pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--white);
37+
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
4238

4339
--pf-t--chatbot--timing-function: cubic-bezier(0.77,0,0.175,1);
4440

45-
// ============================================================================
46-
// Chatbot Custom Dark Theme Tokens
47-
// ============================================================================
48-
.pf-v6-theme-dark {
49-
50-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
51-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
52-
--pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
53-
54-
--pf-t--chatbot-toggle--background: var(--pf-t--color--white);
55-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--10);
56-
--pf-t--chatbot-toggle--color: var(--pf-t--color--black);
57-
--pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--black);
58-
--pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--black);
59-
}
60-
41+
--pf-t--chatbot--blue-icon--background--color--hover: rgba(185, 218, 252, .25); // --pf-t--global--color--nonstatus--blue--default @ 25%
42+
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
6143

6244
// ============================================================================
6345
// Chatbot Default tokens using PF semantic tokens
6446
// ============================================================================
47+
--pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
6548

6649
--pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
6750
--pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
@@ -72,70 +55,20 @@
7255
--pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
7356

7457
--pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
75-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
76-
--pf-t--chatbot--blue-icon--background--color--hover: rgba(224, 240, 255, .5); // --pf-t--color--blue--10 @ 50%
77-
7858
}
7959

80-
:where(:root) {
81-
// ============================================================================
82-
// Chatbot Custom Default Tokens
83-
// ============================================================================
60+
// ============================================================================
61+
// Chatbot Custom Dark Theme Tokens
62+
// ============================================================================
63+
:where(.pf-v6-theme-dark) {
64+
--pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
65+
--pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
66+
--pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
8467

85-
--pf-t--chatbot--heading--font-family: var(
86-
--pf-v6-c-content--heading--FontFamily,
87-
redhatdisplayvf,
88-
redhatdisplay,
89-
helvetica,
90-
arial,
91-
sans-serif
92-
);
93-
94-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
95-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
96-
--pf-t--chatbot--jump--background: var(--pf-t--chatbot--background);
97-
--pf-t--chatbot--jump--background--hover: var(--pf-t--color--white);
68+
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
9869

99-
--pf-t--chatbot-toggle--background: var(--pf-t--color--black);
100-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--90);
101-
--pf-t--chatbot-toggle--color: var(--pf-t--color--white);
102-
--pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--white);
103-
--pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--white);
104-
105-
--pf-t--chatbot--timing-function: cubic-bezier(0.77,0,0.175,1);
106-
107-
// ============================================================================
108-
// Chatbot Custom Dark Theme Tokens
109-
// ============================================================================
110-
.pf-v6-theme-dark {
111-
112-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
113-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
114-
--pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
115-
116-
--pf-t--chatbot-toggle--background: var(--pf-t--color--white);
117-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--10);
118-
--pf-t--chatbot-toggle--color: var(--pf-t--color--black);
119-
--pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--black);
120-
--pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--black);
121-
}
122-
123-
124-
// ============================================================================
125-
// Chatbot Default tokens using PF semantic tokens
126-
// ============================================================================
127-
128-
--pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
129-
--pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
130-
--pf-t--chatbot--border: var(--pf-t--global--border--color--default);
131-
132-
--pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
133-
--pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
134-
--pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
135-
136-
--pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
137-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
138-
--pf-t--chatbot--blue-icon--background--color--hover: rgba(224, 240, 255, .5); // --pf-t--color--blue--10 @ 50%
70+
--pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
71+
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
13972

14073
}
14174

@@ -144,10 +77,11 @@
14477
right: auto !important;
14578
}
14679

147-
/* This is for the Code Modals, so they act like they're part of the
148-
/* chatbot. The PF modal doesn't allow us to change the position in
149-
/* a more targeted way, because you can only add classes onto the
80+
/* This is for the Code Modals, so they act like they're part of the
81+
/* chatbot. The PF modal doesn't allow us to change the position in
82+
/* a more targeted way, because you can only add classes onto the
15083
/* dialog itself. */
15184
.pf-v6-c-backdrop {
15285
position: static;
15386
}
87+

0 commit comments

Comments
 (0)