From fe53306933d46f8b53485dc681cdaabd99c2ece4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 12 Sep 2025 17:35:11 +0000
Subject: [PATCH 1/2] Initial plan


From 93dcd00d7b7885100ef62709cf79f03d53da89ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 12 Sep 2025 17:48:48 +0000
Subject: [PATCH 2/2] Fix accessibility issues with dark theme by replacing
 hardcoded colors with design tokens

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
---
 .../src/Portal/Portal.features.stories.tsx    | 53 +++-------------
 .../src/Portal/Portal.stories.module.css      | 62 +++++++++++++++++++
 2 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/packages/react/src/Portal/Portal.features.stories.tsx b/packages/react/src/Portal/Portal.features.stories.tsx
index 6e5cab74bd3..4a91b0cad4d 100644
--- a/packages/react/src/Portal/Portal.features.stories.tsx
+++ b/packages/react/src/Portal/Portal.features.stories.tsx
@@ -101,49 +101,34 @@ 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>
@@ -151,34 +136,12 @@ export const WithPortalContext = () => {
       </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>
diff --git a/packages/react/src/Portal/Portal.stories.module.css b/packages/react/src/Portal/Portal.stories.module.css
index 73850efb469..36163852772 100644
--- a/packages/react/src/Portal/Portal.stories.module.css
+++ b/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;
+}