chore: Apply one-theme panel colors

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -130,6 +130,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -1023,6 +1024,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-item-selected": "#12293b",
   "color-background-layout-main": "#16191f",
   "color-background-layout-mobile-panel": "#2a2e33",
+  "color-background-layout-panel": "#2a2e33",
   "color-background-layout-panel-content": "#2a2e33",
   "color-background-layout-panel-hover": "#414750",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -1916,6 +1918,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -2809,6 +2812,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -3702,6 +3706,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-item-selected": "#f0fbff",
   "color-background-layout-main": "#ffffff",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#ebebf0",
   "color-background-layout-toggle-active": "#424650",
@@ -4595,6 +4600,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#f0fbff",
   "color-background-layout-main": "#ffffff",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#ebebf0",
   "color-background-layout-toggle-active": "#424650",
@@ -5488,6 +5494,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#001129",
   "color-background-layout-main": "#0f141a",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#161d26",
   "color-background-layout-panel-content": "#161d26",
   "color-background-layout-panel-hover": "#333843",
   "color-background-layout-toggle-active": "#424650",
@@ -6381,6 +6388,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#001129",
   "color-background-layout-main": "#161d26",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#161d26",
   "color-background-layout-panel-content": "#161d26",
   "color-background-layout-panel-hover": "#333843",
   "color-background-layout-toggle-active": "#424650",

src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap

@@ -455,6 +455,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -3846,6 +3853,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -7237,6 +7251,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -10628,6 +10649,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -14019,6 +14047,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -17410,6 +17445,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#16191f",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#232f3e",
+            "light": "#232f3e",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -20801,6 +20843,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#f2f3f3",
       },
     },
+    "color-background-layout-panel": {
+      "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+      "$value": {
+        "dark": "#2a2e33",
+        "light": "#ffffff",
+      },
+    },
     "color-background-layout-toggle-active": {
       "$description": "The background color of the app layout toggle button when it's active.",
       "$value": {
@@ -24197,6 +24246,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -27588,6 +27644,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#161d26",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -30979,6 +31042,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#fcfcfd",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -34370,6 +34440,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -37761,6 +37838,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -41152,6 +41236,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -44543,6 +44634,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#0f141a",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -47934,6 +48032,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#161d26",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -51325,6 +51430,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#ffffff",
       },
     },
+    "color-background-layout-panel": {
+      "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+      "$value": {
+        "dark": "#161d26",
+        "light": "#ffffff",
+      },
+    },
     "color-background-layout-toggle-active": {
       "$description": "The background color of the app layout toggle button when it's active.",
       "$value": {

src/app-layout/visual-refresh-toolbar/drawer/styles.scss

@@ -28,7 +28,7 @@ $ai-drawer-heider-height: 42px;
 .drawer {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   display: grid;
   grid-template-columns: awsui.$space-m 1fr;
   inline-size: var(#{custom-props.$drawerSize});

src/app-layout/visual-refresh-toolbar/navigation/styles.scss

@@ -12,7 +12,7 @@
 .navigation-container {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   overflow-x: hidden;
   word-wrap: break-word;

src/app-layout/visual-refresh/drawers.scss

@@ -22,6 +22,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
@@ -66,6 +72,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-multiple-triggers.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
     inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
@@ -125,6 +137,10 @@
   pointer-events: auto;
   word-wrap: break-word;
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;

src/app-layout/visual-refresh/drawers.tsx

@@ -4,6 +4,7 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 
 import { InternalButton } from '../../button/internal';
 import customCssProps from '../../internal/generated/custom-css-properties';
@@ -109,6 +110,7 @@ function ActiveDrawer() {
       className={clsx(styles.drawer, {
         [styles['is-drawer-open']]: activeDrawerId,
         [styles.unfocusable]: isUnfocusable,
+        [styles['one-theme']]: isThemeActive(Theme.OneTheme),
         [testutilStyles['active-drawer']]: activeDrawerId,
         [testutilStyles.tools]: isToolsDrawer,
       })}
@@ -233,6 +235,7 @@ function DesktopTriggers() {
       className={clsx(styles['drawers-desktop-triggers-container'], {
         [styles['has-multiple-triggers']]: hasMultipleTriggers,
         [styles['has-open-drawer']]: hasOpenDrawer,
+        [styles['one-theme']]: isThemeActive(Theme.OneTheme),
       })}
       aria-label={drawersAriaLabel}
       ref={triggersContainerRef}

src/app-layout/visual-refresh/navigation.scss

@@ -82,7 +82,7 @@ nav.show-navigation {
 }
 
 nav.navigation {
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   block-size: 100%;
   overflow-x: hidden;

src/app-layout/visual-refresh/tools.scss

@@ -95,6 +95,10 @@ viewport size and state of the Tools drawer.
     }
   }
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   /*
   A non-semantic node is added with a fixed width equal to the final Tools
   width. This will create the visual appearance of horizontal movement and