Fix accessibility issues with dark theme by replacing hardcoded colors with design tokens

Co-authored-by: francinelucca <[email protected]>

Author: Copilot

packages/react/src/Portal/Portal.features.stories.tsx

@@ -101,84 +101,47 @@ export const WithPortalContext = () => {
         <p>This story demonstrates how to use PortalContext to control where Portal content is rendered.</p>
 
         {/* Default Portal */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#f0f8ff', margin: '10px', padding: '10px'}}
-        >
+        <div className={clsx(classes.PortalContainer, classes.DefaultSection)}>
           <strong>Default Portal (no context):</strong>
           {mounted ? (
             <Portal>
-              <div style={{backgroundColor: '#e6f3ff', padding: '8px', border: '1px solid #0366d6'}}>
-                Content in default portal
-              </div>
+              <div className={classes.DefaultPortalContent}>Content in default portal</div>
             </Portal>
           ) : null}
         </div>
 
         {/* Portal with Context */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#fff5f5', margin: '10px', padding: '10px'}}
-        >
+        <div className={clsx(classes.PortalContainer, classes.ContextSection)}>
           <strong>Portal with PortalContext:</strong>
           <PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
             {mounted ? (
               <Portal>
-                <div style={{backgroundColor: '#ffe6e6', padding: '8px', border: '1px solid #d73a49'}}>
-                  Content in custom portal (via PortalContext)
-                </div>
+                <div className={classes.ContextPortalContent}>Content in custom portal (via PortalContext)</div>
               </Portal>
             ) : null}
           </PortalContext.Provider>
         </div>
 
         {/* Override context with containerName prop */}
-        <div
-          className={clsx(classes.PortalContainer, classes.InnerContainer)}
-          style={{backgroundColor: '#f0fff4', margin: '10px', padding: '10px'}}
-        >
+        <div className={clsx(classes.PortalContainer, classes.OverrideSection)}>
           <strong>Context + containerName prop override:</strong>
           <PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
             {mounted ? (
               <Portal containerName="override-portal">
-                <div style={{backgroundColor: '#e6ffe6', padding: '8px', border: '1px solid #28a745'}}>
-                  Content overriding context with containerName prop
-                </div>
+                <div className={classes.OverridePortalContent}>Content overriding context with containerName prop</div>
               </Portal>
             ) : null}
           </PortalContext.Provider>
         </div>
       </div>
 
       {/* Custom portal containers */}
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '10px',
-          left: '10px',
-          backgroundColor: '#fffbf0',
-          padding: '10px',
-          border: '2px solid #f66a0a',
-          borderRadius: '4px',
-          maxWidth: '200px',
-        }}
-      >
+      <div className={classes.CustomPortalContainer}>
         <strong>Custom Portal Container:</strong>
         <div ref={customContainerRef} />
       </div>
 
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '10px',
-          right: '10px',
-          backgroundColor: '#f0fff0',
-          padding: '10px',
-          border: '2px solid #28a745',
-          borderRadius: '4px',
-          maxWidth: '200px',
-        }}
-      >
+      <div className={classes.OverridePortalContainer}>
         <strong>Override Portal Container:</strong>
         <div ref={overrideContainerRef} />
       </div>

packages/react/src/Portal/Portal.stories.module.css

@@ -9,3 +9,65 @@
 .InnerContainer {
   background-color: var(--bgColor-success-muted);
 }
+
+/* Portal Context Story Styles */
+.DefaultSection {
+  background-color: var(--bgColor-accent-muted);
+  margin: var(--base-size-8);
+  padding: var(--base-size-8);
+}
+
+.ContextSection {
+  background-color: var(--bgColor-attention-muted);
+  margin: var(--base-size-8);
+  padding: var(--base-size-8);
+}
+
+.OverrideSection {
+  background-color: var(--bgColor-success-muted);
+  margin: var(--base-size-8);
+  padding: var(--base-size-8);
+}
+
+.DefaultPortalContent {
+  background-color: var(--bgColor-accent-emphasis);
+  padding: var(--base-size-4);
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-emphasis);
+  color: var(--fgColor-onEmphasis);
+}
+
+.ContextPortalContent {
+  background-color: var(--bgColor-attention-emphasis);
+  padding: var(--base-size-4);
+  border: var(--borderWidth-thin) solid var(--borderColor-attention-emphasis);
+  color: var(--fgColor-onEmphasis);
+}
+
+.OverridePortalContent {
+  background-color: var(--bgColor-success-emphasis);
+  padding: var(--base-size-4);
+  border: var(--borderWidth-thin) solid var(--borderColor-success-emphasis);
+  color: var(--fgColor-onEmphasis);
+}
+
+.CustomPortalContainer {
+  position: fixed;
+  bottom: var(--base-size-8);
+  left: var(--base-size-8);
+  background-color: var(--bgColor-neutral-muted);
+  padding: var(--base-size-8);
+  border: var(--borderWidth-thick) solid var(--borderColor-attention-emphasis);
+  border-radius: var(--borderRadius-medium);
+  max-width: 200px;
+}
+
+.OverridePortalContainer {
+  position: fixed;
+  bottom: var(--base-size-8);
+  right: var(--base-size-8);
+  background-color: var(--bgColor-neutral-muted);
+  padding: var(--base-size-8);
+  border: var(--borderWidth-thick) solid var(--borderColor-success-emphasis);
+  border-radius: var(--borderRadius-medium);
+  max-width: 200px;
+}