fix: button and toggle tokens (#143)

* fix: button and toggle tokens * fix some erroneous dark styles
patternfly · Sep 17, 2024 · df66f52 · df66f52
1 parent a2846ca
commit df66f52
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 92 deletions.
diff --git a/packages/module/src/ChatbotToggle/ChatbotToggle.scss b/packages/module/src/ChatbotToggle/ChatbotToggle.scss
@@ -5,9 +5,9 @@
   position: fixed;
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--chatbot-toggle--background);
+  background-color: var(--pf-t--global--background--color--inverse--default);
   border-radius: var(--pf-t--global--border--radius--pill);
-  color: var(--pf-t--chatbot-toggle--color);
+  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
   padding: var(--pf-t--global--spacer--md);
   width: 3rem;
   height: 3rem;
@@ -22,6 +22,5 @@
 
   // Icon
   svg { width: var(--pf-t--global--spacer--lg); height: var(--pf-t--global--spacer--lg); }
-  svg path:first-child { fill: var(--pf-t--chatbot-toggle--icon--fill); stroke: var(--pf-t--chatbot-toggle--icon--stroke); }
 }
 
diff --git a/packages/module/src/ChatbotToggle/ChatbotToggle.tsx b/packages/module/src/ChatbotToggle/ChatbotToggle.tsx
@@ -26,15 +26,15 @@ export interface ChatbotToggleProps extends ButtonProps {
 const ChatIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
     <path
-      fill="#fff"
-      stroke="#fff"
+      fill="var(--pf-t--global--icon--color--inverse)"
+      stroke="var(--pf-t--global--icon--color--inverse)"
       strokeLinejoin="round"
       strokeWidth=".75"
       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"
     />
     <path
-      fill="#999"
-      stroke="#999"
+      fill="var(--pf-t--global--text--color--inverse)"
+      stroke="var(--pf-t--global--text--color--inverse)"
       strokeLinejoin="round"
       strokeWidth=".75"
       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"

diff --git a/packages/module/src/Message/Message.scss b/packages/module/src/Message/Message.scss
@@ -2,7 +2,7 @@
 // Chatbot Message
 // ============================================================================
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--secondary--hover);
+  --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
   --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
   --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
   --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);

diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss
@@ -34,34 +34,17 @@
   --pf-t--chatbot--jump--background: var(--pf-t--chatbot--background);
   --pf-t--chatbot--jump--background--hover: var(--pf-t--color--white);
 
-  --pf-t--chatbot-toggle--background: var(--pf-t--color--black);
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--90);
-  --pf-t--chatbot-toggle--color: var(--pf-t--color--white);
-  --pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--white);
-  --pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--white);
+  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
 
   --pf-t--chatbot--timing-function: cubic-bezier(0.77,0,0.175,1);
 
-  // ============================================================================
-  // Chatbot Custom Dark Theme Tokens
-  // ============================================================================
-  .pf-v6-theme-dark {
-
-    --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
-    --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-    --pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
-
-    --pf-t--chatbot-toggle--background: var(--pf-t--color--white);
-    --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--10);
-    --pf-t--chatbot-toggle--color: var(--pf-t--color--black);
-    --pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--black);
-    --pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--black);
-  }
-
+  --pf-t--chatbot--blue-icon--background--color--hover: rgba(185, 218, 252, .25); // --pf-t--global--color--nonstatus--blue--default @ 25%
+  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
 
   // ============================================================================
   // Chatbot Default tokens using PF semantic tokens
   // ============================================================================
+  --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
 
   --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
   --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
@@ -72,70 +55,20 @@
   --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
 
   --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
-  --pf-t--chatbot--blue-icon--background--color--hover: rgba(224, 240, 255, .5); // --pf-t--color--blue--10 @ 50%
-
 }
 
-:where(:root) {
-  // ============================================================================
-  // Chatbot Custom Default Tokens
-  // ============================================================================
+// ============================================================================
+// Chatbot Custom Dark Theme Tokens
+// ============================================================================
+:where(.pf-v6-theme-dark) {
+  --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
+  --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
+  --pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
 
-  --pf-t--chatbot--heading--font-family: var(
-      --pf-v6-c-content--heading--FontFamily,
-      redhatdisplayvf,
-      redhatdisplay,
-      helvetica,
-      arial,
-      sans-serif
-  );
-
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
-  --pf-t--chatbot--jump--background: var(--pf-t--chatbot--background);
-  --pf-t--chatbot--jump--background--hover: var(--pf-t--color--white);
+  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
 
-  --pf-t--chatbot-toggle--background: var(--pf-t--color--black);
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--90);
-  --pf-t--chatbot-toggle--color: var(--pf-t--color--white);
-  --pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--white);
-  --pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--white);
-
-  --pf-t--chatbot--timing-function: cubic-bezier(0.77,0,0.175,1);
-
-  // ============================================================================
-  // Chatbot Custom Dark Theme Tokens
-  // ============================================================================
-  .pf-v6-theme-dark {
-
-    --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
-    --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-    --pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
-
-    --pf-t--chatbot-toggle--background: var(--pf-t--color--white);
-    --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--10);
-    --pf-t--chatbot-toggle--color: var(--pf-t--color--black);
-    --pf-t--chatbot-toggle--icon--fill: var(--pf-t--color--black);
-    --pf-t--chatbot-toggle--icon--stroke: var(--pf-t--color--black);
-  }
-
-
-  // ============================================================================
-  // Chatbot Default tokens using PF semantic tokens
-  // ============================================================================
-
-  --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
-  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
-  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
-
-  --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
-  --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
-  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
-
-  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
-  --pf-t--chatbot--blue-icon--background--color--hover: rgba(224, 240, 255, .5); // --pf-t--color--blue--10 @ 50%
+  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
+  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
 
 }
 
@@ -144,10 +77,11 @@
   right: auto !important;
 }
 
-/* This is for the Code Modals, so they act like they're part of the 
-/* chatbot. The PF modal doesn't allow us to change the position in 
-/* a more targeted way, because you can only add classes onto the 
+/* This is for the Code Modals, so they act like they're part of the
+/* chatbot. The PF modal doesn't allow us to change the position in
+/* a more targeted way, because you can only add classes onto the
 /* dialog itself.  */
 .pf-v6-c-backdrop {
   position: static;
 }
+